@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600&family=Noto+Sans+KR:wght@300;400;600&family=Noto+Serif+KR:wght@400;500&display=swap');


  @font-face {
    font-family: 'NanumSquareNeo-Variable';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'yg-jalnan';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


a{text-decoration:none;}
span{ font-family: 'Noto Sans KR', sans-serif; text-decoration:none;  font-weight:400;}
div{ font-family: 'Noto Sans KR', sans-serif; text-decoration:none;  font-weight:400;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img { margin:0; padding:0; border:0; letter-spacing:0; text-decoration:none; word-break: keep-all;}
div{ font-family: 'Noto Sans KR', sans-serif;  font-weight:400; }
span{ font-family: 'Noto Sans KR', sans-serif;  font-weight:400;}
body{ overflow:auto; height:100%; text-decoration:none;}
html{height:100%;text-decoration:none; min-width:1000px;}
ol, ul {
	display: inline-block;   list-style: none;  text-decoration:none;
}

body{width:100%; height:100%;min-width:1000px;position:relative;}

#top{width:100%; padding-top:30px; padding-bottom:15px; border-bottom:5px solid #7947ff; position:relative;
background-color:#fff;}
#logo{width:220px; position:absolute; left:5%; bottom:-1px;}
#menu{width:50%; padding-left:50%;}
#menu ul{width:100%; display:flex; justify-content: flex-end; padding-right:5%; box-sizing:border-box;}
#menu ul li{width:auto;  }
#menu ul li a{padding:7px 15px; display:inline-block; font-size:17px; font-weight:500; color:#000;}
#cont{width:100%;}

.le_1{width:100%;    
display: flex;
    justify-content: center;
    align-items: center;    flex-direction: column;
height:100vh;}
.le_1_1{width:80%; margin:0px auto; max-width:900px;}

.le_1_2{font-size:50px; font-weight:400;     font-family: 'yg-jalnan'; text-align:center; padding-top:15px;}
.le_1_2 p{font-size:22px; font-family: 'Noto Sans KR', sans-serif; padding-top:15px;}

.le_1_3{position:fixed; 
    z-index: -1;
    width: 70%;
    right: -22%;
    top:-35%;
}



.le_2{width:100%; height:100vh;}
.le_2_1{width:90%; margin:0px auto; font-size:88px;font-family: 'yg-jalnan';  }
.le_2_1 span{color:#7947ff; font-family: 'yg-jalnan'; }

.le_2_2{width:95%; padding-left:5%; display:flex; }

.le_2_2_1{width:45%; padding-top:40px;}

.le_2_2_1 p{font-size:50px;font-family: 'yg-jalnan'; color:#8e8e8e;}
.le_2_2_1 p.acti{color:#000;}

.le_2_2_2{width:55vw; display:flex;

    width: 55vw;
    display: flex
;
    overflow-x: hidden;
 
    padding:50px;
       padding-top: 30px;
}

.le_2_2_2_1{width:100%; flex-shrink: 0;}



#popdde_1{position:fixed; right:10px; bottom:10px; width:250px; padding:15px 20px; border-radius:15px;
background-color:#fff;
box-shadow:3px 3px 10px rgba(0,0,0,0.7);}
.popdde_1_2{width:100%;}
.popdde_1_2 ul{width:100%; display:flex; gap:4px; justify-content: center;}

.popdde_1_2 ul li p{background-color:#000; color:#fff; border-radius:7px; padding:2px 6px; font-family: 'yg-jalnan'; }
.popdde_1_2 ul li:nth-child(1) p{background-color:#e80000;}
.popdde_1_2 ul li:nth-child(2) p{background-color:#f2e000; color:#000;}



.popdde_1_1{ padding-bottom: 5px; font-family: 'yg-jalnan'; 
    font-size: 16px;
  }
   

  .le_2_2_2_1_1{
  background-color:#fff;
  border-radius:25px; padding:40px 50px; box-sizing:border-box; width:80%;
  box-shadow:10px 15px 25px rgba(0,0,0,0.6);
  }

.le_2_2_2_1_1 .tst_1{
font-size:18px; padding-bottom:15px;
}
.le_2_2_2_1_1 .tst_2{
font-size:40px; font-family: 'yg-jalnan';  line-height:130%;
}
.le_2_2_2_1_1 .tst_3{
font-size:20px; font-family: 'yg-jalnan'; color:#fff; background-color:#7947ff; margin-top:20px;
display:inline-block; width:auto; padding:10px 15px;
margin-top:30px;
}

.le_3{width:90%; margin:0px auto; padding-top:30px; padding-bottom:80px; position:relative; }
.le_3 p:nth-child(1){
width:70%; max-width:600px;
}
.le_3 p:nth-child(2){
    font-size:40px; font-family: 'yg-jalnan';
    padding-top:50px; padding-bottom:40px;
}

.le_3 p:nth-child(3){
    font-size:25px;
}

.le_4{width:100%; margin:0px auto; display:flex;     flex-direction: column; padding-bottom:50px; padding-top:40px;}
.le_4_1{font-size:40px;  font-family: 'yg-jalnan'; width:45%; padding-bottom: 30px;}
.le_4_1 span{color:#7947ff; font-family: 'yg-jalnan'; }
.le_4_2{width:45%;

  background-color:#fff;
  border-radius:25px; padding:40px 50px; box-sizing:border-box; 
  box-shadow:10px 15px 25px rgba(0,0,0,0.6);
  margin-left:15px;

}

#le_3_right {
    width: 45%;

    position: absolute;
    right: 0px;
    top: 0px;
    height: 600px;
}

#bottom{width:100%; border-top:3px solid #7947ff; background-color:#fff; color:#000; padding-top:25px; padding-bottom:25px;}

#bottom p{text-align:center; font-size:15px;}





#mm1{width:100%; height:700px; background-image:url(../images/s1.jpg); background-size:cover; background-position:0% 0%;
}
#mm1_1{width:100%; padding-left:60%; box-sizing:border-box; display:flex;
justify-content: center;
    height: 100%;
    flex-direction: column;
}
#mm1_1 p:nth-child(1){width:60%;}
#mm1_1 p:nth-child(2){
      font-size : 31px;
  line-height : 52.99px;
  color : #000000;
  color : rgb(0, 0, 0);
}
#mm1_1 p:nth-child(3){
      font-size : 53px;
  line-height : 89.63px;
  color : #000000;
  padding-bottom:50px;
}
#mm1_1 p:nth-child(4){
    width:220px; background-color:#000;
    padding-top:10px; padding-bottom:10px;
    text-align:center; color:#fff;
    border:1px solid #000;
}
#mm1_1 p:nth-child(4) a{width:100%; color:#fff;}

#mm1_1 p:nth-child(4):hover{background-color:rgba(0,0,0,0);}
#mm1_1 p:nth-child(4):hover a{color:#000;}


#mm2{width:100%; padding-top:90px; padding-bottom:90px;background-color:#E6E6E6; position:relative;}
#mm2_1{width:90%; margin:0px auto; text-align:center;}

#mm2_1 p:nth-child(1){
width:130px; margin:0px auto; 
position:relative; z-index:1;
}
#mm2_1 p:nth-child(2){
  font-size : 45px; font-weight:500;
  color : #000000;
  position:relative; z-index:1;

  
}
#mm2_1 p:nth-child(3){
  font-size : 60px;
  line-height : 86.92px;
  color : #000000;
  position:relative; z-index:1;
  padding-top:70px;
  padding-bottom:40px;
}
#mm2_1 p:nth-child(4){
      font-size : 26px;
  line-height : 39.52px;
  color : #000000;
  position:relative; z-index:1;
}
#mm2_1 p:nth-child(4) span{
    font-size:43px;
    font-weight:600;
}
#mm2_1 p:nth-child(5){
    width:100px; position:absolute; top:200px; left:47%; z-index:0;
}

