@charset "UTF-8";

.body{

  margin: 0px;

}


.html {

  width: 100%;

}

.logoimg {

    position: absolute;
    top: 7px;
    left: 0px;
    height: 80%;

}

.end {

  width: 100%;
}

.youtubebox1 {

  display: none;

}

.youtubebox3 {

  display: none;

}



@media (min-width: 1026px) { 

  .gaga1{

    display: none;
  }

  .gaga2{

    display: none;
  }

  .drawer {
      border-radius: 15px;
      position: fixed;
      top: 25%;
      right: -125px; /* 닫힌 상태 (핸들만 보임) */
      width: 125px;;
      height: 50%;
      background: #fff;
      box-shadow: -2px 0 5px rgba(0,0,0,0.2);
      transition: right 0.3s ease;
      z-index: 1000;
    }

  .logoimg {
    position: absolute;
    top: 7px;
    left: 200px;
    height: 80%;
}

  .box1 {

  width: 100%;

  height: 750px;
  position: relative;
  overflow: hidden;

}


.box2 {

  width: 100%;
  height: 157px;
  position: relative;
  overflow: hidden;

}

.box3 {

  width: 100%;

  height: 800px;
  position: relative;
  overflow: hidden;

}


.box3-4 {

  width: 100%;
 
  height: 300px;
  position: relative;
  overflow: hidden;

}



.box4 {

  width: 100%;

  height: 900px;
  position: relative;
  overflow: hidden;
 

}

.box5 {

  width: 100%;

  height: 2100px;
  position: relative;
  overflow: hidden;

}

.mainimg {

width: 100%;
height: 100%;
position: relative;
object-fit: cover;
        border-radius: 0 0 50% 50% / 12%;


}

.boxback {

width: 100%;
height: 100%;

}

.rel1{

height: 150px;

}

.rel2 {

height: 100%;


}

.gogo {

position: relative;
overflow: hidden;
width: 234px;
bottom: 40px;

}

.mtext {

  z-index: 10;
        position: absolute;
        width: 45%;
        left: 300px;
        object-fit: cover;
        bottom: 30px;

}

.mphone {

 z-index: 10;
        position: absolute;
        width: 30%;
        left: 1120px;
        object-fit: cover;
        top: 110px;

}

.mo1 {

 z-index: 10;
        position: absolute;
        width: 40%;
        left: 1020px;
        object-fit: cover;
        top: 90px;

}


.mo2 {

  z-index: 10;
        position: absolute;
        width: 43%;
        left: 200px;
        object-fit: cover;
        bottom: 110px;

}

.mo3box {

width: 500px;
position: absolute;
z-index: 20;
left: 360px;
top: 420px;


}

.mo3 {

width: 50%;
position: absolute;
z-index: 20;


}

.mo4 {

width: 50%;
position: absolute;
z-index: 20;
transform: translateX(105%)


}

.text2 {

  z-index: 10;
        position: absolute;
        width: 25%;
        left: 720px;
        object-fit: cover;
        top: 40px;

}


.back5 {

  width: 100%;
height: 50%;

}

.back6 {

  width: 100%;
height: 50%;

}

.back3box {

position:relative;
width: 100%;
z-index: 30;
height: 100%;

}

.back3 {

position: absolute;
bottom: 0px;
height: 65px;
width: 100%;


}


.smart1 {

 z-index: 10;
        position: absolute;
        width: 15%;
        left: 500px;
        object-fit: cover;
        bottom: 1450px;

}


.smart2 {

  z-index: 10;
        position: absolute;
        width: 30%;
        left: 920px;
        object-fit: cover;
        bottom: 1500px;

}

.smart3 {

  z-index: 10;
        position: absolute;
        width: 30%;
        left: 400px;
        object-fit: cover;
        bottom: 800px;

}

.smart4 {

  z-index: 10;
        position: absolute;
        width: 15%;
        left: 1100px;
        object-fit: cover;
        bottom: 750px;

}

.smart5 {

  z-index: 10;
        position: absolute;
        width: 15%;
        left: 500px;
        object-fit: cover;
        bottom: 50px;

}

.smart6 {

  z-index: 10;
        position: absolute;
        width: 30%;
        left: 920px;
        object-fit: cover;
        bottom: 100px;

}


.youtubebox1 {

top: 10px;
left: 130px;
width: 30%;
position: relative;




}

.youtubebox2 {

top: 10px;
left: 700px;
width: 30%;
position: relative;



}

.youtubebox3 {

top: 10px;
left: 1270px;
width: 30%;
position: relative;



}


.youtube {

width: 500px;
height: 280px;
position: absolute;




}



.mainimg1 {

display: none;
}

.mo3box1 {

display: none;
}

.mo9box {

display: none;
}





}

