#header{width: 100%;height: 80px;position: absolute;top: 0;left: 0;z-index: 999;}
#footer{width: 100%;height: 65px;}
body,html{width: 100%;height: 100%;}
.contents{margin-top:80px;position: relative;}
.wrap{width: 1200px;margin: auto;}
.banner{height: 590px;width: 100%;background: rgb(68, 68, 68);}
.banner .top{height: 100%;width: 100%;background: url('../img/banner_pattern.JPG');}

.swiper1 {
    width: 100%;margin: auto;
    height: 100%;
    position: relative;
    color:white
  }
.swiper1 .swiper-slide{background: url('../img/banner_pattern.JPG');}
.text{position: absolute;top: 50%;transform: translateY(-50%);}

.swiper-wrapper{width: 1300px;margin: auto;}
.text h2{font-size: 30px;line-height: 5px}
.text h1{font-size:70px}
.banner1 h1{color:#ffd200;}
.banner2 h1{color:#5342ee;}
.banner3 h1{color:#ff00aa;}
.text p{font-size: 15px;padding:5px 20px;border: 1px solid rgb(255, 255, 255);display: inline-block;margin: 10px 0;transition: all .5s }
.banner a{color:white}
.banner .text a:hover p{background: rgba(255, 255, 255, 0.712);border: 1px solid transparent;color:black;border-radius: 5px}
.banner img{position: absolute;bottom: 100px;}

.banner1 .text{left: 150px;}
.banner2 .text{right:150px;text-align: right}
.banner3 .text{left:150px;text-align: center}



.simple{right: 150px;width: 350px;}
.smart{left: 90px;width: 400px;}
.banner img.SDM{right: 55px;width: 420px;bottom:27px}

.banner .swiper-slide .wrap{height: 100%;position: relative;}

.product .wrap{padding: 20px;}
.productTab{display: flex;justify-content: center}
.productTab li{padding: 10px 60px;background: #545454;color:white;cursor: pointer;}
.productTab li.on{background: white;color:#545454;border-bottom: 1px solid #545454;font-weight: bold;}

.productBox .item > a{width: 100%;height: 100%;display: inline-block;color:black}
.productBox{display: flex;justify-content: center;padding: 30px 0;flex-wrap: wrap;height: 500px;}
.productBox .item{width: 230px;height: 200px;border: 1px solid rgb(202, 202, 202);position: relative;overflow: hidden;margin: 10px;}

.imgBox{width: 100%;height: 83%;text-align: center;padding: 5px 0;}
.productBox .item > a:hover{background: rgb(243, 243, 243);}
.imgBox img{width: 65%;}

ul.btn{width: 100%;display: flex;height: 40px;position: absolute;bottom: 0px;left: 0;opacity: 0;}
ul.btn li{width: 50%;background: #545454;text-align: center;line-height: 40px;color:white}
ul.btn li:first-child{border-right: 1px solid rgb(255, 255, 255);cursor: pointer;}
ul.btn li:last-child{font-size:13px}
ul.btn li a{color:white;display: inline-block;width: 100%;height: 100%;}

.ask{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
  width: 500px;height: 500px;
  background: #fff;z-index: 999;text-align: center;border-radius: 10px;overflow: hidden;display: none}
.ask h1{padding: 20px 0;background: url('../img/ask.JPG')center center;width: 100%;height: 200px;line-height: 200px;color:white;margin-bottom: 30px}
.ask table{ border-collapse: collapse;width: 400px;margin: auto;border-top: 2px solid #000;border-bottom:2px solid #000;}

.ask table th:nth-child(1){background: rgb(105, 105, 105);width: 30%;height: 50px;border-right: 1px solid rgb(219, 219, 219);font-size: 15px;color:white;}
.ask table th:nth-child(2){width: 70%;;height: 50px;}
.ask tr{border: 1px solid rgb(199, 199, 199);}


.ask input{width: 100%;height: 100%;margin: 0;border: 0px solid #000;padding: 10px;}
button.subbtn{width: 400px;height: 40px;margin: 30px 0;background: rgb(105, 105, 105);color:white;cursor: pointer;}
.bg{width: 100%;height: 100%;background: rgba(0, 0, 0, 0.39);position: absolute;z-index: 99;left: 0;top: 0;display: none;cursor: pointer;}
.close{position: absolute;top: 5px;right: 5px;cursor: pointer;transition: all 0.5s}
.close:hover{transform: rotate(180deg);}


@media only screen and (max-width: 480px) 
{
    .wrap{width: 100%;}
    .banner{height: 527px;}
    .text{top: 100px;transform: translateY(0);text-align: center;width: 100%;}
    .text h2{font-size: 15px;line-height: 5px}
    .text h1{font-size:50px}
    .text h3{font-size: 15px}
    .banner1 .text{left: 0%;}
    .banner2 .text{right:0%;text-align: center}
    .banner3 .text{left:0%;text-align: center}

    .banner img{position: absolute;bottom:20px;transform: translate(-50%,0)}
    .simple{width: 250px;left: 50%;}
    .smart{width: 250px;left:50%;}
    .SDM{width: 280px;left: 50%;}

    .product .wrap{padding: 0;}
    .productTab{height: 40px;}
    .productTab li{width: 25%;padding: 0;text-align: center;line-height:40px;font-size: 13px; }
    .productBox{flex-flow: row wrap;height:auto}
    .productBox .item{width: 100%;height: 340px;}
    .ask{width: 100%;}
    .btn{opacity: 0;}
    #footer{height: 150px;}
} /* 모바일 */