@charset "UTF-8"; .r_mp {
    margin: 0;
    padding: 0
}

.r_li {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.full {
    width: 100%;
    height: 100%;
    box-sizing: border-box
}

.fullWidth {
    width: 100%
}

.center {
    text-align: center
}

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-flex-align: center
}

.block {
    display: block
}

.i_block {
    display: inline-block;
    vertical-align: middle
}

.hidden {
    overflow: hidden
}

.clear {
    display: block;
    content: '';
    height: 0;
    font-size: 0;
    opacity: 0;
    clear: both
}

.container:after {
    display: block;
    content: '';
    height: 0;
    font-size: 0;
    opacity: 0;
    clear: both
}

.container {
    background: #f8f8f8
}

.container.package {
    background: #fff
}

.content {
    position: relative
}

.container.package .content:before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 150px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ebebeb), color-stop(1, #fff));
    background: -moz-linear-gradient(top, #ebebeb 0, #fff 100%);
    background: -webkit-linear-gradient(top, #ebebeb 0, #fff 100%);
    background: linear-gradient(top, #ebebeb 0, #fff 100%)
}

.top_visual_title {
    padding-top: 48px;
    font-size: 48px;
    color: #e9eaeb;
    text-align: center;
    line-height: 1
}

.h2_desc {
    display: block;
    margin-top: 18px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: normal;
    text-align: center;
    line-height: 1.47
}

.top_package_visual {
    height: 795px;
    box-sizing: border-box;
    background: url(../../images/payment/pay_package_visual_top.png?v=4) 50% 0 no-repeat;
    background-size: cover;
    padding-top: 80px
}

.package_wrap {
    position: relative;
    padding-top: 1px
}

.package_wrap:after {
    display: block;
    content: '';
    height: 0;
    font-size: 0;
    opacity: 0;
    clear: both
}

.package_wrap.bg_warrior {
    background: url(../../images/payment/package_detial.png?v=4) right bottom no-repeat
}

.package_wrap > .inner {
    margin-top: -535px
}

.package_list {
    max-width: 1300px;
    margin: 0 auto
}

.package_list > ul {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto
}

.package_list > ul > li {
    position: relative;
    width: 312px
}

.package_list > ul > li > div {
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.3)
}

.package_list > ul > li:after {
    display: block;
    content: "";
    width: 100%;
    height: calc(100% - 15px);
    position: absolute;
    top: 15px;
    left: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#fcfcfc));
    background-image: -webkit-linear-gradient(top, #f6f6f6, #fcfcfc);
    background-image: linear-gradient(top, #f6f6f6, #fcfcfc);
    background-color: #f6f6f6
}

.package_list > ul > li:first-child {
    margin-left: 0
}

.package_list > ul > li .package {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    padding-bottom: 80px;
    box-sizing: border-box
}

.package_list > ul > li .package .img_sale {
    display: block;
    background: url(../../images/payment/ico_sale.png?v=4) center 0 no-repeat;
    width: 68px;
    height: 68px;
    position: absolute;
    left: -1px;
    top: 0;
    z-index: 1
}

.package_list > ul > li .package .top_info_pack {
    position: relative;
    height: 240px;
    box-sizing: border-box;
    padding-top: 13px;
    background: url(../../images/payment/package_item_spr.png?v=4) no-repeat;
    background-size: 1300px 240px;
    transition: 0.3s
}

.package_list > ul > li .package.essential .top_info_pack {
    background-position: 0 0
}

.package_list > ul > li .package.limited .top_info_pack {
    background-position: -328px 0
}

.package_list > ul > li .package.prime .top_info_pack {
    background-position: -657px 0
}

.package_list > ul > li .package.legendary .top_info_pack {
    background-position: -985px 0
}

.package_list > ul > li .package .top_info_pack strong.title {
    display: block;
    height: 60px;
    box-sizing: border-box;
    color: #f2ede9;
    font-size: 20px;
    text-align: center;
    line-height: 60px;
    font-weight: normal
}

.package_list > ul > li .package .top_info_pack .item_package {
    position: relative;
    padding: 45px 0 0 165px
}

.package_list > ul > li .package .top_info_pack .item_package .price {
    position: relative;
    text-align: center
}

.package_list > ul > li .package .top_info_pack .item_package .price .sale {
    position: absolute;
    top: -32px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 21px;
    color: #fff
}

.package_list > ul > li .package .top_info_pack .item_package .price .sale:before {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 12px;
    margin-top: 6px;
    background: url(../../images/payment/package_sale_price_spr.png?v=4) no-repeat
}

.package_list > ul > li .package .top_info_pack .item_package .price span {
    font-size: 35px;
    color: #f2ede9;
    font-weight: bold;
    line-height: 1;
    letter-spacing: -0.06rem;
    text-shadow: 0 2px 0 #000
}

.package_list > ul > li .package .top_info_pack .item_package .price em {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    color: #cec5bd;
    font-weight: normal;
    margin-left: 5px;
    white-space: nowrap
}

.package_list > ul > li .package .top_info_pack .item_package .btn_buy {
    position: relative;
    display: block;
    width: 120px;
    height: 38px;
    box-sizing: border-box;
    line-height: 38px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    font-weight: normal;
    margin: 10px auto 0;
    overflow: hidden
}

.package_list > ul > li .package.legendary .top_info_pack .item_package .price .sale,.package_list > ul > li .package.legendary .top_info_pack .item_package .price .sale em {
    color: #958374
}

.package_list > ul > li .package.prime .top_info_pack .item_package .price .sale,.package_list > ul > li .package.prime .top_info_pack .item_package .price .sale em {
    color: #815150
}

.package_list > ul > li .package.limited .top_info_pack .item_package .price .sale,.package_list > ul > li .package.limited .top_info_pack .item_package .price .sale em {
    color: #616881
}

.package_list > ul > li .package.essential .top_info_pack .item_package .price .sale,.package_list > ul > li .package.essential .top_info_pack .item_package .price .sale em {
    color: #727272
}

.package_list > ul > li .package.legendary .top_info_pack .item_package .price .sale:before {
    background-position: 0 0
}

.package_list > ul > li .package.prime .top_info_pack .item_package .price .sale:before {
    background-position: 0 -29px
}

.package_list > ul > li .package.limited .top_info_pack .item_package .price .sale:before {
    background-position: 0 -58px
}

.package_list > ul > li .package.essential .top_info_pack .item_package .price .sale:before {
    background-position: 0 -87px
}

.package_list > ul > li .package.essential .top_info_pack .item_package .btn_buy {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#828282), to(#525252));
    background-image: -webkit-linear-gradient(top, #828282, #525252);
    background-image: -moz-linear-gradient(top, #828282, #525252);
    background-image: linear-gradient(top, #828282, #525252);
    background-color: #828282
}

.package_list > ul > li .package.essential .top_info_pack .item_package .btn_buy:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    box-sizing: border-box;
    background: #a8a8a8
}

.package_list > ul > li .package.limited .top_info_pack .item_package .btn_buy {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#646f9b), to(#495174));
    background-image: -webkit-linear-gradient(top, #646f9b, #495174);
    background-image: -moz-linear-gradient(top, #646f9b, #495174);
    background-image: linear-gradient(top, #646f9b, #495174);
    background-color: #646f9b
}

.package_list > ul > li .package.limited .top_info_pack .item_package .btn_buy:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    box-sizing: border-box;
    background: #9397b6
}

.package_list > ul > li .package.prime .top_info_pack .item_package .btn_buy {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#9e4d4d), to(#743530));
    background-image: -webkit-linear-gradient(top, #9e4d4d, #743530);
    background-image: -moz-linear-gradient(top, #9e4d4d, #743530);
    background-image: linear-gradient(top, #9e4d4d, #743530);
    background-color: #9e4d4d
}

.package_list > ul > li .package.prime .top_info_pack .item_package .btn_buy:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    box-sizing: border-box;
    background: #cc6962
}

.package_list > ul > li .package.legendary .top_info_pack .item_package .btn_buy {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#a78569), to(#80624a));
    background-image: -webkit-linear-gradient(top, #a78569, #80624a);
    background-image: -moz-linear-gradient(top, #a78569, #80624a);
    background-image: linear-gradient(top, #a78569, #80624a);
    background-color: #a78569
}

.package_list > ul > li .package.legendary .top_info_pack .item_package .btn_buy:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    box-sizing: border-box;
    background: #d1b286
}

.package_list > ul > li .package .top_info_pack .item_package:before {
    display: block;
    content: "";
    overflow: hidden;
    position: absolute;
    top: 3px;
    left: 22px;
    width: 135px;
    height: 214px;
    box-sizing: border-box;
    background: url(../../images/payment/package_item_box_spr.png?v=4) no-repeat
}

.package_list > ul > li .package.essential .top_info_pack .item_package:before {
    background-position: 0 0
}

.package_list > ul > li .package.limited .top_info_pack .item_package:before {
    background-position: -145px 0
}

.package_list > ul > li .package.prime .top_info_pack .item_package:before {
    background-position: -290px 0
}

.package_list > ul > li .package.legendary .top_info_pack .item_package:before {
    background-position: -435px 0
}

.package_list > ul > li .package .info_item_list {
    box-sizing: border-box
}

.package_list > ul > li .package .info_item_list .inner {
    position: relative;
    min-height: 315px;
    padding: 50px 15px 23px 30px;
    box-sizing: border-box
}

.package_list > ul > li .package .info_item_list ul li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 15px;
    font-size: 14px;
    color: #000;
    font-weight: normal
}

.package_list > ul > li .package .info_item_list ul li:before {
    display: block;
    content: "";
    overflow: hidden;
    position: absolute;
    top: 6px;
    left: 0;
    width: 5px;
    height: 5px;
    box-sizing: border-box;
    background: #6c6c6c;
    border-radius: 1px;
    transform: rotate(45deg)
}

.package_list > ul > li .btn_wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 11;
    width: 100%
}

.package_list > ul > li .btn_wrap .btn_buy {
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    background: #2f313b;
    line-height: 80px;
    color: #fff;
    font-size: 20px;
    transition: 0.3s
}

.package_list > ul > li .btn_wrap .btn_buy span {
    transition: 0.3s
}

.package_list > ul > li .btn_wrap .btn_buy:after {
    display: block;
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 100%;
    height: 1px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.2)
}

.package_list > ul > li .package .info_item_list .btn_more {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box
}

.package_list > ul > li .package .info_item_list .btn_more:before {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: calc(100% - 60px);
    height: 1px;
    box-sizing: border-box;
    background: #cfcfcf
}

.package_list > ul > li .package .info_item_list .btn_more span {
    position: relative;
    z-index: 10;
    display: inline-block;
    vertical-align: middle;
    padding: 4px 25px;
    background: #f6f6f6;
    font-size: 15px
}

.package_list > ul > li .package .info_item_list .btn_more span:after {
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 10px;
    height: 7px;
    box-sizing: border-box;
    margin: 0 0 5px 10px;
    border-top: 7px solid #000;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent
}

.package_detail_wrap {
    position: relative;
    margin-top: 20px;
    padding-bottom: 80px
}

.package_detail_wrap .detail_inner {
    max-width: 1300px;
    margin: 0 auto;
    box-sizing: border-box
}

.on_sale .package_wrap .inner {
    margin-top: -455px
}

.on_sale .sale_bnr_wrap {
    display: flex
}

.sale_bnr_wrap {
    display: none;
    justify-content: center;
    align-items: center;
    height: 80px;
    background: #9b908a url(../../images/payment/package_sale_banner_bg.jpg?v=4) no-repeat center center;
    background-size: auto 100%
}

.sale_bnr_wrap .sale_info {
    display: inline-flex;
    justify-content: center;
    align-items: center
}

.sale_bnr_wrap .sale_title {
    position: relative;
    font-size: 22px;
    color: #261910;
    padding: 0 0 0 55px
}

.sale_bnr_wrap .period {
    display: inline-block;
    font-size: 17px
}

.sale_bnr_wrap .period::before {
    content: ':';
    display: inline-block;
    margin: 0 5px
}

.sale_bnr_wrap .icn_clock {
    display: inline-block;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    top: calc(50% - 20px);
    background: url(../../images/payment/icn_renewal_package_spr.png?v=4) no-repeat -0px -2px/400px 400px
}

#renewal_package_wrap {
    margin: 0 auto;
    box-sizing: border-box
}

#renewal_package_wrap .renewal_package_ul {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto
}

#renewal_package_wrap.quarter .renewal_package_ul {
    max-width: 1260px
}

#renewal_package_wrap.quarter .renewal_package_list {
    max-width: 300px
}

#renewal_package_wrap .renewal_package_list {
    position: relative;
    width: 312px;
    margin-bottom: 40px;
    -webkit-transition: transform 0.15s;
    transition: transform 0.15s
}

#renewal_package_wrap .package_box {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.3)
}

#renewal_package_wrap .package_box.special .package_info_area {
    background: linear-gradient(to bottom, #dadff1, #e3e8f7)
}

#renewal_package_wrap .package_box.special .info_list_wrap ul::before {
    background: linear-gradient(90deg, transparent 0, #b6baca, #b6baca 50%, #b6baca, transparent 100%)
}

#renewal_package_wrap .package_img_area {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 240px;
    position: relative;
    box-sizing: border-box;
    padding: 25px 0 0;
    background: url(../../images/payment/package_item_bg_spr.png?v=4) no-repeat 0 0
}

#renewal_package_wrap .package_img_area .package_img,.pay_package_wrap .box_pay_item .item_img .img_area.package:before {
    display: inline-block;
    height: 208px;
    background: url(../../images/payment/renewal_package_item_spr.png?v=4) no-repeat left top
}

.pay_package_wrap .box_pay_item .item_img .img_area.package:before {
    margin-top: 0.5em
}

#renewal_package_wrap .essential .package_img_area {
    background-position-x: 0
}

#renewal_package_wrap .essential .package_img,.pay_package_wrap .box_pay_item .item_img .img_area.package.essential:before {
    width: 144px;
    background-position-x: 2px
}

#renewal_package_wrap .limited .package_img_area {
    background-position-x: -329px
}

#renewal_package_wrap .limited .package_img,.pay_package_wrap .box_pay_item .item_img .img_area.package.limited:before {
    width: 270px;
    background-position-x: -185px
}

#renewal_package_wrap .prime .package_img_area {
    background-position-x: -658px
}

#renewal_package_wrap .prime .package_img,.pay_package_wrap .box_pay_item .item_img .img_area.package.prime:before {
    width: 288px;
    background-position-x: -490px
}

#renewal_package_wrap .special .package_img_area {
    background-position-x: -985px
}

#renewal_package_wrap .special .package_img,.pay_package_wrap .box_pay_item .item_img .img_area.package.special:before {
    width: 288px;
    background-position-x: -810px
}

#renewal_package_wrap .sale_label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 66px;
    height: 64px;
    font-size: .925rem;
    position: absolute;
    top: 10px;
    right: 10px;
    background: url(../../images/payment/icn_renewal_package_spr.png?v=4) no-repeat -123px -0px/400px 400px
}

#renewal_package_wrap .sale_label em {
    font-size: 1.44rem;
    font-weight: bold;
    letter-spacing: -0.06em
}

#renewal_package_wrap .package_info_area {
    flex: 1 1 auto;
    background: #fff
}

#renewal_package_wrap .package_info_area .btn_wrap {
    padding: 0 15px
}

#renewal_package_wrap .price_info_wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 100%;
    min-height: 150px;
    box-sizing: border-box;
    padding: 20px 15px;
    text-align: center
}

#renewal_package_wrap .renewal_package_ul.now_sale .price_info_wrap {
    min-height: 190px
}

#renewal_package_wrap .price_info_wrap .title {
    font-size: 20px;
    color: #1d1f25;
    font-weight: bold
}

#renewal_package_wrap .price_box {
    margin: 12px 0 0 0;
    text-align: center
}

#renewal_package_wrap .regular_price {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    padding: 3px 8px 0 12px;
    font-size: 20px;
    color: #a7a7a7
}

#renewal_package_wrap .old_price {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    padding: 3px 8px 0 12px;
    font-size: 20px;
    color: #ff0000
}

#renewal_package_wrap .regular_price .icn_line {
    display: inline-block;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    box-sizing: border-box;
    border-top: 1px solid #afafaf
}

#renewal_package_wrap .regular_price .icn_line::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 11px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../../images/payment/icn_renewal_package_spr.png?v=4) no-repeat -0px -54px/400px 400px
}

#renewal_package_wrap .regular_price.no_sale {
    padding: 0
}

#renewal_package_wrap .regular_price.no_sale,#renewal_package_wrap .sale_price {
    font-size: 30px;
    color: #000;
    font-weight: normal
}

#renewal_package_wrap .sale_acoin {
    margin: 4px 0 0;
    font-size: 17px;
    color: #727272
}

#renewal_package_wrap .before_discount {
    margin-top: 12px;
    font-size: 1.2em;
    min-height: 1.5rem;
    color: #6c6b6b
}

#renewal_package_wrap .package_info_area .info_text_wrap {
    display: block;
    min-height: 315px;
    box-sizing: border-box;
    padding: 50px 15px 23px 30px
}

#renewal_package_wrap .btn_buy {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 58px;
    font-size: 18px;
    text-align: center;
    color: #fff
}

#renewal_package_wrap .essential .btn_buy {
    background: #484950
}

#renewal_package_wrap .limited .btn_buy {
    background: #2c3247;
}

#renewal_package_wrap .prime .btn_buy {
    background: #69413e
}

#renewal_package_wrap .special .btn_buy {
    background: linear-gradient(to right, #3c64ac, #3c64ac)
}

#renewal_package_wrap .info_list_wrap {
    box-sizing: border-box;
    padding: 24px 15px 24px
}

#renewal_package_wrap .info_list_wrap ul {
    min-height: 400px;
    position: relative;
    padding: 24px 15px 0 15px
}

#renewal_package_wrap .info_list_wrap ul::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, transparent 0, #d3d3d3, #d3d3d3 50%, #d3d3d3, transparent 100%)
}

#renewal_package_wrap .info_list {
    position: relative;
    padding: 0 0 0 15px;
    font-size: 14px;
    color: #000;
    text-align: left;
    cursor: default
}

#renewal_package_wrap .info_list .info_item {
    padding: 5px 0
}

#renewal_package_wrap .info_list::before {
    display: block;
    content: "";
    overflow: hidden;
    position: absolute;
    top: 10px;
    left: 0;
    width: 5px;
    height: 5px;
    box-sizing: border-box;
    background: #6c6c6c;
    border-radius: 1px;
    transform: rotate(45deg)
}

#renewal_package_wrap .info_list_wrap .box_details {
    display: none;
    position: fixed;
    z-index: 35;
    max-width: 340px;
    margin-right: 10px;
    padding: 20px 15px;
    border: 1px solid #ccc;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.3 );
    opacity: 0
}

#renewal_package_wrap .info_list_wrap .box_details.on {
    display: block;
    animation: boxToolTip .2s ease both
}

#renewal_package_wrap .info_list_wrap .box_details .contents_img {
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
    background: #f3f3f3
}

#renewal_package_wrap .info_list_wrap .box_details .contents_img img {
    width: 100%
}

#renewal_package_wrap .info_list_wrap .box_details .contents_name {
    color: #000;
    margin-bottom: 8px;
    font-size: 16px
}

#renewal_package_wrap .info_list_wrap .box_details .contents_type {
    color: #666;
    line-height: 1.7
}

.box_prouct_info {
    padding: 40px;
    line-height: 1.42;
    background: 0 0;
    box-sizing: border-box
}

.box_prouct_info b,.box_prouct_info strong {
    font-weight: bold
}

.box_prouct_info p {
    line-height: 1.6;
    text-indent: -0.7em;
    padding-left: 0.8em
}

.box_prouct_info dl dt {
    margin: 35px 0 15px;
    font-size: 16px;
    color: #251306;
    font-weight: normal
}

.box_prouct_info dl dt:first-child {
    margin-top: 0
}

.box_prouct_info ul.bullet_list li:before {
    transform: rotate(45deg)
}

.top_pay_select_visual {
    height: 468px;
    box-sizing: border-box;
    padding-top: 80px;
    background: url(../../images/payment/payment_top_visual_bg.jpg) 50% 50% no-repeat;
    background-size: cover
}

