@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=Noto+Sans+KR:wght@100..900&family=Noto+Serif+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
/* ================== reset css ================== */
body, div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, input, textarea, button, section {
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Noto Sans KR","Nanum Gothic",sans-serif
}
body, input, textarea, select, table, button {
font-weight:normal}
textarea, select {font-family:"Noto Sans KR","Nanum Gothic",sans-serif;font-size:1em}
textarea {white-space:pre-wrap;resize:vertical}
select {margin:0}
button {cursor:pointer}
p {margin:0;padding:0;word-break:keep-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#666;text-decoration:none}
a:hover, a:focus {text-decoration:none}
*, :after, :before {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
select {-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url(/public/front/img/select_arr.png) no-repeat 95% 50%}
select::-ms-expand {display:none}
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus, input[type=date]:focus, input[type=date]:focus-visible {
outline:none !important;
box-shadow:none !important;
-webkit-box-shadow:0 0 0 0 white inset}
body {height:auto}
footer {display:flex;width:100%;height:100%;max-width:750px;background:#f1f1f1;padding:20px 10px;margin:0 auto;word-break:break-all;flex-direction:column;justify-content:flex-start;align-items:center;overflow:hidden}
footer div.f01 {display:flex;flex-direction:row;justify-content:center;align-items:center}
footer div.f01 + ul p {font-size:11px;line-height:18px}
footer ul {padding:0;margin:0;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center;align-items:center}
footer ul li {list-style:none;word-break:keep-all;display:flex;flex-direction:row;align-items:center}
footer ul li p {display:flex;align-items:center;align-content:center;font-size:14px;line-height:23px;color:#4d4d4e;font-weight:400;text-align:center}
footer ul li span {color:#333352;padding:0 3px 0 0}
footer ul li.copyright {color:#777!important;font-weight:300!important;font-size:13px!important}
/*footer ul li:after {content:'';display:block;width:1px;height:13px;margin:0 10px;background-color:#c1c1cd;-ms-transform:rotate(25deg);-webkit-transform:rotate(25deg);transform:rotate(25deg)}
footer ul li:last-child:after {display:none}*/
a, a:hover, a:focus {text-decoration:none;cursor:pointer}
:hover {-webkit-transition:all 0.14s ease-in-out;-moz-transition:all 0.14s ease-in-out;-o-transition:all 0.14s ease-in-out;transition:all 0.14s ease-in-out}
/* 드래그 스타일 */
::-moz-selection {color:#ffffff;background:#7649f5}
::selection {color:#ffffff;background:#7649f5}
/*  스크롤 스타일 */
::-webkit-scrollbar {width:6px;height:8px}
::-webkit-scrollbar-track {}
::-webkit-scrollbar-thumb {width:6px;height:8px;-webkit-border-radius:3px;border-radius:3px;background:#676767}
::-webkit-scrollbar-track-piece {}
::-webkit-scrollbar-thumb:window-inactive {background:rgba(0,0,0,0.4)}

.sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}
.scroll_hidden {overflow:hidden;width:100%;height:100vh;touch-action:none}

input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active 
{transition:background-color 5000s ease-in-out 0s;-webkit-transition:background-color 9999s ease-out;-webkit-box-shadow:0 0 0px 1000px white inset !important}
body{padding:0;background-color:#f8f8fd;background-size:cover;background-repeat:no-repeat;width:100%;height:100%;min-height:100vh}
section {width:100%}
section > img {width:100%;text-align:center;margin:0 auto}
@keyframes down {
0%{transform:translateY(-50px)}
100%{transform: translateY(0px)}
}

#container {position:relative;display:flex;width:100%;height:100%;min-height:100vh;max-width:750px;background:#fff;padding:30px;margin:0 auto;word-break:break-all;
flex-direction:column;justify-content:flex-start;align-items:center;overflow:hidden}
#container .top_area, #container .cont_area, #container .footer_area {position:relative;display:flex;width:100%;height:auto}
#container .top_area	{justify-content:space-between;align-items:center}
#container .top_area + form {width:100%}
#container .cont_area	{flex-direction:column;align-items:center;justify-content:flex-start}
#container .footer_area	{}
#container .box-style {-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px}
#container.page_area {padding:0}
#container.page_area.p30 {padding:15px 30px 30px}
#container.page_area.p40 {padding:15px 40px 40px}
#container.page_area .top_area {position:relative;width:100%;padding:15px 30px 35px}
#container.page_area .top_area .arr_btn{position:absolute;top:20px;left:30px}
#container.page_area .top_area .tit	   {display:block;width:100%;padding:0 20px;font-size:30px;line-height:38px;color:#1c1c1c;font-weight:400;text-align:center;word-break:keep-all}
#container.page_area .top_area .arr_btn a  {width:3vw;min-width:50px}
#container.page_area .top_area .arr_btn img{-webkit-filter:grayscale(100%) brightness(0);filter:grayscale(100%) brightness(0)}
#container.page_area .top_bgColor {width:100%;height:100%;padding:0;background-color:#3b7de4;background-image:url(/public/front/img/top_bgPatten.png);background-repeat:repeat}
#container.page_area .top_bgColor .top_area .arr_btn img{-webkit-filter:none;filter:none}
#container.page_area .top_bgColor .top_area .tit {color:#fff}

.btn_style {display:block;cursor:pointer}
.btn_style.submit {}
.btn_style.cancell{}
.btn_style.del{}
.btn_style.ok {}
.btn_style.gray {}
.btnStyle.ok {}
.btn_style.btn-otp-paste {display:flex;align-items:center;justify-content:center;width:100%;height:clamp(60px,10vh,80px);font-size:15px;color:#fff;background:#3c3c3c;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px}

.input_box {position:relative;display:block;margin:10px 0 0;font-size:0;background:#f6f6f6;z-index:2;overflow:hidden}
.input_box.readonly {background:#eaeef5}
.input_box.focus	{background:#f0f5fe}
.input_box.focus.readonly {background:#eaeef5!important}
.input_box:after {content:".";height:0;display:block;visibility:hidden;clear:both}
.input_box:first-child {margin-top:0}

.input_box input[type=text], .input_box input[type=password] {display:block;width:100%;height:80px;border:0;outline:0;box-sizing:border-box;font-size:20px;color:#333;background-color:transparent !important}
.input_box input[type=text]::-ms-clear, .input_box input[type=password]::-ms-clear {display:none}
.input_box input[type=text]:-moz-placeholder, .input_box input[type=password]:-moz-placeholder {color:#999999;font-weight:normal}
.input_box input[type=text]:-ms-input-placeholder, .input_box input[type=password]:-ms-input-placeholder {color:#999999;font-weight:normal;letter-spacing:-0.75px}
.input_box input[type=text]::-moz-placeholder, .input_box input[type=password]::-moz-placeholder {color:#999999;letter-spacing:-0.75px}
.input_box input[type=text]::-webkit-input-placeholder, .input_box input[type=password]::-webkit-input-placeholder {color:#999999;font-weight:normal;letter-spacing:-0.75px}
.input_box input[type=password]::-ms-reveal, .input_box input[type=password]::-ms-reveal {display:none}
.input_box input[type=text]:focus, .input_box input[type=text]:valid, .input_box input[type=password]:focus, .input_box input[type=password]:valid {}
.input_box.readonly input[type=text]:-moz-placeholder, .input_box.readonly input[type=password]:-moz-placeholder {color:#333}
.input_box.readonly input[type=text]:-ms-input-placeholder, .input_box.readonly input[type=password]:-ms-input-placeholder {color:#333}
.input_box.readonly input[type=text]::-moz-placeholder, .input_box.readonly input[type=password]::-moz-placeholder {color:#333}
.input_box.readonly input[type=text]::-webkit-input-placeholder, .input_box.readonly input[type=password]::-webkit-input-placeholder {color:#333}
.input_box input:-webkit-autofill, .input_box input:-webkit-autofill:hover, .input_box input:-webkit-autofill:focus, .input_box input:-webkit-autofill:active, .input_box input:-webkit-autofill:valid, .input_box input:autofill, .input_box input:autofill:hover, .input_box input:autofill:focus, .input_box input:autofill:active,.input_box input:autofill:valid {transition:background-color 5000s ease-in-out 0s;-webkit-transition:background-color 9999s ease-out;-webkit-box-shadow:0 0 0px 1000px #f0f5fe inset !important}

.input_box input {width:100%;height:80px;border:0;outline:0;background-color:transparent !important;color:#333;padding:24px 30px 8px 30px;font-size:16px;letter-spacing:-1px;box-sizing:border-box}
.input_box input.p-r-30 {padding-right:30px!important}
.input_box input.p-r-70 {padding-right:70px!important}
.input_box input.p-r-100 {padding-right:100px!important}
.input_box label {position:absolute;left:30px;top:calc(50% - 10px);font-size:16px;color:#9c9c9d;line-height:16px;transition:all 0.2s ease;white-space:nowrap}
.input_box input:focus ~ label, .input_box input:valid ~ label, .input_box.readonly label, .input_box input:-webkit-autofill ~ label, .input_box.focus label {font-size:13px;top:10px;color:#373f57}
.input_box input:focus, .input_box input:valid, .input_box input:-webkit-autofill {padding:24px 30px 8px 30px;background-color:transparent !important}

#container .btn_submit {width:100%;padding:0 40px;margin:10px 0 0;color:#fff;cursor:pointer;background:#4489f5;border:none;overflow:hidden;
background:-webkit-linear-gradient(-120deg, #022fbd , #4489f5 , #3c82f3 , #4489f5 , #2d51d8 , #1554f2);background:-o-linear-gradient(120deg, #022fbd , #4489f5 , #3c82f3 , #4489f5 , #2d51d8 , #1554f2);
background:-moz-linear-gradient(120deg, #022fbd , #4489f5 , #3c82f3 , #4489f5 , #2d51d8 , #1554f2);background:linear-gradient(120deg, #022fbd , #4489f5 , #3c82f3 , #4489f5 , #2d51d8 , #1554f2)}
#container label {}
#container label span.point {color:#f00}
#container input[type=checkbox], #container input[type=radio] {display:none;visibility:hidden}
#container .check_box label {position:relative;display:block;margin:0 auto;padding:0 0 0 35px;font-size:16px;color:#333;cursor:pointer}
#container .pop_tit .check_box label {color:#fff}
#container .check_box label:before {content:'';display:block;position:absolute;top:calc(50% - 12px);left:0;width:24px;height:24px;background:url(/public/front/img/check_arr_off.png)}
#container .check_box input:checked+label:before {background:url(/public/front/img/check_arr_on.png)}
#container .check_box.blueHead label:before {content:'';top:calc(50% - 15px);width:30px;height:30px;background:url(/public/front/img/check_arr_off02.png)}
#container .check_box.blueHead input:checked+label:before {background:url(/public/front/img/check_arr_on02.png)}

#container .radio_box {display:flex;align-items:center}
#container .radio_box div ~ div {margin:0 0 0 15px}
#container .radio_box label {position:relative;top:0;left:0;display:block;margin:0 auto;padding:0 0 0 35px;font-size:16px;color:#333;cursor:pointer;word-break:keep-all}
#container .radio_box label:before {content:'';display:block;position:absolute;top:calc(50% - 15px);left:0;width:30px;height:30px;background:url(/public/front/img/radio_arr_off.png)}
#container .radio_box input:checked+label:before {background:url(/public/front/img/radio_arr_on.png)}

#container .pop_inner .check_box.blueHead label {padding:0 0 0 40px;font-size:16px;color:#fff}
#container .pop_inner .check_box.blueHead label:before {content:'';top:calc(50% - 15px);width:30px;height:30px;background:url(/public/front/img/check_arr_off04.png)}
#container .pop_inner .check_box.blueHead input:checked+label:before {background:url(/public/front/img/check_arr_on04.png)}

#container .modal .pop_inner .check_box label {padding:0 0 0 50px;font-size:20px;color:#111;font-weight:500}
#container .modal .pop_inner .check_box label:before {content:'';top:calc(50% - 20px);width:40px;height:40px;background:url(/public/front/img/check_arr_off03.png)}
#container .modal .pop_inner .check_box input:checked+label:before {background:url(/public/front/img/check_arr_on03.png)}
#container .modal .pop_inner .check_box.bottom_agree {padding:30px 0 10px}

.selet_box {padding:0 10px 0 15px;background-color:#f6f6f6;box-sizing:border-box;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px}
.selet_box.focus {background-color:#f0f5fe}
.selet_box.focus select {color:#000!important}
.selet_box select {position:relative;border:0 none;outline:0 none;background:transparent;padding:0 5px;appearance:none;-moz-appearance:none;-webkit-appearance:none;background-image:url(/public/front/img/arr_selectDown.png);background-size:auto;background-position:right center;background-repeat:no-repeat}
.selet_box select option {padding:3px 0;font-size:16px}
.selet_box select:after {content:'';position:absolute;top:calc(50% - 5px);right:calc(50% - 6px);display:block;width:12px;height:10px;margin:3px;background-size:cover;background-position:center;background-repeat:no-repeat;background-image:url(/public/front/img/arr_selectDown.png)}
.selet_box select:focus {background-image:url(/public/front/img/arr_selectUp.png)}

.select {position:relative;overflow:hidden;margin:0;padding:15px 0;width:100%;height:100%;border:none;border-radius:0;font-size:17px;font-weight:300;box-shadow:none;flex-direction:column;align-items:center}
.select > i.toggle {position:absolute;z-index:4;right:25px;top:17px;color:#fff;font-size:0.8em}
.select .title, .select .placeholder {position:relative;display:block;width:100%;height:100%;cursor:pointer}
.select > input {position:absolute;left:0px;top:0px;z-index:1;width:100%;height:100%;display:block;opacity:0;cursor:pointer}
.select > input:checked ~ i.toggle.bi-chevron-down{display:none}
.select > input:checked ~ i.toggle.bi-chevron-up  {display:block;color:#fff}
.select > input:checked div.options label.option .title {display:none !important}
.select > input:not(:checked) {z-index:4}
.select > input:not(:checked) ~ label.option > span.title{display:none}
.select > input:not(:checked) ~ i.toggle.bi-chevron-up 	 {display:none}
.select > input:not(:checked) ~ i.toggle.bi-chevron-down {display:block}
.select > input:disabled {cursor:no-drop}
.select label.option span.title {position:relative;padding:7px 20px 7px 0;font-size:15px;z-index:2;transition:background 0.3s ease-out;color:#fff;box-sizing:border-box}
.select label.option span.title i.icon {padding-right:8px;color:#111}
.select label.option input {display:none}
.select label.option input:disabled ~ span.title {background:#f9f9f9 !important;color:#aaa}
.select label.option input:disabled ~ span.title:hover {color:#aaa;background:none;cursor:no-drop}

.nationalFlag, .nationalFlag img {-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
.subscript {align-items:baseline!important}
.detailSlide_box {-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;overflow:hidden}

.compare_box .optionbox_box ul li.nation_GBP a:before, .compare_box .compare_code .selectbox_box span.nation_GBP:before{background-image:url(/public/front/img/flag_gbr.png)}
.compare_box .optionbox_box ul li.nation_USD a:before, .compare_box .compare_code .selectbox_box span.nation_USD:before{background-image:url(/public/front/img/flag_usa.png)}
.compare_box .optionbox_box ul li.nation_KRW a:before, .compare_box .compare_code .selectbox_box span.nation_KRW:before{background-image:url(/public/front/img/flag_kor.png)}
.compare_box .optionbox_box ul li.nation_CNY a:before, .compare_box .compare_code .selectbox_box span.nation_CNY:before{background-image:url(/public/front/img/flag_chn.png)}
.compare_box .optionbox_box ul li.nation_JPY a:before, .compare_box .compare_code .selectbox_box span.nation_JPY:before{background-image:url(/public/front/img/flag_jpn.png)}
.compare_box .optionbox_box ul li.nation_PHP a:before, .compare_box .compare_code .selectbox_box span.nation_PHP:before{background-image:url(/public/front/img/flag_phl.png)}
.compare_box .optionbox_box ul li.nation_VND a:before, .compare_box .compare_code .selectbox_box span.nation_VND:before{background-image:url(/public/front/img/flag_vie.png)}
.compare_box .optionbox_box ul li.coinListLogo_PAYDA a:before, .compare_box .compare_code .selectbox_box span.coinListLogo_PAYDA:before, .coinList_box ul li.coinListLogo_PAYDA:before
{background-image:url(/public/front/img/coin_img/coinLogo_payda.png)}
.compare_box .optionbox_box ul li.coinListLogo_WIP a:before, .compare_box .compare_code .selectbox_box span.coinListLogo_WIP:before, .coinList_box ul li.coinListLogo_WIP:before
{background-image:url(/public/front/img/coin_img/coinLogo_WingPay.png)}
.compare_box .optionbox_box ul li.coinListLogo_TRX a:before, .compare_box .compare_code .selectbox_box span.coinListLogo_TRX:before, .coinList_box ul li.coinListLogo_TRX:before
{background-image:url(/public/front/img/coin_img/coinLogo_tron.png)}
.compare_box .optionbox_box ul li.coinListLogo_BTC a:before, .compare_box .compare_code .selectbox_box span.coinListLogo_BTC:before, .coinList_box ul li.coinListLogo_BTC:before
{background-image:url(/public/front/img/coin_img/coinLogo_bitcoin.png)}
.compare_box .optionbox_box ul li.coinListLogo_XRP a:before, .compare_box .compare_code .selectbox_box span.coinListLogo_XRP:before, .coinList_box ul li.coinListLogo_XRP:before
{background-image:url(/public/front/img/coin_img/coinLogo_ripple.png)}
.compare_box .optionbox_box ul li.coinListLogo_ETH a:before, .compare_box .compare_code .selectbox_box span.coinListLogo_ETH:before, .coinList_box ul li.coinListLogo_ETH:before
{background-image:url(/public/front/img/coin_img/coinLogo_ethereum.png)}
.compare_box .optionbox_box ul li.coinListLogo_BNB a:before, .compare_box .compare_code .selectbox_box span.coinListLogo_BNB:before, .coinList_box ul li.coinListLogo_BNB:before
{background-image:url(/public/front/img/coin_img/coinLogo_binance.png)}
.compare_box .optionbox_box ul li.coinListLogo_XRP a:before, .compare_box .compare_code .selectbox_box span.coinListLogo_XRP:before, .coinList_box ul li.coinListLogo_XRP:before
{background-image:url(/public/front/img/coin_img/coinLogo_ripple.png)}
.compare_box .optionbox_box ul li.coinListLogo_USDT a:before, .compare_box .compare_code .selectbox_box span.coinListLogo_USDT:before, .coinList_box ul li.coinListLogo_USDT:before
{background-image:url(/public/front/img/coin_img/coinLogo_tether.png)}
.coinList_box ul li.coinListLogo_ALL:before {background-image:url(/public/front/img/coin_img/coinLogo_ALL.png)}
.compare_box .optionbox_box ul li.coinListLogo_PDC a:before, .compare_box .compare_code .selectbox_box span.coinListLogo_PDC:before, .coinList_box ul li.coinListLogo_PDC:before
{background-image:url(/public/front/img/coin_img/coinLogo_paydaclassic.png)}

@media (max-width:500px){
#container.page_area .top_area .tit {font-size:26px}
}
@media (max-width:380px){
#container.page_area .top_area .tit {font-size:24px}
}
@media (max-width:320px){
#container.page_area .top_area .tit {font-size:22px}
}