@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800&display=swap');

body {font-family: 'Noto Sans KR', sans-serif !important;}

#header {display: flex; justify-content: space-between; align-items: center; position: fixed; z-index: 3000; top: 0; left: 0; right: 0; padding: 0 40px; width: 100%; height: 100px; box-sizing: border-box;}

#header .vr_tit {display: flex; align-items: center; font-size: 20px; font-weight: 500;}
#header .vr_tit img {width: 120px; cursor: pointer;}
#header .vr_tit > span {display: none !important; font-size: 14px;}

#header .menu {position: relative; width: 36px; height: 28px; cursor: pointer;}
#header .menu img {width: 100%; height: 100%;}

#header .menu_depth {position: absolute; top: 0; right: -320px; width: 320px; height: calc(100vh - 200px);  background: rgba(0, 0, 0, 0.8); box-sizing: border-box; transition: all 0.5s;}
/* max-height: 710px; */
#header .menu_depth.on {right: 0;}

#header .menu_depth .depth_top {display: flex; justify-content: space-between; align-items: center; padding: 40px 28px; box-sizing: border-box;}
#header .menu_depth .depth_top .left {display: flex; gap: 0 20px;}
#header .menu_depth .depth_top .left .lang {display: flex; align-items: center; gap: 0 12px; position: relative;  cursor: pointer;}
#header .menu_depth .depth_top .left .lang img {width: 20px; height: 20px;}
#header .menu_depth .depth_top .left .lang span {display: flex; align-items: center; gap: 0 10px; font-size: 18px; font-weight: 400; color: #fff; opacity: 0.8;}
#header .menu_depth .depth_top .left .lang span.bar {position: relative; width: 2px;}
#header .menu_depth .depth_top .left .lang span.bar:after {content: ''; position: absolute; z-index: 1; top: 50%; left: 0; width: 100%; height: 18px; background:#fff; transform: translateY(-50%);}
#header .menu_depth .depth_top .left .lang span.active {font-weight: 700; opacity: 1;}

/* 언어 뎁스 */
#header .menu_depth .depth_top .left .lang .lang_depth {display: none; position: absolute; z-index: 100; bottom: -86px; left: 0; padding: 10px 0; width: 100%; background: #fff;}
#header .menu_depth .depth_top .left .lang .lang_depth span {display: block; transition: all 0.3s;}
#header .menu_depth .depth_top .left .lang .lang_depth span a {display: block; text-align: center; height: 22px; font-size: 13px; color: #333333;}
#header .menu_depth .depth_top .left .lang .lang_depth span:hover a {color: #CCA77C;}

#header .menu_depth .depth_top .left .help {display: flex; align-items: center; cursor: pointer;}
#header .menu_depth .depth_top .left .help img {width: 20px; height: 20px;}

#header .menu_depth .depth_top .menu_close {width: 36px; height: 14px;  cursor: pointer;}
#header .menu_depth .depth_top .menu_close img {width: 100%; height: 100%;}

