.w1{
    width: 10%;
    transition: 0.3s;
}
.w2{
    width: 20%;
    transition: 0.3s;
}

.w25{
    width: 25%;
    transition: 0.3s;
}
.w3{
    width: 30%;
    transition: 0.3s;
}
.w4{
    width: 36%;
    transition: 0.3s;
}
.w5{
    width: 50%;
    transition: 0.3s;
}
.w6{
    width: 64%;
    transition: 0.3s;
}
.w7{
    width: 70%;
    transition: 0.3s;
}
.w8{
    width: 80%;
    transition: 0.3s;
}

.w9{
    width: 90%;
    transition: 0.3s;
}

.w10{
    width: 100%;
    transition: 0.3s;
}

.w500{
    width: 500px;
}

.w1000{
    width: 1100px;
}
.fitter{
    display: none;
}

.fitterWrap{
    display: none;
}

.group_att_mo{
    display: none;
}

.attend_att_mo{
    display: none;
}

.atttpopup{
    display: none;
}

.groupattmopop{
    display: none;
}
.br767{
    display: none;
}
/* 스크롤바 설정*/
::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}
/* 스크롤바 막대 설정*/
::-webkit-scrollbar-thumb{
    height: 10%;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;  
}
/* 스크롤바 뒷 배경 설정*/
::-webkit-scrollbar-track{
    background-color: rgba(0, 0, 0, 0.06);
}

@font-face {
    font-family: 'ONE-Mobile-Title';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/***통계 차트**/

.chart.bb path, .chart.bb line {
    fill: none;
    stroke: #e5e5ec;
}

.bb-legend-item line.bb-legend-item-tile {
    stroke-linecap: round;
    stroke-width: 8px;
    transform: translate(7px, 1px);
    stroke-dasharray: 1 20;
}

.chart .bb-grid line {
    stroke: #f1f1f1;
}

.chart.bb text, .chart.bb .bb-button {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-font-smoothing: antialiased;
    user-select: none;
    fill: #666 !important;
    font-size: 11px;
}

.bb-axis-y text, .bb-axis-y2 text {
    fill: #767676 !important;
}

.chart.bb-tooltip-name-data3:last-child td{
    border-radius: 0 0 12px 12px;
}

.chart .bb-tooltip td>span, .chart .bb-tooltip td>svg {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border: none;
    border-radius: 3px;
    vertical-align: middle;
}

.chart .bb-tooltip th {
    font-size: 13px;
    padding: 2px 8px;
    text-align: left;
    border-bottom: solid 2px #e5e5ec;
    background-color: #306AFF;
    color: #4D3C00;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
}

.chart .bb-tooltip {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    empty-cells: show;
    border: 1px solid #e5e5ec;
    background-color: #fff;
    text-align: left;
    font-size: 11px;

    -webkit-font-smoothing: antialiased;
    white-space: nowrap;
}

/***datepicker****/

.ui-widget.ui-widget-content {
    border: 0px solid #c5c5c5;
    box-shadow: 0 0px 8px 4px rgba(0, 0, 0, 0.06);
    width: 250px;
    height: 300px;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 12px;
    z-index: 21 !important;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 32px;
    line-height: 32px;
    text-align: center;
    font-size: 1.4rem;
}

.ui-datepicker .ui-datepicker-title >span{
    font-size: 1.4rem;
    line-height: 20px;
    font-weight: 600;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 6px;
}


.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: 0;
}

.ui-widget-header {
    border: 0px solid #dddddd;
    background: #fff;
    color: #111;
    font-weight: bold;
}

.ui-widget-header .ui-icon {
    background-image: url('../img/indico02.png') !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    display: block;
    position: absolute;
    left: 0;
    margin-left: 0;
    top: 0;
    margin-top: 0;
}

.ui-icon-circle-triangle-w{
    transform: rotate(-180deg);
}
.ui-icon {
    width: 24px;
    height: 24px;
}


.ui-datepicker-prev, .ui-datepicker-next{
    cursor: pointer;
}

.ui-datepicker-prev:hover, .ui-datepicker-next:hover{
	border: 1px solid #f1f1f5;
	background: #f1f1f5;
	font-weight: normal;
	color: #2b2b2b;
    border-radius: 50%;
}

.ui-datepicker th {
    padding: 0;
    text-align: center;
    font-weight: 300;
    border: 0;
    font-size: 1.4rem;
    line-height: 20px;
    color: #505050;
}

.ui-datepicker tr th:first-child >span{
    display: block;
    color: #DC0000;
}

.ui-datepicker tr th:last-child >span{
    display: block;
    color: #4f7bf5;
}


.ui-datepicker table {
    width: 100%;
    font-size: 1.4rem;
    border-collapse: collapse;
    margin: 12px auto 0;
}



.ui-state-default, .ui-widget-content .ui-state-default{
    border: 0px solid #c5c5c5;
    background: #fff;
    color: #111;
    line-height: 26px;
    text-align: center;
    font-weight: 300;
    transition: 0.3s;
}

ui-state-default:hover{
    background: #f1f1f5;
}

.ui-state-default:hover{
    border: 0px solid #c5c5c5;
    background: #f1f1f5;
    border-radius: 50%;
}


.ui-datepicker-trigger{
    display: none;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1.2em;
    margin: 1px 4px;
    border: 0;
    width: 62px;
    text-align: center;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-title select:focus{
    border: 0;
}


/* login */
/***login***/

.logintit{
    font-size: 1.4rem;
    line-height: 20px;
}

.errortxt{
    font-size: 1.4rem;
    line-height: 20px;
    color: #dc0000;
}
#login{
    width: 100%;
    display: flex;
    align-items: center;
}

.lflogin{
    width: 50%;
    display: inline-block;
    vertical-align: middle;
    height: 100vh;
    background-color: #f7f7fb;
}

.login_tit{
    font-size: 4.8rem;
    line-height: 62px;
    font-weight: 800;
    text-align: center;
    margin-top: 150px;
}

.login_mtit{
    font-size: 2.4rem;
    line-height: 32px;
    margin-top: 12px;
    text-align: center;
    color: #767676;
}
.login_img{
    width: 90%;
    margin: 80px auto 0;
}

.login_img img{
    border-radius: 6px;
}

.pth_col{
    stroke: #fff;
}

.pth_stw{
    stroke-width: 2px;
}
.rflogin{
    width: 50%;
    height: 100vh;
    display: inline-block;
    vertical-align: middle;
}


.fflogin_wrap{
    width: 300px;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.logo{
    display: block;
    width: 150px;
    margin: 0 auto;
}

.loginInputB{
    margin: 50px auto 0;
}

.loginInputB >li{
    margin-top: 10px;
}

.loginInputB >li:first-child{
    margin-top: 0px;
}

.logintxt{
    display: block;
    font-size: 1.4rem;
    line-height: 20px;
    color: #505050;
    letter-spacing: 0;
    font-weight: 400;
}

.logininptB{
    display: block;
    width: 100%;
    margin-top: 6px;
    border-radius: 5px;
    outline: none;
    border: 1px solid #e5e5ec;
    height: 40px;
    box-sizing: border-box;
    font-size: 1.4rem;
    line-height: 20px;
    text-indent: 10px;
}

.idsaveB{
    margin-top: 20px;

}

.idsaveB >input{
    display: none;
}

.idsaveB >label{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    color: #767676;
    line-height: 20px;
    cursor: pointer;
}

.idsaveB >label::before{
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 18px;
    height: 18px;
    background-image: url('../img/checkoff.png');
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 8px;
}

.idsaveB >input:checked + label::before{
    background-image: url('../img/checkon.png');
}


.loginBtn{
    margin-top: 10px;
    width: 100%;
    font-size: 1.8rem;
    line-height: 52px;
    background-color: #306AFF;
    display: block;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    color: #4D3C00;
    transition: 0.3s;
}


.loginBtn.disabled{
    background-color: #e5e5ec;
    color: #999;
    cursor: default;
}

.loginBtn.disabled:hover{
    background-color: #e5e5ec;
}

.loginBtn:hover{
    background-color: #2258E3;
}
.findlogin{
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.findlogin >li{
    margin-left: 20px;
}

.findlogin >li:first-child{
    margin-left: 0;
}

.findlogin >li:last-child{
    padding-left: 20px;
    border-left: 1px solid #e5e5ec;
}


.findlogin_txt{
    display: block;
    font-size: 1.4rem;
    color: #999;
    line-height: 20px;
    transition: 0.3s;
}

.findlogin_txt:hover{
    color: #505050;
}

.join_login{
    margin-top: 50px;
}

.joinus_txt{
    text-align: center;
    font-size: 1.4rem;
    color: #999;
    line-height: 20px;
    display: block;
}

.joinus_btn{
    display: block;
    width: 100%;
    line-height: 52px;
    box-sizing: border-box;
    font-size: 1.8rem;
    font-weight: 600;
    text-align: center;
    background-color: #306AFF;
    color: #FFFFFF;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 10px;
    transition: 0.3s;
}

.joinus_btn:hover{
    background-color: #2258E3;
    color: #fff;
}
/***아이디찾기*****/

#findH{
    width: 100%;
    margin: 0 auto;
}

.wrap_findH{
    width: 1200px;
    margin: 0 auto;
    padding: 16px 0;
    box-sizing: border-box;
}

.logo_H{
    display: inline-block;
    vertical-align: middle;
    width: 120px;
}

.wrap_findH::after{
    display: block;
    content: "";
    clear: both;
}
.util{
    width: 160px;
    float: right;
    display: inline-flex;
}

.util >li{
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}

.util >li >a{
    display: block;
    font-size: 1.6rem;
    line-height: 42px;
}




#findB{
    width: 400px;
    z-index: 1;
    box-sizing: border-box;
    margin: 150px auto;
}

.findtit{
    font-size: 3rem;
    line-height: 42px;
    text-align: center;
    font-weight: 600;
}

.find_mtit{
    margin-top: 8px;
    font-size: 1.6rem;
    line-height: 24px;
    text-align: center;
    color: #505050;
}

.findputList{
    width: 100%;
    margin: 50px auto 0;
}

.findputList >li{
    position: relative;
    margin-top: 24px;
}

.findputList >li:first-child{
    margin-top: 0;
}



.findP{
    display: block;
    width: 100%;
    outline: none;
    border: 1px solid #e5e5ec;
    height: 46px;
    padding: 0 16px;
    box-sizing: border-box;
    font-size: 1.4rem;
    line-height: 20px;
    border-radius: 6px;
}

.phone{
    display: block;
    vertical-align: middle;
    width: 100%;
    outline: none;
    border: 1px solid #e5e5ec;
    height: 46px;
    padding: 0 16px;
    box-sizing: border-box;
    font-size: 1.4rem;
    line-height: 20px;
    border-radius: 6px;
}

.phone::placeholder{
    color: #ccc;
}

.certibtn{
    display: block;
    width: 100%;
    border-radius: 6px;
    line-height: 46px;
    background-color: rgba(21, 153, 72, 0.1);
    color: #306AFF;
    text-align: center;
    font-weight: 600;
    font-size: 1.4rem;
    cursor: pointer;
    transition: 0.3s;
    margin: 12px auto 0;
}

.documnetUpload{
    width: 150px;
    line-height: 48px;
    background-color: #fef3d2;
    text-align: center;
    font-size: 1.6rem;
    display: block;
    color: #4D3C00;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
    margin-left: auto;
}

.documnetUpload:hover{
    background-color: #306AFF;
}
.certibtn:hover{
    background-color: rgba(21, 153, 72, 0.3);
}
.find_okbtn{
    cursor: pointer;
    display: block;
    margin: 50px auto 0;
    line-height: 52px;
    text-align: center;
    background-color: #306AFF;
    font-weight: 600;
    font-size: 1.8rem;
    border-radius: 6px;
    transition: 0.3s;
}

.find_okbtn:hover{
    background-color: #2258E3;
}

.findidtxt{
    display: block;
    font-size: 1.6rem;
    line-height: 24px;
    text-align: center;
}

.findid_B{
    display: inline-block;
    vertical-align: top;
    font-size: 1.6rem;
    margin: 0 4px;
    line-height: 24px;
    font-weight: 600;
}

/*본인인증 완료 **/
.self_tit{
    font-size: 2rem;
    line-height: 32px;
    text-align: center;
    font-weight: 600;
}


/**회원가입****/

#join_01{
    width: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 12px;

}

.wrap_join_01{
    width: 320px;
    margin: 0 auto;
    padding: 50px 20px;
    box-sizing: border-box;
    background-color: #fff;
}

.join_tit{
    font-size: 3rem;
    text-align: center;
    line-height: 42px;
    font-weight: 600;
}

.join_mtit{
    font-size: 1.6rem;
    text-align: center;
    line-height: 24px;
    margin: 16px auto 0;
    color: #505050;
}


#join_02{
    width: 100%;
    margin: 40px auto 0;

}


#join_02.join_2{
    margin: 150px auto;
}
.wrap_join_02{
    width: 400px;
    margin: 0px auto 0;
    border-radius: 12px;
    padding: 80px 20px 80px;
    box-sizing: border-box;
}

.joinPList{
    width: 100%;
    margin: 50px auto 0;
}

.joinPList >li{
    margin-top: 16px;
}

.joinPList >li:first-child{
    margin-top: 0;
}

.jointit{
    font-size: 1.4rem;
    line-height: 20px;

}

.joinPList >li >input{
    width: 100%;
    height: 44px;
    font-size: 1.4rem;
    outline: none;
    border: 1px solid #e5e5ec;
    margin: 4px auto 0;
    padding: 0 16px;
    box-sizing: border-box;
    border-radius: 6px;
}



.businessNbb{
    display: flex;
    align-items: center;
}

.checknmbox{
    display: flex;
    align-items: center;
}

.joinPList input::placeholder{
    color: #ccc;
}

.timesetb{
    display: flex;
    align-items: center;
    position: relative;
}

.certiBox{
    display: none;
}

.businessNbb input{
    width: calc(100% - 86px);
    display: inline-block;
    vertical-align: middle;
    height: 44px;
    font-size: 1.4rem;
    outline: none;
    border: 1px solid #e5e5ec;
    margin: 4px auto 0;
    padding: 0 16px;
    box-sizing: border-box;
    border-radius: 6px;
    letter-spacing: -0.35px;
}

.checknmbox input{
    width: calc(100% - 120px);
    display: inline-block;
    vertical-align: middle;
    height: 44px;
    font-size: 1.4rem;
    outline: none;
    border: 1px solid #e5e5ec;
    margin: 4px auto 0;
    padding: 0 16px;
    box-sizing: border-box;
    border-radius: 6px;
    letter-spacing: -0.35px;
}

.timesetb input{
    width: calc(100% - 86px);
    display: inline-block;
    vertical-align: middle;
    height: 44px;
    font-size: 1.4rem;
    outline: none;
    border: 1px solid #e5e5ec;
    margin: 4px auto 0;
    padding: 0 16px;
    box-sizing: border-box;
    border-radius: 6px;
    letter-spacing: -0.35px;
}


.checknmbox .nm_btn{
    width: 120px;
}


.time_set{
    position: absolute;
    top: 50%;
    right: 114px;
    font-size: 1.4rem;
    line-height: 44px;
    transform: translateY(-50%);
    letter-spacing: 0;
    font-weight: 500;
    color: #306AFF;
    margin-top: 1px;
}


.businessNbb input::placeholder{
    color: #ccc;
}
.joinPList >li >input.inactive_color{
    background-color: #f7f7fb;
}

.basetxt .nm_p{
    background-color: #f1f1f5;
}

.nm_btn{
    display: inline-block;
    vertical-align: middle;
    width: 86px;
    line-height: 44px;
    font-size: 1.6rem;
    background-color: rgba(21, 153, 72, 0.1);
    color: #306AFF;
    font-weight: 600;
    margin-left: 12px;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 4px;
    transition: 0.3s;
    letter-spacing: -0.4px;
}

.nm_btn:hover{
    background-color: rgba(21, 153, 72, 0.3);
}

.nm_btn.disabled{
    background-color: #e5e5ec;
    color: #999;
    cursor: default;
}

.agreeBtn.disabled{
    background-color: #e5e5ec;
    color: #999;
    cursor: default;
}

.nm_btn.disabled:hover{
    background-color: #e5e5ec;
    color: #999;
}


.checkagree{
    width: 100%;
    margin: 60px auto 0;
}

.checkagree >li{
    margin-top: 24px;

}

.checkagree >li:first-child{
    margin-top: 0;
}

.checkagree >li >input{
    display: none;
}

.checkagree >li >label{
    cursor: pointer;
}

.checkagree >li .allcheck + label{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    cursor: pointer;
}

.checkagree >li .allcheck + label::before{
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 20px;
    height: 20px;
    background-image: url('../img/checkoff.png');
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 8px;
}

.checkagree >li .allcheck:checked + label::before{
    background-image: url('../img/checkon.png');
}

.checkagree >li .other_check + label .checkTxt::before{
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 20px;
    height: 20px;
    background-image: url('../img/checkoff.png');
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 8px;
}

.checkagree >li .other_check:checked + label .checkTxt::before{
    background-image: url('../img/checkon.png');
}


.checkagree >li.dropDownOn .agree_arrow{
    transform: rotate(315deg);
    margin-top: 12px;
}




.checkTxt{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
}

.agree_arrow{
    float: right;
    width: 8px;
    height: 8px;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    transform: rotate(45deg);
    margin-top: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.agreedocument{
    width: 100%;
    height: 200px;
    margin: 16px auto 0;
    border: 1px solid #e5e5ec;
    padding: 20px 16px;
    box-sizing: border-box;
    display: none;

}

.agreeBtn{
    display: block;
    width: 100%;
    margin: 32px auto 0;
    text-align: center;
    background-color: #306AFF;
    line-height: 52px;
    border-radius: 6px;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
}


.joincomplet{
    width: 100%;
    margin: 80px auto 0;
}

.wrap_joincomplet{
    width: 400px;
    margin: 0 auto ;
}

.joingcompletimg >img{
    border-radius: 6px;
}

.joincomplet_tit{
    font-size: 2.4rem;
    line-height: 32px;
    margin: 50px auto 0;
    text-align: center;
    font-weight: 600;
}

.joingbtn{
    display: block;
    width: 100%;
    margin: 50px auto 0;
    text-align: center;
    background-color: #306AFF;
    line-height: 52px;
    border-radius: 6px;
    font-size: 1.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.joingbtn:hover{
    background-color: #2258E3;
}

.email_B{
    display: flex;
    align-items: center;
}

.email_B .nm_p{
    width: calc(100% - 98px - 33px);
    display: inline-block;
    vertical-align: middle;
    height: 44px;
    font-size: 1.4rem;
    outline: none;
    border: 1px solid #e5e5ec;
    margin: 4px auto 0;
    padding: 0 16px;
    box-sizing: border-box;
    border-radius: 6px;
    letter-spacing: -0.35px;
}

.gBang{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    letter-spacing: -0.35px;
    margin: 0 10px;
}

.mailSelect{
    outline: none;
    border: 1px solid #e5e5ec;
    border-radius: 6px;
    padding: 12px 0;
    height: 44px;
    box-sizing: border-box;
    font-size: 1.4rem;
    letter-spacing: -0.35px;
    width: 98px;
}

.mail_put{
    outline: none;
    border: 1px solid #e5e5ec;
    border-radius: 6px;
    padding: 12px;
    height: 44px;
    box-sizing: border-box;
    font-size: 1.4rem;
    letter-spacing: -0.35px;
    width: 98px;
    margin-right: 8px;
}

/***클래스 추가****/

.bg_body{
    background-color: #f1f1f5;
}

#header{
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100vh;
    background-color: #fff; 
    box-shadow: 4px 0 4px 0 rgba(0, 0, 0, 0.06);
    transition: 0.3s;
}

.moheader{
    display: none;
}
.head01{
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100vh;
    background-color: #fff;
    box-shadow: 4px 0 4px 0 rgba(0, 0, 0, 0.06);
    transition: 0.3s;
}


.head02{
    position: fixed;
    top: 0;
    left: 0;
    width: 42px;
    height: 100vh;
    background-color: transparent;
    box-shadow: none;
    transition: 0.3s;
}


#header.none{
    width: 42px;
    box-shadow: none;
    background-color: transparent;
}

.logo_main.none{
    display: none;
}

.pointB.none{
    display: none;
}
.nav.none{
    display: none;
}
.headunder.none{
    display: none;
}


.wrap_header{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.headtoggleB{
    position: fixed;
    top: 32px;
    left: 249px;
    width: 32px;
    height: 32px;
    background-color: #fff;
    z-index: 6;
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 0 ;
    box-sizing: border-box;
    transition: 0.3s;
}

.headtoggleB.none{
    top: 16px;
    left: 10px;
    transform: scaleX(-1);
    background-color: #306AFF;
}

.headtoggleB.none:hover{
    background-color: #2258E3;
}

.headtoggleB.none .hedtoggle{
    stroke: #4D3C00;
}
.headtoggleB:hover{
    background-color: #f1f1f5;
}

.headtoggleB:hover .hedtoggle{
    stroke: #111;
}

.headtogglebtn{
    display: block;
    width: 24px;
    margin: 0 auto;
}

.hedtoggle{
    stroke: #999;
    stroke-width: 2px;
    transition: 0.3s;
}
.headTop{
    width: 100%;
    display: flex;
}

.logo_main{
    width: 150px;
}

.pointB{
    width: 100%;
    margin: 24px auto 0;
    background-color: #f1f1f5;
    border-radius: 12px;
    padding: 16px;
    box-sizing: border-box;
}

.pointTop{
    display: flex;
    align-items: center;
    width: 100%;
    flex-direction: column;
}


.pointtit{
    display: inline-flex;
    vertical-align: middle;
    width: 90px;
    align-items: center;
}

.pointico{
    display: inline-block;
    vertical-align: middle;
    width: 24px;
}

.pointtitTxt{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 24px - 4px);
    margin-left: 4px;
    font-size: 1.4rem;
    line-height: 20px;

}


.point{
    display: block;
    vertical-align: middle;
    width:100%;
    text-align: center;
    font-size: 2.4rem;
    line-height: 32px;
    font-family: 'GmarketSansMedium';
    font-weight: 800;
    letter-spacing: 0;
    margin-top: 12px;
}

.pointUnder{
    width: 100%;
    margin: 0 auto;

}

.addPoint{
    display: block;
    width: 100%;
    border: 0;
    outline: none;
    background-color: transparent;
    line-height: 46px;
    font-weight: 600;
    text-align: center;
    font-size: 1.6rem;
    color: #4D3C00;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
    margin: 16px auto 0;
    background-color: #306AFF;
    border-radius: 12px;
}

.addPoint:hover{
    background-color: #2258E3;
}


.nav{
    width: 100%;
    margin-top: 32px;
    min-height: 420px;
    max-height: 420px;
    overflow-y: auto;
}

.nav >li{
}

.nav >li.navOn .navtit{
    font-weight: 600;
    color: #306AFF;
}

.nav >li.navOn .remoepath{
    stroke: #306AFF;
}

.deamenuB{
    display: flex;
    padding: 13.5px 0;
    box-sizing: border-box;
    align-items: center;
    cursor: pointer;
}

.navico{
    display: inline-block;
    vertical-align: middle;
    width: 24px;

}

.remoepath{
    stroke: #505050;
    stroke-width: 1px;
}

.storeico .remoepath{
    stroke-width: 2.5px;
}

.remoepath.remoepath3{
    stroke-width: 1.8px;
}

.remoepath2{
    fill: #111;
}
.navtit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    margin-left: 8px;
}
.headabbox{
    width: 100%;
    display: none;
    
}

.somenu{
    width: 100%;
    background-color: #f7f7fb;
    border-radius: 6px;
}

.somenu >li{
    transition: 0.3s;
}
.somenu >li:last-child{
    border-radius: 0 0px 6px 6px;
}

.somenu >li:first-child{
    border-radius: 6px 6px 0 0;
}



.somenu >li.somenuOn .somenutxt{
    background-color: #ECF1FF;
    color: #306AFF;
    font-weight: 600;
}

.somenutxt{
    display: block;
    font-size: 1.4rem;
    line-height: 32px;
    padding-left: 28px;
    box-sizing: border-box;
    cursor: pointer;
}

.somenu >li:hover{
    background-color: #e5e5ec;
}

.headunder{
    width: 300px;
    position: fixed;
    bottom: 20px;
    left: 0;
    padding: 0 20px;
    box-sizing: border-box;
    cursor: pointer;
}

.bookmark{
    width: 100%;

}

.logoutBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    background-color: #ECF1FF;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
    font-weight: 600;
}

.logoutBtn:hover{
    background-color: #2258E3;
}

.logoutBtn svg{
    display: inline-block;
    width: 16px;
}

.logoutBtn:hover .logoutPt{
    stroke: #fff;
}

.logoutPt{
    stroke: #222;
    stroke-width: 3px;
    transition: 0.3s;
}
.logoutBtn span{
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.35px;
    margin-left: 12px;
    transition: 0.3s;
}

.logoutBtn:hover >span{
    color: #fff;
}
.remote{
    display: inline-block;
    vertical-align: middle;
    width: 96px;
    padding: 9px 0;
    transition: 0.3s;
    border-radius: 24px;
    cursor: pointer;
}

.remoteico{
    display: block;
    width: 60px;
    margin: 0 auto;
}

.remotetxt{
    display: block;
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
    margin-top: 4px;
}

.remote:hover{
    background-color: #f7f7fb;
}

.selunder{
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 24px;
}

.selectCompany{
    width: 210px;
    margin: 0 auto;
}

.sel_test{
    display: none;
}

.selcutm{
    width: 210px;
    position: relative;
}

.selab{
    display: none;
    width: 100%;
    overflow-y: auto;
    margin: 0 auto;
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: #fff;
    border-radius: 12px;
    transition: 0.3s;
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.06);
}

.selList{
    display: block;
    max-height: 136px;
}

/* 스크롤바 설정*/
.selab::-webkit-scrollbar{
    width: 10px;
}
/* 스크롤바 막대 설정*/
.selab::-webkit-scrollbar-thumb{
    height: 10%;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;  
}
/* 스크롤바 뒷 배경 설정*/
.selab::-webkit-scrollbar-track{
    background-color: rgba(0, 0, 0, 0.06);
}

.selList >li{

}


.selList >li:first-child{
    border-radius: 12px 12px 0 0;
}

.selList >li:hover >button{
    background-color: #f7f7fb;
}
.selList >li >button{
    display: block;
    outline: none;
    cursor: pointer;
    background-color: #fff;
    line-height: 44px;
    border: 0;
    width: 100%;
    padding-left: 20px;
    box-sizing: border-box;
    text-align: left;
    transition: 0.3s;
}


.playbtn{
    width: 100%;
    position: relative;
}

