/* common */
html, body {width:100%; height:100%; font-size:10px; font-family:"Pretendard", Sans-serif; background:#f7f8fa;}
.wrap {display:flex; flex-direction:column; min-height:100%; position:relative; width:100%;  padding-bottom:20px; max-width:480px; margin:auto; /*background:#fff;*/}
.section {position:relative; width:100%; background:#fff;}
.contents {position:relative; width:100%; overflow:hidden;}
.tleft {text-align:left;}
.tright {text-align:right;}
.tcenter {text-align:center;}
.btn_area {position:absolute; bottom:30px; text-align:center; width:100%; max-width:480px; left:0; right:0; margin:auto; padding:0 15px;}
.btn_area .half {width:calc(50% - 5px); float:left;}
.btn_area .half:last-child {float:right;}
.inputwrap {position:relative; overflow:hidden;}
.inputwrap .text_common {float:left; width:calc(100% - 90px);}
.inputwrap .text_common:only-child {width:100%;}
.inputwrap .text_common + .btn_common {float:right; width:80px; text-align:center; padding:0;}
.inputwrap .select_form {float:left; width:calc(100% - 90px);}
.inputwrap .select_form + .btn_common {float:right; width:80px; text-align:center; padding:0;}
.readonly {background-color:#ececec;}

/* 테이블 */
.table_form {width:100%; table-layout:fixed; border-collapse:collapse; background:#fff; box-shadow:0 1px 4px 0 rgb(0 0 0 / 6%); border-radius:8px;}
.table_form th, .table_form td {border-bottom:1px solid #ddd; padding:10px; font-size:1.3rem; text-align:center;}
.table_form th {color:#0f295f;}


/* 탭 */
.tab_form.type1 {width:100%; display:table;}
.tab_form.type1 li {display:table-cell; font-size:1.4rem; font-weight:normal; background:#e9e9e9; color:#666666; vertical-align:middle; width:50%; height:45px; line-height:45px; text-align:center;}
.tab_form.type1 li a {display:block;}
.tab_form.type1 li.active {background:#fff; color:#f4685a; font-weight:bold;}
.type2 {width:100%; display:table;}
.type2 li {position:relative; display:table-cell; font-size:1.4rem; font-weight:normal; background:#fff; color:#888; vertical-align:middle; width:50%; text-align:center;}
.type2 li a {display:block; padding-bottom:15px;}
.type2 li.active {background:#fff; color:#f4685a; font-weight:bold;}
.type2 li.active:after {content:""; width:100%; height:2px; background:#f4685a; position:absolute; bottom:0; left:0;}
.tab-cont {display:none; width:100%; position:relative; padding:15px;}


/* 입력폼 */
.area_request {flex:1; width:100%; height:100%; position:relative;  padding:20px 15px 80px;}
.area_request .column {width:100%; position:relative; margin-bottom:20px;}
.area_request .column .tit {font-size:1.4rem; font-weight:normal; line-height:1; display:block; margin-bottom:10px;}
.area_request .column .tit .check {float:right;}
.area_request .column .row {width:100%; margin-bottom:10px;}
.area_request .column .row:last-child {margin-bottom:0;}
.area_request .column:last-child {margin-bottom:0;}
.area_request .column .txt {font-size:1.3rem; display:block; margin-bottom:10px; word-break:keep-all;}
.area_request .section {margin-bottom:15px;}
.area_request .section.warning { margin-bottom:15px;}
.area_request .section.warning h5 {font-size:1.5rem; line-height:1; margin-bottom:15px;}
.area_request .section {padding:20px 15px;}
.area_request .section ol {font-size:1.3rem; color:#666; padding-left:15px;}
.area_request .section ul {font-size:1.3rem; color:#666;}
.area_request .section ol li, .area_request .section ul li {margin-bottom:6px;}
.area_request .section ol li:last-child, .area_request .section ul li:last-child {margin-bottom:0;}
.area_request .section ul li {position:relative; padding-left:10px; display:block;}
.area_request .section ul li:before {content:"-"; position:absolute; top:0; left:0;}
.area_request .section .group {position:relative; width:100%; padding-bottom:21px; margin-bottom:20px; border-bottom:1px solid #dfdfdf; }
.area_request .section .group .title {font-size:1.5rem; margin-bottom:15px;}
.area_request .section .group:last-child {margin-bottom:0; padding-bottom:0; border-bottom:0;} 
.area_request .section .list {width:100%; position:relative;}
.area_request .section .list .item {display:block; overflow:hidden; margin-bottom:12px; font-size:1.3rem;}
.area_request .section .list .item .tit {float:left; color:#888;}
.area_request .section .list .item .value {float:right; font-style:normal; font-weight:bold;}
.area_request .section .list .item:last-child {margin-bottom:0;}
.inputwrap .won {position:absolute; top:0; left:15px; line-height:45px; font-size:1.4rem; color:#f4685a; font-weight:Bold; z-index:10;}
.inputwrap .won + .text_common {padding-left:36px; width:100%;}


/* 로그인 */
.area_login {position:absolute; top:50%; margin:auto; margin-top:-150px; width:calc(100% - 30px); left:0; right:0;}
.area_login .title {font-size:25px; text-align:center; line-height:1; margin-bottom:20px;}
.area_login .txt {font-size:14px; color:#888888; line-height:1; margin-bottom:40px; text-align:center;}
.area_login .login_bottom {width:100%; font-size:0; text-align:center;}
.area_login .login_bottom li {color:#999; font-size:1.4rem; display:inline-block; vertical-align:middle;}
.area_login .login_bottom .line {display:inline-block; width:1px; height:10px; vertical-align:middle; position:relative; background:#dfdfdf; margin:0 10px;}


/* 헤더 */
.header {position:relative; display:flex; align-items:center; height:70px; line-height:70px; padding:0px 15px; background:#fff;}
.header .title {position:absolute; font-size:2rem; width:calc(100% - 30px); margin:auto; text-align:center;}
.header .logo {position:relative; display:flex; width:100px; height:100%; font-size:0;}
.header .logo a {display:flex; align-items:center;}
.header .logo img {width:100%;}
.header .btn_allmenu {margin-left:auto; width:40px; height:70px; background:url("../images/btn_allmenu.png") right center no-repeat; background-size:24px;}
.header .area_allmenu {display:none; position:absolute; right:15px; top:70px; border:1px solid #eee; border-radius:5px; text-align:center; background:#fff; z-index:100; box-shadow:0px 3px 8px rgba(0,0,0,0.06);}
.header .area_allmenu li {font-size:1.3rem; line-height:14px; color:#666; display:block; border-bottom:1px solid #eee;}
.header .area_allmenu li a {display:block; padding:10px 20px;}
.header .area_allmenu li:hover {background:#f7f8fa;}
.header .area_allmenu li:last-child {border-bottom:0;}
.tab_menu {width:100%; overflow:hidden; background:#131433;}
.tab_menu li {float:left; width:50%; height:48px; line-height:48px; font-size:1.6rem; color:#a9a9a9; display:inline-block; text-align:center;}
.tab_menu li.on {font-weight:bold; color:#fff; border-bottom:2px solid #ae8956;}
.tab_menu li a {display:block; width:100%; height:100%;}





/* 메인 */
.section {position:relative; width:100%; background:#fff; box-shadow:0px 5px 15px rgba(0,0,0,0.05); padding:20px 15px; border-radius:10px;}
.area_main {position:relative; width:100%; padding:0 15px;}
.area_main .area_profile {display:flex; position:relative; overflow:hidden; margin-bottom:15px;}
.area_main .area_profile .name {font-size:20px; font-weight:bold; margin-right:10px;}
.area_main .area_profile .id {font-size:12px; color:#888; padding-top:12px;}
.area_main .area_profile .id b {color:#f4685a;}
.area_main .area_profile .btn_home {margin-left:auto; font-size:16px; align-items:center;}
.area_main .box_credit { padding:20px 15px; margin-bottom:10px;}
.area_main .box_credit .title {width:100%; margin-bottom:16px;}
.area_main .box_credit .title img, .area_main .box_credit .title h5 {display:inline-block; vertical-align:middle;}
.area_main .box_credit .title img {width:14px;}
.area_main .box_credit .title h5 {font-size:1.4rem; color:#888; font-weight:normal; margin-left:3px;}
.area_main .box_credit .credit {display:block; font-size:2.2rem; font-weight:bold; line-height:1; margin-bottom:25px;}
.area_main .box_credit .list_btn {font-size:0; width:100%;}
.area_main .box_credit .list_btn li {display:inline-block; vertical-align:top; width:calc(50% - 6px); margin-right:12px;}
.area_main .box_credit .list_btn li:last-child {margin-right:0;}
.area_main .box_log {overflow:hidden; padding:0;}
.area_main .box_log .tab-cont {min-height:500px; padding-bottom:0;}
.area_main .box_log .more {background:#fff; width:100%; left:0; right:0; margin:auto; display:block; text-align:center; height:42px; margin-top:10px; color:#888; line-height:42px; font-size:1.4rem; text-align:center; border-top:1px solid #ddd;}


/* 충전 */
.section.charge {border:1px solid #f4685a; margin-bottom:10px;}
.section.charge .title {width:100%; overflow:hidden; line-height:21px; padding-bottom:9px; margin-bottom:25px; border-bottom:1px solid #dfdfdf;}
.section.charge .title h5 {float:left; font-size:1.4rem; font-weight:bold; color:#f4685a;}
.section.charge .title .btn {float:right; height:21px; padding:0px 9px; border:1px solid #de3c3c; color:#de3c3c; background:#fff; font-weight:bold; border-radius:3px; font-size:1.2rem; line-height::19px;}
.section.charge .area_deposit {width:100%; text-align:center; margin-bottom:15px;}
.section.charge .area_deposit .value {font-weight:bold; font-size:2rem; line-height:1; margin-bottom:10px;}
.section.charge .area_deposit .end_date {display:inline-block; border-radius:10px; font-size:1.2rem; padding:0px 12px; height:21px; line-height:21px; background:#f3f3f3; color:#888;}
.section.charge .area_account {position:relative; width:100%; padding:15px 80px 15px 15px; background:#f3f3f3; border-radius:8px; line-height:17px; font-size:1.2rem;}
.section.charge .area_account .btn_copy {font-size:0; position:absolute; right:15px; top:50%; margin-top:-7px;}
.section.charge .area_account .btn_copy img, .section.charge .area_account .btn_copy span {display:inline-block; vertical-align:middle;}
.section.charge .area_account .btn_copy img {width:13px;}
.section.charge .area_account .btn_copy span {margin-left:5px; font-size:1.3rem; font-weight:normal; color:#f4685a;}


/* 약관 */
.section.terms {box-shadow:none;}


/* 내역 */
.list_log {width:100%;}
.list_log li {display:block; line-height:1; font-size:1.4rem; overflow:hidden; width:100%; padding:14px 0;} 
.list_log li .name_date {float:left;}
.list_log li .name_date .name {font-style:normal; display:block; margin-bottom:7px;}
.list_log li .name_date .date {color:#999999;}
.list_log li .value {float:right; text-align:right;}
.list_log li .value .price {display:block; font-weight:bold; margin-bottom:5px;}
.list_log li .name_date, .list_log li .value {display:inline-block; width:50%;}

/* 거래소 */
.total_coin {overflow:hidden; width:100%; height:43px; line-height:43px; background:#c4dcf2; padding:0 15px; color:#121212;}
.total_coin .tit {float:left;}
.total_coin .price {float:right;}
.total_coin .tit, .total_coin .price {font-size:1.4rem; font-weight:600;}
.total_coin .price b {color:#ae8956; }
.list_trade {width:100%; padding:0 10px; position:relative; overflow:hidden;background:#fff; border-bottom:1px solid #ddd;}
.list_trade table {width:100%; table-layout:fixed; border-collapse:collapse;}
.list_trade table th, .list_trade table td {background:#fff; font-size:1.3rem; padding:5px; height:43px;} 
.list_trade table tr {border-bottom:1px solid #ddd;}
.list_trade table tr:last-child {border-bottom:0;}
.list_trade table td.em {font-weight:bold;}
.state1 {color:#3494ff;}
.state2 {color:#de3c3c;}
.lvl1 {color:#a90000;}



/* 레이어팝업 */
.popup_layer {display:none; width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,0.3); z-index:9999;}
.popup_layer .popup_wrap {display:table; width:100%; height:100%; vertical-align:middle;}
.popup_layer .popup_wrap .popup {display:table-cell; vertical-align:middle;}
.popup_layer .popup_container {position:relative; overflow:hidden; width:calc(100% - 30px); max-width:450px; border-radius:10px; margin:auto; background:#fff;}
.popup_layer .popup_title {width:100%; height:52px; line-height:52px; border-bottom:1px solid #ddd; overflow:hidden; font-weight:normal; text-align:center; }
.popup_layer .popup_title .title {font-size:1.6rem; display:block; text-align:center; font-weight:bold;}
.popup_layer .btn_popup_close {position:absolute; top:12px; right:15px; border:0; width:26px; height:26px; text-indent:-99999px; background:url("../images/btn_popup_close.png") center no-repeat; background-size:13px;}
.popup_layer .popup_content {position:relative; width:100%; padding:20px 15px; max-height:500px; font-size:1.3rem;}
.popup_layer .popup_content .area_regist .column {border:1px solid #ddd;}
.popup_layer .popup_content .confirm_regist {width:100%; padding:30px; background:#d6f1f7; border-radius:8px;}
.popup_layer .popup_content .confirm_regist .row {display:block; width:100%; overflow:hidden; font-size:1.4rem;}
.popup_layer .popup_content .confirm_regist .row .left {float:left;}
.popup_layer .popup_content .confirm_regist .row .left .value {margin-left:20px;}
.popup_layer .popup_content .confirm_regist .row .right {float:right; color:#666;}
.popup_layer .popup_content .confirm_regist .row.coin {margin-bottom:10px; font-size:2rem;}
.popup_layer .popup_content .confirm_regist .row.coin .left {color:#0f295f; font-weight:bold;}
.popup_layer .popup_content .area_countdown {padding:20px 0 0px; width:100%; text-align:center; font-size:1.3rem; color:#999;}
.popup_layer .popup_content .area_countdown div {display:inline; color:#0f295f; font-weight:bold;}
.popup_layer .btn_area {padding-top:20px; text-align:center;}
.popup_layer .terms_box {height:300px;}
.popup_layer .list_family {width:100%;  font-size:0;}
.popup_layer .list_family li {width:33.3%; display:inline-block; text-align:center; vertical-align:top; margin-bottom:44px;}
.popup_layer .list_family li img {margin-bottom:12px; width:38px;}
.popup_layer .list_family li span {display:block; font-size:1.3rem; line-height:1; color:#333333;}
.popup_layer .list_family li:nth-child(n+4) {margin-bottom:0;}
#PopupModal .popup_content {text-align:center; padding:30px 15px;}
.popup_layer .popup_content.board .title {font-size:1.4rem; letter-spacing:-1px; text-align:center; font-weight:bold; margin-bottom:20px;}


/* 판매등록 */
.area_regist {width:100%; position:relative;}
.area_regist .column {width:100%; position:relative; margin-bottom:10px; background:#fff; padding:20px; border-radius:8px; box-shadow:0 1px 4px 0 rgb(0 0 0 / 6%);}
.area_regist .column .tit {font-size:1.4rem; line-height:1; display:block; margin-bottom:15px; font-weight:600;}
.area_regist .column .text_common {width:100%; }
.area_regist .column .amount_control {width:100%; overflow:hidden; margin:15px 0;}
.area_regist .column .amount_control .amount {width:20%; height:35px; line-height:35px; font-size:1.3rem; background:#fff; display:inline-block; text-align:center; float:left; border:1px solid #ddd; border-right:0;}
.area_regist .column .amount_control .amount:first-child {border-radius:8px 0px 0px 8px;}
.area_regist .column .amount_control .amount:last-child {border-radius:0px 8px 8px 0px; border-right:1px solid #ddd;}
.area_regist .column .amount_control .amount a {transition:.2s; width:100%; height:100%; display:block;}
.area_regist .column .amount_control .amount a:active {background:#f4f4f4}
.area_regist .column .info {width:100%;}
.area_regist .column .info li {margin-bottom:5px; width:100%; display:block;}
.area_regist .column .info li:last-child {margin-bottom:0;}
.area_regist .column .info .th, .area_regist .column .info .td {display:inline-block;}
.area_regist .column .info .th {width:90px;}
.area_regist .column .info .td {width:calc(100% - 100px);}
.area_regist .column .info .td b {color:#0f295f;}
.area_regist .column .info.full .td {text-align:right;}
.warn_txt {color:#d00000; text-align:center;}
.area_regist .column:last-child {margin-bottom:0;}


/* 핀번호변경 */
.area_confirm {position:relative; width:100%; padding:40px 15px; text-align:center;}
.area_confirm .txt {font-size:1.6rem; font-weight:500; line-height:2.2rem; margin-bottom:40px;}
.area_confirm .text_common.pin {text-align:center; height:50px; line-height:50px; font-size:1.6rem; width:200px; font-weight:bold; border-color:#0f295f; border-radius:100px;}
.area_confirm .btn_area {position:fixed; bottom:40px; width:100%; max-width:480px; left:0; right:0; margin:auto; padding:0 15px;}


/* 회원가입 */
.terms_box {width:100%; height:220px; margin-bottom:10px; background:#fff; border-radius:5px; font-size:1.3rem; padding:15px; overflow-y:auto;}
.join_check {width:100%; overflow:hidden; text-align:right;}
.join_check input[type='checkbox'], .join_check label {cursor:pointer; display:inline-block; vertical-align:middle;;}
.join_check label {font-size:1.3rem; color:#999; margin-right:10px;}
.inputcheck {word-break:keep-all; position:relative;width:100%; font-size:1.3rem; margin-top:8px; line-height:1.4; color:#999;}
.inputcheck img, .inputcheck span {display:inline-block; vertical-align:middle;}
.inputcheck img {width:18px; height:18px; margin-right:5px;}
.inputcheck .true {color:#006bc7;}
.inputcheck .false {color:#d35e24;}
.inputcheck.imp {padding-left:20px; background:url("../images/icon_imp.png?ver=1.1") left 2px no-repeat; background-size:14px;}

/* 페이징 */
.paging {margin:30px 0px; text-align:center;}
.paging * {position:relative; display:inline-block; padding:0 6px; vertical-align:middle; font-size:11px;}
.paging a:hover {font-weight:bold;}
.paging strong {color:#d92828;}
.paging .pre, .paging .next {position:absolute; top:0; left:0; font-size:0; overflow:hidden;}
select.search_lst_select {font-size:12px; padding:3px 3px 4px; margin-top:-2px; border:1px solid #b9b9b9;}
input.int {margin-bottom:5px; padding:9px; border:1px solid #ddd;}
input.int2 {padding:0px 10px; height:36px; border:1px solid #ddd; vertical-align:top;}
input.int3 {padding:0px 10px; height:36px; border:1px solid #ddd;}
.boardContent .board_view .btn_area {padding-top:20px;}


.notice_board {width:100%; border-radius:10px; background:#c9e1f7; padding:15px;} 
.notice_board .row {display:block; overflow:hidden; width:100%; border-bottom:1px dashed #a5bcd2; margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid # overflow:hidden; font-size:0;}
.notice_board .row span {display:inline-block; font-size:1.3rem; color:#111;}
.notice_board .row span.date {float:left; margin-right:10px;}
.notice_board .row span.cont {float:left; width:calc(100% - 70px);}
.notice_board .row:last-child {margin-bottom:0; padding-bottom:0; border-bottom:0;}



/* 핀코드 */
.page_pincode {position:absolute; top:0; left:0; width:100%; height:100%; background:#fff;}
.page_pincode .view_pincode {display:table; background:#fff; position:absolute; width:100%; height:calc(100% - 300px); top:0;}
.page_pincode .view_pincode .title {font-size:2rem; margin-bottom:50px;}
.page_pincode .view_pincode .keypad {border:0; width:100%; height:30px; text-align:center; font-size:24px; background:#fff; color:#f4685a; margin-bottom:50px;}
.page_pincode .view_pincode .div {display:table-cell; vertical-align:middle; text-align:center;}
.page_pincode .view_pincode a {display:block; font-size:0;}
.page_pincode .view_pincode a img {width:5px; margin-left:5px;}
.page_pincode .view_pincode a span {font-size:1.4rem; color:#888;}
.page_pincode .view_pincode a img, .page_pincode .view_pincode a span {display:inline-block; vertical-align:middle;}
.page_pincode #keypad {position:absolute; bottom:0; left:0; background:#f4685a; width:100%; height:300px; padding:20px 0;}
.page_pincode #keypad button {cursor:pointer; transition:.3s; display:inline-block; vertical-align:top; width:33.3%; height:25%; background:transparent; font-size:2.4rem; color:#fff; font-weight:bold; border:0;}
.page_pincode #keypad button:nth-child(3n) {width:33.4%;}
.page_pincode #keypad button:active {background:#d65656;}
.page_pincode #keypad button:focus {outline:none;}
.page_pincode #keypad button.submit {font-size:16px;}
.page_pincode #keypad button.delete {font-size:0; background:url("../images/icon_keypad_delete.png") center no-repeat;background-size:29px; }
.page_pincode #keypad button.delete:active {background:url("../images/icon_keypad_delete.png") center no-repeat #d65656; background-size:29px;}


/* 송금팝업 */
.popup_request {display:none; position:fixed; z-index:100; width:100%; max-width:480px; height:100%; background:#f7f8fa; top:0; left:0;  right:0; margin:auto;}
.popup_request .area_request {padding-top:90px; overflow-y:auto;}
.popup_request .header {position:absolute; top:0; left:0; background:#fff; width:100%;}