.wrap.login{
    background: var(--bg-color);
    min-height: 100vh;
    background: url("/assets/img/login_bg2.png") no-repeat top center /100%  100%;
    width: 100%;
}

.wrap.login .container{
    width: 80%;
    margin: 0 auto;
    min-height: 100vh;
}


.login .top_wrap{
    width: 100%;
    /* height: clamp(226px, 20vw, 452px); */
    height: clamp(200px, 20vw, 452px);
    background: url("/assets/img/login_top.png") no-repeat bottom center;
    background-size: 40%;

    /* padding-bottom: 84px; */
    position: relative;
}
/* .login .top_wrap::after{
    content: "";
    display: block;
    width: clamp(74px, 8vw, 148px) ;
    height: clamp(74px, 8vw, 148px) ;
    background: linear-gradient(288deg, #fff , rgba(255,255,255,0) );
    border-radius: 50%;
    position: absolute;
    top: 41px;
    right: 33px;
} */
.login .title_wrap .back_btn{
    background: url("/assets/img/back_ico_w@2x.png") no-repeat center center / contain;
}
.login .log_title{
    /* color: var(--w-text); */
    /* letter-spacing: -0.5px; */
}
.login .log_title .tit{
    font-family: "nskbk";
    /* font-size: clamp(32px, 3vw , 64px); */
    line-height: 1.42;
    font-size: 160%;
    text-align: center;
}
.login .log_title .pay_tit_wrap{

    width: 50%;
    margin: 0 auto;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--sub-color);
    font-weight: bold;
    font-size: auto;
}
.login .log_title .txt{
    font-family: "nskr";
    /* font-size: clamp(18px, 2vw , 36px); */
    line-height: 1.39;
    font-size: 22px;
    letter-spacing: -1px;
}

.login .log_title .pay_tit{
    /* margin-top: 55px; */
    /* text-align: right; */
    text-align: center;
    /* margin-right: 3%; */
    font-size: 40px;
    font-weight: bold;
    display: block;
    letter-spacing: -3px;
}

.login .bot_wrap {
    margin-top: 38px;
}
.login .bot_wrap .login_box{
    width: 100%;
}
.in_wrap .in_box:not(:first-child){
    margin-top: 8px;
}
.login .bot_wrap .login_box .in_wrap .in_box{
    width: 100%;
}
.in_box input[type=text],.in_box input[type=password],.in_box select{
    width: 100%;
    height: clamp(44px, 6vw, 88px);
    background: var(--w-text);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(195,212,233, 0.4);
    padding:0 14px;
    font-family: "nskr";
    font-size: clamp(14px, 2vw, 28px);
    line-height: 1.39;
    letter-spacing: -0.28px;
    color: var(--tit-color);
}
 .in_box input::placeholder{
    color: rgba(144, 163, 191, 0.6);
}
.login_box .in_wrap .in_box:last-child{
    display: flex;
    align-items: center;
    margin-top: 20px;
}
.in_wrap .in_box input[type=checkbox]{
    appearance: none;
    width: clamp(18px, 2vw, 36px);
    height: clamp(18px, 2vw, 36px);
    border-radius: 5px;
    border: 2px solid #9c9c9c;
    background: var(--w-text);
    margin-right: 5px;
    cursor: pointer;
}
.in_wrap .in_box input[type=checkbox]:checked{
    background: var(--w-text) url("/assets/img/ck_ico@2x.png") no-repeat center center / 55%;
}
.in_wrap .in_box label{
    font-family: "nskr";
    font-size: clamp(14px, 2vw, 28px);
    line-height: 1.39;
    letter-spacing: -0.28px;
    color: var(--tit-color);
    cursor: pointer;

}

/* 임의 추가 ( 230622 ) */
.in_box .input_text {
    display: flex;
    align-items: center;
    width: 100%;
    height: clamp(44px, 6vw, 88px);
    background: var(--w-text);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(195,212,233, 0.4);
    padding-right: 14px;
}

