@charset "utf-8";
/* *******************************************************
 * filename : main_responsive.css
 * description : 메인 레이아웃 및 컨텐츠 반응형 CSS
 * date : 2022-08-08
******************************************************** */

/* ******************  메인 레이아웃(swiper Fullpage) ********************** */
@media all and (min-width:1281px){
	.fullpage-inner-scroll{    overflow-y: auto; overflow-x: hidden; height:100vh; width:100%;}
	/* .fullpage-inner-scroll::-webkit-scrollbar {display: none;} */
	.fullpage-inner-scroll-con{position: relative;}
	
	.main-page #header:not(.scroll-down){transform: translateY(calc(-1 * (var(--header-height) + var(--header-top))));}
	.main-page #header.load:not(.scroll-down){transform:translateY(0);}
	
	.main-slide-con{opacity:1 !important; pointer-events:auto !important}
}
@media all and (max-width:1280px){
	.swiper-wrapper{display: block !important;}
}
/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1280px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section:not(#mainVisual){height:auto !important;}
	#fullpage .fp-section .fp-tableCell{height:auto !important;}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box .main-visual-txt1{font-size:6.4rem;}
	.main-visual-txt1.cm-word-split-JS.words.chars.splitting > span{margin-block: -0.15em;}
	.main-visual-txt-box .main-visual-txt2{font-size:2rem;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and (max-width:800px){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-category{font-size:1.6rem; margin-bottom:2rem;}
	.main-tit-box .main-tit{font-size:4.8rem; margin-bottom:3rem;}
	.main-tit-box .main-tit.fs-b{font-size:4.8rem;}
	.main-tit-box .main-txt{font-size:1.4rem; margin-bottom:6rem;}
	/* 공통 :: 링크버튼 */
	.cm-btn{width:22rem; max-width:100%; height:5.6rem;}
	.cm-btn .btn-txt{width:calc(100% - 3.6rem); font-size:1.4rem;}
	.cm-btn .btn-icon{width:3.6rem; height:3.6rem; font-size:1.4rem;}
}

/* -------- 메인 컨텐츠 :: Company -------- */
@media all and (min-width:801px){
	/* 카운트 active */
	.animated .count-num-item-box{animation:count-up-ani 3s both;}
	.animated .count-num-item-box.down {animation:count-down-ani 3s both;}
	@keyframes count-up-ani {
		0% {
		   transform: translate3d(0, 0, 0);
		}
		100% {
		   transform: translate3d(0, -9em, 0);
		}
	}
	@keyframes count-down-ani {
		0% {
		   transform: translate3d(0, -9em, 0);
		}
		100% {
		   transform: translate3d(0, 0, 0);
		}
	} 
}
@media all and (max-width:1280px){
	#mainCompany{height:100vh;}
	.main-company-con .list-item{padding:4rem;}
}
@media all and (max-width:800px){
	#mainCompany{height:130vh; align-items: flex-start; background-image:url('/images/main/main_company_bg_m.jpg'); padding-top:18rem;}
	#mainCompany .main-tit-box{padding-inline:var(--area-padding); box-sizing:border-box;}
	.main-company-con{display: block;}
	.main-company-con .list-item{width:100%; padding:3rem var(--area-padding); border-bottom:1px solid rgba(255,255,255,0.05); border-left:0;}
	.main-company-con .list-item:last-child{border-bottom:0;}
	.main-company-con .list-item .tit-box h4{font-size:2rem;}
	.main-company-con .list-item .tit-box p{font-size:1.2rem; margin-top:1rem;}

	.main-company-con .list-item .count-box{margin-top:2rem;}
	.main-company-con .list-item .count-box .count-unit{font-size:1.6rem; margin-left:0.5rem;}
	.count-num-box{font-size:4.8rem}
	.count-num-box > p {line-height: 4.8rem;}
	
	.count-num-item-wrap .count-num-item-box .count-num-item{display: none;}
	.count-num-item-wrap .count-num-item-box.down .count-num-item:first-child{display: block;}
	.count-num-item-wrap .count-num-item-box:not(.down) .count-num-item:last-child{display: block;}
}

/* -------- 메인 컨텐츠 :: Product -------- */
@media all and (max-width:1840px){
	.prd-br{display: block;}
}
@media all and (min-width:1281px){
	#mainProduct .main-prd-txt-wrap{transition:var(--transition-custom2); transform:translateX(-100%);}
	#mainProduct .main-prd-img-slide.play + .main-prd-txt-wrap{transform:translateX(0);}
}
@media all and (max-width:1280px){
	#mainProduct .main-prd-txt-wrap{position: relative; width:100%; height:auto; padding:5rem 3rem 10rem;}
	.main-prd-txt-wrap .main-prd-bar{bottom:5rem;}
	.main-prd-arrows{width:100%; height:51.04vw}
}
@media all and (max-width:800px){
	.main-prd-img-slide .slide-item > span{padding-top:44rem;}
	#mainProduct .main-prd-txt-wrap{padding:6rem var(--area-padding);}
	
	.main-prd-img-slide .slide-item .slide-dots .dot{width:0.5rem; height:0.5rem; opacity:1;}
	.main-prd-img-slide .slide-item .slide-dots .dot .wave{width:0.5rem; height:0.5rem; animation:dots-wave-M 4.5s linear infinite; border-width:0; }
	.main-prd-img-slide .slide-item .slide-dots .dot .wave:nth-child(n+2){display: none;}
	/* slide 1 */
	.main-prd-img-slide .slide-item:nth-child(1) .slide-dots .dot:nth-child(1){ margin-top:1.302vw;  /* 2rem */ margin-left:0.651vw; /* 1rem */ }
	.main-prd-img-slide .slide-item:nth-child(1) .slide-dots .dot:nth-child(2){ margin-top:10.020vw; /* 20rem */ margin-left:15.879vw; /* 29rem */ }
	.main-prd-img-slide .slide-item:nth-child(1) .slide-dots .dot:nth-child(3){ margin-top:-15.879vw; /* -29rem */ margin-left:12.973vw; /* 23rem */ }
	.main-prd-img-slide .slide-item:nth-child(1) .slide-dots .dot:nth-child(4){ margin-top:0.651vw;  /* 1rem */ margin-left:32.711vw; /* 61rem */ }
	.main-prd-img-slide .slide-item:nth-child(1) .slide-dots .dot:nth-child(5){ margin-top:14.577vw; /* 27rem */ margin-left:45.288vw; /* 88rem */ }

	/* slide 2 */
	.main-prd-img-slide .slide-item:nth-child(2) .slide-dots .dot:nth-child(1){ margin-top:6.765vw;   /* 15rem */ margin-left:5.859vw; /* 9rem */ }
	.main-prd-img-slide .slide-item:nth-child(2) .slide-dots .dot:nth-child(2){ margin-top:-6.463vw; /* -13rem */ margin-left:7.812vw; /* 12rem */ }
	.main-prd-img-slide .slide-item:nth-child(2) .slide-dots .dot:nth-child(3){ margin-top:-15.832vw; /* -32rem */ margin-left:19.785vw; /* 35rem */ }
	.main-prd-img-slide .slide-item:nth-child(2) .slide-dots .dot:nth-child(4){ margin-top:-4.255vw; /* -5rem */ margin-left:29.456vw; /* 56rem */ }
	.main-prd-img-slide .slide-item:nth-child(2) .slide-dots .dot:nth-child(5){ margin-top:-8.718vw; /* -18rem */ margin-left:34.617vw; /* 67rem */ }
	
	.main-prd-txt-wrap .main-prd-bar{display: none;}
}

/* -------- 메인 컨텐츠 :: About -------- */
@media all and (max-width:1280px){
	#mainAbout{height:100vh;}
}
@media all and (max-width:800px){
	#mainAbout .main-tit-box{padding:0 var(--area-padding);}
}

/* -------- 메인 컨텐츠 :: Partner -------- */
@media all and (max-width:800px){
	.main-partner-wrapper .flow-wrap{margin:5rem 0;}
	.main-partner-wrapper .flow-wrap .flow-list .flow-item{height:2.4rem; margin:0 3rem;}
}

/* -------- 메인 컨텐츠 :: Global -------- */
@media all and (max-width:800px){
	#mainGlobal{padding-block:10rem 0;}
	#mainGlobal .main-tit-box{padding:0 var(--area-padding); box-sizing:border-box; top:5rem;}
	.main-global-wrapper .flow-wrap{display: none;}
	.main-global-bg-con{height:80vh;}
}

/* -------- 메인 컨텐츠 :: Notice -------- */
@media all and (min-width:1281px){
	/* .main-notice-list .list-item:nth-child(odd){margin-top:4.5rem;} */
	.main-notice-list .list-item:nth-child(even){margin-top:-9rem;}
}
@media all and (max-width:1280px){
	.main-notice-list{width:60%;}
}
@media all and (max-width:800px){
	#mainNotice{padding:10rem 0 10rem;}
	#mainNotice .main-tit-box{width:100%;}
	.notice-bg{height:150%; opacity:0; transition:var(--transition-custom);}
	.notice-bg img{width:100%; height:100%; object-fit:cover;}
	.animated .notice-bg{opacity:1;}
	
	.main-notice-wrapper{display: block; }
	.main-notice-list{display: block; width:100%; margin:0 -1rem;}
	.main-notice-list .slick-list{overflow:visible;}
	.main-notice-list .list-item{width:100%; margin:0 1rem;}
}