#mm2-1{width:100%; padding-top:180px; padding-bottom:180px; position:relative;}
#mm2-1_1{position:absolute; left:5%; top:0px;
  font-size : 170px;
  line-height : 105px;
  color : #E6E6E6;
font-weight:900;}
#mm2-1_3{position:absolute; right:5%; bottom:0px;
  font-size : 170px;
  line-height : 145px;
  color : #353535;
font-weight:900;}
#mm2-1_2{
  font-size : 36px;
  line-height : 57px;
  color : #000000;
  text-align:center;
}

#mm2-1_2 span{font-size:43px; font-weight:600;}



#mm3{width:100%; background-color:#353535; padding-top:100px; padding-bottom:250px;}
#mm3_1{width:90%; max-width:1480px; margin:0px auto;}
#mm3_1 p:nth-child(1){width:200px; margin:0px auto;}
#mm3_1 p:nth-child(2){font-size:55px; font-weight:600; color:#fff; text-align:center; padding-top:7px;}


#mm4{
    width: 90%;
    max-width: 1280px;
    display: flex;
    margin: 0px auto;
    margin-top: -150px;
    justify-content: space-around;
}

.mm4_1{
        display: flex;
    width: 330px;
    border-radius: 30px;
    background-color: #fff;
    height: auto;
    box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.2);
    filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=7, OffY=7, Color='#000000');
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: space-around;
    border:1px solid rgba(255,255,255,0.4);

}

