@charset "utf-8";
@import url('/static/assets/styles/component/page_base.css');
@import url('/static/assets/styles/component/font_gmarket.css');
@font-face {
    font-family: 'OneStoreMobilePop';
    src: url('/static/assets/styles/fonts/ONE-Mobile-POP.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
html {font-size:var(--fontBase);}
body {background-color: #d7d8da;} 
    body.test .wrapper {flex-direction: column; height: auto;}
    body.test .wrapper > div {height: 75rem; width:auto; margin-bottom:5rem;}
    body.test .blank {display: none;}

.wrapper {display: flex; align-items:stretch; height:75rem; /*min-width: 337.5rem;*/ max-width: 480rem; width:480rem; margin:0 auto; background-color: #fff;}
.cont-l,
.cont-r {overflow:hidden; position:relative;}
.cont-l {width:162.5rem;} /*2600px;*/
.cont-r {width:175rem;}    /*2800px;*/
.blank {width:calc(50% - 168.75rem ); background-color: #4c4d4e;}
.inner {position:relative; width: 337.5rem; height:100%; padding:3.75rem 5rem 3.75rem 3.75rem; background-color: var(--base1);}
.inner img {width: 100%;}
.cont-l .inner {position: absolute; left:0;}
.cont-r .inner {position: absolute; right:0;}
.cont-l + .blank {width: 77.5rem;}  /*1240px*/
.cont-r + .blank {width: 65rem;}    /*1040px*/

:root{
    --fontBase : 16px;
    --basefff : #fff;
    --base0 : #052740;
    --base1 : #111213;
    --base13 : #131415;
    --base2 : #262729;
    --base22 : #22252A;
    --base5 : #575859;
    --line444 : #444;
    --rotationtime:0.6s;
    --transiTime : 0.5s;
    --transiDelay : 0.3s;
    --eventTime: 15s;
    --chatZoom: 1;
}
/* rem = val / 16 */
.inner {display:flex; gap:3.75rem; justify-content: space-between;}

.tab-container {position: relative; width:266.25rem; display: flex; overflow:hidden; flex-direction: column;}
.tab-container .sktUI {display:flex; justify-content: space-between;}
.tab-container .sktUI .side-1,
.tab-container .sktUI .side-2 {height:67.5rem; background-color: var(--base2); border-radius: 2.5rem;}
.tab-container .sktUI .side-1 {width: 137.5rem;}
.tab-container .sktUI .side-2 {width: 125rem;}

.tab-container div[class^="cont-"] {position:absolute; left: 0;top: 0;right: 0;bottom: 0; transition:opacity var(--transiTime); opacity:0; pointer-events: none;}
.tab-container div[class^="cont-"].active {opacity:1; pointer-events: fill; transition-delay: var(--transiDelay);}
.cont-wd {height: 67.5rem; }
.cont-wd,
.cont-news,
.cont-eco,
.cont-pybc {position: relative;}

.cont-wd {display: flex; justify-content: space-between;}
.cont-wd .wd-today {position: relative; width: 137.5rem; height: 67.5rem; padding:3.75rem; border-radius: 2.5rem; background-color: var(--base2)}
.wd-today .infos {color: var(--basefff); padding-left:6.25rem; display: flex; align-items: center; gap:3.75rem;}
.wd-today .decimal {}
.wd-today .number {font-size: 18.75rem; line-height: 20rem; font-weight: 500;}
.wd-today em {position: relative;top: -3rem; font-size: 16.25rem; line-height: 16.25rem; font-weight: 500; letter-spacing: -5px;}
.wd-today .text {margin-left: 1.25rem; color: currentColor;}
.wd-today .title {font-size: 6.25rem; line-height: 7.5rem; font-weight: 400;}
.wd-today .desc {margin-top: 1.5rem; line-height: 5.25rem; font-size: 4.5rem; font-weight: 400;}
.wd-today .stat-each {position: absolute; display: flex; justify-content: space-between; border-top:0.125rem solid var(--line444); padding:3.875rem 0; height: 23.75rem; left: 6.25rem; right: 6.25rem;bottom: 5rem;}
.wd-today .stat-each .item {flex:1; display: flex; flex-direction: column; align-items: center; gap: 2.5rem; text-align: center;}
.wd-today .stat-each .title {font-size: 3rem; color:#bbb; line-height: 3.5rem;}
.wd-today .stat-each .ico {width:6.25rem; height: 6.25rem; flex-shrink: 0;}
.wd-today .stat-each .value {font-size: 2.75rem; color:var(--basefff); background-color: rgba(187, 187, 187, 0.10); line-height: 5.25rem; padding:0 2rem; height: 5.25rem; border-radius:6.25rem;}
.wd-today .stat-each .dust[data-state="1"] .value {background-color: rgba(0, 170, 255, 0.10);}
.wd-today .stat-each .dust[data-state="2"] .value {background-color: rgba(230, 255, 66, 0.10);}
.wd-today .stat-each .dust[data-state="3"] .value {background-color: rgba(255, 33, 198, 0.10);}
.wd-today .stat-each .dust[data-state="4"] .value {background-color: rgba(255, 23, 68, 0.10);}
.wd-today .stat-each .dust[data-state="1"] .ico {background: url(/static/assets/board/images/ico-wd-dust-1.svg) no-repeat center/100%;}
.wd-today .stat-each .dust[data-state="2"] .ico {background: url(/static/assets/board/images/ico-wd-dust-2.svg) no-repeat center/100%;}
.wd-today .stat-each .dust[data-state="3"] .ico {background: url(/static/assets/board/images/ico-wd-dust-3.svg) no-repeat center/100%;}
.wd-today .stat-each .dust[data-state="4"] .ico {background: url(/static/assets/board/images/ico-wd-dust-4.svg) no-repeat center/100%;}
.wd-today .stat-each .dust[data-state="1"] .value::before {content:'좋음'; color: #0AF;}
.wd-today .stat-each .dust[data-state="2"] .value::before {content:'보통'; color: #E6FF42; }
.wd-today .stat-each .dust[data-state="3"] .value::before {content:'나쁨'; color: #FF21C6; }
.wd-today .stat-each .dust[data-state="4"] .value::before {content:'매우나쁨'; color: #FF1744; }

.wd-today .ico-lottie {margin-left: auto; width: 47.5rem;height: 32.5rem;}
.wd-today .ico-lottie lottie-player {height:100%; width:auto; transition: all .6s; }
.wd-daily {width: 125rem; height: 67.5rem; padding:6.25rem 6.25rem 5rem; background-color: var(--base2); border-radius: 2.5rem;}
.wd-daily .title {font-size: 6.25rem; margin-bottom: 5rem; line-height: 6.25rem; color: var(--basefff); font-weight: 700;}
.wd-daily .item-list {color: var(--basefff);}
.wd-daily .item {display: flex; height: 11.25rem; justify-content: space-between; align-items: center;}
.wd-daily .item .date,
.wd-daily .item .temperature {min-width:25rem;}
.wd-daily .item + .item {margin-top: 5.625rem;}
.wd-daily .item .ico {width: 7.5rem;height: 7.5rem;}
.wd-daily .item .ico[data-state="sun"] {background: url(/static/assets/board/images/weahter-sun.svg) no-repeat center/100%;}
.wd-daily .item .ico[data-state="cloudy"] {background: url(/static/assets/board/images/weahter-cloudy.svg) no-repeat center/100%;}
.wd-daily .item .ico[data-state="overcast"] {background: url(/static/assets/board/images/weahter-overcast.svg) no-repeat center/100%;}
.wd-daily .item .ico[data-state="rain"] {background: url(/static/assets/board/images/weahter-rain.svg) no-repeat center/100%;}
.wd-daily .item .ico[data-state="snow"] {background: url(/static/assets/board/images/weahter-snow.svg) no-repeat center/100%;}
.wd-daily .date .day {font-size: 5rem; font-weight: 700;}
.wd-daily .date .mm-dd {margin-left: 2rem; font-size: 3.75rem; color:#bbb;}
.wd-daily .temperature {font-size: 5rem; display: flex; align-items: center; justify-content:flex-end}
.wd-daily .temperature .\/ {width: 1.0625rem; height: 6rem; margin:0 0.75rem; -webkit-mask: url(/static/assets/board/images/temperature-line.svg) center/100%; mask: url(/static/assets/board/images/temperature-line.svg) center/100%; background-color:var(--line444);}

.cont-news {display: flex; justify-content: space-between;}
.news-detail {position: relative; width: 137.5rem;height: 67.5rem; padding:5rem 6.25rem 6.25rem; background-color: var(--base2);border-radius: 2.5rem;}
.news-detail .article {transition:opacity var(--transiTime); opacity:0; position: absolute; left: 6.25rem;top: 5rem; right: 6.25rem; bottom: 6.25rem;}
.news-detail .article.active {opacity:1; transition-delay: var(--transiDelay);}
.news-detail .title {word-break:keep-all; font-size: 6.875rem; line-height: 11rem; color:var(--basefff); font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.news-detail .desc {word-break:keep-all; margin-top: 3.75rem;font-size: 5rem; line-height: 7.5rem; color:#999; max-height: 30rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.news-list {position: relative; width: 125rem; padding:1.5rem 6.25rem; height: 67.5rem; background-color: var(--base2);border-radius: 2.5rem;}
.news-list .item-wrap {position: relative; padding:0.75rem 0; transition:transform var(--transiTime); transform: translateY(0);}
.news-list .item-wrap[data-view-step="0"] {transform: translateY(0);}
.news-list .item-wrap[data-view-step="1"] {transform: translateY(-67.5rem);}
.news-list .item-wrap[data-view-step="2"] {transform: translateY(-135rem);}
.news-list .news-item {position: relative; border-top:0.125rem solid #444; transition:padding var(--transiTime); font-size: 5rem; padding:5rem 0; height: 22rem; line-height: 12rem; color:var(--basefff); font-weight: 700; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
.news-list .news-item:nth-child(3n+1) {border-top:none;}
.news-list .news-item::before {content:''; transition: all .6s; opacity: 0; position: absolute; width: 5rem;height: 5rem; left: -5rem;top: 50%;transform: translateY(-50%); background-color: var(--basefff); -webkit-mask: url(/static/assets/board/images/news-active.svg) center/100%; mask: url(/static/assets/board/images/news-active.svg) center/100%;}
.news-list .news-item.active {padding-left:7.5rem;}
.news-list .news-item.active::before {opacity: 1; left: 0;}

.w-time-zone {flex-shrink: 0; display:flex; flex-direction: column; width: 41.25rem;}
.wd-cont {display: flex; flex-direction: column; justify-content: space-between; padding:4.5rem 4rem 5rem; height: 38.75rem; color:var(--base0); border-radius: 2.5rem; background-color: var(--base5);}
.wd-cont .graph {display:flex; align-items: center; width: 100%;}
.wd-cont .decimal {position: relative; top: 0.75rem; font-family: 'Gmarket sans';}
.wd-cont .number {font-size: 10rem; line-height: 10rem; font-weight: 400;}
.wd-cont em {position: relative;top: -2rem; font-size: 7.5rem; line-height: 7.5rem; font-weight: 500; letter-spacing: -5px;}
.wd-cont .ico {width: 11.25rem; height: 11.25rem; margin-left: auto;}
.wd-cont[data-state="sun"] {color:var(--base0); background: linear-gradient(180deg, #42A8FF 0%, #B4DAFF 100%);}
.wd-cont[data-state="sun"] .ico {background-color: var(--base0); -webkit-mask: url(/static/assets/board/images/weahter-sun.svg) center/100%; mask: url(/static/assets/board/images/weahter-sun.svg) center/100%;}
.wd-cont[data-state="cloudy"] {color:var(--base0); background: linear-gradient(180deg, #7BA7C3 0%, #A1C3DA 100%);}
.wd-cont[data-state="cloudy"] .ico {background-color: var(--base0); -webkit-mask: url(/static/assets/board/images/weahter-cloudy.svg) center/100%; mask: url(/static/assets/board/images/weahter-cloudy.svg) center/100%;}    
.wd-cont[data-state="overcast"] {background: linear-gradient(180deg, #7D8B95 0%, #B4C3CD 100%);}
.wd-cont[data-state="overcast"] .ico {background-color:var(--base22); -webkit-mask: url(/static/assets/board/images/weahter-overcast.svg) center/100%; mask: url(/static/assets/board/images/weahter-overcast.svg) center/100%;}    
.wd-cont[data-state="rain"] {color:var(--base22); background: linear-gradient(180deg, #7D8B95 0%, #B4C3CD 100%);}
.wd-cont[data-state="rain"] .ico {background-color:var(--base22); -webkit-mask: url(/static/assets/board/images/weahter-rain.svg) center/100%; mask: url(/static/assets/board/images/weahter-rain.svg) center/100%;}    
.wd-cont[data-state="snow"] {color:var(--base0); background: linear-gradient(180deg, #74BFFF 0%, #B1D4F5 100%);}
.wd-cont[data-state="snow"] .ico {background-color: var(--base0); -webkit-mask: url(/static/assets/board/images/weahter-snow.svg) center/100%; mask: url(/static/assets/board/images/weahter-snow.svg) center/100%;}
.wd-cont .text {margin-left: 0.75rem; color: currentColor;}
.wd-cont .title {font-size: 6.25rem; line-height: 7.5rem; font-weight: 700;}
.wd-cont .desc {word-break:keep-all; margin-top: 1.25rem; line-height: 4.5rem; font-size: 3.75rem; font-weight: 400;}

.wd-cont[data-state="sun"][data-sunset="night"] {color:var(--basefff); background: linear-gradient(180deg, #1B195F -11.57%, #005DBC 112.32%);}
.wd-cont[data-state="sun"][data-sunset="night"] .ico {background-color: var(--basefff); -webkit-mask: url(/static/assets/board/images/weahter-sun-night.svg) center/100%; mask: url(/static/assets/board/images/weahter-sun-night.svg) center/100%;}
.wd-cont[data-state="cloudy"][data-sunset="night"] {color:var(--basefff); background: linear-gradient(180deg, #002A49 0%, #1B527A 100%);}
.wd-cont[data-state="cloudy"][data-sunset="night"] .ico {background-color: var(--basefff); -webkit-mask: url(/static/assets/board/images/weahter-cloudy-night.svg) center/100%; mask: url(/static/assets/board/images/weahter-cloudy-night.svg) center/100%;}    


.date-week {display: flex; margin-top: auto; margin-bottom: 1.5rem; justify-content: space-between; align-items: center; color:var(--basefff)}
.date-week .date {font-size: 3.25rem; line-height: 3.875rem;}
.date-week .week {font-size: 3.25rem; line-height: 3.875rem;}

.hour-minute {position: relative; display:flex; align-items: center; color:var(--basefff); gap:1.25rem; font-size: 11.25rem; line-height: 16.75rem; font-weight: 700;}
.hour-minute .hour,
.hour-minute .minute {width: 50%; height: 16.75rem; flex:1; text-align: center; padding-top: 1.25rem; background-color: var(--base2); border-radius: 1.25rem;}
.hour-minute .flipper {position:relative; width:100%; transform-style:preserve-3d; perspective:1600px;}
.hour-minute .top, .hour-minute .bottom {background-color: var(--base2);}
.hour-minute .top {position:relative; width:100%; height:calc(50% - 0.225rem); margin-bottom:0.125rem; border-bottom:0.125rem solid var(--base2); border-top-left-radius:1.25rem; border-top-right-radius:1.25rem;}
.hour-minute .bottom {position:relative; width:100%; height:calc(50% - 0.175rem); margin-top:0.175rem; border-bottom-left-radius:1.25rem; border-bottom-right-radius:1.25rem;}
.hour-minute .text {display:block; font-family: 'Gmarket sans'; position:absolute; overflow:hidden; width:100%; height:100%;}
.hour-minute .bottom .text {line-height:1.45rem;}
.hour-minute .top.new, .hour-minute .bottom.new {position:absolute; left:0; z-index:12;}
.hour-minute .top.new {top:0.75rem; z-index:1;}
.hour-minute .top.new .text {backface-visibility:hidden;}
.hour-minute .bottom.new {position:absolute; top:0.125rem; height:calc(100% - 0px); transform:rotateX(0.5turn); z-index:1; opacity:0;}
.hour-minute .flipper.flipping .top.new {transform-origin:bottom center; animation:rotate var(--rotationtime) 1 ease-in-out forwards;}
.hour-minute .flipper.flipping .bottom.new {animation:rotatebottom var(--rotationtime) 1 ease-in-out forwards;}
@keyframes rotatebottom {0%{opacity:0;} 49%{opacity:0;} 50%{opacity:1;} 100%{opacity:1;}}
@keyframes rotate {0% {transform:rotateX(0) translateY(0px);} 100%{transform:rotateX(-180deg) translateY(-0.125rem);}}

.time-of-day {position: absolute; top: 1.5rem; left: 2rem; font-family: 'Gmarket sans'; font-size: 1.5rem; line-height: 1.5rem; font-weight: 700; color: var(--basefff);}

.indicator {display:flex; flex-direction: column; flex-shrink: 0;}
.indicator .item {position: relative; width: 15rem; height: 15rem; border-radius: 2.5rem; background-color: var(--base2);}
.indicator .item + .item {margin-top: 2.5rem;}
.indicator .item i {position:absolute; top:50%; left: 50%; text-indent:-999px; overflow: hidden; transform: translate(-50%, -50%); width:7.5rem; height: 7.5rem; background-color: var(--base5);}
.indicator .item.active i {background-color: var(--base13);}
.indicator .item.weather i {-webkit-mask:url(/static/assets/board/images/ico-weather.svg) center/100%; mask:url(/static/assets/board/images/ico-weather.svg) center/100%;}
.indicator .item.news i {-webkit-mask:url(/static/assets/board/images/ico-news.svg) center/100%; mask:url(/static/assets/board/images/ico-news.svg) center/100%;}
.indicator .item.economy i {-webkit-mask:url(/static/assets/board/images/ico-economy.svg) center/100%; mask:url(/static/assets/board/images/ico-economy.svg) center/100%;}
.indicator .item.pybc i { -webkit-mask:url(/static/assets/board/images/ico-pybc.svg) center/100%; mask:url(/static/assets/board/images/ico-pybc.svg) center/100%;}
.indicator .item.weather.active {background-color: #8D30FD;}
.indicator .item.news.active {background-color: #0AF;}
.indicator .item.economy.active {background-color:#FF21C6}
.indicator .item.pybc.active {background-color:#FF1744}

.cont-pybc {position: relative;}
.cont-pybc .item-banner {position: absolute; top: 0;left: 0;right: 0;bottom: 0; transition: opacity var(--transiTime); opacity: 0; display: flex; gap:0; width: 100%; height: 100%; justify-content: space-between; border-radius: 2.5rem; background-color: var(--base2);}
.cont-pybc .item-banner.active {opacity: 1; transition-delay: var(--transiDelay);}
.cont-pybc .image {position: relative; display:flex; flex-wrap: wrap; width: 140rem; max-height: 67.5rem; padding: 3.75rem 8.75rem 3.75rem 3.75rem; border-radius: 1.5rem;}
.cont-pybc .image img {width: 127.5rem; object-fit: contain; height: 60rem; border-radius: 1.5rem; overflow: hidden;}
.cont-pybc .news {display: flex; padding:5rem 0 6.25rem; width: 125rem; max-height: 67.5rem; background-color: var(--base2); border-radius: 2.5rem;}
.cont-pybc .news .title1 {color:var(--basefff); font-size: 6.875rem; line-height: 11rem; font-weight: 700;}
.cont-pybc .news .title2 {color:var(--basefff); font-size: 6.875rem; line-height: 11rem; font-weight: 700;}
.cont-pybc .news .desc1 {word-break:keep-all; margin-top: 3.75rem; color:#999; line-height: 7.5rem; font-size: 5rem;}
.cont-pybc .news .desc2 {word-break:keep-all; color:#999; line-height: 7.5rem; font-size: 5rem;}
.cont-pybc .news .item {position: relative; width:calc(100% - 6.25rem); height: 57.5rem;}
.cont-pybc .item-banner .desc1 {margin-top: 2.5rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.cont-pybc .bn-qr {width: 20.625rem;height: 20.625rem; border-radius: 1.25rem; overflow: hidden;}
.cont-pybc .news .bn-qr {position: absolute; left: 0;bottom: 0; background-color: #fff; border-radius: 1.25rem; padding:1.875rem; overflow: hidden;}
.cont-pybc .mov {position: relative; display:flex; flex-wrap: wrap; width: 140rem; max-height: 67.5rem; padding: 3.75rem 0 3.75rem 3.75rem; border-radius: 1.5rem;}
.cont-pybc .mov iframe {border-radius: 1.5rem; overflow: hidden;}
.cont-pybc .chat-list {position:relative; padding:3.75rem; width: 125rem; background-color:var(--base2); border-top-right-radius: 2.5rem; border-bottom-right-radius: 2.5rem}
.cont-pybc .chat-list iframe {border-radius: 1.5rem; overflow: hidden;}
.cont-pybc .chat-list iframe {transform-origin: left top; transform: scale(var(--chatZoom)); width: calc(100% * (1 / var(--chatZoom))); height: calc(100% * (1 / var(--chatZoom))); border-radius: calc(1.5rem * (1 / var(--chatZoom)));}
.cont-pybc .chat-list .bn-qr {position: absolute; right: 7.5rem;bottom: 7.5rem; background-color: #fff; border-radius: 1.25rem; padding:1.875rem; overflow: hidden;}

.evt-wrap {display: flex; padding:3.75rem; height:67.5rem; justify-content: space-between; background-color: var(--base2); border-radius: 2.5rem;}
.evt-qr {padding: 2.5rem 3.75rem 1.25rem 2.5rem; color:var(--basefff);}
.evt-qr--dur {display:inline-block; padding:1.25rem 2.625rem; font-size: 2.75rem;line-height: 3.125rem; color:#f8f9fc; border-radius: 100rem; border:0.4rem solid var(--basefff);}
.evt-qr__tit {margin-top: 2.5rem;font-weight: 700;  font-size: 6.875rem;line-height: 11rem;}
.evt-qr--qr {display:block; margin-top: 5rem; width: 20.625rem;height: 20.625rem; border-radius: 1.25rem; overflow: hidden;}
.evt-display {position: relative; display:flex; justify-content: space-between; padding:0 8.75rem 0 12.875rem; width: 197.5rem; height: 60rem; background: #000 url(/static/assets/board/images/evt_bg_10s.jpg) no-repeat center bottom/100%; border-radius:1.25rem;}
.evt-tit {padding: 7.25rem 0 0 0; width: 50.5rem; text-align: center;}
.evt-tit__aim {width: 50.5rem; height: 31.25rem; margin-bottom: 6.25rem;}
.evt-tit--desc {display:inline-block; box-shadow: 0 1rem 0 #AD1232; text-indent: -999rem; overflow: hidden; width:33.75rem; height:7rem; border-radius: 100rem; background:#EE3359 url(/static/assets/board/images/evt_txt1.svg) no-repeat center/19.56rem auto;}
.evt-score {width: 112.5rem; height: 60rem; overflow: hidden;}
.evt-score__scroll {height: 180rem; position: relative; opacity: 0; transform: translateY(0rem);}
.inner:has(.indicator .pybc.active) .evt-score__scroll {animation: evt-10-rank var(--eventTime) ease-in-out infinite; opacity: 0;}
@keyframes evt-10-rank {
    0% {transform: translateY(0rem); opacity: 0;}
    1% {opacity: 0;}
    1.5% {opacity: 1;}

    24% {transform: translateY(0rem);}
    26% {transform: translateY(-60rem);}

    49% {transform: translateY(-60rem);}
    51% {transform: translateY(-120rem);}

    74% {transform: translateY(-120rem);}
    76% {transform: translateY(-180rem);}

    98.5% {opacity: 1;}
    99% {opacity: 0;}
    100% {transform: translateY(-180rem);}
}
@keyframes evt-10-rank-3 {
    0% {transform: translateY(0rem); opacity: 0;}
    2% {opacity: 0;}
    4% {opacity: 1;}
    31% {transform: translateY(0rem);}
    34% {transform: translateY(-60rem);}
    65% {transform: translateY(-60rem);}
    68% {transform: translateY(-120rem);}
    96% {opacity: 1;}
    99% {opacity: 0;}
    100% {transform: translateY(-120rem);}
}
.evt-score__item {height: 60rem; padding:6.25rem 0 0;}
.evt-score__tit {display: flex; align-items: center; height: 7.5rem; justify-content: space-between;}
.evt-score__joined {margin:0 1.25rem; text-align: center; color:#F8F9FC; font-size:2.75rem; line-height: 3.125rem; font-weight: 700;}
.evt-score__joined::before {content: ''; display:block; margin:0 auto 1.25rem; width: 12.5rem; height: 3.25rem; background: url(/static/assets/board/images/evt_heart.svg) repeat-x center/auto 3rem;}
.evt-score__tit .evt-score__tit-today,
.evt-score__tit .evt-score__tit-total,
.evt-score__tit .evt-score__tit-recent {width:auto; height: 7.5rem;}

.evt-score__sps {width: 31rem; margin:0 1.25rem;}
.evt-score__sps .txt1 {display:flex; justify-content: space-between; height: 3.25rem; align-items: center; font-size: 2.75rem; line-height: 3.25rem; font-weight: 700; color:#F8F9FC;}
.evt-score__sps .txt1::before,
.evt-score__sps .txt1::after {content: ''; width: 3.25rem;height: 3.25rem; background:url(/static/assets/board/images/evt_heart.svg) no-repeat center/100%;}
.evt-score__sps .team {display:inline-block; margin-top: 1.25rem; line-height: 3rem; font-size: 2.5rem; color: #969DAB;}
.evt__prizes {display: flex; margin-top: 5rem; justify-content: space-between;}
.evt__prizes .Pitem {position: relative; width: 55rem;height: 35rem;}
.evt__prizes .Pitem.p1 {padding:5.25rem; background: url(/static/assets/board/images/event/10s/evt_bg_prz.png) no-repeat center/100%;}
.evt__prizes .Pitem.p2-10 {background: url(/static/assets/board/images/event/10s/evt_bg_prz2.png) no-repeat center/100%;}
.evt__prizes .Pitem.p1 {display: flex; flex-direction: column; align-items: flex-start;}
.evt__prizes .Pitem.p1 .ord {padding:1.5rem 2.25rem; color: #F8F9FC; background-color: #8D30FD; font-size: 2.5rem; line-height: 2rem; font-weight: 700; border-radius: 10rem; }
.evt__prizes .Pitem.p1 .tit {flex:1; margin-top: 1.5rem; color: var(--basefff); line-height: 5.25rem; font-size: 3.75rem; font-weight: 700;}
.evt__prizes .Pitem.p1 .sponser {font-size: 2.5rem; color: #999; line-height: 3rem;;}
.evt__prizes .Pitem.p1 .goods {position: absolute; bottom: 0.25rem; right: 2.125rem; width: 26.25rem;height: 26.25rem;}
.evt__prizes .Pitem.p2-10 {display: flex; justify-content: space-between; padding:5.25rem 5.875rem 5.25rem 5.25rem; }
.evt__prizes .Pitem.p2-10 .item-2to7,
.evt__prizes .Pitem.p2-10 .item-8to10 {width: 19.375rem; font-weight: 700; text-align: center;}
.evt__prizes .Pitem.p2-10 .item-devide {width:0.0625rem; background-color: #333;}
.evt__prizes .Pitem.p2-10 .ord {display: inline-block; vertical-align: middle; padding:1.5rem 2.25rem; line-height: 1.5rem; border-radius: 10rem; font-size: 2rem; color: #F8F9FC; background-color: rgba(255, 255, 255, 0.10);}
.evt__prizes .Pitem.p2-10 .tit {margin-top: 1.5rem; color:var(--basefff); font-size: 2.75rem; line-height: 3.375rem; display: inline-block; width: 100%; vertical-align: middle;}
.evt__prizes .Pitem.p2-10 .goods {width: 10rem;height: 10rem; display:inline-block; margin-top: 5.125rem; vertical-align: middle;}

.evt-score__rankers {display: flex; margin-top: 5rem; justify-content: space-between; align-items: center;}
.ranker-item {width: 32rem;height: 32rem; padding:3.75rem 0 0; color:var(--basefff); text-align: center; font-weight: 700; background: url(/static/assets/board/images/evt_rank_bg.png) no-repeat center/100%;}
.ranker-item.order-1 {order:2; width: 34.5rem;height: 34.5rem; padding:4.125rem 0 0; }
.ranker-item.order-2 {order:1;}
.ranker-item.order-3 {order:3;}
.ranker-item--order {display:inline-block; font-size: 3.25rem; line-height: 3.875rem;}
.ranker-item--order::after {content:''; margin-top: 1.75rem; display:block; width: 6.25rem;height: 6.25rem;}
.order-2 .ranker-item--order,
.order-3 .ranker-item--order {font-size: 2.75rem;}
.order-2 .ranker-item--user,
.order-3 .ranker-item--user {font-size: 3rem;}
.order-2 .ranker-item--score,
.order-3 .ranker-item--score {font-size: 4rem;}

.order-1 .ranker-item--order::after {background: url(/static/assets/board/images/evt_trophy_1.svg) no-repeat center/100%;}
.order-2 .ranker-item--order::after {background: url(/static/assets/board/images/evt_trophy_2.svg) no-repeat center/100%;}
.order-3 .ranker-item--order::after {background: url(/static/assets/board/images/evt_trophy_3.svg) no-repeat center/100%;}
.ranker-item--user {display:block; width: 25rem; margin: 2.5rem auto 0;font-size: 3.25rem;line-height: 3.875rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.ranker-item--score {margin-top: 1.5rem;font-size: 5rem;line-height: 6rem;}
.ranker-item--score span {color:#9F4FFF;}
.ranker-item--score em {margin-left: 0.5rem;}
.evt-score__records {margin-top: 5rem; padding:1.75rem 4.75rem 2.125rem; width: 112.5rem;height: 35rem; background: url(/static/assets/board/images/evt_records_bg.png) no-repeat center/auto 100%;}
.evt-score__records .item {display:flex; align-items: center; height: 8.125rem; font-weight: 700; font-size: 3.25rem; line-height: 3.875rem; color:var(--basefff)}
.records-order {flex-shrink: 0; width: 25rem; padding:0 2.5rem; text-align: center;}
.records-order .trophy {display:inline-block; width: 3.75rem;height: 3.75rem;}
.records-user {flex:1; margin:0 2.5rem; white-space: nowrap;}
.records-user .icon {width: 4rem;height: 4rem; margin-right: 1.5rem; display:inline-block; vertical-align:middle;}
.records-user .name {display:inline-block; vertical-align: middle; width: 40rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.records-score {flex-shrink: 0; width: 25rem; padding: 0 2.5rem; text-align: center;}
.records-score span {color:#9F4FFF;}
.records-score em {margin-left: 0.5rem;}
.records-thead {display: flex; align-items: center; height:6.25rem;}
.records-thead > span {text-indent:-999rem; height:6.25rem; overflow:hidden;background-size:auto 3.75rem; background-repeat: no-repeat; background-position: center;}
.records-thead .rank {width: 25rem;background-image: url(/static/assets/board/images/evt_recent_rank.svg);}
.records-thead .name {flex:1; background-image: url(/static/assets/board/images/evt_recent_name.svg);}
.records-thead .score {width: 25rem;background-image: url(/static/assets/board/images/evt_recent_score.svg);}
.pop-evt-ceremony {position: absolute; top: 0;left: 0;right: 0;bottom: 0; background-color: rgba(0,0,0,.8);}
.pop-evt-ceremony .pop-wrap {display: flex; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); width: 120rem; align-items: center; height: 37.5rem;border-radius:2.5rem; background-color:#191B1E;}
.pop-evt-ceremony .trophy {position: relative; width: 37.5rem;height: 37.5rem;}
.pop-evt-ceremony .trophy::after {content: ''; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); width: 12.5rem;height: 12.5rem; background: url(/static/assets/board/images/evt_trophy_1.svg) no-repeat center/100%;}
.pop-evt-ceremony .txt {padding:6.25rem 12.5rem 6.25rem 13.75rem; color:#F3F5F8; text-align: center; font-size: 5rem; font-weight: 700; line-height: 8rem;}
.pop-evt-ceremony .txt strong {color:#9F4FFF;}

/* 지수영역 */
.cont-eco {position: relative;}
.cont-eco .index {position: absolute; top: 0;left: 0;right: 0;bottom: 0; transition: opacity var(--transiTime); opacity: 0; display: flex; gap: 2.5rem;}
.cont-eco .index.active {opacity: 1; transition-delay: var(--transiDelay);}
.cont-eco .chart {position: relative; display:flex; flex-wrap: wrap; width: 137.5rem; max-height: 67.5rem; padding: 7.5rem 6.25rem; border-radius: 2.5rem; background: var(--base2);}
.cont-eco .chart::before {content:''; position: absolute; top: 50%; left: 6.25rem;right: 6.25rem; transform: translateY(-50%); height: 0.125rem; background-color: var(--line444);}
.cont-eco .chart .item {width: 60rem; padding: 0 2.5rem 7rem 0;}
.cont-eco .chart .item:nth-child(even) {padding: 0 0 7.5rem 4.75rem;}
.cont-eco .chart .item:nth-child(n+3) {padding-top:7rem; padding-bottom:0;}
.cont-eco .chart .item .title {display:inline-block; position: relative; color: var(--basefff); font-size: 5rem; line-height: normal; padding-right: 8.25rem;}
.cont-eco .chart .item .title:after {display: block; content: ''; position: absolute; top:0; right:0; width: 6.25rem; height: 6.25rem;}
.cont-eco .major .chart .item .title:after,
.cont-eco .major .chart .item .title:after {background: url(/static/assets/board/images/flag-usa.svg) no-repeat center/5.75rem auto;}
.cont-eco .major .chart .item.kospi .title:after,
.cont-eco .major .chart .item.kosdaq .title:after {background: url(/static/assets/board/images/flag-korea.svg) no-repeat center/5.75rem auto;}

.cont-eco .chart .item .statistics {display:flex; gap: 1.25rem; align-items: center; margin-top: 5rem;}
.cont-eco .chart .item .number {color:var(--basefff); font-size: 6.25rem; font-weight: 700; line-height: normal;}
.cont-eco .chart .item .per {display: flex; align-items: center;  gap: 0.25rem; padding:1rem 3rem 1rem 3rem; border-radius: 6.25rem; background: rgba(187, 187, 187, 0.10); color:#bbb; font-size: 5rem; font-weight: 700; line-height: normal;}
.cont-eco .chart .item.up .per {background: rgba(255, 33, 198, 0.10); color:#FF21C6;}
.cont-eco .chart .item.down .per {background: rgba(0, 170, 255, 0.10); color:#00AAFF;}
.cont-eco .chart .item .per i {width:5rem; height: 5rem; font-size:0;}
.cont-eco .chart .item .per lottie-player {width:5rem; height:5rem;}
.cont-eco .news {display: flex; padding:5rem 6.25rem 6.25rem; width: 125rem; max-height: 67.5rem; background-color: var(--base2); border-radius: 2.5rem;}
.cont-eco .news .title {word-break:keep-all; color:var(--basefff); font-size: 6.875rem; line-height: 11rem; font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.cont-eco .news .desc {word-break:keep-all; margin-top: 3.75rem; color:#999; line-height: 7.5rem; font-size: 5rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}


/* 달토끼 */
.evt-rbt {padding:3.75rem; height:67.5rem;  background-color: var(--base2); border-radius: 2.5rem;}
.evt-rbt .innr {position: relative; border-radius: 1.25rem; width: 100%; height:60rem; background: url(/static/assets/board/images/rabbit/bg_moon.jpg) no-repeat center/100%;}
/* .evt-rbt .innr::before {content: ''; position: absolute; left: 0;right: 0;bottom: 0; height: 40rem; background: url(/static/assets/board/images/rabbit/moon.png) no-repeat center bottom/100%;} */
.evt-rbt .logo {position: absolute;width: 28.75rem;height: 28.75rem;top: 3.75rem;right: 6.25rem;background: url(/static/assets/board/images/rabbit/logo.png) no-repeat center/100%;}
.evt-rbt .people {position: absolute; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; padding: 7.5rem 0 3.75rem;  top: 3.125rem;left: 5rem; width: 20rem; height: 32.5rem; background: url(/static/assets/board/images/rabbit/frame_people.png) no-repeat center/100%;}
.evt-rbt .people .in-moon {width: 11.25rem;}
.evt-rbt .people .out-moon {width: 11.25rem; position: relative;}
.evt-rbt .people .out-moon::before {content:''; position: absolute;top: -1.5rem; left: 50%; transform: translateX(-50%); height: 0.24rem; width:11.25rem; background-color: #EBD9C8;}
.evt-rbt .people .tit {display: block; height: 2.375rem; font-size: 2rem;font-weight: 700;color:#752A00;}
.evt-rbt .people .acct {height: 5.5rem; font-size: 5rem;font-weight: 700;
    color:#fff; text-shadow: 0 0.4rem 0 #752A00; font-weight: 400; -webkit-text-stroke-width: 0.25rem; -webkit-text-stroke-color: #752A00; font-family: 'OneStoreMobilePop';}

.evt-rbt .qr {position: absolute; padding: 6.875rem 0 0; top: 33.75rem;left: 5rem; width: 20rem; height: 23.75rem; background: url(/static/assets/board/images/rabbit/frame_qr.png) no-repeat center/100%}
.evt-rbt .qr img {max-width: 100%; width: 12.875rem; display: block; margin:0 auto;}
.evt-rbt .newbie {position: absolute; padding: 9rem 0 0 6.125rem; top: 3.125rem;left:27.5rem; width: 68.75rem;height: 54.375rem; background: url(/static/assets/board/images/rabbit/frame_newbie.png) no-repeat center/100%}
.evt-rbt .newbie .name {display: flex; flex-direction: column; width: 26.875rem;}
.evt-rbt .newbie .name-val {margin-top: 1.25rem; padding: 1.25rem 2rem; font-size: 2.5rem;font-weight: 700;color:#000; border-radius: 1.25rem; background-color: #FFFBF0; border:0.125rem solid rgba(0, 0, 0, 0.05); text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.evt-rbt .newbie .sketch {margin-top: 3.75rem; display: flex; flex-direction: column; width: 26.875rem;}
.evt-rbt .newbie .img-origin {margin-top: 1.25rem;position: relative; height: 22.875rem; border-radius: 1.25rem; background-color: #FFFBF0; border:0.125rem solid rgba(0, 0, 0, 0.05);}
.evt-rbt .newbie .img-origin img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); width: 20rem;height: 20rem;}
.evt-rbt .newbie .movie {position: absolute; top: 9rem;left: 33.25rem; width: 33rem;height: 39.375rem; overflow: hidden;}
.evt-rbt .newbie .movie video {position: absolute; left:50%; transform: translateX(-50%); width: 39.375rem;height: 39.375rem;}
.evt-rbt .newbie .tit {height: 2.375rem; font-size: 2rem;font-weight: 700;color:#752A00;}
.evt-rbt .newbie .awards {position: absolute; top:-1.875rem; right:-4.375rem; width: 48.75rem;height: 48.75rem;}
.evt-rbt .newbie .awards .lt-awards {display: none;}

.evt-rbt .rabbits {position: absolute; left: 96.25rem; top: 0; right: 0;bottom: 0;}
.evt-rbt .rabbits .item {position: absolute;}
.evt-rbt .rabbits .item.init {animation: moonRabbit .8s infinite;}
.evt-rbt .rabbits .item .render-box {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.evt-rbt .rabbits .item .lt-ignite {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); width: 27.5rem;height: 27.5rem; pointer-events: none;}
/* .evt-rbt .rabbits .item.ignite {background-color: red;} */
.evt-rbt .rabbits .img-origin {width: 17.5rem;height: 17.5rem;}
.evt-rbt .rabbits .txt {margin-top: 0.5rem; font-size: 1.75rem;font-weight: 500;color: #fff; padding: 0.5rem 1.5rem; height: 3rem; line-height: 2rem; border-radius: 100rem; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);}
.evt-rbt .rabbits .item[data-index="0"] {animation-delay: 0s; top: 24.8rem; left: 5rem;}
.evt-rbt .rabbits .item[data-index="1"] {animation-delay: .4s; top: 32.75rem; left: 20rem;}
.evt-rbt .rabbits .item[data-index="2"] {animation-delay: 1.6s; top: 36.5rem; left: 40rem;}
.evt-rbt .rabbits .item[data-index="3"] {animation-delay: 1.2s; top: 21rem; left: 51.25rem;}
.evt-rbt .rabbits .item[data-index="4"] {animation-delay: .8s; top: 37.75rem; left: 62.5rem;}
.evt-rbt .rabbits .item[data-index="5"] {animation-delay: .4s; top: 26.5rem; left: 75.625rem;}
.evt-rbt .rabbits .item[data-index="6"] {animation-delay: 0s; top: 31.5rem; left: 92rem;}
.evt-rbt .rabbits .item[data-index="7"] {animation-delay: 1.6s; top: 37.75rem; left: 107rem;}
.evt-rbt .rabbits .item[data-index="8"] {animation-delay: .8s; top: 32.75rem; left: 122rem;}
.evt-rbt .rabbits .item[data-index="9"] {animation-delay: 1.2s; top: 36.5rem; left: 140rem;}
@keyframes moonRabbit {
    0% {transform: translateY(0); animation-timing-function: ease-out;}
    45% {transform: translateY(-1.75rem); animation-timing-function: ease-in;}
    100% {transform: translateY(0); animation-timing-function: ease-out;}
}

.evt-rbt .curtain {position: absolute;top: 8.875rem;left: 29.875rem; width: 64rem;height: 45.875rem;overflow: hidden; border-radius: 0.875rem; pointer-events: none;}
.evt-rbt .curtain .curtain-area {width: 100%;height: 100%; transform: translateY(-100%); background: #FFEAF6;}
.evt-rbt .curtain .curtain-area lottie-player {position: absolute; left: 50%;right: 0;top: 50%; transform: translate(-50%, -50%); width: 100%;height: 100%;}
.evt-rbt .curtain .curtain-area .lt-curtain1 {width: 67%; top:calc(50% + 4rem);}
.evt-rbt .curtain .curtain-area .lt-curtain2 {width: 95%; top:calc(50% - 7.5rem);}
.evt-rbt .curtain.init .curtain-area {animation: curtainFall 4s linear forwards;}
/* curtainFall time은 js의 curtainTime 값과 동일하게 맞춰야 함 */
@keyframes curtainFall {
    0% {transform: translateY(-100%);}
    20% {transform: translateY(0);}
    80% {transform: translateY(0);}
    100% {transform: translateY(-100%);}
}