.in_box .input_text input{
    text-align:right;
    width: 95%;
    height: 100%;
    background: none;
    border-radius: none;
    overflow: hidden;
    border: none;
    padding: 0 10px 0 14px;
    font-family: "nskr";
    font-size: clamp(14px, 2vw, 28px);
    line-height: 1.39;
    letter-spacing: -0.28px;
    color: var(--tit-color);
}

.in_box .input_text p{
    font-family: "nskb";
    font-size: clamp(14px, 2vw, 28px);
    line-height: 1.5;
    letter-spacing: -0.28px;
    color: var(--main-text);
}

.in_wrap.auto_login{
    margin-top: 35px;
}

.in_wrap.auto_login .in_box{
    justify-content: center;
    font-weight:bold;
}
.in_wrap.auto_login .in_box label{
    font-size:clamp(17px, 2vw, 28px) !important;
}

.login .bot_wrap .btn_wrap{
    margin-top: 36px;
}
.login .bot_wrap .btn_wrap:nth-of-type(1){
    margin-top: 10px;
}
.login .bot_wrap .btn_wrap .btn{
    width: calc(50% - 4px);
}

.login .bottom_guide{
    display:flex;
    flex-direction:column; 
    gap:10px;
    align-items:center;
    color: white;
    font-weight: bold;
    font-size: 20px;
}
.login .bottom_guide img{
    width: 70%;
}
.login .bottom_guide > div:nth-child(1){
    font-size: 15px;
}
.login .bottom_guide > div:nth-child(2){
    font-size: 25px;
}


.login .bottom_logo{
    display:flex;
    align-items: center;
    justify-content: center;
}
.login .bottom_logo img{
    width: 70%;
    /* width: 100%; */
}

.login .line{
    width: 100%;
    height: 1px;
    background: #e7ebf3;
    margin-bottom: 10px;
}

/* signup */
.signup .title_wrap .tit{
    font-size: clamp(24px, 2vw, 48px);
    color: var(--main-color);
}
.signup .vs_wrap {
    width: 100%;
    margin-top: 38px;
    background: var(--bg-color);
    padding-bottom: 18px;
}
.signup .vs_wrap .vs_box{
    position: relative;
    top: -30px;
    width:100%;
    border-radius: clamp(10px,5vw, 30px);
    background: var(--w-text);
    overflow: hidden;
}
.signup .vs_wrap .vs_box img{
    display: block;
    width: 100%;
}
.signup .vs_wrap .in_wrap .in_box label{
    color: var(--sign-color);
    border-bottom:1px solid var(--sign-color);
}
.signup .sign_box .in_wrap{
    border-top: 8px solid #e7ebf3;
    background: var(--bg-color);
    padding: 15px 0 26px;
    
}
.signup .sign_box .in_wrap .title_box .tit{
    font-family:"nskb";
    font-size: clamp(14px ,2vw, 28px);
    color: #90a3bf;
    margin-bottom: 10px;
    
}
.signup .sign_box .in_wrap .title_box .txt{
    display: inline-block;
    position: relative;
    font-family:"nskb";
    font-size: clamp(20px ,3vw, 40px);
    color: var(--main-text);
    z-index: 1;
    margin-bottom: 10px;
}
.signup .sign_box .in_wrap .title_box .txt::after{
    content: "";
    display: block;
    width: 100%;
    height: clamp(13px,2vw,26px);
    border-radius: clamp(6.5px,2vw,13px);
    background: rgba(53, 99, 233, 0.2);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: -1;
}
 .in_wrap .in_box .tit{
    font-family:"nskr";
    font-size: clamp(14px ,2vw, 28px);
    color: var(--sign-color);
    margin-bottom: 7px;
}
.signup .sign_box .in_wrap .in_box.two{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.signup .sign_box .in_wrap .in_box.two .box{
   width: calc(100% - 4px);
}

.signup .sign_box .in_wrap .in_box.two-type2{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}
.signup .sign_box .in_wrap .in_box.two-type2 .box:nth-child(1){
    width: calc(30% - 4px);
}
.signup .sign_box .in_wrap .in_box.two-type2 .box:nth-child(1) select{
    padding-right: 26px;
    text-align: center;
    background:var(--w-text) url("/assets/img/select_arrow@2x.png") no-repeat center right 5px / 20px;
}
.signup .sign_box .in_wrap .in_box.two-type2 .box:nth-child(2){
    width: calc(70% - 4px);
}
.signup .sign_box .in_wrap:nth-child(2) .in_box.two-type2 .box:nth-child(1){
    width: calc(80% - 4px);
}
.signup .sign_box .in_wrap:nth-child(2) .in_box.two-type2 .box:nth-child(2){
    width: calc(20% - 4px);
}
.signup .sign_box .in_wrap:nth-child(2) .in_box.two-type2 .box:nth-child(2) .btn{
    width: 100%;
    height: clamp(44px, 6vw, 88px);
    border-radius: clamp(10px, 2vw , 20px);
}

.signup .sign_box .in_wrap .in_box.two-type2 .box:nth-child(3){
    width: calc(70% - 4px);
}
.signup .sign_box .in_wrap:nth-child(3) .in_box.two-type2 .box:nth-child(1){
    width: calc(80% - 4px);
}
.signup .sign_box .in_wrap:nth-child(3) .in_box.two-type2 .box:nth-child(2){
    width: calc(20% - 4px);
}
.signup .sign_box .in_wrap:nth-child(3) .in_box.two-type2 .box:nth-child(2) .btn{
    width: 100%;
    height: clamp(44px, 6vw, 88px);
    border-radius: clamp(10px, 2vw , 20px);
}


.signup .sign_box .in_wrap .btn_wrap{
   justify-content: flex-end;
   margin-top: 30px;
}
.signup .sign_box .in_wrap .btn_wrap .btn{
    width: clamp(78px, 20vw, 156px);
}
/* signfin */
.wrap.signfin{
    height: 100vh;
}
.signfin .container{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 63px 17.5px 84px;

}
.signfin .title_box{
    color: var(--tit-color);
    text-align: center;
}
.signfin .title_box .txt{
    font-family: "nskb";
    font-size: clamp(24px, 4vw, 48px);
    line-height: 1.26;
    letter-spacing: -0.5px;
}
.signfin .img_wrap {
    width: clamp(236px, 20vw, 472px);
    height: clamp(236px, 20vw, 472px);
}
.signfin .img_wrap .img_box{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--main-color);
}
.signfin .img_wrap .img_box img{
    display: block;
    width: 100%;
}
.signfin .btn_wrap{
    width: 100%;
}
.signfin .btn{
    width: 100%;
}

