@charset "utf-8";
@import url('unable/board.css');
@import url('unable/board_renew.css');
@import url('custom_board.css');

/*
 * layout.css.css
 * 레이아웃 공통요소들 작업요소에 맞게 수정하시면됩니다.
 *
 * 1) root 설정
 * 2) 폰트설정
 * 3) 레이아웃설정
 *
 */

/* html, body {overflow-x: hidden;}  */

/* 1) root 설정  */
:root{
	--height-full: 100vh;
    --font-base:16rem;
	--color-base:#111; /* 선언이 안되면 #333 기본컬러로 적용됨 */
	--color-point:#d71414;
	--color-white: #fff;

	--font-play:'play', Sans-serif;
	--font-kor:'Pretendard', Sans-serif;
	--font-xi:'xeicon';
}

/* 2) 폰트설정 */
body{font-size:var(--font-base, 16rem);}

[data-ani]{opacity:0; transition:transform 1.6s ease, opacity 1.3s ease; transform-style:preserve-3d; will-change:transform;}
[data-ani].is_moved{opacity:1; transform:none;}
[data-ani="img"]{transform:translate(0%, 40%) matrix3d(1, 0, 0, 0, 0, 0.997564, 0.0697565, -0.00028, 0, -0.0697565, 0.997564, -0.00249391, 0, 0, 40, 0.9);}
[data-ani="top"]{transform:translateY(70rem); transition-delay:0.1s;}
[data-ani="right"]{transform:translateX(70rem); transition-delay:0.1s;}
[data-ani="left"]{transform:translateX(-70rem); transition-delay:0.1s;}
[data-ani="scale"]{transform:scale(1.15); transition-delay:0.1s; opacity:1 !important;}
[data-ani="rotate"]{transform:scale(1.15); transition-delay:0.1s; opacity:1 !important;}

/* start motion  for All contents */
.motion-on [data-motion]{transition:transform 1.4s ease, opacity 1.3s ease;transform: none;opacity:1;will-change: transform;}
[data-motion]{opacity:0;}
[data-motion="scrollTop"]{transform:translate(0%, 40%) matrix3d(1, 0, 0, 0, 0, 0.997564, 0.0697565, -0.00028, 0, -0.0697565, 0.997564, -0.00249391, 0, 0, 40, 0.9);}
[data-motion="top"]{transform: translateY(70rem);transition-delay:0.1s;}
[data-motion="right"]{transform:translateX(140rem); transition-delay:0.1s;}
[data-motion="scale"]{opacity:1 !important; transform:scale(1.15); transition-delay:0.1s;}
[data-motion="txt"].motion_in > *{transform:translateY(0);display: block;}
[data-motion="txt"] > *{opacity:1; transition:all 0.9s ease; transform:translateY(100%);}
[data-motion="txt"]{/* opacity:1 !important; */overflow:hidden; transition-delay:0.5s;}

/* delay set */
[data-delay="100"]{transition-delay:100ms !important;}
[data-delay="150"]{transition-delay:150ms !important;}
[data-delay="200"]{transition-delay:200ms !important;}
[data-delay="250"]{transition-delay:250ms !important;}
[data-delay="300"]{transition-delay:300ms !important;}
[data-delay="350"]{transition-delay:350ms !important;}
[data-delay="400"]{transition-delay:400ms !important;}
[data-delay="450"]{transition-delay:450ms !important;}
[data-delay="500"]{transition-delay:500ms !important;}
[data-delay="550"]{transition-delay:550ms !important;}
[data-delay="600"]{transition-delay:600ms !important;}
[data-delay="650"]{transition-delay:650ms !important;}

/*  keyframe */
@keyframes motion-scale{
	0%{transform: scale(1.05);}
	100%{ransform: scale(1);}
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}

@keyframes flow1 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    50.01% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes flow2 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);
    }
}

.wrap {max-width: 1580rem; margin: 0 auto; padding: 0 30rem;}

/* btn */
.area-btn button{display:flex; background-color:transparent;  color: var(--color-white) !important;}
.area-btn {display: flex; color: var(--color-white) !important; z-index: 1;}
.area-btn span {display: flex; justify-content: center; align-items: center; width: 143rem; height: 51rem; border-radius: 100rem; border: 1rem solid rgba(255,255,255,.5); font-size: 18rem; font-weight: bold;}
.area-btn i {position: relative; display: block; width: 51rem; height: 51rem; border-radius: 100%; border: 1rem solid rgba(255,255,255,.5);}
.area-btn i::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url('../images/main/ic-arrow03.svg') no-repeat; width: 11rem; height: 11rem;}

