@charset "uft-8";

/* 글씨들 아래에서 위로 올라오는 효과 */
.ani{opacity:0; transition:0.6s;}

.divide_bg{background-color:rgba(0,0,0,0.1);}

/* 패스 */
.pass_wrap{ padding: 20px 0 50px 0;}

.ticket_wrap{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center;}
.ticket_area{ position: relative;}

.ticket_bg{ background-position: center center; background-repeat: no-repeat; background-size: contain; width: 320px; height: 151px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.ticket_pirce .line{ text-decoration: line-through;}

.ticket_percent{ position: absolute; text-align: center; border-radius: 50%; width: 45px; height: 45px; line-height: 45px;}

/* ticket_wrap.top */
.ticket_wrap.top{ margin-bottom: 30px; color: #071b3e;}

.ticket_bg.white{ background-image: url(../images/ticket_white.png);}

.ticket_2_img.zone{margin-right:0;}

.ticket_wrap.top .ticket_img{ margin-right: 10px;}
.ticket_wrap.top .ticket_img strong{ display: block;}
.ticket_wrap.top .ticket_logo{ margin: 10px 0; width: 80px; max-width: 199px;}
.ticket_wrap.top .ticket_img p{ font-size: 12px; line-height: 1.1;}
.ticket_wrap.top .ticket_img p span{ display: block;}
.ticket_wrap.top .navy_btn{ margin: 5px auto 0; width: 100px; height: 30px; line-height: 27px; font-size: 14px; border-radius: 16px;}

.ticket_wrap.top .ticket_pirce .line{ font-size: 18px;}

.down_arrow_full_navy{ margin: 5px 0;}
.down_arrow_full_navy img{ width: 13px; max-width: 13px;}

.black_btn{ margin: 0 auto 10px; width: 120px; height: 40px; line-height: 40px; font-size: 17px; font-weight: 700; color: #fff; background-color: #000; border-radius: 16px;}

.ticket_wrap.top .ticket_pirce strong{ font-size: 18px;}
.ticket_wrap.top .ticket_pirce p{ margin-top: 10px; font-size: 12px; color: #999;}

.ticket_wrap.top .ticket_percent{ right: -5%; top: -13%; color: #fff; background-color: #739afb;}
.ticket_wrap.top .ticket_percent span{ font-size: 14px;}

/* ticket_wrap.bottom */
.ticket_wrap.bottom{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; color: #fff;}
.ticket_wrap.bottom .ticket_area{ margin-bottom: 20px;}
.ticket_wrap.bottom .ticket_area:last-child{ margin-bottom: 0;}

.ticket_bg.blue{ background-image: url(../images/ticket_blue.png);}

.ticket_wrap.bottom .ticket_img{ margin-right: 20px;}
.ticket_wrap.bottom .ticket_img p{ font-size: 12px;}
.ticket_wrap.bottom .ticket_1_img{ margin: 10px 0; width: 60px; max-width: 103px;}

.white_blue_btn{ width: 90px; height: 27px; line-height: 25px; font-size: 13px; color: #739afb; border-radius: 16px; background-color: #fff;}
.white_blue_btn.more{ transition: all 0.2s; cursor: pointer;}
.white_blue_btn.more:hover{ color: #fff; background-color: #071b3e;}
.white_blue_btn.more.active{ color: #fff; background-color: #071b3e;}

.white_blue_btn.price{ margin: 0 auto 8px; width: 120px; height: 34px; line-height: 34px; font-size: 18px; border-radius: 16px;}

.down_arrow_full_white{ margin: 5px 0;}
.down_arrow_full_white img{ width: 10px; max-width: 10px;}

.ticket_wrap.bottom .ticket_pirce p{ margin-top: 10px; font-size: 12px;}

.ticket_wrap.bottom .ticket_percent{ right: 2%; top: 3%; color: #739afb; background-color: #fff;}

.white_black_btn{ margin: 12px auto 0; width: 100px; height: 40px; line-height: 40px; text-align: center; color: #000; font-weight: 700; background-color: #fff; border-radius: 20px; transition: all 0.2s; cursor: pointer;}
.white_black_btn:hover{ color: #fff; background-color: #071b3e;}
.white_black_btn.active{ color: #fff; background-color: #071b3e;}

@media all and (min-width: 640px){    
    /* ticket_wrap.top */
    .ticket_wrap.top{ margin-bottom: 50px;}

    .ticket_bg.white{ width: 400px; height: 189px;}
    
    .ticket_2_img.zone{margin-right:0;}
    
    .ticket_wrap.top .ticket_img{ margin-right: 20px;}
    .ticket_wrap.top .ticket_img strong{ font-size: 18px;}
    .ticket_wrap.top .ticket_logo{ margin: 15px 0; width: 100px;}
    .ticket_wrap.top .ticket_img p{ font-size: 14px;}
    .ticket_wrap.top .ticket_img p span{ display: inline-block;}
    .ticket_wrap.top .navy_btn{ margin: 10px auto 0; height: 35px; line-height: 33px;}
    
    .ticket_wrap.top .ticket_pirce .line{ font-size: 20px;}
    
    .down_arrow_full_navy{ margin: 10px 0;}
    
    .black_btn{ width: 130px;}
    
    .ticket_wrap.top .ticket_pirce p{ font-size: 13px;}
    
    .ticket_wrap.top .ticket_percent{ right: 2%; top: 2%;}
    
    /* ticket_wrap.bottom */
    .ticket_wrap.bottom .ticket_area{ margin: 10px;}

    .ticket_wrap.bottom .ticket_img p{ font-size: 13px;}
}
@media all and (min-width: 768px){
    
}
@media all and (min-width: 960px){
    .ticket_wrap.bottom .ticket_img p{ font-size: 14px;}
}
@media all and (min-width: 1024px){
    /* ticket_wrap.top */
    .ticket_wrap.top{ margin-bottom: 30px;}

    .ticket_bg.white{ width: 500px; height: 236px;}

    .ticket_wrap.top .ticket_img{ margin-right: 15px;}
    .ticket_wrap.top .ticket_img strong{ font-size: 20px;}
    .ticket_wrap.top .ticket_logo{ margin: 22px 0; width: 130px;}
    .ticket_wrap.top .ticket_img p{ font-size: 16px;}
    .ticket_wrap.top .navy_btn{ width: 120px; height: 40px; line-height: 36px; font-size: 16px;}

    .ticket_wrap.top .ticket_pirce .line{ font-size: 22px;}

    .black_btn{ margin-bottom: 20px; width: 180px; height: 42px; line-height: 42px; font-size: 24px;}

    .ticket_wrap.top .ticket_pirce strong{ font-size: 20px;}
    .ticket_wrap.top .ticket_pirce p{ margin-top: 20px; font-size: 15px;}

    .ticket_wrap.top .ticket_percent{ width: 60px; height: 60px; line-height: 56px; font-size: 26px; font-weight: 700;}
    .ticket_wrap.top .ticket_percent span{ font-size: 16px;}

    .down_arrow_full_navy{ margin: 10px 0;}

    /* ticket_wrap.bottom */
    .ticket_wrap.bottom{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
    
    .ticket_wrap.bottom .ticket_area{ margin: 0;}

    .ticket_wrap.bottom .ticket_1_img{ margin: 13px 0;}

    .white_blue_btn{ width: 80px; font-size: 12px; border-radius: 13px;}

    .ticket_wrap.bottom .ticket_pirce{ text-align: center;}
    .ticket_wrap.bottom .ticket_pirce p{ margin-top: 8px; font-size: 12px;}

    .down_arrow_full_white{ margin: 3px 0;}

    .white_black_btn{ margin: 22px auto 0; width: 140px; height: 42px; line-height: 42px; font-size: 18px;}
}
@media all and (min-width: 1280px){
    /* ticket_wrap.bottom */
    .ticket_wrap.bottom .ticket_img{ margin-right: 30px;}
    .ticket_wrap.bottom .ticket_pirce p{ font-size: 13px;}

    .down_arrow_full_white{ margin: 5px 0;}

    .white_black_btn{ width: 170px; height: 45px; line-height: 45px; font-size: 20px;}
}
@media all and (min-width: 1440px){
    /* ticket_wrap.top */
    .ticket_wrap.top{ margin-bottom: 50px;}

    .ticket_bg.white{ width: 700px; height: 331px;}
    
    .ticket_2_img.zone{margin-right:10px; width:80px;}
    .ticket_wrap.top .ticket_img{ margin-right: 100px;}
    .ticket_wrap.top .ticket_img strong{ font-size: 22px;}
    .ticket_wrap.top .ticket_logo{ width: 199px;}
    .ticket_wrap.top .navy_btn{ width: 160px; height: 49px; line-height: 45px; font-size: 21px; border-radius: 20px;}

    .ticket_wrap.top .ticket_pirce .line{ font-size: 28px;}

    .black_btn{ width: 248px; height: 60px; line-height: 60px; font-size: 30px; border-radius: 20px;}

    .ticket_wrap.top .ticket_pirce p{ margin-top: 15px;}

    .ticket_wrap.top .ticket_percent{ width: 78px; height: 78px; line-height: 76px; font-size: 36px;}
  
    .down_arrow_full_navy{ margin: 15px 0;}

    /* ticket_wrap.bottom */
    .ticket_bg.blue{ width: 373px; height: 177px;}

    .ticket_wrap.bottom .ticket_1_img{ margin: 15px 0; width: 70px;}

    .ticket_wrap.bottom .ticket_img p{ font-size: 15px;}

    .white_blue_btn{ width: 89px;}

    .white_blue_btn.price{ margin: 0 auto 10px; width: 140px;}
    .ticket_wrap.bottom .ticket_pirce p{ margin-top: 10px;}

    .down_arrow_full_white{ margin: 10px 0;}

    .white_black_btn{ width: 220px; height: 49px; line-height: 49px; font-size: 21px;}
}
@media all and (min-width:1680px){
    .pass_section{ height: 100%;}

    /* ticket_wrap.bottom */
    .ticket_bg.blue{ width: 420px; height: 198px;}

    .ticket_wrap.bottom .ticket_img{ margin-right: 54px;}
    .ticket_wrap.bottom .ticket_img p{ font-size: 16px;}

    .white_blue_btn.more{ font-size: 14px;}
}

/* 팝업 */