.playbtn >button{
    width: 100%;
    background-color: #fff;
    border: 1px solid #e5e5ec;
    font-size: 1.4rem;
    text-align: left;
    padding: 0 16px;
    box-sizing: border-box;
    cursor: pointer;
    line-height: 52px;
    border-radius: 12px;
}



.btnsldeBtn{
    width: 24px;
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
    transition: 0.3s;
}

.btnsldeBtn.SldOn{
    transform: rotate(180deg);
    margin-top: -12px;
}

.class_addbtn{
    display: flex;
    width: 100%;
    align-items: center;
    background-color: rgba(250, 201, 61,0.2);
    padding: 0 16px;
    box-sizing: border-box;
}

.addbtntit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 52px;
    font-weight: 600;
    width: calc(100% - 16px);
}

.addclass_btn_ico{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
}

.setting{
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    position: relative;
    margin-left: 10px;
    border-radius: 6px;
    transition: 0.3s;
    padding: 5px 0;
    box-sizing: border-box;
}

.setico{
    display: block;
    width: 30px;
    cursor: pointer;
    transition: 0.3s;
    margin: 0 auto;

}

.setting:hover{
    background-color: #f7f7fb;
}

.setting_B{
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 120px;
    display: none;
    z-index: 2;
    background-color: #fff;
    box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.06);
    border-radius: 12px;

}


.settingList{
    width: 100%;
}

.settingList >li{

}


.settit{
    display: block;
    width: 100%;
    line-height: 52px;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    padding: 0 16px;
    box-sizing: border-box;
}

.hedset:hover{
    background-color: #f7f7fb;
}

.logout{
    color: #DC0000;
}
.logout:hover{
    background-color: rgba(220, 0, 0,0.06);
    border-radius: 0 0 12px 12px;
}
/****/
.section{
    width: calc(100% - 300px);
    margin-left: 300px;
}

.section2{
    width: 100%;
}

.wrap_section{
    width: 100%;
    padding: 16px 50px 80px;
    box-sizing: border-box;
    position: relative;
}

.document_box{
    width: 1200px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 12px;
    margin: 0 auto;
}

.document_txtbox{
    margin: 80px auto 0;
}

.addclass_tit{
    font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: -0.8px;
}


.addclass_mtit{
    font-size: 1.8rem;
    letter-spacing: -0.45px;
    margin-top: 12px;
    color: #505050;
}
.mtit{
    font-size: 1.6rem;
    line-height: 24px;
    margin-top: 16px;
    text-align: center;
    color: #505050;
}

.comdoWrap{
    width: 300px;
    margin: 24px auto 0;
    position: relative;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.06);
    border-radius: 6px;
}

.comdocuList{
    width: 100%;
    margin: 80px auto 0;
    box-sizing: border-box;
    display: flex;
    border-bottom: 1px solid #e5e5ec;
}

.comdocuList >li{
    display: inline-block;
    vertical-align: middle;
    margin-left: 16px;
}

.comdocuList >li:first-child{
    margin-left: 0;
}

.comdocutit{
    display: block;
    font-size: 1.8rem;
    line-height: 48px;
    text-align: center;
    color: #999;
    cursor: pointer;
    font-weight: 600;
    padding: 0 12px;
    box-sizing: border-box;
    border-bottom: 2px solid transparent;
}

.comdocuList >li.comdoOn .comdocutit{
    border-bottom: 2px solid #306AFF;
    color: #306AFF;
    transition: 0.3s;
}

.comdoborder{
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    width: 43%;
    height: 36px;
    background-color: #306AFF;
    z-index: 2;
    border-radius: 6px;
    transition: 0.3s;

}

.marlef_20{
    left: 20px;
}

.marlef_50{
    left: 50%;
}

.documnetList{
    width: 100%;
    margin: 50px auto 150px;
}

.dol50{
    width: 100%;
}

.dolRi{
    margin-top: 80px;
}

.dolfList{
    box-sizing: border-box;
    margin: 24px auto 0;

}

.dolfList >li{
    display: inline-block;
    vertical-align: middle;
    margin-left: 12px;
    background-color: #f7f7fb;
    padding: 40px 20px;
    box-sizing: border-box;
    border-radius: 16px;
    width: 32%;
    margin-top: 16px;
}


.dolfList >li:nth-child(3n+1){
    margin-left: 0;
}
.dolfList >li:first-child{
    margin-left: 0;
}


.dolico{
    display: block;
    width: 60px;
    margin: 0 auto;
}

.doltit{
    font-size: 1.8rem;
    text-align: center;
    font-weight: 600;
    letter-spacing: -0.45px;
    margin-top: 24px;
}

.docutit{
    font-size: 2.4rem;
    line-height: 32px;
    font-weight: 500;
    width: 100%;
    letter-spacing: -0.6px;
}

.docubtnWrap{
    display: flex;
    align-items: center;

}


.documnetList02{
    display: none;
}

.prebtn{
    display: block;
    width: 300px;
    margin: 50px auto 150px;
    font-size: 1.6rem;
    line-height: 52px;
    text-align: center;
    background-color: #306AFF;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: -0.4px;
}


.addclass_tit2{
    font-size: 2.4rem;
    text-align: center;
    font-weight: 600;
}



.addclassPutB{
    width: 400px;
    margin: 50px auto 0;
}

.addclassPutList{}
.addclassPutList >li{
    margin-top: 24px;
    position: relative;
}

.addclassPutList >li:first-child{
    margin-top: 0;
}

.addclasstit{
    font-size: 1.4rem;
    line-height: 20px;
}

.addclassP{
    outline: none;
    width: 100%;
    height: 42px;
    margin-top: 8px;
    border-radius: 6px;
    border: 0;
    background-color: #fff;
    text-indent: 16px;
    font-size: 1.4rem;
    border: 1px solid #e5e5ec;
    letter-spacing: 0;
}

.addclassP::placeholder{
    color: #ccc;
    letter-spacing: -0.35px;
}

.addreespB{
    display: flex;
    margin-top: 4px;
}

.adre{
    width: calc(100% - 92px);
    margin-right: 12px;
    border-radius: 6px;
    height: 42px;
    background-color: #fff;
    border: 1px solid #e5e5ec;
    text-indent: 16px;
    font-size: 1.4rem;
    outline: none;
}

.seabtn{
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    line-height: 42px;
    background-color: rgba(21, 153, 72, 0.1);
    border-radius: 6px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    color: #306AFF;
}


.seabtn:hover{
    background-color: rgba(21, 153, 72, 0.3);
}
.addclassPutList >li .addreespB + .addclassP{
    margin-top: 12px;
}

.addclassbtnList{
    width: 100%;
    margin: 50px auto 0;
    display: flex;
}

.addclassbtnList >li:first-child{
    width: 40%;
}

.addclassbtnList >li:last-child{
    width: 60%;
    margin-left: 16px;
}

.addclass_btn{
    display: block;
    font-size: 1.6rem;
    line-height: 52px;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}

.addclass_cancbtn{
    background-color: #e5e5ec;
    color: #505050;
}

.addclass_cancbtn:hover{
    background-color: #ccc;
}
.addclass_addbtn{
    background-color: #306AFF;
    color: #4D3C00;
}

.addclass_addbtn:hover{
    background-color: #2258E3;
}

.setList{
    margin-top: 12px;
}


.phonemmB{
    display: flex;
    align-items: center;
}

.phonemmB .beptit{
    width: 70%;
}

.beptit.changeColor{
    color: #306AFF;
    font-weight: 600;
}

.chgphonenm{
    display: inline-block;
    vertical-align: middle;
    width: 86px;
    font-size: 1.4rem;
    line-height: 32px;
    background-color: #306AFF;
    border-radius: 6px;
    text-align: center;
    color: #4D3C00;
    font-weight: 600;
    transition: 0.3s;
    margin-left: auto;
    margin-right: 12px;
    cursor: pointer;
}

.chgphonenm:hover{
    background-color: #2258E3;
}
.setList >li{
    margin-top: 24px;
    position: relative;
}

.setList >li:first-child{
    margin-top: 0;
}

.bep{
    margin-top: 8px;
    background-color: #e5e5ec;
    border-radius: 6px;

}

.beptit{
    display: block;
    line-height: 42px;
    width: 100%;

    padding-left: 16px;
    font-size: 1.4rem;
    box-sizing: border-box;
}

.firstPb_set{
    position: relative;
}

.setmtit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.8rem;
    line-height: 24px;
    font-weight: 600;
}


.ToleaveBt{
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 32px;
}
.memout{
    margin-left: auto;
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    letter-spacing: -0.4px;
    cursor: pointer;
}

.memout:hover{
    color: #306AFF;
}

.qn{
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    line-height: 18px;
    border-radius: 50%;
    border: 1px solid #e5e5ec;
    font-size: 1.4rem;
    text-align: center;
    margin-left: 8px;
    cursor: pointer;
    background-color: #fff;
}

.tooltip{
    position: absolute;
    top: 130%;
    left: 15%;
    z-index: 2;
    transition: 0.3s;
    display: none;
}

.tooltip_txt{
    font-size: 1.4rem;
    line-height: 20px;
    background-color: #306AFF;
    padding: 8px 12px;
    color: #fff;
    box-sizing: border-box;
    border-radius: 12px;
}

.qn:hover + .tooltip{
    display: block;
}

.set01{
    width: 100%;
}

.addclassPutB.addclassPutB02{
    margin: 60px auto 0;
}

.checkmonth{
    margin-top: 24px;
}


.checkmonth >li{
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    width: 31%;
    margin-top: 20px;
}

.checkmonth >li:nth-child(3n+1){
    margin-left: 0;
}

.checkmonth >li:nth-child(n+1):nth-child(-n+3){
    margin-top: 0;
}


.checkmonth >li.checkmonthOn .monthB{
    border: 1px solid #306AFF;
}


.monthB{
    display: flex;
    border: 1px solid #e5e5ec;
    border-radius: 6px;
    align-items: center;
    width: 100%;
    height: 52px;
    padding: 0 12px;
    box-sizing: border-box;
    cursor: pointer;
    background-color: #fff;
}

.monthimg{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    cursor: pointer;
}

.monthtxt{
    display: block;
    width: calc(100% - 20px);
    vertical-align: middle;
    margin-left: 8px;
    font-size: 1.6rem;
    cursor: pointer;
}




/**청구서 목록*******/

.subptitB{
    width: 100%;
}

.subPtit{
    display: inline-block;
    vertical-align: middle;
    font-size: 2.4rem;
    line-height: 32px;
    font-weight: 600;
}

.breadCrumb_Box{
    display: inline-block;
    vertical-align: middle;
    margin-left: 24px;
}

.home{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
}

.arrow_breadcrumb{
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    width: 20px;
}

.breadCrumbtit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    margin-left: 4px;
}

.search_wrap{
    width: 100%;
    margin: 24px auto 0;
    display: flex;
}

.search_wrap::after{
    display: block;
    content: "";
    clear: both;
}
.select_none{
    display: none;
}

.selcutm >button{
    display: block;
}

.searchB{
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}


.search_wrap .searchB01{
    margin-left: 0;
}
.searchB01{
    width: 100px;
}

.searchB02{
    width: 120px;
}

.companysearch{
    width: 180px;
}
.searchB03{
    width: 120px;
}

.searchB04{
    width: 120px;
}

.searchB05{
    width: 120px;
}
.search_custom{
    width: 100%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    position: relative;
}


.searchB.selb_h .selSearch_list{
    height: 150px;
    overflow-y: auto;
    z-index: 8;
}
.search_custom >button{
    display: block;
    width: 100%;
    outline: none;
    background-color: #fff;
    border: 0;
    line-height: 42px;
    font-size: 1.4rem;
    text-align: left;
    padding-left: 20px;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.3s;

}
.selSearch_list{
    width: 100%;
    position: absolute;
    top: 110%;
    left: 0;
    z-index: 3;
    border-radius: 12px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    display: none;
}


.selSearch_list >li{}

.selSearch_list >li button{
    display: block;
    width: 100%;
    outline: none;
    background-color: #fff;
    border: 0;
    line-height: 44px;
    font-size: 1.4rem;
    text-align: left;
    padding-left: 20px;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.3s;
}

.selSearch_list >li:first-child{
    border-radius: 12px 12px 0 0;
}
.selSearch_list >li:first-child button{
    border-radius: 12px 12px 0 0;
}

.selSearch_list >li:hover button{
    background-color: #e5e5ec;
}

.selSearch_list >li:first-child:hover button{
    border-radius: 12px 12px 0 0;
}

.selSearch_list >li:last-child button{
    border-radius: 0 0 12px 12px;
}
.selSearch_list >li:last-child:hover button{
    border-radius: 0 0 12px 12px;
}

.arrow_search{
    position: absolute;
    top: 50%;
    right: 16px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    transition: 0.3s;
}

.arrow_search.RateOn{
    transform: translateY(-50%)rotate(180deg);
}


.datePick{
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    width: 260px;
    padding: 7px 16px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    align-items: center;
}

.datepickList{
    display: flex;
    width: 100%;
    align-items: center;
}

.datepickList >li{
    display: inline-block;
    vertical-align: middle;
    width: 45%;
    position: relative;
}
.datepickList >li:nth-child(2){
    width: 10%;
}
.datebtn{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
}

.datep{
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    border: 0;
    outline: none;
    height: 28px;
    font-size: 1.4rem;
    padding-left: 24px;
    box-sizing: border-box;
    cursor: pointer;
    letter-spacing: 0;
    position: relative;
    z-index: 2;
    background-color: transparent;
}


.wav{
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px;
    font-size: 1.6rem;
    line-height: 24px;
}


.serachwrap_b{
    display: inline-block;
    vertical-align: middle;
    width: 250px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    background-color: #fff;
    position: relative;
    margin-left: 8px;
    border-radius: 6px;
}

.serachwrap_b >input{
    display: block;
    width: 100%;
    height: 42px;
    outline: none;
    border: 0;
    padding: 0 45px 0 16px;
    box-sizing: border-box;
    border-radius: 6px;
}

.serachwrap_b >input::placeholder{
    color: #ccc;
}

.serachico{
    position: absolute;
    top: 50%;
    right: 16px;
    width: 24px;
    transform: translateY(-50%);
    cursor: pointer;
}

.serachicoapproval{
    position: absolute;
    top: 50%;
    right: 16px;
    width: 24px;
    transform: translateY(-50%);
    cursor: pointer;
}

.listviewB{
    float: right;
    margin-left: auto;
}

.list_wrap{
    width: 100%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    padding: 16px 0 24px;
    background-color: #fff;
    margin: 24px auto 0;
    border-radius: 12px;
}

.listbtnTop{
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    position: relative;
}

.listbtnTop::after{
    display: block;
    content: '';
    clear: both;
}

.searchresults{
    display: inline-block;
    vertical-align: top;
    font-size: 1.6rem;
    line-height: 42px;
}

.resultBold{
    display: inline-block;
    vertical-align: top;
    margin-left: 4px;
    font-size: 1.6rem;
    line-height: 42px;
    font-weight: 600;
    color: #306AFF;
}

.listbtn_right{
    float: right;
    
}

.xlB{
    display: inline-block;
    vertical-align: middle;
    width: 42px;
    height: 42px;
    background-color: rgba(21, 153, 72,0);
    border-radius: 6px;
    padding: 6px 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.3s;
}


.exl{
    display: block;
    width: 30px;
    margin: 0 auto;
}

.excel_path{
    fill: #111;
    stroke-width: 1.5px;
}
.xlB:hover{
    background-color: #ECF1FF;
}

.xlB:hover .excel_path{
    fill: #306AFF;
}

.botcl{
    display: inline-flex;
    vertical-align: middle;
    background-color: rgba(255, 199, 2,0);
    border-radius: 6px;
    width: 100px;
    align-items: center;
    height: 42px;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.3s;
    justify-content: center;
    position: relative;
}

.botcl:hover{
    background-color: #306AFF;
}

.botcl:hover .addtxt{
    color: #4D3C00;
    font-weight: 600;
}

.botcl:hover .bookcancel_path{
    stroke: #4D3C00;
}

.all_add{
    margin-left: 20px;
    position: relative;
}

.addico{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
}

.bookcancel_path{
    stroke: #111;
    stroke-width: 1.5px;
}

.plu{
    stroke: #4D3C00;
    stroke-width: 2px;
}


.addtxt{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    margin-left: 0px;
    font-weight: 600;
    color: white;
}

.add_claim{
    display: inline-flex;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    width: 110px;
    height: 42px;
    background-color: #fff;
    background-color: #306AFF;
    border-radius: 6px;
    margin-left: 16px;
    cursor: pointer;
    transition: 0.3s;
}

.studgroupad{
    display: inline-flex;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    width: 100px;
    background-color: transparent;
    border-radius: 6px;
    height: 42px;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.3s;
}

.studgroupad svg{
    display: inline-block;
    vertical-align: middle;
    width: 12px;
}


.studgroupad:hover{
    background-color: #306AFF;
}


.groupch{
    display: inline-flex;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    width: 100px;
    background-color: transparent;
    border-radius: 6px;
    height: 42px;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.3s;
}

.groupch svg{
    display: inline-block;
    vertical-align: middle;
    width: 22px;
}

.groupch:hover{
    background-color: #306AFF;
}

.add_claim:hover{
    background-color: #2258E3;
}


.exlall_add{
    width: 120px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    background-color: #fff;
    border: 1px solid #e5e5ec;
    box-shadow: 0 0px 8px 4px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    display: none;
}

.exlall_add >li{
    transition: 0.3s;
}

.exlall_add >li:first-child{
    border-radius: 6px 6px 0 0;
}

.exlall_add >li:last-child{
    border-radius: 0px 0px 6px 6px;
}

.exlall_add >li:hover{
    background-color: #e5e5ec;
}

#fileadd_exl{
    display: none;
}
.exlall_add_btn{
    display: block;
    width: 100%;
    font-size: 1.4rem;
    line-height: 46px;
    text-align: center;
    cursor: pointer;
}
.listtable_wrap{
    width: 100%;
    min-height: 61vh;
    max-height: 62vh;
    overflow-y: auto;
    margin-top: 16px;
    box-sizing: border-box;
}

.listTable{
    width: 100%;
}

.listTable thead tr{
    background-color: #f1f1f5;
}


.listTable thead tr th{
    height: 36px;
    font-size: 1.4rem;
    color: #505050;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
}

.studico{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    margin-right: 8px;
}

.listTable tbody tr{
    border-bottom: 1px solid #e5e5ec;
}

.listTable tbody tr td{
    height: 42px;
    font-size: 1.2rem;
    text-align: center;
    vertical-align: middle;
    padding: 10px 4px;
    box-sizing: border-box;
    letter-spacing: 0;
    line-height: 18px;
}

.listTable tbody tr td.week_class{
    text-align: right;
}


.temporarybtn{
    display: block;
    width: 90%;
    margin: 0 auto;
    border-radius: 6px;
    border: 1px solid #306AFF;
    line-height: 32px;
    color: #306AFF;
    cursor: pointer;
    transition: 0.3s;
}

.temporarybtncan{
    display: block;
    width: 90%;
    margin: 0 auto;
    border-radius: 6px;
    border: 1px solid red;
    line-height: 32px;
    color: red;
    cursor: pointer;
    transition: 0.3s;
}

.storeAp .temporarybtn{
    font-size: 1.4rem;
    width: 150px;
    margin: 0 0 0 auto;
    text-align: center;
    line-height: 42px;
    font-weight: 600;
}

.storeAp .temporarybtn label{
    color: #306AFF;
    cursor: pointer;
    transition: 0.3s;
}

.storeAp .temporarybtn:hover{
    background-color: #306AFF;
}

.storeAp .temporarybtn:hover label{
    color: #fff;
}

.imgfilediv {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border: 1px solid #e5e5ec;
    background-color: #fff;
}

.temporarybtn.disabled{
    background-color: #e5e5ec;
    border: 1px solid #e5e5ec;
    color: #999;
    cursor: default;
}
.list_p{
    display: block;
    width: 90%;
    height: 32px;
    background-color: #f7f7fb;
    outline: none;
    border: 1px solid #e5e5ec;
    border-radius: 6px;
    padding-left: 16px;
    box-sizing: border-box;
    margin: 0 auto;
}

.check_list{
    display: none;
}

.check_list + label{
    display: block;
    margin: 0 auto;
    cursor: pointer;
}

.check_list + label::before{
    display: block;
    content: "";
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-image: url('../img/checkoff.png');
    background-size: cover;
    margin: 0 auto;
}

.check_list:checked + label::before{
    background-image: url('../img/checkon.png');
}


.noticeindi.indicateB{
    background-color: #fff;
    border-radius: 0 0 12px 12px;
    margin: 0 auto;
    padding: 24px 0;
    box-sizing: border-box;
    border-top: 1px solid #e5e5ec;
}
.indicateB{
    width: 100%;
    margin-top: 16px;
    padding-bottom: 16px;
}
.indicate{
    display: flex;
    align-items: center;
    justify-content: center;
}

.indicate >li{
    display: inline-block;
    vertical-align: middle;
    margin-left: 12px;
    width: 32px;
    height: 32px;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    transition: 0.3s;
    cursor: pointer;
}

.indicate >li:hover{
    background-color: #f7f7fb;
}

.indicate >li:first-child{
    margin-left: 0;
}

.prebtnB{
    padding: 5px 0;
    box-sizing: border-box;
}

.indic{
    display: block;
    width: 24px;
    margin: 0 auto;
}

.indictxt{
    display: block;
    text-align: center;
    line-height: 32px;
    font-size: 1.6rem;
    font-weight: 600;
    color: #999;
}

.indicate >li.indicateOn{
    background-color: #ECF1FF;
}

.indicate >li.indicateOn .indictxt{
    color: #306AFF;
}

.checked_popup{

}

.bimagchcp{
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    box-shadow: 0 0px 8px 4px rgba(0, 0, 0, 0.16);
    padding: 16px 32px;
    box-sizing: border-box;
    width: 70%;
    border-radius: 300px;
    display: none;
    margin-left: 120px;
}

.bimaw100{
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    box-shadow: 0 0px 8px 4px rgba(0, 0, 0, 0.16);
    padding: 16px 32px;
    box-sizing: border-box;
    width: 80%;
    border-radius: 300px;
    display: none;
}

.checked_popup::after{
    display: block;
    content: "";
    clear: both;
}
.checkedBtn{
    display: inline-flex;
    vertical-align: middle;
    border-radius: 30px;
    padding: 9.5px 16px;
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid #e5e5ec;
    margin-left: 8px;
    justify-content: center;
    transition: 0.3s;
}

.checkedBtn01{
    width: 110px;
}

.checkedBtn02{
    width: 90px;
}

.checkedBtn:first-child{
    margin-left: 0;
}
.checkedBtn_txt{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    margin-left: 8px;
    font-weight: 600;
}

.checkedBtn_ico{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
}


.checkedBtn:hover{
    background-color: #f7f7fb;
}

.checkrd_right{
    float: right;
}

.sendB{
    display: inline-block;
    vertical-align: middle;

}

.sendB_top{
    font-size: 1.4rem;
}

.flyico{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-left: 4px;
}

.sendnm{
    width: 100%;
    text-align: right;
    font-size: 1.8rem;
    line-height: 24px;
    font-weight: 600;
}

.sendbtnB{
    display: inline-flex;
    vertical-align: middle;
    margin-left: 24px;
    justify-content: center;
    background-color: #306AFF;
    border-radius: 30px;
    padding: 10.5px 16px;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.3s;
}

.sendbtnB:hover{
    background-color: #2258E3;
}

.sendico{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
}

.sendico_txt{
    font-size: 1.4rem;
    line-height: 21px;
    font-weight: 600;
    margin-left: 8px;
}

.closeSet{
    display: inline-block;
    vertical-align: middle;
    width: 42px;
    height: 42px;
    margin-left: 8px;
    background-color: #fff;
    border: 1px solid #e5e5ec;
    border-radius: 50%;
    padding: 8px 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.3s;
}

.closesetico{
    display: block;
    width: 24px;
    margin: 0 auto;
}

.closeSet:hover{
    background-color: #f7f7fb;
}

.phonenm_c{
    cursor: pointer;
}

.modal_bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10;
    display: none;
}

.modal_bg.bgz{
    z-index: 17;
}

.modal_bg.bgz2{
    z-index: 19;
}


.modal_phone{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 12;
    padding: 24px 20px 32px;
    box-sizing: border-box;
    border-radius: 12px;
    width: 350px;
    display: none;
}

.warning_txt_modal{
    font-size: 2rem;
    line-height: 28px;
    font-weight: 600;
    text-align: center;
    margin: 24px auto 0;
}

.wntxt_m{
    display: block;
    font-size: 1.6rem;
    line-height: 24px;
    font-weight: 400;
    text-align: center;
    margin: 0px auto 8px;
    color: #505050;
}

.del_modal .wntxt_m{
    color: #bc0000;
}

.warning_btn{
    width: 80%;
    display: flex;
    margin: 32px auto 0;
}

.warning_btn >li{
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    margin-left: 16px;
}

.warning_btn >li:first-child{
    margin-left: 0;
}

.wbtn{
    display: block;
    width: 100%;
    font-size: 1.6rem;
    line-height: 52px;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
    transition: 0.3s;
    cursor: pointer;
}

.send_modal .wbtn{
    margin: 32px auto 0;
}

.cancom{
    background-color: #e5e5ec;
    color: #999;
}

.cancom:hover{
    background-color: #adadad;
    color: #111;
}


.ok{
    background-color: #FFC702;
    color: #4D3C00;
}

.ok:hover{
    background-color: #2258E3;
}



.modal_addbill{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #f1f1f5;
    border-radius: 12px;
    z-index: 12;
    display: none;
}

.modal_addbill .sendB{
    display: inline-flex;
    align-items: center;
    width: 250px;
    margin-left: 16px;
}

.modal_addbill .sendnm{
    text-align: left;
}

.modal_addbill .sendB_top{
    display: inline-block;
    vertical-align: middle;
    width: 70%;
}

.modal_addbill .modal_top{
    display: flex;
    align-items: center;
}

.modal_addbill .com_mo_c{
    margin-left: auto;
}

.modal_top{
    width: 100%;
    position: relative;
    padding: 12px 20px;
    box-sizing: border-box;
}

.modal_top::after{
    display: block;
    content: "";
    clear: both;
}

.modal_tit{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 2.4rem;
    font-weight: 600;
}

.billWrite .modal_tit{
    position: relative;
    top: auto;
    left: auto;
    transform: translate(0);
}
.mo_c{
    float: right;
    width: 42px;
    height: 42px;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    padding: 10px 0;
    box-sizing: border-box;
    transition: 0.3s;
    cursor: pointer;
    margin-left: auto;
}


.mo_c:hover{
    background-color: #f1f1f5;
}


