@media (max-width:767px) {
    .mobile_br{display: block;}
    h2 {font-size: 24px;
      line-height: 1.4em;
      letter-spacing: -0.01em;
      color: #252045;
  }
    p {
      font-size: 18px;
      line-height: 1.3em;
      letter-spacing: -0.01em;
      color:#252045;
  }
    .swiper-slide {
    display:flex; /* 내용을 중앙정렬 하기위해 flex 사용 */
      align-items:center; /* 위아래 기준 중앙정렬 */
      justify-content:center; /* 좌우 기준 중앙정렬 */
  }
    
  /* 처음 before*/
  .img-group{
          position: absolute;
          width: 100%;
          height: 100%;
          text-align: center;
          top: 0px;
          transition: all cubic-bezier(.97,.02,.02,.98) 2s;
        }
  
        
        .swiper-slide img{position:relative;
        transition: all linear .1s;
      /* animation:rotateReversed linear 3s; */
    }
    @keyframes rotateReversed{
      to{
        transform: rotate(-360deg);
      }
    }
    .swiper-slide .swiper-slide-active img{
      animation:rotate innerar 100s infinite;
    }
    @keyframes rotate{
      to{
        transform:rotate(720deg);
      }
  }
  
  
  
  /* 처음 before*/
  .swiper-slide h1
  {
      position:absolute;
      text-align: center;
    width:100%;
    top:50px;
    opacity:1;
    transition: all cubic-bezier(.66,.51,.02,.98) 1.5s;
  }
  

  
  .slide_2 {
      background-size: cover;margin-top:10%;
  }
  .slide_2 .ani_01 {opacity: 0; transition: all cubic-bezier(.66,.51,.02,.98) 2s;margin-top:200px}
  .slide_2 .ani_01 img {height:20vh}
  .slide_2 .ani_02 img {height:20vh}
  .slide_2 .ani_02 {opacity: 0; transition: all cubic-bezier(.66,.51,.02,.98) 2s;margin-top:250px}
  .slide_2 .ani_03 {opacity: 0; transition: all cubic-bezier(.66,.51,.02,.98) 2s;margin-top:300px}
  
  
  .slide_3 {
    background-size: cover;margin-top:10%;
  }
  
  .slide_3 .img_1 {height:35vh;padding-top:5vh;}
  .slide_3 .img_2 {height:13vh;padding-top:5vh;}
  .slide_3 .ani_01 {opacity: 0; transition: all cubic-bezier(.66,.51,.02,.98) 2s;margin-top:500px}
  .slide_3 .ani_02 {opacity: 0; transition: all cubic-bezier(.66,.51,.02,.98) 2s;margin-top:700px}
  .slide_3 .ani_03 {opacity: 0; transition: all cubic-bezier(.66,.51,.02,.98) 2s;margin-top:900px}
  
  .slide_3 img {height: 100%;}
  .slide_4 h2 {
      font-size: 24px;
      line-height: 1.4em;
      letter-spacing: -0.01em;
      padding: 20px;
      color:#252045;
  }
  .slide_4 .img1 {
      height: 30vh;
  }
  .slide_4 .img2 {
      height: 13vh;
      padding-top:1.5vh;
  }
  .slide_4  {
      padding-top: 10%;
  }
  
  
     
    /* @import url('http://www.openhiun.com/hangul/nanumbarungothic.css'); */
    
     @import url('https://fonts.cdnfonts.com/css/montreal');
    
     @font-face {
   font-family: 'Montreal Regular';
   font-style: normal;
   font-weight: normal;
   src: local('Montreal Regular'), url('/font/Montreal-Regular.woff') format('woff');
   }
   
   
   @font-face {
   font-family: 'Montreal Bold';
   font-style: normal;
   font-weight: normal;
   src: local('Montreal Bold'), url('/font/Montreal-Bold.woff') format('woff');
   }
  
  
   /* #header a:link {
      font-family: 'Montreal Bold';
   font-style: normal;
   font-weight: normal;
   font-size: 20px;
  
   }
  
  
    ul {
      list-style:none;
      margin:0;
      padding:0;
    }
    
    li {
      margin: 0 0 0 0;
      padding: 0 0 0 0;
      border : 0;
      float: left;
    }
    #header {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      min-width: 280px;
      height: 100px;
      background: white;
      
      -webkit-transition: border .3s;
      transition: border .3s;
      z-index: 300;
    }
    
    #header .wrap_header {max-width: 1090px;margin:0 auto;width:100%;margin-top:15px;display: block;}
    #header .wrap_header #logo {display: inline-block;width: 20%;height: 100%;text-align: center;float: left;}
    #header .wrap_header .navi {display: inline-block;width: 60%;height: 100%;text-align: center;float: left;}
    #header .wrap_header .contact {display: inline-block;width: 20%;height: 100%;text-align: center;float: right;}
    
    #header .wrap_header .navi ul {
      margin: 0 auto;
      display: inline-block;
      padding: 20px 0;
    
    }
    
    #header .wrap_header .navi li {
      padding:0 10px;
    }
    
    #header  a:link { color: #fff; text-decoration: none;}
    #header  a:visited { color: #fff; text-decoration: none;}
    #header  a:hover { color: #fff; text-decoration: underline;text-decoration-thickness: 3px;}
     */
    #header .menu_contact {height: auto;flex: none;top: auto;float: none;position: static;}
    .slide_2 .mgo img {width: 80%;}
  
  }
    
  
  
  
  @media (min-width:768px) {
    .mobile_br{display: none;}
    h2 {font-size: 44px;
      line-height: 1.4em;
      letter-spacing: -0.01em;
      color:#252045;
  }
  
    p {
      font-size: 40px;
      line-height: 1.3em;
      letter-spacing: -0.01em;
      color:#252045;
  }
    
  /* 처음 before*/
  .img-group{
          position: absolute;
          width: 100%;
          height: 100%;
          text-align: center;
          top: 0px;
          transition: all cubic-bezier(.97,.02,.02,.98) 2s;
        }
  
        
        .swiper-slide img{position:relative;
        transition: all linear .1s;
      /* animation:rotateReversed linear 3s; */
    }
    @keyframes rotateReversed{
      to{
        transform: rotate(-360deg);
      }
    }
    .swiper-slide .swiper-slide-active img{
      animation:rotate innerar 100s infinite;
    }
    @keyframes rotate{
      to{
        transform:rotate(720deg);
      }
  }
  
  
  
  /* 처음 before*/
  .swiper-slide h1
  {
      position:absolute;
      text-align: center;
    width:100%;
    top:50px;
    opacity:1;
    transition: all cubic-bezier(.66,.51,.02,.98) 1.5s;
  }
  

  
  .slide_2 {
      background-size: cover;margin-top:6.6%;
  }
  .slide_2 .ani_01 {opacity: 0; transition: all cubic-bezier(.66,.51,.02,.98) 2s;margin-top:200px}
  .slide_2 .ani_02 {opacity: 0; transition: all cubic-bezier(.66,.51,.02,.98) 2s;margin-top:250px}
  .slide_2 .ani_03 {opacity: 0; transition: all cubic-bezier(.66,.51,.02,.98) 2s;margin-top:300px}
  .slide_2 .ani_01 img {height:25vh}
  .slide_2 .ani_02 img {height:25vh}
  
  .slide_3 {
    background-size: cover;margin-top:10%;
  }
  
  .slide_3 .img_1 {height:50vh;padding-top:5vh;}
  .slide_3 .img_2 {height:18vh;padding-top:5vh;}
  .slide_3 .ani_01 {opacity: 0; transition: all cubic-bezier(.66,.51,.02,.98) 2s;margin-top:500px}
  .slide_3 .ani_02 {opacity: 0; transition: all cubic-bezier(.66,.51,.02,.98) 2s;margin-top:700px}
  .slide_3 .ani_03 {opacity: 0; transition: all cubic-bezier(.66,.51,.02,.98) 2s;margin-top:900px}
  
  .slide_3 img {height: 100%;}
  .swiper-slide:nth-child(4) {
    background-image: url('../asset/images/product_detail/bg_spec.jpg');
    background-size: cover;
    background-position-y: bottom;
    background-position-x: center;
  }
  .slide_4 h2 {
      font-size: 4vh;
      line-height: 1.4em;
      letter-spacing: -0.01em;
      padding: 20px;
  }
  .slide_4 .img1 {
      height: 40vh;
  }
  .slide_4 .img2 {
      height: 20vh;
      padding-top:1.5vh;
  }
  .slide_4  {
      padding-top: 10%;
  }
  

    
     @import url('https://fonts.cdnfonts.com/css/montreal');
    
     @font-face {
   font-family: 'Montreal Regular';
   font-style: normal;
   font-weight: normal;
   src: local('Montreal Regular'), url('/font/Montreal-Regular.woff') format('woff');
   }
   
   
   @font-face {
   font-family: 'Montreal Bold';
   font-style: normal;
   font-weight: normal;
   src: local('Montreal Bold'), url('/font/Montreal-Bold.woff') format('woff');
   }
  
    .menu_contact {
      padding: 8px 16px;
    }

  }

  @media screen and (min-width:1024px)and (max-width: 1800px){ 
    .slide_2{margin-top: 10%;}
    .slide_2 .ani_01 img{width: 25%;height: auto;}
    .slide_2 .ani_02 img{width:44vh;height:auto;}
    
    p{font-size: 1.26rem;}
    .mgo img{ width:22%;height: auto;}
    /* .slide_3{margin-top: 7%;} */
    .h2{font-size: 2.2rem;}
    .img_1 img{width:auto;height:36.5vh;}
    .img_2 img{width: auto;height: 13vh;}
    h2{font-size: 2.2rem;}
    .slide_3 .img_1{height:45vh;}
    .slide_3 .img_2{padding-top: 0;}
    .slide_4{padding-top: 6.5%;}
    .slide_4 h2{font-size: 1.7rem;}



  }

.spec1{
  position: absolute;
  margin-left: 70%;
  margin-top: 20%;
}
.spec2{
  position: absolute;
  margin-left: 64%;
  margin-top: 38%;
}
.spec3{
  position: absolute;
  margin-left: 68%;
  margin-top: 18%;
}
.spec4{
  position: absolute;
  margin-left: 8%;
  margin-top: 18%;
}

@media  (max-width:992px) {
  .spec1,.spec2,.spec3,.spec4,.spec5,.spec6 {display:none;}
}

@media screen and (min-width:1024px)and (max-width: 1800px){
  .product_size > img{width: auto;height: 33vh;}
  .product_size_exception > img{width: auto;height: 27vh;}
  .spec1 {margin-left: 72%;margin-top: 15%;}
  .spec2{margin-left: 60%;margin-top: 38%;}

}