@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{ width:380px;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:space-between;padding:0 16%;color:#fff}
#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; height: 900px; }
#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:8% 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 {}
#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 .franchApply {margin-top:30px;}
#secIndexContent .cc .franchApply a {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;}

#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; }

@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: cover; 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;}
    #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 { 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 .franchApply{padding:0 16px;margin-top: 20px;}
    #secIndexContent .cc .franchApply a{width: 100%;}
    #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; }
}