.top_pay_select_visual h2 {
    padding-top: 64px
}

.top_pay_select_visual:after {
    display: block;
    content: '';
    height: 0;
    font-size: 0;
    opacity: 0;
    clear: both
}

.payment_wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 1px;
    padding-bottom: 80px
}

.payment_wrap > .inner {
    margin-top: -210px
}

.payment_wrap .btn_wrap {
    margin-top: 50px
}

.payment_wrap .btn_wrap .btn + .btn {
    margin-left: 40px
}

.box_payment {
    position: relative;
    background: #fff;
    padding: 72px 40px;
    min-height: 510px;
    box-sizing: border-box;
    z-index: 1;
    overflow-y: auto
}

.payment_wrap .box_pay_tit {
    text-align: center;
    margin-bottom: 30px
}

.payment_wrap .box_pay_tit h3 {
    display: inline-block;
    font-size: 1.15rem;
    vertical-align: middle
}

.payment_wrap .box_pay_tit h3.mark_complete {
    padding-left: 33px;
    position: relative
}

.payment_wrap .box_pay_tit h3.mark_complete:before {
    display: block;
    content: '';
    width: 21px;
    height: 21px;
    border: 1px solid #737582;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1
}

.payment_wrap .box_pay_tit h3.mark_complete:after {
    display: block;
    content: "";
    position: absolute;
    top: -2px;
    left: 10px;
    width: 8px;
    height: 20px;
    box-sizing: border-box;
    border-right: 3px solid #2f313b;
    border-bottom: 3px solid #2f313b;
    background: 0 0;
    transform: rotate(45deg) skewX(0);
    z-index: 2
}

.payment_wrap .agree_wrap {
    margin: 2rem 0 0;
    background: #fff
}

.pay_select_wrap {
    max-width: 1020px;
    margin: 0 auto
}

.pay_select_list {
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.pay_select_list.center {
    -webkit-justify-content: center;
    justify-content: center
}

.pay_select_list:after {
    display: block;
    content: '';
    height: 0;
    font-size: 0;
    opacity: 0;
    clear: both
}

.pay_select_list li {
    float: left;
    flex: 0 0 33.33%;
    box-sizing: border-box
}

.pay_select_list li .custom_radio {
    display: block
}

.pay_select_list .custom_radio input[type="radio"] + label:after,.pay_select_list .custom_radio input[type="radio"] + label:before {
    left: 25px
}

.pay_select_list li.blank_item {
    display: none
}

.pay_select_list li .custom_radio label,.pay_select_list li.blank_item .custom_radio {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 60px;
    line-height: 1.4;
    padding: 0 25px 0 50px;
    text-align: left
}

.pay_select_list li .custom_radio label {
    border: 1px solid #e0e0e0;
    border-bottom-color: transparent;
    border-left-color: transparent;
    box-sizing: border-box
}

.pay_select_list li:nth-of-type(3n-2) .custom_radio label {
    border-left-color: #e0e0e0
}

.pay_select_list li:nth-last-of-type(-n+4) .custom_radio label {
    border-bottom: 1px solid #e0e0e0
}

.pay_select_list li .icon_pg {
    display: flex;
    align-items: center;
    max-width: 2.8rem;
    margin-right: .3rem;
    border: none
}

.pay_select_list li .icon_pg img {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.pay_select_list li .custom_radio input[type="radio"]:checked + label {
    border-color: #313131;
    position: relative;
    z-index: 2;
    background: #f2f2f2
}

.pay_item_wrap h4 {
    font-size: 18px;
    color: #000;
    font-weight: bold;
    margin-bottom: 13px
}

.box_pay_item {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -o-flex;
    display: flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -o-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-flex-align: center;
    border: 1px solid #e0e0e0;
    justify-content: flex-start
}

.box_pay_item .item_img,.box_pay_item .item_img .img_area.package {
    padding: 25px
}

.box_pay_item .item_img .img_area {
    width: 270px;
    height: 220px;
    box-sizing: border-box;
    position: relative
}

.box_pay_item .item_img .img_area.package {
    background: linear-gradient(to bottom, #332b24, #7e6958)
}

.box_pay_item .item_img .img_area.package.legendary {
    background: linear-gradient(to bottom, #332b24, #7e6958)
}

.box_pay_item .item_img .img_area.package.prime {
    background: linear-gradient(to bottom, #3e2926, #974945)
}

.box_pay_item .item_img .img_area.package.limited {
    background: linear-gradient(to bottom, #2b2625, #a7896b)
}

.box_pay_item .item_img .img_area.package.essential {
    background: linear-gradient(to bottom, #2e3035, #6d6d6d)
}

.box_pay_item .item_img .img_area.package.special {
    background: linear-gradient(to bottom, #2a2e3d, #5567a9)
}

.sale_with_default_big .default_pc {
    background: url(../../images/payment/webpackage_PC_naeu.jpg) no-repeat center center/310px 210px!important
}

.sale_with_default_big .default_m {
    background: url(../../images/payment/webpackage_M_naeu.jpg) no-repeat center center/12.5rem 100%!important
}

.sale_with_default .default_pc {
    background: url(../../images/payment/webpackage_PC_naeu.jpg) no-repeat center center/270px 220px!important
}

.sale_with_default .default_m {
    background: url(../../images/payment/webpackage_PC_naeu.jpg) no-repeat center center/11.66rem 12.5rem!important
}

.pay_package_wrap .box_pay_item .item_img .img_area {
    width: 312px;
    height: 240px
}

.box_nickname {
    width: 600px;
    margin: 0 auto
}

.box_pay_item .item_img .img_area:before {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 270px;
    height: 220px
}

.pay_acoin_wrap .box_pay_item .item_img .img_area:before {
    background: url(../../images/payment/payment_acoin_list_spr.png?v=4) no-repeat;
    background-size: 1110px 450px
}

.pay_acoin_wrap .box_pay_item .item_img .img_area.coin5000:before {
    background-position: 0 0
}

.pay_acoin_wrap .box_pay_item .item_img .img_area.coin10000:before {
    background-position: -280px 0
}

.pay_acoin_wrap .box_pay_item .item_img .img_area.coin20000:before {
    background-position: -560px 0
}

.pay_acoin_wrap .box_pay_item .item_img .img_area.coin30000:before {
    background-position: -840px 0
}

.pay_acoin_wrap .box_pay_item .item_img .img_area.coin40000:before {
    background-position: 0 -230px
}

.pay_acoin_wrap .box_pay_item .item_img .img_area.coin50000:before {
    background-position: -280px -230px
}

.pay_acoin_wrap .box_pay_item .item_img .img_area.coin70000:before {
    background-position: -560px -230px
}

.pay_acoin_wrap .box_pay_item .item_img .img_area.coin100000:before {
    background-position: -840px -230px
}

.pay_pearl_wrap .box_pay_item .item_img .img_area:before {
    background: url(../../images/payment/payment_pearl_item_box_spr.png?v=4) no-repeat;
    background-size: 1110px 450px
}

.pay_pearl_wrap .box_pay_item .item_img .img_area.img_mode::before {
    display: none
}

.pay_pearl_wrap .box_pay_item .item_img .img_area.pearl_16:before {
    background-position: 0 0
}

.pay_pearl_wrap .box_pay_item .item_img .img_area.pearl_32:before {
    background-position: -280px 0
}

.pay_pearl_wrap .box_pay_item .item_img .img_area.pearl_80:before {
    background-position: -560px 0
}

.pay_pearl_wrap .box_pay_item .item_img .img_area.pearl_165:before {
    background-position: -840px 0
}

.pay_pearl_wrap .box_pay_item .item_img .img_area.pearl_340:before {
    background-position: 0 -230px
}

.pay_pearl_wrap .box_pay_item .item_img .img_area.pearl_860:before {
    background-position: -280px -230px
}

.pay_pearl_wrap .box_pay_item .item_img .img_area.pearl_1760:before {
    background-position: -560px -230px
}

.box_pay_item .item_img .img_area.package:before {
    background: url(../../images/payment/renewal_payment_package_item_box_spr_naeu.jpg?v=4) no-repeat;
    background-size: 1110px 220px
}

.box_pay_item .item_img .img_area.package.legendary:before {
    background-position: 0 0
}

.box_pay_item .item_img .img_area.package.prime:before {
    background-position: -280px 0
}

.box_pay_item .item_img .img_area.package.limited:before {
    background-position: -560px 0
}

.box_pay_item .item_img .img_area.package.essential:before {
    background-position: -840px 0
}

.box_pay_item .item_img img {
    width: 100%
}

.box_pay_item .item_info {
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-flex-align: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 25px;
    flex: 1
}

.box_pay_item .item_info ul {
    width: 100%
}

.box_pay_item .item_info li {
    font-size: 17px;
    color: #3d3d3d;
    font-weight: normal;
    margin: 20px 0
}

.box_pay_item .item_info li:first-child {
    margin-top: 0
}

.box_pay_item .item_info li:last-child {
    margin-bottom: 0
}

.box_pay_item .item_info li span {
    color: #000;
    font-weight: bold
}

.box_pay_item .item_info li span b {
    font-weight: normal
}

.box_pay_item .item_info .my_acoin {
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-flex-align: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 25px;
    padding: 35px 21px 0;
    border-top: 1px solid #e0e0e0
}

.box_pay_item .item_info .my_acoin .my_acoin_detail {
    min-height: 38px
}

.box_payment .my_acoin .btn_wrap {
    padding: 0;
    margin-top: 0
}

.box_payment .my_acoin .btn_wrap .btn {
    min-width: 190px;
    height: 45px
}

.my_acoin {
    line-height: 1
}

.my_coin_mob {
    display: none
}

.my_acoin span.my_coin_txt {
    display: inline-block;
    vertical-align: middle;
    padding-left: 48px;
    position: relative
}

.my_acoin span.my_coin_txt:before {
    display: block;
    content: '';
    width: 38px;
    height: 38px;
    background: #f5f5f5;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url(../../images/common/icn_cm_spr.png?v=4) no-repeat;
    background-size: 1600px 1600px;
    background-position: -204px -863px
}

.my_acoin span.my_coin {
    font-size: 32px;
    color: #2f343d;
    font-weight: normal;
    margin: 0 0 8px 8px;
    display: inline-block;
    vertical-align: middle
}

.my_acoin.pc_block .btn {
    float: right
}

.pay_lodding_wrap {
    text-align: center
}

.pay_lodding_wrap .loader {
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    margin: 0 auto
}

.pay_lodding_wrap .lodding {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    font-size: 14px;
    margin: 50px auto 0;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: 1.3s linear infinite load5;
    animation: 1.3s linear infinite load5;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0)
}

.pay_lodding_wrap.fail {
    margin-top: 30px
}

.pay_lodding_wrap.fail .icon.icn_fail {
    display: block;
    margin: 0 auto;
    width: 80px;
    height: 80px
}

.pay_lodding_wrap.fail .icon.icn_fail:before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: url(../../images/common/icn_cm_spr.png?v=4) no-repeat;
    background-position: -506px -863px
}

@-webkit-keyframes load5 {
    0%,100% {
        box-shadow: 0 -2.6em 0 0 #fff,1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2),2.5em 0 0 0 rgba(0, 0, 0, 0.2),1.75em 1.75em 0 0 rgba(0, 0, 0, 0.2),0 2.5em 0 0 rgba(0, 0, 0, 0.2),-1.8em 1.8em 0 0 rgba(0, 0, 0, 0.2),-2.6em 0 0 0 rgba(0, 0, 0, 0.5),-1.8em -1.8em 0 0 rgba(0, 0, 0, 0.7)
    }

    12.5% {
        box-shadow: 0 -2.6em 0 0 rgba(0, 0, 0, 0.7),1.8em -1.8em 0 0 #fff,2.5em 0 0 0 rgba(0, 0, 0, 0.2),1.75em 1.75em 0 0 rgba(0, 0, 0, 0.2),0 2.5em 0 0 rgba(0, 0, 0, 0.2),-1.8em 1.8em 0 0 rgba(0, 0, 0, 0.2),-2.6em 0 0 0 rgba(0, 0, 0, 0.2),-1.8em -1.8em 0 0 rgba(0, 0, 0, 0.5)
    }

    25% {
        box-shadow: 0 -2.6em 0 0 rgba(0, 0, 0, 0.5),1.8em -1.8em 0 0 rgba(0, 0, 0, 0.7),2.5em 0 0 0 #fff,1.75em 1.75em 0 0 rgba(0, 0, 0, 0.2),0 2.5em 0 0 rgba(0, 0, 0, 0.2),-1.8em 1.8em 0 0 rgba(0, 0, 0, 0.2),-2.6em 0 0 0 rgba(0, 0, 0, 0.2),-1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2)
    }

    37.5% {
        box-shadow: 0 -2.6em 0 0 rgba(0, 0, 0, 0.2),1.8em -1.8em 0 0 rgba(0, 0, 0, 0.5),2.5em 0 0 0 rgba(0, 0, 0, 0.7),1.75em 1.75em 0 0 #fff,0 2.5em 0 0 rgba(0, 0, 0, 0.2),-1.8em 1.8em 0 0 rgba(0, 0, 0, 0.2),-2.6em 0 0 0 rgba(0, 0, 0, 0.2),-1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2)
    }

    50% {
        box-shadow: 0 -2.6em 0 0 rgba(0, 0, 0, 0.2),1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2),2.5em 0 0 0 rgba(0, 0, 0, 0.5),1.75em 1.75em 0 0 rgba(0, 0, 0, 0.7),0 2.5em 0 0 #fff,-1.8em 1.8em 0 0 rgba(0, 0, 0, 0.2),-2.6em 0 0 0 rgba(0, 0, 0, 0.2),-1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2)
    }

    62.5% {
        box-shadow: 0 -2.6em 0 0 rgba(0, 0, 0, 0.2),1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2),2.5em 0 0 0 rgba(0, 0, 0, 0.2),1.75em 1.75em 0 0 rgba(0, 0, 0, 0.5),0 2.5em 0 0 rgba(0, 0, 0, 0.7),-1.8em 1.8em 0 0 #fff,-2.6em 0 0 0 rgba(0, 0, 0, 0.2),-1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2)
    }

    75% {
        box-shadow: 0 -2.6em 0 0 rgba(0, 0, 0, 0.2),1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2),2.5em 0 0 0 rgba(0, 0, 0, 0.2),1.75em 1.75em 0 0 rgba(0, 0, 0, 0.2),0 2.5em 0 0 rgba(0, 0, 0, 0.5),-1.8em 1.8em 0 0 rgba(0, 0, 0, 0.7),-2.6em 0 0 0 #fff,-1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2)
    }

    87.5% {
        box-shadow: 0 -2.6em 0 0 rgba(0, 0, 0, 0.2),1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2),2.5em 0 0 0 rgba(0, 0, 0, 0.2),1.75em 1.75em 0 0 rgba(0, 0, 0, 0.2),0 2.5em 0 0 rgba(0, 0, 0, 0.2),-1.8em 1.8em 0 0 rgba(0, 0, 0, 0.5),-2.6em 0 0 0 rgba(0, 0, 0, 0.7),-1.8em -1.8em 0 0 #fff
    }
}

@keyframes load5 {
    0%,100% {
        box-shadow: 0 -2.6em 0 0 #fff,1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2),2.5em 0 0 0 rgba(0, 0, 0, 0.2),1.75em 1.75em 0 0 rgba(0, 0, 0, 0.2),0 2.5em 0 0 rgba(0, 0, 0, 0.2),-1.8em 1.8em 0 0 rgba(0, 0, 0, 0.2),-2.6em 0 0 0 rgba(0, 0, 0, 0.5),-1.8em -1.8em 0 0 rgba(0, 0, 0, 0.7)
    }

    12.5% {
        box-shadow: 0 -2.6em 0 0 rgba(0, 0, 0, 0.7),1.8em -1.8em 0 0 #fff,2.5em 0 0 0 rgba(0, 0, 0, 0.2),1.75em 1.75em 0 0 rgba(0, 0, 0, 0.2),0 2.5em 0 0 rgba(0, 0, 0, 0.2),-1.8em 1.8em 0 0 rgba(0, 0, 0, 0.2),-2.6em 0 0 0 rgba(0, 0, 0, 0.2),-1.8em -1.8em 0 0 rgba(0, 0, 0, 0.5)
    }

    25% {
        box-shadow: 0 -2.6em 0 0 rgba(0, 0, 0, 0.5),1.8em -1.8em 0 0 rgba(0, 0, 0, 0.7),2.5em 0 0 0 #fff,1.75em 1.75em 0 0 rgba(0, 0, 0, 0.2),0 2.5em 0 0 rgba(0, 0, 0, 0.2),-1.8em 1.8em 0 0 rgba(0, 0, 0, 0.2),-2.6em 0 0 0 rgba(0, 0, 0, 0.2),-1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2)
    }

    37.5% {
        box-shadow: 0 -2.6em 0 0 rgba(0, 0, 0, 0.2),1.8em -1.8em 0 0 rgba(0, 0, 0, 0.5),2.5em 0 0 0 rgba(0, 0, 0, 0.7),1.75em 1.75em 0 0 #fff,0 2.5em 0 0 rgba(0, 0, 0, 0.2),-1.8em 1.8em 0 0 rgba(0, 0, 0, 0.2),-2.6em 0 0 0 rgba(0, 0, 0, 0.2),-1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2)
    }

    50% {
        box-shadow: 0 -2.6em 0 0 rgba(0, 0, 0, 0.2),1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2),2.5em 0 0 0 rgba(0, 0, 0, 0.5),1.75em 1.75em 0 0 rgba(0, 0, 0, 0.7),0 2.5em 0 0 #fff,-1.8em 1.8em 0 0 rgba(0, 0, 0, 0.2),-2.6em 0 0 0 rgba(0, 0, 0, 0.2),-1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2)
    }

    62.5% {
        box-shadow: 0 -2.6em 0 0 rgba(0, 0, 0, 0.2),1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2),2.5em 0 0 0 rgba(0, 0, 0, 0.2),1.75em 1.75em 0 0 rgba(0, 0, 0, 0.5),0 2.5em 0 0 rgba(0, 0, 0, 0.7),-1.8em 1.8em 0 0 #fff,-2.6em 0 0 0 rgba(0, 0, 0, 0.2),-1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2)
    }

    75% {
        box-shadow: 0 -2.6em 0 0 rgba(0, 0, 0, 0.2),1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2),2.5em 0 0 0 rgba(0, 0, 0, 0.2),1.75em 1.75em 0 0 rgba(0, 0, 0, 0.2),0 2.5em 0 0 rgba(0, 0, 0, 0.5),-1.8em 1.8em 0 0 rgba(0, 0, 0, 0.7),-2.6em 0 0 0 #fff,-1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2)
    }

    87.5% {
        box-shadow: 0 -2.6em 0 0 rgba(0, 0, 0, 0.2),1.8em -1.8em 0 0 rgba(0, 0, 0, 0.2),2.5em 0 0 0 rgba(0, 0, 0, 0.2),1.75em 1.75em 0 0 rgba(0, 0, 0, 0.2),0 2.5em 0 0 rgba(0, 0, 0, 0.2),-1.8em 1.8em 0 0 rgba(0, 0, 0, 0.5),-2.6em 0 0 0 rgba(0, 0, 0, 0.7),-1.8em -1.8em 0 0 #fff
    }
}

.pay_lodding_wrap h4 {
    font-size: 20px;
    color: #000;
    font-weight: normal;
    margin-top: 48px
}

.pay_lodding_wrap .payment_sub_title {
    line-height: 1.64;
    font-size: 17px;
    color: #3d3d3d;
    font-weight: normal;
    margin-top: 30px
}

.pay_lodding_wrap .payment_desc {
    line-height: 1.64;
    font-size: 15px;
    color: #3d3d3d;
    font-weight: normal;
    margin-top: 40px
}

.pay_lodding_wrap .payment_desc:last-of-type {
    margin-top: 4px
}

.pay_lodding_wrap .payment_desc.light_color {
    opacity: 0.6
}

.pay_lodding_wrap .payment_desc.fail {
    margin-top: 20px
}

.pay_lodding_wrap a {
    color: #931313
}

.payment_result_popup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box
}

.payment_result_popup .result_svg_wrap {
    position: relative;
    width: 52px;
    height: 52px;
    display: inline-flex
}