.mocloico{
    width: 24px;
    display: block;
    margin: 0 auto;
}

.bill_add_wrap{
    display: flex;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 0px auto 0;
}

.style_bill{
    overflow: hidden;
}


.leftBox{
    display: inline-block;
    vertical-align: middle;
    background-color: #fff;
    box-shadow: 0px 4px 4px 0 rgba(0, 0, 0, 0.06);
    padding: 0 0 32px;
    box-sizing: border-box;
    border-radius: 12px;
}

.bring_top .billlftop{
    padding: 12px 20px;
    box-sizing: border-box;
}

.bring_top .mo_c02{
    margin-left: auto;
}

.billlftop{
    width: 100%;
    padding: 12px 0;
    box-sizing: border-box;
    display: flex;
}

.billlftop >*{
    margin-right: 16px;
}

.billlftop >*:last-child{
    margin-right: 0;
}


.billtit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.8rem;
    font-weight: 600;
    box-sizing: border-box;
}

.leftsendPerson{
    width: 90%;
    margin: 16px auto 0;
}

.billPersoninfoList >li{
    margin-top: 12px;
}

.billPersoninfoList >li:first-child{
    margin-top: 0;
}

.sendtitmar{
    margin-top: 32px;
}

.leftBox .billtit{
    margin: 24px auto 0;
    width: 90%;
    display: block;
    padding: 12px 0 8px;
    box-sizing: border-box;
}

.bill_input{
    width: 100%;
    margin: 16px auto 0;
    box-sizing: border-box;
}

.bill_input >li{
    position: relative;
    margin-top: 24px;
}

.bill_input >li:first-child{
    margin-top: 0;
}
.bill_tit{
    font-size: 1.6rem;
    line-height: 24px;
    color: #505050;
}

.billP{
    display: block;
    height: 42px;
    border: 1px solid #e5e5ec;
    box-sizing: border-box;
    background-color: #f7f7fb;
    margin: 4px auto 0;
    border-radius: 6px;
    width: 100%;
    outline: none;
    padding-left: 16px;
}

.bill_txtP{
    display: block;
    border: 1px solid #e5e5ec;
    box-sizing: border-box;
    background-color: #f7f7fb;
    margin: 4px auto 0;
    border-radius: 6px;
    width: 100%;
    outline: none;
    padding: 16px;
    position: relative;
    font-size: 1.4rem;
    line-height: 20px;
}

.hei_01{
    height: 90px;
}

.hei_02{
    height: 150px;
}

.bill_count{
    position: absolute;
    bottom: -24px;
    right: 16px;
    font-size: 1.2rem;
    line-height: 18px;
    letter-spacing: 0;
    color: #306AFF;
    font-weight: 600;
    backdrop-filter: blur(20px);
}

.dateclmB{
    display: flex;
    align-items: center;

}

.dateclmB .bookPB{
    width: 50%;
}

.bookingList{
    width: 100%;
    margin: 24px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}


.bookingList >li{
    margin-top: 24px;
}

.bookingList >li:first-child{
    margin-top: 24px;
}

.insbeforeList .bookPB{
    width: 91%;
    height: 42px;

}

.bookPB .bookP{
    border: 1px solid #e5e5ec;
    border-radius: 6px;
    height: 44px;
    padding-left: 0;
}

.bookPB{
    display: inline-block;
    vertical-align: middle;
    width: 60%;
    position: relative;
    margin: 4px auto 0;
    background-color: #f7f7fb;
}

.bookP{
    display: block;
    width: 100%;
    height: 42px;
    outline: none;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    box-sizing: border-box;
    text-indent: 52px;
    z-index: 2;
    position: relative;
    cursor: pointer;

}

.searchB06.add_bill{
    display: inline-block;
    vertical-align: middle;
    width: 34%;
    margin-left: 20px;
}

.searchB07.add_bill{
    display: inline-block;
    vertical-align: middle;
    width: 34%;
    margin-left: 20px;
}



.bookdateico{
    position: absolute;
    top: 50%;
    left: 16px;
    width: 24px;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1;
    display: block;
}

.searchB06.add_bill .search_custom{
    box-shadow: none;
}

.searchB06.add_bill .search_custom >button{
    background-color: #f7f7fb;
    border: 1px solid #e5e5ec;
}

.searchB06.add_bill .search_custom .selSearch_list06{
    height: 150px;
    overflow-y: auto;
}

.searchB07.add_bill .search_custom{
    box-shadow: none;
}

.searchB07.add_bill .search_custom >button{
    background-color: #f7f7fb;
    border: 1px solid #e5e5ec;
}

.searchB07.add_bill .search_custom .selSearch_list07{
    height: 120px;
    overflow-y: auto;
}

.savbooking{
    width: 100%;
    display: block;
    text-align: center;
    line-height: 48px;
    font-size: 1.6rem;
    font-weight: 600;
    color: #4D3C00;
    background-color: #eaf8ef;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
    color: #306AFF;
    box-sizing: border-box;
    letter-spacing: -0.4px;
}

.savbooking:hover{
    background-color: #149947;
    color: #fff;
}


.bill_ri{
    display: block;
    vertical-align: middle;

    background-color: #fff;
    box-shadow: 0px 4px 4px 0 rgba(0, 0, 0, 0.06);
    padding: 0 0 32px;
    box-sizing: border-box;
    margin-left: 20px;
    border-radius: 12px;
    overflow-y: auto;
}

.bill_ri.none{
    display: none;
}

.sendList{
    width: 100%;
    padding: 16px 20px;
    box-sizing: border-box;
}

.sendlist_top{
    width: 100%;
    display: flex;
    align-items: center;
}

.sendnmList{
    display: inline-flex;
    align-items: center;
}

.sendtit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: -0.35px;
}

.personnm{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: -0.4px;
    margin-left: 12px;
}

.billallbtn{
    margin-left: auto;
    font-size: 1.6rem;
    line-height: 24px;
    font-weight: 500;
    color: #306AFF;
    display: inline-block;
    cursor: pointer;
    letter-spacing: -0.4px;
}

.choiceStudent .billallbtn{
    margin-left: auto;
}
.sendListTableWrap{
    border: 1px solid #e5e5ec;
    position: relative;
    margin-top: 12px;
    max-height: 512px;
    overflow-y: auto;
}
.sendnone{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    display: none;
}
.sendnone .sendico{
    display: block;
    width: 40px;
    margin: 0 auto;
}

.sendtit_nonetit{
    display: block;
    font-size: 1.8rem;
    line-height: 26px;
    color: #767676;
    text-align: center;
    margin-top: 12px;
    letter-spacing: -0.45px;
}

.choiceStudent{}

.billri_top{
    width: 100%;
    padding: 16px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.billri_top::after{
    display: block;
    content: "";
    clear: both;
}

.choiceStudent .searchB{
    margin-left: 0;
}

.searchB08.bill_add_sund .search_custom .selbtn08{
    width: 120px;
}

.searchB08.bill_add_sund .search_custom .selSearch_list08{
    height: 150px;
    overflow-y: auto;
}


.billri_top .serachwrap_b{
    width: 60%;
}

.plus_billadd{
    display: inline-block;
    vertical-align: middle;
    margin-left: auto;
    width: 42px;
    height: 42px;
    background-color: #306AFF;
    transition: 0.3s;
    border-radius: 50%;
    cursor: pointer;
    padding: 11px 0px;
    box-sizing: border-box;
    color: #FFFFFF;

}


.pbill_ico{
    display: block;
    width: 20px;
    margin: 0 auto;
}

.plus_billadd:hover{
    background-color: #2258E3;
}

.billriList{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 12px auto 0;
    max-height: 189px;
    min-height: 189px;
    overflow-y: auto;
}
.bi{
    stroke: #999;
    transition: 0.3s;
}

.bi2{
    stroke-width: 3px;
}

.plus_billperson{
    display: block;
    width: 32px;
    height: 32px;
    background-color: #f7f7fb;
    margin: 0 auto;
    border-radius: 50%;
    cursor: pointer;
    padding: 4px 0;
    box-sizing: border-box;
    transition: 0.3s;
}


.plus_billperson:hover{
    background-color: #306AFF;
}

.plus_billperson:hover .bi{
    stroke: #4D3C00;
}

.clsettime{
    display: block;
    width: 32px;
    height: 32px;
    background-color: #f7f7fb;
    margin: 0 auto;
    border-radius: 50%;
    cursor: pointer;
    padding: 4px 0;
    box-sizing: border-box;
    transition: 0.3s;
    margin-left: 12px;
}

.clsettime:hover{
    background-color: #ffefef;
}

.clsettime:hover .bi{
    stroke: #dc0000;
}

.clsettime svg{
    width: 24px;
    display: block;
    margin: 0 auto;
}
.plus_billperson svg{
    width: 24px;
    display: block;
    margin: 0 auto;
}


.bill_ri_table{
    width: 100%;
    border: 1px solid #e5e5ec;
    box-sizing: border-box;

}

.bill_ri_table thead tr{
    background-color: #f7f7fb;
}

.bill_ri_table thead tr th{
    height: 42px;
    font-size: 1.4rem;
    vertical-align: middle;
    color: #505050;
    font-weight: 600;
}

.bill_ri_table tbody tr td{
    height: 42px;
    vertical-align: middle;
    border-bottom: 1px solid #e5e5ec;
    text-align: center;
    font-size: 1.4rem;
    line-height: 20px;
}

.bill_ri_table tbody tr:last-child{
    border-bottom: 0;
}

.deletico{
    display: block;
    width: 32px;
    height: 32px;
    background-color: #f7f7fb;
    margin: 0 auto;
    border-radius: 50%;
    cursor: pointer;
    padding: 4px 0;
    box-sizing: border-box;
    transition: 0.3s;
}

.deletico >svg{
    width: 24px;
}

.st0{
    fill:none;
    stroke:#999;
    transition: 0.3s;
}
.st1{
    fill:none;
    stroke:#999;
    stroke-linecap:round;
    transition: 0.3s;
}

.deletico:hover >svg path{
    stroke: #bc0000;
}
.deletico:hover{
    background-color: rgba(188, 0, 0,0.1);
}

.addbill_p{
    display: block;
    background-color: #f7f7fb;
    height: 32px;
    margin: 0 auto;
    width: 90%;
    margin: 0 auto;
    border: 1px solid #e5e5ec;
    padding: 0 16px;
    box-sizing: border-box;
    outline: none;
    border-radius: 6px;
    font-size: 1.4rem;
}

.billaddptr{
    display: none;
}

.modal_bring{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 18;
    background-color: #fff;
    width: 800px;
    padding: 0 0 32px 0;
    border-radius: 12px;
    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.06);
    display: none;
}

.mo_c02{
    display: inline-block;
    width: 42px;
    height: 42px;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    padding: 10px 0;
    box-sizing: border-box;
    transition: 0.3s;
    cursor: pointer;
}



.mo_c02:hover{
    background-color: #f1f1f5;
}

.bringWrap{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    height: 300px;
    overflow-y: auto;
}

.bringWrap .bill_ri_table tr{
    cursor: pointer;
}

.listtable_wrap .bill_ri_table tr{
    cursor: pointer;
}


.bringWrap .bill_ri_table tr.tbbg{
    background-color: #ECF1FF;
}


.listtable_wrap .bill_ri_table tr.tbbg{
    background-color: #ECF1FF;
}

.fix_hd{
    position: sticky;
    position: -webkit-sticky;
    top: -1px;
    left: 0;
    z-index: 2;
}

.choice_btn{
    display: block;
    width: 180px;
    margin: 32px auto 0;
    font-size: 1.6rem;
    font-weight: 600;
    background-color: #306AFF;
    text-align: center;
    border-radius: 6px;
    line-height: 52px;
    cursor: pointer;
    color: white;
}



.rec_del ,.already_del ,.del_modal ,.modal_paystop ,.send_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 12;
    padding: 24px 20px 32px;
    box-sizing: border-box;
    border-radius: 12px;
    width: 350px;
    display: none;
}

.bring_del{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 20;
    padding: 24px 20px 32px;
    box-sizing: border-box;
    border-radius: 12px;
    width: 350px;
    display: none;
}

.bootcal_modal ,.bootcalall_modal, .save_modal ,.group_del_pop{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 12;
    padding: 24px 20px 32px;
    box-sizing: border-box;
    border-radius: 12px;
    width: 350px;
    display: none;
}

.send_count{
    display: inline-block;
    vertical-align: top;
    font-size: 2rem;
    line-height: 28px;
    font-weight: 600;
    color: #306AFF;
    margin: 0 4px;
}

.money_bill{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 10;
    padding: 0 0px 32px;
    box-sizing: border-box;
    border-radius: 12px;
    width: 500px;
    display: none;
}

.moneybillTab{
    width: 60%;
    margin: 12px auto 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    background-color: #f7f7fb;
    border-radius: 300px;
    position: relative;
    border: 1px solid #e5e5ec;
    padding: 0 16px;
}

.moneybillTab >li{
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    margin-left: 20px;
    position: relative;
    z-index: 12;
}


.moneybillTab >li:first-child{
    margin-left: 0;
}

.moneybilltxt{
    display: block;
    width: 100%;
    font-size: 1.6rem;
    text-align: center;
    line-height: 46px;
    cursor: pointer;
    color: #999;
    font-weight: 600;
}

.montanr{
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 46%;
    height: 36px;
    z-index: 11;
    background-color: #306AFF;
    border-radius: 300px;
    transition: 0.3s;
}

.moneybillTab >li.montabon .moneybilltxt{
    color: #4D3C00;
}

.moneybillList{
    width: 100%;
    margin: 24px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}

.moneybillList >li{
    margin-top: 24px;
}

.moneybillList >li:first-child{
    margin-top: 0;
}

.monbitit{
    font-size: 1.6rem;
    line-height: 24px;
    color: #505050;
}

.mbillp{
    display: block;
    width: 100%;
    outline: none;
    border: 1px solid #e5e5ec;
    height: 42px;
    border-radius: 6px;
    background-color: #f7f7fb;
    padding-left: 16px;
    font-size: 1.4rem;
    margin: 4px auto 0;
    box-sizing: border-box;
}

.mbillp::placeholder{
    color: #ccc;
}

.momb{
    position: relative;
}

.momb label{
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    font-size: 1.4rem;
}
.mobit_mony{
    width: 100%;
    box-sizing: border-box;
    margin: 4px auto 0;

}


.mobit_mony .search_custom >button {
    background-color: #f7f7fb;
    border: 1px solid #e5e5ec;
    line-height: 42px;
    font-size: 1.4rem;
    text-align: left;
    padding-left: 20px;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.3s;
}

.mobit_mony .search_custom {
    width: 100%;
    box-shadow: none;
    position: relative;
    border-radius: 6px;
}

.result_monb{
    font-size: 1.4rem;
    line-height: 20px;
    width: 100%;
    background-color: #f7f7fb;
    border: 1px solid #e5e5ec;
    border-radius: 6px;
    min-height: 100px;
    overflow-y: auto;
}
.mobilsvebtn{
    display: block;
    width: 150px;
    margin: 32px auto 0;
    text-align: center;
    font-size: 1.6rem;
    line-height: 52px;
    background-color: #306AFF;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.moneybilltab02{
    display: none;
}



.mament_01 .selSearch_list01{
    height: 150px;
    overflow-y: auto;
}

.bootcanList{
    width: 120px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    background-color: #fff;
    box-shadow: 0 0px 8px 4px rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    display: none;
}

.bootcanList >li{
    transition: 0.3s;
}

.bootcanList >li:first-child{
    border-radius: 6px 6px 0 0;
}

.bootcanList >li:last-child{
    border-radius: 0px 0px 6px 6px;
}

.bootcanList >li:hover{
    background-color: #e5e5ec;
}

.bootcan{
    display: block;
    width: 100%;
    font-size: 1.4rem;
    line-height: 46px;
    text-align: center;
}

.addlongbtnB{
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 42px;
    background-color: rgba(250, 201, 61,0.0);
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.3s;
}


.addlongbtnB.addgroup_stud{
    width: 42px;
} 
.addlongbtnB:hover .addlongtit{
    font-weight: 600;
    color: #4D3C00;
}

.addlongbtnB:hover .addpath{
    stroke: #4D3C00;
}

.addpath{
    stroke: #111;
    stroke-width: 1.5px;
}


.addlongbtnB svg{
    display: inline-block;
    vertical-align: middle;
    width: 12px;
}

.addlongtit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    margin-left: 8px;
}


.savebtnB{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 80px;
    height: 42px;
    background-color: rgba(250, 201, 61,0.0);
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.3s;
}

.savebtnB svg{
    display: inline-block;
    vertical-align: middle;
    width: 16px;

}

.disktit{
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    font-size: 1.4rem;
    line-height: 20px;
}

.diskico{
    stroke: #111;
    stroke-width: 1px;
}
.addlongbtnB:hover ,.savebtnB:hover{
    background-color: rgba(250, 201, 61,1);
}

.addlongbtnB{
    padding: 10px 0;
}
.delbtnB{
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 42px;
    background-color: rgba(220, 0, 0,0);
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

.delbttit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    margin-left: 8px;
}


.delbtnB:hover{
    background-color: rgba(220, 0, 0,0.1);
}

.delbtnB:hover .delbttit{
    color: #d;
}

.delbtnB svg{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
}

.trasher{
    stroke: #111;
    stroke-width: 0.8px;
}

.delbtnB:hover .trasher{
    stroke: #dc0000;
}

.studdel{
    display: inline-block;
    vertical-align: middle;
    width: 42px;
    height: 42px;
    background-color: rgba(220, 0, 0,0);
    border-radius: 6px;
    padding: 6px 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.3s;
}


.studdel:hover{
    background-color: rgba(220, 0, 0,0.1);
}

.studdel svg{
    display: block;
    width: 22px;
    margin: 0 auto;
}

.studdel:hover .trasher{
    stroke: #dc0000;
}





.table_select .search_custom{
    box-shadow: none;
}
.table_select .search_custom >button{
    border: 1px solid #e5e5ec;
    height: 36px;
    line-height: 36px;
}

.table_select .arrow_search {
    right: 12px;
    width: 12px;
    margin-top: 4px;
}


.table_select .arrow_search.RateOn{
    margin-top: -2px;
}

.studadd{
    display: flex;
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid #306AFF;
    justify-content: center;
    align-items: center;
    padding: 5px 0;
    box-sizing: border-box;
    cursor: pointer;
    width: 88%;
    margin: 0 auto;
}

.studadd:hover{
    background-color: #306AFF;
}

.saram{
    stroke: #306AFF;
    transition: 0.3s;
}

.studadd:hover .saram{
    stroke: #fff;
}

.stutico{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

.stutit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    margin-left: 8px;
    color: #306AFF;
    transition: 0.3s;
}

.studadd:hover .stutit{
    color: #fff;
}

.studadd_resu{
    display: block;
}

.studadd_resu .saram{
    stroke: #111;
}

.stumm{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    margin-left: 8px;
    transition: 0.3s;
}

.plus_stud{
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin-left: 16px;
    cursor: pointer;
    border-radius: 50%;
    background-color: #f7f7fb;
    border: 1px solid #e5e5ec;
    padding: 2px 0;
    box-sizing: border-box;
}

.plus_stud >svg{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}


.plusline{
    stroke: #999;
    transition: 0.3s;
}


.plus_stud:hover .plusline{
    stroke: #111;
}


.studadd_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #f1f1f5;
    border-radius: 12px;
    z-index: 12;
    display: none;
}


.studadd_modal .underbtnList >li{
    width: 100%;
}

.longtime_tit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    width: 60px;
}

.longtimesel .search_custom{
    box-shadow: none;
}

.longtimesel .search_custom >button{
    background-color: #f7f7fb;
    border: 1px solid #e5e5ec;
}

.longtime_tit.marlf{
    margin-left: 16px;
}

.studaddList_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 1200px;
    background-color: #f7f7fb;
    border-radius: 12px;
    z-index: 12;
    box-sizing: border-box;
    display: none;
    padding: 0 20px 20px 20px;
}

.studaddList_modal .table_flex >div{
    min-height: 600px;
    max-height: 600px;
    overflow-y: auto;
}

.studaddList_modal .billfList{
    max-height: 490px;
    min-height: 490px;
    overflow-y: auto;
}

.studaddList_modal .underbtnList{
    width: 150px;
}

.studaddList_modal .underbtnList >li{
    width: 100%;
}

.studaddList_modal .bill_lf{
    width: 40%;
    background-color: #fff;
    border-radius: 12px;
}

.studaddList_modal .bill_ri{
    width: 40%;
}

.plusadd_st{
    display: block;
    width: 32px;
    height: 32px;
    background-color: #f7f7fb;
    margin: 0 auto;
    border-radius: 50%;
    cursor: pointer;
    padding: 4px 0;
    box-sizing: border-box;
    transition: 0.3s;
}

.plusadd_st:hover{
    background-color: #ECF1FF;
}

.nextday_tit{
    font-size: 2rem;
    line-height: 42px;   
    padding: 16px 20px;
    box-sizing: border-box;
}

.sendingbold{
    display: inline-block;
    vertical-align: top;
    font-size: 1.7rem;
    line-height: 42px;
    color: #306AFF;
    font-weight: 600;
    margin: 0 4px;
}

.possaledate{
    display: inline-block;
    vertical-align: top;
    font-size: 1.7rem;
    line-height: 42px;
    color: #306AFF;
    font-weight: 600;
    margin: 0 4px;
}

.posresult{
    display: inline-block;
    vertical-align: top;
    font-size: 1.7rem;
    line-height: 42px;
    color: #306AFF;
    font-weight: 600;
    margin: 0 4px;
}

.studaddList_modal .billriList{
    min-height: 490px;
    max-height: 490px;
}

.studaddList_modal .billaddbtnList >li{
    width: 100%;
    margin-left: 0;
}

.billfList{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 24px auto 0;
}


.useb .search_custom >button.usebut01{
    background-color: rgba(250, 201, 61,0.2);
    border: none;
}

.useb .search_custom >button.usebut02{
    background-color: #e5e5ec;
    border: none;
}

.inqbtn{
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #e5e5ec;
    background-color: #f7f7fb;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    margin-left: 5px;
    cursor: pointer;
    transition: 0.3s;
    padding: 8px 0;
    box-sizing: border-box;
}

.inqbtn:hover{
    background-color: #f1f1f5;
    
}

.inqbtn:hover .shb{
    stroke: #111;
}

.inqbtn .shb{
    stroke: #999;
    stroke-width: 2px;
    transition: 0.3s;
}

.studgroup{
    display: flex;
    
}

.lf_group{
    display: inline-block;
    vertical-align: middle;
    width: 20%;
}

.rf_group{
    display: inline-block;
    vertical-align: middle;
    width: 80%;
    margin-left: 20px;
}

.groupB01{
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    margin: 90px auto 0;
    border-radius: 12px;
}

.grouptit{
    width: 100%;
    padding:  0 20px;
    box-sizing: border-box;
    line-height: 42px;
    font-size: 1.6rem;
    font-weight: 600;

    float: right;
}

.groupB01 .groupList{
    min-height: 330px;
    max-height: 330px;

}

.groupB01 .groupList >li{
    cursor: pointer;
}

.groupB01 .groupList >li.groupOnc{
    background-color: #ECF1FF;
}

.tableflex_lf .testtable tr{
    cursor: pointer;
}

.tableflex_lf .testtable tr.groupOnc{
    background-color: #ECF1FF;
}

.tableflex_lf2 .listTable tr{
    cursor: pointer;
}

.tableflex_lf2 .listTable tr.groupOnc{
    background-color: #ECF1FF;
}

.groupList{
    width: 100%;
    border-top: 1px solid #e5e5ec;
    position: relative;
    z-index: 1;
    overflow-y: auto;
}

.groupList >li{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5ec;
    padding: 8px 20px;
    box-sizing: border-box;
    position: relative;
}

.grouptxt{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 44px);
    font-size: 1.4rem;
    line-height: 32px;
    color: #505050;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

.group_del{
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    background-color: #f7f7fb;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 8px;
    position: relative;
    transition: 0.3s;
} 

.group_del:hover{
    background-color: #e5e5ec;
}

.group_del >svg{
    display: block;
    width: 24px;
    margin: 0 auto;
}

.group_trash{
    stroke: #999;
    transition: 0.3s;
}

.group_del:hover .group_trash{
    stroke: #111;
}

.groupaddPut{
    background-color: #fff;
    padding: 5px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-radius: 0 0 12px 12px;
}


.groupaddP{
    display: inline-block;
    vertical-align: middle;
    outline: none;
    border: 1px solid #e5e5ec;
    height: 36px;
    background-color: #f7f7fb;
    border-radius: 6px;
    padding-left: 16px;
    width: calc(100% - 78px);
    box-sizing: border-box;
}

.groupsav_btn{
    display: inline-block;
    vertical-align: middle;
    width: 70px;
    margin-left: 8px;
    font-size: 1.4rem;
    line-height: 36px;
    background-color: rgba(250, 201, 61,0.3);
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    color: #4D3C00;
    font-weight: 600;
}

.groupsav_btn:hover{
    background-color: rgba(250, 201, 61,1);
}


.groupB02{
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    margin: 16px auto 0;
    border-radius: 12px;
}


.groupB02 .groupList{
    
    min-height: 230px;
    max-height: 230px;
    
    
}



.groupB02 .group_del{
    transition: 0.3s;
    background-color: #fff;
}

.groupB02 .group_del:hover{
    background-color: #f7f7fb;
}

.kep{
    fill: #999;
}

.groupB02 .group_del:hover .kep{
    fill: #111;
}


.sldabbox{
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.16);
    width: 100px;
    z-index: 15;
    border-radius: 6px;

}

.sldabboxList{
    width: 100%;
}

.sldabboxList >li{
    padding: 0 16px;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.3s;
}

.sldabboxList >li:first-child{
    border-bottom: 1px solid #e5e5ec;
    border-radius: 6px 6px 0 0;
}

.sldabboxList >li:last-child{
    border-bottom: 0;
    border-radius: 0px 0px 6px 6px;
}

.sldtit{
    display: block;
    font-size: 1.4rem;
    line-height: 42px;
}

.sldrestart:hover{
    background-color: #f1f1f5;
}

.sldadel:hover{
    background-color: rgba(220, 0, 0,0.1);
}

.sldadel:hover .sldtit{
    color: #DC0000;
}

.serachwrap_b.mg04{
    margin-left: 0;
}

.ch_col{
    stroke: #111;
    stroke-width: 2px;
}

.ch_col2{
    stroke: #111;
    stroke-width: 6px;
}

.groupch:hover .ch_col{
    stroke: #4D3C00;
}

.groupch:hover .addtxt{
    color: #4D3C00;
}

