#wrap.sub{margin-top:100px}
/* ¼­ºêŸÀÌƲ */
.sub_title{height:300px;background:url('../img/upload/img/brand.jpg') no-repeat center;background-size:cover;color:#fff;position:relative;}
/* ¼­ºêŸÀÌƲ ¹è°æ */
.sub_title.brand{background-image:url('../img/upload/img/brand.jpg')}
.sub_title.business{background-image:url('../img/upload/img/business.jpg')}


.sub_title.product{background-image:url('../img/upload/img/product.jpg')}


.sub_title.product.sub_product00{background-image:url('../img/upload/img/product1.jpg')}
.sub_title.product.sub_product01{background-image:url('../img/upload/img/product1.jpg')}
.sub_title.product.sub_product02{background-image:url('../img/upload/img/product2.jpg')}
.sub_title.product.sub_product03{background-image:url('../img/upload/img/product3.jpg')}
.sub_title.product.sub_product04{background-image:url('../img/upload/img/product4.jpg')}
.sub_title.product.sub_product05{background-image:url('../img/upload/img/product5.jpg')}
.sub_title.product.sub_product06{background-image:url('../img/upload/img/product6.jpg')}




.sub_title.gallery{background-image:url('../img/upload/img/gal.jpg')}
.sub_title.community{background-image:url('../img/upload/img/com.jpg')}
.sub_title>.inner{position:absolute;top:50%;left:0;transform:translate(0,-50%);width:100%;}
.sub_title h2{font-size:30px;letter-spacing:.2em;text-align:center;font-family: 'Noto Sans KR', sans-serif;font-weight:600;}
.sub_title .category{position:absolute;width:100%;bottom:0;left:0}
.sub_title .category ul{width:100%;margin:auto;max-width:1400px;overflow:hidden}
.sub_title .category ul li{float:left;text-align:center;background-color:rgba(255,255,255,.8)}
.sub_title .category ul li.sel{background-color:#fff}
.sub_title .category ul li a{color:#666;font-size:15px;line-height:60px;display:block;width:100%;letter-spacing:.1em;}
.sub_title .category ul li.sel a{color:#222;}
/* ¼­ºêŸÀÌƲ ±æÀÌ */
.sub_title .category.one ul li{width:100%}
.sub_title .category.two ul li{width:50%}
.sub_title .category.three ul li{width:33.33%}
.sub_title .category.four ul li{width:25%}
.sub_title .category.five ul li{width:20%}


/* ¼­ºêh2 */
.sub_h2{margin:auto;padding:80px 0;overflow:hidden;text-align:center;border-bottom:1px solid #ddd;width:90%;max-width:1400px;margin:auto;}
.sub_h2 h2{font-size:25px;color:#222;letter-spacing:.1em;margin-bottom:20px;font-family: 'Noto Sans KR', sans-serif;}
.sub_h2 p{font-size:var(--fontM);color:#666}



/* ȸ»ç¼Ò°³ */
#container.brand1>.mid{font-family: 'Noto Sans KR', sans-serif;color:#222}
#container.brand1>.mid>div{width:50%;float:left;}
#container.brand1>.mid>div:first-child img{width:100%;}
#container.brand1>.mid>div:last-child{box-sizing:border-box;padding:30px 5%;}
#container.brand1>.mid>div:last-child h3{font-size:24px;margin-bottom:30px;}
#container.brand1>.mid>div:last-child p{font-size:var(--fontM);line-height:25px}
/* ¿¬Çõ */
#container.brand2>.mid{position:relative}
#container.brand2>.mid>div{width:100%;overflow:hidden;}
#container.brand2>.mid>div>div{width:50%;box-sizing:border-box;position:relative;padding:0 0 70px 0}
#container.brand2>.mid>.left>.inner{float:left;text-align:right;padding-right:30px;}
#container.brand2>.mid>.right>.inner{float:right;padding-left:30px;}
#container.brand2>.mid>div>div h3{font-size:23px;margin-bottom:15px}
#container.brand2>.mid>div>div li{font-size:var(--fontS);line-height:30px;overflow:hidden;color:#666}
#container.brand2>.mid>div.left>div li span{float:right;padding-right:40px}
#container.brand2>.mid>div.right>div li span{float:left;padding-left:40px}
#container.brand2>.mid>div.right>div li span:first-child,
#container.brand2>.mid>div.left>div li span:first-child{font-size:16px;color:#222;padding:0;}

/* ¿¬Çõ °¡¿îµ¥ ¼± */
#container.brand2>.mid::before{content:"";display:block;position:absolute;height:90%;width:1px;background-color:#ccc;top:12px;left:50%;}
#container.brand2>.mid>.left>.inner::after,
#container.brand2>.mid>.right>.inner::after{content:"";display:block;position:absolute;width:11px;height:11px;background-color:#666;top:8px;left:-5px;border-radius:100px;}
#container.brand2>.mid>.left>.inner::after{left:auto;right:-6px}
/* ¿À½Ã´Â ±æ */
#container.brand3{}
#container.brand3 .map{padding:30px 30px 0;background-color:#f5f5f5;height:700px}
#container.brand3 .map_icon{background-color:#f5f5f5}
#container.brand3 .map_icon ul{max-width:1400px;margin:auto;overflow:hidden;padding:130px 0;}
#container.brand3 .map_icon li{width:33.33%;float:left;text-align:center;}
#container.brand3 .map_icon li div{text-indent:-99999px;overflow:hidden;display:block;width:50px;height:50px;margin:auto;background:url('../img/upload/img/map.png') no-repeat center;background-size:cover;margin-bottom:30px}
#container.brand3 .map_icon li div.add{background-image:url('../img/upload/img/map.png');background-size:50px auto}
#container.brand3 .map_icon li div.call{background-image:url('../img/upload/img/phone.png');background-size:45px auto}
#container.brand3 .map_icon li div.mail{background-image:url('../img/upload/img/sms.png');background-size:42px auto}
#container.brand3 .map_icon li p,
#container.brand3 .map_icon li a{font-size:var(--fontM);color:#222;line-height:25px;transition:color ease .3s}
#container.brand3 .map_icon li a:hover{color:#888}
/* »ç¾÷¼Ò°³1 */
#container.business1 .mid>div{overflow:hidden}
#container.business1 .mid>div>div{width:50%;position:relative;}
#container.business1 .mid>.first>div{float:left}
#container.business1 .mid>.second>div{float:right;text-align:right}
#container.business1 .mid>div>div img{width:100%}
#container.business1 .mid>div>div:last-child{}
#container.business1 .mid>div>div .inner{position:absolute;width:100%;left:0;top:50%;transform:translate(0,-50%);padding:0 50px;box-sizing:border-box}
#container.business1 .mid>div h3{font-size:25px;color:#222;font-family: 'Noto Sans KR', sans-serif;margin-bottom:30px;margin-top:-10px}
#container.business1 .mid>div p{font-size:14px;line-height:25px;}
/* »ç¾÷¼Ò°³2 */

.abouts_container{width:90%;max-width:1400px;margin:00px auto 0;overflow:hidden;}
.abouts_container:after{content:'';display:block;clear:both;}
.abouts_container > .category{float:left;width:15%;text-align:center;}
.abouts_container > .category ul li{background-color:#fff;text-align:center;border-bottom:0.5px solid #ddd; border-right:0.5px solid #ddd;border-left:0.5px solid #ddd;}
.abouts_container > .category ul li:hover{background-color:#cbcbcb;border-bottom:0.5px solid #cbcbcb;}
.abouts_container > .category ul li.sel{background-color:#cbcbcb;border-bottom:0.5px solid #cbcbcb;}
.abouts_container > .category ul li a {color:#666;font-size:16px;line-height:60px;display:block;width:100%;letter-spacing:.1em;font-weight:400;}
.abouts_container > .category ul li:hover a{color:#fff;}
.abouts_container > .category ul li.sel a{color:#fff;}
.abouts_container > .mid_seper{float:left;width:85%;}
.abouts_container > .category > p{width:100%;border-right:0.5px solid #ddd; border-left:0.5px solid #ddd; border-top:00px solid #ddd;border-bottom:0.5px solid #666;color:#fff;font-size:15px;line-height:60px;display:block;width:100%;letter-spacing:.1em;box-sizing:border-box;background:#666; }



/* ¸ÞÀν½¶óÀ̵å */
.business2 .mid{}
.business2 .slide.swiper-container2 {
width: 100%;
height:500px;
margin-left: auto;
margin-right: auto;
position:relative;
}
.business2 .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.slide.swiper-container2 .swiper-wrapper .swiper-slide{background-image:url('../img/upload/img/bus3.jpg');background-position:center;background-size:cover;}
.slide.swiper-container2 .swiper-wrapper .swiper-slide.second{background-image:url('../img/upload/img/bus4.jpg')}
.slide.swiper-container2 .swiper-wrapper .swiper-slide.third{background-image:url('../img/upload/img/bus5.jpg')}
/* remote */
#wrap .business2  .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:7%}
#wrap .business2  .swiper-pagination-bullet{width:33px;height:6px;background-color:#666;opacity:1;border-radius:0;margin:0 8px}
#wrap .business2  .swiper-pagination-bullet-active{background-color:#fff}
#container.business2 .mid.info{margin-top:100px}
#container.business2 .mid.info ul{overflow:hidden}
#container.business2 .mid.info li{float:left;width:50%;position:relative;padding-left:120px;box-sizing:border-box;margin-bottom:40px;cursor:pointer}
#container.business2 .mid.info li::before{content:"01";display:block;position:absolute;width:90;height:120px;background-color:#ddd;text-align:center;line-height:120px;color:#222;font-size:20px;font-weight:bold;left:0;}
#container.business2 .mid.info li:nth-child(2)::before{content:"02"}
#container.business2 .mid.info li:nth-child(3)::before{content:"03"}
#container.business2 .mid.info li:nth-child(4)::before{content:"04"}
#container.business2 .mid.info h4{font-size:15px;margin-bottom:15px;font-family: 'Noto Sans KR', sans-serif;font-weight:500}
#container.business2 .mid.info p{font-size:12px;line-height:20px;color:#666}
#container.business2 .mid.info li:hover::before{background-color:#777;color:#fff;transition:background ease .5s,color ease .5s}
/* »ç¾÷¼Ò°³3 */
#container.business3 .mid{}
#container.business3 .mid>div,
#container.business3 .mid>ul{float:left;width:50%;height:100%}
#container.business3 .mid>.img_box{position:relative;}
#container.business3 .mid>.img_box img{width:100%;position:absolute;top:0;left:0;opacity:0;transition:opacity ease .5s}
#container.business3 .mid>.img_box img.img_on{opacity:1}
#container.business3 .mid>ul li{background-color:#f5f5f5;border:1px solid #fff;width:50%;height:50%;float:left;box-sizing:border-box;position:relative;cursor:pointer}
#container.business3 .mid>ul li:nth-child(2){border-left:0}
#container.business3 .mid>ul li:nth-child(3){border-top:0}
#container.business3 .mid>ul li:nth-child(4){border-left:0;border-top:0;}
#container.business3 .mid>ul li>div{position:absolute;width:100%;height:100%;box-sizing:border-box;padding:25px;top:0;left:0;text-align:center;}
#container.business3 .mid>ul li div:first-child{opacity:1;transition:opacity ease .5s}
#container.business3 .mid>ul li:hover div:first-child{opacity:0}
#container.business3 .mid>ul li div:first-child .inner{position:absolute;width:100%;text-align:center;left:0;top:50%;transform:translate(0,-50%)}
#container.business3 .mid>ul li div:first-child h3{font-size:15px;font-weight:300;color:#222}
#container.business3 .mid>ul li div:first-child p{letter-spacing:1px;margin-top:20px;position:relative;display:inline-block;color:#222;font-size:10px;}
#container.business3 .mid>ul li div:nth-child(2){background-color:#fff;opacity:0;transition:opacity ease .5s;border:20px solid #f5f5f5}
#container.business3 .mid>ul li:hover div:nth-child(2){opacity:1}
#container.business3 .mid>ul li div:nth-child(2) p{font-size:12px;width:100%;line-height:22px;color:#666;position:absolute;left:0;top:50%;transform:translate(0,-50%);padding:0 30px;box-sizing:border-box;}







/* Á¦Ç°¼Ò°³ */
.mid.prd_mid{margin-top:0;}
.mid.prd_mid:after{content:'';display:block;clear:both;}
.mid.prd_mid .prd_cate{float:left;width:15%;text-align:center;}
.mid.prd_mid > table{width:85%;float:left;padding-left:50px;box-sizing:border-box;margin-top:100px;}
.mid.prd_mid .prd_cate > p{width:100%;border-right:0.5px solid #ddd; border-left:0.5px solid #ddd; border-top:00px solid #ddd;border-bottom:0.5px solid #666;color:#fff;font-size:15px;line-height:60px;display:block;width:100%;letter-spacing:.1em;box-sizing:border-box;background:#666; }


/*.mid.prd_mid .prd_cate ul li:first-child{border-top:0.5px solid #ddd;}*/
.mid.prd_mid .prd_cate ul li{background-color:#fff;text-align:center;border-bottom:0.5px solid #ddd; border-right:0.5px solid #ddd; border-left: 0.5px solid #ddd;}
.mid.prd_mid .prd_cate ul li a{color:#666;font-size:var(--fontM);line-height:60px;display:block;width:100%;letter-spacing:.1em;font-weight:400;}

.mid.prd_mid .prd_cate ul li.sel{background-color:#cbcbcb;border-bottom:0.5px solid #cbcbcb;}
.mid.prd_mid .prd_cate ul li.sel a{color:#fff;}
.mid.prd_mid .prd_cate ul li:hover{background-color:#cbcbcb;border-bottom:0.5px solid #cbcbcb;}
.mid.prd_mid .prd_cate ul li:hover a{color:#fff;}





@media (max-width:1400px){
#container.business1 .mid>div h3{font-size:20px;margin-bottom:20px}
#container.business1 .mid>div p{font-size:12px;line-height:20px}
}
@media (max-width:1024px){
#container.business1 .mid>div>div{float:none;width:100%}
#container.brand1>.mid>div{float:none;width:100%}
#container.brand1>.mid>div:last-child{padding:0;margin-top:50px}
#container.business1 .mid>div>div .inner{position:relative;top:0;padding:0;transform:translate(0,0);text-align:center;padding:50px 0}
.business2 .slide.swiper-container2{height:400px}
/*¿¬Çõ*/
#container.brand2>.mid>div>div{width:100%}
#container.brand2>.mid>.left>.inner{text-align:left;padding-right:0;padding-left:30px}
#container.brand2>.mid>div.left>div li span{float:left;padding:0;padding-left:40px}
#container.brand2>.mid::before{left:5px}
#container.brand2>.mid>.left>.inner::after,
#container.brand2>.mid>.right>.inner::after{left:0}

#container.business3 .mid>div, #container.business3 .mid>ul{float:none;width:100%}
#container.business3 .mid>ul li>div{padding:0;}
#container.business3 .mid>ul li div:nth-child(2){border:10px solid #f5f5f5}
#container.business3 .mid>ul li div:nth-child(2) p{font-size:10px;line-height:20px;padding: 0 15px;}
}
@media (max-width:769px){
.sub .mid{margin-top:50px}
.mid.prd_mid > table{margin-top:0;}
#wrap.sub{margin-top:80px}

.sub_title{height:200px}
.sub_title h2{font-size:25px;}
.sub_title .category{display:none;}
.abouts_container > .category,.mid.prd_mid .prd_cate{display:none;}
.abouts_container > .mid_seper{width:100%;}


.sub_h2{padding:50px 0;width:95%}
.sub_h2 h2{font-size:20px;}
#container.brand1>.mid>div:last-child h3{font-size:20px;}
#container.brand1>.mid>div:last-child p{font-size:12px;line-height:20px}
footer{margin-top:100px}
#container.brand3 .map{padding:0;height:400px}
#container.brand3 .map_icon ul{padding:50px 0}
#container.brand3 .map_icon li p, #container.brand3 .map_icon li a{font-size:12px;line-height:20px}
#container.brand3 .map_icon li div.add{background-size:40px auto}
#container.brand3 .map_icon li div.call{background-size:35px auto}
#container.brand3 .map_icon li div.mail{background-size:32px auto}
.business2 .slide.swiper-container2{height:300px}
#wrap .business2 .swiper-pagination-bullet{height:3px;width:25px}
#container.business2 .mid.info{margin-top:50px}
#container.business2 .mid.info li{float:none;width:100%}

}