@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, button, time, mark, audio, video, a, textarea, input{font-family: 'Pretendard';}
#media_popup{background: rgba(0,0,0,0.5);position: fixed;z-index: 9999999;top: 0;left: 0;width: 100%;height: 100%;display: none}
#media_popup .pop_in{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center}
#media_popup .pop_in .pop_w{background: #FFFFFF;padding: 25px;border-radius: 11px;width: 1150px;max-width: 90vw;position: relative}
#media_popup .pop_in .pop_w .close{position: absolute;width: 44px;height: 44px;right: -56px;top: 0;background: rgba(255,255,255,0.2);border-radius: 50%;display: flex;align-items: center;justify-content: center}
#media_popup .pop_in .pop_w .close svg{display: block}
#media_popup .pop_in .pop_w .video{position: relative;padding-top: 56.25%;border-radius: 10px;overflow: hidden}
#media_popup .pop_in .pop_w .video > iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%}
#media_popup .pop_in .pop_w .video > img{position: absolute;top: 0;left: 0;width: 100%;height: 100%}
#main .visual{position: relative;width: 100%;height: 970px;width: 1920px}
#main .visual_w2{display: flex;justify-content: center;width: 100vw;align-items: center;height: 100vh}
#main .visual .vis_image{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#main .visual .vis_image .big{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-49.8%);display: none}
#main .visual .vis_image img{width: 2158px}
/*#main .visual .vis_image .big img{width: auto}*/
#main .visual .door_w{position: absolute;width: calc(1920px - 110px);left: 50%;height: 1090px;top: 50%;transform: translateY(-50%) translateX(-50%)}
#main .visual .door_w.on{z-index: 30}
#main .visual .door_w .door {position: absolute}
#main .visual .door_w .door .door_{position: absolute}
#main .visual .door_w .door .door_in{position: absolute}
#main .visual .door_w .door .door_frame{position: relative;z-index: 15}
#main .visual .door04{right: 0;bottom: 100px}
#main .visual .door01{left: 0;bottom: 100px}
#main .visual .door03{right: 262px;bottom: 213px;}
#main .visual .door02{left: 262px;bottom: 213px;}
#main .visual .obj_visual {z-index: 15;pointer-events: none}
#main .visual .door_w .door01{z-index: 203;}
#main .visual .door_w .door01 .bright{position: absolute;top: -230px;left: -79px;z-index: 100;mix-blend-mode: overlay}
#main .visual .door_w .door02 .bright{position: absolute;top: -230px;left: -79px;z-index: 100;mix-blend-mode: overlay}
#main .visual .door_w .door03 .bright{position: absolute;top: -240px;left: -149px;z-index: 100;mix-blend-mode: overlay}
#main .visual .door_w .door .bright{pointer-events: none}
#main .visual .door_w .door04 .bright{position: absolute;top: -240px;left: -149px;z-index: 100;mix-blend-mode: overlay; }
#main .visual .door_w .door .bright{opacity: 0.2;transition-duration: 1s}
#main .visual .door_w .door.on .bright{opacity: 0.9}
#main .visual .door_w .door01 .door_{perspective: 300px;}
#main .visual .door_w .door .text_w{position: absolute;top: 50%;z-index: 50;display: flex;width: 500px;gap: 24px;padding: 0 48px;z-index: 15;pointer-events: none}
#main .visual .door_w .door .text_w svg{display: block}
#main .visual .door_w .door .text_w .icon{width: 50px;height: 50px;border-radius: 50%;background: #188A42;align-items: center;justify-content: center;display: flex}
#main .visual .door_w .door .text_w strong{display: block;font-size: 36px;color: #FFFFFF;font-weight: 600}
#main .visual .door_w .door .text_w p{display: block;font-size: 18px;color: #FFFFFF;line-height: 30px;margin-top: 20px}
#main .visual .door_w .door .text_w strong,
#main .visual .door_w .door .text_w p{transform: translateX(40px);opacity: 0;transition: 0.8s}
#main .visual .door_w .door03 .text_w strong,
#main .visual .door_w .door03 .text_w p{transform: translateX(-40px)}
#main .visual .door_w .door04 .text_w strong,
#main .visual .door_w .door04 .text_w p{transform: translateX(-40px)}
#main .visual .door_w .door:hover .text_w strong,
#main .visual .door_w .door:hover .text_w p{transform: translateX(0);opacity: 1;}
#main .visual .door_w .door:hover .text_w p{transition-delay: 0.3s}

