@charset "utf-8";

/* --------------------------------------------
 * HanbitSoft Infra Development Team
 * [Update]Super Star Membership Star Point Shop Stylesheet
 * Author - sgp8116@hanbitsoft.co.kr  20230105
----------------------------------------------- */

.content {
    background: url(../images/shop/content-shop-bg.jpg) 50% 0;
    padding: 83px 0 118px 0;
}

.title-sub-point-shop {
    background-image: url(../images/shop/title-after-login.png);
    background-repeat: no-repeat;
    background-position: 50% 0;
    height: 90px;
}
.menu-point-shop {
    position: relative;
    width: 1100px;
    margin: 35px auto 0;
    z-index: 10;
}
.menu-point-shop-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.menu-tab-button {
    background: 0;
    outline: 0;
    width: 258px;
    height: 92px;
    background-repeat: no-repeat;
    background-position: 0 0;
    margin-bottom: 27px;
}
.menu-tab-button.menu-button-emerald {
    background-image: url(../images/shop/tab-emerald.png);
}
.menu-tab-button.menu-button-ruby {
    background-image: url(../images/shop/tab-ruby.png);
}
.menu-tab-button.menu-button-sapphire {
    background-image: url(../images/shop/tab-sapphire.png);
}
.menu-tab-button.menu-button-platinum {
    background-image: url(../images/shop/tab-platinum.png);
}
.menu-tab-button.menu-button-gold {
    background-image: url(../images/shop/tab-gold.png);
}
.menu-tab-button.menu-button-silver {
    background-image: url(../images/shop/tab-silver.png);
}
.menu-tab-button.menu-button-bronze {
    background-image: url(../images/shop/tab-bronze.png);
}
.menu-tab-button.menu-button-iron {
    background-image: url(../images/shop/tab-iron.png);
}
.menu-tab-button.menu-button-emerald.active,
.menu-tab-button.menu-button-emerald:hover {
    background-image: url(../images/shop/tab-emerald-active.png);
}
.menu-tab-button.menu-button-ruby.active,
.menu-tab-button.menu-button-ruby:hover {
    background-image: url(../images/shop/tab-ruby-active.png);
}
.menu-tab-button.menu-button-sapphire.active,
.menu-tab-button.menu-button-sapphire:hover {
    background-image: url(../images/shop/tab-sapphire-active.png);
}
.menu-tab-button.menu-button-platinum.active,
.menu-tab-button.menu-button-platinum:hover {
    background-image: url(../images/shop/tab-platinum-active.png);
}
.menu-tab-button.menu-button-gold.active,
.menu-tab-button.menu-button-gold:hover {
    background-image: url(../images/shop/tab-gold-active.png);
}
.menu-tab-button.menu-button-silver.active,
.menu-tab-button.menu-button-silver:hover {
    background-image: url(../images/shop/tab-silver-active.png);
}
.menu-tab-button.menu-button-bronze.active,
.menu-tab-button.menu-button-bronze:hover {
    background-image: url(../images/shop/tab-bronze-active.png);
}
.menu-tab-button.menu-button-iron.active,
.menu-tab-button.menu-button-iron:hover {
    background-image: url(../images/shop/tab-iron-active.png);
}

.emerald-star-shop,
.ruby-star-shop,
.sapphire-star-shop,
.platinum-star-shop,
.gold-star-shop,
.silver-star-shop,
.bronze-star-shop,
.iron-star-shop {
    position: relative;
    outline: 0;
    width: 1100px;
    margin: 0 auto;
    padding-top: 55px;
    box-sizing: border-box;
}

.shop-title-emerald,
.shop-title-ruby,
.shop-title-sapphire,
.shop-title-platinum,
.shop-title-gold,
.shop-title-silver,
.shop-title-bronze,
.shop-title-iron {
    background: url(../images/shop/background-shop-title.jpg) no-repeat 50% 0;
    font-family: "SDSwagger", sans-serif;
    font-size: 31px;
    width: 1100px;
    height: 59px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5px;
    box-sizing: border-box;
}
.shop-title-emerald {
    color: #04a6a8;
}
.shop-title-ruby {
    color: #870622;
}
.shop-title-sapphire {
    color: #003b5f;
}
.shop-title-platinum {
    color: #6920c4;
}
.shop-title-gold {
    color: #6f5203;
}
.shop-title-silver {
    color: #676767;
}
.shop-title-bronze {
    color: #a46604;
}
.shop-title-iron {
    color: #3c3838;
}