.payment_result_popup .result_svg_wrap svg {
    width: 100%;
    height: 100%
}

.payment_result_popup .result_svg_circle {
    width: 100%;
    height: 100%;
    -webkit-animation: result_circle .45s ease both;
    animation: result_circle .45s ease both
}

.payment_result_popup .result_svg_arrow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-animation: result_arrow .5s cubic-bezier(0.14, 0.58, 0.62, 1.47) both .15s;
    animation: result_arrow .5s cubic-bezier(0.14, 0.58, 0.62, 1.47) both .15s
}

.payment_result_popup .result_desc {
    margin-top: 15px
}

.payment_result_popup .result_desc_text {
    display: block;
    font-size: 1.2rem;
    text-align: center
}

.payment_result_popup .result_desc_btn {
    width: auto;
    min-width: 200px;
    padding: 0 10px;
    height: 48px;
    margin: 15px auto 0;
    box-sizing: border-box
}

.top_coupon_visual {
    height: 494px;
    box-sizing: border-box;
    padding-top: 80px;
    text-align: center;
    background: url(../../images/payment/console_coupon_top_visual_bg.png?v=4) no-repeat center bottom;
    background-size: cover
}

.top_coupon_visual:after {
    display: block;
    content: '';
    height: 0;
    font-size: 0;
    opacity: 0;
    clear: both
}

.top_coupon_visual h2 {
    color: #1b1d25
}

.top_coupon_visual .h2_desc {
    color: rgba(0, 0, 0, 0.7)
}

.top_coupon_visual .coupon_available_btn {
    margin: 26px auto 0;
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    border-radius: 3px;
    font-size: 13px;
    background: #826452;
    color: #fff;
    transition: background-color 0.2s
}

.coupon_wrap {
    max-width: 972px;
    margin: 0 auto;
    padding-top: 1px;
    padding-bottom: 80px
}

.coupon_wrap .inner {
    position: relative;
    margin-top: -190px
}

.coupon_wrap .feather {
    display: block;
    position: absolute;
    top: 52px;
    right: -70px;
    width: 279px;
    height: 508px;
    background: url(../../images/payment/console_coupon_input_pen.png?v=4) no-repeat 0 0;
    z-index: 1
}

.coupon_wrap .box_coupon {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 840px;
    height: 573px;
    box-sizing: border-box;
    padding: 15px 15px 15px 17px;
    margin: 0 auto;
    background: url(../../images/payment/console_coupon_input_bg.png?v=4) 50% 0 no-repeat
}

.coupon_wrap .box_coupon_tit {
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 136px;
    padding: 5px;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box
}

.coupon_wrap .box_coupon_tit h3 {
    font-size: 21px;
    color: #000;
    font-weight: normal;
    line-height: 1
}

.coupon_wrap .box_coupon_tit .h3_desc {
    display: block;
    font-size: 15px;
    color: #5f5f5f;
    font-weight: normal;
    margin-top: 13px;
    line-height: 1.4
}

.coupon_wrap .box_coupon .server_select {
    width: 100%;
    margin: 6px 0 0
}

.coupon_wrap .box_coupon select {
    border-color: #8f8371;
    background-color: #fff
}

.coupon_wrap .box_coupon .mid_bg_area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #f5f3f2;
    padding: 14px 115px 14px 113px;
    min-height: 132px
}

.coupon_wrap #couponForm {
    flex: 0 1 100%;
    display: block;
    position: relative;
    width: 100%
}

.coupon_wrap .coupon_input_wrap {
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
    margin: 6px 0 0
}

.coupon_wrap .coupon_input_wrap + .coupon_input_title {
    margin-top: 14px
}

.coupon_wrap .coupon_input_title {
    font-size: 16px
}

.coupon_wrap .coupon_input_wrap .custom_input {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    border-color: #8f8371
}

.coupon_wrap .coupon_input_wrap .custom_input + .custom_input {
    margin: 0 0 0 10px
}

.coupon_wrap .coupon_input_wrap .custom_input.mid input[type="text"] {
    font-size: 21px;
    color: #000;
    font-weight: normal;
    text-align: center
}

.coupon_wrap .custom_input.mid input[type="text"] {
    height: 46px;
    box-sizing: border-box;
    padding: 0 18px;
    font-size: 18px;
    color: #4f4f4f;
    font-weight: normal
}

.coupon_wrap .box_coupon .btn_wrap {
    margin-top: 1.25rem
}

.coupon_wrap .box_coupon .btn_wrap .btn {
    background: #2f323b;
    transition: all 0.3s
}

.coupon_wrap .box_coupon .btn_wrap .btn:before {
    display: none
}

.coupon_wrap .coupon_caution_list {
    max-width: 845px;
    margin: 25px auto 0
}

.coupon_wrap .coupon_caution_list h4 {
    display: none
}

.coupon_wrap .box_coupon .custom_select select {
    height: 48px
}

.coupon_wrap .box_coupon .nickname_title {
    margin-top: 14px;
    display: inline-block
}

.coupon_wrap .box_coupon .coupon_user_nickname {
    margin-top: 6px;
    background: #e9e5e3;
    text-align: center;
    padding: 12px 0
}

.coupon_wrap .coupon_notice {
    text-align: center;
    font-size: .925rem;
    padding: 0 114px;
    margin-top: 1.25rem
}

.coupon_wrap .coupon_notice .btn_text {
    text-decoration: none;
    white-space: nowrap
}

.top_acoin_visual {
    height: 300px;
    box-sizing: border-box;
    padding-top: 80px;
    background: url(../../images/payment/acoin_top_visual_bg.jpg?v=4) 50% 50% no-repeat;
    background-size: cover
}

.top_acoin_visual:after {
    display: block;
    content: '';
    height: 0;
    font-size: 0;
    opacity: 0;
    clear: both
}

.container.acoin_charge .content {
    background: #fff;
    padding: 0 30px
}

.acoin_charge_wrap {
    max-width: 1300px;
    margin: 0 auto;
    padding-top: 1px;
    padding-bottom: 80px
}

.acoin_charge_wrap > .inner {
    position: relative;
    margin-top: -15px
}

.acoin_charge_wrap > .inner > .btn_top {
    position: absolute;
    top: -62px;
    right: 0
}

.acoin_charge_wrap > .inner > .btn_top .btn_limited {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 200px;
    max-width: 300px;
    height: 47px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.8);
    line-height: 1.2
}

.box_acoin_charge {
    width: 100%;
    box-sizing: border-box;
    background: #fff
}

.acoin_login {
    height: 134px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-flex-align: center;
    padding: 0 55px;
    border-bottom: 1px solid #e0e0e0;
    text-align: right;
    justify-content: flex-end
}

.acoin_login .btn {
    min-width: 170px;
    margin-left: 34px
}

.acoin_list_tit {
    text-align: center;
    font-size: 18px;
    color: #000;
    font-weight: normal;
    padding-top: 1.916rem;
    margin-bottom: 22px
}

.acoin_list > ul {
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: -8px 0
}

.acoin_list li {
    position: relative;
    float: left;
    flex: 0 0 24%;
    height: 345px;
    margin: 0.5%;
    padding: 34px 0;
    text-align: center;
    background: #d2d6da;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d2d6da), color-stop(1, #c8cfd5));
    background: -webkit-linear-gradient(top, #d2d6da 0, #c8cfd5 100%);
    background: linear-gradient(top, #d2d6da 0, #c8cfd5 100%);
    overflow: hidden;
    box-sizing: border-box
}

.acoin_list li:before {
    display: block;
    content: "";
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.1);
    opacity: 0
}

.acoin_list li .box_detail_acoin {
    position: relative
}

.acoin_list .coin {
    display: block;
    font-size: 27px;
    color: #272b2f;
    font-weight: normal;
    line-height: 1
}

.acoin_list .icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 127px;
    box-sizing: border-box;
    margin-top: 20px;
    margin-bottom: 20px
}

.acoin_list .icon:before {
    display: block;
    content: '';
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: url(../../images/payment/acoin_list_spr.png?v=4) 50% 0 no-repeat;
    background-size: 2010px 127px
}

.acoin_list .icn_acoin01:before {
    width: 154px;
    height: 110px;
    box-sizing: border-box;
    background-position: 0 0
}

.acoin_list .icn_acoin02:before {
    width: 185px;
    height: 110px;
    box-sizing: border-box;
    background-position: -164px 0
}

.acoin_list .icn_acoin03:before {
    width: 244px;
    height: 110px;
    box-sizing: border-box;
    background-position: -359px 0
}

.acoin_list .icn_acoin04:before {
    width: 298px;
    height: 110px;
    box-sizing: border-box;
    background-position: -612px 0
}

.acoin_list .icn_acoin05:before {
    width: 244px;
    height: 110px;
    box-sizing: border-box;
    background-position: -920px 0
}

.acoin_list .icn_acoin06:before {
    width: 284px;
    height: 110px;
    box-sizing: border-box;
    background-position: -1174px 0
}

.acoin_list .icn_acoin07:before {
    width: 260px;
    height: 127px;
    box-sizing: border-box;
    background-position: -1468px 0
}

.acoin_list .icn_acoin08:before {
    width: 273px;
    height: 127px;
    box-sizing: border-box;
    background-position: -1737px 0
}

.acoin_list .money {
    display: block;
    font-size: 22px;
    color: #8d6948;
    font-weight: normal
}

.acoin_list .btn_wrap {
    margin-top: 10px;
    position: relative;
    z-index: 2
}

.acoin_list .btn_wrap .btn {
    min-width: 180px;
    transition: 0.15s
}

.acoin_list .btn_wrap .btn:before {
    display: none
}

.acoin_amount_wrap {
    margin-top: 40px
}

.acoin_amount_wrap p.title {
    font-size: 18px;
    color: #000;
    font-weight: normal;
    text-align: center;
    margin-bottom: 30px
}

.acoin_amount_wrap .box_acoin_amount {
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-flex-align: center;
    justify-content: space-between;
    background: #d0d5d9;
    padding: 55px 3%
}

.box_acoin_amount .amount_input {
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-flex-align: center;
    justify-content: flex-start;
    width: 830px;
    margin-right: 40px
}

.box_acoin_amount .amount_input p {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    color: #000;
    font-weight: bold
}

.box_acoin_amount .amount_input p.acoin {
    width: 52%;
    text-align: right;
    white-space: nowrap
}

.box_acoin_amount .amount_input p.acoin em {
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    font-weight: normal
}

.box_acoin_amount .amount_input p.acoin .custom_input {
    width: calc(100% - 80px);
    border: 0;
    margin-right: 20px
}

.box_acoin_amount .amount_input p.acoin .custom_input input {
    font-size: 16px;
    color: #666;
    font-weight: normal;
    height: 50px;
    text-align: right
}

.box_acoin_amount .amount_input p.money {
    width: 40%;
    text-align: right;
    margin-left: 8%;
    border-bottom: 1px solid #323232;
    padding: 0 10px;
    height: 50px;
    box-sizing: border-box;
    line-height: 50px
}

.box_acoin_amount .amount_input p.money em.unit {
    margin-left: 10px
}

.box_acoin_amount .amount_input p.money em.unit em {
    font-weight: normal
}

.box_acoin_amount .btn_wrap .btn {
    min-width: 180px
}

.top_pearl_visuaul {
    height: 500px;
    box-sizing: border-box;
    padding-top: 80px;
    background: url(../../images/payment/pay_pearl_top_visual.png?v=4) 50% 50% no-repeat;
    background-size: cover
}

.pearl_shop_list_wrap {
    position: relative;
    background: #fff;
    padding-top: 1px
}

.pearl_shop_list_wrap > .inner {
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    margin-top: -211px;
    display: flex;
    justify-content: center
}

.pearl_shop_list_wrap > .inner .btn_top {
    position: absolute;
    top: -56px;
    right: 8px
}

.pearl_shop_list_wrap > .inner .msg_top {
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 47px;
    line-height: 20px;
    color: #fff;
    align-items: center;
    text-align: center;
    font-size: 0.86rem
}

.pearl_shop_list_wrap > .inner .btn_top .btn_limited {
    min-width: 200px;
    height: 47px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.8);
    line-height: 47px
}

.pearl_shop_list_wrap > .inner > ul {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap
}

.pearl_shop_list_wrap > .inner > ul > li {
    position: relative;
    width: 310px;
    min-height: 450px;
    box-sizing: border-box;
    margin: 0 8px 15px 7px;
    background: #f2f2f2
}

.pearl_shop_list_wrap > .inner > ul > li:before {
    display: block;
    content: "";
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.1);
    opacity: 0
}

.pearl_shop_list_wrap > .inner > ul > li.blank_item {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    background: 0 0
}

.pearl_shop_list_wrap > .inner > ul > li.blank_item:before {
    display: none
}

.pearl_shop_list_wrap > .inner > ul > li.blank_item:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 390px;
    height: 480px;
    box-sizing: border-box;
    background: url(../../images/payment/pearl_blank_item_v2.png?v=4) no-repeat;
    background-size: contain
}

.pearl_shop_list_wrap > .inner > ul > li:nth-child(4n) + .blank_item {
    display: none
}

.pearl_shop_list_wrap > .inner > ul > li .box_item {
    position: relative
}

.pearl_shop_list_wrap > .inner > ul > li .img_area {
    position: relative;
    overflow: hidden;
    width: 310px;
    height: 210px;
    box-sizing: border-box
}

.pearl_shop_list_wrap > .inner > ul > li .img_area:before {
    display: block;
    content: "";
    overflow: hidden;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url(../../images/payment/pearl_item_box_spr.png?v=4) no-repeat
}

.pearl_shop_list_wrap > .inner > ul > li .img_area.img_mode:before {
    display: none
}

.pearl_shop_list_wrap > .inner > ul > li .img_area:after {
    display: block;
    content: "";
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.1);
    opacity: 0
}

.pearl_shop_list_wrap > .inner > ul > li .img_area.pearl_16:before {
    background-position: 0 0
}

.pearl_shop_list_wrap > .inner > ul > li .img_area.pearl_32:before {
    background-position: -325px 0
}

.pearl_shop_list_wrap > .inner > ul > li .img_area.pearl_80:before {
    background-position: -650px 0
}

.pearl_shop_list_wrap > .inner > ul > li .img_area.pearl_165:before {
    background-position: -975px 0
}

.pearl_shop_list_wrap > .inner > ul > li .img_area.pearl_340:before {
    background-position: 0 -220px
}

.pearl_shop_list_wrap > .inner > ul > li .img_area.pearl_860:before {
    background-position: -325px -220px
}

.pearl_shop_list_wrap > .inner > ul > li .img_area.pearl_1760:before {
    background-position: -650px -220px
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area {
    position: relative;
    padding: 30px 20px 20px
}

.pearl_shop_list_wrap > .inner > ul > li .box_item .img_sale {
    display: none;
    background: url(../../images/payment/ico_sale.png?v=4) center 0 no-repeat;
    width: 68px;
    height: 68px;
    position: absolute;
    left: 7px;
    top: 7px;
    z-index: 1
}

.pearl_shop_list_wrap > .inner > ul > li .box_item.on_sale .img_sale {
    display: block
}

.pearl_shop_list_wrap > .inner > ul > li .sale_wrap {
    text-align: center;
    padding-bottom: .8rem
}

.pearl_shop_list_wrap > .inner > ul > li .sale_price {
    position: relative;
    color: #6d5c4d;
    font-size: 19px;
    white-space: nowrap
}

.pearl_shop_list_wrap > .inner > ul > li .sale_price::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: calc(50% + 1px);
    width: 100%;
    height: 1px;
    background: #6d5c4d
}

