@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&family=Roboto:wght@300;400;500&display=swap');

*, *::before, *::after {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, input, select, textarea, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, header, footer, hgroup, menu, nav, output, 
ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; vertical-align: baseline; border: 0;}
article, aside, hgroup, header, footer, figure, figcaption, nav, section,time, mark, canvas, video, audio, details, summary {display: block;}

html {
/* Prevent font scaling in landscape */
-webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
-moz-text-size-adjust: none; /*Firefox*/
-ms-text-size-adjust: none; /*Ie*/
-o-text-size-adjust: none; /*old versions of Opera*/
}

html {width: 100%; font-size: 62.5%; scroll-behavior: smooth;}
body {width: 100%; font-size: 1.4rem; color: #666; line-height: 1; font-weight: 400; font-family: 'Prompt', 'Roboto', sans-serif; background: #111633 url(../images/bg.jpg) repeat-x 50% top; /* IOS */ -webkit-text-size-adjust: none;}
menu, ol, ul, li {list-style: none; list-style-image: none; vertical-align: top;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: none;}
table {table-layout: fixed; word-break: break-all; white-space: pre-wrap; border-collapse: collapse; border-spacing: 0;}
table caption {display: none;}
ul {font-size: 0; letter-spacing: -4px;}
li {font-size: 1.3rem; letter-spacing: 0;}
img {line-height: inherit; vertical-align: top; -ms-interpolation-mode: bicubic !important;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; text-transform: uppercase;}
h3 {margin-bottom: 1.2rem; padding-left: 1.2rem; font-size: 1.4rem; color: #abf; letter-spacing: 0.08rem; background: url('../images/bul_stitle.png') no-repeat left 50%;}
h3 font {color: #adf;}
h3.none {background: none;}

/**/
input, select, textarea, button {font-size: 1.4rem; vertical-align: middle; border-radius: 1.2rem; font-family: 'Prompt';}
input, select, button {height: 4.8rem; padding: 0 2.4rem; letter-spacing: 0.04rem; background: #fff;}
input:focus, select:focus, textarea:focus, button:focus {outline: none;}
input[type="file"]::-webkit-file-upload-button {height: 100%; vertical-align: middle;}
input[type="checkbox"], input[type="radio"] {width: 1.6rem; height: 1.6rem; margin-right: 1.2rem; padding: 0; border: none;}
select {-webkit-appearance: none;-moz-appearance: none; appearance: none;}
select::-ms-expand {display: none;}
select:focus {outline: none;}
button {padding: 0 1.2rem; letter-spacing: 0.14rem; font-weight: 600;}
a, button {color: #fff; text-align: center; text-decoration: none; display: inline-block; outline: none; cursor: pointer;}
a:focus, button:focus {outline: none;}

/* unit */
.dimmed {width: 100%; height: 100%; background: #000; opacity: 0.8; filter: alpha(opacity=80); position: fixed; left: 0; top: 0; z-index: 90;}

.loding {width: 100%; height: 100%; text-align: center; background: #000; opacity: 0.8; filter: alpha(opacity=80); position: fixed; left: 0; top: 0; display: none; z-index: 90;}
.loding > p {width: 6.2rem; height: 6.2rem; margin: -3rem 0 0 -3rem; background: url(../images/loading_bg.png) no-repeat; position: absolute; top: 50%; left: 50%;}
.loding > p > img {width: 6rem; height: 6rem;}

.entry {width: 100%; font-size: 0; letter-spacing: -4px;}
.entry .input input {width: 100%; font-size: 1.7rem; color: #000; line-height: 5.2rem; letter-spacing: 0; font-weight: 500; background: #eee; vertical-align: top;}
.entry .input input:focus {color: #45a;}
.entry .input input::-ms-input-placeholder {font-size: 1.4rem; color: #888; line-height: 4.8rem; letter-spacing: 0.06rem; font-weight: 400; text-transform: uppercase;}
.entry .input input::-webkit-input-placeholder {font-size: 1.4rem; color: #888; line-height: 4.8rem; letter-spacing: 0.06rem; font-weight: 400; text-transform: uppercase;} 
.entry .input input::-moz-placeholder {font-size: 1.4rem; color: #888; line-height: 4.8rem; letter-spacing: 0.06rem; font-weight: 400; text-transform: uppercase;}
.entry .input2 input {width: calc(50% - 0.6rem);}
.entry .input2 input:last-child {margin-left: 1.2rem;}
.entry .input_btn input {width: calc(100% - 12rem); border-radius: 1.2rem 0 0 1.2rem; background: #eee url(../images/input_btn48.png) no-repeat right top;}
.entry .input_btn button {width: 12rem; height: 4.8rem; font-size: 1.1rem; letter-spacing: 0.1rem; line-height: 5.2rem; border-radius: 0 1.2rem 1.2rem 0; background: linear-gradient(90deg, #f66, #f94);}
.entry .input60 input {height: 6rem; line-height: 6.1rem;}
.entry .input60 button {height: 6rem; font-size: 1.3rem; line-height: 6.2rem; font-weight: 700;}

.btn_gr {border: 1px solid transparent; border-radius: 1.2rem; background: linear-gradient(90deg, #4c3, #0ce) padding-box, linear-gradient(90deg, #4c3, #0ce) border-box;}
.btn_gr:hover {border: 1px solid #0ee; background: #0aa;}
.btn_vt {border: 1px solid transparent; border-radius: 1.2rem; background: linear-gradient(90deg, #97f, #0bf) padding-box, linear-gradient(90deg, #97f, #0bf) border-box;}
.btn_vt:hover {border: 1px solid #0df; background: #3af;}

/* layout */
header, footer, section {width: calc(100% - 7.2rem); max-width: 1680px; margin: 0 auto; border-radius: 3.6rem; position: relative;}
section > div {padding: 3.6rem; border-radius: 3.6rem}

/* header */
header h1, header ul, header li, header p, header span {height: 2.4rem; line-height: 2.4rem; display: inline-block;}
header {margin-bottom: 4.8rem;}
header .top {padding: 2.4rem 3.6rem; font-size: 0; color: #fff; letter-spacing: -4px; text-align: right; background: rgba(68, 85, 170, 0.7); position: relative;}
header .top h1 {text-align: left; position: absolute; left: 3.6rem;}
header .top h1 > a {margin-right: 2.4rem; font-size: 1.4rem; color: #adf; letter-spacing: 0.08rem; font-weight: 700;}
header .top p {margin-left: 2.4rem;}
header .top .cash li {padding: 0 1.2rem 0 6.4rem; border: 1px solid transparent; border-radius: 12rem; background: linear-gradient(#3d4ea3, #3d4ea3) padding-box, linear-gradient(-90deg, #0bf, #97f) border-box; position: relative;}
header .top .cash li span {padding: 0 1.2rem; font-size: 1.1rem; color: #eef; line-height: 2.5rem; letter-spacing: 0.06rem; font-weight: 500; border-radius: 12rem; background: linear-gradient(90deg, #0bf, #97f); position: absolute; top: -0.1rem; left: -0.1rem;}
header .top .cash .bonus {margin-left: 1.2rem; padding: 0 3rem 0 10.8rem;}
header .top .cash .btn_reload {width: 2.4rem; height: 2.4rem; font-size: 0; text-indent: -9999px; background: url(../images/btn_reload.png) no-repeat left top; position: absolute; top: -0.1rem;; right: 0.1rem;}
header .top .cash .btn_reload:hover {background-position: left -2.4rem;}
header .top .my {max-width: 18rem; margin-bottom: -0.8rem; padding-left: 1.8rem; font-size: 1.5rem; letter-spacing: 0.02rem; font-weight: 300; background: url(../images/icon_12_user.png) no-repeat left 50%; overflow: hidden; text-overflow: ellipsis; word-wrap: normal; white-space: nowrap;}
header .top .btn_logout {padding: 0 1.8rem; font-size: 1.1rem; letter-spacing: 0.08rem; font-weight: 600; border-radius: 12rem;}
header .gnb {width: 100%; text-align: center; border-radius: 0 0 3.6rem 3.6rem; background: #fff;}
header .gnb ul, header .gnb li {height: auto; line-height: 1;}
header .gnb ul {width: 100%; max-width: 88.8rem;}
header .gnb li {width: 33.3%; height: auto;}
header .gnb li:first-child {width: 33.4%;}
header .gnb li a {width: 100%; padding-left: 2.4rem;}
header .gnb li a span {height: 7.2rem; padding: 0 6rem; font-size: 1.6rem; color: #999; line-height: 7.2rem; letter-spacing: 0.12rem; font-weight: 700;}
header .gnb li.topup a span {background: url(../images/gnb_topup.png) no-repeat left top;}
header .gnb li.coupon a span {background: url(../images/gnb_coupon.png) no-repeat left top;}
header .gnb li.history a span {background: url(../images/gnb_history.png) no-repeat left top;}
header .gnb li a:hover span {color: #45a; background-position: left -7.2rem;}
header .gnb li.current a span, header .gnb li.current a:hover span {color: #333; background-position: left -14.4rem;}
header .mobile, header .top .dimmed {display: none;}

/* event */
.top_event {width: 100%; margin-bottom: 4.8rem; text-align: center; position: relative;}
.top_event .banner {width: 100%;}
.top_event .banner li {margin-bottom: -0.2rem;}
.top_event .banner li a img {width: 91.2rem; border-radius: 12rem;}
.top_event .pn {width: 103.2rem; margin: -1.8rem 0 0 -51.6rem; font-size: 0; letter-spacing: -4px; position: absolute; top: 50%; left: 50%;}
.top_event .pn p {width: 3.6rem; height: 3.6rem; background: url(../images/btn_pn.png) no-repeat left top; position: absolute;}
.top_event .pn a {width: 100%; height: 100%; border-radius: 12rem; text-indent: -99999px;}
.top_event .pn .btn_prev {left: 0;}
.top_event .pn .btn_next {right: 0;}
.top_event .pn .btn_prev a {background: url(../images/btn_prev.png) no-repeat left top;}
.top_event .pn .btn_next a {background: url(../images/btn_next.png) no-repeat left top;}
.top_event .pn .btn_prev a:hover, .top_event .pn .btn_next a:hover {background-position: left -3.6rem;}

.slick-dots {width: 100%; height: 3.6rem; margin: 0; position: absolute; bottom: 0;}
.slick-dots li {margin: 0 -0.1rem; padding: 1.2rem 0.7rem 0; background: #122142; display: inline-block; position: relative;}
.slick-dots li:first-child::before, .slick-dots li:last-child::after {content: ''; width: 3.6rem; height: 3.6rem; display: inline-block; position: absolute; bottom: 0;}
.slick-dots li:first-child::before {background: url(../images/top_bn_bg.png) no-repeat left top; left: -3.5rem;}
.slick-dots li:last-child::after {background: url(../images/top_bn_bg.png) no-repeat left top; right: -3.5rem; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1);}
.slick-dots li button {width: 2.4rem; height: 2.4rem; padding: 0; padding-left: 1px; font-size: 1.4rem; color: #abf; line-height: 2.6rem; font-weight: 400; border-radius: 12rem; background: linear-gradient(0deg, #237, #45a); display: block; cursor: pointer;}
.slick-dots li button:hover {color: #fff;}
.slick-dots .slick-active button, .slick-dots .slick-active button:hover {color: #fff; background: linear-gradient(90deg, #97f, #0bf);}

/* slick */
.slick-slider {display: block; position: relative; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-list {margin: 0; padding: 0; display: block; position: relative; overflow: hidden;}
.slick-list:focus {outline: none;}
.slick-list.dragging {cursor: pointer; cursor: hand;}
.slick-slider .slick-track, .slick-slider .slick-list {-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
.slick-track {margin-left: auto; margin-right: auto; display: block; position: relative; top: 0; left: 0;}
.slick-track:before, .slick-track:after {content: ''; display: table;}
.slick-track:after {clear: both;}
.slick-loading .slick-track {visibility: hidden;}
.slick-slide {height: 100%; min-height: 1px; display: none; float: left;} [dir='rtl'] .slick-slide {float: right;}
.slick-slide img {display: block;}
.slick-slide.slick-loading img {display: none;}
.slick-slide.dragging img {pointer-events: none;}
.slick-initialized .slick-slide {display: block;}
.slick-loading .slick-slide {visibility: hidden;}
.slick-vertical .slick-slide {height: auto; border: 1px solid transparent; display: block;}
.slick-arrow.slick-hidden {display: none;}

/* topup */
.topup_wrap {background: rgba(68, 85, 170, 0.5); box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.1);}
.topup_wrap .pg_list {padding: 3rem 3rem 2.4rem 3rem; background: #fff; box-shadow: 0 2.4rem 4.8rem rgba(17, 22, 51, 0.3);}
.topup_wrap .pg_list ul {width: 100%;}
.topup_wrap .pg_list li {width: calc(100% / 10); margin-bottom: 0.2rem; padding: 0.6rem; display: inline-block;}
.topup_wrap .pg_list li a {width: 100%;}
.topup_wrap .pg_list li a > span {font-size: 1.1rem; color: #999; letter-spacing: 0.06rem; font-weight: 500; text-transform: uppercase; display: block;}
.topup_wrap .pg_list li .logo {width: 100%; height: 7.2rem; margin-bottom: 1.1rem; border-radius: 1.2rem; border: 1px solid #eee; background: #eee; position: relative; overflow: hidden;}
.topup_wrap .pg_list li .logo > img {width: 84%; max-width: 96px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.topup_wrap .pg_list li a:hover > span {color: #45a;}
.topup_wrap .pg_list li a:hover .logo {border: 1px solid #45a;}
.topup_wrap .pg_list li.current a > span {color: #000;}
.topup_wrap .pg_list li.current .logo {border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(0deg, #f66, #f94) border-box;}
.topup_wrap .pg_list li:first-child a > span {letter-spacing: 0.04rem;}

.topup_wrap .pg_method {width: 100%; height: 100%; display: table;}
.topup_wrap .pg_method > div {width: 80%; height: 100%; border-radius: 2.4rem; position: relative; display: table-cell; vertical-align: top;}
.topup_wrap .pg_method > div:first-child {width: 20%;}

.pg_method .info {height: 100%; padding: 4.6rem 3.6rem; color: #fff; text-align: center; overflow: hidden;}
.pg_method .info > div {position: relative; z-index: 3;}
.pg_method .info > div h2 {font-size: 1.7rem; line-height: 1.2; letter-spacing: 0.14rem;}
.pg_method .info > div a {min-width: 12rem; margin-top: 2rem; padding: 1rem 2rem 0.8rem; font-size: 1.3rem; line-height: 1.1; letter-spacing: 0.12rem; font-weight: 700; border-radius: 12rem; border: 1px solid #fff; opacity: 0.8;}
.pg_method .info > div a:hover {opacity: 1;}
.pg_method .info > div .txt {margin-top: 1.3rem; font-size: 1.2rem; letter-spacing: 0.02rem; line-height: 2rem; opacity: 0.6; filter: alpha(opacity=60);}
.pg_method .info > p img {width: 100%; min-width: 36rem; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); z-index: 1;}
.pg_method .info > p::before {content: ''; width: 100%; height: 100%; border: 1px solid #fff; border-radius: 2.4rem; opacity: 0.3; filter: alpha(opacity=30); position: absolute; top: 0; left: 0; display: block; z-index: 2;}

.pg_method .pay {width: 100%; height: calc(100% - 2.4rem); border-radius: 2.4rem; position: relative;}
.pg_method .pay > div {width: 100%; height: 100%; display: table;}
.pg_method .pay > div > div {width: 50%; height: 100%; padding-left: 3.6rem; display: table-cell; vertical-align: top;}

.pg_method .pay h3 {letter-spacing: 0.06rem;}
.pg_method .pay .charge table {width: 100%; height: calc(100% - 2.4rem);}
.pg_method .pay .charge td {height: 5.8rem; padding: 0 2.4rem; font-size: 1.3rem; color: #000; line-height: 1.3rem; letter-spacing: 0.04rem; border-radius: 0 1.2rem 1.2rem 0; border-top: 2px solid #236; background: #fff; vertical-align: middle;}
.pg_method .pay .charge td:first-child {width: 35%; color: #fff; border-radius: 1.2rem 0 0 1.2rem; background: linear-gradient(90deg, #45a, #46c);}
.pg_method .pay .charge tr:first-child td {height: 6rem; border-top: none;}
.pg_method .pay .charge td:first-child.explain {padding: 1.6rem 2.4rem 1.6rem 5rem; font-size: 1.3rem; color: #8ae; line-height: 1.8rem; letter-spacing: 0; font-family: 'Roboto', 'Prompt'; border-radius: 1.2rem; background: #348 url(../images/bul_warning.png) no-repeat 2.4rem 50%;}
.pg_method .pay .charge td input {vertical-align: bottom;}
.pg_method .pay .charge .bonus {color: #d22;}

.pg_method .form .form_cont {height: calc(100% - 2.4rem); padding: 3.6rem 3.6rem 9.8rem; border-radius: 2.4rem 2.4rem 2.5rem 2.5rem; background: #fff; position: relative;}
.pg_method .form .form_cont .txt {margin-top: -0.4rem; font-size: 1.4rem; line-height: 2.4rem; font-family: 'Roboto', 'Prompt'; background: #fff;}
.pg_method .form .form_cont .txt strong {color: #c00; font-weight: 400;}
.pg_method .form .form_cont .entry {margin-top: 3.2rem;}
.pg_method .form .form_cont .entry .input input {margin-bottom: 1.2rem;}
.pg_method .form .form_cont .entry .input:last-of-type input {margin-bottom: 0.2rem;}
.pg_method .form .form_cont .entry .warning {margin-bottom: 1.2rem; padding: 0 2.4rem; font-size: 1.3rem; line-height: 2rem; letter-spacing: 0; color: #d00; background: url(../images/bul_warning_rd.png) no-repeat left 50%; font-family: 'Roboto', 'Prompt';}
.pg_method .form .form_cont .btn_form {width: 100%; position: absolute; left: 0; bottom: 0;}
.pg_method .form .form_cont .btn_form > a {width: 100%; height: 6rem; font-size: 1.4rem; line-height: 6rem; letter-spacing: 0.125rem; font-weight: 600; text-transform: uppercase; border-radius: 0 0 2.4rem 2.4rem;}
.pg_method .form .form_cont .btn_form > a:hover {border-top: 1px solid #0aa;}
 
/* pg_method_"pg name" */
.pg_method_indosat .info > p img {bottom: -15rem;}

/* coupon */
.coupon_wrap {padding: 4.8rem; font-size: 0; letter-spacing: -4px; background: rgba(68, 85, 170, 0.5); box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.1);}
.coupon_wrap > div {padding: 0; margin-bottom: 48px;}
.coupon_wrap > div:last-child {margin-bottom: 0;}
.coupon_wrap .coupon, .coupon_wrap .howto {color: #fff; text-align: center; border-radius: 2.4rem; border: 1px solid transparent; background: linear-gradient(90deg, #61c, #27f) padding-box, linear-gradient(90deg, #f90, #fe0) border-box; position: relative; overflow: hidden;}
.coupon_wrap .coupon {padding: 6.8rem 4.8rem 0; height: 28.8rem;}
.coupon_wrap .coupon::before, .coupon_wrap .coupon::after {content: ''; width: 36rem; height: 28.8rem; display: block; position: absolute; top: -1px; z-index: 1;}
.coupon_wrap .coupon::before {background: url(../images/coupon_bg_lf.png) no-repeat left top; right: 80%;}
.coupon_wrap .coupon::after {background: url(../images/coupon_bg_rt.png) no-repeat right top; left: 80%;}
.coupon_wrap .coupon h2 {font-size: 2.4rem; color: #fe0; letter-spacing: 0.18rem; font-weight: 700;}
.coupon_wrap .coupon .txt {margin-top: 0.6rem; font-size: 1.5rem; color: #adf; letter-spacing: 0.02rem; font-weight: 300;}
.coupon_wrap .coupon .entry {width: 100%; max-width: 49.2rem; margin: 3.6rem auto 0; position: relative; z-index: 2;}
.coupon_wrap .coupon .entry .input_btn input {width: calc(100% - 14.4rem); text-align: center; background: #fff url(../images/input_btn60_gr.png) no-repeat right top;}
.coupon_wrap .coupon .entry .input_btn input:focus {color: #000;}
.coupon_wrap .coupon .entry .input_btn button {width: 14.4rem; background: linear-gradient(90deg, #4c3, #0ce);}
.coupon_wrap .howto {text-align: center; border-radius: 2.4rem; border: 1px solid transparent; background: linear-gradient(90deg, #61c, #27f) padding-box, linear-gradient(90deg, #f90, #fe0) border-box; overflow: hidden;}
.coupon_wrap .howto img {width: 100%;}
.coupon_wrap .howto img.mobile {display: none;}
.coupon_wrap .caution li {margin-top: 0.2rem; padding: 1.6rem 2.4rem 1.4rem; font-size: 1.4rem; color: #abf; line-height: 1.5; font-family: 'Roboto', 'Prompt'; border-radius: 1.2em; background: #45a;}

/* history */
.history_wrap {font-size: 0; letter-spacing: -4px;}
.history_wrap > div {text-align: center; display: inline-block; vertical-align: top;}
.history_wrap .search {width: 20%; min-width: 30rem; padding: 3.6rem; background: rgba(68, 85, 170, 0.5); box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.1);}
.history_wrap .search > div {width: 100%;}
.history_wrap .search .category {margin-bottom: 3.6rem; border-radius: 1.2rem; border: 1px solid transparent; background: linear-gradient(90deg, #2b3973, #2b3973) padding-box, linear-gradient(90deg, #0ce, #4c3) border-box; position: relative;}
.history_wrap .search .category::before {content: ''; width: 3.6rem; height: 4.8rem; background: url(../images/select_arrow.png) no-repeat 50%; display: block; position: absolute; top: 50%; right: 0; transform: translate(0, -50%); z-index: 1;}
.history_wrap .search .category select {width: 100%; font-size: 1.5rem; color: #0ce; letter-spacing: 0.06rem; text-align: center; background: none; position: relative; z-index: 2;}
.history_wrap .search .category select option {color: #000; padding-left: 1.2rem;}
.history_wrap .search .date input, .history_wrap .search .date select {width: 100%; letter-spacing: 0.02rem; font-family: 'Roboto', 'Prompt';}
.history_wrap .search .date select {background: #fff url(../images/select.png) no-repeat right 50%;}
.history_wrap .search .date .day {margin-bottom: 1.2rem;}
.history_wrap .search .date .day input {width: calc(30% - 0.6rem);}
.history_wrap .search .date .day select {width: calc(70% - 0.6rem); margin-left: 1.2rem;}
.history_wrap .search .date .btn_gr {min-width: 14.4rem; margin-top: 1.2rem;}
.history_wrap .history {width: 80%; max-width: calc(100% - 30rem); padding: 0; padding-left: 4.8rem;}

.state {min-width: 6.8rem; padding: 0.6rem 1.2rem 0.5rem; font-size: 1.1rem; color: #4c3; letter-spacing: 0.08rem; font-weight: 500; font-family: 'Prompt'; border-radius: 12rem; border: 1px solid #4c3; display: inline-block;}
.state.used {color: #f66; border: 1px solid #f66;}
.state.cancel {color: #57f; border: 1px solid #57f;}

.bbs {width: 100%;}
.bbs li {width: 100%; padding-right: 1.2rem; font-size: 0; letter-spacing: -4px; display: table;}
.bbs li > div {height: 6rem; letter-spacing: 0; display: table-cell; vertical-align: middle;}
.bbs .title {border-radius: 3.6rem 3.6rem 0 0; background: #fff;}
.bbs .title > div {font-size: 1.3rem; color: #45a; letter-spacing: 0.06rem; font-weight: 600;}
.bbs .title > div:nth-child(odd) {color: #333;}
.bbs .list > div {font-size: 1.6rem; color: #fff; font-family: 'Roboto', 'Prompt';}
.bbs .list:nth-child(even) {background: #2b3a77;}
.bbs .list:nth-child(odd) {background: #223066;}
.bbs .list:nth-child(11), .bbs .list:nth-child(11), .bbs .list:last-child {border-radius: 0 0 3.6rem 3.6rem;}
.bbs .list.nodata {padding: 10.3rem 3.6rem;}
.bbs .list.nodata > div {color: #89e; font-size: 1.3rem;}
.bbs .mobile {display: none;}

.paging {margin-top: 4.8rem; padding: 0 2.4rem; border-radius: 12rem; background: #0c0f23; display: inline-block;}
.paging a {min-width: 3.6rem; height: 4.8rem; padding: 0 0.6rem; color: #57f; font-size: 1.3rem; line-height: 4.8rem; letter-spacing: 0; display: inline-block; vertical-align: top;}
.paging a:hover {background-color: #000;}
.paging .on {color: #fff; border-radius: 1.2rem; background: linear-gradient(0deg, #237, #45a);}
.paging .move {font-size: 0; text-indent: -9999px; background-repeat: no-repeat; background-position: 50%;}
.paging .move.first {background-image: url(../images/paging_first.png);}
.paging .move.prev {margin-right: 1.2rem; background-image: url(../images/paging_prev.png);}
.paging .move.next {margin-left: 1.2rem; background-image: url(../images/paging_next.png);}
.paging .move.last {background-image: url(../images/paging_last.png);}

.history_wrap .bbs .no {width: 12%;}
.history_wrap .bbs .date {width: 16%;}
.history_wrap .bbs .subject {width: 24%;}
.history_wrap .bbs .value {width: 18%;}
.history_wrap .bbs .balance {width: 18%;}
.history_wrap .bbs .status {width: 12%;}
.history_wrap .bbs .list .date {color: #abf;}
.history_wrap .bbs .list .value {color: #fd0;}

.history_wrap .bbs_pbcash .subject {width: 10%;}
.history_wrap .bbs_pbcash .value {width: 30%;}
.history_wrap .bbs_pbcash .balance {width: 20%;}
.history_wrap .bbs_pbcash .list .value {color: #fff;}
.history_wrap .bbs_pbcash .list .balance {color: #fd0;}

.history_wrap .bbs_coupon .subject {width: 30%;}
.history_wrap .bbs_coupon .value {width: 30%;}

/* footer */
footer {margin: 4.8rem auto; padding: 6.2rem 0 6.3rem 28.3rem; font-size: 1.2rem; color: #666; background: #0a0d1e; position: relative;}
footer img {margin-top: -2rem; position: absolute; left: 7.2rem; top: 50%;}
footer .age {margin-top: -22px; position: absolute; left: 22rem; top: 50%;}
footer .age img {position:static; margin-top:0; max-width:44px;}
footer p {font-size: 1.4rem; color: #666; letter-spacing: 0.02rem; font-family: 'Roboto', 'Prompt';}
footer .cs {margin-bottom: 0.7rem; color: #89e;}
footer .cs > a {color: #fff; text-decoration: underline;}
footer .cs > a:hover {color: #fe0;}
footer .top {min-width: 8.4rem; height: 3.6rem; margin-top: -1.8rem; padding: 0 2.4rem; font-size: 1.4rem; color: #89e; letter-spacing: 0.08rem; line-height: 3.8rem; font-weight: 700; border-radius: 12rem; background: linear-gradient(90deg, #34a, #237); position: absolute; right: 7.2rem; top: 50%;}
footer .top:hover {color: #fff; background: linear-gradient(90deg, #34a, #57f);}

/* popup(layer) */
.popup {width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 98;}
.pop_layout {width: calc(100% - 2.4rem); max-width: 50.4rem; padding: 4.8rem 4.8rem 5.8rem; color: #fff; text-align: center; border: 1px solid transparent; border-radius: 3rem; background: linear-gradient(0deg, #45c, #393499) padding-box, linear-gradient(0deg, #97f, #0bf) border-box; box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.5); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99;}
.pop_layout h3 {margin-bottom: 2.4rem; padding-left: 0; background: none;}
.pop_layout .pop_info {margin-bottom: 2.4rem; padding: 2.4rem; color: #fff; border-radius: 1.2rem; background: #162048;}
.pop_layout .pop_info .stit {margin-bottom: 0.6rem; font-size: 1.2rem; color: #abf; line-height: 1; letter-spacing: 0.04rem; font-weight: 500; display: block;}
.pop_layout .pop_info .num {font-size: 1.5rem; font-weight: 500;}
.pop_layout .pop_btn {width: 100%; margin-top: 3.2rem; font-size: 0; letter-spacing: -4px;}
.pop_layout .pop_btn a {min-width: 14.4rem; height: 4.8rem; margin: 0 0.6rem; padding: 0 2.4rem; font-size: 1.2rem; line-height: 4.8rem; letter-spacing: 0.08rem; font-weight: 500; display: inline-block;}
.pop_layout2 {padding: 3.6rem;}

.pop_layout .pop_txt h4 {margin-bottom: 1rem; font-size: 2rem; color: #fe0; letter-spacing: 0.1rem; font-weight: 700;}
.pop_layout .pop_txt h4 font {color: #fff;}
.pop_layout .pop_txt p {font-size: 1.4rem; color: #abf; line-height: 2rem;}
.pop_layout .pop_txt p > a {text-decoration: underline;}
.pop_layout .pop_txt.complete {padding-top: 7.8rem; background: url(../images/icon_48_complete.png) no-repeat 50% top;}
.pop_layout .pop_txt.warning {padding-top: 7.8rem; font-size: 1.4rem; background: url(../images/icon_48_warning.png) no-repeat 50% top;}

.pop_layout .pop_board {width: 100%;}
.pop_layout .pop_board th, .popup .pop_board td {height: 3.6rem; padding: 1.2rem; font-size: 1.4rem; vertical-align: middle;}
.pop_layout .pop_board th {font-size: 1.2rem; color: #adf; letter-spacing: 0.04rem; font-weight: 500; text-align: left; text-transform: uppercase; border-bottom: 1px solid #6cf;}
.pop_layout .pop_board td {color: #fff; line-height: 1.2; text-align: right; font-family: 'Roboto', 'Prompt'; border-bottom: 1px solid #97f;}
.pop_layout .pop_board td font {color: #fe0;}

/* error */
header .error {padding: 2.4rem 3.6rem; font-size: 0; color: #fff; letter-spacing: -4px; text-align: center; background: rgba(68, 85, 170, 0.7); border-radius: 0 0 3.6rem 3.6rem;}
header .error h1 a {font-size: 1.4rem; color: #adf; line-height: 2.4rem; letter-spacing: 0.125rem; display: block;}
header .error h1 a:last-child {display: none;}

.error_wrap {padding: 4.8rem; text-align: center;}
.error_wrap div {width: 100%; min-height: 30rem; display: table;}
.error_wrap p {font-size: 1.7rem; color: #abf; letter-spacing: 0.02rem; font-weight: 300; display: table-cell; vertical-align: middle;}
.error_wrap p span {margin-bottom: 0.8rem; font-size: 4rem; color: #fff; letter-spacing: 0.04rem; font-weight: 600; display: block;}

/**************** W1680 ****************/
@media screen and (max-width: 1680px) {
	
	.topup_wrap .pg_method > div {width: 75%;}
	.topup_wrap .pg_method > div:first-child {width: 25%;}
}

/**************** W1440 ****************/
@media screen and (max-width: 1440px) {

	.topup_wrap .pg_list li {width: calc(100% / 8);}
	
	.pg_method .info {padding-left: 2.4rem; padding-right: 2.4rem;}
	.pg_method .pay .charge td:first-child {width: 16rem;}
}

/**************** W1280 ****************/
@media screen and (max-width: 1280px) {
	
	header, footer, section {width: calc(100% - 4.8rem); border-radius: 2.4rem;}
	section > div {padding: 2.4rem; border-radius: 2.4rem}

	header {margin-bottom: 2.4rem;}
	header .top {padding: 1.8rem 2.4rem;}
	header .top h1 {left: 2.4rem;}
	header .top h1 > a {margin-right: 1.2rem;}
	header .top h1 img {height: 2rem; margin-top: 0.2rem;}
	header .top p {margin-left: 1.2rem;}
	header .top .cash .bonus {margin-left: 0.6rem; padding-right: 2.4rem;}
	header .top .my {max-width: 12rem;}
	header .top .btn_logout {padding: 0 1.4rem;}
	header .gnb {border-radius: 0 0 2.4rem 2.4rem;}
	header .gnb li a span {height: 6rem; padding: 0 6rem; line-height: 6rem;}
	header .gnb li.topup a span, header .gnb li.coupon a span, header .gnb li.history a span {background-position: left -0.6rem;}
	header .gnb li a:hover span {background-position: left -7.8rem;}
	header .gnb li.current a span, header .gnb li.current a:hover span {background-position: left -15rem;}
	
	.top_event {margin-bottom: 2.4rem;}
	
	.topup_wrap .pg_list {padding: 1.8rem;}
	.topup_wrap .pg_list li {margin-bottom: 0;}
	.topup_wrap .pg_list li .logo {margin-bottom: 0;}
	.topup_wrap .pg_list li .name {display: none;}

	.pg_method .info {padding: 4rem 3.6rem;}
	.pg_method .info > p::before {border-radius: 1.8rem;}
	.pg_method h3.none {margin-bottom: 0; font-size: 0; text-indent: -9999px;}

	.pg_method .pay > div > div {padding-left: 2.4rem;}
	.pg_method .pay .charge td {height: 5rem;}
	.pg_method .pay .charge tr:first-child td {height: 5.2rem;}
	.pg_method .pay .charge td:first-child.explain {padding: 1.2rem 2.4rem 1.2rem 5rem; background-position: 2.4rem 50%;}

	.topup_wrap .pg_method > div {width: 65%; border-radius: 1.8rem;}
	.topup_wrap .pg_method > div:first-child {width: 35%;}

	.pg_method .pay > div {display: block;}
	.pg_method .pay > div > div {width: 100%; display: block;}
	
	.pg_method .form {height: 24rem; margin-top: 2.2rem;}
	.pg_method .form .form_cont {padding: 2.4rem 2.4rem 7rem; border-radius: 1.8rem 1.8rem 1.9rem 1.9rem;}
	.pg_method .form .form_cont .entry {margin-top: 2rem;}
	.pg_method .form .form_cont .btn_form > a {height: 4.8rem; line-height: 4.8rem; border-radius: 0 0 1.8rem 1.8rem;}

	.coupon_wrap {padding: 2.4rem;}
	.coupon_wrap > div {margin-bottom: 2.4rem;}
	.coupon_wrap .coupon, .coupon_wrap .howto {border-radius: 1.8rem;}
	.coupon_wrap .coupon .txt {font-size: 1.3rem}
	.coupon_wrap .coupon .entry {max-width: 42rem;}
	
	.history_wrap .search {min-width: 26.4rem; padding: 2.4rem;}
	.history_wrap .search .category {margin-bottom: 2.4rem;}
	.history_wrap .search .date input, .history_wrap .search .date select {padding-left: 1.8rem;}
	.history_wrap .search .date .day input {width: calc(35% - 0.6rem);}
	.history_wrap .search .date .day select {width: calc(65% - 0.6rem);}
	.history_wrap .history {max-width: calc(100% - 26.4rem); padding-left: 2.4rem;}
	
	.bbs .title {border-radius: 2.4rem 2.4rem 0 0;}
	.bbs .list:nth-child(11), .bbs .list:last-child {border-radius: 0 0 2.4rem 2.4rem;}
	.bbs .list.nodata {padding-top: 8.5rem; padding-bottom: 8.5rem;}

	.paging {margin-top: 2.4rem;} 

	footer {margin: 2.4rem auto; padding: 4rem 0 4.1rem 22rem;}
	footer .age {left:16.6rem;}
	footer img {left: 2.4rem;}
	footer .top {right: 2.4rem;}
	footer p {font-size:1.3rem;}
}

/**************** W1080 ****************/
@media screen and (max-width: 1080px) {

	.top_event .banner li a img {width: calc(100% - 4.8rem); max-width: 912px; margin: 0 auto;}
	.top_event .pn {display: none;}

	.topup_wrap .pg_list li {width: calc(100% / 6);}
	.topup_wrap .pg_list li .logo {height: 6rem;}
	
	.pg_method .info {padding-left: 2.4rem; padding-right: 2.4rem;}
	
	.coupon_wrap .caution {margin-top: 2.4rem;}
	
	.history_wrap .search, .history_wrap .history {width: 100%; display: block;}
	.history_wrap .search > div {display: inline-block; vertical-align: top;}
	.history_wrap .search input, .history_wrap .search select, .history_wrap .search button {height: 3.6rem; padding: 0 1.2rem; line-height: 3.6rem;}
	.history_wrap .search .category {width: 20%; margin-bottom: 0;}
	.history_wrap .search .category select {text-align: left;}
	.history_wrap .search .date {width: 80%; text-align: right;}
	.history_wrap .search .date input, .history_wrap .search .date select {width: 10.2rem; padding-left: 1.2rem; background-size: 3.6rem; background-position: right top;}
	.history_wrap .search .date input, .history_wrap .search .date select, .history_wrap .search .date button {margin-left: 0.8rem;}
	.history_wrap .search .date p {display: inline-block;}
	.history_wrap .search .date select {width: 8.2rem;}
	.history_wrap .search .date .day {margin-bottom: 0;}
	.history_wrap .search .date .day input {width: 4.8rem; padding: 0; text-align: center;}
	.history_wrap .search .date .day select {width: 11.6rem; margin-left: 0.8rem;}
	.history_wrap .search .date .btn_gr {min-width: 6.6rem; margin-top: 0;}
	.history_wrap .history {max-width: 100%; margin-top: 2.4rem; padding-left: 0;}
	
	.bbs li > div {height: 5.4rem;}
	.bbs .title > div {height: 5rem;}
	
	.paging {padding: 0 1.8rem;}
	.paging a {min-width: 3rem; height: 3.6rem; line-height: 3.6rem; font-size: 1.2rem;}
	.paging .on {border-radius: 0.8rem;}
}

/**************** W960 ****************/
@media screen and (max-width: 960px) {
	
	.top_event .banner li a img {border-radius: 2.4rem;}
	.pg_method .info > div a {padding-left: 1.8rem; padding-right: 1.8rem;}

	header {position: relative; z-index: 10;}
	header .top.mobile {display: block;}
	header .top.mobile .btn_my {width: 3rem; height: 3rem; margin: -0.3rem 0; padding: 0; border-radius: 12rem; position: relative; cursor: pointer;}
	header .top.mobile .btn_my::before {content: ''; width: 1.2rem; height: 1.2rem; margin: -0.6rem 0 0 -0.6rem;background: url(../images/icon_12_user_wt.png) no-repeat 50%; display: inline-block; position: absolute; top: 50%; left: 50%;}
	header .top.rw {width: 100%; text-align: center; display: none; position: absolute; top: 0; left: 0;}
	header .top.rw h1 {display: none;}
	header .top.rw p {margin-left: 0; display: block;}
	header .top.rw > div {width: 100%; padding: 6rem 2.4rem 2.4rem; border: 1px solid transparent; border-radius: 0 0 2.4rem 2.4rem; background: linear-gradient(90deg, #45a, #46c) padding-box, linear-gradient(0deg, #0bf, #45a) border-box; box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.8); position: absolute; top: 0; left: 0; z-index: 98;}
	header .top.rw .cash {width: 100%; height: auto;}
	header .top.rw .cash li {width: 100%; height: 3.6rem; margin: 0 0 0.6rem;; padding: 0 1.8rem 0 9rem; font-size: 1.4rem; line-height: 3.6rem; text-align: right;}
	header .top.rw .cash li span {min-width: 12rem; height: 3.6rem; padding: 0 1.8rem; font-size: 1.2rem; line-height: 3.7rem; letter-spacing: 0.08rem; text-align: center;}
	header .top.rw .cash .bonus {margin: 0 0 2.4rem; padding: 0 3.4rem 0 13.8rem;}
	header .top.rw .cash .btn_reload {width: 2.4rem; height: 2.4rem; top: 0.4rem; right: 0.6rem;}
	header .top.rw .cash .btn_reload:hover {background-position: left -2.4rem;}
	header .top.rw .my {max-width: 70%; margin-bottom: 0; padding-left: 0; font-size: 1.6rem; letter-spacing: 0.02rem; font-weight: 400; background: none; position: absolute; top: 1.6rem; left: 50%; transform: translate(-50%, 0);}
	header .top.rw .btn_logout {height: 3.6rem; padding: 0 1.8rem; font-size: 1.2rem; line-height: 3.6rem; letter-spacing: 0.12rem;}
}

/**************** W768 ****************/
@media screen and (max-width: 768px) {

	html {font-size: 50%;}
	h3 {margin-bottom: 0.6rem;}
	
	header, footer, section {width: calc(100% - 2.4rem); border-radius: 1.2rem;}
	section > div {padding: 1.6rem; border-radius: 1.2rem}

	header {margin-bottom: 1.6rem;}
	header .top.mobile {padding: 1.6rem 0; background: none;}
	header .top.mobile h1 {left: 0;}
	header .top.mobile h1 img {height: 1.6rem; margin-top: 0.4rem;}
	header .top.rw > div {border-radius: 0 0 1.6rem 1.6rem;}
	
	header .gnb {padding: 0 2.4rem; text-align: center; border-radius: 1.2rem;}
	header .gnb li a {padding-left: 0;}
	header .gnb li a span {height: 3.6rem; padding: 0 1.6rem 0 3.2rem; font-size: 1.2rem; line-height: 3.7rem; letter-spacing: 0.12rem;}
	header .gnb li.topup a span, header .gnb li.coupon a span, header .gnb li.history a span {background-size: 3.6rem; background-position: left top;}
	header .gnb li a:hover span {background-position: left -3.6rem;}
	header .gnb li.current a span, header .gnb li.current a:hover span {background-position: left -7.2rem;}

	.top_event {margin-bottom: 0.8rem;}
	.top_event .banner li a img {width: calc(100% - 2.4rem); border-radius: 1.2rem;}
	
	.slick-dots {height: 0.6rem; margin-top: 0.8rem; position: relative;}
	.slick-dots li {padding-top: 0; font-size: 0; background: none;}
	.slick-dots li:first-child::before, .slick-dots li:last-child::after {display: none;}
	.slick-dots li button {width: 0.6rem; height: 0.6rem; font-size: 0; text-indent: -9999px;}

	.topup_wrap .pg_list {padding: 0.8rem;}
	.topup_wrap .pg_list li {width: calc(100% / 5); padding: 0.4rem;}
	.topup_wrap .pg_list li .logo {height: 4.8rem; border-radius: 0.8rem;}
	.topup_wrap .pg_list li .logo > img {max-width: 60px;}
	
	.pg_method .info {padding: 2.4rem;}
	.pg_method .info > div h2 {font-size: 1.3rem;}
	.pg_method .info > div a {margin-top: 1.2rem; padding-top: 0.7rem; padding-bottom: 0.6rem; font-size: 1rem;}
	.pg_method .info > div .txt {margin-top: 0.6rem; line-height: 1.6rem;}
	.pg_method .info > p img {top: 0; bottom: auto;}
	.pg_method .info > p::before {border-radius: 1.2rem;}
	
	.topup_wrap .pg_method {display: block;}
	.topup_wrap .pg_method > div {width: 100%; border-radius: 1.2rem; display: block;}
	.topup_wrap .pg_method > div:first-child {width: 100%;}

	.pg_method .pay > div > div {margin-top: 1.6rem; padding-left: 0;}
	.pg_method .pay .charge td {height: 4.4rem; padding: 0.1rem 1.2rem 0;}
	.pg_method .pay .charge td:first-child {width: 44%;}
	.pg_method .pay .charge tr:first-child td {height: 4.2rem;}
	.pg_method .pay .charge td input {vertical-align: middle;}
	.pg_method .pay .charge td:first-child.explain {padding: 1.2rem 2.4rem 1.2rem 3.6rem; background-size: 1.2rem; background-position: 1.6rem 50%;}

	.pg_method .form {margin-top: 1.2rem;}
	.pg_method .form .form_cont {padding: 1.8rem 1.8rem 6.4rem; border-radius: 1.2rem 1.2rem 1.3rem 1.3rem;}
	.pg_method .form .form_cont .txt {font-size: 1.4rem; line-height: 1.7rem;}
	.pg_method .form .form_cont .entry {margin-top: 1.6rem;}
	.pg_method .form .form_cont .input input {height: 4.2rem; margin-bottom: 0.8rem; padding: 0 1.2rem; line-height: 4.3rem; border-radius: 0.8rem;}
	.pg_method .form .form_cont .input2 input {width: calc(50% - 0.4rem);}
	.pg_method .form .form_cont .input2 input:last-child {margin-left: 0.8rem;}
	.pg_method .form .form_cont .input_btn input {border-radius: 0.8rem 0 0 0.8rem;}
	.pg_method .form .form_cont .input_btn button {border-radius: 0 0.8rem 0.8rem 0}
	.pg_method .form .form_cont .btn_form > a {height: 4.8rem; line-height: 4.8rem; border-radius: 0 0 1.2rem 1.2rem;}

	.coupon_wrap {padding: 1.6rem;}
	.coupon_wrap > div {margin-bottom: 2rem;}
	.coupon_wrap .coupon {height: auto; padding: 3.6rem 3rem 3rem;}
	.coupon_wrap .coupon::before, .coupon_wrap .coupon::after {width: 24rem; display: none;}
	.coupon_wrap .coupon h2 {font-size: 1.6rem;}
	.coupon_wrap .coupon .txt {margin-top: 0.2rem; line-height: 1.2;}
	.coupon_wrap .coupon .entry {max-width: 100%; margin-top: 1.2rem;}
	.coupon_wrap .coupon .entry .input input, .coupon_wrap .coupon .entry .input button {height: 4.8rem; margin: 0.4rem; border-radius: 1.2rem;}
	.coupon_wrap .coupon .entry .input_btn input {width: 100%; max-width: 26.4rem; font-size: 1.5rem; line-height: 4.9rem; background: #fff;}
	.coupon_wrap .coupon .entry .input_btn button {font-size: 1rem; line-height: 5rem;}
	.coupon_wrap .howto img.pc {display: none;}
	.coupon_wrap .howto img.mobile {display: block;}
	.coupon_wrap .caution {margin-top: 1.8rem;}
	.coupon_wrap .caution h3 {margin-bottom: 1rem;}
	.coupon_wrap .caution li {padding-left: 1.6rem; padding-right: 1.6rem;}

	.history_wrap .search {padding: 1.2rem;}
	.history_wrap .search input, .history_wrap .search select, .history_wrap .search button {height: 3rem; line-height: 3rem;}
	.history_wrap .search .date {width: 80%; text-align: right;}
	.history_wrap .search .date input, .history_wrap .search .date select {width: 10.2rem; background-size: 3rem;}
	.history_wrap .search .date input, .history_wrap .search .date select, .history_wrap .search .date button {margin-left: 0.8rem; border-radius: 0.8rem;}
	.history_wrap .search .date p {display: inline-block;}
	.history_wrap .search .date select {width: 8.2rem;}
	.history_wrap .search .date .day {margin-bottom: 0;}
	.history_wrap .search .date .day input {width: 4.8rem; padding: 0; text-align: center;}
	.history_wrap .search .date .day select {width: 11.6rem; margin-left: 0.8rem;}
	.history_wrap .search .date .btn_gr {min-width: 6.6rem; margin-top: 0;}
	
	.bbs {text-align: left;}
	.bbs li {padding: 1.6rem 1.2rem 0.8rem; display: block;}
	.bbs li > div {height: auto; display: block; vertical-align: top;}
	.bbs .title {display: none;}
	.bbs .list {margin-bottom: 1.2rem; box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.2); border-radius: 1.2rem; position: relative;}
	.bbs .list:nth-child(11), .bbs .list:last-child {margin-bottom: 0; border-radius: 1.2rem;}
	.bbs .list > div {margin-bottom: 0.6rem;}
	.bbs .list.nodata {text-align: center;}
	.bbs .mobile {display: inline-block;}

	.paging {margin-top: 1.6rem;}

	.history_wrap .bbs .no, .history_wrap .bbs .date {width: auto; display: inline-block;}
	.history_wrap .bbs .subject, .history_wrap .bbs .value, .history_wrap .bbs .balance {width: 100%;}
	.history_wrap .bbs .date {padding-left: 1rem;}
	.history_wrap .bbs .subject {padding: 0.6rem 0; font-size: 1.6rem;}
	.history_wrap .bbs .value, .history_wrap .bbs .balance {margin: 0.4rem 0 0; padding: 0.6rem 1.2rem; text-align: right; border-radius: 0.8rem; background: #162048;}
	.history_wrap .bbs .status .state {padding: 0.4rem 0.6rem 0.3rem; text-align: center; position: absolute; top: 1.2rem; right: 1.2rem;}
	.history_wrap .bbs .stit {margin-top: 0.1rem; font-size: 1rem; color: #57f; letter-spacing: 0.06rem; font-weight: 500; font-family: 'Prompt'; position: absolute; left: 2.4rem;}

	footer {margin: 1.6rem auto 1.2rem; padding: 2.4rem 0 2.5rem 0; text-align: center;}
	footer img {width: 72px; margin: 0.2rem 0 1.2rem; position: static; left: auto; top: auto;}
	footer p {line-height: 1.2;}
	footer .cs {margin-bottom: 0.4rem;}
	footer .top {min-width: 4.8rem; height: 3.6rem; margin-top: -1.8rem; padding: 0 1.2rem; font-size: 1rem; line-height: 3.6rem; right: 1.2rem; display: none;}
	footer .age {position:static; margin:0 0 1.2rem;}
	footer .age img {margin:0;}

	.pop_layout {width: calc(100% - 4.8rem); padding: 2.4rem 2.4rem 5.2rem; border-radius: 2.4rem;}
	.pop_layout .pop_info {margin-bottom: 1.6rem; padding: 1.8rem 2.4rem;}
	.pop_layout .pop_btn {margin-top: 2.4rem;}
	.pop_layout .pop_btn a {min-width: 12rem;}
	.pop_layout2 {padding: 2.4rem;}
	
	.pop_layout .pop_txt h4 {margin-bottom: 1rem; color: #fe0; font-size: 2rem; letter-spacing: 0.1rem; font-weight: 700;}
	.pop_layout .pop_txt h4 font {color: #fff;}
	.pop_layout .pop_txt p {font-size: 1.4rem; color: #abf; line-height: 2rem;}
	.pop_layout .pop_txt p > a {text-decoration: underline;}
	
	.pop_layout .pop_txt.complete, .pop_layout .pop_txt.warning {padding-top: 7.2rem; background-size: 3.6rem; background-position: 50% 1.6rem;}

	.pop_layout .pop_board th, .popup .pop_board td {height: 3.6rem; padding: 0.8rem 0;}

	/* error */
	header .error h1 img {height: 2.2rem;}
}

/**************** W480 ****************/
@media screen and (max-width: 480px) {

	.topup_wrap .pg_list li .logo {height: 3.6rem;}
	.topup_wrap .pg_list li .logo > img {max-width: 44px;}
	
	.history_wrap .search input, .history_wrap .search select, .history_wrap .search button {height: 2.4rem; line-height: 2.4rem;}
	.history_wrap .search .category {width: 100%; margin-bottom: 1.2rem;}
	.history_wrap .search .category select {height: 3rem; line-height: 3rem;}
	.history_wrap .search .date {width: 100%; text-align: left; position: relative;}
	.history_wrap .search .date input, .history_wrap .search .date select {background-size: 2.4rem;}
	.history_wrap .search .date .day input {margin-left: 0;}
	.history_wrap .search .date .btn_gr {line-height: 2.2rem; position: absolute; top: 0; right: 0;}
}