/* 공통 */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 0.5); */
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-spinner {
    /* background-color: white; */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.new-icon {
    display: inline-block;
    margin-left: 4px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #ed1323;
    color: #FFF;
    font-size: 11px;
    font-weight: 900;
    text-align: center;
    line-height: 17px;
    vertical-align: middle;
}

.responsive-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
}
.responsive-table li {
    display: table-row;
}
.responsive-table .table-header {
    display: table-header-group;
    font-weight: 600;
}
.responsive-table .col {
    display: table-cell;
    vertical-align: middle;
}

.responsive-table .table-header {
    position: relative;
    background-color: #117052;
    height: 38px;
    text-align: center;
    color: #ffffff;
}
.responsive-table .table-header .col:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 19px solid #fdd835;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
.responsive-table .table-header .col:first-child::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 19px solid transparent;
    border-left: 10px solid #f3f3f3; 
    border-bottom: 19px solid transparent; 
}
.responsive-table .table-header .col:last-child::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 19px solid #fdd835;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
.responsive-table .table-header .col:last-child::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 19px solid transparent;
    border-right: 10px solid #f3f3f3; 
    border-bottom: 19px solid transparent; 
}

.popup-layer {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    background-color: #ffffff;
}
.popup-layer .close-btn {
    position: absolute;
    top: 17px;
    right: 25px;
}
.popup-layer .popup-head h3 {
    margin-bottom: 18px;
    font-size: 3.1rem;
    font-weight: 500;
    text-align: center;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 25px;
    margin-top: 30px;
    height: 28px;
}
.pagination .prev,
.pagination .next {
    display: block;
    font-size: 0;
}
.pagination .prev {
    background-image: url(../../img/pagination-prev-btn.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 8px;
    height: 16px;
}
.pagination .next {
    background-image: url(../../img/pagination-next-btn.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 8px;
    height: 16px;
}
.pagination ol {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
}
.pagination ol li {
    display: block;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
}
.pagination ol li.active {
    background-color: #117052;
}
.pagination ol li a {
    color: #656565;
}
.pagination ol li.active a {
    color: #ffffff;
}

main #container h2 {
    margin-bottom: 38px;
    color: #19473e;
    font-size: 2.4rem;
    font-weight: 600;
}

.author-wrap {
    position: relative;
}
.author-wrap .author + .user-context {
    display: none;
    position: absolute;
    top: 20px;
    left: 60px;
    z-index: 10;
    border: 1px solid #c3c3c3;
    background-color: #ffffff;
    width: max-content;
    text-align: left;
}
.author-wrap .author + .user-context.open {
    display: block;
}
.author-wrap .author + .user-context .context-item {
    padding: 6px 10px;
    border-bottom: 1px solid #c3c3c3;
}
.author-wrap .author + .user-context .context-item a {
    display: block;
    font-size: 1.3rem;
    font-weight: 400;
}
.author-wrap .author + .user-context .context-item a:hover {
    color: #117052;
    text-decoration: underline;
}
.author-wrap .author + .user-context .context-item.open .nickname-history {
    display: block;
    margin-bottom: 12px;
    color: #117052;
    font-size: 1.3rem;
    font-weight: 600;
}
.author-wrap .author + .user-context .nickname-history-list {
    display: none;
    margin-top: 10px;
}
.author-wrap .author + .user-context .context-item.open .nickname-history-list {
    display: block;
}
.author-wrap .author + .user-context .nickname-history-list strong {
    display: block;
    margin-bottom: 12px;
    color: #117052;
    font-size: 1.3rem;
    font-weight: 600;
}
.author-wrap .author + .user-context .nickname-history-list ul li {
    display: block;
    margin-bottom: 8px;
    font-size: 1.3rem;
    font-weight: 400;
}
.author-wrap .author + .user-context .nickname-history-list ul li .date {
    color: #8a8a8a;
}

.empty-text {
    display: block;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 400;
    color: #666666;
    padding: 16px;
    border-top: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
}

/* 레이아웃 */
html {
    font-size: 10px;
}

body {
    background-color: #f3f3f3;
}

body, *::placeholder, textarea {
    font-size: 1.5rem;
    font-family: Pretendard, sans-serif;
    font-weight: 400;
}

#top-navi .inner {
    position: relative;
    z-index: 15;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 1247px;
    height: 40px;
    font-size: 1.3rem;
}

#top-navi .inner nav {
    position: relative;
}
#top-navi .inner nav::after {
    content: '';
    position: absolute;
    top: -13px;
    right: 608px;
    background-color: #ffffff;
    width: 100vw;
    height: 40px;
    z-index: -1;
}

#top-navi .inner nav ul {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    font-size: 1.5rem;
}
#top-navi .inner nav ul > li {
    position: relative;
}
#top-navi .inner nav ul > li.new {
    padding-right: 14px;
}
#top-navi .inner nav ul > li.new::after {
    position: absolute;
    top: 0;
    right: 0;
    content: 'N';
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ed1323;
    color: #FFF;
    font-size: 8px;
    font-weight: 900;
    text-align: center;
    line-height: 12px;
    vertical-align: middle;
}

#top-navi .inner .lottery-remain-counter {
    display: flex;
    align-items: center;
    gap: 10px;
}
#top-navi .inner .lottery-remain-counter p span.available {
    color: #333;
    font-size: 1.4rem;
    font-weight: 400;
}
#top-navi .inner .lottery-remain-counter p .get-lottery {
    display: inline-block;
    margin-left: 12px;
    padding-left: 23px;
    line-height: 18px;
    background-image: url(../../img/icon-face-smile.svg);
    background-repeat: no-repeat;
    background-position: left center;
    color: #117052;
    font-size: 1.4rem;
    font-weight: 700;
}
#top-navi .inner .lottery-remain-counter p span.unavailable {
    font-size: 1.4rem;
    color: #333333;
}
#top-navi .inner .lottery-remain-counter p span.unavailable strong {
    color: #4b4b4b;
    font-weight: 700;
}
#wrapper {
    display: grid;
    grid-template-areas: 
        /* ". header main ."
        ". header main ." */
        ". header main ."
        ". header footer footer"
    ;
    grid-template-columns: 1fr 267px 980px 1fr;
}
header {
    grid-area: header;
    background-color: #ffffff;
    position: relative;
}
header::before {
    content: '';
    position: absolute;
    top: -42px;
    left: -760px;
    z-index: 10;
    display: block;
    background-image: url(../../img/logo-bg.png);
    background-repeat: no-repeat;
    background-position: right top;
    width: 1373px;
    height: 268px;
}
header::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    display: block;
    background-color: #ffffff;
    width: 100vw;
    height: 100%;
}
header .inner {
    position: relative;
    margin-left: auto;
    z-index: 15;
}
header .inner #logo {
    position: relative;
    z-index: 15;
    margin: 74px auto 0;
    width: 142px;
}
header .inner #logo > a::after {
    content: '';
    position: absolute;
    top: -80px;
    left: 0;
    display: block;
    width: 100%;
    height: 80px;
}
header .inner #sidebar {
    padding-top: 63px;
}
header .inner #sidebar #gnb h2 {
    margin-bottom: 5px;
    padding-left: 42px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #068c61;
}
header .inner #sidebar #gnb ul {
    margin-bottom: 37px;
    max-height: 450px;
    transition: max-height 0.3s ease;
}
header .inner #sidebar #gnb ul > li {
    width: 256px;
    height: 38px;
    line-height: 38px;
    font-size: 1.5rem;
}
header .inner #sidebar #gnb ul > li > a {
    display: block;
    background-repeat: no-repeat;
    background-position: 14px center;
    padding-left: 42px;
    height: 100%;
    transition: background-color 0.3s ease;
}
header .inner #sidebar #gnb ul > li > a:hover {
    background-color: #d3e6e0;
}
header .inner #sidebar #gnb ul > li.partners > a {
    background-image: url(../../img/icon-gnb-partners.png);
}
header .inner #sidebar #gnb ul > li.point-exchange > a {
    background-image: url(../../img/icon-gnb-point-exchange.png);
}
header .inner #sidebar #gnb ul > li.customer-center > a {
    background-image: url(../../img/icon-gnb-customer-center.png);
}
header .inner #sidebar #gnb ul > li.overall-posts > a {
    background-image: url(../../img/icon-gnb-overall-posts.png);
}
header .inner #sidebar #gnb ul > li.popular > a {
    background-image: url(../../img/icon-gnb-popular.png);
}

header .inner #sidebar #gnb ul > li.notice > a {
    background-image: url(../../img/icon-gnb-cashout-notice.png);
}
header .inner #sidebar #gnb ul > li.join-greeting > a {
    background-image: url(../../img/icon-gnb-cashout-join-greeting.png);
}
header .inner #sidebar #gnb ul > li.attendance > a {
    background-image: url(../../img/icon-gnb-cashout-attendance.png);
}
header .inner #sidebar #gnb ul > li.event > a {
    background-image: url(../../img/icon-gnb-cashout-event.png);
}
header .inner #sidebar #gnb ul > li.ggong-money > a {
    background-image: url(../../img/icon-gnb-ggong-money.png);
}

header .inner #sidebar #gnb ul > li.freeboard > a {
    background-image: url(../../img/icon-gnb-community-freeboard.png);
}
header .inner #sidebar #gnb ul > li.report > a {
    background-image: url(../../img/icon-gnb-community-report.png);
}
header .inner #sidebar #gnb ul > li.know-how > a {
    background-image: url(../../img/icon-gnb-community-know-how.png);
}
header .inner #sidebar #gnb ul > li.cheer-room > a {
    background-image: url(../../img/icon-gnb-community-cheer-room.png);
}
header .inner #sidebar #gnb ul > li.shout > a {
    background-image: url(../../img/icon-gnb-community-shout.png);
}
header .inner #sidebar #gnb ul > li.analysis > a {
    background-image: url(../../img/icon-gnb-community-analysis.png);
}

header .inner #sidebar #gnb ul > li.broadcast > a {
    background-image: url(../../img/icon-gnb-live-broadcast.png);
}
header .inner #sidebar #gnb ul > li.live-score > a {
    background-image: url(../../img/icon-gnb-live-live-score.png);
}
header .inner #sidebar #gnb ul > li.absentee > a {
    background-image: url(../../img/icon-gnb-live-absentee.png);
}

header .inner #sidebar #gnb ul > li.box > a {
    background-image: url(../../img/icon-gnb-lottery-box.png);
}
header .inner #sidebar #gnb ul > li.winner > a {
    background-image: url(../../img/icon-gnb-lottery-winner.png);
}
header .inner #sidebar #gnb ul > li.transaction > a {
    background-image: url(../../img/icon-gnb-lottery-transaction.png);
}

header .inner #sidebar #gnb ul > li.follow > a {
    background-image: url(../../img/icon-gnb-ranking-follow.png);
}
header .inner #sidebar #gnb ul > li.experience > a {
    background-image: url(../../img/icon-gnb-ranking-experience.png);
}
header .inner #sidebar #gnb ul > li.recommend > a {
    background-image: url(../../img/icon-gnb-ranking-recommend.png);
}
header .inner #sidebar #gnb ul > li.active > a {
    background-image: url(../../img/icon-gnb-ranking-active.png);
}

header .inner #sidebar #gnb .panel-group h2 {
    display: flex;
    align-items: center;
    column-gap: 11px;
    cursor: pointer;
}
header .inner #sidebar #gnb .panel-group h2::after {
    content: '';
    display: block;
    width: 10px;
    height: 5px;
    background-image: url("../../img/panel-group-arrow.png");
    background-repeat: no-repeat;
    background-position: right center;
}
header .inner #sidebar #gnb .panel-group.normal {
    margin-top: 30px;
}
header .inner #sidebar #gnb .panel-group.fold h2::after {
    transform: rotate(180deg);
}
header .inner #sidebar #gnb .panel-group.fold ul {
    overflow: hidden;
    max-height: 0;
}
header .inner #sidebar #gnb .panel-group.fold ul > li {
    /* height: 0;
    line-height: 0; */
}

main {
    position: relative;
    z-index: 20;
    grid-area: main;
    padding-top: 30px;
    padding-bottom: 60px;
}
main.sub-page {
    padding-left: 15px;
}

footer {
    grid-area: footer;
    display: flex;
    column-gap: 35px;
    align-items: center;
    border-top: 1px solid #bfbfbf;
    padding: 35px;
}
footer .footer-text p {
    color: #8d8d8d;
    font-size: 1.3rem;
    line-height: 120%;
}

#container .article-list .article-table .table-header {
    font-size: 1.4rem;
    font-weight: 500;
}
#container .article-list .article-table .table-row {
    border-bottom: 1px solid #dbdbdb;
    height: 45px;
    font-size: 1.5rem;
    font-weight: 400;
}
#container .article-list .article-table .table-row:nth-child(even) {
    background-color: #ececec;
}
#container .article-list .article-table .table-row.loading,
#container.search-page .search-result .search-result-table .table-row.loading {
    position: relative;
    height: 130px;
    background-color: transparent;
}
#container .article-list .article-table .table-row.loading:nth-child(even),
#container .search-page .search-result .search-result-table .table-row.loading:nth-child(even) {
    background-color: transparent;
}
#container .article-list .article-table .table-row .col {
    text-align: center;
    line-height: 130%;
}
#container .article-list .article-table .table-row .col.col-title {
    max-width: 520px;
    text-align: left;
}
#container .article-list .article-table .table-row .col.col-title > a {
    display: inline-block;
    overflow: hidden;
    max-width: calc(100% - 20px);
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
#container .article-list .article-table .table-row .col.col-title .comment-count {
    display: inline-block;
    color: #00a16e;
    vertical-align: middle;
}
#container .article-list .article-table .table-row .col.col-author {
    padding: 0 10px;
    width: 140px;
    text-align: left;
}
#container .article-list .article-table .table-row .col.col-author .author,
#container .article-list .article-table .table-row .col.col-nickname .author {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    column-gap: 10px;
}
#container .article-list .article-table .table-row .col.col-author .author img,
#container .article-list .article-table .table-row .col.col-nickname .author img {
    width: 23px;
    height: 23px;
}
#container .article-list .article-table .table-row .col.col-no,
#container .article-list .article-table .table-row .col.col-date {
    width: 100px;
}
#container .article-list .article-table .table-row .col.col-view {
    width: 80px;
}

#container .article-list .article-table .table-row .col.col-award-speech {
    padding: 7px 5px;
}
#container .article-list .article-table .table-row .col.col-comment img {
    display: inline;
}
#container .article-list .article-table .table-row .col.col-follower .author-wrap,
#container .article-list .article-table .table-row .col.col-user .author-wrap {
    display: inline-block;
}

#container .info-text {
    overflow: hidden;
    margin-bottom: 60px;
    border-radius: 7px;
}
#container .info-text .info-text-list {
    background-color: #117052;
    padding: 25px 37px;
}
#container .info-text .info-text-list li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 14px;
    font-size: 1.6rem;
    font-weight: 400;
    color: #ffffff;
    line-height: 140%;
}
#container .info-text .info-text-list li.last-strong {
    margin-top: 30px;
}
#container .info-text .info-text-list li:last-child {
    margin-bottom: 0;
}
#container .info-text .info-text-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    display: block;
    border-radius: 50%;
    width: 4px;
    height: 4px;
    background-color: #69f1c7;
}
#container .info-text .info-text-list li .example-text {
    color: #a1ddca;
}

#container .article-list .article-table .table-row .col.col-status {
    width: 100px;
}
#container .article-list .article-table .table-row .col.col-status .status {
    display: inline-block;
    position: relative;
    padding-top: 20px;
    background-repeat: no-repeat;
    background-position: center 3px;
    width: 37px;
    height: 36px;
    font-size: 1.2rem;
    font-weight: 400;
}
#container .article-list .article-table .table-row .col.col-status .status::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    display: block;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
}
#container .article-list .article-table .table-row .col.col-status .status-waiting {
    background-color: #f5d463;
    color: #000000;
}
#container .article-list .article-table .table-row .col.col-status .status-waiting::before {
    border-top: 36px solid #f5d463;
}
#container .article-list .article-table .table-row .col.col-status .status-completed {
    background-color: #117052;
    background-image: url(../../img/icon-completed.png);
    color: #ffffff;
}
#container .article-list .article-table .table-row .col.col-status .status-completed::before {
    border-top: 36px solid #117052;
}

/* 메인 */
main .main-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 60px;
}
main .main-top .quick-menu {
    display: flex;
    gap: 30px;
    font-size: 1.8rem;
    font-weight: 500;
}
main .main-top .quick-menu li a {
    display: block;
    position: relative;
}
main .main-top .quick-menu li a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #eecc1a;
    position: absolute;
    bottom: -6px;
    left: 0;
    transition: width 0.3s ease;
}
main .main-top .quick-menu li:hover a::after,
main .main-top .quick-menu li.active a::after {
    width: 100%;
}
main .main-top .search-link {
    margin-left: 50px;
}
main .main-top .member-box {
    display: flex;
    gap: 8px;
    margin-left: 13px;
}
main .main-top .member-box a {
    display: block;
    padding: 7px 12px;
    border-radius: 3px;
    font-size: 1.5rem;
    font-weight: 500;
}
main .main-top .member-box a.join,
main .main-top .member-box a.mypage {
    background-color: #eecc1a;
    color: #000000;
}
main .main-top .member-box a.login,
main .main-top .member-box a.logout {
    background-color: #404040;
    color: #ffffff;
}
main section {
    padding: 35px 0;
}
main section .inner {
    display: block;
    margin: 0 auto;
    width: 880px;
}
main section h1 {
    margin-bottom: 17px;
    font-size: 1.8rem;
    font-weight: 700;
}
main section h1 strong {
    color: #00a571;
}

main section h2.main-title {
    margin-bottom: 17px;
    font-size: 1.8rem;
    font-weight: 700;
}
main section h2.main-title strong {
    color: #00a571;
}

main section.popular-today {
    background-color: #dfe8e5;
}
main section.popular-today .popular-galleries {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}
main section.popular-today .popular-galleries .item {
    background-color: #ffffff;
    padding: 5px;
    width: 170px;
    height: 168px;
    overflow: hidden;
}
main section.popular-today .popular-galleries .item > a > span {
    display: block;
    margin-top: 12px;
    padding: 0 6px;
    font-size: 1.4rem;
    font-weight: 500;
}
main section.popular-today .popular-galleries .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

main section.popular-today .popular-articles {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: 14px;
    column-gap: 60px;
    width: calc(100% - 17px);
    height: 156px;
    counter-reset: number;
}
main section.popular-today .popular-articles > li {
    counter-increment: number;
    display: flex;
    align-items: center;
    width: calc(50% - 30px);
}
main section.popular-today .popular-articles > li::before {
    content: counter(number);
    display: block;
    margin-right: 8px;
    border-radius: 50%;
    background-color: #117052;
    width: 20px;
    height: 20px;
    color: #ffffff;
    text-align: center;
    line-height: 20px;
    font-size: 1.2rem;
}
main section.popular-today .popular-articles > li .title {
    display: flex;
    align-items: center;
    margin-right: 4px;
}
main section.popular-today .popular-articles > li .title a {
    width: max-content;
    max-width: 215px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
main section.popular-today .popular-articles > li .title .comment-count {
    display: block;
    margin-left: 4px;
    color: #00a16e;
}
main section.popular-today .popular-articles > li .author-wrap {
    margin-left: auto;
    width: 90px;
    height: 17px;
    overflow: hidden;
    white-space: nowrap;
}
main section.popular-today .popular-articles > li .author-wrap .author {
    display: flex;
    align-items: center;
    gap: 5px;
}
main section.popular-today .popular-articles > li .author-wrap .author img {
    width: 17px;
    height: 17px;
}
main section.popular-today .popular-articles > li .author-wrap .author span {
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

main section.all-posts h2 {
    border-bottom: 1px solid #bfbfbf;
    padding-bottom: 12px;
}
main section.all-posts h2 strong {
    font-weight: 700;
}
main section.all-posts ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
main section.all-posts ul li:last-child {
    margin-bottom: 0;
}
main section.all-posts ul li .title {
    display: flex;
    align-items: center;
    width: 630px;
}
main section.all-posts ul li .title a {
    display: inline-block;
    max-width: calc(100% - 40px);
    color: #333333;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
main section.all-posts ul li .title .comment-count {
    color: #00a16e;
}
main section.all-posts ul li .author {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 175px;
    color: #333333;
    font-size: 1.3rem;
}
main section.all-posts ul li .author img {
    width: 17px;
    height: 17px;
}
main section.all-posts ul li .date {
    color: #6d6d6d;
    font-size: 1.3rem;
}

main section.latest-posts {
    background-color: #e6e6e6;
    min-height: 280px;
}
main section.latest-posts .inner {
    display: flex;
    justify-content: space-between;
}
main section.latest-posts .inner .latest-board {
    position: relative;
    display: flex;
    column-gap: 35px;
    width: 386px;
}
main section.latest-posts .inner .latest-board .latest > h2 {
    margin-bottom: 14px;
    color: #94a29f;
    cursor: pointer;
}
main section.latest-posts .inner .latest-board .latest.active > h2 {
    position: relative;
    color: #00a571;
}
main section.latest-posts .inner .latest-board .latest.active > h2::after {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    display: block;
    margin-top: 14px;
    width: 100%;
    height: 2px;
    background-color: #00a571;
}
main section.latest-posts .inner .latest-board .latest > ul {
    position: absolute;
    left: 0;
    display: none;
    border-top: 2px solid #b5b5b5;
    padding-top: 30px;
    width: 100%;
    height: 100%;
}
main section.latest-posts .inner .latest-board .latest > ul > li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 0 8px;
}
main section.latest-posts .inner .latest-board .latest > ul > li:last-child {
    margin-bottom: 0;
}
main section.latest-posts .inner .latest-board .latest > ul > li .title {
    width: 310px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
main section.latest-posts .inner .latest-board .latest > ul > li .date {
    color: #6d6d6d;
    font-size: 1.3rem;
}
main section.latest-posts .inner .latest-board .latest.active > ul {
    display: block;
}
main section.latest-posts .inner .latest-verifi {
    width: 426px;
}
main section.latest-posts .inner .latest-verifi .verifi-content {
    display: flex;
    column-gap: 29px;
    margin-top: 30px;
}
main section.latest-posts .inner .latest-verifi .verifi-content .verifi-pic-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
main section.latest-posts .inner .latest-verifi .verifi-content .verifi-pic-list .thumbnail {
    display: block;
    width: 100px;
    height: 70px;
}
main section.latest-posts .inner .latest-verifi .verifi-content .verifi-pic-list .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
main section.latest-posts .inner .latest-verifi .verifi-content .verifi-pic-list .verifi-pic-item .title {
    display: block;
    margin-top: 5px;
    width: 100px;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
main section.latest-posts .inner .latest-verifi .verifi-content .verifi-text-list .verifi-text-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    width: 300px;
}
main section.latest-posts .inner .latest-verifi .verifi-content .verifi-text-list .verifi-text-item:last-child {
    margin-bottom: 0;
}
main section.latest-posts .inner .latest-verifi .verifi-content .verifi-text-list .verifi-text-item .title {
    display: flex;
    align-items: center;
}
main section.latest-posts .inner .latest-verifi .verifi-content .verifi-text-list .verifi-text-item .title a {   
    width: 215px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
main section.latest-posts .inner .latest-verifi .verifi-content .verifi-text-list .verifi-text-item .title .comment-count {
    display: block;
    color: #00a16e;
}
main section.latest-posts .inner .latest-verifi .verifi-content .verifi-text-list .verifi-text-item .date {
    color: #6d6d6d;
    font-size: 1.3rem;
}

/* 검색 페이지 */
#container.search-page #container h1 {
    text-align: center;
    color: #333333;
    font-size: 3.3rem;
    font-weight: 600;
}
#container.search-page .search-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 45px;
    margin-bottom: 70px;
    border-radius: 8px;
    background-color: #117052;
    padding: 20px 0;
}
#container.search-page .search-box legend {
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 600;
}
#container.search-page .search-box .search-field {
    margin-left: 13px;
    padding: 0 18px;
    border-width: 0;
    width: 130px;
    height: 50px;
    font-size: 1.5rem;
    font-weight: 600;
    color: #333333;
}
#container.search-page .search-box .search-keyword {
    margin-left: 5px;
    padding: 0 18px;
    border-width: 0;
    width: 380px;
    height: 50px;
    font-size: 1.6rem;
}
#container.search-page .search-box .search-button {
    border-width: 0;
    margin: 0;
    padding: 0;
    background-color: #eecc1a;
    background-image: url(../../img/icon-search-btn.png);
    background-repeat: no-repeat;
    background-position: center;;
    width: 50px;
    height: 50px;
    font-size: 0;
}
#container.search-page .search-result .search-result-title {
    color: #333333;
    font-size: 2.8rem;
    font-weight: 400;
    text-align: center;
}
#container.search-page .search-result .search-result-count {
    margin-top: 18px;
    color: #6b6b6b;
    font-weight: 400;
    text-align: center;
}
#container.search-page .search-result .search-result-count strong {
    color: #117052;
}
#container.search-page .search-result .search-result-table {
    margin-top: 50px;
    font-size: 1.4rem;
}
#container.search-page .search-result .search-result-table .table-row {
    border-bottom: 1px solid #dbdbdb;
    height: 70px;
}
#container.search-page .search-result .search-result-table .table-row:nth-child(odd) {
    background-color: #ececec;
}
#container.search-page .search-result .search-result-table .table-row .col {
    text-align: center;
}
#container.search-page .search-result .search-result-table .table-row .col.col-no,
#container.search-page .search-result .search-result-table .table-row .col.col-view {
    width: 100px;
}
#container.search-page .search-result .search-result-table .table-row .col.col-title {
    text-align: left;
}
#container.search-page .search-result .search-result-table .table-row .col.col-title .title {
    font-size: 1.6rem;
}
#container.search-page .search-result .search-result-table .table-row .col.col-title .content {
    margin-top: 5px;
    color: #848484;
    font-size: 1.3rem;
}
#container.search-page .search-result .search-result-table .table-row .col.col-author .author {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}
#container.search-page .search-result .search-result-table .table-row .col.col-author .author img {
    width: 20px;
    height: 20px;
}
#container.search-page .search-result .search-result-table .table-row .col .highlight {
    color: #117052;
    font-weight: 600;
}