.shop-description {
    border-left: 4px solid #b08c3c;
    border-right: 4px solid #fae267;
    background: #332011;
    font-size: 19px;
    font-weight: normal;
    letter-spacing: -0.6px;
    color: #fff9dc;
    text-align: center;
    padding: 20px 0 40px;
}
.shop-description.emerald strong {
    color: #00f0ff;
}
.shop-description.ruby strong {
    color: #ffb0a4;
}
.shop-description.sapphire strong {
    color: #3ba8fb;
}
.shop-description.platinum strong {
    color: #d2aeff;
}
.shop-description.gold strong {
    color: #fde897;
}
.shop-description.silver strong {
    color: #e7e7e7;
}
.shop-description.bronze strong {
    color: #e0b570;
}
.shop-description.iron strong {
    color: #aca7a7;
}

.shop-list-wrapper {
    border-left: 4px solid #b08c3c;
    border-right: 4px solid #fae267;
    border-bottom: 4px solid #c1aa63;
    background: #332011;
}
.shop-item-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.emerald-star-shop .shop-item-list,
.platinum-star-shop .shop-item-list {
    margin: 0 auto;
}
.shop-item {
    position: relative;
    border: 2px solid #dddede;
    background: #7f4d26;
    width: 180px;
    height: 262px;
    margin: 0 20px 34px;
}
.shop-item.basic-reward-item {
    border-color: #dbab32;
}

.shop-item-image-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 81px;
    height: 81px;
    margin: 22px auto 13px;
    overflow: hidden;
    position: relative;
}
.shop-item-image-frame:before,
.shop-item-image-frame:after {
    content: "";
    position: absolute;
}
.shop-item-image-frame:before {
    top: 7px;
    left: 6px;
    width: 69px;
    height: 69px;
    background: #fff;
}
.shop-item-image-frame:after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/shop/shop-item-frame.png) no-repeat 0 0;
    z-index: 2;
}
.shop-item-image {
    position: relative;
    z-index: 1;
}

.shop-item-image-frame.emerald-star-mark:before {
    background: #04eeff;
}
.shop-item-image.emerald-star-mark {
    border: 1px solid #04eeff;
}
.shop-item-image-frame.ruby-star-mark:before {
    background: #c11134;
}
.shop-item-image.ruby-star-mark {
    border: 1px solid #c11134;
}
.shop-item-image-frame.sapphire-star-mark:before {
    background: #003a4e;
}
.shop-item-image.sapphire-star-mark {
    border: 1px solid #003a4e;
}
.shop-item-image-frame.platinum-star-mark:before {
    background: #ffedff;
}
.shop-item-image.platinum-star-mark {
    border: 1px solid #ffedff;
}
.shop-item-image-frame.gold-star-mark:before {
    background: #ffff64;
}
.shop-item-image.gold-star-mark {
    border: 1px solid #ffff64;
}

.shop-item-name {
    display: block;
    width: 174px;
    height: 55px;
    margin: 0 auto;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: #dde0e9;
    text-align: center;
    word-break: keep-all;
}
.shop-item-name span {
    color: #ffa800;
}

.shop-item-automatic-payment,
.shop-item-point,
.shop-item-purchase-guide {
    font-family: "SDSwagger", sans-serif;
    letter-spacing: -0.25px;
    text-align: center;
}
.shop-item-automatic-payment,
.shop-item-point {
    font-style: normal;
    font-size: 22px;
}

.shop-item-automatic-payment {
    display: block;
    color: #ffc000;
}
.shop-item-point-wrap {
    display: block;
    text-align: center;
}
.shop-item-point {
    line-height: 25px;
    color: #ffe17b;
    position: relative;
    padding-left: 29px;
}
.shop-item-point:before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    background: url(../images/shop/shop-item-point.png) no-repeat 0 0;
    width: 29px;
    height: 28px;
}

.shop-item-purchase-guide {
    background: url(../images/shop/shop-restricted-item.png) no-repeat 0 0;
    position: absolute;
    top: -20px;
    right: -28px;
    width: 63px;
    height: 47px;
    border-radius: 50%;
    font-size: 19px;
    font-weight: 400;
    color: #654700;
    padding-top: 20px;
}

.button-basic,
.button-open-exchange {
    outline: 0;
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 180px;
    height: 51px;
}
.button-basic {
    background-image: url(../images/shop/button-basic.png);
}
.button-open-exchange {
    background-image: url(../images/shop/button-exchange.png);
}
.button-basic[disabled] {
    cursor: inherit;
}

