:root {
  --bg: rgba(239, 242, 249, 0.98);
  --point_bg: #6E7F8B;
  --white: white;
  --green: #006602;
  --box_sh: -5px -5px 10px 0px #FFF, 5px 5px 10px 0px rgba(0, 0, 0, 0.30);
  --font_gray: #3D3D3D;
  --pastel_green: #9AD3CC;
  --pastel_purple: #5C59C2;
  --point_gray: #E4EBF1;
  --btn_gray : #B5BFC6;
}
/*@font-face {*/
/*  font-family: 'CustomFont';*/
/*  src: url('/css/font1.woff') format('woff');*/
/*  font-weight: normal;*/
/*  font-style: normal;*/
/*}*/

/*.font_lage {*/
/*  font-family: 'CustomFont';*/
/*}*/

.util >.onley_pc{
  display: none;
}
.onley_mo{
  display: block;
  flex: auto;
  display: flex;
  align-items: center;
  justify-content: end;
}
.onley_mo div{
  margin-right: 6px;
}
.onley_mo a{
  font-size: 0.7rem;
}
.onley_mo div a:before{
  border-radius: 100%;
}


.security_title{
text-align: center;
}
.not_a{
  display: block;
  width: 50%;
  object-fit: scale-down;
}

.modal-open {
  overflow: hidden;
}

html {
  font-size: 16px;
}

/**/
.conArea {
  width: 100%;
}

.sectionComponent {
  margin-top: 40px;
  display: flex;
  width: 100%;
}

#contents .payment_ul,
#contents .usageList,
#contents .partner_ul {
  width: 100%;
  margin-top: 10px
}

#contents .payment_ul li .textWrap,
#contents .usageList li {
  padding: 0.7rem;
  position: relative;
  width: 70%;
  margin-bottom: 10px;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
  margin: 25px auto 20px;
}


/*ÆùÆ®*/
.font_lage {
  font-size: 1rem;
}

.font_normal {
  font-size: .8rem;
}
.font_middle{
  font-size: 1rem;
}

.font_small {
  font-size: .7rem;
  text-align: left;
}

.font_middle_wp{
  font-size: 4vw; /* ºäÆ÷Æ® ³ÊºñÀÇ 2% */
}
.fontBtn {
  padding: 0.2rem 0.2rem;
  border-radius: 5px;
  font-size: .5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}



.font_description {
  color: #6E7F8B;
  font-size: .7rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06rem;
}




.font_pont_text_simple {
  color: #546b58 ;
  line-height: normal;
}


.font_pont_green {
  color: var(--green);
  line-height: normal;
}





/* ¹öÆ°*/
.putBtn05{
  border: initial;
  border-radius: 0.3rem;
  font-weight: 800;
  text-align: center;
  display: block;
  padding: 0.2rem;
  /*width: 100%;*/
  background: var(--btn_gray);
  color: var(--white);
}

/* etc */
.bk{
  display: block;
}

.krw{
  /*display: block;*/
}
.hide_body{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  display: none;
}

.wechat_modal{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  display: none;
}


.popupW {
  display: none;
  width: 80vw;
  position: fixed;
  z-index: 1000;
  max-height: 80vh;
  border-radius: 0.75rem;
  background: rgba(239, 242, 249, 0.98);
  box-shadow: -20px -20px 30px 0px #FFF, 20px 20px 30px 0px rgba(40, 37, 37, 0.26);

}

.popupW .joinCont{
  padding: 1rem;
  box-sizing: border-box;
}

.popupW  .component_font_title{
  margin: 10px 0 5px;
}

.popupW .joinCont  .font_normal{
  margin-bottom: 5px;
}
.popupW ol li{
  line-height: 1.2;
}
.popupW .box{
  width: 90%;
  line-height: 1.5;
}
.popTit {
  color: var(--white);
  font-weight: 800;
  position: sticky;
  top: 0;
  background: var(--point_bg);
  padding: 1rem;
  border-bottom: 1px solid #ddd;
  z-index: 10;
  box-sizing: border-box;
}
.popupW {
  overflow-y: auto;
  max-height: 80vh; /* Adjust height as needed */
  /* Other existing styles */
}