.groupchange_pop{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 750px;
    background-color: #f1f1f5;
    transform: translate(-50%,-50%);
    z-index: 15;
    border-radius: 12px;
    display: block;
    padding: 0 0 32px 0;
    box-sizing: border-box;
    display: none;
}

.groupchange_pop .bubbleB{
    margin: 0 0 16px;
}

.groupchoice{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
}

.grouplf{
    display: inline-block;
    vertical-align: middle;
    width: 40%;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 12px;
}

.groupri{
    display: inline-block;
    vertical-align: middle;
    width: 60%;
    margin-left: 20px;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 12px;
}

.groupchoice_tit{
    font-size: 1.6rem;
    line-height: 36px;
    padding: 0 20px;
    box-sizing: border-box;
    font-weight: 600;

}

.groupchoiceList{
    border-top: 1px solid #e5e5ec;
    max-height: 400px;
    min-height: 400px;
    overflow-y: auto;
}

.groupchoiceList >li{
    vertical-align: middle;
    padding: 8px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5ec;
    cursor: pointer;
}

.groupchoiceList >li.groupchoiceOn{
    background-color: #ECF1FF;
}



.stinfo_gpad{
    border-top: 1px solid #e5e5ec;
    max-height: 400px;
    min-height: 400px;
    overflow-y: auto;
}

.stinfo_gpad >li{
    vertical-align: middle;
    padding: 8px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5ec;
}



.stuname{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 28px;
    width: 30%;
}

.studgroupname{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 28px;
    width: 50%;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.delite_stud{
    display: inline-block;
    vertical-align: middle;
    float: right;
    width: 28px;
    height: 28px;
    border: 1px solid #e5e5ec;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #fff;
}

.delite_stud svg{
    width: 20px;
    display: block;
    margin: 0 auto;
}

.delite_stud:hover{
    background-color: #fff0f0;
    border: none;
}

.delite_stud svg .group_trash{
    stroke-width: 1.3px;
}

.delite_stud:hover .group_trash{
    stroke: #bc0000;
}

.groupchList{
    border-top: 1px solid #e5e5ec;
    max-height: 400px;
    min-height: 400px;
    overflow-y: auto;
}

.groupchList >li{
    padding: 8px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5ec;
    cursor: pointer;
}


.groupchList >li.groupchoiceOn{
    background-color: #ECF1FF;
}

.groupchtit{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
    line-height: 20px;
}

.sv_ch_group{
    display: block;
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
    border-radius: 6px;
    background-color: #306AFF;
    width: 40%;
    margin: 32px auto 0;
    line-height: 52px;
    cursor: pointer;
    transition: 0.3s;
    color: #4D3C00;
}

.sv_ch_group:hover{
    background-color: #2258E3;
}

.delete_btn{
    display: inline-block;
    vertical-align: middle;
    width: 42px;
    height: 42px;
    background-color: rgba(220, 0, 0,0.08);
    border-radius: 6px;
    padding: 6px 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.3s;
    margin-left: 16px;
}


.delete_btn:hover{
    background-color: rgba(220, 0, 0,0.2);
}

.group_add_popup{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 750px;
    background-color: #f1f1f5;
    transform: translate(-50%,-50%);
    z-index: 15;
    border-radius: 12px;
    display: block;
    padding: 0 0 32px 0;
    box-sizing: border-box;
    display: none;    
}


.groupadd_stud{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 500px;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    z-index: 15;
    border-radius: 6px;
    padding: 0 0 32px 0;
    display: none;
}

.groupadd_putList{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 24px auto 0;
}

.groupadd_putList  >li{
    margin-top: 24px;
    position: relative;
}

.groupadd_putList  >li:first-child{
    margin-top: 0;
}

.grouputtit{
    font-size: 1.6rem;
    line-height: 24px;
    width: 75px;
}

.grouputtitsmall{
    font-size: 1.6rem;
    line-height: 24px;
    width: 56px;
}
.groupphalf{
    display: block;
    outline: none;
    background-color: #f7f7fb;
    border: 1px solid #e5e5ec;
    height: 42px;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 0 16px;
    box-sizing: border-box;
    font-size: 1.4rem;
    letter-spacing: 0;
    width: 145px;
}

.groupp{
    display: block;
    outline: none;
    background-color: #f7f7fb;
    border: 1px solid #e5e5ec;
    height: 42px;
    box-sizing: border-box;
    border-radius: 6px;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    font-size: 1.4rem;
    letter-spacing: 0;
}

.star_col{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    color: #DC0000;
}

.groupwarningmes{
    font-size: 1.4rem;
    line-height: 20px;
    color: #4f7bf5;
}

.groupadd_putList .select{
    width: 100%;
    margin-left: 0;
}


.groupadd_putList .search_custom{
    box-shadow: none;

}

.groupadd_putList .search_custom >button{
    background-color: #f7f7fb;
    border: 1px solid #e5e5ec;
}

.groupdate{
    width: 100%;
    background-color: #f7f7fb;
    border: 1px solid #e5e5ec;
    border-radius: 6px;
    padding: 0 20px;
    box-sizing: border-box;
}

.groupdateico{
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    cursor: pointer;
}

.groupdatetxt{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 42px;
    margin-left: 8px;
}

.groupp.date_gr{
    padding-left: 56px;
    cursor: pointer;
}

.groupphalf.date_gr{
    padding-left: 35px;
    cursor: pointer;
}

.gpdate2{
    position: absolute;
    top: 20%;
    left: 12px;
    cursor: pointer;
}

.dateRelBox{
    position: relative;
}
.gpdate{
    position: absolute;
    top: 20%;
    left: 16px;
    cursor: pointer;
}


.gropx{
    display: none;
}

.groupsx{
    width: 100%;
    margin: 4px auto 0;
}

.groupsx >li{
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
}

.groupsx >li:first-child{
    margin-left: 0;
}

.groupsx >li label{
    display: block;
    position: relative;
    font-size: 1.4rem;
    line-height: 20px;
    cursor: pointer;
}

.groupsx >li label::before{
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 22px;
    height: 22px;
    background-image: url('../img/radioOff.svg');
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 8px;
}

.gropx:checked + label::before{
    background-image: url('../img/radioOn.svg');
}

.groupnmb{
    display: flex;
    width: 100%;
    align-items: center;
}

.savestdnm_btn{
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    margin-left: 16px;
    line-height: 42px;
    font-size: 1.4rem;
    background-color: #306AFF;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    color: #FFFFFF;
}


.stdnm{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 80px);
    border: 1px solid #e5e5ec;
    background-color: #f7f7fb;
    height: 42px;
    padding: 0 16px;
    box-sizing: border-box;
    outline: none;
    border-radius: 6px;
}

.grouptextB{
    display: block;
    font-size: 1.4rem;
    padding: 16px;
    box-sizing: border-box;
    width: 100%;
    background-color: #f7f7fb;
    height: 100px;
    outline: none;
    border: 1px solid #e5e5ec;
    border-radius: 6px;
}

.grouparm_l{
    display: none;
}

.grouparm_l + label{
    display: block;
    font-size: 1.4rem;
    position: relative;
    cursor: pointer;
    margin: 4px auto 0;
}

.grouparm_l + label::before{
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 22px;
    height: 22px;
    background-image: url('../img/checkoff.png');
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 8px;
}

.grouparm_l:checked + label::before{
    background-image: url('../img/checkon.png');
}

.groupadd_stud_savbtn{
    display: block;
    margin: 32px auto 0;
    font-size: 1.6rem;
    line-height: 52px;
    font-weight: 600;
    background-color: #306AFF;
    color: #FFFFFF;
    width: 90%;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
}

.table_flex{
    display: flex;
    width: 100%;
    margin: 24px auto 0;
}

.table_flex >div:first-child{
    margin-left: 0;
}

.table_flex >div{
    margin-left: 20px;
}

.Sales_table_wrap{
    width: 100%;
    min-height: 600px;
    max-height: 600px;
    overflow-y: auto;
}

.Sales_table_wrap{

}

.tableflex_lf{
    margin-left: 20px;
    display: inline-block;
    vertical-align: middle;
    width: 40%;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
}

.tableflex_lf2{
    display: inline-block;
    vertical-align: middle;
    width: 60%;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
}

.testtable{
    width: 100%;
    border-collapse:collapse;
    border-top: 1px solid #e5e5ec;
}

.testtable thead{}


.testtable thead tr{
    background-color: #f7f7fb;
    border-radius: 12px 12px 0 0;
}

.testtable thead tr th{
    height: 36px;
    font-size: 1.4rem;
    color: #505050;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    
}

.tableflex_ri{
    display: inline-block;
    vertical-align: middle;
    width: 60%;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    margin-left: 20px;
}

.tableflex_ri2{
    display: inline-block;
    vertical-align: middle;
    width: 40%;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    margin-left: 20px;
    margin-right: 20px;
}


.testtable tbody{}


.testtable tbody tr{
    border-bottom: 1px solid #e5e5ec;
}

.testtable tbody tr td{
    height: 42px;
    vertical-align: middle;
    border-bottom: 1px solid #e5e5ec;
    text-align: center;
    font-size: 1.4rem;
    line-height: 20px;
    letter-spacing: 0;
}

.classname{
	display: table-cell;
	overflow: hidden;
	text-overflow: ellipsis;
}



.grouppayinq_modal, .groupclassinq_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #f7f7fb;
    width: 400px;
    z-index: 12;
    border-radius: 12px;
    padding-bottom: 32px;
    display: none;
}

.payinqList{
    width: 100%;
    margin: 16px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
    min-height: 600px;
    max-height: 600px;
    overflow-y: auto;
}

.payinqList >li{
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    margin: 16px auto 0;
    border-radius: 6px;
    padding: 16px;
}

.paybreakdowntit{
    font-size: 1.2rem;
    font-weight: 500;
    color: #306AFF;
}

.paybreakdowntxt{
    font-size: 1.6rem;
    font-weight: 600;
    margin-top: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #444;
}

.paydayB{
    width: 100%;
    margin: 24px auto 0;

}

.paydayList{

}

.paydayList >li{
    display: inline-flex;
    vertical-align: middle;
    width: 100%;
    align-items: center;
    margin-top: 8px;
}


.inqdate{
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    font-size: 1.2rem;
    color: #505050;
}

.inqdatecancel{
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    font-size: 1.2rem;
    color: #ff0000;
}

.paydate{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 60px);
    font-size: 1.4rem;
    letter-spacing: 0;
    line-height: 20px;
}

.paycanceldate{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 60px);
    font-size: 1.4rem;
    letter-spacing: 0;
    line-height: 20px;
    color: #ff0000;
}

.classinqList{
    width: 100%;
    margin: 16px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
    min-height: 300px;
    max-height: 300px;
    overflow-y: auto;
}

.hdprodList{
    width: 100%;
    margin: 16px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
    min-height: 150px;
    max-height: 150px;
    overflow-y: auto;
}

.hdprodList >li{
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    margin: 16px auto 0;
    border-radius: 6px;
    padding: 16px;
    cursor: pointer;
}

.classinqList >li{
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    margin: 16px auto 0;
    border-radius: 6px;
    padding: 16px;
    cursor: pointer;
}


.classinqList >li:first-child{
    margin: 0;
}
.classname_inq{
    font-size: 1.6rem;
    font-weight: 600;
}

.classstateB{
    margin-top: 8px;
}

.Instname{
    display: inline-block;
    vertical-align: middle;
    color: #505050;
    font-size: 1.4rem;
}

.instdate{
    display: inline-block;
    vertical-align: middle;
    color: #505050;
    font-size: 1.4rem;
    margin-left: 8px;
    letter-spacing: 0;
}

.weekchoiceB{
    display: inline-block;
    vertical-align: middle;
    width: 350px;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    padding: 0 16px;
    box-sizing: border-box;
}

.weekList{
    display: flex;
    align-items: center;
    padding: 5px 0;
    box-sizing: border-box;
}

.weekList >li{
    display: inline-block;
    vertical-align: middle;
    width: 12.5%;
}

.weekList >li.WeekOn .weektxt{
    font-weight: 600;
    color: #306AFF;
}

.weekList >li:first-child.WeekOn .weektxt{
    font-weight: 600;
    color: #306AFF;
    background-color: #ECF1FF;
}

.weektxt{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
    line-height: 32px;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: 0.3s;
    border-radius: 3px;
}

.week::after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 0;
    height: 0;
    background-color: #ECF1FF;
    transform: translate(-50%,-50%);
    border-radius: 50%;
}

.week:hover::after{
    width: 32px;
    height: 32px;
    animation: bigger 0.3s ease-in normal;
}

@keyframes bigger {
    from{
        width: 0;
        height: 0;
    }
    to{
        width: 32px;
        height: 32px;
    }
    100%{
        width: 32px;
        height: 32px;
    }
}

.returnbtn{
    display: inline-flex;
    vertical-align: middle;
    width: 90px;
    align-items: center;
    background-color: rgba(250, 201, 61,0);
    border-radius: 6px;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
}

.returnbtn:hover{
    background-color: rgba(250, 201, 61,1);
}


.returnico{
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
}

.rtun{
    stroke: #4D3C00;
    stroke-width: 2px;
    transition: 0.3s;
}

.rtun.tx{
    stroke-dasharray: 16px;
    stroke-dashoffset: 98px;
}

.returnbtn:hover .tx{
    animation: roll2 0.8s ease normal;

}

@keyframes roll2{
    0%{
        stroke-dasharray: 14px;
        stroke-dashoffset: 98px;
    }
    50%{
        stroke-dasharray: 14px;
        stroke-dashoffset: 84px;
    }

    100%{
        stroke-dasharray: 0;
        stroke-dashoffset: 0;
    }
}



.returntxt{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 42px;
    margin-left: 8px;
}

.rtun.roll{
    stroke-dasharray: 46px;
    stroke-dashoffset: 0;
}

.returnbtn:hover .roll{
    animation: roll 0.8s ease normal;

}


@keyframes roll{
    0%{
        stroke-dasharray: 46px;
        stroke-dashoffset: 0;
    }


    50%{
        stroke-dasharray: 62px;
        stroke-dashoffset: 61px;
    }
    

    100%{
        stroke-dasharray: 105px;
        stroke-dashoffset: 61px;
    }
}


.list_wrap.lecturelist{
    padding-bottom: 0;
}

.list_wrap.lecturelist .listtable_wrap{
    min-height: 68vh;
    max-height: 68vh;
}

.nonecase{
    width: 100%;

}
.nonecase_wraper{
    padding: 50px 0;
}

.list_wrap .listTable{
    border-bottom: 0;
}

.mark_ico{
    display: block;
    width: 60px;
    margin: 0 auto;
}

.mark_txt{
    font-size: 1.6rem;
    margin-top: 12px;
    line-height: 24px;
    text-align: center;
}

.teacher_edit{
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    background-color: #f1f1f5;
    border: 1px solid #e5e5ec;
    border-radius: 6px;
    margin-left: 8px;
    padding: 7px 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.3s;
}

.teacher_edit:hover{
    background-color: #306AFF;
    border: 1px solid #306AFF;
}

.teacher_edit:hover .pen{
    stroke: #fff;
}

.shbtnB{
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    background-color: #f1f1f5;
    border: 1px solid #e5e5ec;
    border-radius: 6px;
    margin-left: 8px;
    padding: 7px 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.3s;
}

.shbtnB:hover{
    background-color: #306AFF;
    border: 1px solid #306AFF;
}

.shbtnB:hover .shb{
    stroke: #fff;
}


.shbtn{
    display: block;
    width: 16px;
    margin: 0 auto;
}

.shb{
    stroke: #999;
    stroke-width: 1.5px;
}

.scoreB{
    display: none;
    vertical-align: middle;
    width: 70px;
    height: 32px;
    border: 1px solid #e5e5ec;
    background-color: #f1f1f5;
    border-radius: 6px;
    margin-left: 8px;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.3s;
    justify-content: center;
    align-items: center;
}

.scorebtn{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}

.pen{
    stroke: #999;
    stroke-width: 2px;
}

.scoretit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    margin-left: 4px;
    color: #999;
    transition: 0.3s;
}

.scoreB:hover{
    background-color: #306AFF;
    border: 1px solid #306AFF;
}

.scoreB:hover .scoretit{
    color: #fff;
}

.scoreB:hover .pen{
    stroke: #fff;
}

.add_class{
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    padding: 8px 0;
    box-sizing: border-box;
    background-color: #f1f1f5;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #e5e5ec;
    transition: 0.3s;
    margin-left: 12px;
}

.add_class:hover{
    background-color: #e5e5ec;
}

.add_class >svg{
    display: block;
    width: 16px;
    margin: 0 auto;
}

.teachchoiceB{
    display: flex;
    width: 90px;
    height: 32px;
    padding: 8px 0;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: #f1f1f5;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #e5e5ec;
    transition: 0.3s;
    align-items: center;
    justify-content: center;
}

.teachchoiceB:hover{
    background-color: #e5e5ec;
}

.teachchoiceB:hover .tharrow{
    stroke: #111;
}
.teachico{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    margin-left: 4px;
    transition: 0.3s;
}

.teachico{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}
.tharrow{
    stroke: #767676;
    stroke-width: 2px;
}

.datechoiceB{
    display: block;
    width: 32px;
    height: 32px;
    padding: 8px 0;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: #f1f1f5;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #e5e5ec;
    transition: 0.3s;
}

.datechoiceB:hover{
    background-color: #e5e5ec;
}

.datechoiceB:hover .date_Path{
    stroke: #111;
}

.dateco{
    display: block;
    width: 16px;
    margin: 0 auto;
}

.date_Path{
    stroke: #505050;
    stroke-width: 1.5px;
}

.noebloc{
    display: none;
}

.restore_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 600px;
    background-color: #fff;
    border-radius: 12px;
    transform: translate(-50%,-50%);
    z-index: 15;
    padding-bottom: 32px;
    display: none;
}

.restoreList{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 24px auto 0;
    min-height: 600px;
    max-height: 600px;
    overflow-y: auto;
}

.restoreList >li{
    padding: 16px;
    box-sizing: border-box;
    background-color: #f7f7fb;
    box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    margin-top: 24px;
    cursor: pointer;
}

.restoreList >li.restoreC{
    background-color: rgba(21, 153, 72,0.06);
}

.restoreList >li.restoreC .price_classList{
    color: #306AFF;
}

.restoreList >li:first-child{
    margin-top: 0;
}

.classnametit{
    font-size: 1.8rem;
    line-height: 26px;
    font-weight: 600;
}

.classnameteach_b{
    margin: 6px auto 0;
}

.teachername{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    color: #505050;
}

.classdate_txt{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    color: #505050;
    margin-left: 8px;
}

.price_classList{
    display: inline-block;
    vertical-align: middle;
    width: 40%;
    font-size: 1.8rem;
    line-height: 26px;
    font-weight: 600;
    text-align: right;
    color: #111;
}

.restorecom{
    display: flex;
    align-items: center;

}

.restoreList_lf{
    display: inline-block;
    vertical-align: middle;
    width: 60%;
}

.memob{
    width: 100%;
    margin: 24px auto 0;
    background-color: #fff;
    border: 1px solid #e5e5ec;
    border-radius: 12px;
    padding: 8px 16px;
    box-sizing: border-box;
}

.memotit{
    font-size: 1.6rem;
    line-height: 24px;
    font-weight: 600;
}

.memotxt{
    margin-top: 8px;
    font-size: 1.4rem;
    line-height: 20px;
    color: #505050;
}

.restore_btn{
    display: block;
    font-size: 1.6rem;
    line-height: 24px;
    line-height: 52px;
    width: 50%;
    margin: 32px auto 0; 
    text-align: center;
    background-color: #306AFF;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    color: #4D3C00;
}

.restore_btn:hover{
    background-color: #2258E3;
}

.InstructorList_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 800px;
    background-color: #f1f1f5;
    border-radius: 12px;
    transform: translate(-50%,-50%);
    z-index: 15;
    padding-bottom: 32px;
    display: none;
}

.instrB{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    max-height: 700px;
    min-height: 500px;
}


.insLf{
    display: inline-block;
    vertical-align: middle;
    width: 30%;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    overflow-y: auto;
    position: relative;
}

.instit{
    font-size: 1.6rem;
    line-height: 24px;
    padding: 16px 20px;
    box-sizing: border-box;
    font-weight: 600;
    position: sticky;
    height: 56px;
    top: 0;
    left: 0;
    background-color: #fff;
    border-bottom: 1px solid #e5e5ec;
}

.insList{
    width: 100%;
}

.insList >li{
    padding: 13px 20px;
    box-sizing: border-box;
    cursor: pointer;
    border-bottom: 1px solid #e5e5ec;
}

.insList >li.inOn{
    background-color: #ECF1FF;
}
.insList >li:last-child{
    border-bottom: 0;
}

.insdate{
    display: inline-block;
    vertical-align: middle;
    margin-left: 12px;
    width: 32px;
    line-height: 32px;
    font-size: 1.4rem;
    background-color: #f7f7fb;
    text-align: center;
    border-radius: 50%;
}

.insnametit{
    font-size: 1.4rem;
    line-height: 20px;
}

.insri{
    display: inline-block;
    vertical-align: middle;
    width: 70%;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    margin-left: 20px;
}

.addins_path{
    stroke: #111;
    stroke-width: 2px;
}

.modify_pen{
    stroke: #111;
    stroke-width: 2px;
}

.insari_top{
    width: 100%;
    padding: 12px 20px;
    box-sizing: border-box;
}

.insari_top::after{
    display: block;
    content: "";
    clear: both;
}


.ins_tit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 32px;
    font-weight: 600;
}

.Right_B{
    display: inline-block;
    vertical-align: middle;
    float: right;
}

.Right_B >*{
    margin-left: 8px;
}

.Right_B >*:first-child{
    margin-left: 0;
}
.addins{
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    background-color: #f7f7fb;
    cursor: pointer;
    padding: 8px 0;
    box-sizing: border-box;
    border-radius: 6px;
    transition: 0.3s;
}

.addins .addins_path{
    stroke: #767676;
}

.addins:hover{
    background-color: #e5e5ec;
}

.addins:hover .addins_path{
    stroke: #111;
}

.addins >svg{
    display: block;
    width: 24px;
    margin: 0 auto 0;
}

.teachSave{
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    background-color: #f7f7fb;
    cursor: pointer;
    padding: 8px 0;
    box-sizing: border-box;
    border-radius: 6px;
    transition: 0.3s;
}

.teachSave >svg{
    display: block;
    width: 16px;
    margin: 0 auto 0;
}

.teach_path{
    stroke: #767676;
    stroke-width: 2px;
}

.teachSave:hover{
    background-color: #e5e5ec;
}

.teachSave:hover .teach_path{
    stroke: #111;
}

.modifybtn{
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    background-color: #f7f7fb;
    cursor: pointer;
    padding: 8px 0;
    box-sizing: border-box;
    border-radius: 6px;
    transition: 0.3s;
}

.modifybtn >svg{
    display: block;
    width: 24px;
    margin: 0 auto 0;
}

.modifybtn:hover{
    background-color: #e5e5ec;
}

.modifybtn:hover .modify_pen{
    stroke: #111;
}

.modify_pen{
    stroke: #767676;
    stroke-width: 2px;
}

.insafter{
    border-top: 1px solid #ccc;
}

.insafterTopB{
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px;
    display: flex;
    align-items: center;
}



.insafterlf{
    display: inline-block;
    vertical-align: middle;
    width: 22%;
}

.insafterinfo{
    display: inline-block;
    vertical-align: middle;
    width: 78%;
    margin-left: 20px;
}

.insaftername{
    font-size: 2.4rem;
    line-height: 20px;
    font-weight: 600;
}

.insafterinfo2{
    display: block;
    margin: 8px auto 0;
}

.insafter_birth{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    color: #767676;
}

.insafter_x{
    display: inline-block;
    vertical-align: bottom;
    font-size: 1.6rem;
    line-height: 24px;
    color: #767676;
    margin-left: 8px;
}

.historytit{
    width: 90%;
    margin: 0px auto 0;
    text-align: center;
    background-color: #adadad;
    line-height: 36px;
    font-size: 1.4rem;
    color: #fff;
    border-radius: 4px;
}

.historytxt{
    width: 100%;
    margin: 0 auto;
    padding: 16px 20px;
    min-height: 200px;
    max-height: 200px;
    overflow-y: auto;
    font-size: 1.6rem;
    line-height: 24px;
    box-sizing: border-box;
}

.instrbtn{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 24px auto 0;
}

.instrbtn::after{
    display: block;
    content: "";
    clear: both;
}

.instsavebtn{
    float: right;
    display: block;
    width: 100px;
    font-size: 1.6rem;
    line-height: 52px;
    color: #4D3C00;
    background-color: #306AFF;
    text-align: center;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}


.insbefore{
    display: none;
}

.instsavebtn:hover{
    background-color: #2258E3;
}

.insbeforeList{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    padding-bottom: 24px;
}

.beforetxt{
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    text-align: left;
    font-size: 1.6rem;

}

.insbeforeList >li{
    margin-top: 16px;
    display: flex;
    align-items: center;
}

.insbeforeList >li:first-child{
    margin-top: 0;
}

.rigP{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 80px);
    height: 36px;
    background-color: #f7f7fb;
    border: 1px solid #e5e5ec;
    outline: none;
    padding: 0 16px;
    border-radius: 6px;
}

.historyradio{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 80px);
}

.historyradio >li{
    display: inline-block;
    vertical-align: middle;
    margin-left: 16px;
}

.historyradio >li:first-child{
    margin-left: 0;
}

.historyradio >li input{
    display: none;
}

.historyradio >li label{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    cursor: pointer;
}

.historyradio >li label::before{
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 22px;
    height: 22px;
    background-image: url('../img/radioOff.svg');
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 8px;
}

.historyradio>li input:checked + label::before{
    background-image: url('../img/radioOn.svg');
}

.rigP2{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 90px - 90px);
    height: 36px;
    background-color: #f7f7fb;
    border: 1px solid #e5e5ec;
    outline: none;
    padding: 0 16px;
    border-radius: 6px;
}

.rigP2 + label{
    display: inline-block;
    vertical-align: middle;
    width: 90px;
    font-size: 1.4rem;
    line-height: 36px;
    background-color: #306AFF;
    color: #4D3C00;
    font-weight: 600;
    margin-left: 16px;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
}

.texthistory{
    display: block;
    width: 90%;
    margin: 24px auto;
    padding: 16px 20px;
    min-height: 152px;
    max-height: 152px;
    font-size: 1.6rem;
    line-height: 24px;
    box-sizing: border-box;
    outline: none;
    border: 1px solid #e5e5ec;
    background-color: #f7f7fb;
    border-radius: 6px;
}

.dateput_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 900px;
    background-color: #f1f1f5;
    border-radius: 12px;
    transform: translate(-50%,-50%);
    z-index: 15;
    padding-bottom: 32px;
    display: none;
}

