@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); @import url("../../../use.typekit.net/eyd8ahm.css"); /* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,button,figure,figcaption {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
}

a, img, fieldset {
    border: 0;
}

dl,ul,ol,menu,li {
    list-style: none;
}

body {
    background: #151515;
}

body,th,td,input,select,textarea,button {
    line-height: 1.2;
    color: #000;
    font-family: 'Chakra Petch', 'Roboto', HelveticaNeue-Light, AppleSDGothicNeo-Light, sans-serif;
    font-size: 14px;
}

button {
    border: none;
    outline: none;
    transition: all ease-in-out 0.2s;
}

a {
    color: #222;
    text-decoration: none;
    transition: all ease-in-out 0.2s;
}

a:hover {
    text-decoration: none;
}

/* a:active{background-color:transparent;} */
address,cite,code,dfn,em,var {
    font-style: normal;
    font-weight: 100;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 400;
}

textarea {
    resize: none;
}

img {
    line-height: 0;
    vertical-align: top;
    max-width: 100%;
}

form, fieldset {
    width: 100%;
    display: block;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

b,strong {
    font-weight: 400;
}

ul {
    font-size: 0;
}

a {
    display: inline-block;
    transition: all ease-in-out 0.2s;
}

/**/
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select::-ms-expand {
    display: none;
}

/*input { -webkit-appearance: none;-moz-appearance: none;appearance: none; border:none;}
input::-ms-clear {display: none;} */
input:focus {
    outline: none;
}

button:focus {
    outline: none;
}

/* a:focus, input:focus, button:focus, textarea:focus {outline:1px dotted #ddd;} */
img {
    -ms-interpolation-mode: bicubic !important;
}

html {
    height: 100%;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    font-size: 62.5%;
}

body {
    height: 100%;
    text-align: left;
}

/* slick */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition-delay: 10ms;
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}

.slick-track:before, .slick-track:after {
    display: table;
    content: '';
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

/* common */
.none {
    display: none;
}

.sdonly {
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
}

/*사운드리더 only */
.sdonly:before, .sdonly:after {
    display: none !important;
}

.ov-bg {
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 100;
    position: fixed;
    display: none;
}

.bg_dim {
    display: none;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 100;
    position: fixed;
}

.dimmed {
    display: none;
    width: 100%;
    height: 100%;
    background: url(../../images/common/dim_bk60.png) repeat;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 90;
}

/**/
.clr:after {
    content: '';
    display: block;
    clear: both;
}

.dst {
    display: table;
    width: 100%;
    height: 100%;
}

.dstc {
    display: table-cell;
    vertical-align: middle;
}

.dstr {
    display: table-row;
}

.inner {
    max-width: 1704px;
    margin: 0 auto;
}

.pcol {
    color: #f00;
}

.mobile {
    display: none;
}

.s_link {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    text-indent: -99999px;
    z-index: 10;
    background: #fff;
    opacity: 0;
    filter: alpha(opacity=0);
    font-size: 0;
}

/* root */
:root {
    --color_ge: #6f8;
    --color_y: #ff0;
    --color_w: #fff;
    --color_ga: #aaa;
    --color_p: #f5e;
    --color_o: #f60;
    --color_b: #4bf;
    --bg_blur : blur(20px);
}

/***************************************************************************************************/
/* gnb */
#head {
    position: fixed;
    left: 2.4rem;
    right: 2.4rem;
    padding-right: 168px;
    z-index: 12;
}

#head * {
    transition: none;
}

#head .top {
    position: relative;
    padding: 1.5rem 0;
    font-size: 0;
    z-index: 1;
}

#head .top h1 {
    display: inline-block;
}

#head .top .user_area {
    font-size: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
}

#head .user_area > div {
    font-family: 'Roboto';
}

#head .top .user_area > div {
    display: inline-flex;
    vertical-align: middle;
    padding-right: 2.4rem;
    font-size: 14px;
    position: relative;
    height: 48px;
    align-items: center;
    justify-content: flex-start;
}

#head .top .user_area > div:after {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: 1.6rem;
    background: rgba(255, 255, 255, 0.5);
    left: -1.2rem;
    top: 50%;
    transform: translate(0, -50%);
}

#head .top .user_area > div:first-child:after {
    display: none;
}

#head .top .user_area a {
    padding-left: 22px;
    position: relative;
}

#head .user_area a:before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: calc(50% - 1px);
    transform: translate(0, -50%);
}

#head .user_area .uesr {
    color: var(--color_w);
    position: relative;
}

#head .user_area .uesr img {
    width: 20px;
    margin-right: 0.8rem;
}

#head .user_area .cash a {
    color: #fff;
}

#head .user_area .cash a:before {
    height: 14px;
    background-image: url('../../images/common/webshop/icon_pb_ov.png');
}

#head .user_area .cash a:hover {
    color: var(--color_ge);
}

#head .user_area .cash a:hover:before {
    background-position: 0 -14px;
}

#head .user_area .cash .more {
    margin-left: 0.5rem;
    position: relative;
    top: -1px;
    transition: none;
    vertical-align: middle;
    display: inline-block;
    font-size: 0;
    width: 20px;
    height: 20px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 20px auto;
    background-image: url('../../images/common/webshop/btn_cash.png');
    position: relative;
    border-radius: 50%;
    box-shadow: inset 0 1px 0 #4cf, inset 0 1px 0 0px #4cf, inset 0 -1px 0 #6f8, inset 0 0 0 1px #4cf;
}

#head .user_area .cash:hover .more {
    transition: none;
    background-position: 0 -20px;
    box-shadow: inset 0 0 0 1px #6f8;
}

#head .user_area .gold a {
    color: #fe0;
}

#head .user_area .gold a:hover {
    color: #6f8;
}

#head .user_area .gold a:before {
    background-image: url('../../images/common/webshop/icon_gold_ov.png');
}

#head .user_area .gold a:hover:before {
    background-position: 0 -16px;
}

#head .user_area .depth2 {
    left: auto;
    right: 0;
    transform: none;
}

#head .user_area .depth2 a:before {
    display: none;
}

#head .user_area .depth2 a {
    padding-left: 1.2rem;
}

#head .user_area .coupon a {
    color: #fff;
}

#head .user_area .coupon a:hover {
    color: #6f8;
}

#head .user_area .coupon a:before {
    background-image: url('../../images/common/webshop/icon_coupon_b.png');
    width: 16px;
    background-size: 100% auto;
}

#head .user_area .coupon a:hover:before {
    background-position: 0 -16px;
}

#head .user_area .token a {
    color: #ffee00;
}

#head .user_area .token a:hover {
    color: #6f8;
}

#head .user_area .token a:before {
    background-image: url('../../images/common/webshop/icon_token_b.png');
    width: 16px;
    background-size: 100% auto;
}

#head .user_area .token a:hover:before {
    background-position: 0 -16px;
}

#head .user_area .goods {
    overflow: visible;
    padding: 0;
}

#head .user_area .goods a {
    color: #ffee00;
}

#head .user_area .goods a .num {
    box-shadow: 0 0 1rem rgba(255, 238, 0, 0.15);
    position: relative;
    top: -1px;
    vertical-align: middle;
    font-size: 12px;
    color: #000000;
    border-radius: 8px;
    background: #ffff33;
    height: 16px;
    min-width: 26px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.4rem;
    font-weight: 400;
}

#head .user_area .goods a:hover .num {
    box-shadow: 0 0 1rem rgba(102, 255, 136, 0.15);
    background: #66ff88;
}

#head .user_area .goods a:before {
    background-image: url('../../images/common/webshop/icon_goods_ov.png');
    width: 16px;
    background-size: 100% auto;
}

#head .user_area .goods a:hover:before {
    background-position: 0 -16px;
}

#head .user_area .star a {
    color: #adf;
}

#head .user_area .star a:hover {
    color: #6f8;
}

#head .user_area .star a:before {
    background-image: url('../../images/common/webshop/icon_star_b.png');
    width: 16px;
    background-size: 100% auto;
}

#head .user_area .star a:hover:before {
    background-position: 0 -16px;
}

#head .user_area img {
    vertical-align: middle;
    position: relative;
    top: -1px;
}

#head.pc {
    box-shadow: 0 0 6rem rgba(0, 0, 0, 0.2);
}

#head.pc .gnb_area {
    padding-left: 14.4rem;
    height: 72px;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(100, 243, 132, 0.4), rgba(0, 0, 0, 0));
    border-image-slice: 1;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: var(--bg_blur);
    backdrop-filter: var(--bg_blur);
    border-radius: 1.2rem;
    text-align: center;
    position: relative;
}

#head.pc .gnb_area:before {
    border-radius: 1.2rem;
    content: '';
    display: block;
    position: absolute;
    left: 8.4rem;
    top: 0;
    bottom: 0;
    right: 0;
    background: url('../../images/common/webshop/bg_gnb_gra.png') center bottom no-repeat;
    background-size: contain;
}

#head.pc .gnb_area .bi {
    vertical-align: middle;
    position: absolute;
    left: 2.4rem;
    top: 50%;
    transform: translate(0, -50%);
}

#head.pc #gnb {
    display: inline-block;
    vertical-align: middle;
}

#head.pc #gnb ul {
    font-size: 0;
}

#head.pc #gnb li {
    display: inline-block;
    padding: 0 1rem;
    vertical-align: top;
    position: relative;
}

#head.pc #gnb li:before {
    width: calc(100% - 24px);
    height: 100%;
    opacity: 0;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 12px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(102, 255, 136, 0.2));
    transition: all 0.3s linear 0s;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(100, 243, 132, 0.4), rgba(0, 0, 0, 0));
    border-image-slice: 1;
}

#head #gnb li.coming:before {
    content: '';
    display: block;
    position: absolute;
    width: 125px;
    height: 28px;
    background: url('../../images/common/webshop/comingsoon.png') 0 0 no-repeat;
    bottom: -1.2rem;
    left: 50%;
    transform: translate(-50%, 0);
    margin-left: 1.5rem;
}

#head #gnb li a {
    transition: all ease-in-out 0.5s;
    line-height: 72px;
    color: #ccc;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
    position: relative;
    padding: 0 3rem;
    letter-spacing: 0.06em;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

#head #gnb li a:before, #head.pc #gnb li a:after {
    transition: all ease-in-out 0.2s;
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    height: 18px;
}

#head #gnb li a:before {
    background-repeat: no-repeat;
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 18px;
    left: 0;
}

#head #gnb li a .num {
    box-shadow: 0 0 1rem rgba(255, 238, 0, 0.15);
    margin-left: 3px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    font-size: 12px;
    color: #000000;
    font-family: 'Roboto';
    border-radius: 9px;
    background: #ffff33;
    height: 18px;
    min-width: 26px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.4rem;
    font-weight: 400;
    letter-spacing: 0;
}

#head #gnb li.total a:before {
    background-image: url('../../images/common/webshop/icon_total.png');
}

#head #gnb li.normal a:before {
    background-image: url('../../images/common/webshop/icon_normal.png');
}

#head #gnb li.random a:before {
    background-image: url('../../images/common/webshop/icon_random.png');
}

#head #gnb li.pass a:before {
    background-image: url('../../images/common/webshop/icon_pass.png');
    width: 22px;
}

#head #gnb li.tournament a:before {
    background-image: url('../../images/common/webshop/icon_tournament.png');
}

#head #gnb li.field a:before {
    background-image: url('../../images/common/webshop/icon_field.png');
}

#head #gnb li.gold a:before {
    background-image: url('../../images/common/webshop/icon_gold.png');
}

#head #gnb li.token a:before {
    background-image: url('../../images/common/webshop/img_token_g.png');
    background-size: 100% auto;
}

#head #gnb li.goods {
    overflow: visible;
}

#head #gnb li.goods a:before {
    background-image: url('../../images/common/webshop/icon_goods.png');
}

#head #gnb li.star a:before {
    background-image: url('../../images/common/webshop/icon_star.png');
}

#head #gnb li .tooltip {
    width: max-content;
    position: absolute;
    top: 6rem;
    left: 50%;
    transform: translate(-50%, 0);
    max-width: 25rem;
    text-align: center;
    padding: 2rem;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Roboto';
    color: #000;
    text-shadow: 0 0 0.5rem rgba(0, 255, 255, 0.8);
    letter-spacing: 0.01em;
    line-height: 1.3;
    box-shadow: inset 0 1px 1px #fe0, inset 0 1px 1px 0px #0ff, inset 0 -1px 1px #0ff, inset 0 0 0 1px #0ff, 0 2rem 4rem rgba(0, 0, 0, 0.4);
    display: none;
    background: linear-gradient(to bottom, rgba(76, 255, 194, 0.9), rgba(0, 255, 255, 0.9));
    border-radius: 1.2rem;
}

#head #gnb li .tooltip:before {
    content: '';
    display: block;
    top: -7px;
    left: 50%;
    margin-left: -6px;
    position: absolute;
    width: 12px;
    height: 8px;
    background: url('../../images/common/webshop/arr_tip.png') 0 0 no-repeat;
}

#head #gnb li.tip a:after {
    content: '';
    vertical-align: middle;
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url('../../images/common/webshop/icon_imp.png') 0 0 no-repeat;
    margin-left: 1rem;
    border-radius: 50%;
    box-shadow: 0 0 1rem rgba(255, 238, 0, 0.15);
    margin-right: -0.8rem;
    position: relative;
    top: -2px;
    transform: none;
}

#head #gnb li.tip:hover .tooltip {
    display: inline-block;
}

#head.pc #gnb li.act a {
    color: #6f8;
    text-shadow: 0 0 1rem rgba(102, 255, 136, 0.2);
}

#head.pc #gnb li.act:hover a {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

#head .depth2 {
    display: none;
    position: absolute;
    left: 50%;
    transform: translate(-50% , 0);
    width: 104px;
    top: 4.3rem;
    background: rgba(68, 68, 68, 0.8);
    border-radius: 1.2rem;
    border: 1px solid #aaaaaa;
    border-top: 1px solid #38e3e3;
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.4);
}

#head .depth2:before {
    transition: none !important;
    opacity: 1 !important;
    content: '';
    display: block;
    position: absolute;
    width: 10px;
    height: 7px;
    top: -7px;
    left: 50%;
    margin-left: -5px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url('../../images/common/webshop/arr_depth2_t.png');
}

#head .depth2 ul {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

#head .depth2 a {
    transition: none;
    display: flex;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.2rem;
    word-break: break-all;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

#head .depth2 a span {
    font-size: 14px;
    color: #ffee00;
    letter-spacing: 0.01em;
    line-height: 1;
}

#head .depth2 a img {
    width: 18px;
    margin-right: 0.7rem;
}

#head .depth2 li {
    transition: none;
}

#head .depth2 li:first-child a {
    border-radius: 1.2rem 1.2rem 0 0;
}

#head .depth2 li:last-child a {
    border-radius: 0 0 1.2rem 1.2rem;
    border-bottom: 0;
}

#head .depth2 a:hover {
    background: #66ff88;
}

#head .depth2 a:hover span {
    color: #000000;
}

#head .depth2.on {
    border-top-color: #ffee00;
}

#head .depth2.on:before {
    background-position: 0 -7px;
}

#head #gnb .depth2 {
    width: 240px;
    top: 5.8rem;
    padding-right: 0.6rem;
}

#head #gnb .depth2:before {
    background-image: url('../../images/common/webshop/arr_depth2_t02.png');
}

#head #gnb .depth2 ul {
    max-height: 278px;
    overflow-y: scroll;
    padding-right: 0.6rem;
    border-radius: 12px;
}

#head #gnb .depth2 ul::-webkit-scrollbar {
    width: 0.6rem;
}

#head #gnb .depth2 ul::-webkit-scrollbar-track {
    margin-block: 1.2rem;}

#head #gnb .depth2 ul::-webkit-scrollbar-thumb {
    border-radius: 0.3rem;
    background: linear-gradient(to bottom, rgba(255, 255, 51, 0.3), rgba(255, 255, 255, 0)) , #44ccff;
    border: 1px solid #00ffff;
    border-top-color: #ffee00;
}

#head #gnb .depth2 li {
    display: block;
    padding: 0;
}

#head #gnb .depth2 li a {
    transition: none;
    word-break: break-word;
    text-transform: none;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.01em;
    text-shadow: none;
    font-weight: 400;
    padding: 0 1.2rem;
    height: 56px;
    font-family: 'Roboto';
    justify-content: flex-start;
    text-align: left;
}

#head #gnb .depth2 li a:before {
    display: none;
}

#head #gnb .depth2 li a span {
    color: #fff;
    line-height: 1.28;
}

#head #gnb .depth2 a img {
    margin-right: 1.2rem;
}

#head #gnb .depth2 li:first-child a {
    border-radius: 1.2rem 0 0 0;
}

#head #gnb .depth2 li:last-child a {
    border-radius: 0 0 0 1.2rem;
}

#head #gnb .depth2 li:first-child a:before {
    display: none;
}

#head #gnb .depth2 li a:hover {
    border-top: 1px solid #abf454;
    border-bottom: 1px solid #00ffff;
    background: linear-gradient(to bottom, rgba(255, 255, 51, 0.3), rgba(255, 255, 255, 0)) , #44ccff;
}

#head #gnb .depth2 li a:hover span {
    color: #000000;
}

#head #gnb .depth2 li:first-child a:hover {
    border-top: 0;
}

#head #gnb .depth2 li:first-child a:hover:before {
    background-position: 0 -7px;
}

#head #gnb .depth2 li:hover:before {
    display: none !important;
}

#head.pc #gnb li:hover:before {
    opacity: 1;
}

#head.pc #gnb li:hover a {
    color: #6f8;
}

#head.pc #gnb li:hover a:before {
    opacity: 0;
    transition: all ease-in-out 0.2s;
}

#head.pc #gnb li.coming:hover:before {
    bottom: -1.3rem;
}

#head.pc .gnb_area:hover {
    border-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

#head.pc .gnb_area:hover:before {
    display: none;
}

#head .util {
    font-family: 'Roboto';
}

#head.pc .util {
    width: 166px;
    top: 1rem;
    right: 0;
    position: absolute;
    z-index: 1;
}

#head.pc .util .btns {
    font-size: 0;
    margin-bottom: 1rem;
}

#head.pc .util .btns a {
    transition: all ease-in-out 0.2s;
    letter-spacing: 0.04em;
    display: inline-block;
    width: calc((100% - 7px) / 2);
    border-radius: 0.6rem;
    text-align: center;
    height: 28px;
    line-height: 29px;
    position: relative;
    text-transform: uppercase;
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 11px;
    color: #fff;
}

#head.pc .util .btns .btn_history {
    box-shadow: inset 0 1px 0 rgba(170, 170, 170, 1), inset 0 -1px 0 #6f9, inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    margin-right: 7px;
    background: rgba(255, 255, 255, 0.1);
}

#head.pc .util .btns .btn_login {
    background: rgba(0, 170, 238, 0.1);
    box-shadow: inset 0 1px 0 #4cf, inset 0 1px 0 0px #4cf, inset 0 -1px 0 #6f8, inset 0 0 0 1px #4cf;
    color: #4cf;
}

#head.pc .util .btns a:hover {
    color: var(--color_ge);
    box-shadow: inset 0 0 0 1px #6f8;
    background: rgba(102, 255, 136, 0.2);
}

#head.pc .util .btns a:hover:before {
    display: none;
}

#head.pc .util .state {
    font-size: 0;
}

#head.pc .util .state a {
    transition: all ease-in-out 0.2s;
    backdrop-filter: var(--bg_blur);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.1);
    display: inline-block;
    width: calc((100% - 2px) / 2);
    height: 72px;
    line-height: 55px;
    text-align: center;
    font-size: 20px;
    font-family: 'Roboto';
    color: #eeeeee;
}

#head.pc .util .state a img {
    vertical-align: middle;
    height: 18px;
}

#head.pc .util .state .wish {
    margin-right: 2px;
}

#head.pc .util .state .wish:hover {
    background: rgba(255, 68, 68, 0.35);
}

#head.pc .util .state .cart:hover {
    background: rgba(68, 204, 255, 0.25);
}

#head.pc .util .state a font {
    display: none;
}

#head.pc .util .state a span {
    display: block;
    text-transform: uppercase;
    font-size: 11px;
    color: #ccc;
    letter-spacing: 0.04em;
    font-family: 'Roboto';
    margin-top: -9px;
    line-height: 1;
}

#head.pc .util .state .wish:hover span {
    color: #fb0;
}

#head.pc .util .state .cart:hover span {
    color: #6f8;
}

#head.pc .util.on .state a {
    line-height: 72px;
}

#head.pc .util.on .state a img {
    margin-right: 1rem;
}

#head.pc .util.on .state a font {
    display: inline;
}

#head .util.on .state a span {
    display: none;
}

#head.fixed {
    left: 0;
    right: 0;
    padding-right: 192px;
}

#head.fixed .top {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
}

#head.fixed .top:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -100%;
    background: rgba(0, 0, 0, 0.6);
    content: '';
    display: block;
    z-index: -1;
    -webkit-backdrop-filter: var(--bg_blur);
    backdrop-filter: var(--bg_blur);
}

#head.fixed.pc .gnb_area {
    background: none;
    border: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#head.fixed.pc .gnb_area:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    right: -100%;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(100, 243, 132, 0.4), rgba(0, 0, 0, 0));
    border-image-slice: 1;
    background: rgba(51, 51, 51, 0.4);
    content: '';
    display: block;
    z-index: -1;
    -webkit-backdrop-filter: var(--bg_blur);
    backdrop-filter: var(--bg_blur);
}

#head.fixed.pc .util {
    right: 2.4rem;
}

#head.fixed.pc .util .state a {
    border-radius: 0;
    background: none;
    backdrop-filter: none;
}

#head.fixed.pc .util .state .wish:hover {
    border-bottom: 1px solid #f44;
}

#head.fixed.pc .util .state .cart:hover {
    border-bottom: 1px solid #4cf;
}

#footer {
    text-align: center;
    background: #000;
    padding: 4.8rem 0;
    font-family: 'Roboto';
}

#footer .corp {
    font-size: 0;
    margin-bottom: 4.8rem;
}

#footer .corp li {
    display: inline-block;
    vertical-align: top;
    margin: 0 0.6rem;
}

#footer .corp li a {
    display: block;
    padding: 1rem 1.8rem 0.9rem;
    font-size: 11px;
    color: #666;
    font-weight: 500;
    border-radius: 0.6rem;
    border: 1px solid #555;
    text-transform: uppercase;
}

#footer .corp li a:hover {
    color: #aaa;
    border: 1px solid rgba(153, 153, 153, 0.5);
    background: rgba(255, 255, 255, 0.1) url('../../images/common/webshop/ptn_gnb.png') 0 0 repeat;
}

#footer .copyright {
    font-size: 12px;
    color: #666;
    margin-top: 2rem;
    letter-spacing: 0.01em;
}

#footer .age {
    margin-top: 2rem;
}

#footer .age img {
    max-width: 6rem;
}

.badge {
    position: fixed;
    right: 3.6rem;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 11;
}

.badge a {
    width: 120px;
    height: 120px;
    display: block;
    margin: 12px 0;
}

.badge a img {
    animation: heartbeat 0.5s cubic-bezier(0.245, 0.325, 0.51, 1.305) infinite alternate;
}

.badge a:hover img {
    animation: none;
}

.btn_top {
    z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    position: fixed;
    bottom: 2.4rem;
    right: 2.4rem;
    width: 48px;
    height: 48px;
    padding-top: 12px;
    text-align: center;
    font-size: 11px;
    color: #eee;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-top: 1px solid #0ae;
    border-bottom: 1px solid #6f8;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: 'Roboto';
}

.btn_top:before {
    content: '';
    display: block;
    margin: 0 auto 5px;
    width: 8px;
    height: 7px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url('../../images/common/webshop/icon_top.png');
}

.btn_top:hover {
    border: 1px solid #6f8;
    color: #6f8;
    background: rgba(102, 255, 136, 0.35);
}

.btn_top:hover:before {
    background-position: 0 -7px;
}

.btn_home {
    display: none;
}

.btn_basic {
    transition: background-color ease-in-out 0.2s;
    position: relative;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #aaa;
    border-radius: 4px;
    font-size: 21px;
    color: #aaa;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.btn_basic:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: 0;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
}

.btn_basic:after {
    content: '';
    display: block;
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: -2px;
    right: -2px;
    background: url('../../images/common/webshop/ag_lt_g.png') 0 0 no-repeat, url('../../images/common/webshop/ag_rt_g.png') right 0 no-repeat, url('../../images/common/webshop/ag_lb_g.png') 0 bottom no-repeat, url('../../images/common/webshop/ag_rb_g.png') right bottom no-repeat;
}

.btn_basic:hover {
    border-color: #6f8;
    color: #6f8;
    background-color: rgba(102, 255, 136, 0.2);
}

.btn_basic:hover:after {
    background: url('../../images/common/webshop/ag_lt_gr.png') 0 0 no-repeat, url('../../images/common/webshop/ag_rt_gr.png') right 0 no-repeat, url('../../images/common/webshop/ag_lb_gr.png') 0 bottom no-repeat, url('../../images/common/webshop/ag_rb_gr.png') right bottom no-repeat;
}

.btn_rd {
    background-color: rgba(255, 68, 68, 0.15);
    border-color: #f44;
    color: #f44;
}

.btn_rd:after {
    background: url('../../images/common/webshop/ag_lt_r.png') 0 0 no-repeat, url('../../images/common/webshop/ag_rt_r.png') right 0 no-repeat, url('../../images/common/webshop/ag_lb_r.png') 0 bottom no-repeat, url('../../images/common/webshop/ag_rb_r.png') right bottom no-repeat;
}

.btn_rd:hover {
    background-color: rgba(255, 255, 0, 0.2);
    border-color: #ff0;
    color: #ff0;
}

.btn_rd:hover:after {
    background: url('../../images/common/webshop/ag_lt_y.png') 0 0 no-repeat, url('../../images/common/webshop/ag_rt_y.png') right 0 no-repeat, url('../../images/common/webshop/ag_lb_y.png') 0 bottom no-repeat, url('../../images/common/webshop/ag_rb_y.png') right bottom no-repeat;
}

.btn_bl {
    background-color: rgba(24, 119, 241, 0.15);
    border-color: #1877f1;
    color: #1877f1;
}

.btn_bl:after {
    background: url('../../images/common/webshop/ag_lt_b02.png') 0 0 no-repeat, url('../../images/common/webshop/ag_rt_b02.png') right 0 no-repeat, url('../../images/common/webshop/ag_lb_b02.png') 0 bottom no-repeat, url('../../images/common/webshop/ag_rb_b02.png') right bottom no-repeat;
}

.btn_bl:hover {
    background-color: rgba(68, 153, 255, 0.2);
    border-color: #4499ff;
    color: #4499ff;
}

.btn_bl:hover:after {
    background: url('../../images/common/webshop/ag_lt_b03.png') 0 0 no-repeat, url('../../images/common/webshop/ag_rt_b03.png') right 0 no-repeat, url('../../images/common/webshop/ag_lb_b03.png') 0 bottom no-repeat, url('../../images/common/webshop/ag_rb_b03.png') right bottom no-repeat;
}

.btn_y {
    background-color: rgba(255, 255, 0, 0.2);
    border-color: #ff0;
    color: #ff0;
}

.btn_y:after {
    background: url('../../images/common/webshop/ag_lt_y.png') 0 0 no-repeat, url('../../images/common/webshop/ag_rt_y.png') right 0 no-repeat, url('../../images/common/webshop/ag_lb_y.png') 0 bottom no-repeat, url('../../images/common/webshop/ag_rb_y.png') right bottom no-repeat;
}

.btn_b {
    background-color: rgba(0, 170, 238, 0.15);
    border-color: #0ae;
    color: #0ae;
}

.btn_b:after {
    background: url('../../images/common/webshop/ag_lt_b.png') 0 0 no-repeat, url('../../images/common/webshop/ag_rt_b.png') right 0 no-repeat, url('../../images/common/webshop/ag_lb_b.png') 0 bottom no-repeat, url('../../images/common/webshop/ag_rb_b.png') right bottom no-repeat;
}

.btn_g:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    color: #fff;
}

.btn_g:hover:after {
    background: url('../../images/common/webshop/ag_lt_w.png') 0 0 no-repeat, url('../../images/common/webshop/ag_rt_w.png') right 0 no-repeat, url('../../images/common/webshop/ag_lb_w.png') 0 bottom no-repeat, url('../../images/common/webshop/ag_rb_w.png') right bottom no-repeat;
}

.btn_p {
    background-color: rgba(17, 0, 51, 0.5);
    border-color: #dcf;
    color: #dcf;
}

.btn_p:after {
    background: url('../../images/common/webshop/ag_lt_p.png') 0 0 no-repeat, url('../../images/common/webshop/ag_rt_p.png') right 0 no-repeat, url('../../images/common/webshop/ag_lb_p.png') 0 bottom no-repeat, url('../../images/common/webshop/ag_rb_p.png') right bottom no-repeat;
}

.btn_p:hover {
    background-color: rgba(255, 255, 0, 0.2);
    border-color: #ff0;
    color: #ff0;
}

.btn_p:hover:after {
    background: url('../../images/common/webshop/ag_lt_y.png') 0 0 no-repeat, url('../../images/common/webshop/ag_rt_y.png') right 0 no-repeat, url('../../images/common/webshop/ag_lb_y.png') 0 bottom no-repeat, url('../../images/common/webshop/ag_rb_y.png') right bottom no-repeat;
}

.btn_o {
    background-color: #441100;
    border-color: #ff9966;
    color: #ff9966;
}

.btn_o:after {
    background: url('../../images/common/webshop/ag_lt_o.png') 0 0 no-repeat, url('../../images/common/webshop/ag_rt_o.png') right 0 no-repeat, url('../../images/common/webshop/ag_lb_o.png') 0 bottom no-repeat, url('../../images/common/webshop/ag_rb_o.png') right bottom no-repeat;
}

.btn_o:hover {
    background-color: rgba(255, 255, 0, 0.2);
    border-color: #ff0;
    color: #ff0;
}

.btn_o:hover:after {
    background: url('../../images/common/webshop/ag_lt_y.png') 0 0 no-repeat, url('../../images/common/webshop/ag_rt_y.png') right 0 no-repeat, url('../../images/common/webshop/ag_lb_y.png') 0 bottom no-repeat, url('../../images/common/webshop/ag_rb_y.png') right bottom no-repeat;
}

/* paging */
.paging_wrap {
    text-align: center;
}

.paging_wrap ul {
    font-size: 0;
}

.paging_wrap li {
    display: inline-block;
    vertical-align: top;
    margin: 0 0.3rem;
}

.paging_wrap li a {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    display: block;
    border-radius: 0.4rem;
    padding: 0 1.2rem;
    min-width: 36px;
    height: 36px;
    line-height: 38px;
    text-align: center;
    font-size: 16px;
    color: #aaa;
    font-family: 'Roboto';
}

.paging_wrap li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

.paging_wrap li.on a, .paging_wrap li.on a:hover {
    background: rgba(102, 255, 136, 0.2);
    color: #6f8;
}

.paging_wrap li.first a, .paging_wrap li.prev a, .paging_wrap li.next a, .paging_wrap li.last a {
    background-repeat: no-repeat;
    background-position: 0 0;
    opacity: 0.4;
}

.paging_wrap li.first a, .paging_wrap li.last a {
    background-image: url('../../images/common/webshop/page_ll.png');
    background-color: rgba(0, 0, 0, 0);
}

.paging_wrap li.prev a, .paging_wrap li.next a {
    background-image: url('../../images/common/webshop/page_l.png');
    background-color: rgba(0, 0, 0, 0);
}

.paging_wrap li.next a, .paging_wrap li.last a {
    transform: scaleX(-1);
}

.paging_wrap li.prev {
    margin-right: 0.9rem;
}

.paging_wrap li.next {
    margin-left: 0.9rem;
}

.paging_wrap li.first a:hover, .paging_wrap li.prev a:hover, .paging_wrap li.next a:hover, .paging_wrap li.last a:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
}

#all_wrap {
    overflow: hidden;
}

#container {
    padding-top: 121px;
}

#container.main {
    background: url('../../images/common/webshop/bg_main.jpg') center 0 no-repeat;
    background-size: 100% auto;
}

/* main */
.mainSlide_wrap {
    margin-top: 6.2rem;
}

.mainSlide_wrap .mainSlide {
    border-radius: 1.2rem;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.mainSlide_wrap .mainSlide:before , .mainSlide_wrap .mainSlide:after {
    z-index: 2;
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    top: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0));
}

.mainSlide_wrap .mainSlide:before {
    left: 0;
}

.mainSlide_wrap .mainSlide:after {
    right: 0;
}

.mainSlide_wrap .swiper-pagination {
    background: rgba(255, 255, 255, 0.1) url('../../images/common/webshop/ptn_gnb.png') 0 0 repeat;
}

.main .swiper-pagination {
    position: static;
    padding: 2.4rem 0;
}

.main .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    opacity: 1;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    margin: 0 1.2rem !important;
}

.main .swiper-pagination-bullet-active {
    background: linear-gradient(to right, #4cf, #6f8);
    width: 36px;
}

.goods {
    padding: 7.2rem 0;
    text-align: center;
    overflow: hidden;
}

.item_wrap {
    position: relative;
    z-index: 1;
}

.tit_wrap {
    margin-bottom: 4rem;
    position: relative;
}

.tit_wrap h3 {
    font-size: 34px;
    color: #fff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
}

.tit_wrap h3 span {
    color: #f5e;
}

.tit_wrap h4 {
    color: #aaa;
    font-size: 14px;
    font-family: 'Roboto';
    letter-spacing: 0.02em;
}

.tit_wrap .btn_more {
    padding-right: 3rem;
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 4.8rem;
    text-transform: uppercase;
    font-size: 11px;
    font-family: 'Roboto';
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 4.8rem;
    text-align: center;
}

.tit_wrap .btn_more:before {
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: 2.4rem;
    width: 8px;
    height: 8px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url('../../images/common/webshop/icon_more.png');
}

.tit_wrap .btn_more:hover:before {
    background-position: 0 -8px;
}

.item_wrap .item_list {
    font-size: 0;
    margin-left: -3.6rem;
    text-align: left;
}

.item_wrap .item_list > li {
    width: 20%;
    padding-left: 3.6rem;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

.item_wrap .item_list .con {
    transition: all ease-in-out 0.2s;
    -webkit-backdrop-filter: var(blur(10px));
    backdrop-filter: blur(10px);
    position: relative;
}

.item_wrap .item_list .item {
    position: relative;
    z-index: -1;
}

.item_wrap .item_list .img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
}

.item_wrap .item_list .img img {
    width: 100%;
    height: 100%;
}

.item_wrap .item_list .desc {
    transition: all ease-in-out 0.2s;
    position: relative;
    height: 168px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333;
    padding: 0 2.4rem 7.2rem;
    flex-direction: column;
    z-index: 1;
}

.item_wrap .item_list .desc:before {
    transition: all ease-in-out 0.2s;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #666;
}

.item_wrap .item_list .desc .name {
    font-size: 18px;
    color: #fff;
    font-family: 'Roboto';
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.item_wrap .item_list .state {
    font-size: 0;
    margin-top: 2px;
}

.item_wrap .item_list .state span {
    display: inline-block;
    vertical-align: top;
    font-family: 'Roboto';
    color: #fd0;
    letter-spacing: 0.02em;
    border-radius: 4px;
    padding: 2px 0.6rem 1px;
    text-transform: uppercase;
    border: 1px solid #fd0;
    font-size: 11px;
    margin: 3px;
}

.item_wrap .item_list .state .hot {
    color: #f5e;
    border-color: #f5e;
}

.item_wrap .item_list .state .limit {
    color: #6f3;
    border-color: #6f3;
}

.item_wrap .item_list .state .random {
    color: #4bf;
    border-color: #4bf;
}

.item_wrap .item_list .desc .price {
    padding: 0.9rem 0.4rem 0.9rem 0;
    position: absolute;
    bottom: 2.4rem;
    left: 2.4rem;
    right: 2.4rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.6rem;
    margin-top: 1.9rem;
    font-size: 25px;
    color: #fff;
    font-weight: 700;
    font-family: 'Roboto';
}

.item_wrap .item_list .desc .price img {
    vertical-align: middle;
    position: relative;
    top: -2px;
    margin-right: 0.8rem;
}

.item_wrap .item_list .desc .price .del_line {
    color: #aaa;
    position: relative;
}

.item_wrap .item_list .desc .price .del_line:after {
    content: '';
    margin: 0 0.7rem;
    display: inline-block;
    width: 2.4rem;
    height: 0.9rem;
    background: url('../../images/common/webshop/icon_del.png') right center no-repeat;
    background-size: 100% auto;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.item_wrap .item_list .desc .price .del_line:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 3.6rem;
    height: 1px;
    background: #aaa;
    top: 50%;
}

.item_wrap .item_list .desc .price .del_line + font {
    color: #ff0;
}

.item_wrap .item_list .desc .price .c_txt {
    margin-right: 0.8rem;
    display: inline-block;
    vertical-align: middle;
    font-size: 11px;
    color: #000;
    padding: 0.4rem 0.5rem 0.3rem 0.6rem;
    position: relative;
    top: -2px;
    text-transform: uppercase;
    background: #ff0;
    border-radius: 0.4rem;
    line-height: 1;
    letter-spacing: 0.01rem;
    font-family: 'Roboto';
}

.item_wrap .item_list .desc .price .c_txt + font {
    color: #ff0;
}

.item_wrap .item_list .soldout .desc .price {
    display: none;
}

.item_wrap .item_list .soldout .con:before {
    content: '';
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    z-index: 11;
    border-radius: 0;
    border: 1px solid #000;
}

.item_wrap .item_list .soldout .info {
    border-color: #555 !important;
    color: #555 !important;
    border-width: 0.2rem !important;
}

.item_wrap .item_list .soldout .info:after {
    display: none !important;
}

.item_wrap .item_list .soldout .info li {
    border-color: #555 !important;
    color: #f44 !important;
}

.item_wrap .item_list .soldout .info span {
    color: #999 !important;
}

.item_wrap .item_list .soldout .info span:last-child {
    color: #999 !important;
}

.item_wrap .item_list .soldout .info font {
    color: #999 !important;
}

.item_wrap .item_list .soldout .txt {
    height: 48px;
    line-height: 48px;
    border-radius: 0.6rem;
    bottom: 2.4rem;
    left: 1.2rem;
    right: 1.2rem;
    z-index: 11;
    position: absolute;
    color: #f44;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: 'Chakra Petch';
    background: rgba(0, 0, 0, 0.9);
}

.item_wrap .item_list .soldout .info .through {
    text-align: left;
    color: #f44 !important;
    text-decoration: line-through;
}

.lv_wrap {
    display: inline-block;
    width: max-content;
    transition: background ease-in-out 0.2s;
    font-size: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    background: #333;
    border-radius: 0.8rem 0.8rem 0 0;
    padding: 0.8rem 0.8rem 0;
    box-shadow: 0 0 4.8rem rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

.lv_wrap .lv {
    z-index: 1;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    position: relative;
    vertical-align: top;
    padding: 0 0.5rem;
    border: 1px solid #ddcc44;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0.6rem;
}

.lv_wrap .lv img {
    vertical-align: middle;
    width: 20px;
}

.lv_wrap .lv img:nth-child(2) {
    margin-left: 10px;
}

.lv_wrap .lv:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 6px;
    background: url('../../images/common/webshop/icon_lv.png') 0 0 no-repeat;
}

.lv_wrap .season {
    position: relative;
    z-index: 1;
    height: 30px;
    line-height: 31px;
    background: #d80;
    border-radius: 0.6rem;
    display: inline-block;
    vertical-align: top;
    text-transform: uppercase;
    font-size: 16px;
    font-family: 'Roboto';
    font-weight: 500;
    color: #fff;
    padding: 0 1.2rem;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.lv_wrap .season.two {
    font-size: 0;
    line-height: 1;
    text-align: center;
}

.lv_wrap .season.two span {
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 1.6rem;
    padding-top: 0.4rem;
}

.lv_wrap .season.two span:last-child {
    margin-right: 0;
}

.lv_wrap .season.two font {
    display: block;
    font-size: 10px;
    color: #fda;
}

.lv_wrap .season.two:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 6px;
    background: url('../../images/common/webshop/icon_lv02.png') 0 0 no-repeat;
}

.lv_wrap .lv + .season {
    margin-left: 0.8rem;
    padding: 0 1.2rem;
}

.lv_wrap.over {
    background-color: rgba(0, 0, 0, 0.6) !important;
    z-index: 10;
    box-shadow: none;
}

.item_wrap .item_list .sale {
    padding-top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(to bottom, #f40, #f73);
    top: 1.2rem;
    right: 1.2rem;
    position: absolute;
    border-radius: 50%;
    width: 7.2rem;
    height: 7.2rem;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.item_wrap .item_list .sale font {
    display: block;
    margin-top: -3px;
    font-family: 'Roboto';
    font-size: 20px;
    color: #ff0;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding-left: 0.2rem;
}

.item_wrap .item_list .info {
    margin-top: 1.2rem !important;
    word-break: break-word;
    position: relative;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 0.6rem;
    border: 0.2rem solid #0e1;
    font-family: 'Roboto';
    font-weight: 400;
    color: #6f3;
    -webkit-backdrop-filter: var(--bg_blur);
    backdrop-filter: var(--bg_blur);
}

.item_wrap .item_list .info li {
    justify-content: space-between;
    padding: 1rem 1.2rem;
    display: flex;
    position: relative;
    text-align: left;
    font-size: 12px;
    min-height: 36px;
    align-items: center;
    border-bottom: 1px solid rgba(0, 238, 17, 0.5);
    letter-spacing: 0;
}

.item_wrap .item_list .info li:last-child {
    border-bottom: 0;
}

.item_wrap .item_list .info span {
    display: block;
    flex-grow: 1;
    text-align: left;
}

.item_wrap .item_list .info span:last-child {
    color: #ff0;
    text-align: right;
}

.item_wrap .item_list .info font {
    color: #fff;
}

.item_wrap .item_list .rate {
    padding: 0.7rem 2.4rem;
    display: inline-block;
    border-radius: 18px;
    background: rgba(119, 51, 0, 0.9);
    margin-bottom: 2.4rem;
    font-size: 17px;
    color: #fff;
    font-weight: 500;
    color: #fff;
    font-family: 'Roboto';
}

.item_wrap .item_list .rate > span {
    top: -2px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 1.2rem;
    position: relative;
    width: 11.4rem;
}

.item_wrap .item_list .rate > span img {
    vertical-align: middle;
}

.item_wrap .item_list .rate .ing {
    display: block;
    position: absolute;
    top: 2px;
    bottom: 0;
    left: 0;
    width: 100%;
    background: url('../../images/common/webshop/star_rating_on.png') 0 center no-repeat;
    background-size: 11.4rem auto;
}

.item_wrap .item_list .lock {
    padding-top: 14.4rem;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url('../../images/common/webshop/bg_lock_icon.png') left 8px top 8px no-repeat, url('../../images/common/webshop/bg_lock_icon.png') right 8px top 8px no-repeat, url('../../images/common/webshop/bg_lock_icon.png') left 8px bottom 8px no-repeat, url('../../images/common/webshop/bg_lock_icon.png') right 8px bottom 8px no-repeat;
    ; background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid #999;
    border-radius: 0.6rem;
    z-index: 2;
}

.item_wrap .item_list .lock:after {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background: url(../../images/common/webshop/lock_hide_lt.png) no-repeat 0 0, url(../../images/common/webshop/lock_hide_rt.png) no-repeat right 0, url(../../images/common/webshop/lock_hide_rb.png) no-repeat right bottom, url(../../images/common/webshop/lock_hide_lb.png) no-repeat 0 bottom;
    z-index: 1;
}

.item_wrap .item_list .lock img {
    margin: 0 6px;
    max-width: calc((100% - 72px) / 2);
}

.item_wrap .item_list .lock.prm {
    border-color: #ec0;
}

.item_wrap .item_list .special .item .img {
    background: url('../../images/common/webshop/bg_special.jpg') center center no-repeat;
    background-size: cover;
}

.item_wrap .item_list .special .item:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #7e2;
}

.item_wrap .item_list .special .item:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-image: linear-gradient(to bottom, #7e2, rgba(0, 0, 0, 0));
    border-image-slice: 1 !important;
}

.item_wrap .item_list .random .item .img {
    background: url('../../images/common/webshop/bg_randombox.jpg') center center no-repeat;
    background-size: cover;
}

.item_wrap .item_list .random .item:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #4cf;
}

.item_wrap .item_list .random .item:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-image: linear-gradient(to bottom, #4cf, rgba(0, 0, 0, 0));
    border-image-slice: 1 !important;
}

/* .item_wrap .item_list .random .info {border-color:#43cafb; color:#33ccff;}
.item_wrap .item_list .random .info li {border-color:rgba(51, 204, 255, 0.5);}
.item_wrap .item_list .random .info:before, .item_wrap .item_list .random .info:after {background:rgba(51, 204, 255, 0.5);} */
.item_wrap .item_list .con:hover {
    box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.4);
}

.item_wrap .item_list .con:hover .desc {
    background: #000;
}

.item_wrap .item_list .con:hover .desc:before {
    width: 100%;
    transition: all ease-in-out 0.2s;
}

.item_wrap .item_list .con:hover .lv_wrap {
    background: #000 !important;
}

.item_wrap .item_list .con:hover .desc .price {
    background: rgba(255, 255, 255, 0.15);
}

.item_wrap .item_list .special .con:hover .desc:before {
    background: #7e2;
}

.item_wrap .item_list .random .con:hover .desc:before {
    background: #4cf;
}

.item_wrap .item_list .con:hover .lock {
    background: none;
    border: none;
    top: auto;
    bottom: 172px;
    left: 1.2rem ;
    right: auto;
    padding-top: 0;
}

.item_wrap .item_list .con:hover .lock img {
    display: block;
    margin: 6px 0;
    max-width: 100%;
}

.item_wrap .item_list .con:hover .lock:after {
    display: none;
}

.item_wrap .item_list .con:hover .lv_wrap.over {
    background: #000 !important;
}

.item_wrap .item_list .con .lock.out {
    background: none;
    border: none;
    top: auto;
    bottom: 172px;
    left: 1.2rem ;
    right: auto;
    padding-top: 0;
}

.item_wrap .item_list .con .lock.out img {
    display: block;
    margin: 6px 0;
    max-width: 100%;
}

.item_wrap .item_list .con .lock.out:after {
    display: none;
}

.item_wrap .item_list .soldout .con:hover {
    box-shadow: none;
}

.item_wrap .item_list .soldout .con:hover .lv_wrap {
    background: #333 !important;
}

.item_wrap .item_list .soldout .con:hover .desc {
    background: #333;
}

.item_wrap .item_list .soldout .con:hover .desc:before {
    width: 0;
}

.item_wrap .row_list {
    margin-left: -2.4rem;
}

.item_wrap .row_list > li {
    width: 50%;
    padding-left: 2.4rem;
    margin-bottom: 2.4rem !important;
}

.item_wrap .row_list .con {
    font-size: 0;
    display: flex;
}

.item_wrap .row_list .item {
    width: 132px;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 0;
    z-index: 0;
    background: rgba(255, 255, 255, 0.15) url('../../images/common/webshop/ptn_noise.png') 0 0 repeat;
}

.item_wrap .row_list .desc {
    height: 132px;
    width: calc(100% - 132px);
    display: flex;
    vertical-align: top;
    padding: 0 3.6rem;
    align-items: flex-start;
    text-align: left;
    background: #333 url('../../images/common/webshop/ptn_noise.png') 0 0 repeat;
}

.item_wrap .row_list .desc .price {
    position: static;
    background: none;
    border-radius: 0;
    padding: 0;
    margin-top: 1.2rem;
}

.item_wrap .row_list .desc .name {
    font-size: 16px;
    color: #ccc;
    letter-spacing: 0.02em;
    font-family: 'Roboto';
}

.item_wrap .row_list .desc .name {
    display: inline-block;
    max-width: calc(100% - 140px);
    padding-right: 152px;
    position: relative;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    word-wrap: normal;
    white-space: nowrap;
}

.item_wrap .row_list .desc .term {
    position: absolute;
    top: 0;
    right: 0;
    padding-left: 1.2rem;
    width: 140px;
}

.item_wrap .row_list .desc .term:before {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: 1.6rem;
    background: rgba(255, 255, 255, 0.3);
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
}

.item_wrap .row_list .date {
    font-size: 15px;
    font-weight: 500;
    color: #aaa;
    font-family: 'Roboto';
    margin-bottom: 0.8rem;
}

.item_wrap .row_list .con:hover .desc .price {
    background: none;
}

.item_wrap .row_list .con:hover .desc .name {
    color: #6f8;
}

.item_wrap .item_list .etc {
    font-size: 0;
}

.item_wrap .item_list .etc .unit {
    text-align: center;
    font-size: 0;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8.4rem;
    font-family: 'Roboto';
}

.item_wrap .item_list .etc .unit * {
    height: 48px;
    line-height: 48px;
}

.item_wrap .item_list .etc .unit a {
    position: relative;
    background-color: rgba(255, 255, 255, 0.05);
    font-family: 'Roboto';
    color: #aaa;
    font-size: 16px;
    letter-spacing: 0.01em;
    width: 48px;
    box-shadow: inset 0 0 0 1px #888;
    vertical-align: middle;
}

.item_wrap .item_list .etc .unit a:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 12px;
    height: 12px;
}

.item_wrap .item_list .etc .unit a.minus {
    border-radius: 6px 0 0 6px;
}

.item_wrap .item_list .etc .unit a.minus:before {
    background-image: url('../../images/common/webshop/img_minus.html');
}

.item_wrap .item_list .etc .unit a.plus {
    border-radius: 0 6px 6px 0;
}

.item_wrap .item_list .etc .unit a.plus:before {
    background-image: url('../../images/common/webshop/img_plus.png');
}

.item_wrap .item_list .etc .unit a:hover {
    background-color: rgba(102, 255, 136, 0.2);
    box-shadow: inset 0 0 0 1px #6f8;
}

.item_wrap .item_list .etc .unit a:hover:before {
    background-position: 0 -12px;
}

.item_wrap .item_list .etc .unit .txt {
    border-top: 1px solid #888;
    border-bottom: 1px solid #888;
    min-width: 9.6rem;
    padding: 0 1.2rem;
    display: inline-block;
    color: #aaa;
    font-size: 16px;
    letter-spacing: 0.01em;
    vertical-align: middle;
}

.item_wrap .item_list .etc .unit .txt span {
    color: #fff;
}

.item_wrap .item_list .etc .btns {
    display: inline-block;
    vertical-align: middle;
}

.item_wrap .item_list .etc .btns a {
    width: 132px;
    text-transform: uppercase;
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    border-radius: 0.8rem;
}

.item_wrap .item_list .etc .btns .btn_delete {
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 1px 1px 0px rgba(255, 255, 255, 0.2), inset 0 -1px 1px #66ff99, inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    color: #bbb;
    height: 36px;
    line-height: 36px;
    background: rgba(255, 255, 255, 0.05);
}

.item_wrap .item_list .etc .btns .btn_order {
    box-shadow: inset 0 1px 1px #4cf, inset 0 1px 1px 0px #4cf, inset 0 -1px 1px #6f8, inset 0 0 0 1px #4cf;
    color: #4cf;
    height: 48px;
    line-height: 48px;
    background: rgba(17, 187, 255, 0.1);
    margin-top: 1.2rem;
}

.item_wrap .item_list .etc .btns a:hover {
    box-shadow: inset 0 0 0 1px #6f8;
    color: #6f8;
    background: rgba(102, 255, 136, 0.2);
}

.main > .new {
    background: url('../../images/common/webshop/bg_new.jpg') center center no-repeat;
    background-size: cover;
    border-top: 1px solid transparent;
    border-image: linear-gradient(to right, #d6f, #fd0, #d6f);
    border-image-slice: 1;
}

.new .tit_wrap h3 span {
    color: #fd0;
}

.new .tit_wrap .btn_more:before {
    background-image: url(../../images/common/webshop/icon_more02.png);
}

.new .tit_wrap h4 {
    color: #dcf;
}

.new .item_wrap .item_list .img {
    background-color: rgba(85, 34, 136, 0.6);
}

.new .lv_wrap {
    background: #259;
}

.new .lv_wrap.over {
    background: rgba(0, 0, 0, 0.6);
}

.new .item_wrap .item_list .soldout .con:hover .lv_wrap {
    background: #259!important;
}

.new .item_wrap .item_list .desc {
    background: url('../../images/common/webshop/ptn_gnb.png') 0 0 repeat, linear-gradient(to bottom, #259, #186);
}

.new .item_wrap .item_list .desc .price .del_line {
    color: #6f8;
}

.new .item_wrap .item_list .desc .price .del_line:before {
    background: #6f8;
}

.new .item_wrap .item_list .desc .price .del_line:after {
    background: url(../../images/common/webshop/icon_del02.png) 0 0 no-repeat;
}

.main > .sale {
    background: #111;
    border-top: 1px solid transparent;
    border-image: linear-gradient(to right, #4cf, #6f8, #4cf);
    border-image-slice: 1;
}

.sale .tit_wrap h3 span {
    color: #f60;
}

.main .star {
    background: url('../../images/common/webshop/bg_star.jpg') center center no-repeat;
    background-size: cover;
    border-top: 1px solid transparent;
    border-image: linear-gradient(to right, #e77, #fb8, #e77);
    border-image-slice: 1;
}

.star .tit_wrap h3 span {
    color: #fe0;
}

.star .tit_wrap h4 {
    color: #ccc;
}

.star .item_wrap .item_list .img {
    background-color: rgba(136, 51, 17, 0.3);
}

.star .lv_wrap {
    background: #820;
}

.star .lv_wrap.over {
    background: rgba(0, 0, 0, 0.6);
}

.star .item_wrap .item_list .soldout .con:hover .lv_wrap {
    background: #820 !important;
}

.star .item_wrap .item_list .desc {
    background: url('../../images/common/webshop/ptn_gnb.png') 0 0 repeat, linear-gradient(to bottom, #820, #940);
}

.star .item_wrap .item_list .desc .price .del_line {
    color: #6f8;
}

.star .item_wrap .item_list .desc .price .del_line:before {
    background: #6f8;
}

.star .item_wrap .item_list .desc .price .del_line:after {
    background: url(../../images/common/webshop/icon_del02.png) 0 0 no-repeat;
}

.star .tit_wrap .btn_more:before {
    background-image: url(../../images/common/webshop/icon_more03.png);
}

.main .pick {
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
    border-top: 1px solid transparent;
    border-image: linear-gradient(to right, #fe0, #6f8, #fe0);
    border-image-slice: 1;
}

.pick .tit_wrap h3 {
    text-transform: none;
}

.pick .tit_wrap h3 span {
    color: #6f8;
}

.pick .tit_wrap h4 {
    color: #fff;
}

.pick .slide_wrap {
    position: relative;
}

.pick .swiper-slide > a {
    border-radius: 2.4rem;
    overflow: hidden;
    position: relative;
    display: block;
}

.pick .swiper-slide > a:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 2.4rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.1), inset 0px 0px 1px rgba(255, 255, 255, 0.1);
}

.pick .swiper-slide > a:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 1.2rem;
    right: 1.2rem;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url('../../images/common/webshop/btn_more.png');
}

.pick .swiper-slide > a:hover:after {
    background-position: 0 -36px;
}

.pick .swiper-slide > a img {
    width: 100%;
}

.pick .swiper-button-next, .pick .swiper-button-prev {
    margin: 0 2.4rem;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 3.6rem;
    height: 3.7rem;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 0.4rem;
    right: auto;
    left: auto;
}

.pick .swiper-button-next:before, .pick .swiper-button-prev:before {
    top: -0.1rem;
    left: -0.1rem;
    content: '';
    display: block;
    position: absolute;
    width: 3.8rem;
    height: 3.8rem;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url('../../images/common/webshop/arr_bg02.png');
}

.pick .swiper-button-next:after, .pick .swiper-button-prev:after {
    top: -0.1rem;
    left: -0.1rem;
    content: '';
    display: block;
    position: absolute;
    width: 3.8rem;
    height: 3.8rem;
    background-position: 0 0;
    background-repeat: no-repeat;
}

.pick .swiper-button-prev:after {
    background-image: url('../../images/common/webshop/arr_s.png');
}

.pick .swiper-button-next:after {
    background-image: url('../../images/common/webshop/arr_s.png');
    transform: scaleX(-1);
}

.pick .swiper-button-next:hover, .pick .swiper-button-prev:hover {
    background-color: rgba(102, 255, 136, 0.2);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
}

.pick .swiper-button-next:hover:before, .pick .swiper-button-prev:hover:before {
    background-position: 0 -3.8rem;
}

.pick .swiper-button-next:hover:after, .pick .swiper-button-prev:hover:after {
    background-position: 0 -3.8rem;
}

.pick .swiper-button-next.swiper-button-disabled, .pick .swiper-button-prev.swiper-button-disabled {
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
}

.pick .swiper-button-next.swiper-button-disabled:before, .pick .swiper-button-prev.swiper-button-disabled:before {
    display: none;
}

.pick .swiper-button-next.swiper-button-disabled:after, .pick .swiper-button-prev.swiper-button-disabled:after {
    background-position: 0 0;
}

.pick .swiper-pagination {
    padding: 0;
    margin-top: 0;
}

.pick .slide_wrap {
    padding-left: 45.6rem;
    position: relative;
}

.pick .slide_wrap .md_img {
    position: absolute;
    left: 0;
    bottom: -7.2rem;
    width: 45.6rem;
}

.pick .item_wrap .item_list {
    margin-left: 0;
    margin-bottom: 4.8rem;
}

.pick .item_wrap .item_list > li {
    padding-left: 2.4rem;
}

.pick .item_wrap .item_list .img {
    background: rgba(255, 255, 255, 0.08);
}

.pick .item_wrap .item_list .desc {
    background: #333 url('../../images/common/webshop/ptn_gnb.png') 0 0 repeat;
}

/* .pick .lv_wrap {background: #404040;} */
.pick .tit_wrap .btn_more {
    color: #ccc;
}

.pick .tit_wrap .btn_more:hover {
    color: #fff;
}

.pick .swiper-pagination {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.pick .swiper-pagination-bullet {
    background: #fff;
}

.pick .swiper-pagination-bullet-active {
    background: linear-gradient(to right, #4cf, #6f8);
    width: 48px;
}

/* sub */
.sub_contents {
    padding-top: 192px;
    padding-bottom: 9.6rem;
    background: #151515 url('../../images/common/webshop/bg_sub.jpg') center 0 no-repeat;
    background-size: 100% auto;
    min-height: 64rem;
}

.sub_contents .wrap {
    background: #151515 url('../../images/common/webshop/bg_sub02.jpg') center 0 no-repeat;
    background-size: 100% auto;
    padding-top: 192px;
    margin-top: -192px;
    margin-bottom: -9.6rem;
    padding-bottom: 9.6rem;
}

.sub_contents .view_wrap {
    overflow: hidden;
    background: #151515 url('../../images/common/webshop/ptn_noise.png') 0 0 repeat;
}

.sub_contents .random_wrap {
    background: #151515 url('../../images/common/webshop/bg_sub03.jpg') center 0 no-repeat;
    background-size: 100% auto;
}

.sub_contents .battle_wrap {
    background: #151515 url('../../images/common/webshop/bg_sub04.jpg') center 0 no-repeat;
    background-size: 100% auto;
}

.sub_contents .field_wrap {
    background: url('../../images/common/webshop/bg_field.jpg') center 0 no-repeat;
    background-size: 100% auto;
}

.sub_contents .prepare_wrap {
    background: url('../../images/common/webshop/bg_prepare.jpg') center center no-repeat;
    background-size: cover;
}

.sub_contents .error_wrap {
    background: url('../../images/common/webshop/bg_error.jpg') center center no-repeat;
    background-size: cover;
}

.sub_contents .gold_wrap {
    background: url('../../images/common/webshop/bg_gold.jpg') center 0 no-repeat;
    background-size: 100% auto;
}

.sub_contents .goods {
    padding: 0;
}

.sub_contents .item_wrap .item_list > li {
    margin-bottom: 3.8rem;
}

.sub_contents .item_wrap .paging_wrap {
    margin-top: 3.4rem;
}

.sub_contents .pick .inner {
    padding-left: 0;
    padding-right: 0;
}

.sub_contents .md_banner {
    box-shadow: 0 2.4rem 7.2rem rgba(0, 0, 0, 0.4);
    border-radius: 1.2rem;
    display: flex;
    background: url('../../images/common/webshop/bg_md.html') center center no-repeat;
    height: 20.4rem;
    align-items: center;
    overflow: hidden;
    margin-bottom: 7.2rem;
    background-size: cover;
}

.sub_contents .md_banner .txt {
    flex-basis: 25%;
    padding-left: 7.2rem;
    text-align: left;
    font-size: 34px;
    color: #000;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.sub_contents > .new {
    background: #2a1469 url('../../images/common/webshop/bg_sub_new.jpg') center 0 no-repeat;
    background-size: 100% auto;
    padding-top: 192px;
    margin-top: -192px;
    margin-bottom: -9.6rem;
    padding-bottom: 9.6rem;
}

.sub_contents > .star {
    background: #190901 url('../../images/common/webshop/bg_sub_star.jpg') center 0 no-repeat;
    background-size: 100% auto;
    padding-top: 192px;
    margin-top: -192px;
    margin-bottom: -9.6rem;
    padding-bottom: 9.6rem;
}

.sub_contents > .sale {
    background: #151515 url('../../images/common/webshop/bg_sub_sale.jpg') center 0 no-repeat;
    background-size: 100% auto;
    padding-top: 192px;
    margin-top: -192px;
    margin-bottom: -9.6rem;
    padding-bottom: 9.6rem;
}

.tag_wrap {
    font-size: 0;
    margin-bottom: 2.4rem;
    text-align: left;
}

.tag_wrap .tag {
    display: block;
    width: max-content;
    margin: 12px 0;
    border: 1px solid rgba(255, 255, 255, 0);
    font-size: 16px;
    color: #fff;
    font-family: 'Roboto';
    letter-spacing: 0.01em;
    padding: 1.3rem 2.4rem 1.4rem 2rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6rem 6rem 6rem 0;
    max-width: 100%;
    word-break: break-all;
}

.tag_wrap .tag:before {
    position: relative;
    top: -1px;
    width: 12px;
    height: 12px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url('../../images/common/webshop/icon_tag.png');
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.8rem;
}

.tag_wrap .tag.on {
    color: #6f8;
    border-color: #6f8;
    background: rgba(102, 255, 136, 0.15);
}

.tag_wrap .tag.on:before {
    background-position: 0 -12px;
}

.tag_wrap .tag:hover {
    color: #4cf;
    border-color: #4cf;
    background: rgba(68, 204, 255, 0.15);
}

.tag_wrap .tag:hover:before {
    background-position: 0 -24px;
}

.pick .tit_wrap + .tag_wrap {
    margin-top: -4rem;
}

.pick .tag_wrap .tag {
    margin: 0;
    padding: 0.8rem 2.4rem;
    border-radius: 1.8rem 1.8rem 1.8rem 0;
}

.pick .tag_wrap .tag:before {
    display: none;
}

.pick .tag_wrap .tag:hover {
    border: 1px solid rgba(255, 255, 255, 0);
    coloR: #fff;
    background: rgba(255, 255, 255, 0.15);
}

.search_wrap {
    margin: 0 auto 7.2rem;
    max-width: 456px;
    height: 48px;
    border-radius: 6px;
    border: 1px solid #4cf;
    border-top: 1px solid #6f8;
    overflow: hidden;
    position: relative;
    background: linear-gradient(to bottom, rgba(38, 204, 255, 0.1), rgba(102, 255, 136, 0.1));
}

.search_wrap:focus-within {
    border: 1px solid #4cf;
    background: rgba(68, 204, 255, 0.1);
}

.search_wrap:focus-within:before {
    display: none;
}

.search_wrap .search_area {
    position: relative;
    padding-right: 5.8rem;
    padding-left: 2.4rem;
    height: 46px;
}

.search_wrap .search_area input[type=text] {
    background: none;
    border: none;
    font-size: 16px;
    color: #fff;
    width: 100%;
    height: 100%;
    font-family: 'Roboto';
    letter-spacing: 0.02em;
}

.search_wrap .search_area input[type=text]::placeholder {
    color: #4cf;
    letter-spacing: 0.03em;
}

.search_wrap .search_area input[type=text]:focus::placeholder {
    color: #fff;
}

.search_wrap .search_area button {
    cursor: pointer;
    position: absolute;
    top: 50%;
    margin-top: -24px;
    right: 0;
    width: 48px;
    height: 48px;
    background-image: url('../../images/common/webshop/icon_search.png');
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0);
    font-size: 0;
}

.search_wrap_y {
    border: 1px solid #da4;
    border-top-color: #ff6;
    background: linear-gradient(to bottom, rgba(255, 255, 102, 0.1), rgba(221, 170, 68, 0.1));
}

.search_wrap_y .search_area input[type=text] {
    color: #ed6;
}

.search_wrap_y .search_area input[type=text]::placeholder {
    color: #ed6;
}

.search_wrap_y .search_area button {
    background-image: url(../../images/common/webshop/icon_search02.png);
}

.search_wrap_y:focus-within {
    border: 1px solid #ff0;
    background: rgba(255, 255, 102, 0.1);
}

/* list */
.list_wrap {
    position: relative;
    font-size: 0;
}

.list_wrap .tag_wrap +.item_wrap {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 348px);
}

.list_wrap .tag_wrap +.item_wrap .item_list {
    margin-left: -2.4rem;
}

.list_wrap .tag_wrap +.item_wrap .item_list > li {
    width: 25%;
}

.list_wrap .tag_wrap {
    width: 348px;
    padding-right: 3.6rem;
    z-index: 2;
    display: inline-block;
    vertical-align: top;
}

.no_search {
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
    color: #fff;
    font-family: 'Roboto';
    font-size: 16px;
    line-height: 1.8;
    padding: 7.2rem 2.4rem;
    text-align: center;
    backdrop-filter: blur(5px);
    overflow: hidden;
    position: relative;
    border-radius: 6px;
    border-top: 1px solid #6f8;
    border-bottom: 1px solid #4cf;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    background: linear-gradient(to bottom, rgba(38, 204, 255, 0.1), rgba(102, 255, 136, 0));
    letter-spacing: 0.02rem;
}

.no_search span {
    color: #6f8;
}

.no_data {
    padding: 16rem 0;
    font-family: 'Roboto';
    color: #fff;
    text-align: center;
    font-size: 16px;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.1) url('../../images/common/webshop/ptn_noise.png') 0 0 repeat;
    border-radius: 1.2rem;
}

.explan {
    padding-left: 28px;
    text-indent: -28px;
    margin-top: 2.4rem;
    padding-top: 4.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 14px;
    color: #aaa;
    font-family: 'Roboto';
    letter-spacing: 0.01em;
    position: relative;
}

.explan:before {
    content: '';
    display: inline-block;
    position: relative;
    top: -1px;
    vertical-align: middle;
    left: 0;
    width: 20px;
    height: 20px;
    background: url('../../images/common/webshop/icon_info.png') 0 0 no-repeat;
    margin-right: 8px;
}

.explan span {
    color: #1bf;
}

.random_wrap .no_search {
    border-top: 1px solid #4cf;
    border-bottom: 1px solid #6f8;
}

.notic_area {
    overflow-y: scroll;
    max-height: 20.4rem;
    padding-right: 2.3rem;
    margin-bottom: 6rem;
}

.notic_area li {
    margin-bottom: 4px;
}

.notic_area li:last-child {
    margin-bottom: 0;
}

.notic_area .con {
    font-size: 0;
    font-family: 'Roboto';
    letter-spacing: 0.02em;
    color: #fff;
    border-radius: 6px;
    overflow: hidden;
    padding: 1.7rem 2.4rem 1.4rem 2.4rem;
    background: rgba(34, 0, 68, 0.8);
    position: relative;
    display: flex;
    align-items: center;
}

.notic_area .con:before, .notic_area .con:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.notic_area .con:before {
    border-radius: 6px 0 0 6px;
    border-left: 0.4rem solid #6f8;
    background: linear-gradient(to right, rgba(68, 204, 255, 0.6), rgba(102, 255, 136, 0.6));
}

.notic_area .con:after {
    background: url('../../images/common/webshop/ptn_noise.png') 0 0 repeat;
}

.notic_area .con > div {
    font-size: 14px;
    z-index: 1;
}

.notic_area .con .date {
    color: #6f8;
    padding-left: 24px;
    position: relative;
    flex-shrink: 0;
}

.notic_area .con .date:before {
    content: '';
    display: block;
    position: absolute;
    width: 12px;
    height: 12px;
    background: url('../../images/common/webshop/icon_notice.png') 0 0 no-repeat;
    top: 2px;
    left: 0;
}

.notic_area .con .txt {
    padding-left: 0.6rem;
    position: relative;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    height: 17px;
    word-break: break-all;
}

.notic_area .con .txt .item {
    color: #fe0;
}

.notic_area .con .txt .rdbox {
    color: #6f8;
    background: none;
    padding: 0;
}

.battle_wrap .my_pass {
    margin-bottom: 7.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    height: 20.4rem;
    border-radius: 12px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('../../images/common/webshop/bg_battle.png');
    position: relative;
    animation: bg-move 10s linear infinite;
}

.battle_wrap .my_pass:before, .battle_wrap .my_pass:after {
    content: '';
    display: block;
    position: absolute;
}

.battle_wrap .my_pass:before {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0));
    border-image-slice: 1;
}

.battle_wrap .my_pass:after {
    border-radius: 8px;
    top: 0.8rem;
    bottom: 0.8rem;
    left: 0.8rem;
    right: 0.8rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.battle_wrap .my_pass .pass {
    position: absolute;
    left: 6.6rem;
    top: 50%;
    transform: translate(0, -50%);
    width: 21.6rem;
    height: 9.6rem;
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.battle_wrap .my_pass .pass.free {
    background-image: url('../../images/common/webshop/pass_free.png');
}

.battle_wrap .my_pass .pass.prem {
    background-image: url('../../images/common/webshop/pass_premium.png');
}

.battle_wrap .my_pass .lv {
    padding-top: 8.1rem;
    width: 27.6rem;
    height: 27.6rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Roboto';
}

.battle_wrap .my_pass .lv:before, .battle_wrap .my_pass .lv:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    animation: aim 5s infinite linear;
}

.battle_wrap .my_pass .lv:before {
    background: url('../../images/common/webshop/bg_pass_lv.png') 0 0 no-repeat;
    background-size: 100% auto;
}

.battle_wrap .my_pass .lv:after {
    background: url('../../images/common/webshop/bg_pass_lv_arr.png') 0 0 no-repeat;
    background-size: 100% auto;
    animation-delay: 1s;
}

.battle_wrap .my_pass .lv .tit {
    display: block;
    text-transform: uppercase;
    color: #e96;
    font-size: 25px;
    letter-spacing: 0.02em;
    font-weight: 700;
    padding-left: 2px;
}

.battle_wrap .my_pass .lv .num {
    margin-top: -1.2rem;
    letter-spacing: -0.02em;
    font-size: 90px;
    font-weight: 900;
    filter: drop-shadow(0px 6px 24px rgba(68, 17, 17, 0.5));
    display: inline-block;
    background: -webkit-linear-gradient(#fff, #ffa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.battle_wrap .item_wrap .item_list .sale {
    background: #000 linear-gradient(to bottom, rgba(255, 255, 255, 0), #441111);
    border: 2px solid #fea;
}

.battle_wrap .item_wrap .item_list .sale font {
    color: #ffeeaa;
}

.battle_wrap .item_wrap .item_list .special .item:before {
    background: #ffeeaa;
}

.battle_wrap .item_wrap .item_list .special .item:after {
    border-image: linear-gradient(to bottom, #fea, rgba(0, 0, 0, 0));
}

.battle_wrap .item_wrap .item_list .special .item .img {
    background-image: url(../../images/common/webshop/battlepass/bg_bp_special.html);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.battle_wrap .item_wrap .item_list .random .item:before {
    background: #999;
}

.battle_wrap .item_wrap .item_list .random .item:after {
    border-image: linear-gradient(to bottom, #999, rgba(0, 0, 0, 0));
}

.battle_wrap .item_wrap .item_list .random .item .img {
    background-image: url(../../images/common/webshop/battlepass/bg_bp_random.html);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.battle_wrap .item_wrap .item_list .info {
    border-radius: 0;
    color: #ffaa66;
    border: 0.2rem solid rgba(255, 255, 255, 0);
    border-top-color: #ebd99b;
    border-bottom-color: #ffaa66;
}

.battle_wrap .item_wrap .item_list .info:after {
    content: '';
    display: block;
    position: absolute;
    top: -0.2rem;
    left: -0.2rem;
    right: -0.2rem;
    bottom: -0.2rem;
    border-left: 0.2rem solid transparent;
    border-right: 0.2rem solid transparent;
    border-image: linear-gradient(to bottom, #ffeeaa, #ffaa66);
    border-image-slice: 1 !important;
}

.battle_wrap .item_wrap .item_list .info li {
    border-color: #ebd99b;
}

.battle_wrap .item_wrap .item_list .info span:last-child {
    color: #ffaa66;
}

.battle_wrap .item_wrap .item_list .info font {
    color: #ffeeaa;
}

.battle_wrap .item_wrap .item_list .special .con:hover .desc:before {
    background: #ffeeaa;
}

.battle_wrap .item_wrap .item_list .random .con:hover .desc:before {
    background: #999;
}

/*** battle pass season concept start ***/
/* season18 hydra */
.sub_contents .battle_wrap_hydra {
    background: #050505 url('../../images/common/webshop/battlepass/2025/hydra/hydra_bg.html') center 0 no-repeat;
}

.battle_wrap_hydra .my_pass {
    border-top: none;
    background-image: url('../../images/common/webshop/battlepass/2025/hydra/hydra_top_bg.html');
    animation: none;
    box-shadow: inset 0 0 0 2px rgba(170, 204, 255, 0.4);
}

.battle_wrap_hydra .my_pass:before {
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
    border: none;
    background: url('../../images/common/webshop/battlepass/2025/hydra/hydra_top_frame_lt.html') no-repeat 0 0, url('../../images/common/webshop/battlepass/2025/hydra/hydra_top_frame_rt.html') no-repeat right 0, url('../../images/common/webshop/battlepass/2025/hydra/hydra_top_frame_lb.html') no-repeat 0 bottom, url('../../images/common/webshop/battlepass/2025/hydra/hydra_top_frame_rb.html') no-repeat right bottom;
}

.battle_wrap_hydra .my_pass:after {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    border: none;
    width: 452px;
    height: 240px;
    background: url('../../images/common/webshop/battlepass/2025/hydra/hydra_top_img.html') no-repeat 0 0;
}

.battle_wrap_hydra .my_pass .pass {
    left: 3.6rem;
    width: auto;
    height: auto;
}

.battle_wrap_hydra .my_pass .lv {
    padding-top: 8.1rem;
    font-family: 'Playfair Display';
    font-feature-settings: 'lnum', 'pnum';
    z-index: 2;
}

.battle_wrap_hydra .my_pass .lv:before {
    background: url('../../images/common/webshop/battlepass/2025/hydra/hydra_lv_bul.html') 0 0 no-repeat;
    background-size: auto;
    width: 56px;
    height: 72px;
    top: 4px;
    bottom: auto;
    left: 50%;
    right: auto;
    animation: none;
    margin-left: -28px;
    z-index: 1;
}

.battle_wrap_hydra .my_pass .lv:after {
    background: url('../../images/common/webshop/battlepass/2025/hydra/hydra_lv_bg.html') 0 0 no-repeat;
    background-size: 100% auto;
    animation: rotation 30s infinite linear;
}

.battle_wrap_hydra .my_pass .lv .tit {
    color: #d9f;
}

.battle_wrap_hydra .my_pass .lv .num {
    margin-top: -1.5rem;
    filter: none;
    background: -webkit-linear-gradient(#d9f, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.battle_wrap_hydra .item_wrap .item_list .img {
    background: url('../../images/common/webshop/battlepass/2025/hydra/hydra_thumb.html') 0 0 no-repeat;
    background-size: cover;
}

.battle_wrap_hydra .item_wrap .item_list .random .item .img {
    background: url('../../images/common/webshop/battlepass/2025/hydra/hydra_thumb_rb.html') 0 0 no-repeat;
    background-size: cover;
}

.battle_wrap_hydra .item_wrap .item_list .random .item:before {
    background: #ecf;
}

.battle_wrap_hydra .item_wrap .item_list .random .item:after {
    border-image: linear-gradient(to bottom, #ecf, rgba(0, 0, 0, 0));
    border-image-slice: 1;
}

.battle_wrap_hydra .item_wrap .item_list .lv_wrap {
    background: #310141;
}

.battle_wrap_hydra .item_wrap .item_list .desc {
    background: linear-gradient(to bottom, #415, #143);
}

.battle_wrap_hydra .item_wrap .item_list .sale {
    background: #509;
}

.battle_wrap_hydra .item_wrap .item_list .sale:before {
    padding: 0;
    mask-composite: revert;
    border-radius: 0;
    content: '';
    width: 90px;
    height: 84px;
    background: url('../../images/common/webshop/battlepass/2025/hydra/hydra_sale.html') 0 0 no-repeat;
    background-size: cover;
    position: absolute;
    top: -6px;
    left: -9px;
    display: block;
    animation: rotation 10s infinite linear;
}

.battle_wrap_hydra .item_wrap .item_list .sale font {
    color: #2fb;
}

.battle_wrap_hydra .item_wrap .item_list .special .con:hover .desc:before {
    background: #d7e;
}

.battle_wrap_hydra .item_wrap .item_list .random .con:hover .desc:before {
    background: #d7e;
}

.battle_wrap_hydra .item_wrap .item_list .special .item .img {
    background: url('../../images/common/webshop/battlepass/2025/hydra/hydra_thumb_sp.html') 0 0 no-repeat;
    background-size: cover;
}

.battle_wrap_hydra .item_wrap .item_list .special .item:before {
    background: #ffccff;
}

.battle_wrap_hydra .item_wrap .item_list .special .item:after {
    border-image: linear-gradient(to bottom, #ffccff, rgba(0, 0, 0, 0));
}

.battle_wrap_hydra .item_wrap .item_list .info {
    border-radius: 0;
    color: #dd77ee;
    border-color: #dd77ee;
}

.battle_wrap_hydra .item_wrap .item_list .info li {
    border-color: #dd77ee;
}

.battle_wrap_hydra .item_wrap .item_list .info span:last-child {
    color: #dd77ee;
}

.battle_wrap_hydra .item_wrap .item_list .info font {
    color: #22ffbb;
}

.battle_wrap_hydra .item_wrap .item_list .info:after {
    display: none;
}

/* season19 astel */
.sub_contents .battle_wrap_astel {
    background: #291a51 url('../../images/common/webshop/battlepass/2025/astel/bg_battle_astel.html') center -20px no-repeat;
}

.battle_wrap_astel .item_wrap .item_list .item {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    background-image: url('../../images/common/webshop/battlepass/2025/astel/bg_astel_base.html');
}

.battle_wrap_astel .item_wrap .item_list .sale {
    background: linear-gradient(to bottom, #ff4ef9, #0044ff);
    border: 0.2rem solid rgba(255, 255, 255, 0.5);
    color: #fff;
}

.battle_wrap_astel .item_wrap .item_list .sale:before {
    content: '';
    display: block;
    position: absolute;
    width: 130.9%;
    top: -6%;
    height: 117.65%;
    background: url('../../images/common/webshop/battlepass/2025/astel/astel_sale.html') 0 0 no-repeat;
    background-size: 100% auto;
    animation: rotation 10s infinite linear;
}

.battle_wrap_astel .item_wrap .item_list .sale font {
    color: #22ffbb;
}

.battle_wrap_astel .item_wrap .item_list .special .item:before {
    background: #ffccff;
}

.battle_wrap_astel .item_wrap .item_list .special .item:after {
    border-image: linear-gradient(to bottom, #ffccff, rgba(0, 0, 0, 0));
}

.battle_wrap_astel .item_wrap .item_list .special .item .img {
    background-image: url(../../images/common/webshop/battlepass/2025/astel/bg_astel_special.html);
}

.battle_wrap_astel .item_wrap .item_list .random .item:before {
    background: #99bbff;
}

.battle_wrap_astel .item_wrap .item_list .random .item:after {
    border-image: linear-gradient(to bottom, #99bbff, rgba(0, 0, 0, 0));
}

.battle_wrap_astel .item_wrap .item_list .random .item .img {
    background-image: url(../../images/common/webshop/battlepass/2025/astel/bg_astel_random.html);
}

.battle_wrap_astel .item_wrap .item_list .info {
    border-radius: 0;
    color: #b157df;
    border: 0.2rem solid #9e22ff;
}

.battle_wrap_astel .item_wrap .item_list .info:after {
    display: none;
}

.battle_wrap_astel .item_wrap .item_list .info li {
    border-color: #9e22ff;
}

.battle_wrap_astel .item_wrap .item_list .info span:last-child {
    color: #dd77ee;
}

.battle_wrap_astel .item_wrap .item_list .info font {
    color: #22ffbb;
}

.battle_wrap_astel .item_wrap .item_list .desc {
    background: linear-gradient(to bottom, #4778ff, #8501c9);
}

.battle_wrap_astel .item_wrap .item_list .special .con:hover .desc:before {
    background: #9e22ff;
}

.battle_wrap_astel .item_wrap .item_list .random .con:hover .desc:before {
    background: #9e22ff;
}

.battle_wrap_astel .search_wrap .search_area {
    background: linear-gradient(to right, rgb(48, 57, 247, 0.4), rgb(179, 165, 255, 0.4), rgb(111, 98, 237, 0.4), rgb(115, 214, 255, 0.4), rgb(63, 245, 240, 0.4), rgb(147, 86, 223, 0.4), rgb(255, 187, 253, 0.4), rgb(206, 50, 246, 0.4), rgb(48, 57, 247, 0.4));
}

.battle_wrap_astel .my_pass {
    border-top: 0px;
    border-radius: 100px;
    background-image: url(../../images/common/webshop/battlepass/2025/astel/bg_astel_lv.html);
}

.battle_wrap_astel .my_pass:before {
    border: none;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position: 0 center , right center;
    background-size: auto 100%;
    background-image: url(../../images/common/webshop/battlepass/2025/astel/bg_astel_lv_line.html) , url(../../images/common/webshop/battlepass/2025/astel/bg_astel_lv_line_r.html);
}

.battle_wrap_astel .my_pass:after {
    z-index: 2;
    border: none;
    content: '';
    display: block;
    position: absolute;
    width: 25.9rem;
    height: 25.3rem;
    margin-left: -12.95rem;
    margin-top: -12.65rem;
    animation: rotation 30s infinite linear;
    content: '';
    display: block;
    position: absolute;
    background: url('../../images/common/webshop/battlepass/2025/astel/bg_pass_lv_line.html') 0 0 no-repeat;
    top: 50%;
    left: 50%;
    background-size: 100% auto;
}

.battle_wrap_astel .my_pass .pass {
    width: 21rem;
    z-index: 3;
}

.battle_wrap_astel .my_pass .pass.free {
    background-image: url('../../images/common/webshop/battlepass/2025/astel/pass_free.html');
}

.battle_wrap_astel .my_pass .pass.prem {
    background-image: url('../../images/common/webshop/battlepass/2025/astel/pass_premium.html');
}

.battle_wrap_astel .lv_wrap {
    background: #310141;
}

.battle_wrap_astel .my_pass .lv {
    z-index: 2;
    font-family: 'proxima-soft';
    width: 25.9rem;
    height: 25.3rem;
    background: none;
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: url('../../images/common/webshop/battlepass/2025/astel/bg_pass_lv.html') 0 0 no-repeat;
}

.battle_wrap_astel .my_pass .lv:before, .battle_wrap_astel .my_pass .lv:after {
    z-index: -2;
    display: block;
    position: absolute;
    height: 26rem;
    background-repeat: no-repeat;
    background-position: 0 0;
    animation: none;
    top: auto;
    left: auto;
    right: auto;
    bottom: 2.4rem;
}

.battle_wrap_astel .my_pass .lv:before {
    width: 24.6rem;
    background-image: url('../../images/common/webshop/battlepass/2025/astel/lv_astel_l.html');
    left: -220px;
}

.battle_wrap_astel .my_pass .lv:after {
    width: 29.1rem;
    background-image: url('../../images/common/webshop/battlepass/2025/astel/lv_astel_r.html');
    right: -265px;
}

.battle_wrap_astel .my_pass .lv .tit {
    font-weight: 900;
    font-size: 30px;
    letter-spacing: 0.05em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.4));
}

.battle_wrap_astel .my_pass .lv .num {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.4));
    letter-spacing: 0;
}

/* season20 aero */
.sub_contents .battle_wrap_aero {
    background: rgba(0, 222, 255, 0.5) url('../../images/common/webshop/battlepass/2025/aero/bg_battle_aero.html') center 0 no-repeat;
}

.battle_wrap_aero .my_pass {
    animation: none;
    margin-bottom: 10rem;
    padding: 1.8rem 1.6rem;
    background: url('../../images/common/webshop/battlepass/2025/aero/bg_bp_gage.html') left 12% bottom 0 no-repeat , url('../../images/common/webshop/battlepass/2025/aero/bg_bp_gage.html') right 12% bottom 0 no-repeat;
    backdrop-filter: var(--bg_blur);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0;
}

.battle_wrap_aero .my_pass:before {
    z-index: 1;
    top: 1.7rem;
    bottom: 1.7rem;
    left: 1.4rem;
    right: 1.4rem;
    border: none;
    background: url('../../images/common/webshop/battlepass/2025/aero/bg_shd_lt.html') 0 0 no-repeat , url('../../images/common/webshop/battlepass/2025/aero/bg_shd_lb.html') 0 bottom no-repeat, url('../../images/common/webshop/battlepass/2025/aero/bg_shd_rt.html') right 0 no-repeat, url('../../images/common/webshop/battlepass/2025/aero/bg_shd_rb.html') right bottom no-repeat;
}

.battle_wrap_aero .my_pass:after {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: none;
    border-radius: 0;
    background: url('../../images/common/webshop/battlepass/2025/aero/bg_arr_lt.html') 0 0 no-repeat , url('../../images/common/webshop/battlepass/2025/aero/bg_arr_lb.html') 0 bottom no-repeat, url('../../images/common/webshop/battlepass/2025/aero/bg_arr_rt.html') right 0 no-repeat, url('../../images/common/webshop/battlepass/2025/aero/bg_arr_rb.html') right bottom no-repeat;
}

.battle_wrap_aero .my_pass .bg {
    background: url('../../images/common/webshop/battlepass/2025/aero/bg_bp_deco.html') left 50% bottom 33% no-repeat, url('../../images/common/webshop/battlepass/2025/aero/bg_bp_lv.html') 0 0 repeat;
    background-size: 64.8% auto, auto;
    position: absolute;
    top: 1.7rem;
    bottom: 1.7rem;
    left: 1.4rem;
    right: 1.4rem;
    border: 0.2rem solid #f6ff00;
    border-left: 0.4rem solid #f21d7a;
    border-right: 0.4rem solid #fff;
    clip-path: polygon(2.3rem 0, calc(100% - 2.3rem) 0, 100% 2.3rem, 100% calc(100% - 2.3rem), calc(100% - 2.3rem) 100%, 2.3rem 100%, 0 calc(100% - 2.3rem), 0 2.3rem);
}

.battle_wrap_aero .my_pass .pass.free {
    background-image: url('../../images/common/webshop/battlepass/2025/aero/pass_free.html');
}

.battle_wrap_aero .my_pass .pass.prem {
    background-image: url('../../images/common/webshop/battlepass/2025/aero/pass_premium.html');
}

.battle_wrap_aero .my_pass .lv {
    flex-direction: column;
    font-family: 'good-times';
    padding-top: 0;
    padding-bottom: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 25.1rem;
    height: 25.1rem;
    background: url('../../images/common/webshop/battlepass/2025/aero/bp_lv_round.html') center center no-repeat;
    background-size: 100% auto;
    box-shadow: inset 0 0 0 1px rgba(207, 253, 255, 0.5);
}

.battle_wrap_aero .my_pass .lv:before, .battle_wrap_aero .my_pass .lv:after {
    z-index: -1;
    top: -1.3rem;
    bottom: -1.3rem;
    left: -1.3rem;
    right: -1.3rem;
}

.battle_wrap_aero .my_pass .lv:before {
    background-image: url('../../images/common/webshop/battlepass/2025/aero/bp_lv_round01.html');
    animation: aim 15s infinite linear;
}

.battle_wrap_aero .my_pass .lv:after {
    background-image: url('../../images/common/webshop/battlepass/2025/aero/bp_lv_round02.html');
    animation: rotation 5s infinite linear;
}

.battle_wrap_aero .my_pass .lv .tit {
    font-size: 25px;
    font-weight: 900;
    color: #f21d7a;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    text-shadow: 0 -0.3rem 0 rgba(255, 255, 255, 0.8) , 0 0 0.3rem rgba(255, 255, 255, 0.3);
}

.battle_wrap_aero .my_pass .lv .tit:before {
    content: '';
    display: block;
    width: 5rem;
    height: 4.2rem;
    background: url('../../images/common/webshop/battlepass/2025/aero/obj_triangle.html') 0 0 no-repeat;
    background-size: 100% auto;
    margin: 0 auto 5px;
}

.battle_wrap_aero .my_pass .lv .num {
    font-size: 90px;
    font-weight: 900;
    color: #f21d7a;
    letter-spacing: -0.02em;
    text-shadow: 0 -0.3rem 0 rgba(255, 255, 255, 0.8) , 0 0 0.3rem rgba(255, 255, 255, 0.3);
    background: none;
    -webkit-text-fill-color: inherit;
}

.battle_wrap_aero .item_wrap .item_list .img {
    background: url('../../images/common/webshop/battlepass/2025/aero/bg_basic.html') center center no-repeat;
    background-size: cover;
}

.battle_wrap_aero .item_wrap .item_list .desc {
    background: #14202b;
}

.battle_wrap_aero .lv_wrap {
    background: #131e28;
}

.battle_wrap_aero .item_wrap .item_list .special .item .img {
    background-image: url(../../images/common/webshop/battlepass/2025/aero/bg_special.html);
}

.battle_wrap_aero .item_wrap .item_list .special .item:before {
    background: #4cf;
}

.battle_wrap_aero .item_wrap .item_list .special .item:after {
    border-image: linear-gradient(to bottom, #4cf, rgba(0, 0, 0, 0));
}

.battle_wrap_aero .item_wrap .item_list .special .desc {
    background: linear-gradient(to bottom, #007eff, #003253);
}

.battle_wrap_aero .special .lv_wrap {
    background: #0070e0;
}

.battle_wrap_aero .item_wrap .item_list .random .item .img {
    background-image: url(../../images/common/webshop/battlepass/2025/aero/bg_random.html);
}

.battle_wrap_aero .item_wrap .item_list .random .item:before {
    background: #00feff;
}

.battle_wrap_aero .item_wrap .item_list .random .item:after {
    border-image: linear-gradient(to bottom, #00feff, rgba(0, 0, 0, 0));
}

.battle_wrap_aero .item_wrap .item_list .random .desc {
    background: linear-gradient(to bottom, #008f9c, #003253);
}

.battle_wrap_aero .random .lv_wrap {
    background: #008f9c;
}

.battle_wrap_aero .item_wrap .item_list .info {
    border-top-color: #fff;
    border-bottom-color: #f6ff00;
    color: #f6ff00;
}

.battle_wrap_aero .item_wrap .item_list .info:after {
    border-image: linear-gradient(to bottom, #fff, #f6ff00);
}

.battle_wrap_aero .item_wrap .item_list .info li {
    border-color: #f6ff00;
}

.battle_wrap_aero .item_wrap .item_list .info span:last-child {
    color: #f6ff00;
}

.battle_wrap_aero .item_wrap .item_list .sale {
    border: none;
    background-image: url('../../images/common/webshop/battlepass/2025/aero/bg_sale02.html');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.battle_wrap_aero .item_wrap .item_list .sale:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    background-image: url('../../images/common/webshop/battlepass/2025/aero/bp_rotate02.html');
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
    animation: rotation 10s infinite linear;
}

.battle_wrap_aero .item_wrap .item_list .sale font {
    color: #77ddff;
}

.battle_wrap_aero .item_wrap .item_list .special .sale {
    background-image: url('../../images/common/webshop/battlepass/2025/aero/bg_sale01.html');
}

.battle_wrap_aero .item_wrap .item_list .special .sale:before {
    background-image: url('../../images/common/webshop/battlepass/2025/aero/bp_rotate01.html');
}

.battle_wrap_aero .item_wrap .item_list .special font {
    color: #f5fd10;
}

/* season21 snowfall */
.sub_contents .battle_wrap_snowfall {
    background: #0c537d url('../../images/common/webshop/battlepass/2025/snowfall/bg_battle_snowfall.html') center 0 no-repeat;
}

.battle_wrap_snowfall .my_pass {
    background: url('../../images/common/webshop/battlepass/2025/snowfall/bg_bp_snowfall.html') center center no-repeat;
    border-radius: 0;
    border-top: 0;
    margin-bottom: 9.2rem;
}

.battle_wrap_snowfall .my_pass:before {
    border: none;
    content: '';
    display: block;
    top: -0.8rem;
    left: -0.8rem;
    right: -0.8rem;
    height: 15.1rem;
    background: url('../../images/common/webshop/battlepass/2025/snowfall/bp_frame_l.html') 0 0 no-repeat , url('../../images/common/webshop/battlepass/2025/snowfall/bp_frame_r.html') right 0 no-repeat;
    background-size: auto 100%;
}

.battle_wrap_snowfall .my_pass:after {
    border: none;
    top: auto;
    border-radius: 0;
    content: '';
    display: block;
    position: absolute;
    left: -0.3rem;
    right: 0;
    bottom: -5.6rem;
    background: url('../../images/common/webshop/battlepass/2025/snowfall/bp_frame_b.png') 0 0 repeat-x;
    height: 8rem;
    background-size: auto 100%;
}

.battle_wrap_snowfall .my_pass .lv {
    padding-top: 0;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    font-family: 'minion-pro';
    width: 24rem;
    height: 24rem;
    background: url('../../images/common/webshop/battlepass/2025/snowfall/my_lv.png') 0 0 no-repeat;
    background-size: 100% auto;
}

.battle_wrap_snowfall .my_pass .lv:before, .battle_wrap_snowfall .my_pass .lv:after, .battle_wrap_snowfall .my_pass .lv .tit:before {
    right: auto;
    bottom: auto;
    left: 50%;
    top: 50%;
    width: 30rem;
    height: 30rem;
    margin-left: -15rem;
    margin-top: -15rem;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
}

.battle_wrap_snowfall .my_pass .lv:before {
    background-image: url('../../images/common/webshop/battlepass/2025/snowfall/my_lv_rotate01.png');
    animation: rotation 7s infinite linear;
}

.battle_wrap_snowfall .my_pass .lv:after {
    background-image: url('../../images/common/webshop/battlepass/2025/snowfall/my_lv_rotate02.png');
    animation: aim 7s 1s infinite linear;
}

.battle_wrap_snowfall .my_pass .lv .tit {
    color: #0adfff;
    letter-spacing: -0.01em;
    font-weight: 600;
}

.battle_wrap_snowfall .my_pass .lv .tit:before {
    content: '';
    display: block;
    position: absolute;
    background-image: url('../../images/common/webshop/battlepass/2025/snowfall/my_lv_rotate03.png');
    animation: aim 7s infinite linear;
}

.battle_wrap_snowfall .my_pass .lv .num {
    line-height: 1;
    background: -webkit-linear-gradient(#fff, #5dc8ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.battle_wrap_snowfall .my_pass .pass {
    width: 21.6rem;
    height: 14.2rem;
    z-index: 2;
}

.battle_wrap_snowfall .my_pass .pass.free {
    background-image: url('../../images/common/webshop/battlepass/2025/snowfall/pass_free.png');
}

.battle_wrap_snowfall .my_pass .pass.prem {
    background-image: url('../../images/common/webshop/battlepass/2025/snowfall/pass_prem.png');
}

.battle_wrap_snowfall .my_pass .cha {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-44%, -50%);
    z-index: 1;
}

.battle_wrap_snowfall .item_wrap .item_list .img {
    background: url('../../images/common/webshop/battlepass/2025/snowfall/bg_basic.jpg') center center no-repeat;
    background-size: cover;
}

.battle_wrap_snowfall .item_wrap .item_list .desc {
    background: #2e5e8c;
}

.battle_wrap_snowfall .lv_wrap {
    background: #2e5e8c;
}

.battle_wrap_snowfall .item_wrap .item_list .special .item .img {
    background-image: url(../../images/common/webshop/battlepass/2025/snowfall/bg_special.jpg);
}

.battle_wrap_snowfall .item_wrap .item_list .special .item:before {
    background: #0e88ff;
}

.battle_wrap_snowfall .item_wrap .item_list .special .item:after {
    border-image: linear-gradient(to bottom, #0e88ff, rgba(0, 0, 0, 0));
}

.battle_wrap_snowfall .item_wrap .item_list .special .desc {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.5)) , #00407e;
}

.battle_wrap_snowfall .special .lv_wrap {
    background: #003c76;
}

.battle_wrap_snowfall .item_wrap .item_list .random .item .img {
    background-image: url(../../images/common/webshop/battlepass/2025/snowfall/bg_random.jpg);
}

.battle_wrap_snowfall .item_wrap .item_list .random .item:before {
    background: #6cfff3;
}

.battle_wrap_snowfall .item_wrap .item_list .random .item:after {
    border-image: linear-gradient(to bottom, #6cfff3 , rgba(0, 0, 0, 0));
}

.battle_wrap_snowfall .item_wrap .item_list .random .desc {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.5)) , #005b72;
}

.battle_wrap_snowfall .random .lv_wrap {
    background: #005b72;
}

.battle_wrap_snowfall .item_wrap .item_list .info {
    border-top-color: #7cd3ea;
    border-bottom-color: #0eaefd;
    color: #a9edff;
}

.battle_wrap_snowfall .item_wrap .item_list .info:after {
    border-image: linear-gradient(to bottom, #7cd3ea, #0eaefd);
}

.battle_wrap_snowfall .item_wrap .item_list .info li {
    border-color: #7cd3ea;
}

.battle_wrap_snowfall .item_wrap .item_list .info span:last-child {
    color: #a9edff;
}

.battle_wrap_snowfall .item_wrap .item_list .info font {
    color: #fff;
}

.battle_wrap_snowfall .item_wrap .item_list .sale {
    border: none;
    background-image: url('../../images/common/webshop/battlepass/2025/snowfall/bg_sale.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    color: #ffff54;
}

.battle_wrap_snowfall .item_wrap .item_list .sale:before {
    content: '';
    display: block;
    position: absolute;
    width: 9.6rem;
    left: 50%;
    top: 50%;
    height: 9.6rem;
    margin-top: -4.8rem;
    margin-left: -4.8rem;
    background-image: url('../../images/common/webshop/battlepass/2025/snowfall/bp_rotate01.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
    animation: rotation 10s infinite linear;
}

.battle_wrap_snowfall .item_wrap .item_list .sale font {
    font-weight: 700;
    background: -webkit-linear-gradient(#fffc00, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.battle_wrap_snowfall .item_wrap .item_list .special .sale {
    background-image: url('../../images/common/webshop/battlepass/2025/snowfall/bg_sale02.png');
    color: #fff;
}

.battle_wrap_snowfall .item_wrap .item_list .special .sale:before {
    background-image: url('../../images/common/webshop/battlepass/2025/snowfall/bp_rotate02.png');
}

.battle_wrap_snowfall .item_wrap .item_list .special font {
    background: -webkit-linear-gradient(#70f3ff, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* season22 shaman */
.sub_contents .battle_wrap_shaman {
    background: #000 url('../../images/common/webshop/battlepass/2026/shaman/bg.jpg') center 0 no-repeat;
}

.battle_wrap_shaman .my_pass .pass {
    width: 27.6rem;
    height: 15.6rem;
    z-index: 2;
    left: 3.6rem;
}

.battle_wrap_shaman .my_pass .pass.free {
    background-image: url('../../images/common/webshop/battlepass/2026/shaman/pass_free.png');
}

.battle_wrap_shaman .my_pass .pass.prem {
    background-image: url('../../images/common/webshop/battlepass/2026/shaman/pass_prem.png');
}

.battle_wrap_shaman .my_pass {
    z-index: 1;
    box-shadow: inset 0 0 0 0.2rem rgba(255, 255, 255, 0.4);
    background: url('../../images/common/webshop/battlepass/2026/shaman/bg_bp.png') center center no-repeat;
    border-radius: 0;
    border-top: 0;
    ;}

.battle_wrap_shaman .my_pass:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background: url('../../images/common/webshop/battlepass/2026/shaman/bp_cha.png') center 68% no-repeat;
}

.battle_wrap_shaman .my_pass:after {
    z-index: -1;
    border: none;
    border-radius: 0;
    content: "";
    position: absolute;
    inset: 0.8rem 0;
    padding: 0.4rem 0;
    background: linear-gradient(to right, #ffcccc, #cceeff);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.battle_wrap_shaman .my_pass .lv {
    padding-top: 0 !important;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    font-family: 'minion-pro';
    width: 27.6rem;
    height: 27.6rem;
}

.battle_wrap_shaman .my_pass .lv:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../../images/common/webshop/battlepass/2026/shaman/my_lv.png');
    background-size: 100% auto;
    animation: rotation 30s infinite linear;
}

.battle_wrap_shaman .my_pass .lv:after {
    display: none;
}

.battle_wrap_shaman .my_pass .lv .tit {
    font-size: 27px;
    color: #cceeff;
    font-family: 'apotek-extended';
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.battle_wrap_shaman .my_pass .lv .tit span {
    background: linear-gradient(to right, #cceeff , #ffcccc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.battle_wrap_shaman .my_pass .lv .num {
    line-height: 1;
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'apotek-extended';
    font-size: 89px;
    color: #fff;
    filter: drop-shadow(-1px 0 0 #ff3333) drop-shadow(1px 0 0 #0099ff) drop-shadow(0 0 55px rgba(0, 0, 0, 0.3));
}

.battle_wrap_shaman .search_wrap {
    border: 1px solid #44aaff;
    border-top: 1px solid #ff6666;
    background: linear-gradient(to bottom, rgba(255, 102, 102, 0.1), rgba(68, 170, 255, 0.1));
}

.battle_wrap_shaman .search_wrap .search_area button {
    background-image: url(../../images/common/webshop/battlepass/2026/shaman/icon_search.png);
}

.battle_wrap_shaman .item_wrap .item_list .img {
    background-image: url(../../images/common/webshop/battlepass/2026/shaman/bg_base.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.battle_wrap_shaman .item_wrap .item_list .random .item .img {
    background-image: url(../../images/common/webshop/battlepass/2026/shaman/bg_random.jpg);
}

.battle_wrap_shaman .item_wrap .item_list .random .item:before {
    background: #5588ff;
}

.battle_wrap_shaman .item_wrap .item_list .random .item:after {
    border-image: linear-gradient(to bottom, #5588ff, rgba(0, 0, 0, 0));
}

.battle_wrap_shaman .item_wrap .item_list .special .item .img {
    background-image: url(../../images/common/webshop/battlepass/2026/shaman/bg_special.jpg);
}

.battle_wrap_shaman .item_wrap .item_list .special .item:before, .battle_wrap .item_wrap .item_list .special .item:after {
    display: none;
}

.battle_wrap_shaman .lv_wrap {
    background: #115599;
}

.battle_wrap_shaman .item_wrap .item_list .desc {
    background: linear-gradient(to bottom, #115599, #881111);
}

.battle_wrap_shaman .item_wrap .item_list .info {
    color: #ff8888;
    border-left-color: #fb6464;
    border-right-color: #45a7fa;
    border-top-color: rgba(255, 255, 255, 0);
    border-bottom-color: rgba(255, 255, 255, 0);
}

.battle_wrap_shaman .item_wrap .item_list .info:after {
    border-image: linear-gradient(to right, #fb6464, #45a7fa);
    border-top: 0.2rem solid transparent;
    border-bottom: 0.2rem solid transparent;
    ;}

.battle_wrap_shaman .item_wrap .item_list .info li {
    border-color: #fb6464;
}

.battle_wrap_shaman .item_wrap .item_list .info span:last-child {
    color: #44aaff;
}

.battle_wrap_shaman .item_wrap .item_list .info font {
    color: #ffee00;
}

.battle_wrap_shaman .item_wrap .item_list .sale {
    font-weight: 700;
    color: #000000;
    top: 0.6rem;
    right: 0.6rem;
    width: 8.4rem;
    height: 8.4rem;
    border: none;
    background: url('../../images/common/webshop/battlepass/2026/shaman/bg_sale.png') 0 0 no-repeat;
    background-size: 100% auto;
}

.battle_wrap_shaman .item_wrap .item_list .sale:before {
    top: 0;
    left: 0;
    animation: rotation 10s infinite linear;
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../../images/common/webshop/battlepass/2026/shaman/bg_sale_dot.png') 0 0 no-repeat;
    background-size: 100% auto;
}

.battle_wrap_shaman .item_wrap .item_list .sale font {
    font-weight: 500;
    color: #aa0000;
}

/*** battle pass season concept ended ***/
.info_area {
    margin-bottom: 4.8rem;
    height: 8.4rem;
    background: url('../../images/common/webshop/bg_info.png') center center no-repeat;
    position: relative;
    background-size: auto 100%;
}

.info_area:before, .info_area:after {
    margin-top: -2.2rem;
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    width: 3rem;
    height: 3.2rem;
    background: url('../../images/common/webshop/bg_info_arr.png') 0 0 no-repeat;
}

.info_area:before {
    left: 1.6rem;
}

.info_area:after {
    right: 1.6rem;
    transform: scaleX(-1);
}

.info_area li {
    line-height: 7.2rem;
    text-align: left;
    padding: 0 6.5rem;
    font-size: 17px;
    color: #fff;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4), 1px -1px 0 rgba(0, 0, 0, 0.4), -1px 1px 0 rgba(0, 0, 0, 0.4), 1px 1px 0 rgba(0, 0, 0, 0.4);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    word-wrap: normal;
    white-space: nowrap;
    word-break: break-word;
}

.info_area li span {
    color: #0ff;
}

.info_area li font {
    color: #ff0;
}

.info_area marquee {
    width: calc(100% - 132px);
    margin: 0 auto;
    font-size: 17px;
    color: #fff;
    line-height: 7.2rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: block;
}

.md .md_img {
    background: url('../../images/common/webshop/bg_pick.jpg') 0 center no-repeat;
    border-radius: 1.2rem;
    box-shadow: 0 2.4rem 7.2rem rgba(0, 0, 0, 0.4) , inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    text-align: center;
    background-size: cover;
    width: 100%;
    height: 0;
    padding-top: calc(100% + 168px);
    position: relative;
}

.md .md_img img {
    height: 100%;
    border-radius: 1.2rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

.field_wrap .item_wrap .item_list .item {
    background: linear-gradient(to bottom, rgba(68, 204, 255, 0.65), rgba(136, 255, 221, 0.65), rgba(255, 255, 153, 0.65));
}

.field_wrap .item_wrap .item_list .special .item:before {
    background: #99ffff;
}

.field_wrap .item_wrap .item_list .special .item:after {
    border-image: linear-gradient(to bottom, #99ffff, rgba(0, 0, 0, 0));
}

.field_wrap .item_wrap .item_list .special .item .img {
    background-image: url(../../images/common/webshop/bg_field_special.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.field_wrap .item_wrap .item_list .sale {
    background: #000;
    border: 0.2rem solid #99ffff;
    top: 2.4rem;
    right: 2.4rem;
}

.field_wrap .item_wrap .item_list .sale:before {
    content: '';
    display: block;
    position: absolute;
    width: 8.8rem;
    height: 8.8rem;
    background: url('../../images/common/webshop/frame_sale_field.png') 0 0 no-repeat;
    background-size: 100% auto;
    top: 50%;
    left: 50%;
    margin-top: -4.4rem;
    margin-left: -4.4rem;
    animation: rotation 10s infinite linear;
}

.field_wrap .item_wrap .item_list .sale font {
    color: #ffff00;
}

.field_wrap .item_wrap .item_list .random .item:before {
    background: #99ffff;
}

.field_wrap .item_wrap .item_list .random .item:after {
    border-image: linear-gradient(to bottom, #99ffff, rgba(0, 0, 0, 0));
}

.field_wrap .item_wrap .item_list .random .item .img {
    background-image: url(../../images/common/webshop/bg_field_random.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.field_wrap .item_wrap .item_list .info {
    border-radius: 0;
    color: #99ffff;
    border-color: #99ffff;
}

.field_wrap .item_wrap .item_list .info li {
    border-color: #99ffff;
}

.field_wrap .item_wrap .item_list .info span:last-child {
    color: #99ffff;
}

.field_wrap .item_wrap .item_list .info font {
    color: #ffff00;
}

.field_wrap .item_wrap .item_list .special .con:hover .desc:before {
    background: #99ffff;
}

.field_wrap .item_wrap .item_list .random .con:hover .desc:before {
    background: #99ffff;
}

.gold_wrap .item_wrap .item_list .item {
    background: linear-gradient(135deg, #ffd, #ffb);
}

.gold_wrap .item_wrap .item_list .sale {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5) , 0 0.6rem 2rem rgba(119, 51, 0, 0.4);
    background: url('../../images/common/webshop/bg_sale_gold.jpg') center center no-repeat;
    border: 2px solid #fd9;
}

.gold_wrap .item_wrap .item_list .special .item:before , .gold_wrap .item_wrap .item_list .special .item:after {
    display: none;
}

.gold_wrap .item_wrap .item_list .special .item .img {
    background-image: url(../../images/common/webshop/bg_gold_special.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.gold_wrap .item_wrap .item_list .random .item:before , .gold_wrap .item_wrap .item_list .random .item:after {
    display: none;
}

.gold_wrap .item_wrap .item_list .random .item .img {
    background-image: url(../../images/common/webshop/bg_gold_random.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.gold_wrap .item_wrap .item_list .info {
    border-radius: 0;
    color: #ffeeaa;
    border: 0.2rem solid rgba(255, 255, 255, 0);
    border-top-color: #ffeeaa;
    border-bottom-color: #ddaa44
}

.gold_wrap .item_wrap .item_list .info:after {
    content: '';
    display: block;
    position: absolute;
    top: -0.2rem;
    left: -0.2rem;
    right: -0.2rem;
    bottom: -0.2rem;
    border-left: 0.2rem solid transparent;
    border-right: 0.2rem solid transparent;
    border-image: linear-gradient(to bottom, #ffeeaa, #ddaa44);
    border-image-slice: 1 !important;
}

.gold_wrap .item_wrap .item_list .info li {
    border-color: #ffeeaa;
}

.gold_wrap .item_wrap .item_list .info span:last-child {
    color: #ffeeaa;
}

.gold_wrap .item_wrap .item_list .info font {
    color: #fff;
}

.gold_wrap .item_wrap .item_list .special .con:hover .desc:before {
    background: #ffeeaa;
}

.gold_wrap .item_wrap .item_list .random .con:hover .desc:before {
    background: #ffeeaa;
}

/* view */
.view_wrap .top {
    font-size: 0;
    margin-bottom: 2.4rem;
}

.view_wrap .top .remain {
    margin-right: 1.2rem;
    margin-top: 1.2rem;
    border-radius: 0.6rem;
    display: inline-block;
    vertical-align: top;
    height: 36px;
    line-height: 37px;
    word-break: break-word;
    position: relative;
    box-shadow: inset 0px 0 0 0.2rem #0e1;
    background-color: rgba(0, 68, 0, 0.4);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
    padding: 0 2rem;
    text-align: center;
    font-family: 'Roboto';
    font-size: 14px;
    letter-spacing: 0.01em;
    color: #6f3;
}

.view_wrap .top .remain span {
    color: #ff0;
}

.view_wrap .top .remain font {
    color: #fff;
}

.view_wrap .top .rd_tit {
    font-size: 14px;
    font-family: 'Roboto';
    letter-spacing: 0.02em;
    text-transform: capitalize;
    padding: 0 2.4rem;
    border-radius: 0.6rem;
    display: inline-block;
    vertical-align: top;
    height: 36px;
    line-height: 34px;
    word-break: break-word;
    position: relative;
    border: 1px solid #4bf;
    color: #4bf;
}

.view_wrap .top .lv_wrap {
    position: static;
    margin-top: 1.2rem;
    transform: none;
    border-radius: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    margin-right: 1.2rem;
    vertical-align: top;
}

.view_wrap .top .lv_wrap .lv + .season {
    margin-left: 1.2rem;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1), -1px -1px 0 rgba(0, 0, 0, 0.1)
}

.view_wrap .top .lv_wrap .lv {
    height: 36px;
    line-height: 35px;
    padding: 0 1rem;
}

.view_wrap .top .lv_wrap .season {
    height: 36px;
    line-height: 37px;
    padding: 0 1.4rem;
}

.view_wrap .top .lv_wrap .season.two {
    line-height: 1;
}

.view_wrap .top .lv_wrap .season.two span {
    padding-top: 0.7rem;
}

.view_wrap .item_view {
    font-size: 0;
    background: #222222;
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.2);
    padding: 7.2rem;
    position: relative;
    display: flex;
    align-items: center;
    align-items: flex-start;
}

.view_wrap .item_view .sale {
    padding-top: 2.4rem;
    background: linear-gradient(to bottom, #f40, #f73);
    display: block;
    top: -4.8rem;
    right: 3.6rem;
    position: absolute;
    border-radius: 50%;
    width: 9.6rem;
    height: 9.6rem;
    text-align: center;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.view_wrap .item_view .sale font {
    display: block;
    margin-top: -3px;
    font-family: 'Roboto';
    font-size: 28px;
    color: #ff0;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.view_wrap .item_view .item {
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    width: calc(100% - 85.2rem);
    margin-right: 14.4rem;
    min-height: 36rem;
    position: relative;
}

.view_wrap .item_view .item img {
    max-width: 100%;
    max-height: 100%;
}

.view_wrap .item_view .info {
    display: inline-block;
    vertical-align: top;
    width: 70.8rem;
}

.view_wrap .item_view .tag_wrap {
    margin-left: -0.6rem;
}

.view_wrap .item_view .tag {
    padding: 0.8rem 2.4rem;
    border-radius: 18px 18px 18px 0;
    display: inline-block;
    width: auto;
    margin: 0.6rem;
}

.view_wrap .item_view .state {
    font-size: 0;
    margin-left: -3px;
    margin-bottom: 3.6rem;
}

.view_wrap .item_view .state span {
    display: inline-block;
    vertical-align: top;
    font-family: 'Roboto';
    color: #fd0;
    letter-spacing: 0.02em;
    border-radius: 4px;
    padding: 2px 6px 1px;
    text-transform: uppercase;
    border: 1px solid #fd0;
    font-size: 11px;
    margin: 0 3px;
}

.view_wrap .item_view .state .hot {
    color: #f5e;
    border-color: #f5e;
}

.view_wrap .item_view .state .limit {
    color: #6f3;
    border-color: #6f3;
}

.view_wrap .item_view .name {
    word-break: break-word;
    color: #fff;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-family: 'Roboto';
    margin-bottom: 0.6rem;
}

.view_wrap .item_view .price li {
    padding: 1.8rem 2.4rem 1.8rem 3.6rem;
    ;border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 6px;
    font-size: 0;
    display: flex;
    align-items: center;
}

.view_wrap .item_view .price li:after {
    content: '';
    display: block;
    clear: both;
}

.view_wrap .item_view .price li > div {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    width: 50%;
    flex-grow: 1;
}

.view_wrap .item_view .price li .p02 {
    text-align: right;
}

.view_wrap .item_view .price li:last-child {
    margin-bottom: 0;
}

.view_wrap .item_view .price button {
    cursor: pointer;
    margin-right: 8px;
    vertical-align: middle;
    display: inline-block;
    font-size: 13px;
    color: #999;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(136, 136, 136, 0.1);
    border-radius: 6px;
    padding: 0 1.6rem;
    height: 36px;
    line-height: 36px;
    border: 1px solid #777;
    font-weight: 500;
}

.view_wrap .item_view .price button:last-child {
    margin-right: 0;
}

.view_wrap .item_view .price .btn_cart {
    color: #4cf;
    border: 1px solid #4cf;
    border-bottom-color: #6f8;
    position: relative;
    background: rgba(17, 187, 255, 0.1);
}

.view_wrap .item_view .price .btn_buy {
    color: #f77;
    border: 1px solid #f77;
    border-bottom-color: #fd1;
    position: relative;
    background: rgba(255, 119, 255, 0.1);
}

.view_wrap .item_view .price .btn_cart:hover {
    border: 1px solid #6f8;
    color: #6f8;
    background: rgba(102, 255, 136, 0.15);
}

.view_wrap .item_view .price .btn_buy:hover {
    border: 1px solid #fd3;
    color: #fd3;
    background: rgba(255, 221, 51, 0.15);
}

.view_wrap .item_view .price .btn_cart:hover:before , .view_wrap .item_view .price .btn_buy:hover:before {
    display: none;
}

.view_wrap .item_view .pass_area {
    font-size: 0;
    text-align: left;
    position: absolute;
    top: 2.4rem;
    left: 2.4rem;
}

.view_wrap .item_view .pass_area span {
    font-family: 'Roboto';
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    text-transform: uppercase;
    color: #ddd;
    height: 48px;
    line-height: 50px;
    text-align: center;
    letter-spacing: 0.02em;
    width: 102px;
    background: url('../../images/common/webshop/bg_level.png') 0 0 no-repeat;
}

.view_wrap .item_view .pass_area span img {
    vertical-align: middle;
    position: relative;
    top: -2px;
    margin-right: 1rem;
}

.view_wrap .item_view .pass_area .premium {
    color: #fe0;
    width: 126px;
    background: url('../../images/common/webshop/bg_premium.png') 0 0 no-repeat;
    margin-right: 1.2rem;
}

.view_wrap .item_view .info_txt {
    text-align: left;
    font-size: 14px;
    color: #aaa;
    line-height: 1;
    margin-top: 2rem;
    font-family: 'Roboto';
}

.view_wrap .item_view .info_txt img {
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-right: 0.8rem;
}

.view_wrap .item_view .quantity {
    position: relative;
    margin-right: 2.4rem;
    vertical-align: middle;
    display: inline-block;
}

.view_wrap .item_view .quantity ul {
    border-radius: 6px;
    background: #000;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    display: none;
}

.view_wrap .item_view .quantity li {
    padding: 0;
    border-radius: 0;
    margin-bottom: 0;
    display: block;
}

.view_wrap .item_view .quantity a {
    padding-left: 2rem;
    text-align: left;
    display: block;
    font-size: 17px;
    font-family: 'Roboto';
    height: 36px;
    line-height: 35px;
}

.view_wrap .item_view .quantity > a {
    color: #fff;
    width: 72px;
    border-radius: 6px;
    padding: 0;
    padding-right: 2.4rem;
    text-align: center;
    border: 1px solid #888;
    position: relative;
}

.view_wrap .item_view .quantity > a:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -3px;
    width: 8px;
    height: 6px;
    right: 1.3rem;
    background: url('../../images/common/webshop/arr_sel.png');
    opacity: 0.5;
}

.view_wrap .item_view .quantity li a {
    color: #aaa;
}

.view_wrap .item_view .quantity li:hover a {
    background: rgba(102, 255, 136, 0.5);
    color: #6f8;
}

.view_wrap .item_view .quantity > a:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.1);
}

.view_wrap .item_view .quantity > a:hover:before {
    opacity: 1;
}

.view_wrap .price .day {
    font-size: 24px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    min-width: 7.2rem;
    padding-right: 1.2rem;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 0.04em;
}

.view_wrap .price .day span {
    color: #ff0;
    margin-right: 0.4rem;
}

.view_wrap .price .pay {
    font-size: 25px;
    color: #ff0;
    font-weight: 700;
    font-family: 'Roboto';
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

.view_wrap .price .pay img {
    vertical-align: middle;
    position: relative;
    top: -2px;
    margin-right: 0.8rem;
}

.view_wrap .price .pay .del_line {
    color: #aaa;
    position: relative;
}

.view_wrap .price .pay .del_line:after {
    content: '';
    margin: 0 0.7rem;
    display: inline-block;
    width: 2.4rem;
    height: 0.9rem;
    background: url('../../images/common/webshop/icon_del.png') right center no-repeat;
    background-size: 100% auto;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.view_wrap .price .pay .del_line:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 3.6rem;
    height: 1px;
    background: #aaa;
    top: 50%;
}

.view_wrap .item_view .price .inactive .btn_cart, .view_wrap .item_view .price .inactive .btn_buy {
    border: 1px solid #777;
    color: #999;
    cursor: default;
    background: rgba(136, 136, 136, 0.1);
}

.view_wrap .item_view .price .inactive .btn_cart:before , .view_wrap .item_view .price .inactive .btn_buy:before {
    display: none;
}

.view_wrap .item_view .price .inactive .quantity > a {
    border: 1px solid rgba(255, 255, 255, 0);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.3);
    cursor: default;
}

.view_wrap .item_view .price .inactive .quantity > a:before {
    opacity: 0.5;
}

.view_wrap .rate_wrap {
    background: #2d2d2d;
    padding: 2.2rem 3.6rem;
    position: relative;
}

.view_wrap .rate_wrap .average {
    font-size: 20px;
    color: #fe0;
    font-family: 'Roboto';
}

.view_wrap .rate_wrap .average div {
    display: inline-block;
    vertical-align: top;
}

.view_wrap .rate_wrap .average .star span {
    top: -2px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 1.2rem;
    position: relative;
    width: 15.2rem;
}

.view_wrap .rate_wrap .average .scope {
    padding-top: 1px;
}

.view_wrap .rate_wrap .average .num {
    color: #aaa;
    margin-left: 1rem;
    display: inline-block;
    border-radius: 0.6rem;
    background: #000;
    padding: 0 1rem;
    height: 24px;
    line-height: 24px;
    font-size: 17px;
    position: relative;
    top: 2px;
}

.view_wrap .rate_wrap .average .star img {
    vertical-align: middle;
    width: 100%;
}

.view_wrap .rate_wrap .average .star .ing {
    display: block;
    position: absolute;
    top: 3px;
    bottom: 0;
    left: 0;
    width: 100%;
    background: url('../../images/common/webshop/star_rating_on.png') 0 center no-repeat;
    background-size: 15.2rem auto;
}

.view_wrap .rate_wrap .average .btn_rate {
    margin: 2px 0 0 1.2rem;
    opacity: 0.5;
    transform: scaleY(-1);
}

.view_wrap .rate_wrap .average .btn_rate img {
    vertical-align: top;
}

.view_wrap .rate_wrap .average .btn_rate:hover {
    opacity: 1;
}

.view_wrap .rate_wrap .average .btn_rate.open {
    transform: scaleY(1);
}

.view_wrap .rate_wrap .rate_area {
    display: inline-block;
    position: absolute;
    top: 8.8rem;
    left: 0;
    display: none;
    z-index: 1;
}

.view_wrap .rate_wrap .rate_area:before {
    content: '';
    display: block;
    position: absolute;
    width: 2.4rem;
    height: 1.3rem;
    background: url('../../images/common/webshop/arr_rate.png') 0 0 no-repeat;
    left: 3.6rem;
    top: -1.2rem;
}

.view_wrap .rate_wrap .rate_area .desc {
    padding: 4rem 3.6rem;
    background: #333;
    border-radius: 1.2rem 1.2rem 0 0;
    border-top: 1px solid #fe0;
}

.view_wrap .rate_wrap .rate_area .desc .average {
    color: #fff;
    margin-bottom: 7px;
}

.view_wrap .rate_wrap .rate_area .desc .average:last-child {
    margin-bottom: 0;
}

.view_wrap .rate_wrap .rate_area .desc .average span {
    width: 11.4rem;
}

.view_wrap .rate_wrap .rate_area .desc .average .ing {
    background-size: 11.4rem auto;
    top: 4px;
}

.view_wrap .rate_wrap .rate_area .desc .bar {
    margin: 0 2rem;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 10.8rem;
    height: 1.2rem;
    background: rgba(0, 0, 0, 0.5);
}

.view_wrap .rate_wrap .rate_area .desc .bar span {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: #fe0;
    border: 1px solid #ff0;
    margin: 0;
}

.view_wrap .rate_wrap .rate_area .desc .num {
    width: auto !important;
    top: auto;
    margin-right: 0;
    letter-spacing: 0.04rem;
}

.view_wrap .rate_wrap .star_area {
    padding: 2.4rem 0;
    font-size: 0;
    text-align: center;
    background: #444;
    border-radius: 0 0 1.2rem 1.2rem;
}

.view_wrap .rate_wrap .star_area ul {
    font-size: 0;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}

.view_wrap .rate_wrap .star_area ul li {
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.view_wrap .rate_wrap .star_area input[type=checkbox] {
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
    opacity: 0;
}

.view_wrap .rate_wrap .star_area input[type=checkbox] + label {
    position: relative;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    padding-left: 2.4rem;
    height: 2.3rem;
    margin: 0 4px;
}

.view_wrap .rate_wrap .star_area input[type=checkbox] + label:before {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    width: 2.4rem;
    height: 2.3rem;
    content: "";
    background: url('../../images/common/webshop/star_rating.png') 0 0 no-repeat;
    background-size: auto 100%;
}

.view_wrap .rate_wrap .star_area input[type=checkbox] + label:after {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    width: 2.4rem;
    height: 2.3rem;
    content: "";
    background: url('../../images/common/webshop/star_rating_on.png') 0 0 no-repeat;
    background-size: auto 100%;
}

.view_wrap .rate_wrap .star_area input[type=checkbox]:checked + label:after {
    opacity: 1;
}

.view_wrap .rate_wrap .star_area .btn_submit {
    background-color: rgba(255, 255, 255, 0);
    position: relative;
    width: 9.6rem;
    height: 3.6rem;
    line-height: 3.6rem;
    margin-left: 2.4rem;
    text-transform: uppercase;
    display: inline-block;
    vertical-align: middle;
    font-family: 'Roboto';
    font-weight: 500;
    letter-spacing: 0.04em;
    font-size: 11px;
    color: #fe0;
    text-align: center;
}

.view_wrap .rate_wrap .star_area .btn_submit:before {
    content: '';
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 238, 0, 0.1);
}

.view_wrap .rate_wrap .star_area .btn_submit:hover {
    border-color: #ff0;
}

.view_wrap .rate_wrap .star_area .btn_submit:hover:before {
    display: block;
}

.view_wrap .rate_wrap .star_area .btn_submit:after {
    background: url('../../images/common/webshop/ag_lt_y.png') 0 0 no-repeat, url('../../images/common/webshop/ag_rt_y.png') right 0 no-repeat, url('../../images/common/webshop/ag_lb_y.png') 0 bottom no-repeat, url('../../images/common/webshop/ag_rb_y.png') right bottom no-repeat !important;
}

.view_wrap .rate_wrap .star_area .btn_submit.disabled {
    background: #444;
    border: 1px solid #888;
    cursor: default;
    color: #aaa;
}

.view_wrap .rate_wrap .star_area .btn_submit.disabled:after {
    background: none !important;
}

.view_wrap .rate_wrap .star_area .btn_submit.disabled:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-right: 0.6rem;
    width: 8px;
    height: 10px;
    background: url('../../images/common/webshop/icon_lock.png') 0 0 no-repeat;
}

.btns_shop {
    font-size: 0;
    text-align: center;
    padding: 4.8rem 0;
}

.btns_shop a {
    display: inline-block;
    vertical-align: top;
    margin: 0 7px;
}

.btns_shop .btn_like {
    font-family: 'Roboto';
    height: 4.6rem;
    line-height: 4.4rem;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 0 2.4rem 0 1.6rem;
}

.btns_shop .btn_like:before {
    margin-right: 1rem;
    content: '';
    margin-right: 0;
    width: 2rem;
    height: 1.9rem;
    background-image: url('../../images/common/webshop/icon_wish.png');
    top: -1px;
}

.btns_shop .btn_like.on {
    background-color: #000;
}

.btns_shop .btn_like.on:before {
    background-image: url('../../images/common/webshop/icon_wish_on.png');
    width: 2.4rem;
    height: 2.4rem;
}

.btns_shop .btn_like span {
    margin-left: 0.8rem;
    color: #fff;
}

.btns_shop .btn_like.on span {
    color: #f44;
}

.btns_shop .btn_facebook {
    height: 4.6rem;
    line-height: 4.4rem;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    padding: 0 2.4rem 0 2rem;
}

.btns_shop .btn_facebook:before {
    margin-right: 1rem;
    content: '';
    width: 2.4rem;
    height: 2.4rem;
    background-image: url('../../images/common/webshop/icon_facebook.png');
    top: -1px;
}

.btns_shop .btn_facebook span {
    color: #fff;
    letter-spacing: 0.08em;
}

.btns_shop .btn_list {
    width: 21.2rem;
    height: 6.8rem;
    line-height: 6.8rem;
}

.btns_shop .btn_like.on:hover {
    background-color: rgba(255, 255, 0, 0.2);
}

.btns_shop .btn_like.on:hover:before {
    background-position: 0 -2.4rem;
}

.btns_shop .btn_like.on:hover span {
    color: #fff;
}

.view_wrap .detail {
    font-size: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
}

.view_wrap .detail > div {
    position: relative;
    width: calc((100% - 7.2rem) / 2);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 4.8rem 3.6rem 9.3rem 15.6rem;
    flex-grow: 1;
}

.view_wrap .detail .stat {
    margin-right: 7.2rem;
}

.view_wrap .detail .stat ul {
    font-size: 0;
}

.view_wrap .detail .stat ul li {
    margin-bottom: 1.5rem;
    width: calc((100% - 7.2rem) / 2);
    vertical-align: top;
    display: inline-block;
    font-size: 0;
    position: relative;
}

.view_wrap .detail .stat ul li:nth-child(2n) {
    margin-left: 7.2rem;
}

.view_wrap .detail .stat span {
    display: inline-block;
    vertical-align: middle;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.view_wrap .detail .stat .tit {
    letter-spacing: 0.06em;
    color: #fff;
    width: 108px;
    position: relative;
}

.view_wrap .detail .stat .num {
    color: #6f8;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
}

.view_wrap .detail .stat .num font {
    color: #999;
}

.view_wrap .detail .stat .bar {
    width: calc(100% - 152px);
    position: relative;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
}

.view_wrap .detail .stat .bar .on {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(to right, #0ae, #6f8);
}

.view_wrap .tit_d {
    text-transform: uppercase;
    font-size: 17px;
    color: #1bf;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.view_wrap .tit_d:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
    margin-right: 1.2rem;
    width: 0.4rem;
    height: 1.2rem;
    background: url('../../images/common/webshop/bar.png') 0 0 no-repeat;
    background-size: 100% auto !important;
}

.view_wrap .tit_d span {
    color: #fff;
}

.view_wrap .tit_d.red {
    color: #fff;
}

.view_wrap .tit_d.red span {
    color: #f44;
}

.view_wrap .tit_d.red:before {
    height: 1.7rem;
    background: url('../../images/common/webshop/bar02.png') 0 0 no-repeat;
    top: -3px;
}

.view_wrap .tit_d.red:after {
    background: #f44;
}

.view_wrap .tit_dl {
    font-size: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 1.5rem;
    position: relative;
}

.view_wrap .tit_dl:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 4px;
    height: 1px;
    background: #0ae;
}

.view_wrap .tit_dl:before {
    height: 1.7rem;
    background: url('../../images/common/webshop/bar03.png') 0 0 no-repeat;
    top: -3px;
}

.view_wrap .detail .tit_d {
    position: absolute;
    top: 4.8rem;
    left: 1.2rem;
}

.view_wrap .detail .text .txt {
    font-family: 'Roboto';
    color: #ccc;
    font-size: 16px;
    line-height: 2.25;
    word-break: break-word;
    margin-top: -1rem;
    letter-spacing: 0.02em;
}

.view_wrap .detail .product .tit_d {
    padding-left: 1.6rem;
    text-indent: -1.6rem;
}

.view_wrap .detail .product {
    margin-right: 7.2rem;
    padding-left: 24.6rem;
}

.view_wrap .detail .product .por {
    position: relative;
}

.view_wrap .detail .product ul {
    margin-left: -1.8rem;
    position: relative;
}

.view_wrap .detail .product li {
    padding-left: 1.8rem;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 1.8rem;
    width: 25%;
}

.view_wrap .detail .product .box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.view_wrap .detail .product .box img {
    max-width: 100%;
    max-height: 100%;
}

.view_wrap .detail .product span {
    font-size: 12px;
    color: #999;
    font-weight: 500;
    font-family: 'Roboto';
    line-height: 1.1;
    display: block;
    text-align: center;
    margin-top: 1rem;
}

.view_wrap .detail .product .por > .con {
    position: absolute;
    /* top:0; right:0; */
    width: 31.2rem;
    height: 31.2rem;
    background: #000;
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.5);
    z-index: 11;
}

.view_wrap .detail .product .por > .con:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12;
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.4);
}

.view_wrap .detail .product .por > .con .box {
    height: 100% !important;
}

.view_wrap .detail .product .por > .con .box img {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
}

.view_wrap .detail .product .por > .con span {
    display: none;
}

.with_item {
    position: relative;
}

.with_item .tit_d {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1.3rem 1.2rem;
    margin-bottom: 7.2rem;
}

.with_item .item_wrap .item_list {
    margin-left: -1.2rem;
}

.with_item .item_wrap {
    margin: 0 8.4rem;
}

.with_item .item_wrap .item_list > li {
    padding-left: 2.4rem;
}

.with_item .item_wrap .item_list > li .lv_wrap {
    margin-top: -2px;
}

.with_item .swiper-button-next {
    right: 0;
}

.with_item .swiper-button-prev {
    left: 0;
}

.with_item .swiper-button-next, .with_item .swiper-button-prev {
    top: 50%;
    transform: translate(0, -50%);
    width: 4.8rem;
    height: 7.2rem;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 0.4rem;
}

.with_item .swiper-button-next:before, .with_item .swiper-button-prev:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url('../../images/common/webshop/arrr_bg_s.png');
    opacity: 0.6;
}

.with_item .swiper-button-prev:before {
    transform: scaleX(-1);
}

.with_item .swiper-button-next:after, .with_item .swiper-button-prev:after {
    content: '';
    display: block;
    position: absolute;
    width: 1.4rem;
    height: 2.2rem;
    background-position: 0 -2.2rem;
    background-repeat: no-repeat;
    opacity: 0.6;
}

.with_item .swiper-button-prev:after {
    background-image: url('../../images/common/webshop/arr_l.png');
}

.with_item .swiper-button-next:after {
    background-image: url('../../images/common/webshop/arr_r.png');
}

.with_item .swiper-button-next:hover, .with_item .swiper-button-prev:hover {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
}

.with_item .swiper-button-next:hover:before, .with_item .swiper-button-prev:hover:before {
    opacity: 1;
}

.with_item .swiper-button-next:hover:after, .with_item .swiper-button-prev:hover:after {
    opacity: 1;
}

.with_item .swiper-button-next.swiper-button-disabled, .with_item .swiper-button-prev.swiper-button-disabled {
    background-color: rgba(102, 102, 102, 0.4);
    opacity: 1;
}

.with_item .swiper-button-next.swiper-button-disabled:before, .with_item .swiper-button-prev.swiper-button-disabled:before {
    display: none;
}

.with_item .swiper-button-next.swiper-button-disabled:after, .with_item .swiper-button-prev.swiper-button-disabled:after {
    background-position: 0 0;
}

/* random */
.view_wrap .item_view_randombox .item {
    background: url('../../images/common/webshop/rd_box.png') no-repeat 50% 50%;
}

.randombox {
    position: relative;
    font-family: 'Roboto';
    background: url('../../images/common/webshop/bg_radombox.jpg') 0 0 no-repeat;
    background-size: cover;
    text-align: center;
    padding: 7.2rem 0 7.2rem;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-image: linear-gradient(to bottom, #ffee77 , rgba(0, 0, 0, 0));
    border-image-slice: 1;
    border-top: 1px solid #ffee77;
}

.randombox .rd_con {
    margin: 4.8rem;
    box-shadow: 0 1.2rem 4.8rem rgba(0, 0, 0, 0.5);
    z-index: 1;
    border: 1px solid #0dd;
    position: relative;
    display: inline-block;
    width: 720px;
    height: 480px;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-image: url('../../images/common/webshop/bg_rdbox.jpg');
}

.randombox .name {
    color: #fff;
    font-size: 37px;
    font-weight: 700;
}

.randombox .item {
    position: absolute;
    top: 7.8rem;
    bottom: 0;
    left: 50%;
    max-width: 480px;
    max-height: 216px;
    transform: translate(-50%, 0) scale(0);
    font-size: 23px;
    color: #fff;
    z-index: 2;
}

.randombox .item.on {
    animation: titlePop .6s ease-in 0.5s forwards;
}

.randombox .item span {
    display: block;
    margin-bottom: 1.2rem;
}

.randombox .item img {
    max-width: 100%;
    max-height: 182px;
}

.randombox .rd_box {
    cursor: pointer;
    /* width: 384px; height: 515px; backface-visibility: hidden; */
    display: inline-block;
    position: relative;
    z-index: 2;
    margin-top: 8.6rem;
}

.randombox .rd_box:before {
    z-index: -1;
    content: '';
    display: block;
    position: absolute;
    bottom: -36px;
    transform: translate(-50%, 0);
    left: 50%;
    width: 420px;
    height: 82px;
    background: url('../../images/common/webshop/rd_shadow.png') center center no-repeat;
}

.randombox .rd_box > div:before, .randombox .rd_box > div:after {
    content: '';
    display: none;
    position: absolute;
    transform: translate(-50%, 0);
    left: 50%;
}

.randombox .rd_box:hover {
    animation: initialShake 0.2s linear infinite;
}

.randombox .rd_box.on:hover {
    animation: none;
}

.randombox .rd_box-left {
    width: 300px;
    height: 249px;
    position: relative;
}

.randombox .rd_box-left:before {
    width: 400px;
    height: 300px;
    background: url('../../images/common/webshop/rd_front.png') 0 0 no-repeat;
    top: 68px;
    z-index: -1;
}

.randombox .rd_box-right {
    width: 300px;
    height: 130px;
    left: 0;
    visibility: hidden;
}

.randombox .rd_box-right-front {
    width: 300px;
    height: 130px;
    margin-top: -77px;
}

.randombox .rd_box-right-front:before {
    width: 440px;
    height: 320px;
    background: url('../../images/common/webshop/rd_back.png') 0 0 no-repeat;
    bottom: -26px;
    z-index: -1;
}

.randombox .rd_box-right-front:after {
    width: 400px;
    height: 476px;
    background: url('../../images/common/webshop/rd_add.png') 0 0 no-repeat;
    bottom: -82px;
    z-index: -1;
}

.randombox .rd_box-right {
    background-image: url(../../images/common/webshop/rd_b.png);
}

.randombox .rd_box-right-front {
    background-image: url(../../images/common/webshop/rd_b.png);
}

.randombox .rd_box-left {
    background-image: url(../../images/common/webshop/rd_t.png);
    text-align: center;
    padding-top: 94px;
    position: relative;
}

.randombox .rd_box-left img {
    position: absolute;
    left: 50%;
    top: 2px;
    transform: translate(-50%, 0);
}

.randombox .on .rd_box-left {
    animation: leftSplit 0.35s linear;
    animation-fill-mode: forwards;
}

.randombox .on .rd_box-right-front {
    animation: rightSplit 0.35s linear forwards;
}

.randombox .on.rd_box > div:before {
    display: block;
}

.randombox .on.rd_box .rd_box-right-front.opc:after {
    display: block;
    animation: open 5s infinite;
}

.randombox .on .rd_box-left.opc {
    opacity: 0;
}

.randombox .rd_con .effect {
    position: absolute;
    bottom: -1px;
    left: -1px;
    right: -1px;
    top: -1px;
    z-index: -1;
    border: 1px solid #0dd;
}

.randombox .rd_con .effect:before {
    content: '';
    left: -1.2rem;
    right: -1.2rem;
    top: -1.2rem;
    bottom: -1.2rem;
    display: block;
    position: absolute;
    background: url('../../images/common/webshop/bg_rdbox_line.png') 0 0 no-repeat;
    background-size: 100% 100%;
}

.randombox .rd_con.on {
    animation: rd_bg 3s steps(6) infinite;
}

.randombox .rd_box:after {
    content: '';
    display: block;
    position: absolute;
    width: 16rem;
    height: 16rem;
    background: url('../../images/common/webshop/img_click.png') 0 0 no-repeat;
    background-size: 100% auto;
    top: -6.4rem;
    right: -7.6rem;
    animation: heartbeat 0.2s cubic-bezier(0.245, 0.325, 0.51, 1.305) infinite alternate;
}

.randombox .rd_box.on:after {
    display: none;
}

/* prepare */
.prepare_wrap {
    text-align: center;
    position: relative;
}

.prepare_wrap > img {
    position: absolute;
    bottom: 0;
    right: 6.5%;
}

.prepare_wrap .desc {
    display: inline-block;
    margin: 18rem 0;
    position: relative;
}

.prepare_wrap .desc .tit {
    position: relative;
    display: inline-block;
}

.prepare_wrap .desc .tit:before, .prepare_wrap .desc .tit:after {
    width: 13.2rem;
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    height: 2px;
    transform: translate(0, -50%);
}

.prepare_wrap .desc .tit:before {
    left: -15.6rem;
    background: #6f8;
}

.prepare_wrap .desc .tit:after {
    right: -15.6rem;
    background: #4cf;
}

.prepare_wrap .desc .tit span {
    text-transform: uppercase;
    font-size: 44.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: inline-block;
    background: linear-gradient(to right, #6f8, #4cf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.prepare_wrap .desc .txt {
    letter-spacing: 0.06em;
    margin-top: 2.4rem;
    text-shadow: 1px 0 0 #6f8, -1px 0 0 #0cf;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    font-size: 31px;
    line-height: 1.3;
}

.prepare_wrap .desc .txt span {
    color: #bfc;
}

.btns_shop .btn_home {
    width: 21.2rem;
    height: 5.6rem;
    line-height: 5.6rem;
    font-size: 17px;
}

/* history */
.history_wrap .top {
    margin: 4.8rem 0;
}

.history_wrap .top:after {
    content: '';
    display: block;
    clear: both;
}

.history_wrap .top .date_wrap {
    font-size: 0;
    font-family: 'Roboto';
}

.history_wrap .top .date_wrap input[type=text] {
    cursor: pointer;
    font-family: 'Roboto';
    width: 100%;
    height: 48px;
    background: rgba(170, 170, 170, 0.1);
    box-shadow: inset 0 0 0 1px #aaa;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    padding-left: 2rem;
    letter-spacing: 0.02em;
    padding-top: 1px;
}

.history_wrap .top .date_wrap input[type=text]::placeholder {
    color: #fff;
    font-size: 16x;
}

.history_wrap .top .date_wrap input[type=text]:focus {
    box-shadow: inset 0 0 0 1px #0ae;
    background: rgba(68, 204, 255, 0.1);
}

.history_wrap .top .date_wrap input[type=text]:focus::placeholder {
    color: #4cf;
}

.history_wrap .top .date_wrap .date_select {
    display: inline-block;
    vertical-align: top;
}

.history_wrap .top .date_wrap .date_select > div {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 156px;
    margin-right: 2.4rem;
}

.history_wrap .top .date_wrap .date_select > div:before {
    right: 1.5rem;
    top: 50%;
    margin-top: -3px;
    content: '';
    position: absolute;
    display: block;
    width: 8px;
    height: 6px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url('../../images/common/webshop/arr_sel02.png');
}

.history_wrap .top .date_wrap .date_select > div:after {
    top: 50%;
    right: -1.6rem;
    width: 8px;
    height: 1px;
    background: #aaa;
    content: '';
    display: block;
    position: absolute;
}

.history_wrap .top .date_wrap .date_select > div:focus-within:before {
    background-position: 0 -6px;
}

.history_wrap .top .search_wrap {
    margin: auto;
    float: right;
    max-width: 312px;
}

.history_wrap .top .period {
    display: inline-block;
    vertical-align: top;
}

.history_wrap .top .period ul {
    font-size: 0;
    display: inline-block;
    vertical-align: top;
}

.history_wrap .top .period li {
    display: inline-block;
    vertical-align: top;
    margin-right: -1px;
}

.history_wrap .top .period li a {
    display: block;
    font-size: 16px;
    color: #fff;
    background: rgba(170, 170, 170, 0.1);
    height: 48px;
    text-align: center;
    line-height: 50px;
    width: 104px;
    box-shadow: inset 0 0 0 1px #aaa;
    letter-spacing: 0.02em;
}

.history_wrap .top .period li:nth-child(1) a {
    border-radius: 6px 0 0 6px;
}

.history_wrap .top .period li:nth-child(3) a {
    border-radius: 0 6px 6px 0;
}

.history_wrap .top .period li a:hover {
    color: #4cf;
    box-shadow: inset 0 0 0 1px #4cf;
    background: rgba(68, 204, 255, 0.1);
    position: relative;
}

.history_wrap .top .period li.on a {
    color: #6f8;
    box-shadow: inset 0 0 0 1px #6f8;
    background: rgba(102, 255, 136, 0.1);
    position: relative;
}

.history_wrap .top .period button {
    font-size: 0;
    position: relative;
    margin-left: 1.2rem;
    vertical-align: top;
    cursor: pointer;
    display: inline-block;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: linear-gradient(to bottom, rgba(68, 204, 255, 0.1), rgba(102, 255, 136, 0.1));
    box-shadow: inset 0 1px 1px #6f8, inset 0 1px 1px 0px #6f8, inset 0 -1px 1px #4cf, inset 0 0 0 1px #6f8;
}

.history_wrap .top .period button:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('../../images/common/webshop/icon_search.png');
}

.history_wrap .top .period button:hover {
    box-shadow: inset 0 0 0 1px #6f8;
    background: rgba(102, 255, 136, 0.2);
}

.history_wrap .top .period button:hover:before {
    background-image: url('../../images/common/webshop/icon_search03.png');
}

.history_wrap .paging_wrap {
    margin-top: 6rem;
}

.history_wrap .top .date_range {
    font-size: 0;
    margin-left: 2.4rem;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.history_wrap .top .date_range:before {
    content: '';
    display: block;
    top: 50%;
    height: 1px;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 8px;
    background: #aaa;
}

.history_wrap .top .date_range span {
    display: inline-block;
    vertical-align: top;
    margin-right: 2.4rem;
    border-radius: 0.6rem;
    background: rgba(170, 170, 170, 0.1);
    font-size: 16px;
    color: #999;
    font-family: 'Roboto';
    width: 14.4rem;
    height: 4.8rem;
    line-height: 4.8rem;
    text-align: center;
}

.history_wrap .top .date_range span:last-child {
    margin-right: 0;
}

.ui-widget.ui-widget-content {
    border-radius: 8px;
    border: none;
    border-top: 1px solid #4cf;
    width: 288px;
    padding: 1.8rem 2.4rem 1.5rem;
    background: url('../../images/common/webshop/bg_date.jpg') center center no-repeat;
    background-size: cover;
    margin-top: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    cursor: pointer;
    top: -3px;
    transition: none;
    width: 24px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url('../../images/common/webshop/arr_date.png');
}

.ui-datepicker .ui-datepicker-prev {
    left: 0;
}

.ui-datepicker .ui-datepicker-next {
    transform: scaleX(-1);
    right: 0;
}

.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
    background-position: 0 -24px;
    left: auto;
    right: auto;
    top: -3px;
    border: none;
    background-color: rgba(255, 255, 255, 0);
}

.ui-datepicker .ui-datepicker-prev-hover {
    left: 0;
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 0;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    display: none;
}

.ui-datepicker .ui-datepicker-header {
    padding: 0;
    background: none;
    border: none;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0;
    line-height: normal;
    font-size: 16px;
    color: #fff;
    letter-spacing: 0.01em;
    text-shadow: 1px 1px 1px rgba(0, 85, 119, 0.3);
    font-weight: 400;
}

.ui-datepicker {
    font-family: 'Roboto';
}

.ui-datepicker:before {
    content: '';
    display: block;
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 24px;
    height: 13px;
    background: url('../../images/common/webshop/arr_calendar.png') 0 0 no-repeat;
}

.ui-datepicker:after {
    content: '';
    display: block;
    position: absolute;
    top: 55px;
    left: 0;
    right: 0;
    height: 24px;
    background: rgba(0, 0, 0, 0.3);
    z-index: -1;
}

.ui-datepicker th {
    font-size: 11px;
    font-weight: 500;
    color: #8df;
    text-transform: uppercase;
    font-family: 'Roboto';
    letter-spacing: 0.06em;
    padding: 0.4em;
}

.ui-datepicker th:first-child {
    color: #daa;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: none;
    background: none;
    font-size: 14px;
    color: #fff;
}

.ui-datepicker td {
    padding: 2px 3px 0;
}

.ui-datepicker td a {
    transition: none;
    padding: 1px 0 0;
    border-radius: 4px;
    text-align: center;
    line-height: 27px;
    font-family: 'Roboto';
}

.ui-datepicker td:first-child a {
    color: #fcc;
}

.ui-datepicker td.ui-datepicker-today a {
    background: rgba(136, 221, 255, 0.3);
}

.ui-datepicker td a:hover {
    box-shadow: inset 0 0 0 1px #6f8;
    background: url('../../images/common/webshop/icon_data.png') right 3px bottom 3px no-repeat;
    color: #6f8;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    cursor: pointer;
    width: auto;
    margin: 0;
    font-size: 16px;
    background: none;
    border: none;
    font-size: 16px;
    color: #fff;
    letter-spacing: 0.02em;
    text-shadow: 1px 1px 1px rgba(0, 85, 119, 0.3);
    font-family: 'Roboto';
}

.ui-datepicker select.ui-datepicker-month:focus, .ui-datepicker select.ui-datepicker-year:focus {
    outline: none;
}

.ui-datepicker select.ui-datepicker-month option, .ui-datepicker select.ui-datepicker-year option {
    color: #000;
}

.ui-datepicker select.ui-datepicker-month {
    margin-right: 5px;
}

.ui-datepicker table {
    margin: 2rem 0 0;
}

.ui-datepicker tr:first-child td {
    padding-top: 1.5rem;
}

.history_wrap .item_wrap .item_list .btn_rdl {
    right: 2.4rem;
}

/* check */
.check input[type=checkbox] {
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
    opacity: 0;
}

.check input[type=checkbox] + label {
    letter-spacing: 0.02em;
    padding-left: 24px;
    height: 24px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}

.check input[type=checkbox] + label:before {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    width: 24px;
    height: 24px;
    content: "";
    background: #222222;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px #999;
}

.check input[type=checkbox] + label:after {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    width: 24px;
    height: 24px;
    content: "";
    border-radius: 4px;
    background: url('../../images/common/webshop/check_on.png') center center no-repeat;
    box-shadow: inset 0 0 0 1px #6f8;
}

.check input[type=checkbox]:checked + label:after {
    opacity: 1;
}

/* wish */
.all_check {
    padding: 2.4rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 1.2rem;
    margin: 4.8rem 0;
    position: relative;
}

.all_check .check input[type=checkbox] + label {
    font-size: 16px;
    color: #aaa;
    font-family: 'Roboto';
    padding-left: 36px;
    line-height: 24px;
}

.all_check .check input[type=checkbox]:checked + label {
    color: #6f8;
}

.all_check .btn_delete {
    font-size: 16px;
    color: #4cf;
    letter-spacing: 0.02em;
    font-family: 'Roboto';
    top: 50%;
    right: 2.4rem;
    transform: translate(0, -50%);
    position: absolute;
    border-bottom: 1px solid #4cf;
}

.all_check .btn_delete:hover {
    color: #6f8;
    border-bottom-color: #6f8;
}

.wish_wrap .item_wrap .item_list {
    margin-left: -2.4rem;
}

.wish_wrap .item_wrap .item_list > li {
    width: calc(100% / 6);
    padding-left: 2.4rem;
    margin-bottom: 2.4rem;
}

.wish_wrap .item_wrap .item_list .check {
    position: absolute;
    padding: 0.6rem;
    background: #222222;
    border-radius: 8px;
    top: 6px;
    right: 6px;
    z-index: 14;
}

.wish_wrap .item_wrap .state {
    position: absolute;
    z-index: 1;
    width: max-content;
    left: 50%;
    transform: translate(-50%, 0);
    height: 24px;
    padding: 3px 6px 0;
    background: #333;
    border-radius: 6px 6px 0 0;
    display: inline-block;
}

.wish_wrap .item_wrap .btn_delete {
    margin-top: 2rem;
    background: rgba(255, 255, 255, 0.05);
    z-index: 13;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-top-color: #aaa;
    border-bottom-color: #6f9;
    border-radius: 0.6rem;
    display: block;
    font-size: 13px;
    color: #bbb;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    width: 96px;
    height: 30px;
    line-height: 28px;
    font-weight: 500;
}

.wish_wrap .item_wrap .btn_delete:hover {
    border: 1px solid #63ea90;
    color: #6f8;
    background: rgba(102, 255, 136, 0.2);
}

.wish_wrap .item_wrap .item_list .desc {
    padding: 0 2.4rem;
}

.wish_wrap .item_wrap .item_list .desc .price {
    background: none;
    position: static;
    padding: 0;
    margin-top: 5px;
    padding-right: 0.8rem;
}

.wish_wrap .item_wrap .item_list .con:hover .state {
    background: #000;
}

.wish_wrap .item_wrap .item_list .con:hover .desc .price {
    background: none;
}

.wish_wrap .item_wrap .item_list .desc {
    height: 156px;
    position: static;
}

.wish_wrap .item_wrap .item_list .soldout .con:before {
    z-index: 13;
}

.wish_wrap .item_wrap .item_list .soldout .txt {
    z-index: 13;
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    margin: 0.8rem auto 1.6rem;
    max-width: 192px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
}

.wish_wrap .item_wrap .soldout .btn_delete {
    margin-top: 0;
}

.wish_wrap .item_wrap .item_list .soldout .con:hover .state {
    background: #333;
}

.item_wrap .item_list .inactive .s_link {
    display: none;
}

.item_wrap .item_list .inactive .desc .name, .item_wrap .item_list .inactive .desc .price {
    color: #777 !important;
}

.item_wrap .item_list .inactive .state span {
    color: #777;
    border-color: #777;
}

.item_wrap .item_list .inactive .con:hover .desc, .item_wrap .item_list .inactive .con:hover .state {
    background: #333;
}

.item_wrap .item_list .inactive .con:hover .desc:before {
    width: 0;
}

.item_wrap .item_list .inactive .img:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
}

.item_wrap .item_list .inactive.special .img , .item_wrap .item_list .inactive.random .img {
    position: relative;
    z-index: 1;
}

.item_wrap .item_list .check input:disabled {
    z-index: 10;
}

.item_wrap .item_list .check input:disabled + label:before , .item_wrap .item_list .check input:disabled + label:after {
    background: url('../../images/common/webshop/check_no.png') center center no-repeat;
    box-shadow: inset 0 0 0 1px #666;
}

.item_wrap .item_list .check input:disabled + label {
    cursor: default;
}

/* cart */
.cart_wrap {
    font-size: 0;
    position: relative;
    min-height: 52rem;
}

.cart_wrap .left_area {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 360px);
}

.cart_wrap .right_area {
    display: inline-block;
    vertical-align: top;
    width: 288px;
    margin-left: 72px;
    position: absolute;
    top: 0;
    right: 0;
}

.cart_wrap .right_area.bot {
    top: auto;
    bottom: 1.2rem;
}

.cart_wrap .item_wrap .row_list {
    margin-left: 0;
}

.cart_wrap .item_wrap .row_list > li {
    position: relative;
    width: 100%;
    display: block;
    padding-left: 0;
}

.cart_wrap .item_wrap .item_list .check {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 11;
    padding: 0.6rem 0.6rem 0 0;
    background: #151515;
    border-radius: 0 8px 0 0;
}

.cart_wrap .item_wrap .item_list .state {
    margin-left: -3px;
    margin-bottom: 6px;
}

.cart_wrap .item_wrap .row_list .item {
    width: 156px;
    height: 156px !important;
}

.cart_wrap .item_wrap .row_list .desc {
    height: 156px;
    width: calc(100% - 156px);
}

.cart_wrap .item_wrap .item_list .etc {
    position: absolute;
    top: 50%;
    right: 3.6rem;
    transform: translate(0, -50%);
}

.cart_wrap .item_wrap .item_list .etc .explan {
    display: inline-block;
    vertical-align: middle;
    margin-top: 0;
    padding-top: 0;
    border: none;
    margin-right: 4.8rem;
}

.cart_wrap .paging_wrap {
    margin-top: 7.2rem;
}

.cart_wrap .item_wrap .row_list .desc {
    padding-right: 46rem;
}

.cart_wrap .item_wrap .row_list .desc .name {
    position: relative;
    max-width: 100%;
}

.cart_wrap .item_wrap .row_list .desc .name .period {
    margin-left: 7px;
    padding-left: 10px;
    position: relative;
}

.cart_wrap .item_wrap .row_list .desc .name .period:before {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: 1.6rem;
    background: rgba(255, 255, 255, 0.3);
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
}

.cart_wrap .item_wrap .row_list .con:hover .desc .name {
    color: #fff;
}

.total_all {
    text-align: center;
    margin-top: 212px;
}

.total_all.fixed {
    margin-top: 0;
    position: fixed;
}

.total_all .total {
    background: rgba(255, 255, 255, 0.1);
    padding: 4rem 1.2rem;
    word-break: break-word;
    margin-bottom: 2.4rem;
    font-family: 'Roboto';
}

.total_all .total .num {
    font-size: 20px;
    color: #aaa;
    letter-spacing: 0.02em;
}

.total_all .total .num font {
    color: #fff;
}

.total_all .total .price {
    color: #ff0;
    font-size: 42px;
    font-weight: 700;
    margin-top: 5px;
    padding-right: 0.8rem;
}

.total_all .total .price img {
    vertical-align: middle;
    position: relative;
    top: -2px;
    margin-right: 1rem;
}

.total_all .btn_basic {
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 1.2rem;
    display: block;
}

.total_all .btn_all {
    letter-spacing: 0.06em;
    font-weight: 700;
    color: #fff;
    font-size: 21px;
    width: 28.8rem;
    height: 9.6rem;
    line-height: 9.6rem;
}

.total_all .btn_all span {
    color: #fe0;
}

.total_all .btn_all:hover span {
    color: #6f8;
}

.total_all .btn_option {
    color: #ccc;
    font-size: 13px;
    width: 28.8rem;
    height: 4.8rem;
    line-height: 4.8rem;
    font-weight: 500;
}

.total_all .btn_option:hover {
    color: #fff;
}

.view_wrap .cart_wrap .top {
    text-align: right;
    margin-bottom: 0;
}

.view_wrap .cart_wrap .top .rm_list {
    display: inline-block;
    padding: 1.2rem 1.2rem 0;
    border-radius: 1.2rem 1.2rem 0 0;
    background: #333 url(../../images/common/webshop/ptn_noise.png) 0 0 repeat;
    transition: all ease-in-out 0.2s;
    position: relative;
}

.view_wrap .cart_wrap .top .remain {
    margin-top: 0;
    margin-right: 0;
    box-shadow: inset 0px 0 0 0.1rem #0e1;
    border-radius: 0;
    margin-right: -1px;
}

.view_wrap .cart_wrap .top .remain:first-child {
    border-radius: 4px 0 0 4px;
}

.view_wrap .cart_wrap .top .remain:last-child {
    border-radius: 0 4px 4px 0;
}

.view_wrap .cart_wrap .top .remain:only-child {
    border-radius: 4px;
}

.cart_wrap .item_wrap .item_list li.special .etc {
    top: calc(50% + 24px);
}

.cart_wrap .item_wrap .item_list .soldout .txt {
    position: static;
    display: inline-block;
    vertical-align: middle;
    width: 19.2rem;
    height: 48px;
    line-height: 48px;
    margin-right: 8.4rem;
}

.cart_wrap .item_wrap .item_list .soldout .desc .price {
    display: block;
}

.cart_wrap .item_wrap .item_list .soldout .con:hover .desc {
    background: #333 url(../../images/common/webshop/ptn_noise.png) 0 0 repeat;
}

.cart_wrap .item_wrap .row_list .soldout .con:hover .desc .name {
    color: #ccc;
}

.cart_wrap .item_wrap .item_list .soldout .etc .btns .btn_order {
    display: none;
}

.view_wrap .cart_wrap .item_list li:hover .top .rm_list, .view_wrap .cart_wrap .item_wrap .item_list li:hover .con .desc {
    background: #000;
}

.view_wrap .cart_wrap .row_list .soldout:hover .top .rm_list, .view_wrap .cart_wrap .item_wrap .row_list .soldout:hover .con .desc {
    background: #333 url(../../images/common/webshop/ptn_noise.png) 0 0 repeat;
}

.view_wrap .cart_wrap .row_list .soldout .top .rm_list:before {
    content: '';
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    z-index: 11;
    border-radius: 1.2rem 1.2rem 0 0;
    border: 1px solid #000;
    border-bottom: none;
}

/* purchase */
.cart_wrap .purchase_wrap .item_wrap .row_list .desc {
    padding-right: 3.6rem;
}

.cart_wrap .purchase_wrap .right_area {
    width: 432px;
}

.cart_wrap .purchase_wrap .left_area {
    width: calc(100% - 504px);
}

.cart_wrap .purchase_wrap .cash_wrap {
    font-size: 0;
}

.cart_wrap .purchase_wrap .total_all.fixed .cash_wrap {
    width: 432px;
}

.cart_wrap .purchase_wrap .total_all {
    margin-top: 92px;
}

.cart_wrap .purchase_wrap .total_all.fixed {
    margin-top: 0;
}

.cart_wrap .purchase_wrap .cash_wrap ul {
    margin-bottom: 2.4rem;
}

.cart_wrap .purchase_wrap .cash_wrap li {
    position: relative;
    background: rgba(68, 204, 255, 0.1);
    color: #ccc;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2.4rem 3.6rem;
    text-align: right;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart_wrap .purchase_wrap .cash_wrap li span {
    text-align: left;
    flex-grow: 1;
}

.cart_wrap .purchase_wrap .cash_wrap li .price {
    font-size: 28px;
    font-weight: 700;
    font-family: 'Roboto';
    letter-spacing: 0;
    text-align: right;
    flex-grow: 1;
}

.cart_wrap .purchase_wrap .cash_wrap li .price img {
    vertical-align: middle;
    position: relative;
    top: -2px;
    margin-left: 1rem;
}

.cart_wrap .purchase_wrap .cash_wrap li:first-child:before {
    content: '';
    display: block;
    left: 3.6rem;
    bottom: 0;
    height: 1px;
    right: 3.6rem;
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
}

.cart_wrap .purchase_wrap .cash_wrap li:nth-child(2) {
    color: #ff0;
}

.cart_wrap .purchase_wrap .cash_wrap li:last-child {
    margin-top: 2.4rem;
    background: rgba(255, 255, 255, 0.1);
    color: #6f8;
}

.cart_wrap .purchase_wrap .cash_wrap .btn_basic {
    display: inline-block;
    height: 7rem;
    line-height: 7rem;
}

.cart_wrap .purchase_wrap .cash_wrap .btn_cancel {
    width: 164px;
}

.cart_wrap .purchase_wrap .cash_wrap .btn_buy {
    width: calc(100% - 178px);
    margin-left: 14px;
}

.cart_wrap .purchase_wrap .cash_wrap .btn_ok {
    width: 100% !important;
}

.cart_wrap .purchase_wrap .complete {
    font-size: 16px;
    height: 15.6rem;
    text-align: center;
    color: #fff;
    display: flex;
    font-family: 'Roboto';
    background: rgba(102, 255, 136, 0.15);
    border-radius: 1.2rem;
    margin: 4.8rem auto 2.4rem;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.02em;
}

.cart_wrap .purchase_wrap .complete span {
    color: #6f8;
    margin-left: 6px;
}

.cart_wrap .purchase_wrap .tit_dl {
    margin-bottom: 4.8rem;
}

.pop_random {
    background: url('../../images/common/webshop/pop_random_bg01.png') right 0 no-repeat , url('../../images/common/webshop/pop_random_bg02.png') 0 bottom no-repeat;
    background-size: 73.2rem auto, 51.9rem auto;
    background-color: rgba(0, 0, 0, 0.85);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
}

.pop_random .pop-layout {
    max-width: 744px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pop_random .randombox {
    background: none;
    padding: 1.2rem;
    border: none;
}

.pop_random .randombox .rd_con {
    margin: 0;
}

.pop_random .randombox .rd_con:before {
    content: '';
    left: -1.2rem;
    right: -1.2rem;
    top: -1.2rem;
    bottom: -1.2rem;
    display: block;
    position: absolute;
    background: url(../../images/common/webshop/bg_rdbox_line.png) 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1111;
}

.pop_random .randombox .rd_con .effect:before {
    display: none;
}

.pop_random > .btn_skip {
    display: none;
}

.pop_random .btn_skip {
    position: absolute;
    cursor: pointer;
    border-radius: 0.6rem;
    text-transform: uppercase;
    width: 72px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #bbb;
    font-weight: 700;
    letter-spacing: 0.06em;
    box-shadow: inset 0 1px 0 rgba(170, 170, 170, 1), inset 0 -1px 0 #6f9, inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    margin-right: 7px;
    background: rgba(255, 255, 255, 0.1);
}

.pop_random .btn_skip:hover {
    color: var(--color_ge);
    box-shadow: inset 0 0 0 1px #6f8;
    background: rgba(102, 255, 136, 0.2);
}

.pop_random .top {
    position: relative;
    margin-bottom: 3.6rem;
    padding: 0 14rem;
    height: 28px;
}

.pop_random .top .btn_skip {
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}

.pop_random .top .name {
    text-align: center;
    font-size: 23px;
    color: #0ff;
    font-weight: 500;
    font-family: 'Roboto';
}

.pop_random .top .num {
    font-size: 34px;
    letter-spacing: 0.04em;
    color: #0dd;
    font-weight: 700;
    font-family: 'Roboto';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}

.pop_random .top .num font {
    color: #ff0;
}

.pop_random .btn_rd {
    z-index: 1;
    position: absolute;
    bottom: 2.3rem;
    right: 2.3rem;
    border-radius: 1.2rem;
    text-shadow: 1px 0px 0 #6f8, -1px 0 0 #0cf, 0 0 2rem #06f;
    cursor: pointer;
    font-size: 34px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: inset 0 1px 1px #4cf, inset 0 1px 1px 0px #4cf, inset 0 -1px 1px #6f8, inset 0 0 0 1px #4cf;
    width: 18rem;
    height: 7.2rem;
    line-height: 7.2rem;
    background: rgba(0, 51, 119, 0.9);
    letter-spacing: 0.06em;
}

.pop_random .btn_rd:hover {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 1px #6f8, inset 0 1px 1px 0px #6f8, inset 0 -1px 1px #fe0, inset 0 0 0 1px #6f8;
    background: rgba(102, 255, 136, 0.3);
}

.pop_random .btn_next {
    display: none;
}

.pop_random .btn_next:after {
    position: relative;
    top: -2px;
    margin-left: 1.2rem;
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 2.2rem;
    height: 2.4rem;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url('../../images/common/webshop/pop_arr.png');
}

.pop_random .btn_next:hover:after {
    background-position: 0 -2.4rem;
}

.pop_random .btn_rd.slick-disabled {
    display: none !important;
}

.item_wrap .rd_list {
    padding: 2.4rem 2.4rem 1.2rem;
    background: #222222 url('../../images/common/webshop/ptn_gnb.png') 0 0 repeat;
    display: none;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, #4cf, #6f8);
    border-image-slice: 1;
}

.item_wrap .rd_list ul {
}

.item_wrap .rd_list ul li {
    margin: 0 1.2rem;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 1.2rem;
    width: 12rem;
}

.item_wrap .rd_list ul .rd_item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    width: 100%;
    height: 12rem;
}

.item_wrap .rd_list ul .rd_item img {
    max-width: 100%;
    max-height: 100%;
}

.item_wrap .rd_list ul span {
    font-size: 12px;
    color: #999;
    font-weight: 500;
    font-family: 'Roboto';
    line-height: 1.1;
    display: block;
    text-align: center;
    margin-top: 1rem;
    word-break: break-word;
    width: 100%;
}

.item_wrap .item_list .btn_rdl {
    cursor: pointer;
    display: block;
    border-radius: 1.2rem;
    background-color: rgba(255, 255, 255, 0.1);
    width: 8.4rem;
    height: 8.4rem;
    font-size: 0;
    position: absolute;
    top: 50%;
    right: 3.6rem;
    transform: translate(0, -50%);
    z-index: 12;
}

.item_wrap .item_list .btn_rdl:before {
    content: '';
    display: block;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 6.8rem;
    height: 4.4rem;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url('../../images/common/webshop/arr_open_ov.png');
    background-size: 100% auto;
}

.item_wrap .item_list .btn_rdl.open {
    transform: translate(0, -50%) scaleY(-1);
}

.item_wrap .item_list .btn_rdl:hover:before {
    background-position: 0 -4.4rem;
}

/* error */
.error_wrap {
    text-align: center;
}

.error_wrap .desc {
    display: inline-block;
    position: relative;
}

.error_wrap .desc .tit {
    position: relative;
    display: inline-block;
}

.error_wrap .desc .tit span {
    text-transform: uppercase;
    font-size: 240px;
    font-weight: 700;
    letter-spacing: 0.04em;
    display: inline-block;
    background: linear-gradient(to right, #6f8, #4cf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.error_wrap .desc .txt {
    letter-spacing: 0.06em;
    margin-top: -3.6rem;
    text-shadow: 1px 0 1px #6f8, -1px 0 1px #0cf;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.3;
}

/* maintenance */
.maintenance {
    background: url('../../images/common/webshop/bg_maintenance.jpg') 0 0 no-repeat;
    background-size: cover;
    text-align: center;
    padding: 12rem 0 14.4rem;
    position: relative;
}

.maintenance:before {
    content: '';
    display: block;
    top: 0;
    left: 0;
    right: 0;
    height: 0.2rem;
    background: linear-gradient(to right, #4cf, #6f8);
    position: absolute;
}

.maintenance .info {
    display: inline-block;
    margin: 9.6rem auto;
}

.maintenance .info li {
    position: relative;
    padding: 0 3.6rem;
    margin-bottom: 4.8rem;
}

.maintenance .info li:last-child {
    margin-bottom: 0;
}

.maintenance .info li:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2.4rem;
    background: #fc0;
}

.maintenance .info .tit {
    font-size: 27px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
    padding: 0.8rem 3.6rem;
    position: relative;
}

.maintenance .info .tit span {
    color: #fe0;
}

.maintenance .info .tit:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3rem;
    background: url('../../images/common/webshop/bar_maintenance01.png') 0 0 repeat-y;
}

.maintenance .info .txt {
    margin-top: 1.2rem;
    position: relative;
    color: #000;
    font-size: 18px;
    font-family: 'Roboto';
    background: linear-gradient(to right, #4cf, #6f8);
    padding: 1.4rem 4.8rem 1.2rem;
}

.maintenance .info .txt:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -3.6rem;
    width: 2.4rem;
    background: url('../../images/common/webshop/bar_maintenance02.png') 0 0 repeat-y;
}

.maintenance .sns {
    font-size: 0;
}

.maintenance .sns .nation {
    display: inline-block;
    vertical-align: top;
    margin-right: 7.2rem;
}

.maintenance .sns .nation:last-child {
    margin-right: 0;
}

.maintenance .sns .name {
    text-transform: uppercase;
    font-size: 14px;
    color: #ccc;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 2rem;
}

.maintenance .sns .name img {
    margin: 0 1.2rem;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.maintenance .sns ul {
    font-size: 0;
}

.maintenance .sns li {
    display: inline-block;
    vertical-align: top;
    margin-right: 2px;
}

.maintenance .sns li:last-child {
    margin-right: 0;
}

.maintenance .sns li a {
    display: block;
    width: 7.2rem;
    height: 7.2rem;
    background: rgba(0, 85, 119, 0.7);
    border-radius: 6px;
    position: relative;
}

.maintenance .sns li a:before {
    content: '';
    display: block;
    opacity: 0.5;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: center center;
    background-repeat: no-repeat;
}

.maintenance .sns .discord a:before {
    background-image: url('../../images/common/webshop/icon_sns_discord.png');
}

.maintenance .sns .facebook a:before {
    background-image: url('../../images/common/webshop/icon_sns_facebook.png');
}

.maintenance .sns .insta a:before {
    background-image: url('../../images/common/webshop/icon_sns_instagram.png');
}

.maintenance .sns .tiktok a:before {
    background-image: url('../../images/common/webshop/icon_sns_tiktok.png');
}

.maintenance .sns .youtube a:before {
    background-image: url('../../images/common/webshop/icon_sns_youtube.png');
}

.maintenance .sns li a:hover {
    background: #c00;
}

.maintenance .sns li a:hover:before {
    opacity: 1;
}

/* gold */
.gold_area {
    margin-bottom: 6rem;
    background: url('../../images/common/webshop/bg_gold_top.png') center center no-repeat;
    border-radius: 12px;
    box-shadow: 0 0 1rem rgba(255, 255, 255, 0.4), 0 0 3rem rgba(255, 221, 85, 0.3);
    text-align: center;
    padding: 1.6rem 0;
    background-size: 100% 100%;
}

.gold_area span {
    vertical-align: middle;
    background: -webkit-linear-gradient(#fff, #fe9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 33px;
    letter-spacing: 0.04em;
    font-weight: 700;
    filter: drop-shadow(0 0 0.4rem #000);
}

.gold_area img {
    margin-right: 1.2rem;
    vertical-align: middle;
}

/* token */
.sub_contents .token_base {
    background: #050505 url('../../images/common/webshop/bg_token_base.jpg') center 0 no-repeat;
    background-size: 100% auto;
    position: relative;
}

.token_base .token_area .token_img {
    display: inline-block;
}

.token_base .token_area .token_img:before {
    width: 10.8rem;
    height: 15.6rem;
    background: url('../../images/common/webshop/token_obj01.png') 0 0 no-repeat;
    top: auto;
    bottom: 0;
    left: -20.4rem;
    animation: none;
    background-size: 100% auto;
}

.token_base .token_area .token_cont .tit {
    position: relative;
    text-transform: uppercase;
}

.token_base .token_area .token_cont .tit:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 4.8rem;
    height: 2.4rem;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url('../../images/common/webshop/token_bullet_basic.png');
    background-size: 100% auto;
}

.token_base .token_area .token_cont .tit p {
    display: inline-block;
    vertical-align: middle;
    padding-left: 1.2rem;
    background: none;
}

.token_base .token_area .token_cont .tit p font {
    -webkit-text-stroke: 0;
    background: linear-gradient(to bottom, #ffff66, #ffcc66, #ffff66);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.token_base .token_area .token_cont .search_wrap {
    border-radius: 4px;
    background: linear-gradient(to right, #eeee66, #ffcc55);
    border: 1px solid #ffff66;
}

.token_base .token_area .token_cont .search_wrap .search_area input[type=text] {
    color: #000;
}

.token_base .token_area .token_cont .search_wrap .search_area input[type=text]::placeholder {
    color: #000;
}

.token_base .token_area .token_cont .search_wrap .search_area input[type=text]:focus {
    color: #000;
}

.token_base .token_area .token_cont .search_wrap .search_area button {
    margin-top: -15px;
    right: 1.2rem;
    border-radius: 50%;
    background: #000;
    width: 30px;
    height: 30px;
}

.token_base .token_area .token_cont .search_wrap .search_area button:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url('../../images/common/webshop/icon_search_yg.png');
}

.token_base .token_area .token_cont .search_wrap .search_area button:hover:before {
    background-position: 0 -18px;
}

.token_base .token_area .token_my {
    border-radius: 4px;
    background: rgba(17, 17, 0, 0.5);
    border: none;
}

.token_base .token_area .token_my:before {
    transition: all ease-in-out 0.2s;
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 4px;
    padding: 1px;
    background: linear-gradient(to bottom, #ffcc55, #ffee66);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    width: auto;
    height: auto;
}

.token_base .token_area .token_my > p {
    background: none;
}

.token_base .token_area .token_my > p:before, .token_base .token_area .token_my > p:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -3.6rem;
    width: 8.4rem;
    height: 7.2rem;
    background: url('../../images/common/webshop/token_img_my.png') 0 0 no-repeat;
    background-size: 100% auto;
}

.token_base .token_area .token_my > p:before {
    left: -1.2rem;
}

.token_base .token_area .token_my > p:after {
    right: -1.2rem;
    transform: scaleX(-1);
}

.token_base .token_area .token_my:after {
    display: none;
}

.token_base .token_area .token_my span {
    -webkit-text-stroke: 0;
    color: #3aff94;
}

.token_base .item_wrap .item_list .item {
    background: #493311;
    border-top: 1px solid #3aff94;
}

.token_base .item_wrap .item_list .desc {
    background: #775522;
}

.token_base .lv_wrap {
    background: #775522;
}

.token_base .lv_wrap .lv {
    background: #000;
}

.token_base .lv_wrap .season {
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0.1);
}

.token_base .item_wrap .item_list .desc .price .del_line {
    color: #ddcc99;
}

.token_base .item_wrap .item_list .desc .price .del_line:before {
    background: #ddcc99;
}

.token_base .item_wrap .item_list .desc .price .del_line:after {
    background: url(../../images/common/webshop/icon_del_t.png) right center no-repeat;
}

.token_base .item_wrap .item_list .sale {
    background: #3aff94;
    color: #006633;
}

.token_base .item_wrap .item_list .sale font {
    color: #000;
}

.token_base .item_wrap .item_list .desc .price {
    background: rgba(34, 17, 0, 0.3);
}

.token_base .item_wrap .item_list .special .item:before , .token_base .item_wrap .item_list .special .item:after {
    display: none;
}

.token_base .item_wrap .item_list .special .item .img {
    background-image: url(../../images/common/webshop/token/bg_token_special.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.token_base .item_wrap .item_list .random .item:before , .token_base .item_wrap .item_list .random .item:after {
    display: none;
}

.token_base .item_wrap .item_list .random .item .img {
    background-image: url(../../images/common/webshop/token/bg_token_random.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.token_base .item_wrap .item_list .special .con:hover .desc:before {
    background: #33ff99;
}

.token_base .item_wrap .item_list .random .con:hover .desc:before {
    background: #33ff99;
}

.token_base .item_wrap .item_list .info {
    border-radius: 0;
    color: #ffcc55;
    border-color: #ffcc55
}

.token_base .item_wrap .item_list .info li {
    border-color: #ffcc55;
}

.token_base .item_wrap .item_list .info span:last-child {
    color: #ffcc55;
}

.token_base .item_wrap .item_list .info font {
    color: #3aff94;
}

.token_base .paging_wrap li a {
    background: #333;
    color: #999999;
}

.token_base .paging_wrap li:hover a, .token_base .paging_wrap li.on a, .token_base .paging_wrap li.on a:hover {
    background: #3aff94;
    color: #000;
}

.token_base .paging_wrap li.first a, .token_base .paging_wrap li.last a {
    background-image: url(../../images/common/webshop/page_ll_g.png);
    opacity: 1;
    background-color: rgba(0, 0, 0, 0) !important;
}

.token_base .paging_wrap li.prev a, .token_base .paging_wrap li.next a {
    background-image: url(../../images/common/webshop/page_l_g.png);
    opacity: 1;
    background-color: rgba(0, 0, 0, 0) !important;
}

.token_base .paging_wrap li.first a:hover, .token_base .paging_wrap li.last a:hover {
    background-image: url(../../images/common/webshop/page_ll.png);
}

.token_base .paging_wrap li.prev a:hover, .token_base .paging_wrap li.next a:hover {
    background-image: url(../../images/common/webshop/page_l.png);
}

.sub_contents .token_wrap {
    background: #0e3958 url('../../images/common/webshop/token_bg.jpg') center 0 no-repeat;
    background-size: 100% auto;
}

.token_area {
    margin-bottom: 6rem;
    text-align: center;
}

.token_area .token_img {
    position: relative;
}

.token_area .token_img img {
    animation: ani_flip 2s ease-out forwards;
}

.token_area .token_img:before {
    content: '';
    width: 100%;
    height: 100%;
    background: url('../../images/common/webshop/token_img_effect.png') 50% bottom no-repeat;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    animation: ani_scale 0.5s ease-in;
}

.token_area .token_cont {
    margin-bottom: 2.4rem;
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
}

.token_area .token_cont .tit {
    font-size: 29.5px;
    color: #fff;
    text-align: left;
    font-weight: 700;
    font-family: 'Oswald';
}

.token_area .token_cont .tit p {
    padding-left: 3.6rem;
    -webkit-text-stroke: 0.02rem #2df;
    text-stroke: 0.02rem #2df;
    background: url('../../images/common/webshop/token_bullet.png') left bottom no-repeat;
    filter: drop-shadow(0 0 0.4rem rgba(170, 221, 255, 0.2));
}

.token_area .token_cont .tit font {
    color: #cef;
}

.token_area .token_cont .search_wrap {
    margin: 0;
    text-align: left;
    border: none;
    border-radius: 0;
    background: linear-gradient(to right, rgba(0, 153, 255, 1), rgba(0, 153, 255, 0.2));
    -webkit-backdrop-filter: var(blur(10px));
    backdrop-filter: blur(10px);
}

.token_area .token_cont .search_wrap .search_area {
    width: 456px;
    height: 100%;
}

.token_area .token_cont .search_wrap .search_area input[type=text]::placeholder {
    color: #fff;
}

.token_area .token_cont .search_wrap .search_area input[type=text]:focus {
    color: #ff0;
}

.token_area .token_cont .search_wrap .search_area button {
    background-image: url('../../images/common/webshop/icon_search_wt.png');
}

.token_area .token_my {
    border: 1px solid #07b;
    border-radius: 0;
    background: linear-gradient(to right, rgba(0, 153, 255, 0.45), rgba(0, 153, 255, 0.05));
    position: relative;
    -webkit-backdrop-filter: var(blur(10px));
    backdrop-filter: blur(10px);
}

.token_area .token_my > p {
    padding: 1.6rem 0;
    background: url('../../images/common/webshop/token_ptn_line.png') repeat;
    position: relative;
}

.token_area .token_my:before, .token_area .token_my:after {
    content: '';
    display: block;
    position: absolute;
}

.token_area .token_my:before {
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background: url('../../images/common/webshop/token_frame_lt.html') left 0 no-repeat, url('../../images/common/webshop/token_frame_rb.png') right bottom no-repeat;
    top: -1px;
    left: -1px;
}

.token_area .token_my:after {
    width: 308px;
    height: 308px;
    background: url('../../images/common/webshop/token_img_target.png') no-repeat;
    top: -155px;
    left: -154px;
}

.token_area .token_my font {
    font-size: 17px;
    color: #8df;
    letter-spacing: 0.06em;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 36px;
    transform: translate(0, -50%);
    display: none;
}

.token_area .token_my span {
    font-size: 32.5px;
    color: #fff;
    letter-spacing: 0.04em;
    font-weight: 700;
    -webkit-text-stroke: 0.02rem #ff0;
    text-stroke: 0.02rem #ff0;
    vertical-align: middle;
}

.token_area .token_my img {
    margin-right: 1.2rem;
    vertical-align: middle;
}

.token_wrap .item_wrap .item_list .sale {
    background: linear-gradient(to bottom, rgba(0, 204, 255, 0.4), rgba(0, 153, 255, 0.4));
    color: #6ef;
    backdrop-filter: blur(20px);
}

.token_wrap .item_wrap .item_list .sale font {
    color: #ff0;
}

.token_wrap .item_wrap .item_list .img {
    background: linear-gradient(to bottom, rgba(0, 153, 255, 0.25), rgba(0, 119, 221, 0.25));
    position: relative;
}

.token_wrap .item_wrap .item_list .img:before, .token_wrap .item_wrap .item_list .img:after {
    content: '';
    display: block;
    position: absolute;
}

.token_wrap .item_wrap .item_list .img:before {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #0cf, #09f);
    top: 0;
    left: 0;
}

.token_wrap .item_wrap .item_list .lv_wrap {
    background: #059;
}

.token_wrap .item_wrap .item_list .desc {
    background: #059;
}

.token_wrap .item_wrap .item_list .desc:before {
    background: #3bf;
}

.token_wrap .item_wrap .item_list .desc .price {
    background: rgba(0, 153, 255, 0.2);
}

.token_wrap .item_wrap .item_list .desc .price .del_line {
    color: #3bf;
}

.token_wrap .item_wrap .item_list .desc .price .del_line:after {
    background: url('../../images/common/webshop/icon_del_3bf.png') right center no-repeat;
}

.token_wrap .item_wrap .item_list .desc .price .del_line:before {
    background: #3bf;
}

.token_wrap .item_wrap .item_list .info {
    border-radius: 0;
    border-color: #4ef;
}

.token_wrap .item_wrap .item_list .info span {
    color: #4ef;
}

.token_wrap .item_wrap .item_list .info span:last-child {
    color: #ff0;
}

.token_wrap .item_wrap .item_list .soldout .info, .token_wrap .item_wrap .item_list .soldout .info span:last-child {
    border-color: #555;
    color: #999;
}

.token_wrap .item_wrap .item_list .special .item:before , .token_wrap .item_wrap .item_list .special .item:after {
    display: none;
}

.token_wrap .item_wrap .item_list .special .item .img {
    background-image: url(../../images/common/webshop/token/pbic/bg_special.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.token_wrap .item_wrap .item_list .random .item:before , .token_wrap .item_wrap .item_list .random .item:after {
    display: none;
}

.token_wrap .item_wrap .item_list .random .item .img {
    background-image: url(../../images/common/webshop/token/pbic/bg_random.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.token_wrap .item_wrap .item_list .special .con:hover .desc:before {
    background: #009cff;
}

.token_wrap .item_wrap .item_list .random .con:hover .desc:before {
    background: #009cff;
}

.token_wrap .item_wrap .item_list .info {
    border-radius: 0;
    color: #44eeff;
    border-color: #44eeff;
}

.token_wrap .item_wrap .item_list .info li {
    border-color: #44eeff;
}

.token_wrap .item_wrap .item_list .info span:last-child {
    color: #ffff00;
}

.token_wrap .item_wrap .item_list .info font {
    color: #fff;
}

.token_wrap .paging_wrap li a {
    -webkit-backdrop-filter: var(blur(10px));
    backdrop-filter: blur(10px);
}

/*.token_wrap .paging_wrap li a {color: #4ef; background: rgba(0, 18, 51, 0.5); -webkit-backdrop-filter: var(blur(10px)); backdrop-filter: blur(10px);}
.token_wrap .paging_wrap li a:hover {color: #4ef; background: rgba(68, 238, 255, 0.2);}
.token_wrap .paging_wrap li.on a, .token_wrap .paging_wrap li.on a:hover {background: #4ef; color: #000;}
.token_wrap .paging_wrap li.first a, .token_wrap .paging_wrap li.last a {background-image: url('/images/common/webshop/page_ll_cy.png'); background-color: rgba(0, 0, 0, 0);}
.token_wrap .paging_wrap li.prev a, .token_wrap .paging_wrap li.next a {background-image: url('/images/common/webshop/page_l_cy.png'); background-color: rgba(0, 0, 0, 0);}*/
@keyframes ani_flip {
    from {
        -webkit-transform: rotateY(0);
        -moz-transform: rotateY(0);
        transform: rotateY(0);
    }

    to {
        -webkit-transform: rotateY(1080deg);
        -moz-transform: rotateY(1080deg);
        transform: rotateY(1080deg);
    }
}

@keyframes ani_scale {
    0% {
        top: 60px;
        -webkit-transform: scale(1);
        -moz-ttransform: scale(1);
        transform: scale(1);
    }

    10% {
        top: -60px;
        -webkit-transform: scale(1.5);
        -moz-ttransform: scale(1.5);
        transform: scale(1.5);
    }

    100% {
        top: 0;
        -webkit-transform: scale(1);
        -moz-ttransform: scale(1);
        transform: scale(1);
    }
}

@keyframes ani_spin {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* token : pbic2025 */
.sub_contents .token_wrap_pbic2025 {
    background: #151515 url('../../images/common/webshop/token/pbic2025/token_bg.jpg') center 0 no-repeat;
    background-size: 100% auto;
    position: relative;
}

.sub_contents .token_wrap_pbic2025 .bgimg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.sub_contents .token_wrap_pbic2025 .bgimg p {
    position: absolute;
}

.sub_contents .token_wrap_pbic2025 .bgimg img {
    max-width: unset;
}

.sub_contents .token_wrap_pbic2025 .bgimg .img_cha {
    top: 0;
    right: 0;
}

.sub_contents .token_wrap_pbic2025 .bgimg .img_token {
    top: 1094px;
    left: -48px;
}

.sub_contents .token_wrap_pbic2025 .bgimg .img_token img {
    animation: ani_flip 2s ease-out forwards;
}

.sub_contents .token_wrap_pbic2025 .bgimg .img_token:before {
    content: '';
    width: 600px;
    height: 600px;
    margin: -300px 0 0 -300px;
    background: url('../../images/common/webshop/token/pbic2025/img_token_bg.png') no-repeat;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    animation: ani_spin 2s ease-in infinite alternate;
}

.token_wrap_pbic2025 .list_wrap {
    position: relative;
    z-index: 2;
}

.token_wrap_pbic2025 .token_area .token_img {
    height: 288px;
}

.token_wrap_pbic2025 .token_area .token_img:before {
    display: none;
}

.token_wrap_pbic2025 .token_area .token_img img {
    position: relative;
    animation: ani_logo 0.5s ease-out forwards;
    max-width: none;
}

@keyframes ani_logo {
    0% {
        height: 0;
        top: -120px;
        opacity: 0;
    }

    30% {
        top: 120px;
    }

    100% {
        height: 288px;
        top: 0;
        opacity: 1;
    }
}

.token_wrap_pbic2025 .token_area .token_cont .tit {
    padding-top: 4px;
    padding-left: 36px;
    font-size: 34px;
    letter-spacing: 0.02rem;
    font-family: 'Stick No Bills';
    position: relative;
}

.token_wrap_pbic2025 .token_area .token_cont .tit:before {
    content: '';
    width: 12px;
    height: 48px;
    background: #4ff;
    display: block;
    position: absolute;
    top: -2px;
    left: 0;
    box-shadow: 0 0 2rem rgba(68, 255, 255, 0.5);
}

.token_wrap_pbic2025 .token_area .token_cont .tit font {
    color: #0ff;
}

.token_wrap_pbic2025 .token_area .token_cont .search_wrap {
    border-radius: 6px;
    background: #4ef;
    overflow: unset;
}

.token_wrap_pbic2025 .token_area .token_cont .search_wrap:before {
    content: '';
    width: 180px;
    height: 10px;
    background: url('../../images/common/webshop/token/pbic2025/deco_search.png') no-repeat;
    display: block;
    position: absolute;
    top: -10px;
    right: 0;
}

.token_wrap_pbic2025 .token_area .token_cont .search_wrap .search_area input[type=text] {
    color: #000;
}

.token_wrap_pbic2025 .token_area .token_cont .search_wrap .search_area input[type=text]::placeholder {
    color: #000;
}

.token_wrap_pbic2025 .token_area .token_cont .search_wrap .search_area input[type=text]:focus {
    color: #000;
}

.token_wrap_pbic2025 .token_area .token_cont .search_wrap .search_area button {
    background-image: url('../../images/common/webshop/icon_search_bk.png');
}

.token_wrap_pbic2025 .token_area .token_my {
    border: 2px solid #4ff;
    background: url('../../images/common/webshop/token/pbic2025/ptn.png') repeat;
    background-color: rgba(0, 170, 204, 0.5);
}

.token_wrap_pbic2025 .token_area .token_my > p {
    background: url('../../images/common/webshop/token/pbic2025/deco_my_lf.png') left 50% no-repeat, url('../../images/common/webshop/token/pbic2025/deco_my_rt.png') right 50% no-repeat;
}

.token_wrap_pbic2025 .token_area .token_my:before {
    width: 156px;
    height: 18px;
    background: url('../../images/common/webshop/token/pbic2025/deco_my.png') left 0 no-repeat;
    top: -22px;
    left: 25%;
}

.token_wrap_pbic2025 .token_area .token_my:after {
    width: 312px;
    height: 4px;
    background: url('../../images/common/webshop/token/pbic2025/deco_my_bt.png') left 0 no-repeat;
    top: auto;
    left: auto;
    bottom: -8px;
    right: 0;
}

.token_wrap_pbic2025 .token_area .token_my font {
    color: #4ff;
    left: 120px;
    display: block;
}

.token_wrap_pbic2025 .token_area .token_my span {
    -webkit-text-stroke: 0.02rem #4ff;
    text-stroke: 0.02rem #4ff;
}

.token_wrap_pbic2025 .item_wrap .item_list .sale {
    background: linear-gradient(to bottom, rgba(0, 204, 255, 0.4), rgba(0, 153, 255, 0.4));
    color: #6ef;
}

.token_wrap_pbic2025 .item_wrap .item_list .sale font {
    color: #ff0;
}

.token_wrap_pbic2025 .item_wrap .item_list .img {
    border-top: 1px solid #4ef;
    background: rgba(68, 238, 255, 0.1) url('../../images/common/webshop/token/pbic2025/thumb_bg.png') no-repeat;
    background-size: cover;
}

.token_wrap_pbic2025 .item_wrap .item_list .img:before {
    width: 78px;
    height: 10px;
    margin-left: -39px;
    background: url('../../images/common/webshop/token/pbic2025/thumb_top.png') no-repeat;
    top: -1px;
    left: 50%;
}

.token_wrap_pbic2025 .item_wrap .item_list .img:after {
    width: 100%;
    height: 100%;
    background: url('../../images/common/webshop/token/pbic2025/thumb_tlf.png') left 0 no-repeat, url('../../images/common/webshop/token/pbic2025/thumb_trt.png') right 0 no-repeat, url('../../images/common/webshop/token/pbic2025/thumb_blf.png') left bottom no-repeat, url('../../images/common/webshop/token/pbic2025/thumb_brt.png') right bottom no-repeat;
}

.token_wrap_pbic2025 .item_wrap .item_list .lv_wrap {
    background: #006277;
}

.token_wrap_pbic2025 .item_wrap .item_list .desc {
    background: #006277;
}

.token_wrap_pbic2025 .item_wrap .item_list .desc:before {
    background: #4ef;
}

.token_wrap_pbic2025 .item_wrap .item_list .desc .price {
    background: rgba(255, 255, 255, 0.08);
}

.token_wrap_pbic2025 .item_wrap .item_list .desc .price .del_line {
    color: #4ff;
}

.token_wrap_pbic2025 .item_wrap .item_list .desc .price .del_line:after {
    background: url('../../images/common/webshop/icon_del_4ff.png') right center no-repeat;
}

.token_wrap_pbic2025 .item_wrap .item_list .desc .price .del_line:before {
    background: #4ff;
}

.token_wrap_pbic2025 .paging_wrap li.on a, .token_wrap_pbic2025 .paging_wrap li.on a:hover {
    background: rgba(68, 255, 255, 0.2);
    color: #4ff;
}

.token_wrap_pbic2025 .paging_wrap li.first a, .token_wrap_pbic2025 .paging_wrap li.last a {
    background-image: url('../../images/common/webshop/page_ll_4ff.png');
    background-color: rgba(0, 0, 0, 0);
}

.token_wrap_pbic2025 .paging_wrap li.prev a, .token_wrap_pbic2025 .paging_wrap li.next a {
    background-image: url('../../images/common/webshop/page_l_4ff.png');
    background-color: rgba(0, 0, 0, 0);
}

/* token star ticket */
.sub_contents .token_star_ticket {
    background-color: #00225b;
    background-image: url('../../images/common/webshop/token/star_ticket/bg_token_star_ticket.jpg');
    background-position: center 0;
    background-repeat: no-repeat;
    position: relative;
}

.token_star_ticket .token_area {
    /* mix-blend-mode: screen; */
    position: relative;
}

.token_star_ticket .token_area .token_img {
    display: inline-block;
    animation: ani_flip 2s ease-out forwards;
}

.token_star_ticket .token_area .token_img img {
    animation: none;
}

.token_star_ticket .token_area .token_img:before {
    mix-blend-mode: screen;
    animation: none;
    background: url('../../images/common/webshop/token/star_ticket/token_img_star_ticekt_shd.png') 0 0 no-repeat;
    background-size: 100% auto;
    animation: twinkle_one 5s ease-in-out infinite;
}

.token_star_ticket .token_area .token_my:after {
    display: none;
}

.token_star_ticket .token_area .token_cont .tit {
    position: relative;
    padding-left: 3.6rem;
    font-style: oblique;
    font-size: 29.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-shadow: 0 0 1.5rem rgba(11, 104, 242, 0.4) , -1px 0px rgba(0, 136, 255, 0.3), 0px 1px rgba(0, 136, 255, 0.3), 1px 0px rgba(0, 136, 255, 0.3), 0px -1px rgba(0, 136, 255, 0.3);
}

.token_star_ticket .token_area .token_cont .tit:before {
    content: '';
    display: block;
    position: absolute;
    width: 4.8rem;
    height: 4.8rem;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url('../../images/common/webshop/token/star_ticket/tit_star.png');
    background-size: 100% auto;
    left: -1.2rem;
    top: -0.7rem;
}

.token_star_ticket .token_area .token_cont .search_wrap {
    border-radius: 24px;
    box-shadow: 0 0 2rem rgba(68, 136, 255, 0.2);
}

.token_star_ticket .token_area .token_cont .search_wrap .search_area button {
    transition: none;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url('../../images/common/webshop/token/star_ticket/icon_search_wy.png');
    right: 2rem;
}

.token_star_ticket .token_area .token_cont .search_wrap .search_area button:hover {
    background-position: 0 -18px;
}

.token_star_ticket .item_wrap .item_list .desc .price img {
    width: 30px;
    margin-right: 1rem;
}

.token_star_ticket .token_area .token_my {
    box-shadow: 0 0 2rem rgba(17, 119, 255, 0.1);
    border: none;
    border-radius: 20px;
    background: url('../../images/common/webshop/token/star_ticket/bg_star_ticket.jpg') center center no-repeat;
    background-size: cover;
}

.token_star_ticket .token_area .token_my:before {
    background: none;
    width: auto;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    position: absolute;
    border: 1px solid #33aaff;
}

.token_star_ticket .token_area .token_my:after {
    width: auto;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(to bottom, #99ddff, #0099ff);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.token_star_ticket .token_area .token_my img {
    margin-right: 1.6rem;
}

.token_star_ticket .token_area .token_my span {
    color: #ffffaa;
    -webkit-text-stroke: 0.02rem #ffdd00;
    text-stroke: 0.02rem #ffdd00;
}

.token_star_ticket .token_area .token_my > p {
    position: static;
    background: none;
}

.token_star_ticket .token_area .token_my > p:after {
    content: '';
    display: block;
    position: absolute;
    top: -1rem;
    bottom: -1rem;
    left: -1rem;
    right: -1rem;
    background: url('../../images/common/webshop/token/star_ticket/dot_b.png') 0 0 no-repeat , url('../../images/common/webshop/token/star_ticket/dot_b.png') 0 0 no-repeat , url('../../images/common/webshop/token/star_ticket/dot_b.png') right 0 no-repeat , url('../../images/common/webshop/token/star_ticket/dot_b.png') 0 bottom no-repeat , url('../../images/common/webshop/token/star_ticket/dot_b.png') right bottom no-repeat;
    background-size: 2rem auto;
}

.token_star_ticket .item_wrap .item_list .item {
    background: rgba(34, 119, 238, 0.25);
    border-top: 1px solid #0099ff;
}

.token_star_ticket .item_wrap .item_list .desc {
    background: linear-gradient(to bottom, rgba(0, 153, 255, 0), rgba(0, 153, 255, 1)) , #005599;
    box-shadow: 0 0 4.8rem rgba(0, 0, 0, 0.3);
}

.token_star_ticket .item_list .desc:before {
    background: #0099ff;
}

.token_star_ticket .item_wrap .item_list .desc .price {
    background: url('../../images/common/webshop/token/star_ticket/bg_price.jpg') center center no-repeat;
}

.token_star_ticket .item_wrap .item_list .desc .price .del_line {
    color: #33bbff;
}

.token_star_ticket .item_wrap .item_list .desc .price .del_line:before {
    background: #33bbff;
}

.token_star_ticket .item_wrap .item_list .desc .price .del_line:after {
    background: url(../../images/common/webshop/token/star_ticket/icon_del.png) right center no-repeat;
}

.token_star_ticket .lv_wrap {
    background: #1166aa;
}

.token_star_ticket .item_wrap .item_list .con:after {
    content: '';
    display: block;
    position: absolute;
    top: -1rem;
    bottom: -1rem;
    left: -1rem;
    right: -1rem;
    background: url('../../images/common/webshop/token/star_ticket/dot_b.png') 0 0 no-repeat , url('../../images/common/webshop/token/star_ticket/dot_b.png') 0 0 no-repeat , url('../../images/common/webshop/token/star_ticket/dot_b.png') right 0 no-repeat , url('../../images/common/webshop/token/star_ticket/dot_b.png') 0 bottom no-repeat , url('../../images/common/webshop/token/star_ticket/dot_b.png') right bottom no-repeat;
    background-size: 2rem auto;
}

.token_star_ticket .item_wrap .item_list .soldout .con:after {
    display: none;
}

.token_star_ticket .item_wrap .item_list .info {
    border-radius: 0;
    border-color: #44bbff;
}

.token_star_ticket .item_wrap .item_list .info li {
    border-color: #44bbff;
    color: #55ccff;
}

.token_star_ticket .item_wrap .item_list .special .item .img {
    background: url(../../images/common/webshop/token/star_ticket/bg_special.jpg) center center no-repeat;
    background-size: cover;
}

.token_star_ticket .item_wrap .item_list .special .item:before , .token_star_ticket .item_wrap .item_list .special .item:after {
    display: none;
}

.token_star_ticket .item_wrap .item_list .special .con:hover .desc:before {
    background: #0099ff;
}

.token_star_ticket .item_wrap .item_list .random .item .img {
    background: url(../../images/common/webshop/token/star_ticket/bg_random.jpg) center center no-repeat;
    background-size: cover;
}

.token_star_ticket .item_wrap .item_list .random .item:before , .token_star_ticket .item_wrap .item_list .random .item:after {
    display: none;
}

.token_star_ticket .item_wrap .item_list .random .con:hover .desc:before {
    background: #0099ff;
}

.token_star_ticket .item_wrap .item_list .sale {
    background: url(../../images/common/webshop/token/star_ticket/bg_sale.jpg) center center no-repeat;
    background-size: cover;
    color: #77bbff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

.token_star_ticket .item_wrap .item_list .sale:after {
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 1px;
    background: linear-gradient(to bottom, #66ffff, #2299ff);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    box-shadow: 0 0 2rem rgba(0, 102, 255, 0.25);
}

.token_star_ticket .paging_wrap li.first a, .token_star_ticket .paging_wrap li.last a {
    background-image: url(../../images/common/webshop/token/star_ticket/page_ll_b.png);
}

.token_star_ticket .paging_wrap li.prev a, .token_star_ticket .paging_wrap li.next a {
    background-image: url(../../images/common/webshop/token/star_ticket/page_l_b.png);
}

.token_star_ticket .paging_wrap li a {
    color: #44eeff;
}

.token_star_ticket .paging_wrap li.on a, .token_star_ticket .paging_wrap li.on a:hover {
    background: #44eeff;
    color: #000;
}

.token_star_ticket .obj_star {
    position: absolute;
    top: -4.4rem;
    width: max-content;
}

.token_star_ticket .obj_star_l {
    left: -10.5rem;
}

.token_star_ticket .obj_star_r {
    right: -13.2rem;
}

.token_star_ticket .obj_star img {
    position: absolute;
    top: 0;
    left: 0;
    animation: float 3s ease-in-out infinite;
}

.token_star_ticket .obj_star .star01 {
    position: relative;
}

.token_star_ticket .obj_star .star02 {
    animation-delay: 1s;
}

.token_star_ticket .obj_star .star03 {
    animation-delay: 2s;
}

.token_star_ticket .obj_star .star04 {
    animation-delay: 3s;
}

.token_star_ticket .obj_star .star05 {
    animation-delay: 2s;
}

.token_star_ticket .obj_star .star06 {
    animation-delay: 1s;
}

/* token 2026*/
.sub_contents .token_pbic2026 {
    padding-top: 133px;
    margin-top: -192px;
    background: #141414 url('../../images/common/webshop/token/pbic2026/bg_token2026.html') center 0 no-repeat;
    background-size: 100% auto;
    position: relative;
}

.token_pbic2026 .token_area .token_img {
    margin-bottom: -3.4rem;
}

.token_pbic2026 .token_area .token_img:before {
    display: none;
}

.token_pbic2026 .token_area .token_cont {
    margin-bottom: 3rem;
}

.token_pbic2026 .token_area .token_cont .tit {
    position: relative;
    padding-right: 7.8rem;
    padding-left: 5rem;
    font-family: 'Chakra Petch';
    text-transform: uppercase;
    font-size: 24px;
    color: #f0f0f0;
    background: url(../../images/common/webshop/token/pbic2026/tit_bar.html) left bottom no-repeat;
    background-size: 5.5rem auto;
}

.token_pbic2026 .token_area .token_cont .tit:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 6.8rem;
    height: 0.9rem;
    background: url('../../images/common/webshop/token/pbic2026/tit_obj.html') 0 0 no-repeat;
    background-size: 100% auto;
}

.token_pbic2026 .token_area .token_cont .tit p {
    padding-bottom: 3px;
    border-bottom: 0.5rem solid #ffffff;
    padding-left: 1rem;
    filter: none;
    -webkit-text-stroke: 0px;
    background: none;
}

.token_pbic2026 .token_area .token_cont .tit span {
    color: #ffba00;
}

.token_pbic2026 .token_area .token_my {
    backdrop-filter: none;
    padding: 0.2rem;
    border: none;
    background: none;
    border: 0.6rem solid #ffffff;
}

.token_pbic2026 .token_area .token_my:after {
    display: block;
    position: absolute;
    top: -0.6rem;
    bottom: -0.6rem;
    left: -0.6rem;
    right: -0.6rem;
    width: auto;
    height: auto;
    background: url('../../images/common/webshop/token/pbic2026/my_obj01.html') 0 0 no-repeat , url('../../images/common/webshop/token/pbic2026/my_obj02.html') right bottom no-repeat;
    background-size: 19.2rem auto, 24.2rem auto;
}

.token_pbic2026 .token_area .token_my:before {
    z-index: 1;
    height: auto;
    top: -0.6rem;
    bottom: -0.6rem;
    left: -0.6rem;
    right: -0.6rem;
    width: auto;
    background: url('../../images/common/webshop/token/pbic2026/my_line_l.html') 0 center no-repeat , url('../../images/common/webshop/token/pbic2026/my_line_lt.html') 10.5rem 0 no-repeat , url('../../images/common/webshop/token/pbic2026/my_line_lb.html') 3rem bottom no-repeat , url('../../images/common/webshop/token/pbic2026/my_line_r.html') right center no-repeat , url('../../images/common/webshop/token/pbic2026/my_line_rt.html') right 1rem top 0 no-repeat , url('../../images/common/webshop/token/pbic2026/my_line_rb.html') right 1rem bottom 0 no-repeat;
    background-size: 0.6rem auto, 0.6rem auto, auto 0.6rem, 0.6rem auto, auto 0.6rem, auto 0.6rem;
}

.token_pbic2026 .token_area .token_my > p {
    background: rgba(0, 0, 0, 0.7);
}

.token_pbic2026 .item_wrap .item_list .img {
    background-image: url('../../images/common/webshop/token/pbic2026/bg_basic.html');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}

.token_pbic2026 .item_wrap .item_list .img:before {
    display: none;
}

.token_pbic2026 .item_wrap .item_list .lv_wrap {
    background: #474132;
}

.token_pbic2026 .item_wrap .item_list .desc {
    background: #474132;
}

.token_pbic2026 .item_wrap .item_list .desc .price {
    background: rgba(0, 0, 0, 0.08);
}

.token_pbic2026 .item_wrap .item_list .desc .price .del_line + font {
    color: #fff;
}

.token_pbic2026 .item_wrap .item_list .desc .price .del_line {
    color: #ffff00;
}

.token_pbic2026 .item_wrap .item_list .desc .price .del_line:before {
    background: #ffff00;
}

.token_pbic2026 .item_wrap .item_list .desc .price .del_line:after {
    background: url(../../images/common/webshop/token/pbic2026/icon_del.html) right center no-repeat;
}

.token_pbic2026 .item_wrap .item_list .desc:before {
    background: #e0c123 !important;
}

.token_pbic2026 .item_wrap .item_list .info {
    border-top-color: #ead98d;
    border-bottom-color: #e0c123;
    color: #ead98d;
}

.token_pbic2026 .item_wrap .item_list .info:after {
    position: absolute;
    content: '';
    display: block;
    top: -0.2rem;
    left: -0.2rem;
    right: -0.2rem;
    bottom: -0.2rem;
    border-left: 0.2rem solid transparent;
    border-right: 0.2rem solid transparent;
    border-image: linear-gradient(to bottom, #ead98d, #e0c123);
    border-image-slice: 1 !important;
}

.token_pbic2026 .item_wrap .item_list .info li {
    border-color: #ead98d;
    background: url('../../images/common/webshop/token/pbic2026/bg_info_t.html') 0 0 no-repeat, url('../../images/common/webshop/token/pbic2026/bg_info_b.html') right bottom no-repeat;
    background-size: 8.3rem auto, 8.2rem auto;
}

.token_pbic2026 .item_wrap .item_list .sale {
    background: url('../../images/common/webshop/token/pbic2026/bg_sale.html') 0 0 no-repeat;
    background-size: 100% auto;
    color: #6ef;
    backdrop-filter: none;
    color: #000000;
}

.token_pbic2026 .item_wrap .item_list .sale font {
    color: #ff0000;
}

.token_pbic2026 .item_wrap .item_list .sale:before {
    content: '';
    display: block;
    position: absolute;
    top: -0.5rem;
    bottom: -0.5rem;
    right: -0.5rem;
    left: -0.5rem;
    background-image: url('../../images/common/webshop/token/pbic2026/bg_sale_frame.html');
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
    animation: rotation 10s infinite linear;
}

.token_pbic2026 .item_wrap .item_list .special .item .img {
    background-image: url('../../images/common/webshop/token/pbic2026/bg_special.html');
}

.token_pbic2026 .item_wrap .item_list .special .lv_wrap {
    background: #735b26;
}

.token_pbic2026 .item_wrap .item_list .special .desc {
    background: #735b26;
}

.token_pbic2026 .item_wrap .item_list .random .item .img {
    background-image: url('../../images/common/webshop/token/pbic2026/bg_random.html');
}

.token_pbic2026 .paging_wrap li.on a, .token_pbic2026 .paging_wrap li.on a:hover {
    color: #f0b500;
    background: rgba(240, 181, 0, 0.2);
}

.token_pbic2026 .cha_wrap {
    position: absolute;
    top: -10rem;
    right: -12rem;
    z-index: 1
}

.token_pbic2026 .cha_wrap:before, .token_pbic2026 .cha_wrap:after {
    content: '';
    display: block;
    position: absolute;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.token_pbic2026 .cha_wrap:before {
    z-index: -1;
    left: 3rem;
    top: -4rem;
    width: 93.7rem;
    height: 73.2rem;
    background-image: url('../../images/common/webshop/token/pbic2026/effect01.html');
    animation: bounce-in-fwd 1.1s both;
}

.token_pbic2026 .cha_wrap:after {
    top: -4rem;
    left: -44rem;
    width: 158.1rem;
    height: 61.7rem;
    background-image: url('../../images/common/webshop/token/pbic2026/effect02.html');
    animation: bounce-in-fwd 1.1s 0.2s both;
}

.token_pbic2026 .cha_wrap .coin {
    animation: slide-in-bck-tr 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both, fadeAnimation01 infinite 2s;
    position: absolute;
    max-width: none;
    top: -2rem;
    right: -30rem;
}

.token_pbic2026 .cha_wrap .cha {
    animation: fadeAnimation01 2s infinite;
}

.token_pbic2026 .inner {
    position: relative;
}

.token_pbic2026 .list_wrap {
    z-index: 1;
}

/* loading */
.loading {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
}

.loading .load {
    top: 50%;
    transform: translate(0, -100%);
    width: 60px;
    height: 60px;
    margin: 0 auto;
    position: relative;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    /* overflow: hidden; */
}

.loading .circle-loader {
    position: relative;
    width: auto;
    height: auto;
}

.loading .circle-loader div {
    height: 10px;
    width: 10px;
    background-color: #515457;
    border-radius: 50%;
    position: absolute;
    animation: shadowPulse01 8s linear infinite, 0.8s opaque ease-in-out infinite both;
}

.loading .circle-loader > div:nth-child(1) {
    top: -25px;
    left: 0;
}

.loading .circle-loader > div:nth-child(2) {
    top: -17px;
    left: 17px;
    animation-delay: 0.1s;
}

.loading .circle-loader > div:nth-child(3) {
    top: 0;
    left: 25px;
    animation-delay: 0.2s;
}

.loading .circle-loader > div:nth-child(4) {
    top: 17px;
    left: 17px;
    animation-delay: 0.3s;
}

.loading .circle-loader > div:nth-child(5) {
    top: 25px;
    left: 0;
    animation-delay: 0.4s;
}

.loading .circle-loader > div:nth-child(6) {
    top: 17px;
    left: -17px;
    animation-delay: 0.5s;
}

.loading .circle-loader > div:nth-child(7) {
    top: 0;
    left: -25px;
    animation-delay: 0.6s;
}

.loading .circle-loader > div:nth-child(8) {
    top: -17px;
    left: -17px;
    animation-delay: 0.7s;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

.loader span {
    border: 10px solid transparent;
    background-image: linear-gradient(#000, #000), linear-gradient(to right, rgba(255, 555, 255, 0.4) 65%, #fff 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    border-radius: 50%;
    display: inline-block;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

.loader span+ font {
    position: relative;
    font-size: 10px;
    line-height: 100px;
    font-family: 'Roboto';
    font-weight: 700;
    display: block;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
}

/* coupon */
.coupon_wrap {
    min-height: 77rem;
}

.coupon_wrap .left_area {
    width: calc(100% - 504px);
}

.coupon_wrap .right_area {
    width: 432px;
}

.coupon_wrap .tab {
    padding: 4.8rem 0;
}

.coupon_wrap .tab ul {
    font-size: 0;
}

.coupon_wrap .tab ul li {
    display: inline-block;
    min-width: 204px;
    vertical-align: top;
    margin-right: 1.2rem;
}

.coupon_wrap .tab ul li:last-child {
    margin-right: 0;
}

.coupon_wrap .tab ul li a {
    position: relative;
    border-radius: 0.6rem;
    word-break: break-word;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    color: #ccc;
    font-weight: 700;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    background: rgba(170, 170, 170, 0.1);
    box-shadow: inset 0 0 0 1px #666;
    line-height: 1;
    padding: 0 24px;
}

.coupon_wrap .tab ul li.on a {
    color: #6f8;
    box-shadow: inset 0 0 0 1px #6f8;
    background: rgba(102, 255, 136, 0.1);
}

.coupon_wrap .tab ul li:hover a {
    color: #4cf;
    box-shadow: inset 0 0 0 1px #4cf;
    background: rgba(68, 204, 255, 0.1);
}

.coupon_wrap .tab_box .list li {
    margin-bottom: 2.4rem;
    position: relative;
}

.coupon_wrap .tab_box .list li:before, .coupon_wrap .tab_box .list li:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(to bottom, #4cf, #6f8);
    z-index: 1;
}

.coupon_wrap .tab_box .list li:before {
    left: 0;
    width: 1.2rem;
    border-radius: 0.6rem 0 0 0.6rem;
}

.coupon_wrap .tab_box .list li:after {
    right: 0;
    width: 4.8rem;
    border-radius: 0 1.2rem 1.2rem 0;
}

.coupon_wrap .tab_box .list li:last-child {
    margin-bottom: 0;
}

.coupon_wrap .tab_box .list .con {
    min-height: 19.2rem;
    position: relative;
    font-size: 0;
    padding: 1rem 5.8rem 1rem 1rem;
    background: url('../../images/common/webshop/ptn_noise.png') 0 0 no-repeat;
    background-color: rgba(255, 255, 255, 0.1);
    border: 0.2rem solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.5);
    border-radius: 0.6rem 1.2rem 1.2rem 0.6rem;
}

.coupon_wrap .tab_box .list .con:after, .coupon_wrap .tab_box .list .con:before {
    z-index: 2;
    content: '';
    display: block;
    position: absolute;
}

.coupon_wrap .tab_box .list .con:before {
    top: 50%;
    right: -0.2rem;
    width: 2.4rem;
    transform: translate(0, -50%);
    height: 4.8rem;
    background: url('../../images/common/webshop/obj_coupon.png') 0 0 no-repeat;
    background-size: 100% auto;
}

.coupon_wrap .tab_box .list .con:after {
    bottom: 1rem;
    right: 1rem;
    width: 2.4rem;
    height: 2rem;
    background: url('../../images/common/webshop/icon_pb_b.png') 0 0 no-repeat;
    background-size: 100% auto;
}

.coupon_wrap .tab_box .list .tit {
    z-index: 2;
    font-size: 12.5px;
    color: #4cf;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transform: scale(-1, -1);
    position: absolute;
    left: 2.2rem;
    bottom: 0;
    writing-mode: vertical-lr;
    top: 0;
    text-align: center;
}

.coupon_wrap .tab_box .list .tit span {
    display: inline-block;
    background: -webkit-linear-gradient(#6f8, #4cf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.coupon_wrap .tab_box .list .img {
    display: inline-block;
    vertical-align: middle;
    width: 16.8rem;
    height: 16.8rem;
    margin: 0 2.4rem 0 4.8rem;
}

.coupon_wrap .tab_box .list .img img {
    max-width: 100%;
    max-height: 100%;
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

.coupon_wrap .tab_box .list .desc {
    padding: 0 3.4rem;
    display: inline-block;
    font-family: 'Roboto';
    vertical-align: middle;
    width: calc(100% - 24rem);
    border-radius: 1.2rem;
    border: 0.2rem solid rgba(255, 255, 255, 0.2);
}

.coupon_wrap .tab_box .list .info {
    position: relative;
    min-height: 118px;
    align-content: center;
    padding: 2.8rem 0 2.6rem;
}

.coupon_wrap .tab_box .list .info .name {
    padding-right: 7.2rem;
    margin-bottom: 0.8rem;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01rem;
}

.coupon_wrap .tab_box .list .info .name span {
    display: inline-block;
    background: linear-gradient(to right, #6f8, #4cf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.coupon_wrap .tab_box .list .info .txt {
    font-size: 14px;
    color: #ccc;
}

.coupon_wrap .tab_box .list .info .sort {
    text-transform: uppercase;
    flex-direction: column;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.3);
    font-size: 22px;
    position: absolute;
    top: 28px;
    right: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    width: 60px;
    height: 60px;
    padding-left: 2px;
}

.coupon_wrap .tab_box .list .info .sort span {
    font-size: 9px;
    margin-top: -2px;
    font-weight: 500;
    letter-spacing: 0.05rem;
}

.coupon_wrap .tab_box .list .bot {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1.5rem 0 1.3rem;
    position: relative;
}

.coupon_wrap .tab_box .list .bot.pd {
    padding-right: 7.2rem;
}

.coupon_wrap .tab_box .list .bot:before {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    left: 0;
    width: 1.2rem;
    background: #6f8;
    height: 1px;
}

.coupon_wrap .tab_box .list .bot .date {
    font-size: 14px;
    color: #999;
    text-align: left;
}

.coupon_wrap .tab_box .list .bot .date span {
    font-size: 11px;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    display: inline-block;
    vertical-align: middle;
    padding: 0 1.2rem;
    height: 24px;
    line-height: 24px;
    border-radius: 12px;
    border: 1px solid #666;
    margin-right: 0.8rem;
}

.coupon_wrap .tab_box .list .bot .lv_wrap {
    left: auto;
    right: 0;
    transform: translate(0, -50%);
    top: calc(50% + 0rem) !important;
    border: none;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
}

.coupon_wrap .tab_box .list .bot .lv_wrap .lv {
    height: 24px;
    line-height: 22px;
    padding: 0 0.1rem;
    border-radius: 0.4rem;
}

.coupon_wrap .tab_box .list .bot .lv_wrap .lv img {
    border-radius: 0.6rem;
}

.coupon_wrap .tab_box .list li.cash:before, .coupon_wrap .tab_box .list li.cash:after {
    background: linear-gradient(to bottom, #f97, #ed6);
}

.coupon_wrap .tab_box .list li.cash .tit span {
    background: -webkit-linear-gradient(#ed6, #f97);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.coupon_wrap .tab_box .list li.cash .info .name span {
    background: linear-gradient(to right, #ed6, #f97);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.coupon_wrap .tab_box .list li.cash .bot:before {
    background: #ed6;
}

.coupon_wrap .tab_box .list li.cash .info .sort {
    font-size: 19px;
}

.coupon_wrap .tab_box .list li.free:before, .coupon_wrap .tab_box .list li.free:after {
    background: linear-gradient(to bottom, #bbe, #e89);
}

.coupon_wrap .tab_box .list li.free .tit span {
    background: -webkit-linear-gradient(#e89, #bbe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.coupon_wrap .tab_box .list li.free .info .name span {
    background: linear-gradient(to right, #e89, #bbe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.coupon_wrap .tab_box .list li.free .bot:before {
    background: #e89;
}

.coupon_wrap .total_all {
    margin-top: 190px;
}

.coupon_wrap .total_all.fixed {
    margin-top: 0;
    width: 432px;
}

.coupon_wrap .total_all .note {
    border-radius: 1.2rem;
    overflow: hidden;
}

.coupon_wrap .total_all .note .tit {
    text-transform: uppercase;
    color: #4cf;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.06em;
    padding: 2rem 0;
    background: rgba(68, 204, 255, 0.2);
}

.coupon_wrap .total_all .note .tit:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url('../../images/common/webshop/icon_info.png') 0 0 no-repeat;
    position: relative;
    top: -2px;
    margin-right: 1.2rem;
}

.coupon_wrap .total_all .note .txt {
    font-size: 14px;
    color: #77aac3;
    font-family: 'Roboto';
    line-height: 2.1;
    padding: 3.6rem;
    background: rgba(68, 204, 255, 0.1);
    text-align: left;
    word-break: break-word;
}

.coupon_wrap .tab_box {
    display: none;
}

.coupon_wrap .tab_box.available {
    display: block;
}

.coupon_wrap .tab_box .list li.used:before, .coupon_wrap .tab_box .list li.used:after {
    background: #555;
}

.coupon_wrap .tab_box .list li.used .tit span {
    background: none;
    -webkit-text-fill-color: #666;
}

.coupon_wrap .tab_box .list li.used .con {
    background: rgba(170, 170, 170, 0.1);
    box-shadow: none;
}

.coupon_wrap .tab_box .list li.used .info .name span {
    background: none;
    -webkit-text-fill-color: #888;
}

.coupon_wrap .tab_box .list li.used .info .txt {
    color: #666;
}

.coupon_wrap .tab_box .list li.used .bot {
    padding: 1.3rem 0 1.1rem;
}

.coupon_wrap .tab_box .list li.used .bot.pd {
    padding-right: 0;
}

.coupon_wrap .tab_box .list li.used .bot:before {
    background: #999;
}

.coupon_wrap .tab_box .list li.used .bot:after {
    content: '';
    display: block;
    clear: both;
}

.coupon_wrap .tab_box .list li.used .bot .date {
    color: #888;
    float: left;
}

.coupon_wrap .tab_box .list li.used .bot .date span {
    margin-top: -3px;
}

.coupon_wrap .tab_box .list li.used .bot .used_date {
    float: right;
}

.coupon_wrap .tab_box .list li.used .bot .lv_wrap {
    position: static;
    float: right;
    transform: none;
    display: inline-block;
    vertical-align: middle;
    margin-left: 1rem;
    margin-top: -3px;
}

.coupon_wrap .tab_box .list li.used .bot .lv_wrap .lv {
    border: 1px solid #666;
}

.coupon_wrap .tab_box .list li.used .img {
    filter: grayscale(1);
    opacity: 0.4;
}

.coupon_wrap .tab_box .list li.used .con:before {
    display: none;
}

.coupon_select {
    font-family: 'Roboto';
    width: 312px;
    position: absolute;
    z-index: 12;
    right: 3.6rem;
    top: 50%;
    transform: translate(0, -50%);
}

.coupon_select:before, .coupon_select:after {
    content: '';
    display: block;
    top: 1.2rem;
    bottom: 1.2rem;
    width: 1px;
    background: linear-gradient(to bottom, #6f8, #4cf);
    position: absolute;
    z-index: 1;
}

.coupon_select:before {
    left: 0;
}

.coupon_select:after {
    right: 0;
}

.coupon_select:hover:after, .coupon_select:before {
    display: none;
}

.coupon_select a {
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    word-wrap: normal;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    width: 100%;
}

.coupon_select .sel_on {
    text-align: left;
    padding: 2rem 5rem 1.9rem;
    font-size: 16px;
    color: #4cf;
    border-radius: 1.2rem;
    background: rgba(68, 204, 255, 0.1);
    position: relative;
    box-shadow: inset 0 -1px 0 0px #4cf, inset 0 0 0 1px #6f8;
}

.coupon_select .sel_on:before, .coupon_select .sel_on:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    background-repeat: no-repeat;
}

.coupon_select .sel_on:before {
    left: 2.3rem;
    width: 16px;
    height: 16px;
    background-image: url('../../images/common/webshop/icon_coupon.png');
    background-position: 0 -16px;
}

.coupon_select .sel_on:after {
    right: 2.3rem;
    width: 12px;
    height: 8px;
    background-image: url('../../images/common/webshop/arr_y.png');
    background-position: 0 -16px;
}

.coupon_select .sel_on:hover {
    background: rgba(102, 255, 136, 0.1);
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.2) , inset 0 0 0 1px #6f8;
    color: #6f8;
}

.coupon_select .sel_on:hover:before {
    background-position: 0 -16px;
}

.coupon_select .sel_on:hover:after {
    background-position: 0 -8px;
}

.coupon_select.selected:after, .coupon_select.selected:before {
    display: none;
}

.coupon_select.selected .sel_on {
    color: #ff0;
    background: rgba(255, 255, 0, 0.1);
    box-shadow: inset 0 0 0 1px #ff0;
}

.coupon_select.selected .sel_on:before, .coupon_select.selected .sel_on:after {
    background-position: 0 0;
}

.coupon_select .no {
    text-align: left;
    padding: 2rem 2rem 2rem 5rem;
    font-size: 16px;
    color: #999;
    border-radius: 1.2rem;
    background: rgba(170, 170, 170, 0.1);
    position: relative;
}

.coupon_select .no:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    background-repeat: no-repeat;
    background-position: 0 -32px;
    left: 2.3rem;
    width: 16px;
    height: 16px;
    background-image: url('../../images/common/webshop/icon_coupon.png');
}

.coupon_select.open {
    z-index: 13;
}

.coupon_select.open:after, .coupon_select.open:before {
    display: none;
}

.coupon_select.no_coupon:after, .coupon_select.no_coupon:before {
    display: none;
}

.coupon_select.open .sel_on {
    background: rgba(102, 255, 136, 0.1);
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.2) , inset 0 0 0 1px #6f8;
    color: #6f8;
}

.coupon_select.open .sel_on:before {
    background-position: 0 -16px;
}

.coupon_select.open .sel_on:after {
    background-position: 0 -8px;
}

.coupon_select .ovys {
    width: 100%;
    overflow: hidden;
    /* padding:1.2rem 0.8rem 1.2rem 0; */
    padding-right: 0.8rem;
    background: #364;
    box-shadow: 0 2rem 8rem rgba(0, 0, 0, 0.5);
    border-radius: 1.2rem;
    position: absolute;
    display: none;
}

.coupon_select .ovys ul {
    overflow-y: scroll;
    max-height: 24rem;
}

.coupon_select .ovys ul {
    padding-right: 0.8rem;
}

.coupon_select .ovys ul::-webkit-scrollbar {
    width: 0.8rem;
    background: #364;
}

.coupon_select .ovys ul::-webkit-scrollbar-track {
    margin-block: 1.2rem;}

.coupon_select .ovys ul::-webkit-scrollbar-thumb {
    border-radius: 0.4rem;
    background: linear-gradient(to bottom, #4cf, #6f8);
    /*  background-clip: content-box; border-top: 1.2rem solid transparent; border-bottom: 1.2rem solid transparent; */
}

.coupon_select .ovys li a {
    font-size: 14px;
    color: #6f8;
    padding: 1.6rem 2.4rem;
    text-align: left;
}

.coupon_select .ovys li a:hover {
    color: #fff;
    background: linear-gradient(to right, #47a35f, #364);
}

.coupon_wrap .purchase_wrap .cash_wrap li:nth-child(1) {
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 2.5rem;
}

.coupon_wrap .purchase_wrap .cash_wrap li:first-child:before {
    display: none;
}

.coupon_wrap .purchase_wrap .cash_wrap li:nth-child(n+2):nth-child(-n+3):before {
    content: '';
    display: block;
    left: 3.6rem;
    bottom: 0;
    height: 1px;
    right: 3.6rem;
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
}

.coupon_wrap .purchase_wrap .cash_wrap li {
    color: #ccc;
}

.coupon_wrap .purchase_wrap .cash_wrap li:nth-child(2) {
    color: #ccc;
}

.coupon_wrap .purchase_wrap .cash_wrap li:nth-child(4) {
    color: #ff0;
}

.coupon_wrap .purchase_wrap .cash_wrap li.discount {
    padding-left: 6rem;
    padding-right: 7.2rem;
    position: relative;
}

.coupon_wrap .purchase_wrap .cash_wrap li.discount:after {
    content: '';
    display: block;
    position: absolute;
    top: 2.6rem;
    left: 3.6rem;
    width: 12px;
    height: 12px;
    background: url('../../images/common/webshop/dash.png') 0 0 no-repeat;
}

.coupon_wrap .purchase_wrap .cash_wrap li.discount .price {
    font-size: 22px;
    color: #99eeff;
    font-weight: 300;
    letter-spacing: 0.02em;
}

@keyframes rd_bg {
    from {
        background-position: 50% 0;
    }

    to {
        background-position: 50% -2880px;
    }
}

/* toast message */
.ex_toast {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99;
    transform: translate(-50% , -50%);
    width: 100%;
    font-size: 0;
    text-align: center;
}

.ex_toast .btn_toast {
    text-align: center;
    width: 200px;
    max-width: calc((100% - 4rem) / 2);
    height: 60px;
    font-weight: 700;
    line-height: 60px;
    color: #33ffdd;
    background: #001515;
    border-radius: 1.2rem;
    border: 0.2rem solid #00ddbb;
    margin: 0 1rem;
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    text-transform: uppercase;
}

.ex_toast .btn_toast:hover {
    background: #00ddbb;
    ; color: #001515;
}

.ex_toast .btn_warning {
    color: #ffdd22;
    background: #221100;
    border-color: #eebb22;
}

.ex_toast .btn_warning:hover {
    background: #eebb22;
    ; color: #221100;
}

.toast_msg {
    width: calc(100% - 5rem);
    position: fixed;
    bottom: 6rem;
    left: 50%;
    transform: translate(-50% , 0);
    z-index: 99;
    max-width: 100%;
}

.toast_msg li {
    display: none;
    max-width: 100%;
    word-break: break-word;
    overflow: hidden;
    position: relative;
    margin: 1rem auto 0;
    padding: 1.8rem 3.6rem 1.8rem 7.6rem;
    font-family: 'Roboto';
    font-size: 16px;
    color: #33ffdd;
    background: #001515;
    border-radius: 1.2rem;
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.5);
    border: 0.2rem solid #00ddbb;
    width: max-content;
}

.toast_msg li:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5.8rem;
    background: url('../../images/common/sub/icon_toast_check.html') center center no-repeat;
    background-color: rgba(0, 221, 187, 0.7);
    max-width: 100%;
}

.toast_msg li.warning {
    color: #ffdd22;
    background: #221100;
    border-color: #eebb22;
}

.toast_msg li.warning:before {
    background: url('../../images/common/sub/icon_toast_info.html') center center no-repeat;
    background-color: rgba(238, 187, 34, 0.7);
}

/* goods */
.sub_contents .goods_wrap {
    background-image: url('../../images/common/webshop/goods/bg_goods_basic.jpg');
    background-position: center 0;
    background-repeat: no-repeat;
    background-color: #050505;
    background-size: auto;
}

.goods_wrap .goods_area {
    text-align: center;
    position: relative;
    margin-bottom: 6rem;
}

.goods_wrap .goods_area .goods_img {
    display: inline-block;
    border-radius: 50%;
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.5);
    position: relative;
}

.goods_wrap .goods_area .goods_img .bullet {
    position: absolute;
    animation: pulse 0.3s forwards;
    opacity: 0;
}

.goods_wrap .goods_area .goods_img .bullet01 {
    top: -6%;
    left: -109%;
    animation-delay: 0.2s;
    max-width: 7.6rem;
}

.goods_wrap .goods_area .goods_img .bullet02 {
    bottom: 11%;
    left: -176%;
    animation-delay: 0.3s;
    max-width: 9rem;
}

.goods_wrap .goods_area .goods_img .bullet03 {
    bottom: 21%;
    right: -30%;
    animation-delay: 0.4s;
    max-width: 6rem;
}

.goods_wrap .goods_area .goods_img .coin {
    animation: ani_flip 2s ease-out forwards;
}

.goods_wrap .goods_area .search_wrap {
    margin: 0 0 2.4rem auto;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.5);
    border: none;
    background: url(../../images/common/webshop/goods/bg_search.jpg) 0 0 repeat;
    position: relative;
    padding: 0.2rem;
}

.goods_wrap .goods_area .search_wrap:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    padding: 0.2rem;
    background: linear-gradient(to right ,#666665 ,#d5cdc3 , #95938a, #d5cdc3 , #908e8a, #d4ccc2, #dcd3c8, #dcd3c8, #6d6a67, #797875, #cdcdcc, #aaa9a8, #6d6a67, #b2aba3, #fdfcf9, #fdfcf9, #a6a5a3, #a3a2a1, #a7a7a6, #95928c, #9f9a96, #7c7772, #d1cac0, #9b948d);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.goods_wrap .goods_area .search_wrap .search_area {
    height: 100%;
}

.goods_wrap .goods_area .search_wrap .search_area button {
    background-image: url(../../images/common/webshop/icon_search_bk.png);
}

.goods_wrap .goods_area .search_wrap .search_area input[type=text] {
    color: #000;
}

.goods_wrap .goods_area .search_wrap .search_area input[type=text]::placeholder {
    color: #000;
}

.goods_wrap .goods_area .search_wrap .search_area input[type=text]:focus::placeholder {
    color: #000;
}

.goods_wrap .goods_area .my_info {
    border: 1.4rem;
    background: #000 url('../../images/common/webshop/goods/ptn.png') 0 0 repeat;
    position: relative;
    padding: 0.4rem;
}

.goods_wrap .goods_area .my_info:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1.4rem;
    padding: 0.4rem;
    background: linear-gradient(to right ,#666666, #888888, #cccccc, #eeeeee, #999999);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.goods_wrap .goods_area .my_info .con {
    padding: 1.6rem 5.6rem;
    font-weight: 700;
    color: #aaaaaa;
}

.goods_wrap .goods_area .my_info .con img {
    vertical-align: middle;
    margin-right: 0.8rem;
}

.goods_wrap .goods_area .my_info .con:before, .goods_wrap .goods_area .my_info .con:after {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
    border-radius: 50%;
    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.5);
    top: 50%;
    margin-top: -10px;
}

.goods_wrap .goods_area .my_info .con:before {
    left: 2.6rem;
    background-image: url('../../images/common/webshop/goods/obj_my_l.png');
}

.goods_wrap .goods_area .my_info .con:after {
    right: 2.6rem;
    background-image: url('../../images/common/webshop/goods/obj_my_r.png');
}

.goods_wrap .goods_area .my_info .tit {
    font-size: 29.5px;
    font-family: 'Oswald';
    position: absolute;
    text-transform: uppercase;
    left: 6rem;
    top: 50%;
    transform: translate(0 , -50%);
    background: linear-gradient(to bottom, #666665 , #d5cdc3 , #95938a , #d5cdc3 , #908e8a, #d4ccc2, #dcd3c8, #dcd3c8, #6d6a67, #797875, #cdcdcc, #aaa9a8, #6d6a67, #b2aba3, #fdfcf9, #a6a5a3, #a7a7a6, #95928c, #9f9a96, #7c7772, #d1cac0, #9b948d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.goods_wrap .goods_area .my_info .coin {
    line-height: 1;
    vertical-align: middle;
    font-size: 33px;
    letter-spacing: 0.04em;
    background: linear-gradient(to bottom, #ffffff, #aaaaaa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.goods_wrap .item_wrap .item_list .img {
    background: url('../../images/common/webshop/goods/bg_item_goods.png') 0 0 no-repeat;
    background-size: 100% 100%;
}

.goods_wrap .item_wrap .item_list .desc {
    background: url('../../images/common/webshop/goods/bg_desc_goods.jpg') center bottom no-repeat;
    background-size: cover;
}

.goods_wrap .item_wrap .item_list .desc .price {
    background: url('../../images/common/webshop/goods/bg_price_goods.jpg') center center no-repeat;
    background-size: cover;
}

.goods_wrap .item_wrap .item_list .desc .price:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0.4rem;
    padding: 0.2rem;
    background: linear-gradient(to bottom, #888888, #ffffff, #999988);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.goods_wrap .item_wrap .item_list .sale {
    padding-top: 0;
    top: 1.4rem;
    right: 1.4rem;
    width: 6.8rem;
    height: 6.8rem;
    background: url('../../images/common/webshop/goods/bg_sale_goods.jpg') center center no-repeat;
    background-size: cover;
}

.goods_wrap .item_wrap .item_list .sale:before {
    content: '';
    display: block;
    position: absolute;
    width: 132.36%;
    height: 135.3%;
    top: 50%;
    left: 50%;
    transform: translate(-48% , -50%);
    background: url('../../images/common/webshop/goods/frame_sale_goods.png') center center no-repeat;
    background-size: cover;
}

.goods_wrap .item_wrap .item_list .info {
    border: 0.2rem solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid #eb3;
    color: #ccc;
    background: url('../../images/common/webshop/goods/ptn_special.png') repeat;
    background-size: auto;
}

.goods_wrap .item_wrap .item_list .info li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.goods_wrap .item_wrap .item_list .info li:last-child {
    border-bottom: none;
}

.goods_wrap .item_wrap .item_list .info span:last-child {
    color: #ccc;
}

.goods_wrap .item_wrap .item_list .info font {
    color: #fc4;
}

.goods_wrap .item_wrap .item_list .soldout .info {
    background: rgba(0, 0, 0, 0.6);
}

.goods_wrap .item_wrap .item_list .special .item:before , .goods_wrap .item_wrap .item_list .special .item:after {
    display: none;
}

.goods_wrap .item_wrap .item_list .special .item .img {
    background-image: url(../../images/common/webshop/goods/bg_goods_special.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.goods_wrap .item_wrap .item_list .random .item:before , .goods_wrap .item_wrap .item_list .random .item:after {
    display: none;
}

.goods_wrap .item_wrap .item_list .random .item .img {
    background-image: url(../../images/common/webshop/goods/bg_goods_random.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.goods_wrap .item_wrap .item_list .special .con:hover .desc:before {
    background: #eb3;
}

.goods_wrap .item_wrap .item_list .random .con:hover .desc:before {
    background: #666;
}

@media screen and (max-width: 2400px) {
    /* token : pbic2025 */ .sub_contents .token_wrap_pbic2025 .bgimg .img_token {
        left: -284px;
    }
}

@media screen and (max-width: 1921px) {
    .badge {
        right:2.4rem;
    }

    .prepare_wrap > img {
        right: 0;
    }

    /* wish */
    .wish_wrap .item_wrap .item_list > li {
        width: 20%;
    }
}

@media screen and (max-width: 1800px) {
    #head.pc .gnb_area:before {
        left:0;
    }

    #head.pc .util.on .state a {
        font-size: 1.6rem;
    }

    #head.pc .util.on .state a img {
        margin-right: 0.8rem;
        margin-bottom: 2px;
    }

    #head.pc .util.on .state .wish img {
        margin-right: 0.6rem;
    }

    #head #gnb li a {
        font-size: 14px;
    }

    /* main */
    .item_wrap .item_list .lock {
        padding-top: 40%;
    }

    .item_wrap .item_list .con:hover .lock {
        left: 0.5rem;
    }

    .item_wrap .item_list .con .lock.out {
        left: 0.5rem;
    }

    .item_wrap .item_list .desc .price {
        left: 1.2rem;
        right: 1.2rem;
    }

    .item_wrap .item_list .info li {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    /* sub */
    .sub_contents, .sub_contents .wrap {
        background-size: auto;
    }

    .sub_contents .prepare_wrap {
        background-size: cover;
    }

    /* view */
    .view_wrap .item_view {
        padding: 7.2rem 4.8rem 4.8rem;
    }

    .view_wrap .item_view .item {
        margin-right: 7.2rem;
        width: calc(100% - 78rem);
    }

    .view_wrap .detail > div {
        width: calc((100% - 4.8rem) / 2);
        padding-left: 13.2rem;
    }

    .view_wrap .detail .stat {
        margin-right: 4.8rem;
    }

    .view_wrap .detail .product {
        padding-left: 21.2rem;
    }

    /* random */
    .randombox {
        padding-bottom: 9.6rem;
    }

    .randombox .name {
        margin-bottom: 2.4rem;
    }

    .randombox .rd_con {
        margin: 2.4rem;
    }

    /* cart */
    .cart_wrap .left_area {
        width: calc(100% - 312px);
    }

    .cart_wrap .right_area {
        margin-left: 24px;
    }

    .item_wrap .item_list .etc .unit {
        margin-right: 4.8rem;
    }

    .cart_wrap .item_wrap .item_list .soldout .txt {
        margin-right: 4.8rem;
    }

    /* purchase */
    .cart_wrap .purchase_wrap .left_area {
        width: calc(100% - 457px);
    }

    /* coupon */
    .coupon_wrap .left_area {
        width: calc(100% - 456px);
    }

    /* token */
    .sub_contents .token_base {
        background-size: 100% auto;
    }

    /* token : pbic2026 */
    .sub_contents .token_pbic2026 {
        background-size: 200% auto;
    }
}

@media screen and (max-width: 1776px) {
    .inner {
        margin-left:3.6rem;
        margin-right: 3.6rem;
    }

    #head.pc #gnb li {
        padding: 0 0.7rem;
    }

    #head.pc #gnb li a {
        padding: 0 2.4rem 0 2.2rem;
    }

    #head #gnb li a:before {
        width: 14px;
        height: 14px;
        background-size: 100% auto;
    }

    #head #gnb li.pass a {
        padding-left: 2.4rem;
    }

    #head #gnb li.pass a:before {
        width: 18px;
    }

    #head #gnb .depth2 {
        width: 220px;
    }

    #head #gnb .depth2 li {
        padding: 0;
    }

    #head #gnb .depth2 li a {
        padding: 0 1.2rem;
    }

    #head .depth2 a span {
        font-size: 13px;
    }

    #head #gnb li a .num {
        height: 14px;
        font-size: 12px;
    }

    #head #gnb li.tip a:after {
        width: 14px;
        height: 14px;
        background-size: 100% auto;
        margin-right: 0;
    }

    /* sub */
    .sub_contents .pick .inner {
        margin-left: 3.6rem;
        margin-right: 3.6rem;
    }

    /* prepare */
    .prepare_wrap > img {
        right: -150px;
    }

    /* list */
    .item_wrap .item_list .sale {
        top: 1.2rem;
        right: 1.2rem;
    }

    /*coupon*/
    .coupon_wrap .tab_box .list li.used .bot.pd {
        padding-right: 7.2rem;
    }

    .coupon_wrap .tab_box .list li.used .bot .date {
        float: none;
    }

    .coupon_wrap .tab_box .list li.used .bot .used_date {
        float: none;
        margin-top: 0.8rem;
    }

    .coupon_wrap .tab_box .list li.used .bot .lv_wrap {
        position: absolute;
        transform: translate(0, -50%);
        margin-top: 0;
        margin-left: 0;
    }

    /* .coupon_wrap .purchase_wrap .left_area {display:block; width:100%;}
.coupon_wrap .purchase_wrap .right_area {display:block; width:100%;}
.coupon_wrap .purchase_wrap .total_all.fixed {position:relative;} */
    .coupon_wrap .purchase_wrap .item_wrap .row_list > li {
        padding: 2.4rem;
        background: #333 url(../../images/common/webshop/ptn_noise.png) 0 0 repeat;
    }

    .coupon_wrap .purchase_wrap .item_wrap .row_list > li:hover {
        box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.4);
        background: #000;
    }

    .coupon_wrap .purchase_wrap .item_wrap .row_list .con {
        backdrop-filter: none;
        position: static;
    }

    .coupon_wrap .purchase_wrap .item_wrap .row_list .con:hover {
        box-shadow: none;
    }

    .coupon_wrap .purchase_wrap .item_wrap .item_list li:hover .con .desc {
        background: none;
    }

    .coupon_wrap .purchase_wrap .item_wrap .row_list .desc {
        background: none;
    }

    .coupon_wrap .purchase_wrap .item_wrap .item_list .desc:before {
        display: none !important;
    }

    .coupon_wrap .purchase_wrap .item_wrap .item_list li:before {
        transition: all ease-in-out 0.2s;
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 1px;
        background: #666;
    }

    .coupon_wrap .purchase_wrap .item_wrap .item_list li:hover:before {
        width: 100%;
        transition: all ease-in-out 0.2s;
    }

    .coupon_wrap .purchase_wrap .item_wrap .item_list li.special:hover:before {
        background: #7e2;
    }

    .coupon_wrap .purchase_wrap .item_wrap .item_list li.random:hover:before {
        background: #4cf;
    }

    .coupon_select {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: 100%;
        margin-top: 2.4rem;
    }

    /* token */
    .sub_contents .token_wrap_pbic2025 .bgimg {
        display: none;
    }
}

@media screen and (max-width: 1560px) {
    #head.pc .gnb_area {
        padding-left:12rem;
    }

    #head.pc #gnb li {
        padding: 0 0.5rem;
    }

    #head.pc #gnb li a {
        font-size: 13px;
        padding: 0 1.2rem 0 2.2rem;
        font-weight: 500;
    }

    #head.pc #gnb li:nth-child(3) a {
        padding-left: 2.4rem;
    }

    #head #gnb li a .num {
        top: -1px;
        font-size: 10px;
        padding: 0 0.4rem;
        min-width: 20px;
    }

    #head #gnb li a:before {
        width: 16px;
        height: 16px;
        background-size: 100% auto;
    }

    #head #gnb li.pass a:before {
        width: 20px;
    }

    #head #gnb li.tip a:after {
        top: -1px;
        margin-left: 0.6rem;
    }

    #head #gnb .depth2 {
        width: 180px;
    }

    #head #gnb .depth2 li {
        padding: 0;
    }

    #head .depth2 a span {
        font-size: 12px;
    }
}

@media screen and (max-width: 1400px) {
    #head.pc #gnb li {
        padding:0 0.4rem;
    }

    #head.pc #gnb li a {
        font-size: 12.5px;
        padding: 0 1rem 0 2rem;
    }

    #head.pc #gnb li:nth-child(3) a {
        padding-left: 2.2rem;
    }

    #head #gnb li a:before {
        width: 13px;
        height: 13px;
    }

    #head #gnb li.pass a:before {
        width: 16px;
    }

    #head #gnb li.tip a:after {
        width: 13px;
        height: 13px;
    }

    #head #gnb li a .num {
        font-size: 10px;
        min-width: 20px;
        margin-left: 0;
    }

    #head #gnb .depth2 {
        width: 172px;
    }

    #head #gnb .depth2 li {
        padding: 0;
    }

    #head #gnb .depth2 li a {
        padding: 0 0.8rem;
    }

    #head #gnb .depth2 a img {
        margin-right: 0.8rem;
    }

    .pick .slide_wrap {
        padding-left: 30rem;
    }

    .pick .slide_wrap .md_img {
        width: 30rem;
    }

    /* main */
    .item_wrap .item_list {
        margin-left: -2.4rem;
    }

    .item_wrap .item_list > li {
        padding-left: 2.4rem;
    }

    /* sub */
    .sub_contents .md_banner .txt {
        padding-left: 2.4rem;
    }

    /* list */
    .list_wrap .tag_wrap +.item_wrap .item_list > li {
        width: calc(100% / 3);
    }

    .md .md_img img {
        width: 99.1%;
    }

    /* view */
    .view_wrap .detail {
        display: block;
    }

    .view_wrap .detail > div {
        width: 100%;
        display: block;
        padding: 0 3.6rem 4.8rem;
    }

    .view_wrap .detail .tit_d {
        position: relative;
        top: auto;
        left: auto;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding: 1.3rem 1.2rem;
        margin: 0 -3.6rem 4.8rem;
    }

    .view_wrap .detail .product {
        padding-left: 3.6rem;
    }

    .view_wrap .detail .product .tit_d {
        padding: 1.3rem 1.2rem;
        text-indent: 0;
    }

    .view_wrap .detail .product .tit_d br {
        display: none;
    }

    .view_wrap .detail .product ul {
        margin-left: -5.4rem;
        margin-right: -3.6rem;
    }

    .view_wrap .detail .product li {
        width: 20%;
    }

    /* token */
    .token_area .token_img img {
        width: 192px;
    }

    .token_area .token_cont {
        margin-top: 3.6rem;
    }

    .token_base .token_area .token_img:before {
        width: 7.2rem;
        height: 10.4rem;
        left: -11.6rem;
    }

    /* token : pbic2025 */
    .token_wrap_pbic2025 .token_area .token_img {
        height: 188px;
    }

    @keyframes ani_logo {
        0% {
            height: 0;
        }

        100% {
            height: 188px;
        }
    }

    /* token star ticket */
    .token_star_ticket .token_area .token_img img {
        width: 293px;
    }

    .token_star_ticket .obj_star {
        max-width: 36%;
        top: 0;
    }

    .token_star_ticket .obj_star_l {
        left: -3.6rem;
    }

    .token_star_ticket .obj_star_r {
        right: -3.6rem;
    }

    /* token : pbic2026 */
    .token_pbic2026 .token_area .token_img img {
        width: 328px;
    }

    .token_pbic2026 .cha_wrap {
        top: -2rem;
        right: -3rem;
    }

    .token_pbic2026 .cha_wrap .cha {
        width: 540px;
    }

    .token_pbic2026 .cha_wrap:before {
        width: 115.395%;
        height: 76.25%;
        left: 3.6%;
        top: -4.2%;
    }

    .token_pbic2026 .cha_wrap:after {
        width: 194.705%;
        height: 64.271%;
        left: -56.6%;
        top: -4.2%;
    }

    .token_pbic2026 .cha_wrap .coin {
        width: 219.7%;
        top: -0.2%;
        right: -37%;
    }

    /* goods */
    .goods_wrap .goods_area .goods_img .bullet01 {
        left: -72%;
    }

    .goods_wrap .goods_area .goods_img .bullet02 {
        left: -120%;
    }

    /* season19 astel */
    .battle_wrap_astel .my_pass .lv:before, .battle_wrap_astel .my_pass .lv:after {
        height: 20rem;
    }

    .battle_wrap_astel .my_pass .lv:before {
        width: 18.9rem;
        left: -16.8rem;
    }

    .battle_wrap_astel .my_pass .lv:after {
        width: 22.4rem;
        right: -21rem;
    }
}

@media screen and (min-width: 1281px) {
    #head.pc #gnb {
        display:inline-block !important;
    }
}

@media screen and (max-width: 1280px) {
    #head.mp {
        padding-right:0;
    }

    #head.mp .top {
        margin-bottom: 1rem;
        border-radius: 0 0 1.2rem 1.2rem;
        background: rgba(255, 255, 255, 0.1);
        -webkit-backdrop-filter: var(--bg_blur);
        backdrop-filter: var(--bg_blur);
        padding-left: 2.4rem;
    }

    #head.mp .top .user_area {
        width: calc(100% - 160px);
        text-align: right;
    }

    #head.mp .gnb_area {
        overflow: hidden;
        text-align: center;
        border-radius: 1.2rem;
        padding: 2.4rem;
        background: rgba(255, 255, 255, 0.1);
        -webkit-backdrop-filter: var(--bg_blur);
        backdrop-filter: var(--bg_blur);
    }

    #head.mp #gnb {
        display: block;
        padding: 0;
        margin: 2.4rem -2.4rem -2.4rem;
        background: url('../../images/common/webshop/ptn_gnb.png') 0 0 repeat , url('../../images/common/webshop/bg_gnb_gra.png') center bottom no-repeat;
        background-color: rgba(51, 51, 51, 0.9);
        width: calc(100% + 4.8rem);
        border-bottom: 1px solid transparent;
        border-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(100, 243, 132, 0.4), rgba(0, 0, 0, 0));
        border-image-slice: 1;
    }

    #head.mp #gnb ul {
        margin: 0 2.4rem;
    }

    #head.mp #gnb li {
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding: 0;
        position: relative;
    }

    #head.mp #gnb li:last-child {
        border-bottom: none;
    }

    #head.mp #gnb li a {
        display: block;
        padding: 2.4rem 0 2.4rem 3rem;
        line-height: 1;
    }

    #head.mp #gnb li a:before {
        margin-top: -1px;
        left: 0;
    }

    #head.mp .gnb_area .btn_menu {
        width: 4.8rem;
        height: 3.6rem;
        background: url('../../images/common/webshop/btn_menu.png') 0 0 no-repeat;
        position: absolute;
        left: 2.4rem;
        top: 1.8rem;
        background-size: 100% auto;
    }

    #head.mp .gnb_area .btn_menu.on {
        background: url('../../images/common/webshop/btn_close.png') 0 0 no-repeat;
        background-size: 100% auto;
    }

    #head.mp .gnb_area .btn_my {
        width: 4.8rem;
        height: 4.8rem;
        background: url('../../images/common/webshop/btn_my.png') 0 0 no-repeat;
        position: absolute;
        right: 2.4rem;
        top: 1.2rem;
        background-size: 100% auto;
    }

    #head.mp .gnb_area.on .btn_my:before {
        content: '';
        display: block;
        position: absolute;
        bottom: -0.2rem;
        right: -0.2rem;
        width: 1.4rem;
        height: 1.4rem;
        border-radius: 50%;
        border: 0.2rem solid #000;
        background: linear-gradient(to bottom, #fd0, #f44);
    }

    #head.mp #gnb li.coming:before {
        height: 24px;
        background-position: center -4px;
        left: auto;
        top: 50%;
        transform: translate(0, -50%);
        right: 0;
        margin-left: 0;
    }

    #head.mp .util {
        display: none;
        position: fixed;
        right: 0;
        left: 12.4rem;
        top: 0;
        bottom: 0;
        overflow-y: scroll;
        border-left: 1px solid #6f8;
        background: #333 url('../../images/common/webshop/ptn_gnb.png') 0 0 repeat;
        opacity: 0;
        z-index: 1;
    }

    #head.mp .util.active {
        display: block;
        opacity: 1;
    }

    #head.mp .util h1 {
        text-align: left;
        padding: 2rem;
        height: calc(18px + 4rem);
        background: url('../../images/common/webshop/bg_menu.jpg') 0 0 no-repeat;
        background-size: cover;
    }

    #head.mp .util h1 a {
        height: 18px;
    }

    #head.mp .util .lg_top {
        position: relative;
        padding: 2.4rem;
        background: rgba(255, 255, 255, 0.05) url(../../images/common/webshop/btn_my.png) right 2.4rem top 50% no-repeat;
        background-size: 4.8rem auto;
        text-align: center;
        margin: 2.4rem 2.4rem 4.8rem;
        border-radius: 1.2rem;
        box-shadow: 0 0 5rem rgba(0, 0, 0, 0.3);
    }

    #head.mp .util .btn_close {
        width: 4.8rem;
        height: 4.8rem;
        background: url('../../images/common/webshop/btn_close02.png') 0 0 no-repeat;
        position: absolute;
        left: 1.8rem;
        top: 50%;
        transform: translate(0, -50%);
        background-size: 100% auto;
    }

    #head.mp .util .user_area {
        padding: 6.4rem 2.4rem 0;
        text-align: center;
        padding-top: 0;
        position: absolute;
        top: 2rem;
        right: 0;
    }

    #head.mp .util .user_area .uesr {
        font-size: 20px;
        margin-bottom: 2.4rem;
        display: none;
    }

    #head.mp .util .user_area .uesr img {
        width: 20px;
        margin-right: 8px;
        position: relative;
        top: -2px;
        vertical-align: middle;
    }

    #head.mp .util .user_area .cash {
        font-size: 0;
    }

    #head.mp .util .user_area .cash img {
        display: none;
    }

    #head.mp .util .user_area .cash .more {
        font-size: 14px;
        width: auto;
        background: none;
        color: #aaddff;
        text-transform: uppercase;
        font-family: 'Roboto';
        font-weight: 900;
        font-style: oblique;
        letter-spacing: 0.02em;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    }

    #head.mp .util .user_area .cash .more font {
        color: #fd0;
    }

    #head.mp .util .user_area .cash .more:before {
        position: relative;
        top: -2px;
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        background-image: url(../../images/common/webshop/coin_pb01.png);
        background-repeat: no-repeat;
        background-position: 0 0;
        margin-right: 0.7rem;
    }

    #head.mp .util .user_area .cash .more:hover {
        background-position: 0 0;
    }

    #head.mp .util .user_area .gold {
        padding: 2rem;
        background: rgba(255, 238, 0, 0.1);
        border-radius: 1.2rem;
        font-size: 28px;
        margin-top: 1.2rem;
        display: none;
    }

    #head.mp .util .user_area .gold img {
        margin-right: 1rem;
        width: 3.2rem;
    }

    #head.mp .util .user_area .coupon {
        padding: 2rem;
        background: rgba(68, 204, 255, 0.1);
        border-radius: 1.2rem;
        font-size: 28px;
        margin-top: 1.2rem;
        display: none;
    }

    #head.mp .util .user_area .coupon img {
        margin-right: 1rem;
        width: 3.2rem;
    }

    #head.mp .util .user_area .token {
        padding: 2rem;
        background: rgba(255, 238, 0, 0.1);
        border-radius: 1.2rem;
        font-size: 28px;
        margin-top: 1.2rem;
        display: none;
    }

    #head.mp .util .user_area .token img {
        margin-right: 1rem;
        width: 3.2rem;
    }

    #head.mp .util .user_area .star {
        padding: 2rem;
        background: rgba(68, 204, 255, 0.1);
        border-radius: 1.2rem;
        font-size: 28px;
        margin-top: 1.2rem;
        display: none;
    }

    #head.mp .util .user_area .star img {
        margin-right: 1rem;
        width: 3.2rem;
    }

    #head.mp .util .user_area .goods {
        display: none;
    }

    #head.mp .util .state {
        margin: 2rem 2.4rem 1.2rem;
        background: rgba(136, 136, 136, 0.2);
        border-radius: 1.2rem;
        font-size: 0;
        display: none;
    }

    #head.mp .util .state a {
        position: relative;
        width: 50%;
        text-align: center;
        color: #fff;
        font-size: 22px;
        padding: 2rem 2.4rem;
    }

    #head.mp .util .state a:before {
        content: '';
        display: block;
        top: 2.4rem;
        bottom: 2.4rem;
        right: 0;
        width: 1px;
        position: absolute;
        background: rgba(255, 255, 255, 0.2);
    }

    #head.mp .util .state a:last-child:before {
        display: none;
    }

    #head.mp .util .state a img {
        display: inline;
        margin: 0;
        margin-right: 2rem;
        vertical-align: middle;
        position: relative;
        top: -2px;
        width: 2.4rem;
    }

    #head.mp .util .btns {
        margin: 0 2.4rem;
    }

    #head.mp .util .btns a {
        display: block;
        border-radius: 1.2rem;
        background: rgba(136, 136, 136, 0.15);
        color: #ccc;
        font-size: 18px;
        text-align: center;
        padding: 3rem 2.4rem;
    }

    #head.mp .util .btns .btn_history {
        letter-spacing: 0.02em;
        display: block;
        border-radius: 1.2rem;
        background: rgba(136, 136, 136, 0.15);
        color: #ccc;
        text-align: center;
        padding: 2rem 2.4rem;
        display: none;
    }

    #head.mp .util .btns .btn_history:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        background: url('../../images/common/webshop/icon_history.png') 0 0 no-repeat;
        width: 2.4rem;
        height: 2.4rem;
        background-size: 2.4rem auto;
        margin-right: 1.6rem;
    }

    #head.mp .util .btns .btn_login {
        padding: 2.4rem;
        border-radius: 0;
        letter-spacing: 0.06em;
        font-family: 'Chakra Petch';
        font-weight: 700;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
        background: rgba(0, 170, 238, 0.1);
        color: #4cf;
        text-transform: uppercase;
        border: 1px solid #0ae;
        position: relative;
    }

    #head.mp .util .btns .btn_login {
        border-radius: 0;
        background-color: rgba(0, 170, 238, 0.15);
        border-color: #0ae;
        color: #0ae;
    }

    #head.mp .util .btns .btn_login:after {
        top: -2px;
        position: absolute;
        bottom: -2px;
        right: -2px;
        left: -2px;
        content: '';
        display: block;
        background: url('../../images/common/webshop/ag_lt_b.png') 0 0 no-repeat, url('../../images/common/webshop/ag_rt_b.png') right 0 no-repeat, url('../../images/common/webshop/ag_lb_b.png') 0 bottom no-repeat, url('../../images/common/webshop/ag_rb_b.png') right bottom no-repeat;
    }

    #head.mp.fixed .top {
        margin-bottom: 0;
    }

    #head.mp.fixed .gnb_area {
        border-radius: 0;
    }

    #head.mp .ov-bg {
        display: block;
        z-index: 0;
    }

    #head.mp #gnb li .tooltip:before {
        display: none;
    }

    #head.mp #gnb li .tooltip {
        top: 50%;
        max-width: 50rem;
        transform: translate(-50%, -50%);
    }

    #head.mp #gnb li.tip a:after {
        position: relative;
        top: -1px;
    }

    #head.mp #gnb .depth2 {
        position: relative;
        left: auto;
        transform: none;
        width: auto;
        border: none;
        top: 0;
        padding: 1.2rem 2.4rem 1.2rem 2.4rem;
        margin-bottom: 2.4rem;
    }

    #head.mp #gnb .depth2:before {
        display: none;
    }

    #head.mp #gnb .depth2 ul {
        margin: 0;
        max-height: 12rem;
        overflow-y: scroll;
        padding-right: 1.8rem;
    }

    #head.mp #gnb .depth2 ul::-webkit-scrollbar {
        width: 0.8rem;
    }

    #head.mp #gnb .depth2 ul::-webkit-scrollbar-track {
        margin-block: 1.2rem;}

    #head.mp #gnb .depth2 ul::-webkit-scrollbar-thumb {
        border-radius: 0.3rem;
        background: linear-gradient(to bottom, rgba(255, 255, 51, 0.3), rgba(255, 255, 255, 0)) , #44ccff;
        border: 1px solid #00ffff;
        border-top-color: #ffee00;
    }

    #head.mp #gnb .depth2 li {
        padding: 0;
        border-bottom: 0;
    }

    #head.mp #gnb .depth2 li a {
        height: auto;
        padding: 1rem 0;
        border: none;
    }

    #head.mp #gnb .depth2 li a:hover {
        background: none;
        border: none;
    }

    #head.mp #gnb .depth2 li a:hover span {
        color: #ccc;
    }

    #head.mp #gnb .depth2 a img {
        width: 13px;
        margin-right: 2rem;
    }

    #head.mp #gnb li.in_depth:before {
        content: '';
        display: block;
        position: absolute;
        top: 24px;
        right: 0;
        width: 3.6rem;
        height: 1.8rem;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: url('../../images/common/webshop/arr_gnb_m.png');
        background-size: 100% auto;
    }

    #head.mp #gnb li.in_depth.open:before {
        background-position: 0 -1.8rem;
    }

    #head.mp .util .user_area .cash .more {
        box-shadow: none;
    }

    #head.mp .util .user_area .cash a:before {
        display: none;
    }

    #head.mp .util.on h1 {
        text-align: center;
        background: rgba(255, 255, 255, 0.1);
    }

    #head.mp .util.on .lg_top {
        text-align: left;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.05) ;
    }

    #head.mp .util.on .user_area a {
        word-break: break-all;
    }

    #head.mp .util.on .user_area a:before {
        transform: none;
        vertical-align: middle;
    }

    #head.mp .util.on .user_area .uesr {
        display: block;
        word-break: break-all;
    }

    #head.mp .util.on .user_area .gold {
        display: inline-block;
        padding: 0;
        width: auto;
        flex-grow: 1;
        vertical-align: top;
    }

    #head.mp .util.on .user_area .gold a {
        display: block;
        padding: 1.6rem 2rem;
    }

    #head.mp .util.on .user_area .gold a:before {
        width: 3.2rem;
        height: 3.2rem;
        position: relative;
        top: -2px;
        margin-right: 1rem;
    }

    #head.mp .util.on .user_area .gold a:hover {
        color: #fe0;
    }

    #head.mp .util.on .user_area .gold a:hover:before {
        background-position: 0 0;
    }

    #head.mp .util.on .user_area .coupon {
        display: inline-block;
        padding: 0;
        width: auto;
        flex-grow: 1;
        vertical-align: top;
    }

    #head.mp .util.on .user_area .coupon a {
        display: block;
        padding: 1.6rem 2rem;
    }

    #head.mp .util.on .user_area .coupon a:before {
        width: 3.2rem;
        height: 3.2rem;
        position: relative;
        top: -2px;
        margin-right: 1rem;
    }

    #head.mp .util.on .user_area .coupon a:hover {
        color: #fe0;
    }

    #head.mp .util.on .user_area .coupon a:hover:before {
        background-position: 0 0;
    }

    #head.mp .util.on .user_area .token {
        display: inline-block;
        padding: 0;
        width: auto;
        flex-grow: 1;
        vertical-align: top;
    }

    #head.mp .util.on .user_area .token a {
        display: block;
        padding: 1.6rem 2rem;
    }

    #head.mp .util.on .user_area .token a:before {
        width: 3.2rem;
        height: 3.2rem;
        position: relative;
        top: -2px;
        margin-right: 1rem;
    }

    #head.mp .util.on .user_area .token a:hover {
        color: #fe0;
    }

    #head.mp .util.on .user_area .token a:hover:before {
        background-position: 0 0;
    }

    #head.mp .util.on .user_area .star {
        display: inline-block;
        padding: 0;
        width: auto;
        flex-grow: 1;
        vertical-align: top;
    }

    #head.mp .util.on .user_area .star a {
        display: block;
        padding: 1.6rem 2rem;
    }

    #head.mp .util.on .user_area .star a:before {
        width: 3.2rem;
        height: 3.2rem;
        position: relative;
        top: -2px;
        margin-right: 1rem;
    }

    #head.mp .util.on .user_area .star a:hover {
        color: #adf;
    }

    #head.mp .util.on .user_area .star a:hover:before {
        background-position: 0 0;
    }

    #head.mp .util.on .user_area .goods {
        width: 100%;
        margin-top: 2rem;
        display: block;
    }

    #head.mp .util.on .user_area .goods > a {
        display: none;
    }

    #head.mp .util.on .user_area .goods .depth2 {
        display: block !important;
        position: relative;
        right: auto;
        width: auto;
        border: none;
        top: auto;
        padding: 1.8rem 1.6rem 1.8rem 1.8rem;
        background: #000000;
        border-radius: 1.2rem;
    }

    #head.mp .util.on .user_area .goods .depth2:before {
        display: none;
    }

    #head.mp .util.on .user_area .goods .depth2 ul {
        max-height: 9rem;
        overflow-y: scroll;
        padding-right: 1.8rem;
    }

    #head.mp .util.on .user_area .goods .depth2 ul::-webkit-scrollbar {
        width: 0.8rem;
    }

    #head.mp .util.on .user_area .goods .depth2 ul::-webkit-scrollbar-track {
        margin-block: 1.2rem;}

    #head.mp .util.on .user_area .goods .depth2 ul::-webkit-scrollbar-thumb {
        border-radius: 0.3rem;
        background: linear-gradient(to bottom, rgba(255, 255, 51, 0.3), rgba(255, 255, 255, 0)) , #44ccff;
        border: 1px solid #00ffff;
        border-top-color: #ffee00;
    }

    #head.mp .util.on .user_area .goods .depth2 li {
        margin: 0.6rem;
        width: calc((100% - 2.4rem) / 2);
        display: inline-block;
        vertical-align: top;
    }

    #head.mp .util.on .user_area .goods .depth2 a {
        height: 6rem;
        background: rgba(68, 68, 68, 0.8);
        border-radius: 1.2rem;
        border-bottom: 0;
        padding: 0 2.4rem;
    }

    #head.mp .util.on .user_area .goods .depth2 a span {
        font-size: 23px;
    }

    #head.mp .util.on .user_area .goods .depth2 a img {
        width: 3.2rem;
    }

    #head.mp .util.on .user_area .goods .depth2 a:hover span {
        color: #ffee00;
    }

    #head.mp .util.on .state {
        display: block;
    }

    #head.mp .util.on .btns .btn_history {
        display: block;
    }

    #head.mp .util.on .btns .btn_login {
        bottom: 2.4rem;
        left: 2.4rem;
        right: 2.4rem;
        position: absolute;
    }

    #head.mp .util.on .btn_close {
        left: auto;
        right: 1.8rem;
        height: 3.6rem;
        background: url('../../images/common/webshop/btn_close.png') 0 0 no-repeat;
        background-size: 100% auto;
    }

    #head.mp .util.on .user_area {
        padding-top: 2.4rem;
        position: static;
        padding-right: 2.4rem;
        font-size: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0 1.2rem;
    }

    #head.mp .util.on .user_area .cash {
        width: 100%;
        font-size: 28px;
        background: rgba(102, 255, 136, 0.1);
        border-radius: 1.2rem;
    }

    #head.mp .util.on .user_area .cash a {
        display: block;
        padding: 2rem 0;
    }

    #head.mp .util.on .user_area .cash a:before {
        width: 3.6rem;
        height: 3.2rem;
        position: relative;
        top: -2px;
        margin-right: 1rem;
    }

    #head.mp .util.on .user_area .cash a:hover {
        color: #fff;
    }

    #head.mp .util.on .user_area .cash a:hover:before {
        background-position: 0 0;
    }

    #head.mp .util.on .user_area .cash img {
        width: 2.8rem;
        margin-right: 1rem;
        display: inline-block;
    }

    #head.mp .util.on .user_area .cash .more {
        font-size: 0;
        width: 3.2rem;
        height: 3.2rem;
        background-size: 3.2rem auto;
        background-image: url(../../images/common/webshop/btn_cash.png);
        position: relative;
        top: -2px;
        box-shadow: inset 0 1px 0 #4cf, inset 0 1px 0 0px #4cf, inset 0 -1px 0 #6f8, inset 0 0 0 1px #4cf;
    }

    #head.mp .util.on .user_area .cash .more:before {
        display: none;
    }

    #head.mp .util.on .user_area .cash a:before {
        display: inline-block;
    }

    #head.mp .util.on .btns .btn_login {
        border-radius: 1.2rem;
        border-bottom: 1px solid #6f8;
    }

    #head.mp .util.on .btns .btn_login:after {
        display: none;
    }

    #head .user_area .cash:hover .more {
        background-position: 0 0;
    }

    #head .user_area .cash:hover .more:after {
        background-image: linear-gradient(#123, #123),linear-gradient(0deg, #4cf, #6f8);
    }

    #container {
        padding-top: 130px;
    }

    /* main */
    .goods .item_wrap {
        margin-right: -3.6rem;
        overflow-x: scroll;
        padding-bottom: 1px;
    }

    .goods .item_wrap .item_list {
        min-width: 1200px;
    }

    .pick .item_wrap {
        margin-right: 0;
        overflow: hidden;
    }

    .pick .item_wrap .item_list {
        padding-right: 0;
        min-width: 0;
        margin-left: -1.2rem;
    }

    .pick .slide_wrap {
        padding-left: 0;
    }

    .pick .inner {
        padding-left: 0;
        padding-right: 0;
    }

    .pick .swiper-button-next, .pick .swiper-button-prev {
        display: none;
    }

    .pick .slide_wrap .md_img {
        bottom: auto;
        background: url(../../images/common/webshop/bg_pick.jpg) 0 center no-repeat;
        border-radius: 1.2rem;
        box-shadow: 0 2.4rem 7.2rem rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
        text-align: center;
        background-size: cover;
        width: 100%;
        position: relative;
        height: 30rem;
        overflow: hidden;
        padding-top: 0;
        margin-bottom: 3.8rem;
    }

    .pick .slide_wrap .md_img img {
        width: 280px;
        max-width: 100%;
        height: auto;
        top: 50%;
        transform: translate(-50%, -45%);
        position: absolute;
        bottom: 0;
        left: 50%;
    }

    /* sub */
    .sub_contents .goods .item_wrap {
        overflow: hidden;
        padding-bottom: 0;
        margin-right: 0;
    }

    .sub_contents .goods .item_wrap .item_list {
        padding-right: 0;
        min-width: 0;
    }

    .sub_contents .item_wrap .item_list > li {
        width: 25%;
    }

    .sub_contents .md_banner {
        display: block;
        position: relative;
        margin-bottom: 14.4rem;
        overflow: visible;
        border-radius: 1.2rem 1.2rem 0 0;
    }

    .sub_contents .md_banner .txt {
        line-height: 1;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 0 1.2rem 1.2rem;
        padding: 0 2.4rem;
        position: absolute;
        bottom: -7.2rem;
        left: 0;
        right: 0;
        background: #444;
        color: #fff;
        text-align: center;
        font-size: 31px;
        height: 7.2rem;
    }

    .pick .tit_wrap + .tag_wrap {
        margin-top: 0;
    }

    /* list */
    .list_wrap {
        padding-left: 0;
    }

    .list_wrap .tag_wrap +.item_wrap {
        padding-left: 0;
        display: block;
        width: auto;
    }

    .list_wrap .tag_wrap {
        position: static;
        width: auto;
        padding-right: 0;
        margin-bottom: 7.2rem;
        display: block;
    }

    .tag_wrap .tag {
        display: inline-block;
        width: auto;
        margin: 0.6rem;
    }

    .list_wrap .tag_wrap +.item_wrap .item_list > li {
        width: 25%;
    }

    .item_wrap .row_list {
        margin-left: 0;
    }

    .item_wrap .row_list > li {
        width: 100% !important;
        padding-left: 0;
    }

    /* view */
    .view_wrap .item_view {
        display: block;
    }

    .view_wrap .item_view .item {
        display: flex;
        margin-right: 0;
        width: 100%;
        margin-bottom: 4.8rem;
    }

    .view_wrap .item_view .info {
        display: block;
        width: 100%;
    }

    .view_wrap .rate_wrap {
        padding: 2.4rem 4.8rem;
    }

    .view_wrap .detail .text .txt {
        margin-top: 0;
    }

    .with_item .item_wrap {
        margin: 0 4.8rem;
    }

    .view_wrap .item_view .price li {
        justify-content: space-between;
    }

    .view_wrap .item_view .price li > div {
        flex-grow: 1;
        width: auto;
    }

    .view_wrap .item_view .price li .p02 {
        text-align: right;
        flex-shrink: 0;
    }

    /* prepare */
    .prepare_wrap > img {
        right: auto;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .prepare_wrap .desc {
        margin-top: 36rem;
        margin-bottom: 0;
        border-radius: 2.4rem;
        border: 0.4rem solid #0ae;
        padding: 5.6rem 5.6rem 1.2rem;
        word-break: break-word;
        background: rgba(0, 0, 0, 0.8) url('../../images/common/webshop/ptn_noise.png') 0 0 repeat;
    }

    .prepare_wrap .desc .tit:before, .prepare_wrap .desc .tit:after {
        background: linear-gradient(to right, #4cf, #6f8);
        width: auto;
        left: -1.2rem;
        right: -1.2rem;
        transform: none;
        top: auto;
    }

    .prepare_wrap .desc .tit:before {
        top: -0.5rem;
    }

    .prepare_wrap .desc .tit:after {
        bottom: -0.5rem;
    }

    .prepare_wrap .desc .txt {
        margin-top: 4rem;
    }

    .prepare_wrap .desc .txt br {
        display: none;
    }

    .prepare_wrap .desc .txt span {
        display: block;
    }

    /* cart */
    .cart_wrap .left_area {
        display: block;
        width: 100%;
    }

    .cart_wrap .right_area {
        display: block;
        width: 100%;
        margin-left: 0;
        padding-top: 7.2rem;
        margin-top: 7.2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        position: relative;
        top: auto;
        right: auto;
    }

    .cart_wrap .right_area:before {
        content: '';
        display: block;
        width: 0.4rem;
        height: 1px;
        position: absolute;
        top: -1px;
        left: 0;
        background: #0ae;
    }

    .cart_wrap .right_area.bot {
        bottom: auto;
    }

    .cart_wrap .item_wrap .row_list .desc {
        padding-right: 43rem;
    }

    .total_all .btn_option {
        margin-left: 2.4rem;
        letter-spacing: 0.06em;
        font-weight: 700;
        font-size: 21px;
        width: 28.8rem;
        height: 9.6rem;
    }

    .total_all .btn_basic {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        vertical-align: top;
        line-height: 1;
    }

    .cart_wrap .purchase_wrap .cash_wrap .btn_basic {
        display: inline-flex;
    }

    .total_all .btn_option span {
        display: block;
    }

    .total_all .total {
        margin-bottom: 3.6rem;
    }

    .total_all {
        margin-top: 0;
    }

    .total_all.fixed {
        position: relative;
    }

    /* purchase */
    .cart_wrap .purchase_wrap .left_area {
        width: 100%;
    }

    .cart_wrap .purchase_wrap .right_area {
        width: 100%;
    }

    .cart_wrap .purchase_wrap .total_all.fixed .cash_wrap {
        width: 100%;
    }

    .cart_wrap .purchase_wrap .cash_wrap .btn_basic {
        width: calc((100% - 14px) / 2);
    }

    .item_wrap .rd_list ul {
        text-align: left;
    }

    /* coupon */
    .coupon_wrap .total_all.fixed {
        width: 100%;
    }

    .coupon_wrap .total_all {
        margin-top: 0;
    }

    .cart_wrap .purchase_wrap .total_all {
        margin-top: 0;
    }

    /* toast message */
    .toast_msg {
        bottom: 8rem;
    }

    /* goods */
    .sub_contents .goods_wrap {
        background-size: 160% auto;
    }

    .goods_wrap .goods_area .goods_img {
        margin-bottom: 9.6rem;
    }

    .goods_wrap .goods_area .my_info .tit {
        left: 0;
        right: 0;
        transform: none;
        top: -14rem;
        line-height: 1;
    }

    .goods_wrap .goods_area .search_wrap {
        max-width: none;
    }

    /* season21 snowfall */
    .battle_wrap_snowfall .my_pass .pass {
        left: 2.4rem;
    }

    /*********************** ie_ingame ********************************/
    #head.mp .gnb_area {
        position: relative;
    }

    #head .user_area .uesr {
        color: #fff;
    }
}

@media screen and (max-width: 1023px) {
    #head.mp .top .user_area > div:not(.uesr) {
        display:none;
    }

    .pick .swiper-button-next, .pick .swiper-button-prev {
        display: none;
    }

    .pick .slide_wrap .swiper {
        overflow: visible;
    }

    .tit_wrap .btn_more {
        font-size: 0;
        width: 4.8rem;
        height: 4.8rem;
        top: 50%;
        margin-top: -2.4rem;
        padding: 0;
    }

    .tit_wrap .btn_more:before {
        right: auto;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-top: 0;
    }

    .tit_wrap .btn_more:hover {
        background-position: 0 0;
    }

    .pick .inner {
        padding-left: 0;
        padding-right: 0;
    }

    /* sub */
    .sub_contents .item_wrap .item_list > li {
        width: 33.33%;
    }

    .md .md_img {
        height: 30rem;
        overflow: hidden;
        padding-top: 0;
    }

    .md .md_img img {
        width: 280px;
        max-width: 100%;
        height: auto;
        top: 50%;
        transform: translate(-50%, -45%);
    }

    /* list */
    .list_wrap .tag_wrap +.item_wrap .item_list > li {
        width: calc(100% / 3);
    }

    .sub_contents .item_wrap .item_list > li.md {
        width: 100%;
    }

    .battle_wrap .my_pass .pass {
        left: -1.8rem;
    }

    /* season18 hydra */
    .battle_wrap_hydra .my_pass .pass {
        left: -2.8rem;
    }

    .battle_wrap_hydra .my_pass:after {
        width: 360px;
        height: 190px;
        background-size: 100%;
        right: -56px;
    }

    /* season22 shaman */
    .battle_wrap_shaman .my_pass:before {
        background-size: 80% auto;
    }

    .battle_wrap_shaman .item_wrap .item_list .sale {
        top: auto;
    }

    /* view */
    .view_wrap .item_view .price li > div {
        display: block;
        width: 100%;
    }

    .view_wrap .item_view .price .p01 {
        overflow: hidden;
        padding-top: 0;
        margin-bottom: 2.4rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .view_wrap .price .pay {
        flex-shrink: 0;
    }

    .view_wrap .price .day {
        min-width: 0;
    }

    .view_wrap .item_view .quantity {
        width: 72px;
    }

    .view_wrap .item_view .quantity > a {
        width: 100%;
    }

    .view_wrap .item_view .price button {
        width: calc((100% - 104px) / 2);
    }

    .view_wrap .item_view .price li {
        display: block;
    }

    .view_wrap .item_view .price li .p02 {
        text-align: center;
    }

    /* random */
    .randombox .rd_con {
        width: 640px;
        height: 427px;
    }

    .pop_random .randombox {
        height: 448px;
    }

    .pop_random .top .btn_skip {
        left: 3.6rem;
    }

    .pop_random .top .num {
        right: 3.6rem;
    }

    .pop_random .btn_rd {
        right: 6.8rem;
    }

    /* cart */
    .cart_wrap .item_wrap .item_list .etc {
        position: static;
        transform: none;
        margin-top: 2.4rem;
        overflow: hidden;
    }

    .item_wrap .item_list .etc .unit {
        float: left;
    }

    .cart_wrap .item_wrap .item_list .soldout .txt {
        float: left;
    }

    .item_wrap .item_list .etc .btns {
        float: right;
        font-size: 0;
    }

    .item_wrap .item_list .etc .btns .btn_delete {
        height: 48px;
        line-height: 48px;
    }

    .item_wrap .item_list .etc .btns a {
        display: inline-block;
        vertical-align: middle;
        margin-left: 1.2rem;
    }

    .item_wrap .item_list .etc .btns .btn_order {
        margin-top: 0;
    }

    .cart_wrap .item_wrap .row_list > li {
        margin-bottom: 4.8rem !important;
    }

    .cart_wrap .item_wrap .row_list .desc {
        padding-right: 3.6rem;
    }

    .cart_wrap .item_wrap .row_list .desc .name {
        padding-right: 0;
        color: #fff;
    }

    .cart_wrap .item_wrap .row_list .desc .name .period {
        position: static;
        display: block;
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
        color: #aaa;
        margin-top: 0.5rem;
    }

    .cart_wrap .item_wrap .item_list .etc .explan {
        text-indent: 0;
        border-radius: 0.6rem;
        margin-right: 0;
        text-align: left;
        height: 48px;
        line-height: 48px;
        padding: 0 1.6rem;
        width: calc(100% - 144px);
        background: rgba(255, 255, 255, 0.1) url('../../images/common/webshop/ptn_noise.png') 0 0 repeat;
    }

    .cart_wrap .item_wrap .row_list .desc .name {
        display: block;
        max-width: 100%;
        padding: 0;
        color: #fff;
    }

    .cart_wrap .item_wrap .row_list .desc .term {
        position: static;
        display: block;
        width: 100%;
        color: #ccc;
        padding: 0;
        margin-top: 0.5rem;
    }

    .cart_wrap .item_wrap .row_list .desc .term:before {
        display: none;
    }

    .cart_wrap .item_wrap .row_list .desc .price {
        margin-top: 1.5rem;
    }

    .view_wrap .cart_wrap .top .rm_list {
        display: block;
        text-align: left;
        padding-top: 0;
        padding-bottom: 1.2rem;
    }

    .view_wrap .cart_wrap .top .remain {
        margin-right: 1.2rem;
        margin-top: 1.2rem;
        border-radius: 4px !important;
    }

    /* maintenance */
    .maintenance .sns .nation {
        margin-right: 0;
        margin-bottom: 7.2rem;
        display: block;
    }

    .maintenance .sns .nation:last-child {
        margin-bottom: 0;
    }

    /* purchase */
    .purchase_wrap .item_wrap .row_list .desc .name {
        padding-right: 10rem;
    }

    /* coupon */
    .coupon_wrap .tab ul li {
        width: calc((100% - 1.2rem) / 2);
    }

    .coupon_wrap .purchase_wrap .item_wrap .row_list .desc .name {
        padding-right: 0;
    }

    /* token */
    .token_area .token_cont .tit {
        font-size: 29.5px;
    }

    .token_area .token_cont .search_wrap .search_area {
        width: 300px;
    }

    /* token : pbic2026*/
    .token_pbic2026 .cha_wrap {
        top: -2rem;
        right: -10rem;
    }

    /* goods */
    .goods_wrap .goods_area .goods_img .bullet01 {
        left: -30%;
    }

    .goods_wrap .goods_area .goods_img .bullet02 {
        left: -70%;
    }

    /* season19 astel */
    .sub_contents .battle_wrap_astel {
        background-size: 250% auto;
    }

    /* season20 aero */
    .battle_wrap_aero .my_pass {
        background: url('../../images/common/webshop/battlepass/2025/aero/bg_bp_gage.html') center bottom 0 no-repeat;
    }

    /*********************** ie_ingame ********************************/
    #head.mp {
        left: 0;
        right: 0;
    }

    #head.mp .top {
        display: none;
    }

    #head.mp .gnb_area {
        backdrop-filter: none;
        border-radius: 0px;
    }

    #head.mp.open .gnb_area {
        background: #444444;
    }

    #head.mp #gnb {
        background: #333333 url(../../images/common/webshop/ptn_gnb.png) 0 0 repeat;
        border-bottom: 1px solid #66ff88;
        border-top: 2px solid #000000;
        border-image: none;
        box-shadow: inset 0 20px 40px -30px rgba(0, 0, 0, 0.3);
    }

    #head.mp #gnb ul {
        margin: 0 5.6rem;
    }

    #head.mp .gnb_area .btn_menu {
        left: 2.4rem;
    }

    #head.mp .gnb_area .btn_my {
        right: 2.4rem;
    }

    #head.mp.fixed .gnb_area {
        background: rgba(0, 0, 0, 0.6);
        -webkit-backdrop-filter: var(--bg_blur);
        backdrop-filter: var(--bg_blur);
    }

    #head.mp.fixed.open .gnb_area {
        background: #444444;
    }

    #head.mp .util h1 {
        display: none !important;
    }

    #head.mp .util .lg_top {
        margin: 0;
        border-radius: 0;
        text-align: left;
        background: rgba(255, 255, 255, 0.05);
    }

    #head.mp .util .btn_close {
        background: url('../../images/common/webshop/btn_close.png') 0 0 no-repeat;
        background-size: 100% auto;
        right: 1.8rem;
        height: 3.6rem;
        left: auto;
    }

    #head.mp .util .user_area {
        padding: 0;
        position: static;
        border-top: 2px solid #000;
        box-shadow: inset 0 20px 40px -30px rgba(0, 0, 0, 0.3);
        margin-bottom: 3.6rem;
    }

    #head.mp .util .user_area .cash {
        margin: 0;
    }

    #head.mp .user_area .cash a {
        width: 100%;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url('../../images/common/webshop/bg_topup.html') center center no-repeat;
        background-size: cover;
    }

    #head.mp .util .user_area .cash .more:before {
        top: -1px;
    }

    #head.mp .util .btns .btn_login {
        border-radius: 1.2rem;
        border: 1px solid #0ae;
        border-bottom: 1px solid #6f8;
    }

    #head.mp .util .btns .btn_login:after {
        display: none;
    }

    #head.mp .util.on .user_area {
        border-top: 2px solid #000;
        box-shadow: inset 0 20px 40px -30px rgba(0, 0, 0, 0.3);
        padding: 2.4rem 2.4rem 0;
    }

    #head.mp .util.on .user_area .cash {
        margin-left: 1.2rem;
    }

    #head.mp .util.on .user_area .cash a {
        width: auto;
        height: auto;
        background: none;
    }

    #head.mp .util.on .user_area {
        gap: 0;
        margin-left: -1.2rem;
    }

    #head .user_area > div {
        margin-left: 1.2rem;
    }

    .btn_home {
        display: block;
        z-index: 99;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        position: fixed;
        bottom: 2.4rem;
        left: 2.4rem;
        width: 48px;
        height: 48px;
        padding-top: 12px;
        text-align: center;
        font-size: 11px;
        color: #eee;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        border-top: 1px solid #0ae;
        border-bottom: 1px solid #6f8;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        font-family: 'Roboto';
    }

    .btn_home:before {
        content: '';
        display: block;
        margin: 0 auto 5px;
        width: 12px;
        height: 10px;
        background-position: 0 0;
        background-repeat: no-repeat;
        background-image: url('../../images/common/webshop/icon_home.html');
    }

    .btn_home:hover {
        border: 1px solid #6f8;
        color: #6f8;
        background: rgba(102, 255, 136, 0.35);
    }

    .btn_home:hover:before {
        background-position: 0 100%;
    }

    .mainSlide_wrap {
        margin-top: 0;
    }

    #container {
        padding-top: 92px;
    }

    .sub_contents {
        padding-top: 92px;
    }

    .view_wrap .item_view .item img {
        width: 100%;
    }

    .view_wrap .item_view.item_view_randombox .item img {
        width: auto;
    }

    .item_wrap .item_list .desc {
        position: static;
        height: auto;
        padding: 1.5rem 7px 0;
        height: 80px;
        justify-content: flex-start;
    }

    .item_wrap .item_list .desc .name {
        overflow: hidden;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
        word-wrap: normal;
        white-space: nowrap;
        max-width: 100%;
    }

    .item_wrap .item_list .desc .price {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        padding: 0;
        background: none !important;
        margin: 3px -1px 0;
    }

    .item_wrap .item_list .state {
        margin-top: 0;
        position: absolute;
        top: 0.7rem;
        left: 0.7rem;
    }

    .item_wrap .item_list .state span {
        background-color: rgba(0, 0, 0, 0.7);
    }

    .item_wrap .item_list .sale {
        top: auto;
        right: auto;
        bottom: 1rem;
        left: 1rem;
        width: 52px;
        height: 52px;
        font-size: 14px;
    }

    .item_wrap .item_list .sale font {
        font-size: 14px;
        margin-top: -1px;
    }

    .item_wrap .item_list .pass .info {
        margin-top: 36px;
    }

    .item_wrap .item_list .con .lock.out {
        bottom: 80px;
        right: 0.5rem;
        left: auto;
    }

    .item_wrap .item_list .info li {
        display: block;
        text-align: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        min-height: 0;
    }

    .item_wrap .item_list .info span:last-child {
        text-align: center;
        display: inline-block;
    }

    .item_wrap .item_list .soldout .txt {
        bottom: 1rem;
        height: 30px;
        line-height: 30px;
    }

    .item_wrap .item_list .soldout .info .through {
        display: inline-block;
    }

    .item_wrap .item_list .con:hover .lock {
        bottom: 80px;
        right: 0.5rem;
        left: auto;
    }

    .item_wrap .item_list .con:hover .lv_wrap.over {
        background: none !important;
    }

    .item_wrap .item_list .con:hover .desc .price {
        background: none;
    }

    .item_wrap .item_list .desc .price {
        width: 100%;
        font-size: 20px;
    }

    .lv_wrap {
        padding: 0.5rem 0.5rem 0;
    }

    .lv_wrap .lv + .season {
        padding: 0 1rem;
        margin-left: 0.5rem;
    }

    .lv_wrap .lv img {
        width: 12px;
    }

    .lv_wrap .lv {
        height: 20px;
        line-height: 20px;
    }

    .lv_wrap .season {
        font-size: 12px;
        height: 20px;
        line-height: 20px;
    }

    .lv_wrap .season.two span {
        padding-top: 0.1rem;
        font-size: 10px;
        margin-right: 1.2rem;
    }

    .lv_wrap .season.two font {
        font-size: 10px;
    }

    .field_wrap .item_wrap .item_list .sale {
        top: auto;
        right: auto;
        bottom: 1rem;
        left: 1rem;
    }

    .field_wrap .item_wrap .item_list .sale:before {
        width: 6.8rem;
        height: 6.8rem;
        margin-top: -3.4rem;
        margin-left: -3.4rem;
    }

    .main .goods .item_wrap {
        padding-bottom: 32px;
    }

    .paging_wrap {
        margin-top: 30px;
    }

    .list_wrap .tag_wrap {
        margin-bottom: 3rem;
    }

    .search_wrap {
        margin-bottom: 3rem;
    }

    .gold_area span {
        color: #fe9;
    }

    .view_wrap .detail .product .box img {
        width: 100%;
    }

    .view_wrap .cart_wrap .top .remain {
        box-shadow: inset 0px 0px 0px 0.2rem #0e1;
    }

    .item_wrap .item_list.row_list .desc {
        height: 132px;
        padding-left: 2.4rem;
        padding-right: 2.4rem;
        justify-content: center;
    }

    .wish_wrap .item_wrap .item_list .desc {
        padding: 1.5rem 7px 0;
        height: 126px;
    }

    .wish_wrap .item_wrap .state {
        background: none;
        top: 0.7rem !important;
        transform: none;
        padding: 0;
    }

    .wish_wrap .item_wrap .btn_delete {
        margin-top: 1rem;
    }

    .cart_wrap .item_wrap .row_list .desc {
        height: 156px;
    }

    .cart_wrap .item_wrap .item_list .state {
        position: static;
    }

    .cart_wrap .item_wrap .row_list .desc .name .period:before {
        display: none;
    }

    .sub_contents .item_wrap .item_list > li {
        margin-bottom: 6.8rem;
    }

    .battle_wrap .my_pass .lv .num {
        color: #fff;
    }

    .token_base .token_area .token_my {
        border: 0.2rem solid #ffcd55;
    }

    .token_base .token_area .token_my:before {
        display: none;
    }

    .token_base .token_area .token_cont .tit p font {
        color: #ffcd55;
        background: none;
        -webkit-background-clip: content-box !important;
        -webkit-text-fill-color: inherit !important;
    }

    .token_base .item_wrap .item_list .desc .price {
        background: none !important;
    }

    .token_wrap_pbic2025 .token_area .token_img img {
        animation: ani_flip 2s ease-out forwards;
    }

    .goods_wrap .goods_area .my_info .tit {
        color: #d5cdc3;
        background: none;
        -webkit-background-clip: content-box !important;
        -webkit-text-fill-color: inherit !important;
    }

    .goods_wrap .goods_area .my_info .coin {
        color: #aaa;
        background: none;
        -webkit-background-clip: content-box !important;
        -webkit-text-fill-color: inherit !important;
    }

    .goods_wrap .goods_area .my_info {
        border: 0.4rem solid #888;
        border-radius: 6px;
    }

    .goods_wrap .goods_area .my_info:before {
        display: none;
    }

    .goods_wrap .item_wrap .item_list .desc .price:before {
        display: none;
    }

    .goods_wrap .item_wrap .item_list .sale {
        top: auto;
        right: auto;
        top: auto;
    }

    .error_wrap .desc .tit span {
        color: #6f8;
        background: none;
        -webkit-background-clip: content-box !important;
        -webkit-text-fill-color: inherit !important;
    }

    .battle_wrap .my_pass .lv .num {
        color: #ffee99;
    }

    .battle_wrap_hydra .my_pass .lv .num {
        color: #dd99ff;
    }

    .battle_wrap_snowfall .my_pass .lv .num {
        color: #fff;
    }

    .token_star_ticket .token_area .token_my:after {
        background: none;
        border: 1px solid #99ddff;
    }

    .token_star_ticket .item_wrap .item_list .sale:after {
        background: none;
        border: 1px solid #66ffff;
    }

    .token_pbic2026 .token_area {
        position: relative;
        margin-bottom: 3rem;
    }

    .token_pbic2026 .token_area .token_cont {
        margin: 0;
        position: absolute;
        left: 2rem;
        bottom: 2.4rem;
        z-index: 1;
    }

    .token_pbic2026 .token_area .token_cont .tit {
        font-size: 20px;
        padding-right: 0;
        background: url(../../images/common/webshop/token/pbic2026/tit_bar_m.html) left bottom no-repeat;
        background-size: 4.5rem auto;
    }

    .token_pbic2026 .token_area .token_cont .tit p {
        border-bottom: 0;
        padding: 0;
    }

    .token_pbic2026 .token_area .token_cont .tit:after {
        display: none;
    }

    .token_pbic2026 .token_area .token_my {
        margin-top: 6rem;
    }

    .token_pbic2026 .token_area .token_my > p {
        padding: 0.8rem 5rem 0.8rem 0;
        text-align: right;
    }

    .token_pbic2026 .token_area .token_my:after {
        background: url(../../images/common/webshop/token/pbic2026/my_obj01.html) -7rem 0 no-repeat, url(../../images/common/webshop/token/pbic2026/my_obj02.html) right -11rem bottom 0 no-repeat;
        background-size: 16.2rem auto, 19.2rem auto;
    }

    .token_pbic2026 .token_area .token_my span {
        color: #ffba00;
        -webkit-text-stroke: 0px;
    }

    .sub_contents .token_pbic2026 .item_wrap .item_list > li {
        margin-bottom: 2.4rem;
    }
}

@media screen and (max-width: 768px) {
    html {
        font-size:32%;
    }

    #head .top h1 .bi img, #head.mp .util .lg_top .bi img {
        width: 100px;
    }

    #head .top .user_area > div {
        font-size: 2.3rem;
        padding-right: 2rem;
        height: 25px;
    }

    #head .top .user_area > div:after {
        left: -1rem;
    }

    #head .top .user_area .uesr, #head .top .user_area .cash {
        max-width: 30%;
    }

    #head .top .user_area .gold, #head .top .user_area .coupon {
        max-width: 20%;
    }

    #head .top .user_area a:before {
        width: 14px;
        height: 14px;
        top: 50%;
    }

    #head .top .user_area a:hover:before {
        background-position: 0 -14px;
    }

    #head .user_area .cash a:hover:before {
        background-position: 0 -13px;
    }

    #head .top .user_area img {
        top: -1px;
    }

    #head .top .user_area a {
        padding-left: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        word-break: break-all;
        max-width: 100%;
        vertical-align: middle;
    }

    #head .user_area .uesr img {
        width: 14px;
        top: 0;
    }

    #head .user_area .cash a {
        padding-right: 3.6rem;
    }

    #head .user_area .cash a:before {
        height: 12px;
    }

    #head .user_area .cash .more {
        width: 13px;
        height: 13px;
        background-size: 13px auto;
        top: 0;
    }

    #head .user_area .cash .more:hover {
        background-position: 0 0;
    }

    #head.mp .gnb_area .btn_menu {
        top: 2.8rem;
    }

    #head.mp .gnb_area .btn_my {
        top: 2.2rem;
    }

    #head.mp #gnb li a {
        font-size: 2.7rem;
        padding: 3.6rem 0 3.6rem 4.8rem;
    }

    #head.mp #gnb .depth2 li a {
        padding: 2rem 0;
    }

    #head #gnb li a:before {
        width: 13px;
        height: 13px;
        background-size: 13px auto;
    }

    #head.mp .util .user_area .uesr {
        font-size: 2.9rem;
    }

    #head.mp .util .user_area .cash .more {
        font-size: 2.3rem;
    }

    #head.mp .util .user_area .gold {
        font-size: 3.7rem;
    }

    #head.mp .util .user_area .coupon {
        font-size: 3.7rem;
    }

    #head.mp .util .user_area .token {
        font-size: 3.7rem;
    }

    #head.mp .util .user_area .star {
        font-size: 3.7rem;
    }

    #head.mp .util .state a {
        font-size: 3.1rem;
    }

    #head.mp .util .btns a {
        font-size: 2.7rem;
    }

    #head.mp .util .user_area .uesr img {
        top: 0;
    }

    #head.mp #gnb .depth2 ul {
        max-height: 20rem;
    }

    #head #gnb li.tip a:after {
        width: 13px;
        height: 13px;
        background-size: 100% auto;
        top: -2px;
    }

    #head .top h1 {
        width: 72px;
    }

    #head .top h1 img {
        height: 100%;
    }

    #head .top .user_area {
        font-size: 0;
        text-align: right;
    }

    #head.mp .top .user_area {
        width: calc(100% - 90px);
    }

    #head .top .user_area .uesr {
        max-width: none;
        /* overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; word-break: break-all; */
    }

    #head .top .user_area .gold img {
        width: 14px;
    }

    #head .top .user_area .cash .more {
        position: absolute;
        right: 0;
    }

    #head.mp .util .user_area {
        padding-right: 0;
    }

    #head.mp .util .state a img {
        width: auto;
        height: 3.6rem;
    }

    #head.mp .util.on .user_area .cash {
        font-size: 3.9rem;
    }

    #head.mp .util.on .user_area .cash img {
        width: 3.7rem;
    }

    #head.mp .util.on .user_area .goods .depth2 a span {
        font-size: 3.2rem;
    }

    #head.mp .util.on .user_area .goods .depth2 ul {
        max-height: 14rem;
    }

    #footer .inner {
        margin: 0;
    }

    #footer .corp li {
        position: relative;
        margin: 0;
    }

    #footer .corp li:before {
        content: '';
        display: block;
        position: absolute;
        width: 1px;
        height: 1.8rem;
        background: #555;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
    }

    #footer .corp li:last-child:before {
        display: none;
    }

    #footer .corp li a, #footer .copyright {
        font-size: 2.1rem;
    }

    #footer .corp li a, #footer .corp li a:hover {
        border: none;
        background: none;
    }

    #footer .f_logo img {
        width: 100px;
    }

    .btn_top {
        width: 40px;
        height: 40px;
        font-size: 2rem;
        padding-top: 7px;
    }

    .badge a {
        width: 105px;
        height: 105px;
    }

    /* paging */
    .paging_wrap li a {
        height: 28px;
        min-width: 28px;
        line-height: 28px;
        font-size: 2.5rem;
        background-size: 100% auto !important;
    }

    .search_wrap {
        max-width: none;
        margin-left: 7.2rem;
        margin-right: 7.2rem;
        height: 40px;
    }

    .search_wrap .search_area {
        height: 40px;
        padding-right: 7.2rem;
        height: 40px;
    }

    .search_wrap .search_area input[type=text] {
        font-size: 2.5rem;
        height: calc(100% - 4px);
    }

    #container {
        padding-top: 88px;
    }

    /* main */
    .tit_wrap h3 {
        font-size: 4.3rem;
    }

    .tit_wrap h4 {
        font-size: 2.3rem;
    }

    .tit_wrap .btn_more {
        background-size: 100% auto;
    }

    .tit_wrap .btn_more:after {
        background-size: 10px auto;
    }

    .item_wrap .item_list .info {
        font-size: 2rem;
    }

    .lv_wrap .lv {
        height: 20px;
        line-height: 20px;
    }

    .lv_wrap .lv img {
        width: 12px;
        position: relative;
        top: -1px;
    }

    .lv_wrap .season {
        height: 20px;
        line-height: 20px;
    }

    .lv_wrap .lv + .season {
        font-size: 2.1rem;
    }

    .lv_wrap .season.two span {
        font-size: 2.1rem;
    }

    .lv_wrap .season.two font {
        font-size: 1.6rem;
    }

    .item_wrap .item_list .desc {
        height: 140px;
        padding-bottom: 9.6rem;
    }

    .item_wrap .item_list .desc .name {
        font-size: 2.7rem;
        -webkit-line-clamp: 2;
    }

    .item_wrap .item_list .state span {
        font-size: 1.7rem;
        margin: 0.3rem;
    }

    .item_wrap .item_list .desc .price {
        font-size: 3.4rem;
    }

    .item_wrap .item_list .desc .price img {
        width: 17px;
        top: -1px;
    }

    .item_wrap .item_list .con:hover .lock {
        left: 1.2rem;
        width: 3.6rem;
        bottom: 140px;
    }

    .item_wrap .item_list .con .lock.out {
        left: 1.2rem;
        width: 3.6rem;
        bottom: 140px;
    }

    .item_wrap .item_list .desc .price .del_line:after {
        top: -1px;
    }

    .item_wrap .item_list .desc .price .c_txt {
        font-size: 2rem;
    }

    .item_wrap .item_list .rate {
        font-size: 2.6rem;
    }

    .item_wrap .item_list .sale {
        font-size: 1.6rem;
        letter-spacing: 0;
        padding-top: 2px;
    }

    .item_wrap .item_list .sale font {
        font-size: 2.3rem;
    }

    .item_wrap .item_list .lock {
        border-radius: 1.4rem;
    }

    .goods .item_wrap .item_list {
        min-width: 960px;
    }

    .item_wrap .row_list .item {
        margin-bottom: 0;
        width: 120px;
        height: 120px;
    }

    .item_wrap .row_list .desc {
        padding-bottom: 0;
        height: 120px;
        width: calc(100% - 120px);
    }

    .item_wrap .row_list .desc .date {
        font-size: 2.4rem;
    }

    .item_wrap .row_list .desc .name {
        display: block;
        max-width: 100%;
        padding: 0;
        color: #fff;
        font-size: 3rem;
        padding-right: 10rem;
    }

    .item_wrap .row_list .desc .term {
        position: static;
        display: block;
        width: 100%;
        color: #ccc;
        padding: 0;
        font-size: 2.5rem;
        margin-top: 0.5rem;
    }

    .item_wrap .row_list .desc .term:before {
        display: none;
    }

    .item_wrap .row_list .desc .price {
        margin-top: 1.5rem;
    }

    .item_wrap .item_list .info li {
        font-size: 2rem;
        min-height: 21px;
        letter-spacing: 0;
    }

    .main .swiper-pagination-bullet {
        width: 9px;
        height: 9px;
    }

    .main .swiper-pagination-bullet-active {
        width: 30px;
    }

    .pick .slide_wrap .md_img img {
        width: 150px;
    }

    /* sub */
    .sub_contents {
        padding-top: 130px;
    }

    .sub_contents .wrap {
        padding-top: 130px;
        margin-top: -130px;
    }

    .sub_contents .item_wrap .item_list > li {
        width: 50%;
    }

    .sub_contents .token_wrap .item_wrap .item_list > li {
        width: 33.33%;
    }

    .sub_contents .token_wrap .item_wrap .item_list .sale {
        bottom: 2px;
        left: 2px;
    }

    .sub_contents .token_wrap .inner {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }

    .sub_contents .md_banner .txt {
        font-size: 3.2rem;
    }

    .sub_contents > .new {
        padding-top: 130px;
        margin-top: -130px;
    }

    .sub_contents > .star {
        padding-top: 130px;
        margin-top: -130px;
    }

    .sub_contents > .sale {
        padding-top: 130px;
        margin-top: -130px;
    }

    .tag_wrap .tag {
        font-size: 2.5rem;
    }

    /* list */
    .list_wrap .tag_wrap +.item_wrap .item_list > li {
        width: 50%;
    }

    .no_search, .no_data {
        font-size: 2.5rem;
    }

    .explan {
        font-size: 2.3rem;
    }

    .notic_area {
        padding-right: 0;
        max-height: 35.2rem;
    }

    .notic_area .con {
        padding: 3rem 2.4rem 2.6rem;
        display: block;
    }

    .notic_area .con > div {
        font-size: 2.3rem;
    }

    .notic_area .con .date {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 1.2rem;
    }

    .notic_area .con .date:before {
        top: 0;
    }

    .notic_area .con .txt {
        padding-left: 0;
        -webkit-line-clamp: 2;
        line-height: 1.5;
        height: auto;
        max-height: 36px;
    }

    .battle_wrap .my_pass .pass img {
        max-width: 80px;
    }

    .battle_wrap .my_pass .lv {
        background-size: 100% 100%;
        right: 1.2rem;
        padding-top: 8rem;
    }

    .battle_wrap .my_pass .lv .tit {
        font-size: 3rem;
    }

    .battle_wrap .my_pass .lv .num {
        font-size: 9.2rem;
    }

    .battle_wrap .my_pass .pass {
        background-size: 72% auto;
    }

    /* season18 hydra */
    .sub_contents .battle_wrap_hydra {
        background-size: 1600px;
    }

    .battle_wrap_hydra .my_pass .lv:before {
        background-size: 100%;
        width: 28px;
        height: 36px;
        top: 4px;
        margin-left: -14px;
    }

    .battle_wrap_hydra .my_pass .pass img {
        max-width: 102px;
    }

    .battle_wrap_hydra .my_pass:after {
        display: none;
    }

    .battle_wrap_hydra .item_wrap .item_list .sale:before {
        width: 45px;
        height: 42px;
        top: -3px;
        left: -4px;
    }

    /* season19 astel */
    .battle_wrap_astel .my_pass .lv {
        padding-top: 0;
    }

    /* season20 aero */
    .battle_wrap_aero .my_pass:before {
        background-size: 2.5rem auto, 2.5rem auto, 2.3rem auto, 2.3rem auto;
    }

    .battle_wrap_aero .my_pass:after {
        background-size: 16px auto;
    }

    .battle_wrap_aero .my_pass .lv {
        padding-top: 0;
    }

    /* season21 snowfall */
    .sub_contents .battle_wrap_snowfall {
        background-size: 275% auto;
    }

    .battle_wrap_snowfall .my_pass .lv {
        padding-top: 0;
    }

    .battle_wrap_snowfall .my_pass .cha {
        max-width: 130%;
    }

    .md .md_img img {
        width: 150px;
    }

    .item_wrap .item_list .soldout .txt {
        font-size: 2.6rem;
        height: 30px;
        line-height: 30px;
    }

    .wish_wrap .item_wrap .item_list .soldout .txt {
        font-size: 2rem;
    }

    /* view */
    .view_wrap .item_view {
        padding: 6rem 3.6rem 3.6rem;
    }

    .view_wrap .top .remain {
        height: 20px;
        line-height: 20px;
        font-size: 2.3rem;
    }

    .view_wrap .top .rd_tit {
        height: 30px;
        line-height: 29px;
        font-size: 2.3rem;
    }

    .view_wrap .item_view .name {
        font-size: 5.1rem;
        line-height: 1;
    }

    .view_wrap .item_view .sale {
        font-size: 2.1rem;
        padding-top: 2.2rem;
    }

    .view_wrap .item_view .sale font {
        font-size: 3rem;
    }

    .view_wrap .price .day {
        font-size: 3.4rem;
    }

    .view_wrap .price .pay {
        font-size: 3.4rem;
    }

    .view_wrap .price .pay img {
        width: 17px;
        top: -1px;
    }

    .view_wrap .item_view .price button {
        width: calc((100% - 70px) / 2);
        font-size: 2.2rem;
        padding: 0;
        height: 30px;
        line-height: 30px;
    }

    .view_wrap .item_view .quantity {
        width: 54px;
        margin-right: 8px;
    }

    .view_wrap .item_view .quantity a {
        font-size: 2.6rem;
        height: 30px;
        line-height: 30px;
    }

    .view_wrap .rate_wrap .average {
        position: relative;
        font-size: 2.9rem;
    }

    .view_wrap .rate_wrap .average div {
        vertical-align: middle;
    }

    .view_wrap .rate_wrap .average .num {
        font-size: 2.5rem;
        top: 0;
    }

    .view_wrap .rate_wrap .average .btn_rate {
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -12px;
    }

    .view_wrap .rate_wrap .rate_area:before {
        background-size: 100% auto;
    }

    .view_wrap .rate_wrap .star_area .btn_submit {
        background-size: 100% auto;
        font-size: 2rem;
        width: 14.8rem;
        height: 5.6rem;
        line-height: 5.6rem;
        background-size: 100% auto;
    }

    .view_wrap .tit_d {
        font-size: 2.6rem;
    }

    .view_wrap .tit_dl {
        font-size: 3.3rem;
    }

    .view_wrap .detail .stat .tit {
        font-size: 2.6rem;
    }

    .view_wrap .detail .stat span {
        font-size: 2.6rem;
    }

    .view_wrap .detail .stat .tit {
        width: auto;
    }

    .view_wrap .detail .stat .num {
        font-size: 2.8rem;
        transform: none;
        top: 0;
    }

    .view_wrap .detail .stat .bar {
        width: 100%;
        margin-top: 1.2rem;
    }

    .view_wrap .detail .stat ul li {
        width: calc((100% - 4.8rem) / 2);
    }

    .view_wrap .detail .stat ul li:nth-child(2n) {
        margin-left: 4.8rem;
    }

    .view_wrap .detail .text .txt {
        font-size: 2.5rem;
    }

    .with_item .item_wrap {
        margin: 0;
        overflow: visible;
    }

    .with_item .swiper-button-next, .with_item .swiper-button-prev {
        display: none;
    }

    .view_wrap .detail .product li {
        width: calc(100% / 3);
    }

    .view_wrap .detail .product span {
        font-size: 2.1rem;
    }

    .view_wrap .tit_d.red:before {
        top: -2px;
    }

    .view_wrap .top .lv_wrap .lv {
        height: 20px;
        line-height: 20px;
    }

    .view_wrap .top .lv_wrap .season {
        height: 20px;
        line-height: 20px;
    }

    .view_wrap .top .lv_wrap .season.two span {
        padding-top: 0.3rem;
    }

    .view_wrap .item_view .pass_area span {
        font-size: 2.3rem;
        width: 74px;
        height: 36px;
        line-height: 34px;
        background-size: 100% auto !important;
    }

    .view_wrap .item_view .pass_area .premium {
        width: 90px;
    }

    .view_wrap .item_view .pass_area span img {
        width: 8px;
        top: -1px;
    }

    .view_wrap .item_view .info_txt {
        font-size: 2.3rem;
    }

    .view_wrap .item_view .info_txt img {
        width: 13px;
    }

    /* random */
    .randombox .rd_con {
        width: 305px;
        height: 202px;
        background-size: 100% auto;
    }

    .randombox .name {
        font-size: 3.6rem;
    }

    .randombox:before {
        width: 315px;
        height: 213px;
    }

    .randombox .rd_box-left {
        width: 128px;
        height: 106px;
        background-size: 100% auto;
        padding-top: 39px;
    }

    .randombox .rd_box-left img {
        top: 1px;
    }

    .randombox .rd_box-right-front {
        width: 128px;
        height: 55px;
        background-size: 100% auto;
        margin-top: -32px;
    }

    .randombox .item {
        font-size: 3.1rem;
    }

    .randombox .rd_box-right-front:after {
        width: 170px;
        height: 202px;
        background-size: 100% auto;
        bottom: -28px;
    }

    .randombox .rd_box-right-front:before {
        width: 184px;
        height: 136px;
        background-size: 100% auto;
        bottom: -5px;
    }

    .randombox .rd_box-left:before {
        width: 170px;
        height: 153px;
        background-size: 100% auto;
        top: 28px;
    }

    .randombox .rd_box:before {
        width: 180px;
        height: 35px;
        background-size: 100% auto;
        bottom: -20px;
    }

    .randombox .item {
        width: 100%;
        padding: 0 2.4rem;
        font-size: 2.3rem;
    }

    .randombox .item img {
        max-width: 100%;
        max-height: 76px;
        display: inline;
    }

    /* prepare */
    .prepare_wrap .desc .tit span {
        font-size: 5.3rem;
    }

    .prepare_wrap .desc .txt {
        font-size: 4rem;
    }

    .prepare_wrap > img {
        width: 330px;
        left: 58%;
    }

    .btns_shop .btn_home {
        font-size: 2.7rem;
    }

    .btn_basic {
        background-size: 100% auto;
        font-size: 3.1rem;
    }

    .btn_basic:before {
        top: 0;
    }

    .btns_shop .btn_like {
        font-size: 3rem;
        height: 7.2rem;
        line-height: 7rem;
        letter-spacing: 0;
    }

    .btns_shop .btn_like:before, .btns_shop .btn_like.on:before, .btns_shop .btn_like:before, .btns_shop .btn_like.on:hover:before, .btns_shop .btn_facebook:before {
        width: 3rem;
        height: 3rem;
        top: -2px;
    }

    .btns_shop .btn_facebook {
        font-size: 2.2rem;
        width: 35.4rem;
        height: 7.6rem;
        line-height: 7.6rem;
    }

    .btns_shop .btn_facebook:hover {
        background-position: 0 0;
    }

    .btns_shop .btn_like.on:hover:before {
        background-position: 0 -3rem;
    }

    /* history */
    .history_wrap .top .date_wrap input[type=text] {
        height: 40px;
        font-size: 2.5rem;
    }

    .history_wrap .top .period li a {
        height: 40px;
        line-height: 40px;
        font-size: 2.5rem;
    }

    .ui-datepicker:before {
        display: none;
    }

    .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
        font-size: 2.5rem;
    }

    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
        font-size: 2.3rem;
    }

    .ui-widget.ui-widget-content {
        width: calc(100% - 7rem);
        box-shadow: 0 10px 30px 10px rgba(0, 0, 0, 0.6);
    }

    .ui-datepicker:after {
        top: 36px;
    }

    .history_wrap .top .date_wrap {
        float: none;
        width: 100%;
        margin-bottom: 4.8rem;
    }

    .history_wrap .top .search_wrap {
        float: none;
        max-width: 100%;
    }

    .history_wrap .top .period {
        display: block;
    }

    .history_wrap .top .period ul {
        width: 100%;
    }

    .history_wrap .top .period li {
        width: calc(100% / 3);
    }

    .history_wrap .top .period li a {
        width: 100%;
    }

    .history_wrap .top .date_wrap .date_select {
        display: block;
        margin-bottom: 2.4rem;
    }

    .history_wrap .top .date_wrap .date_select > div {
        width: 100%;
    }

    .history_wrap .top .date_wrap .date_select > div:last-child {
        margin-right: 0;
    }

    .history_wrap .top .date_wrap .date_select > div:after {
        display: none;
    }

    .history_wrap .top .period button {
        width: 40px;
        height: 40px;
    }

    .history_wrap .top .date_range {
        margin-left: 0;
        display: block;
        margin-top: 2.4rem;
    }

    .history_wrap .top .date_range span {
        width: calc((100% - 4.8rem) / 2);
        font-size: 2.5rem;
        height: 40px;
        line-height: 40px;
        margin-right: 4.8rem;
    }

    /* wish */
    .wish_wrap .item_wrap .item_list .desc {
        height: 110px;
    }

    .wish_wrap .item_wrap .btn_delete {
        font-size: 2.2rem;
        width: 80px;
        height: 24px;
        line-height: 22px;
    }

    .all_check .check input[type=checkbox] + label {
        font-size: 2.5rem;
    }

    .all_check .btn_delete {
        font-size: 2.5rem;
    }

    .wish_wrap .item_wrap .item_list .desc .name {
        -webkit-line-clamp: 1;
    }

    .wish_wrap .item_wrap .state {
        height: 20px;
    }

    /* cart */
    .cart_wrap .item_wrap .row_list .item {
        width: 120px;
        height: 120px !important;
    }

    .cart_wrap .item_wrap .row_list .desc {
        height: 120px;
        width: calc(100% - 120px);
    }

    .item_wrap .item_list .etc .btns a {
        font-size: 2.2rem;
        width: 70px;
    }

    .item_wrap .item_list .etc .btns .btn_order {
        height: 40px;
        line-height: 40px;
    }

    .item_wrap .item_list .etc .btns .btn_delete {
        height: 40px;
        line-height: 40px;
        margin-left: 0;
    }

    .item_wrap .item_list .etc .unit {
        margin-right: 0;
    }

    .item_wrap .item_list .etc .unit a {
        width: 40px;
        font-size: 2.5rem;
    }

    .item_wrap .item_list .etc .unit .txt {
        font-size: 2.5rem;
        padding: 0 0.6rem;
    }

    .item_wrap .item_list .etc .unit * {
        height: 40px;
        line-height: 40px;
    }

    .total_all .total .num {
        font-size: 2.9rem;
    }

    .total_all .total .price {
        font-size: 5.1rem;
    }

    .total_all .total .price img {
        width: 17px;
    }

    .total_all .btn_basic {
        background-size: 100% auto;
        font-size: 2.7rem;
    }

    .cart_wrap .item_wrap .item_list .etc .explan {
        height: 40px;
        line-height: 40px;
        width: calc(100% - 77px);
        margin-right: 1.2rem;
        padding: 0 1.2rem;
    }

    .cart_wrap .item_wrap .item_list .etc .explan:before {
        width: 16px;
        height: 16px;
        background-size: 100% auto;
    }

    .cart_wrap .item_wrap .item_list .soldout .txt {
        height: 40px;
        line-height: 40px;
    }

    /* purchase */
    .cart_wrap .purchase_wrap .cash_wrap li {
        font-size: 2.3rem;
    }

    .cart_wrap .purchase_wrap .cash_wrap li .price {
        font-size: 3.7rem;
    }

    .cart_wrap .purchase_wrap .cash_wrap li .price img {
        width: 17px;
        top: -1px;
    }

    .cart_wrap .purchase_wrap .complete {
        font-size: 2.5rem;
    }

    .pop_random .top {
        padding-left: 0;
        padding-right: 20rem;
        height: auto;
    }

    .pop_random .top .name {
        font-size: 3.2rem;
        text-align: left;
    }

    .pop_random .top .num {
        font-size: 4.3rem;
        right: 0;
    }

    .pop_random .btn_skip {
        font-size: 2.3rem;
        width: 56px;
        height: 28px;
        line-height: 29px;
    }

    .pop_random .top .btn_skip {
        display: none;
    }

    .pop_random > .btn_skip {
        display: block;
        top: 5.2rem;
        left: 5.2rem;
    }

    .pop_random .pop-layout {
        max-width: 317px;
        text-align: center;
    }

    .pop_random .btn_rd {
        position: static;
        font-size: 3.3rem;
        margin-top: 3.6rem;
        margin-left: auto;
        margin-right: auto;
        font-weight: 500;
    }

    .pop_random .btn_next:after {
        background-size: 100% auto;
    }

    .pop_random .randombox {
        height: auto;
    }

    .item_wrap .rd_list ul {
        text-align: left !important;
    }

    .item_wrap .rd_list ul span {
        font-size: 2.1rem;
    }

    .item_wrap .rd_list ul li {
        width: 92px;
    }

    .item_wrap .rd_list ul .rd_item {
        height: 92px;
    }

    .history_wrap .item_wrap .item_list .btn_rdl {
        bottom: 4.5rem;
    }

    /* error */
    .error_wrap .desc .tit span {
        font-size: 20rem;
    }

    .error_wrap .desc .txt {
        font-size: 4.3rem
    }

    /* maintenance */
    .maintenance .bi_pb img {
        height: 36px;
    }

    .maintenance .info .tit:before, .maintenance .info .tit:before {
        background-size: 100% auto;
    }

    .maintenance .info .tit {
        font-size: 3.8rem;
    }

    .maintenance .info .txt {
        font-size: 2.8rem;
    }

    .maintenance .sns .name {
        font-size: 2.3rem;
    }

    .maintenance .sns li a:before {
        background-size: auto 17px;
    }

    /* field */
    .info_area {
        background: url(../../images/common/webshop/bg_info_m.png) center center no-repeat;
        background-size: 100% 100%;
        height: 9.6rem;
    }

    .info_area:before, .info_area:after {
        background-size: 100% auto;
    }

    .info_area li {
        font-size: 2.6rem;
        line-height: 9.6rem;
    }

    .info_area:before, .info_area:after {
        margin-top: -1.6rem;
    }

    .info_area marquee {
        width: calc(100% - 72px);
        font-size: 2.7rem;
        line-height: 9.2rem;
        letter-spacing: 0.02em;
    }

    /* gold */
    .gold_area {
        background: url(../../images/common/webshop/bg_gold_top_m.png) center center no-repeat;
        background-size: 100% 100%;
        padding: 2.7rem 0;
    }

    .gold_area span {
        font-size: 4.2rem;
    }

    .gold_area img {
        width: 3.2rem;
        position: relative;
        top: -2px;
    }

    /* coupon */
    .coupon_wrap .tab ul li a {
        height: 36px;
        font-size: 2.3rem;
    }

    .coupon_wrap .tab_box .list .tit {
        font-size: 1.9rem;
        color: #000;
        left: 0;
    }

    .coupon_wrap .tab_box .list .tit span {
        background: none !important;
        -webkit-text-fill-color: #000 !important;
    }

    .coupon_wrap .tab_box .list .info .name {
        font-size: 3rem;
        padding-right: 9.4rem;
    }

    .coupon_wrap .tab_box .list .info .txt {
        font-size: 2.3rem;
    }

    .coupon_wrap .tab_box .list .bot.pd {
        padding-right: 10rem;
    }

    .coupon_wrap .tab_box .list .bot .date {
        font-size: 2.3rem;
    }

    .coupon_wrap .tab_box .list .info .sort {
        font-size: 3.1rem;
        width: 45px;
        height: 45px;
        top: 14px;
    }

    .coupon_wrap .tab_box .list .info .sort span {
        font-size: 1.5rem;
    }

    .coupon_wrap .tab_box .list .img {
        margin-left: 1.2rem;
        margin-right: 1.2rem;
    }

    .coupon_wrap .tab_box .list .desc {
        width: calc(100% - 19.2rem);
        padding: 0 2.4rem;
    }

    .coupon_wrap .tab_box .list .info {
        min-height: 72px;
        padding: 1.8rem 0 1.6rem;
    }

    .coupon_wrap .tab_box .list .con {
        padding-left: 2.2rem;
    }

    .coupon_wrap .tab_box .list .con:before {
        right: -0.5rem;
    }

    .coupon_wrap .tab_box .list li:before {
        width: 2.4rem;
    }

    .coupon_wrap .tab_box .list li.cash .info .sort {
        font-size: 2.5rem;
    }

    .coupon_wrap .total_all .note .tit {
        font-size: 2.6rem;
    }

    .coupon_wrap .total_all .note .txt {
        font-size: 2.3rem;
    }

    .coupon_wrap .tab_box .list .bot .date span {
        font-size: 2rem;
        height: 17px;
        line-height: 16px;
    }

    .coupon_wrap .tab_box .list .bot .lv_wrap .lv {
        height: 18px;
        line-height: 18px;
    }

    .coupon_wrap .tab_box .list li.used .bot.pd {
        padding-right: 10rem;
    }

    .coupon_select .sel_on {
        font-size: 2.5rem;
        padding: 2rem 7.2rem;
    }

    .coupon_select .ovys li a {
        font-size: 2.3rem;
    }

    .coupon_select .no {
        font-size: 2.5rem;
        padding: 2rem 7.2rem;
    }

    .coupon_wrap .purchase_wrap .cash_wrap li.discount {
        padding-left: 7.2rem;
    }

    .coupon_wrap .purchase_wrap .cash_wrap li.discount .price {
        font-size: 3.1rem;
    }

    /* toast message */
    .toast_msg {
        bottom: 12rem;
    }

    .toast_msg li {
        font-size: 2.5rem;
    }

    .toast_msg li:before {
        background-size: 3rem auto !important;
    }

    @keyframes rd_bg {
        from {
            background-position: 50% 0;
        }

        to {
            background-position: 50% -1212px;
        }
    }

    /* token */
    .token_area .token_img img {
        width: 96px;
    }

    .token_area .token_img:before {
        background-size: 252px;
    }

    .token_area .token_cont {
        margin-top: 2.4rem;
        display: block;
    }

    .token_area .token_cont .tit {
        margin-bottom: 4.8rem;
        font-size: 16px;
        text-align: center;
    }

    .token_area .token_cont .tit p {
        padding-left: 0;
        background: none;
    }

    .token_area .token_cont .search_wrap .search_area {
        width: 100%;
    }

    .token_area .token_cont .search_wrap .search_area input[type=text] {
        height: 100%;
    }

    .token_area .token_my:after {
        display: none;
    }

    .token_area .token_my font {
        font-size: 12.5px;
        left: 18px;
    }

    .token_area .token_my span {
        font-size: 4.2rem;
    }

    .token_area .token_my img {
        width: 3.6rem;
    }

    /* token : pbic2025 */
    .token_wrap_pbic2025 .token_area .token_img {
        height: 94px;
    }

    @keyframes ani_logo {
        0% {
            height: 0;
        }

        100% {
            height: 94px;
        }
    }

    .token_wrap_pbic2025 .token_area .token_my font {
        left: 60px;
        display: none;
    }

    .token_wrap_pbic2025 .token_area .token_cont .tit {
        padding-left: 0;
        font-size: 16.5px;
    }

    .token_wrap_pbic2025 .token_area .token_cont .tit:before {
        display: none;
    }

    .token_wrap_pbic2025 .token_area .token_cont .search_wrap:before {
        width: 90px;
        height: 5px;
        background-size: 100%;
        top: -6px;
    }

    .token_wrap_pbic2025 .token_area .token_my:before {
        width: 78px;
        height: 9px;
        background-size: 100%;
        top: -6px;
        left: 15%;
    }

    .token_wrap_pbic2025 .token_area .token_my > p {
        background-size: 48px;
    }

    .token_wrap_pbic2025 .item_wrap .item_list .img:before {
        width: 39px;
        height: 5px;
        margin-left: -18px;
        background-size: 100%;
    }

    .token_wrap_pbic2025 .item_wrap .item_list .img:after {
        background-size: 15px;
    }

    /* token star ticket */
    .token_star_ticket .item_wrap .item_list .desc .price img {
        width: 20px;
    }

    .token_star_ticket .token_area .token_my img {
        width: 5.6rem;
        position: relative;
        top: -2px;
    }

    .token_star_ticket .token_area .token_img img {
        width: 146px;
    }

    .token_star_ticket .token_area .token_cont .tit {
        display: inline-block;
        font-size: 3.9rem;
    }

    .token_star_ticket .token_area .token_cont .tit:before {
        top: -1px;
    }

    /* token : pbic 2026*/
    .sub_contents .token_pbic2026 {
        padding-top: 100px;
    }

    .token_pbic2026 .token_area .token_cont .tit {
        display: inline-block;
        font-size: 2.9rem;
        margin-bottom: 0;
    }

    .token_pbic2026 .token_area .token_img {
        margin-bottom: 0;
    }

    .token_pbic2026 .token_area .token_img img {
        width: 164px;
    }

    .token_pbic2026 .token_area .token_cont .tit:after {
        bottom: -1px;
    }

    .token_pbic2026 .token_area .token_my {
        margin-top: 3rem;
    }

    .token_pbic2026 .token_area .token_my > p {
        padding-right: 2.4rem;
    }

    .token_pbic2026 .cha_wrap {
        right: -14rem;
    }

    .token_pbic2026 .cha_wrap .cha {
        width: 270px;
    }

    .token_pbic2026 .item_wrap .item_list .info li {
        padding-top: 4px;
    }

    /* goods */
    .sub_contents .goods_wrap {
        background-size: 220% auto;
    }

    .goods_wrap .goods_area .goods_img img {
        max-width: 96px;
    }

    .goods_wrap .goods_area .my_info .coin {
        font-size: 4.2rem;
    }

    .goods_wrap .goods_area .my_info .tit {
        font-size: 3.8rem;
        top: -18rem;
    }

    .goods_wrap .goods_area .my_info .con img {
        width: 3.6rem;
    }

    .goods_wrap .goods_area .goods_img .bullet01 {
        left: -50%;
    }

    .goods_wrap .goods_area .goods_img .bullet02 {
        left: -110%;
    }

    .goods_wrap .goods_area .goods_img .bullet03 {
        right: -40%;
    }

    /*********************** ie_ingame ********************************/
    #head.mp .user_area .cash a {
        padding-right: 0;
        padding-bottom: 3px;
    }

    #container {
        padding-top: 60px;
    }

    .sub_contents {
        padding-top: 60px;
    }

    .btn_home {
        width: 40px;
        height: 40px;
        font-size: 2rem;
        padding-top: 7px;
    }

    .item_wrap .item_list .desc {
        height: 60px;
        padding-bottom: 0;
    }

    .item_wrap .item_list .soldout .txt {
        height: 24px;
        line-height: 24px;
    }

    .item_wrap .item_list .sale {
        width: 7.2rem;
        height: 7.2rem;
    }

    .item_wrap .item_list .con .lock.out {
        left: auto;
        right: 1.2rem;
        bottom: 60px;
    }

    .item_wrap .item_list .con:hover .lock {
        left: auto;
        right: 1.2rem;
        bottom: 60px;
    }

    .item_wrap .item_list .pass .info {
        margin-top: 24px;
    }

    .item_wrap .item_list.row_list .desc {
        height: 120px;
    }

    .wish_wrap .item_wrap .item_list .desc {
        height: 86px;
    }

    .field_wrap .item_wrap .item_list .sale:before {
        width: 8rem;
        height: 8rem;
        margin-top: -4rem;
        margin-left: -4rem;
    }

    .lv_wrap {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .lv_wrap .lv + .season {
        padding: 0 1rem;
    }
}

@media screen and (max-width: 500px) {
    .sub_contents .token_wrap .item_wrap .item_list > li {
        width:50%;
    }

    .sub_contents .token_wrap .item_wrap .item_list .sale {
        bottom: 1rem;
        left: 1rem;
    }

    .sub_contents .token_wrap .inner {
        margin-left: 3.6rem;
        margin-right: 3.6rem;
    }
}

@media screen and (max-width: 350px) {
    #head .top .user_area {
        max-width: 192px;
    }

    #head .top .user_area .uesr {
        padding-right: 1.6rem;
    }

    .inner {
        margin-left: 2.4rem;
        margin-right: 2.4rem;
    }

    .cart_wrap .item_wrap .item_list .etc .explan {
        font-size: 2rem;
    }

    .randombox .rd_box {
        margin-top: 6.8rem;
    }

    .randombox .rd_con {
        width: 270px;
        background-size: 100% 1212px;
    }

    .ui-widget.ui-widget-content {
        width: calc(100% - 4.8rem);
    }

    .token_pbic2026 .token_area .token_cont {
        bottom: 2rem;
    }

    .token_pbic2026 .token_area .token_cont .tit {
        font-size: 2.4rem;
    }

    .token_pbic2026 .token_area .token_my span {
        font-size: 3rem;
    }
}

@keyframes initialShake {
    25% {
        transform: rotate(4deg);
    }

    75% {
        transform: rotate(-2deg);
    }
}

@keyframes leftSplit {
    0% {
        transform: translate3d(0, 0, 0);
    }

    15% {
        transform: translate3d(0, -1rem, 0);
    }

    80% {
        transform: translate3d(0, -7.5rem, 0);
    }

    100% {
        transform: translate3d(0, -5rem, 0);
    }
}

@keyframes rightSplit {
    0% {
        transform: translate3d(0%, 0, 0);
    }

    15% {
        transform: translate3d(0%, 0, 0);
    }

    80% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes titlePop {
    0% {
        transform: translate(-50%, 0) scale(.4);
    }

    20% {
        transform: translate(-50%, 0) scale(0.9);
    }

    40% {
        transform: translate(-50%, 0) scale(1.15);
    }

    60% {
        transform: translate(-50%, 0) scale(0.9);
    }

    80% {
        transform: translate(-50%, 0) scale(1.05);
    }

    100% {
        transform: translate(-50%, 0) scale(1);
    }
}

@keyframes opc {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes open {
    from, 50%, to {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

@keyframes fad {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes heartbeat {
    to {
        transform: scale(1.05);
    }
}

@keyframes aim {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(160deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(160deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes bg-move {
    0% {
        background-size: auto 150%;
    }

    to {
        background-size: auto 100%;
    }
}

@keyframes opaque {
    0% {
        opacity: 0.1;
    }

    40% {
        opacity: 1;
    }

    80% {
        opacity: 0.1;
    }

    100% {
        opacity: 0.1;
    }
}

@keyframes shadowPulse01 {
    22% {
        background: #fff;
    }

    44% {
        background: #fe0;
    }

    66% {
        background: #f00;
    }

    88% {
        background: #8cf;
    }

    100% {
        background: #fff;
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        opacity: 0;
    }

    10% {
        opacity: .50;
        transform-origin: 50% 50%;
        transform: rotate(-2deg) scale(5);
        transition: all .3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
    }

    100% {
        opacity: 1;
        transform: rotate(-15deg) scale(1);
    }
}

@keyframes twinkle_one {
    0% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes float {
    0% {
        opacity: 1;
    }

    50% {
        transform: translate(0, 2%);
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes bounce-in-fwd {
    0% {
        transform: scale(0);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        transform: scale(1);
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        transform: scale(0.7);
        animation-timing-function: ease-in;
    }

    72% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }

    81% {
        transform: scale(0.84);
        animation-timing-function: ease-in;
    }

    89% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }

    95% {
        transform: scale(0.95);
        animation-timing-function: ease-in;
    }

    100% {
        transform: scale(1);
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

@keyframes slide-in-bck-tr {
    0% {
        transform: translateZ(700px) translateY(-300px) translateX(400px) scale(0);
        opacity: 0;
        filter: blur(40px);
    }

    100% {
        transform: translateZ(0) translateY(0) translateX(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes fadeAnimation01 {
    50% {
        transform: translateY(-10px);
        opacity: 1;
    }
}