@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
*      
 * SUMMARY:
 * 1) MAIN animation
 * 2) MAIN CONTENTS
*/

/* **************************************** *
 * 사이트 시작시 커버
 * **************************************** */
.main-cover{position:fixed; opacity:1; visibility:visible; top:0; left:0; z-index:999; width:100%; height:100%; background:#121212; transition:all 1.2s ease 0s;}
.motion-on .main-cover{opacity:0; visibility:hidden;}

/* **************************************** *
 * 인트로
 * **************************************** */
.vas-intro{height: 100vh; /* display: flex; */ position: relative;}
.vas-intro__box{width: 50%; height: 100%; position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: var(--trans-01);}
.vas-intro__box.v1{ left: 0; top: 0;  background: url(../img/main/intro-01.jpg) no-repeat; background-size: cover; background-position: 50% 50%;}
.vas-intro__box.v2{ right: 0; top: 0; background: url(../img/main/intro-02.jpg) no-repeat; background-size: cover; background-position: 50% 50%;}
.vas-intro__box em{display: block; text-align: center; font-size: 69rem; font-weight: 600; margin-top:33rem; color: #fff; line-height: 1;}
.vas-intro__box a.btn-basic{margin-top: 0rem; opacity: 0; visibility: hidden; transform: translateY(60rem); transition: var(--trans-01);}
.intro-lang{ position: absolute; z-index: 10; right: 50rem; top:50rem; color: var(--f-01); font-size: 14rem; transition: all .3s;  font-weight: 700; padding: 4rem 11rem; gap: 6rem; display: inline-flex; align-items: center; }
.intro-lang::before{content: ""; width: 9rem; height: 9rem; border-radius: 90rem; background-color: rgba(255,255,255,.5); display: block; transition: all .3s; }
.vas-intro:hover > *{opacity:0.5;}
.vas-intro__box:hover{opacity:1 !important;}

@media (min-width: 1024px) and  (hover: hover) and (pointer: fine){
    .vas-intro__box.v1:hover{width: 60%; border-radius: 0 60rem 60rem 0;  z-index: 2;}
    .vas-intro__box.v2:hover{width: 60%; border-radius: 60rem 0 0 60rem;  z-index: 2;}
    .vas-intro__box:hover a.btn-basic{margin-top: 133rem; opacity: 1; visibility: visible; transform: translateY(0);}
    .vas-intro__box a.intro-lang:hover{color: var(--c-01);}
    .vas-intro__box a.intro-lang:hover::before{background-color: var(--c-01);}
}

body:not(.fp-viewing-0) a.another-web{border:1px solid var(--br-01)}
body:not(.fp-viewing-0) #gnb .gnb-item > a{color: var(--b-01);}

@media all and (max-width:1200px){
	.vas-intro__box em{font-size: 58rem;}
    
}
@media all and (max-width:1023px){
	.vas-intro__box em{font-size: 42rem}
    .vas-intro__box img{width: 140rem;}
    .vas-intro__box a{opacity: 1; visibility: visible;}
    .vas-intro__box a.btn-basic{opacity: 1; visibility: visible;}
}
@media (max-width:860px){
    .intro-lang{right: 30rem; top: 30rem;}
    .vas-intro{display: flex; flex-direction: column;}
    .vas-intro__box{position: relative; width: 100%;}

}
@media (max-width: 540px){
    .intro-lang{right: 24rem; top: 20rem;}
    .vas-intro__box img{width: 100rem;}
    .vas-intro__box em{text-transform: uppercase; font-size: 32rem; margin-top: 12rem;}
    .vas-intro__box a{transform: translateY(0); margin-top: 23rem;}
}

/* **************************************** *
 * Main animation set
 * **************************************** */
[data-txt-motion]{}
[data-txt-motion="hidden"]{overflow:hidden;}
[data-txt-motion="hidden"] > span{display:block; opacity:0;}

.swiper-slide-active [data-txt-motion="hidden"] > span{animation:text_hidden_motion 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-duration: 1.8s;  animation-fill-mode: both;   animation-delay: 1s;}
.swiper-slide-active [data-txt-motion="left"]{animation:text_left_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="right"]{animation:text_right_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="up"]{animation:text_up_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="down"]{animation:text_down_motion 1.6s ease 0.1s forwards;}

@keyframes text_hidden_motion {
 from{opacity:0; transform:translateY(86px);}
 to{opacity:1; transform:translateY(0);}
}
@keyframes text_left_motion {
 from{opacity:0; transform:translateX(70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_right_motion {
 from{opacity:0; transform:translateX(-70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_up_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateX(0);}    
}
@keyframes text_down_motion {
 from{opacity:0; transform:translateY(-70rem);}
 to{opacity:1; transform:translateX(0);}
}

/* **************************************** *
 * Site custom
 * **************************************** */

/* main visual */
.main-visual,.main-visual .fp-overflow{height:var(--height-full);}
.main-visual-container,
.main-visual-wrapper,
.main-visual .swiper-slide{height:100% !important;}
.main-visual .swiper-slide::before{content:'';position:absolute;background-position:50% 50%;transition:all 1s ease;transform:scale(1);inset:0;background-repeat:no-repeat;background-size: cover;}
.main-visual .swiper-slide .wrap{width:100%;}
.main-visual__bg{position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual__bg i{display:block; height:100%; background-position:50% 50%; background-size: cover;}
.main-visual__video{ position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; }
.main-visual__btn{position:relative;width:30rem;height:30rem;cursor:pointer;display: flex;align-items: center;margin: 0 25rem;font-size: 16rem;color: #fff;font-weight: 600;}
.main-visual__btn::after{content:"";display:block;min-width: 30rem;height: 30rem;background:url(../img/common/arrow-basic_w.svg) no-repeat 50% 50%;background-size: 14rem;}
.main-visual__btn.button-prev{flex-direction: row-reverse;}
.main-visual__controls{position:absolute;bottom: 78rem;left:0;z-index:999;width:100%;}
.main-visual__controls > div{display:flex;align-items:center;justify-content: center;gap: 27rem;}
.main-visual__count{display:flex; align-items:center; margin:0 50rem; font-size:17rem; color:#fff;}
.main-visual__count i{display:flex; align-items:center; position:relative;}
.main-visual__count i::after{content:""; display:block; width:3rem; height:3rem; margin:0 10rem; background:#fff;}
.main-visual__btn.button-next::after{transform:rotate(-90deg);}
.main-visual__btn.button-prev::after{transform: rotate(90deg);}

.main-visual .swiper-pagination{display:flex;gap: 17rem;position: relative; bottom: 0 !important;}
.main-visual .swiper-pagination-bullet{background: var(--f-01);}
.main-visual .swiper-pagination-bullet{opacity:0.4;width: 10rem;height: 10rem;background:#fff; margin: 0 !important;}
.main-visual .swiper-pagination-bullet-active{opacity:1;width: 35rem;border-radius: 12rem;background: var(--c-01);}

.main-visual__text{position:absolute; top:40vh; width:100%; text-align:center; color:#fff;}
.main-visual__text h1{letter-spacing: -8.5rem;}
.main-visual__text h1 > span{display: inline-block;font-weight:700; color: #fff;} 
.main-visual__text p{margin-top:17rem; font-weight:700; font-size:23rem;}
.main-visual__text.v2{top: 34vh;}
[lang="en-US"] .main-visual__text h1{letter-spacing: -1.5rem;}

.main-visual__bar{position:absolute; bottom:0; z-index:50; width:100%; height:10rem; background:rgba(255,255,255,0.3);}
.main-visual__bar > i{position:absolute; width:0%; height:100%; background:var(--c-01);}
.main-visual .swiper-slide-active .main-visual__bar > i{ width: 100%; transition: var(--progress-duration) linear; }

.main-visual__play-wrap{width: 14rem; height:14rem; position: relative;}
.main-visual__play{position:absolute;top: 0;left:0;z-index:99999;/* background:#fff; */font-size: 0;cursor:pointer;width: 14rem;height: 14rem;}
.main-visual__play.play{background: url(../img/main/ic-play.svg); background-size: contain; background-repeat: no-repeat;}
.main-visual__play.pause{background: url(../img/main/ic-visual-pause.svg); background-size: contain; background-repeat: no-repeat;}
.main-visual__play:not(.on){opacity:0; visibility:hidden;}
.main-visual__play.on{opacity:1; visibility:visible;}

@media (max-width:1023px){
	.main-visual{min-height: 600rem;}
    .main-visual__text h1{letter-spacing: -6rem;}
}

@media (max-width:860px){
	
}

@media (max-width:540px){
    .main-visual .swiper-pagination{gap: 10rem;}
    .main-visual__controls > div{gap: 20rem;}
	.main-visual__text{top:280rem;}
    .main-visual__text h1{letter-spacing: -4rem;}
	.main-visual__text p{margin-top:10rem; font-size:15rem;}
    .main-visual__text.v2{top: 29vh;}
    .main-visual__text.v3{top: 250rem;}
    .main-visual__count{margin:0 10rem; font-size:15rem;}
	.main-visual__btn{font-size:14rem;}
    .main-visual__controls{bottom: 40rem;}
    [lang="en-US"]  .main-visual__text h1{letter-spacing: -1rem; font-size: 34rem;}

}

.main-wrap{height: 100%;z-index: -2;padding-left: 252rem;padding-right: 252rem;width: 100%;left: 0;top: 0;}
.main-wrap:has(.line-wrap){position: absolute;}
.fp-overflow{height: 100%;}

.main-intro{position: relative;}
.main-intro  h2{font-family: var(--lang-ko); color: var(--b-01); font-size: 72rem;}
.main-intro .fp-overflow{position: relative; width: 100%; height: 100%; }

.main-intro__title{text-align: center; align-items: center; gap: 23rem;}
.main-intro__title + .main-intro__title{margin-top: 15rem;}
.main-intro p{margin-top: 55rem; color: var(--b-01); text-align: center;}
.main-intro .symbol{opacity: .15;position: absolute;left: 50%;transform: translateX(-50%);top: -130px;z-index: -1;}
.main-intro__img{border-radius: 120rem;  height: 100rem; overflow: hidden; transition: var(--trans-03);}
.main-intro__img.img01{width: 353rem;  background: url(../img/main/main-sec0202.jpg); background-size: 120%; background-position: 50%; }
.main-intro__img.img02{width: 100rem; background:url(../img/main/main-sec0201.jpg); background-size: 120%; background-position: 50%;}
.main-intro__img.img03{width: 308rem; background:url(../img/main/main-sec0203.jpg); background-size: 120%; background-position: 50%;}
.main-intro div:has([fullpage-ani]){overflow: hidden;}
.main-intro.fp-completely .main-intro__img.img01,
.main-intro.fp-completely .main-intro__img.img02,
.main-intro.fp-completely .main-intro__img.img03{background-size: 100%;}
.main-intro .btn-text{margin-top: 67rem;}
.main-intro__conts {display: flex;flex-direction: column;align-items: center;position: absolute;width: 100%;top: 38vh;overflow: visible !important;}

@media (max-width:1680px){
    .main-wrap{padding-left: 60rem; padding-right: 60rem;}
}
@media (max-width:1480px){
    .main-intro h2{font-size: 60rem;}
    .main-intro__img{height: 94rem;}
    .main-intro .symbol{width: 76%;}
}
@media all and (max-width:1200px){
	[lang="en-US"] .main-intro h2{font-size: 40rem;}
}
@media all and (max-width:1023px){
    .main-wrap{padding-left:40rem; padding-right: 40rem;}
    .main-intro .fp-tableCell{height: auto !important;}
    .main-intro div:has([fullpage-ani]){overflow: visible;}
    .main-intro{min-height: auto !important; height: auto !important;}
    /* .main-intro .fp-overflow,  */ .main-intro .fp-tableCell{padding: 220rem 0 120rem ; }
    .main-intro__conts{position: relative; top: 0;}
    .main-intro h2{font-size: 45rem;}
    .main-intro__img{height: 75rem;}
    .main-intro__img.img01{width: 242rem;}
    .main-intro__img.img02{width: 75rem;}
    .main-intro__img.img03{width: 210rem;}
    .main-intro .symbol{top: -90rem;}
    .main-intro__conts{padding: 0 40rem;}
    .main-intro p br{display: none;}

    [lang="en-US"] .main-intro h2{font-size: 30rem;}
    
}


@media (max-width:860px){
    [lang="en-US"] .main-intro h2{font-size:24rem}
    .main-intro__img{height: 55rem;}
    .main-intro__img.img01,.main-intro__img.img03{width: 182rem;}
}
@media (max-width: 540px){
    .main-wrap{padding: 0 20rem; /* padding-top: 80rem; */}
    .main-intro{overflow: hidden;}
    .main-intro h2{font-size: 30rem;}
    .main-intro__title{gap: 12rem; row-gap: 10rem;}
    .main-intro__img{height: 45rem;}
    .main-intro__img.img01{width: 45rem;}
    .main-intro__img.img02{display: none;}
    .main-intro__img.img03{width: 100%; height: 65rem;}
    .main-intro__title + .main-intro__title{flex-direction: column; margin-top: 12rem;}
    .main-intro p{margin-top: 35rem;}
    .main-intro .btn-text{margin-top: 46rem;}
    .main-intro .symbol{top:-11%; width: 105%;}
    .main-intro .fp-overflow,.main-intro .fp-tableCell{padding: 110rem 0 80rem;}
    [lang="en-US"] .main-intro__title{flex-direction: column; justify-content: center;}
    
}

.main-technologies{background-color: var(--bg-01); max-height: 100vh; overflow: hidden; border-radius: 0 60rem 0 0;}
.main-technologies .swiper-container{width: 100%; height: 100%; background: transparent; /* padding-top: 162rem; */ overflow: visible;}
.main-technologies .swiper-wrapper{align-items: end;}
.main-technologies .swiper-slide{background-color: transparent;display: block; height:calc(100% - 162rem)}
.main-tech__round{width: 686rem; height: 686rem; border-radius: 100%; position: relative; z-index: 1;}
.main-tech__round.round-image01{background: url(../img/main/main-tech01.jpg) no-repeat; background-size: cover; background-position: 50% 50%;}
.main-tech__round.round-image02{background: url(../img/main/main-tech03.jpg) no-repeat; background-size: cover; background-position: 50% 50%;}
.main-tech__round.round-image03{background: url(../img/main/main-tech02.jpg) no-repeat; background-size: cover; background-position: 50% 50%;}

.main-tech__round.round-image04{background: url(../img/main/main-tech0201.jpg) no-repeat; background-size: cover; background-position: 50% 50%;}
.main-tech__round.round-image05{background: url(../img/main/main-tech0202.jpg) no-repeat; background-size: cover; background-position: 50% 50%;}

.main-tech__wrap{margin-top: 82rem;position: relative;}
.main-tech__wrap .btn-basic{z-index: 2;display: inline-flex;position: absolute;top: 265rem;max-width: 193rem;left:588rem;}
.main-tech__wrap strong{position: absolute; text-transform: uppercase; z-index: 0;font-size: 172rem;top:-50rem;background: linear-gradient(102deg, rgba(73, 203, 222, 0.19) 40.55%, rgba(216, 218, 0, 0.17) 148.33%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
/* .main-tech__wrap strong.v3{left: 40%;} */
.main-tech__slide .cmn-title > div{overflow: hidden;}
.main-tech__slide .cmn-title > div *{opacity: 0; visibility: hidden; transform: translateY(30rem); transition: all .5s;}
.main-tech__slide .cmn-title > div p{margin-top: 8rem;}
.main-tech__slide.swiper-slide-active .cmn-title > div *{opacity: 1; visibility: visible; transform: translateY(0); transition-delay: .7s;}
.main-technologies .swiper-pagination,
.main-technologies .swiper-horizontal > .swiper-pagination-bullets,
.main-technologies  .swiper-pagination-bullets.swiper-pagination-horizontal{width: auto !important;bottom: inherit;top: 172rem;left: inherit;right: 0;gap: 14rem;}
.main-technologies .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, 
.main-technologies .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{width: auto !important;height: auto !important;border-radius: 30rem;padding: 6rem 12rem 6rem 11rem;background: transparent;color: var(--b-03);display: inline-flex;opacity: 1;align-items: center;gap: 11rem;margin: 0;}
.main-technologies .swiper-pagination-bullet-active{background: var(--gr-02) !important;color: #fff !important;}
.main-technologies .swiper-pagination-bullet span{width: 9rem;height: 9rem;border-radius: 20rem;margin-right: 0;display: inline-block;/* background: #fff; */ background:#9FDAE2}
.main-technologies .swiper-pagination-bullet-active span{background:#fff}

body.color2 .main-technologies{background-color: #D0D735;}
body.color2 .main-tech__slide .cmn-title > div *{color: var(--f-01);}
body.color2  .main-tech__wrap strong{background:transparent; color: rgba(255,255,255,0.31) !important; -webkit-text-fill-color:rgba(255,255,255,0.31)}
body.color2  .main-tech__slide a .arrow-box{background-color: var(--c-02);}
body.color2  .main-tech__slide a .arrow-box path{stroke: var(--f-01);}
body.color2  .main-technologies .swiper-pagination-bullet span{background: rgba(255,255,255,.5);}
body.color2 .main-technologies .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
body.color2  .main-technologies .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{color: rgba(255,255,255,0.6);}
body.color2  .main-technologies .swiper-pagination-bullet-active{background: var(--f-01) !important; font-weight: 500; color: var(--b-01) !important;}
body.color2  .main-technologies .swiper-pagination-bullet-active span{background: var(--c-02);}
@media (max-width:1480px){

}
@media all and (max-width:1200px){
	.main-technologies .swiper-slide{height: calc(100% - 240rem);}
    .main-tech__round{width: 640rem; height: 640rem;}
    .main-tech__wrap .btn-basic{ left: 540rem;/* top: 165em; */}
    .main-tech__wrap strong{top: -50rem;}
}
@media all and (max-width:1023px){
	/*화면 768에 맞춰놓고 작업*/
    .main-technologies .swiper-slide{height: calc(100% - 130rem);}
    .main-technologies .swiper-pagination, .main-technologies .swiper-horizontal > .swiper-pagination-bullets, .main-technologies .swiper-pagination-bullets.swiper-pagination-horizontal{top: 92rem;}
    .main-tech__round{width: 570rem; height: 570rem;}
    .main-tech__wrap strong{font-size: 152rem; top: -70rem;}
    .main-tech__wrap .btn-basic{left: 480rem; top: 225rem;}

}
@media (max-width:860px){
    .main-technologies .swiper-slide{height: calc(100% - 190rem);}
    .main-tech__round{width: 460rem; height: 460rem;}
    .main-technologies .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .main-technologies .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{font-size: 15rem;}
    .main-technologies .swiper-pagination, .main-technologies .swiper-horizontal > .swiper-pagination-bullets, .main-technologies .swiper-pagination-bullets.swiper-pagination-horizontal{gap: 0;}
    .main-technologies .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .main-technologies .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{gap: 6rem;}
    .main-tech__wrap strong{font-size: 120rem; line-height: 1.1; top: -40rem;}
    .main-tech__slide.swiper-slide-active .cmn-title > div p{margin-top: 10rem;}
    .main-tech__wrap .btn-basic{left: 45%; top: 280rem; transform: translateX(-50%);}
    .main-tech__round{width: 640rem; height: 640rem;}
    .main-tech__wrap strong.v3{left: 0;}
    .main-technologies{border-radius: 0 50rem 0 0;}
    
}
@media (max-width: 540px){
    .main-tech__slide.swiper-slide-active .cmn-title > div p br{display: none;}
    .main-tech__round{width: 300rem; height: 300rem; margin: 0 auto;}
    .main-tech__wrap strong{font-size: 67rem;}
    .main-tech__wrap{margin-top: 62rem;}
    .main-tech__wrap .btn-basic{max-width: fit-content; left: 50%; top: -20rem;}
    .main-technologies .swiper-pagination, .main-technologies .swiper-horizontal > .swiper-pagination-bullets, .main-technologies .swiper-pagination-bullets.swiper-pagination-horizontal{width: 100% !important;}
    .main-technologies .swiper-pagination-bullet span{min-width: 9rem;}
    .main-technologies .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .main-technologies .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{line-height: 1; font-size: 12rem;}
    .main-technologies .swiper-slide{height: calc(100% - 110rem);}
    .main-technologies .swiper-container{overflow: hidden;}
    .main-technologies .swiper-pagination, .main-technologies .swiper-horizontal > .swiper-pagination-bullets, .main-technologies .swiper-pagination-bullets.swiper-pagination-horizontal{top: 64rem;}
    .main-technologies{border-radius: 0 40rem 0 0;}
}



.main-board__title{min-width: 572rem;}
.main-board__title a.btn-basic{margin-top: 48rem;}
.main-board__title h2{font-family: var(--lang-ko);}
/* .main-board__title a.btn-basic span{transition-delay:.4s} */
.main-board__list{flex: 1;display: flex;flex-direction: column;gap: 12rem;padding-top: 49rem;}
.main-board__wrap{/* padding: 0 9rem; */padding-top: 11vh;box-sizing: border-box;}
.main-board__item a{width: 100%; position: relative; border-radius:20rem; transition: var(--trans-01); background-color: var(--bg-01);height: 138rem;align-items: center;justify-content: space-between;padding: 0 30rem;}
.main-board__item a .date{font-size:15rem; min-width: 86rem; color: var(--b-03);margin-right: 36rem; font-weight: 600; transition: var(--trans-01);}
.main-board__item a strong{/* flex: 1; */font-size: var( --font-ko--18);font-weight: 600;color: var(--b-02);transition: var(--trans-01);overflow: hidden;word-break: break-all;-webkit-line-clamp: 1;text-overflow: ellipsis;-webkit-box-orient: vertical;/* width: 90%; */display:  -webkit-box;/* white-space: nowrap; */}
.main-board__item a figure{position: absolute;z-index: 10;width: 388rem;height: 225rem;top: 58%;transform: translateY(40rem);opacity: 0;visibility: hidden; overflow: hidden;border-radius: 20rem;transition: var(--trans-02);left: 36%;box-shadow: 25px 25px 18px 0px rgba(167, 167, 167, 0.25);background-color: #fff;background: #f7f7f7 url(../img/layout/logo.svg) no-repeat 50% 50%;background-size: 149rem;background-color: #ffff;}
.main-board__item a figure img{width: 100%; height: 100%; object-fit: cover;}
.main-board__item div{display: flex; }

.main-board__item .arrow-box{border-color: var(--f-01);min-width: 30rem;}
.main-board__item:last-child a figure{top: -30%;}
body.color2 .main-board__item a .arrow-box{border-color: var(--f-01);}

@media (hover: hover) and (pointer: fine){
    .main-board__item:hover a{background-color: var(--hover);}
    .main-board__item:hover .date{color: var(--c-01);}
    .main-board__item:hover strong{color: var(--b-01);}
    .main-board__item:hover figure{ z-index: 2; opacity:1; visibility: visible; transform: translateY(0);}

    body.color2 .main-board__item:hover a{background-color: #F6F7EA;}
}

@media (max-width:1480px){

}
@media all and (max-width:1200px){
    .main-board__title{width: 502rem;}
    
}
@media all and (max-width:1023px){
    /* .fp-overflow{height: auto !important;} */
    .main-board.fp-section{min-height: auto !important;}
    .main-board .fp-overflow{padding: 100rem 0; max-height: fit-content}
    .main-board__title{width: 100%; min-width: inherit;}
	.main-board__title h2 br:nth-child(1){display: none;}
    .main-board__wrap{flex-direction: column; padding-top: 0; padding: 100rem 0 60rem;}
    .main-board__item a{height: auto ; padding: 24rem; justify-content: flex-start; gap: 22rem;}
    .main-board__item a figure{width: 188rem; height: 115rem; border-radius: 10rem; opacity: 1; top: 0; left: 0; transform: translate(0); box-shadow: none;  position: relative; visibility: visible;} 
    .main-board__item .arrow-box{position: absolute; right: 24rem; top: 50%; transform: translateY(-50%);}

}
@media (max-width:860px){
    .main-board .fp-overflow{padding: 80rem 0;}
}
@media (max-width: 540px){
    .main-board__wrap{padding: 60rem 0 130rem;}
    .main-board .fp-overflow{padding: 60rem 0;}
    .main-board__item a{flex-direction: column; align-items: flex-start; border-radius: 14rem;}
    .main-board__item a .date{display: block; font-size: 14rem; margin-bottom: 4rem; margin-right: 0;}
    .main-board__item .arrow-box{display: none;}
    .main-board__item a figure{width: 100%; height: 180rem;}

    .main-board__title a.btn-basic{margin-top: 28rem;}
}

.main-video{padding: 35rem 100rem; box-sizing: border-box; position: relative;}
.main-video::before{content: ""; position: absolute; width: 100%; left: 0; height: 187rem; background-color: var(--c-01); bottom: 0; z-index: -1;}
.main-video__wrap{width: 100%;height: 760rem;border-radius: 60rem;overflow: hidden;position: relative;z-index: 10;}
.main-video__wrap video{width: 100%; height: 100%; object-fit: cover;}
.main-video__tit{display: inline-flex; padding: 10rem 38rem; color: #fff; border: 3px solid var(--c-01, #5EC1D0);
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(17px); border-radius: 90rem;  position: absolute; top: 40rem; left:50%; transform: translateX(-50%); z-index: 2; font-size: 22rem; line-height: 40rem;}
.main-video p{position: absolute; bottom: 42rem; right: 42rem; font-size: 14rem; font-weight: 600; color: #fff; z-index: 1;}

.btn-circle {position: absolute;display: inline-flex;align-items: center;justify-content: center; left: 50%;font-weight: 800;z-index: 11; border-radius: 100%; background:transparent;top: 50%;transform: translate(-50%,-50%);}
.btn-circle.play_btn span {position: relative;width: 73rem;height: 73rem;font-size: 0; background-repeat: no-repeat;background-position:left 52% center;background-image: url(../img/main/ic-play.svg);transition: var(--trans-01);}
.main-video__wrap.active .btn-circle.play_btn span{background-image: url(../img/main/ic-pause.svg); opacity: 0.3; background-size: 20rem;}

body.fp-viewing-5 header{display: none;}
body.color2 .main-video::before{background-color:#0F1621;}
@media (max-width:1480px){
    .main-video__tit{font-size: var(--font-ko--18); padding: 5rem 34rem;}
}
@media all and (max-width:1200px){
	.main-video{padding: 30rem 60rem;}
    .main-video__wrap{border-radius: 50rem; height: 640rem;}
    .btn-circle.play_btn span{width: 44rem; height: 44rem; background-size: contain;}
    
}
@media all and (max-width:1023px){
    .main-video{padding: 30rem 40rem;}
    .main-video__wrap{border-radius: 30rem; height: 480rem;}
    .main-video__tit{padding: 0 25rem;}
    .main-video p{bottom: 22rem; right: 22rem;}
}
@media (max-width:860px){
    .main-video__wrap{border-radius: 20rem; height: 400rem;}
}
@media (max-width: 540px){

    .main-video{padding: 0 20rem;}
    .main-video .fp-overflow{overflow: visible;}
    .main-video__wrap{border-radius: 0rem; overflow: visible; height: 200rem;}
    .main-video__wrap video{border-radius: 10rem;}
    .main-video__tit{top: -65rem; color: var(--c-01); padding: 8rem 24rem; line-height: 1.5;}
    .main-video p{bottom: 10rem; right: 10rem; font-size: 9rem; opacity: 0.4; font-weight: 500;}
    .btn-circle.play_btn span{width: 24rem; height: 24rem;}
    .main-video::before{height: 68rem;}

    [lang="en-US"] .main-video__tit{white-space: nowrap; text-align: center; justify-content: center;}
    
}


ul#menu {
    position: absolute;
    left: 50%;
    z-index: 999;
    font-size: 65rem;
    color: #fff;
    background: #000;
    top: 260rem;
}