.dateweekchoiceB{
    width: 96%;
    margin: 24px auto 0;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    padding: 16px 20px;
    box-sizing: border-box;
    border-radius: 12px;
}

.dateweektit{
    font-size: 1.6rem;
    line-height: 24px;
    font-weight: 600;
}

.dateweekcheckList{
    display: flex;
    align-items: center;
    margin: 12px auto 0;

}

.dateweekcheckList >li{
    display: inline-block;
    vertical-align: middle;
    width: calc(100%/7);
}

.dateweekcheckList >li input{
    display: none;
}

.dateweekcheckList >li label{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    cursor: pointer;
}

.dateweekcheckList >li label::before{
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 22px;
    height: 22px;
    background-image: url('../img/checkoff.png');
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 8px;
}

.dateweekcheckList >li input:checked + label::before{
    background-image: url('../img/checkon.png');
}

.datetimeputb{
    width: 100%;
    margin: 32px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}

.datetimeTop{
    width: 100%;
}

.datetimeTop::after{
    display: block;
    content: "";
    clear: both;
}

.datetimeall{
    display: inline-block;
    vertical-align: middle;
    width: 100px;
}

.datetimeall input{
    display: none;
}

.datetimeall label{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 32px;
}

.datetimeall label::before{
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 22px;
    height: 22px;
    background-image: url('../img/checkoff.png');
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 8px;
}

.datetimeall input:checked + label::before{
    background-image: url('../img/checkon.png');
}


.datetimepall{
    float: right;
    width: 500px;
    display: flex;
}

.datetimepall >li{
    display: inline-flex;
    vertical-align: middle;
    width: 50%;
    margin-left: 20px;
}

.datetimepall >li:first-child{
    margin-left: 0;
}

.timealltit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    width: 90px;
    line-height: 32px;
    text-align: right;
}

.datetimepall >li input{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 90px);
    height: 32px;
    outline: none;
    margin-left: 16px;
    border: 1px solid #e5e5ec;
    background-color: #fff;
    border-radius: 6px;
    padding: 0 16px;
    box-sizing: border-box;
}


.datepList{
    width: 100%;
    margin: 8px auto 0;
    display: flex;
    align-items: center;
}

.datepList >li{
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    display: inline-block;
    vertical-align: middle;
    width: calc(100%/7);
    padding: 16px;
    box-sizing: border-box;
    margin-left: 16px;
}

.datepList >li:first-child{
    margin-left: 0;
}

.timetit{
    display: block;
    text-align: center;
    font-size: 2rem;
    line-height: 32px;
    font-weight: 600;
}

.timetableB{
    width: 100%;
    margin: 8px auto 0;
}

.titmetit{
    font-size: 1.4rem;
    line-height: 20px;
    text-align: center;
}

.timetableB input{
    display: block;
    width: 100%;
    outline: none;
    margin: 4px auto 0;
    height: 32px;
    background-color: #f7f7fb;
    border: 1px solid #e5e5ec;
    border-radius: 6px;
    padding: 0 8px;
    box-sizing: border-box;
    text-align: center;
}

.timetableB >p:nth-child(3){
    margin: 12px auto 0;
}

.studentadd_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 500px;
    background-color: #f1f1f5;
    border-radius: 12px;
    transform: translate(-50%,-50%);
    z-index: 15;
    padding-bottom: 32px;
    display: none;
}

.studadd_serch{
    width: 100%;
    margin: 24px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}

.studadd_serch .searchB{
    margin-left: 0;
}
.group_stud .selbtn00{
    width: 120px;
}

.stinfo{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 24px auto 0;
    min-height: 500px;
    max-height: 500px;
    overflow-y: auto;
}

.stinfo >li{
    margin-top: 24px;
    width: 100%;
    display: flex;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 16px; 
    box-sizing: border-box;
    align-items: center;
    cursor: pointer;
}

.stinfo >li.sinfoOn{
    background-color: #ECF1FF;
}

.stinfo >li:first-child{
    margin-top: 0;
}

.stinfolf{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 32px);
}

.trashico{
    display: inline-block;
    vertical-align: middle;
    width: 42px;
    height: 42px;
    background-color: #fff;
    border-radius: 50%;
    padding: 8px 0;
    box-sizing: border-box;
    transition: 0.3s;
    cursor: pointer;
}

.trashico >svg{
    display: block;
    width: 32px;
    margin: 0 auto;
}

.stud_trash{
    stroke: #444;
    stroke-width: 1px;
}

.trashico:hover{
    background-color: #f1f1f5;
}

.trashico:hover .stud_trash{
    stroke: #111;
    stroke-width: 2px;
}

.studgroup{
    font-size: 1.4rem;
    line-height: 20px;
    color: #306AFF;
    font-weight: 600;
}

.stnmpnB{
    margin-top: 8px;
}

.stnm{
    display: inline-block;
    vertical-align: bottom;
    font-size: 1.8rem;
    font-weight: 600;
}

.stphonnm{
    display: inline-block;
    vertical-align: bottom;
    font-size: 1.6rem;
    margin-left: 8px;
    color: #767676;
}

.studnumber{
    font-size: 1.6rem;
    margin-top: 8px;
}

.bubbleB{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 16px auto 0;
    justify-content: center;
}

.warning_ico{
    display: block;
    margin: 0 auto;
    width: 80px;
}

.bubblebtn{
    display: inline-block;
    vertical-align: middle;
    width: 24px;
}

.mark{
    stroke: #999;
    stroke-width: 1px;
}

.warningtxt{
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    font-size: 1.6rem;
    color: #999;
}

.testresult_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 600px;
    background-color: #f1f1f5;
    border-radius: 12px;
    z-index: 15;
    padding-bottom: 32px;
    display: none;
}

.test_dateA{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    margin: 10px auto 0;
    justify-content: left;
}

.test_dateB{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    margin: 10px auto 0;
    justify-content: right;
}

.testdatetit{
    display: inline-block;
    vertical-align: middle;
    width: 90px;
    font-size: 1.4rem;
    line-height: 20px;
    text-align: right;
    font-weight: 600;
}

.testdateB{
    display: inline-block;
    vertical-align: middle;
    width: 150px;
    background-color: #fff;
    border: 1px solid #e5e5ec;
    position: relative;
    border-radius: 6px;
    margin-left: 12px;
}

.testdatep{
    display: block;
    width: 100%;
    outline: none;
    padding: 0 20px 0 40px;
    height: 36px;
    font-size: 1.4rem;
    background-color: transparent;
    cursor: pointer;
    box-sizing: border-box;
    border: 0;
    position: relative;
    z-index: 2;
}

.dateico{
    position: absolute;
    top: 50%;
    left: 8px;
    width: 16px;
    transform: translateY(-50%);
    z-index: 1;
    cursor: pointer;
}

.datepath2{
    stroke: #505050;
    stroke-width: 1.5px;
}

.testnmp{
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    background-color: #fff;
    border: 1px solid #e5e5ec;
    position: relative;
    border-radius: 6px;
    margin-left: 12px;
    height: 36px;
    outline: none;
    padding: 0 8px;
    font-size: 1.4rem;
    box-sizing: border-box;
}

.studadd_tableWrap{
    width: 96%;
    display: block;
    background-color: #fff;
    border-radius: 12px;
    margin: 24px auto 0;
    min-height: 300px;
    max-height: 300px;
    overflow-y: auto;
}

.studadd_table{
    width: 100%;

}

.studadd_table thead tr{
    background-color: #e5e5ec;
}

.studadd_table thead tr th:first-child{
    border-radius: 6px 0 0 0;
}

.studadd_table thead tr th:last-child{
    border-radius: 0 6px 0px 0px;
}


.studadd_table thead tr th{
    font-size: 1.4rem;
    height: 36px;
    font-weight: 600;
    vertical-align: middle;
}

.studadd_table tbody tr{
    border-bottom: 1px solid #e5e5ec;
}

.studadd_table tbody tr td{
    height: 36px;
    font-size: 1.4rem;
    text-align: center; 
    vertical-align: middle;
    
}
.teststore_p{
    display: block;
    width: 90%;
    margin: 0 auto;
    outline: none;
    background-color: #f7f7fb;
    border: 1px solid #e5e5ec;
    height: 32px;
    font-size: 1.4rem;
    padding: 0 8px;
    box-sizing: border-box;
}


.center_popbtn{
    display: block;
    width: 150px;
    margin: 0 auto;
    font-size: 1.6rem;
    line-height: 52px;
    font-weight: 600;
    background-color: #306AFF;
    margin: 32px auto 0;
    border-radius: 6px;
    text-align: center;
    transition: 0.3s;
    cursor: pointer;
    color: #FFFFFF;
}

.center_popbtn:hover{
    background-color: #2258E3;
}

.flexB{
    display: flex;
    margin: 32px  auto 0;
}

.flexinnerB{
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 12px;
}

.rib{
    margin-left: 20px;
}

.testtit{
    width: 100%;
    padding: 16px 20px;
    font-size: 1.8rem;
    line-height: 26px;
    font-weight: 600;
    box-sizing: border-box;
}

.testlist{
    width: 100%;
    border-top: 1px solid #e5e5ec;
    min-height: 710px;
    max-height: 710px;
    overflow-y: auto;
}

.testlist >li{
    border-bottom: 1px solid #e5e5ec;
    box-sizing: border-box;
    padding: 16px 20px;
    cursor: pointer;
}


.testlist >li.Bgon{
    background-color: rgba(21, 153, 72, 0.08);
}
.testname{
    font-size: 1.6rem;
    line-height: 24px;
    font-weight: 600;    
}

.testteach{
    font-size: 1.4rem;
    line-height: 20px;
    margin-top: 4px;
    color: #505050;
}

.rib_table_wrap{
    width: 100%;
    min-height: 320px;
    max-height: 320px;
    overflow-y: auto;
}


.ribtable{
    width: 100%;
}

.studinfotableB{
    margin-top: 20px;
}
.testinfo_tablewrap .listTable tbody tr{
    cursor: pointer;
}

.testinfo_tablewrap .listTable tbody tr.Bgon{
    background-color: rgba(21, 153, 72, 0.08);
}

.secondblock{
    margin-top: 20px;
}

.attendance_flex{
    margin: 24px auto 0;
    display: flex;
}

.attlf{
    display: inline-block;

}

.attri{
    margin-left: 20px;
}

.attendance_flex .search_wrap{
    margin: 0 auto;
}

.group_attende{
    width: 100%;
    margin: 0 auto;
    border-top: 1px solid #e5e5ec;
    min-height: 320px;
    max-height: 320px;
    overflow-y: auto;
}

.group_attende >li{
    padding: 11px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5ec;
    cursor: pointer;
}

.group_attende >li.Bgon{
    background-color: rgba(21, 153, 72, 0.08);
}

.groupname{
    font-size: 1.4rem;
    line-height: 20px;
}

.attri .datePick{
    margin-left: 0;
}

.attenbtn{
    display: none;
    vertical-align: middle;
    width: 60px;
    border-radius: 6px;
    line-height: 42px;
    font-size: 1.4rem;
    text-align: center;
    font-weight: 600;
    color: #111;
    transition: 0.3s;
    cursor: pointer;
}

.attenbtn.disabled{
    cursor: default;
    color: #999;
}

.attenbtn.disabled:hover{
    background-color: #e5e5ec;
}

.attenbtn:hover{
    background-color: rgba(250, 201, 61,1);
    color: #4D3C00;
}

.atten_off{
    display: none;
}

.attendaceWrap .togglewrap{
    margin-left: 16px;
    margin-right: 0;
}


.notice .datePick{
    margin-left: 0;
}

.noticeplusbtn{
    display: inline-flex;
    vertical-align: middle;
    width: 90px;
    height: 42px;
    box-sizing: border-box;
    padding: 8px 0;
    transition: 0.3s;
    border-radius: 6px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.noticeplusbtn svg{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
}

.noticeplusbtn:hover{
    background-color: #306AFF;
}

.noticeplusbtn:hover .ps{
    stroke: #4D3C00;
}

.noticeplusbtn:hover .noticeadd{
    font-weight: 600;
    color: #4D3C00;
}

.ps{
    stroke: #111;
    stroke-width: 2px;
}

.noticeadd{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    margin-left: 8px;
}

.noticeList{
    width: 100%;
    margin: 16px auto 0;
    border-top: 1px solid #999;
    min-height: 550px;
    max-height: 550px;
    overflow-y: auto;
}

.noticeList >li{
    padding: 20px;
    box-sizing: border-box;
    display: inline-flex;
    width: 100%;
    align-items: center;
    border-bottom: 1px solid #e5e5ec;

}

.noticelf{
    width: calc(100% - 50px);
    margin-left: 20px;
    cursor: pointer;
}

.noticelf:hover {
    text-decoration: un;
}

.bubspeah{
    display: block;
    font-size: 1.2rem;
    display: inline-block;
    vertical-align: middle;
    width: 26px;
    line-height: 24px;
    padding: 0 12px;
    border: 1px solid #306AFF;
    background-color: #fff;
    color: #306AFF;
    border-radius: 6px;
    text-align: center;
    margin-right: 12px;
}

.testnoticenm{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 60px);
    box-sizing: border-box;
}

.notice_groupnm{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    color: #505050;
}


.notice_classnm{
    display: inline-block;
    vertical-align: middle;
    margin-left: 12px;
    font-size: 1.6rem;
    line-height: 24px;
    color: #505050;
}



.notice_writenm{
    display: block;
    font-size: 1.8rem;
    line-height: 26px;
    margin-top: 8px;
    font-weight: 600;
}

.notice_datetxt{
    font-size: 1.4rem;
    color: #505050;
    line-height: 20px;
}

.noticeri{
    display: inline-block;
    vertical-align: middle;
}

.notice_inq_btn{
    display: flex;
    width: 140px;
    height: 42px;
    background-color: #f1f1f5;
    border: 1px solid #e5e5ec;
    box-sizing: border-box;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    align-items: center;
    justify-content: center;
}

.notice_inq_btn svg{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}

.notice_inq_btn .shb{
    stroke-width: 2px;
}

.notice_inq_btn:hover{
    background-color: #e5e5ec;
}

.notice_inq_btn:hover .shb{
    stroke: #111;
}

.notice_inqtxt{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    color: #999;
    margin-left: 8px;
    font-weight: 600;
}

.notice_inq_btn:hover .notice_inqtxt{
    color: #111;
}

.notice_add_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 1200px;
    height: 90vh;
    background-color: #fff;
    z-index: 15 ;
    overflow-y: auto;
    display: none;
    transform: translate(-50%,-50%);
    border-radius: 12px;
}

.noticeadwrap{
    width: 94%;
    margin: 80px auto 0;
}



.notice_close{
    position: fixed;
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #e5e5ec;
}

.notice_close svg{
    display: block;
    width: 16px;
    margin: 0 auto;
}

.cl_path{
    stroke: #999;
    stroke-width: 2px;
}

.notice_close:hover{
    background-color: #f1f1f5;
}

.notice_close:hover .cl_path{
    stroke: #111;
}

.groupselect{
    margin: 24px  auto 0;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #e5e5ec;
    border-radius: 12px;
}

.noticeaddtit{
    font-size: 3.6rem;
    line-height: 42px;
    font-weight: 600;
    text-align: center;
}

.groupselect .noticegroupsel{
    margin-left: 0;
}

.noticegroupsel .search_custom{
    box-shadow: none;
}

.noticegroupsel .search_custom >button{
    width: 200px;
    background-color: #fff;
    border: 1px solid #e5e5ec;
}

.noticegroupsel .selSearch_list{
    border: 1px solid #e5e5ec;
}

.notice_classnm .search_custom{
    box-shadow: none;
}

.notice_classnm .search_custom >button{
    width: 600px;
    background-color: #fff;
    border: 1px solid #e5e5ec;
}

.notice_classnm .selSearch_list{
    border: 1px solid #e5e5ec;
}

.puttit{
    display: block;
    font-size: 1.6rem;
    margin: 12px auto 0;
    width: 100%;
    outline: none;
    border: 1px solid #e5e5e5;
    height: 46px;
    background-color: #f7f7fb;
    padding: 0 20px;
    box-sizing: border-box;
    border-radius: 6px;
}

.puttit::placeholder{
    color: #ccc;
}

.noticebtnwrap{
    width: 100%;
    margin: 50px auto 0;
}

.noticebtnwrap::after{
    display: block;
    content: "";
    clear: both;
}

.notice_savebtn{
    float: right;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 42px;
    width: 80px;
    display: inline-block;
    vertical-align: middle;
    background-color: #306AFF;
    border-radius: 6px;
    color: #4D3C00;
    cursor: pointer;
    transition: 0.3s;
}

.notice_savebtn:hover{
    background-color: #2258E3;
}

.checkboxWrap{
    width: 100%;
    margin: 12px auto 0;
}

.checkList{}

.checkList >li{
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
}

.checkList >li:first-child{
    margin-left: 0;
}


.checkList >li input{
    display: none;
}

.checkList >li label{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    cursor: pointer;
}

.checkList >li label::before{
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../img/checkoff.png');
    margin-right: 8px;
}

.checkList >li input:checked + label::before{
    background-image: url('../img/checkon.png');
}


.notice_p{
    display: block;
    margin: 24px auto 0;
    border: 1px solid #e5e5ec;
    outline: none;
    width: 100%;
    min-height: 420px;
    max-height: 420px;
    overflow-y: auto;
    border-radius: 12px;
    font-size: 1.6rem;
    
}

.em_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 12;
    padding-bottom: 32px;
    box-sizing: border-box;
    border-radius: 12px;
    width: 600px;
    display: none;
}

.emwrap{
    width: 100%;
    margin: 32px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}

.notice_title{
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 26px;
}

.notice_title >span{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 26px;
}
.emfl{
    width: 100%;
    margin: 24px auto 0;
}

.emfl::after{
    display: block;
    content: '';
    clear: both;
}

.notice_em_check{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 42px;
    color: #505050;
}

.emchecknum{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    color: #306AFF;
    font-weight: 600;
}

.notice_em_sel{
    float: right;
    display: inline-block;
    vertical-align: middle;
}

.notice_em_sel  .search_custom{
    box-shadow: none;
}

.notice_em_sel  .search_custom >button{
    width: 120px;
    border: 1px solid #e5e5ec;
    background-color: #fff;
}

.notice_em_sel  .search_custom .selSearch_list{
    border: 1px solid #e5e5ec;
}

.studlist_em{
    width: 100%;
    margin: 24px auto 0;
    border-top: 1px solid #999;
    min-height: 520px;
    max-height: 520px;
    overflow-y: auto;
}

.studlist_em >li{
    display: inline-flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #e5e5ec;
    padding: 16px 20px;
    box-sizing: border-box;
}


.nm{
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: 1.6rem;
    color: #505050;
    width: 30px;
}

.stdinfo{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 32px);
    padding-left: 20px;
    box-sizing: border-box;
}

.studinfob{
    display: flex;
    align-items: center;
}

.studname{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    font-weight: 600;
}

.studphonenum{
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    font-size: 1.4rem;
    line-height: 20px;
    font-weight: 600;
}

.studdatetit{
    margin: 2px auto 0;
    font-size: 1.4rem;
    line-height: 20px;
    color: #767676;
}

.armsendbtn{
    display: block;
    font-size: 1.6rem;
    line-height: 52px;
    width: 150px;
    text-align: center;
    border-radius: 6px;
    background-color: #306AFF;
    margin: 60px auto 0;
    font-weight: 600;
    cursor: pointer;
    color: #4D3C00;
}

.armsendbtn_disabled{
    display: block;
    font-size: 1.6rem;
    line-height: 52px;
    width: 150px;
    text-align: center;
    border-radius: 6px;
    background-color: #e5e5ec;
    margin: 60px auto 0;
    font-weight: 600;
    color: #999;
}

.notice_trash{
    display: inline-flex;
    vertical-align: middle;
    width: 90px;
    height: 42px;
    box-sizing: border-box;
    padding: 8px 0;
    transition: 0.3s;
    border-radius: 6px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.notice_trash >svg{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
}

.notice_trash:hover{
    background-color: rgba(220, 0, 0,0.1);
}

.notice_trash:hover .notice_del{
    stroke: #dc0000;
}

.notice_trash:hover .noticeadd{
    color: #dc0000;
    font-weight: 600;
}

.notice_del{
    stroke: #111;
}

.notice_check{
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    
}

.notice_check input{
    display: none;
}

.notice_check label{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
}

.notice_check label::before{
    display: block;
    content: "";
    width: 22px;
    height: 22px;
    background-image: url('../img/checkoff.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.notice_check input:checked +label::before{
    background-image: url('../img/checkon.png');
}

.notice_view{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 1200px;
    height: 90vh;
    background-color: #fff;
    z-index: 15;
    overflow-y: auto;
    display: none;
    transform: translate(-50%, -50%);
    border-radius: 12px;
}

.noticeviewB{
    width: 94%;
    margin: 80px auto 0;
    padding-bottom: 80px;
}

.viewtxt{
    font-size: 1.6rem;
    line-height: 26px;
}

.notice_group{
    display: flex;
    align-items: center;
}

.notice_group >li{
    margin-left: 12px;
}

.notice_group >li:first-child{
    margin-left: 0;
}

.fast{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 38px;
    color: #306AFF;
    border: 1px solid #306AFF;
    width: 68px;
    text-align: center;
    border-radius: 6px;
    font-weight: 600;
}

.group_fast_tit{
    font-size: 1.6rem;
    line-height: 24px;
    color: #505050;
}
.notice_view_tit{
    font-size: 2.4rem;
    line-height: 32px;
    font-weight: 600;
    margin-top: 12px;
}

.notice_view_date{
    margin-top: 4px;
    font-size: 1.8rem;
    line-height: 26px;
    color: #767676;
    letter-spacing: 0;
}

.noticeviewTop{
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.noticeviewlf{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 24px);
}
.noticeviewri{
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.noticemore{
    display: block;
    cursor: pointer;
    width: 42px;
    height: 42px;
    margin: 0 auto;
    border-radius: 50%;
    transition: 0.3s;
}


.noticemore svg{
    display: block;
    width: 22px;
    margin: 0 auto;
}
.noticemore:hover{
    background-color: #f1f1f5;
}
.noticemore:hover .noticemore_path{
    stroke: #111;
    fill: #111;
}

.noticemore_path{
    stroke: #767676;
    transition: 0.3s;
    stroke-width: 2px;
}

.noticeviewunder{
    margin: 32px auto 0;
    border-top: 1px solid #e5e5ec;
    padding-top: 50px;
}

.noitceedit{
    position: absolute;
    border: 1px solid #e5e5ec;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    background-color: #fff;
    width: 80px;
    border-radius: 6px;
    top: 100%;
    right: 0;
    display: none;
}

.noitceedit >li{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #e5e5ec;
    width: 100%;
    height: 36px;
    transition: 0.3s;
    cursor: pointer;
}

.noitceedit >li:nth-child(1){
    border-radius: 6px 6px 0 0;
}

.noitceedit >li:last-child{
    border-radius: 0px 0px 6px 6px;
}


.noitceedit >li:last-child{
    border-bottom: 0;
}
.noticeeditico{
    display: inline-block;
    vertical-align: middle;
    width: 24px;
}

.noticeeditetit{
    font-size: 1.4rem;
    line-height: 20px;
    margin-left: 8px;
    color: #767676;
}

.noticeeditico{
    display: block;
    width: 16px;
}

.noticeeditico .ps{
    stroke: #767676;
}

.noticeeditico .notice_del{
    stroke: #767676;
}

.edit:hover{
    background-color: #f1f1f5;
}

.edit:hover .ps{
    stroke: #111;
}

.edit:hover .noticeeditetit{
    color: #111;
    font-weight: 600;
}

.noticeedit_del:hover{
    background-color: rgba(188, 0, 0,0.1);
}

.noticeedit_del:hover .notice_del{
    stroke: #dc0000;
}

.noticeedit_del:hover .noticeeditetit{
    color: #dc0000;
    font-weight: 600;
}

.datepickab{
    display: inline-flex;
    vertical-align: middle;
    width: 120px;
    height: 42px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    background-color: #fff;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.paydatepick{
    display: inline-block;
    vertical-align: middle;
    width: 22px;
}

.dtico{
    fill: #767676;
}

.datetit{
    display: block;
    font-size: 1.4rem;
    color: #505050;
    margin: 0 8px;
}

.datearrow{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    transition: 0.3s;
}

.datearrow.RateOn{
    transform: rotate(180deg);
}

.cardchoicearrow.RateOn{
    transform: rotate(180deg);
}

.paydatepickabb{
    position: absolute;
    top: 120%;
    left: 0;
    width: 320px;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    box-sizing: border-box;
    z-index: 12;
    display: none;
    padding: 0 20px;
    box-sizing: border-box;
}

.paydatepickabb .datepickList{
    width: 100%;
    margin: 12px auto 0;
    border: 1px solid #e5e5ec;
    border-radius: 6px;
    height: 42px;
    padding: 0 8px;
    box-sizing: border-box;
}

.paydtepicktit{
    font-size: 1.4rem;
    color: #767676;

}

.dppic{
    width: 90%;
    margin: 24px auto 0;
}

.dppicfit{
    width: 90%;
    margin: 24px auto 0;
}

.fillterdate{
    width: 100%;
    margin: 12px auto 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.fillterdate >li{
    display: inline-block;
    vertical-align: middle;
    width: 30%;
    margin-left: 12px;
}

.fillterdate >li:nth-child(3n+1){
    margin-left: 0;
}

.fillterdate >li:nth-child(n+4){
    margin-top: 12px;
}

.fillterdate >li:first-child{
    margin-left: 0;
}

.fillt{
    display: block;
    text-align: center;
    font-size: 1.4rem;
    line-height: 36px;
    color: #999;
    border-radius: 6px;
    border: 1px solid #e5e5ec;
}

.fillterdate >li.fillon .fillt{
    border: 1px solid #306AFF;
    color: #306AFF;
    font-weight: 600;
}

.dppbtnwrap{
    margin: 32px auto 0;
    padding: 20px 20px;
    box-sizing: border-box;
    border-top: 1px solid #e5e5ec;
}

.dppbtnwrap::after{
    display: block;
    content: "";
    clear: both;
}

.reset_dpp{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    transition: 0.3s;
}

.reset_dpp:hover{
    font-weight: 600;
    text-decoration: underline;
}

.sav_dpp{
    display: inline-block;
    vertical-align: middle;
    float: right;
    font-size: 1.4rem;
    color: #306AFF;
    font-weight: 600;
}


.cardsachoiceB{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    vertical-align: middle;
    width: 120px;
    border-radius: 6px;
    margin-left: 8px;
    cursor: pointer;
    position: relative;
}

.cardchoicetit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
}

.cardchoicearrow{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    margin-left: 8px;
    transition: 0.3s;
}

.cardabbox{
    position: absolute;
    top: 120%;
    left: 0;
    width: 350px;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 16px 20px 0 20px;
    z-index: 12;
    display: none;
}

.cardList{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 16px auto 0;
}
.cardList >li{
    width: 30%;
    vertical-align: middle;
    margin-left: 12px;
}

.cardList >li:nth-child(3n+1){
    margin-left: 0;
}

.cardList >li:nth-child(n+4){
    margin-top: 12px;
}

.cardbtn{
    display: flex;
    width: 100%;
    height: 42px;
    border: 1px solid #e5e5ec;
    border-radius: 6px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.cardico{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    cursor: pointer;

}

.cardtit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    margin-left: 8px;
    cursor: pointer;
    color: #999;
}

.cardList >li.cardon .cardbtn{
    border: 1px solid #306AFF;
}

.cardList >li.cardon .cardtit{
    color: #306AFF;
}

.sendaskB{
    display: inline-flex;
    vertical-align: middle;
    width: 100px;
    height: 42px;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    background-color: #306AFF;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

.sendaskB:hover{
    background-color: #2258E3;
}

.sendask{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    background-color: transparent;
    border-radius: 6px;
    padding: 6px 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.3s;
}

.sendbill{
    stroke: #4D3C00;
    stroke-width: 1px;
}

.sendasktit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    margin-left: 8px;
    font-weight: 600;
    color: #4D3C00;
}

.caseListB{
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
}

.caseList{
    width: 100%;
    display: flex;

    align-items: center;
    margin: 12px auto 0;
}

.caseList >li{
    display: inline-block;
    vertical-align: middle;
    width: calc(100%/8);
    background-color: rgba(21, 153, 72,0.03);
    border: 1px solid rgba(21, 153, 72,0.2);
    border-radius: 6px;
    margin-left: 12px;
    padding: 20px;
    box-sizing: border-box;
}


.caseList >li:first-child{
    margin-left: 0;
}


.casetit{
    display: block;
    font-size: 1.4rem;
    line-height: 20px;
    color: #306AFF;
}

.casenum{
    display: block;
    margin: 32px auto 0;
    text-align: right;
    font-size: 1.6rem;
    color: #111;
    font-weight: 600;
}

.tabcloseB{
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    background-color: #f1f1f5;
    border-radius: 50%;
    transition: 0.3s;
    cursor: pointer;
}

.tabcloseB:hover{
    background-color: rgba(220, 0, 0,0.1);
}

.tabcloseB svg{
    width: 8px;
    margin: 0 auto;
}
.tabcl{
    stroke: #111;
    stroke-width: 2px;
}

.tabcloseB:hover .tabcl{
    stroke: #dc0000;
}



.payment_cash_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 15;
    width: 500px;
    border-radius: 12px;
    display: none;
    padding-top: 32px;
    box-sizing: border-box;
}



.modal_cash_wrap{
    width: 94%;
    margin: 0 auto;
}

.cashTab{
    width: 100%;
}

.cashTab >li{
    display: inline-block;
    vertical-align: middle;
    margin-left: 12px;

}

.cashnam{
    display: block;
    font-size: 1.6rem;
    line-height: 42px;
    width: 100px;
    text-align: center;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    border-bottom: 2px solid #fff;
}

.cash00{
    width: 100%;
    margin: 32px auto 0;
}
.cashTab >li.cashtabon .cashnam{
    border-bottom: 2px solid #306AFF;
    color: #306AFF;
}

.cashputList{
    width: 100%;
    margin: 0 auto;
}


.cashputList >li{
    margin-top: 24px;
    position: relative;
}

.cashputList >li:first-child{
    margin-top: 0;
}
.cashmodaltit{
    font-size: 1.4rem;
    line-height: 24px;
    color: #767676;
}
.cashmodal{
    display: block;
    width: 100%;
    outline: none;
    border: 1px solid #e5e5ec;
    height: 42px;
    border-radius: 6px;
    padding: 0 8px;
    box-sizing: border-box;
}

.cashmodal::placeholder{
    color: #ccc;
}

.cashmodal + label{
    position: absolute;
    top: 24px;
    right: 16px;
    font-size: 1.4rem;
    line-height: 42px;
    display: none;
}

.select.cashmodal_sel{
    margin-left: 0;
    width: 100%;
}

.cashmodal_sel .search_custom{
    box-shadow: none;
}

.cashmodal_sel .search_custom >button{
    display: block;
    width: 100%;
    background-color: #fff;
    border: 1px solid #e5e5ec;
}

.cash_result{
    font-size: 1.4rem;
    min-height: 120px;
    max-height: 120px;
    line-height: 20px;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
}

.memo_cash{
    display: block;
    width: 100%;
    height: 100px;
    outline: none;
    border-radius: 6px;
    padding: 16px 20px;
    box-sizing: border-box;
    border: 1px solid #e5e5ec;
}

.cashtit{
    font-size: 1.8rem;
    line-height: 26px;
    font-weight: 600;
    margin: 24px auto ;
}

.cashmtit{
    display: block;
    font-size: 1.6rem;
    line-height: 24px;
    margin-top: 4px;
    color: #505050;
    letter-spacing: -0.4px;
}
.cashunderP{
    width: 100%;
    margin: 32px auto 0;
    padding: 16px 20px;
    box-sizing: border-box;
    border-top: 1px solid #e5e5ec;
    display: flex;
    align-items: center;
}

.cashunderP >*{
    margin-left: 12px;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 42px;
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}


.cashokbtn{
    background-color: #306AFF;
}

.cashclbtn{
    color: #999;
    background-color: #f7f7fb;
    margin-left: auto;
}

.cashclbtn:hover{
    background-color: #e5e5ec;
}

.cashokbtn:hover{
    background-color: #2258E3;
}

.cotnactwrap{
    width: 100%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    background-color: #fff;
    margin: 24px auto 0;
    border-radius: 12px 12px 0 0;
    min-height: 640px;
    max-height: 640px;
    overflow-y: auto;
}

.cotnactwrap .nonecase_wraper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: none;
}

.contactTable{
    width: 100%;
    margin: 0 auto;
}



.contactTable thead tr{
    background-color: #f1f1f5;
}


.contactTable thead tr th{
    height: 36px;
    font-size: 1.4rem;
    color: #505050;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
}


.contactTable tbody tr{
    border-bottom: 1px solid #e5e5ec;
    cursor: pointer;
}

.contactTable tbody tr td{
    height: 42px;
    font-size: 1.2rem;
    text-align: center;
    vertical-align: middle;
    padding: 0 4px;
    box-sizing: border-box;
    letter-spacing: 0;
    line-height: 18px;
}


.contact11{
    width: 100%;

}

.contact11 >li{
    padding: 16px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5ec;
    cursor: pointer;
}

.contactbefare{
    display: flex;
    align-items: center;

}

.num11{
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    font-size: 1.4rem;
    color: #767676;
}

.cantact11b{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 30px - 62px);
}