@media (max-width: 720px) {

  .gaga1 {

        position: absolute;
        width: 70%;
        height: 160px;
        bottom: 23%;
        left: 16%;

  }

  .gaga2 {

        position: absolute;
        width: 70%;
        height: 160px;
        bottom: 2%;
        left: 16%;
  

  }

  .drawer {
      border-radius: 15px;
      position: fixed;
      top: 25%;
      right: -125px; /* 닫힌 상태 (핸들만 보임) */
      width: 125px;;
      height: 50%;
      background: #fff;
      box-shadow: -2px 0 5px rgba(0,0,0,0.2);
      transition: right 0.3s ease;
      z-index: 1000;
    }

  .card {
        width: 150px;
        height: 300px;
  }

  .mo9box {
    display: none;

    height: 100%;

  }


  .mmo {

        height: 0%;
        bottom: 80px;
        left: 7.5%;
        position: absolute;
        width: 84%;
        z-index: 99;
}




  .bb1 {

    margin-top: 50px;
    width: 100%;
    height: 100%;

  }


  .header {

    background-color: #f6f3f3f7;

  }

  .mainimg{
    display: none;
  
  }
  .mainimg1{
    position: absolute;
    width: 100%;
    height: 100%;
  
  }


.youtubebox1 {

    position: absolute;
        width: 90%;
        left: 5%;
        top: 6%;
       display: none;

}

.youtubebox2 {

 position: absolute;
        width: 80%;
        top: 30px;

}

.youtubebox3 {

  position: absolute;
    width: 30%;
    display: none;
}

.youtube {

      left: 13%;
        position: absolute;
        width: 100%;
        border-radius: 17px;
        height: 320px;

}




  .menu-toggle {
  padding: 1em;
  position: absolute;
  top: 21%;
  right: 3%;
  cursor: pointer;
}

  .text2 {
        position: absolute;
        width: 35%;
        left: 34%;
        top: 0%;
  }

  .back3{

        position: absolute;
        width: 100%;
        bottom: 0px;
  }


  .box6 {

  width: 100%;
  background-color: rgb(252 252 252);
 
  position: relative;
  overflow: hidden;

}

.end {

width: 100%;

}

.box7 {

  width: 100%;
  background-color: rgb(252 252 252);

  position: relative;

}


  .back5 {

  width: 100%;
height: 50%;

}

.back6 {

  width: 100%;
height: 50%;

}

.back7 {

  width: 100%;
height: 50%;

}


  .smart1 {

         z-index: 10;
        position: absolute;
        width: 28%;
        left: 36%;
        object-fit: cover;
        top: 400px;

}


.smart2 {

        z-index: 10;
        position: absolute;
        width: 55%;
        left: 23%;
        object-fit: cover;
        top: 50px;

}

.smart3 {

        z-index: 10;
        position: absolute;
        width: 55%;
        left: 23%;
        object-fit: cover;
        top: 850px;


}

.smart4 {

        z-index: 10;
        position: absolute;
        width: 28%;
        left: 36%;
        object-fit: cover;
        top: 1200px;
      
}

.smart5 {

        z-index: 10;
        position: absolute;
        width: 28%;
        left: 36%;
        object-fit: cover;
        bottom: 100px;

}

.smart6 {

        z-index: 10;
        position: absolute;
        width: 55%;
        left: 23%;
        object-fit: cover;
        top: 1650px;

}




    .stack {
        position: absolute;
        left: 0px;
        top: 0px;
    }





.head {

  position:fixed;
width: 100%;
height: 60px;


}

.ao {

background-color:#f6f3f3f7

}

.iconbox {

position: absolute;
    height: 100%;
    top: 0px;
    width: 100%;

}

    .mo5 {

        z-index: 10;
        position: absolute;
        width: 90%;
        left: 7%;
        object-fit: cover;
        top: 26%;

}

.mo6 {

        z-index: 10;
        position: absolute;
        width: 88%;
        left: 8%;
        object-fit: cover;
        top: 50%;

}

.mo7 {

        z-index: 10;
        position: absolute;
        width: 90%;
        left: 7%;
        object-fit: cover;
        top: 2%;

}

.mo8 {

        z-index: 10;
        position: absolute;
        width: 87%;
        left: 8%;
        object-fit: cover;
        top: 74%;
}






.mo2 {

  z-index: 10;
        position: absolute;
        width: 94%;
        left: 3%;
        object-fit: cover;
        top: 450px;

}


.mo3box1 {

width: 100%;
        height: 129px;
        position: fixed;
        z-index: 20;
        bottom: 0px;


}



.mo3 {

width: 40%;
position: absolute;
z-index: 20;
left: 10%;


}

.mo4 {

width: 40%;
position: absolute;
z-index: 20;
transform: translateX(105%);
left: 10%;


}


.body{
  
  width: 100%;
  position: relative;
  margin: 0px;

}


.html {
  
  position: relative;
  width: 100%;

}


.box1 {

  width: 100%;
  background-color: rgb(255, 255, 255);
  height: 800px;
  position: relative;
  overflow: hidden;

}


.box2 {

  width: 100%;
  height: 100px;
  position: relative;
  overflow: hidden;
  display: none;

}

.box3 {

  width: 100%;
  background-color: rgb(196, 255, 209);
  height: 300px;
  position: relative;
  overflow: hidden;
  display: none;

}


.box3-4 {

  width: 100%;
  background-color: rgb(250 250 250);
  height: 400px;
  position: relative;
  overflow: hidden;

}



.box4 {

  width: 100%;
  background-color: rgb(250 250 250);
  height: 500px;
  position: relative;
  overflow: hidden;
 

}

.box5 {

  width: 100%;
  background-color: rgb(252 252 252);
  height: 2500px;
  position: relative;
  overflow: hidden;

}

.box

.mainimg {

width: 100%;
height: 100%;
position: relative;
object-fit: cover;
        border-radius: 0 0 50% 50% / 12%;


}

.boxback {

width: 100%;


}

.rel1{

height: 150px;

}

.rel2 {

height: 100%;


}

.gogo {

position: relative;
overflow: hidden;
width: 100px;
bottom: 0px;

}

.mtext {

  z-index: 10;
        position: absolute;
        width: 72%;
        left: 15%;
        object-fit: cover;
        top: -10px;

}

.mphone {

 z-index: 10;
        position: absolute;
        width: 30%;
        left: 0px;
        object-fit: cover;
        top: 0px;
        display: none;

}













}

