@charset "utf-8";
/* *******************************************************
 * filename : layout_responsive.css
 * description : 전체 레이아웃 반응형 CSS
 * date : 2022-07-26
******************************************************** */

/* ========================================================
 * SETTING
======================================================== */
@media all and (max-width:1280px){
	:root{
		--header-height: 90px;
	}
}
@media all and (max-width:800px){
	:root{
		--area-padding: 5vw;
	}
}


/* ========================================================
 * FONT SIZE
======================================================== */
@media all and (max-width:1536px){
	html{font-size:0.6510vw;} /* 10 */
}
@media all and (max-width:1280px){
	html{font-size:0.8594vw;} /* 10 -> 11*/
}
@media all and (max-width:800px){
	html{font-size:1.375vw} /* 10 -> 11*/
}
@media all and (max-width:640px){
	html{font-size:1.7188vw}  /* 10 -> 11*/
}
@media all and ( max-width: 480px ){
	html{font-size:2.2vw}  /* 10 */
}
@media all and ( max-width: 412px ){
	html{font-size:2.4272vw}  /* 10 */
}
@media all and (max-width:390px){
	html{font-size:2.1795vw}  /* 10 -> 8.5 */
}

/* ========================================================
 * LAYOUT
======================================================== */
/* ****************** 공통클래스 ********************** */
@media all and (max-width:1700px){
	.area-box{padding:0 var(--area-padding); max-width:none;}
}
@media all and (max-width:1510px){
	.area{padding:0 var(--area-padding); max-width:none;}
}
@media all and (max-width:1280px){ 
	.m-br{display:block;}
	.pc-br{display:none;}
	.display-m{display:block;}
	.display-pc{display:none;}
}

/* ****************** HEADER ********************** */
@media all and ( max-width: 1280px ){
	.fullpage-html #header{position:absolute;}
	#headerInnerWrap{position:fixed; z-index:99; background-color: rgba(0,0,0,0.8);}
	#header.top-fixed #headerInnerWrap{background-color: rgba(0,0,0,0.8); border-bottom:1px solid rgba(255,255,255,0.2);}
	
	/* -------- Header :: UTIL BOX -------- */
	.header-util-box{display: none;}
}
@media all and ( max-width: 480px ){
	#header .logo img{height:33px;}
}

/* ****************** FOOTER ********************** */
@media all and (max-width:800px){
	/* -------- FOOTER :: 레이아웃 -------- */
	.footer-left-con{float:none;}
	.footer-right-con{margin-top: 4rem; float:none;}

	/* -------- FOOTER :: 상단 -------- */
	#footerInner{padding:6rem 0;}

	/* Footer :: 푸터로고 */
	.foot-logo img{height: 4.1rem;}

	/* Footer :: 정보 */
	.footer-address-info-box{margin-top: 3.5rem;}
	.footer-address-list dl{margin-top: 1rem;}
	.footer-address-list dl dt,
	.footer-address-list dl dd{font-size:1.6rem; line-height:1.5;}
	.footer-address-list dl dt{width: 12.5rem;}
	/* Footer :: Copyright */
	.footer-copyright{margin-top: 4rem; font-size:1.4rem; line-height: 1.5;}
	.footer-copyright.pc-ver{display: none;}
	.footer-copyright.m-ver{display: block;}

	/* Footer :: 3분 견적요청 신청 */
	.foot-online-btn{font-size: 4rem;}
	.foot-online-btn .arrow{margin-left: 2rem; width: 6rem; height: 6rem;}
	.foot-online-btn .arrow i{font-size: 1.8rem; transform: rotate(-45deg) translate(0,0);}

	/* Footer :: 링크 리스트 */
	.foot-link-list{margin-top: 2.5rem;}
	.foot-link-list ul{margin:0 -0.5rem;}
	.foot-link-list ul li:first-child,
	.foot-link-list ul li{margin:0 0.5rem; width: calc(50% - 1rem);}
	.foot-link-list ul li a{padding: 0 1rem 0 1.5rem; font-size: 1.4rem; line-height: 5rem; display: flex; align-items: center; justify-content: space-between;}
	.foot-link-list ul li a i{margin-left: 0; top: 0.1rem;}
}


/* ****************** MODAL LAYERPOPUP ********************** */
@media all and ( max-width: 800px ){
	/* modal layer content */
	.footer-modal-content{width:auto; margin:50px 15px}
	.footer-modal-content h1{font-size:18px; text-align:left; padding:0 30px 15px 0}
	.modal-close-btn{right:-3px; top:-3px;}
	.modal-close-btn i{font-size:24px}
	.footer-inner-box{padding:15px}
	.footer-inner{padding:10px; height:250px;}
}