/* prior */
.prior{
    background: var(--bg-color);
    padding-bottom: 23px;
}
.prior .title_wrap {
    justify-content: space-between;
}
.prior .title_wrap .tit{
    font-size: clamp(24px, 2vw, 48px);
    color: var(--main-color);
}
.right_menu{
    display: flex;
    align-items: center;
    gap:12px ;
}
.right_menu a{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.right_menu a .ico{
    width: clamp(24px, 4vw, 48px);
}
.right_menu a .ico img{
    display: block;
    width: 100%;
}
.right_menu a .txt{
    font-size:clamp(10px, 2vw, 20px);
    margin-top: 1px;
    color: #313131;
    
}
.prior .vs_wrap {
    width: 100%;
    margin-bottom: 12px;
}
.prior .vs_wrap .vs_box{
    width:100%;
    border-radius: clamp(10px,5vw, 30px);
    background: var(--w-text);
    overflow: hidden;
}
.prior .vs_wrap .vs_box img{
    display: block;
    width: 100%;
}
.prior .bot_wrap .txt_wrap{
    width: 100%;
    padding:16px 17px ;
    background: var(--main-color);
    border-radius: 10px;
    color: var(--w-text);
    font-family: 'nskr';
    font-size:  clamp(14px , 2vw, 28px);
    letter-spacing: -0.5px;
    line-height: clamp(19.4px,2vw,38.8px);
}
.prior .bot_wrap .txt_wrap .tit{
    font-family: 'nskb';
    font-size:  clamp(16px , 2vw, 32px);
    letter-spacing: -0.32px;
    line-height: clamp(24px,2vw,48px);
}
.prior .bot_wrap .txt_wrap .txt:not(:first-child){
    margin-top: 8px;
}
.prior .bot_wrap .cont02 .txt_wrap div{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
.prior .bot_wrap .cont02 .txt_wrap div:not(:first-child){
   margin-top: 8px;;
}
.prior .bot_wrap .cont02 .txt_wrap div::before{
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 2.5px solid var(--w-text);
    margin-top: 5px;
    margin-right: 5px;
}
.prior .bot_wrap .cont02 .txt_wrap .txt span{
    font-family: "nskb";
}
.prior .bot_wrap .cont02 .document_wrap.monthly .tit{
    font-family: "nskb";
    display: inline-block;
    position: relative;
    font-family:"nskb";
    font-size: clamp(19px ,3vw, 40px);
    color: var(--main-text);
    z-index: 1;
    margin-bottom: 5px;
    margin-top: 12px;
}

.prior .bot_wrap .cont02 .document_wrap.monthly .tit::after{
    content: "";
    display: block;
    width: 100%;
    height: clamp(13px,2vw,26px);
    border-radius: clamp(6.5px,2vw,13px);
    background: rgba(53, 99, 233, 0.2);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: -1;
}


.prior .bot_wrap .cont02 .document_wrap{
    width: 100%;
    margin-top: 10px;
    padding: 0 10px;
}
.prior .bot_wrap .cont02 .document_wrap ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    gap: 17px 6px;
}
.prior .bot_wrap .cont02 .document_wrap ul li{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap:6px;
    width: calc(33.33% - 6px);
}

.prior .bot_wrap .cont02 .document_wrap:not(.monthly) ul li .tit{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 8px 5px;
    height: clamp(30px, 4vw, 60vw);
    border-radius: clamp(15px, 4vw, 30px);
    border:1px solid var(--main-color);
    font-family: "nskr";
    /*font-size: clamp(14px, 2vw, 28px);*/
    line-height: 19.4px;
    letter-spacing: -0.5px;
    color: var(--main-color);
    font-size:3vw;
}

.prior .bot_wrap .cont02 .document_wrap ul li input{
    width: clamp(82px, 20vw, 164px);
    height: clamp(82px, 20vw, 164px);
    border-radius: clamp(10px, 2vw, 20px);
    background: var(--w-text) url("/assets/img/plus_ico@2x.png") no-repeat center center / 50%;
    text-indent: -9999px;
    overflow: hidden;
}
.prior .bot_wrap .cont02 .document_wrap ul li input[type=file]::file-selector-button{
    appearance: none;
    display: none;
}
.prior .bot_wrap .cont02 .document_wrap ul li .txt{
    font-family: "nskr";
    font-size: clamp(14px, 2vw, 28px);
    line-height: 19.4px;
    letter-spacing: -0.5px;
    color: var(--main-text);
}




.prior .bot_wrap .btn_wrap{
    width: 100%;
    justify-content: flex-end;
    margin-top: 11px;
}
.prior .bot_wrap .btn_wrap .btn{
    width: clamp(78px, 3vw, 156px);
}

/* payment */
/* notes */
.payment{
    background: var(--bg-color);
    padding-bottom: 20px;
}
.payment .tit_wrap .tit{
    margin: 22px 0 12px; 
    font-family: "nskr";
    font-size: clamp(20px,2vw,40px );
    line-height: 1.4;
    letter-spacing: -0.4px;
    color: var(--main-text);
}
.payment .tit_wrap .txt{
    margin: 8px 0 10px; 
    font-family: "nskr";
    font-size: clamp(14px,2vw,28px );
    line-height: 1.5;
    letter-spacing: -0.28px;
    color: var(--main-text);
}
.payment .tit_wrap .tit span{
    font-family: "nskb";
}
.payment .tit_wrap + .tit {
    font-family: "nskr";
    font-size: clamp(14px ,2vw, 28px);
    color: var(--sign-color);
    margin-bottom: 7px;
}
.in_box.four {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.in_box.four .box{
    width: calc(25% - 16px);
}
.in_box.four .line{
    width: 10px;
    height: 1px;
    flex-grow: 0;
    background: #cbd4de;
}
.in_box.two-type3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.in_box.two-type3 .tit{
    width: 100%;
}
.in_box.two-type3 .box{
    width: calc(33.33% - 20px);
}
.in_box.two-type3 .line{
    width: 1px;
    height: 29px;
    flex-grow: 0;
    margin: 0 10px ;
    transform: rotate(190deg);
    background-color: #cbd4de;
}
.payment .bot_wrap .txt_wrap{
    width: 100%;
    padding:16px 17px ;
    background: var(--main-color);
    border-radius: 10px;
    color: var(--w-text);
    font-family: 'nskr';
    font-size:  clamp(14px , 2vw, 28px);
    letter-spacing: -0.5px;
    line-height: clamp(19.4px,2vw,38.8px);
    word-break: keep-all;
}

.payment .bot_wrap .txt_wrap div{
    display: flex;
    align-items: flex-start;
    margin-top: 8px;
    flex-wrap: wrap;
    font-family: 'nskb';
    color: #fff500;
}
.payment .bot_wrap .txt_wrap div::before{
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 2.5px solid #fff500;
    margin-top: 5px;
    margin-right: 5px;
}

.payment .bot_wrap .btn_wrap{
    width: 100%;
    /*justify-content: flex-end;*/
    margin-top: 30px;
}
.payment .bot_wrap .btn_wrap .btn{
    width: clamp(78px, 3vw, 156px);
}
/* payment > touch */
.touch .top_wrap{
    background: #fff;
}
.touch .bot_wrap{
    margin-top: 15px;
}
.touch .card_wrap .top_box{ 
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.touch .card_wrap .top_box .in_box:nth-child(1){ 
    width:calc(70% - 6px) ;
    position: relative;
}
.touch .card_wrap .top_box .in_box:nth-child(2){ 
    width:calc(30% - 6px) ;
}
.touch .card_wrap .top_box .in_box:nth-child(1) div{
    display: flex;
    align-items: center;
    width: 100%;
    height: clamp(44px, 6vw, 88px);
    background: var(--w-text);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(195,212,233, 0.4);
    padding-right: 14px;
}
.touch .card_wrap .top_box .in_box:nth-child(1) div input{ 
    text-align: right;
    width: 95%;
    height: 100%;
    background:none;
    border-radius: none;
    overflow: hidden;
    border:none;
    padding: 0 10px 0 14px;
    font-family: "nskr";
    font-size: clamp(14px, 2vw, 28px);
    line-height: 1.39;
    letter-spacing: -0.28px;
    color: var(--tit-color);
}

.touch .card_wrap .top_box .in_box:nth-child(1) div .txt{ 
    font-family: "nskb";
    font-size: clamp(14px, 2vw, 28px);
    line-height: 1.5;
    letter-spacing: -0.28px;
    color: var(--main-text);
}
.touch .card_wrap .top_box .in_box:nth-child(2) select{ 
    padding-right: 26px;
    text-align: center;
    background:var(--w-text) url("/assets/img/select_arrow@2x.png") no-repeat center right 5px / 20px;
}
.touch .card_wrap .bot_box .in_box select{ 
    padding-right: 26px;
    text-align: right;
    background:var(--w-text) url("/assets/img/select_arrow@2x.png") no-repeat center right 5px / 20px;
}
.touch .card_wrap .top_box .txt_box{ 
    width:100%;
    margin-top: 8px;
    margin-bottom: 24px;
    font-family: "nskr";
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.28px;
    color: var(--sign-color);
}
.touch .card_wrap .in_box .tit{ 
    font-family: "nskb";
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.28px;
    text-align: left;
    color: var(--main-text);
    margin-bottom: 7px;
}

.touch  .edit_wrap{
    width: 1000px;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);

}
.touch .edit_wrap .btn_wrap{
    width: 100%;

}
.touch .edit_wrap .btn_wrap .btn{
    width: 50%;

}

/* click */

.touch_click{
    min-height: 100vh;
    padding-top: 22px;
}
.touch_click .tit_wrap .tit{
    margin: 0 0 22px;
}

.touch_click .bot_wrap .txt_wrap {
    width: 100%;
    padding: 16px 17px;
    background: var(--w-text);
    border-radius: 10px;
    border:1px solid var(--main-color);
    
}
.touch_click .bot_wrap .txt_wrap h3.tit{
    color: var(--main-color);
    font-family: 'nskb';
    font-size: clamp(20px , 2vw, 40px);
    letter-spacing: -0.4px;
    margin-bottom: 20px;
}
.touch_click .bot_wrap .txt_wrap .list li{
    display: flex;
    align-items:center;
    font-size: clamp(14px , 2vw, 28px);
    letter-spacing: -0.28px;
    line-height: clamp(19.4px,2vw,38.8px);
    word-break: keep-all;
}
.touch_click .bot_wrap .txt_wrap .list li:not(:first-child){
    margin-top: 8px;
}
.touch_click .bot_wrap .txt_wrap .list li .tit{
    width: 30%;
    color: var(--sign-color);
    font-family: 'nskb';
    
}
.touch_click .bot_wrap .txt_wrap .list li .txt{
    width: 70%;
    color: var(--main-text);
    font-family: 'nskr';
    
}
.touch_click .bot_wrap .btn_wrap .btn{
    width: 100%;   
}
/* payment > sms_list */
.payment.list .top_wrap{
    background: var(--w-text);
    padding-bottom: 13px;
}
.payment.list .txt_wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.payment.list .txt_wrap .tit{
    font-family: "nskb";
    font-size: clamp(18px, 2vw, 36px);
    line-height: 1.5;
    letter-spacing: -0.36px;
    color: var(--main-text);
}
.payment.list .txt_wrap .btn_wrap {
    width: 45%;
}
.payment.list .txt_wrap .btn_wrap .btn{
    width: 50%;
}
.payment.list table{
    width: 100%;
    margin-top: 12px;
    table-layout: fixed;
}
.payment.list table thead th{
    padding: 12px 10px;
    background: var(--w-text);
    font-family: "nskm";
    font-size: clamp(14px, 2vw, 28px);
    line-height: 1.39;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--main-text);
}
.payment.list table thead th:first-child{
    text-align: center;
}
.payment.list table tbody td{
    padding: 12px 10px;
    font-family: "nskr";
    font-size: clamp(14px, 2vw, 28px);
    line-height: 1.39;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--main-text);
}
.payment.list table tbody td .copy{
    text-decoration: underline;
    cursor: pointer;
}
.payment.list table tbody tr:not(:first-child){
   border-top: 1px solid #dbdbdb;
}
.payment.list table tbody td:first-child{
    text-align: center;
}
.payment.list .edit_wrap{
    display: none;
    width: 1000px;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);

}
.payment.list .edit_wrap .btn_wrap{
    width: 100%;

}
.payment.list .edit_wrap .btn_wrap .btn{
    width: 50%;

}

