details > summary::marker {font-size:0;}
details > summary::-webkit-details-marker { display: none; } 


#intro {visibility: hidden; display: flex; justify-content: center; align-items: center; position: fixed; z-index: 99995; top: 50%; left: 50%; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); transform: translate(-50%, -50%);}
#intro.active {visibility: visible;}
#intro .intro_inner {display: flex; flex-direction: column; padding: 60px; width: 100%; max-width: 1000px; height: 100%; max-height: 400px; background: rgba(0, 0, 0, 0.8); box-sizing: border-box;}
#intro .intro_inner .top img {height: 32px;}
#intro .intro_tit {margin-bottom: 23px; font-size: 50px; color: #CCA77C;}
#intro p {font-size: 30px; color: #FFFFFF;}
#intro .bot {height: 100%;}
#intro .bot > div {display: flex; gap: 0 20px; height: 100%; justify-content: flex-end; align-items: flex-end;}
#intro .lang {display: flex; align-items: center; gap: 0 5px; position: relative; padding-bottom: 10px; cursor: pointer;}
#intro .lang img {width: 20px; height: 20px;}
#intro .lang span {display: flex; align-items: center; gap: 0 10px; font-size: 12px; font-weight: 500; color: #fff;}
#intro .lang span img {width: 9px; height: 6px;}
/* 언어 뎁스 */
#intro .lang .lang_depth {display: none; position: absolute; z-index: 100; bottom: -66px; left: 0; padding: 10px 0; width: 100%; background: #fff;}
#intro .lang .lang_depth span {display: block; transition: all 0.3s;}
#intro .lang .lang_depth span a {display: block; text-align: center; height: 22px; font-size: 13px; color: #333333;}
#intro .lang .lang_depth span:hover a {color: #CCA77C;}
#intro .btn_wrap {width: 180px; height: 45px;  cursor: pointer;}
#intro .btn_wrap img {width: 100%;}




#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: 85px; background: rgba(0, 0, 0, 0.8); box-sizing: border-box;}

#header .vr_tit {display: flex; align-items: center; font-size: 20px; font-weight: 500; cursor: pointer;}
#header .vr_tit img {height: 20px;}

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

#header .menu_depth {position: absolute; top: 0; right: -316px; padding: 0px 25px 30px; width: 316px; height: 100vh;  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; height: 80px;}
#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 5px; 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: 12px; font-weight: 500; color: #fff;}
#header .menu_depth .depth_top .left .lang span img {width: 9px; height: 6px;}
/* 언어 뎁스 */
#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: 30px; height: 19px;  cursor: pointer;}
#header .menu_depth .depth_top .menu_close img {width: 100%;}

/* #header .menu_depth details {position: relative; z-index: 0; padding-top: 20px; padding-bottom: 20px; color: #666666; transition: all 0.3s;}
#header .menu_depth details:hover {color: #fff;}
#header .menu_depth details:after {content: ''; position: absolute; bottom: 0; left: 0; width: 20px; height: 3px; background: #CCA77C;}
#header .menu_depth details[open] {color: #fff;}
#header .menu_depth details summary {font-size: 20px; font-weight: 500;}
#header .menu_depth details li {padding-top: 20px;}
#header .menu_depth details li a {font-size: 16px; color: #666666; word-break: keep-all; transition: all 0.3s;}
#header .menu_depth details li:hover a {color: #CCA77C;} */