#main .visual .door_w .door .text_w .icon{transition: 0.5s;transform: scale(0.6);opacity: 0}
#main .visual .door_w .door:hover .text_w .icon{transform: scale(1);opacity: 1}
#main .visual .door_w .door .door_{perspective: 300px;}
#main .visual .door_w .door01 .text_w,
#main .visual .door_w .door02 .text_w{left: 0}
#main .visual .door_w .door03 .text_w,
#main .visual .door_w .door04 .text_w{right: 0;flex-direction: row-reverse;text-align: right}
#main .visual .door_w .door01 .door_ div{transform-origin: left top;transition-duration: 1s}
#main .visual .door_w .door01:hover .door_ div{transform: rotateY(70deg)}
#main .visual .door_w .door02 .door_ div{transform-origin: left top;transition-duration: 1s}
#main .visual .door_w .door02:hover .door_ div{transform: rotateY(70deg)}
#main .visual .door_w .door03 .door_ div{transform-origin: right top;transition-duration: 1s}
#main .visual .door_w .door03:hover .door_ div{transform: rotateY(-70deg)}
#main .visual .door_w .door04 .door_ div{transform-origin: right top;transition-duration: 1s}
#main .visual .door_w .door04:hover .door_ div{transform: rotateY(-70deg)}
#main .visual .dim{background: #443D38;position: absolute;width: 200%;height: 200%;top: -50%;left: -50%;mix-blend-mode: hard-light;opacity: 0;pointer-events: none;transition: 1s;z-index: 21}
#main .visual .dim.on{opacity: 0.7;mix-blend-mode: hard-light;}
#main .visual .visual_text{top: 50%;transform: translateY(-50%) translateX(-50%);position: absolute;width: 100%;width: 1400px;left: 50%;text-align: center;z-index: 15;pointer-events: none}
#main .visual .visual_text .title strong{font-family: "times-new-roman", sans-serif;font-size: 176px;color: #FFFFFF;letter-spacing: -0.5px;font-weight: 400}
#main .visual .visual_text .title span{display: block;text-align: left;font-size: 28px;color: #FFFFFF;font-weight: 400;letter-spacing: -0.5px;margin-bottom: 100px;font-weight: 600}
#main .visual .visual_text .name{text-align: left;width: 453px;background: rgba(86,69,58,0.5);border-radius: 8px;backdrop-filter: blur(10px);padding: 25px}
#main .visual .visual_text .name strong{display: block;font-size: 22px;color: #FFFFFF;font-weight: 600;margin-bottom: 20px}
#main .visual .visual_text .name .info{display: flex;gap: 30px;margin-top: 0;}
#main .visual .visual_text .name .info span{display: block;font-size: 17px;color: rgba(255,255,255,0.7);font-weight: 300}
#main .visual .visual_text .name .info i{display: block;width: 1px;height: 19px;background: rgba(255,255,255,0.2)}
#main .visual .visual_text > *{transition: 1s}
#main .visual .visual_text.on > *{transition: 1s;opacity: 0;}
#main .visual .visual_text.on > .name{transition: 1s;opacity: 0 !important;}
#main .visual{transform: scale(0.9)}
#sub .contents{width: 100%;height: 100vh;overflow: hidden;position: relative}
#sub.kohif .contents .bg{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.kohif .contents .earth{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.kohif .contents .earth div{filter: grayscale(0)}