.shop-item-tooltip {
    position: absolute;
    bottom: 60px;
    right: 29px;
    width: 33px;
    height: 33px;
    background: url(../images/shop/tooltip-box.png) no-repeat 0 0;
}
.button-tooltip {
    background: 0;
    outline: 0;
    width: 33px;
    height: 33px;
    cursor: pointer;
}
.tooltip-box {
    display: none;
    position: absolute;
    top: 35px;
    left: -125px;
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 509px;
    height: 378px;
    z-index: 5;
}
.tooltip-box.of-emerald-star {
    background-image: url(../images/shop/tool-tip-emerald-star.png);
}
.tooltip-box.of-ruby-star {
    background-image: url(../images/shop/tool-tip-ruby-star.png);
}
.tooltip-box.of-sapphire-star {
    background-image: url(../images/shop/tool-tip-sapphire-star.png);
}
.tooltip-box.of-platinum-star {
    background-image: url(../images/shop/tool-tip-platinum-star.png);
}
.tooltip-box.of-gold-star {
    background-image: url(../images/shop/tool-tip-gold-star.png);
}
.button-tooltip:hover + .tooltip-box {
    display: block;
}
.shop-item-link-gtem-detail {
    position: absolute;
    top: 88px;
    right: 50px;
    width: 33px;
    height: 33px;
    background: url(../images/shop/shop-item-link-gtem.png) no-repeat 0 0;
    z-index: 3;
}

.button-item-detail {
    background: url(../images/shop/button-item-detail.png) no-repeat 0 0;
    display: block;
    width: 272px;
    height: 63px;
    margin: 0 auto 42px;
}

/* modal exchange item */
.modal-exchange-item .modal-content {
    background: url(../images/shop/modal-exchange-bg.png) no-repeat 0 0;
    width: 797px;
    height: 451px;
}
.modal-exchange-item .modal-content.exchange-complete {
    display: none;
    background: url(../images/shop/modal-exchange-complete.png) no-repeat 0 0;
    width: 797px;
    height: 399px;
}
.modal-exchange-item-name {
    display: block;
    font-family: "SDSwagger", sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.5px;
    color: #2e251e;
    text-align: center;
    width: 692px;
    margin: 0 auto;
    padding: 55px 0 21px;
}
.modal-exchange-item-quantity,
.modal-exchange-item-points {
    width: 308px;
    margin: 0 auto;
}
.modal-exchange-item-quantity {
    margin-top: 38px;
}
.modal-exchange-item-points {
    margin-top: 39px;
}

.modal-exchange-item-points .points-use {
    display: block;
    width: 150px;
    font-family: "Noto Serif KR", serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 31px;
    letter-spacing: -0.75px;
    color: #ccae5c;
    text-align: center;
    margin-left: auto;
}

.button-exchange {
    background: 0;
    display: block;
    width: 214px;
    height: 64px;
    margin: 49px auto 0;
}
.modal-close-exchange-item {
    position: absolute;
    top: 19px;
    right: 19px;
    width: 25px;
    height: 25px;
}
.modal-exchange-complete {
    position: absolute;
    bottom: 78px;
    left: 50%;
    margin-left: -106px;
    width: 213px;
    height: 63px;
    z-index: 1;
}

/* custom select box */
.select-quantity {
    position: relative;
    background: #fff6d9;
    border: 3px solid #ccbb71;
    border-radius: 13px;
    width: 150px;
    height: 100%;
    overflow: hidden;
    margin-left: auto;
}
.select-quantity:before {
    content: "";
    position: absolute;
    top: 14px;
    right: 12px;
    background: url(../images/shop/select-box-arrow.png) no-repeat 0 0;
    width: 25px;
    height: 19px;
    z-index: 2;
}
.bg-for-close-select {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.select-quantity-default {
    background: none;
    border-radius: 13px;
    width: 100%;
    height: 42px;
    font-size: 24px;
    font-weight: bold;
    color: #13130e;
    position: relative;
    z-index: 2;
}
.select-quantity-option {
    position: absolute;
    top: 34px;
    left: -3px;
    width: 100%;
    height: auto;
    background: #fff6d9;
    border: 3px solid #ccbb71;
    border-top: 0;
    border-radius: 0 0 13px 13px;
    padding: 6px 0;
    opacity: 0;
    z-index: 1;
    transition: 0.25s;
}
.select-quantity-value {
    background: none;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
    transition: 0.25s;
}
.select-quantity-value:hover,
.select-quantity-value:focus {
    background: #c7b172;
    text-decoration: none;
    color: inherit;
}
.select-quantity.active {
    overflow: visible;
}
.select-quantity.active .bg-for-close-select {
    display: block;
}
.select-quantity.active .select-quantity-option {
    opacity: 1;
    overflow: auto;
    height: auto;
}