.scroll_box {padding-right: 15px; max-height: 550px; overflow: auto;}
.scroll_box::-webkit-scrollbar {width: 3px; background: #CCA77C;}
.scroll_box::-webkit-scrollbar-thumb {width: 3px; background: #CCA77C;}
.scroll_box::-webkit-scrollbar-track {width: 3px;}

#header .menu_depth .details {position: relative; z-index: 0; padding-top: 20px; padding-bottom: 20px; color: #666666; transition: all 0.3s;}
#header .menu_depth .details:hover {color: #fff;}
#header .menu_depth .details:after {content: ''; position: absolute; bottom: 0; left: 0; width: 20px; height: 3px; background: #CCA77C;}
#header .menu_depth .details[open] {color: #fff;}
#header .menu_depth .details summary {font-size: 20px; font-weight: 500; cursor: pointer;}
#header .menu_depth .details summary.active {color: #fff;}
#header .menu_depth .details li {padding-top: 14px; line-height: 1.3;}
#header .menu_depth .details li span {display: flex; gap: 0 5px; font-size: 16px; color: #666666; word-break: keep-all; cursor: pointer; transition: all 0.3s;}
#header .menu_depth .details li:hover span {color: #CCA77C;}
#header .menu_depth .details li.active span {color: #CCA77C;}

#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: #666666; 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: #666666; 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;}


.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: 1200px; height: 100%; object-fit: contain;}




.landscape {display: none; position: fixed; z-index: 99999; top: 50%; left: 50%; width: 100%; height: 100%; background: #000; cursor: pointer; transform: translate(-50%,-50%);}
/* .landscape.active {display: block;} */
.landscape img {width: 100%; height: 100%; object-fit: contain;}




/* #header .menu_depth details[open] > summary {display: none;} */

/* 모바일 가로모드사이즈 랜드스케이프는 이슈가 많음 */
@media screen and (max-width: 768px) {
    #intro .intro_inner {width: 90%;}

    #intro .intro_inner .top img {height: 24px;}

    #intro .intro_tit {margin-bottom: 16px; font-size: 36px; color: #CCA77C;}
    #intro p {font-size: 16px; color: #FFFFFF;}
    #intro .lang {padding-bottom: 6px;}
    #intro .btn_wrap {width: 136px; height: 34px;}

    #header {padding: 0 3%; height: 60px;}
    #header .vr_tit {font-size: 16px;}
    #header .vr_tit img {height: 15px;}
    #header .menu {width: 25px; height: 19px;}
    /* #header .menu_depth {max-height: 610px;} */
    #header .menu_depth .depth_top .menu_close {width: 26px; height: 14px;}
    

    #header .menu_depth .depth_top {height: 60px;}
    #header .menu_depth .details {padding-bottom: 10px;}
    #header .menu_depth .details summary {font-size: 16px;}
    #header .menu_depth .details li {padding-top: 15px;}
    #header .menu_depth .details li span {font-size: 14px;}
    #header .menu_depth > a {font-size: 14px;}
    /* #header .menu_depth > span {bottom: -10px; transition: all 0.3s;} */
    /* #header .menu_depth.on > span {bottom: 30px;} */
    #header .menu_depth > span span {cursor:pointer; font-size: 12px;}
    
    #header .menu_depth .scroll_box > a {margin-top: 10px;}
    #header .menu_depth .scroll_box > a > b {font-size: 16px;}

}
@media screen and (max-width: 540px) {
    #intro .intro_inner {padding: 42px 5%;}
    #intro .intro_inner .top img {height: 19px;} 
    #intro .intro_tit {font-size: 26px;}
   
}

@media screen and (max-height: 540px) {
    #intro .intro_inner {padding: 42px 5%;}
    #intro .intro_inner .top img {height: 19px;} 
    #intro .intro_tit {font-size: 26px;}
    
    #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;}
}





@media (orientation: landscape) and (max-width: 936px) {
   #intro .intro_inner {width: 90%;}
   #intro .intro_inner .top img {height: 24px;}
    #intro .intro_tit {margin-bottom: 16px; font-size: 36px; color: #CCA77C;}
    #intro p {font-size: 16px; color: #FFFFFF;}
    #intro .lang {padding-bottom: 6px;}
    #intro .btn_wrap {width: 136px; height: 34px;}

    #header {padding: 0 3%; height: 60px;}
    #header .vr_tit {font-size: 16px;}
    #header .vr_tit img {height: 15px;}
    #header .menu {width: 25px; height: 18px;}
    #header .menu_depth {max-height: 100vh;}
    #header .menu_depth .depth_top .menu_close {width: 26px; height: 14px;}
    
    #header .menu_depth .scroll_box {max-height: 80%; }

    #header .menu_depth .depth_top {height: 60px;}
    #header .menu_depth .details {padding-bottom: 10px;}
    #header .menu_depth .details summary {font-size: 16px;}
    #header .menu_depth .details li {padding-top: 15px;}
    #header .menu_depth .details li span {font-size: 14px;}
    #header .menu_depth > a {font-size: 14px;}
    /* #header .menu_depth > span {text-align: right;} */
    /* #header .menu_depth.on > span {position: fixed; bottom: 30px;} */
    #header .menu_depth > span span {cursor:pointer; font-size: 12px;}
    
    #header .menu_depth .scroll_box > a {margin-top: 10px;}
    #header .menu_depth .scroll_box > a > b {font-size: 16px;}

}

@media (orientation: landscape) and (max-width: 520px) {
    #intro .intro_inner {padding: 42px 5%;}
    #intro .intro_inner .top img {height: 18px;}
    #intro .intro_tit {font-size: 26px;}
    

    /* #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;}

}

@media (orientation: landscape) and (max-width: 330px) {
    #header .menu_depth .scroll_box {max-height: 60%; }
}




@media (orientation: portrait) {
    .landscape {display: none;}
    .landscape.active {display: block;}
}