#sub.kohif .contents .kohif_txt{position: absolute;display: flex;justify-content: center;flex-direction: column;align-items: center;width: 100%;height: 100vh;gap: 40px}
#sub.kohif .contents .kohif_txt .wr{display: flex;justify-content: center;flex-direction: column;align-items: center;gap: 40px}
#sub.kohif .contents .kohif_txt .wr{opacity: 0;transform: translateY(70px)}
#sub.kohif .contents .kohif_txt .k_txt{display: flex;flex-direction: column;align-items: center;gap: 12px}
#sub.kohif .contents .kohif_txt .k_txt div{position: relative}
#sub.kohif .contents .kohif_txt .k_txt div .on{position: absolute;top: 0;left: 0;color: #fff;clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
#sub.kohif .contents .kohif_txt .k_txt div p{font-size: 24px;color: rgba(255,255,255,0.5)}
#sub.kohif .contents .kohif_txt .k_txt div.pc{display: block}
#sub.kohif .contents .kohif_txt .k_txt div.mo{display: none}
#sub.kohif .contents .kohif_txt .base_text{position: absolute;top: 50%;transform: translate(-50%,-50%);display: flex;justify-content: center;align-items: center;flex-direction: column;left: 50%;gap: 20px;}
#sub.kohif .contents .kohif_txt .base_text strong{display: block;font-size: 32px;color: #FFFFFF}
#sub.kohif .contents .kohif_txt .more_btn{position: relative;z-index: 15}
#sub.kohif .contents .kohif_txt .more_btn a{width: 234px;height: 54px;border: 1.5px solid #FFFFFF;display: flex;justify-content: space-between;align-items: center;border-radius: 60px;padding: 0 30px;transition-duration: 0.3s}
#sub.kohif .contents .kohif_txt .more_btn a:hover{background-color: #33200B;border-color: #33200B;}
#sub.kohif .contents .kohif_txt .more_btn a span{color: #FFFFFF;font-size: 16px;font-weight: 600;width: 0;white-space: nowrap}
/* #sub.kohif .contents .kohif_txt .more_btn a:hover span{opacity: 0;display: none} */
#sub.media .contents {width: 100%;height: 100vh;overflow: hidden}
#sub.media .contents .bg{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.media .contents .dim{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);mix-blend-mode: multiply;z-index: 1;pointer-events: none}
#sub .s_title{position: absolute;top: 50%;transform: translateY(-250px);width: 100%;z-index: 5}
#sub .s_title .inner{width: 1600px;margin: 0 auto}
#sub .s_title strong{font-size: 50px;color: #FFFFFF;line-height: 64px;letter-spacing: -0.5px;}
#sub .s_title p{font-size: 20px;color: rgba(255,255,255,0.8);margin-top: 30px;line-height: 1.5}
#sub.media .contents .video_list .box{position: absolute;left: 50%;top: 50%;margin-left: -411.5px;margin-top: -235px;perspective:500px;transition-duration: 1s}
#sub.media .contents .video_list .box.prev{transform: translateX(-95%) scale(0.9424);;opacity: 1}
#sub.media .contents .video_list .box.prev2{transform: translateX(-200%) scale(0.9424);;opacity: 0}
#sub.media .contents .video_list .box.next{transform: translateX(95%) scale(0.9424);;opacity: 1}
#sub.media .contents .video_list .box.next2{transform: translateX(200%) scale(0.9424);opacity: 0}
#sub.media .contents .video_list .box .box_w{transition-duration: 1s}
#sub.media .contents .video_list .box.prev .box_w{transform: rotateY(30deg)}
#sub.media .contents .video_list .box.next .box_w{transform: rotateY(-30deg)}
#sub.media .contents .video_list .box.prev2 .box_w{transform: rotateY(50deg)}
#sub.media .contents .video_list .box.next2 .box_w{transform: rotateY(-50deg)}
#sub.media .contents .video_list .box{transform: translateX(200%);opacity: 0}
#sub.media .contents .video_list .box.on{transform: translateX(0);opacity: 1}
#sub.media_contents .swiper {width: 100%;height: 100%;margin-left: auto;margin-right: auto;}
#sub.media_content .swiper-pagination{display: flex;justify-content: flex-end;gap: 8px;position: static;margin-top: 40px;}
#sub.media_content .swiper-pagination .swiper-pagination-bullet{width: 10px;height: 10px;background: rgba(255,255,255,0.22);margin: 0;}
#sub.media_content .swiper-pagination .swiper-pagination-bullet-active{background: #F8DFA1}
#sub.media_content .sw_wr{position: absolute;z-index: 15;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center}
#sub.media_content .bg{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.media_content .swiper {width: 940px;height: 510px;margin-left: auto;margin-right: auto;}
#header .mo_menu{display: none;}
#sub.media_content .swiper-slide {height: calc((100% - 30px) / 2) !important;display: flex;justify-content: center;align-items: center;}
#sub.media_content .swiper-slide .img{overflow: hidden;}
#sub.media_content .wr img{display: block;max-width: 100%;transition-duration: 0.5s;}
#sub.media_content .wr:hover img{transform: scale(1.05);}
#sub.media_content .wr .txt{margin-top: 20px}
#sub.media_content .wr .txt strong{font-size: 18px;color: #FFFFFF;display: block;font-weight: 500;line-height: 1.5;height: 54px}
#sub.media_content .sw_w{position: relative;padding-left: 82px}
#sub.media_content .sw_content_w{position: relative}
#sub.media_content .sw_content_w .mySwiper{position: absolute;top: 0;left: 0;opacity: 0}
#sub.media_content .sw_content_w .mySwiper.on{position: relative;z-index: 5;opacity: 1}

#sub.memory .bg{position: absolute;top: 50%;transform: translateY(-50%)}
#sub.memory .wall_wrap{position: absolute;z-index: 15;height: 100vh;display: flex;align-items: center;top: 3%}
#sub.memory .wall_wrap .wall_in{display: flex;padding-left: 660px;}
#sub.memory .wall_wrap .wall_box{position: relative}
#sub.memory .wall_wrap .wall_box .w_light {position: absolute;top: 0;left: 0;opacity: 0;mix-blend-mode: overlay;transition: 0.5s}
#sub.memory .wall_wrap .wall_box:hover .w_light{opacity: 1}
#sub.memory .wall_wrap .wall_box .wall_txt{position:absolute;top: 0;left: 129px;width: 232px;padding-top: 160px;padding-left: 28px;display: flex;flex-direction: column;gap: 40px}
#sub.memory .wall_wrap .wall_box .wall_txt span{display: block;font-size: 24px;color: #FFF0C9;font-weight: 500}
#sub.memory .wall_wrap .wall_box .wall_txt strong{font-size: 18px;color: #F6EAE0;line-height: 26px;margin-top: 10px;font-weight: 400;display: block}
#sub.memory .wall_wrap .wall_box .img{margin-top: 20px}
#sub.memory .wall_wrap .wall_box{margin-left: -105px;}
#sub.memory .wall_wrap .wall_box1{margin-left: 0}
#sub.memory .s_title {position: absolute;top: 50%;transform: translateY(-50%)}
#sub.memory .s_title .scr{background: #1E1909;width: 111px;height: 111px;border-radius: 50%;position: relative;display: flex;align-items: center;justify-content: center;margin-top: 40px}
#sub.memory .s_title .scr svg{display: block}
#sub.memory .s_title .scr .scr2{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 28px;height: 16px;box-sizing: border-box;border: 1px solid #F8DFA1;border-radius: 9px;}
#sub.memory .s_title .scr .scr2 i{display: block;width: 6px;height: 6px;background: #F8DFA1;border-radius: 50%;position: absolute;left: 6px;top: 50%;margin-top: -3px;}
#sub.memory .s_title .scr .scr2 i{animation: scr 1s infinite}
@keyframes scr{
    0%{transform: translateX(0px)}
    50%{transform: translateX(10px)}
    100%{transform: translateX(0px)}
}
#sub .tabs{margin-bottom: 30px}
#sub .tabs ul{display: flex;justify-content: center;gap: 20px}
#sub .tabs ul li{border-radius: 6px;box-shadow: 5px 5px 2px #00000016}
#sub .tabs ul li a{display: flex;height: 63px;width: 200px;display: flex;align-items: center;justify-content: center;box-sizing: border-box;background: #40342D;border: 3px solid #88786F;box-shadow: 0 0 10px rgba(0,0,0,0.5) inset;font-size: 18px;color: #B9AFA9;border-radius: inherit;transition-duration: 0.5s;}
#sub .tabs ul li:hover a{border-color: #F8DFA1;color: #F8DFA1;}
#sub .tabs ul li.on a{background: #40342D;border-color: #F8DFA1;color: #F8DFA1}