.contactcate{
    font-size: 1.4rem;
    line-height: 20px;
    color: #306AFF;
}

.contacttit{
    font-size: 1.8rem;
    line-height: 26px;
    font-weight: 600;

}


.contactway{
    font-size: 1.4rem;
    line-height: 20px;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.contacttit.contactnone{
    text-decoration: line-through;
    text-decoration-color: #111;
    color: #999;
}

.contactdate{
    margin-top: 8px;
    color: #767676;
    font-size: 1.4rem;

}

.contactdday{
    display: inline-block;
    vertical-align: middle;
    width: 42px;
    height: 42px;
    background-color: rgba(220, 0, 0,0.1);
    font-size: 1.4rem;
    text-align: center;
    color: #dc0000;
    border-radius: 50%;
    padding: 12px 0;
    box-sizing: border-box;
    font-weight: 600;
    margin-left: 12px;
}

.contactcomplet{
    background-color: #f7f7fb;
}

.contactafter{
    display: flex;
    padding: 0 40px;
    box-sizing: border-box;
    margin: 24px auto 0;
}

.contactrep{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;

}

.conafif{
    display: inline-block;
    vertical-align: middle;
    margin-top: 10px;
    margin-left: 8px;
}

.conafif_name{
    display: block;
    font-size: 1.4rem;
    color: #505050;
    line-height: 20px;
}

.conafif_date{
    display: block;
    font-size: 1.4rem;
    line-height: 20px;
    color: #767676;
    margin-top: 4px;
}

.conafway{
    display: inline-block;
    vertical-align: middle;
    margin-left: 24px;
    font-size: 1.4rem;
    margin-top: 10px;
    line-height: 20px;
    color: #505050;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.contactmodal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #f1f1f5;
    z-index: 15;
    border-radius: 12px;
    padding-bottom: 50px;
    display: none;
}


.contbeforepop{
    width: 90%;
    margin: 24px auto 0;
    padding: 16px 20px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 12px;
}

.contfileico{
    display: inline-block;
    vertical-align: middle;
    width: 24px;
}


.catecinf{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    font-weight: 600;
    color: #306AFF;
}
.cinfdate{
    display: inline-block;
    vertical-align: middle;
    margin-top: 2px;
    font-size: 1.4rem;
    line-height: 20px;
    color: #767676;
    margin-left: 12px;
}

.cinftit{
    width: 100%;
    margin-top: 8px;
    font-size: 2rem;
    line-height: 30px;
    color: #222;
    font-weight: 600;
}

.cinf{
    display: flex;
    align-items: center;
    padding: 12px 20px;
    box-sizing: border-box;
    border-top: 1px solid #e5e5ec;
    border-bottom: 1px solid #e5e5ec;
    margin-top: 24px;
}


.cinfoname{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
}

.cinfophnm{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    margin-left: 12px;
    line-height: 20px;
}

.cinfotxtB{
    display: block;
    font-size: 1.6rem;
    line-height: 24px;
    padding: 16px 20px;
    box-sizing: border-box;
    min-height: 150px;
    max-height: 200px;
    overflow-y: auto;
}

.contfileList{
    width: 100%;
    margin: 24px auto 0;
}

.contfileList >li{
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 24px;
    border: 1px solid #e5e5ec;
    padding: 6px 20px;
    box-sizing: border-box;
    border-radius: 6px;
    cursor: pointer;
}

.contfileList >li:first-child{
    margin-top: 0;
}

.contfiletxt{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    color: #505050;
    width: calc(100% - 42px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contfileico{
    display: inline-block;
    vertical-align: middle;
    width: 42px;
    height: 42px;
    background-color: transparent;
    border-radius: 50%;
    transition: 0.3s;
}

.contfileList >li:hover .contfileico{
    background-color: #f1f1f5;
}

.contfileico >svg{
    display: block;
    width: 16px;
    margin: 0 auto;
}

.contfile{
    stroke: #111;
    stroke-width: 1px;
}

.contafterpop{
    width: 90%;
    margin: 24px auto 0;
    padding: 16px 20px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 12px;
}

.contactaftertit{
    font-size: 1.8rem;
    line-height: 26px;
    font-weight: 600;
}

.contactxtar{
    display: block;
    font-size: 1.4rem;
    line-height: 20px;
    outline: none;
    border: 1px solid #e5e5ec;
    margin-top: 8px;
    border-radius: 6px;
    width: 100%;
    height: 150px;
    padding: 16px;
    box-sizing: border-box;
}

.filewrap{
    margin-top: 16px;
    width: 100%;
}

.filetop{
    width: 100%;
}

.filetop::after{
    display: block;
    content: '';
    clear: both;
}

.fileadd{
    float: right;
    cursor: pointer;
    width: 100px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: 0.3s;
    border-radius: 6px;
}

.fileaddtit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    margin-left: 8px;
}


.fileadd >svg{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
}

.fileaddic{
    stroke: #111;
    stroke-width: 1px;
}

.fileadd:hover{
    background-color: #306AFF;
}

.fileadd:hover .fileaddic{
    stroke: #4D3C00;
}

.fileadd:hover .fileaddtit{
    color: #4D3C00;
    font-weight: 600;
}

.fileupload{
    width: 100%;
    margin: 8px auto 0;
    display: none;
}

.fileupload >li{
    margin-top: 16px;
    border: 1px solid #e5e5ec;
    display: flex;
    align-items: center;
    height: 46px;
    padding: 0 8px;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 6px;
}

.noticeadwrap .fileupload >li input + label{
    width: 100%;
    cursor: pointer;
}

.fileupload >li
.fileuploadtit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    color: #ccc;
    width: calc(100% - 42px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fileuploadico{
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    background-color: transparent;
    border-radius: 50%;
    transition: 0.3s;
}

.fileuploadico svg{
    display: block;
    width: 16px;
    margin: 0 auto;
}

.papclip{
    stroke: #999;
    stroke-width: 1px;
}

.fileupload >li:hover .fileuploadico{
    background-color: #f1f1f5;
}

.fileupload >li:hover .papclip{
    stroke: #111;
}

.fileupclico{
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    background-color: transparent;
    border-radius: 50%;
    transition: 0.3s;
}

.fileupclico svg{
    display: block;
    width: 12px;
    margin: 0 auto;
}

.fcl{
    stroke: #999;
    stroke-width: 1px;
}

.fileupload >li:hover .fileupclico{
    background-color: rgba(220, 0, 0,0.1);
}

.fileupload >li:hover .fcl{
    stroke: #dc0000;
}

.con11un{
    width: 90%;
    margin: 24px auto 0;
    box-sizing: border-box;
}

.conaram{
    display: inline-block;
    vertical-align: middle;
}


.conaram input{
    display: none;
}

.conaram label{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    cursor: pointer;
    color: #111;
}

.conaram label::before{
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 20px;
    height: 20px;
    background-image: url('../img/checkoff.png');
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 12px;
}

.conaram >input:checked + label::before{
    background-image: url('../img/checkon.png');
}


.concomp{
    display: block;
    width: 40%;
    background-color: #306AFF;
    line-height: 46px;
    text-align: center;
    font-size: 1.6rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    margin: 24px auto 0;
}




/***포인트**/
.pointwrap{
    display: flex;
    margin: 24px auto 0;
}

.pointsearchwrap{
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
}

.pointsearchwrap .search_custom{
    box-shadow: none;
}

.pointsearchwrap .search_custom >button{
    border: 1px solid #e5e5ec;
    width: 120px;
}

.pointsearchwrap .datePick{
    box-shadow: none;
    border: 1px solid #e5e5ec;
}

.pointsearchwrap .serachwrap_b{
    box-shadow: none;
    border: 1px solid #e5e5ec;
}

.pointtablewrap{
    width: 100%;
    margin: 16px auto 0;
}



.pointvewico{
    display: inline-block;
    vertical-align: middle;
    width: 24px;
}

.pon01{
    fill: #dc0000;
}

.pon02{
    fill: #306AFF;
}

.point_result{
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    font-size: 2.4rem;
    line-height: 32px;
    font-weight: 600;

}
.point_result1{
    color: #dc0000;
}
.point_result2{
    color: #306AFF;
}

.pointdate{
    font-size: 1.4rem;
    line-height: 20px;
    color: #767676;
    letter-spacing: 0;
    margin-top: 12px;
}

.pointinfo{
    margin-top: 16px;
}

.pointname{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    
}

.pointphonenm{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    margin-left: 12px;
}

.pointwhy{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pointri{
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    margin-left: 20px;
    background-color: #fff;
    border-radius: 12px;
    padding: 16px;
    box-sizing: border-box;
}

.pointritop::after{
    display: block;
    content: "";
    clear: both;
}

.pointname{
    font-size: 2.4rem;
    line-height: 42px;
    font-weight: 600;
}

.pointexl{
    float: right;
}

.pointbreakdownList{
    width: 100%;
    margin: 16px auto 0;
}

.pointbreakdownList >li{
    margin-top: 16px;
    border-radius: 16px;
    padding: 20px;
    background-color: #e5e5ec;
}

.pointbreakdownList >li:first-child{
    margin-top: 0;
}

.pointbreakdownList >li.nowpoint{
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    background-color: #306AFF;
    border-radius: 20px;
}

.pointnow{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    font-weight: 600;
    width: 120px;
}

.nowpoint .pointnow{
    width: 100%;
}

.nowpoint .pointnownumB{
    width: 100%;
    color: #fff;
}

.nowpoint .pointnow{
    color: #fff;
}

.nowpoint .pointnownum{
    color: #fff;
}

.pointnownumB{
    display: inline-block;
    vertical-align: top;
    text-align: right;
    font-size: 1.6rem;
    line-height: 28px;
    width: calc(100% - 124px);
}

.pointnownum{
    display: inline-block;
    vertical-align: top;
    font-size: 2rem;
    line-height: 28px;
    letter-spacing: 0;
    margin-right: 2px;
    font-weight: 600;
}

.Chargingbtn{
    display: block;
    width: 100%;
    margin: 24px auto 0;
    background-color: #E9FFF1;
    border-radius: 6px;
    font-size: 1.4rem;
    line-height: 46px;
    font-weight: 600;
    text-align: center;
    color: #306AFF;
    cursor: pointer;
    transition: 0.3s;
}

.Chargingbtn:hover{
    background-color: #cbeed8;
}

.retbox{
    width: 100%;
    margin: 32px auto 0;
}

.retbox::after{
    display: block;
    content: '';
    clear: both;
}

.retunbtn{
    float: right;
    display: flex;
    width: 120px;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 6px;
    height: 42px;
    cursor: pointer;
}

.retunbtn:hover{
    background-color: #f7f7fb;
}

.retunbtn svg{
    width: 16px;
    display: inline-block;
    vertical-align: middle;
}

.rettit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    font-weight: 600;
    margin-left: 8px;
}



.logo00{
    fill: #fff;
}


.wrap_section.mainwrap{
    margin: 24px auto 0;
}

.wrap_section.mainwrap >div:first-child{
    margin: 0;
}
.stats_main{
    display: flex;
    width: 100%;
    margin: 24px auto 0;
}

.stats_chart{
    width: 63%;
    display: inline-block;
    vertical-align: middle;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    padding: 16px;
    box-sizing: border-box;
    border-radius: 12px;
}

#barChart_1{
    width: 100%;
    height: 200px;
}

.mainbanner{
    width: 40%;
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
    border-radius: 12px;
}

.mainbanner >img{
    border-radius: 12px;
}

.statsList{
    width: 100%;
    display: flex;
}

.statsList >li{
    display: inline-block;
    vertical-align: middle;
    width: calc(100%/5);
    margin-left: 20px;
}

.statsList >li:first-child{
    margin-left: 0;
}

.datestats{
    width: 100%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    background-color: #fff;
    border-radius: 12px;
    position: relative;
}

.datestsp{
    display: block;
    font-size: 1.6rem;
    padding: 16px 42px;
    box-sizing: border-box;
    outline: none;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    background-color: transparent;
    position: relative;
    z-index: 3;
    width: 100%;
}

.datestico{
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    width: 24px;
    cursor: pointer;
    z-index: 2;
}

.statesmonth{
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 4px 4px 0 rgba(0, 0, 0, 0.06);
    margin: 0px auto 0;
    padding: 24px 0;
    box-sizing: border-box;
    border-radius: 12px;
    height: 220px;
}

.statesmonth-icon{
    width: 24px;
    margin: 0 auto;
}

.sm{
    stroke: #306AFF;
    stroke-width: 1px;
}
.statesmonth-icon svg{
    width: 100%;
}
.statesmonth-txt{
    font-size: 1.6rem;
    line-height: 26px;
    text-align: center;
    color: #111;
    margin: 16px auto 0;
}

.statesmonth-num{
    margin: 4px auto 0;
    font-size: 2.4rem;
    line-height: 34px;
    font-weight: 800;
    font-family: 'GmarketSansMedium';
    text-align: center;
    padding: 0 16px;
    color: #306AFF;
}


.state-cate01{
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 16px;
}

.state-cate02{
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 16px;
    margin: 16px auto 0;
}

.state-cate_tit{
    font-size: 1.6rem;
    line-height: 24px;
    color: #505050;
}

.state-cate-number{
    font-size: 1.8rem;
    line-height: 26px;
    text-align: right;
    font-weight: 600;
}

.state-cate-won{
    font-size: 1.8rem;
    line-height: 26px;
    text-align: right;
    font-weight: 600;
    margin: 8px auto 0;
}
.state-cate01 .state-cate-number{
    margin: 30px auto 0;
}

.state-cate02 .state-cate_tit{
    display: inline-block;
    vertical-align: middle;

}

.state-cate02::after{
    display: block;
    content: '';
    clear: both;
}

.state-cate-stud{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.8rem;
    line-height: 26px;
    text-align: right;
    font-weight: 600;
    float: right;
}

.cancel_state .state-cate-number , .cancel_state .state-cate-won{
    color: #dc0000;
}

.ateendacemain{
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    max-height: 420px;
}

.attentTop{
    width: 100%;
    margin: 0 auto ;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
} 

.attentTop::after{
    display: block;
    content: "";
    clear: both;
}

.attentit{
    font-size: 2rem;
    line-height: 32px;
    font-weight: 600;
    width: 70%;
    display: inline-block;
    vertical-align: middle;
}

.allalarm{
    width: 110px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 6px;
    margin-left: auto;
}

.allalarm >svg{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
}

.allalarmtxt{
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    font-size: 1.4rem;
    line-height: 20px;
}

.allrm{
    stroke: #111;
    stroke-width: 1px;
}

.allalarm:hover{
    background-color: rgba(250, 201, 61,1);
}

.allalarm:hover .allrm{
    stroke: #4D3C00;
}

.allalarm:hover .allalarmtxt{
    color: #4D3C00;
}

.attenstedList{
    width: 100%;
    margin: 24px auto 0;
    padding: 0 16px 32px;
    box-sizing: border-box;
    max-height: 260px;
    overflow-y: auto;
}

.ateendacemain {
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    max-height: 382px;
}

.attenstedList >li{
    width: 100%;
    display: flex;
    align-items: center;
    margin: 16px auto 0;
}

.Flex_a{
    display: flex;
    align-items: center;
    width: calc(100% - 120px);
}

.attenstedList >li:first-child{
    margin: 0;
}

.sttdyes{
    display: inline-block;
    vertical-align: middle;
    border-radius: 6px;
    font-size: 1.6rem;
    line-height: 24px;
    width: 80px;
    line-height: 42px;
    text-align: center;
}

.sttdcolocr1{
    border: 1px solid #306AFF;
    color: #306AFF;
}

.sttdcolocr2{
    border: 1px solid #dc0000;
    color: #dc0000;
}

.attenstdinfo{
    display: inline-block;
    vertical-align: middle;
    width: 80%;
    margin-left: 24px;
}

.attenclassname{
    font-size: 1.6rem;
    line-height: 24px;
    font-weight: 600;
}

.attclassinfoB{
    display: flex;
    margin: 4px auto 0;
    align-items: end;
}

.attclassname{
    display: inline-block;
    vertical-align: middle;
    font-size: 2rem;
    line-height: 30px;
    font-weight: 600;
}

.attallarm{
    display: block;
    margin-left: auto;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    transition: 0.3s;
    cursor: pointer;
}

.attallarm:hover{
    background-color: #306AFF;
}

.attallarm >svg{
    display: block;
    width: 24px;
    margin: 0 auto;
}
.atttclassyear{
    margin-left: 20px;
    font-size: 1.6rem;
    line-height: 24px;
    color: #767676;
}

.attdash{
    margin: 0 8px;
    font-size: 1.4rem;
    line-height: 24px;
    font-weight: 600;
    color: #767676;
}

.attclassphone{
    font-size: 1.6rem;
    line-height: 24px;
    color: #767676;
}

.contactmain{

    margin-left: 20px;
    box-sizing: border-box;
}

.notice_main{
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    background-color: #fff;
    border-radius: 12px;
    padding: 16px;
}

.noticemain_top{
    width: 100%;
}

.noticemain_top::after{
    display: block;
    content: "";
    clear: both;
}

.noticemaintit{
    font-size: 2rem;
    line-height: 30px;
    font-weight: 600;
    display: inline-block;
    vertical-align: middle;
    width: 80%;
}

.noticeall{
    float: right;
    font-size: 1.4rem;
    line-height: 30px;
    color: #505050;
    transition: 0.3s;
    cursor: pointer;
}

.noticeall:hover{
    color: #111;
}

.noticemainList{
    width: 100%;
    margin: 16px auto 0;
    max-height: 340px;
    overflow-y: auto;
}

.noticemainList >li{
    margin-top: 16px;
}

.noticemainList >li:first-child{
    margin-top: 0;
}

.noticemainList >li a{
    display: flex;
    align-items: center;
}

.noticemainList >li a::after{
    display: block;
    content: "";
    clear: both;
}

.noticemainB{
    display: inline-block;
    vertical-align: middle;
    width: 98%;
}

.newico{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 24px;
    width: 24px;
    text-align: center;
    border-radius: 50%;
    background-color: #306AFF;
    color: #fff;
}

.noticemaintxt{
    display: block;
    width: 100%;
    font-size: 1.6rem;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.noticemaindate{
    display: block;
    margin: 4px auto 0;
    font-size: 1.4rem;
    line-height: 20px;
    color: #767676;
}

.contact11mainB{
    margin: 24px auto 0;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    background-color: #fff;
    border-radius: 12px;
    padding: 16px;
}

.contactmainList{
    margin: 24px auto 0;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
}

.contactmainList >li{
    margin-top: 16px;
}

.contactmainList >li:first-child{
    margin-top: 0;
}

.contactmainList >li >a{
    display: inline-block;
    vertical-align: middle;
    width: 80%;
}

.contactmain11tit{
    display: block;
    width: 100%;
    font-size: 1.6rem;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contactmain11date{
    display: block;
    margin: 4px auto 0;
    font-size: 1.4rem;
    line-height: 20px;
    color: #767676;
}

.answer{
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    text-align: center;
    font-size: 1.4rem;
    line-height: 42px;
    text-align: center;
    border-radius: 6px;
}

.answercolor1{
    color: #999;
    border: 1px solid #e5e5ec;
}

.answercolor2{
    color: #306AFF;
    border: 1px solid #306AFF;
}

/**관리중 사업장**/

.company_mage{
    width: 100%;
    background-color: #f1f1f5;
    padding: 80px 0 150px;
}

.wrap_company_mage{
    width: 400px;
    margin: 0 auto;
    position: relative;
}

.companywarning{
    width: 100%;
}

.companymage_ico{
    display: block;
    width: 40px;

}

.companymagetit{
    font-size: 2.4rem;
    line-height: 32px;
    font-weight: 600;
    margin-top: 16px;
}

.companymagemtit{
    font-size: 1.8rem;
    line-height: 26px;
    margin-top: 4px;
    font-weight: 500;
    color: #505050;
}

.cwagtxtList{
    width: 90%;
    margin-top : 16px;
    margin-left: 16px;
}

.cwagtxtList >li{
    list-style-type: disc;
    margin-top: 16px;
    font-size: 1.6rem;
    line-height: 24px;
    color: #767676;
}


.cwagtxtList >li:first-child{
    margin-top: 0;
}

.signupbtn{
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    margin-top: 80px;
    background-color: #ECF1FF;
    padding: 8px 12px;
    box-sizing: border-box;
    transition: 0.3s;
    border-radius: 6px;
    justify-content: center;
}

.signupbtn svg{
    display: inline-block;
    vertical-align: middle;
    width: 12px;
}

.signuptit{
    font-size: 1.6rem;
    font-weight: 600;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    color: #306AFF;
}

.signupbtn .addpath{
    stroke: #306AFF;
}


.signupbtn:hover{
    background-color: rgba(21, 153, 72,1);
}

.signupbtn:hover .addpath{
    stroke: #fff;
}

.signupbtn:hover .signuptit{
    color: #fff;
}

.companyList{
    width: 100%;
    margin: 0px auto 0;
    padding: 0 0 80px;
}
.companyList_wrap{
    width: 400px;
    position: relative;
    background-color: #fff;
    margin: 0 auto;
    box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.06);
    padding: 50px 16px;
    box-sizing: border-box;
    border-radius: 6px;
}

.companyList_wrap.addclass_x{
    margin: -60px auto 0;
}

.companytit{
    font-size: 1.8rem;
    line-height: 26px;
    font-weight: 600;
}

.ingcomList{
    width: 100%;
    margin: 16px auto 0
}

.ingcomList >li{
    width: 100%;
    padding: 24px 16px;
    box-sizing: border-box;
    border: 1px solid #e5e5ec;
    border-radius: 6px;
    margin-top: 16px;
}

.ingcomList >li:first-child{
    margin-top: 0;
}

.compnayname{
    font-size: 1.6rem;
    line-height: 24px;
    font-weight: 600;
}

.ingcombtnList{
    width: 100%;
    display: flex;
    margin: 24px auto 0;
}

.ingcombtnList >li{
    margin-left: 12px;
}
.ingcombtnList >li:first-child{
    margin-left: 0
}

.ingcombtnList >li >span{
    display: flex;
    align-items: center;
    height: 46px;
    justify-content: center;
    width: 100%;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}
.btn01{
    width: 40%;
}

.btn02{
    width: 60%;
}

.ingbtn{
    background-color: rgba(188, 0, 0,0.1);
}

.ingbtn:hover{
    background-color: rgba(188, 0, 0,0.3);
}

.ingedit{
    background-color: #ECF1FF;
}

.ingedit:hover{
    background-color: rgba(21, 153, 72,0.3);
}
.ingbtn svg{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
}

.ingedit svg{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
}


.ingbtntit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    margin-left: 8px;
    font-weight: 600;
}

.ingbtn .ingbtntit{
    color: #dc0000;
}



.ingbtn .notice_del{
    stroke: #dc0000;
}

.ingedit .ingbtntit{
    color: #306AFF;
}


.ingedit .ps{
    stroke: #306AFF;
}


.companymage_wrap{
    width: 100%;
    margin: 32px auto 0;
}

.magecomList{
    margin: 16px auto 0;
}

.magecomList >li{
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid #e5e5ec;
    width: 100%;
    margin-top: 16px;
    box-sizing: border-box;
    border-radius: 6px;
    transition: 0.3s;
    cursor: pointer;
}

.magecomList >li:hover{
    background-color: #ECF1FF;
}

.magecomList >li:first-child{
    margin-top: 0;
}

.comico{
    display: inline-block;
    vertical-align: middle;
    width: 42px;
}

.comico img{
    border-radius: 6px;
}

.magecomtit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    font-weight: 600;
    margin-left: 12px;
    width: calc(100% - 70px);
}

.magearrow{
    margin-left: auto;
    width: 24px;
}



.arro{
    stroke: #111;
    stroke-width: 1px;
}


.bookingmoney{
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
    background-color: #fff;
    margin: 24px auto 0;
}

.bookingmoney01{
    background-color: #f1f1f5;
    padding: 20px 20px 12px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-radius: 6px 6px 0 0;
}

.bookimgmoney02{
    background-color: #f1f1f5;
    padding: 12px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.bookimgmoney03{
    background-color: #f1f1f5;
    padding: 12px 20px 20px;
    box-sizing: border-box;
    border-radius: 0px 0px 6px 6px;
}

.bookimgmoney03::after{
    display: block;
    content: "";
    clear: both;
}



.bookmoneytit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
}

.bookmoneytxt{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    margin-left: auto;
}

.bookmoneywontxt{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
}

.wrapper {
    text-align: center;
    float: right;
}

.switchtxt{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 30px;
}
#switch {
    position: absolute;
    /* hidden */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.switch_label {
    position: relative;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    width: 58px;
    height: 28px;
    background-color: #fff;
    border: 1px solid #e5e5ec;
    border-radius: 20px;
    transition: 0.2s;
    margin-left: 16px;
}
.switch_label:hover {
    background: #fff;
}
.onf_btn {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #999;
    transition: 0.2s;
}

  /* checking style */
#switch:checked+.switch_label {
    background: #306AFF;
    border: 1px solid #306AFF;
}