.pearl_shop_list_wrap > .inner > ul > li .sale_price::after {
    content: '';
    display: none;
    position: absolute;
    right: 0;
    top: calc(50% - 10.5px);
    width: 2px;
    height: 10px;
    background: #6d5c4d;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .title {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 1rem;
    font-size: 17px;
    text-align: center;
    color: #000;
    font-weight: normal;
    overflow: hidden
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .price {
    display: block;
    margin-bottom: 22px;
    text-align: center;
    font-size: 29px;
    color: #8d6948;
    font-weight: normal;
    white-space: nowrap
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .sale_price + .price {
    margin-bottom: 0
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .btn_wrap {
    flex-wrap: wrap;
    margin: .8rem 0 .6rem
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .btn_wrap .btn_sml02 {
    min-width: 180px;
    height: 47px;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 47px
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .btn_wrap .btn_white02 {
    background-color: transparent;
    border: 1px solid #2f323b
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .btn_wrap .btn + .btn {
    margin: 5px 0 0
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items {
    position: relative;
    margin: 20px auto 0;
    padding: 0 0 20px 0;
    max-width: 220px;
    color: #3d3d3d;
    font-weight: normal;
    text-align: center
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items .text_detail {
    font-size: 14px;
    line-height: 18px;
    cursor: pointer
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items .icn_plus {
    flex: 0 0 auto;
    display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
    margin-left: 0.2rem;
    box-sizing: border-box;
    font-size: 0;
    text-indent: -999em;
    border: 1px solid #777;
    vertical-align: text-bottom
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items .icn_plus:before {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 25;
    width: 2px;
    height: 7px;
    box-sizing: border-box;
    background: #777
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items .icn_plus:after {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 25;
    width: 7px;
    height: 2px;
    box-sizing: border-box;
    background: #777
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items:hover .icn_plus {
    background: #2f323b;
    border-color: #2f323b
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items:hover .icn_plus:after,.pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items:hover .icn_plus:before {
    background: #f2f2f2
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items:hover .btn:before {
    opacity: 0
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items:hover .btn_black {
    background: #725945
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items:hover .btn_white02 {
    background: #fff
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items:hover .box_details {
    display: block
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items em {
    display: inline-block;
    color: #931313
}

.pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items .box_details {
    display: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 35;
    width: 350px;
    margin-left: -175px;
    padding: 25px 20px;
    font-size: 14px;
    border: 1px solid #2f323b;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    background: #fff;
    box-sizing: border-box;
    line-height: 1.45
}

.aside_wrap {
    z-index: 10;
    float: none;
    width: 280px;
    border-top: 2px solid #555;
    border-bottom: 2px solid #555;
    position: absolute;
    margin-top: 161px
}

.aside_wrap + .content {
    margin-left: 350px
}

.aside_wrap .inner {
    position: relative;
    z-index: 20
}

.aside_wrap li a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-flex-align: center;
    justify-content: flex-start;
    height: 45px;
    box-sizing: border-box;
    padding-left: 70px;
    border-bottom: 1px solid #dfdfdf;
    font-size: 15px;
    color: #3d3d3d;
    font-weight: normal
}

.aside_wrap li a.icon:before {
    display: block;
    content: "";
    overflow: hidden;
    position: absolute;
    left: 21px;
    top: 50%;
    transform: translate(0, -50%);
    background: url(../../images/common/spr_etc.png?v=4) no-repeat;
    background-size: 800px 800px
}

.aside_wrap li a.icon.icn_0:before {
    left: 23px;
    width: 24px;
    height: 26px;
    box-sizing: border-box;
    background-position: -1px 0
}

.aside_wrap li a.icon.icn_1:before {
    width: 27px;
    height: 20px;
    box-sizing: border-box;
    background-position: -34px 0
}

.aside_wrap li a.icon.icn_2:before {
    width: 30px;
    height: 20px;
    box-sizing: border-box;
    background-position: -66px 0
}

.aside_wrap li a.icon.icn_3:before {
    left: 26px;
    width: 20px;
    height: 30px;
    box-sizing: border-box;
    background-position: -105px 0
}

.aside_wrap li a.icon.icn_4:before {
    width: 29px;
    height: 24px;
    box-sizing: border-box;
    background-position: -134px 0
}

.aside_wrap li a.icon.icn_5:before {
    width: 28px;
    height: 26px;
    box-sizing: border-box;
    background-position: -169px 0
}

.aside_wrap li a.icon.icn_6:before {
    left: 24px;
    width: 23px;
    height: 30px;
    box-sizing: border-box;
    background-position: -206px 0
}

.aside_wrap li a.icon.icn_7:before {
    width: 26px;
    height: 26px;
    box-sizing: border-box;
    background-position: -238px 0
}

.aside_wrap li a.icon.icn_8:before {
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    background-position: -526px -448px
}

.aside_wrap li.active a.icon.icn_0:before {
    background-position: -1px -35px
}

.aside_wrap li.active a.icon.icn_1:before {
    background-position: -34px -35px
}

.aside_wrap li.active a.icon.icn_2:before {
    background-position: -66px -35px
}

.aside_wrap li.active a.icon.icn_3:before {
    background-position: -105px -35px
}

.aside_wrap li.active a.icon.icn_4:before {
    background-position: -134px -35px
}

.aside_wrap li.active a.icon.icn_5:before {
    background-position: -169px -35px
}

.aside_wrap li.active a.icon.icn_6:before {
    background-position: -206px -35px
}

.aside_wrap li.active a.icon.icn_7:before {
    background-position: -238px -35px
}

.btn_mob_toggle {
    display: none
}

.icon_box.icon_none {
    padding-top: 0
}

.icon_box.icon_none .icon {
    display: none
}

.icon_box {
    position: relative;
    margin-bottom: 40px;
    padding-top: 100px;
    text-align: center
}

.icon_box h3 {
    font-size: 30px;
    font-weight: bold;
    color: #2b2f5a
}

.icon_box .h3_desc {
    display: block;
    margin-top: 14px;
    font-size: 15px;
    color: #3d3d3d
}

.caution_text {
    margin: 50px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-flex-align: center
}

.caution_text .inner {
    text-align: left;
    background: #ebebeb;
    border: 1px solid #dedede;
    width: 100%;
    padding: 20px 40px;
    box-sizing: border-box
}

.caution_text p {
    font-size: 15px;
    color: #3d3d3d;
    font-weight: normal
}

.container.pet {
    padding: 80px 0 100px;
    box-sizing: border-box;
    max-width: 1230px;
    margin: 0 auto;
    background: #fff
}

.container.pet h2 {
    margin-bottom: 34px;
    padding: 65px 0 42px;
    font-size: 45px;
    font-weight: normal;
    text-align: center;
    color: #323232
}

.container.pet h2.line {
    border-bottom: 2px solid #555
}

.pet_list ul {
    margin: -10px -4px
}

.pet_list ul:after {
    display: block;
    content: '';
    height: 0;
    font-size: 0;
    opacity: 0;
    clear: both
}

.pet_list ul li {
    position: relative;
    float: left;
    width: 24.55%;
    height: 180px;
    box-sizing: border-box;
    margin: 10px 0.22%
}

.pet_list ul li .box_pet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #dfdfdf
}

.pet_list ul li .img_area {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    box-sizing: border-box;
    padding-bottom: 59.53%
}

.pet_list ul li .img_area img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%
}

.pet_list ul li .pet_name {
    padding: 5px;
    text-align: center;
    line-height: 1.4;
    font-size: 15px;
    color: #3d3d3d;
    font-weight: normal;
    display: flex;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    height: 50px;
    box-sizing: border-box
}

.pet_list ul li .custom_radio {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box
}

.pet_list ul li .custom_radio label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box
}

.pet_list ul li .custom_radio input[type='radio'] + label {
    padding: 0;
    display: block
}

.pet_list ul li .custom_radio label:after,.pet_list ul li .custom_radio label:before {
    display: none
}

.pet_list ul li .custom_radio input[type='radio']:checked + label:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.7);
    margin: 0;
    padding: 0;
    transform: none;
    border-radius: 0
}

.pet_list ul li .custom_radio input[type='radio']:checked + label:before {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    transform: translate(-50%, -50%);
    background: 0 0;
    z-index: 20;
    border: 0;
    background: url(../../images/common/spr_etc.png?v=4) -69px -248px no-repeat;
    background-size: 800px 800px
}

.pet_list + .btn_wrap {
    margin: 40px 0 60px
}

.btn.btnMolpay {
    background: url(../../images/payment/btn_molprepaid.png?v=4);
    position: relative;
    cursor: pointer;
    width: 140px;
    height: 50px;
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle
}

.btn_molpay {
    display: flex;
    align-items: center;
    position: relative;
    margin: 30px auto;
    width: 49.3333%;
    height: 80px;
    background: #232124
}

.btn_molpay::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #52d54f
}

.btn_molpay .molpay_logo_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 3;
    height: 100%;
    border-right: 1px solid #444245
}

.btn_molpay .molpay_logo {
    background: url(../../images/payment/btn_molprepaid_logo.jpg?v=4) no-repeat;
    background-size: cover;
    width: 130px;
    height: 44px
}

.btn_molpay .molpay_desc_wrap {
    flex: 5;
    text-align: left;
    padding: 0 40px
}

.btn_molpay .mol_desc1 {
    font-size: 16px;
    color: #62ea5f
}

.btn_molpay .mol_desc2 {
    font-size: 12px;
    color: #c5c5cb
}

.mol_desc {
    font-size: 0.8rem;
    margin: 1rem 0
}

#divPaymentRequestModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999
}

#modalPaymentProgress {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4)
}

#modalPaymentProgress .modal-dialog {
    width: 780px;
    height: 820px;
    width: 890px;
    height: 920px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.goldBuyConfirm .buyConfirm {
    border: 1px solid #d6d6d6
}

.goldBuyConfirm .buyConfirm h4 {
    color: #727272;
    font-size: 20px;
    font-weight: normal;
    font-weight: 400;
    height: 48px;
    background: #ededed;
    line-height: 48px;
    padding-left: 18px
}

.goldBuyConfirm .buyConfirm .buyInfo {
    overflow: hidden;
    padding: 20px 0 20px 20px
}

.goldBuyConfirm .buyConfirm .buyInfo .box {
    float: left;
    border: 1px solid #d4d4d4;
    width: 254px;
    height: 214px;
    text-align: center
}

.goldBuyConfirm .buyConfirm .buyInfo .box > div {
    display: block;
    height: 214px;
    color: #c77c3f;
    font-size: 20px;
    font-family: 'Arial'
}

.goldBuyConfirm .buyConfirm .buyInfo .box > div em {
    display: block;
    font-style: normal;
    color: #fff;
    font-size: 21px;
    font-weight: bold;
    padding-top: 93px;
    text-shadow: 2px 0 1px rgba(0, 0, 0, 0.63);
    background: url(../../images/payment/bg_glod_num.png?v=4) center 0 no-repeat
}

.goldBuyConfirm .buyConfirm .buyInfo .box > div span {
    display: block;
    padding-top: 30px
}

.goldBuyConfirm .buyConfirm .buyInfo .box > div strong {
    color: #673a15;
    font-size: 25px
}

.goldBuyConfirm .buyConfirm .buyInfo .list {
    float: right;
    width: 480px
}

.goldBuyConfirm .buyConfirm .buyInfo .list ul li {
    font-size: 18px;
    color: #a3a3a3;
    line-height: 41px
}

.goldBuyConfirm .buyConfirm .buyInfo .list ul li img {
    vertical-align: middle;
    margin-right: 5px;
    position: relative;
    top: -2px
}

*:first-child+html .goldBuyConfirm .buyConfirm .buyInfo .list ul li img {
    top: 0
}

.goldBuyConfirm .buyConfirm .buyInfo .list ul li span {
    padding-left: 4px
}

.goldBuyConfirm .buyConfirm .buyInfo .list ul .lst01 span {
    color: #ff7e00;
    font-size: 20px;
    font-weight: 600
}

.goldBuyConfirm .buyConfirm .buyInfo .list ul .lst02 span {
    color: #727272;
    font-size: 20px;
    font-weight: 600
}

.goldBuyConfirm .buyConfirm .buyInfo .list ul .lst02 span em {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    color: #959595
}

.goldBuyConfirm .buyConfirm .buyInfo .list ul .lst03 {
    border-top: 1px solid #e7e7e7;
    margin-top: 22px;
    padding-top: 22px
}

.goldBuyConfirm .buyConfirm .buyInfo .list ul .lst03 span {
    color: #5b5b5b;
    font-size: 20px;
    font-weight: 600
}

.goldBuyConfirm .buyConfirm .buyInfo .list ul .lst04 span {
    color: #009cff;
    font-size: 20px;
    font-weight: 600
}

.goldBuyConfirm .buyConfirm .buyInfo .list ul .lst104 span {
    color: #009cff;
    font-size: 20px;
    font-weight: 600
}

.goldBuyConfirm .buyConfirm .buyInfo .list ul .lst104 strong {
    font-weight: bolder;
    color: #727272
}

.goldBuyConfirm .btnRight {
    text-align: right;
    padding-top: 10px
}

.goldBuyConfirm .btnRight .btnTy1 {
    padding: 0 13px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #ebebeb;
    border-bottom: 1px solid #bdbdbd
}

.goldBuyConfirm .btnCenter {
    padding-top: 68px
}

.goldBuyConfirm .btnCenter p {
    color: #989898;
    font-size: 20px;
    padding-bottom: 15px
}

.goldBuyConfirm .btnCenter .btnTy2 {
    border: none;
    font-weight: 500
}

.game-satis-wrapper {
    width: 780px;
    height: 740px;
    margin: 0 auto
}

.game-satis-wrapper .goldBuyConfirm {
    text-align: center
}

.game-satis-wrapper .goldBuyConfirm .buyConfirm {
    border: none;
    text-align: left
}

.game-satis-wrapper .goldBuyConfirm .buyConfirm h4 {
    width: 720px;
    height: 90px;
    display: block;
    text-align: center;
    margin: 0 auto;
    padding: 0!important;
    font-size: 26px;
    color: #4f5b6d;
    border-bottom: 1px solid #a5aab3;
    background: #fff;
    line-height: 90px
}

.game-satis-wrapper .goldBuyConfirm .buyConfirm h4:before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    position: absolute;
    background: #a5aab3;
    border-radius: 5px;
    margin-top: 88px
}

.game-satis-wrapper .goldBuyConfirm .buyConfirm h4:after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    position: absolute;
    background: #a5aab3;
    border-radius: 5px;
    margin-top: -2px;
    margin-left: 715px
}

.game-satis-wrapper .goldBuyConfirm .buyInfo {
    width: 678px;
    height: 185px;
    border: 1px solid #d6d6d6;
    margin: 32px auto 0;
    padding: 20px
}

.game-satis-wrapper .goldBuyConfirm .buyInfo .box {
    width: 221px;
    height: 181px;
    border: 1px solid #d6d6d6
}

.game-satis-wrapper .goldBuyConfirm .buyInfo .box em {
    width: 100%;
    height: 48px;
    display: block
}

.game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .box > div {
    height: 100%
}

.game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .box > div span {
    padding: 0
}

.game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .box > div span strong {
    font-size: 22px
}

.game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list {
    width: 413px;
    height: 185px;
    padding-left: 30px
}

.game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul li {
    line-height: 34px
}

.game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst01 span {
    color: #444
}

.game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst02 span {
    color: #444
}

.game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst03 span {
    color: #009cff;
    font-size: 22px
}

.game-satis-wrapper .couponKeyBox {
    width: 700px;
    height: 291px;
    background: url(../../images/payment/gamesatis-logo.gif) 23px 30px no-repeat #556276;
    margin: 20px auto 0;
    padding: 0 10px 10px;
    text-align: left
}

.game-satis-wrapper .couponKeyBox h1 {
    display: block;
    width: 100%;
    height: 80px;
    color: #fff;
    font-size: 20px;
    line-height: 98px;
    text-indent: 190px
}

.game-satis-wrapper .couponKeyBox .couponKey {
    background: none;
    border: none
}

.game-satis-wrapper .couponKeyBox .couponKey .coupon {
    width: 100%;
    height: 205px;
    border: none;
    background: #f7f7f7;
    padding: 0;
    margin: 0
}

.game-satis-wrapper .couponKeyBox .couponKey .coupon ul {
    width: 612px;
    height: 50px;
    padding: 50px 0 30px;
    margin: auto
}

.game-satis-wrapper .couponKeyBox .couponKey .coupon ul li {
    width: 140px;
    height: 50px;
    padding: 0;
    margin: 0;
    float: left;
    overflow: hidden
}

.game-satis-wrapper .couponKeyBox .couponKey .coupon ul li > input {
    width: 104px;
    height: 48px;
    line-height: 50px;
    padding: 0 17px;
    float: left;
    border: 1px solid #d6d6d6;
    color: #777;
    font-size: 24px;
    text-align: center
}

.game-satis-wrapper .couponKeyBox .couponKey .coupon ul li > input:focus {
    border-color: #777
}

.game-satis-wrapper .couponKeyBox .couponKey .coupon ul li > input::-webkit-input-placeholder {
    font-size: 24px;
    letter-spacing: 9px;
    text-align: center;
    text-indent: 6px
}

.game-satis-wrapper .couponKeyBox .couponKey .coupon ul li > input::-moz-input-placeholder {
    font-size: 24px;
    letter-spacing: 9px;
    text-align: center
}

.game-satis-wrapper .couponKeyBox .couponKey .coupon ul li > input:-ms-input-placeholder {
    font-size: 24px;
    letter-spacing: 9px;
    text-align: center
}

.game-satis-wrapper .couponKeyBox .couponKey .coupon ul li > input:-moz-input-placeholder {
    font-size: 24px;
    letter-spacing: 9px;
    text-align: center
}

.game-satis-wrapper .couponKeyBox .couponKey .coupon ul .gubun {
    width: 17px;
    height: 50px;
    background: none
}

.game-satis-wrapper .couponKeyBox .couponKey .coupon ul .gubun:before {
    content: '';
    display: block;
    width: 8px;
    height: 1px;
    background: #d6d6d6;
    position: absolute;
    margin: 25px 0 0 5px
}

.game-satis-wrapper .goldBuyConfirm .btnCenter {
    padding: 0
}

.game-satis-btn {
    display: block;
    width: 188px;
    height: 51px;
    border-radius: 3px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    background: #556276;
    background: -moz-linear-gradient(top, #556276 0, #525f72 50%, #4b5668 75%, #475263 100%);
    background: -webkit-linear-gradient(top, #556276 0,#525f72 50%,#4b5668 75%,#475263 100%);
    background: linear-gradient(to bottom, #556276 0,#525f72 50%,#4b5668 75%,#475263 100%)
}

.game-satis-btn span {
    padding: 0!important;
    margin: 30px 0 0!important;
    color: #fff!important;
    line-height: 51px;
    font-size: 22px
}

.game-satis-info {
    display: inline-block;
    width: auto;
    height: 14px;
    color: #a4a4a4;
    font-size: 12px;
    text-align: center;
    margin: 10px auto 0
}

.game-statis-go {
    color: #009cff
}

.game-statis-go:hover {
    text-decoration: underline
}

.goldBuyConfirm {
    padding-bottom: 100px
}

.goldBuyConfirm .ment {
    padding: 70px 0 90px 283px;
    color: #7d7d7d;
    font-size: 26px;
    font-weight: 400
}

.goldBuyConfirm .ment strong {
    display: block;
    color: #235b7f;
    font-size: 39px;
    line-height: 38px;
    padding-bottom: 8px
}

.goldBuyConfirm .ment.wait {
    padding: 68px 0 70px;
    background: none;
    color: #7d7d7d;
    font-size: 26px;
    font-weight: 400
}

.goldBuyConfirm .ment.wait ul#progressDot {
    width: 60px;
    height: 10px;
    margin: 0 auto 20px
}

.goldBuyConfirm .ment.wait ul#progressDot li {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: #00f;
    float: left;
    border-radius: 50%
}

.goldBuyConfirm .ment.wait ul#progressDot.frst li.frst {
    background: #d3dee5
}

.goldBuyConfirm .ment.wait ul#progressDot.frst li.scnd {
    background: #7b9db2
}

.goldBuyConfirm .ment.wait ul#progressDot.frst li.thrd {
    background: #235b7f
}

.goldBuyConfirm .ment.wait ul#progressDot.scnd li.frst {
    background: #235b7f
}

.goldBuyConfirm .ment.wait ul#progressDot.scnd li.scnd {
    background: #d3dee5
}

.goldBuyConfirm .ment.wait ul#progressDot.scnd li.thrd {
    background: #7b9db2
}

.goldBuyConfirm .ment.wait ul#progressDot.thrd li.frst {
    background: #7b9db2
}

.goldBuyConfirm .ment.wait ul#progressDot.thrd li.scnd {
    background: #235b7f
}

.goldBuyConfirm .ment.wait ul#progressDot.thrd li.thrd {
    background: #d3dee5
}

.goldBuyConfirm .ment.wait strong {
    display: block;
    color: #235b7f;
    font-size: 39px;
    line-height: 38px;
    padding-bottom: 8px;
    text-align: center;
    font-weight: bolder
}

.goldBuyConfirm h3.waitInfo {
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
    color: #989898
}