#sub.shoc .s_title{pointer-events: none;}
#sub.shoc .shoc_bg{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.shoc .shoc_bg .vid{width: 39%;height: 30.5%;background: #000;position: absolute;z-index: 15;top: 21.4%;left: 31.1%;display: flex;align-items: center;justify-content: center;overflow: hidden;;}
#sub.shoc .shoc_bg .vid button#playBtn{width: 60px;height: 60px;border-radius: 50%;background-color: rgba(255,255,255,0.2);backdrop-filter: blur(30px);position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);padding-left: 2px;justify-content: center;align-items: center;display: flex;}
#sub.shoc .shoc_bg .vid button#playBtn svg{display: block;}
#sub.shoc .shoc_bg .vid video{width: 100%;display: block;}
#sub.shoc .shoc_bg .vid button#stopBtn{width: 36px;height: 36px;border-radius: 50%;background-color: rgba(255,255,255,0.2);backdrop-filter: blur(30px);position: absolute;justify-content: center;align-items: center;display: flex;right: 20px;bottom: 20px;;display: none;}
#sub.shoc .shoc_bg .vid button#stopBtn svg{display: block;}

#sub.kohif .contents .kohif_txt .base_text i{display: block;transform: translateY(-70px);opacity: 0;filter: blur(20px);display: block;transition: 1.2s}
#sub.kohif.on .contents .kohif_txt .base_text i{display: block;transform: translateY(0px);opacity: 1;filter: blur(0px)}
#sub.kohif .contents .kohif_txt .base_text strong{display: block;transform: translateY(70px);opacity: 0;filter: blur(20px);display: block;transition: 1.2s}
#sub.kohif.on .contents .kohif_txt .base_text strong{display: block;transform: translateY(0px);opacity: 1;filter: blur(0px)}

#sub .s_title strong{filter: blur(20px);letter-spacing: 5px;opacity: 0;transition: 1.2s}
#sub.on .s_title strong{filter: blur(0px);letter-spacing: 0px;opacity: 1;}
#sub .s_title p{filter: blur(20px);letter-spacing: 5px;opacity: 0;transition: 1.2s;transition-delay: 0.3s}
#sub.on .s_title p{filter: blur(0px);letter-spacing: 0px;opacity: 1;}
#sub.memory .s_title .scr{filter: blur(20px);letter-spacing: 5px;opacity: 0;transition: 1.2s;transition-delay: 0.6s}
#sub.memory.on .s_title .scr{filter: blur(0px);letter-spacing: 0px;opacity: 1;}
#sub.media_content .sw_w{filter: blur(20px);opacity: 0;transform: translateY(70px)}
#sub.media_content.on .sw_w{filter: blur(0px);opacity: 1;transition: 1.2s;transform: translateY(0);transition-delay: 0.6s}

#sub.media_content .sw{display: none;}
#sub.media_content .sw.on{display: block;}

/* #sub.memory .wall_wrap .wall_in{transform: translateX(70px);opacity: 0;filter: blur(20px);transition: 1.2s}
#sub.memory.on .wall_wrap .wall_in{transform: translateX(0px);opacity: 1;filter: blur(0px);transition-delay: 0.6s} */

#main .mo_visual{position: relative;width: 100%;height: 100vh;display: none}
#main .mo_visual .mo_vis_image{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center}
#main .mo_visual .mo_vis_image img{width: 100%}
#main .mo_visual .mo_wrap{position: absolute;z-index: 15;top: 0;left: 0;height: 100vh;display: flex;align-items: center;justify-content: center;width: 100%;flex-direction: column;}
#main .mo_visual .mo_wrap .title strong{color: #FFFFFF;line-height: 54px;font-size: 50px;text-align: center;margin-bottom: 20px;display: block;font-family: "times-new-roman", sans-serif;}
#main .mo_visual .mo_wrap .title p{font-size: 18px;color: #FFFFFF;margin-top: 20px;text-align: center}
#main .mo_visual .mo_wrap .title span{font-size: 18px;color: #FFFFFF;display: block;text-align: center;font-weight: 600;margin-top: 25px}
#main .mo_visual .mo_wrap .title ul{margin-top: 10px}
#main .mo_visual .mo_wrap .title ul li{color: #FFFFFF;font-weight: 300;line-height: 1.5;text-align: center;opacity: 0.7}
#main .mo_visual .mo_wrap .btn{width: 100%;padding: 0 20px;margin-top: 170px}
#main .mo_visual .mo_wrap .btn ul{display: flex;width: 100%;flex-wrap: wrap;gap: 12px}
#main .mo_visual .mo_wrap .btn ul li{width: calc(50% - 6px)}
#main .mo_visual .mo_wrap .btn ul li a{display: flex;height: 48px;align-items: center;justify-content: space-between;background: #33200B;border-radius: 50px;padding: 0 30px;font-size: 15px;color: #FFFFFF;font-weight: 500}
#main .visual .visual_text .wr{transition-duration: 0.7s;}
#main .visual .visual_text .wr.on{opacity: 0;}
#main .visual .visual_text .title strong{filter: blur(20px);opacity: 0;letter-spacing: 15px;white-space: nowrap;text-align: center;display: flex;justify-content: center}
#main .visual.on .visual_text .title strong{filter: blur(0px);opacity: 1;letter-spacing: 0;transition-duration: 1.5s}

