/* BASIC css start */
/* 메인 비쥬얼 배너 */
#mainSpot { position:relative; width:100%; min-width:1100px; height:500px; overflow:hidden }
#mainSpot .inner { margin-left:-1000px; position:absolute; top:0; left:50%; right:0; width:2000px; height:500px }
#mainSpot .bx-pager { position:absolute; bottom:15px; left:0; right:0; height:11px; text-align:center }
#mainSpot .bx-pager .bx-pager-item { display:inline-block;  margin:0 7px }
*:first-child+html #mainSpot .bx-pager .bx-pager-item { display:inline } /* IE7 Hack */
#mainSpot .bx-pager .bx-pager-item a { display:block; width:11px; height:11px; text-indent:-9999em; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/main/sp_spot_pager.png) 0 0 no-repeat }
#mainSpot .bx-pager .bx-pager-item a.active { background-position:0 -11px }

/* 이미지 배너 */
.imgBanner { margin:30px auto 0; position:relative; width:1100px; overflow:hidden }
.imgBanner ul { *zoom:1 }
.imgBanner ul:after { display:block; clear:both; content:'' }
.imgBanner ul li { padding-right:10px; float:left }

/* 상품 목록 영역 */
.product-wrap { margin:0 auto; position:relative; width:1100px }

/* 고정 이미지 배너 */
.fixedBnnr { position:relative; width:100%; min-width:1100px; height:220px; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/main/fixbn.jpg) center top no-repeat fixed }
.fixedBnnr .inner { margin:0 auto; position:relative; width:1100px; text-align:center }
.fixedBnnr .inner .tx { padding-top:100px; font-size:16px; color:#fff; letter-spacing:16px }

/* 메인 배너 영역*/
.swiper{width: 100%; margin-top: 70px;}
.mainSwiper>.swiper-wrapper{position: relative; width: 100%; height: 70vh;}
.mainSwiper>.swiper-wrapper>.swiper-slide {text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center;}
.mainSwiper>.swiper-wrapper>.swiper-slide img {width: 100%; height: 100%; object-fit:cover; object-position:center;}
.mainSwiper>.bottomWrap {position: absolute; bottom: 0; z-index: 1; width: 100%; background-color: rgba(156, 176, 27, 0.9); padding: 15px 0;}
.mainSwiper>.bottomWrap>.bottomBox{display: flex; justify-content: space-between; align-items: center; max-width:1200px; margin:auto;}
.mainSwiper>.bottomWrap>.bottomBox>div{display: flex; align-items: center;}
.mainSwiper>.bottomWrap>.bottomBox>div>h3{font-size: 23px; font-weight: bold; margin-right: 20px; color:#fff;}
.mainSwiper>.bottomWrap>.bottomBox>div>p{font-size: 15px; font-weight: bold; color:#fff;}
.mainSwiper>.bottomWrap>.bottomBox>div>a{display: flex; align-items: center; font-size: 15px; font-weight: bold; margin-left: 20px; padding: 10px 20px; border: 1px solid #fff; border-radius: 5px; background-color: rgba(156, 176, 27, 0.9); color:#fff;}
.mainSwiper>.bottomWrap>.bottomBox>div>a>img{width:25px; margin-right:10px;}
.mainSwiper>.swiper-button-prev{left: 2%; width:50px; height:50px; background-color: rgba(235, 235, 235, 0.5); color: rgba(36, 41, 51, 0.5); border-radius: 50%;}
.mainSwiper>.swiper-button-next{right: 2%; width:50px; height:50px; background-color: rgba(235, 235, 235, 0.5); color: rgba(36, 41, 51, 0.5); border-radius: 50%;}
.mainSwiper>.swiper-button-prev:after{font-size: 30px; font-weight: bold;}
.mainSwiper>.swiper-button-next:after{font-size: 30px; font-weight: bold;}
.mainSwiper>.swiper-button-prev:hover{color:#9CB01B; background-color: rgba(235, 235, 235, 0.9);}
.mainSwiper>.swiper-button-next:hover{color:#9CB01B; background-color: rgba(235, 235, 235, 0.9);}


.bottomWrap_mo {display:none; width: 100%; background-color: rgb(156, 176, 27); padding: 20px 0;}
.bottomWrap_mo>.bottomBox{display: flex; justify-content: space-between; align-items: center; flex-direction: column; gap: 20px; width: 100%; margin:auto;}
.bottomWrap_mo>.bottomBox>div{display: flex;align-items: center;width: 90%;justify-content: center;}
.bottomWrap_mo>.bottomBox>div>h3{font-size: 23px; font-weight: bold; margin-right: 20px; color:#fff;}
.bottomWrap_mo>.bottomBox>div>p{font-size: 15px; font-weight: bold; color:#fff;}
.bottomWrap_mo>.bottomBox>div>a{width: 100%;justify-content: center;display: flex;align-items: center;font-size: 15px;font-weight: bold; margin-left: 10px; padding: 5px;border: 1px solid #fff;border-radius: 5px;background-color: rgba(156, 176, 27, 0.9);color:#fff;}
.bottomWrap_mo>.bottomBox>div>a:nth-child(1){margin-left: 0;}
.bottomWrap_mo>.bottomBox>div>a>img{width:18px; margin-right:5px;}
.main_banner_img_mo{display:none;}


/* ourService 영역 */
#content>.ourService{margin-top: 100px;}
#content>.ourService>h2{font-size:30px; font-weight: bold;}
#content>.ourService>p{text-align: center; font-size: 15px;}
#content>.ourService>ul{display:flex; gap: 25px; margin-top: 50px;}
#content>.ourService>ul>li{width: 33.33%;}
#content>.ourService>ul>li>.imgBox{position:relative; border-radius: 10px; overflow: hidden;}
#content>.ourService>ul>li>.imgBox>img{width:100%;}
#content>.ourService>ul>li>.imgBox>a{display:block;position:absolute;color:#fff;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);font-size:15px;opacity:0;transition:opacity ease .5s;}
#content>.ourService>ul>li>.imgBox:hover>a{opacity:1;}
#content>.ourService>ul>li>.imgBox>a::after{content:"";height:1px;width:60px;display:block;position:absolute;background-color:#fff;left:5%;bottom:15%;transition:bottom ease .5s}
#content>.ourService>ul>li>.imgBox>a>p{position:absolute;bottom:16%;left:5%; color: #fff; font-size: 15px;}
#content>.ourService>ul>li>.textBox{width:100%; text-align: center;}
#content>.ourService>ul>li>.textBox>a>h3{font-size:20px; font-weight: bold; margin-top:20px}
#content>.ourService>ul>li>.textBox>a>p{font-size:13px; margin: 2px 0 25px 0; color: #636363;}
#content>.ourService>ul>li>.textBox>.a_btn{font-size:15px; padding: 10px 35px; border: 1px solid #636363; border-radius: 20px; color: #636363; transition:all ease .5s;}
#content>.ourService>ul>li>.textBox>.a_btn:hover{color: #fff; border: 1px solid #9CB01B; background-color:#9CB01B}

/* subSwiper 영역 */
#content>.subSwiperSection{position: relative; display:flex; align-items: center; background-image: linear-gradient(rgba(36, 41, 51, 0.9), rgba(36, 41, 51, 0.9)),url("/design/kamco/hdesign/subSwiperSection_bg.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; margin-top: 100px; height: 600px;}
#content>.subSwiperSection>.subSwiper{width: 1200px;}
#content>.subSwiperSection>.subSwiper>.swiper-wrapper>.swiper-slide {height: 450px;}
#content>.subSwiperSection>.subSwiper>.swiper-wrapper>.swiper-slide>a>h3{font-size: 22px; margin-bottom:30px; color: #636363; text-align: center; transition: all ease .5s;}
#content>.subSwiperSection>.subSwiper>.swiper-wrapper>.swiper-slide>a>img{width:100%; margin-bottom: 20px; border-radius: 10px;}
#content>.subSwiperSection>.subSwiper>.swiper-wrapper>.swiper-slide>a>p{font-size: 15px; color:#fff; margin-bottom: 20px; transition: all ease .5s;}
#content>.subSwiperSection>.subSwiper>.swiper-wrapper>.swiper-slide>a{font-size: 15px; color:#fff; font-weight: bold; transition: all ease .5s;}
#content>.subSwiperSection>.subSwiper>.swiper-wrapper>.swiper-slide:hover>a>h3{color: #9CB01B;}
#content>.subSwiperSection>.subSwiper>.swiper-wrapper>.swiper-slide:hover>a>p{color: #9CB01B;}
#content>.subSwiperSection>.subSwiper>.swiper-wrapper>.swiper-slide:hover>a{color: #9CB01B;}
#content>.subSwiperSection>.subSwiper>.swiper-wrapper>.swiper-slide.swiper-slide-next>a>h3{font-weight: bold; color: #9CB01B;}
#content>.subSwiperSection>.swiper-button-prev{top:125px; left: 36%; color: #fff;}
#content>.subSwiperSection>.swiper-button-next{top:125px; right: 36%; color: #fff;}
#content>.subSwiperSection>.swiper-button-prev:after{font-size: 30px; font-weight: bold;}
#content>.subSwiperSection>.swiper-button-next:after{font-size: 30px; font-weight: bold;}
#content>.subSwiperSection>.swiper-button-prev:hover{color:#9CB01B}
#content>.subSwiperSection>.swiper-button-next:hover{color:#9CB01B}

/* WITH THE VENTUS SOLUTION 영역 */
#content>.withtheventussolution{position: relative; display:flex; justify-content: center; align-items: center; background-image: linear-gradient(rgba(235, 235, 235, 0.9), rgba(235, 235, 235, 0.9)), url("/design/kamco/hdesign/withtheventussolution_bg.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; margin-top: 100px; height: 400px;}
#content>.withtheventussolution>.contectBox{}
#content>.withtheventussolution>.contectBox>.textBox{text-align: center; margin-bottom:35px;}
#content>.withtheventussolution>.contectBox>.textBox>h2{font-size:30px; font-weight:bold; margin-bottom: 35px; color: #000;}
#content>.withtheventussolution>.contectBox>.textBox>p{font-size: 15px; color: #000;}
#content>.withtheventussolution>.contectBox>.a_box{text-align: center;}
#content>.withtheventussolution>.contectBox>.a_box>a{font-size:15px; font-weight:bold; margin: 0 15px; padding: 10px 35px; border: 1px solid #9CB01B; border-radius: 20px; color: #9CB01B; transition:all ease .5s;}
#content>.withtheventussolution>.contectBox>.a_box>a:hover{color: #fff; border: 1px solid #9CB01B; background-color:#9CB01B}


@media screen and (max-width:1300px) {
    .mid{width:1000px;}
    .mainSwiper>.bottomWrap>.bottomBox{max-width:1000px;}
    .mainSwiper>.bottomWrap>.bottomBox>div>a{padding: 10px; margin-left: 10px;}
    #content>.subSwiperSection>.subSwiper{max-width:1000px;}
}
@media screen and (max-width:1050px) {
    .mid{width:800px;}
    .mainSwiper>.bottomWrap>.bottomBox{max-width:800px;}
    .mainSwiper>.bottomWrap>.bottomBox>div>a{font-size:10px; padding: 5px; margin-left: 5px;}
    .mainSwiper>.bottomWrap>.bottomBox>div>a>img{width: 20px; margin-right: 5px;}
    #content>.subSwiperSection>.subSwiper{max-width:800px;}
}
@media screen and (max-width:768px) {
    br{display:none;}
    .mid{width: 90%; padding-left:0; padding-right:0;}
    .mainSwiper>.swiper-wrapper{height: 60vh;}
    .mainSwiper>.bottomWrap{display:none;}
    .bottomWrap_mo>.bottomBox>div>a{font-size:10px;}
    .bottomWrap_mo>.bottomBox>div>h3{margin-right:0;}
    
    .main_banner_img_pc{display:none;}
    .main_banner_img_mo{display:block;}
    .bottomWrap_mo{display:block;}
    
    #content>.ourService>ul{flex-wrap: wrap; gap:60px;}
    #content>.ourService>ul>li{width:100%}
    
    .swiper{margin-top: 0;}
    
    #content>.subSwiperSection>.swiper-button-prev{top:90px; left:5%;}
    #content>.subSwiperSection>.swiper-button-next{top:90px; right:5%;}
    #content>.subSwiperSection>.subSwiper{width: 90%;}
    #content>.subSwiperSection>.subSwiper>.swiper-wrapper>.swiper-slide.swiper-slide-active>a>h3{font-weight: bold; color: #9CB01B;}
    
    #content>.withtheventussolution>.contectBox{width:90%;}
    
}

@media screen and (max-width: 400px) {
    .bottomWrap_mo>.bottomBox>div{width:95%}
}
/* BASIC css end */