/* document --------------------------- */
*, *::after, *::before {
    box-sizing: border-box;
}

/* typography --------------------------- */
h1, h2, h3, h4, h5, h6 {
    clear: both;
    margin: 0;
    padding: 0;
}

b, strong {
    /* add the correct font weight in Chrome, Edge, and Safari */
    font-weight: 700;
}


/* list style --------------------------- */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* embedded content --------------------------- */
img {
    /* remove the border on images inside links in IE 10 */
    border-style: none;
}


/* form --------------------------- */
button, input, textarea, select, option {
    /* web font + system font */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    /* Remove the inheritance of text transform in Edge, Firefox and IE. */
    text-transform: none;
    background-color: transparent;
    /* Show the overflow in Edge and IE. */
    overflow: visible;
    cursor: pointer;
}

button:disabled, input:disabled {
    cursor: not-allowed;
}

button, [type='button'], [type='reset'], [type='submit'] {
    /* correct the inability to style clickable types in iOS and Safari */
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
}

[type='checkbox'], [type='radio'] {
    /* remove the padding in IE 10 */
    padding: 0;
}

textarea {
    width: 100%;
    /* remove the default vertical scrollbar in IE 10+ */
    overflow: auto;
    resize: none;
}


/* link --------------------------- */
a {
    color: #000000;
    text-decoration: none;
    /* remove the gray background on active links in IE 10 */
    background-color: transparent;
    cursor: pointer;
}

a:visited, a:hover, a:focus, a:active {
    color: #000000;
    outline: 0;
    text-decoration: none;
}

:focus {
    outline: none;
}
/* root */
:root {
    --deep-blue900: #071D3D; /* main color */
    --deep-blue800: #142A49;
    --deep-blue700: #253854;
    --deep-blue600: #2F415C;
    --deep-blue500: #43536C;
    --deep-blue400: #6A778B;
    --deep-blue300: #7E899A;
    --deep-blue200: #9CA5B1;
    --deep-blue100: #CDD2D8;
    --deep-blue50: #E4E7ED;

    --light-blue900: #395176;
    --light-blue800: #486D97;
    --light-blue700: #517DA9;
    --light-blue600: #5C8DBB;
    --light-blue500: #669CC7;
    --light-blue400: #75A9CF;
    --light-blue300: #88B8D7;
    --light-blue200: #A4CCE3;
    --light-blue100: #C4DFEE;
    --light-blue50: #EEF3F8;

    --gold500: #8C6334;
    --gold400: #C7A079; /* point color */
    --gold300: #E3C9AF;
    --gold50: #F4ECE4;

    --mint300: #00435D;
    --mint200: #1D99A7;
    --mint100: #4AC7D5;
    --mint50: #CCEFF3;

    --gray900: #121212;
    --gray500: #747474;
    --gray400: #A4A4A4;
    --gray300: #CCCCCC;
    --gray200: #DBDBDB;
    --gray100: #E5E5E5;
    --gray50: #F8F8F8;

    --blue: #19509A; /* sub color */

    --system-red: #FF3529;
    --system-blue: #236CD9;

    --black: #000000;
    --white01: #ffffff;
    --white02: #ffffff;
}

/* @media (prefers-color-scheme: dark) {
    :root {
        --gray900: #fff;
        --gray400: #3C3C3C;
        --gray300: #444444;
        --gray200: #252525;
        --gray100: #2B2B2B;

        --black: #fff;
        --white01: #121212;
        --white02: #222222;
    }
} */

/* ico */
i {display: block; background-repeat: no-repeat; background-size: contain; background-position: center;}
.ic-delete-g-10 {width: 10px;  height: 10px; background-image: url(/img/ico/ic-delete-g-10-bbb78e319e184fa479d10a8acb296561.svg);}
.ic-like-12 {width: 12px;  height: 12px; background-image: url(/img/ico/ic-like-12-d62e42562ab6b872dcb42b51299f84ac.svg);}
.ic-comment-12 {width: 12px;  height: 12px; background-image: url(/img/ico/ic-comment-12-5a4e9f1d9c9c39689caa9d7d2cf444e6.svg);}
.ic-arrow-right-12 {width: 12px;  height: 12px; background-image: url(/img/ico/ic-arrow-right-12-1c36e3c4aeb08e2f8a560cad9758d617.svg);}
.ic-arrow-right-12-gr {width: 12px;  height: 12px; background-image: url(/img/ico/ic-arrow-right-12-gr-61a3cb5363f4c13965de5dc58b6fce95.svg);}
.ic-arrow-right-15 {width: 15px; height: 15px; background-image: url(/img/ico/ic-arrow-right-15-d468c7ef2b94ccc6d99dbadd36f83463.svg);}
.ic-notice-16 {width: 16px; height: 16px; background-image: url(/img/ico/ic-notice-16-b339b68cd908475387dcecdac5bd09e7.svg);}
.ic-won-play {width: 40px; height: 40px; background-image: url(/img/ico/ic-won-play-fe2cb171480ee31749f5ec6233d67706.svg);}

.label-wrap {display: flex; align-items: center; column-gap: 4px;}