/* 로그인, 회원가입 */
#container.login-page .login-box {
    position: relative;
    margin: 250px auto 0;
    padding: 35px 42px;
    width: 414px;
    background-color: #ffffff;
}
#container.login-page .login-box::before {
    content: '';
    position: absolute;
    top: -64px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 64px;
    height: 64px;
    background-image: url(../../img/login-mascot.png);
    background-repeat: no-repeat;
    background-position: center;
}
#container.login-page .login-box .login-logo {
    margin: 0 auto;
    width: 137px;
}
#container.login-page .login-box .login-logo img {
    width: 100%;
    height: 100%;
}
#container.login-page .login-box .login-title {
    margin-top: 18px;
    margin-bottom: 20px;
    font-size: 3rem;
    font-weight: 600;
    text-align: center;
}
#container.login-page .login-box .login-head-text {
    margin-top: 25px;
    margin-bottom: 20px;
    color: #838383;
    font-size: 1.4rem;
    font-weight: 400;
    text-align: center;
    line-height: 150%;
}
#container.login-page .login-box .login-form .login-form-items {
    border-top: 1px solid #afc5b6;
    border-bottom: 1px solid #afc5b6;
    padding: 20px 0;
}
#container.login-page .login-box .login-form .login-form-items .login-form-item + .login-form-item {
    margin-top: 23px;
}
#container.login-page .login-box .login-form .login-form-items .login-form-item label {
    display: block;
    margin-bottom: 5px;
    color: #676767;
    font-size: 1.3rem;
    font-weight: 600;
}
#container.login-page .login-box .login-form .login-form-items .login-form-item input[type="text"],
#container.login-page .login-box .login-form .login-form-items .login-form-item input[type="password"] {
    display: block;
    padding: 0 8px;
    background-color: #f2f2f2;
    width: calc(100% - 20px);
    height: 36px;
    border: 2px solid #f2f2f2;
    border-radius: 3px;
}
#container.login-page .login-box .login-form .login-form-items .login-form-item.not-valid input[type="text"],
#container.login-page .login-box .login-form .login-form-items .login-form-item.not-valid input[type="password"] {
    border-color: #dd610e;
}
#container.login-page .login-box .login-form .login-form-items .login-form-item.valid input[type="text"],
#container.login-page .login-box .login-form .login-form-items .login-form-item.valid input[type="password"] {
    border-color: #117052;
}
#container.login-page .login-box .login-form .login-form-items .login-form-item .err-msg {
    display: none;
    margin-top: 7px;
    color: #dd610e;
    font-size: 1.3rem;
    font-weight: 500;
}
#container.login-page .login-box .login-form .login-form-items .login-form-item.not-valid .err-msg {
    display: block;
}
#container.login-page .login-box .login-form .login-form-items .login-form-item .cell-phone-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
#container.login-page .login-box .login-form .login-form-items .login-form-item .cell-phone-items select {
    display: block;
    border: none;
    border-radius: 3px;
    background-color: #f2f2f2;
    padding: 0 10px;
    width: 70px;
    height: 40px;
    font-size: 1.4rem;
    font-weight: 500;
}
#container.login-page .login-box .login-form .login-form-items .login-form-item .cell-phone-items input[type="text"] {
    width: 70px;
}
#container.login-page .login-box .login-form .login-form-items .login-form-item .get-auth-number {
    display: block;
    border: none;
    border-radius: 3px;
    margin-top: 10px;
    background-color: #787878;
    width: 100%;
    height: 35px;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 500;
}
#container.login-page .login-box .login-form .login-form-items .login-form-item .auth-msg-box {
    margin-top: 10px;
    font-size: 1.3rem;
}
#container.login-page .login-box .login-form .login-form-items .login-form-item .get-auth-number.active {
    background-color: #117052;
}
#container.login-page .login-box .login-form .login-form-items .login-form-item .auth-number {
    margin-top: 10px;
}
#container.login-page .login-box .login-form .login-find-info {
    display: flex;
    justify-content: center;
    column-gap: 10px;
    margin-top: 30px;
    font-size: 1.3rem;
    font-weight: 500;
}
#container.login-page .login-box .login-form .login-find-info .join-btn {
    color: #117052;
}
#container.login-page .login-box .login-form .login-find-info .join-btn::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: #c3c3c3;
    margin-right: 10px;
}
#container.login-page .login-box .login-form .login-find-info a {
    color: #676767;
}
#container.login-page .login-box .login-form .login-form-btn {
    display: flex;
    justify-content: center;
    column-gap: 10px;
    margin-top: 30px;
}
#container.login-page .login-box .login-form .login-form-btn button,
#container.login-page .login-box .login-form .login-form-btn a {
    display: block;
    padding: 0 20px;
    height: 40px;
    background-color: #117052;
    border: none;
    border-radius: 5px;
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 40px;
}

#container.login-page .login-box .login-form .login-form-btn a.main-btn {
    background-color: #eecc1a;
    color: #000000;
}

#container.login-page .join-complete {
    margin: 300px auto 0;
}
#container.login-page .join-complete .join-complete-img {
    margin: 0 auto;
    width: 150px;
}
#container.login-page .join-complete .join-complete-img img {
    width: 100%;
    height: 100%;
}
#container.login-page .join-complete h1 {
    margin-top: 25px;
    font-size: 3rem;
    font-weight: 600;
    text-align: center;
}
#container.login-page .join-complete p {
    margin-top: 18px;
    font-size: 1.8rem;
    font-weight: 400;
    text-align: center;
}
#container.login-page .join-complete p span {
    color: #117052;
    
}
#container.login-page .join-complete .join-complete-btn {
    margin-top: 35px;
    text-align: center;
}
#container.login-page .join-complete .join-complete-btn a {
    display: inline-block;
    margin: 0 auto;
    padding: 0 20px;
    border-radius: 5px;
    background-color: #117052;
    height: 40px;
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 40px;
}

#container.login-page .login-box.find-pw-box {
    margin-top: 65px;
}
#container.login-page .login-box.find-pw-box::before {
    display: none;
}
#container.login-page .login-box.find-pw-box .login-title {
    margin-top: 0;
}

#container.login-page .login-box .find-info-result-text {
    margin: 30px 0;
    color: #117052;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
}

#container.login-page .login-box .cashout-user-id {
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
}
#container.login-page .login-box .cashout-user-id .user-id {
    color: #117052;
}
#container.login-page .login-box.change-password-box .login-form .login-form-items .login-form-item + .login-form-item {
    margin-top: 10px;
}

#container.login-page.mypage-login .login-box .login-logo {
    margin-bottom: 20px;
}
#container.login-page.mypage-login .login-box .login-form .login-form-text {
    margin-bottom: 20px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 120%;
}


/* 보증업체 */
#container.partners-page .about-partners {
    padding: 35px 50px;
    background-image: url(../../img/about-partners-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 965px;
    height: 458px;
}
#container.partners-page .about-partners h3 {
    margin-bottom: 30px;
    color: #f7d629;
    font-size: 3rem;
    font-weight: 600;
}
#container.partners-page .about-partners p {
    margin-bottom: 19px;
    line-height: 19px;
    color: #ffffff;
}
#container.partners-page .about-partners p:nth-of-type(1) {
    font-size: 2.3rem;
    font-weight: 500;
}
#container.partners-page .about-partners p:nth-of-type(2) {
    font-size: 1.6rem;
    font-weight: 400;
    color: #69f1c7;
}
#container.partners-page .about-partners p:nth-of-type(3) {
    font-size: 1.6rem;
    font-weight: 400;
}
#container.partners-page .about-partners p:nth-of-type(3) strong {
    color: #f7d629;
    font-weight: 400;
}
#container.partners-page .about-partners p:nth-of-type(4) {
    font-size: 2.1rem;
    font-weight: 500;
}
#container.partners-page .about-partners p:nth-of-type(5) {
    display: inline-block;
    padding: 3px 5px;
    background-color: #f7d629;
    font-size: 1.8rem;
    font-weight: 500;
    color: #08553d;
}

#container.partners-page .partner-list-wrap {
    margin-top: 60px;
}
#container.partners-page .partner-list-wrap .list-head {
    margin-bottom: 20px;
    text-align: right;
}
#container.partners-page .partner-list-wrap .list-head .end-partners {
    display: inline-block;
    padding: 10px 20px;
    background-color: #eecc1a;
    border-radius: 5px;
    color: #000000;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: -0.18px;
}
#container.partners-page .partner-list-wrap .partner-list {
    display: grid;
    grid-template-columns: repeat(3, 280px);
    justify-content: space-between;
    row-gap: 40px;
}
#container.partners-page .partner-list-wrap .partner-list .partner-item {
    border: 2px solid #0e674b;
    width: 284px;
}
#container.partners-page .partner-list-wrap .partner-list .partner-item .thumbnail {
    display: block;
    width: 280px;
    aspect-ratio: 280 / 210;
}
#container.partners-page .partner-list-wrap .partner-list .partner-item .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#container.partners-page .partner-list-wrap .partner-list .partner-item .partner-info .partner-name {
    display: block;
    padding: 14px 13px 0;
    color: #0e674b;
    font-size: 1.8rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 26px);
}
#container.partners-page .recommend-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding: 0 13px;
    min-height: 30px;
}
#container.partners-page .recommend-wrap .recommend-users {
    position: relative;
    display: flex;
}
#container.partners-page .recommend-wrap .recommend-users li {
    position: relative;
    overflow: hidden;
    margin-right: -5px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
}
#container.partners-page .recommend-wrap .recommend-users li:nth-child(1) {
    z-index: 6;
}
#container.partners-page .recommend-wrap .recommend-users li:nth-child(2) {
    z-index: 5;
}
#container.partners-page .recommend-wrap .recommend-users li:nth-child(3) {
    z-index: 4;
}
#container.partners-page .recommend-wrap .recommend-users li:nth-child(4) {
    z-index: 3;
}
#container.partners-page .recommend-wrap .recommend-users li:nth-child(5) {
    z-index: 2;
}
#container.partners-page .recommend-wrap .recommend-users li:nth-child(6) {
    z-index: 1;
    background-color: #d9d9d9;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 28px;
}
#container.partners-page .recommend-wrap .recommend-users li > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#container.partners-page .recommend-wrap button.recommend-list {
    display: inline-block;
    padding: 5px 10px 3px;
    background-color: #eecc1a;
    border-radius: 21px;
    color: #000000;
    font-size: 1.3rem;
    font-weight: 500;
}
#container.partners-page .partner-list-wrap .partner-list .partner-item .partner-info .count-box {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 18px;
    padding: 3px 35px 0;
    background-color: #0e674b;
    height: 30px;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 500;
}
#container.partners-page .partner-list-wrap .partner-list .partner-item .partner-info .count-box::before {
    content: '';
    position: absolute;
    top: -13px;
    left: 0;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-left: 140px solid #0e674b;
}
#container.partners-page .partner-list-wrap .partner-list .partner-item .partner-info .count-box::after {
    content: '';
    position: absolute;
    top: -13px;
    right: 0;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-right: 140px solid #0e674b;
}
#container.partners-page .partner-list-wrap .partner-list .partner-item .partner-info .count-box .recommend-count {
    display: flex;
    align-items: center;
    column-gap: 7px;
}
#container.partners-page .partner-list-wrap .partner-list .partner-item .partner-info .count-box .recommend-count::before {
    content: '';
    display: inline-block;
    background-image: url(../../img/icon-recommend-count.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 19px;
    height: 18px;
}
#container.partners-page .partner-list-wrap .partner-list .partner-item .partner-info .count-box .view-count {
    display: flex;
    align-items: center;
    column-gap: 7px;
}
#container.partners-page .partner-list-wrap .partner-list .partner-item .partner-info .count-box .view-count::before {
    content: '';
    display: inline-block;
    background-image: url(../../img/icon-view-count.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 14px;
}

#container.partners-page .partner-view-head {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #117052;
    padding-bottom: 20px;
}
#container.partners-page .partner-view-head .partner-name {
    font-size: 3rem;
    font-weight: 500;
}
#container.partners-page .partner-view-head .article-info {
    display: flex;
    column-gap: 13px;
    font-size: 1.4rem;
    font-weight: 400;
}
#container.partners-page .partner-view-head .article-info > span + span::before {
    content: '';
    display: inline-block;
    background-color: #cbcbcb;
    margin-right: 13px;
    width: 1px;
    height: 10px;
}
#container.partners-page .partner-view-head .article-info .recommend > span {
    color: #0e674b;
    font-weight: 500;
    text-decoration: underline;
}
#container.partners-page .partner-view-content {
    padding: 24px 11px;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 150%;
}
#container.partners-page .partner-view-content img {
    display: inline;
}
#container.partners-page .partner-recommend-button-box {
    display: flex;
    justify-content: center;
    column-gap: 10px;
}
#container.partners-page .partner-recommend-button-box button {
    display: inline-block;
    padding: 11px 15px 9px;
    background-color: #404040;
    border-radius: 5px;
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 500;
}
#container.partners-page .partner-recommend-button-box button.partner-recommend-btn {
    background-color: #117052;
    background-image: url(../../img/icon-recommend-btn.png);
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 43px;
}
#container.partners-page .partner-recommend-button-box button.partner-recommend-btn span {
    color: #eecc1a;
}
#container.partners-page .recommend-wrap.view-page {
    margin-top: 25px;
    justify-content: center;   
}

#container.partners-page .partner-view-button-box {
    margin-top: 30px;
    padding-top: 21px;
    border-top: 1px solid #bfbfbf;
    text-align: right;
}
#container.partners-page .partner-view-button-box a {
    display: inline-block;
    padding: 7px 20px;
    background-color: #404040;
    border-radius: 5px;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 400;
}

#container.partners-page .partner-list-wrap .list-head.view-page {
    text-align: left;
}
#container.partners-page .partner-list-wrap .list-head.view-page h3 {
    font-size: 1.8rem;
    font-weight: 600;
}

#container.partners-page .recommend-user-list {
    padding: 40px 50px;
    width: 440px;
    height: 619px;
}
#container.partners-page .recommend-user-list .search-by-nickname {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background-color: #117052;
    width: 100%;
    height: 52px;
}
#container.partners-page .recommend-user-list .search-by-nickname label {
    margin-right: 13px;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 400;
}
#container.partners-page .recommend-user-list .search-by-nickname input {
    margin-right: 4px;
    border: 1px solid #ffffff;
    padding: 0 10px;
    background-color: #ffffff;
    width: 154px;
    height: 30px;
    color: #000000;
    font-size: 1.4rem;
    font-weight: 400;
}
#container.partners-page .recommend-user-list .search-by-nickname button {
    background-color: #eecc1a;
    background-image: url(../../img/icon-search-btn.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    width: 32px;
    height: 32px;
    font-size: 0;
}

#container.partners-page .recommend-user-list .recommend-users-wrap {
    margin-top: 30px;
    height: 390px;
}
#container.partners-page .recommend-user-list .recommend-users-wrap .recommend-users-count {
    font-size: 1.4rem;
    font-weight: 500;
}
#container.partners-page .recommend-user-list .recommend-users-wrap .recommend-users-count span {
    color: #117052;
}
#container.partners-page .recommend-user-list .recommend-users-wrap .recommend-users {
    overflow-y: auto;
    margin-top: 10px;
    height: 370px;
}
#container.partners-page .recommend-user-list .recommend-users-wrap .recommend-users li {
    padding: 0 10px;
    border-top: 1px solid #dbdbdb;
}
#container.partners-page .recommend-user-list .recommend-users-wrap .recommend-users li:last-child {
    border-bottom: 1px solid #dbdbdb;
}
#container.partners-page .recommend-user-list .recommend-users-wrap .recommend-users li .author {
    display: flex;
    align-items: center;
    column-gap: 6px;
    height: 45px;
}
#container.partners-page .recommend-user-list .recommend-users-wrap .recommend-users li span {
    font-size: 1.6rem;
    font-weight: 500;
}

/* 게시판 */
#container.board-page .article-list .article-list-head {
    display: flex;
    justify-content: flex-end;
    column-gap: 10px;
    align-items: center;
    margin-bottom: 20px;
}
#container.board-page .article-list .article-list-head .list-type {
    display: flex;
    column-gap: 10px;
}
#container.board-page .article-list .article-list-head .list-type li {
    background-repeat: no-repeat;
    background-position: center;
    width: 32px;
    height: 32px;
    font-size: 0;
}
#container.board-page .article-list .article-list-head .list-type li a {
    display: block;
    width: 100%;
    height: 100%;
}
#container.board-page .article-list .article-list-head .list-type li.list a {
    background-image: url(../../img/icon-board-list-type-01.png);
}
#container.board-page .article-list .article-list-head .list-type li.gallery a {
    background-image: url(../../img/icon-board-list-type-02.png);
}
#container.board-page .article-list .article-list-head .list-type li.list.active a {
    background-image: url(../../img/icon-board-list-type-01-active.png);
}
#container.board-page .article-list .article-list-head .list-type li.gallery.active a {
    background-image: url(../../img/icon-board-list-type-02-active.png);
}
#container.board-page .article-list .article-list-head select.per-page {
    padding: 0 5px;
    border: 1px solid #acc4ae;
    background-color: #ffffff;
    width: 110px;
    height: 32px;
}

#container.board-page .list-button-box {
    margin-top: 20px;
    text-align: right;
}
#container.board-page .list-button-box a {
    display: inline-block;
    padding: 7px 20px;
    background-color: #404040;
    border-radius: 5px;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 400;
}

#container.board-page .article-list .board-search-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px auto 0;
    border-radius: 8px;
    background-color: #117052;
    width: 391px;
    height: 52px;
}
#container.board-page .article-list .board-search-box select {
    margin-right: 5px;
    padding: 0 10px;
    width: 100px;
    height: 32px;
    font-size: 1.4rem;
    font-weight: 400;
}
#container.board-page .article-list .board-search-box input {
    margin-right: 4px;
    border: 1px solid #ffffff;
    padding: 0 10px;
    background-color: #ffffff;
    width: 200px;
    height: 30px;
    color: #000000;
    font-size: 1.4rem;
    font-weight: 400;
}
#container.board-page .article-list .board-search-box button {
    background-color: #eecc1a;
    background-image: url(../../img/icon-search-btn.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    width: 32px;
    height: 32px;
    font-size: 0;
}

#container.board-page .article-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 43px;
}
#container.board-page .article-gallery a {
    display: block;
}
#container.board-page .article-gallery .gallery-item .thumbnail {
    margin-bottom: 15px;
    width: 200px;
    height: 200px;
}
#container.board-page .article-gallery .gallery-item .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#container.board-page .article-gallery .gallery-item .title-wrap {
    margin-bottom: 10px;
}
#container.board-page .article-gallery .gallery-item .title-wrap .title {
    display: inline;
    /* width: max-content; */
    font-size: 1.5rem;
    font-weight: 400;
    vertical-align: middle;
}
#container.board-page .article-gallery .gallery-item .article-info {
    display: flex;
    align-items: center;
    column-gap: 10px;
}
#container.board-page .article-gallery .gallery-item .article-info .author {
    display: flex;
    align-items: center;
    column-gap: 10px;
}
#container.board-page .article-gallery .gallery-item .article-info .author img {
    width: 20px;
    height: 20px;
}
#container.board-page .article-gallery .gallery-item .article-info .view-count,
#container.board-page .article-gallery .gallery-item .article-info .comment-count {
    display: inline-block;
    padding-left: 23px;
    background-repeat: no-repeat;
    background-position: left center;
    height: 18px;
    line-height: 18px;
    color: #117052;
    font-size: 1.4rem;
    font-weight: 500;
}
#container.board-page .article-gallery .gallery-item .article-info .view-count {
    background-image: url(../../img/icon-view-count-gallery.png);
}
#container.board-page .article-gallery .gallery-item .article-info .comment-count {
    background-image: url(../../img/icon-comment-count-gallery.png);
}

/* 게시글 상세 */
#container.board-page .board-view-head .title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #117052;
}
#container.board-page .board-view-head .title-wrap .article-title {
    max-width: 840px;
    font-size: 3rem;
    font-weight: 500;
}
#container.board-page .board-view-head .title-wrap .report-btn {
    background-color: #E3E3E3;
    background-image: url(../../img/icon-report.png);
    background-repeat: no-repeat;
    background-position: left 11px center;
    background-size: 24px;
    border-radius: 5px;
    padding: 9px 11px 7px 40px;
}
#container.board-page .board-view-head .article-info-wrap {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #bfbfbf;
    padding: 20px 11px;
    font-size: 1.5rem;
}
#container.board-page .board-view-head .article-info-wrap .author {
    display: flex;
    align-items: center;
    column-gap: 8px;
}


#container.board-page .board-view-head .article-info-wrap .article-info {
    display: flex;
    column-gap: 13px;
    font-size: 1.5rem;
    font-weight: 400;
}
#container.board-page .board-view-head .article-info > span + span::before {
    content: '';
    display: inline-block;
    background-color: #cbcbcb;
    margin-right: 13px;
    width: 1px;
    height: 10px;
}
#container.board-page .board-view-head .article-info .recommend > span {
    color: #0e674b;
    font-weight: 500;
    text-decoration: underline;
}
#container.board-page .board-view-content {
    padding: 24px 11px;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 150%;
}
#container.board-page .board-view-content p img {
    display: inline;
    max-width: 100%;
}