.mm4_1 p:nth-child(1){
  font-size : 42px;
  line-height : 50.84px;
  color : #000000;}

.mm4_1 p:nth-child(2) a{
    text-align:center; padding-top:20px;
      font-size : 26px;
  line-height : 36.6px;
  color : #000000;
}

.mm4_1:hover{background-color:#353535;}
.mm4_1:hover p:nth-child(1){color:#fff;}
.mm4_1:hover p:nth-child(2) a{color:#fff;}


#mm5{width:90%; max-width:900px; margin:0px auto; margin-top:150px; margin-bottom:70px; height:600px; }
#foot{width:100%; background-color:#353535; padding-top:40px; padding-bottom:40px;}
#foot p{text-align:center; font-size:17px; color:#fff; line-height:25px;}




#ss_1{width:100%; border-bottom:1px solid #ddd;
padding-top:60px; padding-bottom:40px;}
#ss_1_1{width:90%;  margin:0px auto;}
#ss_1_1 p:nth-child(1){width:120px;}
#ss_1_1 p:nth-child(2){ font-size : 53px;
  line-height :70px;
  color : #000000;
padding-bottom:15px;
}
  #ss_1_1 p:nth-child(3){

    font-size : 26px;
  line-height : 52.99px;
  color : #000000;
  }

#ss_2{width:90%; max-width:1259px; margin:0px auto; padding-top:110px; padding-bottom:70px;}
#ss_3{width:90%; margin:0px auto; text-align:center;}
#ss_3 p:nth-child(1){
  font-size : 33px;
  line-height : 68.03px;
  color : #000000;
}
#ss_3 p:nth-child(2){
  font-size : 27px;
  color : #353535;
}


#ss_4{width:90%; margin:0px auto; padding-top:70px;}
#ss_4_1{  font-size : 55px;
  line-height : 113.3px;
  color : #000000;
}

#ss_5{width:90%; margin:0px auto; padding-bottom:70px;}
.ss_txt_1{width:100%; display:flex; align-items: center;}
.ss_txt_1_1{width:112px;}
.ss_txt_1_2{width:90%;
  font-size : 33px;
  line-height : 43px;
  color : #000000;
  padding-bottom:15px;
  padding-left:10px;
}
.ss_imgt_1{width:100%; display:flex; }
.ss_imgt_1_1{width:50%; max-width:834px;}
.ss_imgt_1_2{width:90%;max-width:1508px; margin:0px auto;}
.ss_txt_2{width:90%; max-width:1408px; margin:0px auto;
  font-size : 33px;
  line-height : 68.03px;
  color : #000000;
}