/* payment > touch_list */
.touch_list{
    background: #fff;
}
.touch_list .search_wrap{
    background: var(--bg-color);
    padding: 15px 0 12px;
    border-bottom: 8px solid #e7ebf3;
}
.touch_list .search_wrap .tab_list ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    background: #fff;

}
.touch_list .search_wrap .tab_list ul li{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    height: 100%;
    font-family: "nskr";
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.28px;
    text-align: center;
    color: var(--main-text);
}
.touch_list .search_wrap .tab_list ul li.on{
    background: var(--main-color);
    color: var(--w-text);
}
.touch_list .search_wrap .tab_list ul li:not(:first-child){
    border-left: 1px solid rgba(195, 212, 233, 0.4);
}
.touch_list .search_wrap .date_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 12px 0;
}
.touch_list .search_wrap .date_box input{
    width: calc(50% - 17px);
    height: 44px;
    border-radius: 10px;
    background: var(--w-text);
    border: 0;
    padding: 10px;
    text-align: center;
    font-family: "nskr";
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.28px;
    color: var(--main-text);
}
.touch_list .search_wrap .date_box .line{
    width: 13px;
    height: 2px;
    background: #b3bfcd;
}
.touch_list .search_wrap .btn_wrap{
    width: 100%;
}
.touch_list .search_wrap .btn_wrap .btn{
    width: 100%;
}
.touch_list .list_wrap{
    width: 100%;
}
.touch_list .list_wrap .list{
    display: grid;
    grid-template-areas:
                        "card cancel state pay"
                        "card cancel state pay";
    justify-content: space-between;
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid #dbdbdb;
}
.touch_list .list_wrap .list .card{
    display: flex;
    flex-direction: column;
    grid-area: card;
    font-family: "nskr";
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.28px;
    color: var(--main-text);
}
.touch_list .list_wrap .list .card .time{
    
    font-size: 12px;
    color: var(--sign-color);
}
.touch_list .list_wrap .list .state{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-area: state;
    font-family: "nskr";
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.5px;
    text-align: right;
    color: var(--main-text);
}
.touch_list .list_wrap .list .cancel{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-area: cancel;
    font-family: "nskr";
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.5px;
    text-align: right;
    color: var(--main-text);
}
.touch_list .list_wrap .list .pay{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    grid-area: pay;
    font-family: "nskb";
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    text-align: right;
    color: var(--main-text);
}
.touch_list .list_wrap .list .pay .name{
    font-family: "nskr";
    font-size: 12px;
    color: var(--sign-color);
}

