@charset "utf-8";

@import url(../css/common/reset.css);
@import url(../css/common/swiper.min.css);
@import url(../css/common/icomoon.css);
@import url(../css/common/font.css);
@import url(../css/common/style.css);
@import url(../css/common/template.css);


.color_theme {
    color: var(--light-gray02);
}

/* **********************************
header
*********************************** */
.header { z-index: 10; position: fixed; left: 0; top: 0; right: 0; height: 5rem; }
.header .left { float: left; }
.header .right { float: right; }
.header .title { width: 100%; height: 5rem; left: 0; top: 0;}
.header .title span { position: absolute; left: 50%; transform: translateX(-50%); display: inline-block; line-height: 5rem; text-align: center; font-size: 1.8rem; font-weight: 500; color: var(--light-gray02); }
.header .title span img { width: auto; height: 3rem; }
.header button { width: 5rem; height: 5rem; }

/* **********************************
인트로 / 로그인 / 회원가입
*********************************** */
.onepage { position: relative; display: flex; flex-direction: column;  min-height: 100%; height: 100%; }
.onepage_flex { flex: 1 0 auto; }
.intro .logo { display: block; width: 18rem; margin: 0 auto; }
.intro .logo img { width: 100%; }
.find_wrap { display: inline-block; width: 100%; font-size: 0; text-align: center; }
.find_wrap a { display: inline-block; padding: 0 1rem; font-size: 1.4rem; line-height: 1; color: var(--light-gray03); }
.find_wrap a + a { border-left: 0.1rem solid var(--light-gray03); }
.copyright { text-align: center; font-size: 1.4rem; line-height: 1; }
.corp_area { font-size: 0; text-align: center;}
.corp_area p { display: inline-block; font-size: 1.4rem; line-height: 2.1rem; color: var(--light-gray02); }
.corp_area a { display: inline-block; vertical-align: top; text-decoration: underline; }

/* **********************************
팝업
*********************************** */
/* 레이어 팝업 */
.modal_wrap { position: absolute; width: 100%; left: 0; right: 0; top: 50%; transform: translateY(-50%);}
.modal_radius { border-radius: 2rem; overflow: hidden; }
.bg_wh { background-color: var(--white); } 
.bg_bk { background-color: var(--black); }
.madal_row { padding: 3rem 2rem; }
.logo_area { display: block; width: 9.8rem; margin: 0 auto;}
.logo_area img { width: 100%; }
.de_address span { font-size: 1.6rem; font-weight: 500; color: var(--blue); }
.de_address p { padding: 1rem 0 0; font-size: 1.3rem; line-height: 1.8rem; color: var(--dark-gray02); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; }
.qr_zone {display: inline-block; text-align: center; width: 100%; }
.qr_padding { padding: 4px; background-color: white; }

