body,html{width: 100%;}
.set{width: 100%;background: rgba(0, 0, 0, 0.212);color:white;text-align: center;position: absolute;top: 0;z-index: 999;font-size: 13px;padding: 5px;}
*{font-family: 'Noto Sans KR', sans-serif;}
span{color:#f18b3d}
ul.menu{position: fixed;right: 100px;top: 50%;transform: translateY(-50%);text-align: right;z-index: 999;}
ul.menu li{color:rgb(61, 61, 61);padding: 3px 0;cursor: pointer;font-weight: 300;}
ul.menu li::after{
    content: " ● ";
}
ul.menu li.on{font-size: 20px;color:#f18b3d;font-style: italic;font-weight: 900;}
ul.menu li:hover{
    color:#f18b3d
}
.mouse{position: fixed;bottom: 10px;left: 50%;transform: translateX(-50%);z-index: 999;display: flex;}
.mouse i{animation-name: down;animation-duration: 2s;transform: translateY(0);opacity: 0;animation-iteration-count:infinite;transition-timing-function: linear;}
@keyframes down {
    0% {
      transform: translateY(0);
    }
  
    50% {
        transform: translateY(10px);opacity: 1;
    }
    100% {
        transform: translateY(20px);opacity: 0;
    }
  }
.mouse img{width: 30px;}

#home .swiper-container .swiper-pagination-bullet-active{background: #f18b3d;}
section{width: 100%;}
#home{width: 100%;height: 100%;}
#home img.logo{position: absolute;left: 50px;top: 50px;width: 250px;z-index: 999;}
#home .swiper-container{width: 100%;height: 100%;}
#home .swiper-wrapper{width: 100%;height: 100%;}
#home .swiper-slide.banner1{background: url(/img/bg.jpg)center -150px no-repeat;background-size: 100%;}
#home .swiper-slide.banner2{background: url(/img/bg2.jpg)center -100px no-repeat;background-size: 100%;}
#home .text{position: absolute;right: 100px;top: 28%;}
#home .swiper-slide.banner1 .text{text-align: right;}
#home .swiper-slide.banner2 .text{color: white;text-align: center;top: 50%;left: 50%;transform:translate(-50%,-50%);width: 500px;}
#home .swiper-slide.banner2 .text h1{text-align: center;}
#home .swiper-slide.banner2 .text p span{color: white;}
#home .text h1{text-align: right;font-size: 60px;font-style: italic;font-weight: 900;}
#home .text p{font-size: 25px;font-weight: 300;}
#home .text p span{color:black;font-weight: 700;}
#home .text p span span{color:#f18b3d;}

#product{width: 100%;}
#product .product_1{width: 100%;height: 980px;background: url(/img/product_Bg.jpg)center center no-repeat;background-size: 100%;position: relative;}
#product .product_1 .text{position: absolute;top: 30%;left: 55%;transform: translateX(-50%);}
#product .product_1 .text p{font-size: 20px;font-weight: 400;padding: 5px;font-style: italic;}
#product .product_1 .text h1{font-size: 40px;font-weight: 700;font-style: italic;}

#product .product_2{width: 100%;background: #f5f5f5;}
#product .product_2 .wrap{display: flex;justify-content: space-around;padding: 70px 0;width: 78%;margin: auto;}
#product .product_2 .text{align-self: center;text-align: right;}
#product .product_2 .text img{width: 250px;padding: 10px 0;}
#product .product_2 .text p{padding: 10px 0;font-size: 20px;font-weight: 500;}
#product .product_2 .text p b{font-weight: 900;}
#product .product_2 ul b{font-weight: 900;}
#product .product_2 ul{padding:0 100px 0 10px;align-self: center;}
#product .product_2 ul li{font-size: 20px;padding: 10px;position: relative;}
#product .product_2 ul li span{font-weight: 900;font-size: 30px;}

#product .product_3{width: 100%;background: #f5f5f5;text-align: center;padding: 20px 0;}
#product .product_3 img.logo{width: 200px;padding: 10px 0;}
#product .product_3 .img img{padding: 50px 0;margin: auto;width: 1400px;}
#product .product_3 h1{font-size: 30px;}
#product .product_4{width: 100%;background: #f5f5f5;text-align: center;padding: 50px 0;}
#product .product_4 img{width: 1400px;}


#about{width: 100%;text-align: center;padding: 50px 0;text-align: center;}
#about>h1{padding: 10px 0;}
#about > p{font-size: 14px;margin-bottom: 50px;padding: 20px 0;}

#about .client{width: 100%;position: relative;height: 600px;background: url(/img/aboutBg.jpg)center center no-repeat;background-size: cover;}
#about .bg{width: 100%;height: 100%;background: rgba(0, 0, 0, 0.342);position: absolute;z-index: 0;}
#about .text{position: absolute;text-align: left;color:white;display: flex;height: 100%;align-items: center;justify-content: center;width: 100%;}
#about .text h1{font-size: 60px;padding: 0;align-items: center;}
#about .logo{width: 800px;height: 450px;background: rgba(255, 255, 255, 0.452);margin-left: 200px;border-radius: 10px;padding: 10px;}
#about .logo .box{width: 100%;height: 540px;}
#about .logo .box ul{width: 100%;display: flex;flex-wrap: wrap;}
#about .logo .box ul li{width: 25%;padding: 10px;text-align: left;align-self: center;}
#about .logo .box ul li *{width: 100%;}

#about .come{width: 75%;margin: auto;padding: 50px 0;display: flex;justify-content:space-around;text-align: left}
#about .come .map{width: 500px;height: 500px;border-radius: 10px;overflow: hidden;}
#about .come .map iframe{width: 100%;height: 100%;}
#about .come .Ctext{width: 800px;color:rgb(48, 48, 48);}
#about .come .Ctext h1{text-align: right;font-size: 50px;font-style: italic;color:#f18b3d}
#about .come .Ctext .top{display: flex;justify-content: space-between;align-items: center;padding: 20px 0;}
#about .come .Ctext .top .left h2:nth-child(1){font-size:40px}
#about .come .Ctext .top .left h2:nth-child(2){font-size:18px}
#about .come .Ctext .top img{width: 130px;height: 130px;padding: 10px;}
#about .come .Ctext .bottom{padding: 10px 0;font-size: 13px;display: flex;justify-content: space-between;}
#about .come .Ctext .bottom p{padding: 5px;;}

#connect .ask{background: #2a2a2a;width: 100%;height: 500px;overflow: hidden;}
#connect .ask .box{width: 75%;margin: auto;display: flex;justify-content: space-between;height: 100%;}
#connect .ask .box ul{color:white;align-self: center;}
#connect .ask .box ul h1{font-size: 50px;color:#f18b3d;padding: 20px 0;}
#connect .ask .box ul li{font-size:30px;font-weight: 700;}
#connect .ask .box ul li i{padding:0 10px 0 20px;color:#f18b3d;}
#connect .ask .box .askBox{width: 450px;height: 350px;align-self: flex-end;border-radius: 10px 10px 0 0 ;margin-right: 70px;box-shadow: 0 0 10px black;overflow: hidden;background: rgb(255, 255, 255);position: relative;}
#connect .ask .box .askBox h1{color:#f18b3d;text-align: center;padding: 10px;background: #000;}
#connect .ask .box .askBox table{padding: 20px 0;text-align: left;width: 380px;margin: auto;}
#connect .ask .box .askBox table tr th{padding: 5px;}
#connect .ask .box .askBox table tr th input{width: 280px;padding: 5px;border-radius: 5px;border: 1px solid rgb(0, 0, 0);}
#connect .ask .box .askBox table tr:nth-child(3) th input{height: 100px;}
#connect .ask .box .askBox p{text-align: center;}
#connect .ask .box .askBox button{padding: 10px;background: #000;width: 100%;border: 0px solid #000;color:#f18b3d;font-weight: 700;position: absolute;bottom: 0;left: 0;font-size: 20px;cursor: pointer;}

#footer{width: 100%;height: 200px;background: #efefed;}
#footer .box{width: 1400px;margin: auto;display: flex;font-size:13px;padding: 20px 0;}
#footer .box h1{width: 200px; margin-right:20px;}
#footer .box h1 img{width: 100%;}
#footer .box .text{padding:0 20px;}
#footer .box .text b{font-style: italic;}
#footer .box .text a{color:black}

@media only screen and (max-width: 480px) 
{
  ul.menu{width: 100%;height: 50px;top: 0;right: 0;background: rgb(255, 255, 255);display: flex;transform: translateY(0);justify-content: center;border-bottom: 1px solid rgb(124, 124, 124);}
  ul.menu li{padding: 7px;font-size: 15px;align-self: center;}
  ul.menu li.on{font-size: 18px;}
  .mouse{display: none;}
  #home{height: 245px;margin-top: 50px;}
  #home .swiper-slide.banner1{background: url(/img/bg.jpg)center center no-repeat;background-size: cover;}
  #home .swiper-slide.banner2{background: url(/img/bg2.jpg)center center no-repeat;background-size: cover;}
  #home .swiper-slide.banner2 .text{width: 100%;}
  #home .text h1{font-size: 18px;}
  #home .text p{font-size: 15px;}
  #home .text{right: 20px;}
  #product .product_1{height: 260px;background-size: cover}
  #product .product_1 .text p{font-size: 13px;padding: 2px;}
  #product .product_1 .text{top: 6px;left: 65%;width: 200px;}
  #product .product_1 .text h1{font-size: 16px;position: absolute;bottom:-10px;left: 30px;}
  #product .product_2 .wrap{width: 100%;display: block;padding: 10px;}
  #product .product_2 .text{text-align: center;}
  #product .product_2 .text img{width: 200px;}
  #product .product_2  img{width: 100%;}
  #product .product_2 ul{padding: 10px;}
  #product .product_2 ul li{font-size: 15px;}
  #product .product_2 ul li span{font-size: 25px;}
  #product .product_3 h1{font-size: 20px;}
  #product .product_3 .img img,#product .product_4 img{padding: 10px;width: 100%;}
  #about .text{display: block;text-align: center;padding: 1px;}
  #about .text h1{font-size: 30px;}
  #about .logo{width: 100%;margin-left: 0%;margin: 10px 0;}
  #about .logo .box ul li{font-size: 13px;}
  #about .come{width: 100%;padding: 10px;display: block;}
  #about .come .map{width: 100%;height: 300px;}
  #about .come .Ctext{width: 100%;}
  #about .come .Ctext h1{font-size: 30px;padding: 10px;}
  #about .come .Ctext .top .left h2:nth-child(1){font-size: 25px;}
  #connect .ask{height: 550px;}
  #connect .ask .box{width: 100%;display: block;}
  #connect .ask .box ul h1{padding: 10px;font-size: 30px;}
  #connect .ask .box ul li{font-size: 15px;}
  #connect .ask .box ul{padding: 10px 0;}
  #connect .ask .box .askBox{width: 100%;}
  #footer{height: 400px;}
  #footer .box{width: 100%;padding: 10px;display: block;}
}