@charset "utf-8";

/* 
 * main CSS Document
 * KOWEB
 */
/*Quick_menu*/
#Quick_menu{position:fixed; right:-126px; top:55%; z-index: 800;}
#Quick_menu > ul > li{position:relative; left:0; margin-bottom:2px; background: #2f3234;text-align:center; transition: left 0.3s ease-out, background-color 0.2s ease;}
#Quick_menu > ul > li:hover{left:-125px; -moz-transition: left 0.3s ease, background-color 0.2s ease; -webkit-transition: left 0.3s ease, background-color 0.2s ease; -o-transition: left 0.3s ease, background-color 0.2s ease; transition: left 0.3s ease, background-color 0.2s ease;}
#Quick_menu > ul > li a {display: block;width:190px; height:60px;}
#Quick_menu > ul > li a span{position: absolute; top:18px; left:75px; font-size:14px; color: #fff; }

#Quick_menu .icon1{background:#00c537 url(../images/main/icon_blog.png) 11px center no-repeat;	}

.area_visual{position:relative;}
.area_visual ul li img{width:100%;}
.area_visual .bx-pager.bx-default-pager {z-index:98; position:absolute; bottom:50px; left:50%; margin-left:-39px;}
.area_visual .bx-pager-item{float:left;}
.area_visual .bx-pager-item .bx-pager-link{display:block; margin:0 8px; transition:all 0.3s ease-in-out 0s; color:#999}
.area_visual .bx-pager-item .bx-pager-link.active{color:#fff; text-align: center; transition:all 0.3s ease 0s;}
.area_visual .bx-pager-item .bx-pager-link.active:after{content:""; display:block; right:0; top:15px; width:30px; height:1px; background:#ddd;}
.area_visual .list li img[data-visual="mobile"]{display:none;}

/* 메인 배너 */

.area_mainbanner{overflow:hidden; padding:80px 0; }
.area_mainbanner .banner_left{position:relative; float:left; width:49%; margin-right:1%;}
.area_mainbanner .banner_left ul li{width:100%; height:740px; background-size:cover; background-position:50%;}
.area_mainbanner .banner_left ul li h3{display:inline-block; width:300px; margin:50px; color:#fff; font-size:25px;}
.area_mainbanner .banner_left ul li h3 b{display:inline-block; margin-bottom:10px; border-bottom:1px solid #fff;}
.area_mainbanner .banner_left ul li h3 p{display:inline-block; margin-bottom:10px; border-bottom:1px solid #fff; font-weight:200;}

.area_mainbanner .banner_right{ float:left; width:50%;}
.area_mainbanner .banner_right ul li{position:relative; float:left; width: -webkit-calc((100%/2) - 7px); width: calc((100%/2) - 7px); height:360px; margin-right:14px; margin-bottom:20px; text-align:center;}
.area_mainbanner .banner_right ul li a{box-sizing:border-box; display:block; width:100%; height:100%; padding:40px 10px; background:#f4f4f4;}
.area_mainbanner .banner_right ul li:nth-child(2n){margin-right:0}
.area_mainbanner .banner_right ul li a h3{margin:30px 0 10px 0; font-size:22px; color:#111;}
.area_mainbanner .banner_right ul li a span{opacity:0; position:absolute; left:0; top:47%; display:block; width:100%; color:#fff; font-weight:bold; text-align:center; text-decoration:underline; transition:0.5s;}
.area_mainbanner .banner_right ul li a:hover span{opacity:1; transition:0.5s;}
.area_mainbanner .banner_right ul li:hover a:before{opacity:1;}
.area_mainbanner .banner_right ul li a:before {opacity:0; content: ""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(153, 0, 0, 0.90); transition: all .3s;}

.area_mainbanner .banner_left .bx-pager.bx-default-pager {z-index:98; position:absolute; bottom:30px; left:50%; margin-left:-16px;}
.area_mainbanner .banner_left .bx-pager-item{float:left; margin:0 3px;}
.area_mainbanner .banner_left .bx-pager-item .bx-pager-link{display:block; width:10px; height:10px; margin:8px auto; background:#fff;  text-indent:-9999px; transition:all 0.3s ease-in-out 0s; border-radius:50px;}
.area_mainbanner .banner_left .bx-pager-item .bx-pager-link.active{width:10px; height:10px; background:#333; transition:all 0.3s ease 0s;}

/* best product */
.area_product{clear:both; margin-bottom:100px; text-align:center;}
.area_product h2{margin-bottom:30px; text-align:center; font-size:35px; font-weight:bold; color:#111; letter-spacing:-0.5px;}
.area_product ul{overflow:hidden; margin-bottom:70px;}
.area_product ul li{position:relative; float:left; width: -webkit-calc((100%/4) - 15px); width: calc((100%/4) - 15px); margin-right:20px; text-align:center;}
.area_product ul li:last-child{margin-right:0;}
.area_product ul li .thumb{overflow:hidden; width:100%; height:250px; background-size:cover; background-position:50% 0;}
.area_product ul li .thumb img{height:100%;}
.area_product ul li .best{position:absolute; right:20px; top:20px; line-height:45px; width:45px; height:45px; border-radius:50%; background:#990000; color:#fff; font-size:12px;}
.area_product ul li .txt{margin-top:20px;}
.area_product ul li .txt h3{overflow:hidden; font-size:18px; color:#111; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; text-overflow:ellipsis;}
.area_product ul li .txt p{overflow:hidden; margin-bottom:7px; font-weight:300; font-size:16px; color:#959595; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; text-overflow:ellipsis;}
.area_product ul li .txt b{font-size:22px; color:#222;}
.area_product .btn_more{display:inline-block; padding:15px 50px; border:1px solid #222; font-size:14px; font-weight:bold; color:#222;}

/* company */
.area_company{overflow:hidden; padding:80px 0; background:url(../images/main/img_company_bg.jpg) no-repeat 50% 50%; background-size:cover; color:#fff;}
.area_company .text{float:left; width:50%; }
.area_company .text h3{line-height:1.3; padding:100px 0 20px 0; font-size:50px; font-weight:500;}
.area_company .text p{color:#dbdbdb}
.area_company .text a{display:inline-block; margin-top:50px; padding:15px 50px; border:1px solid #fff; font-size:14px; font-weight:bold; color:#fff;}
.area_company .image{position:relative; float:left; width:50%;}
.area_company .image ul li{width:100%; height:500px; background-size:cover;}


.area_company .bx-pager.bx-default-pager {z-index:98; position:absolute; bottom:30px; left:50%; margin-left:-16px;}
.area_company .bx-pager-item{float:left; margin:0 3px;}
.area_company .bx-pager-item .bx-pager-link{display:block; width:10px; height:10px; margin:8px auto; background:#fff;  text-indent:-9999px; transition:all 0.3s ease-in-out 0s; border-radius:50px;}
.area_company .bx-pager-item .bx-pager-link.active{width:10px; height:10px; background:#333; transition:all 0.3s ease 0s;}

/* 시공사례 */
.area_portfolio{padding:110px 0; text-align:center; background:#f5f5f5;}
.area_portfolio p{margin-bottom:0; font-size:20px; color:#555; font-weight:400;}
.area_portfolio h2{line-height:1.5; margin-bottom:30px; text-align:center; font-size:35px; font-weight:bold; color:#111; letter-spacing:-0.5px;}
.area_portfolio ul li{}
.area_portfolio ul li a{overflow:hidden; position:relative;}
.area_portfolio ul li a:hover .inr{opacity:1;}
.area_portfolio ul li .inr{opacity:0; position:absolute; left:0; top:0; width:100%; height:100%;background: rgba(153, 0, 0, 0.90); transition:all 0.5s}
.area_portfolio ul li .inr p{position:absolute; top:50%; left:0; line-height:1.5; width:100%; margin-top:-15px; text-align:center; font-size:16px; color:#fff;}
.area_portfolio .btn_more{display:inline-block; margin-top:50px; padding:15px 50px; border:1px solid #222; font-size:14px; font-weight:bold; color:#222;}



/* 공지사항, cs센터 */
.area_customer{overflow:hidden; width:100%; margin:80px 0;}
.area_customer h2{margin-bottom:30px; font-size:35px; font-weight:bold; color:#111; letter-spacing:-0.5px;}
.area_customer .left_notice{float:left; width:49%; margin-right:1%;}
.area_customer .left_notice span{float:left; line-height:60px; width:85px; height:60px; margin-right:20px; border:1px solid #990000; text-align:center; font-size:14px; color:#990000}
.area_customer .left_notice ul li{overflow:hidden; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #ddd;}
.area_customer .left_notice ul li a > div{float:left;  width: -webkit-calc((100%) - 115px); width: calc((100%) - 115px);}
.area_customer .left_notice div h3{overflow:hidden; font-size:16px; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; text-overflow:ellipsis;}
.area_customer .left_notice div p{overflow:hidden; width:90%; font-size:15px; color:#999; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; text-overflow:ellipsis;}

.area_customer .right_customer{float:left; width:49%; margin-left:1%;}
.area_customer .right_customer ul li{position:relative; width:100%; height:190px; margin-bottom:20px; background-size:cover;}
.area_customer .right_customer ul li a{display:block; width:100%; height:100%;}
.area_customer .right_customer ul li div{position:absolute; left:30px; bottom:30px;}
.area_customer .right_customer ul li div h3{font-size:20px;}
.area_customer .right_customer ul li:nth-child(2) a{color:#fff;}

@media all and (max-width:1200px){
	.area_mainbanner .banner_left ul li{height:660px;}
	.area_mainbanner .banner_right ul li{height:320px;}
	.area_mainbanner .banner_right ul li img{height:120px;}
 }

@media all and (max-width:1023px){
	.area_mainbanner .banner_left{width:40%;}
	.area_mainbanner .banner_left ul li h3{margin:30px; font-size:20px;}
	.area_mainbanner .banner_right{width:59%;}

}

@media all and (max-width:959px){
	.area_mainbanner{padding:50px 0}
	.area_mainbanner .banner_right ul li a h3{font-size:20px;}

	.area_product ul li{width: -webkit-calc((100%/2) - 10px); width: calc((100%/2) - 10px); margin:0 5px 30px 5px;}
	.area_product ul{margin-bottom:20px;}
	
	.area_company .text{width:100%; text-align:center;}
	.area_company .text h3{padding-top:0; font-size:25px; font-weight:bold;}
	.area_company .image{display:none;}
	
	.area_portfolio p{font-size:16px;}
	
	.area_customer h2,
	.area_portfolio h2,
	.area_product h2{font-size:22px;}
}

@media all and (max-width:767px){
	.area_visual .list li img[data-visual="web"]{display:none;}
	.area_visual .list li img[data-visual="mobile"]{display:block;}
	.area_visual .bx-pager.bx-default-pager{bottom:10px;}
	
	.area_mainbanner .banner_right ul li a:before{display:none;}
	.area_mainbanner .banner_right ul li img{height:90px;}
	.area_mainbanner .banner_right ul li a h3{font-size:16px;}
	.area_mainbanner .banner_left{width:100%; margin-right:0; margin-bottom:20px;}
	.area_mainbanner .banner_left ul li{height:250px;}
	.area_mainbanner .banner_left ul li h3{width:100%; text-align:center; padding-top:50px; margin:0;}
	.area_mainbanner .banner_left ul li h3 b{display:block; margin-bottom:5px; border-bottom:0;}
	.area_mainbanner .banner_right{width:100%;}
	.area_mainbanner .banner_right ul li{height:260px;}

	.area_mainbanner{padding:20px 0;}

	.area_product ul li .txt h3{font-size:16px;}
	.area_product ul li .txt p{font-size:15px;}
	.area_product ul li .txt b{font-size:15px;}
	.area_product ul li .thumb{height:200px;}

	.area_portfolio{padding:50px 0;}
	.area_portfolio ul li .inr{opacity:1; position:static; background:none;}
	.area_portfolio ul li .inr p{position:relative; margin-top:10px; padding-left:10px; width:auto; color:#222; font-size:14px; text-align:left; word-break: keep-all;}
	.area_portfolio ul li .inr p:before{content: ''; display:block; position:absolute; top:10px; left:0; width:3px; height:3px; background:#222; border-radius:3px;}
	
	.area_customer h2{text-align:center;}
	.area_customer .left_notice{width:100%; margin-right:0;}
	.area_customer .right_customer{width:100%; margin-left:0; margin-top:30px;}
	.area_customer{margin:50px 0;}

	.area_customer .left_notice div h3{font-size:15px;}
}

@media all and (max-width:600px){
	.area_mainbanner .banner_left ul li h3{font-size:16px;}
	.area_mainbanner .banner_left .bx-pager.bx-default-pager{bottom:15px;}

	.area_product .btn_more,
	.area_company .text a,
	.area_portfolio .btn_more{padding:10px 40px; font-size:13px;}

	.area_customer .right_customer ul li div h3{font-size:17px;}
	.area_customer .left_notice span{line-height:50px; width:70px; height:50px; font-size:13px;}

	#Quick_menu{top:auto; bottom:40px; right:-126px}
	#Quick_menu .icon1, #Quick_menu .icon2{background-size:35px;}
	#Quick_menu > ul > li a{width:180px;}

}

@media all and (max-width:500px){
	.area_mainbanner .banner_left ul li{height:220px;}
	.area_mainbanner .banner_right ul li{height:245px;}
	.area_mainbanner .banner_right ul li a h3{margin:20px 0 5px 0; font-size:15px;}
	
	.area_product ul li .txt h3{font-size:15px;}

	.area_company .text h3{font-size:20px;}
	.area_company .text p br{display:none;}
	.area_company .text p{word-break: keep-all;}

	.area_customer .left_notice div h3{font-size:14px; font-weight:500;}
	.area_customer h2, .area_portfolio h2, .area_product h2{font-size:20px;}
	
	.area_product ul li .best{line-height:35px; width:35px; height:35px; top:5px; right:5px; font-size:11px;}
	.area_product ul li .txt{text-align:left;}
}

@media all and (max-width:420px){
	.area_mainbanner .banner_right ul li{height:auto; width: -webkit-calc((100%/2) - 5px); width: calc((100%/2) - 5px); margin-right:10px; margin-bottom:10px;}
	.area_mainbanner .banner_right ul li a{padding:30px 10px;}
	.area_mainbanner .banner_right ul li a p{display:none;}
	.area_mainbanner .banner_right ul li img{height:80px;}
	
	.area_product ul li .txt{margin-top:12px;}
	.area_product ul li .thumb{height:180px;}
	.area_product ul li .thumb img{width:100%;}
	.area_product h2, .area_portfolio h2, .area_customer h2{margin-bottom:10px;}
}