@charset "utf-8";
/* *******************************************************
 * filename : main_responsive.css
 * description : 메인 레이아웃 및 컨텐츠 반응형 CSS
 * date : 2022-08-08
******************************************************** */
/* ******************  가로모드 ********************** */
@media and ( max-width: 1280px ) and (orientation: landscape) {
	#mainVisual{height:100rem !important;}
	
	/* 메인 비주얼 :: 동영상 */
	.video-wrapper #visualVideo{top:50%;}
	.video-wrapper.pc-ver{}
	.video-wrapper.pc-ver:after{position: absolute; content:''; width:100%; height:100%; top:0; left:0; background:rgba(12,30,36,0.5); backdrop-filter:blur(20px);}

	.video-wrapper.m-ver{display: block; width:100vw; height:56.25vw; margin-bottom:0; overflow:hidden;}
	.video-wrapper.m-ver:before{display: none;}
	.video-wrapper.m-ver #visualVideo{min-height: 56.25vw; min-width: auto; width:100vw; top:43%;}
	/* 유튜브 */
	.background-video iframe{top:50%;}
	.background-video-wrapper.pc-ver{}
	.background-video-wrapper.pc-ver:after{position: absolute; content:''; width:100%; height:100%; top:0; left:0; background:rgba(12,30,36,0.5); backdrop-filter:blur(20px);}

	.background-video-wrapper.m-ver{display: block; width:100vw; height:56.25vw; margin-bottom:0rem;}
	.background-video-wrapper.m-ver:before{display: none;}
	.background-video-wrapper.m-ver .background-video iframe{min-height: calc(56.25vw + 300px); min-width: auto;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box{text-align:center; box-sizing:border-box; width:100%; flex-direction: column; justify-content: center; margin-top:-3rem;}
	.main-visual-txt-inner{width:100%;}
	.main-visual-txt-box .main-visual-txt1{font-size:4rem}
	.main-visual-txt-box .main-visual-txt2{margin-top:1rem;}

	.visual-circle-box{margin-top:2rem; margin-inline:auto; left:50%; transform:translateX(-50%); width:8rem; height:8rem;}
}


/* ******************  메인 레이아웃(Fullpage) ********************** */
@media all and ( min-width: 1281px ) {
	.main-slide-con{height:100vh;}
	.main-wrap #header{transform:translateY(-50%); opacity:0; transition:var(--transition-custom2); transition-delay:0.2s;}
	.main-wrap.main-active #header{transform:translateY(0); opacity:1;}
}
@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section:not(#mainFooter){min-height:750px;}
	#fullpage .section .fp-tableCell{height:100% !important;}
}
/* ******************  메인 비주얼 ********************** */
@media all and (max-width:1680px){
	.main-visual-txt-box .main-visual-txt1.first{margin-left:0;}
}
@media all and (max-width:1520px){
	.main-scroll-content .area-wide{padding-right:10px;}
}
@media all and ( max-width: 1280px ){
	/* #mainVisual{transform:none !important;} */
	/* 공통 :: 레이아웃 */
	#fullpage .section:not(#mainVisual){height:auto !important;}
	#fullpage .fp-section .fp-tableCell{height:auto !important;}

	.main-scroll-content{display: none;}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block;}

	/* 메인 비주얼 :: 동영상 */
	.video-wrapper #visualVideo{top:50%;}
	.video-wrapper.pc-ver{}
	.video-wrapper.pc-ver:after{position: absolute; content:''; width:100%; height:100%; top:0; left:0; background:rgba(12,30,36,0.5); backdrop-filter:blur(20px);}

	.video-wrapper.m-ver{display: block; width:100vw; height:56.25vw; margin-bottom:7rem; overflow:hidden;}
	.video-wrapper.m-ver:before{display: none;}
	.video-wrapper.m-ver #visualVideo{min-height: 56.25vw; min-width: auto; width:100vw; top:43%;}
	/* 유튜브 */
	.background-video iframe{top:50%;}
	.background-video-wrapper.pc-ver{}
	.background-video-wrapper.pc-ver:after{position: absolute; content:''; width:100%; height:100%; top:0; left:0; background:rgba(12,30,36,0.5); backdrop-filter:blur(20px);}

	.background-video-wrapper.m-ver{display: block; width:100vw; height:56.25vw; margin-bottom:5rem;}
	.background-video-wrapper.m-ver:before{display: none;}
	.background-video-wrapper.m-ver .background-video iframe{min-height: calc(56.25vw + 300px); min-width: auto;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box{text-align:center; box-sizing:border-box; width:100%; flex-direction: column; justify-content: center; margin-top:-5rem;}
	.main-visual-txt-inner{width:100%;}
	.main-visual-txt-box .main-visual-txt1{font-size:4.6rem}
	.main-visual-txt-box .main-visual-txt2{margin-top:1.5rem;}

	.visual-circle-box{margin-top:4rem; margin-inline:auto; left:50%; transform:translateX(-50%);}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 컨텐츠 */
@media all and (max-width:1280px){
	#mainConPaging{height:auto;}
	.main-slide-container, .main-slide-wrapper{height:auto;}
	#mainConPaging .swiper-wrapper{display: block;}

	/* 공통 :: 타이틀 */
	.main-tit-box .main-tit{font-size:4rem;}
	/* 공통 :: 프로그래스바 */
	.main-slide-controls{display: none;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠(Business) -------- */
@media all and (max-width:1280px){
	/* #mainBusiness{transform:none !important;} */
	.main-business-slide{padding:20rem 0 10rem;}

	.main-business-video-list .list-item .txt-box dl dt{font-size:4rem;}

	.main-business-list .list-item a .inner .txt-box .tit{font-size:2rem;}
	.main-business-list .list-item a .inner .play-icon span img{max-width:30%;}
}
@media all and (max-width:800px){
	.main-business-slide{padding:15rem 0 9rem;}
	.main-business-wrap{flex-direction: column-reverse;}
	.main-business-wrap .right-box{width:100%;}

	/* Mobile Tab Drop Menu */
	.main-drop-menu-style{position:relative;}
	.main-drop-open-btn-style{display:flex; justify-content:center; flex-direction:column; position:relative; padding:0 var(--area-padding); height:8rem; background-color:#00b0b5; box-sizing:border-box; border-radius:1.5rem;}
	.main-drop-open-btn-style:before{position: absolute; content:'\e942'; font-family:'xeicon'; font-size:3.2rem; color:#fff; top:50%; right:var(--area-padding); transform:translateY(-50%);}
	.main-drop-open-btn-style .tit{font-size:2rem; letter-spacing:-0.05em; color:#fff; font-weight:700;}
	.main-drop-open-btn-style .txt{font-size:1.1rem; color:rgba(255,255,255,0.4); font-weight:500; margin-top:1rem;}

	.main-drop-menu-style ul{display: none; position:absolute; top:100%; left:0px; right:0px; margin:0}
	.main-business-list .list-item{width:100%; margin:0; margin-top:1rem;}
	.main-business-list .list-item.active{display: none;}
	.main-business-list .list-item a{border-radius:1.5rem; height:auto; padding-top:0; background:#0d2122;}
	.main-business-list .list-item a .inner{position: relative; height:8rem; justify-content: space-between;; flex-direction:row; padding:0 var(--area-padding); box-sizing:border-box;}
	.main-business-list .list-item a .inner .txt-box{text-align:left;}
	.main-business-list .list-item a .inner .play-icon{width:5rem; height:5rem; margin-top:0;}

	.main-business-wrap .left-box{width:100%; margin-top:2rem;}
	.main-business-video-list .list-item{position: relative; top:auto; left:auto; transform:none; display: none;}
	.main-business-video-list .list-item .txt-box{position: relative; height:auto; padding:0; margin-top:5rem;}
	.main-business-video-list .list-item .txt-box dl dt{margin-bottom:0rem;}
	.main-business-video-list .list-item .video-box .outline:before{width:75rem; height:75rem;}

	.main-business-video-list .list-item.active{display: block;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠(Performance) -------- */
@media all and (max-width:1280px){
	/* #mainPerformance{transform:none !important;} */
	.main-performance-slide{padding:10rem 0;}

	.main-performance-wrap{flex-wrap:wrap;}
	.main-performance-wrap .main-tit-box{width:100%; margin-bottom:3rem; }
	.main-performance-wrap .main-tit-box .main-tit{width:60%;}
	.main-performance-wrap .main-tit-box .cm-main-btn-box{margin-top:3rem;}
	.main-performance-map{width:60rem;}
	.main-performance-count{width:calc(100% - 60rem); padding-right:3rem; box-sizing:border-box;}
	.main-performance-count .count-txt{text-align:left;}
	.main-performance-count .count-list{align-items: flex-start;}
	.main-performance-count .count-list .list-item{margin-left:0; margin-right:3rem;}
	.main-performance-count .count-list .list-item .tit{text-align:left;}
}
@media all and (max-width:800px){
	.main-performance-wrap .main-tit-box .main-tit{width:100%;}
	.main-performance-count{width:100%; margin-top:7rem;}
}
@media all and (max-width:640px){
	.main-performance-map{width: 130vw; margin-left: -18vw;}
	.main-slide-con.animated .main-performance-map .map-img{width: 130vw;}
	.main-performance-map .map-list .list-item .inner-box{min-width:9.5rem !important; height:3rem;}
	.main-performance-map .map-list .list-item.right .inner-box{transform: translateX(2.5rem);}
	.main-performance-map .map-list .list-item.left .inner-box{transform: translateX(-2.5rem);}
	.main-performance-map .map-list .list-item .inner-box .txt{font-size:1.3rem;}
	.main-performance-map .map-list .list-item .inner-box .num{/* width:1.8rem; */ height:1.8rem; font-size:1rem;}

	.main-performance-map .map-list .list-item[data-city="수도권"]{margin-top: -44vw; margin-left: -15vw;}
	.main-performance-map .map-list .list-item[data-city="강원도"]{margin-top: -49vw; margin-left: 12vw;}
	.main-performance-map .map-list .list-item[data-city="충청북도"]{margin-top: -26vw; margin-left: 0vw;}
	.main-performance-map .map-list .list-item[data-city="충청남도"]{margin-top: -16vw; margin-left: -18vw;}
	.main-performance-map .map-list .list-item[data-city="경상북도"]{margin-top: -12vw; margin-left: 21vw;}
	.main-performance-map .map-list .list-item[data-city="경상남도"]{margin-top: 12vw; margin-left: 11vw;}
	.main-performance-map .map-list .list-item[data-city="전라북도"]{margin-top: 4vw; margin-left: -10vw;}
	.main-performance-map .map-list .list-item[data-city="전라남도"]{margin-top: 24vw; margin-left: -20vw;}
	.main-performance-map .map-list .list-item[data-city="제주도"]{margin-top: 61.8vw; margin-left: -24.2vw;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠(Inquiry) -------- */
@media all and (max-width:1280px){
	/* #mainInquiry{transform:none !important;} */
	.main-inquiry-slide{padding:10rem 0;}

}
@media all and (max-width:800px){
	.main-inquiry-wrap{display: block;}
	.main-inquiry-wrap .left-box{width:100%;}
	.main-inquiry-wrap .left-box .main-tit-box .main-txt{margin-bottom:4rem;}

	.main-inquiry-wrap .right-box{width:100%;}

	.main-inquiry-list{display: block; margin:0; margin-top:5rem;}
	.main-inquiry-list .list-item{width:100%; margin:1rem 0; transform:none !important; max-width:none; height:auto; }
	.main-inquiry-list .list-item a{padding:4rem; box-sizing:border-box;}
	.main-inquiry-list .list-item .outline:before{width:75rem; height:75rem;}
}


/* -------- 메인 Footer -------- */
@media all and (max-width:1280px){
	.main-footer-box{position: relative; transform:none;}
}