@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Noto+Sans+SC:wght@100..900&display=swap');
@keyframes growShrink {
    0% {font-size: 18px;}
    20% {font-size: 14px;}
    40% {font-size: 18px;}
    60% {font-size: 18px;}
    80% {font-size: 18px;}
    100% {font-size: 18px;}
}
#secIndexHeader { width:100%;height:120px;position:fixed;top:0;bottom:0;z-index:999;color:#353535; }
#secIndexHeader .openBanner { position: relative;background:url("/main/img/v2/index/secIndexHeader01.png") no-repeat; background-size: cover;height:45px;overflow: hidden;}
#secIndexHeader .openBanner .bgVideo { position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: 1;background-color:rgb(255,255,255,1);opacity:0.1;}
#secIndexHeader .openBanner .bgVideo { width: 100%;height: 100%;object-fit: cover;}
#secIndexHeader .openBanner .container .banner { position: relative;z-index: 1;}
#secIndexHeader .openBanner .container .banner div { font-size:clamp(14px,2.6vw,18px);font-weight:400;line-height:30px;letter-spacing:5.6px;}
#secIndexHeader .openBanner .container .banner .bannerText { font-size:clamp(20px,2.6vw,28px);position: relative; z-index: 1; }
#secIndexHeader .openBanner .container .banner .grandOpen{ font-weight:900;animation-name: growShrink; /* Name of the animation */
                                                                           animation-duration: 2s; /* Total duration of one full cycle */
                                                                           animation-timing-function: ease; /* Smoother easing */
                                                                           animation-iteration-count: infinite;}
#secIndexHeader .menuArea { width: 100%;height:75px;background:linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.00) 100%);align-items:center;margin:0 auto; justify-content:flex-end;padding:0 16%;color:#fff; transition: background .3s;}
#secIndexHeader .menuArea.active { background:rgba(255, 255, 255, 1.00);color:#000;}
#secIndexHeader .menuArea .logo{width:auto; height:30px;}
#secIndexHeader .menuArea .menu{font-size:18px;font-weight:500;gap:36px;}

#secIndexHeaderMob { display:none;}

#secIndexContent { overflow-y:hidden; position: relative;}
#secIndexContent > .logo { display: none; }
#secIndexContent .video-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; }
#secIndexContent .video-wrap.pc { display: block;}
#secIndexContent .video-wrap.mob { display: none; }
#secIndexContent .video-wrap video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
#secIndexContent .video-wrap .video-overlay { position: absolute; top: 0; left: 0; width: 820px; height: 100%; background: linear-gradient(-90deg, rgba(255, 255, 255, 0.00) 0%, #353535 100%); pointer-events: none; }
#secIndexContent .container { position: relative; z-index: 2;padding:12% 0%;}
#secIndexContent .container .lang { justify-content:left;gap:24px;padding:20px 0px;}
#secIndexContent .container .lang > div { font-size:16px; color:rgba(255,255,255,0.8);}
#secIndexContent .container .lang > div a {line-height: 1;}
#secIndexContent .container .lang > div a.active {color:#BB2649;font-weight:700; }

#secIndexContent .cc { top:0px; width:100%; left:0px;}
#secIndexContent .cc .logo img { width:auto; height:30px; }
#secIndexContent .cc .franchMenu { margin-top:64px; justify-content:left;  }
#secIndexContent .cc .franchMenu > div { font-size:20px; padding:6px 12px; margin-right:24px; color:rgba(255,255,255,0.5); }
#secIndexContent .cc .franchMenu > div.active { color:rgba(255,255,255,1); }
#secIndexContent .cc .franchItems .txt {display:none;}
#secIndexContent .cc .franchItems .franch { width:50%;margin-top:10px; display:flex; flex-wrap:wrap; gap:10px 2%; }
#secIndexContent .cc .franchItems .franch .item { width:32%; border-radius:12px; padding:15px; color:#fff; font-size:clamp(14px,0.73vw,14px);font-weight:500;background: rgba(0, 0, 0, 0.50);backdrop-filter: blur(5px);}
#secIndexContent .cc .franchItems .franch .item.disabled { border:0px; background-color:rgba(32,32,32,0.3) !important; color:#9C9A99; }
#secIndexContent .cc .franchItems .franch .item .beforeLabel {display: flex; padding: 5px 7px; justify-content: center; align-items: center; border-radius: 500px; background: rgba(187, 38, 73, 0.50); color: #FFF; font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: -0.16px;}
#secIndexContent .cc .franchApplyPc {margin-top:30px;}
#secIndexContent .cc .franchApplyPc a.pc {width:50%;color:#fff;font-size:14px;font-weight:500;background: rgba(187, 38, 73, 0.60);backdrop-filter:blur(2.5px);padding: 15px;border-radius:12px;}
.franchApplyMob { display: none; }


