@media (max-width:767px){
    .mobile_br {display: block;}
    .swiper-slide {
      display:flex; /* 내용을 중앙정렬 하기위해 flex 사용 */
        align-items:center; /* 위아래 기준 중앙정렬 */
        justify-content:center; /* 좌우 기준 중앙정렬 */
    }
      h2 {font-size: 26px;
        line-height: 1.4em;
        letter-spacing: -0.01em;
        color:#252045;
    }
    p {font-size: 18px;
  line-height: 1.3em;
  letter-spacing: -0.01em;
  color:#252045;
      
      }
    
      .cont {padding:10px;}
      .swiper-slide img{position:relative;
          transition: all linear .1s;
          width: 100%;
        /* animation:rotateReversed linear 3s; */
      }
    .swiper-container{width: 100%;height: 100vh;text-align: center;}
        .swiper-slide:nth-child(1) {background-color: #f9f4df;}
        .swiper-slide:nth-child(2) {background-color: #f5e70c;}
        .swiper-slide:nth-child(3) {background-color:#fbd60c;}
        .swiper-slide:nth-child(4) {background-color:#fac017;}
       
        h1{font-size: 90px;color:#fff;opacity:1;}
        :root {
            --swiper-pagination-color: rgba(0, 123, 255, 1);
            --swiper-pagination-bullet-inactive-color: rgba(0, 123, 255, 1);
          }
    /* 처음 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_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 {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 {}
    .slide_4 h2 {
        font-size: 24px;
        line-height: 1.4em;
        letter-spacing: -0.01em;
        padding: 20px;
    }
    .slide_4 .img1 {
       
    }
    .slide_4 .img2 {
     
     
    }
    .slide_4  {
        padding-top: 10%;
    }
    
    .s8i_2{padding-top: 20px;}

    }
    
    @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;

    }
    
    
    
    .swiper-container{width: 100%;height: 100vh;text-align: center;}
        .swiper-slide:nth-child(1) {background-color: #f9f4df;}
        .swiper-slide:nth-child(2) {background-color: #f5e70c;}
        .swiper-slide:nth-child(3) {background-color:#fbd60c;}
        .swiper-slide:nth-child(4) {background-color:#fac017;}
       
        h1{font-size: 90px;color:#fff;opacity:1;}
        :root {
            --swiper-pagination-color: rgba(0, 123, 255, 1);
            --swiper-pagination-bullet-inactive-color: rgba(0, 123, 255, 1);
          }
    /* 처음 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_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%;}
    .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: 21vh;
        padding: 5px;
    }
    .slide_4  {
        padding-top: 10%;
    }
    
          
       @import url('https://fonts.cdnfonts.com/css/montreal');
      
    
    
    


      .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;
      }
    }
      

    .spec5{
      position: absolute;
      margin-left: 9%;
      margin-top: 20%;
    }
    .spec6{
      position: absolute;
      margin-left: 67%;
      margin-top: 7%;
    }



    @media screen and (min-width:1024px)and (max-width: 1919px){ 
      /* .slide_2{margin-top:5.8% ;} */
      .slide_3{margin-top: 7%;}
      p{font-size:1.4rem;}
      .slide_2 .ani_02 img{height:30vh;}
      .gum_spec img{width:22%; height:auto;}
      .slide_3 span {
        font-size: 2.2rem;
    }
    }

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

      .spec5{margin-left: 13%;margin-top: 20%;}
      .spec6{margin-left: 68%;margin-top: 12%;}
    }