#ss6{width:100%; padding-top:100px; background-color:#E6E6E6; padding-bottom:250px;}
#ss6 p{width:90%; max-width:921px; margin:0px auto;}

#ss7{width:90%; max-width:850px; margin:0px auto; margin-top:-100px;}
#bee{width:100%; height:80px;}

#sb_1{width:90%; max-width:1480px; margin:0px auto; padding-top:120px;}

.sb_1_1{width:33%; max-width:440px;}
.sb_1_1_1{width:100%; padding-bottom:20px;}
.sb_1_1_2{width:95%;  margin:0px auto; display:flex;     align-items: flex-end;}
.sb_1_1_2_1{width:50%;}
.sb_1_1_2_1 p:nth-child(2){
  font-size : 32px;
  line-height : 42px;
  color : #000000;
}
.sb_1_1_2_2{width:50%; text-align:right;
  font-size : 32px;
  line-height : 42px;
  color : #000000;
}
.sb_1_1_3{width:95%; margin:0px auto; display:flex; gap:10px; padding-top:15px;}

.sb_1_1_3_1{
    width: 100%;
    background-color: #000;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
}
.sb_1_1_3_1 a{color:#fff; width:100%; height:100%; display:block;}

 @media screen and (max-width: 1870px) {
 #mm1_1 {
padding-left: 50vw;
 }
 }


 @media screen and (max-width: 1620px) {

 #mm1 {

    background-position: 30% 0%;
}


 }

 
 @media screen and (max-width: 11193px) {
 #mm1_1 { width:90%;
 }









  @media screen and (max-width: 900px) {

 #mm1 {
    width: 100%;
    height: 500px;
    background-image: url(../images/s1.jpg);
    background-size: auto 250px;
    background-position: 12% 0%;
    background-repeat: no-repeat;
}

 #mm1_1 {
padding-left: 5vw;
display:block;
 padding-top: 270px;
 height:auto;


 }
 #mm1_1 p:nth-child(2) {
    font-size: 20px;
    line-height: 30px;
    color: #000000;
    color: rgb(0, 0, 0);
}
#mm1_1 p:nth-child(1) {
    width: 80px;
}

#mm1_1 p:nth-child(3) {
    font-size: 22px;
    line-height: 40px;
    color: #000000;
    padding-bottom: 20px;
}
#mm1_1 p:nth-child(4) {margin:0px auto}
#logo {
    width: 100px;
    padding-left: 15px;
}
#menu ul li a{font-size:16px;}
#menu {
    width: 100%;
    padding-left: 80px;
}
#menu ul li {
    width: 33%;
}
#mm2_1 p:nth-child(1){width:100px;}
#mm2_1 p:nth-child(2){font-size:25px;}
#mm2_1 p:nth-child(3){font-size:30px; line-height:40px;}
#mm2_1 p:nth-child(4){font-size:18px; line-height:24px;}
#mm2_1 p:nth-child(4) span{font-size:30px;}
#mm2_1 p:nth-child(5){left:38%;}
#mm2-1_1 {
    position: absolute;
    left: 5%;
    top: 0px;
    font-size: 85px;
    line-height: 50px;
    color: #E6E6E6;
    font-weight: 900;
}
#mm2-1_3 {
    position: absolute;
    right: 5%;
    bottom: 0px;
    font-size: 85px;
    line-height: 70px;
    color: #353535;
    font-weight: 900;
}
#mm2-1_2 {
    width: 90%;
    font-size: 18px;
    line-height: 40px;
    color: #000000;
    text-align: center;
    margin: 0px auto;
}
#mm2-1_2 span{font-size:30px;}
#mm3_1 p:nth-child(2){font-size:30px;}
#mm4{flex-direction: column;     align-items: center;}
.mm4_1{width:100%; margin-bottom:15px; text-align:center; border-radius:20px;}
.mm4_1 p:nth-child(1){font-size:25px;}
.mm4_1 p:nth-child(2) a{font-size:18px;}

