@charset "utf-8";



/* header-section start */
#wallet_head {width: 100%; position: fixed; left: 0; top: 0; z-index: 100; height: 90px; line-height: 90px; background: #27B4A1; }
#wallet_head h2 {font-size: 20px; font-weight: bolder; color : #414141; text-align: center; color: #fff;}
#wallet_head .back_btn {position: absolute; width: 18px; height: 18px; left: 20px; top: 50%; transform: translateY(-50%) rotate(135deg); border: solid #fff; border-width: 0 4px 4px 0; z-index: 1;}
#wallet_head .menu_btn {position: absolute; width: 26px; height: 26px; right: 16px; top: 50%; transform: translateY(-50%); z-index: 1; background: url("../img/menu_bar.png"); background-size: cover; background-position: center;}
.header_ {top: 1em;}
/* header-section end */

.setting_container {width: 100%; height: calc(100% - 0rem); padding-top: 10rem; /*overflow-x: hidden; overflow-y: auto;*/
 -ms-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;}
.password_box {
 -ms-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;}
.setting_container .myinfo_box {}
.setting_container .myinfo_box li {width: 100%; height: 40px; line-height: 40px; padding: 0 0px; font-size: 1.7em;  color:#303030; text-align: left; position: relative; float:left;border-bottom: 1px solid #E8E8E8;margin-bottom: 0.5em;}
.setting_container .myinfo_box li .left {float: left;}
.setting_container .myinfo_box li .right {float: right;}
.setting_container .myinfo_box li .right_arrow_box {position: absolute; right: 10px; top: 40%; transform: translateY(-50%) rotate(45deg); width: 1em; height: 1em; border: 1px solid #707070;border-width: 1px 1px 0 0;}
#setting_box {background: #fff;margin-top: 4em;width: 100%;height: 100%;border-radius: 20px 20px 0px 0px;padding: 1em 2.5em;}


.layer_sub_box .layer_body_box .reset_box {overflow: hidden;}
.layer_sub_box .layer_body_box .reset_box li {width: 100%; color: #000; text-align: left; position: relative; float: left;}
.layer_sub_box .layer_body_box .reset_box li label {width: 100%; display: inline-block; }
.layer_sub_box .layer_body_box .reset_box li input {width: 100%; color: #000; font-size: 17px; border: 1px solid #cccccc; height: 50px; background: none;border-radius: 5px;margin: 1em 0em;padding-top: 0.3em;padding-left: 0.3em;}
.layer_sub_box .layer_body_box .reset_box li input::-webkit-input-placeholder{ background-image: url(/theme/squid/645co/new/img/reset_pw.png);background-repeat: no-repeat;background-position: 10px center;background-size: contain;padding-left:2.5em;}

.layer_sub_box .layer_body_box .sound_box {overflow: hidden;}
.layer_sub_box .layer_body_box .sound_box li {width: 100%; height: 60px; line-height: 60px; padding: 0 20px; color: #000; text-align: left; position: relative; float: left;}
.layer_sub_box .layer_body_box .sound_box li label {width: 140px; display: inline-block; margin-top: 5px;}
.layer_sub_box .layer_body_box .sound_box li input {width: calc(100% - 146px); color: #000; border: 0; border-bottom: 1px solid #d1d1d1; height: 32px; background: none;}



.layer_sub_box {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; display: none; overflow: hidden; background: #27b4a1; background-position: center;}

.layer_sub_box .layer_head_box { text-align:center; height: 50px; line-height: 50px; position:relative; }
.layer_sub_box .layer_head_box .back_btn {position: absolute; display: inline-block; width: 20px; height: 20px; border-right: 2px solid #fff; border-top: 2px solid #fff; top: 90%; left: 14px; transform: translateY(-50%) rotate(225deg);}
.layer_sub_box .layer_head_box h2 {height: 90px; line-height: 90px; margin:0;padding: 0; color: #fff; font-size: 20px; font-weight: bolder;}

.layer_sub_box .layer_body_box {width: 100%; height: 100%;  padding: 2em 1em; overflow: auto; position: relative; font-size: 14px;background: #fff;border-radius: 20px 20px 0px 0px;margin-top: 7em;}
.layer_sub_box .layer_body_box .addr_list_box {padding: 0px 20px 20px; position: relative; height: 100%;}
.layer_sub_box .layer_body_box .addr_list_box > .addr_list { width: 100%; padding: 10px; text-align: left; border : 1px solid #707070; margin-top: 20px; border-radius: 6px; line-height: 26px; color: #707070; position: relative; overflow: hidden;}
.layer_sub_box .layer_body_box .addr_list_box > .addr_list span {display: block; height: 26px; line-height: 26px;}
.layer_sub_box .layer_body_box .addr_list_box > .addr_list p {display: block; height: 26px; line-height: 26px;}
.layer_sub_box .layer_body_box .addr_list_box > .addr_list b {width: calc(100% - 60px); overflow: hidden; display: inline-block; word-break: keep-all; text-overflow: ellipsis; white-space: nowrap;}
.layer_sub_box .layer_body_box .addr_list_box > .addr_list p font {position: relative; top: -8px;}
.layer_sub_box .layer_body_box .addr_list_box .no_list {font-size: 14px; color: #BFBFBF; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.layer_sub_box .layer_body_box .addr_list_box > .addr_list .addr_menu_box {position: absolute; right: 0; top: 0; width: 50px; text-align: center; background: #fff; z-index: 1200; height: 100%; border-left: 1px solid #707070;}
.layer_sub_box .layer_body_box .addr_list_box > .addr_list .addr_menu_box > div {height: 50%; line-height: 50px;}
.layer_sub_box .layer_body_box .addr_list_box > .addr_list .addr_menu_box > div:first-child {border-bottom: 1px solid #707070;}
.layer_sub_box .layer_body_box .addr_list_box > .addr_list .address_text {width: calc(100% - 90px) !important; overflow: auto; display: inline-block; word-break: keep-all; text-overflow: inherit; white-space: nowrap;}

.layer_sub_box .layer_body_box .bottom_btn {width: 100%; height: 50px; line-height: 50px;font-size: 1.3em;/*position: fixed; left: 0; bottom: 0;*/ background: #E9528A; color: #fff; text-align: center;margin-top: 3em;border-radius: 30px;}
.layer_sub_box .layer_body_box .addr_add_box {padding: 30px 20px 20px;}
.layer_sub_box .layer_body_box .addr_add_box li {text-align: left; margin-bottom: 24px;}
.layer_sub_box .layer_body_box .addr_add_box li > label {display: block; margin-bottom: 12px;}
.layer_sub_box .layer_body_box .addr_add_box li input {width: 100%; height: 40px; border: 1px solid #E1E1E1; border-radius: 6px; padding-left: 10px; font-size: 14px; font-weight: 300;}
.layer_sub_box .layer_body_box .addr_add_box li input::placeholder {color: #BFBFBF;}
.layer_sub_box .layer_body_box .addr_add_box li input:focus {outline: none;}
.layer_sub_box .layer_body_box .addr_add_box li #to_address {padding-right: 35px;}
.layer_sub_box .layer_body_box .addr_add_box li > div {position: relative;}
.layer_sub_box .layer_body_box .addr_add_box .qr_code_scan {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: url("/wallet/img/transfer_img3.png"); width: 16px; height: 16px;}

.layer_sub_box .layer_body_box.profile ul li {padding: 0 6px; width: 100%; height: 40px; line-height: 40px; margin-top: 6px;}
.layer_sub_box .layer_body_box.profile ul li .left_right_box {width: 100%; height: 100%; border: 1px solid #fd3580; border-radius: 6px; overflow: hidden;}
.layer_sub_box .layer_body_box.profile ul li .left_right_box > div {float: left;}
.layer_sub_box .layer_body_box.profile ul li .left_right_box > .left {padding-left: 20px;width: 190px;}
.layer_sub_box .layer_body_box.profile ul li .left_right_box > .right {width: calc(100% - 190px); text-align: center; background: #fd3580; color: #000; font-weight: bolder; font-size: 16px;}
.layer_sub_box .layer_body_box.profile .profile_img_box {margin-top: 40px; padding-bottom: 40px;}
.layer_sub_box .layer_body_box.profile .profile_img_box .profile_head {width: 100%; height: 40px; line-height: 40px;display: flex;justify-content: center;}
.layer_sub_box .layer_body_box.profile .profile_img_box .profile_head label {font-size: 1.5em; color: #fff; background: #fd3580; display: inline-block; padding: 1em 2em; height: 100%; line-height: 0px; margin: 0; border-radius:20px;margin-top: 1em;}
.layer_sub_box .layer_body_box.profile .profile_img_box .profile_head input {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}
.layer_sub_box .layer_body_box.profile .profile_img_box .profile_body {width: 100%; height: 200px; border-top: 1px solid #fd3580; border-bottom: 1px solid #fd3580; position: relative;}
.layer_sub_box .layer_body_box.profile .profile_img_box .profile_body div {width: 130px; height: 110px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden;}
.layer_sub_box .layer_body_box.profile .profile_img_box .profile_body div img {width: 100%;}



/*환경 설정 on / off 버튼*/
.toggle-switch input{
  -webkit-appearance:none;
  -webkit-border-radius:0;
}

.toggle-switch input[type=checkbox]{
  display: none;
}

.toggle-track{
  display: inline-block;
  position: relative;
  width: 60px;
  height: 25px;
  border-radius:60px;
  background: #8b8b8b;
}
.toggle-track:before{
  content:'';
  display: block;
  position: absolute;
  top: -6px;
  left: -15px;
  width: 27px;
  height: 27px; 
  margin: 5px;
  background: #fff;
  border-radius:100%;
  border:1px solid #8b8b8b;
  transition:left 0.3s;
}
.toggle-switch input[type=checkbox] + label .toggle-track:after{
  content:'OFF';
  display: inline-block;
  position: absolute;
  right: 8px;
  color: #fff;
  top: -20px;
  font-weight:bold;
}

.toggle-switch input[type=checkbox]:checked + label .toggle-track{
  background: #FA9AA6;
}
.toggle-switch input[type=checkbox]:checked + label .toggle-track:before{
  left: 40px;
  border:1px solid #FA9AA6;
}
.toggle-switch input[type=checkbox]:checked + label .toggle-track:after{
  content:'ON';
  left: 5px;
}

.profile_box_new {position: relative;left: -3em;width: 3em;height: 3em;background: #fff;display: flex;align-items: center;justify-content: center;border: 1px solid #C2C2C2;border-radius: 30px;}
.profile_imgbox_new {width: 2em !important;}
#myProfile {display: flex;align-items: flex-end;cursor: pointer;padding: 0em 0.5em;margin-top:2em;}
#myProfile img {width: 8em;border-radius: 80px;}
.setting_new_info_box {background: #F1F1F1;border-radius: 20px;padding: 1em 1.5em;margin-top: 1.5em;font-size: 1.9em;}
.profile_name_box_new {position: relative;top: -1em;left: -2em;}
.profile_box_containe_new {display: flex;align-items: flex-end;}
.setting_new_info_box_sub {display: flex;justify-content: space-between;}
.setting_new_info_box_sub2 {display: flex;justify-content: flex-start;gap: 1em;margin-top: 0.5em;}
.new_info_txt {color:#E9528A}
.copy_new {width:1.2em; height:1.2em;top: 0.3em;position: relative;}

.layer_title_new {text-align: center;font-size: 1.5em;}
.toggleSwitch {width: 4em;height: 1.8em;display: block;position: absolute;border-radius: 30px;background: #E9528A;cursor: pointer;top: 0.1em;float: right;margin-right: 0.3em;right: 0em;}
 /* 토글 버튼 */
.toggleSwitch .sound_speaker_new {width: 1.5em;height: 1.5em;position: absolute;top: 50%;left: 4px;transform: translateY(-50%);border-radius: 50%;background: #fff;left: calc(100% - 1.8em);}
.toggleSwitch.on{background: #7e7d7d;}
.toggleSwitch .sound_speaker_new.on {background: #fff;left: calc(100% - 3.8em);}
.toggleSwitch, .sound_speaker_new {	transition: all 0.2s ease-in;}

@media (max-width: 370px) {
.layer_sub_box .layer_body_box {margin-top: 6em;}
}

@media (max-width: 360px) {
.toggleSwitch  {top: 0.5em;}
}
@media (max-width: 360px) {
.setting_new_info_box {font-size: 1.8em;}
}

@media (max-width: 310px) {
.layer_sub_box .layer_body_box {margin-top: 5.5em;}
}

@media (max-width: 285px) {
.layer_sub_box .layer_body_box {margin-top: 5em;}
}