#container.board-page .board-view-content .vote-box {
    margin: 50px auto 0;
    border-radius: 7px;
    border: 1px solid #cfcfcf;
    background: #ffffff;
    width: 510px;
}
#container.board-page .board-view-content .vote-box .vote-head {
    border-radius: 7px 7px 0 0;
    background: #ececec;
    padding: 10px 30px 8px;
    width: 100%;
    height: 40px;
}
#container.board-page .board-view-content .vote-box .vote-head p {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 150%;
}
#container.board-page .board-view-content .vote-box .vote-content {
    padding: 15px 30px 25px;
}
#container.board-page .board-view-content .vote-box .vote-content .vote-title {
    color: #000;
    font-size: 2rem;
    font-weight: 700;
    line-height: 150%;
}
#container.board-page .board-view-content .vote-box .vote-content .vote-desc {
    color: #000;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 150%;
}
#container.board-page .board-view-content .vote-box .vote-content .vote-items {
    margin-top: 10px;
}
#container.board-page .board-view-content .vote-box .vote-content .vote-items .vote-item {
    padding: 15px 0;
}
#container.board-page .board-view-content .vote-box .vote-content .vote-items .vote-item:not(:last-child) {
    border-bottom: 1px solid #dddddd;
}
#container.board-page .board-view-content .vote-box .vote-content .vote-items .vote-item input[type="radio"] {
    display: none;
}
#container.board-page .board-view-content .vote-box .vote-content .vote-items .vote-item label {
    display: block;
    padding-left: 23px;
    background-image: url(../../img/point-exc-checkbox.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    height: 18px;
    line-height: 18px;
    font-size: 1.5rem;
    font-weight: 500;
}
#container.board-page .board-view-content .vote-box .vote-content .vote-items li input[type="radio"]:checked + label {
    background-image: url(../../img/point-exc-checkbox-checked.png);

}
#container.board-page .board-view-content .vote-box .vote-content .vote-results {
    margin-top: 25px;
}
#container.board-page .board-view-content .vote-box .vote-content .vote-results .vote-item:not(:last-child) {
    margin-bottom: 30px;
}
#container.board-page .board-view-content .vote-box .vote-content .vote-results .vote-item .text-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#container.board-page .board-view-content .vote-box .vote-content .vote-results .vote-item .text-wrap .item-text {
    line-height: 18px;
    font-size: 1.5rem;
    font-weight: 500;
}
#container.board-page .board-view-content .vote-box .vote-content .vote-results .vote-item.my-vote .text-wrap .item-text {
    padding-left: 23px;
    background-image: url(../../img/icon-check.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
}
#container.board-page .board-view-content .vote-box .vote-content .vote-results .vote-item .text-wrap .voted-count {
    color: #8a8a8a;
    line-height: 150%;
}
#container.board-page .board-view-content .vote-box .vote-content .vote-results .vote-item .guage-wrap {
    margin-top: 8px;
    border-radius: 17px;
    background-color: #eaeaea;
    width: 100%;
    height: 5px;
}
#container.board-page .board-view-content .vote-box .vote-content .vote-results .vote-item .guage-wrap .guage-bar { 
    border-radius: 28px;
    height: 100%;
    background-color: #eecc1a;
}

#container.board-page .board-view-content .vote-box .vote-content .vote-actions {
    margin-top: 30px;
}
#container.board-page .board-view-content .vote-box .vote-content .vote-actions .vote-btn {
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #eecc1a;
    width: 120px;
    color: #000000;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 150%;
    text-align: center;
}

#container.board-page .board-recommend-button-box {
    display: flex;
    justify-content: center;
    column-gap: 10px;
    margin-top: 80px;
}
#container.board-page .board-recommend-button-box button.board-recommend-btn {
    display: block;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background-color: #d3e6e0;
    background-image: url(../../img/icon-like.png);
    background-repeat: no-repeat;
    background-position: center bottom 15px;
    font-size: 2rem;
    font-weight: 600;
}
#container.board-page .board-recommend-button-box button.board-recommend-btn span {
    display: block;
    margin-bottom: 15px;
    color: #000000;
}

#container.board-page .user-info-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #117052;
    border-radius: 7px;
    margin-top: 40px;
    padding: 18px 30px;
    background-color: #ffffff;
}
#container.board-page .user-info-wrap .profile-img {
    border-radius: 50%;
    width: 90px;
    height: 90px;
    overflow: hidden;
}
#container.board-page .user-info-wrap .profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#container.board-page .user-info-wrap .user-info {
    width: 740px;
}
#container.board-page .user-info-wrap .user-info .basic-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid #c9c9c9;
}
#container.board-page .user-info-wrap .user-info .basic-info .author {
    display: flex;
    align-items: center;
    column-gap: 6px;
}
#container.board-page .user-info-wrap .user-info .basic-info .author img {
    width: 23px;
    height: 23px;
}
#container.board-page .user-info-wrap .user-info .basic-info .author .author {
    font-size: 1.6rem;
    font-weight: 500;
}
#container.board-page .user-info-wrap .user-info .basic-info .button-box .profile-link,
#container.board-page .user-info-wrap .user-info .basic-info .button-box .follow-btn {
    display: inline-block;
    padding: 7px 32px 6px 10px;
    border-radius: 36px;
    background-repeat: no-repeat;
    background-position: right 10px center;
    font-size: 1.2rem;
    font-weight: 500;
}
#container.board-page .user-info-wrap .user-info .basic-info .button-box .profile-link {
    background-color: #117052;
    background-image: url(../../img/icon-profile-link.png);
    color: #ffffff;
}
#container.board-page .user-info-wrap .user-info .basic-info .button-box .follow-btn {
    background-color: #eecc1a;
    background-image: url(../../img/icon-follow-user.png);
    color: #000000;
}

#container.board-page .user-info-wrap .user-info .user-ranking {
    padding-top: 18px;
}
#container.board-page .user-info-wrap .user-info .user-ranking ul {
    display: flex;
    column-gap: 10px;
    justify-content: space-around;
    text-align: center;
}
#container.board-page .user-info-wrap .user-info .user-ranking ul li {
    position: relative;
}
#container.board-page .user-info-wrap .user-info .user-ranking ul li + li::before {
    content: '';
    position: absolute;
    top: 12px;
    left: -55px;
    display: inline-block;
    background-color: #E3E3E3;
    width: 5px;
    height: 15px;
    transform: skewX(-30deg);
}
#container.board-page .user-info-wrap .user-info .user-ranking ul li span {
    display: block;
}
#container.board-page .user-info-wrap .user-info .user-ranking ul li span.ranking-name {
    margin-bottom: 10px;
    font-size: 1.4rem;
    font-weight: 500;
    color: #333333;
}
#container.board-page .user-info-wrap .user-info .user-ranking ul li span.ranking-info {
    font-size: 1.8rem;
    font-weight: 500;
    color: #dd610e;
}

#container.board-page .author-articles {
    margin-top: 10px;
    border-radius: 7px;
    background-color: #e8e8e8;
    padding: 18px 30px;
}
#container.board-page .author-articles .author-articles-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#container.board-page .author-articles .author-articles-head .author-articles-head-title {
    font-size: 1.6rem;
    font-weight: 300;
}
#container.board-page .author-articles .author-articles-head .author-articles-head-title strong {
    font-weight: 500;
}
#container.board-page .author-articles .author-articles-head .author-articles-head-title span {
    font-weight: 500;
    color: #117052;
}
#container.board-page .author-articles .author-articles-head .author-articles-overview {
    border-radius: 36px;
    border: 1px solid #333333;
    padding: 7px 28px 6px 12px;
    background-image: url(../../img/icon-follow-user.png);
    background-repeat: no-repeat;
    background-position: right 9px center;
    font-size: 1.2rem;
    font-weight: 400;
}
#container.board-page .author-articles .author-articles-list {
    position: relative;
    margin-top: 17px;
}
#container.board-page .author-articles .author-articles-list::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background-color: #b1b1b1;
}

#container.board-page .author-articles .author-articles-list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}
#container.board-page .author-articles .author-articles-list ul li {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 15px;
    width: 394px;
    font-size: 1.5rem;
    font-weight: 400;
}
#container.board-page .author-articles .author-articles-list ul li:nth-child(2n) {
    margin-right: 10px;
}
#container.board-page .author-articles .author-articles-list ul li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background-color: #117052;
    border-radius: 50%;
}
#container.board-page .author-articles .author-articles-list ul li .title .comment-count {
    color: #117052;
}
#container.board-page .author-articles .author-articles-list ul li .date {
    color: #8a8a8a;
}

#container.board-page .board-view-button-box {
    margin-top: 20px;
    text-align: right;
}
#container.board-page .board-view-button-box a {
    display: inline-block;
    padding: 7px 20px;
    background-color: #404040;
    border-radius: 5px;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 400;
}

/* 댓글 */
#container.board-page .board-view-comment-wrap {
    margin-top: 49px;
}
#container.board-page .board-view-comment-wrap .comment-head {
    display: flex;
    align-items: center;
    column-gap: 24px;
    border-bottom: 2px solid #117052;
    padding-bottom: 16px;
    color: #333333;
    font-size: 1.5rem;
    font-weight: 500;
}
#container.board-page .board-view-comment-wrap .comment-head .count-item {
    background-repeat: no-repeat;
    background-position: left 3px center;
    padding-left: 25px;
    height: 18px;
    line-height: 18px;
}
#container.board-page .board-view-comment-wrap .comment-head .count-item span {
    color: #117052;
}
#container.board-page .board-view-comment-wrap .comment-head .count-item.recommend-count {
    background-image: url(../../img/icon-recommend-count-view.png);
}
#container.board-page .board-view-comment-wrap .comment-head .count-item.comment-count {
    background-image: url(../../img/icon-comment-count-gallery.png);
}
#container.board-page .board-view-comment-wrap .comment-write {
    display: flex;
    justify-content: space-between;
    column-gap: 14px;
    margin-top: 14px;
    padding: 9px;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    background-color: #ffffff;
}
#container.board-page .board-view-comment-wrap .comment-write .input-box {
    padding: 3px 6px 0;
    width: 100%;
}
#container.board-page .board-view-comment-wrap .comment-write .input-box .user-nickname {
    font-size: 1.3rem;
    font-weight: 500;
}
#container.board-page .board-view-comment-wrap .comment-write .input-box textarea {
    margin-top: 5px;
    padding: 3px 0;
    border: none;
    width: 100%;
    height: 70px;
    font-size: 1.5rem;
    font-weight: 300;
    resize: none;
}
#container.board-page .board-view-comment-wrap .comment-write .input-box textarea:focus {
    outline: none;
}
#container.board-page .board-view-comment-wrap .comment-write .input-box .write-option-box {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 10px;
}
#container.board-page .board-view-comment-wrap .comment-write .input-box .write-option-box .comment-emoji-list {
    overflow-y: auto;
    position: absolute;
    left: 0;
    top: 22px;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background-color: #ffffff;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    width: 450px;
    height: 300px;
}
#container.board-page .board-view-comment-wrap .comment-write .write-option-box .comment-emoji-list li {
    position: relative;
    width: 50px;
    height: 50px;
}
#container.board-page .board-view-comment-wrap .comment-write .write-option-box .comment-emoji-list li .emoji_close {
    position: absolute;
    top: -7px;
    right: -7px;
    color: #fff;
    z-index: 99;
    background-color: #000;
    border-radius: 5rem;
    width: 15px;
    height: 15px;
}
#container.board-page .board-view-comment-wrap .comment-write .write-option-box .comment-emoji-list li > a {
    display: block;
    width: 100%;
    height: 100%;
}
#container.board-page .board-view-comment-wrap .comment-write .input-box .write-option-box .comment-emoji-list.off {
    display: none;
}
#container.board-page .board-view-comment-wrap .comment-write .input-box .write-option-box .input-checkbox-wrap {
    margin-left: auto;
}
/* #container.board-page .board-view-comment-wrap .comment-write .input-box .write-option-box .input-checkbox-wrap input[type="checkbox"] {
    display: none;
} */
#container.board-page .board-view-comment-wrap .comment-write .input-box .write-option-box .input-checkbox-wrap label {
    display: inline-block;
    /* padding-left: 23px; */
    /* background-image: url(../../img/icon-secret-comment.png);
    background-repeat: no-repeat;
    background-position: left center; */
    height: 20px;
    line-height: 20px;
    color: #8a8a8a;
    font-size: 1.4rem;
    font-weight: 400;
    cursor: pointer;
}
/* #container.board-page .board-view-comment-wrap .comment-write .input-box .write-option-box .input-checkbox-wrap input[type="checkbox"]:checked + label {
    background-image: url(../../img/icon-secret-comment-checked.png);
    color: #333333;
} */
#container.board-page .board-view-comment-wrap .comment-write .comment-write-btn {
    border-radius: 5px;
    background-color: #117052;
    width: 120px;
    height: 120px;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 500;
}

#container.board-page .board-view-comment-wrap .emoji_win {
    margin-top: 10px;
}
#container.board-page .board-view-comment-wrap .emoji_win img {
    max-width: 100%;
}

#container.board-page .board-view-comment-wrap .comment-list {
    margin-top: 18px;
    border-bottom: 1px solid #bfbfbf;
}
#container.board-page .board-view-comment-wrap .comment-list ul {
    display: flex;
    flex-direction: column;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li {
    display: flex;
    column-gap: 18px;
    align-items: flex-start;
    padding: 20px 0;
    border-top: 1px solid #bfbfbf;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li.re_active {
    background-image: url(../../img/icon-reply.svg);
    background-repeat: no-repeat;
    background-position: left 32px center;
    background-size: 24px;
    border-top: none;
    /* padding: 20px 0 20px 73px; */
    padding-left: 73px;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li:not(.re_active) + li.re_active {
    border-top: 1px dashed #bfbfbf;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li .profile-img {
    overflow: hidden;
    border-radius: 50%;
    width: 55px;
    height: 55px;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li .profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li .comment-content {
    width: calc(100% - 170px);
    /* max-width: 760px; */
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li .comment-content .comment-content-head {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 13px;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li .comment-content .comment-content-head .user-info {
    display: flex;
    align-items: center;
    column-gap: 5px;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li .comment-content .comment-content-head .user-info .author-wrap .author {
    display: flex;
    align-items: center;
    column-gap: 6px;
    font-size: 1.4rem;
    font-weight: 500;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li .comment-content .comment-content-head .user-info .author-badge {
    display: inline-block;
    background-color: #117052;
    height: 21px;
    line-height: 21px;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0 8px;
    border-radius: 21px;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li .comment-content .comment-content-head .write-datetime {
    color: #8a8a8a;
    font-size: 1.4rem;
    font-weight: 300;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li .comment-content .comment-content-head .reply-btn {
    color: #8a8a8a;
    font-size: 1.4rem;
    font-weight: 400;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li .comment-content .comment-content-head .write-datetime::before,
#container.board-page .board-view-comment-wrap .comment-list > ul > li .comment-content .comment-content-head .reply-btn::before {
    content: '';
    display: inline-block;
    background-color: #cbcbcb;
    width: 1px;
    height: 10px;
    margin-right: 10px;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li .comment-content .lucky-point {
    font-size: 1.4rem;
    font-weight: 400;
    color: #dd610e;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li .comment-content .comment-content-body {
    font-size: 1.5rem;
    line-height: 150%;
    font-weight: 300;
}
#container.board-page .board-view-comment-wrap .comment-list ul li .comment-content .comment-content-body .p_ac_nick {
    color: #117052;
    font-weight: 600;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li .comment-content .comment-content-body p {
    margin-bottom: 10px;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li .comment-content .comment-content-body p.secret {
    padding-left: 23px;
    background-image: url(../../img/icon-secret-comment.png);
    background-repeat: no-repeat;
    background-position: left 3px center;
    background-size: 15px;
    line-height: 16px;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li .comment-content .comment-content-body img {
    max-width: 750px;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li .comment-content .edit-history {
    margin-top: 8px;
    color: #8a8a8a;
    font-size: 1.4rem;
    font-weight: 300;
}
#container.board-page .board-view-comment-wrap .comment-list > ul > li .report-comment-btn {
    background-color: #E3E3E3;
    background-image: url(../../img/icon-report.png);
    background-repeat: no-repeat;
    background-position: left 11px center;
    background-size: 24px;
    border-radius: 5px;
    margin-left: auto;
    padding: 9px 11px 7px 40px;
}

/* 동일 게시판 글 목록 */
#container.board-page .board-articles {
    margin-top: 60px;
}
#container.board-page .board-articles .board-articles-list .article-table {
    border-top: 2px solid #117052;
}
#container.board-page .board-articles .board-articles-list .article-table .table-row .col.col-author .author img {
    width: 20px;
    height: 20px;
}
#container.board-page .board-articles .board-articles-list .article-table .table-row .col.col-author .author span {
    line-height: 20px;
}
#container.board-page .board-articles .board-articles-list .button-box {
    position: relative;
}
#container.board-page .board-articles .board-articles-list .button-box .view-all-article-btn {
    position: absolute;
    right: 0;
    top: 0;
    padding: 7px 9px;
    background-color: #484848;
    border-radius: 5px;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 500;
}

/* 일간 인기글 */
#container.board-page .daily-best {
    margin-top: 60px;
}
#container.board-page .daily-best h3 {
    font-size: 1.8rem;
    font-weight: 600;
}
#container.board-page .daily-best .daily-best-list {
    margin-top: 20px;
    border-top: 2px solid #117052;
    border-bottom: 2px solid #117052;
}
#container.board-page .daily-best .daily-best-list ol {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: 16px;
    counter-reset: number;
    padding: 25px 16px;
    height: 142px;
}
#container.board-page .daily-best .daily-best-list ol li {
    counter-increment: number;
    display: flex;
    align-items: center;
    width: calc(33% - 10px);
}
#container.board-page .daily-best .daily-best-list ol li::before {
    content: counter(number);
    display: block;
    margin-right: 8px;
    border-radius: 50%;
    background-color: #117052;
    width: 20px;
    height: 20px;
    color: #ffffff;
    text-align: center;
    line-height: 20px;
    font-size: 1.2rem;
}
#container.board-page .daily-best .daily-best-list ol li .title {
    display: flex;
    align-items: center;
    margin-right: 4px;
}
#container.board-page .daily-best .daily-best-list ol li .title a {
    display: inline-block;
    width: max-content;
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#container.board-page .daily-best .daily-best-list ol li .title .comment-count {
    display: block;
    margin-left: 4px;
    color: #00a16e;
}

/* 팝업 */
#container.board-page .report-article {
    padding: 41px 23px;
    width: 332px;
    height: 300px;
}
#container.board-page .report-article .warning-text {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 150%;
}
#container.board-page .report-article .warning-text strong {
    color: #df5d5d;
}
#container.board-page .report-article .report-reason {
    margin-top: 20px;
}
#container.board-page .report-article .report-reason .report-reason-wrap,
#container.board-page .report-article .report-reason .report-reason-etc {
    margin: 0 auto;
    width: 203px;
}
#container.board-page .report-article .report-reason .report-reason-wrap {
    display: flex;
    align-items: center;
}
#container.board-page .report-article .report-reason .report-reason-wrap label {
    margin-right: 16px;
    font-size: 1.4rem;
    font-weight: 500;
}
#container.board-page .report-article .report-reason .report-reason-wrap select {
    padding: 0 10px;
    width: 162px;
    height: 32px;
}
#container.board-page .report-article .report-reason .report-reason-etc {
    margin-top: 10px;
}
#container.board-page .report-article .report-reason .report-reason-etc input {
    padding: 0 10px;
    width: 178px;
    height: 32px;
    font-size: 1.4rem;
    font-weight: 400;
}
#container.board-page .report-article .report-reason .report-reason-etc input::placeholder {
    font-size: 1.4rem;
}
#container.board-page .report-article .report-reason .button-box {
    margin-top: 20px;
    text-align: center;
}
#container.board-page .report-article .report-reason .button-box button {
    background-color: #484848;
    border-radius: 5px;
    padding: 8px 9px;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 500;
}

#container.board-page .board-write-head .article-title-wrap {
    padding: 20px 0;
    border-top: 2px solid #117052;
    border-bottom: 1px solid #cecece;
}
#container.board-page .board-write-head .article-title-wrap input {
    padding: 0 15px;
    width: calc(100% - 30px);
    height: 48px;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
}
#container.board-page .board-write-content {
    padding: 20px 0;
}
#container.board-page .board-write-content p.shout-notice {
    margin-bottom: 15px;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 150%;
    color: #4d4d4d;
}
#container.board-page .board-write-content textarea {
    width: calc(100% - 30px);
    height: 400px;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    padding: 15px;
}

#container.board-page .board-vote-content button {
    display: inline-block;
    padding: 10px 12px;
    border-radius: 5px;
    background-color: #484848;
    text-align: center;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.14px;
}
#container.board-page .board-vote-content .vote-form {
    margin-top: 15px;
    display: none;
}
#container.board-page .board-vote-content .vote-form.open {
    display: block;
}
#container.board-page .board-vote-content .vote-form .vote-field {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 10px;
}
#container.board-page .board-vote-content .vote-form .vote-field label {
    display: inline-block;
    width: 90px;
    font-size: 1.5rem;
    font-weight: 500;
}
#container.board-page .board-vote-content .vote-form .vote-field input[type="text"] {
    width: 400px;
    height: 36px;
    border-radius: 3px;
    border: 1px solid #d5d5d5;
    background: #ffffff;
    padding: 0 10px;
}
#container.board-page .board-vote-content .vote-form .vote-field.vote-period-field input[type="text"] {
    width: 100px;
}
#container.board-page .board-vote-content .vote-form .vote-field.vote-period-field input[type="radio"] {
    display: none;
}
#container.board-page .board-vote-content .vote-form .vote-field.vote-period-field input[type="radio"] + label{
    padding-left: 23px;
    background-image: url(../../img/point-exc-checkbox.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    height: 17px;
    line-height: 17px;
}
#container.board-page .board-vote-content .vote-form .vote-field.vote-period-field input[type="radio"]:checked + label{
    background-image: url(../../img/point-exc-checkbox-checked.png);
}
#container.board-page .board-vote-content .vote-actions {
    margin-top: 25px;
}
#container.board-page .board-vote-content .vote-actions button.add-vote-item {
    padding-left: 32px;
    background-color: #dcdcdc;
    background-image: url(../../img/icon-add.svg);
    background-repeat: no-repeat;
    background-position: left 7.5px center;
    background-size: 16px;
    color: #000000;
}

#container.board-page .board-write-button-box {
    border-top: 2px solid #117052;
    padding-top: 20px;
    margin-top: 30px;
    text-align: center;
}
#container.board-page .board-write-button-box button {
    padding: 11px 20px;
    border-radius: 5px;
    background-color: #eecc1a;
    color: #000000;
    font-size: 1.8rem;
    font-weight: 500;
}