#switch:checked+.switch_label:hover {
    background: rgba(21, 153, 72,0.5);
}

  /* move */
#switch:checked+.switch_label .onf_btn {
    left: 34px;
    background: #fff;
    box-shadow: 1px 2px 3px #00000020;
}


.billClass_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #f7f7fb;
    width: 400px;
    z-index: 20;
    border-radius: 12px;
    padding-bottom: 32px;
    display: none;
}

.classx{
    float: right;
    width: 42px;
    height: 42px;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    padding: 10px 0;
    box-sizing: border-box;
    transition: 0.3s;
    cursor: pointer;
}

.billClass_modal .classinqList >li.bgon{
    cursor: pointer;
    background-color: #ECF1FF;
}

.billClass_modal .hdprodList >li.bgon{
    cursor: pointer;
    background-color: #ECF1FF;
}

.settingDropDown{
    width: 150px;
    position: fixed;
    top: 56px;
    right: 20px;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    z-index: 18;
    border-radius: 16px;
    display: none;
}

.compnayadd_btn{
    width: 94%;
    margin: 16px auto 0;

}

.compdbtn{
    width: 100%;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(250, 201, 61,0.2);
    border-radius: 16px;
    transition: 0.3s;
}

.compdbtn:hover{
    background-color: rgba(250, 201, 61,0.4);
}

.compdico{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
}

.compdtxt{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    margin-left: 12px;
}

.gallery{
    margin: 24px auto 0;
}

.galleryTop::after{
    display: block;
    content: "";
    clear: both;
}

.galleryaddBtn{
    float: right;
    width: 88px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #306AFF;
    border-radius: 6px;
    transition: 0.3s;
    cursor: pointer;
}

.galleryaddBtn svg{
    display: inline-block;
    vertical-align: middle;
    width: 12px;
}

.galleryaddBtn:hover{
    background-color: #2258E3;
}

.galleryList{
    width: 100%;
    margin: 0 auto ;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.galleryList >li{
    display: inline-block;
    vertical-align: middle;
    width: calc(100%/6 - 16px);
    margin-left: 16px;
    margin-top: 20px;
    cursor: pointer;
    
}

.gallery{
    width: 100%;

}

.gallery img{
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.galleryList >li:first-child{
    margin-left: 0;
}

.galleryList >li:nth-child(6n+1){
    margin-left: 0;
}

.galleryList >li:nth-child(1):nth-child(6){
    margin-top: 0;
}

.gallerytit{
    font-size: 1.6rem;
    line-height: 24px;
    margin-top: 8px;
    font-weight: 600;
}

.AddGallery{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 70%;
    min-height: 800px;
    max-height: 800px;
    background-color: #fff;
    transform: translate(-50%,-50%);
    border-radius: 16px;
    z-index: 11;
    display: none;
}

.addgallery_bx{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin-top: 24px;
}

.addgallery_bx >input{
    display: block;
    width: 100%;
    outline: none;
    height: 48px;
    border: 1px solid #e5e5ec;
    border-radius: 12px;
    background-color: #f7f7fb;
    text-indent: 16px;
    font-size: 1.6rem;
    line-height: 24px;
}

.addgallery_bx >input::placeholder{
    color: #ccc;
}

.gcl{
    stroke-width: 1px;
    fill: #fff;
}

.gimg_closebtn{
    width: 28px;
    height: 28px;
    position: absolute;
    top: 12px;
    right: 12px;
    display: block;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 20;
    border-radius: 50%;
    transition: 0.3s;
    cursor: pointer;
}

.gimg_closebtn:hover{
    background-color: rgba(0, 0, 0, 1);
}

.gimg_closebtn svg{
    width: 16px;
    display: block;
    margin: 0 auto;
    padding: 6px 0;
    box-sizing: border-box;
}

.addGB{
    width: 100%;
    margin: 24px auto 0;
    min-height: 540px;
}
.addgalleryList{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    max-height: 540px;
    overflow-y: auto;
}

.addgalleryList >li{
    display: inline-block;
    vertical-align: middle;
    width: calc(100%/8 - 16px);
    margin-left: 16px;
    margin-top: 20px;
    cursor: pointer;
    position: relative;
}

.addgalleryList >li:first-child{
    margin-left: 0;
}

.addgalleryList >li:nth-child(8n+1){
    margin-left: 0;
}

.addgalleryList >li:nth-child(n+1):nth-child(-n+8){
    margin-top: 0;
}

.galleryImg_add{
    width: 100%;
    aspect-ratio: auto 1 / 1;
    overflow: hidden;
}


.galleryImg_add img{
    width: 100%;
    border-radius: 12px;
    display: block;
    margin: auto;
}

.plus_gallery{
    width: 100%;
    aspect-ratio: auto 1 / 1;
}

.plus_g_ico{
    display: block;
    padding: 46px 0;
    box-sizing: border-box;
}


.plus_g_ico svg{
    display: block;
    width: 50px;
    margin: 0 auto;

}

.plg{
    stroke-width: 1.3px;
    stroke: #999;
    transition: 0.3s;
}

.plus_g_ico svg:hover .plg{
    stroke: #306AFF;
}

.gupbtn{
    display: block;
    width: 250px;
    line-height: 52px;
    text-align: center;
    background-color: #306AFF;
    color: #4D3C00;
    font-weight: 600;
    font-size: 1.6rem;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
    margin: 24px auto 0;
}

.gupbtn:hover{
    background-color: #2258E3;
}

.photoview{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 16;
}

.photo{
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('../img/test01.png');
    background-repeat: no-repeat;
    background-size: fit;
    background-position: center;
}

.viewGallery{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 70%;
    min-height: 800px;
    max-height: 800px;
    background-color: #fff;
    transform: translate(-50%,-50%);
    border-radius: 16px;
    z-index: 11;
    display: none;
}

.videoView{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 16;
}



.video_gall{
    height: 100%;
}

.dashboardTxtb{
    width: 100%;
    margin: 24px auto 0;
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
}

.dashboardt{
    width: 100%;
    font-size: 2rem;
    line-height: 30px;
    text-align: center;
}

.dash_t{
    font-weight: 600;
}

.statsList_dashboard{
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 24px auto 0;
}

.statsList_dashboard >li{
    width: 33%;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 12px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    margin-left: 16px;
    padding: 20px;
    box-sizing: border-box;
}

.statsList_dashboard >li:first-child{
    margin-left: 0;
}

.paystats{
    width: 100%;
    margin: 24px auto 0;
}

.paystats >li{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    background-color: #fff;
    border-radius: 12px;
    min-height: 40vh;
}

.paystats >li:nth-child(2){
    margin-top: 24px;
}

.date_stats{
    margin-top: 16px;
    display: flex;
    align-items: center;
}


.statstit{
    font-size: 2rem;
    line-height: 28px;
    font-weight: 600;
}

.datestatsico{
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
}

.datestatsico >svg{
    width: 100%;
    cursor: pointer;
}

.datestatsico01{
    margin-right: 12px;
}

.datestatsico02{
    margin-left: 12px;
}

.sta01{
    stroke-width: 1.3px;
    stroke: #999;
    transition: 0.3s;
}

.datestatsico >svg:hover .sta01{
    stroke: #111;
}

.date_stats_txt{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.8rem;
    line-height: 26px;
    font-weight: 600;
}

.Instructortit{
    font-size: 2rem;
    line-height: 30px;
    margin-top: 24px;
    font-weight: 600;
}

.Instructortit >span{
    display: inline-block;
    vertical-align: top;
    font-size: 2rem;
    line-height: 30px;
    font-weight: 600;
}

.instmonth_stats{
    width: 100%;
    margin: 16px auto 0;
    display: flex;

}

.instmonth_stats >li{
    display: inline-block;
    vertical-align: middle;
    width: 33%;
    margin-left: 20px;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 12px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
}

.instmonth_stats >li:first-child{
    margin-left: 0;
}

.instmonthtit{
    font-size: 1.8rem;
    text-align: center;
    line-height: 26px;
    font-weight: 600;
}

.instmonth_stats >li >div{
    margin-top: 16px;
}

.statsunit{
    font-size: 1.4rem;
    line-height: 20px;
    text-align: right;
    padding: 0 10px;
    box-sizing: border-box;
}

.stats_table_wrap{
    width: 100%;
    margin: 24px auto 0;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 12px;
    min-height: 48vh;
    max-height: 48vh;
    padding: 20px 0;
}

.stasts_table{
    width: 100%;
    margin: 16px auto 0;
    box-sizing: border-box;
}

.stasts_table thead tr{
    background-color: #f1f1f5;
}

.stasts_table thead tr th{
    height: 38px;
    font-size: 1.4rem;
    line-height: 20px;
    vertical-align: middle;
    color: #505050;
    font-weight: 600;
}

.stasts_table tbody tr{
    border-bottom: 1px solid #e5e5ec;
}

.stasts_table tbody tr td{
    height: 35px;
    font-size: 1.4rem;
    line-height: 20px;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}


.reportChart{
    width: 100%;
    margin: 24px auto 0;
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
}

.reportchartHalf{
    width: 100%;
    margin: 24px auto 0;
    display: flex;
    
}

.reportchartHalf >li{
    display: inline-block;
    vertical-align: middle;
    background-color: #fff;
    margin-left: 20px;
    border-radius: 12px;
}


.reportchartHalf >li:first-child{
    margin-left: 0;
    padding: 20px;
    box-sizing: border-box;
    width: 70%;
}

.reportchartHalf >li:nth-child(2){
    padding: 20px 0;
    box-sizing: border-box;
    width: 30%;
}

.reporttit{
    font-size: 1.8rem;
    line-height: 26px;
    text-align: center;
    font-weight: 600;
}

.report_table_wrap{
    width: 100%;
    min-height: 380px;
    max-height: 380px;
    overflow-y: auto;
}

.charWrap{
    height: 330px;
    overflow: hidden;
}

.report_table{
    width: 100%;
    margin: 24px auto 0;
    overflow-y: auto;
}

.report_table thead tr{
    background-color: #f1f1f5;
}

.report_table thead tr th{
    height: 38px;
    font-size: 1.4rem;
    line-height: 20px;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    font-weight: 600;
    color: #505050;
}

.report_table tbody tr{
    border-bottom: 1px solid #e5e5ec;
}

.report_table tbody tr td{
    height: 35px;
    font-size: 1.4rem;
    line-height: 20px;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

.reportyear{
    width: 100%;
}

.reportyear{
    font-size: 1.8rem;
    line-height: 26px;
    font-weight: 600;
    margin-right: 4px;
}

.hlfchartList{
    width: 100%;
    display: flex;
    margin: 24px auto 0;
}

.hlfchartList >li{
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}

.hlfchartList >li:last-child{
    background-color: #fff;
    padding: 20px 0;
    margin-left: 20px;
    border-radius: 12px;
}

.hlfchartList >li .report_table{
    margin-top: 0;
}

.updownChart{
    width: 100%;
}

.updownChart >li{
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 12px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
}


.updownChart >li:last-child{
    margin-top: 24px;
}

.updownChart >li .Instructortit{
    margin-top: 0;
}

.updownChart >li >div{
    margin-top: 24px;
}


/**탈퇴하기 팝업 추가 ***/
.memout_pop{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 600px;
    transform: translate(-50%,-50%);
    background-color: #fff;
    border-radius: 12px;
    padding: 0 20px 20px 20px;
    box-sizing: border-box;
    display: none;
    z-index: 12;
}

.memtxt{
    font-size: 1.6rem;
    line-height: 24px;
    margin-top: 32px;
    color: #767676;
}




.memoutTable{
    width: 100%;
    margin: 24px auto 0;
    border: 1px solid #e5e5ec;
    box-sizing: border-box;
}


.memoutTable thead tr{
    background-color: #f1f1f5;
}

.memoutTable thead tr th{
    font-size: 1.6rem;
    line-height: 24px;
    height: 38px;
    vertical-align: middle;
    color: #767676;
    font-weight: 600;
}

.memoutTable tbody tr{
    border-bottom: 1px solid #e5e5ec;
}

.memoutTable tbody tr:last-child{
    border-bottom: 0;
}

.memoutTable tbody tr td{
    height: 35px;
    font-size: 1.4rem;
    line-height: 20px;
    vertical-align: middle;
    border-right: 1px solid #e5e5ec;
    text-align: center;
}

.memoutTable tbody tr td:last-child{
    border-right: 0;
}


/***여기까지 ****************/

#confirmPop{
    z-index: 30;
}


/***토글 스위치 ************/

.togglewrap{
    display: inline-block;
    vertical-align: middle;
    margin-right: 16px;
}

.togglebtn_txt{
    display: inline-block;
    vertical-align: top;
    font-size: 1.4rem;
    line-height: 36px;
    margin-right: 12px;
}


.togglebtn{
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.togglebtn input{
    display: block;
    appearance: none;
    border-radius: 20px;
    background-color: #f7f7fb;
    width: 58px;
    height: 36px;
    border: 1px solid #e5e5ec;
    transition: 0.3s;
}

.togglebtn input:checked{
    background-color: #306AFF;
    border: 1px solid #306AFF;
}

.togglebtn input:checked + label{
    left: 30px;
    background-color: #fff;
}

.togglebtn label{
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #e5e5ec;
    transform: translateY(-50%);
    z-index: 2;
    transition: 0.3s;
    cursor: pointer;
}


/**서비스 1:1 문의 ***/

.service_contact{
    width: 100px;
    background-color: #306AFF;
    display: inline-flex;
    margin-left: auto;
    border-radius: 6px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}

.service_contact:hover{
    background-color: #2258E3;
}


.contactnewmodal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 600px;
    max-height: 800px;
    overflow-y: auto;
    background-color: #f1f1f5;
    z-index: 15;
    border-radius: 12px;
    padding-bottom: 50px;
    display: none;
}


.contact_form {
    width: 90%;
    margin: 24px auto 0;
    padding: 16px 20px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 12px;
}

.contact_form .contactSel{
    width: 100%;
    margin-left: 0;
}

.contact_form .selSearch_list{
    max-height: 200px;
    overflow-y: auto;
}

.contact_form .selbtn00{
    border: 1px solid #e5e5ec;
}

.contact_form .search_custom{
    box-shadow: none;
}

.contact_way{
    font-size: 1.4rem;
    width: 100%;
    border: 1px solid #e5e5ec;
    margin: 24px auto 0;
    background-color: #fff;
    height: 300px;
    padding: 10px 16px;
    box-sizing: border-box;
    border-radius: 6px;
    outline: none;
}

.contact_way::placeholder{
    color: #ccc;
}

.fileaddWrap{
    width: 100%;
    margin: 24px auto 0;
}

.fileaddTop{
    width: 100%;
}

.fileaddTop::after{
    display: block;
    content: "";
    clear: both;
}

.filetit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    font-weight: 600;
}

.plusFile{
    display: inline-block;
    vertical-align: middle;
    float: right;
    width: 36px;
    height: 36px;
    background-color: #306AFF;
    transition: 0.3s;
    border-radius: 6px;
    cursor: pointer;
}

.plusFile svg{
    display: block;
    width: 16px;
    margin: 0 auto;
}

.plusFile:hover{
    background-color: #2258E3;
}

.filefindWrap{
    margin: 16px auto 0;
    display: none;
}

.filefindWrap input{
    background-color: #fff;
    width: calc(100% - 90px);
}

.contact_btn{
    width: 150px;
    margin: 60px auto 0;
    line-height: 52px;
    background-color: #306AFF;
    cursor: pointer;
    font-size: 1.6rem;
    text-align: center;
    display: block;
    font-weight: 600;
    border-radius: 6px;
    transition: 0.3s;
}

.contact_btn:hover{
    background-color: #2258E3;
}

.delete_modal_wrap{
    width: 90%;
    margin: 24px auto 0;
}

.delete_modal_wrap::after{
    display: block;
    content: "";
    clear: both;
}

.contactdel{
    float: right;
    width: 36px;
    height: 36px;
    background-color: #ffeeee;
    border-radius: 6px;
    padding: 5px 0;
    box-sizing: border-box;
    cursor: pointer;
}

.contactdel svg{
    width: 24px;
    display: block;
    margin: 0 auto;
}

.contactdel .st1{
    stroke: #bc0000;
}

.contactdel .st0{
    stroke: #bc0000;
}

.delete_modal_wrap .bubbleB{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 36px);
    padding: 0;
    margin: 0;
}

.note-editor.note-frame, .note-editor.note-airframe {
    border: 1px solid #e5e5ec !important;
    margin: 24px auto 0;
    border-radius: 12px;
}

.note-toolbar {
    border-bottom: 1px solid #e5e5ec !important;
    color: #222 !important;
    background-color: #f7f7fb !important;
    border-color: #e5e5ec !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important ;
}

.note-modal-backdrop{
    display: none !important;
}

.delete_modal_wrap .bubbleB{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 36px);
    padding: 0;
    margin: 0;
}

.notice_view .contfileList{
    width: 500px;
    margin: 80px 0 0;
}

.file_down {
    display: flex;
    align-items: center;
    width: 100%;
}

.nonecase_wraper.nonecase_h {
    min-height: 550px;
    max-height: 550px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.addbillunder{
    width: 100%;
    margin: 32px auto 0;
    background-color: #fff;
    border-radius: 0 0 12px 12px;
    padding: 12px 0;
    box-sizing: border-box;
}

.addbillunder::after{
    display: block;
    content: "";
    clear: both;
}

.underbtnList{
    width: 300px;
    display: flex;
    float: right;
    justify-content: flex-end;
    margin-right: 20px;
}

.underbtnList >li{
    display: inline-block;
    vertical-align: middle;
    margin-left: 16px;
    width: 50%;
}

.underbtnList >li:first-child{
    margin-left: 0;
}

.underB00{
    display: block;
    font-size: 1.6rem;
    line-height: 48px;
    background-color: #306AFF;
    width: 100%;
    cursor: pointer;
    text-align: center;
    border-radius: 12px;
    font-weight: 600;
    transition: 0.3s;
    letter-spacing: -0.4px;
    color: #fff;
}

.underB00:hover{
    background-color: #2258E3;
}

.nomal_select{
    display: block;
    width: 100%;
    outline: none;
    background-color: #fff;
    border: 1px solid #e5e5ec;
    height: 40px;
    font-size: 1.3rem;
    text-align: left;
    padding-left: 8px;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.3s;
}


/***취소 팝업****/

.payment_cancel{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 12;
    padding: 24px 20px 32px;
    box-sizing: border-box;
    border-radius: 12px;
    width: 350px;
    display: none;
}

.canPutPW{
    display: block;
    width: 100%;
    margin: 24px auto 0;
    outline: none;
    border: 1px solid #e5e5ec;
    height: 48px;
    font-size: 1.4rem;
    line-height: 20px;
    text-indent: 16px;
    border-radius: 6px;
    padding-right: 16px;
    box-sizing: border-box;

}

.canPutPW::placeholder{
    color: #ccc;
}

.payment_breakdown{
    width: 100%;
    margin: 24px auto 0;
    padding: 24px 20px 32px;
    box-sizing: border-box;
    background-color: #f7f7fb;
    border-radius: 12px;
}

.paymentdate{
    font-size: 1.4rem;
    line-height: 20px;
    color: #767676;
}

.paymentmoney{
    display: flex;
    align-items: center;
    margin: 8px auto 0;
}

.payementnm{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.8rem;
    font-weight: 600;
}

.payementwon{
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;
    font-size: 1.4rem;
    color: #505050;
}

.approvalwrap{
    display: flex;
    align-items: center;
    margin: 8px auto 0;
}

.approvaltit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    color: #767676;
}

.approval_nm{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    color: #767676;
    margin-left: 8px;
}

.bill_lecture{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f7f7fb;
    z-index: 18;
    padding: 0 0px 32px;
    box-sizing: border-box;
    border-radius: 12px;
    width: 500px;
    display: none;
}

.bill_lecture .stinfolf{
    display: flex;
    align-items: center;
    width: 100%;
}

.bill_lecture .studnumber{
    display: inline-block;
    vertical-align: middle;
    margin-top: 0;
    font-weight: 600;
    color: #306AFF;
    margin-left: auto;
}

.monbitn{
    width: 100%;
    background-color: #fff;
    border: 1px solid #306AFF;
    color: #306AFF;
    line-height: 42px;
    border-radius: 6px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}


.monbitn:hover{
    background-color: #306AFF;
    color: #fff;
}

.billclsbt{
    float: right;
    width: 42px;
    height: 42px;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    padding: 10px 0;
    box-sizing: border-box;
    transition: 0.3s;
    cursor: pointer;
}


#loadSpinner{
    width: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(20px);
    z-index: 9999999;
    padding: 32px 0;
    box-sizing: border-box;
    border-radius: 24px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08);
}

.Spinnderimg{
    width: 200px;
    margin: 24px auto 0;
}

.loadSpinnerTit{
    text-align: center;
    font-size: 2.4rem;
    font-weight: 600;
}

.loadSpinnerMtit{
    font-size: 1.8rem;
    line-height: 24px;
    margin-top: 16px;
    color: #505050;
    text-align: center;
}


.txtArea{
    border: 1px solid #e5e5ec;
    outline: none;
    padding: 16px;
    box-sizing: border-box;
    height: 100px;
    display: block;
    width: 100%;
    border-radius: 6px;
}

.cash01{
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
}

.cashmodal.disabled{
    cursor: default;
    background-color: #e5e5ec;
}

.txtArea.disabled{
    cursor: default;
    background-color: #e5e5ec;
}

.billcancl{
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    margin: 4px auto;
    background-color: #f7f7fb;
    border-radius: 50%;
    padding: 4px 0;
    box-sizing: border-box;
    transition: 0.3s;
    cursor: pointer;
    margin-left: 8px;
}