@media (max-width: 600px) {

  .gaga1 {

        position: absolute;
        width: 88%;
        height: 140px;
        bottom: 24%;
        left: 6%;

  }

  .gaga2 {

        position: absolute;
        width: 88%;
        height: 140px;
        bottom: 3%;
        left: 6%;
  

  }

  .drawer {
      border-radius: 15px;
      position: fixed;
      top: 25%;
      right: -125px; /* 닫힌 상태 (핸들만 보임) */
      width: 125px;;
      height: 50%;
      background: #fff;
      box-shadow: -2px 0 5px rgba(0,0,0,0.2);
      transition: right 0.3s ease;
      z-index: 1000;
    }

  .mo9box {
    display: none;

    height: 100%;

  }


  .mmo {

        height: 6%;
        bottom: 10px;
        position: absolute;
        width: 100%;
        z-index: 99;
        left: -2px;
}




  .bb1 {

    margin-top: 50px;
    width: 100%;
    height: 100%;

  }


  .header {

    background-color: #f6f3f3f7;

  }

  .mainimg{
    display: none;
  
  }
  .mainimg1{
    position: absolute;
    width: 100%;
    height: 100%;
  
  }


.youtubebox1 {

    position: absolute;
        width: 90%;
        left: 5%;
        top: 11%;
          display: none;
    

}

.youtubebox2 {

  position: absolute;
        width: 80%;
        top: 30px;


}

.youtubebox3 {

  position: absolute;
    width: 30%;
    display: none;
}

.youtube {

 left: 13%;
        position: absolute;
        width: 100%;
        border-radius: 17px;
        height: 175px;

}




  .menu-toggle {
  padding: 1em;
  position: absolute;
  top: 21%;
  right: 3%;
  cursor: pointer;
}

  .text2 {
   position: absolute;
        width: 50%;
        left: 25%;
        top: 4%;
  }

  .back3{

        position: absolute;
        width: 100%;
        bottom: 0px;
  }


  .box6 {

  width: 100%;
  background-color: rgb(252 252 252);
 
  position: relative;
  overflow: hidden;

}

.end {

width: 100%;

}

.box7 {

  width: 100%;
  background-color: rgb(252 252 252);

  position: relative;

}


  .back5 {

  width: 100%;
height: 50%;

}

.back6 {

  width: 100%;
height: 50%;

}

.back7 {

  width: 100%;
height: 50%;

}


  .smart1 {

         z-index: 10;
        position: absolute;
        width: 65%;
        left: 18%;
        object-fit: cover;
        top: 400px;

}


.smart2 {

        z-index: 10;
        position: absolute;
        width: 90%;
        left: 6%;
        object-fit: cover;
        top: 50px;

}

.smart3 {

  z-index: 10;
        position: absolute;
        width: 90%;
        left: 6%;
        object-fit: cover;
        top: 950px;

}

.smart4 {

  z-index: 10;
        position: absolute;
        width: 65%;
        left: 18%;
        object-fit: cover;
        top: 1300px;
      
}

.smart5 {

  z-index: 10;
        position: absolute;
        width: 65%;
        left: 18%;
        object-fit: cover;
        bottom: 50px;

}

.smart6 {

  z-index: 10;
        position: absolute;
        width: 90%;
        left: 6%;
        object-fit: cover;
        top: 1850px;

}




    .stack {
        position: absolute;
        left: 0px;
        top: 0px;
    }





.head {

  position:fixed;
width: 100%;
height: 60px;


}

.ao {

background-color:#f6f3f3f7

}

.iconbox {

position: absolute;
    height: 100%;
    top: 0px;
    width: 100%;

}

  .mo5 {

        z-index: 10;
        position: absolute;
        width: 90%;
        left: 7%;
        object-fit: cover;
        top: 26%;

}

.mo6 {

        z-index: 10;
        position: absolute;
        width: 88%;
        left: 8%;
        object-fit: cover;
        top: 50%;

}

.mo7 {

        z-index: 10;
        position: absolute;
        width: 90%;
        left: 7%;
        object-fit: cover;
        top: 2%;

}

.mo8 {

        z-index: 10;
        position: absolute;
        width: 87%;
        left: 8%;
        object-fit: cover;
        top: 74%;
}





.mo2 {

        z-index: 10;
        position: absolute;
        width: 94%;
        left: 3%;
        object-fit: cover;
        top: 410px;


}


.mo3box1 {

width: 100%;
        height: 129px;
        position: fixed;
        z-index: 20;
        bottom: 0px;


}



.mo3 {

width: 40%;
position: absolute;
z-index: 20;
left: 10%;


}

.mo4 {

width: 40%;
position: absolute;
z-index: 20;
transform: translateX(105%);
left: 10%;


}


.body{
  
  width: 100%;
  position: relative;
  margin: 0px;

}


.html {
  
  position: relative;
  width: 100%;

}


.box1 {

  width: 100%;
  background-color: rgb(255, 255, 255);
  height: 750px;
  position: relative;
  overflow: hidden;

}


.box2 {

  width: 100%;
  height: 100px;
  position: relative;
  overflow: hidden;
  display: none;

}

.box3 {

  width: 100%;
  background-color: rgb(196, 255, 209);
  height: 300px;
  position: relative;
  overflow: hidden;
  display: none;

}


.box3-4 {

  width: 100%;
  background-color: rgb(250 250 250);
  height: 220px;
  position: relative;
  overflow: hidden;

}



.box4 {

  width: 100%;
  background-color: rgb(250 250 250);
  height: 500px;
  position: relative;
  overflow: hidden;
 

}

.box5 {

  width: 100%;
  background-color: rgb(252 252 252);
  height: 2800px;
  position: relative;
  overflow: hidden;

}

.box

.mainimg {

width: 100%;
height: 100%;
position: relative;
object-fit: cover;
        border-radius: 0 0 50% 50% / 12%;


}

.boxback {

width: 100%;


}

.rel1{

height: 150px;

}

.rel2 {

height: 100%;


}

.gogo {

position: relative;
overflow: hidden;
width: 100px;
bottom: 0px;

}

.mtext {

  z-index: 10;
        position: absolute;
        width: 95%;
        left: 3%;
        object-fit: cover;
        top: 50px;

}

.mphone {

 z-index: 10;
        position: absolute;
        width: 30%;
        left: 0px;
        object-fit: cover;
        top: 0px;
        display: none;

}








}