/* 프로필 페이지 */
#container.profile-page .profile-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    column-gap: 11px;
    row-gap: 12px;
    background-color: #f3f3f3;
}
#container.profile-page .profile-summary .profile {
    grid-column: span 1;
    grid-row: span 2;
    border-radius: 8px;
    padding: 30px 20px;
    background-color: #117052;
}
#container.profile-page .profile-summary .profile .profile-img-wrap {
    position: relative;
    display: block;
    margin: 0 auto 10px;
    width: 93px;
    height: 93px;
}
#container.profile-page .profile-summary .profile .profile-img-wrap .profile-img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#container.profile-page .profile-summary .profile .profile-img-wrap .change-profile-img-btn {
    position: absolute;
    bottom: 14px;
    right: -7px;
    background-color: #ffffff;
    background-image: url(../../img/icon-setting.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    border-radius: 50%;
    width: 22px;
    height: 22px;
}
#container.profile-page .profile-summary .profile .profile-img-wrap .change-img-context {
    display: none;
    position: absolute;
    bottom: -60px;
    left: 41px;
    border: 1px solid #c3c3c3;
    background-color: #ffffff;
    width: 102px;
}
#container.profile-page .profile-summary .profile .profile-img-wrap .change-img-context.open {
    display: block;
}
#container.profile-page .profile-summary .profile .profile-img-wrap .change-img-context li {
    padding: 10px 9px;
    font-size: 1.3rem;
    font-weight: 400;
}
#container.profile-page .profile-summary .profile .profile-img-wrap .change-img-context li a:hover {
    text-decoration: underline;
    color: #117052;
}
#container.profile-page .profile-summary .profile .profile-img-wrap .change-img-context li:first-child {
    border-bottom: 1px solid #c3c3c3;
}
#container.profile-page .profile-summary .profile .user-id {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 6px;
    font-size: 1.6rem;
    font-weight: 500;
    color: #ffffff;
}
#container.profile-page .profile-summary .profile .nickname {
    display: block;
    margin-top: 8px;
    font-size: 1.6rem;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
}
#container.profile-page .profile-summary .profile .nickname-info {
    display: block;
    margin-top: 4px;
    color: #84c6b1;
    text-align: center;
    font-weight: 500;
}
#container.profile-page .profile-summary .profile .follow-btn-wrap {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#container.profile-page .profile-summary .profile .follow-btn-wrap .follow-btn {
    display: inline-block;
    padding: 7px 32px 6px 12px;
    border-radius: 36px;
    background-color: #eecc1a;
    background-image: url(../../img/icon-follow-user.png);
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: #000000;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color .2s ease, box-shadow .2s ease;
}
#container.profile-page .profile-summary .profile .follow-btn-wrap .follow-btn:hover {
    background-color: #e0be18;
}
#container.profile-page .profile-summary .profile .follow-btn-wrap .follow-btn:active {
    background-color: #d3b116;
}
#container.profile-page .profile-summary .profile .follow-btn-wrap .follow-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
#container.profile-page .profile-summary .profile .follow-btn-wrap .follow-cancel {
    display: inline-block;
    padding: 7px 32px 6px 12px;
    border-radius: 36px;
    background-color: #ffffff;
    background-image: url(../../img/icon-follow-cancel.png);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    color: #484848;
    border: 1px solid #cfcfcf;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#container.profile-page .profile-summary .profile .follow-btn-wrap .follow-cancel:hover {
    background-color: #f5f5f5;
    border-color: #bdbdbd;
}
#container.profile-page .profile-summary .profile .follow-btn-wrap .follow-cancel:active {
    background-color: #ececec;
    border-color: #b0b0b0;
}
#container.profile-page .profile-summary .profile .follow-btn-wrap .follow-cancel:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
#container.profile-page .profile-summary .stat-item {
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: right 20px center;
    padding: 30px 20px;
    border-radius: 8px;
    border: 1px solid #d0d0d0;
}
#container.profile-page .profile-summary .stat-item.visit {
    background-image: url(../../img/icon-profile-visit.png);
}
#container.profile-page .profile-summary .stat-item.post {
    background-image: url(../../img/icon-profile-post.png);
}
#container.profile-page .profile-summary .stat-item.follower {
    background-image: url(../../img/icon-profile-follower.png);
}
#container.profile-page .profile-summary .stat-item.follow-ranking {
    background-image: url(../../img/icon-profile-ranking-follow.png);
}
#container.profile-page .profile-summary .stat-item.exp-ranking {
    background-image: url(../../img/icon-profile-ranking-exp.png);
}
#container.profile-page .profile-summary .stat-item.recommend-ranking {
    background-image: url(../../img/icon-profile-ranking-recommend.png);
}
#container.profile-page .profile-summary .stat-item .stat-value {
    display: block;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 26px;
    color: #DC610D;
}
#container.profile-page .profile-summary .stat-item.ranking-item .stat-value {
    color: #117052;
}
#container.profile-page .profile-summary .stat-item .stat-name {
    display: block;
    margin-top: 8px;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 14px;
    color: #333333;
}

#container.profile-page .introduce-box {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #d0d0d0;
    background-color: #ffffff;
    font-size: 1.6rem;
}
#container.profile-page .introduce-box .introduce-title {
    font-weight: 600;
    color: #117052;
}
#container.profile-page .introduce-box .introduce-content {
    font-weight: 500;
    color: #000000;
}

#container h3 {
    margin-bottom: 20px;
    color: #333333;
    font-size: 1.8rem;
    font-weight: 600;
}

#container.profile-page .article-list {
    margin-top: 50px;
}
#container.profile-page .comment-list {
    margin-top: 80px;
}
#container.profile-page .comment-list .article-table .table-row .col.col-view {
    width: 160px;
}
#container.profile-page .comment-list .article-table .table-row .col.col-view .reply-btn {
    display: inline-block;
    background-color: #484848;
    border-radius: 5px;
    padding: 6px 8px;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 500;
}

/* 마이페이지 */
#container.mypage .mypage-tab {
    margin-top: 45px;
}
#container.mypage .mypage-tab ul {
    display: flex;
    justify-content: space-between;
    column-gap: 10px;
    margin-bottom: 30px;
    padding: 12px 0;
    border-top: 1px solid #afc5b6;
    border-bottom: 1px solid #afc5b6;
}
#container.mypage .mypage-tab ul li {
    position: relative;
}
#container.mypage .mypage-tab ul li.new {
    padding-right: 12px;
}
#container.mypage .mypage-tab ul li.new::after {
    position: absolute;
    top: 0;
    right: 0;
    content: 'N';
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ed1323;
    color: #FFF;
    font-size: 8px;
    font-weight: 900;
    text-align: center;
    line-height: 12px;
    vertical-align: middle;
}
#container.mypage .mypage-tab ul li a {
    position: relative;
    display: block;
    padding: 0 6px;
    font-size: 1.5rem;
    font-weight: 300;
    color: #738480;
}
#container.mypage .mypage-tab ul li a::before {
    content: '';
    position: absolute;
    top: -13px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: transparent;
}
#container.mypage .mypage-tab ul li a::after {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: transparent;
}
#container.mypage .mypage-tab ul li.active a {
    color: #0E674B;
    font-weight: 600;
}
#container.mypage .mypage-tab ul li.active a::before {
    background-color: #117052;
}
#container.mypage .mypage-tab ul li.active a::after {
    background-color: #117052;
}

#container.mypage .article-list .article-table .table-row .col.col-nickname {
    width: 600px;
}

#container.mypage .button-box {
    margin-top: 25px;
    text-align: right;
}
#container.mypage .button-box .withdrawal-btn {
    background-color: #484848;
    border-radius: 5px;
    padding: 7px 15px;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 500;
}
#container.mypage .modify-info {
    margin-top: 40px;
}
#container.mypage .modify-info table {
    margin-top: 20px;
    border-top: 2px solid #117052;
    border-bottom: 2px solid #117052;
    width: 100%;
}
#container.mypage .modify-info table tbody th,
#container.mypage .modify-info table tbody td {
    border: 1px solid #cecece;
}
#container.mypage .modify-info table tbody th {
    border-left: none;
    padding: 10px 16px;
    vertical-align: middle;
    text-align: left;
    font-size: 1.4rem;
    font-weight: 500;
}
#container.mypage .modify-info table tbody .password-fields th:nth-of-type(2) {
    border-left: 1px solid #cecece;
}
#container.mypage .modify-info table tbody td {
    border-right: none;
    padding: 10px;
}
#container.mypage .modify-info table tbody td input,
#container.mypage .modify-info table tbody td textarea {
    box-sizing: border-box;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    width: 100%;
    padding: 5px 10px;
}
#container.mypage .modify-info table tbody td input {
    height: 36px;
}
#container.mypage .modify-info table tbody td textarea {
    height: 110px;
    resize: none;
}
#container.mypage .modify-info table tbody td .edit-info-text {
    margin-top: 10px;
    color: #333333;
    font-weight: 400;
}
#container.mypage .modify-info table tbody td .edit-info-text strong {
    font-weight: 400;
    color: #dc610d;
}
#container.mypage .modify-info .button-box {
    margin-top: 30px;
    text-align: center;
}
#container.mypage .modify-info .button-box button {
    background-color: #eecc1a;
    border-radius: 5px;
    padding: 12px 20px;
    font-size: 1.8rem;
    font-weight: 500;
}

/* 경험치, 포인트 공통 */
#container.mypage .summary-panel {
    display: grid;
    grid-template-rows: auto auto;
    column-gap: 11px;
    row-gap: 10px;
    background-color: #f3f3f3;
}
#container.mypage .summary-panel .stat-info {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 30px;
    border-radius: 8px;
    background-color: #117052;
    width: 100%;
    height: 90px;
    color: #ffffff;
}
#container.mypage .summary-panel .stat-item {
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: right 20px center;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #d0d0d0;
}
#container.mypage .summary-panel .stat-item .stat-value {
    display: block;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 26px;
    color: #DC610D;
}
#container.mypage .summary-panel .stat-item .stat-name {
    display: block;
    margin-top: 8px;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 14px;
    color: #333333;
}

 /* 경험치 */
#container.mypage .exp-summary {
    grid-template-columns: repeat(4, 1fr);
}
#container.mypage .exp-summary .exp-next-level {
    grid-column: span 4;
}
#container.mypage .exp-summary .exp-next-level .level-item {
    display: flex;
    align-items: center;
    column-gap: 10px;
}
#container.mypage .exp-summary .exp-next-level .level-item .img-box {
    width: 40px;
    height: 40px;
}
#container.mypage .exp-summary .exp-next-level .level-item .img-box img {
    width: 100%;
    height: 100%;
}
#container.mypage .exp-summary .exp-next-level .level-item .text-box span {
    display: block;
}
#container.mypage .exp-summary .exp-next-level .level-item .text-box .level {
    font-size: 2.2rem;
    font-weight: 500;
    color: #eecc1a;
}
#container.mypage .exp-summary .exp-next-level .level-item .text-box .text {
    margin-top: 5px;
    font-size: 1.3rem;
    font-weight: 500;
}
#container.mypage .exp-summary .exp-next-level .required-exp {
    position: relative;
    width: 300px;
    text-align: center;
}
#container.mypage .exp-summary .exp-next-level .required-exp::before,
#container.mypage .exp-summary .exp-next-level .required-exp::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 29px;
    height: 18px;
    background-image: url(../../img/icon-mypage-exp-arrow.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#container.mypage .exp-summary .exp-next-level .required-exp::before {
    left: 0;
}
#container.mypage .exp-summary .exp-next-level .required-exp::after {
    right: 0;
}

#container.mypage .exp-summary .exp-next-level .required-exp span {
    display: block;
}
#container.mypage .exp-summary .exp-next-level .required-exp span.text {
    font-size: 1.3rem;
    font-weight: 500;
}
#container.mypage .exp-summary .exp-next-level .required-exp span.exp {
    margin-top: 5px;
    font-size: 1.9rem;
    font-weight: 500;
    color: #eecc1a;
}
#container.mypage .exp-summary .stat-item.total-exp {
    background-image: url(../../img/icon-mypage-exp-total.png);
}
#container.mypage .exp-summary .stat-item.today-exp {
    background-image: url(../../img/icon-mypage-exp-today.png);
}
#container.mypage .exp-summary .stat-item.week-exp {
    background-image: url(../../img/icon-mypage-exp-week.png);
}
#container.mypage .exp-summary .stat-item.month-exp {
    background-image: url(../../img/icon-mypage-exp-month.png);
}
#container.mypage .exp-summary .stat-item.total-exp .stat-value {
    color: #117052;
}

#container.mypage .level-list-box {
    margin-top: 60px;
    padding: 20px 0;
    border-top: 2px solid #117052;
    border-bottom: 2px solid #117052;
}
#container.mypage .level-list-box ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 40px;
    row-gap: 20px;
    margin: 0 auto;
    width: 800px;
}
#container.mypage .level-list-box ol li {
    position: relative;
    text-align: center;
    cursor: help;
}
#container.mypage .level-list-box ol li .level-rank img {
    margin: 0 auto;
    width: 23px;
    height: 23px;
}
#container.mypage .level-list-box ol li .level-rank span {
    display: block;
    margin-top: 5px;
    font-size: 1.3rem;
    font-weight: 500;
}
#container.mypage .level-list-box ol li .level-point {
    display: none;
    position: absolute;
    top: -30px;
    left: 50%;
    border-radius: 3px 3px 4px 0;
    background-color: #333333;
    padding: 4px 6px;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 500;
    white-space: nowrap;
}
#container.mypage .level-list-box ol li .level-point::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    border-left: 6px solid #333333;
    border-bottom: 6px solid transparent;
}
#container.mypage .level-list-box ol li:hover .level-point {
    display: block;
}

#container.mypage .article-list .article-table .table-row .col.col-reason {
    width: 400px;
}
#container.mypage .article-list .article-table .table-row .col.col-exp .exp {
    display: inline-block;
    border-radius: 21px;
    border: 1px solid #c4643e;
    background-color: #f7f1e4;
    padding: 7px 10px;
    font-size: 1.2rem;
    font-weight: 500;
    color: #c4643e;
    font-weight: 114%;
    font-weight: 400;
}
#container.mypage .exp-history {
    margin-top: 60px;
}

/* 포인트 */
#container.mypage .point-summary {
    grid-template-columns: repeat(4, 1fr);
}
#container.mypage .point-summary .point-status {
    grid-column: span 4;
}
#container.mypage .point-summary .point-status .current-point {
    display: flex;
    align-items: center;
    column-gap: 15px;
}
#container.mypage .point-summary .point-status .current-point .text-box span {
    display: block;
    text-align: left;
}
#container.mypage .point-summary .point-status .current-point .text-box .point {
    display: flex;
    align-items: center;
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 26px;
    color: #eecc1a;
}
#container.mypage .point-summary .point-status .current-point .text-box .point::after {
    content: 'P';
    display: inline-block;
    margin-left: 5px;
    border-radius: 50%;
    background-color: #f5d463;
    width: 16px;
    height: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 16px;
    color: #000000;
    text-align: center;
}
#container.mypage .point-summary .point-status .current-point .text-box .text {
    margin-top: 4px;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 16px;
}
#container.mypage .point-summary .stat-item.today-point {
    background-image: url(../../img/icon-mypage-exp-today.png);
}
#container.mypage .point-summary .stat-item.week-point {
    background-image: url(../../img/icon-mypage-exp-week.png);
}
#container.mypage .point-summary .stat-item.month-point {
    background-image: url(../../img/icon-mypage-exp-month.png);
}
#container.mypage .point-exchange-box {
    margin-top: 40px;
}
#container.mypage .point-exchange-box .info-text {
    font-size: 1.8rem;
    line-height: 160%;    
}
#container.mypage .point-exchange-box .info-text strong {
    font-weight: 400;
    color: #df620d;
}
#container.mypage .point-exchange-box .warning-text {
    margin-top: 10px;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 160%;
    color: #737373;
}
#container.mypage .point-exchange-box .button-box {
    margin-top: 30px;
    text-align: left;
}
#container.mypage .point-exchange-box .button-box a {
    padding: 10px 20px;
    background-color: #eecc1a;
    font-size: 1.8rem;
    font-weight: 500;
    border-radius: 5px;
}
#container.mypage .point-history {
    margin-top: 60px;
}

/* 내 게시글/댓글 */
#container.mypage .article-list .article-table .table-row .col.col-link {
    width: 100px;
}
#container.mypage .article-list .article-table .table-row .col.col-title,
#container.mypage .article-list .article-table .table-row .col.col-comment {
    width: 450px;
    text-align: left;
}
#container.mypage .article-list .article-table .table-row .col.col-link {
    width: 150px;
}
#container.mypage .article-list .article-table .table-row .col.col-link .origin-link {
    display: inline-block;
    padding: 7px 8px;
    background-color: #484848;
    font-size: 1.3rem;
    font-weight: 500;
    color: #ffffff;
    border-radius: 5px;
}

/* 내 글 반응 */
#container.mypage .article-list .article-table .table-row .col.col-status {
    width: 100px;
}
#container.mypage .article-list .article-table .table-row .col.col-msg {
    width: 450px;
    text-align: left;
}
#container.mypage .article-list .article-table .table-row .col.col-msg .msg-wrap {
    display: flex;
    align-items: center;
}
#container.mypage .article-list .article-table .table-row .col.col-msg .msg-wrap .author {
    display: flex;
    align-items: center;
    column-gap: 5px;
}
#container.mypage .article-list .article-table .table-row .col.col-msg .msg-wrap .author img {
    width: 23px;
    height: 23px;
}
#container.mypage .article-list .article-table .table-row .col.col-msg .author span {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
}
#container.mypage .article-list .article-table .table-row .col.col-date {
    width: 150px;
}

/* 나를 팔로우한 회원 */
#container.mypage .article-list .list-head {
    margin-bottom: 12px;
}
#container.mypage .article-list .list-head .search-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#container.mypage .article-list .list-head .search-wrap input {
    box-sizing: border-box;
    border-radius: 3px 0 0 3px;
    border: 1px solid #d5d5d5;
    border-right: none;
    padding: 12px 14px;
    width: 139px;
    height: 36px;
}
#container.mypage .article-list .list-head .search-wrap input:focus {
    outline: none;
}
#container.mypage .article-list .list-head .search-wrap .search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 3px 3px 0;
    border: 1px solid #d5d5d5;
    border-left: none;
    background-color: #ffffff;
    width: 36px;
    height: 36px;
}
#container.mypage .article-list .list-head .search-wrap .search-btn img {
    width: 20px;
    height: 20px;
}
#container.mypage .article-list .article-table .table-row .col.col-follower .author {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 5px;
}
#container.mypage .article-list .article-table .table-row .col.col-follower .author img {
    width: 23px;
    height: 23px;
}

/* 내가 팔로우한 회원 */
#container.mypage .article-list .article-table .table-row .col.col-cancel {
    width: 150px;
}
#container.mypage .article-list .article-table .table-row .col.col-cancel .cancel-btn {
    padding: 7px 8px;
    background-color: #484848;
    font-size: 1.3rem;
    font-weight: 500;
    color: #ffffff;
    border-radius: 5px;
}

/* 팔로우 알림 */
#container.mypage .article-list.follow-history .article-table .table-row .col.col-dummy {
    width: 50px;
}
#container.mypage .article-list.follow-history .article-table .table-row .col.col-msg {
    width: calc(100% - 200px);
    text-align: left;
}
#container.mypage .article-list.follow-history .article-table .table-row .col.col-msg .msg-wrap .author span {
    color: #117052;
}
#container.mypage .article-list.follow-history .article-table .table-row .col.col-date {
    width: 150px;
}

/* 차단관리 */
#container.mypage .block-search-box {
    border-radius: 7px;
    background-color: #117052;
    padding: 30px 55px;
    color: #ffffff;
}
#container.mypage .article-list.block-list .list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#container.mypage .article-list.block-list .list-head h3 {
    margin-bottom: 0;
}
#container.mypage .block-search-box form {
    display: flex;
    align-items: center;
    justify-content: center;
}
#container.mypage .block-search-box form label {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 33px;
}
#container.mypage .block-search-box form input {
    box-sizing: border-box;
    display: block;
    margin-left: 15px;
    border-radius: 3px 0 0 3px;
    border: none;
    padding: 12px 14px;
    width: 229px;
    height: 36px;
}
#container.mypage .block-search-box form input:focus {
    outline: none;
}
#container.mypage .block-search-box form .search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 3px 3px 0;
    border: none;
    background-color: #ffffff;
    width: 36px;
    height: 36px;
}
#container.mypage .block-search-box form .search-btn img {
    width: 20px;
    height: 20px;
}
#container.mypage .block-search-box .block-search-result {
    margin-top: 33px;
    border-top: 1px solid #5fa68f;
}
#container.mypage .block-search-box .block-search-result li {
    position: relative;
    border-bottom: 1px solid #5fa68f;
    padding: 16px 0;
}
#container.mypage .block-search-box .block-search-result li .author {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 5px;
}
#container.mypage .block-search-box .block-search-result li .author img {
    width: 23px;
    height: 23px;
}
#container.mypage .block-search-box .block-search-result li .block-btn {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    padding: 7px 8px;
    background-color: #EECC1A;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 114%;
    color: #000000;
    border-radius: 5px;
}

#container.mypage .article-list.block-list .article-table .table-row .col.col-user {
    width: 500px;
}
#container.mypage .article-list.block-list .article-table .table-row .col.col-user .author {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 5px;
}
#container.mypage .article-list.block-list .article-table .table-row .col.col-user .author img {
    width: 23px;
    height: 23px;
}
#container.mypage .article-list.block-list .article-table .table-row .col.col-control {
    width: 200px;
}
#container.mypage .article-list.block-list .article-table .table-row .col.col-control .cancel-btn {
    padding: 7px 8px;
    background-color: #484848;
    font-size: 1.3rem;
    font-weight: 500;
    color: #ffffff;
    border-radius: 5px;
}

/* 포인트 전환 */