#main .visual .visual_text .title span{transform: translateX(70px);opacity: 0}
#main .visual.on .visual_text .title span{transform: translateX(0px);opacity: 1;transition: 1.5s;transition-delay: 0.3s}
#main .visual .visual_text .name{transform: translateX(70px);opacity: 0}
#main .visual.on .visual_text .name{transform: translateX(0px);opacity: 1;transition: 1.5s;transition-delay: 0.6s}

.intro{position: fixed;z-index: 9999;width: 100%;height: 100%;background: #000;display: flex;align-items: flex-end;justify-content: center}
.intro .bg{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)}
.intro .bg video{height: 120vh}
#main .info{display: flex;gap: 40px;margin-top: 50px;width: 1126px;}
#main .info .box{flex: 1;background: rgba(35,26,21,0.7);backdrop-filter: blur(20px);border-radius: 20px 20px 0 0;padding: 40px}
#main .info .box .txt1 span{display: block;font-size: 18px;color: #FFDB82;font-weight: 600}
#main .info .box .txt1 span sup{font-size: 0.7em;position: relative;transform: translateY(-30%);display: inline-block}
#main .info .box .txt1 strong{font-size: 20px;color: #FFFFFF;font-weight: 600;line-height: 32px;display: block;margin-bottom: 15px}
#main .info .box .txt1 p{font-size: 16px;color: #B1A59D;line-height: 30px}
#main .info .box .txt2{display: flex;justify-content: space-between;align-items: center;border-top: 1px solid #4E443F;padding-top: 20px;margin-top: 30px}
#main .info .box .txt1 i{display: block;width: 17px;height: 2px;background: #FFDB82;margin-top: 15px;margin-bottom: 15px}
#main .info .box .txt2 ul{display: flex;flex-direction: column;gap: 14px}
#main .info .box .txt2 ul li{font-size: 16px;color: #B1A59D;font-weight: 400;letter-spacing: -0.5px}
#main .info .box .txt2 ul li span{color: #FFFFFF;font-weight: 600;display: inline-block;width: 100px}
#main .scr_content{position: fixed;bottom: 50px;left: 50%;transform: translateX(-50%);z-index: 999;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 14px}
#sub.kohif .contents{background: #322925}

