#container { position: relative; }
.imgm { display: none; height: 0; width: 0; }
.w1200 { width: 1200px;    margin: 0 auto; }
.innerCont { position: relative; height: 100%; padding: 100px 0; display: flex; justify-content: space-around; flex-direction: column; gap: 160px; }
.h1-title { position: relative; margin:   0 auto; text-align: center; padding-top: 120px; }
.h1-title .title-img { width:80%; margin: 0 auto;    }
.h1-title .mov0 { top: 0; left: 50%; animation: bounceSmall 1.9s ease infinite alternate; position: absolute; width: 280px ; }

.h2-title { position: relative; margin: 0 auto; text-align: center;  display: flex; justify-content: center; flex-direction: column; gap: 16px; color: var(--white);   }
.h2-title .title {   font-family: 'JalnanGothic';  font-size:85px;  font-weight: bold; margin-top: -50px;     } 
.h2-title .bubble-img{ width: 80%; margin: 0 auto;}
.h2-title .title .emoji-title{ width:200px; margin: -50px -30px  0 -30px ;   }
.h2-title .title-img { width: 100%; display: block; ; margin: 0 auto;  }
 
.h3-title {  font-size: 42px; text-align: center;     font-family: 'JalnanGothic';   color: var(--white); letter-spacing: 1px; } 

.emoji-body { position: relative; background: var(--black); padding: 10px 85px; font-size: 24px; line-height: 125%; border-radius: 100px; width: 70%; display: flex; justify-content: space-between; align-items: center; margin: 0 auto; color: var(--white); font-weight: normal; }
.emoji-body .emoji-1 { position: absolute; top: -15px; left: -10px; height: 75px; transform: rotate(-25deg); }
.emoji-body .emoji-2 { position: absolute; bottom: -25px; right: 0; height: 55px; margin-top: 30px; }


@media all and (max-width:1300px) { 
    .w1200 { width: 100%;  }  
    .innerCont { padding: 70px 16px !important;  }    
 }
 
 @media all and (max-width:1024px) {  
    .innerCont { padding: 50px 0; gap: 160px; }
    .h2-title .title { font-size: 60px; margin-top: -50px; line-height: 120%; }
    .h2-title .title .emoji-title { width: 120px; margin: -20px -30px 0 -30px ; }
  }

  @media all and (max-width:768px) {  
    .innerCont { padding: 35px 16px !important; gap: 60px; }

    .h1-title { position: relative;  padding-top: 70px;  }
    .h1-title .mov0 {   width: 150px;  }
    .h2-title .title { font-size: 26px; margin-top: -50px; line-height: 120%; }
    .h2-title .title .emoji-title { width: 80px; margin: -0px -10px 0 -10px ; }  
    .h3-title {  font-size: 24px;  } 

    .emoji-body {   padding: 10px 30px; font-size:14px; line-height: 130%;  width: 90%; font-size:12px; }
    .emoji-body .emoji-1 { position: absolute; top: -25px; left: 0; height: 38px; }
    .emoji-body .emoji-2 { position: absolute; bottom: -10px; right: 0; height:34px;   }
}
 


@media all and (max-width:430px) { 
 .h1-title {   padding-top: 60px;  } 
  .h1-title .mov0   { left:35% !important; width: 100px; } 
}
 