#secIndexFooter { background:#F1F1F1; }
#secIndexFooter .info1 { padding:12px 8px; font-size:14px; }
#secIndexFooter .info1 .franch { font-weight:700;  }
#secIndexFooter .height1 { background-color:#D9D9D9; width:100%; height:1px; }
#secIndexFooter .info2 { padding:12px 8px; font-size:13px; }
#secIndexFooter .info2 .copyright { font-size:12px; color:#BDBDBD; }

#selectTonesKey { width:100%; border-radius:12px; border:1px solid #DEE2E6; background: #FFF; padding:14px 16px; }

#secInstaCard .instaSwiper {
    padding: 100px 0;
    position: relative;
    -webkit-user-select: none; /* 크롬, 사파리, 엣지 */
    -moz-user-select: none;    /* 파이어폭스 */
    -ms-user-select: none;     /* IE */
    user-select: none;         /* 표준 */
    user-select: none;         /* 표준 */
}
#secInstaCard .instaSwiper .swiper-slide {
    height: 480px;
    width: auto;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}
#secInstaCard .instaSwiper .swiper-slide .txtBox {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    line-height: 29px;
    letter-spacing: -0.56px;
    width: 100%;
    padding: 60px 25px 25px 25px;
    background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}
#secInstaCard .instaSwiper .swiper-slide .imgBox {
    height: 100%;
}

#secInstaCard .instaSwiper .swiper-slide .imgBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

#secInstaCard .instaSwiper .progressArea { padding-top: 20px;}
#secInstaCard .instaSwiper .progressArea .swiper-pagination {
    width: 100%;
    height: 3px;
    background-color: #E9ECEF;
    position: static;
    border-radius: 10px;
    overflow: hidden;
}
#secInstaCard .instaSwiper .progressArea .swiper-pagination .swiper-pagination-progressbar-fill {
    background: #BB2649;
}
#secInstaCard .instaSwiper .progressArea .caretVar { color:#495057;}