.pc_back{position: absolute;left: 50%;top: 69%;width: 13%;height: 30%;background: #000;z-index: 2;transform: translateX(-750px); opacity: 0; z-index: 15}
.pc_back a{display: block;width: 100%;height: 100%;}

#sub.secret .s_title {pointer-events: none}
#sub.secret .secret_bg{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.secret .dot{position: absolute;top: 50%;left: 50%}
#sub.secret .dot .dot_in{width: 36px;height: 36px;position: relative;;align-items: center;justify-content: center;display: flex}
#sub.secret .dot .dot_in:before{content: '';display: block;position: absolute;width: 100%;height: 100%;top: 0;left: 0;border: 1px solid #F8DFA1;border-radius: 50%}
#sub.secret .dot .dot_in:after{content: '';display: block;position: absolute;width: 100%;height: 100%;top: 0;left: 0;border: 1px solid #F8DFA1;border-radius: 50%}
#sub.secret .dot .dot_in .line{content: '';display: block;position: absolute;width: 100%;height: 100%;top: 50%;left: 50%;border: 1px solid #F8DFA1;border-radius: 50%;transition: 0.5s;transform: translate(-50%,-50%);opacity: 0}
#sub.secret .dot .dot_in:hover .line{width: 42px;height: 42px;border-color: #26CB63;opacity: 1}

#sub.secret .dot .dot_in:before, #sub.secret .dot .dot_in:after{transform: scale(0);animation: secret 1.5s infinite;box-sizing: border-box}
#sub.secret .dot .dot_in:after{animation-delay: 0.5s}
@keyframes secret{
    0%{transform: scale(0);opacity: 1}
    100%{transform: scale(1);opacity: 0}
}
#sub.secret .dot .dot_in i{width: 10px;height: 10px;background: #FFFFFF;border-radius: 50%;display: flex;align-items: center;justify-content: center}

#sub.secret .dot .txt_box{position: absolute;top: 0;background: rgba(255,255,255,0.0);backdrop-filter: blur(20px);padding: 35px 30px;border-radius: 12px;border: 1px solid #F8DFA170;top: -20px;pointer-events: none;opacity: 0;transition: 0.7s}
#sub.secret .dot .txt_box strong{white-space: nowrap;font-size: 18px;color: #FFFFFF;display: flex;gap: 12px;line-height: 1.5;}
#sub.secret .dot .txt_box strong i{color: #FFD56E}
#sub.secret .dot .txt_box p{white-space: nowrap;font-size: 18px;color: #C4BAA2;margin-top: 15px;line-height: 32px}
#sub.secret .dot01{transform: translate(-490px, 100px)}
#sub.secret .dot02{transform: translate(-230px, 130px)}
#sub.secret .dot03{transform: translate(210px, 100px)}
#sub.secret .dot04{transform: translate(180px, -210px)}
#sub.secret .dot05{transform: translate(660px, -239px)}
#sub.secret .dot06{transform: translate(639px, -6px)}
#sub.secret .dot01 .txt_box{left: 100%}
#sub.secret .dot03 .txt_box{left: 100%}
#sub.secret .dot04 .txt_box{left: 100%}
#sub.secret .dot05 .txt_box{right: 100%}
#sub.secret .dot06 .txt_box{right: 100%}
#sub.secret .dot01:hover .txt_box, #sub.secret .dot04:hover .txt_box, #sub.secret .dot03:hover .txt_box{transform: translateX(20px);opacity: 1}
#sub.secret .dot05:hover .txt_box, #sub.secret .dot06:hover .txt_box{transform: translateX(-20px);opacity: 1}
#sub.secret .dot .dot_in i{transition: 0.7s}
#sub.secret .dot .dot_in:hover i{background: #188A42;width: 22px;height: 22px;box-shadow: 0 0 10px #FFC127}
#sub.secret .contents{background: #000;}
#sub.secret .img{transition: 1s}
#sub.secret .img.on{opacity: 0.7}

@media (max-width: 1600px) {
    #sub.secret .contents{background: #403530}
    #sub.secret .dot01{transform: none;top: 50%;left: 25%}
    #sub.secret .dot03{transform: none;top: 60%;left: 60%}
    #sub.secret .dot04{transform: none;top: 30%;left: 60%}
    #sub.secret .dot05{transform: none;top: 24%;left: 84%}
    #sub.secret .dot06{transform: none;top: 50%;left: 82%}
    #sub.secret .secret_bg{top: auto;bottom: 0;    transform: translate(-50%, 0%);}
    #sub.secret .secret_bg:after{content: '';display: block;width: 100%;height: 20%;background: linear-gradient(to bottom, #403530,#40353000);position: absolute;top: 0;left: 0}
    #sub.secret .secret_bg img{display: block}

    #sub.secret .secret_bg img{width: 120vw}
}
@media (max-width: 1000px) {
    #sub.secret .s_title{transform: translateY(-150px)}
    #sub.secret .dot .txt_box{position: fixed;opacity: 0;right: auto; left: 0;transform: none;z-index: 60;        left: 50%;
        top: 50%;transform: translate(-50%, -50%);width: 330px}
    #sub.secret .dot05:hover .txt_box, #sub.secret .dot06:hover .txt_box, #sub.secret .dot04:hover .txt_box, #sub.secret .dot03:hover .txt_box, #sub.secret .dot01:hover .txt_box{transform: translate(-50%, -50%);}
    #sub.secret .dot .txt_box {border-radius: 10px;padding: 20px}
    #sub.secret .dot .txt_box p{word-break: keep-all;white-space: normal;font-size: 13px;line-height: 1.5;margin-top: 0}
    #sub.secret .dot .txt_box strong{word-break: keep-all;white-space: normal;font-size: 15px;line-height: 1.5;margin-bottom: 10px}
    
}
@media (max-width: 660px) {
    #sub.secret .secret_bg{top: auto;bottom: 0;    transform: translate(-55%, 0%);}
    #sub.secret .dot .txt_box {margin-left: 8vw}

    #sub.secret .secret_bg img{width: 140vw}
}

@media (max-width: 1700px) {
    #main .visual_w2{transform: scale(0.78)}
}
@media (max-width: 1640px) {
    #sub .s_title .inner{width: 100%;padding: 0 20px}
    #sub.memory .wall_wrap .wall_in{padding-left: 320px;}
        #sub .s_title strong{font-size: 45px;line-height: 1.5}
    #sub.media_content .swiper{width: 600px}
    #sub .tabs ul li a{width: 187px}
    #sub.media_content .wr img{width: 100%}
    #sub.media_content .bg img{height: 100vh}
    #main .visual .vis_image .big{display: block}

}
@media (max-width: 1210px) {
    #header #gnb ul{gap: 45px;}
    #header{padding: 0 20px;}
    #header .h_btn{gap: 30px}
    #main .visual_w2{transform: scale(0.5)}

}