@media all and (max-width:320px) {  
    .h1-title {   padding-top:40px;  }
    .h1-title .mov0 {   width: 80px; animation: bounceSmall 1.9s ease infinite alternate;  margin-top: -10px;}

}
.sec-stepWrap{
    width: 80%;
    margin: 0 auto;
}
.btnMainColor{
    background: #fff;
}
/***** 01 ******/
.sec-content-01 { position: relative; height: 100vh; margin: 0 auto; background: radial-gradient(207.59% 109.61% at 76.82% 68.72%, #C1B8FF 0%, #9282FF 100%); }
.sec-content-01 .visual-innerCont { position: relative; height: 100%;    }
.sec-content-01 .main-img { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, -0); }
.sec-content-01 .main-img img { width:1000px ; }
@media all and (max-width:1300px) {
    .sec-content-01 {  height: calc(100vh - 100px);    } 
    .sec-content-01 .main-img {width:100%;}
    .sec-content-01 .main-img img { width:100% !important; }
}
 .sec-content-01 .aniMove-box {  position: relative;    width:1300px; height: calc(100% - 500px);     }
.sec-content-01 .aniMove-box:after {content: ""; display: table;  clear: both;}
.sec-content-01 .aniMove-box .item {position: absolute;  z-index: 50;}
.sec-content-01 .aniMove-box .mov01 { top: 80px; left: 45%; animation: bounce 3s ease infinite alternate; }
.sec-content-01 .aniMove-box .mov02 { top: 280px; right: 35%; animation: bounce 2s ease infinite alternate; }
.sec-content-01 .aniMove-box .mov03 { top: 35px; left: 11%; animation: bounce 2.8s ease infinite alternate; }
.sec-content-01 .aniMove-box .mov04 { top: 150px; right: 16%; animation: bounce 2s ease infinite alternate; }
.sec-content-01 .aniMove-box .mov05 { bottom: 300px; left: 45%; animation: bounce 2.8s ease infinite alternate; }
.sec-content-01 .aniMove-box .mov06 { bottom: 120px; right: 22%; animation: bounce 2.7s ease infinite alternate; }
.sec-content-01 .aniMove-box .mov07 { top: 250px; left: 12%; animation: bounce 1.8s ease infinite alternate; }
.sec-content-01 .aniMove-box .mov08 { bottom: 100px; left: 18%; animation: bounce 1.8s ease infinite alternate; }
 
.sec-content-01 .aniMove-box .item:nth-child(1) img {height: 120px;}
.sec-content-01 .aniMove-box .item:nth-child(2) img {height: 120px;  } /* 보라색 티셔츠 */
.sec-content-01 .aniMove-box .item:nth-child(3) img {height: 125px; }
.sec-content-01 .aniMove-box .item:nth-child(4) img {height: 85px; }
.sec-content-01 .aniMove-box .item:nth-child(5) img {height: 120px; } /* % */
.sec-content-01 .aniMove-box .item:nth-child(6) img {height: 160px; }/* 하트 */
.sec-content-01 .aniMove-box .item:nth-child(7) img {height: 70px; }
.sec-content-01 .aniMove-box .item:nth-child(8) img {height: 120px; }
 
.mov01{animation-delay: 3s;}
.mov02{animation-delay: 3.5s;}
.mov03{animation-delay: 3.5s;}
.mov04{animation-delay: 2.2s;}
.mov05{animation-delay: 2s;}
.mov06{animation-delay: 2.5s;}
.mov07{animation-delay: 4s;}
.mov08{animation-delay: 2.5s;}
.mov09{animation-delay: 3s;}
.mov10{animation-delay: 3s;}
.mov11{animation-delay: 2s;}
.mov12{animation-delay: 3s;}
.mov13{animation-delay: 1.5s;}

@media all and (max-width:768px) { 
    .sec-content-01 .aniMove-box {  width: 100%; height: calc(100% - 300px) !important;  border: 0px solid #000;  }
    
    .sec-content-01 .aniMove-box .mov01 { top: 60px; left: 45%; animation: bounce 3s ease infinite alternate; }
    .sec-content-01 .aniMove-box .mov02 { top: 160px; right: 35%; animation: bounce 2s ease infinite alternate; }
    .sec-content-01 .aniMove-box .mov03 { top: 35px; left: 11%; animation: bounce 2.8s ease infinite alternate; }
    .sec-content-01 .aniMove-box .mov04 { top: 20px; right: 16%; animation: bounce 2s ease infinite alternate; }
    .sec-content-01 .aniMove-box .mov05 { bottom: 8%; left: 45%; animation: bounce 2.8s ease infinite alternate; }
    .sec-content-01 .aniMove-box .mov06 { bottom: 15%; right: 5%; animation: bounce 2.7s ease infinite alternate; }
    .sec-content-01 .aniMove-box .mov07 { top: 250px; left: 12%; animation: bounce 1.8s ease infinite alternate; }
    .sec-content-01 .aniMove-box .mov08 { bottom: 21%; left: 5%; animation: bounce 1.8s ease infinite alternate; }

    .sec-content-01 .aniMove-box .item:nth-child(1) img { height: 60px; }
    .sec-content-01 .aniMove-box .item:nth-child(2) img { height: 60px; } 
    .sec-content-01 .aniMove-box .item:nth-child(3) img { height: 55px; }
    .sec-content-01 .aniMove-box .item:nth-child(4) img { height: 45px; }
    .sec-content-01 .aniMove-box .item:nth-child(5) img { height: 60px; } 
    .sec-content-01 .aniMove-box .item:nth-child(6) img { height: 80px; }
     .sec-content-01 .aniMove-box .item:nth-child(7) img { height: 30px; }
    .sec-content-01 .aniMove-box .item:nth-child(8) img { height: 60px; }
}

 


/****** 02 ******/
.sec-content-02 { position: relative; z-index: 1; background: radial-gradient(149.81% 79.2% at 73.7% 66.5%, #D2D7FF 0%, #A9B2FF 100%), #D2D7FF; }
/* .sec-content-02 .setp-body { display: flex; justify-content: space-between; }
.sec-content-02 .setp-body li { display: flex; flex-direction: column; justify-content: center; gap: 40px; }
.sec-content-02 .setp-body li::after { content: "";   background:url('../images/arrow-right.svg') no-repeat center;  width:35px; height:35px; background-size:100%;}
.sec-content-02 .setp-body li .subject { text-align: center; font-family: 'JalnanGothic'; font-size: 22px; font-weight: bold; }
.sec-content-02 .setp-body li img { height: 200px; }
.sec-content-02 .setp-body li:nth-child(2)  {justify-content: flex-end !important; gap: 65px !important;}
.sec-content-02 .setp-body li:nth-child(2) .subject { font-size:30px; }
.sec-content-02 .setp-body li:nth-child(2) img { height: 120px !important; } */
.sec-content-02 .content-img { width:100%; }
@media all and (max-width:1024px) {
  .content-img { width: 98% !important; margin: 0 auto; }
}

/****** 03 ******/
.sec-content-03 { position: relative; z-index: 1; background: #3A3A45; }
.content-03-body {display: flex; flex-direction: column; gap: 75px; color: var(--white); }
.content-03-body li  { display: flex; flex-direction: column; gap: 15px;     font-family: 'JalnanGothic'; }
.content-03-body li .subject { font-size:45px;}
.content-03-body li .con { font-size:35px; line-height: 125%;    font-family: 'Pretendard';     font-weight: 300;}


@media all and (max-width:768px) {
    .content-03-body {  gap: 30px; }
    .content-03-body li  { gap: 4px;  } 
    .content-03-body li .subject { font-size:18px;}
    .content-03-body li .con { font-size:15px; line-height: 125%;  }
  }


/****** 04 ******/
.sec-content-04 { position: relative; z-index: 1; background: #252949; } 


/****** 05 ******/
.sec-content-05 { position: relative; z-index: 1; background: #151516; }  
.sec-content-05 .category-item-body  { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center;}
.sec-content-05 .category-item-body img {height: 75px;}


@media all and (max-width:768px) {
    .sec-content-05 .category-item-body  {  gap:10px;  }
    .sec-content-05 .category-item-body img {height:40px;}
  }
  @media all and (max-width:360px) {   
    .sec-content-05 .category-item-body img {height:28px !important;}
  }


/****** 06 - QnA ******/
.sec-qna{  height: 100%; padding:50px 0 100px 0; }
@media all and (max-width:768px) {
    .sec-qna{  height: 100%; padding:35px 0; }
  }


/*tab-type1*/
.tab-type1{}
.tab-type1 .tab-menu{  margin: 0 auto; padding: 0px; list-style: none; width:50%;  }
.tab-type1 .tab-menu li{ position: relative;  float: left; margin:0 10px;  font-size:18px; font-weight:600; cursor: pointer;  color:#7F8090; height: 70px;  display:flex; justify-content: center; align-items: center;  background: #EDEDED;  border-radius: 100px; }
.tab-type1 .tab-menu li.current{  background: #fff; color: #fff;    background: linear-gradient(70deg, #FF4461, #FF7D91);  }
.tab-type1 .tab-menu li.current:after {content:"";  width:100%; height: 0;     position: absolute; bottom:-1px; left:0; }
.tab-type1 .tab-content{  display: none; padding: 15px 20px;    }
.tab-type1 .tab-content.current{  display: inherit; }
.tab-type1 .col2 li{ width:calc(100% / 2 - 20px);}

/* accordion styles */
.accordion-menu {   padding-top: 50px; }
.accordion-menuinput { position: absolute; opacity: 0; z-index: -1; }
.accordion-menu { overflow: hidden; color: #fff; }
.accordion-menu .acc-con { position: relative; width: 100%; overflow: hidden; font-size: 20px; font-weight: 400; border-bottom: 1px solid var(--gray900); }
.accordion-menu .tab-label { display: flex; justify-content: flex-start;  align-items: center;  gap: 10px; padding: 20px 0;   line-height: 120%;  width:90%;  cursor: pointer; }
.accordion-menu .tab-label::before { content: "Q";   width: 20px; height: 20px;   display: flex; justify-content: center; align-items: center; }
.accordion-menu .tab-label::after { content: ""; background:url('../images/arrow-right.svg') no-repeat; filter: var(--filter-gray600);  background-size:100% ;  position: absolute; top: 20px; right: 0; width: 20px; height: 20px;   display: flex;  justify-content: center; align-items: center; }
.accordion-menu .inItem { max-height: 0; padding: 0 50px; color: var(--gray300); background: var(--Primary-color);   text-align: left; font-size: 18px; font-weight: 400; line-height: 165%; }
.accordion-menu .tab-close { display: flex; justify-content: flex-end; padding: 1em; font-size: 14px; cursor: pointer; }
.accordion-menu .tab-close:hover { border-bottom: 1px solid #fff; }
.accordion-menu input:checked + .tab-label { border-bottom: 1px solid var(--gray900); }
.accordion-menu input:checked + .tab-label::after { transform: rotate(90deg);  filter: var(--filter-PrimaryColor);  }
.accordion-menu input:checked ~ .inItem { max-height: 100vh; padding:20px 24px; }
.accordion-menu .acc-con .ico-q { display: inline-block; border-radius: 100px; width: 26px; height: 26px; background: #fff; color: #000; font-weight: bold; text-align: center; display: flex; justify-content: center; align-items: center;  }

@media all and (max-width:768px) {
    .accordion-menu { padding: 10px 16px 0 16px; }
    .accordion-menu .tab-label {padding: 14px 0;   font-size: 14px;  line-height: 135%;  color: var(--gray400);   }   
    .accordion-menu .tab-label::after { top: 15px;  }
    .accordion-menu .inItem  {  font-size: 13px;  }
  }

/****** 07 문의 ******/
.sec-content-07 { position: relative; z-index: 1;  padding-bottom: 50px;  } 
.sec-content-07  .innerCont { gap: 50px; padding: 150px 0 0; }


.panel-input-box{  width: 600px; margin: 0 auto;  display: flex; flex-direction: column; gap: 30px 0;  }
.panel-input-box input{display: block; width:100%; }
.panel-input-box .row-item {position: relative; display: flex; flex-direction: column; gap: 8px 0;   gap: 10px; width:100%;}
.panel-input-box .row-item:after {content: ""; display: table;  clear: both;}  
.panel-input-box .row-item .subject {display: flex; gap: 4px; font-size:15px; font-weight:500;   color: var(--gray300);   }
 .agree-list p{ padding: 6px 0; }
 
 @media all and (max-width:768px) {
    .panel-input-box{  width: 100%;  gap: 20px 0;  }
  }
  


.sec-footer-fix-08 { position: fixed; bottom: 0; left: 0; right: 0; z-index: 300; background: var(--black); padding: 20px; display: flex; gap: 10px; flex-direction: row; }
@media all and (max-width:768px) {
    .sec-footer-fix-08 {  padding: 12px 16px ;  gap: 4px;   }
}

.title{
    color: #fff;
    font-size: 20px;
}
table td{
    color:#fff;
    border: 1px #444444 solid;
    text-align: center;
    padding: 5px;
}

footer {  margin:50px 0 130px; border-top:1px solid var(--gray900);     } 
footer .address { font-size:14px;  padding-top:30px; line-height: 180%;   margin: 0 auto;   }
footer .address .row { display: flex; gap: 50px; justify-content: center;  color: var(--gray600);  }

@media all and (max-width:768px) {
    footer {  margin:30px 0 100px;  }
    footer .address { font-size:12px;  padding-top:16px;  line-height: 150%;}
    footer .address .row { display: flex; gap: 20px;  justify-content:flex-start; }
}



input[type="text"], input[type="search"], input[type="password"], input[type="tel"], input[type="email"], input[type="number"], input[type="button"], input[type="phone"] {
    height: 52px;
    font-size: 18px;
    padding: 0;
    background: var(--gray900);
    border: 1px solid var(--gray800);
    color: var(--white);
    font-weight: 700;
    border-radius: 8px;
    padding: 10px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .3s ease;
    cursor: pointer;
}



/* 모달 레이어 팝업*/
.title-popup { margin:10px 0 20px 0;  font-size:20px; }  
#dark-md-bg{ display:none;  position:fixed;   width:100%; height:100%;  top:0; left:0;   background:rgba(0,0,0, 0.5);}
.modalLayer-popup {position: relative;   }
.section-modal {display: none; width: calc(100% - 100px);  background:#fff;  padding:30px;  border-radius:20px;   position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);   z-index: 9999;  height:70%; 
                   box-shadow:0px 15px 25px 0px rgb(0 0 0 / 20%);  overflow-y : scroll }

.section-modal .mod-inContent {position: relative;    }
.section-modal .mod-inContent:after {content: ""; display: table;  clear: both;}
.section-modal .mod-inContent .pop-textbox {font-size:12px;  line-height: 23px;   }

.section-modal .mod-inContent .btn-close i{position:absolute; top:10px; right:15px; width:30px; height:30px;  background:url('../images/btn-close.svg') no-repeat center center; 
                                          background-position:0 0px;  background-size:120%; overflow:hidden;  z-index: 1; }
.section-modal .mod-inContent .btn-close:hover,
.section-modal .mod-inContent .btn-close:focus { cursor:pointer; }







@keyframes bounce {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, 35px, 0);
    }
}


@keyframes bounceSmall {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, 15px, 0);
    }
}



@keyframes vibration {
    from {
        transform: rotate(1deg);
    }

    to {
        transform: rotate(-1deg);
    }
}


  @-webkit-keyframes ani-bg {
    0%{background:url('../images/ani-bg-01.png') repeat center center; }
    50%{background:url('../images/ani-bg-02.png') repeat center center; }
    100%{background:url('../images/ani-bg-01.png') repeat center center; }
}
@-moz-keyframes ani-bg {
    0%{background:url('../images/ani-bg-01.png') repeat center center; }
    50%{background:url('../images/ani-bg-02.png') repeat center center; }
    100%{background:url('../images/ani-bg-01.png') repeat center center; }
}
@-o-keyframes ani-bg {
    0%{background:url('../images/ani-bg-01.png') repeat center center; }
    50%{background:url('../images/ani-bg-02.png') repeat center center; }
    100%{background:url('../images/ani-bg-01.png') repeat center center; }
}
@keyframes ani-bg { 
    0%{background:url('../images/ani-bg-01.png') repeat center center; }
    50%{background:url('../images/ani-bg-02.png') repeat center center; }
    100%{background:url('../images/ani-bg-01.png') repeat center center; }
}