@charset "utf-8";

/* 
 * main CSS Document
 * KOWEB
 */


/* 공통 */
#container {
    padding-left: 100px;
}
.main h2{margin-bottom:55px; font-size:36px; color:#222; text-align:center; letter-spacing:-0.5px; text-transform:capitalize;}

/* 메인비주얼 */
.area_visual{padding-top:110px;}
.area_visual .list li,
.area_visual .bx-viewport{height:-webkit-calc(100vh - 110px * 1); height:calc(100vh - 110px * 1);}
.area_visual .list li{background-size:cover; background-position:50% 0; background-repeat:no-repeat;}
.area_visual .txt{position:absolute;top:53%;z-index:99;color:#fff;text-align:center;transform:translateY(-50%);width: -webkit-calc(100% - 80px);width: calc(100% - 80px);}
.area_visual .txt h2{line-height: 1.3;font-weight:100;font-size: 43px;}
.area_visual .txt h2 b{font-weight:400;}
.area_visual .txt i{position:absolute;opacity:0.1;top:-129px;left:0;width:100%;font-weight:bold;font-size:171px;text-align:center;letter-spacing:-11px;text-transform:uppercase;}
.area_visual .bx-controls{position:absolute; bottom:0; left:100px; z-index:999;}
.area_visual .bx-controls a{display:inline-block; position:relative; width:85px; height:85px; background:#00204c; text-indent:-9999px;}
.area_visual .bx-controls a:last-child{background:#fff; border-top-right-radius:6px;}
.area_visual .bx-controls a:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/main/arr_visual02.svg) no-repeat 50% 50%; background-size:17px;}
.area_visual .bx-controls a:last-child:after{background:url(../images/main/arr_visual01.svg) no-repeat 50% 50%; background-size:17px; transform:rotate(180deg); -webkit-transform:rotate(180deg);}
.area_visual .area_notice{position:absolute; right:0; bottom:0; z-index:99; width:50%; background:#fff; border-top-left-radius:7px;}
.area_visual .area_notice > div{overflow:hidden; padding:35px 45px;}
.area_visual .area_notice .bx-controls a{opacity:0.4; width:7px; height:12px; background:none; transition:all 0.3s ease-out 0s;}
.area_visual .area_notice .bx-controls a:after{background:url(../images/main/arr_notice.svg) no-repeat 50% 50%;}
.area_visual .area_notice > div > *{float:left;}
.area_visual .area_notice > div > em{display:inline-block; position:relative; top:3px; margin-right:30px; font-weight:bold; font-size:17px;}
.area_visual .area_notice > div > div{width:-webkit-calc(100% - 94px); width:calc(100% - 94px);}
.area_visual .area_notice .bx-controls{top:43%; right:50px; left:auto;}
.area_visual .area_notice > div > div ul li{font-size:15px;}
.area_visual .area_notice > div > div ul li i{float:right; margin-right:74px; font-size:14px; color:#d1d1d1;}
.area_visual .area_notice .bx-controls a:first-child{margin-right:30px;}
.area_visual .area_notice .bx-controls a:hover{opacity:1;}

/* 강점 */
.area_advantage{padding:140px 0;}
.area_advantage ul{overflow:hidden; padding-top:10px;}
.area_advantage ul li{float:left; width:20%; text-align:center;}
.area_advantage ul li img{display:block; height:53px; margin:0 auto;}
.area_advantage ul li em{display:block; margin-top:35px; font-weight:500; color:#222;}
.area_advantage ul li p{margin-top:8px;}

/* 시공사례 */
.area_construction{text-align:center;}
.area_construction ul + a{margin-top:70px;}
.area_construction ul{overflow:hidden;}
.area_construction ul li{position:relative; float:left; width:-webkit-calc((100%/3) - 54px); width:calc((100%/3) - 54px); margin:0 80px 80px 0; text-align:center;}
.area_construction ul li:nth-child(3n){margin-right:0;}
.area_construction ul li a > i{display:block;width: 100%;height:411px;background-position:50% 50%;background-size: cover;}
.area_construction ul li a > div{position:absolute; bottom:0; left:0; width:80%; padding:24px 0 24px 0px; background-image:url(../images/main/bg_main.jpg);}
.area_construction ul li a > div *{display:block; text-align:left;}
.area_construction ul li a > div > i{margin-bottom:2px; font-size:13px; color:#f67536;}
.area_construction ul li a > div > em{font-weight:600; color:#222;}
.area_construction ul li:nth-child(3)~*{margin-bottom:0;}

/* 동영상 */
.area_video{position:relative; margin-top:140px; text-align:center;}
.area_video video{width:100%;}
.area_video #videot{position:absolute; top:0px; left:0px; width:100%; height:auto !important;}
.area_video .video{position:relative; overflow:hidden; height:890px;}
.area_video .video:after{content:""; position:absolute; opacity:0.2; top:0; left:0; width:100%; height:100%; background:#000;}
.area_video .inr{position:absolute; top:0; left:0; width:100%;}
.area_video .inr h3{position:relative; padding-top:309px; font-weight:200; font-size:45px; color:#fff;}
.area_video .inr ul{display:inline-block; overflow:hidden; margin-top:31px;}
.area_video .inr ul li{float:left; width:335px; height:105px; line-height:105px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.3); color:#fff; text-align:center;}
.area_video .inr ul li:first-child{margin-right:20px;}
.area_video .inr h3:before{content:""; position:absolute; top:0; left:50%; width:1px; height:261px; background:#fff;}
.area_video .inr h3:after{content:""; position:absolute; top:248px; left:50%; width:21px; height:1px; margin-left:-10px; background:#fff;}
.area_video .inr > div{width:1400px; margin:210px auto 0; padding:80px 0; background:#fff; box-shadow:33px 36px 34px 0px rgba(0, 0, 0, 0.02); border-bottom-left-radius:20px; border-bottom-right-radius:20px;}
.area_video .inr > div a{margin-top:74px;}
.area_video .inr > div > p i{color:#f67536;}

/* 온라인문의 */
.area_contact{padding: 254px 0 140px;text-align:center;}
.area_contact ul{overflow:hidden;}
.area_contact ul li{position:relative; float:left; width:-webkit-calc((100%/3) - 24px); width:calc((100%/3) - 24px); margin-right:36px; background:#fff; text-align:left;}
.area_contact ul li:last-child{margin-right:0;}
.area_contact ul li i{display:block; margin-bottom:39px; font-size:14px; color:#CCC;}
.area_contact ul li a{display:block; padding:40px 30px; border:4px solid transparent; transition:all 2s cubic-bezier(0.165, 0.84, 0.44, 1);}
.area_contact ul li em{display:block; font-weight:500;}
.area_contact ul li p{margin-top:17px;color:#666;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow: ellipsis;overflow: hidden;max-height: 50px;}
.area_contact ul li a{min-height:160px;}
.area_contact ul li span{position:absolute; top:0; right:0; width:27px; height:27px; line-height:27px; background:#f67536; font-size:13px; color:#fff; text-align:center; border-bottom-left-radius:5px;}
.area_contact ul + a{margin-top:70px;}
.area_contact ul li:hover a{border:4px solid #f67536;}
.area_contact ul li:hover{box-shadow:30px 33px 28px 0px rgba(0, 0, 0, 0.08);}
.no_data{margin-bottom: 40px;padding:50px 0;background:#fff;}

/* 메인퀵 */
.area_quicken ul li{position:relative;float:left;top:0;width: -webkit-calc((100%/4) - 10px);width: calc((100%/4) - 10px);margin-right:10px;background:#fff;border:1px solid transparent;transition:all 0.3s ease-out 0s;}
.area_quicken ul{overflow:hidden; padding:10px 0;}
.area_quicken{margin-top:90px;}
.area_quicken ul li:last-child{margin-right:0;}
.area_quicken ul li a{display:block; padding:25px 0;}
.area_quicken ul li img{display:block; height:44px; margin:0 auto;}
.area_quicken ul li em{display:block; margin-top:10px; font-weight:500; color:#222; text-align:center;}
.area_quicken ul li:hover{top:-10px; border:1px solid #15254c;}

/* 파트너사 */
.area_partners{padding-bottom:100px;}
.area_partners .list img{width:100%;}

@media screen and (max-width:1580px){
	#container{padding-left:80px;}

	.area_visual{padding:90px 0 0 80px;}
	.area_visual .bx-controls{left:80px;}
	.area_visual .list li,
	.area_visual .bx-viewport{height:-webkit-calc(100vh - 90px * 1); height:calc(100vh - 90px * 1);}
	.area_visual .area_notice{width:60%;}
	.area_visual .txt h2{line-height:1.2; font-size:46px;}
	.area_visual .txt i{top:-79px; font-size:121px;}
	
	.area_video{margin-top:100px;}
	.area_video .inr > div{width:auto; margin:77px 50px 0; padding:60px 0;}
	.area_video .video{height:700px;}
	.area_video .inr h3{padding-top:230px; font-size:35px;}
	.area_video .inr h3:before{height:180px;}
	.area_video .inr h3:after{top:167px;}
	.area_video .inr ul{margin-top:22px;}
	.area_video .inr ul li{width:285px; height:85px; line-height:85px;}
	.area_video .inr ul li:first-child{margin-right:10px;}
}

@media screen and (max-width:1380px){
	.main h2{margin-bottom:31px;}

	.area_advantage{padding:100px 0;}
	.area_advantage ul li p br{display:none;}
	.area_advantage ul li p{line-height:1.5; margin-top:8px; font-size:14px;}
	.area_advantage ul li em{margin-top:28px;}
	
	.area_construction ul li a > i{width:100%; height:340px; background-size:cover;}
	.area_construction ul li{width:-webkit-calc((100%/3) - 14px); width:calc((100%/3) - 14px); margin:0 20px 20px 0; text-align:center;}
	.area_construction ul li a > div{padding:20px 0 20px 20px;}
}

@media screen and (max-width:1280px){
	.area_visual .bx-controls a{width:65px; height:65px;}
	.area_visual .bx-controls a:after,
	.area_visual .bx-controls a:last-child:after{background-size:14px;}
	.area_visual .area_notice > div{padding:25px 35px;}
	.area_visual .area_notice > div > div ul li{font-size:14px;}
	.area_visual .area_notice .bx-controls{display:none;}
	.area_visual .area_notice > div > div ul li i{position:absolute; right:0; margin-right:0;}
	.area_visual .area_notice .bx-viewport{height:23px !important;}
	.area_visual .area_notice > div > em{top:2px; margin-right:25px; font-size:16px;}
	.area_visual .area_notice > div > div{width:-webkit-calc(100% - 85px); width:calc(100% - 85px);}
	.area_visual .txt{width:-webkit-calc(100% - 80px); width:calc(100% - 80px);}

	.area_video{margin-top:80px;}
	.area_video .video{height:590px;}
	.area_video .inr h3{padding-top:200px; font-size:32px;}
	.area_video .inr > div a{margin-top:54px;}
	.area_video .inr > div{margin:47px 50px 0; padding:50px 0;}
	
	.area_contact{padding:184px 0 70px; text-align:center;}
	.area_contact ul li{width:-webkit-calc((100%/3) - 11px); width:calc((100%/3) - 11px); margin-right:16px;}
	.area_contact ul li a{padding:20px;}
	.area_contact ul li em{overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
}

@media screen and (max-width:1023px){
	.area_visual{padding-top:70px;}
	.area_visual .list li,
	.area_visual .bx-viewport{height:-webkit-calc(100vh - 70px * 1); height:calc(100vh - 70px * 1);}
	.area_visual .area_notice{display:none;}

	.area_advantage{padding:70px 0;}
	.area_advantage ul li img{height:44px;}
	.area_advantage ul li em{margin-top:22px;}

	.area_construction ul li a > div{padding:20px 0 20px 20px;}
	.area_construction ul li{width:-webkit-calc((100%/3) - 7px); width:calc((100%/3) - 7px); margin:0 10px 10px 0;}
	.area_construction ul li a > i{height:260px;}
	.area_construction ul + a{margin-top:60px;}

	.area_video .inr ul{display:none;}
	.area_video .inr > div{margin:47px 50px 0; padding:45px 0;}
	.area_video .video{height:420px;}
}

@media screen and (max-width:767px){
	#container{padding-left:0;}
	
	.main h2{margin-bottom:13px; font-size:27px;}
	
	.area_visual{padding:60px 0 0 0;}
	.area_visual .list li,
	.area_visual .bx-viewport{height:-webkit-calc(100vh - 60px * 1); height:calc(100vh - 60px * 1);}
	.area_visual .txt{width:100%;}
	.area_visual .bx-controls{left:0;}
	.area_visual .txt h2{font-size:26px;}
	.area_visual .txt i{top:-30px; font-size:43px; letter-spacing:-3px;}
	.area_visual .bx-controls a{width:55px; height:55px;}
	.area_visual .bx-controls a:after,
	.area_visual .bx-controls a:last-child:after{background-size:12px;}
	
	.area_advantage{padding:50px 0;}
	.area_advantage ul li{width:50%; margin-bottom:22px;}
	.area_advantage ul li em{margin-top:15px; font-weight:700;}
	.area_advantage ul li p{margin-top:3px; font-size:13px;}
	.area_advantage ul li:last-child{width:80%; padding:0 10%;}
	
	.area_construction ul li{width:-webkit-calc((100%/2) - 5px); width:calc((100%/2) - 5px); margin:0 10px 13px 0;}
	.area_construction ul li:nth-child(3n){margin-right:10px;}
	.area_construction ul li:nth-child(2n){margin-right:0;}
	.area_construction ul li a > div{position:relative; width:auto; margin-top:10px; padding:0; background:none;}
	.area_construction ul li a > i{height:190px;}
	.area_construction ul li a > div > i{line-height:1; margin-bottom:0px; font-size:12px;}
	.area_construction ul + a{margin-top:40px;}
	
	.area_video{margin-top:40px;}
	.area_video .inr h3{padding-top:80px; font-size:21px;}
	.area_video .inr > div{margin:47px 15px 0; padding:35px 20px;}
	.area_video .inr > div p br{display:none;}
	.area_video .inr > div a{margin-top:39px;}
	.area_video .inr h3:before,
	.area_video .inr h3:after{display:none;}
	.area_video .video{height:290px;}
	
	.area_contact{padding:127px 0 70px;}
	.area_contact ul li{width:-webkit-calc((100%/2) - 6px); width:calc((100%/2) - 6px); margin-right:12px;}
	.area_contact ul li:last-child{display:none;}
	.area_contact ul li:nth-child(2){margin-right:0;}
	.area_contact ul li em{font-weight:600;}
	.area_contact ul li a{padding:10px;}
	.area_contact ul li:hover a{border:4px solid transparent;}
	.area_contact ul li p{line-height:1.5; margin-top:3px;}
	.area_contact ul + a{margin-top:37px;}
	.area_contact ul li a{height:122px; min-height:122px;}
	.area_contact ul li i{margin-bottom:29px; font-size:13px;}

	.area_quicken{margin-top:46px;}
	.area_quicken ul li img{height:32px;}
	.area_quicken ul li{width:-webkit-calc((100%/2) - 6px); width:calc((100%/2) - 6px); margin-right:7px;}
	.area_quicken ul li:nth-child(2){margin-right:0;}
	.area_quicken ul li:nth-child(2)~*{margin-top:7px;}

	.area_partners{padding-bottom:50px;}
}