.popPaySum{
  /*display: flex;*/
  /*justify-content: space-between;*/
  /*position: absolute;*/
  /*top: -134px;*/
  /*left: 0;*/
  /*right: 0;*/
  /*height: auto;*/
  /*background: var(--white);*/
  /*border: 2px solid var(--green);*/
  /*z-index: 20;*/
  /*border-radius: 30px;*/
}
.btnClose02{
  position: absolute;
  right: -20px;
  top: -20px;
}
.popPaySum::before {
  /*content: "";*/
  /*position: absolute;*/
  /*z-index: 10;*/
  /*bottom: -26px;*/
  /*left: 50%;*/
  /*width: 31px;*/
  /*height: 27px;*/
  /*margin-left: -15.5px;*/
  /*background: url(../img/popup/bgButtomB.png) no-repeat;*/
  /*background-size: 100%;*/
}

.popPayCont {
  /*position: relative;*/
  /*padding: 20px 36px 24px;*/
  /*margin: 0;*/
  /*display: table;*/
  /*line-height: 100%;*/
  /*text-align: center;*/
  /*letter-spacing: -0.5px;*/
  /*width: 100%;*/
  /*box-sizing: border-box;*/
}

.icoClose{
  display: table-cell;
  margin: 0 auto;
  vertical-align: middle;
  width: 43px;
  height: 43px;
  text-align: center;
  border-radius: 50%;
  background: var(--pastel_green);
}

.btnClose {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}


.wechat_modal_Close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.tblStyle01 {
  width: 100%;
  border-collapse: collapse;
}




table {
  width: 100%;
  border-collapse: collapse;
}
table th, table td {
  font-size: 0.7rem;
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left; /* ÅؽºÆ® ¿ÞÂÊ Á¤·Ä */
  vertical-align: middle; /* ¼¼·Î ¹æÇâ Áß¾Ó Á¤·Ä */
  line-height: 1.5; /* Çà ³ôÀÌ Á¶Àý */
}
table th {
  background-color: #f2f2f2;
  color: black;
}
table td {
  word-wrap: break-word; /* ±ä ´Ü¾î°¡ ÇàÀ» ³Ñ¾î°¥ ¶§ ÁÙ¹Ù²Þ */
}


input, select {
  box-sizing: border-box; /* ¹Ú½º Å©±â °è»ê ¹æ½Ä º¯°æ */
  border: initial;/* ¸íÈ®ÇÑ Å׵θ® ½ºÅ¸ÀÏ ¼³Á¤ */
}

input.design_box, select.design_box {
  padding: 0 0.5rem;
  border-radius: .3rem;
  width: 100%;
  height: 100%;
  font-size: 1rem; /* inputÀÇ font-size¸¦ select¿Í µ¿ÀÏÇÏ°Ô Á¶Á¤ */
  box-shadow: -5px -5px 10px 0px #FFF, 5px 5px 10px 0px rgba(0, 0, 0, 0.30);
}
input.design_box{
  font-size: 0.8rem;
}

input.design_box {
  background: rgba(239, 242, 249, 0.98);
  box-shadow: -5px -5px 4px 0px #FFF inset, 5px 5px 4px 0px rgba(0, 0, 0, 0.25) inset;
}

select{
  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1,color=#FF0000);

}


#text{
  color: #6E7F8B;
  font-family: NanumBarunGothic;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2;
}




.NanumBarun_600 {
  color: #6E7F8B;
  font-family: NanumBarunGothic;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
}

.NanumBarun_600_2 {
  font-family: NanumBarunGothic;
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: var(--point_bg);
}