#mm5 {
    width: 90%;
    max-width: 900px;
    margin: 0px auto;
    margin-top: 70px;
    margin-bottom: 70px;
    height: 300px;
}
#pop{left:10px; top:10px;}

#ss_1_1 p:nth-child(1){width:100px;}
#ss_1_1 p:nth-child(2) {
    font-size: 40px;
    line-height: 50px;
    color: #000000;
    padding-bottom: 15px;
}
#ss_1_1 p:nth-child(3) {
    font-size: 16px;
    line-height: 20px;
    color: #000000;
}
#ss_3 p:nth-child(1) {
    font-size: 21px;
    line-height: 35px;
    color: #000000;
}
#ss_3 p:nth-child(2){font-size:16px; padding-top:15px;}

#ss_4_1{font-size:30px; line-height:45px;}


.ss_txt_1_2 {
    width: 90%;
    font-size: 20px;
    line-height: 30px;
    color: #000000;
    padding-bottom: 15px;
    padding-left: 10px;
}
.ss_txt_1 {margin-top:20px;}


.ss_imgt_1 {
    flex-direction: column; display:block;
}
.ss_imgt_1_1{width:90%; margin:0px auto;}
.ss_txt_2 {font-size:16px; line-height:22px; padding-top:20px;}
.sb_1_1{width:100%;}

  }





.sub_product_style{width:100%;  
 background-color: #fff;
        box-shadow: 15px 20px 25px rgba(0, 0, 0, 0.8);
        margin-top: 50px;
        border-radius: 30px;
        overflow:hidden;

}


.product_le_2_2{width:95%; padding-left:5%; display:flex; }

.product_le_2_2_1{width:22%; padding-top:70px; position:fixed;}