@media (max-width: 375px) { 

  .gaga1 {

        position: absolute;
        width: 88%;
        height: 120px;
        bottom: 24%;
        left: 6%;

  }

  .gaga2 {

        position: absolute;
        width: 88%;
        height: 120px;
        bottom: 3%;
        left: 6%;
  

  }

  .drawer {
      border-radius: 15px;
      position: fixed;
      top: 25%;
      right: -100px; /* 닫힌 상태 (핸들만 보임) */
      width: 100px;;
      height: 50%;
      background: #fff;
      box-shadow: -2px 0 5px rgba(0,0,0,0.2);
      transition: right 0.3s ease;
      z-index: 1000;
    }

  .mo9box {

    display: none;

    height: 100%;

  }


  .mmo {

        height: 6%;
        bottom: 10px;
        position: absolute;
        width: 100%;
        z-index: 99;
        left: -2px;
}




  .bb1 {

    margin-top: 50px;
    width: 100%;
    height: 100%;

  }


  .header {

    background-color: #f6f3f3f7;

  }

  .mainimg{
    display: none;
  
  }
  .mainimg1{
    position: absolute;
    width: 100%;
    height: 100%;
  
  }


.youtubebox1 {

    position: absolute;
        width: 90%;
        left: 5%;
        top: 11%;
     display: none;

}

.youtubebox2 {

 position: absolute;
        width: 80%;
        top: 30px;
}

.youtubebox3 {

  position: absolute;
    width: 30%;
    display: none;
}

.youtube {

  left: 13%;
        position: absolute;
        width: 100%;
        border-radius: 17px;
        height: 175px;

}




  .menu-toggle {
  padding: 1em;
  position: absolute;
  top: 21%;
  right: 3%;
  cursor: pointer;
}

  .text2 {
   position: absolute;
        width: 50%;
        left: 25%;
        top: 4%;
  }

  .back3{

        position: absolute;
        width: 100%;
        bottom: 0px;
  }


  .box6 {

  width: 100%;
  background-color: rgb(252 252 252);
 
  position: relative;
  overflow: hidden;

}

.end {

width: 100%;

}

.box7 {

  width: 100%;
  background-color: rgb(252 252 252);

  position: relative;

}


  .back5 {

  width: 100%;
height: 50%;

}

.back6 {

  width: 100%;
height: 50%;

}

.back7 {

  width: 100%;
height: 50%;

}


  .smart1 {

         z-index: 10;
        position: absolute;
        width: 65%;
        left: 18%;
        object-fit: cover;
        top: 350px;

}


.smart2 {

        z-index: 10;
        position: absolute;
        width: 90%;
        left: 6%;
        object-fit: cover;
        top: 50px;

}

.smart3 {

  z-index: 10;
        position: absolute;
        width: 90%;
        left: 6%;
        object-fit: cover;
        top: 900px;

}

.smart4 {

  z-index: 10;
        position: absolute;
        width: 65%;
        left: 18%;
        object-fit: cover;
        top: 1200px;
      
}

.smart5 {

  z-index: 10;
        position: absolute;
        width: 65%;
        left: 18%;
        object-fit: cover;
        bottom: 25px;

}

.smart6 {

  z-index: 10;
        position: absolute;
        width: 90%;
        left: 6%;
        object-fit: cover;
        top: 1750px;

}




    .stack {
        position: absolute;
        left: 0px;
        top: 0px;
    }





.head {

  position:fixed;
width: 100%;
height: 60px;


}

.ao {

background-color:#f6f3f3f7

}

.iconbox {

position: absolute;
    height: 100%;
    top: 0px;
    width: 100%;

}

  .mo5 {

        z-index: 10;
        position: absolute;
        width: 90%;
        left: 7%;
        object-fit: cover;
        top: 26%;

}

.mo6 {

        z-index: 10;
        position: absolute;
        width: 88%;
        left: 8%;
        object-fit: cover;
        top: 50%;

}

.mo7 {

        z-index: 10;
        position: absolute;
        width: 90%;
        left: 7%;
        object-fit: cover;
        top: 2%;

}

.mo8 {

        z-index: 10;
        position: absolute;
        width: 87%;
        left: 8%;
        object-fit: cover;
        top: 74%;
}






.mo2 {

  z-index: 10;
        position: absolute;
        width: 94%;
        left: 3%;
        object-fit: cover;
        top: 360px;


}


.mo3box1 {

width: 100%;
        height: 129px;
        position: fixed;
        z-index: 20;
        bottom: 0px;


}



.mo3 {

width: 40%;
position: absolute;
z-index: 20;
left: 10%;


}

.mo4 {

width: 40%;
position: absolute;
z-index: 20;
transform: translateX(105%);
left: 10%;


}


.body{
  
  width: 100%;
  position: relative;
  margin: 0px;

}


.html {
  
  position: relative;
  width: 100%;

}


.box1 {

  width: 100%;
  background-color: rgb(255, 255, 255);
  height: 620px;
  position: relative;
  overflow: hidden;

}


.box2 {

  width: 100%;
  height: 100px;
  position: relative;
  overflow: hidden;
  display: none;

}

.box3 {

  width: 100%;
  background-color: rgb(196, 255, 209);
  height: 300px;
  position: relative;
  overflow: hidden;
  display: none;

}


.box3-4 {

  width: 100%;
  background-color: rgb(250 250 250);
  height: 220px;
  position: relative;
  overflow: hidden;

}



.box4 {

  width: 100%;
  background-color: rgb(250 250 250);
  height: 500px;
  position: relative;
  overflow: hidden;
 

}

.box5 {

  width: 100%;
  background-color: rgb(252 252 252);
  height: 2550px;
  position: relative;
  overflow: hidden;

}

.box

.mainimg {

width: 100%;
height: 100%;
position: relative;
object-fit: cover;
        border-radius: 0 0 50% 50% / 12%;


}

.boxback {

width: 100%;


}

.rel1{

height: 150px;

}

.rel2 {

height: 100%;


}

.gogo {

position: relative;
overflow: hidden;
width: 100px;
bottom: 0px;

}

.mtext {

  z-index: 10;
        position: absolute;
        width: 95%;
        left: 3%;
        object-fit: cover;
        top: 20px;

}

.mphone {

 z-index: 10;
        position: absolute;
        width: 30%;
        left: 0px;
        object-fit: cover;
        top: 0px;
        display: none;

}













}