span.label {display: flex; align-items: center; justify-content: center; border-radius: 2px; width: fit-content; height: 18px; padding: 0 4px; font-size: 10px; font-weight: 500; color: #fff; background-color: var(--light-blue600);}
span.label.mint {background-color: var(--mint100);}
span.label.gray {background-color: #A4A4A4;}
span.label.brown {background-color: var(--gold50); color: var(--gold500);}
span.label.sky {background-color: var(--deep-blue50); color: var(--deep-blue900);}

/* main */
.floating {position: fixed; right: 20px; bottom: 20px; width: 48px; height: 48px; background-image: url(/img/btn-floating-bfb65c65c7cf210b5bc24b0888ef7fbd.png); background-repeat: no-repeat; background-size: contain; border-radius: 100%; filter: drop-shadow(2px 2px 8px rgba(74, 199, 213, 0.4)); z-index: 999;}

.main-summary {padding: 20px; background-color: var(--deep-blue900);}
.user-summary {display: flex; align-items: flex-end; justify-content: space-between;}
.user-summary .info {display: flex; flex-flow: column; row-gap: 8px; padding-bottom: 8px;}
.user-summary .info > h4 {font-size: 20px; color: #fff;}
.user-summary .info > h4 > span {font-weight: 700;}
.user-summary .info > h4 > a {font-weight: 700; text-decoration: underline; color: #fff;}
.user-summary .info > p {margin-top: 4px; font-size: 14px; color: var(--deep-blue300); display: flex; align-items: center; column-gap: 6px; cursor: pointer;}
.user-summary .membership {position: relative; display: flex; flex-flow: column; align-items: center; justify-content: center;}
.user-summary .membership > img {width: 72px; height: 72px;}
.user-summary .membership .membership-link {position: absolute; top: -12px; width: 57px; height: 23px; display: flex; align-items: center; justify-content: center; padding-bottom: 5px; background-image: url(/img/tooltip-membership-link-8d0d2b4459683c3b0e53da0da95245ca.svg); background-repeat: no-repeat; background-position: center; column-gap: 4px; font-size: 10px; font-weight: 500; color: var(--gray500); cursor: pointer;}

.game-summary-swiper.swiper {margin: 20px -20px 0; padding: 0 20px;}
.game-summary-swiper .swiper-slide {position: relative; display: flex; flex-flow: column; align-items: center; justify-content: center;}
.game-summary-swiper .swiper-slide .team {width: 60px; height: 60px; box-shadow: inset 1px 1px 2px rgba(29, 70, 125, 0.4); background-color: #fff; border-radius: 100%; background-repeat: no-repeat; background-size: 50px; background-position: center; position: absolute; top: 0; z-index: 1;}
.game-summary-swiper .swiper-slide .info-wrap {width: 100%; height: 40vw; margin-top: 10px; border-radius: 8px; box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.6); background-image: url(/img/game-info-wrap-img01-470eec3d043a85e1aa493adb224b4c12.png); background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden;}
.game-summary-swiper .swiper-slide:nth-child(3n-1) .info-wrap {background-image: url(/img/game-info-wrap-img02-b39c993a0f6f2b91298346db8ef07a97.png);}
.game-summary-swiper .swiper-slide:nth-child(3n) .info-wrap {background-image: url(/img/game-info-wrap-img03-59a81639c84e67e602282e6ab13aa4a3.png);}
.game-summary-swiper .swiper-slide:nth-child(1):nth-last-child(1) {width: 100%!important;}
.game-summary-swiper .swiper-slide:nth-child(1):nth-last-child(1) .info-wrap {background-image: url(/img/game-info-wrap-img02-b39c993a0f6f2b91298346db8ef07a97.png);}
.game-summary-swiper .swiper-slide .info-wrap .info {display: flex; align-items: center; justify-content: center; padding-top: 60px; flex-flow: column; row-gap: 6px; height: 25vw;}
.game-summary-swiper .swiper-slide .info-wrap .info > p {font-size: 14px; font-weight: 500; color: #fff; display: flex; column-gap: 2px; text-align: center; line-height: 1.4;}
.game-summary-swiper .swiper-slide .info-wrap .info > p > span {font-weight: 700; color: rgba(255, 255, 255, 0.4); line-height: 1.4;}
.game-summary-swiper .swiper-slide .info-wrap .info > p + p {font-size: 12px; color: rgba(255, 255, 255, 0.4);}
.game-summary-swiper .swiper-slide .info-wrap .info > span {font-size: 12px; color: #fff;}
.game-summary-swiper .swiper-slide .info-wrap > button {width: 100%; height: calc(100% - 25vw - 16px); border: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; margin-top: 16px; background-color: transparent; font-size: 14px; font-weight: 700; color: #fff;}

.event-wrap-swiper.swiper {margin-top: 12px;}
.event-wrap-swiper .swiper-slide {width: 100%; height: 21.5vw; border-radius: 4px; overflow: hidden; position: relative;}
.event-wrap-swiper .swiper-slide .img {width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center;}
.event-wrap-swiper .swiper-pagination {width: fit-content; height: 20px; border-radius: 10px; background-color: rgba(18, 18, 18, .8); display: flex; align-items: center; justify-content: center; padding: 0 8px; font-size: 12px; color: rgba(255, 255, 255, 0.4); column-gap: 2px; position: absolute; bottom: 8px; right: 8px; top: initial; left: initial;}
.event-wrap-swiper .swiper-pagination .swiper-pagination-current {color: #fff;}
.event-wrap-swiper .swiper-pagination .swiper-pagination-current,
.event-wrap-swiper .swiper-pagination .swiper-pagination-total {width: 8px; text-align: center;}

.mobile-main-swiper .swiper-slide {width: 100%; height: 60vw; border-radius: 4px; overflow: hidden; position: relative;}
.mobile-main-swiper .swiper-slide .img {width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center;}
.mobile-main-swiper .swiper-slide > img {width: 100%;}
.mobile-main-swiper .swiper-pagination {width: fit-content; height: 20px; border-radius: 10px; background-color: rgba(18, 18, 18, .8); display: flex; align-items: center; justify-content: center; padding: 0 8px; font-size: 12px; color: rgba(255, 255, 255, 0.4); column-gap: 2px; position: absolute; bottom: 8px; right: 8px; top: initial; left: initial;}
.mobile-main-swiper .swiper-pagination .swiper-pagination-current {color: #fff;}
.mobile-main-swiper .swiper-pagination .swiper-pagination-current,
.mobile-main-swiper .swiper-pagination .swiper-pagination-total {width: 8px; text-align: center;}

.notice-summary {margin-top: 12px; background-color: var(--deep-blue800); box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.2); border-radius: 4px; display: flex; align-items: center; justify-content: center; column-gap: 6px; padding: 20px 16px;}
.notice-summary > p {width: calc(100% - 16px - 6px - 76px); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; color: #fff;}
.notice-summary > span {width: 76px; font-size: 11px; color: rgba(255, 255, 255, 0.7); text-align: right;}

.info-banner-swiper.swiper {margin-top: -1px;}
.info-banner-swiper .swiper-slide {width: 100%; height: 101px; position: relative;}
.info-banner-swiper .swiper-slide .img {width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center;}
.info-banner-swiper .swiper-pagination {width: fit-content; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: rgba(255, 255, 255, 0.4); column-gap: 2px; position: absolute; bottom: 20px; top: initial; left: 20px;}
.info-banner-swiper .swiper-pagination .swiper-pagination-current {color: #fff;}

.main-wrap {padding: 30px 20px; display: flex; flex-flow: column; row-gap: 30px; background-color: var(--white01);}
.main-box .title {display: flex; align-items: end; justify-content: space-between; margin-bottom: 20px;}
.main-box .title > h4 {font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--black);}
.main-box .title > span {font-size: 12px; font-weight: 500; color: var(--gray500); display: flex; align-items: center;}

.event-list-wrap {display: flex; flex-flow: column; row-gap: 16px;}
.event-list-wrap > li {display: flex; align-items: start; column-gap: 12px;}
.event-list-wrap > li .img {width: 100px; height: 100px; border-radius: 4px; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center;}
.event-list-wrap > li .info {width: calc(100% - 100px - 12px); display: flex; flex-flow: column; row-gap: 6px;}
.event-list-wrap > li .info > h6 {font-size: 16px; font-weight: 500; color: var(--gray900); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.event-list-wrap > li .info > p {font-size: 12px; color: var(--gray500);}
.event-list-wrap > li .info > span {display: flex; align-items: center; font-size: 12px; font-weight: 500; color: var(--light-blue600); margin-top: 10px;}

.event-list-wrap-swiper.swiper {padding-bottom: 18px;}
.event-list-wrap-swiper.swiper .swiper-wrapper {height: calc(300px + (16px * 2));}
.event-list-wrap-swiper .swiper-slide {height: 100px!important; display: flex; align-items: center; column-gap: 12px;}
.event-list-wrap-swiper .swiper-slide .img {width: 100px; height: 100px; border-radius: 4px; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center center; overflow: hidden;}
.event-list-wrap-swiper .swiper-slide .info {width: calc(100% - 100px - 12px); display: flex; flex-flow: column; row-gap: 6px;}
.event-list-wrap-swiper .swiper-slide .info > h6 {font-size: 16px; font-weight: 500; color: var(--gray900); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.event-list-wrap-swiper .swiper-slide .info > p {font-size: 12px; color: var(--gray500);}
.event-list-wrap-swiper .swiper-slide .info > span {display: flex; align-items: center; font-size: 12px; font-weight: 500; color: var(--light-blue600); margin-top: 10px;}
.event-list-wrap-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {width: 100%; height: fit-content; display: flex; align-items: center; justify-content: center; column-gap: 8px; bottom: 0;}
.event-list-wrap-swiper .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {background-color: var(--gray200); opacity: 1; border-radius: 0; width: 6px; height: 6px; margin: 0;}
.event-list-wrap-swiper .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active {background-color: var(--gold400);}

.main-event-empty {padding: 20px; display: flex; flex-flow: column; row-gap: 12px; align-items: center; justify-content: center; border-radius: 4px; background-color: var(--gray50);}
.main-event-empty p {text-align: center; font-size: 14px; font-weight: 500; color: var(--gray500); line-height: 1.4;}

.img-ready-gy-32 {width: 32px; height: 32px; background-image: url(/img/ico/img-ready-gy-32-920bc3b61edf5f132833696dc2ec77a5.svg);}

.main-banner {display: flex; flex-flow: column; row-gap: 12px;}
.main-banner img {width: 100%;}

.live-quiz-swiper.swiper {margin: -20px; padding: 20px 20px 40px;}
.live-quiz-swiper .swiper-slide {height: 134px; background-color: var(--white02); border-radius: 4px; box-shadow: 4px 4px 12px rgba(7, 29, 61, 0.04); border: 1px solid var(--gray50); padding: 20px; position: relative; display: flex; flex-flow: column;}
.live-quiz-swiper .swiper-slide .label {margin-bottom: 4px;}
.live-quiz-swiper .swiper-slide > h6 {font-size: 16px; font-weight: 500; color: var(--gray900); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.live-quiz-swiper .swiper-slide > span:not(.label) {display: block; margin-top: 12px; font-size: 12px; color: var(--gray500);}
.live-quiz-swiper .swiper-slide .emblem-wrap {display: flex; align-items: center; column-gap: 2px; position: absolute; top: initial; left: initial; bottom: 12px; right: 12px;}
.live-quiz-swiper .swiper-slide .emblem-wrap > li {width: 40px; height: 40px; background-repeat: no-repeat; background-size: contain; background-position: center;}
.live-quiz-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {height: fit-content; position: absolute; top: initial; bottom: 20px;}
.live-quiz-swiper .swiper-pagination .swiper-pagination-bullet {width: 6px; height: 6px; border-radius: 0; background-color: var(--gray200); opacity: 1; margin: 0 4px}
.live-quiz-swiper .swiper-pagination .swiper-pagination-bullet-active {background-color: var(--gold400);}

@media (prefers-color-scheme: dark) {
    .live-quiz-swiper .swiper-slide {border-color: transparent;}
}

.dinos-video-swiper.swiper {margin: -20px; padding: 20px 20px 40px;}
.dinos-video-swiper .swiper-slide {height: calc(50vw + 16px + 88px); position: relative; display: flex; flex-flow: column; row-gap: 20px;}
.dinos-video-swiper .swiper-slide .info-wrap {display: flex; align-items: flex-end; justify-content: space-between; column-gap: 45px;}
.dinos-video-swiper .swiper-slide .info-wrap .info {width: calc(100% - 40px - 45px); display: flex; flex-flow: column; row-gap: 10px;}
.dinos-video-swiper .swiper-slide .info-wrap .info > h6 {font-size: 16px; font-weight: 500; color: var(--gray900); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; position: relative; padding-top: 14px;}
.dinos-video-swiper .swiper-slide .info-wrap .info > h6::before {content: ''; width: 14px; height: 2px; background-color: var(--gray900); display: block; position: absolute; top: 0; left: 0;}
.dinos-video-swiper .swiper-slide .info-wrap .info > span {font-size: 12px; color: var(--gray500);}
.dinos-video-swiper .swiper-slide .video {width: 100%; height: 50vw; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 8px; overflow: hidden;}
.dinos-video-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {height: fit-content; position: absolute; top: initial; bottom: 20px;}
.dinos-video-swiper .swiper-pagination .swiper-pagination-bullet {width: 6px; height: 6px; border-radius: 0; background-color: var(--gray200); opacity: 1; margin: 0 4px}
.dinos-video-swiper .swiper-pagination .swiper-pagination-bullet-active {background-color: var(--gold400);}

.dinos-photo-swiper.swiper {margin: 0 -20px; padding: 0 20px;}
.dinos-photo-swiper .swiper-slide {width: 240px; display: flex; flex-flow: column; row-gap: 12px;}
.dinos-photo-swiper .swiper-slide .img {width: 240px; height: 320px; border-radius: 12px; background-repeat: no-repeat; background-size: cover; background-position: center;}
.dinos-photo-swiper .swiper-slide .info {display: flex; flex-flow: column; row-gap: 12px;}
.dinos-photo-swiper .swiper-slide .info > h6 {font-size: 16px; font-weight: 500; color: var(--gray900);display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 220px;}
.dinos-photo-swiper .swiper-slide .info > span {font-size: 12px; color: var(--gray500);}

.team-store-swiper.swiper {margin: 0 -20px; padding: 0 20px;}
.team-store-swiper .swiper-slide {width: 132px; height: 132px; border-radius: 32px; background-color: #F2F2F2; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--gray100);}
.team-store-swiper .swiper-slide .img {width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover;}

/* membership lounge */
.membership-wrap {padding: 30px 20px 64px; background-color: var(--deep-blue900); display: flex; flex-flow: column; row-gap: 30px;}
.membership-wrap .main-box .title > h4 {color: var(--gold400); display: flex; align-items: center; column-gap: 6px;}
.membership-wrap .main-box .title > h4::before {content: ''; width: 48px; height: 16px; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url(/img/img-logo-star-premium-7015dead43b0da679fb0e3efeeac4959.svg);}

.lounge-wrap {display: flex; align-items: center; justify-content: center; column-gap: 12px;}
.lounge-wrap img {width: 100px; height: 100px;}
.lounge-wrap div {display: flex; flex-flow: column; row-gap: 8px;}
.lounge-wrap div > h6 {font-size: 14px; font-weight: 500; color: var(--white01);}
.lounge-wrap div > p::before {content: 'Premium'; font-size: 20px; font-weight: 700; color: var(--gold400);}
.lounge-wrap div > span::before {content: '스타 라운지 관리자'; font-size: 20px; font-weight: 700; color: var(--gold400);}

.dinos-community-swiper.swiper {margin: 0 -20px; padding: 0 20px;}
.dinos-community-swiper .swiper-slide {width: 240px; height: 151px; padding: 20px; display: flex; flex-flow: column; row-gap: 16px; border-radius: 4px; background-color: var(--gold400); overflow: hidden; background-image: url(/img/bg-community-5b3de07423ddd7cceb3dff197d48ebb6.png); background-size: 100px auto; background-position: bottom right; background-repeat: no-repeat;}
.dinos-community-swiper .swiper-slide > ul {display: flex; align-items: center; column-gap: 4px;}
.dinos-community-swiper .swiper-slide > ul > li {display: flex; align-items: center; column-gap: 4px; font-size: 12px; color: var(--gold300);}
.dinos-community-swiper .swiper-slide > ul > li + li::before {content: ''; width: 1px; height: 10px; background-color: var(--gold300);}
.dinos-community-swiper .swiper-slide > h6 {font-size: 16px; font-weight: 500; color: #fff; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; position: relative;}
.dinos-community-swiper .swiper-slide > div {display: flex; align-items: center; justify-content: space-between;}
.dinos-community-swiper .swiper-slide > div > ul {display: flex; align-items: center; column-gap: 4px;}
.dinos-community-swiper .swiper-slide > div > ul > li {display: flex; align-items: center; column-gap: 2px; font-size: 12px; color: var(--gold300);}
.dinos-community-swiper .swiper-slide > div .label { background-color: var(--gold50); color: var(--gold500);}

.membership-wrap .dinos-video-swiper .swiper-slide .info-wrap .info > h6,
.membership-wrap .dinos-photo-swiper .swiper-slide .info > h6 {color: #fff;}
.membership-wrap .dinos-video-swiper .swiper-slide .info-wrap .info > h6::before {background-color: #fff;}

.membership-wrap.basic .main-box .title > h4 {color: var(--mint100);}
.membership-wrap.basic .main-box .title > h4::before {background-image: url(/img/img-logo-star-basic-8bb8eef48e03e9b52925516b513b10e8.svg);}
.membership-wrap.basic .lounge-wrap div > p::before {content: 'Basic'; color: var(--mint100);}

.membership-wrap.basic .dinos-community-swiper .swiper-slide {background-color: var(--mint100); background-image: url(/img/bg-community-mint-fd1f19e91a1a84cc04c80c576f46fdda.png);}
.membership-wrap.basic .dinos-community-swiper .swiper-slide > ul > li {color: var(--mint50);}
.membership-wrap.basic .dinos-community-swiper .swiper-slide > div > ul > li {color: var(--mint50);}
.membership-wrap.basic .dinos-community-swiper .swiper-slide > div > ul > li .ic-like-12 {background-image: url(/img/ico/ic-like-12-mint-bc73f4ac67d34c4185a32bd5dd492c72.svg);}
.membership-wrap.basic .dinos-community-swiper .swiper-slide > div > ul > li .ic-comment-12 {background-image: url(/img/ico/ic-comment-12-mint-2628eee50ff6b2f8a2c2eda67e0a97df.svg);}

.membership-empty {padding: 20px; display: flex; flex-flow: column; row-gap: 12px; align-items: center; justify-content: center; border-radius: 4px; background-color: var(--deep-blue800);}
.membership-empty p {text-align: center; font-size: 14px; font-weight: 500; color: var(--deep-blue400); line-height: 1.4;}


/* 톡 ------------------------------ */
.ic-search-20 {width: 20px; height: 20px; background-image: url(/img/ico/ic-search-20-6a397d8e2b57d35d86d22dc9647a7f0a.svg);}
.ic-like-20 {width: 20px; height: 20px; background-image: url(/img/ico/ic-like-20-9b553947744e48501e688627b1f44f6c.svg);}
.active .ic-like-20 {width: 20px; height: 20px; background-image: url(/img/ico/ic-like-20-ov-55d8f7cd6243fd8f3a4b4e8552d3ec03.svg);}
.ic-comment-20 {width: 20px; height: 20px; background-image: url(/img/ico/ic-comment-20-45977b9f3e56a77320da0a325be68f62.svg);}
.ic-more-20 {width: 20px; height: 20px; background-image: url(/img/ico/ic-more-20-f74de89c75428c536c1765113232cbb3.svg);}

/* cont box */
.cont-box {padding: 20px 20px 0;}
.cont-box + .cont-box {margin-top: 24px; padding-top: 32px; position: relative;}
.cont-box + .cont-box::before {content: ''; width: 100%; height: 8px; display: block; border-top: 1px solid var(--gray200); background-color: var(--gray100); position: absolute; top: 0; left: 0;}

.box + .box {margin-top: 32px;}
.box + .box .sub-title {margin-top: -8px;}

.writing-btn {width: 52px; height: 52px; border-radius: 100%; position: fixed; right: 20px; bottom: 54px; cursor: pointer; z-index: 100; background-color: var(--mint100); background-image: url(/img/ico/ic-pencil-24-edfb1d9b945d71272e9fedbbece67018.svg); background-repeat: no-repeat; background-size: 24px; background-position: center;}

.tab-style01 {width: 100vw; margin: 0 -20px; height: 44px; display: flex; align-items: center; column-gap: 28px; background-color: var(--white01); overflow-y: hidden; overflow-x: auto; z-index: 99;}
.tab-style01::before {content: ''; width: 100%; height: 1px; background-color: var(--gray200); position: absolute; bottom: 0; left: 0;}
.tab-style01 > li {height: 100%;}
.tab-style01 > li > p {width: fit-content; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--gray400); cursor: pointer; position: relative;}
.tab-style01 > li.active > p {font-weight: 600; color: var(--black);}
.tab-style01 > li.active > p::before {content: ''; width: 100%; height: 2px; background-color: var(--black); position: absolute; bottom: 0;}
.tab-style01 > li:nth-child(1):nth-last-child(2), .tab-style01 > li:nth-child(1):nth-last-child(2) ~ li {width: calc(100% / 2);}
.tab-style01 > li:nth-child(1):nth-last-child(3), .tab-style01 > li:nth-child(1):nth-last-child(3) ~ li {width: calc(100% / 3);}
.tab-style01 > li:nth-child(1):nth-last-child(4), .tab-style01 > li:nth-child(1):nth-last-child(4) ~ li {width: calc(100% / 4);}
.tab-style01 > li:nth-child(1):nth-last-child(5), .tab-style01 > li:nth-child(1):nth-last-child(5) ~ li {width: calc(100% / 5);}

/* 톡 > 멤버십 커뮤니티 */
.search-wrap {width: 100%; padding: 12px 20px; background-color: var(--gray50); position: sticky; top: 0; z-index: 99;}
.search-wrap input[type="text"] {padding: 0 44px 0 12px;}
.search-wrap .ic-search-20 {position: absolute; right: 32px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.tab-style01.talk {margin-top: -14px; position: sticky; top: 64px;}

.best-article-swiper.swiper {margin: -16px -20px; padding: 16px 0;}
.best-article-swiper .swiper-wrapper {align-items: center;}
.best-article-swiper .swiper-slide {width: 280px; height: 136px; border-radius: 8px; box-shadow: 2px 2px 8px rgba(7, 29, 61, 0.32); background-image: url(/img/bg-community-4c12d67e173f0b5df54127e2e01df0a0.svg); background-size: 100px auto; background-position: bottom right; background-repeat: no-repeat; background-color: var(--gold400); padding: 16px 20px; cursor: pointer;}
.best-article-swiper .swiper-slide ul {display: flex; align-items: center; column-gap: 9px;}
.best-article-swiper .swiper-slide ul > li {display: flex; align-items: center; column-gap: 2px; font-size: 12px; color: var(--gold300); position: relative;}
.best-article-swiper .swiper-slide > div {display: flex; align-items: center; justify-content: space-between;}
.best-article-swiper .swiper-slide > div .upload > li + li::before {content: ''; width: 1px; height: 10px; background-color: var(--gold300); position: absolute; left: -5px;}
.best-article-swiper .swiper-slide > div .rank {font-size: 20px; font-weight: 600; color: var(--gold300);}
.best-article-swiper .swiper-slide > h4 {font-size: 16px; line-height: 1.4; font-weight: 400!important; color: var(--white01); margin-top: 6px; width: 248px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.best-article-swiper .swiper-slide .info {margin-top: 16px;}
.best-article-swiper .swiper-slide .info > ul {display: flex; align-items: center; column-gap: 9px;}
.best-article-swiper .swiper-slide .info > ul > li {display: flex; align-items: center; column-gap: 2px; font-size: 12px; color: var(--gold300); position: relative;}

.best-article-swiper .swiper-slide .info .respond > li {font-weight: 500;}

.post-list {margin: 24px 0;}
.post-list > li {cursor: pointer;}
.post-list > li + li {margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--gray200);}
.post-list > li .cont {display: flex; align-items: flex-start; justify-content: space-between; column-gap: 20px;}
.post-list > li .cont > div {width: calc(100% - 20px - 48px);}
.post-list > li .cont h4 {font-size: 16px; font-weight: 500; line-height: 1.3; margin-top: 6px; margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.post-list > li .cont p {font-size: 14px; line-height: 1.2; color: var(--gray700); margin-top: 6px; width: 220px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.post-list > li .cont .img {width: 48px; height: 48px; background-repeat: no-repeat; background-size: cover; background-position: center;}
.post-list > li .info {display: flex; align-items: center; justify-content: space-between; margin-top: 16px;}
.post-list > li .info > span {font-size: 12px; color: var(--gray500);}
.post-list > li .info > ul {display: flex; align-items: center; column-gap: 9px;}
.post-list > li .info > ul > li {display: flex; align-items: center; column-gap: 2px; font-size: 12px; color: var(--gray500); position: relative;}
.post-list > li .info .upload > li + li::before {content: ''; width: 1px; height: 10px; background-color: var(--gray300); position: absolute; left: -5px;}
.post-list > li .info .respond > li {font-weight: 500;}

/* 톡 > 검색 */
select {height: 44px; padding: 0 44px 0 12px; font-size: 14px; font-weight: 500; border: 1px solid #eee; color: var(--black); background-color: var(--white01); border-radius: 4px; background-image: url(/img/ico/ic-select-20-0af59cf8901ee5e21deb34913b923502.svg); background-repeat: no-repeat; background-size: 20px; background-position: right 12px center; cursor: pointer; -webkit-appearance: none; appearance: none;}
select::-ms-expand {display: none;/*for IE10,11*/}

select.small {width: fit-content; height: fit-content; border: none; color: var(--gray500); background-size: 14px; background-position: right center; padding: 0 18px 0 0;}

.search-detail {display: flex; flex-flow: column; row-gap: 8px; padding: 12px 20px; position: fixed; top: 0; left: 0; width: 100%; background-color: var(--gray50); z-index: 10;}
.search-detail .filter {display: flex; align-items: center; column-gap: 8px;}
.search-detail .filter > select {width: 100%;}
.search-detail .filter > select:nth-child(1):nth-last-child(2),
.search-detail .filter > select:nth-child(1):nth-last-child(2) ~ select {width: calc((100% - 8px) / 2);}
.search-detail .input {position: relative;}
.search-detail .input input[type="text"] {padding: 0 44px 0 12px; height: 44px;}
.search-detail .input button {width: fit-content; height: fit-content; background-color: transparent; border-color: transparent; border-radius: 100%; position: absolute; right: 12px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.search-result .filter {display: flex; align-items: center; justify-content: space-between; position: fixed; top: 120px; left: 0; width: 100%; height: 46px; padding: 0 20px; background-color: var(--white01);  z-index: 10;}
.search-result .filter > p {font-size: 14px}
.search-result .filter > p > span {font-weight: 600; color: var(--gold400);}
.search-result .filter select {background-color: transparent; border: none;}

.search-result .post-list {margin-top: calc(120px + 46px + 4px);}
.search-result .post-list .font-red {color: var(--gold400)!important;}

.notification {width: 100%; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 12px;}
.notification > h6 {text-align: center; font-size: 14px; font-weight: 500; color: var(--black); line-height: 1.5; word-break: keep-all;}
.notification > p {text-align: center; font-size: 14px; font-weight: 400; color: var(--gray500); line-height: 1.5;}

.ic-search-no-80 {width: 80px; height: 80px; background-image: url(/img/ico/ic-search-no-80-8b1bf9cd183dccf0f5df800bbe12512c.svg);}
.search.notification {height: calc(100vh - 120px - 46px - 40px); margin-top: calc(120px + 46px + 4px);}

/* 톡 > SSG톡 > SSG톡 상세 */
.post-detail .post-title > span {margin-bottom: 6px;}
.post-detail .post-title > h4 {font-size: 18px; font-weight: 500; line-height: 1.4;}
.post-detail .post-title > div {display: flex; align-items: center; justify-content: space-between; margin-top: 12px;}
.post-detail .post-title > div > ul {display: flex; align-items: center; column-gap: 9px;}
.post-detail .post-title > div > ul > li {display: flex; align-items: center; column-gap: 4px; position: relative; font-size: 12px; color: var(--gray500);}
.post-detail .post-title > div > ul > li + li::before {content: ''; width: 1px; height: 10px; display: block; background-color: var(--gray300); position: absolute; left: -5px;}
.post-detail .post-title > div > span {font-size: 12px; color: var(--gray500);}
.post-detail .post-cont {margin-top: 12px;}
.post-detail .post-cont * {font-size: 14px; line-height: 1.6; color: var(--gray700);}
.post-detail .post-cont * + * {margin-top: 24px;}
/* .post-detail .post-cont .post-img-swiper {height: 220px;} */
.post-detail .post-cont .post-img-swiper .swiper-wrapper {align-items: center;}
.post-detail .post-cont .post-img-swiper .swiper-wrapper .swiper-slide {margin: 0 0 22px; text-align: center;}
.post-detail .post-cont .post-img-swiper .swiper-wrapper .swiper-slide img {width: 100%;}
.post-detail .post-cont .post-img-swiper .swiper-pagination {bottom: 0; margin: 0; font-size: 0;}
.post-detail .post-cont .post-img-swiper .swiper-pagination .swiper-pagination-bullet {width: 6px; height: 6px; margin: 0 4px; background-color: var(--gray200); opacity: 1; border-radius: 0;}
.post-detail .post-cont .post-img-swiper .swiper-pagination .swiper-pagination-bullet-active {background-color: var(--gold400);}
.post-detail .post-respond {display: flex; align-items: center; justify-content: space-between; height: 44px; margin: 24px -20px -24px; padding: 0 20px; border-top: 1px solid var(--gray200);}
.post-detail .post-respond > ul {display: flex; align-items: center; column-gap: 12px;}
.post-detail .post-respond > ul > li {display: flex; align-items: center; column-gap: 4px;}
.post-detail .post-respond > ul > li > * {font-size: 12px; font-weight: 500; color: var(--gray500);}
.post-detail .post-respond > ul > li:nth-child(1) {cursor: pointer;}
.post-detail .post-respond > ul > li:nth-child(1).active > * {color: var(--gold400);}
.post-detail .post-respond > i {width: 20px; height: 20px;}

.more-wrap {position: relative; z-index: 5;}
.more-wrap .more-layer {position: absolute; top: 20px; right: 0; display: flex; align-items: center; border: 1px solid var(--gray200); background-color: var(--white01); border-radius: 2px;}
.more-wrap .more-layer button {width: fit-content; padding: 0; height: 28px; padding: 0 16px; font-size: 12px; font-weight: 500; color: var(--gray900); background-color: transparent; border-color: transparent; white-space: nowrap; position: relative; border: 0;}
.more-wrap .more-layer button + button {border-left: 1px solid var(--gray200);}

.comment-list > li + li {margin-top: 24px;}
.comment-list > li > ul {display: flex; align-items: center; column-gap: 9px; margin-bottom: 6px;}
.comment-list > li > ul > li {font-size: 12px; color: var(--gray500); display: flex; align-items: center; }
.comment-list > li > ul:not(.reply-wrap) > li + li::before {content: ''; width: 1px; height: 10px; display: block; background-color: var(--gray300); position: absolute; left: -5px;}
.comment-list > li .reply-count {font-size: 12px; color: var(--gold400); font-weight: 500; margin-top: 16px;}
.comment-list > li .comment {display: flex; align-items: flex-start; column-gap: 30px;}
.comment-list > li .comment > p {width: calc(100% - 30px - 20px); font-size: 14px; line-height: 1.6; color: var(--gray700); word-break: keep-all;}
.comment-list > li .comment .more {position: relative;}
.comment-list > li .comment .more .more-layer {position: absolute; top: 20px; right: 0; display: flex; align-items: center; border: 1px solid var(--gray200); background-color: var(--white01); border-radius: 4px;}
.comment-list > li .comment .more .more-layer button {width: fit-content; height: 46px; padding: 0 16px; font-size: 14px; font-weight: 500; color: var(--black); background-color: transparent; border-color: transparent; white-space: nowrap; position: relative;}
.comment-list > li .comment .more .more-layer button + button::before {content: ''; width: 1px; height: 12px; display: block; background-color: var(--gray200); position: absolute; left: 0;}
.comment-list > li .comment .more .more-layer .delete {color: var(--gray500);}
.comment-list > li .modify-wrap > textarea {height: 100px; border: 1px solid var(--gray100); border-radius: 4px; font-size: 14px; line-height: 1.4;}
.comment-list > li .modify-wrap > div {margin-top: 8px; display: flex; column-gap: 6px; align-items: center; justify-content: flex-end;}
.comment-list > li .modify-wrap > div > button {height: 32px; width: 60px; background-color: var(--white01); color: var(--gray500); font-size: 12px; font-weight: 500; border-radius: 2px; border: 1px solid var(--gray100); border-radius: 4px;}
.comment-list > li .modify-wrap > div > button.modify {color: var(--white01); background-color: var(--deep-blue900); border-color: var(--deep-blue900);}

.comment-list > li .reply-wrap {display: none; width: 100vw; margin: 16px -20px 0; padding: 16px 20px; background-color: var(--gray50);}
.comment-list > li .reply-wrap > li {display: block;}
.comment-list > li .reply-wrap > li > ul {display: flex; align-items: center; column-gap: 9px; margin-bottom: 6px;}
.comment-list > li .reply-wrap > li > ul > li {font-size: 12px; color: var(--gray900); display: flex; align-items: center; }
.comment-list > li .reply-wrap > li > ul > li + li::before {content: ''; width: 1px; height: 10px; display: block; background-color: var(--gray300); position: absolute; left: -5px;}
.comment-list > li .reply-wrap > li:not(:last-child) {padding-left: 20px; background-image: url(/img/ico/ic-reply-12-d2d7a26529f6e2e83d14ec4dc0ca70e2.svg); background-repeat: no-repeat; background-size: 12px; background-position: left top;}
.comment-list > li .reply-wrap > li + li {margin-top: 20px;}
.comment-list > li .reply-wrap > li > span {font-size: 12px; color: var(--gray500); display: block; margin-top: 8px;}

.comment-list > li .reply-wrap .reply-writing {background-image: none; padding-left: 0;}
.comment-list > li .reply-wrap .reply-writing > div {display: flex; align-items: center; justify-content: flex-end; column-gap: 8px; margin-top: 8px;}
.comment-list > li .reply-wrap .reply-writing > div > button {height: 32px; width: 60px; background-color: var(--white01); color: var(--gray500); font-size: 12px; font-weight: 500; border-radius: 2px; border: 1px solid var(--gray100); border-radius: 4px;}
.comment-list > li .reply-wrap .reply-writing > div > button.reg {color: var(--white01); background-color: var(--deep-blue900); border-color: var(--deep-blue900);}
.comment-list > li .reply-wrap.active {display: block;}

@media (prefers-color-scheme: dark) {
    .comment-list > li .profile .img {border-color: var(--gray200);}
    .comment-list > li .comment > p {color: var(--black);}

    .comment-list > li .reply-wrap {background-color: var(--gray100);}
}

.comment-writing {position: relative;}
.comment-writing::before {content: ''; width: 100%; height: 103px; display: block;}
.comment-writing > div {position: fixed; left: 0; bottom: 0; width: 100%; padding: 12px 20px 46px; display: flex; align-items: center; column-gap: 8px; background-color: var(--white01); box-shadow: 4px 4px 12px rgba(0, 0, 0, .08); border-top: 1px solid var(--gray100); z-index: 10;}
.comment-writing > div input[type="text"] {width: calc(100% - 80px - 8px); height: 44px;}
.comment-writing > div button {width: 80px; height: 44px; border: 0; background-color: var(--deep-blue900); border-radius: 4px; font-size: 14px; font-weight: 500; color: var(--white01);}

/* 톡 > 글쓰기 */
input {width: 100%; height: 44px; border-radius: 4px; border: 1px solid var(--gray200); background-color: var(--white01); padding: 0 12px; font-size: 14px; color: var(--black); cursor: auto;}
input::placeholder {color: var(--gray400);}

textarea {width: 100%; height: 400px; border-radius: 4px; border: 1px solid var(--gray200); background-color: var(--white01); padding: 12px; font-size: 14px; line-height: 1.6; color: var(--black); cursor: auto; resize: none;}
textarea::placeholder {color: var(--gray400);}

input[type="file"] {display: none;}
input[type="radio"] {display: none;}
.file-btn-only input[type="file"] + label {width: 120px; height: 32px; border: 1px solid var(--gray200); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: var(--red800);}

/* button */
.btn-wrap {padding: 24px 20px; display: flex; align-items: center; column-gap: 8px;}

button {width: 100%; height: 48px; line-height: 1; padding: 0; margin: 0; font-size: 16px; font-weight: 600; color: #fff; background-color: var(--deep-blue900); border: 1px solid var(--deep-blue900); border-radius: 4px; display: flex; align-items: center; justify-content: center; column-gap: 2px; cursor: pointer;}
button.sm {width: fit-content; height: 32px; padding: 0 10px; font-size: 12px; font-weight: 500;}
button:disabled {background-color: var(--gray300)!important; border-color: var(--gray300)!important; cursor: default;}


.file-img-preview-5 {width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); column-gap: .8rem;}
.file-img-preview-5 > li {height: 16vw; border: 1px solid var(--gray200); border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center;position: relative;}
.file-img-preview-5 > li::before {content: ''; width: 24px; height: 24px; display: block; background-image: url(/img/ico/ic-camera-24-2bbf1fff41840e0a1994bf9f7a0ea28e.svg); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; z-index: 1;}
.file-img-preview-5 > li .img {width: calc(100% + 2px); height: calc(100% + 2px); border-radius: 4px; margin: -1px; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; z-index: 1;}
.file-img-preview-5 > li .img .delete {width: 14px; height: 14px; border-radius: 100%; background-color: rgba(0, 0, 0, .6); background-image: url(/img/ico/ic-delete-8-9590bd76baab11af0a0cdae28fdc618d.svg); background-repeat: no-repeat; background-size: 8px; background-position: center; cursor: pointer; position: absolute; top: 4px; right: 4px;}

.writing-wrap {margin: -20px -20px -24px;}
.writing-wrap .tit {position: relative;}
.writing-wrap .tit > input[type="text"] {border: 0; border-radius: 0; padding: 0 20px; height: 58px; font-size: 18px; background-color: var(--white01);}
.writing-wrap .cont {position: relative;}
.writing-wrap .cont > textarea {height: 500px; border: 0; border-top: 1px solid var(--gray200); padding: 16px 20px; font-size: 14px;}

.writing-option {margin: -8px -20px 0;}
.writing-option > li {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 16px; padding: 0 20px;}
.writing-option > li + li {margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gray200);}
.writing-option > li > h6 {font-size: 16px; font-weight: 600; display: flex; align-items: flex-end; column-gap: 2px;}
.writing-option > li > h6 > span {font-size: 12px; font-weight: 500; color: var(--gray400); line-height: 1.2;}
.writing-option > li .writing-category {display: flex; align-items: center; border: 1px solid var(--gray200); border-radius: 2px; overflow: hidden;}
.writing-option > li .writing-category > li {width: 60px; height: 32px; cursor: pointer;}
.writing-option > li .writing-category > li + li {border-left: 1px solid var(--gray200);}
.writing-option > li .writing-category > li > input[type="radio"] + label {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: var(--gray500);}
.writing-option > li .writing-category > li > input[type="radio"] + label::before {content: none;}
.writing-option > li .writing-category > li > input[type="radio"]:checked + label {background-color: var(--gold50); border-color: var(--gold50); font-weight: 600; color: var(--gold400);}
.writing-option > li .writing-category > li > input[type="radio"]:checked ~ label:nth-child {border-left-color: var(--gold50);}


/* 이벤트 리스트 */
.contents-new {padding: 20px;}
.img-no-event {width: 72px; height: 72px; background-image: url(/img/ico/img-no-event-fc5dacfe999b8ecab62af2769e153b6f.svg);}

.event-list-empty {display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: 12px; height: calc(100vh - 40px);}
.event-list-empty > p {font-size: 14px; font-weight: initial; color: var(--gray500);}

.event-wrap {display: flex; flex-flow: column; row-gap: 20px;}
.event-wrap .event-title {display: flex; align-items: center; justify-content: space-between;}
.event-wrap .event-title .title {display: flex; flex-flow: column; row-gap: 8px;}
.event-wrap .event-title .title > h6 {font-size: 14px; font-weight: 500;}
.event-wrap .event-title .title > span {font-size: 12px; color: var(--gray500);}
.event-wrap .event-title .label-wrap {display: flex; align-items: center; column-gap: 4px;}
.event-wrap .event-title .label-wrap .brown {background-color: var(--gold400); color: #fff;}
.event-wrap .event-cont {display: flex; flex-flow: column; row-gap: 32px;}
.event-wrap .event-cont img {width: 100%;}
.event-wrap .event-cont .event-box {display: flex; flex-flow: column; row-gap: 20px;}
.event-wrap .event-cont .event-box > div {display: flex; align-items: center; justify-content: space-between;}
.event-wrap .event-cont .event-box > div > h6 {font-size: 16px; font-weight: 700; color: var(--gray900);}
.event-wrap .event-cont .event-box > div > span {font-size: 12px; font-weight: 500;}
.event-wrap .event-cont .event-box > div > span.true {color: var(--system-blue);}
.event-wrap .event-cont .event-box > div > span.false {color: var(--system-red);}
.event-wrap .event-cont .event-box > ul {display: flex; flex-flow: column; row-gap: 8px;}
.event-wrap .event-cont .event-box > ul > li input + label {width: 100%; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background-color: var(--gray50); border: 1px solid var(--gray50);}
.event-wrap .event-cont .event-box > ul > li input + label::before {order: 2;}
.event-wrap .event-cont .event-box > ul > li input:checked + label {background-color: rgba(199, 160, 121, 0.1); border-color: var(--gold400);}
.event-wrap .event-cont .event-box > ul > li input:checked + label > span {color: var(--gold400); font-weight: 700;}
.event-wrap .event-cont .event-box > ul > li input.true + label {border-color: var(--light-blue600); background-color: rgba(92, 142, 187, 0.2);}
.event-wrap .event-cont .event-box > ul > li input.true + label::before {background-image: url(/img/ico/ic-event-true-76543a5f190d7ce38b3880716d505a6e.svg);}
.event-wrap .event-cont .event-box > ul > li input.true + label > span {color: var(--light-blue600); font-weight: 500;}
.event-wrap .event-cont .event-box > ul > li input.false + label {background-color: var(--gray50); border-color: var(--gray50);}
.event-wrap .event-cont .event-box > ul > li input.false + label::before {background-image: url(/img/ico/ic-event-false-122382008586e83f0457fa26b6a57d22.svg);}
.event-wrap .event-cont .event-box > ul > li input.false + label > span {color: var(--system-red); font-weight: 500;}
.event-wrap .event-cont .event-box > input[type="text"] {border-radius: 0;}
.event-wrap .event-cont .event-box > input[type="text"].false {color: var(--system-red);}
.event-wrap .event-cont .event-box > input[type="text"].true {color: var(--system-blue);}
.event-wrap .event-cont .result-box {display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: 10px; padding: 60px 0;}
.event-wrap .event-cont .result-box .ic-fail-52 + h4 {color: var(--gray400);}
.event-wrap .event-cont .result-box .ic-right-52 + h4 {color: var(--light-blue600);}
.event-wrap .event-cont .result-box > h4 {font-size: 18px; font-weight: 500;}
.event-wrap .event-cont .result-box > p {font-size: 14px; color: var(--gray900);}

.ic-fail-52 {width: 52px; height: 52px; background-image: url(/img/ico/ic-fail-52-16b7c9971f94d214f787c38ede9b2219.svg);}
.ic-right-52 {width: 52px; height: 52px; background-image: url(/img/ico/ic-right-52-1dad38f6443ada60cf7ed52902363a5a.svg);}

input[type="text"]:disabled {background-color: var(--gray50); color: var(--gray400);}

.bottom-btn::before {content: ''; width: 100%; height: 84px; display: block;}
.bottom-btn > button {position: fixed; left: 0; bottom: 0; height: 84px; padding: 16px 20px 50px; display: flex; align-items: center; justify-content: center; border-radius: 0;}

input[type="radio"] {display: none;}
input[type="radio"] + label {display: flex; align-items: center;}
input[type="radio"] + label::before {content: ''; width: 20px; height: 20px; background-image: url(/img/ico/ic-radio-20-b97e55396f2b575eb44a0c9d29842cdf.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
input[type="radio"] + label > span {font-size: 14px; font-weight: 500; color: var(--gray900);}
input[type="radio"]:checked + label::before {background-image: url(/img/ico/ic-radio-ov-e21da2e1940ccd582e552562dcf27378.svg);}

input[type="checkbox"] {display: none;}
input[type="checkbox"] + label {display: flex; align-items: center;}
input[type="checkbox"] + label::before {content: ''; width: 20px; height: 20px; background-image: url(/img/ico/ic-check-20-82c814d0380f6d7144ee79497bbb8bd6.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
input[type="checkbox"] + label > span {font-size: 14px; font-weight: 500; color: var(--gray900);}
input[type="checkbox"]:checked + label::before {background-image: url(/img/ico/ic-check-20-ov-1ddb35b6ac1c9ea942822a8966521caa.svg);}

.barcode .num {display: flex; align-items: center; column-gap: 8px; margin: 0 -70px;}
.barcode .num button {height: 24px; column-gap: 2px; font-size: 12px; font-weight: 500; background-color: #fff; border-color: var(--gray100); border-radius: 2px; padding: 4px; color: var(--black); min-width: none; width: fit-content; white-space: nowrap;}
.ic-expand-16 {width: 16px; height: 16px; background-image: url(/img/ico/ic-expand-16-68a3a739ca50a09933af829f8df109af.svg);}

.barcode-expand {background-color: var(--white01); width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center;}
.barcode-expand .barcode {transform: rotate(90deg); display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 20px;}
.barcode-expand .barcode > h4 {font-size: 32px; font-weight: 500; color: var(--gray900);}
.barcode-expand .barcode #barcode {width: 360px; height: 88px;}
.barcode-expand .barcode #barcodeText {font-size: 20px; color: var(--gray900);}

.notify-list > li + li {margin-top: 16px;}
button.line-blue {color: var(--deep-blue900); background-color: var(--white01); border-color: var(--deep-blue900);}


/* 24.06.20 */
.ic-alarm {width: 32px; height: 32px; background-image: url(/img/ic-alarm-bb3adb44fcc991c9526123109e532fbe.png);}
.ic-alarm-no {width: 72px; height: 72px; background-image: url(/img/ic-alarm-no-3792b40b13874382d7ab9235f3178b82.png);}

.tab-style02 {display: flex; align-items: center; height: 44px; border-bottom: 1px solid var(--gray100);}
.tab-style02 > li:nth-child(1):nth-last-child(2), .tab-style02 > li:nth-child(1):nth-last-child(2) ~ li {width: calc(100% / 2);}
.tab-style02 > li {height: 100%; display: flex; align-items: center; justify-content: center;}
.tab-style02 > li > p {font-size: 14px; font-weight: 500; color: var(--gray400); width: fit-content; height: 100%; display: flex; align-items: center; justify-content: center; position: relative;}
.tab-style02 > li.active > p {font-weight: 500; color: var(--gold400);}
.tab-style02 > li.active > p::after {content: ''; width: 100%; height: 2px; background-color: var(--gold400); position: absolute; left: 0; bottom: 0;}

.empty {display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: 12px;}
.empty > p {font-size: 14px; color: var(--gray500); text-align: center;}

.empty.alarm {height: calc(100vh - 44px); background-color: var(--gray50); margin: -20px -20px 0;}

.alarm-wrap {background-color: var(--gray50); margin: -20px -20px 0; padding: 24px 20px; display: flex; flex-flow: column; row-gap: 8px;}
.alarm-wrap > li {background-color: var(--white01); border-radius: 4px; box-shadow: 4px 4px 12px 0px rgba(7, 29, 61, 0.04);}
.alarm-wrap > li > div {display: flex; align-items: center; column-gap: 12px; padding: 20px;}
.alarm-wrap > li > div > div {display: flex; flex-flow: column; row-gap: 10px; flex: 1;}
.alarm-wrap > li > div > div > p {font-size: 14px; line-height: 1.4;}
.alarm-wrap > li > div > div > span {font-size: 12px; color: var(--gray500);}
.alarm-wrap > li > div > button {width: fit-content; height: fit-content; padding: 0; font-size: 12px; color: var(--gray500); text-decoration: underline; background-color: transparent; border: 0;}
.alarm-wrap > li > div + div {display: none;}
.alarm-wrap > li.new > div > div > p::after {content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 100%; background-color: var(--mint100); margin-left: 4px; vertical-align: text-top;}
.alarm-wrap > li.active > div + div {display: flex; border-top: 1px dashed var(--gray100);}
.alarm-wrap > li.active > div + div > p {font-size: 12px; line-height: 1.4; word-break: keep-all;}