.modal_btn .btn_table { display: table; table-layout: fixed; width: 100%; height: 5rem; }
.modal_btn .btn_table .btn_col { display: table-cell; }
.modal_btn .btn_table .btn_col + .btn_col { border-left: 0.1rem solid var(--dark-gray02); }
.modal_btn .btn_table .btn_col button { width: 100%; height: 100%; font-size: 1.6rem; font-weight: 500; }
.bg_bk .btn_table .btn_col button { color: #fff; }
.modal_close { position: absolute; top: 0; right: 0; display: inline-block; width: 5rem; height: 5rem; }
.modal_close button { width: 100%; height: 100%; }
.m_input_tit { display: flex; justify-content: space-between; padding: 0 0 1.2rem; }
.m_input_tit h4 { font-size: 1.6rem; line-height: 1; font-weight: 500; }
.info_desc_1 { font-size: 1.4rem; line-height: 1.4rem; color: var(--gray01); }
.info_desc { font-size: 1.4rem; line-height: 1.4rem; color: var(--gray01); }
.info_desc_2 { display: inline-block; font-size: 1.4rem; height: 2.1rem; color: var(--gray01); }
.info_desc_3 { display: inline-block; font-size: 1.4rem; height: 2.1rem; color: var(--light-gray02); }
.mw_info { padding: 1rem 0 0; color: var(--red); }

/* 토스트 팝업 */
.toast_wrap { position: absolute; width: 100%; left: 0; right: 0; bottom: 0; background-color: #fff; border-radius: 2rem 2rem 0 0; }
.toast_container { min-width: 2.8rem; max-width: 42.5rem; height: 100%; margin: 0 auto; }
.toast_row { padding: 0; }
.ts_tit { padding: 0 0 1rem; }
.list_desc li { padding: 2rem 0 1rem; }
.list_desc li:last-child { padding-bottom: 0; }
.list_desc li .align_between { display: flex; align-items: center; justify-content: space-between; }
.dsec_dt { font-size: 1.4rem; line-height: 1; color: var(--dark-gray02); }
.dsec_dd { font-size: 1.4rem; line-height: 1; color: var(--dark-gray02); font-weight: bold; }

/* 간격조절 */
.tit_area, .content_area, .base_area { padding: 3rem 0 0; }
.tit_group, .content_group { padding: 3rem 0; }
.content_area >.group + .group { margin: 2rem 0 0; }
.text_field > div + div { margin: 1rem 0 0; }

/* input 커스텀마이징 */
.basic_input.unit_input { position: relative; }
.basic_input.unit_input input { padding: 0 6rem 0 2rem; }
.basic_input.unit_input .unit { position: absolute; top: 1.8rem; right: 2rem; line-height: 1; font-size: 1.4rem; color: var(--dark-gray02); }
.basic_input.btn_input_1 { position: relative; }
.basic_input.btn_input_1 input { padding: 0 8.2rem 0 2rem; }
.basic_input.btn_input_1 .btn_send { position: absolute; right: 0; top: 0; padding: 0 2rem 0 1rem; font-size: 1.4rem; height: 100%;}
.basic_input.btn_input_2 { position: relative; display: flex; }
.basic_input.btn_input_2 input { padding: 0 2rem; }
.basic_input.btn_input_2 button { margin-left: 1rem; }

/* 패스워드 */
.password_area {display: flex; align-items: center; justify-content: center;}
/* .password_area .password_align { display: flex; align-items: center; justify-content: center; height: 100%; } */
.password_area .pin_tit { font-size: 3rem; line-height: 1; font-weight: bold; text-align: center;  color: var(--white); }
.password_area .guide_desc { padding: 1.5rem 0 0; }
.password_area .guide_desc p { font-size: 1.8rem; line-height: 1; font-weight: 500; text-align: center;  color: var(--white); }
.password_area .password{ padding: 3rem 0 0; font-size: 0; text-align: center;}
.password_area .password .word { display: inline-block; margin: 0 10px; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--light-gray02); opacity: 0.2; }
.password_area .password .word.on { background: var(--light-gray02); opacity: 1; }
.keyboard { position: relative; display: table; width: 100%; table-layout: fixed;}
.keyboard::before {content: ''; display: table-row; height: 1rem;  }
.keyboard::after {content: ''; display: table-row; height: 1rem;  }
.keyboard td { display: table-cell; height: 6rem; }
.keyboard td button { width: 100%; height: 100%; line-height: 1; color: var(--white); font-size: 2.4rem; font-weight: 600; }
.keyboard td button .cancel { font-size: 1.8rem; font-weight: 400; }
.keyboard td button .ico_del { display: inline-block; width: 2.7rem; height: 2rem; background:url(/assets/image/btn_del.png) no-repeat center / 2.7rem auto;}


/* **********************************
메인페이지
*********************************** */
.home_header {
    padding: 1rem 2.5rem 2rem 2.5rem;
}

.home_header .logo { display: inline-block; height: 3rem; }
.home_header .logo img { height: 100%; }
.home_header .mypage { float: right; }
.home_header .mypage .profile { display: inline-block; width: 3rem; height: 3rem; border-radius: 100%; border: 0.1rem solid var(--white); overflow: hidden; }
.home_header .mypage .profile img { height: 100%; width: 100%; object-fit: cover; }
.home_lockup {
    position: relative;
    margin-bottom: 2rem;
    padding: 2rem;
    border-radius: 1.2rem;
    background: var(--theme-color02) url(/assets/image/bg_wallet.png) no-repeat right bottom / 100% auto;
}

.home_lockup .assets {
    padding-top: 1rem;
}

.total_lockup .staking, .assets .num_price { padding: 1rem 0 0; }
.home_lockup .num_price { display: block; }
.num_price { font-size: 2.4rem; line-height: 1; color: #fff; font-weight: 700; }
.num_price .unit { padding: 0 0 0 0.5rem; font-size: 1.4rem; font-weight: 400; }
.total_lockup .staking .rate_result { padding: 0.6rem 0 1rem 0; display:block; font-size: 1.4rem; line-height: 1; color: var(--light-gray03); font-weight: 600;}
.total_lockup .staking .rate_result .unit { color: var(--light-gray03); font-weight: 600; }
.view_detail { position: absolute; right: 1.2rem; top: 1.2rem;}
.dw_status { position: relative; }
.dw_status .tit { position: relative; padding: 0 0 0 1.4rem; }
.dw_status .tit::before { content: ''; position: absolute; width: 0.4rem; height: 0.4rem; left: 0; top: 50%; transform: translateY(-50%); border-radius: 100%; background-color: var(--theme-color); }
.dw_card_container { padding: 2rem 0 3rem; }
.dw_card_item { margin: 0 0 2rem; }
.dw_card_item .card_head { padding: 2rem; background-color: #fff; border-radius: 1.2rem 1.2rem 0 0; border-bottom: 1px solid var(--light-gray02); }
.dw_card_item .card_head .dw_tit { position: relative; padding: 0 0 1.4rem; }
.dw_card_item .card_head .dw_tit .icon_coin { position: absolute; width: 4rem; height: 4rem; display: inline-block; }
.dw_card_item .card_head .dw_tit .icon_coin img { width: 100%; }
.dw_card_item .card_head .dw_tit .address { padding: 0 0 0 5rem; height: 4rem; }
.dw_card_item .card_head .dw_tit .address p { padding:0.2rem 0; font-size: 1.3rem; line-height: 1.8rem; color: var(--dark-gray02); word-break: break-all; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dw_cont { position: relative; }
.dw_cont .staking { padding: 0 0 0 7.5rem; text-align: right;}
.dw_cont .staking .num_price { display: inline-block; font-size: 1.6rem; line-height: 1.6rem; font-weight: 700; word-break: break-all; }
.dw_cont .staking .rate_result { display: block; padding: 0.6rem 0 0; }
.dw_cont .staking .rate_result, .dw_cont .staking .rate_result .unit { font-size: 1.4rem; line-height: 1.4rem; color: var(--gray01); font-weight: 600; word-break: break-all; }
.dw_cont .num_price .unit { padding: 0; font-size: 1.6rem; line-height: 1; font-weight: 700; }
.dw_cont .badge { position: absolute; left: 0; top: 0; }
.dw_cont .badge span { display: inline-block; padding: 0.6rem 1rem; border-radius: 0.6rem;  font-size: 1.2rem; line-height: 1; }
.dw_card_item .card_body { padding: 2rem; background-color: #fff; border-radius: 0 0 1.2rem 1.2rem; border-bottom: 1px solid var(--light-gray02); }
.dw_card_item .card_body .dw_date { display: flex; align-items: center; justify-content: space-between; }
.dw_card_item .card_body .dw_date .date { font-size: 1.4rem; line-height: 1.4rem; color: var(--gray01); }
.dw_card_item .card_body .dw_date .tg_btn { display: block; font-size: 1.4rem; line-height: 1.4rem; font-weight: 600; }
.dw_card_item .card_body .dw_date .tg_btn i { padding-left: 0.6rem; font-size: 1.4rem; line-height: 1.4rem; font-weight: 600; }
.dw_card_item .card_body .dw_box { margin: 2rem 0 0; padding: 2rem; border-radius: 1rem;}
.dw_card_item .card_body .dw_box.hide { display: none; }
.dw_card_item .card_body .dw_box.open { display: block; }
.dw_card_item .card_body .dw_box p + p { padding-top: 1.4rem; }
.dw_card_item .card_body .dw_box [class*="txid_"] b { display: block; font-size: 1.4rem; line-height: 1.4rem; color: var(--gray01); font-weight: 600; }
.dw_card_item .card_body .dw_box [class*="txid_"] span {display: block; padding-top: 0.6rem; font-size: 1.3rem; line-height: 1.3rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.dw_card_item .card_body .dw_box .txid_address .w_copy { position: relative; padding: 0 2.1rem 0 0; }
.dw_card_item .card_body .dw_box .txid_address .w_copy .link_copy { position: absolute; right: 0; width: 1.3rem; height: 1.3rem; background-size: 1.3rem;}

/* plus */
.plus .dw_cont .badge span { background-color: var(--bg-blue); color: var(--blue); }
.plus .num_price { color: var(--blue) !important; }
.plus .card_body .dw_date .tg_btn { color: var(--blue); }
.plus .card_body .dw_box { background-color: var(--bg-blue); }
.plus .card_body .dw_box [class*="txid_"] span { color: var(--blue); }
.plus .card_body .dw_box .txid_address .w_copy .link_copy { background-image: url(/assets/image/btn_copy1.png); }

/* minus */
.minus .dw_cont .badge span { background-color: var(--bg-red); color: var(--red); }
.minus .num_price { color: var(--red) !important; }
.minus .card_body .dw_date .tg_btn { color: var(--red); }
.minus .card_body .dw_box { background-color: var(--bg-red); }
.minus .card_body .dw_box [class*="txid_"] span { color: var(--red ); }
.minus .card_body .dw_box .txid_address .w_copy .link_copy { background-image: url(/assets/image/btn_copy2.png); }
.card_more { text-align: center; }
.card_more button { font-size: 1.4rem; line-height: 1.4rem; color: var(--gray01); }
.card_more button i { padding: 0 0 0 .5rem; font-size: 0.6rem; }

/* border: 0.1rem solid var(--light-gray02) */

.sw_button_area { margin: 0.1rem; }
.sw_button { margin: -0.1rem -0.3rem -0.3rem; } 
.sw_button .btn_table { display: table; table-layout: fixed; width: 100%; height: 6rem; background-color: var(--theme-color02); border: 0.1rem solid var(--theme-color02); border-radius: 3rem 3rem 0 0; }
.sw_button .btn_table .btn_col { display: table-cell; }
.sw_button .btn_table .btn_col + .btn_col { border-left: 0.1rem solid var(--theme-color); }
.sw_button .btn_table .btn_col .addStatus { width: 100%; height: 100%; }
.sw_button .btn_table .btn_col .addStatus span { color: white; position: relative; display: inline-block; padding-left: 3.4rem; font-size: 1.6rem; line-height: 2.4rem; font-weight: 500;}
.sw_button .btn_table .btn_col .addStatus span::before { content: ''; position: absolute; left: 0; width: 2.4rem; height: 2.4rem; background-size: 2.4rem; }
.sw_button .btn_table .btn_col .addStatus span.btn_dp::before { background-image: url(/assets/image/btn_dep.png);}
.sw_button .btn_table .btn_col .addStatus span.btn_wd::before { background-image: url(/assets/image/btn_draw.png);}


/* **********************************
마이페이지
*********************************** */
.setbox_head { padding: 3rem 0; }
.choose_profile_picture { position: relative; text-align: center; }
.profile_wrap { position: relative; display: inline-block; }
.profile_wrap .uprofile { display: inline-block; box-sizing: border-box; vertical-align: top; }
.profile_wrap .uprofile .profile_inner { position: relative; display: block; width: 12rem; height: 12rem; border-radius: 100%; overflow: hidden; background-color: var(--bg-gray); }
.profile_wrap .uprofile .profile_inner img { width: 100%; height: 100%; object-fit: cover; }
.profile_wrap .uprofile .profile_inner::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 0.1rem solid var(--light-gray02); border-radius: 100%; }
.profile_wrap .photo_submit { position: absolute; right: 0; bottom: 0; width: 4rem; height: 4rem; border: 0.1rem solid var(--light-gray02); border-radius: 100%; background: #fff url(/assets/image/btn_set.png) no-repeat center / 2rem auto; }
.profile_info { padding: 2rem 0 0; text-align: center; }
.profile_info p + p { padding: 1rem 0 0; }
.profile_info .user_mail { font-size: 1.8rem; line-height: 1; font-weight: 600; color: var(--light-gray02);  }
.profile_info .user_num { font-size: 1.6rem; line-height: 1; color: var(--gray01); }
.setbox_block { margin: 1rem 0 0;}
.setbox_items { padding: 1rem 0; }
.set_list li a { display: flex; justify-content: space-between; align-items: center; }
.set_list li span { font-size: 1.6rem; line-height: 5rem; color: var(--light-gray02); }
.set_list li i { font-size: 1.6rem; color: var(--light-gray03); font-weight: 600; }
.btn_logout_wrap { position: relative; padding: 2rem 0 0; }

/* 로그인 기록 테이블 */
.login_rog { border-collapse:collapse;border-spacing:0; }
.login_rog thead { border-top: 0.1rem solid var(--light-gray02); border-bottom: 0.1rem solid var(--light-gray02); }
.login_rog th { padding: 1.4rem 0; font-size: 1.4rem; line-height: 1; font-weight: 500; text-align: center; }
.login_rog tbody tr { border-top: 0.1rem solid var(--light-gray02); border-bottom: 0.1rem solid var(--light-gray02); }
.login_rog td { padding: 1.4rem 0; font-size: 1.2rem; line-height: 1; color: var(--light-gray02); text-align: center;  }

/* 약관 */
.terms, .terms h5 { font-size: 1.4rem; line-height: 2.1rem; color: var(--light-gray02); font-weight: 400; word-break: break-all; }

/* otp 등록 */
.tit_desc { padding: 1.4rem 0 0; font-size: 1.4rem; line-height: 2.1rem; color: var(--light-gray02); }
.step_tit .tit { font-size: 2rem; font-weight: bold; color: var(--light-gray02); }
.step_tit .desc {padding: 1.4rem 0 0; font-size: 1.4rem; line-height: 2.1rem; color: var(--gray01); }
.step_descript .desc { font-size: 1.4rem; line-height: 2.1rem; color: var(--gray01); }
.step_descript .code  { display: inline-block; padding: 1.4rem 0 0; font-size: 1.6rem; color: var(--light-gray02); }
.content_group .step_items { padding: 0 0 1rem; }
.content_group .step_items:last-child { padding: unset }
.step_item_block { padding: 2rem 0 0; }
.step_item_block a { text-align: center; line-height: 3 }
.step_item_tit .tit { font-size: 1.6rem; line-height: 1; font-weight: 500; color: var(--light-gray02); }
.step_item_tit .desc { padding: 1.4rem 0 0; font-size: 1.4rem; line-height: 1; color: var(--gray01); }
.ex_code { display: block; color: var(--light-gray02); }
.img_otp { display: block; margin: 0 auto; width: 15rem; height: 15rem; background: url(/assets/image/otp.png) no-repeat center / 15rem auto; }
.google_img { position: relative; max-width: 32.5rem; margin: 0 auto; }
.google_img::before { content: ''; display: block; padding-top: calc(32/32.5*100%); }
.google_new_otp { position: absolute; display: block; left: 0; top: 0; bottom: 0; right: 0; background: url(/assets/image/google_new_otp.png) no-repeat center/ 100% auto; }
.google_otp { position: absolute; display: block; left: 0; top: 0; bottom: 0; right: 0; background: url(/assets/image/google_otp.png) no-repeat center/ 100% auto; }


/* css 추가 */
.tablist { position: relative; }
.tab_type1 { display: table; table-layout: fixed; width: 100%; }
.tab_type1 .tab_type1-item { position: relative; display: table-cell; }
.tab_type1 .tab_type1-item.selected .item_link{ border-bottom: 2px solid #293097; color: var(--dark-gray02); font-weight: 700; }
.tab_type1 .tab_type1-item .item_link { display: block; padding: 1.6rem 0; font-size: 1.8rem; line-height: 1; color: var(--gray01); text-align: center;}

/* 목록 리스트 */
.contents { min-height: 100%; }
.contents.h102 { min-height: calc(100% - 102px); }
.contents.h154 { min-height: calc(100% - 154px); }

.gallery__month { color: #fff; font-size: 1.6rem; line-height: 1; font-weight: 500; text-align: center;}

.gallery li { margin-top: 1.2rem; }
.gallery li:first-of-type { margin-top: unset; }
.gallery__content { padding: 2rem; border-radius: 1.2rem; }
.gallery__content.white { background: #fff url(/assets/image/bg_wallet.png) no-repeat left bottom / 13rem auto; }
.gallery__content.opacity { background: rgba(255, 255, 255); border: 1px solid rgba(255, 255, 255, 0.2); }
.gallery__content.gray { background-color: var(--bg-gray); border: 1px solid var(--light-gray02); }
.gallery__title { display: block; position: relative; padding-left: 5rem; padding-right: 9.4rem; padding-bottom: 1rem; }
.gallery__title .img_box { position: absolute; left: 0; }
.gallery__title .title { display: flex; height: 4rem; align-items: center;}
.gallery__title .title .text { display: block; font-size: 1.6rem; line-height: 2rem; font-weight: 700; overflow: hidden; color:var(--dark-gray02);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.gallery.type_2 .gallery__title { padding-left: 0; }
.gallery.type_2 .gallery__title .title { height: 3rem;}
.gallery.type_2 .desc_area .detail { margin-top: unset; }

.gallery__title .desc_area { position: absolute; top: 0; right: 0; }
.gallery__title .desc_area .detail { margin-top: 0.5rem; }
.gallery__title .detail .txt { display:flex; align-items: center; height: 100%; font-size: 1.2rem; }
.desc_area .status { display: inline-block;  margin-top: 0.8rem; padding: .6rem 1rem; border-radius: 1.2rem; font-size: 1.2rem; line-height: 1; }

.desc_area .status.type1 { background-color: var(--gray02); color: #fff; }
.desc_area .status.type2 { background-color: var(--dark-gray01); color: #fff; }
.desc_area .status.type3 { background-color: var(--dark-gray02); color: #fff; }

.bbs__view { font-size: 1.4rem; color: var(--dark-gray02); line-height: 2.1rem; }
.bbs__view th, .bbs__view td { padding-top: .8rem; padding-bottom: .4rem; }
.bbs__view th { font-weight: 400; text-align: left; }
.bbs__view td {text-align: right; font-weight: 700; }

.underline.type_1 { border-top: 1px solid var(--light-gray02); }
.underline.type_2 { border-top: 1px solid #293097; }
.bbs__view.underline tr:first-child th, .bbs__view.underline tr:first-child td { padding-top: 1.5rem; }
.bbs__view.underline.type_2 th { color: var(--dark-gray02); }

.bbs__view2 th, .bbs__view2 td { padding-top: .7rem; padding-bottom: .7rem; vertical-align: top; }

.bbs__view2.underline tr:first-child th, .bbs__view2.underline tr:first-child td { padding-top: 3rem; }
.bbs__view2.underline tr:last-child th, .bbs__view2.underline tr:last-child td { padding-bottom: 3rem; }