@media (max-width: 350px) {

  .gaga1 {

        position: absolute;
        width: 88%;
        height: 120px;
        bottom: 24%;
        left: 6%;

  }

  .gaga2 {

        position: absolute;
        width: 88%;
        height: 120px;
        bottom: 3%;
        left: 6%;
  

  }

  .drawer {
      border-radius: 15px;
      position: fixed;
      top: 25%;
      right: -125px; /* 닫힌 상태 (핸들만 보임) */
      width: 125px;;
      height: 50%;
      background: #fff;
      box-shadow: -2px 0 5px rgba(0,0,0,0.2);
      transition: right 0.3s ease;
      z-index: 1000;
    }

  .mo9box {
    display: none;

    height: 100%;
    position: relative;

  }


  .mmo {

height: 6%;
        bottom: 10px;

        position: absolute;
        width: 100%;
        z-index: 99;
        left: 0px;
}




  .bb1 {

    margin-top: 50px;
    width: 100%;
    height: 100%;

  }


  .header {

    background-color: #f6f3f3f7;

  }

  .mainimg{
    display: none;
  
  }
  .mainimg1{
    position: absolute;
    width: 100%;
    height: 100%;
  
  }


.youtubebox1 {

    position: absolute;
        width: 90%;
        left: 5%;
        top: 11%;
         display: none;
    

}

.youtubebox2 {

  position: absolute;
        width: 80%;
        top: 30px;

}

.youtubebox3 {

  position: absolute;
    width: 30%;
    display: none;
}

.youtube {

 left: 13%;
        position: absolute;
        width: 100%;
        border-radius: 17px;
        height: 175px;

}




  .menu-toggle {
  padding: 1em;
  position: absolute;
  top: 21%;
  right: 3%;
  cursor: pointer;
}

  .text2 {
   position: absolute;
        width: 50%;
        left: 25%;
        top: 4%;
  }

  .back3{

        position: absolute;
        width: 100%;
        bottom: 0px;
  }


  .box6 {

  width: 100%;
  background-color: rgb(252 252 252);
 
  position: relative;
  overflow: hidden;

}

.end {

width: 100%;

}

.box7 {

  width: 100%;
  background-color: rgb(252 252 252);

  position: relative;

}


  .back5 {

  width: 100%;
height: 50%;

}

.back6 {

  width: 100%;
height: 50%;

}

.back7 {

  width: 100%;
height: 50%;

}


  .smart1 {

         z-index: 10;
        position: absolute;
        width: 65%;
        left: 18%;
        object-fit: cover;
        top: 400px;

}


.smart2 {

        z-index: 10;
        position: absolute;
        width: 90%;
        left: 6%;
        object-fit: cover;
        top: 50px;

}

.smart3 {

  z-index: 10;
        position: absolute;
        width: 90%;
        left: 6%;
        object-fit: cover;
        top: 950px;

}

.smart4 {

  z-index: 10;
        position: absolute;
        width: 65%;
        left: 18%;
        object-fit: cover;
        top: 1300px;
      
}

.smart5 {

  z-index: 10;
        position: absolute;
        width: 65%;
        left: 18%;
        object-fit: cover;
        bottom: 50px;

}

.smart6 {

  z-index: 10;
        position: absolute;
        width: 90%;
        left: 6%;
        object-fit: cover;
        top: 1850px;

}




    .stack {
        position: absolute;
        left: 0px;
        top: 0px;
    }





.head {

  position:fixed;
width: 100%;
height: 60px;


}

.ao {

background-color:#f6f3f3f7

}

.iconbox {

position: absolute;
    height: 100%;
    top: 0px;
    width: 100%;

}

  .mo5 {

        z-index: 10;
        position: absolute;
        width: 90%;
        left: 7%;
        object-fit: cover;
        top: 26%;

}

.mo6 {

        z-index: 10;
        position: absolute;
        width: 88%;
        left: 8%;
        object-fit: cover;
        top: 50%;

}

.mo7 {

        z-index: 10;
        position: absolute;
        width: 90%;
        left: 7%;
        object-fit: cover;
        top: 2%;

}

.mo8 {

        z-index: 10;
        position: absolute;
        width: 87%;
        left: 8%;
        object-fit: cover;
        top: 74%;
}




.mo2 {

  z-index: 10;
        position: absolute;
        width: 94%;
        left: 3%;
        object-fit: cover;
        top: 372px;


}


.mo3box1 {

width: 100%;
        height: 129px;
        position: fixed;
        z-index: 20;
        bottom: 0px;


}



.mo3 {

width: 40%;
position: absolute;
z-index: 20;
left: 10%;


}

.mo4 {

width: 40%;
position: absolute;
z-index: 20;
transform: translateX(105%);
left: 10%;


}


.body{
  
  width: 100%;
  position: relative;
  margin: 0px;

}


.html {
  
  position: relative;
  width: 100%;

}


.box1 {

  width: 100%;
  background-color: rgb(255, 255, 255);
  height: 620px;
  position: relative;
  overflow: hidden;

}


.box2 {

  width: 100%;
  height: 100px;
  position: relative;
  overflow: hidden;
  display: none;

}

.box3 {

  width: 100%;
  background-color: rgb(196, 255, 209);
  height: 300px;
  position: relative;
  overflow: hidden;
  display: none;

}


.box3-4 {

  width: 100%;
  background-color: rgb(250 250 250);
  height: 220px;
  position: relative;
  overflow: hidden;

}



.box4 {

  width: 100%;
  background-color: rgb(250 250 250);
  height: 500px;
  position: relative;
  overflow: hidden;
 

}

.box5 {

  width: 100%;
  background-color: rgb(252 252 252);
  height: 2700px;
  position: relative;
  overflow: hidden;

}

.box

.mainimg {

width: 100%;
height: 100%;
position: relative;
object-fit: cover;
        border-radius: 0 0 50% 50% / 12%;


}

.boxback {

width: 100%;


}

.rel1{

height: 150px;

}

.rel2 {

height: 100%;


}

.gogo {

position: relative;
overflow: hidden;
width: 100px;
bottom: 0px;

}

.mtext {

  z-index: 10;
        position: absolute;
        width: 95%;
        left: 3%;
        object-fit: cover;
        top: 50px;

}

.mphone {

 z-index: 10;
        position: absolute;
        width: 30%;
        left: 0px;
        object-fit: cover;
        top: 0px;
        display: none;

}







}



/* 드로어 */
   
    .drawer.open {
      right: 0; /* 열림 */
    }

    /* 핸들 (살짝 보이는 부분) */
    .drawer-handle {
      box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
      position: absolute;
      left: -30px; /* 드로어 오른쪽 밖에서 30px 삐죽 나옴 */
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 80px;
      background: #ffffff;
      color: #0829ff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 8px 0 0 8px;
      font-size: 18px;
      font-weight: bold;
      z-index: 1001;
      user-select: none;
    }

    /* 메뉴 리스트 */
    .drawer ul {
      list-style: none;
      padding: 20px;
      margin: 0;
    }
    .drawer ul li {
      padding: 12px 0;
      border-bottom: 1px solid #eee;
    }