@charset "utf-8";


/* mVisual */
#mVisual{height: 100vh !important; width: 100%; overflow: hidden; min-height: 560px;}
#mVisual .fp-tableCell{}
#mVisual .visual{width: 100%; height: 100%;}
#mVisual .visual .slick-list{height: 100%;}
#mVisual .visual .slick-track{height: 100%;}
#mVisual .visual .inner{height: 100%;}
#mVisual .visual .mv{width: 100%; height: 100%; position: relative;}
#mVisual .visual .mv.mv1{background: url('/images/main/mv1.webp')no-repeat center bottom/cover;}
#mVisual .visual .mv.mv2{background: url('/images/main/mv2.webp')no-repeat center bottom/cover;}
#mVisual .visual .mv.mv3{background: url('/images/main/mv3.webp')no-repeat center bottom/cover;}
#mVisual .visual .mv .txt{color: #fff; text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 10%;}
#mVisual .visual .mv .txt h4{font-size: 24px; letter-spacing: 0.25em; font-weight: 300;}
#mVisual .visual .mv .txt h4 img{display: inline-block;}
#mVisual .visual .mv .txt h3{font-size:40px; margin-top: 32px; word-break: keep-all; font-weight: normal;}
#mVisual .visual .slick-dots{transform: translateX(-50%);}
#mVisual .visual .slick-dots li{width: 50px; height: 2px; opacity: 0.3}
#mVisual .visual .slick-dots li.slick-active{background-color: #fff; opacity: 1;}

@media all and (max-width:1280px){
	#mVisual .visual .mv .txt h4{font-size: 21px;}
	#mVisual .visual .mv .txt h3{font-size: 56px; margin-top: 25px;}
}
@media all and (max-width:1024px){
	#mVisual .visual .mv .txt h4{font-size: 20px;}
	#mVisual .visual .mv .txt h3{font-size: 52px; margin-top: 23px;}
}
@media all and (max-width:768px){
	#mVisual .visual .mv .txt h4{font-size: 19px;}
	#mVisual .visual .mv .txt h3{font-size: 46px; margin-top: 21px;}
}
@media all and (max-width:640px){
    #mVisual{height: auto !important; display: block !important; min-height: 0;}
    #mVisual .visual{width: 100vw; height: auto; aspect-ratio: 640 / 800;}    
    #mVisual .visual .mv.mv1{background: url('/images/main/mv1-mo.webp')no-repeat center bottom/cover;}
    #mVisual .visual .mv.mv2{background: url('/images/main/mv2-mo.webp')no-repeat center bottom/cover;}
    #mVisual .visual .mv.mv3{background: url('/images/main/mv3-mo.webp')no-repeat center bottom/cover;}
    #mVisual .visual .slick-dots{bottom: 3%;}
    #mVisual .visual .slick-dots li{width: 30px;}

}
@media all and (max-width:500px){
	#mVisual .visual .mv .txt h4{font-size: 18px;}
    #mVisual .visual .mv .txt h4 img{height: 12px;}
	#mVisual .visual .mv .txt h3{font-size: 3.0rem; margin-top: 19px;}
}

@media all and (max-width:380px){
    #mVisual .visual .mv .txt h4 img{height: 9px;}
	#mVisual .visual .mv .txt h3{font-size: 2.4rem; margin-top: 10px;}
}


br.mo{display: none;}