.NanumBarun_600_1 {
  color: #6E7F8B;
  text-align: center;
  font-family: NanumBarunGothic;
  font-size: .7rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.NanumBarun_600_3 {
  color: #3D3D3D;
  font-family: NanumBarunGothic;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}


.NanumBarun_600_4 {
  color: #6E7F8B;
  font-family: NanumBarunGothic;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.1;
}

.Nanum_800 {
  font-family: NanumGothic;
  font-size: .7rem;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}


.Nanum_400_1_m {
  margin-top: 0.5rem;
  color: #6E7F8B;
  font-family: NanumGothic;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.06rem;
  display: block;
}

.Nanum_400_1 {
  color: #3D3D3D;
  font-family: NanumGothic;
  font-size: 5vw;
  font-style: normal;
  font-weight: 400;
  line-height: 7vw; /* 180% */
}

.Nanum_400_2 {
  color: #3D3D3D;
  font-family: NanumGothic;
  font-size: 2vw;
  font-style: normal;
  font-weight: 400;
  line-height: 7vw; /* 180% */
}

.security_text_Wrap {
  margin-top: .5rem;
  text-align: right;
}

.security_text_Wrap p {
  word-break: keep-all;
}

.font_small {
  color: #EFEFEF;
  font-family: NanumGothic;
  font-size: 1rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.625rem; /* 162.5% */
}

footer .font_small{
  font-size: .7rem;
  line-height: 1.2rem;

}

.NanumGothic_800{
  color: #3D3D3D;
  font-family: NanumGothic;
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.5rem; /* 180% */
}

.NanumGothic_700{
  color: #3D3D3D;
  font-family: NanumGothic;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3rem; 
}


.selected {
  transform: scale(1.5); /* Å©±â¸¦ 1.5¹è·Î Áõ°¡ */
  transition: transform 0.3s; /* ºÎµå·¯¿î º¯È¯ È¿°ú */
  position: relative; /* »ó´ëÀû À§Ä¡ */
  z-index: 100; /* ´Ù¸¥ ¿ä¼Ò À§¿¡ Ç¥½Ã */
}




.lightbox {
  display: none; /* ±âº»ÀûÀ¸·Î ¼û±è */
  position: absolute; /* Ŭ¸¯µÈ ¿ä¼Ò À§Ä¡¿¡ µû¶ó º¯°æ */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* ´Ù¸¥ ¿ä¼Ò À§¿¡ */
  width: auto;
  height: auto;
  max-width: 80%; /* ÃÖ´ë ³Êºñ */
  max-height: 80%; /* ÃÖ´ë ³ôÀÌ */
  border-radius: 10px; /* µÕ±Ù ¸ð¼­¸® */
  background: rgba(239, 242, 249, 0.98); /* ¹è°æ»ö */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* ±×¸²ÀÚ È¿°ú */
  padding: 20px; /* ³»ºÎ ¿©¹é */
}

.lightbox_w{
  overflow-y: hidden;
  max-height: 80vh;
  animation: 0.5s ease 0s 1 normal none running zoomInAnimation;
  width: 80vw;
  position: fixed;
  border-radius: 0.75rem;
  background: rgba(239, 242, 249, 0.98);
  box-shadow: -20px -20px 30px 0px #FFF, 20px 20px 30px 0px rgba(40, 37, 37, 0.26);
}

/* ´Ý±â ¹öÆ° ½ºÅ¸ÀÏ */
.close {
  position: absolute;
  top: 0px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
#lightbox .content{
  padding: 1rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
#lightbox .content .cover{
  position: relative;
  display: inline-block;
}
.lightbox-content {
  display: block; /* Àüü ºí·ÏÀ¸·Î Ç¥½Ã */
  max-width: 100%; /* À̹ÌÁö°¡ ÄÁÅ×ÀÌ³Ê ³Êºñ¸¦ ÃÊ°úÇÏÁö ¾Êµµ·Ï */
  height: auto; /* À̹ÌÁöÀÇ ºñÀ²À» À¯Áö */

}

/* Lightbox ÅؽºÆ® ½ºÅ¸ÀÏ */
.lightbox-text {
  position: absolute; /* ÄÁÅ×À̳Ê(.cover)¿¡ ´ëÇØ Àý´ë À§Ä¡ */
  bottom: 0; /* ¾Æ·¡ÂÊ¿¡ À§Ä¡ */
  left: 0; /* ¿ÞÂÊ¿¡ À§Ä¡ */
  width: 100%; /* ÄÁÅ×ÀÌ³Ê ³Êºñ¿Í µ¿ÀÏÇÏ°Ô ¼³Á¤ */
  box-sizing: border-box; /* ÆеùÀ» Æ÷ÇÔÇÑ ³Êºñ °è»ê */
  text-align: center; /* ÅؽºÆ® Áß¾Ó Á¤·Ä */

}

.lightbox-text.type1{
  top: 20%;
  padding: 20%;
}
.lightbox-text.type2{
  top: 18%;
  padding: 10%;

}






/* Áß°£ Å©±âÀÇ È­¸é (ÅÂºí¸´ µî)¿¡ ´ëÇÑ ½ºÅ¸ÀÏ */
@media (min-width: 481px) {
  html {
    font-size: 18px;
  }

  .font_lage {
    font-size: 2rem
  }

  .util {
    display: block;
  }

  .lengBtn {
    padding: .0rem 1rem;
    border-radius: 2rem;
  }

  .fontBtn {
    padding: .3rem 1.5rem;
  }

  .font_normal {
    font-size: .55rem;
  }

  .payment_box_text {
    font-size: .7rem;
  }

  #contents .payment_ul,
  #contents .usageList {
    display: flex;
    justify-content: space-around;
  }


  #contents .payment_ul li {
    width: 30%;
    margin:10px auto 0;
  }


  #contents .usageList li {
    width: 26%;
    margin: initial;
  }

  .font_middle{
    font-size: 1.2rem;
  }
  .security_text_Wrap {
    text-align: left;
    margin-top: 2.8rem;
    width: 25rem;
    margin-top: 2.8rem
  }
  .Nanum_400_1 {
    color: #3D3D3D;
    font-family: NanumGothic;
    font-size: 1.5vw;
    font-style: normal;
    font-weight: 400;
    line-height: 2vw; /* 180% */
  }
  .NanumBarun_600{
    font-size: 1rem;;
  }


  #contents .payment_ul,
  #contents .usageList,
  #contents .partner_ul {
    width: 100%;
    margin-top: 20px
  }


}

