.bx-controls,
.inr{width:1200px; margin:0 auto;}

/* visual */
.area_visual{position:relative; width:100%; overflow:hidden;}
.area_visual span{display:block; position:absolute; top:0; left:0; z-index:1;	background:rgba(0, 0, 0, 0.5); width:33%; height:100%;}
.area_visual span::after{content:''; display:block; position:absolute; top:0; left:100%; width:0; height:0;  border-top:solid 800px rgba(0, 0, 0, 0.5); border-right:solid 800px transparent;}
.area_visual section{background-repeat:no-repeat; background-size:cover; background-position:50%;}
.area_visual .inr{position:relative; height:800px; margin:0 auto; transition:0.6s;}
.area_visual .inr .title_box{position:absolute; top:30%; left:0; font-size:40px; color:#fff; letter-spacing:-0.01em; z-index:10;}
.area_visual .inr .title_box h2{font:300 72px 'GongGothic';}
.area_visual .inr .title_box h2 br{display:none;}
.area_visual .inr .title_box p{font-size:24px; font-weight:500;}

/* main bxslider */
#header + .bx-wrapper{position:relative;}
#header + .bx-wrapper .bx-controls{position:absolute; top:60%; left:50%; transform:translateX(-50%); z-index:10;}
#header + .bx-wrapper .bx-controls .bx-controls-direction{display:none;}
#header + .bx-wrapper .bx-controls .bx-pager{position:absolute;}
#header + .bx-wrapper .bx-controls .bx-pager .bx-pager-link{display:block; background-color:#d1d7db; width:40px; height:8px; border-radius:4px; margin-bottom:22px; font-size:0; text-indent:-9999px; transition:0.5s;}
#header + .bx-wrapper .bx-controls .bx-pager .bx-pager-link.active{background-color:#ce701f; width:100px;}

/* area article */
article[class^="area_"]{padding:120px 0;}
article[class^="area_"] .title_box{padding-bottom:50px;}
article[class^="area_"] .title_box h3{font:300 40px 'GongGothic'; padding-bottom:10px;}
article[class^="area_"] .title_box p{color:#adadad; font-size:24px; line-height:1.3333; font-weight:400;}

/* 다올림에 물어보세요 */
.area_ask{background:url(../images/main/ask_bg.jpg) no-repeat 50%; background-size:cover;}
.area_ask .content_box{display:flex;}
.area_ask .content_box > section{width:33.3333%;}
.area_ask .content_box [class^="section_"] .title{font-size:24px; font-weight:700;}
.area_ask .content_box [class^="section_"] .title a{position:relative; display:block; width:100%; height:100%;}
.area_ask .content_box [class^="section_"] .title a span{position:absolute; right:0; top:0;}
.area_ask .content_box .section_ask01{display:flex; flex-direction:column; margin-right:30px; border:solid 1px #c8c8c8; border-radius:30px; padding:40px; box-sizing:border-box; background-color:#fff; background-color:rgba(255, 255, 255, 0.8);}
.area_ask .content_box .section_ask01 .title{padding-bottom:30px;}
.area_ask .content_box .section_ask01 .content{flex-grow:1;}
.area_ask .content_box .section_ask01 .content div,
.area_ask .content_box .section_ask01 .content a{position:relative; font-weight:300; display:block; width:100%; height:100%;}
.area_ask .content_box .section_ask01 .content em{display:block; font-size:20px; padding-bottom:20px; border-bottom:solid 1px #adadad; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden;}
.area_ask .content_box .section_ask01 .content p{padding-top:20px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; word-wrap:break-word; line-height:1.5em; height:6em;}
.area_ask .content_box .section_ask01 .content span{display:block; color:#909090; font-family:'Noto Sans KR'; padding-top:30px; text-align:right;}

.area_ask .content_box .section_ask02{display:flex; flex-direction:column; justify-content:space-between;}
.area_ask .content_box .section_ask02 > div{border-radius:26px; box-sizing:border-box;}
.area_ask .content_box .section_ask02 .content01{background:rgb(82,148,209); background:linear-gradient(135deg, rgba(82,148,209,1), rgba(109,177,233,1)); color:#fff; padding:40px 40px 40px 90px; margin-bottom:20px;}
.area_ask .content_box .section_ask02 > div .title p{position:relative;}
.area_ask .content_box .section_ask02 > div .title p::before{position:absolute; top:3px; left:-40px; content:''; display:block; background-size:contain;}
.area_ask .content_box .section_ask02 .content01 .title{padding-bottom:15px;}
.area_ask .content_box .section_ask02 .content01 .title p::before{width:26px; height:26px; background:url(../images/main/icon_ask01.png) no-repeat 50%;}
.area_ask .content_box .section_ask02 .content01 li{position:relative;}
.area_ask .content_box .section_ask02 .content01 li::before{position:absolute; bottom:7px; left:-42px; font:400 18px 'Noto Sans KR';}
.area_ask .content_box .section_ask02 .content01 li:nth-child(1)::before{content:'TEL';}
.area_ask .content_box .section_ask02 .content01 li:nth-child(2)::before{content:'H.P';}
.area_ask .content_box .section_ask02 .content01 a{font-size:30px; font-weight:700; color:#fff;}

.area_ask .content_box .section_ask02 .content02{background-color:#eaeaea; padding:30px 30px 30px 90px; }
.area_ask .content_box .section_ask02 .content02 a{display:block; width:100%; height:100%;}
.area_ask .content_box .section_ask02 .content02 .title{padding-bottom:10px;}
.area_ask .content_box .section_ask02 .content02 .title p::before{width:21px; height:29px; background:url(../images/main/icon_ask02.png) no-repeat 50%;}

/* 시공사례를 확인하세요 */
.area_portfolio{position:relative;}
.area_portfolio::after{content:''; position:absolute; bottom:0; left:0; width:100%; height:40%; background:#f5f5f5; z-index:-1;}
.area_portfolio .bx-wrapper{overflow:hidden;}
.area_portfolio .bx-wrapper .bx-controls{}
.area_portfolio .bx-wrapper .bx-viewport{padding-bottom:70px; padding-left:50%; overflow:hidden;}
.area_portfolio .bx-wrapper .bx-viewport ul{}
.area_portfolio .bx-wrapper .bx-viewport ul li{width:550px !important; height:380px !important; border-radius:15px; margin-right:40px; overflow:hidden; -webkit-box-shadow: 6px 6px 16px 2px rgba(124,124,124,0.18); -moz-box-shadow: 6px 6px 16px 2px rgba(124,124,124,0.18); box-shadow: 6px 6px 16px 2px rgba(124,124,124,0.18); background:#fff;}
.area_portfolio .bx-wrapper .bx-viewport ul li .img_box{width:100%; height:300px; background-size:cover; background-position:50%; background-repeat:no-repeat;}
.area_portfolio .bx-wrapper .bx-viewport ul li .txt_box{width:100%; height:80px; padding:0 30px; display:flex; align-items:center; box-sizing:border-box; background:#fff;}
.area_portfolio .bx-wrapper .bx-viewport ul li .txt_box em{display:block; padding:0 8px; background-color:#fd7e14; border-radius:15px; margin-right:12px; text-align:center; line-height:30px; color:#fff; font-weight:900; white-space:nowrap;}
.area_portfolio .bx-wrapper .bx-viewport ul li .txt_box p{font:400 22px/1em 'Noto Sans KR'; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:70%; overflow:hidden;}
.area_portfolio .bx-wrapper .bx-viewport ul li .txt_box span{white-space:nowrap; margin-left:auto; font:300 18px 'Noto Sans KR'; color:#909090;}
.area_portfolio .bx-wrapper .bx-controls .bx-controls-direction > a{text-indent:-9999px; background:url(../images/main/icon_portfolio_arrow.png) no-repeat 50%; background-size:contain; display:inline-block; width:15px; height:25px;}
.area_portfolio .bx-wrapper .bx-controls .bx-controls-direction .bx-prev{}
.area_portfolio .bx-wrapper .bx-controls .bx-controls-direction .bx-next{transform:rotate(180deg); margin-left:60px;}
.area_portfolio .bx-wrapper .bx-controls .bx-pager{display:none;}

/* 지금 바로 물어보세요 */
.area_form{background:url(../images/main/form_bg.jpg) no-repeat 50%; color:#fff; background-size:cover;}
.area_form .inr{display:flex;}
.area_form .title_box{color:#fff;}
article.area_form .title_box p{color:#fff;}
.area_form .section_form01{position:relative; margin-right:70px; width:50%;}
.area_form .section_form01 .num_box{margin-top:20px; width:100%; height:50px;}
.area_form .section_form01 .num_box li{width:230px; height:100%; border:solid 1px #fff; border-radius:35px; float:left; text-align:center; font:500 18px/50px 'Rubik';}
.area_form .section_form01 .num_box li:first-child{margin-right:10px;}
.area_form .section_form01 .num_box li a{display:block; width:100%; height:100%; color:#fff;}
.area_form .section_form01 .num_box li em{font-weight:700;}

.area_form .section_form01 .sns_box{position:absolute; bottom:0; left:0;}
.area_form .section_form01 .sns_box li{float:left; background-size:cover; margin-right:16px;}
.area_form .section_form01 .sns_box li:nth-child(1){background:url(../images/main/icon_insta.png) no-repeat 50%;}
.area_form .section_form01 .sns_box li:nth-child(2){background:url(../images/main/icon_naver.png) no-repeat 50%;}
.area_form .section_form01 .sns_box li:nth-child(3){background:url(../images/main/icon_kakao.png) no-repeat 50%;}
.area_form .section_form01 .sns_box li a{display:block; width:49px; height:49px; text-indent:-9999px;}

.area_form .section_form02{background-color:#fff; padding:40px; box-sizing:border-box; border-radius:20px; width:60%;}
.area_form .section_form02 form p{display:flex; color:#303030; justify-content:space-between;}
.area_form .section_form02 form p label{position:relative; color:#303030; font-weight:700; width:100px; text-indent:35px; margin-top:15px; width:30%;}
.area_form .section_form02 form p label::before{position:absolute; top:1px; left:0; content:''; display:block; width:20px; height:20px; background-size:contain;}
.area_form .section_form02 form p:nth-child(1) label::before{background:url(../images/main/icon_form01.png) no-repeat 50%;}
.area_form .section_form02 form p:nth-child(2) label::before{background:url(../images/main/icon_form02.png) no-repeat 50%;}
.area_form .section_form02 form p:nth-child(3) label::before{background:url(../images/main/icon_form03.png) no-repeat 50%;}
.area_form .section_form02 form p:nth-child(4) label::before{background:url(../images/main/icon_form04.png) no-repeat 50%;}
.area_form .section_form02 form p:nth-child(5) label::before{background:url(../images/main/icon_form05.png) no-repeat 50%;}
.area_form .section_form02 form p span{display:block; width:70%;}
.area_form .section_form02 form p input::placeholder,
.area_form .section_form02 form p input::-webkit-input-placeholder,
.area_form .section_form02 form p input:-ms-input-placeholder,
.area_form .section_form02 form p textarea::-webkit-input-placeholder,
.area_form .section_form02 form p textarea:-ms-input-placeholder{color:#c2c2c2;}
.area_form .section_form02 form p input,
.area_form .section_form02 form p textarea{background:#eff0f5; outline:0; border:0; border-radius:10px; width:100%; height:50px; text-indent:15px; margin-bottom:10px; color:#c2c2c2;}
.area_form .section_form02 form p textarea{height:200px; color:#c2c2c2; box-sizing:border-box; padding:15px 5px;}
.area_form .section_form02 button{position:relative; width:200px; height:50px; background:#3b86cb; color:#fff; border-radius:10px; margin-left:162px; text-align:left; padding:0 20px; box-sizing:border-box;}
.area_form .section_form02 button::before{content:''; display:block; position:absolute; width:8px; height:13px; background:url(../images/main/icon_form_arrow.png) no-repeat 50%; background-size:contain; right:20px; top:50%; transform:translateY(-50%);}

.area_form .section_form02 form p.form_phone span,
.area_form .section_form02 form p.form_email span{display:flex; justify-content:space-between; align-items:center;}
.area_form .section_form02 form p.form_phone span input,
.area_form .section_form02 form p.form_email span input{width:50%; flex-grow:1;}
.area_form .section_form02 form p.form_phone span i,
.area_form .section_form02 form p.form_email span i{padding:0 3px 10px;}

@media screen and (max-width:1580px){

}

@media all and (max-width:1280px){
	.bx-controls,
	.inr{width:90%;}

	.area_visual .inr ul{bottom:5%; right:auto; left:50%; transform: translateX(-50%); }
	.area_visual .inr ul li{background:#08495d}
	.area_visual .inr h2{top:30%; width:100%; text-align:center;}

	.area_ask .content_box{flex-wrap:wrap;}
	.area_ask .content_box > section{width:49%;}
	.area_ask .content_box .section_ask01{margin-right:2%; margin-bottom:2%;}
	.area_ask .content_box .section_ask01:nth-child(2){margin-right:0;}
	.area_ask .content_box .section_ask02{flex-direction:row; width:100%;}
	.area_ask .content_box .section_ask02 > div{width:49%;}
	.area_ask .content_box .section_ask02 .content01{margin-right:2%; margin-bottom:0;}
	.area_ask .content_box .section_ask02 .content02{background-color:#f9f9f9;}
	.area_ask .content_box .section_ask02 .content02 .title{padding-bottom:20px;}

	.area_portfolio .bx-wrapper .bx-viewport{padding-left:5%;}

	.area_form .section_form01 .num_box li{margin-bottom:20px;}
	.area_form .section_form02 button{margin-left:30%;}

}

@media all and (max-width:1080px){
	.area_visual .inr{height:600px;}
	.area_visual span{width:20%;}
	.area_visual span::after{border-top:solid 600px rgba(0, 0, 0, 0.5); border-right:solid 600px transparent;}
	#header + .bx-wrapper .bx-controls{top:55%;}

	.area_form .inr{flex-direction:column;}
	.area_form .section_form01{margin-right:0; width:100%;}
	.area_form .section_form01 .num_box{margin-top:0;}
	.area_form .section_form01 .sns_box{left:auto; right:0; margin-bottom:23px;}
	.area_form .section_form02{width:100%;}
}

@media all and (max-width:900px){
	article[class^="area_"]{padding:70px 0;}
	.area_ask .content_box{flex-direction:column;}
	.area_ask .content_box .section_ask01{padding:30px;}
	.area_ask .content_box .section_ask01{margin-right:0; width:100%;}
	.area_ask .content_box .section_ask02{flex-direction:column;}
	.area_ask .content_box .section_ask02 .content01{margin-right:0; margin-bottom:2%; padding:30px 30px 30px 70px;}
	.area_ask .content_box .section_ask02 > div{width:100%;}
	.area_ask .content_box .section_ask02 .content02{padding-left:70px;}

	.area_portfolio .bx-wrapper .bx-viewport{padding-bottom:40px;}
	.area_portfolio .bx-wrapper .bx-viewport ul li{width:240px !important; height:200px !important; margin-right:20px; transition:0.6s;}
	.area_portfolio .bx-wrapper .bx-viewport ul li .img_box{height:140px;}
	.area_portfolio .bx-wrapper .bx-viewport ul li .txt_box{position:absolute; bottom:0; left:0; height:60px; padding:0 10px; flex-wrap:wrap;}
	.area_portfolio .bx-wrapper .bx-viewport ul li .txt_box em{width:40px; height:20px; background-color:#fd7e14; font-size:14px; line-height:20px; padding:0 3px;}
	.area_portfolio .bx-wrapper .bx-viewport ul li .txt_box p{font-size:16px;}
	.area_portfolio .bx-wrapper .bx-viewport ul li .txt_box span{width:100%; text-align:right; font-size:14px;}

	.area_form .section_form01 .sns_box{position:relative; right:auto; left:0; overflow:hidden; clear:both;}

}

@media all and (max-width:767px){
	.area_visual .inr{height:360px;}
	.area_visual span{width:15%;}
	.area_visual span::after{border-top:solid 360px rgba(0, 0, 0, 0.5); border-right:solid 360px transparent;}
	.area_visual .inr .title_box{left:50%; transform:translateX(-50%); width:100%; text-align:center; word-break:keep-all;}
	.area_visual .inr .title_box h2{font-size:60px;}
	#header + .bx-wrapper .bx-controls{top:55%;}
	#header + .bx-wrapper .bx-controls .bx-pager{position:absolute; width:100%; display:flex; justify-content:center; margin-top:50px;}
	#header + .bx-wrapper .bx-controls .bx-pager .bx-pager-link{float:left; margin:0 8px; width:10px; height:10px;}

	article[class^="area_"] .title_box{padding-bottom:30px;}
	article[class^="area_"] .title_box h3{font-size:28px; padding-bottom:5px;}
	article[class^="area_"] .title_box p{font-size:18px;}

	.area_ask .content_box .section_ask01 .title{padding-bottom:20px;}
	.area_ask .content_box .section_ask01 .content em{padding-bottom:10px;}
	.area_ask .content_box .section_ask01 .content p{-webkit-line-clamp:2; height:3em; padding-top:10px;}
	.area_ask .content_box .section_ask01 .content span{padding-top:15px;}
	.area_ask .content_box .section_ask02 .content01 li::before{font-size:16px; bottom:3px;}
	.area_ask .content_box .section_ask02 .content01 a{font-size:22px;}
}

@media all and (max-width:600px){
	.area_visual .inr .title_box{top:25%;}
	.area_visual .inr .title_box h2{font-size:50px;}
	.area_visual .inr .title_box p{font-size:18px; font-weight:300;}
	.area_visual .inr .title_box h2 br{display:block;}
	#header + .bx-wrapper .bx-controls .bx-pager{top:70px;}

	.area_form .section_form02{padding:25px;}
	.area_form .section_form02 form p{flex-direction:column;}
	.area_form .section_form02 form p label{margin-bottom:10px; width:100%;}
	.area_form .section_form02 button{margin-left:0; margin-top:20px;}
	.area_form .section_form02 form p input,
	.area_form .section_form02 form p textarea{margin-bottom:0; text-indent:5px;}
	.area_form .section_form02 button{width:100%;}
	.area_form .section_form02 form p span{width:100%;}
}


@media all and (max-width:480px){
}

@media all and (max-width:420px){
}