.goldBuyConfirm button.btnCharge {
    width: 185px;
    height: 58px;
    color: #fff;
    font-size: 22px;
    border: 1px solid #306f8c;
    background: #00bae7;
    background: -moz-linear-gradient(top, #00bae7 0, #0189c5 100%);
    background: -webkit-linear-gradient(top, #00bae7 0,#0189c5 100%);
    background: linear-gradient(to bottom, #00bae7 0,#0189c5 100%);
    -webkit-box-shadow: 0 0 2px 2px rgba(0,255,238,0.32);
    -moz-box-shadow: 0 0 2px 2px rgba(0,255,238,0.32);
    box-shadow: 0 0 2px 2px rgba(0,255,238,0.32)
}

.goldBuyConfirm button.btnCharge:hover {
    border-color: #105c80;
    background: #7db9e8;
    background: -moz-linear-gradient(top, #7db9e8 0, #1e5799 99%);
    background: -webkit-linear-gradient(top, #7db9e8 0,#1e5799 99%);
    background: linear-gradient(to bottom, #7db9e8 0,#1e5799 99%)
}

.bynogame-wrapper {
    width: 780px;
    height: 740px;
    margin: 0 auto
}

.bynogame-wrapper .goldBuyConfirm {
    text-align: center
}

.bynogame-wrapper .goldBuyConfirm .buyConfirm {
    border: none;
    text-align: left
}

.bynogame-wrapper .goldBuyConfirm .buyConfirm h4 {
    width: 720px;
    height: 90px;
    display: block;
    text-align: center;
    margin: 0 auto;
    padding: 0!important;
    font-size: 26px;
    color: #4f5b6d;
    border-bottom: 1px solid #a5aab3;
    background: #fff;
    line-height: 90px
}

.bynogame-wrapper .goldBuyConfirm .buyConfirm h4:before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    position: absolute;
    background: #a5aab3;
    border-radius: 5px;
    margin-top: 88px
}

.bynogame-wrapper .goldBuyConfirm .buyConfirm h4:after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    position: absolute;
    background: #a5aab3;
    border-radius: 5px;
    margin-top: -2px;
    margin-left: 715px
}

.bynogame-wrapper .goldBuyConfirm .buyInfo {
    width: 678px;
    height: 185px;
    border: 1px solid #d6d6d6;
    margin: 32px auto 0;
    padding: 20px
}

.bynogame-wrapper .goldBuyConfirm .buyInfo .box {
    width: 221px;
    height: 181px;
    border: 1px solid #d6d6d6
}

.bynogame-wrapper .goldBuyConfirm .buyInfo .box em {
    width: 100%;
    height: 48px;
    display: block
}

.bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .box > div {
    height: 100%
}

.bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .box > div span {
    padding: 0
}

.bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .box > div span strong {
    font-size: 22px
}

.bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list {
    width: 413px;
    height: 185px;
    padding-left: 30px
}

.bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul li {
    line-height: 34px
}

.bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst01 span {
    color: #444
}

.bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst02 span {
    color: #444
}

.bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst03 span {
    color: #009cff;
    font-size: 22px
}

.bynogame-wrapper .couponKeyBox {
    width: 700px;
    height: 291px;
    background: url(../../images/payment/bynogame-logo-koyu-fon.png?v=4) 28px 25px/144px no-repeat #556276;
    margin: 20px auto 0;
    padding: 0 10px 10px;
    text-align: left
}

.bynogame-wrapper .couponKeyBox h1 {
    display: block;
    width: 100%;
    height: 80px;
    color: #fff;
    font-size: 20px;
    line-height: 98px;
    text-indent: 190px
}

.bynogame-wrapper .couponKeyBox .couponKey {
    background: none;
    border: none
}

.bynogame-wrapper .couponKeyBox .couponKey .coupon {
    width: 100%;
    height: 205px;
    border: none;
    background: #f7f7f7;
    padding: 0;
    margin: 0
}

.bynogame-wrapper .couponKeyBox .couponKey .coupon ul {
    width: 612px;
    height: 50px;
    padding: 50px 0 30px;
    margin: auto
}

.bynogame-wrapper .couponKeyBox .couponKey .coupon ul li {
    width: 140px;
    height: 50px;
    padding: 0;
    margin: 0;
    float: left;
    overflow: hidden
}

.bynogame-wrapper .couponKeyBox .couponKey .coupon ul li > input {
    width: 104px;
    height: 48px;
    line-height: 50px;
    padding: 0 17px;
    float: left;
    border: 1px solid #d6d6d6;
    color: #777;
    font-size: 24px;
    text-align: center
}

.bynogame-wrapper .couponKeyBox .couponKey .coupon ul li > input:focus {
    border-color: #777
}

.bynogame-wrapper .couponKeyBox .couponKey .coupon ul li > input::-webkit-input-placeholder {
    font-size: 24px;
    letter-spacing: 9px;
    text-align: center;
    text-indent: 6px
}

.bynogame-wrapper .couponKeyBox .couponKey .coupon ul li > input::-moz-input-placeholder {
    font-size: 24px;
    letter-spacing: 9px;
    text-align: center
}

.bynogame-wrapper .couponKeyBox .couponKey .coupon ul li > input:-ms-input-placeholder {
    font-size: 24px;
    letter-spacing: 9px;
    text-align: center
}

.bynogame-wrapper .couponKeyBox .couponKey .coupon ul li > input:-moz-input-placeholder {
    font-size: 24px;
    letter-spacing: 9px;
    text-align: center
}

.bynogame-wrapper .couponKeyBox .couponKey .coupon ul .gubun {
    width: 17px;
    height: 50px;
    background: none
}

.bynogame-wrapper .couponKeyBox .couponKey .coupon ul .gubun:before {
    content: '';
    display: block;
    width: 8px;
    height: 1px;
    background: #d6d6d6;
    position: absolute;
    margin: 25px 0 0 5px
}

.bynogame-wrapper .goldBuyConfirm .btnCenter {
    padding: 0
}

.bynogame-btn {
    display: block;
    width: 188px;
    height: 51px;
    border-radius: 3px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    background: #556276;
    background: -moz-linear-gradient(top, #556276 0, #525f72 50%, #4b5668 75%, #475263 100%);
    background: -webkit-linear-gradient(top, #556276 0,#525f72 50%,#4b5668 75%,#475263 100%);
    background: linear-gradient(to bottom, #556276 0,#525f72 50%,#4b5668 75%,#475263 100%)
}

.bynogame-btn span {
    padding: 0!important;
    margin: 30px 0 0!important;
    color: #fff!important;
    line-height: 51px;
    font-size: 22px
}

.bynogame-info {
    display: inline-block;
    width: auto;
    height: 14px;
    color: #a4a4a4;
    font-size: 12px;
    text-align: center;
    margin: 10px auto 0
}

.bynogame-go {
    color: #009cff
}

.bynogame-go:hover {
    text-decoration: underline
}

.box_price_name_wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8f8f8;
    margin-top: 2rem
}

.box_price_name_wrap .box_line {
    width: 1px;
    height: 36px;
    background: #d1d1d1
}

.box_price_name_wrap .box_price_name {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 48px
}

.box_price_name_wrap .box_name {
    font-size: 14px;
    color: #6f6f6f
}

.box_price_name_wrap .box_content {
    font-size: 20px
}

.btn_pay_next {
    font-size: 18px;
    width: 280px
}

.recommend_box {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end
}

.recommend_box .field-validation-error,.recommend_box .field-validation-valid {
    transition: transform 0.2s,opacity 0.3s
}

.recommend_box .field-validation-valid {
    opacity: 0;
    transform: translate3d(0, -0.3rem, 0)
}

.recommend_box .field-validation-error {
    position: absolute;
    left: 0.4rem;
    top: 4.5rem;
    display: block;
    padding: 1rem;
    max-width: 286px;
    font-size: 0.812rem;
    color: #e74c3c;
    border: 1px solid #ddd;
    border-radius: 0.3rem;
    background: #fff;
    box-shadow: 0.05rem 0.1rem 0.6rem rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    transform: translate3d(0, 0, 0);
    opacity: 1
}

.recommend_box .field-validation-error:before {
    content: '';
    position: absolute;
    left: 1.2rem;
    top: -0.4rem;
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    background: #fff;
    transform: rotate( -45deg)
}

.recommend_wrap {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding: 1.53rem 2.4rem;
    background: #f8f8f8
}

.recommend_wrap .text {
    margin-right: 0.4em
}

.recommend_wrap .icn_question,.recommend_wrap .icn_question:before {
    display: inline-block;
    width: 17px;
    height: 17px
}

.recommend_wrap .icn_question:before {
    content: '';
    border-radius: 50%;
    background: url(../../images/payment/icn_question.svg) no-repeat center center;
    background-size: contain;
    z-index: 1;
    box-sizing: border-box;
    opacity: 1;
    transition: opacity 0.2s;
    opacity: 0.5
}

.recommend_wrap .recommend_tooltip {
    position: absolute;
    left: -36px;
    top: 28px;
    display: block;
    width: 340px;
    padding: 1rem;
    font-size: 0.812rem;
    line-height: 1.4;
    border: 1px solid #d2d2d2;
    border-radius: 0.3rem;
    color: #5f5f5f;
    background: #fff;
    box-sizing: border-box;
    -webkit-transition: transform .1s ease,opacity .1s ease,visibility .1s ease,z-index .1s ease,top .2s;
    transition: transform .1s ease,opacity .1s ease,visibility .1s ease,z-index .1s ease,top .2s;
    box-shadow: 0.05rem 0.1rem 0.6rem rgba(0, 0, 0, 0.15);
    transform: translate3d(0, -1rem, 0);
    opacity: 0;
    visibility: hidden
}

.recommend_wrap .recommend_tooltip .list .item {
    position: relative;
    padding-left: 0.6em
}

.recommend_wrap .recommend_tooltip .list .item + .item {
    margin-top: 0.6em
}

.recommend_wrap .recommend_tooltip .list .item:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #848484
}

.recommend_wrap .recommend_tooltip:before {
    content: '';
    position: absolute;
    left: 43px;
    top: 0;
    display: block;
    width: 10px;
    height: 10px;
    border-top: 1px solid #d2d2d2;
    border-right: 1px solid #d2d2d2;
    background: #fff;
    transform: translate3d(-50%, -50%, 0) rotate(-45deg);
    transform: translate3d(-50%, calc(-50% - 1px), 0) rotate(-45deg)
}

.recommend_wrap .recommend_title:hover .recommend_tooltip {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
    z-index: 50
}

.recommend_wrap .recommend_title:hover .icn_question:before {
    opacity: 1
}

.recommend_wrap .recommend_title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    line-height: 21px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none
}

.recommend_wrap .recommend_input {
    flex: 0 0 auto;
    width: 300px;
    height: 3.75rem;
    padding: 1.125rem 1.625rem;
    box-sizing: border-box
}

.recommend_wrap .recommend_title {
    font-size: 16px
}

.recommend_wrap .recommend_input_wrap {
    position: relative
}

.recommend_wrap .recommend_input {
    font-size: 14px
}

html:lang(zh-TW) .package_list > ul > li .package .top_info_pack .item_package:before {
    background-image: url(../../images/payment/package_item_box_spr_tw.png?v=4)
}

html:lang(zh-TW) #renewal_package_wrap .package_img_area .package_img,html:lang(zh-TW) .box_pay_item .item_img .img_area.package:before {
    background-image: url(../../images/payment/renewal_package_item_spr_tw.png?v=4)
}

@media screen and (max-width: 1600px) {
    .pearl_shop_list_wrap > .inner {
        max-width:975px
    }

    .pearl_shop_list_wrap > .inner > ul > li.blank_item:after {
        background-size: contain;
        width: 330px;
        height: 410px;
        top: auto;
        bottom: 0
    }

    .pearl_shop_list_wrap > .inner > ul > li:nth-child(4n) + .blank_item {
        display: block
    }

    .pearl_shop_list_wrap > .inner > ul > li:nth-child(3n) + .blank_item {
        display: none
    }
}

@media screen and (min-width: 768px) {
    .recommend_wrap .icn_question {
        position:relative
    }
}

@media screen and (min-width: 1025px) and (max-width: 1557px) {
    .top_package_visual {
        padding-top:64px
    }
}

@media screen and (max-width: 1280px) {
    #renewal_package_wrap.quarter .renewal_package_ul {
        max-width:640px
    }
}

@media screen and (max-width: 1024px) {
    .content {
        padding-bottom:0
    }

    .container.package {
        background-color: #d7d7d7
    }

    .container.acoin_charge .content,.container.coupon .content {
        padding-bottom: 3.333rem
    }

    body.bdc .container.coupon .content {
        background: #fff
    }

    .container {
        background: #fff
    }

    .container.pearl .content {
        padding: 0 1.25rem;
        background: #d7d7d7
    }

    .container.pearl .box_prouct_info {
        padding-left: 0;
        padding-right: 0
    }

    .container.acoin_charge .content {
        background: 0 0
    }

    .top_visual_title {
        padding-top: 1.8333rem;
        font-size: 2.166rem
    }

    h2.align_title {
        padding-top: 4.5rem
    }

    .h2_desc {
        margin-top: 0.75rem;
        font-size: 0.791rem;
        line-height: 1.47
    }

    .top_pay_select_visual {
        height: 13.75rem;
        padding-top: 4.166rem;
        background: url(../../images/payment/m_payment_top_visual_bg.jpg) 50% 0 no-repeat;
        background-size: cover
    }

    .top_pay_select_visual h2 {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding-top: 0;
        padding: 0 1rem
    }

    .payment_wrap {
        padding: 0 0 3.33rem;
        background: #fff
    }

    .payment_wrap > .inner {
        margin-top: 0
    }

    .payment_wrap .box_pay_tit {
        margin-bottom: 2.083rem
    }

    .payment_wrap .box_pay_tit h3 {
        line-height: 1.666rem;
        font-size: 1rem
    }

    .payment_wrap .box_pay_tit h3 .mob_block {
        display: block
    }

    .payment_wrap .box_pay_tit h3.mark_complete:before {
        width: 1.166rem;
        height: 1.166rem
    }

    .payment_wrap .box_pay_tit h3.mark_complete:after {
        width: 0.4583rem;
        height: 1.125rem;
        left: 0.516rem;
        top: -0.0416rem;
        border-width: 0.15rem
    }

    .payment_wrap .agree_wrap {
        padding: 0 1.5rem
    }

    .pay_select_list li {
        flex: 0 0 50%
    }

    .pay_select_list li.blank_item {
        display: block
    }

    .pay_select_list li .custom_radio label,.pay_select_list li.blank_item .custom_radio {
        height: 3.75rem;
        font-size: 0.916rem;
        padding-left: 2.666rem;
        padding-right: .5rem
    }

    .pay_select_list li:nth-last-of-type(-n+4) .custom_radio label {
        border-bottom-color: transparent
    }

    .pay_select_list li:nth-last-of-type(-n+3) .custom_radio label {
        border-bottom: 1px solid #e0e0e0
    }

    .pay_select_list li:nth-of-type(3n-2) .custom_radio label {
        border-left-color: transparent
    }

    .pay_select_list li:nth-of-type(2n-1) .custom_radio label {
        border-left-color: #e0e0e0
    }

    .pay_select_list .custom_radio input[type="radio"] + label:after,.pay_select_list .custom_radio input[type="radio"] + label:before {
        left: 1.291rem
    }

    .pay_select_list li:nth-child(2n) + .blank_item {
        display: none
    }

    .payment_wrap .btn_wrap {
        margin: 0;
        padding: 2rem 1.25rem 0
    }

    .payment_wrap .btn_wrap .btn + .btn {
        margin-left: 5px
    }

    #modalPaymentProgress .modal-dialog {
        width: 100%;
        max-width: 90%;
        height: auto;
        max-height: 90%
    }

    .bynogame-wrapper,.game-satis-wrapper {
        max-width: 780px;
        width: 100%;
        max-height: 740px;
        height: auto
    }

    .goldBuyConfirm {
        padding-bottom: 5rem
    }

    .bynogame-wrapper .goldBuyConfirm .buyConfirm h4 {
        max-width: 720px;
        width: 100%;
        height: 5rem;
        position: relative;
        font-size: 1.5rem;
        line-height: 5rem
    }

    .bynogame-wrapper .goldBuyConfirm .buyConfirm h4:before {
        left: 0;
        width: 0.36rem;
        height: 0.36rem;
        border-radius: 0.36rem;
        margin-top: 4.84rem;
        bottom: -0.2rem
    }

    .bynogame-wrapper .goldBuyConfirm .buyConfirm h4:after {
        right: 0;
        width: 0.36rem;
        height: 0.36rem;
        border-radius: 0.36rem;
        margin-top: 4.84rem;
        margin-left: 0;
        bottom: -0.2rem
    }

    .bynogame-wrapper .goldBuyConfirm .buyInfo {
        display: flex;
        align-items: center;
        max-width: 678px;
        width: 100%;
        height: auto;
        margin: 1.5rem auto 0;
        padding: 1.2rem;
        box-sizing: border-box
    }

    .bynogame-wrapper .goldBuyConfirm .buyInfo .box {
        float: initial;
        width: 13rem;
        height: auto;
        flex-shrink: 0
    }

    .bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .box > div span strong {
        font-size: 1.4rem
    }

    .bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list {
        float: initial;
        width: 100%;
        height: auto;
        padding-left: 2rem;
        box-sizing: border-box
    }

    .bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul li {
        font-size: 1.3rem;
        line-height: 2rem
    }

    .bynogame-wrapper .couponKeyBox {
        max-width: 678px;
        width: 100%;
        height: auto;
        margin: 1.4rem auto 0;
        padding: 0 0.8rem 0.8rem;
        box-sizing: border-box;
        background-size: 10rem auto;
        background-position: 2rem 1.6rem
    }

    .bynogame-wrapper .couponKeyBox h1 {
        height: 5rem;
        font-size: 1.5rem;
        line-height: 5.5rem;
        text-indent: 14rem
    }

    .bynogame-wrapper .couponKeyBox .couponKey .coupon {
        height: auto;
        padding-bottom: 2rem
    }

    .bynogame-wrapper .couponKeyBox .couponKey .coupon ul {
        width: 100%;
        padding: 2rem 1rem 1.5rem;
        box-sizing: border-box;
        height: auto;
        display: flex;
        justify-content: space-between
    }

    .bynogame-wrapper .couponKeyBox .couponKey .coupon ul li {
        width: 22%;
        height: 3rem;
        float: initial
    }

    .bynogame-wrapper .couponKeyBox .couponKey .coupon ul li > input {
        width: 100%;
        height: 100%;
        line-height: 100%;
        padding: 0;
        float: initial;
        font-size: 1.4rem;
        box-sizing: border-box
    }

    .bynogame-wrapper .couponKeyBox .couponKey .coupon ul li > input::placeholder {
        font-size: 1.4rem;
        letter-spacing: 0.1rem;
        text-indent: 0
    }

    .bynogame-wrapper .couponKeyBox .couponKey .coupon ul .gubun {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 4%;
        height: 3rem
    }

    .bynogame-wrapper .couponKeyBox .couponKey .coupon ul .gubun::before {
        position: static;
        width: 0.6rem;
        text-align: center;
        margin: 0
    }

    .bynogame-wrapper .goldBuyConfirm .btnCenter {
        text-align: center
    }

    .bynogame-wrapper .bynogame-btn {
        display: inline-block;
        width: auto;
        min-width: 14rem;
        height: 3.5rem
    }

    .bynogame-wrapper .bynogame-btn span {
        margin: 0!important;
        line-height: 3.5rem;
        font-size: 1.5rem
    }

    .bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .box > div {
        font-size: 1.4rem
    }

    .bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .box > div em {
        font-size: 1.2rem;
        background-size: contain;
        padding-top: 5.9rem;
        height: 3.4rem
    }

    .bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst03 {
        margin-top: 1.2rem;
        padding-top: 1.2rem
    }

    .bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst01 span,.bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst02 span,.bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst03 span {
        padding-left: 0.3rem;
        font-size: 1.3rem
    }

    .bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul li img {
        width: 1.3rem;
        height: auto;
        margin-right: 0.4rem;
        top: -0.15rem
    }

    .game-satis-wrapper .goldBuyConfirm .buyConfirm h4 {
        max-width: 720px;
        width: 100%;
        height: 5rem;
        position: relative;
        font-size: 1.5rem;
        line-height: 5rem
    }

    .game-satis-wrapper .goldBuyConfirm .buyConfirm h4:before {
        left: 0;
        width: 0.36rem;
        height: 0.36rem;
        border-radius: 0.36rem;
        margin-top: 4.84rem;
        bottom: -0.2rem
    }

    .game-satis-wrapper .goldBuyConfirm .buyConfirm h4:after {
        right: 0;
        width: 0.36rem;
        height: 0.36rem;
        border-radius: 0.36rem;
        margin-top: 4.84rem;
        margin-left: 0;
        bottom: -0.2rem
    }

    .game-satis-wrapper .goldBuyConfirm .buyInfo {
        display: flex;
        align-items: center;
        max-width: 678px;
        width: 100%;
        height: auto;
        margin: 1.5rem auto 0;
        padding: 1.2rem;
        box-sizing: border-box
    }

    .game-satis-wrapper .goldBuyConfirm .buyInfo .box {
        float: initial;
        width: 13rem;
        height: auto;
        flex-shrink: 0
    }

    .game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .box > div span strong {
        font-size: 1.4rem
    }

    .game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list {
        float: initial;
        width: 100%;
        height: auto;
        padding-left: 2rem;
        box-sizing: border-box
    }

    .game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul li {
        font-size: 1.3rem;
        line-height: 2rem
    }

    .game-satis-wrapper .couponKeyBox {
        max-width: 678px;
        width: 100%;
        height: auto;
        margin: 1.4rem auto 0;
        padding: 0 0.8rem 0.8rem;
        box-sizing: border-box;
        background-size: 10rem auto;
        background-position: 2rem 1.6rem
    }

    .game-satis-wrapper .couponKeyBox h1 {
        height: 5rem;
        font-size: 1.5rem;
        line-height: 5.5rem;
        text-indent: 14rem
    }

    .game-satis-wrapper .couponKeyBox .couponKey .coupon {
        height: auto;
        padding-bottom: 2rem
    }

    .game-satis-wrapper .couponKeyBox .couponKey .coupon ul {
        width: 100%;
        padding: 2rem 1rem 1.5rem;
        box-sizing: border-box;
        height: auto;
        display: flex;
        justify-content: space-between
    }

    .game-satis-wrapper .couponKeyBox .couponKey .coupon ul li {
        width: 22%;
        height: 3rem;
        float: initial
    }

    .game-satis-wrapper .couponKeyBox .couponKey .coupon ul li > input {
        width: 100%;
        height: 100%;
        line-height: 100%;
        padding: 0;
        float: initial;
        font-size: 1.4rem;
        box-sizing: border-box
    }

    .game-satis-wrapper .couponKeyBox .couponKey .coupon ul li > input::placeholder {
        font-size: 1.4rem;
        letter-spacing: 0.1rem;
        text-indent: 0
    }

    .game-satis-wrapper .couponKeyBox .couponKey .coupon ul .gubun {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 4%;
        height: 3rem
    }

    .game-satis-wrapper .couponKeyBox .couponKey .coupon ul .gubun::before {
        position: static;
        width: 0.6rem;
        text-align: center;
        margin: 0
    }

    .game-satis-wrapper .goldBuyConfirm .btnCenter {
        text-align: center
    }

    .game-satis-wrapper .game-satis-btn {
        display: inline-block;
        width: auto;
        min-width: 14rem;
        height: 3.5rem
    }

    .game-satis-wrapper .game-satis-btn span {
        margin: 0!important;
        line-height: 3.5rem;
        font-size: 1.5rem
    }

    .game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .box > div {
        font-size: 1.4rem
    }

    .game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .box > div em {
        font-size: 1.2rem;
        background-size: contain;
        padding-top: 5.9rem;
        height: 3.4rem
    }

    .game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst03 {
        margin-top: 1.2rem;
        padding-top: 1.2rem
    }

    .game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst01 span,.game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst02 span,.game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst03 span {
        padding-left: 0.3rem;
        font-size: 1.3rem
    }

    .game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul li img {
        width: 1.3rem;
        height: auto;
        margin-right: 0.4rem;
        top: -0.15rem
    }

    .box_payment {
        min-height: inherit;
        height: auto;
        max-height: 100%;
        padding: 2.5rem 1.5rem;
        padding-bottom: 0
    }

    .box_nickname {
        width: 100%;
        margin: 0 auto;
        padding-bottom: 3.333rem
    }

    .pearl_shop_list_wrap > .inner > .btn_top {
        top: -5.833rem;
        width: 100%
    }

    .pearl_shop_list_wrap > .inner > .msg_top {
        top: -2.533rem;
        justify-content: center;
        align-items: center;
        left: 0;
        width: 100%;
        line-height: 1.1rem;
        height: 2.2rem
    }

    .pearl_shop_list_wrap > .inner > .btn_top .btn_limited {
        height: 2.916rem;
        box-sizing: border-box;
        margin: 0
    }

    .acoin_charge_wrap > .inner > .btn_top {
        top: -3.833rem;
        width: 100%
    }

    .acoin_charge_wrap > .inner > .btn_top .btn_limited {
        height: 2.916rem;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0
    }

    .pay_item_wrap {
        padding-top: 1.666rem;
        padding-bottom: 1.666rem;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0
    }

    .pay_acoin_wrap {
        border-bottom: 0;
        padding-bottom: 0
    }

    .pay_item_wrap h4 {
        font-size: 0.916rem
    }

    .box_pay_item {
        border: 0
    }

    .box_pay_item .item_img {
        padding: 0;
        width: 11.666rem
    }

    .box_pay_item .item_info {
        padding: 0;
        padding-left: 1.458rem
    }

    .box_pay_item .item_info li {
        font-size: 0.916rem;
        margin: 1rem 0
    }

    .box_pay_item .item_info .my_acoin {
        display: none
    }

    .pay_package_wrap .pay_item_wrap h4 {
        margin-bottom: 1rem
    }

    .pay_package_wrap .box_pay_item {
        flex-direction: column;
        align-items: flex-start
    }

    .pay_package_wrap .box_pay_item .item_img,.pay_package_wrap .box_pay_item .item_img .img_area {
        width: 100%
    }

    .pay_package_wrap .box_pay_item .item_info {
        padding: 1.458rem 1.458rem 0 1.458rem
    }

    .pay_package_wrap .box_pay_item .item_img .img_area.package:before {
        margin-top: 0.6rem
    }

    .box_payment .my_acoin .btn_wrap .btn {
        min-width: 0;
        height: 2.916rem
    }

    .my_acoin.my_coin_mob {
        display: flex;
        align-items: center;
        justify-content: center;
        -ms-flex-align: center;
        justify-content: flex-start;
        height: 5rem;
        box-sizing: border-box;
        margin-top: 1.583rem;
        padding: 0 1rem;
        background: #f5f5f5;
        border: 1px solid #e0e0e0;
        text-align: center
    }

    .my_acoin.my_coin_mob .my_acoin_detail {
        display: flex;
        align-items: center;
        justify-content: center;
        -ms-flex-align: center;
        width: 50%;
        margin: 0 auto
    }

    .my_acoin.my_coin_mob .btn_wrap {
        min-width: 10.625rem;
        margin: 0 0 0 auto
    }

    .my_acoin.my_coin_mob .btn_wrap .btn {
        max-width: none;
        width: 100%
    }

    .my_acoin span.my_coin_txt {
        font-size: 0.916rem;
        padding-left: 1.75rem
    }

    .my_acoin span.my_coin {
        font-size: 1.333rem;
        margin: 0 0 0 6px
    }

    .my_acoin span.my_coin_txt:before {
        width: 1.583rem;
        height: 1.583rem;
        background-position: -8.5rem -35.958rem;
        background-size: 66.66rem 66.66rem
    }

    .pay_lodding_wrap h4 {
        font-size: 1rem;
        margin-top: 1.666rem
    }

    .pay_lodding_wrap .payment_sub_title {
        font-size: 0.916rem;
        margin-top: 1.2rem
    }

    .pay_lodding_wrap .payment_desc {
        font-size: 0.916rem;
        margin-top: 1.666rem
    }

    .pay_lodding_wrap .payment_desc:last-of-type {
        margin-top: 0.1666rem
    }

    .pay_lodding_wrap .payment_desc.fail {
        margin-top: 1rem
    }

    .pay_lodding_wrap.fail {
        margin-top: 0
    }

    .pay_lodding_wrap.fail .icon.icn_fail {
        width: 3.75rem;
        height: 3.75rem
    }

    .pay_lodding_wrap.fail .icon.icn_fail:before {
        background-size: 66.66rem 66.66rem;
        background-position: -21.0833rem -39.7083rem
    }

    .btn_molpay {
        width: 100%;
        height: 4rem;
        margin: 1.25rem auto
    }

    .btn_molpay::after {
        border-bottom: 52px solid transparent;
        border-left: 52px solid #52d54f
    }

    .btn_molpay .molpay_desc_wrap {
        padding: 0 40px
    }

    .btn_molpay .mol_desc1 {
        font-size: 1.1rem
    }

    .btn_molpay .mol_desc2 {
        font-size: 0.94rem
    }

    body.app_mode .top_coupon_visual,body.app_mode.bdc .top_coupon_visual {
        box-sizing: border-box;
        padding: 0 1rem 3rem
    }

    .container.coupon .content {
        background: #d7d7d7
    }

    .top_coupon_visual {
        height: auto;
        box-sizing: border-box;
        padding: 5.166rem 0 3rem;
        background-image: url(../../images/payment/m_coupon_top_visual_bg.jpg?v=4);
        background-size: cover
    }

    .top_coupon_visual .coupon_available_btn {
        margin-top: 1.4rem;
        padding: 0.9rem 2rem;
        border-radius: 0.2rem;
        font-size: 0.9rem
    }

    .coupon_wrap {
        max-width: inherit
    }

    .coupon_wrap .inner {
        margin-top: -1px
    }

    .coupon_wrap .inner:after,.coupon_wrap .inner:before {
        content: '';
        display: inline-block;
        position: absolute;
        z-index: 12;
        width: 6.25rem;
        height: 6.417rem;
        background: url(../../images/payment/m_coupon_input_edgebg.png?v=4) no-repeat center 0/6.25rem 6.417rem
    }

    .coupon_wrap .inner:before {
        left: 0;
        top: 0
    }

    .coupon_wrap .inner:after {
        right: 0;
        top: 28.07rem;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    .coupon_wrap .box_coupon {
        width: 100%;
        height: 34.5rem;
        padding: 2.5rem 0 2.5rem 0;
        background: #fff
    }

    .coupon_wrap .box_coupon:after,.coupon_wrap .box_coupon:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 1rem;
        background: url(../../images/payment/m_coupon_input_linebg.jpg?v=4) no-repeat center 0;
        background-size: cover
    }

    .coupon_wrap .box_coupon:before {
        top: 0
    }

    .coupon_wrap .box_coupon:after {
        bottom: 0
    }

    .coupon_wrap .box_coupon_tit {
        width: 85%;
        height: 6rem;
        padding-bottom: 1.5rem
    }

    .coupon_wrap .box_coupon_tit h3 {
        font-size: 1.1666rem
    }

    .coupon_wrap .box_coupon_tit .h3_desc {
        font-size: 1rem;
        margin-top: 0.5rem;
        line-height: 1.3
    }

    .coupon_wrap #couponForm {
        margin: 0
    }

    .coupon_wrap .box_coupon .mid_bg_area {
        background: #f4f3f2;
        box-sizing: border-box;
        padding: 1rem 20%
    }

    .coupon_wrap .coupon_input_title {
        font-size: 0.9167rem
    }

    .coupon_wrap .box_coupon .nickname_title,.coupon_wrap .coupon_input_wrap + .coupon_input_title {
        margin-top: 0.8rem
    }

    .coupon_wrap .coupon_input_wrap {
        box-sizing: border-box;
        margin: 0.4rem 0 0
    }

    .coupon_wrap .box_coupon .server_select {
        margin: 0.4rem 0 0
    }

    .coupon_wrap .coupon_input_wrap .custom_input {
        height: 2.75rem
    }

    .coupon_wrap .coupon_input_wrap .custom_input + .custom_input {
        margin: 0 0 0 0.5rem
    }

    .coupon_wrap .coupon_input_wrap .custom_input.mid input[type="text"] {
        height: 100%;
        font-size: 1rem
    }

    .coupon_wrap .box_coupon .custom_select select {
        height: 2.75rem
    }

    .coupon_wrap .coupon_caution_list {
        padding: 0 1.25rem;
        margin: 1.4rem auto 0
    }

    .coupon_wrap .coupon_caution_list h4 {
        display: block;
        font-size: 1rem;
        margin-bottom: 0.75rem
    }

    .coupon_wrap .box_coupon .btn_wrap {
        margin: 1.1rem auto 0;
        justify-content: inherit
    }

    .coupon_wrap .box_coupon .coupon_user_nickname {
        padding: 0.7rem 0;
        margin-top: 0.4rem
    }

    .coupon_wrap .coupon_notice {
        padding: 0 2rem;
        font-size: 1rem;
        margin-top: 1.5rem
    }

    .top_acoin_visual {
        height: 20.083rem;
        box-sizing: border-box;
        padding-top: 4.166rem;
        background: url(../../images/payment/m_acoin_top_visual_bg.jpg?v=4) 50% 0 no-repeat;
        background-size: cover
    }

    .container.acoin_charge .content {
        padding: 0 1.25rem 3.333rem
    }

    .acoin_charge_wrap {
        padding: 0
    }

    .acoin_charge_wrap .inner {
        margin-top: -4.875rem
    }

    .acoin_list_tit {
        font-size: 1rem;
        margin-bottom: 1.666rem
    }

    .acoin_list > ul {
        margin: 0
    }

    .acoin_list li {
        flex: 0 0 32%;
        height: 18.75rem;
        margin: 1% 0.5%;
        padding: 1.666rem 0
    }

    .acoin_list .coin {
        font-size: 1.583rem
    }

    .acoin_list .icon {
        height: 6.1666rem;
        box-sizing: border-box;
        margin-top: 1.583rem;
        margin-bottom: 1.153rem
    }

    .acoin_list .money {
        font-size: 1.4rem
    }

    .acoin_list .btn_wrap {
        margin-top: 0.8333rem;
        padding: 0 1rem
    }

    .acoin_list .btn_wrap .btn {
        min-width: 100%
    }

    .acoin_list_tit {
        padding-top: 2.083rem
    }

    .acoin_login {
        height: 7.5rem;
        box-sizing: border-box;
        padding: 0 2.083rem
    }

    .acoin_login .login_desc .mob_block {
        display: block
    }

    .acoin_login .login_desc {
        font-size: 0.8333rem;
        line-height: 1.25
    }

    .acoin_login .btn {
        height: 2.916rem;
        box-sizing: border-box;
        min-width: 8.333rem;
        margin-left: 1.25rem
    }

    .acoin_login .my_acoin span.my_coin_txt {
        font-size: 0.8333rem
    }

    .acoin_list .icon:before {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: url(../../images/payment/m_acoin_list_spr.png?v=4) 50% 0 no-repeat;
        background-size: 89.583rem 5.916rem
    }

    .acoin_list .icn_acoin01:before {
        width: 7.333rem;
        height: 5.2916rem;
        box-sizing: border-box;
        background-position: 0 0
    }

    .acoin_list .icn_acoin02:before {
        width: 9.166rem;
        height: 5.2916rem;
        box-sizing: border-box;
        background-position: -7.75rem 0
    }

    .acoin_list .icn_acoin03:before {
        width: 10.166rem;
        height: 5.2916rem;
        box-sizing: border-box;
        background-position: -17.291rem 0
    }

    .acoin_list .icn_acoin04:before {
        width: 13.75rem;
        height: 5.2916rem;
        box-sizing: border-box;
        background-position: -28.375rem 0
    }

    .acoin_list .icn_acoin05:before {
        width: 11.625rem;
        height: 5.2916rem;
        box-sizing: border-box;
        background-position: -42.541rem 0
    }

    .acoin_list .icn_acoin06:before {
        width: 13.2083rem;
        height: 5.2916rem;
        box-sizing: border-box;
        background-position: -54.583rem 0
    }

    .acoin_list .icn_acoin07:before {
        width: 10.125rem;
        height: 5.916rem;
        box-sizing: border-box;
        background-position: -68.2083rem 0
    }

    .acoin_list .icn_acoin08:before {
        width: 10.833rem;
        height: 5.916rem;
        box-sizing: border-box;
        background-position: -78.75rem 0
    }

    .acoin_amount_wrap {
        margin: 2.916rem 0 2.0833rem
    }

    .acoin_amount_wrap p.title {
        font-size: 1rem;
        margin-bottom: 1.5rem
    }

    .acoin_amount_wrap .box_acoin_amount {
        display: block;
        padding: 1.875rem
    }

    .box_acoin_amount .amount_input {
        display: block;
        text-align: center;
        width: auto;
        margin: 0
    }

    .box_acoin_amount .amount_input p {
        display: block;
        font-size: 1.166rem
    }

    .box_acoin_amount .amount_input p.acoin {
        width: auto
    }

    .box_acoin_amount .amount_input p.acoin .custom_input {
        width: calc(100% - 5rem);
        margin-right: 0.833rem
    }

    .box_acoin_amount .amount_input p.acoin .custom_input input {
        height: 3.33rem;
        font-size: 1rem
    }

    .box_acoin_amount .amount_input p.acoin em {
        width: 4.166rem
    }

    .box_acoin_amount .amount_input p.money {
        width: auto;
        height: 3.33rem;
        line-height: 3.33rem;
        margin: 0;
        text-align: center
    }

    .box_acoin_amount .amount_input p.money em.unit {
        margin-left: 0.4166rem
    }

    .box_acoin_amount .btn_wrap {
        margin-top: 1.25rem
    }

    .box_acoin_amount .btn_wrap .btn {
        width: 50%;
        max-width: 10rem
    }

    .box_pay_item .item_img .img_area {
        width: 11.66rem;
        height: 12.5rem;
        background: #f5f5f5
    }

    .box_pay_item .item_img .img_area:before {
        width: 100%;
        height: 100%;
        background: url(../../images/payment/m_renewal_payment_package_item_box_spr_naeu.jpg?v=4) no-repeat;
        background-size: 47.916rem 12.5rem
    }

    .pay_acoin_wrap .box_pay_item .item_img .img_area:before {
        background: url(../../images/payment/m_payment_acoin_list_spr.png?v=4) no-repeat;
        background-size: 47.916rem 25.416rem
    }

    .pay_acoin_wrap .box_pay_item .item_img .img_area.coin5000:before {
        background-position: 0 0
    }

    .pay_acoin_wrap .box_pay_item .item_img .img_area.coin10000:before {
        background-position: -12.0833rem 0
    }

    .pay_acoin_wrap .box_pay_item .item_img .img_area.coin20000:before {
        background-position: -24.166rem 0
    }

    .pay_acoin_wrap .box_pay_item .item_img .img_area.coin30000:before {
        background-position: -36.25rem 0
    }

    .pay_acoin_wrap .box_pay_item .item_img .img_area.coin40000:before {
        background-position: 0 -12.916rem
    }

    .pay_acoin_wrap .box_pay_item .item_img .img_area.coin50000:before {
        background-position: -12.0833rem -12.916rem
    }

    .pay_acoin_wrap .box_pay_item .item_img .img_area.coin70000:before {
        background-position: -24.166rem -12.916rem
    }

    .pay_acoin_wrap .box_pay_item .item_img .img_area.coin100000:before {
        background-position: -36.25rem -12.916rem
    }

    .pay_pearl_wrap .box_pay_item .item_img .img_area:before {
        background: url(../../images/payment/m_payment_pearl_item_box_spr.png?v=4) no-repeat;
        background-size: 47.916rem 25.416rem
    }

    .pay_pearl_wrap .box_pay_item .item_img .img_area.pearl_16:before {
        background-position: 0 0
    }

    .pay_pearl_wrap .box_pay_item .item_img .img_area.pearl_32:before {
        background-position: -12.0833rem 0
    }

    .pay_pearl_wrap .box_pay_item .item_img .img_area.pearl_80:before {
        background-position: -24.166rem 0
    }

    .pay_pearl_wrap .box_pay_item .item_img .img_area.pearl_165:before {
        background-position: -36.25rem 0
    }

    .pay_pearl_wrap .box_pay_item .item_img .img_area.pearl_340:before {
        background-position: 0 -12.916rem
    }

    .pay_pearl_wrap .box_pay_item .item_img .img_area.pearl_860:before {
        background-position: -12.0833rem -12.916rem
    }

    .pay_pearl_wrap .box_pay_item .item_img .img_area.pearl_1760:before {
        background-position: -24.166rem -12.916rem
    }

    .pay_pearl_wrap .box_pay_item .item_img .img_area.package:before {
        width: 100%;
        height: 100%;
        background: url(../../images/payment/m_renewal_payment_package_item_box_spr_naeu.jpg?v=4) no-repeat;
        background-size: 47.916rem 12.5rem
    }

    .box_pay_item .item_img .img_area.package:before {
        background-image: url(../../images/payment/m_renewal_payment_package_item_box_spr_naeu.jpg?v=4);
        background-size: 47.9167rem 12.5rem
    }

    .box_pay_item .item_img .img_area.package.legendary:before {
        background-position: 0 0
    }

    .box_pay_item .item_img .img_area.package.prime:before {
        background-position: -12.0833rem 0
    }

    .box_pay_item .item_img .img_area.package.limited:before {
        background-position: -24.166rem 0
    }

    .box_pay_item .item_img .img_area.package.essential:before {
        background-position: -36.25rem 0
    }

    .top_pearl_visuaul {
        height: 21.125rem;
        box-sizing: border-box;
        padding-top: 4.166rem;
        background-image: url(../../images/payment/m_pay_pearl_top_visual.png?v=4)
    }

    .top_package_visual {
        height: 27.5rem;
        box-sizing: border-box;
        padding-top: 4.166rem;
        background-image: url(../../images/payment/m_pay_package_visual_top.png?v=4)
    }

    .package_wrap > .inner {
        margin-top: -15.4166rem
    }

    .container.package .content:before {
        display: none
    }

    .package_wrap.bg_warrior {
        background: none
    }

    .package .package_detail_wrap .detail_inner {
        min-height: inherit
    }

    .package_list {
        padding: 0 1.25rem
    }

    .package_list > ul {
        flex-wrap: wrap;
        justify-content: center;
        max-width: none
    }

    .package_list > ul > li {
        width: 100%;
        max-width: 680px;
        margin: 0 auto 2.5rem
    }

    .package_list > ul > li:first-child {
        margin: 0 auto 2.5rem
    }

    .package_list > ul > li:after {
        display: none
    }

    .package_list > ul > li .package {
        height: auto;
        padding-bottom: 0
    }

    .package_list > ul > li .package .img_sale {
        width: 4.13rem;
        height: 4.13rem;
        left: 1.4rem;
        top: 0;
        background-size: cover;
        z-index: 12
    }

    .package_list > ul > li .package .top_info_pack {
        height: 15.4166rem;
        box-sizing: border-box;
        margin-top: -1px;
        padding-top: 1.166rem;
        background-image: none
    }

    .package_list > ul > li .package.legendary .top_info_pack {
        background: url(../../images/payment/m_package_item_legend.png?v=4) 50% 0 no-repeat;
        background-size: cover
    }

    .package_list > ul > li .package.prime .top_info_pack {
        background: url(../../images/payment/m_package_item_prime.png?v=4) 50% 0 no-repeat;
        background-size: cover
    }

    .package_list > ul > li .package.limited .top_info_pack {
        background: url(../../images/payment/m_package_item_limited.png?v=4) 50% 0 no-repeat;
        background-size: cover
    }

    .package_list > ul > li .package.essential .top_info_pack {
        background: url(../../images/payment/m_package_item_essential.png?v=4) 50% 0 no-repeat;
        background-size: cover
    }

    .package_list > ul > li .package .top_info_pack strong.title {
        height: 4.583rem;
        box-sizing: border-box;
        font-size: 1.375rem;
        color: #d5c1b0;
        line-height: 4.583rem
    }

    .package_list > ul > li .package .top_info_pack .item_package {
        padding: 3.45rem 1.583rem 1.541rem 14.166rem;
        margin-top: -1.25rem
    }

    .package_list > ul > li .package .top_info_pack .item_package:before {
        left: 2.875rem;
        z-index: 10;
        width: 9.666rem;
        height: 15.291rem;
        box-sizing: border-box;
        background: url(../../images/payment/m_package_item_box_spr.png?v=4) no-repeat;
        background-size: 39.833rem 15.291rem
    }

    .package_list > ul > li .package.legendary .top_info_pack .item_package:before {
        background-position: 0 0
    }

    .package_list > ul > li .package.prime .top_info_pack .item_package:before {
        background-position: -10.083rem 0
    }

    .package_list > ul > li .package.limited .top_info_pack .item_package:before {
        background-position: -20.166rem 0
    }

    .package_list > ul > li .package.essential .top_info_pack .item_package:before {
        background-position: -30.25rem 0
    }

    .package_list > ul > li .package .top_info_pack .item_package .price .sale {
        top: -2rem;
        font-size: 1.458rem
    }

    .package_list > ul > li .package .top_info_pack .item_package .price .sale:before {
        width: 8.833rem;
        height: 0.833rem;
        background-size: 13.75rem 4.5833rem;
        margin-top: 0.416rem
    }

    .package_list > ul > li .package .top_info_pack .item_package .price span {
        font-size: 2.5rem;
        color: #f2ede9;
        text-shadow: 0 1px #000
    }

    .package_list > ul > li .package .top_info_pack .item_package .price em {
        font-size: 1.25rem;
        color: #cec5bd;
        margin-left: 0.4166rem
    }

    .package_list > ul > li .package .top_info_pack .item_package .btn_buy {
        width: 100%;
        height: 3.25rem;
        box-sizing: border-box;
        margin-top: 0.5rem;
        font-size: 0.958rem;
        line-height: 3.25rem
    }

    .package_list > ul > li .package.legendary .top_info_pack .item_package .price .sale:before {
        background-position: -4.5416rem 0
    }

    .package_list > ul > li .package.prime .top_info_pack .item_package .price .sale:before {
        background-position: -4.5416rem -1.2083rem
    }

    .package_list > ul > li .package.limited .top_info_pack .item_package .price .sale:before {
        background-position: -4.5416rem -2.416rem
    }

    .package_list > ul > li .package.essential .top_info_pack .item_package .price .sale:before {
        background-position: -4.5416rem -3.625rem
    }

    .package_list > ul > li .package .info_item_list {
        padding: 0.833rem;
        background: #fdfdfd
    }

    .package_list > ul > li .package.retail .info_item_list {
        background: #282828
    }

    .package_list > ul > li .package .info_item_list .inner {
        min-height: inherit;
        padding: 4.166rem 2.083rem 2.083rem;
        border: 1px solid #c1c1c1
    }

    .package_list > ul > li .package.retail .info_item_list .inner {
        border-color: #4c473b
    }

    .package_list > ul > li .package .info_item_list ul li {
        margin-bottom: 0.833rem;
        padding-left: 1rem;
        font-size: 1.041rem
    }

    .package_list > ul > li .package .info_item_list ul li:before {
        width: 0.25rem;
        height: 0.25rem;
        box-sizing: border-box;
        top: 0.458rem
    }

    .package_list > ul > li .btn_wrap {
        position: static
    }

    .package_list > ul > li .btn_wrap .btn_buy {
        display: flex;
        align-items: center;
        justify-content: center;
        -ms-flex-align: center;
        height: 5.208rem;
        box-sizing: border-box;
        font-size: 1.375rem;
        line-height: 1
    }

    .pearl_shop_list_wrap {
        background-color: transparent
    }

    .pearl_shop_list_wrap > .inner {
        width: 100%;
        max-width: 500px;
        margin-top: -1.916rem
    }

    .pearl_shop_list_wrap > .inner > ul > li {
        width: 100%;
        height: 15.208rem;
        min-height: auto;
        box-sizing: border-box;
        margin: 1.25rem 0 0
    }

    .pearl_shop_list_wrap > .inner > ul > li:first-child {
        margin-top: 0
    }

    .pearl_shop_list_wrap > .inner > ul > li:before {
        display: none
    }

    .pearl_shop_list_wrap > .inner > ul > li .box_item {
        display: flex;
        align-items: center;
        justify-content: center;
        -ms-flex-align: center;
        height: 100%;
        box-sizing: border-box
    }

    .pearl_shop_list_wrap > .inner > ul > li .img_area {
        width: 12.5rem;
        height: 100%;
        box-sizing: border-box
    }

    .pearl_shop_list_wrap > .inner > ul > li .img_area:before {
        background: url(../../images/payment/m_pearl_item_box_spr.png?v=4) no-repeat;
        background-size: 51.25rem 30.833rem
    }

    .pearl_shop_list_wrap > .inner > ul > li .img_area.pearl_16:before {
        background-position: 0 0
    }

    .pearl_shop_list_wrap > .inner > ul > li .img_area.pearl_32:before {
        background-position: -12.916rem 0
    }

    .pearl_shop_list_wrap > .inner > ul > li .img_area.pearl_80:before {
        background-position: -25.833rem 0
    }

    .pearl_shop_list_wrap > .inner > ul > li .img_area.pearl_165:before {
        background-position: -38.75rem 0
    }

    .pearl_shop_list_wrap > .inner > ul > li .img_area.pearl_340:before {
        background-position: 0 -15.625rem
    }

    .pearl_shop_list_wrap > .inner > ul > li .img_area.pearl_860:before {
        background-position: -12.916rem -15.625rem
    }

    .pearl_shop_list_wrap > .inner > ul > li .img_area.pearl_1760:before {
        background-position: -25.833rem -15.625rem
    }

    .pearl_shop_list_wrap > .inner > ul > li .desc_area {
        width: calc(100% - 12.5rem);
        padding: 1.25rem;
        box-sizing: border-box
    }

    .pearl_shop_list_wrap > .inner > ul > li .box_item .img_sale {
        width: 2.83rem;
        height: 2.83rem;
        left: 0.5rem;
        top: 0.5rem;
        background-size: cover
    }

    .pearl_shop_list_wrap > .inner > ul > li .sale_wrap {
        display: table;
        text-align: center;
        margin: 0 auto
    }

    .pearl_shop_list_wrap > .inner > ul > li .desc_area .title {
        font-size: 1rem
    }

    .pearl_shop_list_wrap > .inner > ul > li .desc_area .price {
        margin-bottom: 0;
        font-size: 1.625rem
    }

    .pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items {
        max-width: 14rem;
        box-sizing: border-box;
        margin-top: 1rem;
        padding-bottom: 0.7rem
    }

    .pearl_shop_list_wrap > .inner > ul > li .desc_area .btn_wrap {
        display: block
    }

    .pearl_shop_list_wrap > .inner > ul > li .desc_area .btn_wrap .btn_sml02 {
        width: 10.208rem;
        min-width: inherit;
        height: 2.916rem;
        box-sizing: border-box;
        font-size: 0.958rem
    }

    .pearl_shop_list_wrap > .inner > ul > li .desc_area .btn_wrap .btn + .btn {
        margin: 0.2916rem auto 0
    }

    .pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items .box_details {
        left: auto;
        right: 0;
        width: 26em;
        margin-left: -13em;
        padding: 0.866rem;
        font-size: 0.875rem
    }

    .pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items .text_detail {
        font-size: 0.875rem;
        line-height: 1.25rem
    }

    .caution_text .inner {
        padding: 1rem 1.8rem
    }

    .box_price_name_wrap .box_line {
        height: 2rem
    }

    .box_price_name_wrap .box_price_name {
        padding: 1.2rem 1.5rem
    }

    .box_price_name_wrap .box_name {
        font-size: 0.916rem
    }

    .box_price_name_wrap .box_content {
        font-size: 1.3rem
    }

    .btn_pay_next {
        font-size: 1.041rem
    }

    .pearl_shop_list_wrap > .inner > ul > li.blank_item {
        display: none
    }

    .package_detail_wrap {
        margin-top: 0;
        padding-bottom: 3.333rem
    }

    .package_detail_wrap.bg_warrior {
        background: none
    }

    .box_prouct_info {
        padding: 1.25rem;
        border: 0
    }

    .box_prouct_info dl dt {
        margin: 1.666rem 0 0.5rem;
        font-size: 0.916rem
    }

    ul.bullet_list.fs14 li {
        font-size: 0.75rem
    }

    .caution_text {
        margin-top: 1rem;
        margin-bottom: 0;
        padding: 0 1.25rem;
        max-width: 900px
    }

    .caution_text p {
        font-size: 0.833rem
    }

    .container.pet {
        padding: 4.1666rem 0 0
    }

    .container.pet .content {
        width: 100%;
        max-width: none;
        padding: 0 1.25rem;
        box-sizing: border-box
    }

    .container.pet .box_prouct_info {
        margin: 0 -1.25rem
    }

    .aside_wrap + .content {
        margin-top: -1.66rem
    }

    .container.pet h2 {
        display: flex;
        align-items: center;
        justify-content: center;
        -ms-flex-align: center;
        height: 6.041rem;
        margin-bottom: 2.083rem;
        padding: 0;
        font-size: 2.1666rem;
        border-bottom: 0.083rem solid #555
    }

    .icon_box {
        margin-bottom: 2.083rem;
        padding-top: 5rem
    }

    .icon_box h3 {
        font-size: 1.625rem
    }

    .icon_box h3 span.mob_block {
        display: block;
        line-height: 1.23
    }

    .icon_box .h3_desc {
        margin-top: 0.416rem;
        font-size: 0.833rem;
        line-height: 1.55
    }

    .icon_box .h3_desc .mob_block {
        display: block
    }

    .pet_list ul {
        margin: -0.291rem -0.083rem
    }

    .pet_list ul li {
        width: 32.8%;
        height: 7.5rem;
        box-sizing: border-box
    }

    .pet_list ul li .img_area {
        height: 4.916rem;
        box-sizing: border-box;
        padding-bottom: 0
    }

    .pet_list ul li .pet_name {
        font-size: 0.8333rem;
        height: 2.5rem;
        box-sizing: border-box
    }

    .pet_list ul li .custom_radio input[type='radio']:checked + label:before {
        width: 2.166rem;
        height: 2.166rem;
        background-size: 33.33rem 33.33rem;
        background-position: -2.833rem -12.9583rem
    }

    .pet_list + .btn_wrap {
        margin: 2.5rem 0
    }

    .pay_lodding_wrap .lodding {
        font-size: 0.416rem
    }

    .on_sale .package_wrap .inner {
        margin-top: -10.5rem
    }

    .sale_bnr_wrap {
        height: 4.8333rem;
        background-image: url(../../images/payment/m_package_sale_banner_bg.jpg?v=4);
        background-size: cover
    }

    .sale_bnr_wrap .sale_info {
        flex-direction: column;
        text-align: center
    }

    .sale_bnr_wrap .sale_title {
        display: block;
        font-size: 1.3333rem;
        padding: 0 0 0 2.7083rem
    }

    .sale_bnr_wrap .period {
        margin: 0.5rem 0 0;
        font-size: 1rem
    }

    .sale_bnr_wrap .period::before {
        display: none
    }

    .sale_bnr_wrap .icn_clock {
        width: 2rem;
        height: 2rem;
        top: calc(50% - 1rem);
        background-position: -2.2083rem -0.125rem;
        background-size: 16.6667rem
    }

    #renewal_package_wrap {
        padding: 0 1.25rem
    }

    #renewal_package_wrap + .package_detail_wrap {
        margin: 0 auto;
        padding: 0 1.25rem 3.33rem
    }

    #renewal_package_wrap .renewal_package_ul {
        flex-wrap: wrap;
        max-width: 312px
    }

    #renewal_package_wrap .renewal_package_list {
        width: 100%;
        max-width: 100%;
        margin: 0 auto 2.5rem
    }

    #renewal_package_wrap.quarter .renewal_package_list {
        max-width: 312px
    }

    #renewal_package_wrap .package_box.special .package_info_area {
        background: linear-gradient(to bottom, #dfe7f5, #e5eeff)
    }

    #renewal_package_wrap .renewal_package_list {
        width: 100%;
        margin: 0 0 2.5rem
    }

    #renewal_package_wrap .renewal_package_list + .renewal_package_list {
        margin-left: 0
    }

    #renewal_package_wrap .package_img_area,.pay_package_wrap .box_pay_item .item_img .img_area.package {
        width: 100%;
        height: 17.9167rem;
        padding: 2.2083rem 0 0;
        background-size: cover
    }

    #renewal_package_wrap .package_img_area .package_img,.pay_package_wrap .box_pay_item .item_img .img_area.package:before {
        height: 15rem;
        background-image: url(../../images/payment/m_renewal_package_item_spr.png?v=4);
        background-size: auto 16.0417rem
    }

    #renewal_package_wrap .essential .package_img_area {
        background-image: url(../../images/payment/m_package_item_bg_1.png?v=4);
        background-position: top center
    }

    #renewal_package_wrap .essential .package_img,.pay_package_wrap .box_pay_item .item_img .img_area.package.essential:before {
        width: 9.6667rem
    }

    #renewal_package_wrap .limited .package_img_area {
        background-image: url(../../images/payment/m_package_item_bg_2.png?v=4);
        background-position: top center
    }

    #renewal_package_wrap .limited .package_img,.pay_package_wrap .box_pay_item .item_img .img_area.package.limited:before {
        width: 20.4167rem;
        background-position-x: -13.8rem
    }

    #renewal_package_wrap .prime .package_img_area {
        background-image: url(../../images/payment/m_package_item_bg_3.png?v=4);
        background-position: top center
    }

    #renewal_package_wrap .prime .package_img,.pay_package_wrap .box_pay_item .item_img .img_area.package.prime:before {
        width: 21rem;
        background-position-x: -36rem
    }

    #renewal_package_wrap .special .package_img_area {
        background-image: url(../../images/payment/m_package_item_bg_4.png?v=4);
        background-position: top center
    }

    #renewal_package_wrap .special .package_img,.pay_package_wrap .box_pay_item .item_img .img_area.package.special:before {
        width: 21rem;
        background-position-x: -59.9rem
    }

    #renewal_package_wrap .package_info_area {
        padding: 0 1.25rem 1.25rem 1.25rem
    }

    #renewal_package_wrap .price_info_wrap {
        justify-content: center;
        padding: 0
    }

    #renewal_package_wrap .package_info_area .btn_wrap {
        padding: 0 0 1.8rem 0
    }

    #renewal_package_wrap .price_box {
        margin: 1.2rem 0 0 0
    }

    #renewal_package_wrap .price_info_wrap .title {
        font-size: 1.5rem
    }

    #renewal_package_wrap .regular_price {
        padding: 0 0.5rem 0 1rem;
        font-size: 1.5833rem
    }

    #renewal_package_wrap .regular_price .icn_line::before {
        width: 0.875rem;
        height: 1.0417rem;
        background-position: 0 -3.4rem;
        background-size: 16.6667rem 16.6667rem
    }

    #renewal_package_wrap .regular_price.no_sale,#renewal_package_wrap .sale_price {
        font-size: 3rem
    }

    #renewal_package_wrap .sale_acoin {
        font-size: 1.5833rem
    }

    #renewal_package_wrap .sale_label {
        width: 4.5833rem;
        height: 4.5833rem;
        top: 1.25rem;
        right: 1.25rem;
        background-position: -8.95rem 0;
        background-size: 16.6667rem
    }

    #renewal_package_wrap .btn_buy {
        height: 4.7917rem;
        font-size: 1.4583rem
    }

    #renewal_package_wrap .info_list_wrap {
        padding: 1.6667rem;
        border: 1px solid #c1c1c1
    }

    #renewal_package_wrap .info_list_wrap ul {
        min-height: inherit;
        padding: 0
    }

    #renewal_package_wrap .info_list_wrap ul::before {
        display: none
    }

    #renewal_package_wrap .info_list {
        font-size: 1.0417rem;
        padding: 0 0 0 1rem
    }

    #renewal_package_wrap .info_list + .info_list {
        margin: 0.8rem 0 0
    }

    #renewal_package_wrap .info_list .info_item {
        padding: 0.2rem 0
    }

    #renewal_package_wrap .info_list::before {
        width: 0.25rem;
        height: 0.25rem;
        top: 0.75rem
    }

    #renewal_package_wrap .info_list_wrap .box_details {
        position: absolute;
        top: 2rem;
        left: 50%;
        max-width: none;
        width: 24rem;
        margin-right: 0;
        margin-left: -12rem;
        padding: 0.866rem;
        font-size: 0.875rem;
        line-height: 1.666
    }

    #renewal_package_wrap .info_list_wrap .box_details.on {
        -webkit-animation: boxToolTip2 .2s ease both;
        animation: boxToolTip2 .2s ease both
    }

    #renewal_package_wrap .info_list_wrap .box_details .contents_name {
        font-size: 1rem;
        margin-bottom: 0.4rem
    }

    html:lang(zh-TW) .package_list > ul > li .package .top_info_pack .item_package:before {
        background-image: url(../../images/payment/m_package_item_box_spr_tw.png?v=4)
    }

    html:lang(zh-TW) #renewal_package_wrap .package_img_area .package_img,html:lang(zh-TW) .pay_package_wrap .box_pay_item .item_img .img_area.package:before {
        background-image: url(../../images/payment/m_renewal_package_item_spr_tw.png?v=4)
    }

    html:lang(zh-TW) .box_pay_item .item_img .img_area:before,html:lang(zh-TW) .pay_pearl_wrap .box_pay_item .item_img .img_area.package:before {
        background-image: url(../../images/payment/m_renewal_payment_package_item_box_spr_tw.jpg?v=4)
    }

    html:lang(zh-TW) .box_pay_item .item_img .img_area.package:before {
        background-image: url(../../images/payment/m_renewal_payment_package_item_box_spr_tw.jpg?v=4)
    }
}