.scroll_box {max-height: 550px; overflow: auto;}
.scroll_box::-webkit-scrollbar {width: 5px; background: #05507D;}
.scroll_box::-webkit-scrollbar-thumb {width: 5px; background: #05507D;}
.scroll_box::-webkit-scrollbar-track {width: 5px;}

#header .menu_depth .details {position: relative; z-index: 0; color: #7E7E7E; transition: all 0.3s;}
#header .menu_depth .details:hover {color: #fff;}
#header .menu_depth .details li {line-height: 1.3;}
#header .menu_depth .details li span {display: flex; align-items: center; gap: 0 5px; padding: 0 28px; height: 56px; box-sizing: border-box; font-size: 16px; color: #7E7E7E; word-break: keep-all; cursor: pointer; transition: all 0.3s;}
#header .menu_depth .details li:hover span {background: #05507D; color: #fff;}
#header .menu_depth .details li.active span {background: #05507D; color: #fff;}

#header .menu_depth .scroll_box {height: 100%; max-height: 80%;}
#header .menu_depth .scroll_box > a {display: block; margin-top: 15px; font-size: 18px; font-weight: 500; color: #7E7E7E; transition: all 0.3s;}
#header .menu_depth .scroll_box > a > b {font-size: 20px;}
#header .menu_depth .scroll_box > a:hover {color: #fff;}
#header .menu_depth .scroll_box > a > em {display: flex; gap: 0 5px; padding-top: 5px; font-size: 16px; transition: all 0.3s; color: #666;}
#header .menu_depth .scroll_box > a:hover > em {color: #CCA77C;}

#header .menu_depth .scroll_box.active > a {color: #fff;}
#header .menu_depth .scroll_box.active > a > em {color: #CCA77C;}


#header .menu_depth > a + a {margin-top: 4px;}

#header .menu_depth .scroll_box > a {display: block; margin-top: 30px; line-height: 1.3; font-size: 20px; font-weight: 500; color: #7E7E7E; transition: all 0.3s;}
#header .menu_depth .scroll_box > a + a {margin-top: 4px;}
#header .menu_depth .scroll_box > a:first-of-type:hover {color: #fff;}

/* #header .menu_depth > span {position: absolute; z-index: 500; bottom: 30px; right: 25px;} */
#header .menu_depth > span {display: block; margin-top: 30px; margin-right: 20px; text-align: right;}
#header .menu_depth > span span {cursor:pointer; font-size: 16px; font-weight: 400; color: #CCA77C;}


.docent_box {display: flex; gap: 0 40px; position: fixed; z-index: 2900; bottom: 27px; right: 60px; opacity: 0.4; pointer-events: none;}
.docent_box.active {opacity: 1; pointer-events: auto;}
.docent_box .ico {width: 34px; cursor: pointer;}
.docent_box .ico img {width: 100%;}

.popup_discription {display: none; flex-direction: column; position: absolute; bottom: 54px; right: 0; width: 100vw; max-width: 353px; height: 440px; border-radius: 20px; background: #000; opacity: 0.8; overflow: hidden;}
.popup_discription.active {display: flex;}
.popup_discription .tit {padding: 24px 20px; box-sizing: border-box; border-bottom: 1px solid #fff; font-size: 20px; font-weight: 700; color: #E9E9E9;}
.popup_discription .txt {padding: 24px 20px; box-sizing: border-box; font-size: 15px; color: #E9E9E9; overflow: auto; word-break: keep-all;}


.ex {display: none; position: fixed; z-index: 8000; top: 50%; left: 50%; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); transform: translate(-50%, -50%);}
.ex.active {display: block;}
.ex .img_box {display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); transform: translate(-50%, -50%); cursor: pointer;}
.ex .img_box img {width: 100%; max-width: 722px; height: 100%; object-fit: contain;}


@media screen and (max-width: 768px) {
    #header {padding: 0 30px; height: 70px;}
    #header .vr_tit img {width: 80px;}
    #header .menu {width: 24px; height: 18px;}
    /* #header .menu_depth {max-height: 610px;} */
    #header .menu_depth .depth_top .menu_close {width: 24px; height: 9.33px;}
    

    #header .menu_depth .depth_top {height: 70px;}
    #header .menu_depth .details {padding-bottom: 10px;}

    #header .menu_depth .depth_top .left .lang img {width: 18px; height: 18px;}
    #header .menu_depth .depth_top .left .lang span {font-size: 16px;}
    #header .menu_depth .depth_top .left .help img {width: 18px; height: 18px;}
    #header .menu_depth .depth_top .left .lang span.bar:after {height: 16px;}

    .docent_box {gap: 0 20px; bottom: 20px; right: 20px;}
    .docent_box .ico {width: 27px;}
    .popup_discription {max-width: 302px;}

    .ex .img_box img {padding: 0 15px; box-sizing: border-box;}

}
@media screen and (max-width: 540px) {

}

@media screen and (max-height: 540px) {
 #header .menu_depth {height: 100vh;}
    /* #header .menu_depth > span {bottom: -10px; transition: all 0.3s;} */
    /* #header .menu_depth.on > span {position: fixed; bottom: 30px;} */


    .ex .img_box img {width: 100%; height: 100%; object-fit: contain;}
}