@charset "utf-8";
/* CSS Document */
.box0{ padding:0 var(--pgPD); box-sizing:border-box}
.box1{ padding:0 calc(calc(var(--pgPD) * 1.5)); box-sizing:border-box; max-width:1024px; margin:0 auto}
.box1.p0{ padding:0}
.box1.p1{ padding-top:calc(var(--pgPD) * 1.5)}
.box1.p2{ padding:calc(var(--pgPD) * 1.5);}
.box1.p3{ padding:calc(var(--pgPD));}
.box1.max1{ max-width:640px}
.box1.bg1{ background:#f5f5f5}
.boxWide{ position:relative; left:50%; width:100vw; transform:translateX(-50%)}

.gnb li.m_hide,
.gnb li .mLink{ display:none}
body:not(.pop){ display:flex; flex-direction:column; min-height:100dvh}

.header{ --utilIcoW : 3em; position: fixed; left:0; top:0; width:100%; z-index:1000; background:#fff}
.header .wrapF{ height:var(--headerH); display:flex; align-items:center; gap:.5em; position:relative}
.header .logo{ height:28%; margin-right:auto}
.header .logo > a,
.header .logo > a img{ display:block; height:100%}
.header .util{ position:relative; z-index:1}
.header .util .btnInc{ width:var(--utilIcoW); height:var(--utilIcoW)}
.header .util .btnInc:has(.tt){ width:auto; gap:.5em}
.header .util .btnInc .tt{}
.header .util .btnInc .fi{ font-size:1.938em}
.header .util .btnTT{ font-weight:700; font-size:1.313em; padding:.5em; color:#777}
.header .util .btnTT.st1{ background:var(--siteCerr); font-size:1.063em; padding:.5em .75em; border-radius:3em; color:#fff; display:flex; align-items:center; gap:.5em}
.header .util .btnTT.st1.c1{ background:var(--siteC)}
.header button.util{ background:none; border:none;}
.header .wrapF:not(.ar) .util:first-child{ margin-right:auto}
.header .wrapF.ar{ justify-content:flex-end}
.header .wrapF .wG{ flex:1 1 0%; min-width:0}

.header .area{ flex:1 1 0%; min-width:0}
.header .area .areaBtn .fIco{ font-size:1.25em}
.header .area .areaBtn .t1{ font-size:1.5em; font-weight:700}
.header .area .areaBtn .sec{ position:relative}
.header .area .areaBtn .list{ display:flex; gap:2em; padding-right:1em}
.header .area .areaBtn .list .li:not(:first-child):after{ content:""; position:absolute; left:-1em; top:50%; transform:translate(-50%,-50%); width:.5em; height:.5em; border-radius:50%; background:rgba(0,0,0,.3)}
.header .pgTit{ position:absolute; inset:0; background:#fff; padding:0 calc(var(--utilIcoW) + var(--pgPD))}
.header:has( .pgTit ~ .util ~ .util) .pgTit{ padding-right:calc((var(--utilIcoW) * 2) + (.5em * 2) + 1em);}
.header .pgTit .t1{ font-weight:700; font-size:1.625em; line-height:1.4}

.header.st1{ background:none; color:#fff}

html:is(.st_intro, .dp2_login) .header{ background:none; color:#fff}
html:is(.st_intro) .header .logo{ filter:var(--filterW)}

html:not(.scroll).st_main .header{ background:none}

html:is(.dp1_mypage.dp2_pay) .header:not(.modalLayer .header),
html:is(.dp1_mypage.dp2_pay) .header:not(.modalLayer .header) .pgTit{ background:none}
html:is(.dp1_mypage.dp2_pay) .header:not(.modalLayer .header) .wrapF > *{filter:var(--filterW)}
html:is(.scroll.dp1_mypage.dp2_pay) .header:not(.modalLayer .header){ background:var(--siteC4)}

.dp2_login .header:before{content:""; position:absolute; top:0; left:50%; transform:translate(-50%); width:100%; height:110%; border-radius:0 0 30% 30%; background:var(--siteC)}
.dp2_login .header .pgTit{ background:transparent}

.st_propView body > .header .pgTit{ justify-content:flex-start}
.st_propView body > .header:not(:has( .pgTit ~ .util)) .pgTit{ padding-right:var(--pgPD);}
.st_propView body > .header .pgTit .marquee.move{ overflow-x:auto; padding:1em 0}
.st_propView body > .header .pgTit .marquee.move:hover .mEl{ animation: none;}
.st_propView body > .header .pgTit .t1{ font-size:1.375em; text-align:left}

.st_compView{ background:#000}
.st_compView .contents{ color:#fff}
.st_compView > :is(.wrapIn, body) > .header{ background:#000; color:#fff}
.st_compView > :is(.wrapIn, body) > .header .pgTit{ padding-right:var(--utilIcoW); justify-content:flex-start; background:#000}
.st_compView > :is(.wrapIn, body) > .header:not(:has( .pgTit ~ .util)) .pgTit{ padding-right:var(--pgPD);}
.header .pgTit .marquee.move .t1,
.st_compView > :is(.wrapIn, body) > .header .pgTit .t1{ font-size:1.375em; text-align:left}

.tabBar{ position:fixed; left:0; bottom:0; z-index:1000; display:flex; justify-content:center; background:#fff; border-top:1px solid #eee; width:100%}
.tabBar .st{ flex:1 1 0%; min-width:0; height:var(--tabBarH); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:.125em; position:relative}
.tabBar .st .ico{ height:50%}
.tabBar .st .ico .fi{ font-size:1.6875em}
.tabBar .st .ico.home .fi{ transform:translateY(5%)}
.tabBar .st .ico.chat .fi{ transform:translateY(5%)}
.tabBar .st .ico.cs .fi{ transform:scale(1.15)}
.tabBar .st .ico[class*="log"] .fi{ transform:scale(1.2)}
.tabBar .st .tt{ font-size:.875em; color:#888}

html:has(.tabBar) .footer{ padding-bottom:calc(var(--tabBarH) + 2em + var(--fixObjH, 0px))}
.footer{ background:var(--siteC); color:#fff; padding:2em 0}
.footer .wrapF{ display:flex; flex-wrap:wrap; justify-conent:center; align-items:center; gap:1.5em 4em}
.footer .menu{ display:flex; align-items:center; gap:2em; margin-left:auto}
.footer .menu > li.point{ font-weight:700}
.footer .menu > li{ position:relative; font-size:.938em}
.footer .menu > li:not(:first-child):before{ content:""; position:absolute; left:-1em; top:50%; height:50%; width:1px; background:#fff; opacity:.2; transform:translateY(-50%)}
.footer .info{ display:flex; flex-wrap:wrap; gap:.25em 1.5em; justify-content:center; text-align:center}
.footer .info.w100{ width:100%}
.footer .info > li{ font-size:.938em}
.footer .info > li.point{ font-size:1.063em; font-weight:700}
.footer .info > li.copyright{ font-size:.75em; opacity:.7; margin-top:.5em; width:100%; text-transform:uppercase}

.dotStW{ position:relative}
.dotSt{ position:absolute; right:0; top:0; transform:translate(50%,-50%); font-size:.5875rem; --s:.625em; min-width:var(--s); height:var(--s); border-radius:50%; background:var(--siteCerr)}
.dotSt.no{--s:2em; display:flex; align-items:center; justify-content:center; border-radius:var(--s); gap:.5em; padding:.375em; letter-spacing:-.05em; font-weight:900; color:#fff; transform:translate(calc(100% - 1em), -50%); box-sizing:border-box; border:2px solid #fff}
.dotSt.fix{ transform:none}
.dotSt.tt{--s:2.5em; padding:0 1em; width:max-content}
.dotSt .t1{ font-size:1.125em; font-weight:700}
.dotSt.bd0{ border:none}

.fixObj{ position: relative; z-index:999; width:100%; right:0; box-sizing:border-box; background:#fff}
.fixObj.p1{ padding-top:1em; padding-bottom:1em}
.scroll .fixObj{ position:fixed}
.fixObj.bt{ position:fixed; --fixObjC:var(--tabBarH, 0px); bottom:var(--fixObjC)}
.modalLayer .fixObj.bt{ --tabBarH:0px}
.fixObj.bg1{ background:var(--siteC); border-top:1px solid rgba(255,255,255,.1)}
.fixObj.bg2{ background:#f5f5f5}

.contents{ --pdOffset:var(--tabBarH); flex:1 1 0%; min-height:0; box-sizing:border-box}
html:not(.st_intro) .contents{ padding:var(--headerH) 0 calc(var(--pgPD) * 2) 0;}
html:has(.footer) .contents{ --pdOffset:0em}
html:has(.tabBar) .contents{ padding-bottom:calc(var(--pgPD) * 1.5 + var(--pdOffset) + var(--fixObjH, 0px) + var(--offsetH, 0px));}
html.st_menu .contents{--offsetH:calc(var(--pgPD) * 1.5 * -1)}
html.st_menu:has(.footer) .contents{ padding-bottom:0}
html.st_chat .contents{ padding-top:0; --offsetH:calc(var(--pgPD) * 1.5 * -1)}
html.st_chat:not(:has(.tabBar)) .contents{ padding-bottom:0}

.floatW{ --w:5.5em; width:auto; background:none; padding:0 1em 1em 0; box-sizing:border-box; display:flex; flex-direction:column; gap:.25em}
html:has(.tabBar) .floatW{ bottom:var(--tabBarH)}
.floatW .st{ width:var(--w); height:var(--w); background:var(--siteC4); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center; flex-direction:column; gap:.25em; box-shadow:0 1em 1em rgba(0,0,0,.1)}
.floatW .st .t1{ font-size:.875em; font-weight:700; line-height:1.1}

.contents:has(.fullH){ display:flex; flex-direction:column; --offsetH:calc(var(--pgPD) * 1.5 * -1)}
.contents:has(.fullH) > div{ box-sizing:border-box; width:100%}
.fullH{ flex:1 1 0%}
.fullH:has(.noData),
.fullH *:has(.noData){ display:flex; box-sizing:border-box; width:100%; flex:1 1 0%; padding:0 !important}
.fullH *:has(> .noData){ position:relative}
.fullH .noData{ position:absolute; left:50%; top:50%; --cc:100%; transform:translate(-50%, -50%); width:var(--cc); height:var(--cc); box-sizing:border-box; background:#FFF; border:none; flex-direction:column; gap:1em; border-top:1px solid rgba(0,0,0,.1)}
.fullH .noData .fi{ font-size:4em; opacity:.1}
.fullH .noData:after{ font-size:1.125em; opacity:.7}
.subTab + .fullH .noData{background:var(--siteBg);}

.subTab{ background:#f5f5f5}
.subTab + [class*="box"]{ padding-top:var(--pgPD)}

.appContainer{ font-size:1.5vmin; height:100vh; display:flex; position:relative}
.appContainer:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--siteC); opacity:.05}
.appContainer .appWrap{height:80vh; width:calc(80vh * .5.6); border-radius:2em; box-shadow:0 0 3em 1em rgba(0,0,0,.1); margin:auto; position:relative; overflow:hidden; box-sizing:border-box; background:#111; padding:1em; padding-top:2em}
.appContainer .appWrap:before{ content:""; position:absolute; left:50%; top:.75em; width:3em; transform:translateX(-50%); height:.5em; background:#fff; border-radius:1em}
.appContainer .appWrap .screen{ background:#fff; box-sizing:border-box; height:100%; border-radius:1em; position:relative; overflow:hidden}
.appContainer .appWrap .screen iframe{ width:100%; height:100%}

.dp1on .gnb .dp2{ display:none!important}
.dp2on .gnb > li,
.dp2on .gnb > li .dp1{ display:none!important}
.dp2on .gnb > li.on{ display:block!important}
.dp3on .gnb > li,
.dp3on .gnb > li .dp1,
.dp3on .gnb > li .dp2 > li,
.dp3on .gnb > li .dp2 > li > a{ display:none!important}
.dp3on .gnb > li.on,
.dp3on .gnb > li .dp2 > li.on{ display:block!important}

.sns_st{ display:flex; gap:.5em}
.sns_st > li > a{ display:flex; align-items:center; justify-content:center; width:2.5em; height:2.5em; border-radius:50%; transition:.3s}
.sns_st > li > a .fi{ font-size:1.125em}
.sns_st > li > a img{ height:1.125em}
.sns_st > li > a:hover{ background:#111; color:#fff}
.sns_st > li > a:hover img{ filter:brightness(0) invert(1)}
.sns_st > li > a.kc img{ height:1.438em}

/**/
.vod_wrap{ position:relative; height:100%}
.vod_wrap .vod{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover}
.vod_wrap .layer{ position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.2}

.introSlide{ position:relative}
.introSlide .swiper-slide{ height:100dvh}
.introCon{ position: absolute; inset:0; width:100%; height:100%; z-index:1; box-sizing:border-box; padding:var(--headerH) 0 var(--pgPD) 0}
.introCon .wrapF{ display:flex; flex-direction:column; height:100%; color:#FFF}
.introCon .wrapF .conW{ flex:1 1 0%; min-height:0; display:flex; flex-direction:column; gap:5em; justify-content:center; padding-bottom:var(--headerH)}
.introCon .wrapF .conW .slogan{ display:flex; flex-direction:column; gap:1.5em; color:#fff; max-width:70vw}
.introCon .wrapF .conW .slogan .ti{ display:flex; flex-wrap:wrap; gap:0 .25em}
.introCon .wrapF .conW .slogan .t1{ font-weight:800; font-size:2.875em; letter-spacing:-.05em; word-spacing:.1em; line-height:1.2}
.introCon .wrapF .conW .slogan .t2{ font-size:1.125em; line-height:1.4; opacity:.8}
.introCon .wrapF .conW .area{ display:flex; flex-direction:column; gap:1em}
.introCon .wrapF .conW .area .t1{ font-weight:500; display:flex; gap:.5em; align-items:center; font-size:1.25em}
.introCon .wrapF .conW .area select{ width:100%; height:3em; padding:0 1em; background-color:rgba(255,255,255,.5); color:#111; border:none; font-weight:700; backdrop-filter:blur(1em); font-size:1.25em}
.introCon .wrapF .btnW{ display:flex; justify-content:center}
.introCon .wrapF .btnW .st{ position:relative; padding:.5em 1.5em; font-size:1.125em}
.introCon .wrapF .btnW .st:not(:last-child):after{ content:""; position:absolute; left:100%; top:50%; transform:translate(0, -50%); width:1px; height:.8em; background:#fff; opacity:.5}

.headerBg{ position:relative;}
.headerBg:before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:calc(100% + var(--headerH)); background:var(--siteBg); border-radius:0 0 5em 5em; box-shadow:0 1em 1em rgba(0,0,0,.1);}
.headerBg.c1{ color:#fff}
.headerBg.c1:before{ background:var(--siteC4)}
.headerBg > div{ position:relative}
.headerBg.p1{ padding-bottom:2.5em}

.mainEvtSlide{ padding-bottom:1em; margin-bottom:2em}
.mainEvtSlide .swiper-slide .bg{ padding-bottom:56.25%; border-radius:1em}
.mainEvtSlide .swiper-cube-shadow,
.mainEvtSlide .swiper-slide-shadow-left,
.mainEvtSlide .swiper-slide-shadow-right{ display:none}
.mainEvtSlide + .pgLine2{ display:none}

/**/
.cssCount{ counter-increment: cssCount}
.cssCount .no:before{  content:counter(cssCount)}

.pgBox{ border:1px solid #ddd; border-radius:1em; padding:1.5em}

.subTitW{ display:flex; align-items:center; gap:1em}
.subTit{ flex:1 1 0%; min-width:0; display:flex; flex-direction:column; gap:.75em}
.subTit .tit1{ font-weight:700; font-size:1.375em}
.subTit .tit1.s1{ font-size:1.125em}
.subTit .tit2{ font-weight:500; font-size:2em}
.subTit .icoImg{ height:5em}
.subTit .icoImg img{ height:100%}
.subTit .icoImg img.svg{ position:absolute; opacity:0; left:0; top:0}
.load .subTit .icoImg img.svg{ position:static; opacity:1}
.subTit .tt1{ font-size:1.063em; color:#666}

/**/
.memWrap .wrapF{ min-height:calc(100dvh - calc(var(--headerH) * 2)); box-sizing:border-box; display:flex; flex-direction:column}
.memWrap .wrapF:hA{ min-height:inherit}
.memWrap .loginW{ display:flex; flex-direction:column; gap:1.5em; margin:auto 0}
.memWrap .loginW .titW{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:calc(var(--headerH) / 2) 0 0 0}
.memWrap .loginW .titW .logo{ height:1.75em}
.memWrap .loginW .btnW{ display:flex; flex-direction:column; gap:.5em; --logBtnH : 2.75em;}
.memWrap .loginW .btnW .btn{ width:100%; height:var(--logBtnH); border-radius:.5em; border:2px solid transparent; gap:.5em; position:relative}
.memWrap .loginW .btnW:not(.sns) .btn{ background:var(--siteC); color:#fff;}
.memWrap .loginW .btnW .btn .t1{ font-weight:700; font-size:1.125em}
.memWrap .loginW .btnW .btn.re{ border-color:var(--siteC); color:var(--siteC); background:#fff}
.memWrap .loginW .btnW .btn.round{ border-radius:var(--logBtnH)}
.memWrap .loginW .btnW.sns{ padding:0 var(--pgPD)}
.memWrap .loginW .btnW.sns .btn{ padding-left:calc(var(--logBtnH) / 2); box-sizing:border-box}
.memWrap .loginW .btnW.sns .btn .ico{ width:var(--logBtnH); height:100%; border-right:1px dashed rgba(255,255,255,.5); position:absolute; left:0; top:0}
.memWrap .loginW .btnW .btn .ico:before{ font-size:1.125em }

.memWrap .loginW .formW{ display:flex; flex-direction:column; gap:1.5em; }
.memWrap .loginW .formW .inpW{ display:flex; flex-direction:column}
.memWrap .loginW .formW .inpW .inpL{ --logBtnH : 4.5em; width:100%; box-sizing:border-box; position:relative; height:var(--logBtnH); padding-left:var(--logBtnH); border:1px solid #ddd; color:#777; margin-top:-1px}
.memWrap .loginW .formW .inpW .inpL .ico{ width:var(--logBtnH); height:100%; position:absolute; left:0; top:0}
.memWrap .loginW .formW .inpW .inpL .ico .fi{ font-size:1.75em}
.memWrap .loginW .formW .inpW .inpL .inp{ box-sizing:border-box; height:100%; width:100%; border:none; background:none; font-size:1.3125em}
.memWrap .loginW .formW .inpW .inpL:has(.inp:focus).not(.error-on){ border-color:var(--siteC); color:var(--siteC); z-index:1}
.memWrap .loginW .formW .inpW .inpL .inp:focus{ font-weight:700}
.memWrap .loginW .formW .inpW .inpL .inp::placeholder{ font-size:.938em; font-weight:normal}
.memWrap .loginW .formW .inpW .inpL:first-child{ border-top-left-radius:1em; border-top-right-radius:1em}
.memWrap .loginW .formW .inpW .inpL:last-child{ border-bottom-left-radius:1em; border-bottom-right-radius:1em}
.memWrap .loginW .formW .btnW .btn{--logBtnH : 4em;}
.memWrap .loginW .formW .btnW .btn .t1{ font-size:1.25em}
.memWrap .loginW .formW .btnW .btn.h1{ --logBtnH : 3.5em;}
.memWrap .loginW .linkW{ display:flex; justify-content:center; gap:2em}
.memWrap .loginW .linkW.ar{ justify-content:flex-end}
.memWrap .loginW .linkW .st{ color:#888}
.memWrap .loginW .linkW .st .t1{ font-size:1.063em; font-weight:500}
.memWrap .loginW .formW .inpW .inpL .inp:-webkit-autofill,
.memWrap .loginW .formW .inpW .inpL .inp:-webkit-autofill:hover,
.memWrap .loginW .formW .inpW .inpL .inp:-webkit-autofill:focus,
.memWrap .loginW .formW .inpW .inpL .inp:-webkit-autofill:active { -webkit-box-shadow: 0 0 0px 1000px white inset !important; -webkit-text-fill-color: #000 !important; box-shadow: 0 0 0px 1000px white inset !important } 

.searchSt .list{ padding:0 .5em}
.searchSt .inpW{ position:relative; --searchStH : 3.5em; font-size:1.25em}
.searchSt .inpW .inp{ border:1px solid #111; height:var(--searchStH); border-radius:var(--searchStH); padding:0 var(--searchStH) 0 1.5em; box-sizing:border-box; width:100%; font-weight:500}
.searchSt .inpW .inp::placeholder{ font-size:.875em; color:#888; font-weight:500}
.searchSt .inpW .btn{ width:var(--searchStH); height:var(--searchStH); position:absolute; right:0; top:0}
.searchSt .inpW .btn .fi{ font-size:1.5em}
.searchSt.s1 .inpW{ --searchStH : 2.5em; font-size:1.125em}
.searchSt.s1 .inpW .inp{ padding-left:1em}

/**/
.filterListWrap{ display:flex; align-items:center; border:1px solid #eee; border-left:none; border-right:none; background:#fff}
.filterListWrap .wrapF{ display:flex; align-items:center; gap:1em; width:100%}
.filterListWrap .wrapTit .fIco{ font-size:1.25em}
.filterListWrap .wrapCon{ flex:1 1 0%; min-width:0;}
.filterList{ display:flex;  gap:.5em; width:100%}
.filterList > li{ flex:0 0 auto}
.filterList.wrap{ flex-wrap:wrap}

.propW{ display:flex; flex-direction:column; gap:3em}
.propW.g1,
.propW:has(.propSt.st2){ gap:1em}
.propSt{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:.75em 1.5em; --prodStImgW:10em; background:#fff; position:relative}
.propSt.shadow{}
.propSt .imgW{ width:var(--prodStImgW); overflow:hidden; border-radius:1em; position:relative}
.propSt .imgW .btnW{ position:absolute; bottom:0; right:0; background:rgba(255,255,255,.8); padding:.5em; border-top-left-radius:1em}
.propSt .imgW .btnW.bg1{ background:rgba(0,0,0,.5); color:#fff} 
.propSt:has( > .imgW.w1){ --prodStImgW:7em}
.propSt:has( > .imgW.w2){ --prodStImgW:5em}
.propSt .conW{ flex:1 1 0%; min-width:0; display:flex; flex-direction:column; gap:1em; padding:.5em 0; box-sizing:border-box; min-height:var(--prodStImgW)}
.propSt .conW .titW{ display:flex; flex-direction:column; gap:.5em; line-height:1.1}
.propSt .conW .titW .cate{ min-width:3.25em; height:2.25em; background:#333; border-radius:.25em; color:#fff; font-weight:700; text-align:center; box-sizing:border-box; padding:0 .5em}
.propSt .conW .titW .tit1{ font-weight:700; font-size:1.063em}
.propSt .conW .titW .tit2{ font-size:1em; opacity:.7; font-weight:500; line-height:1.1; word-break:keep-all}
.propSt .btnW{  justify-content:flex-end; padding:0 1em}
.propSt .btnW .st{ font-size:1.063em; background:none; border:none; display:flex; align-items:center; gap:.25em}
.propSt .btnW .st .no{ font-weight:700}
.propSt .conW .mgT{ margin-top:auto}
.propSt .etcW{ width:100%}
.propSt .wGrow{ width:100%}
.propSt.on .onBtnSt{ border-bottom-left-radius:0; border-bottom-right-radius:0; border-color:transparent; position:relative; background:#333; color:#fff; height:3.5em}
.propSt:not(.on) .onBtnSt ~ .svgCorner{ display:none}
.propSt.on .toggleObj{ border:1px solid #333; border-radius:1em 0 1em 1em; padding:1em; background:#f5f5f5;}
.propSt.st1{ padding:1em}
.propSt.st1 .conW{ padding:.25em 0; gap:.5em}
.propSt.st1:not(:first-child){ border-top:1px dashed #ddd}
.propSt.st2{ border:1px solid #ddd; padding:var(--pgPD); border-radius:.5em}
.propSt.st2 .titW .cate{ height:2em}
.propSt .propState{ position:absolute; right:-1px; top:-1px; border-radius:0 .5em; overflow:hidden; display:flex; gap:2px}
.propSt .propState .st{ height:2em; display:flex; padding:0 1em; background:var(--siteC); color:#fff; display:flex; align-items:center; justify-content:center; text-align:center}
.propSt .propState .st .t1{ font-weight:700}
.propSt .propState .st.c2{ background:#333}
.propSt .propState .st.c3{ background:var(--siteC4)}
.propSt:has(.propState .c1){ border-color:var(--siteC)}
.propSt:has(.propState .c3){ border-color:var(--siteC4)}
.propSt:has(.propState .c2) > div:is(.imgW, .conW){ opacity:.5}
.propSt.rd0{ border-radius:0}
.propW.st1{ gap:0; border-radius:1em; overflow:hidden; box-shadow:0 0 2em rgba(0,0,0,.1)}
.propW.st2{ padding:1em; background:var(--siteBg); border-radius:.5em; gap:.5em}
.propW.sd0{ box-shadow:none}

.infoSt{ display:flex; gap:.125em 3em}
.infoSt.col{ flex-direction:column; justify-content:flex-start}
.infoSt .stEl{ display:flex; gap:.5em}
.infoSt .stEl .stTit{ flex:0 0 auto}
.infoSt .stEl .stTT{ flex:1 1 0%; min-width:0}
.infoSt .stEl .t1{ font-weight:700}
.infoSt .stEl .t2{ color:#999}

.gapSt{display:flex; --g : 3em; gap:.125em var(--g); }
.gapSt .stEl{ position:relative;}
.gapSt .stEl:not(:last-child):after{ content:""; position:absolute; right:calc(var(--g) / 2 * -1); top:50%; transform:translate(50%, -50%)}
.gapSt.g1{ --g :1em}
.gapSt.g2{ --g :2em}
.gapSt.st1 .stEl:not(:last-child):after{ width:1px; height:70%; background:#ccc}
.gapSt.st2 .stEl:not(:last-child):after{ width:.375em; height:.375em; background:#ccc; border-radius:50%}

.propSt.scrollMg{ scroll-margin-top:calc(var(--headerH) + var(--stickyH1) + 1em)}

.propViewSlide .bg{ padding-bottom:56.25%}

.wrapAD{ position:relative}
.wrapAD .adT{ position:absolute; right:.5em; top:.5em; background:rgba(255,255,255,.7); color:#333; padding:.25em .5em; font-size:.875em; border-radius:1em}
.wrapAD .adT:before{ content:"\e857 \00A0 Ad."; font-family:fontello}
.wrapAD .ratio{ display:block}
.wrapAD.menu .ratio{aspect-ratio: 10 / 3;}

.pushList{ display:flex; flex-direction:column; gap:.75em; box-sizing:border-box; width:100%}
.pushSt{ border-radius:.5em; box-shadow:0 0 1em rgba(0,0,0,.1); padding:1em; display:flex; gap:1em; background:#fff; position:relative}
.pushSt .pushImg .userSt .uImg{ --userW:4.5em}
/* .pushSt .pushImg .userSt .uImg .uIco{ border-radius:calc(var(--userW) * .4)} */
.pushSt .pushCon{ flex:1 1 0%; min-width:0; display:flex; flex-direction:column; gap:.375em; margin:auto 0}
.pushSt .pushEtc{ padding-top:.75em; padding-left:.5em; min-width:5em; display:flex; flex-direction:column; align-items:flex-end; gap:.5em; text-align:right}
.pushSt .pushT1{ font-size:1.125em; font-weight:700; display:flex; flex-direction:column;}
.pushSt .pushT2{ color:#555}
.pushSt .pushT3{ color:#888; font-size:.813em}
.pushSt .ts{ font-size:.813em}
.pushSt.s1{ font-size:.875em; padding:.5em 1em}
.pushSt .check{ position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; box-sizing:border-box}
.pushSt:has(.check){ border:2px solid transparent}
.pushSt:has(.check:checked){ border-color:var(--siteC)}
.pushSt .fIco.inpCheck{ opacity:.3; font-size:1.5em}
.pushSt:has(.check:checked) .fIco.inpCheck{ opacity:1; color:var(--siteC)}
.pushSt.st1{ padding:1.125em}
.pushSt.st1 .pushMore .fBtn{ position:relative; top:50%; transform:translateY(-50%); transition:.3s}
.pushSt.st1 .pushMore .fBtn{ transition:.4s}
.pushSt.on .tRow{-webkit-line-clamp:none}
.pushSt.on .pushMore .fBtn{ top:0; transform:rotate(180deg) translateY(-50%)}
.pushSt:not(:has(.isEll)) .pushMore{ visibility:hidden}

.payHistorySt{ --bgS:1em; padding:1.5em; position:relative; background:#fff; box-shadow:0 0 1.5em rgba(0,0,0,.1); display:flex; flex-direction:column; gap:.5em;}
.payHistorySt:before,
.payHistorySt:after{ content: ""; position: absolute; left: 0; width: 100%; height: var(--bgS); background: linear-gradient( -45deg, transparent 75%, #fff 75%), linear-gradient( 45deg, transparent 75%, #fff 75%); background-size: var(--bgS) var(--bgS)}
.payHistorySt:before{ bottom:100%; transform:rotate(180deg)}
.payHistorySt:after{ top:100%}
.payHistorySt .tt1{ font-weight:700; width:100%; font-size:1.125em}
.payHistorySt .tt2{ color:#777; flex:1 1 0%; min-width:0}
.payHistorySt .tt2 .point{ font-weight:700; font-size:1.063em}
.payHistorySt .ttPriceW{ margin-left:auto}

.timelineSt{ display:flex; width:100%}
.timelineSt > li{ flex:1 1 0%; min-width:0; display:flex; justify-content:center; text-align:center; position:relative; padding:var(--dotS) 0 0 0; --dotS:1.5em; --sdS:calc(var(--dotS) * .2); --c0:rgba(0,0,0,.1); --c1:#ccc; --c2:#777;}
.timelineSt > li:before{ content:""; position:absolute; left:0; top:0; width:100%; height:calc(var(--dotS) / 3); background:var(--c0); transform:translateY(100%); box-shadow:0 var(--sdS) var(--sdS) rgba(0,0,0,.1) inset}
.timelineSt > li:first-child:before{ border-radius:1em 0 0 1em}
.timelineSt > li:last-child:before{ border-radius:0 1em 1em 0}
.timelineSt > li:after{ content:var(--fi); font-family:fontello; position:absolute; left:50%; top:0; width:var(--dotS); height:var(--dotS); border-radius:50%; background:var(--c1); transform:translate(-50%, 0); display:flex; align-items:center; justify-content:center; color:#fff}
.timelineSt > li .in{ padding:.5em; padding-bottom:0; color:var(--c2)}
.timelineSt > li .in .t1{ font-weight:700}
.timelineSt > li:has(~ li.on),
.timelineSt > li.on{ --c0:rgba(0,0,0,.3); --c1:var(--siteC3); --c2:var(--siteC); --fi:"\e928"}
.timelineSt > li.on{ --c1:var(--siteC);}
.timelineSt > li.on:not(:last-child):after{animation: blinkAni 1.5s infinite;}

.scaleTit{ display:flex; flex-direction:column; align-items:center; z-index:1; background:#fff}
.scaleTit > *{ width:100%}
.scaleTit .tit{ height:var(--stickyH2a); font-size:1.1875em; border-bottom:1px solid #eee; box-sizing:border-box}
.scaleTit .tit .wrapF{ display:flex; align-items:center; gap:.25em; justify-content:center; text-align:center; height:100%; width:100%}
.scaleTit .tit .tt{ font-weight:700; width:auto}
.scaleTit .tabSt{ height:var(--stickyH2b)}

.flexLine{ display:flex; gap:1px; background:#ddd; box-sizing:border-box}
.flexLine.col{ flex-direction:column}
.flexLine.out{ padding:1px;}
.flexLine > *:not(.flexLine){ background:#fff}

.regionPicker{ flex-direction:column; --rpH:2.75em}
.regionPicker > .wIn{ padding:.75em}
.regionPicker > .wIn.p0{ padding:0}
.regionPicker > .wIn.bg1{ background:#f5f5f5}
.regionPicker > .wIn.bg2{ background:var(--siteC)}
.regionPicker .wList{ display:flex; height:calc(var(--rpH) * 10 + 8px)}
.regionPicker .wList > li{ flex:1 1 0%; min-width:0; min-height:0; }
.regionPicker .wList > li .labList{ position:relative}
.regionPicker .wList > li .labList:has(label):after{ content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background:#ddd}
.regionPicker .wList > li .labList > *{ width:100%; height:var(--rpH)}
.regionPicker .rpBtn{ height: 3em; background:var(--siteBg); border:none; color:var(--siteC); text-align:center; width:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:center; text-align:center; gap:.25em}
.regionPicker .rpBtn .t1{ font-weight:700}

.navSt{ display:flex; align-items:center; --ng:1em; gap:var(--ng)}
.navSt > li{ position:relative}
.navSt > li:not(:last-child):after{ content:"\f006"; font-family:fontello; position:absolute; left:calc(100% + (var(--ng) / 2)); top:50%; transform:translate(-50%, -50%); opacity:.5}

.selectSt{ display:flex; border-radius:3em; padding:0 1em; gap:.5em; border:1px solid #ddd; height:2em; align-items:center; box-shadow:0 0 .25em rgba(0,0,0,.1)}

.compVSlide{ --m:.5em; margin:0 calc(var(--m) * -1)}
.compVSlide .swiper-slide{ width:70%; margin:0 var(--m)}
@media screen and (min-width:480px){
.compVSlide .swiper-slide{ width:40%; margin:0 var(--m)}
}
.compVImg{ border-radius:.5em; overflow:hidden}
.compVtt{ padding:0 .5em}
.compVtt .t1{ font-size:1.063em; font-weight:500}
.compVInfo{ padding:1em; background:rgba(255,255,255,.2); border-radius:.25em}
.compVInfo > li{ display:flex; gap:.5em; opacity:.8}
.compVInfo > li:not(:last-child){ margin-bottom:.5em}
.compVInfo > li .ico{ font-size:1.125em}
.compVInfo > li .tt{ flex:1 1 0%; min-width:0; padding-top:.125em; line-height:1.2}
.compVInfo > li a{ text-decoration:underline; text-underline-offset:.313em}
.comReviewTop .tit .t1{ font-weight:700; font-size:1.25em}
.comReviewTop .tit .t2{ font-weight:500; color:#aaa}

@media screen and (max-width:380px){
}
@media all and (orientation:landscape){
}

/*chat*/