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

/* ******************  메인 load ********************** */
@media all and ( max-width: 1280px ){
	.main-page .nav-open-btn,
	.main-page #headerInnerWrap{top:calc(-1 * var(--header-height)); transition:top 0.8s, background 0.8s;}
	.main-page.active-page #headerInnerWrap{top:0;}
	.main-page.active-page .nav-open-btn{top:12.5px;}

	.main-visual-conuter{bottom: -17.5rem;}
	.main-page.active-page .main-visual-conuter{bottom:7.5rem;}
}

/* ******************  메인 레이아웃(Fullpage) ********************** */
@media all and ( max-width: 1280px ){
	#fullpage {background-image: none; background: linear-gradient(to bottom,  rgba(104,177,126,1) 0%, rgba(31,111,158,1) 30%, rgba(7,90,167,1) 100%);}
	/* 공통 :: 레이아웃 */
	#fullpage .section:not(#mainVisual){height:auto !important;}
	#fullpage .fp-section .fp-tableCell{height:auto !important;}
}

/* ******************  메인 비주얼 ********************** */
@media all and (max-width:1860px){
	.main-scroll-icon{margin-left: 84rem;}
}
@media all and (max-width:1820px){
	.main-scroll-icon{margin-left: 82rem;}
	.main-scroll-icon {left: auto; right: -0.7rem; margin-left: 0;}
	.main-visual-conuter .main-visual-next{margin-right: 1rem;}
}
@media all and (max-width:1780px){
	.main-visual-conuter .main-visual-next{margin-right: 3rem;}
}
@media all and (max-width:1280px){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box .main-visual-txt1{font-size:2.2rem;}
	.main-visual-txt-box .main-visual-txt2{font-size:6rem;}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box{padding-bottom: 15rem !important;}
	.main-visual-txt-box .main-visual-txt1{font-size:2rem; line-height: 1.3;}
	.main-visual-txt-box .main-visual-txt2{margin-top: 2.5rem; font-size:4.6rem; line-height: 1.17;}

	/* 메인 비주얼 :: 카운터 */
	.main-visual-conuter .area-box{justify-content: flex-start;}
	.main-visual-conuter .num{font-size:1.2rem;}
	.main-visual-conuter .progress-bar{margin:0 1rem; width: 14rem; height: 2px;}

	/* 메인 비주얼 :: pause,play */
	.main-visual-conuter .slick-control-btns{margin: 0 1rem;}
	.main-visual-conuter .slick-control-btns button i{font-size:1.6rem;}

	/* 메인 비주얼 :: 화살표 */
	.main-visual-conuter .main-visual-btn{font-size:2rem;}
	.main-visual-conuter .main-visual-prev{margin-left: 2rem;}
	.main-visual-conuter .main-visual-next{margin-right: 0;}
	.main-visual-conuter .main-visual-prev i,
	.main-visual-conuter .main-visual-next i{position: relative; top: 0.2rem;}

	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{display: none;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	.main-tit-box .main-tit{font-size:5.2rem; line-height: 1.11;}
	.main-tit-box .main-tit span{display: block; margin-top: 1rem; margin-left: 0; font-size: 2rem;}
	.main-tit-box .main-sub-tit{margin-top: 3rem; font-size: 1.8rem; line-height: 1.66;}
	.main-tit-box.has-btn{padding-right: 4rem;}
	.main-tit-box.has-btn .main-btn{top: 2.6rem; font-size: 2.4rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(Company) -------- */
@media all and (max-width:1280px){
	#fullpage .section#mainCompanyCon,
	#fullpage .fp-section#mainCompanyCon .fp-tableCell{height:98rem !important;}
	#mainCompanyCon{background: linear-gradient(to bottom,  rgba(104,177,126,1) 0%,rgba(77,152,138,1) 100%);}
	.main-company-inner .line{width: 35%;}
}
@media all and (max-width:800px){
	#fullpage .section#mainCompanyCon,
	#fullpage .fp-section#mainCompanyCon .fp-tableCell{height:98rem !important;}
	.main-company-inner{width: 100%; flex-direction: column;}
	.main-company-inner .txt{font-size: 6.5rem;}
	.main-company-inner .line{margin: 5.5rem 0; width: 3px; height: 32rem;}
	.main-company-inner .line em{width: 3px; height: 0; transition: width 0s height 1.5s;}
	.main-company-inner .img{height: 7rem;}
	/* animated */
	.main-company-con.animated .main-company-inner .line em{animation: progressAnimM 3.5s 1.5s cubic-bezier(0.4, 0, 0.2, 1) both infinite; animation-delay:0.6s;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Product) -------- */
@media all and (max-width:1280px){
	#fullpage .section#mainProductCon,
	#fullpage .fp-section#mainProductCon .fp-tableCell{overflow: visible; height:98rem !important;}
	#mainProductCon{background: linear-gradient(to bottom,  rgba(77,152,138,1) 0%,rgba(46,125,149,1) 100%);}
	#mainProductCon:before{top: -14rem; left: auto; right: -44rem; margin-left: 39rem; width: 80rem; height: 80rem;}
}
@media all and (max-width:800px){
	#fullpage .section#mainProductCon,
	#fullpage .fp-section#mainProductCon .fp-tableCell{height:auto !important;}
	#mainProductCon{padding: 9.5rem 0 7rem;}
	#mainProductCon:before{top: auto; bottom: -8rem; right: -44rem; margin-left: 20rem; width: 58rem; height: 58rem; z-index: 1;}
	.main-product-con{position: relative;}
	.main-product-inner{display: block;}
	.main-product-txt{width: 100%; padding-right: 0;}
	.main-product-txt .sub-tit{font-size: 2rem; line-height: 1.3;}
	.main-product-txt .tit{margin-top: 2.5rem; font-size: 5.2rem; line-height: 1.15;}
	.main-product-txt .txt{margin-top: 3rem; font-size: 1.6rem; line-height: 1.62;}
	.main-product-txt .btn{margin-top: 1rem; width: 14.8rem; height: 6rem;}
	.main-product-txt .btn:before{width: 6rem; height: 6rem;}
	.main-product-txt .btn span{font-size: 1.7rem;}
	.main-product-txt .btn i{margin-left: 1.2rem; font-size: 2rem;}
	.main-product-img{margin: 6rem auto 0; width: 100%; max-width: 32rem;}
	.main-product-img:before{top: -0.5rem; left: 4rem; width: 1.6rem; height: 1.6rem;}
	.main-product-img .small-img{left: -3.4rem; bottom: 0.7rem; width: 9.3rem;}

	.main-product-dot{top: auto; bottom: 34rem; margin-top: 0;}
	.main-product-dot .slick-dots{width: 100%;}
	.main-product-dot .slick-dots li{margin-right: 1.6rem;}
	.main-product-dot .slick-dots li button{width: 0.8rem; height: 0.8rem;}
	.main-product-dot .slick-dots li.slick-active button{width: 2.5rem;}

	/* prev */
	.prev-con .main-product-img:before{top: -24rem;}
	.prev-con .main-product-img .small-img{bottom: 30rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(technology) -------- */
@media all and (max-width:1735px){
	.main-technology-con .main-product-img {margin-left: 6rem; width: calc(48% - 6rem);}
}
@media all and (max-width:1280px){
	#fullpage .section#mainTechnologyCon,
	#fullpage .fp-section#mainTechnologyCon .fp-tableCell{overflow: visible; height:98rem !important;}
	#mainTechnologyCon{background: linear-gradient(to bottom,  rgba(46,125,149,1) 0%,rgba(31,111,158,1) 100%);}
}
@media all and (max-width:800px){
	#fullpage .section#mainTechnologyCon,
	#fullpage .fp-section#mainTechnologyCon .fp-tableCell{height:auto !important;}
	#mainTechnologyCon{padding: 7.5rem 0 5rem;}
	.main-technology-con .main-product-txt{padding-right: 0; padding-left: 0;}
	.main-technology-con .main-product-img{margin-left: auto; width: 100%; max-width: 32rem;}
	.main-technology-con .main-product-dot .area{justify-content: flex-start;}
	.main-technology-con .main-product-dot .slick-dots{padding-left: 0;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4(global) -------- */
@media all and (max-width:1280px){
	#fullpage .section#mainGlobalCon,
	#fullpage .fp-section#mainGlobalCon .fp-tableCell{overflow: visible; height:auto !important;}
	#mainGlobalCon{background: linear-gradient(to bottom,  rgba(31,111,158,1) 0%,rgba(31,111,157,1) 100%);}
	.global-map-con{width: 1920px; height: 1263px;}
	.global-map-con > img {margin-top: -460px; margin-left: -960px; max-width: 1920px;}
	.nation-circle{width:80px; height:80px;}
	.nation-circle .wave-group > span {
		border:10px solid rgba(118,183, 41, 0.05) ;
		box-shadow: 5px 5px 20px -2.5px rgba(0,0,0,0.2);
	}
	.nation-circle i{margin:-3.5px 0 0 -3.5px; width:7px; height:7px;}
	.nation-circle p{padding: 0 10px; width:160px; height:45px; font-size: 16px; border-radius: 45px; box-shadow: 5px 5px 20px -2.5px rgba(0,0,0,0.2);}
	/* 01 */
	.nation-circle.nation-circle1{margin-left: -331px; margin-top: 25px;}
	.nation-circle.nation-circle1 p{margin-top: -70px; margin-left: -80px;}
	/* 02 */
	.nation-circle.nation-circle2{margin-left: -441px; margin-top: 131px;}
	.nation-circle.nation-circle2 p{margin-top: -22.5px; margin-left: -190px;}
	/* 03 */
	.nation-circle.nation-circle3{margin-left: -251px; margin-top: 31px;}
	.nation-circle.nation-circle3 p{margin-top: -22.5px; margin-left: 20px;}
	/* 04 */
	.nation-circle.nation-circle4{margin-left: 629px; margin-top: 111px;}
	.nation-circle.nation-circle4 p{margin-top: -70px; margin-left: -80px;}

	.main-global-txt-con{margin-top: 10rem;}
}
@media all and (max-width:800px){
	#fullpage .section#mainCustomerCon{padding-top: 8rem;}
	.main-global-txt-con{margin-top: 5rem; position: relative; top: auto; z-index: 1;}
	.main-global-txt-con .area{display: block;}
	.main-global-txt-con .main-tit-box{padding: 0; width: 100%;}
	.main-global-txt-con .main-sub-tit br{display: none;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠5(Customer) -------- */
@media all and (max-width:1600px){ 
	/* 오른쪽 영역 */
	.main-customer-right{margin-right: 0;}
}
@media all and (max-width:1280px){
	#fullpage .section#mainCustomerCon,
	#fullpage .fp-section#mainCustomerCon .fp-tableCell{height:auto !important;}
	#fullpage .section#mainCustomerCon{padding: 15rem 0 8rem; background: linear-gradient(to bottom,  rgba(31,111,157,1) 0%,rgba(7,90,167,1) 100%);}
	.main-customer-con{display: block;}

	/* 왼쪽 영역 */
	.main-customer-left{width: 100%; max-width: none;}
	/* 오른쪽 영역 */
	.main-customer-right{margin-top: 12rem; width: 100%; max-width: none;}
}
@media all and (max-width:800px){
	/* 왼쪽 영역 */
	.main-customer-list{margin-top: 4.5rem;}
	.main-customer-item a{padding: 3rem 5.5rem 3rem 2.2rem; width: 100%;}
	.main-customer-item a:after{position: absolute; top: 50%; margin-top: -1.6rem; right: 1.5rem; font-size: 3.2rem; color: #fff; content: "\e914"; font-family:xeicon !important; opacity: 0.3; transition:var(--transition-custom); transition-property: opacity;}
	.main-customer-item .tit{font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 400; color: #fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity: 0.7; transition:var(--transition-custom); transition-property: opacity, font-weight;}
	.main-customer-item .txt{margin-top: 1.5rem; height: 3.14em; font-size: 1.4rem; line-height: 1.57; font-weight: 500; letter-spacing: -0.05em; color: rgba(255,255,255,0.7); overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.main-customer-item .date{margin-top: 1.7rem; font-size: 1.4rem; line-height: 2rem; color: rgba(255,255,255,0.3); display: inline-block;}
	.main-customer-item.new .date{position: relative; padding-right: 2.5rem;}
	.main-customer-item.new .date:before{position: absolute; top: 0; right: 0; font-size: 1.6rem; color: #71bf44; content: "\e9a8"; font-family:xeicon !important;}
	/* thum */
	.main-customer-item.has-thum a{padding: 3rem 2.2rem;}
	.main-customer-item.has-thum a:after{display: none;}
	.main-customer-thum{width: 100%;}
	.main-customer-txt{margin-top: 2.5rem; position: relative; width: 100%; padding-left: 0; padding-right: 3.3rem;}
	.main-customer-txt:after{position: absolute; top: 50%; margin-top: -1.6rem; right: -0.7rem; font-size: 3.2rem; color: #fff; content: "\e914"; font-family:xeicon !important; opacity: 0.3; transition:var(--transition-custom); transition-property: opacity;}
	.main-customer-item.has-thum a:hover .main-customer-txt:after{opacity: 1;}

	/* 오른쪽 영역 */
	.main-customer-right{margin-top: 12rem;}
	.main-customer-form-txt{margin-top: 2.5rem; font-size: 1.4rem; line-height: 1.3;}
	.main-customer-form{margin: 1rem -1rem -0.75rem;}
	.main-customer-form-item{margin: 0.75rem 1rem; width: calc(100% - 2rem);}
	.main-customer-form-item.flex-start {width: calc(100% - 2rem);}
	.main-customer-form-item.flex-start .tit{padding-top: 0; width: 100%; height: auto !important; display: block;}
	.main-customer-form-item:not(.flex-start):nth-child(even) .tit,
	.main-customer-form-item .tit{width: 7.5rem; padding-right: 0; font-size: 1.6rem; line-height: 1.3;}
	.main-customer-form-item .tit br{display: block;}
	.main-customer-form-item:not(.flex-start):nth-child(even) .form,
	.main-customer-form-item .form{width: calc(100% - 7.5rem);}
	.main-customer-form-item.flex-start .form{width: 100%;}
	.main-customer-form-item.flex-start .tit + .form{padding-top: 1.5rem;}
	.main-customer-form-item .form input,
	.main-customer-form-item .form textarea{text-indent: 1.5rem; width: 100%; height:5rem; font-size:1.4rem;}
	.main-customer-form-item .form textarea{padding: 1.5rem; line-height: 1.5; height: 18rem;}
	#mainCustomerCon .ps-txt {margin: 0; padding-left: 7.5rem;}

	/* fake form - 기본 select 스타일 */
	.fakeform-selectbox .select-title {text-indent: 1.5rem; line-height: 5rem; font-size:1.4rem;}
	.select-option span,
	.select-option strong {height: 1.1em; font-size: 13px; line-height: 1.4; padding: 4px 5px 7px;}
	.select-option li li span {padding-left: 10px;}

	.main-datetimepicker-fieldset i{margin-top: -1.1rem; right: 1.5rem; font-size: 2.4rem;}
	.main-phone-fieldset .hypen,
	.main-email-fieldset .hypen{width:2.4rem; font-size: 1.6rem;}
	.main-email-fieldset .hypen{width: 3rem;}
	.main-phone-fieldset input{width:calc(33.33% - 1.6rem) !important;}
	.main-email-fieldset input{width:calc(33.33% - 2rem) !important;}
	.main-email-fieldset .hypen + input{width:calc(33.33% - 1.3rem) !important;}
	.main-email-fieldset .fakeform-selectbox{margin-left: 1.3rem; width:calc(33.33% - 1rem) !important;}

	.main-customer-agree{margin-top: 3.5rem; padding-left: 0; flex-direction: column; justify-content: center;}
	.main-customer-agree .agree-txt label{padding-left:2.4rem; font-size: 1.8rem; font-weight: 400; line-height: 1.5em;}
	.main-customer-agree .agree-txt label i{font-size:2rem;}
	.main-customer-agree .submit-btn{margin-top: 2.5rem; width: 15rem; height: 4.5rem; font-size: 1.8rem; border-radius: 4.5rem;}
}

/* ******************  메인 커서 이펙트 ********************** */
@media all and (max-width:800px){
	#cmMainCursor, #cmMainCursorTxt{visibility: hidden; opacity: 0;}
}