#container.point-exchange-page .info-text .warning-wrap {
    padding: 20px 50px;
    background-color: #33433E;
}
#container.point-exchange-page .info-text .warning-wrap .warning-title {
    display: block;
    margin-bottom: 10px;
    padding-left: 24px;
    padding-top: 2px;
    background-image: url(../../img/icon-warning.png);
    background-repeat: no-repeat;
    background-position: left top;
    height: 17px;
    font-size: 1.5rem;
    font-weight: 500;
    color: #f7d629;
}
#container.point-exchange-page .info-text .warning-wrap .warning-text {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 140%;
    color: #a0d8c7;
}
#container.point-exchange-page .point-exchange-box {
    display: grid;
    grid-template-columns: 367px 548px;
    gap: 15px;
    margin-top: 45px;
}
#container.point-exchange-page .point-exchange-box .current-point,
#container.point-exchange-page .point-exchange-box .partner-list-wrap,
#container.point-exchange-page .point-exchange-box .month-total {
    grid-column: span 2;
}
#container.point-exchange-page .point-exchange-box .exchange-item {
    display: flex;
    column-gap: 16px;
    border-radius: 7px;
    border: 1px solid #117052;
    background-color: #ffffff;
    padding: 15px 23px;
}
#container.point-exchange-page .point-exchange-box .exchange-item .label {
    position: relative;
    display: block;
    padding-right: 16px;
    width: 125px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 20px;
}
#container.point-exchange-page .point-exchange-box .exchange-item .label::after {
    content: '';
    position: absolute;
    right: 0;
    top: 2px;
    display: block;
    background-color: #9ca3a1;
    width: 1px;
    height: 13px;
}
#container.point-exchange-page .point-exchange-box .current-point .point {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-weight: 600;
    color: #117052;
}
#container.point-exchange-page .point-exchange-box .current-point .point::after {
    content: 'P';
    display: inline-block;
    margin-left: 5px;
    border-radius: 50%;
    background-color: #f5d463;
    width: 16px;
    height: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 16px;
    color: #000000;
    text-align: center;
}
#container.point-exchange-page .point-exchange-box .partner-list-wrap .partner-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-content: space-between;
    row-gap: 10px;
    width: calc(100% - 125px - 16px);
}
#container.point-exchange-page .point-exchange-box .partner-list-wrap .partner-list input[type="radio"] {
    display: none;
}
#container.point-exchange-page .point-exchange-box .partner-list-wrap .partner-list input[type="radio"] + label{
    padding-left: 23px;
    background-image: url(../../img/point-exc-checkbox.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
}
#container.point-exchange-page .point-exchange-box .partner-list-wrap .partner-list input[type="radio"]:checked + label{
    background-image: url(../../img/point-exc-checkbox-checked.png);
}
#container.point-exchange-page .point-exchange-box .partner-user-id {
    padding: 9px 12px;
    background-color: #117052;
}
#container.point-exchange-page .point-exchange-box .partner-user-id .label {
    margin: 6px 0 6px 11px;
    color: #ffffff;
}
#container.point-exchange-page .point-exchange-box .partner-user-id input {
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid #d5d5d5;
    padding: 12px 14px;
    width: 187px;
    height: 32px;
}
#container.point-exchange-page .point-exchange-box .point-exchange-amount .point-amount-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 347px;
}
#container.point-exchange-page .point-exchange-box .point-exchange-amount .point-amount-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 4px;
}
#container.point-exchange-page .point-exchange-box .point-exchange-amount .point-amount-list li label {
    font-size: 1.4rem;
    font-weight: 600;
    color: #117052;
}
#container.point-exchange-page .point-exchange-box .month-total .point {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 125px - 16px);
    font-size: 2rem;
    font-weight: 600;
    color: #333333;
}
#container.point-exchange-page .point-exchange-box .month-total .point .remain-point {
    display: flex;
    align-items: center;
    column-gap: 10px;
    width: max-content;
    font-size: 2rem;
    font-weight: 600;
    color: #333333;
}
#container.point-exchange-page .point-exchange-box .month-total .point .remain-point strong {
    color: #117052;
    font-weight: 700;
}
#container.point-exchange-page .point-exchange-box .button-box {
    grid-column: span 2;
    margin-top: 40px;
    text-align: center;
}
#container.point-exchange-page .point-exchange-box .button-box button {
    padding: 12px 20px;
    border-radius: 5px;
    background-color: #eecc1a;
    color: #000000;
    font-size: 1.8rem;
    font-weight: 500;
}
#container.point-exchange-page .article-list.exchange-history {
    margin-top: 60px;
}
#container.point-exchange-page .article-list.exchange-history .article-table .table-row .col.col-point {
    width: 450px
}
#container.point-exchange-page .article-list.exchange-history .article-table .table-row .col.col-point .point {
    display: flex;
    align-items: center;
    justify-content: center;
}
#container.point-exchange-page .article-list.exchange-history .article-table .table-row .col.col-point .point::after {
    content: 'P';
    display: inline-block;
    margin-left: 5px;
    border-radius: 50%;
    background-color: #f5d463;
    width: 16px;
    height: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 16px;
    color: #000000;
    text-align: center;
}
#container.point-exchange-page .article-list.exchange-history .article-table .table-row .col.col-status .status-waiting {
    background-image: url(../../img/icon-exchange-waiting.png);
}
#container.point-exchange-page .article-list.exchange-history .no-data {
    text-align: center;
}

/* 자주 묻는 질문 */
#container.customer-center .faq-list ul {
    border-top: 1px solid #117052;
}
#container.customer-center .faq-list ul li {
    border-bottom: 1px solid #117052;
}
#container.customer-center .faq-list ul li .question,
#container.customer-center .faq-list ul li .answer {
    position: relative;
    padding: 17px 0 16px 75px;
}
#container.customer-center .faq-list ul li .question {
    height: 49px;
    cursor: pointer;
}
#container.customer-center .faq-list ul li .answer {
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0;
    max-height: 0;
    transition: all 0.3s ease-in-out;
}
#container.customer-center .faq-list ul li .answer.open {
    border-top: 1px solid #dbdbdb;
    max-height: 500px;
    padding-top: 17px;
    padding-bottom: 16px;
}
#container.customer-center .faq-list ul li .question .icon,
#container.customer-center .faq-list ul li .answer .icon {
    position: absolute;
    left: 0;
    top: 0;
    padding-left: 15px;
    width: 40px;
    height: 49px;
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 49px;
}
#container.customer-center .faq-list ul li .question .icon::after,
#container.customer-center .faq-list ul li .answer .icon::after {
    content: '';
    position: absolute;
    left: 40px;
    top: 0;
    display: block;
    width: 0;
    height: 0;
    border-right: 15px solid transparent;
}
#container.customer-center .faq-list ul li .question .icon::after {
    border-top: 49px solid #404040;
}
#container.customer-center .faq-list ul li .answer .icon::after {
    border-top: 49px solid #eecc1a;
}
#container.customer-center .faq-list ul li .question .icon {
    background-color: #404040;
    color: #ffffff;
}
#container.customer-center .faq-list ul li .answer .icon {
    background-color: #eecc1a;
    color: #000000;
}
#container.customer-center .faq-list ul li .question p {
    height: 49px;
    font-size: 1.6rem;
    font-weight: 500;
}
#container.customer-center .faq-list ul li .answer p {
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 17px;
}
#container.customer-center .faq-list .button-box {
    margin-top: 40px;
    text-align: center;
}
#container.customer-center .faq-list .button-box .btn-inquiry {
    padding: 12px 20px;
    border-radius: 5px;
    background-color: #eecc1a;
    color: #000000;
    font-size: 1.8rem;
    font-weight: 500;
}
#container.customer-center .customer-center-article {
    margin-top: 50px;
}
#container.customer-center .customer-center-article .article-table .table-row .col.col-title {
    width: 500px;
}
#container.customer-center .customer-center-article .article-table .table-row .col.col-title img {
    max-width: 100%;
}
#container.customer-center .customer-center-article .article-table .table-row .col.col-status {
    width: 100px;
}
#container.customer-center .customer-center-article .article-table .table-row .col.col-status .status-waiting {
    background-image: url(../../img/icon-customer-received.png);
}

#container.customer-center form fieldset {
    border-top: 2px solid #117052;
    border-bottom: 2px solid #117052;
}
#container.customer-center form fieldset .field-item {
    border-bottom: 1px solid #cecece;
    width: 100%;
}
#container.customer-center form fieldset .field-item .label {
    padding-left: 23px;
    border-right: 1px solid #cecece;
    width: 111px;
    height: 100%;
    font-size: 1.4rem;
    font-weight: 500;
}
#container.customer-center form fieldset .field-item .label span {
    position: relative;
    padding-left: 10px;
}
#container.customer-center form fieldset .field-item .label.required span::before {
    content: "*";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    margin-right: 5px;
    color: #eb8259;
}
#container.customer-center form fieldset .field-item .field {
    padding: 10px 12px;
    width: 90%;
}
#container.customer-center form fieldset .field-item .field input[type="text"],
#container.customer-center form fieldset .field-item .field textarea {
    box-sizing: border-box;
    border: 1px solid #d5d5d5;
}
#container.customer-center form fieldset .field-item .field input[type="text"] {
    width: 100%;
    height: 36px;
}
#container.customer-center form fieldset .field-item .field textarea {
    padding: 0;
    width: 100%;
    height: 180px;
}
#container.customer-center form fieldset .field-item.inquiry-file-box .field .file-box-wrap {
    display: flex;
    align-items: center;
    column-gap: 10px;
}
#container.customer-center form fieldset .field-item.inquiry-file-box .field .file-box-wrap ul li {
    display: flex;
    align-items: center;
    column-gap: 10px;
}
#container.customer-center form fieldset .field-item.inquiry-file-box .field .file-box-wrap ul li .file-add-btn {
    border-radius: 3px;
    border: 1px solid #d5d5d5;
    background-color: #e1e1e1;
    width: 32px;
    height: 32px;
    font-size: 1.4rem;
    font-weight: 500;
}
#container.customer-center form fieldset .field-item.inquiry-file-box .field .file-box-wrap ul li input[type="file"] {
    height: 32px;
}
#container.customer-center form fieldset .field-item.inquiry-file-box .field .file-box-wrap .info {
    font-size: 1.2rem;
    font-weight: 400;
    color: #6d6d6d;
}
#container.customer-center form .button-box {
    margin-top: 40px;
    text-align: center;
}
#container.customer-center form .button-box button {
    padding: 12px 20px;
    border-radius: 5px;
    background-color: #eecc1a;
    color: #000000;
    font-size: 1.8rem;
    font-weight: 500;
}

#container.customer-center .inquiry-detail .detail-wrap .question,
#container.customer-center .inquiry-detail .detail-wrap .answer {
    position: relative;
    padding: 17px 0 16px 75px;
}
#container.customer-center .inquiry-detail .detail-wrap .question {
    border-top: 1px solid #dbdbdb;
    cursor: pointer;
}
#container.customer-center .inquiry-detail .detail-wrap .answer {
    overflow: hidden;
    border-top: 1px solid #dbdbdb;
    max-height: 500px;
    padding-top: 17px;
    padding-bottom: 16px;
}
#container.customer-center .inquiry-detail .detail-wrap .question .icon,
#container.customer-center .inquiry-detail .detail-wrap .answer .icon {
    position: absolute;
    left: 0;
    top: 0;
    padding-left: 15px;
    width: 40px;
    height: 49px;
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 49px;
}
#container.customer-center .inquiry-detail .detail-wrap .question .icon::after,
#container.customer-center .inquiry-detail .detail-wrap .answer .icon::after {
    content: '';
    position: absolute;
    left: 40px;
    top: 0;
    display: block;
    width: 0;
    height: 0;
    border-right: 15px solid transparent;
}
#container.customer-center .inquiry-detail .detail-wrap .question .icon::after {
    border-top: 49px solid #404040;
}
#container.customer-center .inquiry-detail .detail-wrap .answer .icon::after {
    border-top: 49px solid #eecc1a;
}
#container.customer-center .inquiry-detail .detail-wrap .question .icon {
    background-color: #404040;
    color: #ffffff;
}
#container.customer-center .inquiry-detail .detail-wrap .answer .icon {
    background-color: #eecc1a;
    color: #000000;
}
#container.customer-center .inquiry-detail .detail-wrap .question strong {
    display: block;
    margin-bottom: 10px;
    font-size: 1.6rem;
    font-weight: 500;
}
#container.customer-center .inquiry-detail .detail-wrap .question p {
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 17px;
}
#container.customer-center .inquiry-detail .detail-wrap .answer p {
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 17px;
}
#container.customer-center .inquiry-detail .detail-wrap img {
    max-width: 100%;
}

#container.customer-center .inquiry-detail .button-box {
    margin-top: 40px;
    text-align: center;
}
#container.customer-center .inquiry-detail .button-box .list-btn {
    padding: 12px 20px;
    border-radius: 5px;
    background-color: #eecc1a;
    color: #000000;
    font-size: 1.8rem;
    font-weight: 500;
}

/* 인기글 */
#container.popular-article-list .popular-article-tab {
    margin-bottom: 50px;
}
#container.popular-article-list .popular-article-tab .tab-group {
    position: relative;
    display: flex;
    justify-content: space-around;
    column-gap: 10px;
    height: 245px;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item {
    width: 33.3%;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item .tab-link {
    position: relative;
    background-repeat: no-repeat;
    padding-top: 20px;
    text-align: center;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item .tab-link::before {
    content: '';
    position: absolute;
    top: 0;
    z-index: -1;
    display: none;
    background-repeat: no-repeat;
    background-position: center;
    height: 55px;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item:nth-child(1) .tab-link::before {
    left: 0;
    background-image: url(../../img/popular-tab-01-bg.png);
    width: 412px;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item:nth-child(2) .tab-link::before {
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../../img/popular-tab-02-bg.png);
    width: 385px;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item:nth-child(3) .tab-link::before {
    right: 0;
    background-image: url(../../img/popular-tab-03-bg.png);
    width: 360px;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item .tab-link a {
    display: block;
    font-size: 1.8rem;
    font-weight: 600;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item.active .tab-link a {
    color: #19473E;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item.active .tab-link::before {
    display: block;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item .popular-articles {
    position: absolute;
    left: 0;
    top: 55px;
    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 58px;
    background-color: #dfe8e5;
    padding: 27px 33px;
    width: 100%;
    height: 190px;
    counter-reset: number;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item.active .popular-articles {
    display: flex;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item.active .popular-articles::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 1px;
    height: 135px;
    background-color: #9bbfb3;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item .popular-articles li {
    counter-increment: number;
    display: flex;
    align-items: center;
    width: 420px;
    font-size: 1.5rem;
    font-weight: 400;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item .popular-articles li::before {
    content: counter(number);
    display: block;
    margin-right: 8px;
    border-radius: 50%;
    background-color: #117052;
    width: 20px;
    height: 20px;
    color: #ffffff;
    text-align: center;
    line-height: 20px;
    font-size: 1.2rem;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item .popular-articles li .title {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 4px;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item .popular-articles li .title a {
    display: block;
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item .popular-articles li .title .comment-count {
    display: block;
    margin-left: 2px;
    color: #00a16e;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item .popular-articles li .author-wrap {
    margin-left: auto;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item .popular-articles li .author-wrap .author {
    display: flex;
    align-items: center;
    column-gap: 4px;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item .popular-articles li .author-wrap .author img {
    width: 20px;
    height: 20px;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item .popular-articles li .author-wrap .author span {
    display: inline-block;
    width: 85px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#container.popular-article-list .popular-article-tab .tab-group .tab-item .popular-articles li .new-icon {
    position: absolute;
    right: -8px;
    top: -2px;
    display: block;
    margin-left: 2px;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    background-color: #e24f4f;
    font-size: 0;
}

/* 선착순 꽁머니 */
#container.ggong-money .ggong-list-wrap .ggong-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 62px;
}
#container.ggong-money .ggong-list-wrap .ggong-list li {
    width: 280px;
}
#container.ggong-money .ggong-list-wrap .ggong-list li .thumbnail {
    width: 280px;
    height: 210px;
}
#container.ggong-money .ggong-list-wrap .ggong-list li .thumbnail > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#container.ggong-money .ggong-list-wrap .ggong-list li .ggong-info {
    background-color: #ffffff;
    padding: 15px;
}
#container.ggong-money .ggong-list-wrap .ggong-list li .ggong-info .title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #0e674b;
}
#container.ggong-money .ggong-list-wrap .ggong-list li .ggong-info .allocate {
    margin-top: 12px;
    font-size: 1.4rem;
    font-weight: 500;
    color: #333333;
}
#container.ggong-money .ggong-list-wrap .ggong-list li .ggong-info .allocate span span {
    color: #117052;
}
#container.ggong-money .ggong-list-wrap .ggong-list li .ggong-info .total-price {
    margin-top: 12px;
    font-size: 1.4rem;
    font-weight: 500;
    color: #333333;
}
#container.ggong-money .ggong-list-wrap .ggong-list li .ggong-info .total-price span {
    font-size: 1.8rem;
    color: #dd620e;
}
#container.ggong-money .ggong-list-wrap .ggong-list li .ggong-info .levvel-info {
    margin-top: 12px;
    font-size: 1.4rem;
    font-weight: 500;
    color: #333333;
    line-height: 23px;
}
#container.ggong-money .ggong-list-wrap .ggong-list li .ggong-info .levvel-info .level {
    color: #dd620e;
}
#container.ggong-money .ggong-list-wrap .ggong-list li .ggong-info .levvel-info .level img {
    float: left;
    margin-right: 5px;
    width: 23px;
    height: 23px;
}
#container.ggong-money .ggong-list-wrap .ggong-list li .ggong-apply {
    padding: 15px 14px 20px 14px;
    background-color: #117052;
    height: 140px;
}
#container.ggong-money .ggong-list-wrap .ggong-list li .ggong-apply .apply-count {
    font-size: 1.4rem;
    font-weight: 500;
    color: #ffffff;
}
#container.ggong-money .ggong-list-wrap .ggong-list li .ggong-apply .apply-count span {
    color: #eecc1a;
}
#container.ggong-money .ggong-list-wrap .ggong-list li .ggong-apply input[type="text"] {
    margin-top: 10px;
    border-radius: 3px;
    border: 0;
    padding: 0 10px;
    width: 232px;
    height: 32px;
    font-size: 1.3rem;
    font-weight: 300;
}
#container.ggong-money .ggong-list-wrap .ggong-list li .ggong-apply .apply-btn {
    display: block;
    margin-top: 10px;
    padding: 10px 0;
    border-radius: 3px;
    background-color: #eecc1a;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    color: #000000;
}
#container.ggong-money .ggong-list-wrap .ggong-list li.closed .ggong-apply input[type="text"] {
    display: none;
}
#container.ggong-money .ggong-list-wrap .ggong-list li.closed .ggong-apply .apply-btn {
    margin-top: 30px;
    background-color: #bdbdbd;
}

/* 매일매일 출석 */
#container.attendance .attendance-check-box {
    position: relative;
    background-image: url(../../img/attendance-check-bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    width: 965px;
    height: 212px;
}
#container.attendance .attendance-check-box .title {
    position: absolute;
    left: 50%;
    top: -9px;
    transform: translateX(-50%);
    display: inline-block;
    padding-left: 147px;
    background-image: url(../../img/attendance-check-head-img.png);
    background-repeat: no-repeat;
    background-position: left;
    height: 140px;
    line-height: 140px;
    font-size: 3.6rem;
    font-weight: 600;
    color: #ffffff;
}
#container.attendance .attendance-check-box form {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 106px;
}
#container.attendance .attendance-check-box form input[type="text"] {
    box-sizing: border-box;
    border: 0;
    padding: 18px 20px;
    width: 562px;
    height: 52px;
    font-size: 1.7rem;
    font-weight: 300;
}
#container.attendance .attendance-check-box form button {
    border: 2px solid #ffffff;
    border-left: 0;
    background-color: #1e8665;
    width: 130px;
    height: 52px;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
}
#container.attendance .attendance-check-box .time-info {
    margin-top: 37px;
    text-align: right;
    font-size: 1.4rem;
    font-weight: 300;
}
#container.attendance .attendance-check-box .time-info strong {
    font-weight: 500;
}

#container.attendance .point-info-box {
    position: relative;
    display: flex;
    column-gap: 117px;
    margin-top: 57px;
    border-radius: 10px;
    border: 1px solid #117052;
    background-color: #ffffff;
    padding: 17px 42px;
    width: 965px;
    height: 238px;
}
#container.attendance .point-info-box::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 70px;
    z-index: 1;
    display: block;
    background-image: url(../../img/bg-coin.png);
    background-repeat: no-repeat;
    background-position: left;
    width: 860px;
    height: 281px;
}
#container.attendance .point-info-box .text-info {
    padding-top: 17px;
    position: relative;
    z-index: 2;
}
#container.attendance .point-info-box .text-info .title {
    font-size: 2.7rem;
    font-weight: 600;
}
#container.attendance .point-info-box .text-info p {
    margin-top: 16px;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 130%;
}
#container.attendance .point-info-box .text-info img {
    display: block;
    margin-top: 16px;
}
#container.attendance .point-info-box .point-info {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    width: 477px;
}
#container.attendance .point-info-box .point-info ul.ranking {
    width: 172px;
}
#container.attendance .point-info-box .point-info ul.accumulate {
    width: 241px;
}
#container.attendance .point-info-box .point-info ul li {
    padding: 10px 0;
    border-bottom: 1px dashed #000000;
    line-height: 31px;
    font-size: 1.4rem;
    font-weight: 400;
}
#container.attendance .point-info-box .point-info ul li:last-child {
    border-bottom: 0;
}
#container.attendance .point-info-box .point-info ul li span {
    display: inline-block;
    color: #117052;
    font-weight: 600;
}
#container.attendance .point-info-box .point-info ul li span.point {
    position: relative;
    padding-right: 18px;
}
#container.attendance .point-info-box .point-info ul li span.point::after {
    content: 'P';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    border-radius: 50%;
    background-color: #f5d463;
    width: 16px;
    height: 16px;    
    font-size: 1.1rem;
    font-weight: 600;
    color: #000000;
    text-align: center;
    line-height: 16px;
}
#container.attendance .point-info-box .point-info ul.ranking li {
    padding-left: 39px;
    background-repeat: no-repeat;
    background-position: 6px center;
}
#container.attendance .point-info-box .point-info ul.ranking li:nth-child(1) {
    background-image: url(../../img/icon-medal-01.png);
}
#container.attendance .point-info-box .point-info ul.ranking li:nth-child(2) {
    background-image: url(../../img/icon-medal-02.png);
}
#container.attendance .point-info-box .point-info ul.ranking li:nth-child(3) {
    background-image: url(../../img/icon-medal-03.png);
}
#container.attendance .point-info-box .point-info ul.ranking li:nth-child(4) {
    background-image: url(../../img/icon-medal-etc.png);
}
#container.attendance .point-info-box .point-info ul.accumulate li {
    padding-left: 3px;
}
#container.attendance .point-info-box .point-info ul.accumulate li:before {
    content: '•';
    display: inline-block;
}

#container.attendance .attendance-ranking {
    margin-top: 55px;
}
#container.attendance .attendance-ranking .ranking-item {
    display: flex;
    gap: 28px;
    border-radius: 5px;
    border: 1px solid #d0d0d0;
    background-color: #ececec;
    padding: 14px 21px;
}
#container.attendance .attendance-ranking .ranking-item.empty {
    display: block;
    padding: 15px 0;
    text-align: center;
}
#container.attendance .attendance-ranking .ranking-item:not(:last-child) {
    margin-bottom: 10px;
}
#container.attendance .attendance-ranking .ranking-item .profile-img-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
#container.attendance .attendance-ranking .ranking-item .profile-img-wrap .profile-img {
    width: 55px;
    height: 55px;
}
#container.attendance .attendance-ranking .ranking-item .profile-img-wrap .profile-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#container.attendance .attendance-ranking .ranking-item .profile-img-wrap .rank-no {
    display: block;
    border-radius: 26px;
    background-color: #737272;
    padding: 3px 8px;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.13px;
    color: #ffffff;
}
#container.attendance .attendance-ranking .ranking-item:nth-child(-n+3) .profile-img-wrap .rank-no {
    background-color: #117052;
}
#container.attendance .attendance-ranking .ranking-item .rank-content-wrap {
    width: calc(100% - 83px);
}
#container.attendance .attendance-ranking .ranking-item .rank-content-wrap .info-wrap {
    display: flex;
    align-items: center;
}
#container.attendance .attendance-ranking .ranking-item .rank-content-wrap .info-wrap .author-wrap .author {
    display: flex;
    align-items: center;
    column-gap: 6px;
}
#container.attendance .attendance-ranking .ranking-item .rank-content-wrap .info-wrap .author-wrap .author img {
    width: 20px;
    height: 20px;
}
#container.attendance .attendance-ranking .ranking-item .rank-content-wrap .info-wrap .author-wrap .author span {
    color: #333333;
    font-size: 1.4rem;
    font-weight: 600;
}
#container.attendance .attendance-ranking .ranking-item .rank-content-wrap .info-wrap .attendance-time {
    position: relative;
    display: inline-block;
    margin-left: 11px;
    padding-left: 13px;
    color: #8a8a8a;
    font-size: 1.4rem;
    font-weight: 400;
}
#container.attendance .attendance-ranking .ranking-item .rank-content-wrap .info-wrap .attendance-time::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: inline-block;
    background-color: #cbcbcb;
    width: 1px;
    height: 10px;
}
#container.attendance .attendance-ranking .ranking-item .rank-content-wrap .info-wrap .ranking-item-days {
    margin-left: auto;
    font-size: 1.4rem;
    font-weight: 500;
    color: #333333;
}
#container.attendance .attendance-ranking .ranking-item .rank-content-wrap .info-wrap .ranking-item-days .days {
    color: #117052;
}
#container.attendance .attendance-ranking .ranking-item .rank-content-wrap .info-wrap .ranking-item-point {
    border-radius: 21px;
    border: 1px solid #c4643e;
    background-color: #f7f1e4;
    margin-left: 17px;
    padding: 6px 10px;
    color: #c4643e;
    font-size: 1.2rem;
    line-height: 114%;
}
#container.attendance .attendance-ranking .ranking-item .rank-content-wrap .ranking-item-comment {
    margin-top: 17px;
    border-radius: 3px;
    border: 1px solid #d5d5d5;
    background-color: #ffffff;
    padding: 8px 14px;
    width: 100%;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 140%;
}