/* m_txt */
.m_tit{margin-bottom: 55px;}
.m_tit h4{margin-bottom: 30px; font-size: 15px; color: #888888; font-family: 'Marcellus', 'serif'; letter-spacing: 0.56em; font-weight: normal;}
.m_tit h3{font-size: 36px; font-weight: 500; color: #000; line-height: 1.4;}
.m_tit h3 .s1{font-size: 40px}
.m_tit p{margin-top: 30px; font-size: 18px; color: #666; font-weight: 500; line-height: 1.77;}
@media all and (max-width:1280px){
    .m_tit{margin-bottom: 45px;}
    .m_tit h4{margin-bottom: 25px;}
    .m_tit h3{font-size: 32px;}
    .m_tit h3 .s1{font-size: 37px;}
}
@media all and (max-width:768px){
    .m_tit{margin-bottom: 35px;}
    .m_tit h4{margin-bottom: 20px;}
    .m_tit h3{font-size: 30px;}
    .m_tit h3 .s1{font-size: 37px;}

    br.mo{display: block;}
}
@media all and (max-width:568px){
    .m_tit h4{font-size: 1.5rem;}
    .m_tit h3{font-size: 3.0rem;}
    .m_tit h3 .s1{font-size: 3.7rem;}
    .m_tit p{font-size: 1.8rem;}
    
}


.btn_bd{display: inline-block; color: #fff; font-weight: 700; font-size: 16px; border: 1px solid #fff; min-width: 170px; line-height: 48px; border-radius: 24px; text-align: center; transition: all .2s;}
.btn_bd:hover{background-color: #0f5778; border-color:#0f5778;}


#sec1{padding:180px 0 40px; background:url('/images/main/sec1-bg.webp')no-repeat center center/cover; overflow: hidden;}
#sec1 .m_tit{text-align: center;}
#sec1 .sec1_list{padding-top: 140px; }
#sec1 .sec1_list li {transition: transform 0.6s;}
#sec1 .sec1_list li .img{}
#sec1 .sec1_list li .img img{width: 100%; border-radius: 20px;}
#sec1 .sec1_list li .txt{padding-top: 20px; display: flex; justify-content: space-between;}
#sec1 .sec1_list li .txt .l_txt{display: flex; align-items: center; gap: 10px;}
#sec1 .sec1_list li .txt .l_txt .icon{border-radius: 50%; overflow: hidden;}
#sec1 .sec1_list li .txt .l_txt .icon img{max-width: 50px}
#sec1 .sec1_list li .txt .l_txt dl dt{font-size: 20px; font-weight: 700; color: #000;}
#sec1 .sec1_list li .txt .l_txt dl dd{font-size: 16px; color: #666; font-weight: 500;}
#sec1 .sec1_list li .txt .r_txt a{background-color: #000 ; color: #fff; line-height: 48px; display: block; width: 144px; text-align: center; font-weight: 700; font-size: 16px; border-radius: 24px; transition: all .2s; border:1px solid transparent;}
#sec1 .sec1_list li .txt .r_txt a:hover{background-color: #fff; border-color:#000; color: #000;}
@media all and (max-width:1280px){
    #sec1{padding: 130px 0 40px;}
}
@media all and (max-width:768px){
    #sec1{padding: 100px 0 40px;}
    #sec1 .sec1_list{padding-top: 0px; }
}
@media all and (max-width:568px){
    #sec1{padding: 90px 0 40px;}
    #sec1 .sec1_list li .txt .r_txt a{font-size: 14px; width: 110px; line-height: 40px;}
}
@media all and (max-width:480px){
    #sec1 .sec1_list li .txt{display: block;}
    #sec1 .sec1_list li .txt .r_txt a{display: block; margin-top: 15px; width: 100%;}
}

#sec2{position: relative; height: 1000px !important; overflow: hidden; background-color: #181818; background-image: url('/images/main/sec2-bg.webp'); background-position: left top; background-size: auto 100%;}
#sec2 .inner{position: static; display: flex; align-items: center;}
#sec2 .inner > div{width: 50%;}
#sec2 .m_tit{}
#sec2 .m_tit h4{color: #fff; opacity: 0.5;}
#sec2 .m_tit h3{color: #fff}
#sec2 .m_tit p{color: #fff}
#sec2 .m_tit .btn_bd{margin-top: 65px;}
#sec2 .rotate{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#sec2 .rotate img{animation:rotate 7s linear infinite;}
#sec2 .cont_wrap{position: relative; z-index: 4; display: flex; flex-direction: column; gap: 20px; }
#sec2 .cont_wrap a{position: relative; display: block; color: #fff; width: 100%; overflow: hidden; border-radius: 20px;height: 270px;  }
#sec2 .cont_wrap dl{height: 100%; display: flex; flex-direction: column; justify-content: center; padding-left: 60px;   }
#sec2 .cont_wrap .bg{position: absolute; background-size: cover; transition: all .4s; width: 100%; height: 100%;}
#sec2 .cont_wrap .bg1{ background-image: url('/images/main/sec2-img1.png');}
#sec2 .cont_wrap .bg2{ background-image: url('/images/main/sec2-img2.png');}
#sec2 .cont_wrap dl dt{font-size: 32px; font-weight: 700; z-index: 5;}
#sec2 .cont_wrap dl dd{margin-top: 15px; font-size: 16px; font-weight: 500; opacity: 0.85; line-height: 1.75;}

#sec2 .cont_wrap a:hover .bg{transform: scale(1.05);}
@keyframes rotate {
    0%{transform: rotate(0);}
    100%{transform: rotate(360deg);}
}



@media all and (max-width:1024px){
    #sec2{padding: 130px 0; height: auto !important;}
    #sec2 .inner{display: block;}
    #sec2 .inner > div{width: 100%;}
    #sec2 .m_tit{text-align: center;}
    #sec2 .m_tit .btn_bd{margin-top: 30px;}
    #sec2 .rotate{display: none;}
}
@media all and (max-width:768px){
    #sec2{padding: 100px 0;}
    #sec2 .cont_wrap a{height: 230px;}
    #sec2 .cont_wrap dl{padding-left: 35px;}
    #sec2 .cont_wrap dl dt{font-size: 3.0rem;}
    #sec2 .cont_wrap dl dd{font-size: 1.6rem;}
}
@media all and (max-width:568px){
    #sec2{padding: 90px 0;}
}
@media all and (max-width:380px){
    #sec2 .cont_wrap dl{padding-left: 15px;}
}



#sec3{padding: 50px 0 160px; background:#181818; overflow: hidden; }
#sec3 .m_tit{text-align: center;}
#sec3 .m_tit h4{color: #fff; opacity: 0.5;} 
#sec3 .m_tit h3{color: #fff;}
#sec3 .m_tit p{color: #fff;}
#sec3 .cont_wrap ul{display: grid; grid-template-columns:repeat(3, 1fr);}
#sec3 .cont_wrap ul li{position: relative;}
#sec3 .cont_wrap ul li:before{content: ''; position: absolute; left: 0; bottom: 0;; width: 100%; height: 50%; background:linear-gradient(180deg, transparent, rgb(0, 0, 0, 0.7)); transition: all 1s;}
#sec3 .cont_wrap ul li img{width: 100%;}
#sec3 .cont_wrap ul li .txt{position: absolute; left: 0; bottom: 0; width: 100%; padding: 40px; color: #fff;}
#sec3 .cont_wrap ul li .txt dt{font-size: 24px; line-height: 1.3; font-weight: 700;}
#sec3 .cont_wrap ul li .txt dd{padding-top: 10px; font-size: 18px; font-weight: 500; opacity: 0.6;}
#sec3 .cont_wrap .btnbox{margin-top: 100px; text-align: center;}
#sec3 .cont_wrap ul li:hover:before{background:linear-gradient(180deg, transparent, rgb(0, 0, 0, 0.9))}
@media all and (max-width:1280px){
    #sec3{padding: 40px 0 130px;}
    #sec3 .cont_wrap ul li .txt dt{font-size: 2.2rem;}
    #sec3 .cont_wrap ul li .txt dd{font-size: 1.7rem;}
}
@media all and (max-width:1024px){
    #sec3 .cont_wrap ul{grid-template-columns:repeat(2, 1fr);}   
    #sec3 .cont_wrap ul li:last-child{display: none;}

}
@media all and (max-width:768px){
    #sec3{padding: 45px 0 100px;}
}
@media all and (max-width:568px){
    #sec3{padding: 30px 0 90px;}
    #sec3 .cont_wrap .btnbox{margin-top: 50px;}
    #sec3 .cont_wrap ul li .txt{padding:25px 20px;}
    #sec3 .cont_wrap ul li .txt dt{font-size: 1.8rem;}
    #sec3 .cont_wrap ul li .txt dd{font-size: 1.6rem;}
} 
@media all and (max-width:480px){
    #sec3 .cont_wrap ul{grid-template-columns:repeat(1, 1fr);}   
    #sec3 .cont_wrap ul li:last-child{display: block;}
    #sec3 .cont_wrap ul li .txt{padding:15px 10px;}
    #sec3 .cont_wrap ul li .txt dt{font-size: 1.6rem;}
    #sec3 .cont_wrap ul li .txt dd{padding-top: 2px; font-size: 1.4rem;}

} 

#sec4{position: relative; background-color: #181818;}
#sec4 .circle-img{position: relative; overflow: hidden;
    z-index: 2;}
/* #sec4.is-active .circle-img{width: 100% ; height: 100%; border-radius: 0;} */

#sec4 .circle-img img{width: 100%;height: auto;object-fit: cover;clip-path: circle(10% at 50% 50%);transition: clip-path 0.3s ease-out;}
#sec4 .txt{position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; color: #fff; text-align: center;}
#sec4 .txt dt{font-family: 'Cinzel'; font-size: 92px; line-height: 1;}
#sec4 .txt dd{margin-top: 50px; font-size: 20px; line-height: 1.6;}
@media all and (max-width:1919px){
    #sec4 .circle-img img{width: 100%; height: 100%; object-fit: cover;}
}
@media all and (max-width:1919px)
    and (orientation:landscape){
    #sec4 .circle-img{height: 125vh;}
}
@media all and (max-width:1919px)
    and (orientation:portrait){
    #sec4 .circle-img{height: 100vh;}
}
@media all and (max-width:1280px){
    #sec4 .txt dt{font-size: 8rem;}
    #sec4 .txt dd{margin-top: 2em; font-size: 1.8rem;}
}
@media all and (max-width:768px){
    #sec4 .txt dt{font-size: 6.4rem;}
}
@media all and (max-width:568px){
    #sec4 .txt dt{font-size: 5.4rem;}
    #sec4 .txt dd{font-size: 1.6rem;}
}



#sec5{padding: 180px 0 190px; overflow: hidden;}
#sec5 .m_tit{text-align: center;}
#sec5 .swiper{overflow: visible;}
#sec5 .cont_wrap li{cursor: pointer;}
#sec5 .cont_wrap img{max-width: 100%; border-radius: 10px;}
#sec5 .cont_wrap dl dd{padding: 15px 0 10px; font-size: 16px; font-weight: 500; color: #888;}
#sec5 .cont_wrap dl dt{font-size: 20px; font-weight: 600; color: #000; line-height: 1.4; min-height: 2.8em;}
#sec5 .cont_wrap p{padding-top: 20px; text-align: right; font-weight: 700; color: #20384f; font-size: 16px;}
#sec5 .sec5_tabs{margin-bottom: 80px;}
#sec5 .sec5_tabs .tabs{display: flex; justify-content: center; align-items: center;}
#sec5 .sec5_tabs .tabs .tab{display: block; padding: 0 14px; font-size: 18px; color: #888; font-weight: 500; font-family: 'Pretendard', 'Noto Sans KR';}
#sec5 .sec5_tabs .tabs .tab.active{color: #000; font-weight: 600;}
#sec5 .sec5_tabs .tabs .tab + .tab{position: relative;}
#sec5 .sec5_tabs .tabs .tab + .tab:before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background-color: #e6e6e6;}
#sec5 .tab-content{display: none; }
#sec5 .tab-content.active{display: block;}
@media all and (max-width:1280px){
    #sec5{padding: 130px 0 140px;}
}
@media all and (max-width:768px){
    #sec5{padding: 100px 0 110px;}
    #sec5 .sec5_tabs{margin-bottom: 45px;}
}
@media all and (max-width:568px){
    #sec5{padding: 90px 0 100px;}
}









.scrolldown{position: fixed; left: 30px; top: 50%; z-index: 990; transform: translateY(-50%); color: #fff; display: flex;  gap:10px; flex-direction: column; align-items: center;}
.scrolldown p{font-family: 'Marcellus'; font-size: 14px; writing-mode: vertical-rl;}
.scrolldown .vline{position: relative; margin-right: 3px; width: 1px; height: 100px; background-color: rgb(255, 255, 255, 0.3); overflow: hidden;}
.scrolldown .vline span{position: absolute; background-color: rgb(255, 255, 255, 0.9); height: 50px; width: 1px; animation: scrolldown 2s infinite linear;}
@media all and (max-width:768px){
    .scrolldown{display: none;}
}

.fp-viewing-main .scrolldown{display: none;}

.fp-viewing-dream .scrolldown{color: #000;}
.fp-viewing-dream .scrolldown .vline{background-color: rgb(0, 0, 0, 0.3);}
.fp-viewing-dream .scrolldown .vline span{background-color: rgb(0, 0, 0, 0.9);}

.fp-viewing-dream5 .scrolldown{color: #000;}
.fp-viewing-dream5 .scrolldown .vline{background-color: rgb(0, 0, 0, 0.3);}
.fp-viewing-dream5 .scrolldown .vline span{background-color: rgb(0, 0, 0, 0.9);}

@keyframes scrolldown {
    0% {
        top: -36px;
    }
    
    100% {
        top: 140px;
    }
}




.item_fix{position: fixed; right: 100px; bottom: 0; width: 300px; max-height: 530px; z-index: 100; background: #000; border-radius: 20px 20px 0 0;}
.item_fix .in{}
.item_fix .onbtn{padding:4px 28px 0; line-height: 65px;font-size: 18px; font-weight: 700; color: #fff; display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
.item_fix .onbtn span:before{content: '↑'; font-family: 'Suit';}
.item_fix .onbtn.on span:before{content: '↓';}
.item_fix p.hline{margin: 0 28px 15px; height: 1px; background-color: #fff; opacity: 0.3;}
.item_fix .item_list_wrap{overflow-y: scroll; height: 450px;}
.item_fix .item_list_wrap ul{padding: 0 28px;}
.item_fix .item_list_wrap ul li{padding-bottom: 30px;}
.item_fix .item_list_wrap ul li img{max-width: 100%;}
.item_fix .item_list_wrap ul li a{color: #fff;}
.item_fix .item_list_wrap ul li .title{padding: 10px 0; font-size: 16px; line-height: 1.5;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.item_fix .item_list_wrap ul li .chnl{display: flex; align-items: center; gap: 10px;}
.item_fix .item_list_wrap ul li .chnl img{border-radius: 50%; max-width: 40px}
.item_fix .item_list_wrap ul li .chnl p{font-size: 16px;}

@media all and (max-width:1280px){
    .item_fix{width: 280px;}
    .item_fix .onbtn{padding: 2px 20px 0; line-height: 40px; font-size: 16px;}
    .item_fix p.hline{margin: 0 20px 15px;}
    .item_fix .item_list_wrap ul li .chnl img{width: 30px;}
    .item_fix .item_list_wrap ul li .chnl p{font-size: 1.4rem;}
}
@media all and (max-width:768px){
    .item_fix{right: auto; left: 10px;}
    .item_fix{width: 220px;}
    .item_fix .item_list_wrap ul li .title{font-size: 1.5rem;}
    .item_fix .item_list_wrap ul li .chnl img{width: 20px;}
    .item_fix .item_list_wrap ul li .chnl{gap: 5px;}
}
@media all and (max-width:380px){
    .item_fix{width: 190px;}
}