@media (max-width: 980px) {
    #main .scr_content{bottom: 10px;gap: 7px}
    #main .scr_content i svg{width: 40px}
    #main .scr_content strong svg{width: 16px}
    #media_popup .pop_in .pop_w{padding: 10px;}
    #media_popup .pop_in .pop_w .close{right: 0;top: -40px;width: 26px;height: 26px}
    #media_popup .pop_in .pop_w .close svg{width: 7px;height: 7px}
      #header #gnb button{position: absolute;right: 30px;top: 30px;width: 26px;height: 26px;display: block;transform: rotate(45deg);}
    #header #gnb button:before{content: '';display: block;width: 100%;height: 2px;position: absolute;top: 50%;margin-top: -1px;left: 0%;background: #fff}
    #header #gnb button:after{content: '';display: block;height: 100%;width: 2px;position: absolute;left: 50%;margin-left: -1px;background: #fff;top: 0}
    #header #gnb{display: block;position: fixed;right: 0;top: 0;background: #231D1A;width: 260px;height: 100vh;top: 0;left: auto;transform: none;}
    #header #gnb ul{flex-direction: column;gap: 30px;padding-top: 100px;padding-left: 40px}
    .back_btn{display: block}
    #main .mo_visual{display: block}
    #main .visual_w2{display: none}
    #sub.kohif .contents .earth video{height: 100vh}
    #sub.kohif .contents .kohif_txt .base_text strong{font-size: 22px}
    #sub.kohif .contents .kohif_txt .base_text svg{width: 160px;height: auto}
    #sub.kohif .contents .kohif_txt .k_txt div p{font-size: 18px}
    #sub.kohif .contents .kohif_txt .k_txt{gap: 7px;}
    #sub.kohif .contents .kohif_txt .wr{gap: 25px}
    #sub.kohif .contents .kohif_txt .k_txt div.pc{display: none}
    #sub.kohif .contents .kohif_txt .k_txt div.mo{display: block}
    #sub .s_title strong{font-size: 36px;line-height: 1.5}
    #sub .s_title p{font-size: 16px;line-height: 1.5;margin-top: 15px}
    #sub.memory .contents{background: #C0B8AF}
    #sub.memory .bg img{height: 744px}
    #sub.memory .wall_wrap .wall_box .wall_bg img{width: 378px}
    #sub.memory .wall_wrap .wall_box .wall_txt span{font-size: 17px}
    #sub.memory .wall_wrap .wall_box .wall_txt{left: 100px;gap: 20px}
    #sub.memory .wall_wrap .wall_box .wall_txt strong{font-size: 14px;line-height: 1.5;margin-top: 5px}
    #sub.memory .wall_wrap .wall_box .img img{max-width: 130px}
    #sub.memory .wall_wrap .wall_box .img{margin-top: 10px}
    #sub.media_content .wr .txt strong{font-size: 13px}
    #sub.media_content .wr .txt{margin-top: 10px}
    #sub.media_content .swiper-pagination{gap: 5px}
    #header .h_btn button{font-size: 14px;align-items: center}
    #sub.media_content .swiper-pagination .swiper-pagination-bullet{width: 9px;height: 9px}
    #header #gnb ul li a{font-size: 15px;}
    #header #logo svg{height: 38px;width: auto;display: block}
    #sub .tabs ul{gap: 10px}
    #sub .tabs ul li{flex: 1}
    #sub .tabs ul li a{font-size: 13px;height: 40px;width: 100%}
    #sub.media_content .sw_w{padding-left: 0}
    #sub.media_content .swiper{width: 400px;height: 300px}
    #sub.media_content .swiper-pagination{margin-top: 10px}
    #sub.media_content .contents{display: flex;flex-direction: column}
    #sub.media_content .s_title{position: static;transform: translateX(0);text-align: center;padding-top: 100px;margin-bottom: 30px}
    #sub.media_content .sw_wr{height: auto;position: static}
    #sub.shoc .shoc_bg img{height: 500px;}
    #sub.shoc .contents{background: #403530}
    #sub.shoc .shoc_bg{transform: translate(-50%,0);top: auto;bottom: 0}
    #sub.shoc .shoc_bg:after{content: '';display: block;width: 100%;height: 60px;;background: linear-gradient(to bottom, #403530,#40353000);position: absolute;top: 0;left: 0}
    #header #gnb{transform: translateX(100%);transition: 0.7s;}
    #header #gnb.on{transform: translateX(0%);}
    #header .h_btn .share button{width: 38px;height: 38px;background: #188A42;border: none}
    #header .h_btn .share button span{display: none}
    #header .h_btn .share button svg{width: 12px;height: auto}
    #header .h_btn{gap: 20px;flex-direction: row-reverse}
    #header{height: 70px}
    #sub.shoc .shoc_bg .vid button#stopBtn{right: 10px;bottom: 10px;}
    #sub.shoc .shoc_bg .vid button#stopBtn svg{width: 7px;height: auto;}
    #header .lang ul li a{height: 30px;font-size: 13px;;}
}
@media (max-width: 660px) {
    #sub.memory .s_title .scr{position: fixed;bottom: 20px;width: 60px;height: 60px;left: 50%;transform: translateX(-50%)}
    #sub.memory .s_title .scr svg{width: 50px;height: auto;}
    #sub.memory .s_title .scr .scr2{transform: scale(0.6) translate(-80%,-70%)}
    #sub.shoc .shoc_bg img{height: 450px;}

    #sub.kohif .contents .earth{position: absolute}
    #sub.kohif .contents .earth div:before{content: '';display: block;width:100%;height: 50px;background: linear-gradient(to top, #32292500, #322925);position: absolute;top: 0;left: 0;z-index: 5}
    #sub.kohif .contents .earth div:after{content: '';display: block;width:100%;height: 50px;background: linear-gradient(to bottom, #32292500, #322925);position: absolute;bottom: 0;left: 0;z-index: 5}

    #sub.kohif .contents .kohif_txt .base_text strong{font-size: 18px}
    #sub.kohif .contents .kohif_txt .k_txt div p{font-size: 15px;}
    #sub.kohif .contents .earth div video{height: 300px;}
    #sub.kohif .contents .bg:nth-child(1){background: #322925;width: 100%;height: 100%}
    #sub.kohif .contents .bg img{display: none}
    #sub.kohif .contents .kohif_txt .bg{background: none}
    #sub.kohif .contents .kohif_txt .more_btn a{width: 210px;height: 48px;padding: 0 30px;}
    #sub.kohif .contents .kohif_txt .more_btn a span{font-size: 14px}
    #sub.memory .bg img{height: 420px}
    #sub.memory .wall_wrap{top: 2%}
    #sub.memory .wall_wrap .wall_box .wall_txt strong{font-size: 13px}
    #sub.memory .wall_wrap .wall_box .wall_txt{left: 90px;padding-left: 15px;padding-top: 110px}
    #sub.memory .wall_wrap .wall_box .img img{width: 100px}
    #sub.memory .wall_wrap .wall_box .wall_bg img{width: 223px}
    #sub.memory .wall_wrap .wall_box .wall_txt span{font-size: 15px}
    #sub.memory .wall_wrap .wall_in{padding-left: 20px}
    #sub.memory .bg{left: -200px}
    #sub.memory .wall_wrap .wall_box{margin-left: -65px}
    #sub.memory .wall_wrap .wall_box1{margin-left: 0}
    #sub.memory .s_title{z-index: 15;top: 0;transform: translateY(0)}
    #sub.memory .wall_wrap .wall_box .wall_txt{left: 56px;padding-left: 10px}
    #sub.memory .wall_wrap .wall_box .wall_txt span{font-size: 12px;}
    #sub.memory .wall_wrap .wall_box .wall_txt strong{font-size: 10px}
    #sub.memory .wall_wrap .wall_box .img img{max-width: 60px}
    #sub.memory .wall_wrap .wall_box .img{margin-top: 5px}
    #sub.memory .wall_wrap .wall_box .wall_txt{width: 100%;gap: 10px}
    #sub.memory .wall_wrap .wall_box .wall_txt{padding-top: 70px}
    #sub.memory .s_title{text-align: center;top: 100px;transform: none !Important}
    #sub .s_title strong{font-size: 30px;line-height: 1.3}
    #sub.memory .wall_wrap{top: 7%}
    #sub.memory .bg{top: 55%}
    #sub.media_content .swiper{max-width: calc(100% - 40px)}
    #sub.media_content .wr .txt strong{font-size: 12px}
    #sub .tabs{padding: 0 20px;margin-bottom: 15px}
    #sub.media_content .s_title{padding-top: 0}
    #sub.media_content .contents{align-items: center;justify-content: center}
    #sub.media_content .swiper-pagination{justify-content: center}
    #sub .s_title p{font-size: 14px;word-break: keep-all}
    #main .mo_visual .mo_wrap .btn{margin-top: 170px}
}