@media screen and (max-width: 1230px) {
    .aside_wrap {
        position:relative;
        float: none;
        width: 100%;
        margin-top: 0;
        padding: 3.22rem 1.25rem 0;
        border: none;
        box-sizing: border-box;
        box-shadow: 0 20px 30px -30px rgba(0, 0, 0, 0.6);
        transform: translateY(-1.666rem)
    }

    .aside_wrap + .content {
        margin-left: auto
    }

    .aside_wrap .inner {
        display: none;
        padding-bottom: 1.25rem
    }

    .aside_wrap ul {
        display: flex;
        align-items: center;
        justify-content: center;
        -ms-flex-align: center;
        flex-wrap: wrap;
        border-top: 1px solid #dfdfdf;
        border-left: 1px solid #dfdfdf
    }

    .aside_wrap ul li {
        width: 50%
    }

    .aside_wrap ul li a {
        height: 4.583rem;
        box-sizing: border-box;
        padding-left: 4.333rem;
        border-right: 1px solid #dfdfdf;
        line-height: 1.304;
        font-size: 0.958rem
    }

    .aside_wrap ul li a.icon:before {
        left: 1.708rem;
        background-size: 33.333rem 33.333rem
    }

    .aside_wrap ul li a.icon.icn_0:before {
        left: 1.875rem;
        width: 1.625rem;
        height: 1.791rem;
        box-sizing: border-box;
        background-position: 0 -4.958rem
    }

    .aside_wrap ul li a.icon.icn_1:before {
        left: 1.791rem;
        width: 1.625rem;
        height: 1.25rem;
        box-sizing: border-box;
        background-position: -2rem -5rem
    }

    .aside_wrap ul li a.icon.icn_2:before {
        left: 1.833rem;
        width: 1.916rem;
        height: 1.25rem;
        box-sizing: border-box;
        background-position: -4.041rem -5rem
    }

    .aside_wrap ul li a.icon.icn_3:before {
        left: 2.083rem;
        width: 1.083rem;
        height: 1.791rem;
        box-sizing: border-box;
        background-position: -6.375rem -5rem
    }

    .aside_wrap ul li a.icon.icn_4:before {
        left: 1.833rem;
        width: 1.541rem;
        height: 1.333rem;
        box-sizing: border-box;
        background-position: -7.875rem -5rem
    }

    .aside_wrap ul li a.icon.icn_5:before {
        width: 1.75rem;
        height: 1.666rem;
        box-sizing: border-box;
        background-position: -9.833rem -5rem
    }

    .aside_wrap ul li a.icon.icn_6:before {
        left: 1.958rem;
        width: 1.333rem;
        height: 1.791rem;
        box-sizing: border-box;
        background-position: -12rem -5rem
    }

    .aside_wrap ul li a.icon.icn_7:before {
        left: 1.875rem;
        width: 1.541rem;
        height: 1.541rem;
        box-sizing: border-box;
        background-position: -13.75rem -5rem
    }

    .aside_wrap ul li.active a {
        background: #323232;
        color: #fff
    }

    .aside_wrap ul li.active a.icon.icn_0:before {
        left: 1.875rem;
        width: 1.625rem;
        height: 1.791rem;
        box-sizing: border-box;
        background-position: 0 -7.5rem
    }

    .aside_wrap ul li.active a.icon.icn_1:before {
        left: 1.791rem;
        width: 1.625rem;
        height: 1.25rem;
        box-sizing: border-box;
        background-position: -2rem -7.5rem
    }

    .aside_wrap ul li.active a.icon.icn_2:before {
        left: 1.833rem;
        width: 1.916rem;
        height: 1.25rem;
        box-sizing: border-box;
        background-position: -4.041rem -7.5rem
    }

    .aside_wrap ul li.active a.icon.icn_3:before {
        left: 2.083rem;
        width: 1.083rem;
        height: 1.791rem;
        box-sizing: border-box;
        background-position: -6.375rem -7.5rem
    }

    .aside_wrap ul li.active a.icon.icn_4:before {
        width: 1.541rem;
        height: 1.333rem;
        box-sizing: border-box;
        background-position: -7.875rem -7.5rem
    }

    .aside_wrap ul li.active a.icon.icn_5:before {
        width: 1.75rem;
        height: 1.666rem;
        box-sizing: border-box;
        background-position: -9.833rem -7.5rem
    }

    .aside_wrap ul li.active a.icon.icn_6:before {
        left: 1.958rem;
        width: 1.333rem;
        height: 1.791rem;
        box-sizing: border-box;
        background-position: -12rem -7.5rem
    }

    .aside_wrap ul li.active a.icon.icn_7:before {
        left: 1.875rem;
        width: 1.541rem;
        height: 1.541rem;
        box-sizing: border-box;
        background-position: -13.75rem -7.5rem
    }

    .aside_wrap ul li a:after {
        display: none
    }

    .btn_mob_toggle {
        position: absolute;
        bottom: -1.5rem;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 10;
        display: block;
        width: 3.1666rem;
        height: 3.1666rem;
        box-sizing: border-box;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.6)
    }

    .btn_mob_toggle:after {
        display: block;
        content: "";
        position: absolute;
        bottom: 0.666rem;
        left: 50%;
        width: 10px;
        height: 10px;
        box-sizing: border-box;
        background: 0 0;
        border-left: 2px solid #585858;
        border-bottom: 2px solid #585858;
        transform: translate(-50%, 0) rotate(315deg)
    }

    .coupon_wrap .feather {
        display: none
    }
}