#container.attendance .attendance-ranking li:nth-child(2) .col.col-no,
#container.attendance .attendance-ranking li:nth-child(3) .col.col-no,
#container.attendance .attendance-ranking li:nth-child(4) .col.col-no {
    font-size: 0;
}
#container.attendance .attendance-ranking li:nth-child(2) .col.col-no::before,
#container.attendance .attendance-ranking li:nth-child(3) .col.col-no::before,
#container.attendance .attendance-ranking li:nth-child(4) .col.col-no::before {
    content: '';
    display: inline-block;
    background-repeat: no-repeat;
    background-position: left;
    width: 24px;
    height: 31px;
}
#container.attendance .attendance-ranking li:nth-child(2) .col.col-no::before {
    background-image: url(../../img/icon-medal-01.png);
}
#container.attendance .attendance-ranking li:nth-child(3) .col.col-no::before {
    background-image: url(../../img/icon-medal-02.png);
}
#container.attendance .attendance-ranking li:nth-child(4) .col.col-no::before {
    background-image: url(../../img/icon-medal-03.png);
}
#container.attendance .attendance-ranking .table-row .col.col-nickname .author {
    display: flex;
    align-items: center;
    column-gap: 10px;
}
#container.attendance .attendance-ranking .table-row .col.col-nickname .author img {
    width: 23px;
    height: 23px;
}
#container.attendance .attendance-ranking .table-row .col.col-attendance-comment {
    width: 300px;
    text-align: left;
}
#container.attendance .attendance-ranking .table-row .col.col-attendance-point .point {
    border-radius: 21px;
    border: 1px solid #c4643e;
    background-color: #f7f1e4;
    padding: 6px 10px;
    color: #c4643e;
    font-size: 1.2rem;
    line-height: 114%;
}
#container.attendance .attendance-ranking .table-row .col.col-attendance-days .days {
    color: #117052;
    font-weight: 600;
}

/* 복권 */
#container.lottery-page .info-text {
    margin-bottom: 0;
}
#container.lottery-page .info-text .rule-text {
    display: flex;
    justify-content: space-between;
    background-color: #33433e;
    padding: 16px 20px;
}
#container.lottery-page .info-text .rule-text .earned-point {
    display: flex;
    align-items: center;
    column-gap: 10px;
}
#container.lottery-page .info-text .rule-text .earned-point p {
    padding-left: 30px;
    font-size: 1.6rem;
    font-weight: 400;
    color: #ffffff;
}
#container.lottery-page .info-text .rule-text .earned-point span.point {
    position: relative;
    font-size: 2rem;
    font-weight: 600;
    color: #8dedce;
}
#container.lottery-page .info-text .rule-text .earned-point span.point::before {
    content: '';
    display: inline-block;
    background-color: #8a918f;
    width: 1px;
    height: 13px;
    margin-right: 14px;
}

#container.lottery-page .info-text .rule-text .earned-point span.point::after {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    content: 'P';
    display: inline-block;
    border-radius: 50%;
    background-color: #f5d463;
    width: 16px;
    height: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #000000;
    text-align: center;
    line-height: 16px;
}
#container.lottery-page .info-text .rule-text .rule-book-btn {
    padding: 10px 35px 9px 15px;
    background-color: #eecc1a;
    background-image: url(../../img/icon-link-arrow.png);
    background-repeat: no-repeat;
    background-position: right 15px center;
    border-radius: 5px;
    font-size: 1.5rem;
    font-weight: 500;
}
#container.lottery-page .button-box {
    margin-top: 30px;
    text-align: center;
}
#container.lottery-page .button-box .issue-lottery-btn {
    display: inline-block;
    padding: 11px 44px 10px 20px;
    background-color: #117052;
    background-image: url(../../img/icon-download.png);
    background-repeat: no-repeat;
    background-position: right 20px center;
    border-radius: 5px;
    font-size: 1.5rem;
    font-weight: 500;
    color: #ffffff;
}
#container.lottery-page .lottery-list-wrap {
    margin-top: 80px;
}
#container.lottery-page .lottery-list-wrap .lottery-list-head {
    display: flex;
    column-gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid #bfbfbf;
}
#container.lottery-page .lottery-list-wrap .lottery-list-head select {
    border: 1px solid #acc4ae;
    width: 120px;
}
#container.lottery-page .lottery-list-wrap .lottery-list-head button, 
#container.lottery-page .lottery-list-wrap .lottery-list-head a {
    padding: 8px 15px;
    border-radius: 5px;
    background-color: #484848;
    font-size: 1.4rem;
    font-weight: 500;
    color: #ffffff;
}
#container.lottery-page .lottery-list-wrap .lottery-list-head button.lock,
#container.lottery-page .lottery-list-wrap .lottery-list-head a.lock {
    background-color: transparent;
    padding: 0 0 0 22px;
    background-repeat: no-repeat;
    background-position: left 4px;
    color: #000000;
    font-size: 1.4rem;
    font-weight: 400;
}

#container.lottery-page .lottery-list-wrap .lottery-list-head button.lock.unlock-lottery-btn,
#container.lottery-page .lottery-list-wrap .lottery-list-head a.lock.unlock-lottery-btn {
    background-image: url(../../img/icon-padlock-unlocked.svg);
}
#container.lottery-page .lottery-list-wrap .lottery-list-head button.lock.lock-lottery-btn,
#container.lottery-page .lottery-list-wrap .lottery-list-head a.lock.lock-lottery-btn {
    background-image: url(../../img/icon-padlock-locked.svg);
}
#container.lottery-page .lottery-list-wrap .lottery-list-head .check-winning-btn {
    margin-left: auto;
    background-color: #eecc1a;
    color: #000000;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body {
    display: grid;
    grid-template-columns: repeat(6, 144px);
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #bfbfbf;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item {
    position: relative;
    border: 1px solid #d0d0d0;
    background-color: #ffffff;
    padding: 14px;
    width: 144px;
    /* height: 179px; */
    height: 209px;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item.checked {
    border-color: #117052;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item .lottery-type {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 26px;
    background-color: #484848;
    font-size: 1.3rem;
    font-weight: 500;
    color: #ffffff;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item.type-weekly .lottery-type {
    background-color: #eecc1a;
    color: #010101;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item .lottery-ticket-wrap {
    overflow: hidden;
    margin: 14px auto;
    width: 97px;
    height: 42px;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item .lottery-ticket {
    position: relative;
    display: block;
    border-radius: 2px;
    border: 1px solid #c0c0c0;
    background-color: #ebebeb;
    width: 100%;
    height: 100%;
    font-size: 1.8rem;
    font-weight: 600;
    color: #7e7e7e;
    text-align: center;
    line-height: 42px;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item .lottery-ticket::before,
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item .lottery-ticket::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #c0c0c0;
    background-color: #ffffff;
    width: 18px;
    height: 18px;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item .lottery-ticket::before {
    left: -12px;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item .lottery-ticket::after {
    right: -12px;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item .ticket-info li {
    margin-bottom: 7px;
    font-size: 1.3rem;
    letter-spacing: -0.5px;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item .ticket-info li:last-child {
    margin-bottom: 0;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item .ticket-info li span {
    display: inline-block;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item .ticket-info li span.info-title {
    margin-right: 8px;
    width: 34px;
    font-weight: 500;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item .ticket-info li span.info-value {
    font-weight: 300;
    color: #616161;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item .ticket-info li.payout .info-value {
    color: #d0534d;
    font-weight: 600;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item.unopen {
    position: relative;
    background-color: #eff4f2;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item.unopen .lottery-ticket {
    background-color: #117052;
    border-color: #117052;
    color: #ffffff;
    font-size: 1.4rem;
    cursor: pointer;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item.unopen .lottery-ticket::before,
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item.unopen .lottery-ticket::after {
    border-color: #117052;
    background-color: #eff4f2;
}

#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item.unopen .lockpad {
    position: absolute;
    top: 16px;
    right: 13px;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item.unopen .lockpad.lock {
    background-image: url(../../img/icon-padlock-locked.svg);
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item.unopen .lockpad.unlock {
    background-image: url(../../img/icon-padlock-unlocked.svg);
}

#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item.win {
    height: 209px;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item.win .lottery-ticket {
    border-color: #117052;
    color: #117052;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item.win .lottery-ticket::before,
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item.win .lottery-ticket::after {
    border-color: #117052;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item.win .button-box {
    margin-top: 10px;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item.win .button-box .payout-btn {
    border-radius: 5px;
    background-color: #117052;
    padding: 6px 0;
    width: 116px;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 500;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body li.lottery-list-item.win .button-box .payout-btn.requested {
    display: block;
    background-color: #e0e0e0;
    color: #6d6d6d;
}

#container.lottery-page .popup-layer.lottery-card {
    width: 380px;
    height: 209px;
}
#container.lottery-page .popup-layer.lottery-card.open {
    display: block;
}
#container.lottery-page .popup-layer.lottery-card.before-open {
    background: url(../../img/lottery-before-open-bg.png) no-repeat center center / 100% 100%;
}
#container.lottery-page .popup-layer.lottery-card .popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 16px;
    width: 100%;
    height: 100%;
}
#container.lottery-page .popup-layer.lottery-card .popup-content .open-lottery-btn {
    background-color: #000000;
    padding: 6px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 500;
}
#container.lottery-page .popup-layer.lottery-card .popup-content .lottery-type {
    font-size: 2.3rem;
    font-weight: 500;
    color: #117052;
}
#container.lottery-page .popup-layer.lottery-card .popup-content .lottery-result {
    width: 120px;
    height: 70px;
    border-radius: 20px;
    font-size: 2.3rem;
    font-weight: 500;
    text-align: center;
    line-height: 70px;
}
#container.lottery-page .popup-layer.lottery-card .popup-content .lottery-result.result-lose {
    background-color: #d9d9d9;
    color: #000000;
}
#container.lottery-page .popup-layer.lottery-card .popup-content .lottery-result.result-win {
    background-color: #117052;
    color: #ffffff;
}
#container.lottery-page .popup-layer.lottery-card .popup-content .lottery-result-text {
    margin-top: 2px;
    font-size: 1.9rem;
    font-weight: 300;
}
#container.lottery-page .popup-layer.lottery-card .popup-content .lottery-result .lottery-result-text strong {
    font-weight: 500;
}

#container.lottery-page .popup-layer.payout-request {
    padding: 40px 20px 30px;
    width: 332px;
    height: 453px;
}
#container.lottery-page .popup-layer.payout-request.open {
    display: block;
}
#container.lottery-page .popup-layer.payout-request .popup-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 16px;
}
#container.lottery-page .popup-layer.payout-request .popup-head h3 {
    font-size: 3.1rem;
    font-weight: 500;
}
#container.lottery-page .popup-layer.payout-request .popup-head .notes-wrap {
    border-radius: 7px;
    background-color: #117052;
    padding: 15px 20px;
    width: 100%;
}
#container.lottery-page .popup-layer.payout-request .popup-head .notes-wrap ul {
    margin-bottom: 0;
}
#container.lottery-page .popup-layer.payout-request .popup-head .notes-wrap ul li {
    position: relative;
    margin-bottom: 5px;
    padding-left: 10px;
    font-size: 1.4rem;
    font-weight: 400;
    color: #ffffff;
}
#container.lottery-page .popup-layer.payout-request .popup-head .notes-wrap ul li:last-child {
    margin-bottom: 0;
}
#container.lottery-page .popup-layer.payout-request .popup-head .notes-wrap ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #69f1c7;
}

#container.lottery-page .popup-layer.payout-request .popup-content {
    margin-top: 22px;
    padding: 0 18px;
}
#container.lottery-page .popup-layer.payout-request .popup-content .input-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    height: 32px;
}
#container.lottery-page .popup-layer.payout-request .popup-content .input-wrap label {
    display: inline-block;
    width: 59px;
    font-size: 1.4rem;
    font-weight: 500;
}
#container.lottery-page .popup-layer.payout-request .popup-content .input-wrap input,
#container.lottery-page .popup-layer.payout-request .popup-content .input-wrap select {
    box-sizing: border-box;
    border: 1px solid #bfbfbf; 
    padding: 5px;
    width: 195px;
    height: 100%;
}
#container.lottery-page .popup-layer.payout-request .popup-content .input-wrap select {
    width: 162px;
}
#container.lottery-page .popup-layer.payout-request .popup-content .checkbox-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 5px;
    margin-top: 20px;
}
#container.lottery-page .popup-layer.payout-request .popup-content .checkbox-wrap input {
    display: inline-block;
}
#container.lottery-page .popup-layer.payout-request .popup-content .checkbox-wrap label {
    font-size: 1.4rem;
    font-weight: 500;
}
#container.lottery-page .popup-layer.payout-request .popup-content .button-box {
    margin-top: 20px;
}
#container.lottery-page .popup-layer.payout-request .popup-content .button-box .payout-btn {
    border-radius: 5px;
    background-color: #484848;
    padding: 8px 16px;
    color: #ffffff;
}


#container.lottery-page .popup-layer.sell-lottery {
    padding: 40px 20px 30px;
    width: 332px;
}
#container.lottery-page .popup-layer.sell-lottery.open {
    display: block;
}
#container.lottery-page .popup-layer.sell-lottery .popup-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 16px;
}
#container.lottery-page .popup-layer.sell-lottery .popup-head h3 {
    font-size: 3.1rem;
    font-weight: 500;
}
#container.lottery-page .popup-layer.sell-lottery .popup-content {
    margin-top: 22px;
    padding: 0 18px;
}
#container.lottery-page .popup-layer.sell-lottery .popup-content .input-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    height: 32px;
}
#container.lottery-page .popup-layer.sell-lottery .popup-content .input-wrap label {
    display: inline-block;
    width: 110px;
    font-size: 1.4rem;
    font-weight: 500;
}
#container.lottery-page .popup-layer.sell-lottery .popup-content .input-wrap input {
    box-sizing: border-box;
    border: 1px solid #bfbfbf; 
    padding: 5px;
    width: 135px;
    height: 100%;
}
#container.lottery-page .popup-layer.sell-lottery .popup-content .button-box .sell-btn {
    border-radius: 5px;
    background-color: #484848;
    padding: 8px 16px;
    color: #ffffff;
}

/* 당첨자 현황 */
#container.lottery-page .winner-list-wrap {
    margin-top: 45px;
}
#container.lottery-page .winner-list-wrap .winner-list-head {
    text-align: right;
}
#container.lottery-page .winner-list-wrap .winner-list-head button {
    padding: 9px 13px;
    border-radius: 5px;
    background-color: #eecc1a;
    font-size: 1.4rem;
    font-weight: 500;
}
#container.lottery-page .winner-list-wrap .winner-list-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 20px;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item {
    border-radius: 8px;
    border: 1px solid #d0d0d0;
    background-color: #ffffff;
    padding: 20px 8px;
    width: 455px;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item h3 {
    margin-bottom: 20px;
    font-size: 2rem;
    font-weight: 200;
    color: #333333;
    text-align: center;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item h3 strong {
    font-weight: 500;
    color: #117052;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .winner-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 3px;
    border: 1px solid #f0f0f0;
    padding: 11px 0;
    background-color: #f0f0f0;
    transition: all 0.3s ease;
    cursor: pointer;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .winner-list li:hover,
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .winner-list li.open {
    border: 1px solid #117052;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .winner-list li + li {
    margin-top: 7px;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .winner-list li .rank {
    width: 60px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    color: #333333;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .winner-list li .win-point {
    position: relative;
    padding-left: 16px;
    padding-right: 16px;
    width: 250px;
    font-weight: 300;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .winner-list li .win-point::before,
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .winner-list li .win-point::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 1px;
    height: 18px;
    background-color: #B3B3B3;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .winner-list li .win-point::before {
    left: 0;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .winner-list li .win-point::after {
    right: 0;
}

#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .winner-list li .win-point span.point {
    display: flex;
    align-items: center;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .winner-list li .win-point span.point::after {
    content: 'P';
    display: inline-block;
    border-radius: 50%;
    background-color: #f5d463;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #000000;
    text-align: center;
    line-height: 16px;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .winner-list li .winner-count {
    width: 124px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 500;
    color: #333333;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .winner-list li .winner-count span.count-current {
    color: #117052;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .winner-list li .win-users {
    display: none;
    margin: 18px 20px 0;
    border-top: 1px solid #cdcdcd;
    padding-top: 18px;
    width: 100%;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .winner-list li.open .win-users {
    display: block;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .remain-rank-wrap {
    margin-top: 20px;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .remain-rank-wrap .label {
    display: inline-block;
    margin-left: 10px;
    margin-right: 15px;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 15px;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .remain-rank-wrap .remain-rank {
    position: relative;
    display: inline-block;
    padding-left: 15px;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 15px;
}
#container.lottery-page .winner-list-wrap .winner-list-body .winner-list-item .remain-rank-wrap .remain-rank::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 1px;
    height: 18px;
    background-color: #b3b3b3;
}
#container.lottery-page .lottery-history {
    margin-top: 33px;
}
#container.lottery-page .lottery-history .article-table .table-row .col.col-price {
    width: 180px;
    color: #d0534d;
}

/* 복권거래 */
#container.lottery-page .my-trade-info {
    display: flex;
    column-gap: 15px;
    margin-top: 40px;
}
#container.lottery-page .my-trade-info .card {
    background-image: url(../../img/lottery-trade-card-bg.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 174px;
    height: 182px;
}
#container.lottery-page .my-trade-info .card .card-content {
    padding: 38px 23px;
    width: 100%;
    height: 134px;
}
#container.lottery-page .my-trade-info .card.profile .card-content {
    padding: 25px 45px;
}
#container.lottery-page .my-trade-info .card.current-point .card-content {
    display: flex;
    align-items: center;
    padding: 50px 22px;
}
#container.lottery-page .my-trade-info .card .card-content .profile-img {
    overflow: hidden;
    width: 85px;
    height: 85px;
    border-radius: 50%;
}
#container.lottery-page .my-trade-info .card .card-content .profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#container.lottery-page .my-trade-info .card .card-content .item {
    display: flex;
    align-items: center;
    column-gap: 5px;
}
#container.lottery-page .my-trade-info .card .card-content .item + .item {
    margin-top: 12px;
}
#container.lottery-page .my-trade-info .card .card-content .item .label {
    display: inline-block;
    border-radius: 5px;
    background-color: #117052;
    padding: 0 5px;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 22.5px;
    color: #ffffff;
}
#container.lottery-page .my-trade-info .card .card-content .item .count-wrap {
    display: inline-block;
    font-size: 2rem;
    font-weight: 400;
    line-height: 22.5px;
}
#container.lottery-page .my-trade-info .card .card-content .item .count-wrap .count {
    font-weight: 600;
    color: #117052;
}
#container.lottery-page .my-trade-info .card .card-content .current-point {
    display: flex;
    align-items: center;
    column-gap: 3px;
    font-size: 3.4rem;
    font-weight: 600;
    color: #117052;
}
#container.lottery-page .my-trade-info .card .card-content .current-point .point-unit {
    display: inline-block;
    border-radius: 50%;
    background-color: #f5d463;
    width: 16px;
    height: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #000000;
    text-align: center;
    line-height: 16px;
}
#container.lottery-page .my-trade-info .card .card-name {
    margin-top: 10px;
    font-size: 1.6rem;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
}
#container.lottery-page .my-trade-info .card .card-name strong {
    color: #eecc1a;
}
#container.lottery-page .lottery-sale-list {
    margin-top: 48px;
}
#container.lottery-page .lottery-sale-list .button-box {
    margin-bottom: 20px;
    text-align: right;
}
#container.lottery-page .lottery-sale-list .button-box .button {
    display: inline-block;
    border-radius: 5px;
    padding: 8px 12px;
    background-color: #eecc1a;
}
#container.lottery-page .lottery-sale-list .article-table .table-row .col.col-point strong {
    font-weight: 600;
    color: #d0534d;
}
#container.lottery-page .lottery-sale-list .article-table .table-row .col.col-nickname {
    width: 200px;
}
#container.lottery-page .lottery-sale-list .article-table .table-row .col.col-status {
    width: 200px;
}
#container.lottery-page .lottery-sale-list .article-table .table-row .col.col-status .sell-status {
    display: inline-block;
    padding-left: 26px;
    background-repeat: no-repeat;
    background-position: left top;
}
#container.lottery-page .lottery-sale-list .article-table .table-row .col.col-status .sell-status.buy {
    background-image: url(../../img/icon-face-buy.png);
}
#container.lottery-page .lottery-sale-list .article-table .table-row .col.col-status .sell-status.sold-out {
    background-image: url(../../img/icon-face-sold-out.png);
}

#container.lottery-page .lottery-sale-list .article-table .table-row .col.col-status .sell-status .status-text {
    position: relative;
    display: inline-block;
    width: 56px;
    padding: 5px 0 10px;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
}
#container.lottery-page .lottery-sale-list .article-table .table-row .col.col-status .sell-status .status-text::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-block;
    width: 0;
    height: 0;
    border-bottom: 5px solid #ffffff;
    border-right: 56px solid transparent;
}
#container.lottery-page .lottery-sale-list .article-table .table-row .col.col-status .sell-status.buy .status-text {
    background-color: #117052;
}
#container.lottery-page .lottery-sale-list .article-table .table-row .col.col-status .sell-status.sold-out .status-text {
    background-color: #c42727;
}

/* 복권판매 */
#container.lottery-page .lottery-list-wrap .lottery-list-head .lottery-type {
    border: 1px solid #acc4ae;
    width: 112px;
    height: 32px;    
}
#container.lottery-page .lottery-list-wrap .lottery-list-head .checkbox-wrap {
    display: flex;
    align-items: center;
    column-gap: 6px;
    font-size: 1.4rem;
    font-weight: 400;
}
#container.lottery-page .lottery-list-wrap .lottery-list-head .sell-lottery-btn {
    margin-left: auto;
    background-color: #eecc1a;
    color: #000000;
}
#container.lottery-page .lottery-list-wrap .lottery-list-body .lottery-list-item .sell-checkbox {
    position: absolute;
    right: 12px;
    top: 13px;
}

/* 이벤트 목록 */
#container.event-page .article-list .table-row .col.col-progress .progress-text {
    position: relative;
    display: inline-block;
    padding-left: 20px;
    line-height: 17px;
}
#container.event-page .article-list .table-row .col.col-progress .progress-text::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 17px;
    height: 17px;
    background-repeat: no-repeat;
    background-position: left center;
}
#container.event-page .article-list .table-row .col.col-progress .progress-text.in-progress::before {
    background-image: url(../../img/icon-event-in-progress.png);
}
#container.event-page .article-list .table-row .col.col-progress .progress-text.announcing::before {
    background-image: url(../../img/icon-event-announcing.png);
}
#container.event-page .article-list .table-row .col.col-progress .progress-text.announced::before {
    background-image: url(../../img/icon-event-announced.png);
}