.touch_list .bot_wrap .btn_wrap .btn{
    width: 100%;
}
/* detail */
.touch_detail .top_wrap{
    background: #fff;
}
.touch_detail .detail_wrap{
    width: 100%;
    padding: 16px;
    border-radius: 10px;
    background: #fff;
    margin-top: 20px;
    box-shadow: 0 2px 4px 0 rgba(52, 58, 72, 0.15);
}

.touch_detail .detail_wrap .detail{
    padding-bottom: 16px;
}
.touch_detail .detail_wrap .detail:not(:first-child){
    padding-top: 16px;
    border-top: 1px solid #dbdbdb;
}

.touch_detail .detail_wrap .detail .detail_title{
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    padding-bottom: 5px;
}
.touch_detail .detail_wrap .detail .row{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.touch_detail .detail_wrap .detail .row:not(:last-child){
   margin-bottom:5px ;
}
.touch_detail .detail_wrap .detail .row .tit{
    font-family: "nskr";
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--sign-color);
}
.touch_detail .detail_wrap .detail .row .txt{
    font-family: "nskr";
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: -0.5px;
    text-align: right;
    color: var(--main-text);
}
.touch_detail .detail_wrap .detail .row.point .tit{
    font-family: "nskb";
    color: var(--main-text);

}
.touch_detail .detail_wrap .detail .row.point .txt{
    font-family: "nskb";
    font-size: 16px;
    color: var(--main-color);
}
.touch_detail .detail_wrap .detail .btn{
    width: 100% !important;
}
.touch_detail .bot_wrap .btn_wrap{
    width: 100%;
    margin-top: 17px;
}
.touch_detail .bot_wrap .btn_wrap .btn{
    width: 50%;
}