@media screen and (min-width: 1025px) {
    .acoin_charge_wrap > .inner > .btn_top .btn_limited:hover,.acoin_login .btn:hover,.box_acoin_amount .btn_wrap .btn:hover {
        background:#9f865d;
        opacity: 1
    }

    .acoin_list .btn_wrap .btn:hover {
        background: #9f865d;
        opacity: 1
    }

    .acoin_list li:hover:before {
        opacity: 1
    }

    .acoin_list .btn_wrap .btn:hover {
        background: #725945
    }

    .pearl_shop_list_wrap > .inner > ul > li:hover:before {
        opacity: 1
    }

    .pearl_shop_list_wrap > .inner > ul > li:hover .img_area:after {
        opacity: 1
    }

    .pearl_shop_list_wrap > .inner .btn_top .btn_limited:hover {
        background: #725945;
        opacity: 1
    }

    .top_coupon_visual .coupon_available_btn:hover {
        background: #977865
    }

    .aside_wrap li a:hover,.aside_wrap li.active a {
        color: #8e6447
    }

    .aside_wrap li a:hover:after,.aside_wrap li.active a:after {
        position: absolute;
        right: 20px;
        top: 50%;
        display: block;
        content: '';
        width: 8px;
        height: 8px;
        background-color: transparent;
        border-left: 2px solid #8e6447;
        border-top: 2px solid #8e6447;
        transform: translate(-50%, -50%) rotate(140deg) skew(10deg)
    }

    .aside_wrap li a.icon.icn_0:hover:before {
        background-position: -1px -35px
    }

    .aside_wrap li a.icon.icn_1:hover:before {
        background-position: -34px -35px
    }

    .aside_wrap li a.icon.icn_2:hover:before {
        background-position: -66px -35px
    }

    .aside_wrap li a.icon.icn_3:hover:before {
        background-position: -105px -35px
    }

    .aside_wrap li a.icon.icn_4:hover:before {
        background-position: -134px -35px
    }

    .aside_wrap li a.icon.icn_5:hover:before {
        background-position: -169px -35px
    }

    .aside_wrap li a.icon.icn_6:hover:before {
        background-position: -206px -35px
    }

    .aside_wrap li a.icon.icn_7:hover:before {
        background-position: -238px -35px
    }

    .pet_list ul li .custom_radio:hover:before {
        opacity: 1
    }

    .pet_list ul li:hover .box_pet {
        border-color: #000
    }

    .package_list > ul > li .btn_wrap.essential .btn_buy:hover {
        background: #575757
    }

    .package_list > ul > li .btn_wrap.limited .btn_buy:hover {
        background: #3e4666
    }

    .package_list > ul > li .btn_wrap.prime .btn_buy:hover {
        background: #723b3a
    }

    .package_list > ul > li .btn_wrap.legendary .btn_buy:hover {
        background: #715945
    }

    .package_list > ul > li > div {
        transition: 0.15s
    }

    .package_list > ul > li:hover > div {
        transform: translateY(-10px)
    }

    .package_list > ul > li .package .top_info_pack .item_package .btn_buy::before {
        transform: translate3d(-100%, 0, 0);
        transition: transform 0.4s,opacity 0.4s;
        background: rgba(255, 255, 255, 0.1)
    }

    .package_list > ul > li .package .top_info_pack .item_package .btn_buy:hover::before {
        transform: translate3d(0, 0, 0)
    }

    .package_list > ul > li:hover .package .top_info_pack strong.title {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.6)
    }

    .pay_select_wrap li .custom_radio:hover label {
        position: relative;
        z-index: 2;
        border-color: #313131;
        box-sizing: border-box
    }

    .package_list > ul > li .package .top_info_pack .item_package:before {
        filter: brightness(1)
    }

    .package_list > ul > li .btn_wrap .btn_buy:hover span {
        font-size: 22px;
        text-shadow: 3px 3px 10px rgba(0,0,0,0.5)
    }

    #renewal_package_wrap .btn:hover::before {
        opacity: 0.2
    }

    .coupon_wrap .box_coupon .btn_wrap .btn:hover {
        background: #725945;
        opacity: 1
    }

    .pay_lodding_wrap a:hover {
        text-decoration: underline;
        text-underline-position: under
    }

    .recommend_wrap .recommend_title:hover .icn_question:before {
        opacity: 1
    }
}