/* µ¥½ºÅ©Åé ¹× ´õ Å« È­¸é¿¡ ´ëÇÑ ½ºÅ¸ÀÏ */
@media (min-width: 1024px) {
  html {
    font-size: 16px;
  }

  /* Àü¿ª ½ºÅ¸ÀÏ */
  body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background: #f4f4f4;
    color: #333;
    width: 100%;
  }

  .util .onley_pc{

    display: inline-block;
  }
  .onley_mo{
    display: none;
  }


  #contents .payment_ul {
    margin-top: 30px;
  }

  .font_lage {
    font-size: 4rem;
  }

  .fontBtn {
    padding: .5rem 3rem;
    border-radius: 2rem;
    font-size: 1.3rem;
  }

  .font_description {
    font-size: 1.2rem;
    line-height: 2;
  }

  .component_font_title {
    font-size: 1.5rem;
  }

  .font_normal {
    font-size: 1.3rem;
  }

  .payment_box_text {
    font-size: 2rem;
  }

  .font_middle {
    font-size: 1.2rem;
  }

  #contents .payment_ul li {

    width: 28%;
    margin: 30px auto 0;
  }

  #contents .payment_ul li .textWrap {
    padding: 2.4rem;
    width: 100%;
  }


  .NanumBarun_600 {
    color: #6E7F8B;
    font-family: NanumBarunGothic;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }

  .NanumBarun_600_2 {
    font-family: NanumBarunGothic;
    font-size: 2.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--point_bg);
  }

  .NanumBarun_600_1 {
    color: #6E7F8B;
    text-align: center;
    font-family: NanumBarunGothic;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }

  .NanumBarun_600_3 {
    color: #3D3D3D;
    font-family: NanumBarunGothic;
    font-size: 3.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }


  .Nanum_800 {
    font-family: NanumGothic;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
  }


  .Nanum_400_1_m {
    margin-top: 0.94rem;
    color: #6E7F8B;
    font-family: NanumGothic;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.06rem;
    display: block;
  }

  .Nanum_400_1 {
    color: #3D3D3D;
    font-family: NanumGothic;
    font-size: 1.5625vw;
    font-style: normal;
    font-weight: 400;
    line-height: 2.8125vw; /* 180% */
  }

  .security_text_Wrap {
    width: 25rem;
    margin-top: 2.8rem;
    text-align: left;
  }

  .security_text_Wrap p {
    word-break: keep-all;
  }

  .font_small {
    color: #EFEFEF;
    font-family: NanumGothic;
    font-size: 1rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.625rem; /* 162.5% */
  }

  #contents .payment_ul,
  #contents .usageList,
  #contents .partner_ul {
    width: 100%;
    margin-top: 30px
  }
}


/*¾Ö´Ï¸ÞÀ̼Ç*/
#ani-first.on {
  animation: fadeInRight 1.5s forwards;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


@keyframes zoomInAnimation {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


@keyframes zoomOutAnimation {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}