#container.event-page .article-gallery {
    display: grid;
    grid-template-columns: repeat(4, 210px);
    justify-content: space-between;
    row-gap: 56px;
}
#container.event-page .article-gallery .gallery-item .thumbnail {
    display: block;
    border-top: 2px solid #117052;
    border-right: 2px solid #117052;
    border-left: 2px solid #117052;
    width: 206px;
    height: 158px;
}
#container.event-page .article-gallery .gallery-item .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#container.event-page .article-gallery .gallery-item .title-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 2px solid #117052;
    border-left: 2px solid #117052;
    padding: 14px 12px 13px;
    height: 153px;
}
#container.event-page .article-gallery .gallery-item .title-wrap .title {
    color: #0E674B;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 140%;
}
#container.event-page .article-gallery .gallery-item .title-wrap .participants {
    margin-top: 11px;
    color: #333;
    font-size: 1.4rem;
    font-weight: 600;
}
#container.event-page .article-gallery .gallery-item .title-wrap .participants strong {
    color: #DD620E;
    font-weight: 600;
}
#container.event-page .article-gallery .gallery-item .deadline-wrap {
    background-color: #117052;
    padding: 11px 0 13px;
    height: 60px;
}
#container.event-page .article-gallery .gallery-item .deadline-wrap .deadline-title {
    color: #EECC1A;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 17px;
}
#container.event-page .article-gallery .gallery-item .deadline-wrap .deadline-date {
    margin-top: 1px;
    color: #FFF;
    text-align: center;
    font-size: 1.5rem;
    line-height: 18px;
    font-weight: 700;
}
#container.event-page .article-gallery .gallery-item .deadline-wrap .deadline-date span {
    font-weight: 400;
}
#container.event-page .article-gallery .gallery-item .status-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 16px;
    padding-top: 18px;
    padding-bottom: 32px;
    height: 69px;
}
#container.event-page .article-gallery .gallery-item .status-wrap.in-progress {
    background-color: #93D6D8;
}
#container.event-page .article-gallery .gallery-item .status-wrap.announcing {
    background-color: #EECC1A;
}
#container.event-page .article-gallery .gallery-item .status-wrap.announced {
    background-color: #117052;
    padding-top: 7px;
}
#container.event-page .article-gallery .gallery-item .status-wrap::before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    display: block;
    border-top: 28px solid transparent;
    border-left: 105px solid #f3f3f3;
    width: 0;
    height: 0;
}
#container.event-page .article-gallery .gallery-item .status-wrap::after {
    position: absolute;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    border-top: 28px solid transparent;
    border-right: 105px solid #f3f3f3;
    width: 0;
    height: 0;
}
#container.event-page .article-gallery .gallery-item .status-wrap .progress-text {
    position: relative;
    display: block;
    padding-left: 22px;
    color: #000000;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 18px;
}
#container.event-page .article-gallery .gallery-item .status-wrap .progress-text::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: left center;
}
#container.event-page .article-gallery .gallery-item .status-wrap.in-progress .progress-text::before {
    background-image: url(../../img/icon-event-in-progress.svg);
}
#container.event-page .article-gallery .gallery-item .status-wrap.announcing .progress-text::before {
    background-image: url(../../img/icon-event-announcing.svg);
}
#container.event-page .article-gallery .gallery-item .status-wrap.announced .winners {
    display: flex;
}
#container.event-page .article-gallery .gallery-item .status-wrap.announced .winners > li {
    position: relative;
    overflow: hidden;
    margin-right: -5px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
}
#container.event-page .article-gallery .gallery-item .status-wrap.announced .winners > li:nth-child(1) {
    z-index: 4;
}
#container.event-page .article-gallery .gallery-item .status-wrap.announced .winners > li:nth-child(2) {
    z-index: 3;
}
#container.event-page .article-gallery .gallery-item .status-wrap.announced .winners > li:nth-child(3) {
    z-index: 2;
}
#container.event-page .article-gallery .gallery-item .status-wrap.announced .winners > li:nth-child(4) {
    z-index: 1;
    background-color: #d9d9d9;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 28px;
}
#container.event-page .article-gallery .gallery-item .status-wrap.announced .winners > li > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#container.event-page .article-gallery .gallery-item .status-wrap.announced button.open-winner-list {
    display: inline-block;
    padding: 5px 10px 3px;
    background-color: #eecc1a;
    border-radius: 21px;
    color: #000000;
    font-size: 1.3rem;
    font-weight: 500;
}

#container.event-page .winner-list-win {
    padding: 40px 50px;
    width: 440px;
    height: 619px;
}
#container.event-page .winner-list-win .search-by-nickname {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background-color: #117052;
    width: 100%;
    height: 52px;
}
#container.event-page .winner-list-win .search-by-nickname label {
    margin-right: 13px;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 400;
}
#container.event-page .winner-list-win .search-by-nickname input {
    margin-right: 4px;
    border: 1px solid #ffffff;
    padding: 0 10px;
    background-color: #ffffff;
    width: 154px;
    height: 30px;
    color: #000000;
    font-size: 1.4rem;
    font-weight: 400;
}
#container.event-page .winner-list-win .search-by-nickname button {
    background-color: #eecc1a;
    background-image: url(../../img/icon-search-btn.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    width: 32px;
    height: 32px;
    font-size: 0;
}

#container.event-page .winner-list-win .winner-list-wrap {
    margin-top: 30px;
    height: 390px;
}
#container.event-page .winner-list-win .winner-list-wrap .winner-list-count {
    font-size: 1.4rem;
    font-weight: 500;
}
#container.event-page .winner-list-win .winner-list-wrap .winner-list-count span {
    color: #117052;
}
#container.event-page .winner-list-win .winner-list-wrap .winner-list {
    overflow-y: auto;
    margin-top: 10px;
    height: 370px;
}
#container.event-page .winner-list-win .winner-list-wrap .winner-list li {
    padding: 0 10px;
    border-top: 1px solid #dbdbdb;
}
#container.event-page .winner-list-win .winner-list-wrap .winner-list li:last-child {
    border-bottom: 1px solid #dbdbdb;
}
#container.event-page .winner-list-win .winner-list-wrap .winner-list li .author {
    display: flex;
    align-items: center;
    column-gap: 6px;
    height: 45px;
}
#container.event-page .winner-list-win .winner-list-wrap .winner-list li span {
    font-size: 1.6rem;
    font-weight: 500;
}


/* 이벤트 상세 */
#container.event-page .board-view-head .title-wrap {
    border-bottom: 2px solid #117052;
    padding-bottom: 24px;
    font-size: 3rem;
    font-weight: 500;
}
#container.event-page .board-view-head .article-info-wrap {
    display: flex;
    column-gap: 10px;
    padding: 22px 0;
    border-bottom: 1px solid #333333;
    font-size: 1.4rem;
    font-weight: 400;
}
#container.event-page .board-view-head .article-info-wrap .count {
    display: inline-block;
    margin-left: 3px;
    color: #117052;
    font-weight: 500;
}
#container.event-page .board-view-head .article-info-wrap .article-info {
    display: flex;
    margin-left: auto;
    column-gap: 13px;
    font-size: 1.4rem;
    font-weight: 400;
}
#container.event-page .board-view-head .article-info-wrap .article-info > span + span::before {
    content: '';
    display: inline-block;
    background-color: #cbcbcb;
    margin-right: 13px;
    width: 1px;
    height: 10px;
}
#container.event-page .board-view-content {
    padding: 40px 0 60px;
    font-size: 1.7rem;
    font-weight: 300;
}
#container.event-page .board-view-content p {
    margin-bottom: 20px;
    text-align: center;
}
#container.event-page .board-view-content p img {
    display: inline;
    max-width: 100%;
}
#container.event-page .board-view-content .event-form-box {
    position: relative;
    margin-top: 65px;
    padding: 50px 0 30px;
    border-radius: 7px;
    background-color: #117052;
    background-image: url(../../img/event-view-form-bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
}
#container.event-page .board-view-content .event-form-box .deadline-wrap .deadline-title {
    position: absolute;
    left: 50%;
    top: -25px;
    background-color: #eecc1a;
    width: 193px;
    height: 45px;
    font-size: 2.4rem;
    font-weight: 600;
    transform: translateX(-50%) rotate(5.52deg);
    text-align: center;
    line-height: 45px;
}
#container.event-page .board-view-content .event-form-box .deadline-wrap .deadline-date {
    font-size: 2.8rem;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
}
#container.event-page .board-view-content .event-form-box .event-join-box {
    margin: 40px auto 0;
    border-radius: 7px;
    background-color: #eecc1a;
}
#container.event-page .board-view-content .event-form-box .event-join-box .event-form-btn {
    display: inline-block;
    border-radius: 3px;
    background-color: #117052;
    margin-left: 3px;
    width: 114px;
    height: 40px;
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 600;
}

#container.event-page .board-view-content .event-form-box .event-join-box .event-end {
    margin-bottom: 0;
    font-size: 1.8rem;
    font-weight: 500;
    text-align: center;
}

#container.event-page .board-view-content .event-form-box.form-type01 .event-join-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    width: 356px;
    height: 64px;
}
#container.event-page .board-view-content .event-form-box.form-type01 .event-join-box .event-form-input {
    box-sizing: border-box;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #daba15;
    background-color: #ffffff;
    padding: 12px 13px 10px;
    width: 210px;
    height: 40px;
    font-size: 1.4rem;
    font-weight: 300;
}
#container.event-page .board-view-content .event-form-box.form-type01 .event-join-box .event-form-input:focus {
    outline: none;
}

#container.event-page .board-view-content .event-form-box.form-type02 .event-join-box {
    padding: 29px 0 21px;
    width: 816px;
    text-align: center;
}

#container.event-page .board-view-content .event-form-box.form-type02 .event-join-box .game-wrap + .game-wrap {
    margin-top: 40px;
}
#container.event-page .board-view-content .event-form-box.form-type02 .event-join-box .game-wrap .game-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #117052;
    text-align: center;
}
#container.event-page .board-view-content .event-form-box.form-type02 .event-join-box .game-wrap .game-result {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 10px;
}
#container.event-page .board-view-content .event-form-box.form-type02 .event-join-box .game-wrap .game-result .checkbox-wrap label {
    font-size: 2rem;
    font-weight: 500;
}
#container.event-page .board-view-content .event-form-box.form-type02 .event-join-box .event-form-btn {
    margin-top: 28px;
}

#container.event-page .board-view-content .event-form-box .guide-text {
    margin-top: 24px;
    margin-bottom: 0;
    font-size: 1.7rem;
    font-weight: 300;
    line-height: 140%;
    text-align: center;
    color: #ffffff;
}
#container.event-page .board-view-comment-wrap .comment-head {
    display: flex;
    align-items: center;
    column-gap: 5px;
}
#container.event-page .board-view-comment-wrap .comment-head .participants-count {
    font-size: 1.5rem;
    font-weight: 400;
    color: #333333;
}
#container.event-page .board-view-comment-wrap .comment-head .participants-count span {
    font-weight: 500;
    color: #117052;
}
#container.event-page .board-view-comment-wrap .comment-list {
    margin-top: 18px;
    border-top: 2px solid #117052;
}
#container.event-page .board-view-comment-wrap .comment-list ul {
    display: flex;
    flex-direction: column;
}
#container.event-page .board-view-comment-wrap .comment-list ul li {
    display: flex;
    column-gap: 18px;
    align-items: flex-start;
    padding: 20px 0 20px 10px;
    border-bottom: 1px solid #bfbfbf;
}
#container.event-page .board-view-comment-wrap .comment-list ul li.own-comment {
    background-color: #e8e8e8;
}
#container.event-page .board-view-comment-wrap .comment-list ul li .profile-img {
    overflow: hidden;
    border-radius: 50%;
    width: 55px;
    height: 55px;
}
#container.event-page .board-view-comment-wrap .comment-list ul li .profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#container.event-page .board-view-comment-wrap .comment-list ul li .comment-content {
    width: 750px;
}
#container.event-page .board-view-comment-wrap .comment-list ul li .comment-content .comment-content-head {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 13px;
}
#container.event-page .board-view-comment-wrap .comment-list ul li .comment-content .comment-content-head .user-info {
    display: flex;
    align-items: center;
    column-gap: 5px;
}
#container.event-page .board-view-comment-wrap .comment-list ul li .comment-content .comment-content-head .user-info .author {
    display: flex;
    align-items: center;
    column-gap: 6px;
}
#container.event-page .board-view-comment-wrap .comment-list ul li .comment-content .comment-content-head .user-info .author span {
    font-size: 1.4rem;
    font-weight: 500;
}
#container.event-page .board-view-comment-wrap .comment-list ul li .comment-content .comment-content-head .write-datetime {
    color: #8a8a8a;
    font-size: 1.4rem;
    font-weight: 300;
}
#container.event-page .board-view-comment-wrap .comment-list ul li .comment-content .comment-content-head .reply-btn {
    color: #8a8a8a;
    font-size: 1.4rem;
    font-weight: 400;
}
#container.event-page .board-view-comment-wrap .comment-list ul li .comment-content .comment-content-head .write-datetime::before,
#container.event-page .board-view-comment-wrap .comment-list ul li .comment-content .comment-content-head .reply-btn::before {
    content: '';
    display: inline-block;
    background-color: #cbcbcb;
    width: 1px;
    height: 10px;
    margin-right: 10px;
}
#container.event-page .board-view-comment-wrap .comment-list ul li .comment-content .comment-content-body {
    font-size: 1.4rem;
    font-weight: 300;
}
#container.event-page .board-view-comment-wrap .comment-list ul li .report-comment-btn {
    background-color: #E3E3E3;
    background-image: url(../../img/icon-report.png);
    background-repeat: no-repeat;
    background-position: left 11px center;
    background-size: 24px;
    border-radius: 5px;
    padding: 9px 11px 7px 40px;
}
#container.event-page .board-view-comment-wrap .comment-list ul li .event-result {
    width: 100px;
    height: 50px;
    line-height: 50px;
}
#container.event-page .board-view-comment-wrap .comment-list ul li .event-result span {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: left center;
    line-height: 17px;
}
#container.event-page .board-view-comment-wrap .comment-list ul li .event-result.win span {
    background-image: url(../../img/icon-event-announced.png);
    padding-left: 20px;
}
#container.event-page .board-view-comment-wrap .comment-list ul li .event-result.loose span {
    background-image: url(../../img/icon-event-lose.png);
    padding-left: 20px;
}

/* 팔로우 랭킹 */
#container.ranking .ranking-page-tab {
    margin-top: 45px;
    margin-bottom: 28px;
}
#container.ranking .ranking-page-tab ul {
    display: flex;
    align-items: center;
    column-gap: 30px;
}
#container.ranking .ranking-page-tab ul > li {
    color: #8E8E8E;
    font-size: 20px;
    font-weight: 600;
}
#container.ranking .ranking-page-tab ul > li.active {
    color: #19473E;
}

#container.ranking .active-filter {
    margin-bottom: 20px;
    border-top: 1px solid #afc5b6;
    border-bottom: 1px solid #afc5b6;
    width: 100%;
}
#container.ranking .active-filter ul {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin-top: -1px;
    margin-bottom: -1px;
}
#container.ranking .active-filter ul li {
    padding: 11px 6px;
}
#container.ranking .active-filter ul li.active {
    border-top: 2px solid #0e674b;
    border-bottom: 2px solid #0e674b;
}
#container.ranking .active-filter ul li a {
    color: #738480;
}
#container.ranking .active-filter ul li.active a {
    color: #0e674b;
    font-weight: 600;
}
#container.ranking .period-filter ul {
    display: flex;
    align-items: center;
    column-gap: 5px;
}
#container.ranking .period-filter ul li a {
    display: inline-block;
    padding: 9px 18px 8px;
    border-radius: 25px;
    border: 2px solid #d0d0d0;
    background-color: #ffffff;
    font-size: 1.5rem;
    font-weight: 400;
}
#container.ranking .period-filter ul li.active a {
    border-color: #117052;
    background-color: #117052;
    color: #ffffff;
}
#container.ranking.exp-ranking .trophy-box {
    margin: 60px auto 0;
    width: 851px;
    height: 417px;
}
#container.ranking.exp-ranking .trophy-box ol {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../../img/ranking-trophy-bg.png);
    background-repeat: no-repeat;
    background-position: center;
}
#container.ranking.exp-ranking .trophy-box ol li {
    position: absolute;
    width: 85px;
    text-align: center;
}
#container.ranking.exp-ranking .trophy-box ol li:nth-child(1) {
    top: 43px;
    left: 398px;
}
#container.ranking.exp-ranking .trophy-box ol li:nth-child(2) {
    top: 105px;
    left: 189px;
}
#container.ranking.exp-ranking .trophy-box ol li:nth-child(3) {
    top: 143px;
    left: 612px;
}
#container.ranking.exp-ranking .trophy-box ol li .nickname {
    font-size: 1.7rem;
    font-weight: 600;
}
#container.ranking.exp-ranking .trophy-box ol li .follow-count {
    margin-top: 27px;
    font-size: 1.5rem;
    font-weight: 400;
}
#container.ranking.exp-ranking .trophy-box ol li .follow-count span {
    display: block;
    margin-top: 3px;
    font-weight: 600;
    color: #117052;
}

