@charset "utf-8";

.mobileView{display:none;}

.mainBanner{position:relative;}
.mainBanner .mainBannerCont img{display:none;}
.mainBanner .mainBannerCont .slick-list img{width:100%;}
.mainBanner .mainBannerCont .slick-slide{position:relative;}
.mainBanner .mainBannerCont .slick-slide div{vertical-align:top;}
.mainBanner .mainBannerCont .bannerFirst img{display:block;}
.mainBanner .mainBannerCont.slick-initialized .slick-list .bannerImg img{display:block;}
.mainBanner .slick-arrow{width:30px;height:57px;margin-top:-29px;background:none;position:absolute;top:50%;border:0;z-index:1;display:none;}
.mainBanner .slick-arrow:before,
.mainBanner .slick-arrow:after{width:40px;height:2px;background:#fff;position:absolute;left:-5px;content:"";}
.mainBanner .slick-arrow:before{top:14px;}
.mainBanner .slick-arrow:after{bottom:14px;}
.mainBanner .slick-arrow.slick-prev{left:16%;}
.mainBanner .slick-arrow.slick-prev:before{transform:rotate(-45deg);}
.mainBanner .slick-arrow.slick-prev:after{transform:rotate(45deg);}
.mainBanner .slick-arrow.slick-next{right:16%;}
.mainBanner .slick-arrow.slick-next:before{transform:rotate(45deg);}
.mainBanner .slick-arrow.slick-next:after{transform:rotate(-45deg);}
.mainBanner .slick-controls{position:absolute;right:4.3%;bottom:73px;line-height:0;display:flex;}
.mainBanner .slick-controls .slick-dots{margin:0 10px;}
.mainBanner .slick-controls .slick-dots li{display:inline-block;margin-right:5px;}
.mainBanner .slick-controls .slick-dots li button{width:15px;height:15px;background:#fff;border-radius:50%;border:1px solid #141a98;font-size:0;letter-spacing:-1000em;text-indent:-1000em;}
.mainBanner .slick-controls .slick-dots li.slick-active button{width:29px;background:#273783;border:0;border-radius:30px;}
.mainBanner .slick-controls > button{position:relative;border:0;background:none;}
.mainBanner .slick-controls .slide-pause{width:10px;height:15px;}
.mainBanner .slick-controls .slide-pause:before,
.mainBanner .slick-controls .slide-pause:after{width:3px;height:15px;background:#fff;position:absolute;top:0;content:"";}
.mainBanner .slick-controls .slide-pause:before{left:0;}
.mainBanner .slick-controls .slide-pause:after{right:0;}
.mainBanner .slick-controls .slide-play{border-top:7.5px solid transparent;border-right:0 solid transparent;border-bottom:7.5px solid transparent;border-left:10px solid #fff;}
.mainBanner .slick-controls .pagingInfo{color:#fff;margin-left:10px;line-height:15px;}


.mainBannerText{width:100vw;position:absolute;left:50%;transform:translateX(-50%);bottom:26.6666666667vw;color:#fff;}
.mainBannerText p{max-width:1500px;margin:0 auto;font-weight:500;position:relative;}
.mainBannerText p span{max-width:59%;display:block;}
.mainBannerText .text01{font-size:5rem;letter-spacing:-0.04em;font-family:'Noto Serif KR';}
.mainBannerText .text02{font-size:2rem;line-height:1.6;letter-spacing:-0.02em;font-family:'Pretendard';margin-top:1.3541666667vw;}

.mainContent{position:relative;z-index:1;max-width:1500px;margin:0 auto;}

.videoList{display:flex;position:absolute;right:0;top:-33.2291666667vw;}
.videoList li{font-size:1.6rem;font-weight:700;letter-spacing:-0.04em;color:#fff;display:flex;align-items:flex-end;cursor:pointer;}
.videoList li:hover span{color:rgba(255,255,0);}
.videoList li:hover span:after{background-image:url(/img/main/arrow_y.png);}
.videoList li + li{margin-left:75px;}
.videoList li:before{width:90px;height:90px;background:url(/img/main/video_01.png)no-repeat;display:inline-block;content:'';padding-top:24px;}
.videoList li span{margin:0 0 -1.25vw -0.8333333333vw;line-height:1.2;display:block;}
.videoList li span:after{width:40px;height:8px;background:url(/img/main/arrow_w.png)no-repeat;display:block;content:'';margin-top:8px;}
.videoList li:nth-child(2):before{background-image:url(/img/main/video_02.png);}
.videoList li:nth-child(3):before{background-image:url(/img/main/video_03.png);}
.videoList li:hover:nth-child(1):before{background-image:url(/img/main/video_01_off.png);}
.videoList li:hover:nth-child(2):before{background-image:url(/img/main/video_02_off.png);}
.videoList li:hover:nth-child(3):before{background-image:url(/img/main/video_03_off.png);}


.mainQuick{width:100%;position:absolute;left:0;top:-22.03125vw;display:flex;border-top:2px solid #fff;padding-top:80px;}
.mainQuick li{width:220px;height:220px;margin-right:2.4%;text-align:center;background:rgba(255,255,255,.05);font-family:'Pretendard';}
.mainQuick li:last-child{margin-right:0;}
.mainQuick li a{height:100%;display:flex;flex-direction:column;align-items:center;padding:49px 0 22px;}
.mainQuick li a img{flex-shrink:0;}
.mainQuick li a p{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:1.6rem;letter-spacing:-0.02em;line-height:1.2;color:#fff;}
.mainQuick li:nth-child(n+3) a p{font-size:1.8rem;}
.mainQuick li:hover{background:url(/img/main/quick_bg.png)no-repeat center center / cover;}


@media all and (max-width:1920px){
.mainBanner .mainBannerCont{max-width:1200px;margin:0 auto;}
.mainBanner .mainBannerCont .slick-list{margin:0 -352.5px;}
.mainBanner .mainBannerCont .slick-list img{width:100%;}
}

@media all and (max-width:1500px){
.mainBanner .mainBannerCont{width:100vw;}
.mainBanner .mainBannerCont .slick-list{margin:0 -20%;}
.mainBanner .mainBannerCont .slick-list img{width:100%;}

.mainBannerText{padding:0 20px;}
.mainBannerText .text01{left:0;font-size:3.33333vw;}
.mainBannerText .text02{left:0;font-size:1.33333vw;}

.mainContent{padding:0 20px;}
.videoList{right:20px;}
.videoList li{font-size:1.06667vw;}
.videoList li:before{width:6vw;height:6vw;background-size:6vw auto;}
.videoList li span:after{width:2.6666666667vw;height:0.5333333333vw;background-size:2.6666666667vw auto;}
.videoList li + li{margin-left:5vw;}

.mainQuick{width:calc(100% - 40px);left:20px;justify-content:space-between;padding-top:5.3333333333vw;}
.mainQuick li{width:14.6666666667vw;height:14.6666666667vw;margin-right:0;}
.mainQuick li a{padding:3.2666666667vw 0 1.4666666667vw;}
.mainQuick li a img{width:7.4666666667vw;margin:0 auto;}
.mainQuick li a p{margin-top:1vw;font-size:1.06667vw;}
.mainQuick li:nth-child(n+3) a p{font-size:1.2vw;}

}

@media all and (max-width:1279px){
.mainBanner .mainBannerCont .slick-list img{width:100%;}
.mainBanner .slick-arrow.slick-prev{left:20px;}
.mainBanner .slick-arrow.slick-next{right:20px;}
}

@media all and (max-width:979px){
.mainBanner .mainBannerCont .slick-list{margin:0 -50%;}

}

@media all and (max-width:767px){
.mobileNone{display:none;}
.mobileView{display:block;}

.mainBanner .mainBannerCont .slick-list{margin:0}
.mainBannerText{bottom:98vw;}
.mainBannerText p span{max-width:100%;}
.mainBannerText .text01{font-size:6.5189vw;}
.mainBannerText .text02{font-size:2.60756vw;}

.mainQuick{flex-wrap:wrap;padding-top:10.333333vw;top:-86vw;border-width:1px;}
.mainQuick li{width:29vw;height:29vw;margin:10px 0;}
.mainQuick li a{padding:6.3885267275vw 0 2.8683181226vw;}
.mainQuick li a img{width:14.604vw;}
.mainQuick li a p{margin-top:1.9556714472vw;font-size:2.08605vw;}
.mainQuick li:nth-child(n+3) a p{font-size:2.3468vw;}

.videoList{width:100%;top:-140vw;justify-content:center;}
.videoList li:before{width:11.735vw;height:11.735vw;background-size:11.735vw auto;}
.videoList li span{font-size:1.9556714472vw;margin: 0 0 -3.1290743155vw -2.0860495437vw;}
.videoList li span:after{width:5.2151238592vw;height:1.0430247718vw;background-size:5.2151238592vw auto;}

}

@media all and (max-width:480px){

.mainBannerText{bottom:106vw;}
.mainBannerText .text01{font-size:7.2vw;}
.mainBannerText .text02{font-size:3.60756vw;}

.mainContent{padding-bottom:57vw;background:#1a1a1a;margin-top:-1px;}


.videoList{right:0;top:-158vw;}
.videoList li:before{width:15vw;height:15vw;background-size:15vw auto;}
.videoList li span{font-size:2.8vw;margin:0 0 -3.5vw -3.08605vw;}


.mainQuick{top:-103vw;}
.mainQuick li{width:44vw;height:44vw;}
.mainQuick li a img{width:24vw;}
.mainQuick li a p{font-size:3.33334vw;}
.mainQuick li:nth-child(n+3) a p{font-size:3.54166vw;}

}