.product_le_2_2_1 p{font-size:30px;font-family: 'yg-jalnan'; color:#8e8e8e;}
.product_le_2_2_1 p.acti{color:#000;}
.product_le_2_2_2{padding-left:25%; width:70%; padding-bottom:100px;}
.product_le_2_2_2-2{ width:80%; margin:0px auto; padding-bottom:100px;}

#sub_product_1 p:nth-child(1){width:100%;  padding-bottom:20px;}
#sub_product_1 p:nth-child(2){width:100%; max-width:819px; padding-bottom:20px; margin:0px auto;}
#sub_product_1 p:nth-child(3){width:100%; max-width:741px; padding-bottom:20px; margin:0px auto;}
#sub_product_1 p:nth-child(4){width:100%; max-width:790px; padding-bottom:20px; margin:0px auto;}
#sub_product_1 p:nth-child(5){width:100%; max-width:810px; padding-bottom:20px; margin:0px auto; }
#sub_product_1 p:nth-child(6){width:100%; max-width:820px; padding-bottom:20px; margin:0px auto; }

.le_2_2_2 {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.le_slider_wrapper {
  display: flex;
  width: 200%; /* 2개의 슬라이드 */
  transition: transform 0.5s ease;
}

.le_2_2_2_1 {
  width: 100%;
  flex-shrink: 0;
  padding: 20px;
  box-sizing: border-box;
}

.le_2_2_1 p {
  cursor: pointer;
  display: inline-block;
  margin-right: 20px;
  font-weight: normal;
}


@media screen and (max-width: 880px) {

  html, body {
    min-width: unset;
    width: 100%;
    overflow-x: hidden;
  }

  #top {
    padding-top: 15px;
    padding-bottom: 1px;
        border-bottom: 1px solid #7947ff;
  }

  #logo {
    width: 120px;
    left: 10px;
    bottom: 0;
    position:relative;
  }

  #menu {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing:border-box;
    padding-top: 10px;
        border-top: 5px solid #7947ff;
        padding-bottom:1px;
  }

  #menu ul {

    padding-right: 5px;
    gap: 5px;
  }

  #menu ul li a {
    font-size: 12px;
    padding: 5px 10px;
  }

  .le_1 {
    height: auto;
    padding: 100px 0;
  }

  .le_1_1 {
    width: 90%;
  }

  .le_1_2 {
    font-size: 32px;
    text-align: center;
    padding-top: 20px;
  }

  .le_1_2 p {
    font-size: 16px;
    padding-top: 10px;
  }

  .le_1_3 {
    display: none;
  }

  .le_2 {
    height: auto;
    padding: 50px 0;
  }

  .le_2_1 {
    font-size: 36px;
    text-align: center;
  }

  .le_2_2 {
    flex-direction: column;
    padding: 0;
    width: 100%;
  }

  .le_2_2_1 {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0;
    margin-bottom: 20px;
  }

  .le_2_2_1 p {
    font-size: 18px;
  }

  .le_2_2_2 {
    width: 100%;
    padding: 0 15px;
  }

  .le_slider_wrapper {
    width: 200%;
    display: flex;
    transition: transform 0.5s ease;
  }

  .le_2_2_2_1 {
    width: 100%;
    flex-shrink: 0;
    padding: 15px;
    box-sizing: border-box;
  }

  .le_2_2_2_1_1 {
    padding: 20px;
    border-radius: 20px;
    box-shadow: 6px 10px 20px rgba(0,0,0,0.5);
  }

  .le_2_2_2_1_1 .tst_1 {
    font-size: 14px;
    padding-bottom: 10px;
  }

  .le_2_2_2_1_1 .tst_2 {
    font-size: 24px;
  }

  .le_2_2_2_1_1 .tst_3 {
    font-size: 16px;
    margin-top: 20px;
    padding: 10px 15px;
  }

  .le_3 {
    width: 90%;
    padding-top: 30px;
    padding-bottom: 50px;
  }

  .le_3 p:nth-child(1) {
    width: 100%;
  }

  .le_3 p:nth-child(2) {
    font-size: 20px;
    padding-top: 30px;
    padding-bottom: 20px;
  }

  .le_3 p:nth-child(3) {
    font-size: 18px;
  }

  .le_4 {
    flex-direction: column;
    padding: 30px 15px;
  }

  .le_4_1, .le_4_2 {
    width: 90%; padding:15px 20px;
  }
  .le_4_1{font-size:30px;}
  #bottom {
    padding: 15px 10px;
    padding-bottom:150px;
  }

  #bottom p {
    font-size: 13px; width:90%;
  }

  #popdde_1 {
    width: 30%;
    bottom: 15px;
    right: 5%; z-index:999;
  }
  .popdde_1_1{font-size:11px;}
  .popdde_1_2 ul {
    gap: 6px;
  }

  .popdde_1_2 ul li p {
    font-size: 10px;
    padding: 2px 5px;
  }

  .product_le_2_2_2-2{width:90%;}

      .product_le_2_2_1 p{font-size:12px;}
  #ss_1_1 p:nth-child(2) {
    font-size: 30px;
    line-height: 40px;
  }

  #ss_1_1 p:nth-child(3) {
    font-size: 16px;
    line-height: 24px;
  }

  #ss_3 p:nth-child(1) {
    font-size: 20px;
    line-height: 30px;
  }

  #ss_3 p:nth-child(2) {
    font-size: 14px;
    padding-top: 10px;
  }

  .ss_txt_1_2 {
    font-size: 18px;
    line-height: 26px;
  }

  .ss_imgt_1 {
    flex-direction: column;
  }

  .ss_imgt_1_1 {
    width: 100%;
  }

  .ss_txt_2 {
    font-size: 16px;
    line-height: 24px;
  }

  #foot p {
    font-size: 14px;
    line-height: 20px;
  }

}