.billcancl:hover{
    background-color: #ffefef;
}

.billcancl svg{
    width: 24px;
    display: block;
    margin: 0 auto; 
}

.billcancl:hover .bi{
    stroke: #dc0000;
}
.billcancl:hover .bi2{
    stroke: #dc0000;
}

.paycancell_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 15;
    width: 400px;
    border-radius: 12px;
    padding-top: 32px;
    box-sizing: border-box;
    display: none;
}

.paycancell_modal .bring_top{
    padding: 0 20px;
    box-sizing: border-box;
}

.payif{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 24px auto 0;
}

.payiflist{
    width: 100%;
    border: 1px solid #e5e5ec;
    background-color: #f7f7fb;
    padding: 0 20px;
    box-sizing: border-box;
    border-radius: 12px;
}

.payiflist >li{
    padding: 16px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.payiftit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 24px;
    color: #505050;
}

.paytxt{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    margin-left: auto;
    font-weight: 400;
}

.paycarder{
    margin-left: 8px;
}

.paycashMoney{
    text-align: right;
}

.paycanlpwWrap{
    margin: 32px auto 0;
    width: 100%;
}

.pcnput{
    display: block;
    width: 100%;
    outline: none;
    border: 1px solid #e5e5ec;
    height: 42px;
    padding: 0 16px;
    box-sizing: border-box;
    font-size: 1.4rem;
    border-radius: 12px;
}

.pcnput::placeholder{
    color: #ccc;
}

.statstableB{
    min-height: 410px;
    max-height: 410px;
    overflow-y: auto;
}

/***포인트***/

.ApWrap{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    margin: 24px auto 0;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
}


.apToplf_top{
    display: flex;
    align-items: center;
}

.aptit{
    font-size: 1.6rem;
    line-height: 24px;
    font-weight: 600;
}

.questionmark{
    display: inline-block;
    vertical-align: middle;
    margin-left: 12px;
    position: relative;
}

.questionabbox{
    position: absolute;
    top: 120%;
    padding: 16px;
    box-sizing: border-box;
    background-color: #444;
    border-radius: 6px;
    z-index: 3;
    display: none;
    width: 250px;
}

.apToplf_top .questionabbox{
    left: 0;
}

.apTopri_top .questionabbox{
    right: 0;
}


.qmarkico{
    display: block;
    width: 24px;
    cursor: pointer;
}

.qmrk{
    stroke: #111;
    stroke-width: 1px;
}



.qutxt{
    font-size: 1.4rem;
    line-height: 20px;
    color: #fff;
    letter-spacing: -0.35px;
}

.qmarkico:hover + .questionabbox{
    display: block;
}

.apToplf_under{
    width: 100%;
    margin-top: 16px;
}

.pointList{
    width: 100%;
    display: flex;
    align-items: flex-start;
}

.pointList >li{

    border-radius: 12px;
    margin-left: 12px;
    width: 200px;
}

.pointList >li:first-child{
    margin-left: 0;
}


.pnmc{
    background-color: #eaf8ef;
    padding: 20px;
    box-sizing: border-box;
}

.pbtit{
    font-size: 1.6rem;
    line-height: 24px;
    letter-spacing: -0.4px;
    text-align: center;
    font-weight: 500;
}

.pointnmB{
    display: flex;
    align-items: center;
    justify-content: right;
    margin-top: 16px;
}

.pointnm{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    letter-spacing: 0;
    font-weight: 600;
    color: #306AFF;
}

.pointP{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    letter-spacing: 0;
    font-weight: 600;
    color: #306AFF;
    margin-left: 8px;
}

.pcbtn{
    display: block;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 52px;
    background-color: #306AFF;
    color: #fff;
    text-align: center;
    border-radius: 12px;
    transition: 0.3s;
    cursor: pointer;
}

.pcbtn:hover{
    background-color: #002c11;
}

.apTopri_top{
    display: flex;
    align-items: center;
}

.aptopRi{
    margin-left: auto;
}

.apTopri_under{
    margin-top: 16px;
}

.refund{
    display: block;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 52px;
    background-color: #306AFF;
    color: #fff;
    text-align: center;
    border-radius: 12px;
    transition: 0.3s;
    cursor: pointer;
}

.refund:hover{
    background-color: #002c11;
}

.modal_pointadd{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    background-color: #fff;
    transform: translate(-50%,-50%);
    z-index: 16;
    border-radius: 12px;
    padding-bottom: 32px;
    display: none;
}

.pcharMd_under{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.pointchoiceList{

}

.pointchoiceList >li{
    display: inline-block;
    vertical-align: middle;
    width: 30%;
    margin-left: 16px;
    margin-top: 16px;
}

.pointchoiceList >li:nth-child(3n+1){
    margin-left: 0;
}

.pointchoiceList >li:nth-child(n+1)::nth-child(n+3){
    margin-top: 0;
}

.pchtit{
    font-size: 1.6rem;
    line-height: 24px;
    letter-spacing: -0.4px;
    text-align: center;
    color: #505050;
}

.pntchoicebt{
    display: block;
    background-color: #fef3d2;
    text-align: center;
    border-radius: 12px;
    line-height: 42px;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0px;
    cursor: pointer;
}

.pointchoiceList >li.PTCHON .pntchoicebt{
    background-color: #306AFF;
}

.chargeinfoB{
    width: 100%;
    margin: 32px auto 0;
}

.chargeList{
    width: 100%;
}

.chargeList >li{
    margin-top: 16px;
    display: flex;
    align-items: center;
}

.chargeList >li:first-child{
    margin-top: 0;
}

.chargetit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 20px;
    letter-spacing: -0.4px;
}

.chargenm{
    display: inline-block;
    vertical-align: middle;
    margin-left: auto;
}

.chargepoinTxt{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0;
}

.chargepointP{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0;
    margin-left: 4px;
}

.paying{
    display: block;
    width: 200px;
    text-align: center;
    line-height: 48px;
    background-color: #306AFF;
    margin: 32px auto 0;
    font-size: 1.6rem;
    color: #4D3C00;
    letter-spacing: -0.4px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
}

.paying:hover{
    background-color: #2258E3;
}

/**환불신청**/

.RufoundModal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 400px;
    background-color: #f7f7fb;
    border-radius: 12px;
    padding-bottom: 32px;
    box-sizing: border-box;
    display: none;
    z-index: 15;
}

.billg{
    width: 90%;
    margin: 32px auto 0;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 12px;
}

.linedash{
    display: block;
    width: 100%;
    height: 1px;
    border-bottom: 2px dashed #e5e5ec;
    margin: 12px 0;
}

.chargetit.bold{
    font-weight: 500;
    font-size: 1.6rem;
}

.chargepoinTxt.bold{
    font-weight: 600;
    font-size: 1.6rem;
    color: #dc0000;
}

.chargepointP.bold{
    font-weight: 600;
    font-size: 1.6rem;
    color: #dc0000;
}

.billPolicyWrap{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 32px auto 0;
}

.policy{
    font-size: 1.4rem;
    line-height: 20px;
    color: #505050;
    letter-spacing: -0.35px;
}

.refoundinfoModal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 400px;
    background-color: #fff;
    border-radius: 12px;
    padding-bottom: 32px;
    box-sizing: border-box;
    z-index: 15;
    display: none;
}

.refoundinfomation{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.refoundinfoChoice{
    margin: 32px auto 0;
    width: 100%;
}

.refoundinfoChoice >li{
    margin-top: 24px;
}

.refoundinfoChoice >li:first-child{
    margin-top: 0;
}

.refoundtit{
    font-size: 1.4rem;
    line-height: 20px;
    margin-bottom: 8px;
    letter-spacing: -0.35px;
    display: block;
}

.refoundChoice{
    width: 100%;
    outline: none;
    height: 42px;
    padding-left: 16px;
    border: 1px solid #e5e5ec;
    display: block;
    box-sizing: border-box;
    border-radius: 12px;
    font-size: 1.4rem;
    letter-spacing: -0.35px;
}

select.refoundChoice{
    cursor: pointer;
}

.refoundChoice::placeholder{
    color: #ccc;
}

.refoundinfoModal .billPolicyWrap{
    padding: 0;
}

.refoundComplet{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 400px;
    background-color: #fff;
    border-radius: 12px;
    padding-bottom: 32px;
    box-sizing: border-box;
    z-index: 15;
    display: none;
}

/*****************/


/**강의선택 버튼 수정****/

.fill001{
    fill: #306AFF;
    transition: 0.3s;
}

.strokeW001{
    stroke-width: 1.5px;
}
.strokeC001{
    stroke: #306AFF;
    transition: 0.3s;
}

.strokeW002{
    stroke-width: 7px;
}

.svgtxt{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    font-weight: 600;
    margin-left: 8px;
    color: #306AFF;
    transition: 0.3s;
    letter-spacing: -0.35px;
    line-height: 24px;
    position: relative;
}


.let{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 42px;
    transition: 0.3s;
    border-radius: 6px;
    width: 86px;
    text-align: center;
    cursor: pointer;
}

.let svg{
    display: inline-block;
    vertical-align: middle;
    width: 24px;
}

.let:hover .strokeC001{
    stroke: #002c11;
}

.let:hover .svgtxt{
    color: #002c11;
}


/***가져오기 버튼 수정***/
.billbringbtn{
    display: inline-flex;
    width: 86px;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 42px;
    transition: 0.3s;
    border-radius: 6px;
    width: 86px;
    text-align: center;
    cursor: pointer;
    margin-left: auto;
}

.billbringbtn svg{
    width: 24px;
    display: inline-block;
}

.billbringbtn:hover .strokeC001{
    stroke: #002c11;
}

.billbringbtn:hover .svgtxt{
    color: #002c11;
}


/**추가 버튼 수정 ***/

.billadd_rightbtn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #eaf8ef;
    color: #306AFF;
    font-weight: 600;
    border-radius: 6px;
    font-size: 1.6rem;
    height: 42px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 24px;
}

.billadd_rightbtn:hover{
    background-color: #306AFF;
    color: #fff;
}

.billadd_rightbtn svg{
    width: 16px;
    display: inline-block;
}

.billadd_rightbtn:hover .fill001{
    fill: #fff;
}

.billadd_rightbtn:hover .svgtxt{
    color: #fff;
}

.billadd_rightbtn .svgtxt::before{
    display: inline-block;
    vertical-align: top;
    content: '';
    font-size: 1.4rem;
    font-weight: 600;
    margin-right: 8px;
    color: #306AFF;
    transition: 0.3s;
    letter-spacing: -0.35px;
    line-height: 24px;
    transition: 0.3s;
    visibility: hidden;
}

.billadd_rightbtn:hover .svgtxt::before{
    content: '받는 사람';
    color: #fff;
    visibility: visible;
}


.studaddbt{

}

.reg_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 12;
    padding: 0px 20px 32px;
    box-sizing: border-box;
    border-radius: 12px;
    width: 400px;
    display: none;
}

.regtxtB{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.regtit{
    font-size: 2.4rem;
    letter-spacing: -0.5px;
    font-weight: 600;
    text-align: center;
}

.regmtit{
    margin-top: 12px;
    font-size: 1.6rem;
    text-align: center;
    letter-spacing: -0.4px;
    line-height: 24px;
}
.reg_modal .modal_tit{
    font-size: 1.6rem;
}

.sendres_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 12;
    padding: 0px 20px 32px;
    box-sizing: border-box;
    border-radius: 12px;
    width: 400px;
    display: none;
}

.sendres_modal .modal_tit{
    font-size: 1.6rem;
}


.studadd_modal .underbtnList{
    width: 120px;
}
.studadd_modal .let{
    margin-left: auto;
}
.regularDate .searchB{
    width: 88px;
}

.regularDate{
    margin-top: 8px;
}

.lottxt{
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    font-size: 1.4rem;
    line-height: 24px;
    letter-spacing: -0.35px;
}

.regularDate .search_custom >button{
    background-color: #f7f7fb;
    border-radius: 6px;
    padding-left: 8px;
}

.regularDate .search_custom{
    box-shadow: none;
    border: 1px solid #e5e5ec;
    border-radius: 6px;
}

.regularDate .search_custom .selSearch_list{
    max-height: 150px;
    overflow-y: auto;
}

.regularDate .searchB:first-child{
    margin-left: 0;
}

.billaddbtnList{
    width: 100%;
    display: flex;
    padding: 0 20px;
    box-sizing: border-box;
}

.billaddbtnList >li:first-child{
    width: 120px;
    margin-left: auto;
}

.addbooking{
    display: block;
    width: 120px;
    font-size: 1.6rem;
    line-height: 48px;
    text-align: center;
    background-color: #306AFF;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    color: #4D3C00;
    letter-spacing: -0.4px;
    transition: 0.3s;
}

.addbooking:hover{
    background-color: #2258E3;
}

.studResu_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 12;
    padding: 0px 20px 32px;
    box-sizing: border-box;
    border-radius: 12px;
    width: 800px;
    display: none;
}

.Reultxtb{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.Reultit{
    font-size: 1.6rem;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.4px;
}

.reunm{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    margin-right: 4px;
    font-weight: 600;
    color: #306AFF;
}

.failB{
    background-color: #f7f7fb;
    padding: 16px;
    box-sizing: border-box;
    margin-top: 24px;
    border-radius: 12px;
    max-height: 250px;
    overflow-y: auto;
}

.failtit{
    font-size: 1.6rem;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.4px;
    font-weight: 600;
}

.failList{
    width: 100%;
    margin-top: 8px;
}

.failList >li{
    margin-top: 8px;
    display: flex;
    align-items: center;
}

.failList >li:first-child{
    margin-top: 0;
}

.failList >li >span{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    margin-left: 12px;
    letter-spacing: -0.4px;
    text-align: center;
}

.failList >li >span:first-child{
    margin-left: 0px;
}


.attdc >*{
    margin-left: 8px;
}

.attdc >*:first-child{
    margin-left: 0;
}

.attdc >*:last-child{
    margin-left: auto;
}

.late01_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 15;
    border-radius: 12px;
    padding: 24px 20px 32px;
    box-sizing: border-box;
    display: none;
}

.late01_modal .datepickWrap{
    width: 100%;
}

.lateWrap{
    width: 100%;
}

.lateWrap >li{
    margin-top: 12px;
}

.lateWrap >li:first-child{
    margin-top: 0;
}

.datepickWrap{
    position: relative;
    display: flex;
    align-items: center;
}

.datepickWrap input{
    background-color: #fff;
    border: 1px solid #e5e5ec;
    height: 42px;
    border-radius: 6px;
    padding: 0 8px;
    box-sizing: border-box;
    width: 90%;
}

.latetit{
    font-size: 2rem;
    text-align: center;
    line-height: 30px;
    letter-spacing: -0.5px;
    font-weight: 600;
}

.late02_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 15;
    border-radius: 12px;
    padding: 24px 20px 32px;
    box-sizing: border-box;
    display: none;
}

.foundCpl{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.fontctxt{
    font-size: 2rem;
    text-align: center;
    line-height: 28px;
    letter-spacing: -0.5px;
    font-weight: 600;
}

.founttxt{
    margin-top: 8px;
    text-align: center;
    color: #505050;
    font-size: 1.6rem;
    line-height: 26px;
    letter-spacing: -0.4px;
}

.PointWrap{
    width: 100%;
    margin-top: 24px;
    background-color: #fff;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
}


.pointTabList{
    width: 100%;
    display: flex;
    align-items: center;
}

.pointTabList >li{
    margin-left: 12px;
    width: 86px;
}

.pointTabList >li:first-child{
    margin-left: 0;
}

.pointtab{
    display: block;
    line-height: 42px;
    font-size: 1.6rem;
    text-align: center;
    font-weight: 600;
    letter-spacing: -0.4px;
    color: #999;
    cursor: pointer;
    border-bottom: 2px solid #fff;
}


.pointTabList >li.PoinTon .pointtab{
    border-bottom: 2px solid #306AFF;
    color: #306AFF;
}

.point_Top_Right{
    margin-left: auto;
    width: 30%;
    display: flex;
    align-items: center;
}


.pointWrapTop{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5ec;
}
.point_Top_Right .searchresults{
    margin-left: auto;
    display: inline-block;
    vertical-align: middle;
}

.point_Top_Right .search_custom{
    box-shadow: none;
}

.point_Top_Right .listviewB{
    margin-left: 0;
}
.pointWrap00{
    min-height: 420px;
    max-height: 420px;
    overflow-y: auto;
    margin-top: 16px;
    display: none;
}

.pointWrap00.PoinTon{
    display: block;
}


.Topbtn_setting{
    width: 100%;
    display: flex;
    align-items: center;
}

.reprebt{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 150px;
    cursor: pointer;
}

.reprebt svg{
    width: 24px;
}

.reprebt:hover .strokeC001{
    stroke: #002c11;
}

.reprebt:hover .svgtxt{
    color: #002c11;
}

.mainchange_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 500px;
    background-color: #fff;
    z-index: 15;
    transform: translate(-50%,-50%);
    border-radius: 12px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.04);
    padding: 20px;
    box-sizing: border-box;
    display: none;
}

.mainChtit{
    width: 100%;
    text-align: center;
    font-size: 2rem;
    line-height: 30px;
    font-weight: 600;
}

.mainChageList{
    width: 100%;
    margin: 32px auto 0;
    max-height: 112px;
    overflow-y: auto;
}

.mainChageList >li{
    display: inline-block;
    vertical-align: middle;
    width: 47%;
    margin-left: 12px;
    margin-top: 16px;
}

.mainChageList >li:nth-child(2n+1){
    margin-left: 0;
}

.mainChageList >li:nth-child(n+1):nth-child(-n+2){
    margin-top: 0;
}

.mainChangebtn{
    display: block;
    font-size: 1.4rem;
    line-height: 46px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #e5e5ec;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
    letter-spacing: -0.4px;
}

.mainChangebtn:hover{
    background-color: #f7f7fb;
}

.mainChgcl{
    display: block;
    font-size: 1.6rem;
    width: 120px;
    text-align: center;
    letter-spacing: -0.4px;
    background-color: #306AFF;
    transition: 0.3s;
    font-weight: 600;
    color: #4D3C00;
    cursor: pointer;
    border-radius: 12px;
    line-height: 52px;
    margin: 32px auto 0;
}

.mainChgcl:hover{
    background-color: #2258E3;
}

.checkList_memout{
    width: 100%;
    margin-top: 16px;
}

.checkList_memout >li{
    display: flex;
    align-items: flex-start;
}

.checkico{
    display: inline-block;
    vertical-align: middle;
    width: 24px;
}

.checkico svg{
    width: 100%;
}


.memout_checktxt{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    letter-spacing: -0.4px;
    width: calc(100% - 24px);
}

.bold_check{
    color: #306AFF;
    font-size: 1.6rem;
    line-height: 24px;
    letter-spacing: -0.4px;
    font-weight: 600;
}
.memout_pop .modal_top{
    padding: 12px 0;
}

.pointRefound{
    width: 100%;
    margin: 32px auto 0;
    padding: 20px;
    box-sizing: border-box;
    background-color: #f7f7fb;
    border-radius: 12px;
}

.pointRefound >li{
    display: flex;
    align-items: center;
    margin-top: 16px;
}

.pointRefound >li:first-child{
    margin-top: 0;
}

.pointRefoundtit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    letter-spacing: -0.4px;
}

.pointRefoundnm{
    margin-left: auto;
    display: flex;
    align-items: center;

}

.prnm{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.8rem;
    line-height: 26px;
    font-weight: 600;
}

.prnmp{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.8rem;
    line-height: 26px;
    font-weight: 600;
    margin-left: 4px;
}

.pointRefoundChB{
    width: 100%;
    margin-top: 32px;
}

.pointRefoundChB input{
    display: none;
}

.pointRefoundChB label{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    cursor: pointer;
}

.pointRefoundChB label::before{
    display: inline-block;
    vertical-align: middle;
    content: '';
    width: 18px;
    height: 18px;
    background-image: url('../img/checkoff.png');
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 8px;
}

.pointRefoundChB input:checked + label::before{
    background-image: url('../img/checkon.png');
}


.Prefbt{
    width: 150px;
    margin: 40px auto 0;
    text-align: center;
    line-height: 52px;
    display: block;
    font-size: 1.6rem;
    line-height: 52px;
    background-color: #306AFF;
    color: #4D3C00;
    font-weight: 600;
    border-radius: 12px;
    transition: 0.3s;
    cursor: pointer;
}

.Prefbt:hover{
    background-color: #2258E3;
}


.terminate_Service{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 20;
    padding: 24px 20px 32px;
    box-sizing: border-box;
    border-radius: 12px;
    width: 350px;
    display: none;
}

.terminate_Service .modal_tit{
    font-size: 1.6rem;
    line-height: 24px;
    letter-spacing: -0.4px;
}



.passwordWrap{
    position: relative;
}

.eyestoggle{
    position: absolute;
    top: 50%;
    right: 16px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    cursor: pointer;
}

.eyestoggle svg{
    width: 24px;
}

.eyeson{
    display: none;
}

.documentmodal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 12px;
    width: 400px;
    padding-bottom: 32px;
    display: none;
    z-index: 12;
}

.dmoltit{
    width: 100%;
    text-align: center;
    font-size: 2rem;
    line-height: 52px;
    letter-spacing: -0.5px;
    font-weight: 600;
    border-bottom: 1px solid #e5e5ec;
}

.dmolmtit{
    font-size: 1.6rem;
    line-height: 24px;
    letter-spacing: -0.4px;
}

.dmolmtit{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    font-size: 1.8rem;
    line-height: 26px;
    letter-spacing: -0.45px;
}

.phoneB_dmol{
    background-color: #f7f7fb;
    width: 90%;
    margin: 32px auto 0;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 12px;
    display: flex;
    align-items: center;
}

.phoneBtit{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    letter-spacing: -0.4px;
    color: #505050;
}

.phoneBnm{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 24px;
    letter-spacing: -0.4px;
    font-weight: 600;
    margin-left: auto;
}

.phoneBtnWrap{
    width: 90%;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 0 auto;
}

.SerstsWrap{
    width: 100%;
    margin: 150px auto 0;
}

.SerSttit{
    font-size: 3.2rem;
    line-height: 42px;
    letter-spacing: -0.8px;
    font-weight: 600;
    text-align: center;
}

.SerStMtit{
    font-size: 1.8rem;
    line-height: 26px;
    letter-spacing: -0.45px;
    margin: 12px auto 0;
    text-align: center;
}

.Service_stats{
    width: 400px;
    margin: 50px auto 150px;
    background-color: #f7f7fb;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 12px;
}

.service_sts{
    font-size: 2.4rem;
    line-height: 34px;
    font-weight: 600;
    letter-spacing: -0.6px;
    text-align: center;
}

.SerB{
    display: flex;
    align-items: center;
    margin: 24px auto 0;
    justify-content: center;
}

.checkSerico{
    width: 32px;
    display: inline-block;
}

.checkSertxt{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.8rem;
    line-height: 26px;
    letter-spacing: -0.45px;
    margin-left: 12px;
    font-weight: 500;
    color: #306AFF
}

.checkSerico2{
    height: 32px;
    background-color: #d0edda;
    border-radius: 50%;
    padding: 4px 0;
    box-sizing: border-box;
}

.checkSerico2 svg{
    width: 24px;
    margin: 0 auto;
    display: block;
}

.checkSerico2 .strokeW002{
    stroke-dashoffset: 0;
    stroke-dasharray: 60;
    animation: dash01 0.5s linear alternate;
}

@keyframes dash01 {
    from{
        stroke-dashoffset: 60;
    }
    to{
        stroke-dashoffset: 0;
    }
}

.loginbtn_serv{
    width: 400px;
    text-align: center;
    margin: 80px auto 150px;
    background-color: #306AFF;
    line-height: 56px;
    display: block;
    font-size: 1.6rem;
    color: #4D3C00;
    font-weight: 600;
    border-radius: 12px;
    transition: 0.3s;
}

.loginbtn_serv:hover{
    background-color: #2258E3;
}

.cancelSer{
    display: block;
    margin: 50px auto 0;
    width: 100%;
    border: 1px solid #ff6b6b;
    color: #ff6b6b;
    font-size: 1.6rem;
    line-height: 48px;
    text-align: center;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.cancelSer:hover{
    color: #fff;
    background-color: #ff6b6b;
}

.ServiceCsncel_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 12;
    padding: 24px 20px 32px;
    box-sizing: border-box;
    border-radius: 12px;
    width: 350px;
    display: none;
}

.ServiceCsncel_modal .phoneBtnWrap{
    width: 100%;
    padding: 0;
}

.ServiceCsncel_modal .warning_btn{
    width: 100%;
}

.ServiceCsncel_modal .regmtit{
    display: block;
    width: 100%;
    color: #505050;
}

.teach_delete{
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    background-color: #f7f7fb;
    cursor: pointer;
    padding: 8px 0;
    box-sizing: border-box;
    border-radius: 6px;
    transition: 0.3s;
}

.teach_delete:hover{
    background-color: #e5e5ec;
}

.teach_delete .trasher{
    stroke: #767676;
}

.teach_delete:hover .trasher{
    stroke: #111;
}


.teacher_delete_modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 18;
    padding: 24px 20px 32px;
    box-sizing: border-box;
    border-radius: 12px;
    width: 350px;
    display: none;
}

.tdmWrap{
    margin: 24px auto 0;
}

.tdmWrap .dmolmtit{
    margin: 8px auto 0;
    padding: 0;
}

.tdmWrap .wnname{
    display: inline-block;
    vertical-align: top;
    font-size: 2rem;
    line-height: 32px;
    font-weight: 600;
    margin-right: 8px;
}

.findid_rel{
    padding: 20px;
    background-color: #f7f7fb;
    box-sizing: border-box;
    width: 100%;
    margin-top: 24px;
    border-radius: 12px;
}

.flexstyle{
    display: flex;
    align-items: center;
}

.flexstyle >*{
    margin-left: 12px;
    display: flex;
    align-items: center;
}

.flexstyle >*:first-child{
    margin-left: 0;
}

.flexstyle >* >*{
    margin-left: 8px;
}

.flexstyle >* >*:first-child{
    margin-left: 0;
}

.flexstyle .searchB{
    width: 120px;
}

.flexstyle2{
    display: flex;
    align-items: center;
}

.flexstyle2 >input{
    width: 88%;
    margin-left: 12px;
}

.testclass{
    display: inline-block;
    line-height: 42px;
    vertical-align: middle;
    text-align: center;
    font-size: 1.4rem;
}

.resultTb{
    display: inline-flex;
    align-items: center;
    margin-left: 24px;
}

.resultTb >p{
    margin-left: 12px;
}

.resultTb >p:first-child{
    margin-left: 0;
}

.ssnm{
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 42px;
    color: #306AFF;
    font-weight: 400;
}