#container.ranking.follow-ranking .follow-ranking-list-box {
    position: relative;
    margin-top: 60px;
    padding: 25px;
    border-radius: 15px;
    border: 3px solid #000;
    background: linear-gradient(240deg, #187D5D 9.88%, #2EA781 90.44%);
    width: 100%;
}
#container.ranking.follow-ranking .follow-ranking-list-box::before {
    content: '';
    position: absolute;
    top: -31px;
    right: 50px;
    width: 74px;
    height: 73px;
    background-image: url(../../img/follow-ranking-bg-char.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}   
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box {
    position: relative;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    border-radius: 10px;
    border: 3px solid #22093A;
    background: #FFF;
    width: 100%;
    height: 100%;
}
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box .cross-icon {
    position: absolute;
    width: 29px;
    height: 29px;
    background-image: url(../../img/follow-ranking-cross-icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box .cross-icon:nth-child(1) {
    top: 30px;
    left: 77px;
}
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box .cross-icon:nth-child(2) {
    top: 145px;
    right: 58px;
}
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box .cross-icon:nth-child(3) {
    bottom: 98px;
    left: 15px;
}
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box .cross-icon:nth-child(4) {
    bottom: 27px;
    right: 16px;
}
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box .follow-ranking-title {
    margin-top: 20px;
}
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box .follow-ranking-list {
    display: grid;
    grid-template-columns: repeat(5, 105px);
    justify-content: space-between;
    row-gap: 40px;
    width: 100%;
    padding: 0 65px 56px;
}
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box .follow-ranking-list  > li {
    position: relative;
}
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box .follow-ranking-list  > li:first-child::before,
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box .follow-ranking-list  > li:first-child::after {
    content: '';
    position: absolute;
    top: 10px;
    z-index: -1;
    width: 86px;
    height: 86px;
    background-image: url(../../img/follow-ranking-crown.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box .follow-ranking-list  > li:first-child::before {
    left: -16px;
}
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box .follow-ranking-list  > li:first-child::after {
    right: -16px;
}
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box .follow-ranking-list  > li .rank {
    position: absolute;
    top: 2px;
    left: -3px;
    display: block;
    border-radius: 50%;
    background-color: #EECC1A;
    width: 32px;
    height: 32px;
    line-height: 32px;
    color: #333;
    text-align: center;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.36px;
}
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box .follow-ranking-list  > li .profile-img {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: 2px solid #22093A;
    overflow: hidden;
    background-color: #ffffff;
}
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box .follow-ranking-list  > li .nickname {
    margin-top: 10px;
    color: #333;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box .follow-ranking-list  > li .follow-count {
    margin-top: 8px;
    color: #616161;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box .follow-ranking-list  > li .follow-count span {
    display: block;
    margin-top: 3px;
    font-weight: 700;
    color: #157758;
}
#container.ranking.follow-ranking .follow-ranking-list-box .follow-ranking-inner-box .follow-ranking-list  > li .profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#container.ranking.follow-ranking .follow-ranking-list-box-renew {
    margin-top: 56px;
    padding: 0 0 103px;
    min-height: 1550px;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .list-box-title-wrap { 
    width: 100%;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .list-box-title-wrap > img {
    width: 703px;
    margin: 0 auto;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0 111px;
    list-style: none;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li {
    display: flex;
    align-items: center;
    border-radius: 10px;
    border: 1px solid #FFD600;
    background: #1D5E49;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    padding: 8px 37px 7px;
    width: 100%;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li .profile-img {
    border-radius: 50%;
    width: 55px;
    height: 55px;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li .profile-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li .info-wrap {
    display: flex;
    flex-wrap: wrap;
    row-gap: 12px;
    align-items: center;
    width: calc(100% - 55px);
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li .rank {
    display: block;
    border-radius: 25px;
    background: #FFE24D;
    margin-left: 19px;
    padding: 2px 11px;
    height: fit-content;
    color: #CB3F3F;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.18px;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li .author-wrap {
    margin-left: 20px;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li .author-wrap .author {
    display: flex;
    align-items: center;
    column-gap: 7px;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li .author-wrap .author > img {
    width: 20px;
    height: 20px;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li .author-wrap .author > span {
    color: #FFF;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.36px;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li .follow-count {
    display: flex;
    align-items: center;
    margin-left: auto;
    color: #6CD3B2;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.32px;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li .follow-count span {
    display: block;
    margin-left: 5px;
    color: #ffffff;
    font-weight: 700;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(1),
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(2),
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(3) {
    position: relative;
    flex-wrap: wrap;
    border-radius: 10px;
    border: 4px solid #1D5E49;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    padding-top: 18px;
    padding-bottom: 16px;
    padding-left: 250px; 
    margin-bottom: 80px;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(1)::after,
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(2)::after,
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(3)::after {
    content: '';
    display: block;
    position: absolute;
    background-repeat: no-repeat;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(1)::after {
    background-image: url(../../img/follow-ranking-trophy-1st.png);
    top: -56px;
    left: 30px;
    width: 210px;
    height: 216px;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(2)::after {
    background-image: url(../../img/follow-ranking-trophy-2nd.png);
    top: -44px;
    left: 45px;
    width: 169px;
    height: 213px;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(3)::after {
    background-image: url(../../img/follow-ranking-trophy-3rd.png);
    top: -41px;
    left: 45px;
    width: 169px;
    height: 210px;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(1) {
    margin-top: 50px;
}

#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(1) .profile-img,
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(2) .profile-img,
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(3) .profile-img {
    border: 1px solid #cccccc;
    width: 76px;
    height: 76px;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(1) .info-wrap,
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(2) .info-wrap,
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(3) .info-wrap {
    width: calc(100% - 76px);
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(1) .rank,
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(2) .rank,
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(3) .rank {
    background-repeat: no-repeat;
    background-position: center;
    width: 70px;
    height: 27px;
    font-size: 0;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(1) .rank {
    background-image: url(../../img/follow-ranking-badge-1st.png);
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(2) .rank {
    background-image: url(../../img/follow-ranking-badge-2nd.png);
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(3) .rank {
    background-image: url(../../img/follow-ranking-badge-3rd.png);
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(1) .author > img,
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(2) .author > img,
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(3) .author > img {
    width: 28px;
    height: 28px;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(1) .author > span,
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(2) .author > span,
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(3) .author > span {
    color: #333;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.52px;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(1) .follow-count,
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(2) .follow-count,
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(3) .follow-count {
    margin-left: 25px;
    width: 100%;
    color: #333333;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.36px;
}
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(1) .follow-count span,
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(2) .follow-count span,
#container.ranking.follow-ranking .follow-ranking-list-box-renew .follow-ranking-list > li:nth-child(3) .follow-count span {
    display: block;
    color: #068C61;
    font-weight: 700;
}

#container.ranking.like-ranking .like-ranking-list-box {
    margin-top: 40px;
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-title > img {
    margin: 0 auto;
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list {
    position: relative;
    margin-top: 23px;
    background-image: url(../../img/like-ranking-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 100%;
    height: 470px;

}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 76px;
    width: 160px;
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li:nth-child(1) {
    top: 33px;
    left: 50%;
    transform: translateX(-50%);
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li:nth-child(2) {
    top: 79px;
    left: 30%;
    transform: translateX(-50%);
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li:nth-child(3) {
    top: 79px;
    right: 30%;
    transform: translateX(50%);
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li:nth-child(4) {
    top: 129px;
    left: 10%;
    transform: translateX(-50%);
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li:nth-child(5) {
    top: 129px;
    right: 10%;
    transform: translateX(50%);
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li .rank {
    position: absolute;
    top: 0;
    color: #000;
    font-size: 102px;
    font-weight: 800;
    letter-spacing: -5.1px;
    line-height: 80px;
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li .rank-card {
    border-radius: 6px;
    border: 3px solid #22093A;
    background-color: #ffffff;
    background-image: url(../../img/like-ranking-card-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 84%;
    padding: 30px 25px 0;
    width: 100%;
    height: 230px;
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li:nth-child(1) .rank {
    left: 45%;
    transform: translateX(-50%);
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li .rank-card .profile-img {
    margin: 0 auto;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li .rank-card .profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li .rank-card .nickname {
    margin-top: 14px;
    color: #333;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    max-height: 39px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li .rank-card .follow-count {
    margin-top: 8px;
    color: #333;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li .rank-card .follow-count span {
    display: block;
    margin-top: 5px;
    font-weight: 700;
    color: #117052;
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li:nth-child(1)::before {
    content: '';
    position: absolute;
    top: -43px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    width: 191.056px;
    height: 191.056px;
    background-image: url(../../img/like-ranking-crown.png);
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li:nth-child(1) .rank-card {
    background-color: #117052;
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li:nth-child(1) .rank-card .nickname {
    color: #ffffff;
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li:nth-child(1) .rank-card .follow-count {
    color: #ffffff;
}
#container.ranking.like-ranking .like-ranking-list-box .like-ranking-list > li:nth-child(1) .rank-card .follow-count span {
    color: #EECC1A;
}


#container.ranking.active-ranking .active-ranking-list-box {
    margin-top: 40px;
    position: relative;
}
#container.ranking.active-ranking .active-ranking-list-box::after {
    content: '';
    position: absolute;
    bottom: 87px;
    right: -20.5px;
    z-index: 2;
    width: 85.5px;
    height: 64px;
    background-image: url(../../img/active-ranking-bg-char.png);
    background-repeat: no-repeat;
    background-position: center;
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-title > img {
    margin: 0 auto;
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-list {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background-image: url(../../img/active-ranknig-bottom-bg.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    width: 100%;
    margin-top: 20px;
    padding: 0 70px 28px;
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-list > li {
    position: relative;
    z-index: 2;
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-list > li::before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 42px;
    height: 40px;
    background-image: url(../../img/active-ranking-crown.svg);
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-list > li:nth-child(1)::before {
    width: 67px;
    height: 67px;
    background-image: url(../../img/active-ranking-crown-1st.svg);
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-list > li .bar-box {
    position: relative;
    background: linear-gradient(180deg, #34C295 11.32%, #157758 100%);
    border-radius: 4px;
    margin-top: 90px;
    padding-top: 48px;
    width: 96px;
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-list > li:nth-child(1) .bar-box {
    height: 313px;
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-list > li:nth-child(2) .bar-box {
    height: 293px;
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-list > li:nth-child(3) .bar-box {
    height: 273px;
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-list > li:nth-child(4) .bar-box {
    height: 253px;
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-list > li:nth-child(5) .bar-box {
    height: 233px;
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-list > li .bar-box::after {
    content: '';
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    width: 247px;
    height: 113px;
    background-image: url(../../img/active-ranking-bar-shadow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-list > li .bar-box .profile-img {
    position: absolute;
    top: -81px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 3px solid #22093A;
    width: 120px;
    height: 120px;
    overflow: hidden;
    background-color: #ffffff;
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-list > li .bar-box .profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-list > li .bar-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 17px;
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-list > li .bar-box .rank {
    color: #FFF;
    text-align: center;
    font-size: 51px;
    font-weight: 900;
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-list > li .bar-box .follow-count {
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-list > li .bar-box .follow-count span {
    display: block;
    margin-top: 5px;
    color: #F8E061;
    font-weight: 700;
}
#container.ranking.active-ranking .active-ranking-list-box .active-ranking-list > li .nickname {
    max-width: 96px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #333;
    margin-top: 11px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}


#container.ranking .ranking-list {
    margin-top: 45px;
}
#container.ranking .ranking-list .ranking-list-head {
    text-align: right;
}
#container.ranking .ranking-list .ranking-list-head .last-update-time {
    display: inline-block;
    margin-bottom: 10px;
    padding-left: 25px;
    background-image: url(../../img/icon-clock.png);
    background-repeat: no-repeat;
    background-position: left center;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 20px;
}
#container.ranking .ranking-list .table-row .col.col-rank {
    position: relative;
    width: 150px;
}
#container.ranking .ranking-list .table-row .col.col-rank .own-rank {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    border-radius: 21px;
    background-color: #117052;
    padding: 5px 8px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #ffffff;
}


#container.ranking .ranking-list .table-row .col.col-author {
    width: 150px;
}
#container.ranking .ranking-list .award-speech-btn {
    display: inline-block;
    border-radius: 5px;
    background-color: #484848;
    padding: 7px 15px;
    color: #ffffff;
}
#container.ranking .ranking-list .table-row .col.col-follow-count {
    width: 140px;
    font-weight: 600;
}
#container.ranking .ranking-list .table-row .col.col-follow-count .up-down {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    padding-left: 14px;
    font-weight: 400;
}
#container.ranking .ranking-list .table-row .col.col-follow-count .up-down::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: inline-block;
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    background-position: left center;
}
#container.ranking .ranking-list .table-row .col.col-follow-count .up-down.up {
    color: #c75252;
}
#container.ranking .ranking-list .table-row .col.col-follow-count .up-down.down {
    color: #5252c7;
}
#container.ranking .ranking-list .table-row .col.col-follow-count .up-down.up::before {
    background-image: url(../../img/icon-up.png);
}
#container.ranking .ranking-list .table-row .col.col-follow-count .up-down.down::before {
    background-image: url(../../img/icon-down.png);
}

#container.ranking .popup-layer.popup-award-speech {
    padding: 38px 30px 24px;
    width: 503px;
    height: 245px;
}
#container.ranking .popup-layer.popup-award-speech .popup-head h3 {
    margin-bottom: 10px;;
    font-size: 3.1rem;
    font-weight: 500;
}
#container.ranking .popup-layer.popup-award-speech .popup-head p {
    font-size: 1.4rem;
    font-weight: 400;
    text-align: center;
}
#container.ranking .popup-layer.popup-award-speech .popup-content .input-wrap .award-speech-input {
    margin-top: 22px;
    border: 1px solid #bfbfbf;
    width: 445px;
    height: 32px;
}
#container.ranking .popup-layer.popup-award-speech .popup-content .input-wrap .text-limit {
    display: block;
    margin-top: 8px;
    font-size: 1.4rem;
    font-weight: 500;
    text-align: right;
}
#container.ranking .popup-layer.popup-award-speech .popup-content .input-wrap .text-limit .current-count {
    color: #117052;
}
#container.ranking .popup-layer.popup-award-speech .popup-content .button-box {
    margin-top: 8px;
    text-align: center;
}
#container.ranking .popup-layer.popup-award-speech .popup-content .button-box .award-speech-btn {
    display: inline-block;
    border-radius: 5px;
    background-color: #484848;
    padding: 8px 10px;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 500;
}

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    /* width: 260px; */
    z-index: 100;
    display: flex;
    flex-direction: column-reverse;
    gap: 6px;
}
.toast-container .toast-message {
    position: relative;
    width: 300px;
    min-height: 40px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.6);
    background-image: url(../../img/toast-logo.png);
    background-repeat: no-repeat;
    background-position: 13px 8px;
    background-size: 24px;
    padding: 13px 27px 13px 47px;
    transform: translateX(100%) scale(0.9);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* overflow: hidden; */
    max-height: 200px;
}
.toast-container .toast-message.show {
    transform: translateX(0) scale(1);
    opacity: 1;
}
.toast-container .toast-message.hide {
    transform: translateX(100%) scale(0.95);
    opacity: 0;
    max-height: 0;
    min-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.toast-container .toast-message .close-btn {
    position: absolute;
    top: -7px;
    left: -6px;
    width: 18px;
    height: 18px;
    background-image: url(../../img/icon-close-toast.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: opacity 0.2s ease;
    cursor: pointer;
}
.toast-container .toast-message .close-btn:hover {
    opacity: 0.7;
}
.toast-container .toast-message p {
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
}


.about-service {
    margin-top: 150px;
    padding-left: 35px;
    padding-right: 35px;
}
.about-service .as-sec-container {
    margin: 0 auto;
    width: 931px;
    margin-bottom: 88px;
    padding-bottom: 88px;
    background-image: url(../../img/as-s-seperator.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 2px;
}
.about-service .as-sec-container h1 {
    text-align: center;
    color: #333;
    font-size: 26px;
    font-weight: 300;
    line-height: 119.473%;
}
.about-service .as-sec-container h1 > span {
    position: relative;
    display: inline-block;
    margin-top: 17px;
    font-size: 53px;
    font-weight: 700;
    line-height: 119.473%;
    color: #138360;
}
.about-service .as-sec-container h1 > span::after {
    content: '';
    position: absolute;
    left: -5px;
    bottom: -2px;
    z-index: -1;
    display: block;
    background: #EECC1A;
    width: calc(100% + 10px);
    height: 20.621px;
}
.about-service .as-sec-container h1 > span > span {
    color: #333333;
}

.about-service .as-sec-container .sub-section {
    background-image: url(../../img/as-s-seperator-02.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 928px 1px;
    padding-bottom: 91px;
    margin-bottom: 72px;
}
.about-service .as-sec-container .sub-section:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    background-image: none;
}
.about-service .as-sec-container .sub-section h3 {
    background-repeat: no-repeat;
    background-position: center top;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 119.473%;
    letter-spacing: -0.64px;
}
.about-service .as-sec-container .sub-section > p {
    color: #333;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.36px;
}
.about-service .as-sec-container .sub-section.sub-qna h3 {
    padding-top: 78px;
    background-image: url(../../img/as-title-qna.png);
    margin-bottom: 46px;
    color: #333;
}

.about-service .as-sec-container .sub-section > ul.how-to {
    display: flex;
    flex-wrap: wrap;
    row-gap: 45px;
    justify-content: space-between;
    gap: 30px;
    margin-top: 66px;
}
.about-service .as-sec-container .sub-section > ul.how-to > li {
    width: calc(50% - 19px);
}
.about-service .as-sec-container .sub-section > ul.how-to > li > h4 {
    margin-bottom: 9px;
    color: #138360;
    font-size: 18px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.36px;
}
.about-service .as-sec-container .sub-section > ul.how-to > li > p {
    color: #333;
    font-size: 15px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.3px;
}
.about-service .as-sec-container .sub-section > p.tail {
    margin-top: 66px;
    color: #333;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.36px;
}
.about-service .as-sec-container .sub-section > p.tail span {
    display: block;
    margin-bottom: 15px;
    font-size: 30px;
    letter-spacing: -0.6px;
}


.about-service .as-sec-container .sub-section.sub-qna .qna-list > li {
    margin-bottom: 30px;
}
.about-service .as-sec-container .sub-section.sub-qna .qna-list > li:last-child {
    margin-bottom: 0;
}
.about-service .as-sec-container .sub-section.sub-qna .qna-list > li > h4 {
    position: relative;
    padding: 7.5px 0 7.5px 52px;
    height: 40px;
    background-color: #ffffff;
    color: #138360;
    font-size: 18px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.36px;
}
.about-service .as-sec-container .sub-section.sub-qna .qna-list > li > h4 > span {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #138360;
    padding: 7.5px 0;
    width: 40px;
    height: 40px;
    color: #FFF;
    font-size: 18px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.36px;
    text-align: center;
}
.about-service .as-sec-container .sub-section.sub-qna .qna-list > li > p {
    padding: 16px 0 0 53px;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.3px;
}

.about-service .as-sec-container.section-01 img {
    display: block;
    margin: 0 auto;
    margin-top: 86px;
}
.about-service .as-sec-container.section-01 p {
    margin-top: 52px;
    color: #333;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 200%;
    letter-spacing: -0.36px;
}

.about-service .as-sec-container.section-02 .sub-section h2 {
    margin-bottom: 35px;
    color: #333333;
    font-size: 30px;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.6px;
}
.about-service .as-sec-container.section-02 .sub-section h2 strong {
    color: #138360;
    font-weight: 700;
}
.about-service .as-sec-container.section-02 .sub-section h2 span {
    display: block;
    margin-top: 9px;
    font-size: 40px;
    font-weight: 700;
    line-height: 119.473%;
    letter-spacing: -0.8px;
}

.about-service .as-sec-container.section-02 .sub-section.sub-01 .sub-section-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.about-service .as-sec-container.section-02 .sub-section.sub-01 .sub-section-content .img-box {
    width: 423px;
}
.about-service .as-sec-container.section-02 .sub-section.sub-01 .sub-section-content .img-box img {
    width: 100%;
}
.about-service .as-sec-container.section-02 .sub-section.sub-01 .sub-section-content .text-box p {
    margin-top: 34px;
    width: 465px;
    color: #333333;
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.36px;
}
.about-service .as-sec-container.section-02 .sub-section.sub-01 .sub-section-content .text-box {
    width: 465px;
}
.about-service .as-sec-container.section-02 .sub-section.sub-01 .sub-section-content .text-box p strong {
    color: #138360;
    font-weight: 700;
}
.about-service .as-sec-container.section-02 .sub-section.sub-01 .sub-section-content .text-box p strong.type-02 {
    color: #DE620E;
}


.about-service .as-sec-container.section-02 .sub-section.sub-02 h3 {
    padding-top: 97px;
    background-image: url(../../img/as-s02-02.png);
    color: #333333;
    margin-bottom: 11px;
}

.about-service .as-sec-container.section-03 .sub-section.sub-01 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 16px;
}
.about-service .as-sec-container.section-03 .sub-section.sub-01 h2 {
    margin-bottom: 35px;
    color: #333;
    font-size: 40px;
    font-weight: 700;
    line-height: 119.473%;
    letter-spacing: -0.8px;
}
.about-service .as-sec-container.section-03 .sub-section.sub-01 h2 > span {
    display: block;
    margin-bottom: 10px;
    color: #333;
    font-size: 30px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.6px;
}
.about-service .as-sec-container.section-03 .sub-section.sub-01 h2 > strong {
    color: #138360;
    font-weight: 700;
}
.about-service .as-sec-container.section-03 .sub-section.sub-01 .text-box {
    width: 458px;
}
.about-service .as-sec-container.section-03 .sub-section.sub-01 .text-box p {
    color: #333;
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.36px;
}
.about-service .as-sec-container.section-03 .sub-section.sub-01 .img-box {
    width: 424px;
}

.about-service .as-sec-container.section-03 .sub-section.sub-02 h3 {
    padding-top: 74px;
    background-image: url(../../img/as-s03-02.png);
    color: #000000;
}


.about-service .as-sec-container.section-03 .sub-section.sub-04 h3 {
    padding-top: 78px;
    background-image: url(../../img/as-s03-03.png);
    margin-bottom: 20px;
    color: #333;
}
.about-service .as-sec-container.section-03 .sub-section.sub-04 > ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 33px;
    row-gap: 36px;
    justify-content: space-between;
    gap: 30px;
    margin-top: 66px;
}
.about-service .as-sec-container.section-03 .sub-section.sub-04 > ul > li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border-radius: 50%;
    border: 1px solid #DDD;
    background: #ECECEC;
    width: calc((100% - 66px) / 3);
    aspect-ratio: 1 / 1;
}
.about-service .as-sec-container.section-03 .sub-section.sub-04 > ul > li > h4 {
    color: #333;
    text-align: center;
    font-size: 21px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.42px;
}
.about-service .as-sec-container.section-03 .sub-section.sub-04 > ul > li > h4 > span {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #138360;
    padding: 7.5px 0;
    width: 47.5px;
    height: 47.5px;
    color: #FFF;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.56px;
}
.about-service .as-sec-container.section-03 .sub-section.sub-04 > ul > li > p {
    width: 76.6%;
    color: #333;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.3px;
}
.about-service .as-sec-container.section-03 .sub-section.sub-04 p.tail > span {
    margin-top: 10px;
    margin-bottom: 0;
}

.about-service .as-sec-container.section-04 .sub-section.sub-01 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 28px;
}
.about-service .as-sec-container.section-04 .sub-section.sub-01 .img-box {
    width: 405px;
}
.about-service .as-sec-container.section-04 .sub-section.sub-01 .img-box img {
    width: 100%;
}
.about-service .as-sec-container.section-04 .sub-section.sub-01 .text-box {
    width: 463px;
}
.about-service .as-sec-container.section-04 .sub-section.sub-01 h2 {
    margin-bottom: 35px;
    color: #333;
    font-size: 30px;
    font-weight: 300;
    line-height: 140%;
    letter-spacing: -0.6px;
}
.about-service .as-sec-container.section-04 .sub-section.sub-01 h2 > strong {
    color: #138360;
    font-weight: 700;
}
.about-service .as-sec-container.section-04 .sub-section.sub-01 h2 > span {
    display: block;
    margin-top: 9px;
    color: #333;
    font-size: 40px;
    font-weight: 700;
    line-height: 119.473%;
    letter-spacing: -0.8px;
}
.about-service .as-sec-container.section-04 .sub-section.sub-01 .text-box p {
    color: #333;
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.36px;
    word-break: keep-all;
}
.about-service .as-sec-container.section-04 .sub-section.sub-01 .text-box p:last-child {
    margin-top: 15px;
}

.about-service .as-sec-container.section-04 .sub-section.sub-02 {
    padding-left: 33px;
}
.about-service .as-sec-container.section-04 .sub-section.sub-02 h3 {
    padding-top: 98px;
    background-image: url(../../img/as-s04-02.png);
    color: #000000;
}
.about-service .as-sec-container.section-04 .sub-section.sub-02 ul.how-to {
    flex-direction: column;
    gap: 27px;
    padding-left: 33px;
    background-image: url(../../img/as-howto-line.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
}
.about-service .as-sec-container.section-04 .sub-section.sub-02 ul.how-to > li {
    width: 100%;
}

.about-service .as-sec-container.section-04 .sub-section.sub-03 h3 {
    padding-top: 87px;
    background-image: url(../../img/as-s04-03.png);
    color: #333333;
    margin-bottom: 20px;
}
.about-service .as-sec-container.section-04 .sub-section.sub-03 ul.how-to {
    margin-top: 61px;
    width: 885px;
}
.about-service .as-sec-container.section-04 .sub-section.sub-03 ul.how-to > li {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 84px;
    padding-top: 110px;
    width: 235px;
    text-align: center;
}
.about-service .as-sec-container.section-04 .sub-section.sub-03 ul.how-to > li.item-01 {
    background-image: url(../../img/as-s04-03-01.png);
}
.about-service .as-sec-container.section-04 .sub-section.sub-03 ul.how-to > li.item-02 {
    background-image: url(../../img/as-s04-03-02.png);
}
.about-service .as-sec-container.section-04 .sub-section.sub-03 ul.how-to > li.item-03 {
    background-image: url(../../img/as-s04-03-03.png);
}

.about-service .as-sec-container.section-04 .sub-section.sub-04 h3 {
    padding-top: 98px;
    background-image: url(../../img/as-s04-04.png);
    color: #333333;
}


.about-service .as-sec-container.section-05 .sub-section.sub-01 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.about-service .as-sec-container.section-05 .sub-section.sub-01 .text-box {
    width: 458px;
}
.about-service .as-sec-container.section-05 .sub-section.sub-01 .text-box > p {
    margin-bottom: 16px;
    color: #333;
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.36px;
    word-break: keep-all;
}
.about-service .as-sec-container.section-05 .sub-section.sub-01 .img-box {
    width: 450px;
}
.about-service .as-sec-container.section-05 .sub-section.sub-01 .img-box > img {
    width: 100%;
}

.about-service .as-sec-container.section-05 .sub-section.sub-01 h2 {
    margin-bottom: 35px;
    color: #333;
    font-size: 40px;
    font-weight: 700;
    line-height: 119.473%;
    letter-spacing: -0.8px;
}
.about-service .as-sec-container.section-05 .sub-section.sub-01 h2 > span {
    display: block;
    margin-bottom: 10px;
    color: #333;
    font-size: 30px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.6px;
}
.about-service .as-sec-container.section-05 .sub-section.sub-01 h2 > strong {
    color: #138360;
    font-weight: 700;
}

.about-service .as-sec-container.section-05 .sub-section.sub-02 h3 {
    padding-top: 73px;
    background-image: url(../../img/as-s05-02.png);
    color: #333333;
    margin-bottom: 42px;
}
.about-service .as-sec-container.section-05 .sub-section.sub-02 > p {
    padding-left: 28px;
    background-image: url(../../img/as-check-icon.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 18px;
    text-align: left;
    color: #000;
    font-size: 17px;
    font-weight: 500;
    line-height: 191%;
    letter-spacing: -0.34px;
}

.about-service .as-sec-container.section-05 .sub-section.sub-03 h3 {
    padding-top: 93px;
    background-image: url(../../img/as-s05-03.png);
    color: #333333;
    margin-bottom: 46px;
}

.about-service .as-sec-container.section-05 .sub-section.sub-04 h3 {
    padding-top: 82px;
    background-image: url(../../img/as-s05-04.png);
    color: #333333;
    margin-bottom: 19px;
}
.about-service .as-sec-container.section-05 .sub-section.sub-04 ul.how-to {
    margin-top: 62px;
    flex-direction: column;
}
.about-service .as-sec-container.section-05 .sub-section.sub-04 ul.how-to > li {
    padding-left: 107px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 76px;
}
.about-service .as-sec-container.section-05 .sub-section.sub-04 ul.how-to > li.item-01 {
    background-image: url(../../img/as-s05-04-01.png);
}
.about-service .as-sec-container.section-05 .sub-section.sub-04 ul.how-to > li.item-02 {
    background-image: url(../../img/as-s05-04-02.png);
}
.about-service .as-sec-container.section-05 .sub-section.sub-04 ul.how-to > li.item-03 {
    background-image: url(../../img/as-s05-04-03.png);
}
.about-service .as-sec-container.section-05 .sub-section.sub-04 ul.how-to > li.item-04 {
    background-image: url(../../img/as-s05-04-04.png);
}
.about-service .as-sec-container.section-05 .sub-section.sub-04 ul.how-to > li.item-05 {
    background-image: url(../../img/as-s05-04-05.png);
}

   
/* 신고 공통 레이어 */
.report-article-text {
    padding: 41px 23px;
    width: 332px;
    height: 310px;
}
.report-article-text .warning-text {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 150%;
}
.report-article-text .warning-text strong {
    color: #df5d5d;
}
.report-article-text .report-reason {
    margin-top: 20px;
}
.report-article-text .report-reason .report-reason-wrap,
.report-article-text .report-reason .report-reason-text {
    margin: 0 auto;
    width: 100%;
}
.report-article-text .report-reason .report-reason-text {
    margin-top: 10px;
}
.report-article-text .report-reason .report-reason-text textarea {
    display: block;
    padding: 10px;
    width: calc(100% - 22px);
    height: 60px;
    font-size: 1.4rem;
    font-weight: 400;
    resize: none;
}
.report-article-text .report-reason .report-reason-text input::placeholder {
    font-size: 1.4rem;
}
.report-article-text .report-reason .button-box {
    margin-top: 20px;
    text-align: center;
}
.report-article-text .report-reason .button-box button {
    background-color: #484848;
    border-radius: 5px;
    padding: 8px 9px;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 500;
}