@media (max-width: 767px) {
    #secIndexHeader{ display:none;}
    #secIndexHeaderMob { display:flex;font-size:28px;height:80px;position: relative;overflow:hidden;background:url("/main/img/v2/index/secIndexHeader01.png") no-repeat; background-size: cover;color:#353535; }
    #secIndexHeaderMob .bgVideo { position: absolute;top: 0;left: 0;width: 100%;height: 80px;object-fit: cover;z-index: 1;background-color:rgb(255,255,255,1);opacity:10%;}
    #secIndexHeaderMob .container .banner { display:block;position: relative;z-index: 1;}
    #secIndexHeaderMob .container .banner .bannerText { font-size:16px;position: relative; z-index: 1; margin-bottom:4px;}
    #secIndexHeaderMob .container .grandOpen { font-size:32px;font-weight:900;line-height:30px;letter-spacing:-0.64px;font-style:italic;transition: transform 0.5s ease-in-out;
                                                        animation-name: growShrink;animation-duration: 2s;animation-timing-function: ease;animation-iteration-count: infinite;}

    #secIndexContent { position: relative; overflow: visible !important; z-index: 1; height: auto !important; min-height: auto !important; max-height: none !important; }
    #secIndexContent > .logo { display: block; position: absolute; top: 0; left: 0; z-index: 3; padding: 16px; }
    #secIndexContent > .logo img { width: 160px; height: auto; }
    #secIndexContent .video-wrap.pc { display: none; }
    #secIndexContent .video-wrap.mob { display: block; position: relative; width: 100%; height: 31vh; z-index: 1; overflow: hidden; }
    #secIndexContent .video-wrap.mob video { width: 100%; height: 100%; object-fit: fill; object-position: center; }
    #secIndexContent .video-wrap.mob .video-overlay { display: none; }
    #secIndexContent .container { position: relative; z-index: 2; min-height: auto !important; height: auto !important; max-height: none !important; overflow: visible !important; }
    #secIndexContent .cc { overflow: visible !important; height: auto !important; max-height: none !important; }

    #secIndexContent .container .cc .logo { display:none;}

    #secIndexContent .cc .franchMenu { margin-top:24px; width:100%; flex-wrap:wrap;  }
    #secIndexContent .cc .franchMenu > div { font-size:13px; margin-right:10px;}

    #secIndexContent .container {padding:0%;}
    #secIndexContent .container .top {display:none;}
    #secIndexContent .container .lang { gap:0px;padding:0;justify-content:center; flex-wrap:wrap;margin-bottom:20px;background:rgba(0, 0, 0, 0.50);padding:5px 16px;justify-content:space-between;}
    #secIndexContent .container .lang > div { font-size:12px; color:rgba(255,255,255,0.5); padding:4px; display: flex; align-items: center; justify-content: center;}
    #secIndexContent .container .lang > div a.active {color:rgba(255,255,255,1);}

    #secIndexContent .cc .franchItems { padding:0 16px;margin-top:24px; display:block;gap:16px 3.5%; }
    #secIndexContent .cc .franchItems .txt {display:block;font-size:16px;font-weight:700;}
    #secIndexContent .cc .franchItems .franch {display:flex; flex-wrap:wrap;width:100%;gap:8px 2%}
    #secIndexContent .cc .franchItems .franch .item {padding: 13px; width:32%;color: #212529;border-radius: 10px;background: var(--color-gray-gray0, #F8F9FA);backdrop-filter: blur(7.5px); }
    #secIndexContent .cc .franchItems .arrow {display:none;}
    #secIndexContent .cc .franchApplyPc { display: none; }
    /* 모바일 고정 버튼: body 바로 아래에 위치해 부모 stacking context에 갇히지 않음 */
    .franchApplyMob { display: flex; flex-direction: column; align-items: center; position: fixed; bottom: 16px; right: 16px; z-index: 999; gap: 5px; }
    .franchApplyMob .txt { position: relative; padding: 7px 6px; border-radius: 500px; background: #363E46; color: #FFF; text-align: center; font-size: 10px; font-weight: 600; line-height: 10px; letter-spacing: -0.4px; -moz-animation: bounce 2s infinite; -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; }
    .franchApplyMob .txt:after { content: ''; position: absolute; bottom: -20%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 6px 4px 0px 4px; border-color: #363E46 transparent transparent transparent; }
    .franchApplyMob a { background: url('/main/img/logo/tones_tube_logo.png') #BB2649 50% / 30px no-repeat; width: 60px; height: 60px; padding: 21px 20px; border-radius: 500px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15); }
    #secMainBanner { position: relative; z-index: 1; background-color: #fff; }

    #secIndexFooter .info1 { font-size:12px; }
    #secIndexFooter .height1 { background-color:#D9D9D9; width:100%; height:1px; }
    #secIndexFooter .info2 { font-size:10px; }
    #secIndexFooter .info2 .copyright { font-size:9px; color:#BDBDBD; }

    #secInstaCard .instaSwiper .swiper-slide {height: 400px;}
}

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  60% {
    -moz-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  60% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  60% {
    -moz-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}