@charset 'UTF-8';
/* UED Interaction (https://www.njued.com) */
/* Design By Ued Team Copyright 2025 UED Interaction */
/* Reset css */
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,input,button,textarea,article, aside, canvas,details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}:focus {outline:0;}body{line-height:1.5}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th{text-align:left}sup,sub{font-size:100%;vertical-align:baseline}:link,:visited ,ins{text-decoration:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {display:block;}

/* Gobal css */
:root {  
  --main-color-purple: #561684;
  --main-color-blue: #008DD4;
  --main-color-org:#FF6700;
  --main-color-yellow:#FDBC3A;
  --main-color-green:#90C859;
  --main-color-pink:#E94C91;
  --main-color-black:#111111;
  --main-color-gray:#CCCED4;
  --main-color-lightgray:#f5f5f5;

  --main-fs-h1:3rem;/*48px*/
  --main-fs-h2:2.5rem;/*40px*/
  --main-fs-h3:2.125rem;/*34px*/
  --main-fs-h4:1.75rem;/*28px*/
  --main-fs-h5:1.5rem;/*24px*/
  --main-fs-h6:1.125rem;/*18px*/
  --main-fs-p:1rem;/*16px*/

 /*--html_base: 2.13333vw; 750px*/
 /*--html_base: 1.6vw; 1000px*/
 /* --html_base: 1.11111vw; 1440px*/
 /* --html_base:0.83333vw; 1920px*/
  --html_base:16px; /*default 16px*/

}
html {font-size:var(--html_base); width:100%; height:auto; overflow-y: auto;}
body {font-size:1rem; line-height:1.5; font-family:"PingFang SC","Roboto","Source Han Sans CN","Microsoft YaHei",Arial,sans-serif; color:var(--main-color-black); background:var(--main-color-lightgray); width:100%; height:auto; overflow-y: auto; text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; -webkit-font-smoothing: antialiased;}
html.no-scroll, body.no-scroll {overflow: hidden; height: 100vh;}
h1, h2, h3, h4, h5, h6 {margin:0 0 .625rem; }
h1{font-size:var(--main-fs-h1);}
h2{font-size:var(--main-fs-h2);}
h3{font-size:var(--main-fs-h3);}
h4{font-size:var(--main-fs-h4);}
h5{font-size:var(--main-fs-h5);}
h6{font-size:var(--main-fs-h6);}
p{font-size:var(--main-fs-p); margin:0 0 1rem;}
sup{font-size:.875rem; vertical-align:top;}

a:hover {color:var(--main-color-purple,#561684); text-decoration:none;}
a{color:var(--main-color-gray,#CCCED4); text-decoration:none; outline:none; transition:all .3s; -webkit-transition:all .3s;-moz-transition:all .3s; -webkit-tap-highlight-color:rgba(0,0,0,0);}

img {
  display: inline-block;
  /*max-width: 100%;*/
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -o-crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}
/*animation*/
@-moz-keyframes barrotate{0%{-moz-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes barrotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes barrotate{0%{-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes selfrotate{0%{-moz-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes selfrotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes selfrotate{0%{-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes loading{0%{-moz-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes loading{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading{0%{-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes icondown{0%{-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:0}50%{-moz-transform:translate3d(0,80%,0);transform:translate3d(0,80%,0);opacity:1}100%{-moz-transform:translate3d(0,150%,0);transform:translate3d(0,150%,0);opacity:0}}@-webkit-keyframes icondown{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:0}50%{-webkit-transform:translate3d(0,80%,0);transform:translate3d(0,80%,0);opacity:1}100%{-webkit-transform:translate3d(0,150%,0);transform:translate3d(0,150%,0);opacity:0}}@keyframes icondown{0%{-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:0}50%{-moz-transform:translate3d(0,80%,0);-ms-transform:translate3d(0,80%,0);-webkit-transform:translate3d(0,80%,0);transform:translate3d(0,80%,0);opacity:1}100%{-moz-transform:translate3d(0,150%,0);-ms-transform:translate3d(0,150%,0);-webkit-transform:translate3d(0,150%,0);transform:translate3d(0,150%,0);opacity:0}}@-moz-keyframes playbtn{0%{-moz-transform:scale(0);transform:scale(0)}60%{-moz-transform:scale(1.1);transform:scale(1.1)}80%{-moz-transform:scale(0.9);transform:scale(0.9)}90%{-moz-transform:scale(1.05);transform:scale(1.05)}95%{-moz-transform:scale(0.95);transform:scale(0.95)}100%{-moz-transform:scale(1);transform:scale(1)}}@-webkit-keyframes playbtn{0%{-webkit-transform:scale(0);transform:scale(0)}60%{-webkit-transform:scale(1.1);transform:scale(1.1)}80%{-webkit-transform:scale(0.9);transform:scale(0.9)}90%{-webkit-transform:scale(1.05);transform:scale(1.05)}95%{-webkit-transform:scale(0.95);transform:scale(0.95)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes playbtn{0%{-moz-transform:scale(0);-ms-transform:scale(0);-webkit-transform:scale(0);transform:scale(0)}60%{-moz-transform:scale(1.1);-ms-transform:scale(1.1);-webkit-transform:scale(1.1);transform:scale(1.1)}80%{-moz-transform:scale(0.9);-ms-transform:scale(0.9);-webkit-transform:scale(0.9);transform:scale(0.9)}90%{-moz-transform:scale(1.05);-ms-transform:scale(1.05);-webkit-transform:scale(1.05);transform:scale(1.05)}95%{-moz-transform:scale(0.95);-ms-transform:scale(0.95);-webkit-transform:scale(0.95);transform:scale(0.95)}100%{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes clouds{0%{-moz-transform:translate3d(0,-4%,0);transform:translate3d(0,-4%,0)}50%{-moz-transform:translate3d(0,4%,0);transform:translate3d(0,4%,0)}100%{-moz-transform:translate3d(0,-4%,0);transform:translate3d(0,-4%,0)}}@-webkit-keyframes clouds{0%{-webkit-transform:translate3d(0,-4%,0);transform:translate3d(0,-4%,0)}50%{-webkit-transform:translate3d(0,4%,0);transform:translate3d(0,4%,0)}100%{-webkit-transform:translate3d(0,-4%,0);transform:translate3d(0,-4%,0)}}@keyframes clouds{0%{-moz-transform:translate3d(0,-4%,0);-ms-transform:translate3d(0,-4%,0);-webkit-transform:translate3d(0,-4%,0);transform:translate3d(0,-4%,0)}50%{-moz-transform:translate3d(0,4%,0);-ms-transform:translate3d(0,4%,0);-webkit-transform:translate3d(0,4%,0);transform:translate3d(0,4%,0)}100%{-moz-transform:translate3d(0,-4%,0);-ms-transform:translate3d(0,-4%,0);-webkit-transform:translate3d(0,-4%,0);transform:translate3d(0,-4%,0)}}@-moz-keyframes rains{0%{background-position:0 0}100%{background-position:10000px 20000px}}@-webkit-keyframes rains{0%{background-position:0 0}100%{background-position:10000px 20000px}}@keyframes rains{0%{background-position:0 0}100%{background-position:10000px 20000px}}@-moz-keyframes snows{0%{background-position:0 0}100%{background-position:0 20000px}}@-webkit-keyframes snows{0%{background-position:0 0}100%{background-position:0 20000px}}@keyframes snows{0%{background-position:0 0}100%{background-position:0 20000px}}
@-webkit-keyframes icons { 0%{-webkit-transform: translate(0,0);transform: translate(0,0);}50%{-webkit-transform: translate(0,3em);transform: translate(0,3em);}100%{-webkit-transform: translate(0,0);transform: translate(0,0);}}
@keyframes icons {0%{-webkit-transform: translate(0,0);transform: translate(0,0);}50%{-webkit-transform: translate(0,3em);transform: translate(0,3em);}100%{-webkit-transform: translate(0,0);transform: translate(0,0);}} 

.down{display:none;width:20px;margin-left:-10px;height:25px;position:absolute;left:50%;top:0;background:url(images/downext.png) center center no-repeat; background-size:20px 25px;cursor:pointer;z-index:777;-moz-animation:icondown 3s infinite;-webkit-animation:icondown 3s infinite;animation:icondown 3s infinite; -webkit-transition:all .7s ease-in-out .5s;-moz-transition:all .7s ease-in-out;transition:all .7s ease-in-out .5s;-webkit-transform:translate(0,70px);-moz-transform:translate(0,70px);transform:translate(0,70px); filter:alpha(Opacity=0);opacity:0}
.down.show{display:block;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);transform:translate(0,0);filter:alpha(opacity=100);opacity: 1;}

/*font family*/

@font-face {
  font-family: 'Galano-Grotesque-Black'; /* 自定义字体名称 */
  src: url('fonts/Galano-Grotesque-Black.otf') format('opentype'); 
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Galano-Grotesque-Medium'; /* 自定义字体名称 */
  src: url('fonts/Galano-Grotesque-Medium.otf') format('opentype'); 
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'iconfont';
  src: url('fonts/iconfont.eot');
  src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),
  url('fonts/iconfont.woff') format('woff'),
  url('fonts/iconfont.ttf') format('truetype'),
  url('fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont{font-family:"iconfont" !important; font-size:.16rem;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}

.bgWhite{background:white;}
.bgGray{background:var(--main-color-lightgray);}
.bgBlack{background:var(--main-color-black);}
.bgFbg{background:url(../images/fbg.png) var(--main-color-lightgray) repeat center; background-size:100%;}

.fWhite{color:white;}
.fGray{color:var(--main-color-gray);}
.fBlack{color:var(--main-color-black);}
.fBlue{color:var(--main-color-blue);}
.fRed{color:var(--main-color-red);}
.fOrg{color:var(--main-color-org);}

/*font size*/
.fnt100{ font-size: 5.208333vw; line-height: 1.2;}
.fnt80{	font-size: 4.16666vw; line-height: 1.2;}
.fnt72{font-size: 3.75vw; line-height: 1.2;}
.fnt70{font-size: 3.64583333vw; line-height: 1.2;}
.fnt68{font-size: 3.541666vw; line-height: 1.2;}
.fnt60{font-size: 3.125vw; line-height: 1.3;}
.fnt56{font-size:2.9166vw; line-height: 1.3;}
.fnt52{font-size:2.70833vw; line-height: 1.3;}
.fnt50{font-size:2.6041666vw; line-height: 1.3;}
.fnt48{font-size:2.5vw; line-height: 1.3;}
.fnt45{font-size:2.34375vw; line-height: 1.3;}
.fnt40{font-size:2.08333vw; line-height: 1.4;}
.fnt38{font-size:1.979166vw; line-height: 1.3;}
.fnt36{font-size:1.875vw; line-height: 1.4;}
.fnt34{font-size:1.7708vw; line-height: 1.4;}
.fnt32{font-size:1.66666vw;line-height: 1.4;}
.fnt30{font-size:1.5625vw;}
.fnt28{font-size: 1.45833vw;}
.fnt26{font-size: 1.354166vw;}
.fnt24{font-size: 1.25vw;}
.fnt22{font-size: 1.145833vw;}
.fnt20{font-size: 1.04166vw;}
.fnt18{font-size: 0.9375vw;}
.fnt16{font-size: 0.83333vw;}
.fnt14{font-size: 0.72916vw;}
.fnw-b{font-weight: bold;}

/*font max line*/
.maxLine-1{overflow: hidden; text-overflow: ellipsis; white-space:nowrap; }
.maxLine-2{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: keep-all;}
.maxLine-3{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-overflow: ellipsis; word-break: keep-all;}

/**common style**/
.container{position:relative; margin:0 auto; width:87.5%; max-width: 1280px;}
.no-scroll{overflow: hidden;}
.commWidget{position:relative; width:100%; }
.commPadding{padding:5rem 0;}
.noPadding-top{padding-top:0;}
.noPadding-bottom{padding-bottom:0;}

/*layout style*/
.Str-header{position: fixed; width: 100%; background: var(--main-color-purple);  padding: 1.25rem 0; z-index:1000; -moz-transition:all .3s; -webkit-transition:all .3s; -o-transition:all .3s; -ms-transition:all .3s; transition:all .3s;}
.Str-header .headerWrap{display:flex; align-items:center; justify-content:center;}
.Str-header h1{margin:0; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.Str-header h1 img.logo{display:block; height: 2.5rem;}

.Str-nav{flex:1; display: flex; gap: 2.5rem; justify-content: center; font-family: 'Galano-Grotesque-Medium';}
.Str-nav li a{position:relative; font-size: 1.125rem; line-height: 2.5rem; color: white; padding:.625rem 0;}
.Str-nav li a:after{content: ''; width: 0; height: 2px; background:white; position: absolute; right: 0; bottom: 0;  transition:all .3s;}
.Str-nav li a:hover:after{width: 100%; left: 0;}

.Str-other{display: flex; gap: 1rem; align-items: center; justify-content: flex-end; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.Str-other a.language{font-size: 1rem; color: white; padding:0 1rem; display: flex; align-items: center; gap: .625rem; font-family: 'Galano-Grotesque-Medium';}
.Str-other a.language i{font-size: 1.25rem; font-weight: normal;}
.Str-other a.language:hover{opacity:.7;}
.Str-other a.toaccount img{display:block; height: 2.5rem; border-radius: 50%;}
.Str-other a.login{display:block; border: 2px solid white; padding: .3125rem 1.25rem; line-height: 1.4; color: white; border-radius: 100rem; font-size: .875rem; font-family: 'Galano-Grotesque-Medium';}
.Str-other a.login:hover{background-color: white; color:var(--main-color-purple);}
.Str-banner{position:relative; width: 100%;  padding-top: 5rem; background-color: #111111;}

/*mobile menu icon*/
.drown-menu-icon{width:7.2115rem; height:7.2115rem; position: fixed; left: 0; top: 0; display: none; align-items: center; justify-content: center; color: white; z-index: 9900;}
.drown-menu-icon::after{content: '\e65c';font-family: 'iconfont';  font-size:3.8462rem; font-weight:normal; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }
.drown-menu-icon.active::after{content: '\e637';font-family: 'iconfont';  font-size:3.8462rem; font-weight:normal; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}

.mask{position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1200; background: rgba(0, 0, 0, 0.3); display: none; }
.mask.show {display:block;}
.menu{position: fixed; top: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; width: 77.33%; height: 100%; color:white; z-index: 9000; overflow: hidden; overflow-y: auto; box-shadow: 0 0 12px rgba(0, 0, 0, 0.3); background-color:var(--main-color-purple); border-top-right-radius: 20px; border-bottom-right-radius: 20px; padding-top:7.2115rem;  padding-bottom:7.2115rem; -webkit-transform: translateX(-100%);  transform: translateX(-100%); -webkit-transition: -webkit-transform 0.2s ease-out; transition: -webkit-transform 0.2s ease-out; transition: transform 0.2s ease-out; transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out; opacity: 0;}
.menu.active{-webkit-transform: translateX(0);  transform: translateX(0); -webkit-transition-duration: 300ms; transition-duration: 300ms; -webkit-transition-delay: 0; transition-delay: 0; opacity: 1;}
.Str-nav-mobile{display: flex; flex-direction: column; padding:0 2.4038rem; font-family: 'Galano-Grotesque-Medium';}
.Str-nav-mobile li{flex: 1;}
.Str-nav-mobile li a{position:relative; display:block; font-size: 2.1635rem; color: white;  padding:2.4038rem 0;  border-bottom: 1px solid rgba(255,255,255,.2);}
.Str-nav-mobile li a.active{font-weight: 600;}
.Str-nav-mobile li a::after{content: "\eb03"; font-family: 'iconfont'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size:2.4038rem; color: white; }

.Language{padding:0 2.4038rem;  display: flex;}
.Language a{width:100%; box-sizing: border-box; font-size: 1.9231rem; color: white; padding:1.25rem 3.75rem; background:var(--main-color-green); border-radius:100rem; display: flex; align-items: center; justify-content: center; gap: 1.2rem; }
.Language a i{font-size: 1.9231rem;}

.swiper.bannerSwiper {width: 100%;}
.bannerSwiper .swiper-slide {position: relative; width: 100%; padding-top:37.5%; overflow: hidden;}
.bannerSwiper .swiper-slide img {display: block; width: 100%; height: 100%; position: absolute; left: 0;  top: 0; object-fit: cover;}
.bannerSwiper .swiper-slide .title-txt{position: absolute; left: 0; bottom: 0; background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)); width: 100%; padding: 1.25rem; font-size: 1.25rem; font-weight: 600; color: white; box-sizing: border-box;}
.bannerSwiper .swiper-pagination-bullet{vertical-align:middle; background-color:white; opacity: .7;}
.bannerSwiper .swiper-pagination-bullet-active {opacity: 1; background-color: var(--main-color-blue);  width:12px; height:12px; }
.bannerSwiper .swiper-horizontal>.swiper-pagination-bullets,.bannerSwiper .swiper-pagination-bullets.swiper-pagination-horizontal,.bannerSwiper .swiper-pagination-custom,.bannerSwiper .swiper-pagination-fraction{bottom:2rem; } 

.bannerSwiper .swiper-button-next,.bannerSwiper .swiper-container-rtl .swiper-button-prev {right:4vw; left: auto; width:36px; height:36px; border-radius: 100rem; color:#fff;  }
.bannerSwiper .swiper-button-next:after,.bannerSwiper .swiper-container-rtl .swiper-button-prev:after {font-size:2.25rem; font-weight: 600; text-shadow: 0 0 1rem rgba(0,0,0,.5);}
.bannerSwiper .swiper-button-prev,.bannerSwiper  .swiper-container-rtl .swiper-button-next {right: auto; left:4vw; width:36px; height:36px; border-radius: 100rem; color:#fff; }
.bannerSwiper .swiper-button-prev:after,.bannerSwiper .swiper-container-rtl .swiper-button-next:after {font-size:2.25rem; font-weight: 600; text-shadow: 0 0 1rem rgba(0,0,0,.5)}

.index-title{display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem;}
.index-title h3{margin: 0; font-size: 2.25rem; color: var(--main-color-purple); font-weight: 600;  font-family: 'Galano-Grotesque-Medium'; text-transform: uppercase;} 
.moreLink{position:relative; display: block; font-size: 1.125rem; color: var(--main-color-black); font-weight: 600; padding-right: 1.5rem;}
.moreLink::after{content: '\eb03'; font-family: 'iconfont';  position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:1.5rem; font-weight: 300; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}


.Ued-card {overflow: hidden}
.swiper.Card-swiper {overflow: visible}
.Card-swiper .swiper-wrapper {width: 100%; padding-bottom:80px;}
.Card-swiper .swiper-slide {width: 100%; height: 100%;}
.Card-swiper .swiper-pagination-bullets,.Card-swiper .swiper-pagination-custom,.Card-swiper .swiper-pagination-fraction { display: none; bottom: 0; left: 0; width: 100%}
.Card-swiper .swiper-pagination-bullet { width: 6px; height: 6px; border-radius: 50px; display: inline-block; background: #1b1b1c; opacity: .3}
.Card-swiper .swiper-pagination-bullet-active { opacity: 1}
.Card-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 10px}
.Card-swiper .swiper-button-next,.Card-swiper .swiper-container-rtl .swiper-button-prev {right: 0; left: auto; top: auto; bottom: 0; color: #1b1b1c; width: 60px; height: 40px; border-radius: 132px; background: rgba(0,0,0,.12)}
.Card-swiper .swiper-button-next:after,.Card-swiper .swiper-container-rtl .swiper-button-prev:after {font-size: 18px; font-weight: 600}
.Card-swiper .swiper-button-prev,.Card-swiper .swiper-container-rtl .swiper-button-next {right: 80px; left: auto; top: auto;  bottom: 0; color: #1b1b1c; width: 60px; height: 40px; border-radius: 132px;  background: rgba(0,0,0,.12)}
.Card-swiper .swiper-button-prev:after,.Card-swiper .swiper-container-rtl .swiper-button-next:after { font-size: 18px; font-weight: 600}

.Card-swiper-shop .swiper-wrapper {width: 100%;}
.Card-swiper-shop .swiper-slide {width: 100%; height: 100%;}
.Card-swiper-shop .swiper-pagination-bullets,.Card-swiper-shop .swiper-pagination-custom,.Card-swiper-shop .swiper-pagination-fraction { display: none; bottom: 0; left: 0; width: 100%}
.Card-swiper-shop .swiper-pagination-bullet { width: 6px; height: 6px; border-radius: 50px; display: inline-block; background: #1b1b1c; opacity: .3}
.Card-swiper-shop .swiper-pagination-bullet-active { opacity: 1}
.Card-swiper-shop.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 10px}
.Card-swiper-shop .swiper-button-next,.Card-swiper-shop .swiper-container-rtl .swiper-button-prev {right: 0; left: auto; top: auto; bottom: 0; color: #1b1b1c; width: 60px; height: 40px; border-radius: 132px; background: rgba(0,0,0,.12)}
.Card-swiper-shop .swiper-button-next:after,.Card-swiper-shop .swiper-container-rtl .swiper-button-prev:after {font-size: 18px; font-weight: 600}
.Card-swiper-shop .swiper-button-prev,.Card-swiper .swiper-container-rtl .swiper-button-next {right: 80px; left: auto; top: auto;  bottom: 0; color: #1b1b1c; width: 60px; height: 40px; border-radius: 132px;  background: rgba(0,0,0,.12)}
.Card-swiper-shop .swiper-button-prev:after,.Card-swiper-shop .swiper-container-rtl .swiper-button-next:after { font-size: 18px; font-weight: 600}

.cardLink {display: block; height: 100%; background:white; position: relative; border-radius: 1rem; text-align: center;}
.cardInfo{display: block; }
.cardImg{position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; border-radius: 1rem;}
.cardImg img{display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; transition: all .3s;}
.cardInfo:hover .cardImg img{transform: scale(1.05);}
.cardText{padding: 1.25rem; text-align: left;}
.cardText h4{ font-family: 'Galano-Grotesque-Medium';font-size: 1.25rem; color: var(--main-color-org); margin: 0 0 .3125rem; }
.cardText h5{ font-family: 'Galano-Grotesque-Medium';font-size: 1.125rem; color: var(--main-color-org); margin: 0 0 .3125rem;  font-weight: 600; overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;}
.cardText p{font-size: 1.125rem; color: gray; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cardText span{font-size: 1rem; font-weight: 600;}

.cardText ul{display: flex; flex-direction: column; gap: .3125rem; font-size: 1.125rem; color:gray; font-family: 'Galano-Grotesque-Medium';}
.cardText ul li{flex: 1; display: flex; align-items: flex-start; gap: .625rem; }
.cardText ul li i{display: inline-block; font-size: 1.125rem;}

.cardBtn{font-family: 'Galano-Grotesque-Medium'; position: relative; display:block; padding: .875rem 3.25rem .875rem 2.5rem; font-size: 1.125rem; color: white; background: var(--main-color-green); border-radius: 20rem; transition: all .3s;}
.cardBtn::after{content: '\eb03'; font-family: 'iconfont';  position:absolute; right:1.25rem; top:50%; transform:translateY(-50%); font-size:1.5rem; font-weight: 300; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}
.cardBtn.btn-org{background: var(--main-color-org);}

.Card-swiper-shop .cardInfo{display: flex; flex-wrap: wrap; gap: .625rem; background:white; border-radius: 1rem;}
.Card-swiper-shop .cardInfo .cardImg{ width: 42%; padding-top:28%; }
.Card-swiper-shop .cardText{flex: 1; display: flex; flex-direction: column; justify-content: flex-start;}
.Card-swiper-shop .cardText h4{font-size: 1.75rem; margin: 0 0 1rem;}
.Card-swiper-shop .cardText .cardBtns{margin-top: auto; display: flex; gap: 1.25rem;}




.ticket-list{display: flex; flex-wrap: wrap; gap: 1.25rem;min-width:0;}
.ticket-list li{width: calc((100% - 2.5rem)/3); min-width:0;}

.ticketLink{display:flex; flex-direction: column; background:var(--main-color-lightgray); border-radius: 1rem; box-sizing: border-box; overflow: hidden; height: 100%;}
.ticketImg{width: 100%; padding-top:64%; position: relative; border-radius: 1rem; overflow: hidden;}
.ticketImg img{display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; transition: all .3s;}
.ticketText{flex:1; padding: 1.25rem; display: flex; flex-direction: column; gap: .625rem; }
.ticketText h4{width: 100%; font-family: 'Galano-Grotesque-Medium'; font-size: 1.25rem; color: var(--main-color-org); margin: 0; }
.ticketText p{width: 100%;font-size: 1rem;  color: gray;  margin: 0;  line-height: 1.4; font-family: 'Galano-Grotesque-Medium';}
.ticketText .ticketPrice{margin-top:auto; width:100%; display: flex; align-items: center; justify-content:space-between;}
.ticketText .ticketPrice span{ font-family: 'Galano-Grotesque-Medium';font-size: 1.5rem; color: var(--main-color-pink); }  
.ticketText .ticketPrice span label{font-size: 1rem; color: gray; text-decoration: line-through;}
.ticketText .ticketPrice .buyBtn{ font-family: 'Galano-Grotesque-Medium';display: block; padding: .625rem 2rem; font-size: 1.125rem; color: white; font-style: normal; background: var(--main-color-pink); border-radius: 20rem; text-align: center; transition: all .3s;}
.locations{display: flex; gap: .625rem; flex-wrap: wrap;}
.location{display:inline-block; padding: .625rem 1rem; font-size:.875rem; font-weight: 600; line-height: 1; color: var(--main-color-black); background: var(--main-color-yellow); border-radius: 100rem; }


.Str-footer{position: relative; background-color: var(--main-color-purple); padding: 2.5rem 0 2.5rem;}
.paw-img{display: block; position: absolute; left: 50%; top: -6.3rem; transform: translateX(-50%); width: 7.5rem; }
.footer-logo{display: flex; justify-content: center; margin: 0 0 2.5rem;}
.footer-logo img{height: 3rem; display: block;}
.footer-nav{ font-family: 'Galano-Grotesque-Medium'; display: flex; flex-wrap:wrap; justify-content: center; gap: 3.75rem; margin: 0 0 3rem;}
.footer-nav li{position: relative;}
.footer-nav li::after{content: ''; width: 6px; height: 6px; background: white; border-radius: 100rem; position: absolute; right: -2.0625rem; top: 50%; transform: translateY(-50%);}
.footer-nav li:last-child:after{display:none;}
.footer-nav li a{font-size: 1.25rem; color: white; font-weight: 600; padding:.625rem 0; position: relative;  text-transform: uppercase;}
 .footer-nav li a:hover{opacity:.7;}
.copyright-nav{ font-family: 'Galano-Grotesque-Medium'; display: flex; flex-wrap:wrap; justify-content: center; gap: 2.5rem; font-size: 1.125rem; color: white; margin: 0 0 1rem;}
.copyright-nav li{position: relative;}
.copyright-nav li::after{content: ''; width: 1px; height: 12px; background: white; border-radius: 100rem; position: absolute; right: -1.25rem; top: 50%; transform: translateY(-50%);}
.copyright-nav li:last-child:after{display:none;}
.copyright-nav a{color: white; font-weight:400; position: relative; }
.copyright-nav a:hover{opacity:.7;}
.copyright-text{font-size: 1rem; color: white; text-align: center;}

.commBanner{padding-top: 5rem; background:url(../images/fbg.png) var(--main-color-green) no-repeat center; background-size: cover;}
.commBanner.orgBanner{background-color: var(--main-color-org);}
.pageTitle{padding:3.75rem 0; font-size: 3.75vw; line-height: 1.2; color: white; text-align: center; text-transform: uppercase; font-family: "Galano-Grotesque-Medium";}


.locationBox{display: flex; flex-wrap: wrap; background: white; border-radius: 1rem; overflow: hidden; margin: 0 0 1.25rem; gap: .625rem;}
.locationBox .locationImg{width: 44%; padding-top: 24%; position: relative; overflow: hidden;border-radius: 1rem;}
.locationBox .locationImg img{display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; transition: all .3s;}
.locationBox:hover .locationImg img{transform: scale(1.1);}
.locationBox .locationText{flex: 1; padding: 1.25rem; display: flex; flex-direction: column; justify-content: flex-start;}
.locationBox .locationText h4{font-size: 1.75rem; font-family:  'Galano-Grotesque-Medium'; color: var(--main-color-org); margin: 0 0 1rem; font-weight: 600;}

.locationBox .locationText h5{ font-family: 'Galano-Grotesque-Medium';font-size: 1.5rem; color: var(--main-color-org);  margin: 0; }
.locationBox .locationText p{font-size: 1.125rem; color: gray; font-family: 'Galano-Grotesque-Medium'; margin: 0 0 1.2rem;}
.locationBox .locationText span{margin-top:auto; font-size: 1.125rem; font-weight: 600; display: flex; align-items: center; gap: 1.25rem; justify-content: space-between;}
.locationBox .locationText span i{display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 100rem; background-color: var(--main-color-purple); color: white; font-size: 1.25rem; font-weight: normal; margin-right: 5%; opacity:0; transition: all .5s;}
.locationBox:hover .locationText span i{margin-right: 0; opacity:1;}

.locationBox .locationText  ul{display: flex; flex-direction: column; gap:.3125rem; font-size: 1.125rem; color:gray; font-family: 'Galano-Grotesque-Medium'; margin-bottom: 2.5rem;}
.locationBox .locationText  ul li{flex: 1; display: flex; align-items: flex-start; gap: .625rem; }
.locationBox .locationText  ul li i{display: inline-block; font-size: 1.125rem; }

.btnGroup{margin-top: auto; display: flex; gap: 1.25rem;}
.btnGroup a{font-family: 'Galano-Grotesque-Medium'; position: relative; display:block; padding: .875rem 3.25rem .875rem 2.5rem; font-size: 1.125rem; color: white; background: var(--main-color-green); border-radius: 20rem; transition: all .3s;}
.btnGroup a::after{content: '\eb03'; font-family: 'iconfont';  position:absolute; right:1.25rem; top:50%; transform:translateY(-50%); font-size:1.5rem; font-weight: 300; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}
.btnGroup a.btn-org{background: var(--main-color-org);}

.locationBox.boxDetail{ border-radius:0; gap: 2.5rem; margin: 0;}
.locationBox.boxDetail .locationImg{border-radius: 1rem; width:45%;}
.locationBox.boxDetail .locationText{padding: 0;}
.locationBox.boxDetail  ul{margin: 0 0 1.25rem;}
.locationBox.boxDetail  ul li p{font-weight: 600; color: var(--main-color-black);}
.locationBox.boxDetail  ul li p span{display: block; font-size: 1rem; color: gray; font-weight: normal;}

.ticketBox{display: flex; flex-wrap: wrap; background: white; border-radius: 1rem; overflow: hidden; margin: 0 0 1.25rem;}
.ticketImage{width: 36%; padding-top: 22%;position: relative; overflow: hidden; border-radius: 1rem;}
.ticketImage img{display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; transition: all .3s;}
.ticketBox:hover .ticketImage img{transform: scale(1.1);}

.ticketTxt{flex: 1; padding: 1.25rem; display: flex; flex-direction: column; justify-content: flex-start;}
.ticketTxt div{display: flex; flex-wrap: wrap; gap: .625rem;}
.ticketTxt h4{width: 100%; font-family: 'Galano-Grotesque-Medium'; font-size: 1.5rem; color: var(--main-color-org); margin: 0; font-weight: 600;}
.ticketTxt p{width: 100%; font-size: 1.125rem;  color: var(--main-color-black);  margin: 0;  line-height: 1.4; font-family: 'Galano-Grotesque-Medium';}
.ticketTxt .ticketPrice{width: 100%; margin-top:auto; display: flex; align-items: center; justify-content:space-between;}
.ticketTxt .ticketPrice span{ font-family: 'Galano-Grotesque-Medium';font-size: 1.5rem; color: var(--main-color-pink);}  
.ticketTxt .ticketPrice label{display:inline-block; margin-left: 10px; font-size:.875rem; color:var(--main-color-gray); text-decoration: line-through;}
.ticketTxt .ticketPrice .buyBtn{ font-family: 'Galano-Grotesque-Medium';display: block; padding: .3125rem 1.5rem; font-size: 1.125rem; color: white; font-style: normal; font-weight: 600; background: var(--main-color-pink); border-radius: 20rem; text-align: center; transition: all .3s;}

.pc-filter{margin:0 0 2.5rem;}
.filter-item{margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: 1.25rem;justify-content: flex-start;font-family: 'Galano-Grotesque-Medium';}
.filter-item dt{font-size: 1rem; color: var(--main-color-black); padding: .625rem 0; width: 5%;}
.filter-item dd{flex: 1; display: flex; flex-wrap: wrap; gap: 1rem;  }
.filter-item dd a{display: block; padding: .625rem 1.5rem; font-size: 1rem; background-color: var(--main-color-gray); color:gray; border-radius: 100rem;}
.filter-item dd a.active {background-color: var(--main-color-green); color: white;}

.pagination{padding: 2.5rem 0; display: flex; gap: 1rem; align-items: center; justify-content: center;}
.pagination a{display: flex; align-items: center; justify-content: center; min-width:2.5rem; min-height: 2.5rem; border-radius: 100rem; font-size: 1rem; background-color: white; color: var(--main-color-purple); }
.pagination a i{font-size: 1.5rem;}
.pagination a.active{background: var(--main-color-purple); color: white;}

.page-face{position: relative; font-family: 'Galano-Grotesque-Medium';}
.page-face img{display: block; width: 100%; height: auto;}

.page-article{padding: 5%; font-size:clamp(14px,0.83333vw,18px); line-height: 1.65; font-family: 'Galano-Grotesque-Medium';}
.page-article p{margin:0 0 1.25rem; font-size:clamp(14px,0.83333vw,18px);}
.page-article img{display: block; width: 100%; border-radius: 1rem; margin: 1.25rem auto;}

.article-title{margin:0 0 20px; padding: 0 0 1.25rem; border-bottom: 1px solid rgba(0,0,0,.2);}
.article-title h3{font-size:clamp(22px,2.08333vw,38px); font-family: 'Galano-Grotesque-Medium'; color: var(--main-color-black); line-height: 1.2;}
.article-title span{font-size:clamp(14px,0.83333vw,18px); color: gray; font-weight:normal;}

.ticket-main{display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: center;}
.ticket-img{width: 45%; position: relative;}
.ticket-img img{display: block; width: 100%; height: auto; border-radius: 1rem;}

.ticket-txt{flex:1; display: flex; flex-direction: column; justify-content: flex-start;}
.ticket-txt h4{ font-family: 'Galano-Grotesque-Medium'; font-size: 1.75rem; color: var(--main-color-org); margin:0; font-weight: 600;}
.ticket-txt p{font-size: 1.125rem;  color: var(--main-color-black);  margin: 0 0 1.25rem;  line-height: 1.4; font-family: 'Galano-Grotesque-Medium';}
.ticket-txt dl{margin: 0 0 1.25rem;}
.ticket-txt dl dt{font-size: 1.125rem; font-weight: 600; margin:0 0 .625rem;}
.ticket-txt dl dd{display:flex; gap: 1.25rem; align-items: flex-start; justify-content: space-between; font-size: 1rem; color: var(--main-color-black); padding: .625rem 0; border-top: 1px solid rgba(0,0,0,.12);}
.ticket-txt .ticketPrice{margin-top:auto; display: flex; align-items: center; justify-content:space-between;}
.ticket-txt .ticketPrice span{ font-family: 'Galano-Grotesque-Medium'; font-size: 2.25rem; color: var(--main-color-pink); line-height: 1.2;} 
.ticket-txt .ticketPrice span em{font-style: normal; font-size: 1.75rem; display: block;} 
.ticket-txt .ticketPrice label{display:block; font-size:.875rem; color:var(--main-color-gray); text-decoration: line-through;}

.ticket-txt .ticketPrice .buyBtn{ font-family: 'Galano-Grotesque-Medium';display: block; padding: 1rem 2.5rem; font-size: 1.25rem; color: white; font-style: normal; font-weight: 600; background: var(--main-color-pink); border-radius: 20rem; text-align: center; transition: all .3s;}
.ticket-txt .ticketPrice .buyBtn:hover{opacity: .7;}
.ticket-txt .ticketPrice .buyBtn-disabled,.ticket-txt .ticketPrice .buyBtn-disabled{font-family: 'Galano-Grotesque-Medium';display: block; padding: 1rem 2.5rem; font-size: 1.25rem; color: gray; font-style: normal; font-weight: 600; background-color: var(--main-color-lightgray);border-radius: 20rem; text-align: center; opacity: .5;}

.articleBox{background-color: white; padding: 5%; border-radius: 1rem; font-size:clamp(14px,0.83333vw,18px); line-height: 1.65; font-family: 'Galano-Grotesque-Medium';}
.articleBox p{margin:0 0 1.25rem; font-size:clamp(14px,0.83333vw,18px);}
.articleBox img{display: block; width: 100%; border-radius: 1rem; margin: 1.25rem auto;}

.loginWrap{height:100vh; display: flex; flex-direction: column; align-items: center; }
.loginArea{flex: 1; display: flex; align-items: center; justify-content: center;}
.copyRight{ width: 50%; text-align: center; padding: 2.5rem;}

.loginBox{background: white; border-radius: 1rem; padding:30px 40px 40px; display: flex; flex-direction: column; gap:40px;}
.login-logo{display: flex; justify-content: center;}
.login-logo img{display: block; height:50px;}

.commInpt{flex: 1 1 auto;  min-width: 0;  display: block; padding: 14px 20px; line-height:1; border: 0; background:white; font-size: 18px;  border-radius: 100rem;}
.codeBtn{cursor:pointer; display: block; padding: 14px 0; width: auto; min-width:160px; line-height:1; background: var(--main-color-green); color: white; border: 1px solid var(--main-color-green); font-size:18px; border-radius: 100rem;}
.codeBtn:focus{opacity: 0.7;}
.login-form{display: flex; flex-direction: column; gap:20px; width:400px;}
.form-item{display: flex; gap: 1rem; align-items: stretch; width: 100%;}
.form-box{position: relative; width: 100%; display: flex; gap: .75rem; align-items: stretch;  border: 1px solid gray; background:white; border-radius: 100rem; flex: 1 1 auto; min-width: 0;}

/* custom select */
.custom-select { width: 90px; }
.select-display {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; font-weight: 500; padding-right: 10px;}
.select-display::after { content: ""; position: absolute; left: 80px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray; transition: transform 0.2s; pointer-events: none; }
.custom-select.active .select-display::after { transform: translateY(-50%) rotate(180deg); }
.select-options { position: absolute; top: calc(100% + 2px);  left: 0; width:100%; max-height: 0; overflow: hidden; border-radius:12px; background-color: #fff; z-index: 9999; transition: max-height 0.3s ease, box-shadow 0.2s; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.custom-select.active .select-options {  max-height: 250px; overflow-y: auto;}
.select-option { padding: 10px 12px; cursor: pointer; font-size: 18px;}
.select-option:hover, .select-option.active {background-color: var(--main-color-lightgray); color:var(--main-color-blue);}
.native-select { display: none; }


.submitBtn{margin-top: 2.5rem;}
.submitBtn .submit{cursor:pointer; display: block; background: var(--main-color-org); border:0; font-size:20px; color: white; width: 100%; padding:16px 20px; line-height: 1; border-radius: 100rem;}
.submitBtn .submit:focus{opacity: 0.7;}
.submitBtn .submit.purple{ background: var(--main-color-purple);}

.login-tab{margin: 0 0 1.25rem; border-radius: 100rem; background: var(--main-color-gray); padding: 4px; display: flex; align-items: center;}
.login-tab span{cursor:pointer;flex: 1; display: block;  border-radius: 100rem; padding:16px; font-size:18px; line-height:1.2; text-align: center; font-family: 'Galano-Grotesque-Medium'; color:white;}
.login-tab span.current{background:white; color:  var(--main-color-purple);}

.login-title{font-size:clamp(28px,1.45833vw,48px); color: var(--main-color-black); font-family: 'Galano-Grotesque-Medium'; text-align: center; font-weight: 600; margin: 0 0 1.25rem;  text-transform: uppercase;}

.account-wrap{display: flex; flex-wrap: wrap;}
.account-side{width:300px; background: var(--main-color-purple); padding: 1.25rem; border-radius: 1rem 0 0 1rem;  font-family: 'Galano-Grotesque-Medium';}
.account-main{flex: 1; padding: 1.25rem; background: white; border-radius: 0 1rem 1rem 0; min-width: 0; overflow: hidden;}

.avatar-box{ text-align: center;  margin-bottom:1.5rem;}
.avatar-box img{display: block; margin: 0 auto .625rem; width: 5rem; height: 5rem; border-radius: 100rem; border: 2px solid white;}
.avatar-box span.name{display:block; font-size: 1.125rem; color: var(--main-color-yellow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.avatar-box span.phone{display:block; font-size: 1.25rem;  }

.membership-level{display: flex; align-items: center; justify-content: center; gap: .3125rem; font-size:1rem; }
.membership-level i{font-size: 1.5rem;}
.membership-level.normal{background: linear-gradient(to bottom, #AAAAAA, #F0F0F0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; }

.account-nav{display: flex; flex-direction: column; gap: .625rem; }
.account-nav li a.anav{display: flex; align-items: center; gap: 1rem; padding: .875rem .125rem; position: relative; font-size: 1.125rem; font-family: 'Galano-Grotesque-Medium'; color:white; border-radius: 100rem; background: rgba(0,0,0,.12); } 
.account-nav li a.anav::after{content: '\eb03'; font-family: 'iconfont';  position:absolute; right:5%; top:50%; transform:translateY(-50%); font-size:1.75rem; font-weight: 300; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}
.account-nav li a.anav:hover{opacity:.7;}
.account-nav li a.anav.active,.account-nav li a.anav.active:hover{background: var(--main-color-green); color: white; opacity: 1;}

.navBtn{margin-top: 2.5rem;}
.outBtn{display: block; background: var(--main-color-org); color: white; font-size: 1.125rem; padding: .875rem 1.25rem; text-align: center; border-radius: 100rem; color: white; }
.outBtn:hover{color: white; opacity: .7;}

.avatar-main{display:flex; gap: 1.25rem; align-items: center; font-family: 'Galano-Grotesque-Medium'; margin: 0 0 2.5rem;}
.avatar-main .avatarImg img{display:block; width:7.5rem; border-radius: 100rem; }
.avatar-main .avatarTxt{flex: 1; color: var(--main-color-black);}
.avatar-main .avatarTxt span.name{display: block; font-size: 1.25rem;}
.avatar-main .avatarTxt span.phone{display: block; font-size: 1.5rem;}
.avatar-main .avatarTxt .membership-level{justify-content: flex-start;}

.linkBtn{padding:.625rem 1.25rem; border-radius: 100rem; font-size: 1rem; line-height: 1.2; display: flex; align-items: center; gap: .3125rem;}
.linkBtn i{font-size: 1.5rem;}
.linkBtn.edit{background: var(--main-color-green); color: white;}
.linkBtn.code{background: var(--main-color-purple); color: white;}


.account-balance{display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0 0 1.25rem; }
.account-balance .acc-mbox{width: 66%;}
.account-balance .acc-sbox{flex: 1;}

.accountBalance{width:100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding:1.875rem; box-sizing: border-box;  color: white; border-radius: 1rem;}
.accountBalance .acc-txt .name{display:block; font-size: 1.25rem; font-family: 'Galano-Grotesque-Medium';}
.accountBalance .acc-txt .number{display: block; font-size: 2.5rem; font-family: 'Galano-Grotesque-Medium';}
.accountBalance .acc-txt .tip{display:block; font-size: 1rem; font-style: normal;}
.accountBalance .acc-bill{margin-top:2.5rem;}
.accountBalance .acc-bill .bill{display: inline-block; padding: .625rem 1.25rem; font-size: 1.125rem; background: white; color: var(--main-color-purple); border-radius: 100rem;}

.accountBalance.credits{background: url(../images/fbg.png) var(--main-color-yellow) no-repeat center; background-size:cover;}
.accountBalance.points{background: url(../images/fbg.png) var(--main-color-pink) no-repeat center; background-size:cover; }

.accountBalance.singlecard{height: auto; min-height: 15rem; margin: 0 0 1.5rem; flex-direction: row; align-items:flex-start;}



.account-number{display: flex; flex-wrap: wrap; gap: 1.25rem; font-family: 'Galano-Grotesque-Medium';}
.account-number a.numberBox{flex: 1; display:block; padding: 5% 0; text-align: center; font-size: 1rem; color: var(--main-color-black);  border-radius: 1rem; box-sizing: border-box; background-color: var(--main-color-lightgray); }
.account-number a.numberBox label{display: block; font-size: 3.5rem; color: var(--main-color-purple); }
.account-number a.numberBox:hover label{color: var(--main-color-black);}
.account-number a.numberBox img{display:block; width: 5.25rem; margin: 0 auto .625rem;}

.accTitle{display: flex; flex-wrap: wrap; align-items:center; gap: 1rem; justify-content: flex-end; margin: 0 0 1.25rem;}
.forBack {display: flex; align-items: center; gap: .625rem; font-size: 1rem; line-height: 1.2; padding: .625rem 1.25rem .625rem 2.5rem; border-radius: 100rem; background: var(--main-color-lightgray); color: var(--main-color-black); position: relative;font-family: 'Galano-Grotesque-Medium';}
.forBack::before{content: '\eb04'; font-family: 'iconfont';  position:absolute; left:1rem; top:50%; transform:translateY(-50%); font-size:1.5rem; font-weight: 300; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }
.forBack:hover{background: var(--main-color-purple); color: white;}
.accTitle .switchTab{margin-right: auto; display: flex; padding: 4px; background: var(--main-color-lightgray); border-radius: 100rem; }
.accTitle .switchTab span{display: block; font-size: 1rem;  line-height: 1.2; padding: .625rem 1.25rem; border-radius: 100rem; color: gray; cursor: pointer; font-family: 'Galano-Grotesque-Medium';}
.accTitle .switchTab span.current{background: var(--main-color-green); color: white;}

.accTitle .title{margin-right: auto; font-size: 1.5rem; color: var(--main-color-purple); font-family: 'Galano-Grotesque-Medium';}

.btnCoupon{display: flex; align-items: center; gap: .625rem; font-size: 1rem; line-height: 1.2; padding: .625rem 1.25rem .625rem 2.75rem; border-radius: 100rem; background: var(--main-color-pink); color: white; position: relative;font-family: 'Galano-Grotesque-Medium';}
.btnCoupon::before{content: '\e63c'; font-family: 'iconfont';  position:absolute; left:1rem; top:50%; transform:translateY(-50%); font-size:1.25rem; font-weight: 300; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }
.btnCoupon:hover{background: var(--main-color-purple); color: white;}

.mycode{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding:5% 10% 15%;}
.mycode img.codeimg{display: block; width:18rem; height:18rem; background: white; padding: 16px; }
.mycode .time{font-size: 1.5rem; font-family: 'Galano-Grotesque-Medium'; text-align: center; line-height: 2;} 

.accout-edit{display: flex; flex-direction: column; gap: 2px; padding:0 0 5%;}
.account-item{display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem 3.5rem 1rem 1rem; background: rgba(0,0,0,.05); border-radius: 1rem; align-items: center; justify-content: space-between; position: relative; line-height: 1; font-size: 1.125rem; color: var(--main-color-black); font-family: 'Galano-Grotesque-Medium';}
.account-item::after{content: '\eb03'; font-family: 'iconfont';  position:absolute; right:1rem; top:50%; transform:translateY(-50%); font-size:1.75rem; font-weight: 300; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}
.account-item img{display: block; width: 3rem; border-radius: 100rem;}
.account-item .name{color:gray;}
.alltxt{width: 100%; font-size: 1rem; padding: 1rem;}

.add-btn{display: flex; flex-wrap: wrap; justify-content: space-between; margin: 1.25rem 0 0;}
.addBtn,.addBtn:hover{ display:flex; align-items: center; flex-shrink: 0; justify-content: center; box-sizing: border-box; gap: 1rem; padding:.3125rem 1.25rem; line-height: 1; font-size: 1.125rem; border-radius: 1rem; background-color: var(--main-color-purple); color: white; }
.addBtn i{font-size: 1.5rem; line-height: 1.2; font-style: normal; font-weight: 600;}

.account-title{font-size: 1.5rem; font-family: 'Galano-Grotesque-Medium';  margin: 0 0 1.25rem;}
.bill-list{display: flex; flex-direction: column; gap: 2.5rem;}
.bill-item{display: flex;  flex-direction: column; gap: .625rem;}
.bill-item dt{font-size: 1.125rem; font-weight: 600; padding:.3125rem .625rem; color: var(--main-color-purple);  background: var(--main-color-lightgray); }
.bill-item dd{display: flex; justify-content: space-between; padding: .625rem; line-height: 1.4; border-bottom: 1px solid rgba(0,0,0,.12);}
.bill-item dd .name{  font-size: .875rem; color: gray; }
.bill-item dd .name span{display: block; font-size: 1.125rem; font-family: 'Galano-Grotesque-Medium'; color: var(--main-color-black);}
.bill-item dd .number{font-size: 1.25rem; font-family: 'Galano-Grotesque-Medium';}
.bill-item dd .number i{font-style: normal; font-size: 1.5rem;}

.voucher-list{display: flex; flex-wrap: wrap; gap: 1.25rem; }
.voucher-list li{width: calc((100% - 1.25rem)/2);}

.coupon-list{display: flex; flex-wrap: wrap; gap: 1.25rem; }
.coupon-list li{width:100%; background: #CCCED480; display: flex; flex-direction: column; border-radius: 1rem; overflow: hidden;}

.order-list{display: flex; flex-wrap: wrap; gap: 1.25rem; }
.order-list li{width: calc((100% - 1.25rem)/2);}

.voucherBox{display: flex; height:100%; border-radius: 1rem; overflow: hidden; background: var(--main-color-lightgray);}
.voucherBox .box-img{width: 25%; height: 100%; position: relative; overflow: hidden;}
.voucherBox .box-img img{display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover;}
.voucherBox .box-txt{flex: 1; padding: 1.25rem; }
.box-name{display: flex; justify-content: space-between; gap: 1.25rem; padding-bottom: .625rem; margin: 0 0 .625rem; border-bottom: 1px dotted rgba(0,0,0,.2);  font-family: 'Galano-Grotesque-Medium'; }
.box-name .name-title{font-size: 1.125rem; color: var(--main-color-black); line-height: 1.2; }
.box-name .name-title span{display: block; margin: 0 0 .625rem; }
.box-name .name-code i{font-size: 3rem; color: var(--main-color-purple);}
.box-date{font-size: .875rem; color: gray; display: flex; align-items: center; justify-content: space-between; gap: 1.125rem; font-family: 'Galano-Grotesque-Medium';}

.voucher-list.hasUsed .voucherBox{filter: grayscale(100%);}
.voucher-list.hasExpired .voucherBox{filter: grayscale(100%); opacity: .5;}

.coupon-list.hasUsed .couponBox{filter: grayscale(100%);}
.coupon-list.hasExpired .couponBox{filter: grayscale(100%); opacity: .5;}


.couponBox{display: flex; flex-wrap: wrap; height: 100%; align-items: center; border-radius: 1rem; overflow: hidden; background: var(--main-color-lightgray);}
.couponBox .box-img{width:25%; height: 100%; position: relative; overflow: hidden;}
.couponBox .box-img img{display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; border-radius: 1rem;}
.couponBox .box-txt{flex: 1; padding:.625rem 1.25rem; } 

.use-rules{ padding: .625rem 1.25rem; border-radius: 0 0 1rem 1rem;}
.toggle-rules,.toggle-rules:hover{position:relative; display: block; font-size: 1rem; color: var(--main-color-black); font-weight: 600; color: gray;}
.toggle-rules::after{content: '\eb06'; font-family: 'iconfont';  position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:1.75rem; font-weight: 300; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}
.rules-con{padding: .625rem 0; font-size: 1rem; display: none;}

.orderBox{display: flex; flex-direction: column; background: var(--main-color-lightgray); border-radius: 1rem; overflow: hidden;}
.orderBox .box-status{display: flex; gap:1rem; justify-content: space-between; padding: .625rem 1rem; font-size:.875rem; color: var(--main-color-black);}
.orderBox .box-name{padding:1rem; margin: 0; border-top: 1px dotted rgba(0,0,0,.2);}
.orderBox .number{line-height: 2; font-weight: normal; color: var(--main-color-gray);}
.orderBox .location{margin: 0;}
.orderBox .box-date{padding: .625rem 1rem;}
.orderBox .box-date strong{font-size: 1rem; color: var(--main-color-org);}

.order-list.hasCancelled .orderBox{filter: grayscale(100%); opacity: .5;}

.paymentBox{padding: 10%;}
.icon{margin: 0 auto 1.25rem; width: 8rem; height: 8rem; display: flex; align-items: center; justify-content: center; border-radius: 100rem; color: white; line-height: 1;}
.icon i{ font-size: 2.5rem;}
.icon.green{background: var(--main-color-green);}
.icon.org{background: var(--main-color-org);}
.iconTxt{margin: 0 0 2.5rem; text-align: center;}
.iconTxt h4{font-size: var(--main-fs-h4);}
.iconTxt p{color: gray;}
.iconTxt.green h4{ color: var(--main-color-green);}

.btnArea{display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap;}
.btnArea a{display: block; padding:.625rem 1.5rem; font-size: 1.125rem; color: white; background: var(--main-color-gray); border-radius: 100rem;}
.btnArea a.purple{background: var(--main-color-purple);}
.btnArea a.org{background: var(--main-color-org);}

/*Open dialog*/
.dialog-modal {
  position: fixed; z-index: 300; left: 0; top: 0; width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s;
}
.dialog-mask {
  position: absolute; left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.3);
  transition: opacity 0.3s;
}
.dialog-dialog {
  position: relative; background: #fff; border-radius: 1rem; padding:2.5rem; max-width: 80%; 
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  z-index: 1;
  transform: translateY(40px) scale(0.98);
  opacity: 0;
  transition: all 0.3s cubic-bezier(.4,1.4,.6,1);
}
.dialog-modal.show .dialog-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.dialog-title { font-size: 1.125rem; text-align: center; font-weight:600;}
.dialog-title .amount{font-size: 2.5rem; color: var(--main-color-org);}
.dialog-con{font-size: 1rem;  margin-bottom: 1.5rem; text-align: center;}

.dialog-actions { display: flex; gap: .875rem; justify-content: center; }
.dialog-actions button { padding: .625rem 1.5rem; border-radius: 100rem; border: none; font-size: 1.125rem;  cursor: pointer; transition: background .2s;}
.btnCancel{ background:var(--main-color-lightgray); color:var(--main-color-black); }
.btnConfirm{ background: var(--main-color-purple); color:white; }

.dialog-actions button:active { opacity: .7; }

.dialog-detail{position: relative; background: #fff; border-radius: 1rem; min-width:30rem;  box-shadow: 0 8px 32px rgba(0,0,0,0.18);  z-index: 1;  transform: translateY(40px) scale(0.98);  opacity: 0;  transition: all 0.3s cubic-bezier(.4,1.4,.6,1);}
.dialog-modal.show .dialog-detail { transform: translateY(0) scale(1);  opacity: 1;}
.detail-title{display: flex; justify-content: space-between; align-items: center; padding:.625rem 1.25rem; font-size: 1.125rem; font-weight:600; font-family: 'Galano-Grotesque-Medium'; border-bottom: 1px solid rgba(0,0,0,.2);}
.detail-title i{font-size: 1.5rem;}

.detail-con{padding: 1.5rem 1.25rem; }
.order-infor{display: flex; flex-direction: column; gap: .625rem; margin: 0 0 1.25rem;}
.order-infor dt{font-size: 1.125rem; font-weight: 600;}
.order-infor dt .location{margin: 0 0 .625rem;}
.order-infor dd{display: flex; justify-content: space-between; font-size: 1rem; gap: 1rem;}

.package-name{font-size: 1.25rem; font-family: 'Galano-Grotesque-Medium'; margin: 0 0 .625rem;}


.order-item{display: flex; flex-direction: column; }
.order-item li{flex: 1; display: flex; justify-content: space-between; font-size: 1.125rem; color: gray; line-height: 1.2; gap:1rem;padding: .625rem 0; border-top: 1px dotted rgba(0,0,0,.12);}

.dialog-code{position: relative; max-width: 46.875rem; min-width: 320px; box-shadow: 0 8px 32px rgba(0,0,0,0.18);  z-index: 1;  transform: translateY(40px) scale(0.98);  opacity: 0;  transition: all 0.3s cubic-bezier(.4,1.4,.6,1);}
.dialog-modal.show .dialog-code { transform: translateY(0) scale(1);  opacity: 1;}
.code-title{position: relative; width: 100%; background: white; font-family: 'Galano-Grotesque-Medium'; text-align: center;
 border-radius: 12px 12px 0 0;
  mask: 
    linear-gradient(#fff, #fff) padding-box, 
    radial-gradient(12px at bottom left, #ffff 98%, #fff) bottom left / 12px 12px no-repeat,
    radial-gradient(12px at bottom right, #ffff 98%, #fff) bottom right / 12px 12px no-repeat;

  -webkit-mask: 
    linear-gradient(#fff, #fff) padding-box,
    radial-gradient(12px at bottom left, #ffff 98%, #fff) bottom left / 12px 12px no-repeat,
    radial-gradient(12px at bottom right, #ffff 98%, #fff) bottom right / 12px 12px no-repeat;
 
  mask-composite: exclude;
  -webkit-mask-composite: xor; 
  padding:1.25rem; 
}
.code-title .name{font-size: 1.25rem; margin-top: .625rem;}
.code-title .date{font-size: 1rem; color: gray;}
.code-title a.closed{position: absolute; right:1.25rem; top: 1.25rem;}
.code-title a.closed i{font-size: 1.5rem;}

.code-img{padding:2.5rem; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 0 0 1rem 1rem; border-top: 2px dotted rgba(0,0,0,.12);}
.code-img img{display: flex; width: 15rem; }

.avatar-list{display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; margin: 0 0 1.25rem;}
.avatar-list li{width: calc((100% - 3.75rem)/4); }
.avatar-list li a{display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 1.125rem; line-height: 1.8; color: var(--main-color-purple); position: relative;}
.avatar-list li a img{border: 3px solid white; width: 5.375rem; height: 5.375rem; border-radius: 100rem; }
.avatar-list li a.selected img{border: 3px solid var(--main-color-green);} 
.avatar-list li a.selected::after{content: '\e68f';font-family: 'iconfont';  position:absolute; left:50%; top:-2%;margin-left: 10%; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; background: var(--main-color-green); border-radius: 100rem; color: white; font-size:.625rem; font-weight: 300; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}

.edit-form{display: flex; flex-direction: column; gap: 20px; margin: 0 0 1.25rem;}
.edit-form .form-item {display: flex; gap: 1rem; align-items: stretch; width: 100%; }

.filter{display:flex; justify-content:center; }
.filter-bar{display:flex; align-items:center; gap:1.25rem; padding:4px; background:white; border-radius:100rem; margin:0 0 2.5rem;}
.filter-bar span{display: block; font-size: 1.125rem; padding: .625rem 1.25rem; border-radius: 100rem; color: gray; cursor: pointer; font-family: 'Galano-Grotesque-Medium';}
.filter-bar span.current{background:var(--main-color-green); color:white;}
.filter-select{display:flex; align-items:center; gap:1rem; justify-content:flex-end; margin:0 0 1.5rem; font-size:1.125rem;}
.filterSelect{border:0; padding:.875rem 2.75rem .875rem 1.25rem; font-size:1.125rem; border-radius:100rem; color: var(--main-color-black); background:url(../images/arrimg.png) white no-repeat 90% center; background-size:.625rem; -moz-appearance:none; -webkit-appearance:none; appearance:none;}

.account-level{margin: 0 0 1.5rem;}
.swiper.myLevel { width: 100%; overflow: visible; }
.myLevel .swiper-slide{width: 76.5%; height: 20rem;}
.myLevel .swiper-slide .membership-level{display: flex; justify-content: space-between; flex-direction: column; padding:2.5rem 2.5rem; width: 100%; height: 100%; border-radius: 1.25rem; position: relative;}
.myLevel .swiper-slide .membership-level.normalCard{background:-moz-linear-gradient(left, #dddddd,#f0f0f0); background:-webkit-gradient(linear, left top, right bottom, from(#dddddd), to(#f0f0f0));}
.myLevel .swiper-slide .membership-level.sliverCard{background:-moz-linear-gradient(left, #b4b3d0,#cbc9e3); background:-webkit-gradient(linear, left top, right bottom, from(#b4b3d0), to(#cbc9e3));}
.myLevel .swiper-slide .membership-level.goldCard{background:-moz-linear-gradient(left, #eac069,#fce7a4); background:-webkit-gradient(linear, left top, right bottom, from(#eac069), to(#fce7a4));}
.myLevel .swiper-slide .membership-level.platinumCard{background:-moz-linear-gradient(left, #ddab8c,#f9dabe); background:-webkit-gradient(linear, left top, right bottom, from(#ddab8c), to(#f9dabe));}

.myLevel .swiper-button-prev,.myLevel .swiper-container-rtl .swiper-button-next { left:1.25rem; width:2.75rem; height:2.75rem; color:#fff; border-radius:100rem; font-weight:600; transition: all .4s; background:rgba(0,0,0,.5);}
.myLevel .swiper-button-prev:hover,.myLevel .swiper-container-rtl .swiper-button-next:hover{background:rgba(0,0,0,.2);}
.myLevel .swiper-button-next,.myLevel .swiper-container-rtl .swiper-button-prev { right:1.25rem; width:2.75rem; height:2.75rem; color:#fff; border-radius:100rem; font-weight:600; transition: all .4s; background:rgba(0,0,0,.5);}
.myLevel .swiper-button-next:hover,.myLevel .swiper-container-rtl .swiper-button-prev:hover{background:rgba(0,0,0,.2);}
.myLevel .swiper-button-next:after,.myLevel .swiper-container-rtl .swiper-button-prev:after {font-size:1rem;}
.myLevel .swiper-button-prev:after,.myLevel .swiper-container-rtl .swiper-button-next:after {font-size:1rem;}

.memberLevel{display: flex; width: 100%; gap:1.25rem; align-items: flex-start; justify-content: space-between;}
.memberLevel .Level{font-size: 2.125rem; color: var(--main-color-black); font-weight: 600; font-family: 'Galano-Grotesque-Medium';}
.memberLevel i{font-size: 6.5rem; line-height: 1;}

.myLevel .swiper-slide .membership-level.normalCard .memberLevel i{background: linear-gradient(to bottom, #AAAAAA, #F0F0F0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}
.myLevel .swiper-slide .membership-level.sliverCard .memberLevel i{background: linear-gradient(to bottom, #9594b1,#cbc9e3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}
.myLevel .swiper-slide .membership-level.goldCard .memberLevel i{background: linear-gradient(to bottom, #eac069,#fce7a4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}
.myLevel .swiper-slide .membership-level.platinumCard .memberLevel i{background: linear-gradient(to bottom, #ddab8c,#f9dabe); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}

.levelStatus{width: 100%; display: flex; }
.levelStatus span{display: block; padding: .625rem 1.5rem; border-radius: 100rem; background-color: rgba(0, 0, 0, 0.1); color: rgba(0,0,0,.5); font-size: 1.125rem; font-family: 'Galano-Grotesque-Medium';}
.levelStatus.active span{background-color: var(--main-color-purple); color: white;}

.benefitsList{display: flex; align-items: flex-start; flex-wrap: wrap; gap: 1.25rem; text-align: center;}
.benefitsList li{width:calc((100% - 3.75rem) /4);  font-size: 1.25rem; color: var(--main-color-black);}
.benefitsList li img{display: block; width: 5.5rem; background-color: var(--main-color-org); margin: 0 auto .625rem; border-radius: 100rem;}