/* check */
.check{
    background: var(--bg-color);
}
.check.sales{
    min-height: 100vh;
}
.sales .sales_list{
    width: 100%;
    margin-bottom: 24px;
}
.sales .sales_list li{
    width: 100%;
}
.sales .sales_list li:not(:first-child){
    margin-top: 8px;
}
.sales .sales_list li a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 14px 23px;
    border-radius: clamp(10px ,2vw, 20px);
    background: var(--main-color);
    font-family: "nskb";
    font-size: clamp(18px, 2vw, 36px);
    line-height: 1.39;
    letter-spacing: -0.5px;
    color: var(--w-text);
}
.sales .sales_list li a::after{
    content: "";
    display: block;
    width: clamp(20px, 2vw, 40px);
    height: clamp(20px, 2vw, 40px);
    background: url("/assets/img/w_arrow@2x.png") no-repeat center center / 90%;
}
.sales .tit_wrap .txt{
    font-family: "nskr";
    font-size: clamp(14px, 2vw, 28px);
    line-height: 1.39;
    letter-spacing: -0.5px;
    color: var(--main-text);
    word-break: keep-all;
}
.sales .tit_wrap .point{
    display: flex;
    align-items: flex-start;
    margin-top: 10px;

}
.sales .tit_wrap .point::before{
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 2.5px solid var(--main-color);
    margin-top: 5px;
    margin-right: 5px;
}
.sales .tit_wrap .point .txt{
    font-family: "nskb";
    color: var(--main-color);
}
/* list */
.sales_list .top_wrap {
    background: var(--w-text);
}
.sales_list .top_wrap .title_wrap{
    justify-content: space-between;
}
.sales_list .top_wrap .title_wrap div:first-child{
    display: flex;
    align-items: center;
}
.sales_list .day_wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    padding-bottom: 20px;
}
.sales_list .day_wrap .btns{
    width: 40px;
    height: 40px;
    border: 1px solid var(--main-color);
    border-radius: 20px;

}
.sales_list .day_wrap .prev_btn{
    background:var(--w-text) url("/assets/img/prev_ico@2x.png") no-repeat center center / 50%;
}
.sales_list .day_wrap .next_btn{
    background:var(--w-text) url("/assets/img/next_ico@2x.png") no-repeat center center / 50%;
}
.sales_list .day_wrap .day_box{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 197px;
    height: 40px;
    border-radius: 20px;
    background: var(--main-color);
}
.sales_list .day_wrap .day_box .tit{
    font-family: "nskr";
    font-size: 15px;
    line-height: 1.39;
    letter-spacing: -0.5px;
    color: var(--w-text);
}
.sales_list .saleslist_wrap .inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}
.sales_list .bot_wrap .saleslist_wrap:first-child{
    border-bottom:8px solid #e7ebf3;
}
.sales_list .saleslist_wrap .tit{
    font-family: "nskb";
    font-size: clamp(20px,2vw, 40px);
    line-height: 1.5;
    letter-spacing: -0.4px;
    color: var(--main-text);
    position: relative;
    z-index: 1;
}
.sales_list .saleslist_wrap .tit::after{
    content: "";
    display: block;
    width: 100%;
    height: clamp(13px,2vw,26px);
    border-radius: clamp(6.5px,2vw,13px);
    background: rgba(0, 156, 244, 0.2);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: -1;
}
.sales_list .saleslist_wrap .case_box{
    display: flex;
    align-items: center;
}
.sales_list .saleslist_wrap .case_box .num{
    display: flex;
    align-items: center;
    font-family: "nskb";
    font-size: 20px;
    line-height: 1.42;
    letter-spacing: -0.5px;
    color:var(--main-text);
}
.sales_list .saleslist_wrap .case_box .num.price{
    color: var(--main-color);
}