.area-btn.ty2 {justify-content: center; margin-top: 100rem;}
.area-btn.ty2 span {background: #d71414;} 
.area-btn.ty2 i {border: 1rem solid #d71414;}
.area-btn.ty2 i::before {background: url('../images/content/ic-arrow-red.svg') no-repeat;}

@media screen and (max-width:1024px) {
    .area-btn.ty2  {margin-top: 80rem;}
}
@media screen and (max-width:540px) {
  .area-btn span.hide {display: none;}
  .area-btn.ty2  {margin-top: 65rem;}
}

/* header custom */
#header h1.logo img {height: 50rem;}
#header .head-box {display: flex; justify-content: space-between; align-items: center; position: absolute; top: 0; left: 50%; z-index: 9; max-width: 1740rem; width: 100%; transform: translateX(-50%); box-sizing: border-box;}
#header .gnb-wrap {display: flex; align-items: center;}
#header .gnb {display: flex; margin-right: 96rem;}
#header .gnb > li {position: relative;}
#header .gnb > li > a {display: flex; align-items: center; height: 106rem; padding: 0 38rem; font-size: 20rem; font-weight: 400; color: var(--color-white);}
#header .area-util {display: flex; align-items: center; justify-content: center; width: 200rem; height: 60rem; border-radius: 100rem; background: var(--color-white);}
#header .area-util a{display: flex; align-items: center; justify-content: center; width:100%; height:100%;}
#header .area-util p {font-size: 18rem; color: #060606; font-weight: bold;}
#header .area-util p span {color: #d71414;}


/* header mob menu */
#header .btn_menu {display: none;}
#header .btn_menu {position: absolute; top: 50%; right: 30rem; width: 50rem; height: 50rem; transition: all 0.3s ease 0s; transform: translateY(-50%); z-index: 100;}
#header .btn_menu span{position: relative; display: block; top: 50%; width: 19rem; height: 17rem; margin: 0 auto; transform: translateY(-50%);}
#header .btn_menu span i,
#header .btn_menu span:before,
#header .btn_menu span:after{display:block; position:absolute; height:3rem; background: var(--color-white); transform:rotate(0);}
#header .btn_menu span:before,
#header .btn_menu span:after{content:''; width:19rem;}
#header .btn_menu span:before{right:0; top:0; transition:0.5s ease 0s;}
#header .btn_menu span:after{left:0; bottom:0; transition:0.5s ease 0s;}
#header .btn_menu span i{opacity:1; left:0; top:7rem; width:19rem; transition:opacity var(--trans-ani), transform 0.5s ease 1.1s;}
#header .btn_menu.active span i,
#header .btn_menu.active span:before,
#header .btn_menu.active span:after{background: var(--color-white);}
#header .btn_menu.active i{opacity:0;}
#header .btn_menu.active span:before{right:0; top:6rem; transform:rotate(45deg);}
#header .btn_menu.active span:after{left:0; bottom:8rem; transform:rotate(-45deg);} 

/* footer */
#footer {background: #222; padding: 85rem 0; font-family:var(--font-kor);}
#footer .wrap {display: flex; justify-content: space-between; align-items: end; position:relative;}
#footer .ft-logo{position:absolute; right:30rem;}
#footer .ft-logo img {height: 100rem; opacity: .4;}
#footer address {margin-top: 45rem;}
#footer address span {display: inline-block; padding-right: 24rem; color: #ddd; font-size: 17rem;}
#footer address span:nth-child(n+5) {padding-top: 12rem;}
#footer address span em {display: inline-block; padding-right: 8rem; color: #666; font-weight: 600;}
#footer .ft-link {display: flex;}
#footer .ft-link li a {opacity:0.4; display: inline-block; color: #ddd !important; font-weight: 600; font-size: 15rem; transition:opacity 0.3s ease;}
#footer .ft-link li:nth-child(2) {position: relative; padding-left: 12rem; margin-left: 12rem;}
#footer .ft-link li:nth-child(2)::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 2rem; height: 16rem; background: rgba(255,255,255,.1);}
#footer .ft-link li a:hover{opacity:1;}
#footer .copyright{margin-top:50rem; font-size:15rem; color:#555; font-weight:500;}


@media (min-width:1921px){
	html{font-size:0.052vw /* 1px */;}
}
@media (max-width:1780px){
	#header .head-box {padding: 0 30rem;}
}
@media (max-width:1580px){
	#header .gnb {left: 44%;}
	#header .gnb > li > a {padding: 0 32rem;}
	
}
@media (max-width:1500px){
	html{font-size:0.067vw /* 1px */;}
	
}
@media all and (min-width:1300px){
	/* header comm */
	#header nav .gnb > li > .box {display:none; position:absolute; opacity:0; visibility:hidden; top:50rem; left: 50%; transform: translateX(-50%); width:100%; min-width:180rem; padding: 20rem 22rem; background:#fff; box-shadow:15rem 20rem 29rem 0rem rgba(0, 0, 0, 0.23); transition:all 0.4s ease-out; transition-property:opacity, top, visibility; transition-delay:0s, 0s, 0s;}
	#header nav .gnb > li > .box.active {display:block; transition-delay:0.1s; border-radius: 5rem; border: 1rem solid var(--color-grayf8);}
	#header nav .gnb > li.active > .box {opacity:1; visibility:visible; top: 90rem; z-index:10; transition-delay:0s, 0s, 0s; border-radius: 5rem;}
	#header nav .gnb > li ul > li > a{display:block; position:relative; padding: 7rem 0rem; background:#fff; font-size:16rem; letter-spacing:-0.5rem; color: var(--color-gray66); text-align:left; transition:all 0.3s ease 0s;}
	#header nav .gnb > li ul > li > a:hover{color: var(--color-point);}
}
@media (max-width:1300px){
    html{font-size:0.077vw /* 1px */;}
	#header .head-box {left: 0; height: 80rem ; transform: none;}
	#header h1.logo img {height: 45rem;}
	#header .area-util {position: absolute; top: 24rem; left: 20rem; width: 170rem; height: 50rem;}
	/* header comm */
	#header .btn_menu {display:block;}
	#header .btn_menu.active {top: 51rem;}
	#header .gnb-wrap {position: fixed; top:0rem; right: -100%; z-index:99; width: 100%; height:100%; margin:0; background: var(--color-white); transition:all 0.5s ease-out 0s;}
	#header .gnb-wrap::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100rem; background: #d71414;}
	#header .gnb-wrap.active {right:0rem; box-shadow:-5rem 0rem 15rem rgba(0,0,0,0.1); transition:all 0.5s ease-out 0s; display: unset;}
	#header .gnb-wrap.active .btn_menu {position: fixed;}
    #header nav .gnb{display: block; position: absolute; left: 0; top: 190rem; width: 100%; box-sizing: border-box; padding: 0 95rem;}
	#header nav .gnb > li {display:block; position: relative;}
	#header nav .gnb > li:nth-child(n+2) {margin-top: 15rem;}
	#header nav .gnb > li {padding:0; height: auto;}
	#header nav .gnb > li > a {position: relative; display: block; line-height:1; height: auto; padding: 20rem 0; font-size: 40rem; color: var(--color-base); text-align:left; transition:all 0.3s ease 0s; font-weight: 600;;}
	#header nav .gnb > li > a::before {content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 0; background: url('../images/main/ic-menu__arrow.svg') no-repeat; width: 20rem; height: 14rem;}
	#header nav .gnb > li > a.active {opacity: 1;}
	#header nav .gnb > li > a.active::before {transform: translateY(-50%) rotate(180deg);}
	#header nav .gnb > li > .box {display: none; padding: 0rem 0 12rem;}
	#header nav .gnb > li ul > li > a {display: block; padding: 10rem 0rem; text-align: left; font-size: 26rem; color: #666; font-weight: 500;}

}
@media (max-width:1024px){
    html{font-size:0.098vw /* 1px */;}

	#footer{padding:60rem 0;}
	#footer .wrap {flex-direction: column; justify-content: unset; align-items: unset;}
	#footer .ft-link {margin-top: 30rem; margin-bottom:50rem;}
	#footer .ft-logo{position:static;}	
	#footer .ft-logo img {height: 70rem;}
	#footer .copyright{position:absolute; bottom:0; margin-top:0;}
}
@media (max-width:768px){
    html{font-size:0.130vw /* 1px */;}

	#header .head-box {height: 90rem;}
	#header h1.logo img {height: 40rem;}

	#footer {padding: 55rem 0 70rem;}
	#footer address span {padding-right: 16rem;}
	#footer address span:nth-child(n+4) {padding-top: 8rem;}
}
@media (max-width:620px){
    html{font-size:0.161vw;}

    .wrap {padding: 0 20rem;}
	#header .head-box {height: 70rem; padding: 0 20rem;}
	#header nav .gnb {padding: 0 60rem;}
	#header nav .gnb > li > a {font-size: 30rem;}
	#header nav .gnb > li > a::before {width: 18rem; height: 12rem;}
	#header nav .gnb > li ul > li > a {font-size: 20rem;}
	#header .btn_menu {right: 20rem;}
}
@media (max-width:540px){
    html{font-size:0.220vw /* 1px */;}	

	#header .gnb-wrap::before {height: 70rem;}
	#header .btn_menu.active {top: 12rem; transform: unset;}
	#header .area-util {top: 14rem; width: 150rem; height: 42rem;}
	#header .area-util p {font-size: 16rem;}
	#header nav .gnb {top: 140rem; padding: 0 45rem;}
	#header nav .gnb > li > a {padding: 12rem 0; font-size: 25rem;}
	#header nav .gnb > li ul > li > a {font-size: 18rem;}
	#header nav .gnb > li > a::before {width: 16rem; height: 10rem;}
	
	#footer address span {display: block;}
	#footer address br {display: none;}
	#footer address span:nth-child(n+2) {padding-top: 6rem;}
}

/* 준비중 */
.ready-page{padding:120rem 0; text-align:center;}
.ready-page strong{display:block; font-size:35rem;}
.ready-page strong i{opacity:0.2; display:block; margin-bottom:10rem; font-size:45rem;}
.ready-page p{margin-top:20rem; font-size:18rem; line-height:1.4;}
@media (max-width:480px){
	.ready-page{padding:80rem 0;}
	.ready-page	strong{font-size:30rem;}
	.ready-page	p{font-size:16rem; word-break:keep-all;}
	.ready-page	p br{display:none;}
}

/* 빠른상담신청 */
.quick-inquiry{
	&{padding:30rem 0; background-color:#222; border-bottom:1px solid rgba(255,255,255,0.1);}
	.inr{display:grid; grid-template-columns:200rem 1fr; align-items:center; gap:50rem; max-width:1580rem; margin:0 auto; padding:0 30rem; color:#fff;}
	
	.customer-col__box{order:1;}
	.customer-row__box:nth-of-type(1){order:2;}
	.customer-row__box:nth-of-type(2){order:4;}
	.area-btn.ty2{order:3;}

	.title h2{margin-bottom:10rem; font-size:30rem;}
	.title p{opacity:0.5; line-height:1.4;}
	.title span{display:block; margin-top:5rem; font-size:22rem; font-weight:600;}
	.agree-checkBox a{display:inline-block;}
	.customer-row__box > label,
	.customer-row__box .agree-box{display:none;}
	.customer-form{--sizeBtn:130rem; display:grid; grid-template-columns:40% 1fr var(--sizeBtn); gap:5rem 25rem; align-items:start;}
	.customer-col__box{grid-row:1/4; grid-template-columns:1fr; gap:5rem;}
	.customer-col__box :is(input[type="text"], input[type="number"], select){height:35rem; padding:0 15rem; border-radius:5rem; background-color:#fff; border:2rem solid #fff;}
	.customer-col__box label{display:none;}
	.customer-col__box :is(input[type="text"], input[type="number"], select):focus{outline:none; border-color:var(--color-point);}
	.customer-row__box{padding-top:0;}
	.customer-row__box textarea{height:130rem; padding:15rem;}	

	.agree-checkBox{margin-top:5rem;}
	.agree-checkBox label{color:#999; font-size:16rem;}
	.agree-checkBox a{color:#aaa;}

	.area-btn.ty2{margin-top:0;}
	.area-btn.ty2 button{width:100%; height:var(--sizeBtn);}
	.area-btn.ty2 button span{height:100%; border-radius:7rem; font-size:17rem;}
	.area-btn.ty2 button i{display:none;}

	@media (max-width:1024px){
		.inr{gap:30rem;}
		.customer-form{--sizeBtn:auto; grid-template-columns:40% 1fr;}
		.customer-row__box:nth-of-type(2){order:3;}
		.customer-row__box textarea{height:100rem;}
		.area-btn.ty2{order:4;}
		.area-btn.ty2 button{width:100%; height:35rem; font-size:15rem;}
		.area-btn.ty2 button span{width:100%; border-radius:50em;}
	}
	@media (max-width:768px){
		.inr{grid-template-columns:1fr; gap:10rem;}
		.title{display:flex; align-items:center; gap:30rem;}
		.title h2{margin-bottom:0; font-size:23rem;}
		.title p br{display:none;}
		.customer-col__box :is(input[type="text"], input[type="number"], select),
		.customer-row__box textarea{padding-left:10rem; padding-right:10rem;}
	}
	@media (max-width:540px){
		&{display:none !important;}
	}
}
	/* scroll motion */
[data-quick="inquiry"]{opacity:0; visibility:hidden; position:fixed; bottom:0; z-index:90; width:100%; transform:translateY(100rem); transition:0.5s ease;}
[data-quick="inquiry"].fix{opacity:1; visibility:visible; transform:translateY(0);}
[data-quick="inquiry"].fix.arrival{position:relative;}