@charset "utf-8";

/* 
* main CSS Document
* KOWEB
*/

.main_visual {position: relative; height:100%; overflow: hidden;}
.main_visual .img {position:absolute; top:0; left:0; height:100%; width:100%; background: url(/images/main/main_visual01.jpg)no-repeat center/cover; animation: visualScale 8s ease 0s forwards;}
.main_visual .text {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); margin-left:-300px;}
.main_visual .text p:nth-child(1) {color:#fff; font-size:42px; font-family: 'HANBatangB'; animation: fadeup 1s cubic-bezier(.28,.06,.36,.86) .3s forwards; opacity: 0;}
.main_visual .text p:nth-child(2) {color:#fff; font-size:18px; margin-top:50px; font-family: 'HANDotumB'; animation: fadeup 1s cubic-bezier(.28,.06,.36,.86) .7s forwards; opacity: 0;}
br.mobile {display:none;}

@keyframes visualScale{
	0%{transform:scale(1.13) rotate(.001deg);}
	100%{transform:scale(1) rotate(.001deg);}
}

@keyframes fadeup { 
    from { opacity:0; -webkit-transform:translate3d(0,40px,0); transform:translate3d(0,40px,0); } 
    to { opacity:1; -webkit-transform:none; transform:none; } 
}

.section .tit {text-align: center;}
.section .tit h2 {font-size:48px; font-family: 'HANDotumB';}
.section .tit h2 b {color:#de2a2a;}
.section .tit p {font-size:20px; margin-top:15px;}
#section1 .line {display:flex; height:100%; justify-content: space-between; position:absolute; top:0; left:50%; transform: translateX(-50%); width:1215px; margin:0 auto; z-index:-1; opacity: 0.5;}
#section1 .line i {height:100%; width:1px; background:#d7d7d7;}
#section1 .list {margin-top:88px}
#section1 .list ul {display:flex; flex-wrap: wrap;}
#section1 .list ul li {position:relative; width:calc(100% / 4); padding:0 10px 30px; overflow: hidden;}
#section1 .list ul li .icon {position:relative; width:100%; height:153px;}
#section1 .list ul li .icon img {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
#section1 .list ul li .text {position: relative; font-size:20px; text-align: center; z-index:5;}
#section1 .list ul li .hover_bg {visibility: hidden; opacity: 0; position:absolute; top:0; left:0; transition: 0.5s; width:100%;}
#section1 .list ul li .hover_bg img {position: absolute; top:0; left:50%; transform: translateX(-50%);}
#section1 .list ul li:hover .hover_bg {visibility: visible; opacity: 1;}
#section1 .list ul li:hover .icon {visibility: hidden;}
#section1 .list ul li:hover .text {color:#fff;}

#section2:after {content:''; position: absolute; top:0; left:0; width:100%; height:50%; background:#e0e0e0; z-index:-1;}
#section2 .case_list {margin-top:68px;}
#section2 .case_list .list {position: relative; background:#fff; padding:35px 30px; margin:0 10px; border:1px solid #e7e7e7; transition: 0.5s;}
#section2 .case_list .list:hover {border:1px solid #bd8e62; box-shadow: 0px 0px 10px rgb(0 0 0 / 15%);}
#section2 .case_list .list:after {content:''; position:absolute; right:30px; top:30px; width:50px; height:50px;}
#section2 .case_list .sort01:after {background: url(/images/main/section1_icon01.png)no-repeat center; background-size:100% auto;}
#section2 .case_list .sort02:after {background: url(/images/main/section1_icon02.png)no-repeat center; background-size:100% auto;}
#section2 .case_list .sort03:after {background: url(/images/main/section1_icon03.png)no-repeat center; background-size:100% auto;}
#section2 .case_list .sort04:after {background: url(/images/main/section1_icon04.png)no-repeat center; background-size:100% auto;}
#section2 .case_list .sort05:after {background: url(/images/main/section1_icon05.png)no-repeat center; background-size:100% auto;}
#section2 .case_list .sort06:after {background: url(/images/main/section1_icon06.png)no-repeat center; background-size:100% auto;}
#section2 .case_list .sort07:after {background: url(/images/main/section1_icon07.png)no-repeat center; background-size:100% auto;}
#section2 .case_list .sort08:after {background: url(/images/main/section1_icon08.png)no-repeat center; background-size:100% auto;}
#section2 .case_list .sort {position:relative; color:#805c3f; font-size:18px; font-family: 'HANBatangB'; padding-bottom:10px;width: 81%;display: block;}
#section2 .case_list .sort:after {content:''; position:absolute; bottom:1px; left:0; width:100%; height:1px; background:#805c3f;}
#section2 .case_list p.title {margin-top:30px; font-size:19px; color:#000; white-space:normal; display:-webkit-box;-webkit-line-clamp: 2; -webkit-box-orient:vertical; overflow:hidden; text-overflow: ellipsis; height:35px;}
#section2 .case_list .condetail {margin:25px 0; font-size:16px; white-space:normal; display:-webkit-box;-webkit-line-clamp: 5; -webkit-box-orient:vertical; overflow:hidden; text-overflow: ellipsis; height:120px;}
#section2 .case_list .condetail span{color:#333 !important}
#section2 .case_list .condetail span b{font-weight: 400;}
#section2 .case_list a.btn_more {display:block; position:relative; width:197px; background:#bd8e62; padding:13px 29px; color:#fff; font-size:16px}
#section2 .case_list a.btn_more i {position:absolute; right:29px; top:50%; transform: translateY(-50%); width:20px; height:20px; background:url(/images/common/icon_arrow01.png)no-repeat center}
#section2 .slick-arrow {position: absolute; top:-130px; text-indent: -9999px; font-size:0; width:16px; height:25px; z-index:1;}
#section2 .slick-prev {left:10px; background:url(/images/common/btn_arrow_prev.png)no-repeat;}
#section2 .slick-next {right:10px; background:url(/images/common/btn_arrow_next.png)no-repeat;}
#section2 .btn_allList {position: relative; border:1px solid #484848; display:block; width:282px; margin:80px auto 0; font-size:20px; padding:17px 50px; overflow:hidden}
#section2 .btn_allList:hover {color:#fff;}
#section2 .btn_allList:after {content:''; position: absolute; top:50%; right:50px; transform: translateY(-50%); width:20px; height:20px; background:url(/images/common/icon_arrow02.png)no-repeat center;}
#section2 .btn_allList:hover:after { background:url(/images/common/icon_arrow02_hover.png)no-repeat center;}
#section2 .btn_allList:before {content:''; position:absolute; left:0; top:0; width:120%; height:100%; background:#2e2f36; z-index:-1; transition: 0.5s;-webkit-transform:translateX(-101%) skewX(-17.62deg);-webkit-transform-origin:right top;}
#section2 .btn_allList:hover:before {transform:translateX(0) skewX(-17.62deg);transform-origin:left top;}

#section3 .trf100 {transform: translateY(-100px);}
#section3 .map_wrap {display:flex; margin-top:40px; justify-content: space-between;}
#section3 .map_wrap > div {position: relative; width:calc(100% / 2 - 20px); overflow:hidden;}
#section3 .map_wrap > div:before {content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background:#dcdcdc;}
#section3 .map_wrap > div:after {content:''; position:absolute; bottom:0; left:0; width:0%; height:1px; background:#a46843; transition: 0.5s;}
#section3 .map_wrap > div:hover:after {width:100%;}
#section3 .map_wrap > div .map_box {height:305px; margin-top:15px;}
#section3 .map_wrap > div .map_box .map_api {width:100%; height:100%; border:1px solid #dcdcdc;}
.root_daum_roughmap .wrap_map {height:100% !important;}
.root_daum_roughmap .map_border {display:none;}
#section3 .map_wrap > div h3 {font-size:26px; text-transform: uppercase; font-family: 'nanumsquare';}
#section3 .map_wrap .btn_plus {position:absolute; top:10px; right:0;}
#section3 .map_wrap .info {padding:20px 5px 20px 55px; font-size:16px; background:url(/images/main/icon_map.jpg)no-repeat 20px 21px;}
#section3 .map_wrap .info span {display:inline-block; color:#a46843; font-size:14px; margin-left:20px; font-weight: 600;}
#section3 .map_wrap .info a {font-size:20px; color:#a46843; font-weight:600;}
#section3 footer {position:absolute; bottom:0; left:0; width:100%;}