html:lang(ru-RU) .pearl_shop_list_wrap > .inner .btn_top {
    top: -46px
}

@media screen and (max-width: 1024px) {
    html:lang(ru-RU) .pearl_shop_list_wrap > .inner .btn_top {
        top:-3.5rem
    }

    html:lang(ru-RU) .pearl_shop_list_wrap > .inner > .btn_top .btn_limited {
        font-size: 0.8rem
    }

    html:lang(ru-RU) .box_coupon_tit h3 {
        font-size: 1rem
    }

    html:lang(ru-RU) .box_coupon_tit .h3_desc {
        font-size: 0.875rem
    }
}

@media screen and (max-width: 767px) {
    .acoin_list li {
        flex:0 0 48%;
        height: 18.75rem;
        margin: 1% 1%;
        padding: 1.666rem 0
    }

    .btn_molpay {
        height: auto;
        flex-direction: column
    }

    .btn_molpay .molpay_logo_wrap {
        flex: 1;
        padding: 1rem 0 0;
        border-right: none
    }

    .btn_molpay .molpay_desc_wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 1rem 0
    }

    .btn_molpay .mol_desc1 {
        font-size: 1rem
    }

    .btn_molpay .mol_desc2 {
        font-size: 0.9rem
    }

    .recommend_box {
        width: 100%
    }

    .recommend_wrap {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 2rem;
        padding: 1.5rem
    }

    .recommend_wrap .recommend_input_wrap {
        width: 100%
    }

    .recommend_wrap .recommend_input {
        width: 100%;
        height: 3.28rem;
        margin: 0.875rem auto 0 auto;
        padding: 1rem 1.44rem
    }

    .recommend_wrap .recommend_input,.recommend_wrap .recommend_title {
        font-size: 1rem;
        line-height: 1.4rem
    }

    .recommend_wrap .icn_question,.recommend_wrap .icn_question:before {
        width: 1.2rem;
        height: 1.2rem
    }

    .recommend_wrap .recommend_tooltip {
        position: absolute;
        top: 3.7rem;
        left: 0;
        right: -13rem;
        transform: translate3d(3%, -1rem, 0);
        width: 94%;
        padding: 1rem;
        font-size: 0.916rem
    }

    .recommend_wrap .recommend_title:hover .recommend_tooltip {
        transform: translate3d(3%, 0, 0)
    }

    .recommend_wrap .recommend_tooltip:before {
        display: none
    }

    .recommend_wrap .recommend_input,.recommend_wrap .recommend_title {
        font-size: 0.916rem
    }

    .recommend_box .field-validation-error {
        left: 0;
        top: 5rem;
        max-width: 100%
    }

    .coupon_wrap .box_coupon .mid_bg_area {
        padding: 1rem 2rem
    }

    #renewal_package_wrap.quarter .renewal_package_ul {
        max-width: 312px
    }

    #renewal_package_wrap.quarter .price_box {
        min-height: initial
    }

    #modalPaymentProgress .modal-dialog {
        max-width: 96%
    }

    .bynogame-wrapper .goldBuyConfirm .buyInfo {
        flex-direction: column
    }

    .bynogame-wrapper .goldBuyConfirm .buyInfo .box {
        margin-bottom: 1rem
    }

    .bynogame-wrapper .goldBuyConfirm .buyConfirm h4 {
        height: 3.5rem;
        line-height: 3.5rem;
        font-size: 1.4rem
    }

    .bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list {
        padding-left: 0;
        text-align: center
    }

    .bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul li {
        font-size: 1.2rem;
        line-height: 1.8rem
    }

    .bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst01 span,.bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst02 span,.bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst03 span {
        font-size: 1.2rem
    }

    .bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul li img {
        width: 1.2rem
    }

    .bynogame-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst03 {
        margin-top: 1rem;
        padding-top: 1rem
    }

    .bynogame-wrapper .couponKeyBox {
        padding: 0 0.5rem 0.5rem;
        background-size: 7rem auto;
        background-position: 1.3rem 1rem
    }

    .bynogame-wrapper .couponKeyBox h1 {
        height: 3rem;
        font-size: 1.2rem;
        line-height: 3rem;
        text-indent: 9rem
    }

    .bynogame-wrapper .couponKeyBox .couponKey .coupon {
        padding-bottom: 1.5rem
    }

    .bynogame-wrapper .couponKeyBox .couponKey .coupon ul {
        padding: 1.6rem 0.8rem 1rem
    }

    .bynogame-wrapper .couponKeyBox .couponKey .coupon ul li {
        height: 2.8rem
    }

    .bynogame-wrapper .couponKeyBox .couponKey .coupon ul li > input {
        font-size: 1.2rem
    }

    .bynogame-wrapper .couponKeyBox .couponKey .coupon ul li > input::placeholder {
        font-size: 1.2rem
    }

    .bynogame-wrapper .couponKeyBox .couponKey .coupon ul .gubun {
        height: 2.8rem
    }

    .bynogame-wrapper .couponKeyBox .couponKey .coupon ul .gubun::before {
        width: 0.4rem
    }

    .bynogame-wrapper .bynogame-btn {
        min-width: 10rem;
        height: 2.5rem
    }

    .bynogame-wrapper .bynogame-btn span {
        line-height: 2.5rem;
        font-size: 1.2rem
    }

    .game-satis-wrapper .goldBuyConfirm .buyInfo {
        flex-direction: column
    }

    .game-satis-wrapper .goldBuyConfirm .buyInfo .box {
        margin-bottom: 1rem
    }

    .game-satis-wrapper .goldBuyConfirm .buyConfirm h4 {
        height: 3.5rem;
        line-height: 3.5rem;
        font-size: 1.4rem
    }

    .game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list {
        padding-left: 0;
        text-align: center
    }

    .game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul li {
        font-size: 1.2rem;
        line-height: 1.8rem
    }

    .game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst01 span,.game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst02 span,.game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst03 span {
        font-size: 1.2rem
    }

    .game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul li img {
        width: 1.2rem
    }

    .game-satis-wrapper .goldBuyConfirm .buyConfirm .buyInfo .list ul .lst03 {
        margin-top: 1rem;
        padding-top: 1rem
    }

    .game-satis-wrapper .couponKeyBox {
        padding: 0 0.5rem 0.5rem;
        background-size: 7rem auto;
        background-position: 1.3rem 1rem
    }

    .game-satis-wrapper .couponKeyBox h1 {
        height: 3rem;
        font-size: 1.2rem;
        line-height: 3rem;
        text-indent: 9rem
    }

    .game-satis-wrapper .couponKeyBox .couponKey .coupon {
        padding-bottom: 1.5rem
    }

    .game-satis-wrapper .couponKeyBox .couponKey .coupon ul {
        padding: 1.6rem 0.8rem 1rem
    }

    .game-satis-wrapper .couponKeyBox .couponKey .coupon ul li {
        height: 2.8rem
    }

    .game-satis-wrapper .couponKeyBox .couponKey .coupon ul li > input {
        font-size: 1.2rem
    }

    .game-satis-wrapper .couponKeyBox .couponKey .coupon ul li > input::placeholder {
        font-size: 1.2rem
    }

    .game-satis-wrapper .couponKeyBox .couponKey .coupon ul .gubun {
        height: 2.8rem
    }

    .game-satis-wrapper .couponKeyBox .couponKey .coupon ul .gubun::before {
        width: 0.4rem
    }

    .game-satis-wrapper .game-satis-btn {
        min-width: 10rem;
        height: 2.5rem
    }

    .game-satis-wrapper .game-satis-btn span {
        line-height: 2.5rem;
        font-size: 1.2rem
    }

    .goldBuyConfirm {
        padding-bottom: 3rem
    }

    .box_payment {
        padding: 2rem 1rem
    }
}

@media screen and (max-width: 640px) {
    body.bdc .box_coupon {
        height:420px;
        background-size: auto 100%
    }

    body.bdc .box_coupon_tit {
        height: 106px
    }

    body.bdc #couponForm {
        top: 134px;
        left: 3%;
        margin-left: 0;
        width: 94%;
        max-width: 100%
    }

    body.bdc .box_coupon .btn_wrap {
        margin-top: 40px
    }

    body.bdc .coupon_input_title {
        font-size: 13px
    }

    body.bdc .coupon_input_wrap .custom_input {
        height: 35px
    }

    body.bdc .coupon_input_wrap + .coupon_input_title {
        margin-top: 14px
    }

    body.bdc .coupon_input_wrap .custom_select {
        height: 35px
    }

    body.bdc .box_coupon .coupon_select {
        height: 100%
    }

    .box_price_name_wrap {
        flex-direction: column;
        align-items: stretch
    }

    .box_price_name_wrap .box_price_name {
        padding: 1rem 1.8rem
    }

    .box_price_name_wrap .box_line {
        height: 1px;
        width: calc(100% - 3.6rem);
        align-self: center
    }
}

@media screen and (max-width: 480px) {
    .acoin_login .my_acoin span.my_coin_txt,.pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items .text_detail {
        font-size:11px
    }

    #renewal_package_wrap .before_discount,#renewal_package_wrap .info_list,#renewal_package_wrap .info_list_wrap .box_details,#renewal_package_wrap .info_list_wrap .box_details .contents_name,#renewal_package_wrap .sale_label,.acoin_list_tit,.acoin_login .login_desc,.box_prouct_info,.h2_desc,.pay_select_list li .custom_radio label,.pay_select_list li.blank_item .custom_radio,.sale_bnr_wrap .period {
        font-size: 12px
    }

    .coupon_wrap .box_coupon_tit .h3_desc,.coupon_wrap .coupon_caution_list h4,.coupon_wrap .coupon_input_title,.coupon_wrap .coupon_input_wrap .custom_input.mid input[type="text"],.coupon_wrap .custom_input.mid input[type="text"],.package .package_detail_wrap .detail_inner,.pay_lodding_wrap .payment_desc,.pay_lodding_wrap .payment_sub_title,.pearl_shop_list_wrap > .inner > .msg_top,.pearl_shop_list_wrap > .inner > ul > li .desc_area .btn_wrap .btn_sml02,.pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items,.pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items .box_details,.pearl_shop_list_wrap > .inner > ul > li .desc_area .title,ul.bullet_list.fs14 li {
        font-size: 12px
    }

    .coupon_wrap .box_coupon_tit h3,.pay_lodding_wrap h4,.payment_wrap .box_pay_tit h3 {
        font-size: 1.12rem
    }

    .coupon_wrap .custom_input.mid input[type="text"] {
        padding: 0 1rem
    }

    .acoin_login .login_desc {
        text-align: left
    }

    .acoin_login .btn {
        height: auto;
        padding: 0.4rem 0.6rem
    }

    .acoin_charge_wrap .inner {
        margin-top: -2.5rem
    }

    .top_pearl_visuaul {
        height: 25.125rem
    }

    .pearl_shop_list_wrap > .inner > .btn_top {
        top: -6.833rem
    }

    .h2_desc {
        padding: 0 0.5rem
    }

    .pearl_shop_list_wrap > .inner > .msg_top {
        top: -2.9rem;
        line-height: 1.3
    }

    .pearl_shop_list_wrap > .inner > ul > li .desc_area .detail_items .box_details {
        max-width: 80vw
    }

    .pearl_shop_list_wrap > .inner > ul > li .desc_area .title {
        height: auto;
        line-height: 1.5
    }

    .pearl_shop_list_wrap .desc_area .tooltip_details {
        margin-left: 0.3rem
    }

    .coupon_wrap .box_coupon .server_select,.coupon_wrap .coupon_input_wrap {
        margin: 0.5rem 0 0 0
    }
}

@-webkit-keyframes boxToolTip {
    0% {
        -webkit-transform: translateX(10%);
        transform: translateX(10%);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes boxToolTip {
    0% {
        -webkit-transform: translateX(10%);
        transform: translateX(10%);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes boxToolTip2 {
    0% {
        -webkit-transform: translateY(13%);
        transform: translateY(13%);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes boxToolTip2 {
    0% {
        -webkit-transform: translateY(13%);
        transform: translateY(13%);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes result_circle {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes result_circle {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes result_arrow {
    0% {
        -webkit-transform: scale3d(1.25, 1.25, 1);
        transform: scale3d(1.25, 1.25, 1);
        opacity: 0
    }

    70% {
        -webkit-transform: scale3d(0.9, 0.9, 1);
        transform: scale3d(0.9, 0.9, 1)
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1
    }
}

@keyframes result_arrow {
    0% {
        -webkit-transform: scale3d(1.25, 1.25, 1);
        transform: scale3d(1.25, 1.25, 1);
        opacity: 0
    }

    70% {
        -webkit-transform: scale3d(0.9, 0.9, 1);
        transform: scale3d(0.9, 0.9, 1)
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}