/* ****************** 3분 견적요청 신청 ********************** */
@media all and (max-width:1280px){
	.popup-online-left{width: 100%; padding-right: 0;}
	.popup-online-right{margin-top: 3rem; width: 100%; padding-left: 0;}
}
@media all and (max-width:800px){
	#popupOnlineBox .footer-modal-content{width: calc(100% - 30px);}
	#popupOnlineBox .modal-fixed-pop-inner,
	#popupOnlineBox .modal-inner-box{display: block;}
	.popup-online-box{padding: 3.5rem 3rem 5rem; border-radius: 2rem;}
	.popup-online-tit{padding-bottom: 2rem; border-bottom: 0.2rem solid #000;}
	.popup-online-tit h5{font-size: 3.4rem; line-height: 1.2;}
	.popup-online-tit p{margin-top: 1.5rem; width: 100%; margin-left: 0; font-size: 1.6rem; line-height: 1.62;}
	.popup-online-tit .modal-close-btn{top:-0.4rem; right:0;}
	.popup-online-tit .modal-close-btn i{font-size:4.2rem;}

	.popup-online-form{margin-top: 2.5rem;}
	.popup-online-right{margin-top: 2rem;}
	/* 요청자 정보 폼 */
	.popup-online-info-box .tit{font-size: 2.2rem; line-height: 1.3;}
	.popup-online-info-box .tit em{left: -1rem;}
	.popup-online-info-list{padding: 1rem 0; margin: 2rem 0 2.5rem;}
	.popup-online-info-item{width: 100%; margin: 1rem 0;}
	.popup-online-info-item:nth-child(odd){margin-left: 0; margin-right: 0;}
	.popup-online-item .tit,
	.popup-online-info-item .tit{width: 9rem; font-size: 1.7rem; line-height: 1.52;}
	.popup-online-item .tit em,
	.popup-online-info-item .tit em{left: -0.8rem;}
	.popup-online-item .form,
	.popup-online-info-item .form{width: calc(100% - 9rem); padding: 0.5rem 2rem;}
	/* 일반 폼 */
	.popup-online-item{width: 100%; margin: 0;}
	.popup-online-item + .popup-online-item{margin-top: 2rem;}
	.popup-online-item .tit{width: 9rem;}
	.popup-online-item .form{width: calc(100% - 9rem);}

	/* 공통 css */
	.popup-online-item .form input,
	.popup-online-info-item .form input{padding-left: 0.5rem; width: 100%; height: 4.5rem; font-size: 1.6rem;}

	.has-file-input{height: 5.5rem;}
	.has-file-input input[type="file"]{width: auto; height: auto; padding: 0; appearance: auto;}

	.has-input-check .item{width: calc(50% - 0.5rem); margin-right: 0.5rem; padding: 0.5rem 2rem;}
	.has-input-check .item + .item{margin-left: 0.5rem; margin-right:0;}
	.has-input-check .custom-checkbox{margin-top: 1.5rem; margin-left: 0; width: 100%;}
	.custom-checkbox .checkbox-item{margin: 0.5rem 0; margin-right:3rem;}
	.custom-checkbox .checkbox-item label{padding-left:3.6rem; font-size: 1.6rem; line-height: 2rem;}
	.custom-checkbox .checkbox-item label::before{top: 0; left: 0; font-size: 2.4rem;}

	.custom-radio-box .radio-item{margin: 0.5rem 0; margin-right:3rem;}
	.custom-radio-box .radio-item label{padding-left:3.6rem; font-size: 1.6rem; line-height: 3.5rem;}
	.custom-radio-box .radio-item label::before{top: 0; left: 0; font-size: 2.4rem;}
	.custom-radio-box .radio-item .etc-input{padding-left: 1.5rem; font-size: 1.5rem; width: 18rem; height: 3.6rem;}

	/* 동의하기 */
	.popup-online-agree{margin-top: 2rem;}
	.popup-online-agree .agree-txt{font-size:1.6rem; line-height: 3rem;}
	.popup-online-agree .agree-txt label{padding-left:2.7rem;}
	.popup-online-agree .agree-txt label i{top: 0.2rem; left:0; font-size:2rem;}
	.popup-online-agree .privacy-btn{font-size: 1.6rem; line-height: 1.5;}
	.popup-online-agree .privacy-btn i{margin-left: 0.5rem; top: 0.2rem; font-size: 1.8rem;}
	/* 버튼 */
	.popup-online-btn{margin-top: 2rem;}
	.popup-online-btn button{margin: 0 auto; width: 21rem; height: 5.5rem; font-size: 1.8rem; line-height: 5.5rem;}
}
@media all and (max-width:480px){
	.popup-online-item .tit,
	.popup-online-info-item .tit{width: 100%;}
	.popup-online-item .tit br,
	.popup-online-info-item .tit br{display: none;}
	.popup-online-item .form,
	.popup-online-info-item .form{margin-top: 1rem; width: 100%;}
}

/* ****************** 3분 견적요청 신청 :: 완료 ********************** */
@media all and (max-width:800px){
	.popup-online-completion-txt{margin-top: 4.5rem; font-size: 2.2rem; line-height: 1.3;}
	.popup-online-completion-btn{margin-top: 4rem;}
	.popup-online-completion-btn button{width: 16rem; height: 5.5rem; font-size: 1.8rem; line-height: 5.5rem;}
}