.sales_list .saleslist_wrap .case_box .num + .num::before{
    content: "";
    display: block;
    width: 1px;
    height: 19px;
    background: rgba(102, 120, 146, 0.3);
    margin: 0 15px;
}
.sales_list .bot_fix{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    border-radius:20px 20px 0 0 ;
    padding: 6px 0 26px;
    box-shadow: 0 -2px 10px 0 rgba(60, 71, 81, 0.1);
    background-color: var(--w-text);
}
.sales_list .bot_fix .btn_wrap{
   width: 100%;
}
.sales_list .bot_fix .btn_wrap .btn{
   width: 50%;
}


/* notice */
.notice{
    background: var(--bg-color);
    min-height: 100vh;
}
.notice .top_wrap{
    background: #fff;
}
.notice_wrap .list{

    padding: 12px 0;
    border-bottom: 1px solid #dbdbdb;
}

.que{
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: "nskr";
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: -0.5px;
    color: var(--main-text);
}
.que .arrow{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: solid 1px rgba(195, 212, 233, 0.4);
    background: #fff url("/assets/img/select_arrow.png") no-repeat center center;
    margin-right: 8px;
}
.que.on .arrow{
    rotate: 180deg;
}
.anw {
    display: none;
    margin-left: 35px;
    margin-top: 10px;
    overflow: hidden;
    font-family: "nskr";
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--main-text);
}



@media all and (max-width : 1000px) {
    
    .sales_list  .bot_fix{
        width: 100%;
    }
    .payment.list .edit_wrap{
        width: 100%;
    }
    .touch  .edit_wrap{
        width: 100%;
    }
}