@charset "uft-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@font-face {
    font-family: 'NanumSquareRound';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 
font-family: 'yg-jalnan';
font-family: 'Montserrat', sans-serif;
font-family: 'Noto Sans KR', sans-serif;
font-family: 'NanumSquareRound';
*/

*{ margin: 0; padding: 0; box-sizing: border-box; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor;}
ol, ul, li{ list-style: none;}
a{ outline: 0; text-decoration: none; color: inherit;}
img{ border: 0;}
input, textarea, select{ outline: none; border: 0;} 
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder{ color: transparent;}
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder{ color: transparent;}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder{ color: transparent;}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder{ color: transparent;}
body{line-height:1; color:#222; font-family: 'Noto Sans KR', sans-serif;}
body::-webkit-scrollbar{ width: 6px;}
body::-webkit-scrollbar-track{ background-color: #fff;}
body::-webkit-scrollbar-thumb{ border-radius: 3px; background-color: #ccc}
body::-webkit-scrollbar-button{ width: 0; height: 0;}

.obw_bg{background:url(../images/obw_bg.jpg) no-repeat 50% fixed; background-size:cover;}

/** flex 정렬 **/
.flex_left{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start;}
.flex_center{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
.flex_right{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end;}

/** 버튼모음 **/
.white_btn{ font-family: 'Noto Sans KR', sans-serif; height: 30px; line-height: 30px; font-size: 15px; font-weight: 500; text-align: left; color: #fff;  transition: all 0.2s;}
.white_btn a{ width: 100%;}

.white_btn.login{ width: 70px; margin-right: 15px;}
.white_btn.join{ width: 90px;}
.white_btn.mypage{ width: 90px;}

.white_btn.login:hover,.white_btn.join:hover,.white_btn.mypage:hover{ color: #3260b1;}
.white_btn.login.active,.white_btn.join.active,.white_btn.mypage:hover{ color: #3260b1;}

.btn_indigo{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; width:180px; height:50px; background-color:#071b3e; color:#fff; border-radius:30px; margin:20px auto 0 auto; font-size:24px; transition:0.2s;}
.btn_indigo:hover{background-color:#6566b9;}

.btn_gray{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; width:180px; height:50px; background-color:#999; color:#fff; border-radius:30px; margin:20px auto 0 auto; font-size:24px; transition:0.2s;}
.btn_gray:hover{background-color:#333;}

@media all and (min-width: 1280px){
    .white_btn{ height: 35px; line-height: 35px;}

    .white_btn.login{ width: 80px;}
    .white_btn.join{ width: 100px;}
    .white_btn.mypage{ width: 100px;}
}
@media all and (min-width: 1440px){
    .white_btn{ font-size: 16px;}
}
@media all and (min-width: 1680px){
    .white_btn{ font-size: 18px;}
}

/** 체크박스 **/
.check_input{display:none;}
.check_label{cursor:pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
.check_label .check_bullet{width:20px; height:20px; background-color:#fff; margin-right:6px;}
.check_input:checked + .check_bullet{background-image:url(../images/input_check_gray.png); background-size:100%;}

/** 라디오박스 **/
.radio_input{display:none;}
.radio_label{cursor:pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
.radio_label .radio_bullet{width:20px; height:20px; border-radius:50%; border:1px solid #b5b5b5; background-color:#fff; margin-right:6px; }
.radio_input:checked + .radio_bullet{background-image:url(../images/input_check_indigo.png); background-repeat:no-repeat; background-position:center; background-size:100%;}


body{ font-size: 16px; font-family: 'Noto Sans KR', sans-serif;}
.container{ margin: 0 auto; width: 90%; max-width: 1200px;}
.container2{ margin: 0 auto; width: 90%; max-width: 1380px;}
.main_body{ background-position: center; background-repeat: no-repeat; background-size: cover;}

@media all and (min-width:1024px){
    .container,.container2,header{ padding: 0; width: 1000px;}
}
@media all and (min-width:1440px){
    .container{ width: 1200px;}
    .container2{ width: 1380px;}
}

/** 가로/세로 가운데 정렬 **/
.align_center{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;}

/** 16:9 비디오 **/
.video_wrap{position:relative; padding-top:56.25%;}
.video_iframe{position:absolute; left:0; top:0; border:0; width:100%; height:100%;}

/* 헤더 */
.nav_bg{background-color: rgba(0, 0, 0, 0.7); position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index:50; display: none;}

header{position: relative; display: block; width: 100%; position: fixed; top: 0; left: 0; right: 0; height:50px; transition: 0.3s; z-index: 100;}
.header_wrap{width:100%; height:100%; position:relative; margin:0 auto; z-index:100}
.header_logo{width:140px; height:100%; background:url(../images/logo.png) 3% no-repeat; background-size:contain; max-width:230px; display:block; margin:0 auto;}
.header_back, .menu_btn{position:absolute;}

.header_back{position:absolute; background-image:url(../images/left_arrow.png); background-position:left; background-repeat:no-repeat; background-size:cover; width:24px; height:24px; left:10px; top:13px;}

/* 햄버거버튼 */
.menu_btn{position:absolute; width:25px; height:20px; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; right:10px; top:15px; z-index:300;}

.btn_line{display: block; width: 100%; height: 3px; border-radius: 10px; background: #fff;}
.line1{transform-origin: 0% 50%; transition: transform 0.3s ease-in-out; transform:rotate(0);}
.line2{transition: transform 0.2s ease-in-out; transform:scaleY(1);}
.line3{transform-origin: 0% 50%; transition: transform 0.3s ease-in-out; transform:rotate(0);}

/* PC 네비 */
.pc_nav_wrap{margin:0 auto; width:800px; height:100%; color: #fff; display:none; padding-left:50px;}
.pc_nav{ position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; height:100%;}

.pc_nav_list{ width: 25%; height: 50px; line-height: 50px; position:relative;}
.pc_nav h4{ font-size: 17px; text-align: center; color: #fff; transition:0.2s;}
.pc_nav h4:hover{ color: #4058fa;}
.pc_nav h4.active{ color: #4058fa;}

.pc_sub_menu{ display: none; position: absolute; left:10%; right:10%; top: 45px; padding: 10px; background:rgba(255,255,255,0.95);}

.pc_sub_menu li{ padding: 5px 0px; font-size: 13px; line-height: 25px; font-weight:400; text-align: center; color: #333; border-bottom: 1px solid transparent; cursor: pointer; transition: all 0.2s;}
.pc_sub_menu li:hover{ border-bottom: 1px solid #000;}
.pc_sub_menu li.active{ border-bottom: 1px solid #000;}

/* 메뉴 */
.nav_wrap{position:fixed; right:-1500px; top:0; bottom:0; width:320px; height:100%; color:#fff; background: #071b3e; transition: 0.5s; z-index:200; overflow:auto;}
.nav_wrap.move{ right: 0;}
.nav_wrap.move{ overflow: hidden;}
.nav_wrap.obw{background-color:#7298f9;}

.nav_wrap.obw .menu h4:hover{color: #bdf3ec;}
.nav_wrap.obw .menu h4.active{ color: #bdf3ec;}
.nav_wrap.obw .sub_menu>li >a:hover{ color: #bdf3ec;}
.nav_wrap.obw .sub_menu>li>a.active{ color: #bdf3ec;}

.login_btn_wrap{display: -webkit-box; display: -ms-flexbox; display: flex; padding-top:10px;}
.login_btn_wrap div:first-child{margin-right:20px;}

.menu_wrap{padding:40px 30px 0 30px; position:relative; overflow:auto; height:100%;}

.menu{padding:25px 0 0 0;}
.menu h4{ font-weight: 500; transition:0.2s; cursor:pointer;}
.menu h4:hover{color: #3260b1;}
.menu h4.active{ color: #3260b1;}
.menu>li{ margin-bottom:9%; transition: all 0.2s;}

.sub_menu{ display: none; padding-top: 10px;}
.sub_menu>li{height:32px; line-height:32px;}
.sub_menu>li>a{ display: block; color: #fff; transition:0.2s;}
.sub_menu>li >a:hover{ color: #3260b1;}
.sub_menu>li>a.active{ color: #3260b1;}

.nav_bar{display: block; width:100%; height: 1px; background-color: rgba(255, 255, 255,0.3); margin-bottom:9%;}

.menu_2 a{ font-weight: 500; transition:0.2s;}
.menu_2 a:hover{color: #3260b1;}
.menu_2 a.active{ color: #3260b1;}
.menu_2>li{ margin-bottom:8%; transition: all 0.2s;}
a.menu_trial{color:#f9e000;}

/* 상담버튼 */
.chat_btn{ position: absolute; bottom:15%; right:30px; width:50px; height:50px; border-radius: 50%; background-image:url(../images/chat.png); background-repeat:no-repeat; background-position:50%; background-size:60%; background-color: #87ceeb; transition: all 0.2s;}
.chat_btn:hover{background-color: #3260b1;}

/* 앱 다운로드 */
.app_wrap{display: -webkit-box; display: -ms-flexbox; display:flex; position:absolute; bottom:25px; left:30px;}
.app_wrap a{width:120px; max-width:183px; transition:0.2s;}
.app_wrap a:hover{background-color:rgba(255,255,255,0.4);}
.app_img{display:block; width:100%; border:1px solid #fff;}
.app_wrap a:first-child{margin-right:20px;}

@media all and (min-width:480px){
    .header_logo{width:160px;}
}
@media all and (min-width:640px) and (orientation: landscape){
    .app_wrap{position:static; padding-bottom:25px;}
    .chat_btn{bottom:45px;}
}
@media all and (min-width:640px){
    .app_wrap{bottom:30px;}
}
@media all and (min-width:768px){
    .header_logo{width:180px;}
    
    .nav_wrap{width:360px;}
    .menu_wrap{padding:40px 40px 0 40px;}
    
    .chat_btn{width:60px; height:60px; right:40px;}
    
    .app_wrap{left:40px;}
    .app_wrap a{width:130px;}
}
@media all and (min-width:1024px){
    .header_back{left:15px;}
    .menu_btn{right:15px;}
    
    .chat_btn{bottom:15%; width:70px; height:70px;}
    .app_wrap{position:absolute; padding:0;}
}
@media all and (min-width:1280px){
    header{height:70px;}
    .header_logo{width:200px; position:absolute; left:15px; top:0;}
    .header_back{display:none;}
    .menu_btn{top:25px; right:15px;}
    
    .menu>li{ margin-bottom:10%;}
    .sub_menu>li{height:34px; line-height:34px;}
    .nav_bar{margin-bottom:10%;}
    .menu_2>li{ margin-bottom:9%;}   
    
    .pc_nav_wrap{display:block;}
}
@media all and (min-width:1440px){
    header{height:80px;}
    .header_logo{width:230px; left:20px; top:0;}
    .menu_btn{width:32px; height:26px; right:20px; top:27px;}
    .btn_line{height:4px;}
    
    .nav_wrap{width:400px;}
    .menu_wrap{padding:50px 50px 0 50px;}
    
    .app_wrap{left:50px;}
    .app_wrap a{width:140px;}
    
    .chat_btn{right:50px;}
}
@media all and (min-width:1680px){
    header{height:100px;}
    .pc_nav_wrap{left:510px; right:400px;}
    .header_logo{left:25px;}
    .menu_btn{top:37px; right:25px;}
    
    .nav_wrap{width:580px;}
    .menu_wrap{padding:60px 90px 0 90px;}
    
    .app_wrap{left:90px;}
    .app_wrap a{width:183px;}
    .app_wrap a:first-child{margin-right:30px;}
    
    .chat_btn{right:90px;}
    
    .pc_nav_wrap{width:1000px;}
}
@media all and (min-width:1921px){
    .header_logo{left:4%;}
    .menu_btn{right:4%;}   
    .pc_nav_wrap{width:1080px;}
}

/* 스크롤시 헤더 색상 변경 */
header.scroll{ background: rgba(233, 233, 234, 0.8);}
header.scroll .header_logo{background-image: url(../images/logo_on.png);}
header.scroll .pc_nav h4{ color: #071b3e;}
header.scroll .btn_line{ background: #071b3e;}
header.scroll .default_language_option{color:#071b3e;}
header.scroll .down_arrow{ background-image: url(../images/down_arrow_on.png);}
header.scroll .header_back{ background-image: url(../images/left_arrow_on.png);}

.menu_btn.open{z-index:1000;}
.menu_btn.open .line1{transform:rotate(45deg);}
.menu_btn.open .line2{transform:scaleY(0);}
.menu_btn.open .line3{transform:rotate(-45deg);}

header.scroll .btn_line.white{background-color:#fff;}
header.scroll .default_language_option.white{color:#fff;}
header.scroll .default_language_option.white .down_arrow{background-image:url(../images/down_arrow.png);}

header.scroll .pc_nav h4:hover{ color: #4058fa;}
header.scroll .pc_nav h4.active{ color: #4058fa;}

/* 언어선택 */
.language_ham{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 200; position:absolute; right:60px; top:10px;}

.language_select_wrap{ position: relative; width: 140px;}

.default_language{ position: relative; cursor: pointer;}
.default_language li{ padding: 10px 20px; font-size: 15px; font-weight: 500; font-family: 'Montserrat', sans-serif;}

.default_language_option{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; color:#fff;}
.down_arrow{ display: block; background-image: url(../images/down_arrow.png); background-position: center; background-repeat: no-repeat; background-size: contain; width: 10px; height: 10px; transition:all 0.2s;}

.select_language{ display: none; position: absolute; left: 0; top: 39px; width: 100%; padding: 10px; background:rgba(255,255,255,0.9);}
.select_language li{ padding: 7px 0px; font-size: 13px; text-align: center; font-family:'Noto Sans KR', sans-serif; color: #000; border-bottom: 1px solid transparent; cursor: pointer; transition: all 0.2s;}

.select_language li:hover{ border-bottom: 1px solid #000;}
.select_language li.active{ border-bottom: 1px solid #000;}

.language_select_wrap.active .select_language{ display: block;}
.language_select_wrap.active .down_arrow{ top: 25px; transform: rotate(-180deg);}


@media all and (min-width:1280px){
    .language_ham{position:fixed; top:17px;}
}
@media all and (min-width:1440px){
    .language_ham{top:23px; right:80px;}
}
@media all and (min-width:1680px){
    .language_ham{top:32px; right:90px;}
}
@media all and (min-width:1921px){
    .language_ham{right:calc(4% + 50px);}
}



/* 각 단락마다의 패딩 값 */
.body_pad{ padding-top:55px;}

@media all and (min-width: 640px){
    .body_pad{padding-top:;}
}
@media all and (min-width: 1024px){
    .body_pad{padding-top:;}
}
@media all and (min-width: 1280px){
    .body_pad{padding-top:60px;}
}
@media all and (min-width: 1440px){
    .body_pad{padding-top:80px;}
}
@media all and (min-width: 1680px){
    .body_pad{padding-top:100px;}
}


/* footer */
footer.obw{ background-color: #fff;}

.footer_wrap{ padding: 50px 0 20px 0; font-family: 'Noto Sans KR', sans-serif;}
.footer_wrap.pad{padding-top:65px;}

.footer_area_one{ margin-bottom: 20px;}
.footer_num{ margin-bottom: 10px; font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 500; color: #071b3e;}
.footer_time{ font-size: 13px; line-height: 1.3; color: #afaeae;}
.footer_time span{ display: block;}

.navy_line{ display: inline-block; margin: 15px 0; width: 40px; height: 2px; vertical-align: -1px; background: #071b3e;}
.gray_line{ display: inline-block; margin: 0 5px; width: 1px; height: 10px; background: #ccc;}

.footer_address{ font-size: 13px; line-height: 1.3; color: #afafaf;}
.address{ display: block;}

.sns_wrap{ margin-bottom: 10px;}
.sns_area{ width: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.sns_area a{ display: block; width: 100%; height: 100%;}

.sns_img{ display: block; width: 25px; height: 25px; max-width: 35px; background-position: center; background-repeat: no-repeat; background-size: contain; transition: all 0.2s;}

.sns_img.one{ background-image: url(../images/facebook_icon.png);}
.sns_img.two{ background-image: url(../images/insta_icon.png);}
.sns_img.three{ background-image: url(../images/blog_icon.png);}

.sns_area a.active .sns_img.one,.sns_area a:hover .sns_img.one{ background-image: url(../images/facebook_icon_on.png);}
.sns_area a.active .sns_img.two,.sns_area a:hover .sns_img.two{ background-image: url(../images/insta_icon_on.png);}
.sns_area a.active .sns_img.three,.sns_area a:hover .sns_img.three{ background-image: url(../images/blog_icon_on.png);}

.copyright{ font-size: 13px; color: #afafaf;}

@media all and (min-width: 640px){
    .footer_num{ font-size: 24px;}

    .footer_time span{ display: inline-block;}
    
    .navy_line{ margin: 18px 0;}
    .gray_line{ height: 12px;}
    .address{ display: inline;}

    .sns_area{ width: 110px;}
    
    .sns_img{ width: 28px; height: 28px;}
}
@media all and (min-width: 768px){
    .footer_area_one{ margin-bottom: 25px;}
    .footer_num{ font-size: 28px;}
    .footer_time{ font-size: 14px;}

    .gray_line{ height: 12px;}

    .footer_address{ font-size: 14px;}

    .sns_area{ width: 130px;}
    
    .sns_img{ width: 30px; height: 30px;}

    .copyright{ font-size: 14px;}
}
@media all and (min-width: 960px){
    .footer_area_one{ margin-bottom: 30px;}
    .footer_num{ margin-bottom: 15px; font-size: 32px;}
    .footer_time{ font-size: 15px;}
    .footer_address{ font-size: 15px;}

    .navy_line{ margin: 20px 0;}

    .sns_wrap{ margin-bottom: 15px;}
    .sns_img{ width: 33px; height: 33px;}

    .copyright{ font-size: 15px;}
}
@media all and (min-width: 1024px){
    .footer_wrap{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
    
    .footer_wrap.pad{padding-top:80px;}

    .footer_area_one{ margin-bottom: 0;}
    .footer_num{ margin-bottom: 15px; font-size: 34px;}

    .footer_area_two{ height: 100%;}
    .sns_wrap{ margin-bottom: 87px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end;}
    .sns_area{ width: 150px;}
}
@media all and (min-width: 1280px){
    .footer_wrap.pad{padding-top:120px;}
}
@media all and (min-width: 1440px){
    .footer_num{ font-size: 32px;}
    .footer_time{ font-size: 16px;}
    .footer_address{ font-size: 16px;}

    .copyright{ font-size: 16px;}
}
@media all and (min-width: 1680px){
    .footer_wrap{ padding: 70px 0;}
    .footer_wrap.pad{padding-top:130px;}
    .footer_num{ font-size: 35px;}
 
    .navy_line{ width: 41px; margin: 30px 0;}

    .sns_wrap{ margin-bottom: 109px;}
    .sns_img{ width: 35px; height: 35px;}
}


/* 글씨들 아래에서 위로 올라오는 효과 */
.down_ani{ position: relative; top: 150px; opacity:0; transition: all 0.6s;}
.up_ani{ position: relative; top: 0; opacity:1; transition: all 0.6s;}
.down_ani_reverse{ position: relative; top: -150px; opacity:0; transition: all 0.6s;}

/* 팝업페이지 */
.popup_container{ position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1000; display: none;}
.popup_box{ 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; height: 100%;}

.popup_wrap{ width: 100%; height: 100%; position: absolute; z-index: 1100; background-color: #fff; opacity: 0; transform: scale(0.1); transition: all 0.2s;}
.popup_wrap.open{ opacity: 1; transform: scale(1);}

.popup_area{ height: 100%; text-align: center; 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;}

.popup_circle_title{ margin-bottom: 50px; text-align: center; line-height: 1.15; color: #071b3e;}
.popup_circle_title strong{ display: block; font-size: 25px; padding-bottom:5px;}

.popup_xbtn{ position: absolute; right: 2%; top:1.6%; width: 40px; height: 40px; z-index: 1200; cursor: pointer; background-image: url(../images/close_round_navy.png); background-position: center; background-repeat: no-repeat; background-size:cover; transition: all 0.3s;}
.popup_xbtn:hover{ background-image: url(../images/close_round_gray.png); transform:rotate(180deg);}
.popup_xbtn.active{ background-image: url(../images/close_round_gray.png);}

@media all and (min-width:640px) and (orientation: landscape){
    .popup_area{ display: block; overflow: auto; padding: 3%;}
}
@media all and (min-width: 1024px){
    .popup_wrap{ border-radius: 25px;}
    .popup_wrap.ticket_login{ width: 411px; height: 411px;}
    
    .popup_area{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; padding:0;}
    
    .popup_circle_title{ font-size: 20px;}
    .popup_circle_title strong{ font-size: 36px;}
}
@media all and (min-width: 1080px){
    .popup_circle_title{ margin-bottom: 60px;}
}
@media all and (min-width: 1280px){
    .popup_wrap{ width: 670px; height: 670px; border-radius: 50%;}

    .popup_circle_title{ font-size:20px;}
    .popup_circle_title strong{ font-size:28px;}

    .popup_xbtn{ right: 15%; top: 8%; width: 45px; height: 45px;}
}
@media all and (min-width: 1440px){
    .popup_wrap{ width: 750px; height: 750px;}
    .popup_circle_title{ font-size: 20px;}
    .popup_circle_title strong{ font-size: 42px;}
    
    .popup_xbtn{ width: 50px; height: 50px;}
}
@media all and (min-width: 1680px){
    .popup_wrap{ width: 902px; height: 902px;}
    .popup_wrap.small{ width: 808px; height: 808px;}

    .popup_circle_title{ margin-bottom: 70px; font-size: 25px;}
    .popup_circle_title strong{ font-size:45px;}

    .popup_xbtn{ width: 60px; height: 60px;}
}

/* 치밀하게 */
.popup_text_inner{ margin-bottom: 40px;}
.popup_text_inner:last-child{ margin-bottom: 0;}

.popup_circle_color{ margin-bottom: 20px; width: 100%; height: 40px; line-height: 40px; font-size: 20px; color: #fff; border-radius: 26px; background-color: #071b3e;}
.popup_text_inner p{ line-height: 1.3; color: #333;}

@media all and (min-width: 1024px){
    .popup_text_inner{ margin-bottom: 40px;}

    .popup_circle_color{ margin-bottom: 15px; width: 350px; height: 40px; line-height: 40px; font-size: 20px;}
    .popup_text_inner p{ font-size: 17px;}
}
@media all and (min-width: 1080px){
    .popup_text_inner{ margin-bottom: 50px;}

    .popup_circle_color{ margin-bottom: 15px; width: 400px; height: 42px; line-height: 42px; font-size: 23px;}
    .popup_text_inner p{ font-size: 18px;}
}
@media all and (min-width: 1680px){
    .popup_text_inner{ margin-bottom: 60px;}

    .popup_circle_color{ margin-bottom: 30px; width: 530px; height: 52px; line-height: 52px; font-size: 30px;}
    .popup_text_inner p{ font-size: 20px;}
}

/* 집요하게 */
.popup_circle_title.persistent{ margin-bottom: 50px;}

.popup_persistent_bg{ margin-bottom: 40px;}
.persistent_img{ width: 300px; max-width: 578px;}

.popup_text_inner.persistent span{ display: block;}

@media all and (min-width: 1024px){
    .popup_circle_title.persistent{ margin-bottom: 15px;}

    .popup_persistent_bg{ margin-bottom: 15px;}
    .persistent_img{ width: 330px;}
    .popup_text_inner.persistent span{ display: block;}
}
@media all and (min-width: 1280px){
    .popup_circle_title.persistent{ margin-bottom: 20px;}

    .popup_persistent_bg{ margin-bottom: 20px;}
    .persistent_img{ width: 400px;}
    .popup_text_inner.persistent span{ display: inline;}
}
@media all and (min-width: 1440px){
    .popup_circle_title.persistent{ margin-bottom: 25px;}

    .popup_persistent_bg{ margin-bottom: 25px;}
    .persistent_img{ width: 450px;}
}
@media all and (min-width: 1680px){
    .persistent_img{ width: 578px;}
}


/* 방대하게 */
.vast_img{ width: 300px; max-width: 645px;}

@media all and (min-width: 1024px){
    .popup_circle_title.vast{ margin-bottom: 20px;}
    .vast_img{ width: 400px;}
}
@media all and (min-width: 1280px){
    .popup_circle_title.vast{ margin-bottom: 30px;}
    .vast_img{ width: 450px;}
}
@media all and (min-width: 1440px){
    .popup_circle_title.vast{ margin-bottom: 35px;}
    .vast_img{ width: 500px;}
}
@media all and (min-width: 1680px){
    .vast_img{ width: 645px;}
}

/* 무료체험 */
.popup_wrap.gray{background-color:#f7f7f7;}
.trial_title{font-size:32px; color:#071b3e;}
.trial_character{width:70%; max-width:326px; margin:25px 0;}
.trial_text{font-size:18px;  margin-bottom:40px; line-height:1.4;}

.btn_indigo.trial, .btn_gray.trial{width:130px; height:42px; font-size:18px; margin:0 5px;}
.btn_indigo.trial.go{width:190px;}

@media all and (min-width:1024px){
    .trial_title{font-size:36px;}
    .trial_character{margin:35px 0;}
    .trial_text{font-size:26px;  margin-bottom:45px;}
    .btn_indigo.trial, .btn_gray.trial{width:150px; height:48px; font-size:21px; margin:0 8px;}
    .btn_indigo.trial.go{width:230px;}
}

/* 캐릭터소개 */
.popup_character{ margin-bottom: 38px;}

.character_img{ width: 200px; max-width: 326px;}

.popup_character_name{ margin-bottom: 20px; font-size: 25px; font-family: 'Montserrat', sans-serif; color: #071b3e;}

.popup_text_inner.character{ margin-bottom: 30px;}

.popup_character_color{ margin: 0 auto; height: 40px; line-height: 40px; font-size: 18px; border-radius: 15px; color: #fff; border-radius: 16px; background-color: #071b3e;}

.popup_character_color.one{ width: 122px;}
.popup_character_color.two{ width: 165px;}

.popup_introduction{ color: #333; line-height: 1.3;}
.popup_introduction strong{ display: block; margin-bottom: 25px; font-size: 20px;}
.popup_introduction span{ display: block;}

.popup_character_name.who{ margin-bottom: 0;}
.popup_introduction.who{ font-size: 18px;}
.popup_introduction.who strong{ display: inline; font-size: 25px;}

@media all and (min-width: 1024px){
    .popup_character{ margin-bottom: 25px;}

    .popup_introduction span{ display: inline;}

    .popup_text_inner.character{ margin-bottom: 20px;}

    .popup_introduction strong{ margin-bottom: 10px;}

    .popup_introduction.who{ font-size: 20px;}
    .popup_introduction.who strong{ font-size: 30px;}
}
@media all and (min-width: 1280px){
    .character_img{ width: 250px;}

    .popup_introduction strong{ margin-bottom: 20px;}
}
@media all and (min-width: 1440px){
    .character_img{ width: 300px;}
}
@media all and (min-width: 1680px){
    .character_img{ width: 326px;}
    
    .popup_character_name{ margin-bottom: 22px; font-size: 35px;}
    
    .popup_text_inner.character{ margin-bottom: 30px;}
     
    .popup_character_color{ height: 42px; line-height: 42px; font-size: 23px;}
    
    .popup_introduction{ font-size: 17px;}
    .popup_introduction strong{ margin-bottom: 20px;}
}

/* 원바이트 패키지 */
.popup_circle_title.book{ margin-bottom: 0;}
.popup_circle_title>p{ color: #333}

.popup_book_bg{ margin: 30px 0 37px 0;}

.book_img{ width: 270px; max-width: 473px;}

.popup_text_inner_top{ margin-bottom: 15px; font-size: 20px;}
.popup_text_inner_bottom{ line-height: 1.3;}

@media all and (min-width: 1024px){
    .popup_circle_title>p{ font-size: 20px;}

    .popup_book_bg{ margin: 30px 0 27px 0;}

    .popup_text_inner_top{ font-size: 25px;}
}
@media all and (min-width: 1280px){
    .popup_circle_title>p{ font-size: 20px;}
    .popup_book_bg{ margin: 20px 0;}

    .book_img{ width: 350px;}
 
    .popup_text_inner_top{ margin-bottom: 20px; font-size: 30px;}
}
@media all and (min-width: 1440px){
    .popup_book_bg.small{ margin: 25px 0;}

    .book_img{ width: 400px;}
}
@media all and (min-width: 1680px){
    .popup_circle_title>p{ font-size: 25px;}

    .book_img{ width: 473px;}
    .popup_text_inner_top{ margin-bottom: 24px;}
}


/* 원바이트 월드 여행권 */
/* 패스 평생권 */
.popup_circle_title.ticket{ margin-bottom: 40px;}

.ticket_bg{ background-image: url(../images/ticket.png); background-position: center center; background-repeat: no-repeat; background-size: contain; width: 330px; height: 155px;}

.ticket_1_img{ width: 85px; max-width: 103px;}
.ticket_2_img{ width: 85px; max-width: 114px;}

.ticket_text{ margin-left: 13px;}
.ticket_pack_wrap{ color: #fff; text-align: center; display: flex; justify-content: space-between;}
.ticket_pack{ width: 50px; height: 50px; line-height: 50px; background-color: #071b3e; border: 2px solid #ffffff; border-radius: 50%; font-size: 10px; font-family: 'yg-jalnan';}

.ticket_logo{ width: 105px; max-width: 125px;}

.white_btn.pack{ margin-top: 20px; width: 165px; height: 32px; line-height: 32px; font-size: 13px; text-align: center; color: #071b3e; border-radius: 15px; background-color: #fff;}

.ticket_pack.pack{width:60px; height:60px; line-height:58px; font-size:12px; margin:0 5px;}

.white_btn.pack_1{margin-top:20px; width:160px; height:auto; font-size:13px; text-align:center; color:#071b3e; border-radius:30px; background-color:#fff; padding:5px 0; line-height:1.3;}
.white_btn.pack_2{margin:20px auto 0 auto; width:166px; height: 32px; line-height: 31px; font-size:16px; text-align: center; color: #071b3e; border-radius:20px; background-color: #fff;}

.plus_btn{ margin: 10px 0; width: 24px; max-width: 24px;}

.navy_btn{ margin: 25px auto 0; width: 170px; height: 45px; line-height: 41px; font-size: 21px; text-align: center; color: #fff; font-family: 'Noto Sans KR', sans-serif; border-radius: 18px; background-color: #071b3e; border: 2px solid transparent; cursor: pointer; transition: all 0.2s;}
.navy_btn a{ width: 100%;}

.navy_btn:hover{ color: #071b3e; background-color: #fff; border: 2px solid #071b3e;}
.navy_btn.active{ color: #071b3e; background-color: #fff; border: 2px solid #071b3e;}

@media all and (min-width:640px) and (orientation: landscape){
    .popup_inner{ height: 100%; display: flex; justify-content: center; align-items: center;}

    .ticket_bg_wrap{ display: flex; justify-content: center; align-items: center;}
    .popup_inner .ticket_bg{ width: 280px; height: 132px;}

    .ticket_1_img{ width: 50px;}
    .ticket_2_img{ width: 50px;}

    .ticket_text{ margin-left: 10px;}

    .plus_btn{ margin: 0 10px;}
}
@media all and (min-width:768px) and (orientation: landscape){
    .popup_inner .ticket_bg{ width: 340px; height: 160px;}

    .ticket_1_img{ width: 70px;}
    .ticket_2_img{ width: 70px;}

    .ticket_text{ margin-left: 20px;}
}
@media all and (min-width:960px) and (orientation: landscape){
    .popup_inner .ticket_bg{ width: 400px; height: 189px;}

    .ticket_1_img{ width: 80px;}
    .ticket_2_img{ width: 80px;}

    .ticket_text{ margin-left: 25px;}

    .ticket_pack{ width: 55px; height: 55px; line-height: 55px; font-size: 12px;}

    .ticket_logo{ width: 120px;}

    .white_btn.pack{ width: 190px; font-size: 15px;}

    .navy_btn{ margin: 35px auto 0;}
}
@media all and (min-width: 1024px){ 
    .ticket_1_img{ width: 90px;}
    .ticket_2_img{ width: 90px;}

    .white_btn.pack{ height: 37px; line-height: 37px;}
}
@media all and (min-width: 1280px){
    .popup_circle_title.ticket{ margin-bottom: 35px;}
    
    .ticket_bg_wrap{ flex-wrap: wrap;}
    .popup_inner .ticket_bg{ width: 320px; height: 151px;}

    .ticket_1_img{ width: 70px;}
    .ticket_2_img{ width: 70px;}

    .ticket_text{ margin-left: 10px;}
    .ticket_pack{ width: 50px; height: 50px; line-height: 50px; font-size: 10px;}

    .ticket_logo{ width: 105px;}
    
    .white_btn.pack{ width: 165px; height: 32px; line-height: 32px; font-size: 13px;}
    
    .plus_btn_img{ width: 100%;}
    .plus_btn{ margin: 15px 0;}

    .navy_btn{ width: 170px; height: 45px; line-height: 41px; font-size: 21px;}
}
@media all and (min-width: 1440px){
    .popup_circle_title.ticket{ margin-bottom: 30px;}

    .popup_inner .ticket_bg{ width: 400px; height: 189px;}

    .ticket_1_img{ width: 90px;}
    .ticket_2_img{ width: 100px;}

    .ticket_text{ margin-left: 27px;}

    .ticket_logo{ width: 125px;}
    
    .white_btn.pack{ width: 165px; height: 32px; line-height: 32px; font-size: 13px;}

    .navy_btn{ margin: 25px auto 0;}
}
@media all and (min-width: 1680px){   
    .popup_inner .ticket_bg{ width: 421px; height: 199px;}

    .ticket_1_img{ width: 103px;}
    .ticket_2_img{ width: 114px;}
    
    .ticket_pack{width:50px; height:50px; line-height:50px; font-size:10px;}
    .ticket_pack.pack{width:80px; height:80px; line-height:80px; font-size:14px; margin:0 10px;}
    
    .white_btn.pack_1{width:164px; font-size:15px; padding:7px 0; line-height:1.4;}
    .white_btn.pack_2{width:164px; height:38px; line-height:37px; font-size:18px;}
}

/* 패스 zone 1 ~ 6 */
.popup_circle_title.ticket{margin-bottom:10px;}
.ticketbook_container{position: relative;}

.plus_btn_wrap{text-align:center; padding:10px 0;}
.plus_btn.zone{margin:0;}

.ticket_bg.zone{ background-image: url(../images/ticket.png); background-position: center center; background-repeat: no-repeat; background-size: contain; width: 330px; height: 155px; margin:0 auto 20px auto;}

.ticket_text.zone{ margin-left: 15px;}
.ticket_2_img.zone{ width: 65px;}

.ticketbook_wrap{overflow:auto; height:calc(100% - 320px);}

.ticket_zone_img{width:150px; max-width:194px;}
.ticket_book_img{width:90%;}
.ticket_book_img.dic{max-width:106px;}

.ticket_book_text{padding-top:10px; font-size:14px; color:#333; line-height:1.3;}

.white_btn.zone{ margin-top: 20px; width: 180px; height: 30px; line-height: 30px; font-size: 14px; text-align: center; color: #071b3e; font-weight: 700; border-radius: 14px; background-color: #fff;}

.navy_btn.zone{ margin: 15px auto 0;}

@media all and (min-height:840px){
    .ticketbook_wrap{overflow:auto; height:auto;}
}

@media all and (min-width:640px) and (orientation: landscape){
    .popup_circle_title.ticketbook{ margin-bottom: 30px;}

    .ticketbook_wrap{display:flex; justify-content:space-between; height:auto; margin:0 auto; width:600px; overflow:hidden;}
    .ticketbook_area.one, .ticketbook_area.two{width:}
    .ticketbook_area.three{width:16%;}

    .ticket_book_img{width:auto; height:86px;}
    .ticket_book_text{font-size:13px;}

    .plus_btn_wrap{padding-top:6%; width:12%;}
    .plus_btn.zone{margin:0 auto;}    

    .ticket_text.zone{ margin-left: 15px;}
}
@media all and (min-width:768px) and (orientation: landscape){
    .ticketbook_wrap{ width:620px;}
    .ticket_zone_img{ width: 170px;}
    .white_btn.zone{ margin-top: 15px; font-size: 13px;}
}
@media all and (min-width:1024px){
    .popup_circle_title.ticketbook{margin-bottom:20px;}
    .popup_circle_title.ticketbook strong{font-size:36px;}

    .ticketbook_wrap{width:700px; height:auto;}
    .ticket_book_img{height:100px; width:auto;}

    .ticket_text.zone{ margin-left: 15px;}
    .ticket_book_text{font-size:14px;}

    .ticket_2_img.zone{ width: 70px;}
}
@media all and (min-width: 1280px){
    .popup_circle_title.ticketbook{ margin-bottom: 25px;}

    .ticketbook_wrap{width:550px;}
    .ticketbook_area{}

    .ticket_book_img{height:76px; width:auto;}
    .ticket_book_text{font-size: 11px;}
    
    .plus_btn_wrap{padding-top:6%; width:60px;}

    .ticket_bg.zone{ width: 350px; height: 165.5px;}
  
    .white_btn.zone{ width: 200px; font-size:15px;}
    .ticket_zone_img{ width: 190px;}
    
    .ticket_text.zone{ margin-left: 10px;}

    .navy_btn.zone{ margin: 25px auto 0;}
}
@media all and (min-width: 1440px){
    .popup_circle_title.ticketbook{ margin-bottom: 35px;}

    .ticketbook_wrap{ width:640px;}
    .ticketbook_area{ margin-bottom: ;}
    
    .ticket_book_img{height:96px; width:auto;}
    .ticket_book_text{font-size:12px;}

    .ticket_bg.zone{ width: 400px; height: 189px;}
}
@media all and (min-width: 1680px){
    .popup_circle_title.ticketbook{margin-bottom:40px;}
    .popup_circle_title.ticketbook strong{font-size:45px;}
    .ticketbook_wrap{width:760px; margin-top:50px;}
    
    .plus_btn_wrap{width:70px;}
    .ticket_book_img{height:120px;}
    .ticket_book_text{font-size:14px; line-height:1.5;}

    .ticket_bg.zone{ width: 425px; height: 200px;}

    .navy_btn.zone{ margin: 40px auto 0;}
}

/* 여행권 로그인 팝업 */
.popup_login_title{ font-size: 18px; line-height: 1.3; color: #555;}

.popup_btn_wrap{ display: flex;}

.navy_btn.login{ margin-top: 52px; width: 116px; height: 38px; line-height: 33px; color: #071b3e; border: 2px solid #071b3e; border-radius: 18px; background-color: #fff;}
.navy_btn.login.confirm{ margin-right: 30px;}

.navy_btn.login:hover{ color: #fff; background: #071b3e;}
.navy_btn.login.active{ color: #fff; background: #071b3e;}

/* 뒤로 버튼 */
.back_btn_wrap{padding-bottom:15px;}
.detail_back_btn{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; background-color:#071b3e; color:#fff; width:100px; height:32px; border-radius:30px; font-size:16px; padding-bottom:2px; transition:0.2s;}
.detail_back_btn:hover{background-color:#6566b9;}
.detail_back_btn .icon{margin-right:6px; width:20px;}
@media all and (min-width: 1024px){
    .back_btn_wrap{padding-bottom:20px;}
    .detail_back_btn{width:120px; height:36px; font-size:18px; padding-bottom:2px;}
    .detail_back_btn .icon{margin-right:8px; width:23px;}
}

/** 팝업 **/
.pop_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; height:100%; padding:20px 3%;}
.pop_title{color:#071b3e; font-weight:500; padding-bottom:20px; text-align:center;}

.pop_btns{padding-top:20px;}
.pop_btn_1{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; background-color:#071b3e; color:#fff; font-size:18px; width:140px; height:42px; border-radius:30px; padding-bottom:2px; transition:0.2s;}
.pop_btn_1:hover{background-color:#6566b9;}
.pop_btn_2{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; background-color:#888; color:#fff; font-size:18px; width:140px; height:42px; border-radius:30px; padding-bottom:2px; transition:0.2s;}
.pop_btn_2:hover{background-color:#333;}

@media all and (min-width:1024px){
    .pop_btns{padding-top:25px;}
}

/** 팝업 리스트 **/
.pop_list{display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; border-top:2px solid #071b3e;}
.pop_list li{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; width:100%;}

.pop_caption{width:100%; min-height:44px; color:#071b3e; font-weight:500; border-bottom:1px solid #ddd; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; ms-flex-align:center; align-items:center; padding-left:15px;}
.pop_content{width:100%; min-height:44px;border-bottom:1px solid #ddd; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; ms-flex-align:center; align-items:center; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; padding:10px;}
.pop_half .pop_caption{width:150px;}
.pop_half .pop_content{width:calc(100% - 150px);}

.pop_input, .pop_select{width:100%; height:38px; border-radius:8px; padding:0 15px; background-color:#f7f7f7;}

@media all and (min-width:640px){
    .pop_title{font-size:26px;}
    
    .pop_caption{width:150px; height:100%;}
    .pop_content{width:calc(100% - 150px);}      
}
@media all and (min-width:1024px){
    .pop_title{font-size:28px; padding-bottom:25px;}
    
    .pop_caption{width:160px; padding-left:20px;}
    .pop_content{width:calc(100% - 160px);}
    .pop_half .pop_caption{width:160px;}
    .pop_half .pop_content{width:calc(100% - 160px);}
}