@media (max-width: 1600px) {
    #main .info{padding: 0 20px}
    #main .info .box .txt1 span{font-size: 16px}
    #main .info .box .txt1 strong{font-size: 18px;line-height: 1.5}
    #main .info .box .txt2 ul li{font-size: 15px}
    #main .info .box .txt1 p{font-size: 15px;line-height: 1.5;min-height: 45px}
    #main .info .box .txt2 img{width: 50px}
}
@media (max-width: 985px) {
#header .mo_menu{display: block;}

    .intro{height: 100%;width: 100%;}
    .intro .bg{position: absolute;left: 0%;top: 0%;transform: translate(00%,0%);width: 100%}
    .intro .bg video{height: auto;width: 100%}
    #main .info .box .txt2 ul li{font-size: 13px}
    #main .info .box .txt1 p{font-size: 13px;}
    #main .info .box .txt1 strong{font-size: 14px}
    #main .info .box .txt2 ul li span{width: 70px}
    #main .info{gap: 20px}
    #main .info .box{padding: 20px;border-radius: 10px }
    #main .info .box .txt2{margin-top: 15px;margin-top: 15px}
    #sub.shoc .shoc_bg .vid button{width: 40px;height: 40px;;}
    #sub.shoc .shoc_bg .vid button svg{width: 12px;height: auto;}
}
@media (max-width: 700px) {
    #main .info{flex-direction: column}
    
    #main .info .box .txt1 strong{font-size: 13px}
    #main .info .box .txt1 strong br{display: none}
    #main .info .box .txt1 p br{display: none}
	#main .info .box .txt3{ display: block; }
    #sub.memory .s_title{top: 140px;}

}
@media (max-width: 660px) {
  
    #main .info .box .txt1 span{font-size: 14px}
    #main .info .box .txt1 i{margin: 7px 0}
    #main .info .box .txt2{padding-top: 10px;margin-top: 10px}
    #main .info .box .txt2 ul li span{display: block}
    #main .info{gap: 10px}
    #main .info .box .txt1 p{min-height: 0}
    #sub.remember .contents .con_w .title strong{padding: 0 20px;}

}