/* 공통적용 */
body {background: #252728;}

img {max-width: 100%;}

input, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-border-radius: 0; } 
select {-webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding: 15px 30px 15px 15px; border: 1px solid #CBCBCA; color: #CBCBCA;
    background: transparent url('../img/icon_select_arrow.svg') no-repeat right 1em bottom 50%;} 

input[type="text"],
input[type="password"],
input[type="date"],
input[type="email"],
input[type="tel"],
textarea {border: 0; border: 1px solid #CBCBCA; padding: 15px; background: none; color: #CBCBCA;}
select option {color: #111; background: #CBCBCA;}

input::placeholder,
textarea::placeholder {color: #CBCBCA;}

input[type="radio"] {border-radius: 10px;margin-top: -1px;}
input[type="checkbox"] {margin-top: 0px;}
input[type="checkbox"],
input[type="radio"] {
    margin-right: 7px;border: 1px solid #CBCBCA;background: #fff;vertical-align: middle;width: 20px;height: 20px;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {border: 5px solid #bb0a0a;}

label {margin-right: 20px;}
label:last-child {margin-right: 0;}

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background-color: #000; } 
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
.video-container .play_icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1;
    width: 70px; height: 70px; background: url(../img/icon_play.png) no-repeat center center/70px 70px; display: none;
}


.lock_scroll {overflow: hidden;}
.inner {margin: 0 20px;}

.padding_tb {padding: 60px 0;}
.padding_t {padding-top: 60px;}
.padding_b {padding-bottom: 60px;}

.btn_st01,
.btn_st02,
.btn_st03,
.btn_st04 {display: block; padding: 15px; text-align: center; font-weight: 500; font-size: 1.6rem; line-height: 2.2rem;}
.btn_st01 {color: #fff; background: #bb0a0a; }
.btn_st01 .small {font-size: 1.4rem;}
.btn_st02 {color: #CBCBCA; border: 1px solid #CBCBCA;}
.btn_st03 {color: #fff; background: #202020;}
.btn_st04 {color: #181818; background: #CBCBCA;}
.btn_st01.disabled,
.btn_st02.disabled,
.btn_st03.disabled,
.btn_st04.disabled {background-color: #CBCBCA; color: #777; pointer-events: none;}
.btn_label {font-size: 1.4rem; line-height: 2rem; margin-top: 15px; text-align: center; color: #CBCBCA;}
.btn_view_w, .btn_view_b {display: inline-block; margin-top: 30px; padding-bottom: 3px; font-size: 1.4rem;}
.btn_view_w {color: #CBCBCA; border-bottom: 1px solid #CBCBCA;}
.btn_view_b {color: #202020; border-bottom: 1px solid #202020;}
.btn_view_w:after,
.btn_view_b:after {display: inline-block; content: ""; width: 12px; height: 12px; margin-left: 5px;}
.btn_view_w:after {
    background: url(../img/icon_view_arrow_w.svg) no-repeat center center/12px 12px;
}
.btn_view_b:after {
    background: url(../img/icon_view_arrow_b.svg) no-repeat center center/12px 12px;
}
.btn_stamp {
    width: 90px; height: 100px; display: flex; align-items: center; justify-content: center; text-align: center;
    background: url(../img/btn_stamp.svg) no-repeat center center / contain;
    font-size: 1.6rem; line-height: 2.2rem; font-weight: 500; color: #202020;
}
.btn_stamp_white {
    width: 90px; height: 100px; display: flex; align-items: center; justify-content: center; text-align: center;
    background: url(../img/btn_stamp_white.svg) no-repeat center center / contain;
    font-size: 1.6rem; line-height: 2.2rem; font-weight: 500; color:#fff;
}
.btn_stamp_white.completed,
.btn_stamp.completed {
    background: url(../img/btn_stamp_complete.svg) no-repeat center center / contain;
    color: #777; pointer-events: none;
}

/* popup */
.popup {
    overflow: hidden;  position: fixed; width: 100%; height: 100%; display: none;
    z-index: 9999; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, .9); } 
.popup.on { display: block; } 
.popup .popup_inner { width: 100%; height: 100%; padding: 15px; margin: 0 auto; box-sizing: border-box; position: relative; } 
.popup .popup_wrap { position: absolute; width: calc(100% - 40px); top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; }  
.popup .close { width: 18px; position: absolute; right: 15px; top: 53%; transform: translateY(-50%)}
.popup .pop_box {padding: 20px; word-break: break-all; max-height: 70vh; overflow-x: hidden; overflow-y: auto; font-size: 1.6rem; font-weight: 500; } 
.popup .input_box {padding-top: 20px;}
.popup .input_box .txt {font-size: 1.6rem; line-height: 2.2rem; text-align: center;}
.popup .input_box input {width: 100%; color: #181818; margin:15px 0 20px;}
.popup.noCookie {display: block;}
.popup.noCookie .popup_wrap {max-width: 400px;}

.swiper_box {position: relative;}
.swiper-button-next,
.swiper-button-prev {color: #181818;}
.swiper-button-next:after, .swiper-button-prev:after {font-size: 18px;}

.top_tit .tit {font-weight: 700; text-align: center;}
.top_tit .tit .big {font-size: 2.9rem; line-height: 3.5rem;}
.top_tit .tit .small {font-size: 2rem; line-height: 2.6rem;}
.top_tit .tit .small .th {font-size: 1.4rem; display: inline-block; vertical-align: top;}
.top_tit .tit img{max-width: 120px;}
.top_tit .txt {margin-top: 30px;}
.top_tit .txt .kor {font-size: 1.6rem; line-height: 2.2rem;}
.top_tit .txt .eng {font-size: 1.6rem; line-height: 2.2rem; margin-top: 20px; color: #CBCBCA}

.bd_tit {font-weight: 700; font-size: 2.9rem; line-height: 3.5rem; margin-bottom: 15px; letter-spacing: -1px;}
.bd_tit .small {font-size:2rem; line-height: 2.6rem;}
.bd_txt_w {color: #fff; text-align: center; font-size: 1.6rem; line-height: 2.2rem;}
.bd_txt_w .big {color: #fff; font-size: 2rem; line-height: 2.6rem; text-align: center; margin-bottom: 20px; }
.bd_txt_b {font-size: 1.6rem; line-height: 2.2rem;}
.bd_txt_w .eng {color: #CBCBCA;}
.bd_txt_b .eng {margin-top: 10px;}
.bd_txt_w .eng.viewEng,
.bd_txt_b .eng.viewEng {margin-top: 30px; display: none;}

.form_box li {margin-top: 20px; color: #fff;}
.form_box li .row{display: flex;width: 100%; gap: 10px; align-items: center;}
.form_box li .row.email input{width: 50%;}
.form_box li .row .input{width: 50%;}
.form_box .gubun {margin-bottom: 5px; font-size: 1.6rem; line-height: 2.2rem;}
.form_box .input input[type="text"],
.form_box .input input[type="tel"],
.form_box .input select {width: 100%;}
.form_box .cmnt {font-size: 1.4rem; line-height: 2rem; margin-top: 10px; padding-left: 13px; position: relative; color: #CBCBCA;}
.form_box .cmnt::before {
    display: block; content: "*"; position: absolute; left: 0; top: 2px;
}
.form_box .input.mt-10{margin-top: 10px;}
.form_box .input label{position: relative;}
.form_box .input .search-btn{cursor: pointer; font-size: 0;background: 0; border: 0; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; width: 100%; text-align: right;}
.form_box .input .search-btn img{width:32px; height: 32px;}

#header {
    max-width: 1000px; width: 101%; height: 60px; margin:0 auto; background:#202020;
    position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 3; 
}
#header .inner {height: 100%; display: flex; align-items: center; justify-content: space-between;}
#header .logo {width: 80px; display: block; position: relative; z-index: 998;}

#header .nav_inner {margin: 20vh 20px 0;}
#header .nav li {margin: 10px 0;}
#header .nav li a {color: #fff; display: block; font-weight: 500;}
#header .nav .dept1 > li > a {font-size: 2.2rem; line-height: 2.8rem;}
#header .nav .dept2 {margin:10px 0 40px 20px; }
#header .nav .dept2 > li > a {font-size: 1.8rem; line-height: 2.4rem; position: relative; padding-right: 20px;}
#header .nav .dept2 > li > a:after {
    display: block; content: ""; position: absolute; right: 0; top:50%; transform: translateY(-50%);
    width: 15px; height: 15px; background: url(../img/icon_menu_arrow.svg) no-repeat center center/15px 15px;
}

.m_menu {display: block; position: relative; width: 25px; height: 25px; z-index: 998;} 
.m_menu span {
    display: block; width: 100%; height: 1px; background: #fff; opacity: .8;
    color: transparent; position: absolute; top: 50%; transform: translate(0, -50%); transition: all 0.5s;
} 
.m_menu span:before,
.m_menu span:after {
    content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: #fff;
    opacity: .8; transition: all 0.5s;
} 
.m_menu span:before { top: -7px; } 
.m_menu span:after { top: 7px; } 
.m_menu.on span { background: rgba(225, 245, 136, 0); } 
.m_menu.on span:before { top: 0px; transform: rotate(45deg); } 
.m_menu.on span:after { top: 0px; transform: rotate(-45deg); } 
.m_menu.on span:before,
.m_menu.on span:after { background: #fff; } 
.aside {
    width: 100% !important; max-width: 1000px; height: 100vh; position: fixed; top: -100vh; background: #202020;
    left: 50%; transform: translateX(-50%); transition: all 0.5s; z-index: 997; overflow-y: auto;} 
.aside.on { top: 0; } 

#container {max-width: 1000px; margin: 0 auto 0; }

.ck-in {background: #252728;}
.ck-in .top_tit {padding-top: 50px;padding-bottom: 10px;}
.ck-in .info_box {color: #fff;}
.ck-in .info_box .tit {font-size: 2rem; font-weight: 700; text-align: center;}
.ck-in .info_box .btn_box {margin-top: 25px;}
.ck-in .info_box textarea {width: 100%;}
.ck-in .info_box .tel{display: flex; gap: 10px;}
.ck-in .info_box .tel .phone-cert{background: #fff; border: 0;padding: 0 15px;}
.ck-in.center{display: flex; flex-direction: column; justify-content: center; height: 100vh;}

.main {background:#000;}
.main .main_tit .tit {font-size: 2rem; line-height: 2.6rem; font-weight: 700; text-align: center; margin-bottom: 30px; color: #fff;}
.main .btn_box a:last-child {margin-top: 15px;}

.course {background: #fff;}
.course .ft_map {position: fixed; bottom: 20px; right: 20px; z-index: 2; width: 90px;}
.course .cont_top {
    position: relative; overflow: hidden; height: 0; padding-bottom: 70%;
}
.course .cont_top .tit_box {position: relative; z-index: 1; padding: 25px 20px; color: #fff;}
.course .cont_top .tit_box .small {font-size: 1.8rem; line-height: 2.4rem; margin-bottom: 10px;}
.course .cont_top .tit_box .big {font-size: 3.5rem; line-height: 4rem; font-weight: 700; letter-spacing: -1px;}
.course .cont_top .img_box {position: absolute; top: 0; left: 0;}
.course .cont_top .img_box:before {
    display: block; content: ""; background: linear-gradient(180deg, rgb(0 0 0 / 80%), rgb(0 0 0 / 0%));
    position: absolute; top: 0; left: 0; width: 100%; height: 70%;
}
.course .slide_box {border-top: 1px solid #ededed; text-align: center;}
.course .swiper_gallery {margin: 0 20px;}
.course .swiper_gallery li {position: relative; overflow: hidden; height: 0; padding-bottom: 66.7%;}
.course .swiper_gallery_prev {left: -10px;}
.course .swiper_gallery_next {right: -10px;}
.course .video_box {background: #f8f8f8}
.course .video_box .bd_txt_b {margin-bottom: 50px;}
.course .btn_box {display: flex; justify-content: center;}


.course_off {background: #000;}
.course_off .off_txt .eng {margin-top: 20px;}
.course_off .off_img img {width: 270px;}
.course_off .btn_box {display: flex; justify-content: center;}

#viewVideo {
    overflow: hidden;  position: fixed; width: 100%; height: 100%; display: none;
    z-index: 9999; top: 0; left: 0; right: 0; bottom:0; background: rgba(0, 0, 0, 1); } 
#viewVideo.on { display: block; } 
#viewVideo .viewVideo_inner {position: relative; overflow: hidden; height: 100%; }
#viewVideo .close {position: absolute; right: 20px; top: 20px; z-index: 1;}
#viewVideo .video_box {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%;}
#viewVideo .video_box video {width:100%; height: 100vh;}

.map {background: #000;}
.map .map_wrap {padding: 40px; text-align: center}
.map_box {position: relative; max-width: 310px; margin:0 auto;}
.map_box .link a {display: block; position: absolute; width: 23%; height: 11%;}
.map_box .link a.link01 {left: 3.7%; bottom: 26%;} /* art piece 14~15일 */
.map_box .link a.link02 {left: 15.5%; bottom:13.5%;} /* countach */
.map_box .link a.link03 {right: 15.5%; bottom:13.5%;} /* diablo */
.map_box .link a.link04 {left: 25.2%; bottom:41%} /* urus */
.map_box .link a.link05 {left: 8.5%; top:20%} /* huracan */
.map_box .link a.link06 {right: 14%; top:14%} /* ad personam */
.map_box .link a.link07 {right: 16%; bottom:38%} /* art piece 16~19일 */

#viewMap {
    overflow: hidden;  position: fixed; width: 100%; height: 100%; display: none; 
    z-index: 9999; top: 0; left: 0; right: 0; bottom:0; background: rgba(0, 0, 0, .9); } 
#viewMap.on { display: block; } 
#viewMap .viewMap_inner {position: relative; overflow: hidden;  }
#viewMap .close {position: absolute; right: 20px; top: 20px;}
#viewMap .map_wrap {padding:80px 40px; height: 100vh; overflow: auto; text-align: center}
#viewMap .map_wrap img {max-width: 400px; width: 100%;}

.success {background:#000;}
.success .top_tit img {width: 270px;}
.success .nt_box {margin-top: 30px; color: #CBCBCA; font-size: 1.4rem; line-height: 2rem;}
.success .nt_box .eng {margin-top: 30px; display: none;}
.success .nt_box .txt p {margin: 5px 0; padding-left: 12px; position: relative;}
.success .nt_box .txt p:before {display: block; content:"-"; position: absolute; left: 0;}
.enterCode .btn {display: flex; justify-content: space-between}
.enterCode .btn a {width: calc(50% - 10px);}

.terms-check {margin-top: 20px;}
.terms-check input{margin-left: 0;}
.terms-check p{margin-top: 5px; font-size: 13px; color: #CBCBCA;line-height: 18px;}
.terms-check textarea{text-align: left; padding: 10px;min-height: 100px; font-size: 14px;margin-top: 10px;}

.qr_box{margin-top: 100px; text-align: center;}
.qr_code{margin-top: 50px;}
.qr_code .time{margin-top:20px}
.qr_code .qr{background: #fff; width: auto; display: inline-block; padding: 10px;}

.timer_wrap{aspect-ratio: 16 / 9; font-family: 'LABDigital-Regular';}
.timer_wrap .inner{margin: 0 auto; height: 90vh; display: flex; gap: 100px; flex-direction: column; align-items: center;justify-content: center;}
.timer_wrap .inner .timer{color: #bb0a0a; font-size: 20vw;}
.timer_wrap .inner img{position: absolute; bottom: 80px}

.btn_st01{width: 100%; background: #bb0a0a; border: none; cursor: pointer;}

.notice-box{background: #f8f9fa;padding: 15px;border-radius: 8px;margin-bottom: 20px;margin-top: 10px;font-size: 14px;color: #e50000;font-weight: bold;text-align: center;line-height: 1.4;border: 1px solid #ffcccc;}