@charset "utf-8";

/* 
 * main CSS Document
 * KOWEB
 */

.img_mob{display:none;}
div#wrap {
    overflow: hidden;
}
/* visual */
.area_visual{position:relative;}
.area_visual .list li,
.area_visual .bx-viewport{}
.area_visual .list li{background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.area_visual .list li img{width:100%;}


/* bx pager common set */
.bx-controls{ z-index:51; width:100%;}

/* 이전다음버튼일때 */
.area_visual .btn > div{display:block; position:absolute; opacity:0.8; overflow:hidden; width:55px; height:55px; text-indent:-9999px; transition:all 0.2s ease-out 0s;}
.area_visual .btn > div:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/main/arr_slider01.svg) no-repeat 48% 50%; background-size:22px;}
.area_visual .swiper-button-next{right:100px; transform: rotate(180deg); -webkit-transform: rotate(180deg);}
.area_visual .swiper-button-prev{left:100px}
.area_visual span.swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1; background:#fff;}
.area_visual .swiper-pagination-bullet{opacity:0.5; background:#fff}
.tit_main{margin-bottom:40px; text-align:center; font-size:40px; color:#333; font-weight: 300;}

/*시그니처*/
.img_svg01{position:absolute;left: -30%;top: -140%;}
.area_signature{position: relative; padding-bottom:135px; /*background:url(../../images/main/ob01.png) no-repeat;*/}
.area_signature .list{display:flex;justify-content: space-between;flex-wrap: wrap;}
.area_signature .list li{position:relative; width:24%;} 
.area_signature .list li img{width:100%;}
.area_signature .list li .text{box-sizing:border-box; position:absolute; bottom:0; left:0; width:70%; padding:40px 0 0 40px; background:#fff; transition:0.5s;}

.area_signature .list li .text span{display:block; color:#7f5d41; font-size:18px;}
.area_signature .list li .text p{margin: 5px 0; font-size:23px; color:#333; font-weight:400}
.area_signature .list li .text i{font-size:16px; color:#666}

.area_signature .list li a{display:block; width:100%; height:100%; transition:0.5s}
.area_signature .list li a:hover:before{opacity:0.5; transition:0.5s}
.area_signature .list li a:before{opacity:0; content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:#6e3e30; transition:0.5s}
.area_signature .btn{width:1400px; margin:0 auto;position: absolute;top: 50%;}
.area_signature .btn > div{opacity:0.3;  width:65px; height:65px; transition:0.5s}
.area_signature .btn > div:hover{opacity:1; transition:0.5s}
.area_signature .btn .swiper-button-next{right:-100px; background:#6e3e30 url(../images/main/arr_slider01.svg) no-repeat 50% 50%; background-size:11px; transform: rotate(180deg); -webkit-transform: rotate(180deg);}
.area_signature .btn .swiper-button-prev{left:-100px; background:#6e3e30 url(../images/main/arr_slider01.svg) no-repeat 50% 50%; background-size:11px;}
.area_signature .btn .swiper-button-prev:after{content:''; }
.area_signature .btn .swiper-button-next:after{content:''; }

/* 추천 */
.area_recommend{position: relative; padding:135px 0; background:#f5f1ee url(../../images/main/mark_w.svg) no-repeat top 10% right -5%; background-size:400px;}
.area_recommend .list li{ text-align:center;}
.area_recommend .list li a > span{display:block; margin-top:20px; color:#7f5d41; font-size:18px;}
.area_recommend .list li a > p{margin: 5px 0; font-size:23px; color:#333; font-weight:400}
.area_recommend .list li a{position:relative; display:block; width:100%; height:100%; transition:0.5s}
.area_recommend .list li a .img{position:relative; display:block; width:100%; height:100%;}
.area_recommend .list li a .img img{width:100%;}
.area_recommend .list li a .img:before{opacity:0; content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:#6e3e30; transition:0.5s}
.area_recommend .list li a .text{opacity:0; position:absolute; bottom:30px; width:100%; transition:0.5s}
.area_recommend .list li a .text span{ font-size:23px; color:#fff; font-weight:400}
.area_recommend .list li a .text p{margin-top:7px; font-size:16px; color:#fff;}
.area_recommend .list li a:hover .img:before{opacity:0.7; transition:0.5s}
.area_recommend .list li a:hover .text{opacity:1; transition:0.5s}

.area_recommend .btn{width:1400px; margin:0 auto;position: absolute;top: 50%;}
.area_recommend .btn > div{opacity:0.3;  width:65px; height:65px; transition:0.5s}
.area_recommend .btn > div:hover{opacity:1; transition:0.5s}
.area_recommend .btn .swiper-button-next{right:-100px; background:#6e3e30 url(../images/main/arr_slider01.svg) no-repeat 50% 50%; background-size:11px; transform: rotate(180deg); -webkit-transform: rotate(180deg);}
.area_recommend .btn .swiper-button-prev{left:-100px; background:#6e3e30 url(../images/main/arr_slider01.svg) no-repeat 50% 50%; background-size:11px;}
.area_recommend .btn .swiper-button-prev:after{content:''; }
.area_recommend .btn .swiper-button-next:after{content:''; }

/* 기술 */
.area_tech {margin:135px 0 235px 0;}
.area_tech .wrapper{position:relative;}
.area_tech .img{position:relative; text-align:center;}
.area_tech .img02{z-index:1; position:absolute; top:120px; right:0;}
.area_tech .img03{z-index:1; position:absolute; bottom:-110px; left:0;}

.area_tech .text1{position:absolute; top:180px;}
.area_tech .text1 h2{line-height: 1.2; font-size:70px; color:#111; font-weight:300; letter-spacing:2px;}
.area_tech .text1 p{margin-top:35px; font-size:21px; font-weight:500; color:#333;}

.area_tech .text2{position:absolute; right:80px; bottom:150px;}
.area_tech .text2 p{margin-bottom:30px;}
.area_tech .text2 a{border-bottom:1px solid #333;}

/* 이벤트*/
.area_special{overflow:hidden; margin:135px 0;}
.area_special ul li{float:left; width:calc(33.33% - 50px); margin-right:65px;}
.area_special ul li:last-child{margin-right:0}
.area_special ul li .img{display:block;overflow:hidden;position:relative;width:100%;padding-top: 49%;background: #f5f5f5 url(../images/board/no_image.gif) no-repeat 50% 50%;text-align:center;transition:opacity 0.5s ease-out 0s;}
.area_special ul li .img img{position:absolute; top:0; left:0; width:100%; transition:all 0.5s ease-out 0s;}
.area_special ul li a p{overflow:hidden; margin-top:20px; font-weight:500; text-align:center; font-size:20px; color:#333; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} 
.area_special ul li a:hover p{color:#7f5d41; transition:0.5s}

/* cscenter */
.wrap_controllers.hide{display:none;}
.area_cscenter{position:relative;}
.area_cscenter .text{position:absolute; top: 50%; z-index: 50; padding:60px 40px; background:rgba(110 62 48 / 95%); transform:translateY(-50%); }
.area_cscenter .text .box *{color:#fff; font-family:'Spoqa Han Sans Neo' }
.area_cscenter .text .box h3{margin-bottom:15px; font-size:25px;}
.area_cscenter .text .box a{font-size:40px; font-weight:bold;}
.area_cscenter .text .box:nth-of-type(2){padding-top:25px; margin-top:25px; border-top:1px dashed #a78f88;}
.area_cscenter .text .box i{opacity:0.8}
.area_cscenter .text .box ul li{margin-bottom:10px;}
.area_cscenter .text .box ul li b{display:inline-block; width:80px;}

@media screen and (min-height:940px){
	
}

@media screen and (max-width:1919px){
	.area_visual .list li img{width:100%;}
}

@media screen and (max-width:1679px){
	.area_visual .swiper-button-prev{left:20px;}
	.area_visual .swiper-button-next{right:20px;}
}

@media screen and (max-width:1420px){
	.area_recommend .btn,
	.area_signature .btn{width:96%;}
	.area_recommend .btn .swiper-button-next,
	.area_signature .btn .swiper-button-next{right:0}
	
	.area_signature .btn .swiper-button-prev,
	.area_recommend .btn .swiper-button-prev{left:0}
}

@media screen and (max-width:1365px){
	.area_tech .text2{right:0}
}

@media screen and (max-width:1279px){
	.area_tech{margin:100px 0}
	.area_tech .wrapper{display:flex; justify-content: space-between; align-items: center;}
	.area_tech .img02,
	.area_tech .img03{display:none;}	
	.area_tech .img{width:48%;}
	.area_tech .img img{width:100%;}
	.area_tech .text{position:static; width:48%}
	.area_tech .text > div{position:static;}
	.area_tech .text1 p{margin-bottom:15px;}
	.area_tech .text1 h2{font-size:40px;}

	.area_special{margin:80px 0 100px 0}
	
	.area_signature .list li .text{width:90%;}
	.area_signature .list li .text{padding-left:20px;}
}

@media screen and (max-width:1024px){
	.area_signature .list li{width:49%; margin-bottom:2%}
}



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


@media all and (max-width:960px){
	.img_web{display:none;}
	.img_mob{display:block;}
	.area_visual .btn > div{display:none;}
	
	.area_recommend .btn, .area_signature .btn{display:none;}
	.area_signature{padding:0 0 90px 0}
	.area_signature .swiper-pagination{position:relative; width:100%; height:4px; background:#efefef; border-radius:10px;}
	.area_signature  .main_pagination{position:relative; width:100%; margin-top:20px;}
	.area_signature .swiper-pagination-progressbar-fill{background: #7f5d41;}
	
	.area_recommend{padding:90px 0; background-size:250px;}
	.area_recommend .swiper-pagination{position:relative; width:100%; height:4px; background:#efefef; border-radius:10px;}
	.area_recommend  .main_pagination{position:relative; width:100%; margin-top:20px;}
	.area_recommend .swiper-pagination-progressbar-fill{background: #7f5d41;}

	.area_special ul li{width: calc(33.33% - 20px); margin-right: 30px;}


}


@media screen and (max-width:767px){
	.area_visual{margin-top:60px}

	.area_signature{padding:0 0 50px 0; background-size:180px;}
	.tit_main{margin-bottom:20px; font-size:18px; font-weight:bold; }
	.area_signature .list li .text{position:static; width:100%; padding:0; margin-top:20px;}
	.area_signature .list li a:before{display:none;}
	.area_signature .list li .text span{font-size:13px;}
	.area_signature .list li .text p{font-size:16px;}
	.area_signature .list li .text i{font-size:14px;}
	.area_signature .list li{margin-bottom:0}
	.area_signature .list li:nth-child(2) ~ li{margin-top:40px;}
	
	.area_recommend{padding:50px 0; background-size:150px;}
	.area_recommend .list li a > p{font-size:16px;}
	.area_recommend .list li a > span{font-size:13px;}
	.area_recommend .list li a .text{display:none;}
	
	.area_tech{margin:50px 0}
	.area_tech .text1 h2{font-size:18px; font-weight:bold;}
	.area_tech .text1 p{margin-top:10px; font-size:16px;}
	.area_tech .text2 p{margin-bottom:20px;}

	.area_special{margin:50px 0 50px 0;}
	.area_special ul li a p{font-size:15px;line-height: 1.4;margin-top: 14px;text-align: left;word-break: break-all;}

	.area_special ul li {width: calc(50% - 7px); margin-right: 14px;}
	.area_special ul li:nth-child(2){margin-right:0}
	.area_special ul li:nth-child(3){display:none;}

	.area_cscenter .wrapper{width:100%;}
	.area_cscenter .text{position:static; padding: 50px 10px; text-align:center; transform: translateY(0);}
	.area_cscenter .text .box h3{font-size:18px;}
	.area_cscenter .text .box a{font-size:25px;}
	.area_cscenter .text .box p{margin-bottom:7px;}

	.area_cscenter .root_daum_roughmap{height:400px;}
}

@media screen and (max-width:480px){
	.area_tech .wrapper{flex-direction: column;}
	.area_tech .img{width:60%;}
	.area_tech .text{width:90%; margin-top:30px; text-align:center}
}

@media screen and (max-width:375px){
	.area_signature{padding:0 0 30px 0}
}