/* ========== pc-style_start ========== */
@media only screen and (min-width: 1240px){
    .class-list ul{
              display:flex;
              flex-wrap:wrap;
              min-height: 12.3rem;
          }
         
          .class-list ul li dl{
              display:flex;
              flex-direction: column;
                margin: 0 auto;
                justify-content: space-between;
                    height: 100%;
                
          }
          .class-list ul li dd{
              display: flex;
              width: 100%;
              justify-content: space-around;
              position: static;
          }
    .viewDetail h2.title p{
    display: none;
}
	.pc-head{
	    display: block;
	}
	.mobile-head{
	    display: none;
	}
 .loca{
    width:4rem;
    display:flex;
    align-items: center;
    position: absolute;
    left:15rem;
    color:#ffffff;
   height: 2.5rem;
   line-height: 2.5rem;
   justify-content: space-around;
}
.showMen{
    position: relative;
}

.loca input{
    display: inline-block;
    width:3rem ;
    background-color: transparent;
    border:none;
    color:#ffffff;
}
.loca img{
    width: 1.1rem;
    height: 1rem;
}

/* ===== a ===== */



/* ===== b ===== */
.mpage, .details table, .formbox table, .msgbox th, .showorder table {background-color:#eee;}
.socicalogin {background-color:#f6f6f6;}

.cFind form1, .cFind i {background-color:#f8f8f8;}

.loginBox li i.fa, .register li i.fa, .mt {background-color:#fafafa;}
.loginBox, .register, .ucl, .fullbox, .orderBox, .cFind, .half .hfc, .formbox, .msgBox form, .pmRead {background-color:#fff;}
.orderBox{
    margin-top:.5rem;
}
.three{
    border-radius: .45rem .4rem 0 0;
    overflow: hidden;
}
.cFind{
     border-radius:  0 0 .45rem .4rem;
    overflow: hidden;
}
.memberInfo dt em, .pcTab dd.infos em, a.upFile {background-position:50% 50%;}

.memberInfo dt em, .pcTab dd.infos em, a.upFile {background-size:cover;}

.socicalogin *, .memberInfo dt em, .pcTab dd.infos em {border-radius:50%;}
.memberInfo h4 i.fa {border-radius:0.15rem;}
p.obt a {border-radius:1rem;}


.loginBox, .register, .dashboard li a, .fullbox, .half .hfc {box-shadow:0 0 0.25rem #d8d8d8;}
.dropdown, .ucl {box-shadow:0 0.125rem 0.25rem #ddd;}

.dashboard li, .pcTab dd.infos a, .formbox, .dataTab, .dataTab dt, .dataTab dd, .msgBox form, .cFind, .cFind form, .cFind .c, .cFind p, .cFind input, .viewDetail, .comments textarea {box-sizing:border-box;}





/* ===== c ===== */


.loginBox li p, .register li p {color:#5a5a5a;}
.loginBox li p b, .register li p b {color:#f80;}

.mt h3, p.empty b {color:#666;}
.loginBox li, .register li, .register select, p.empty, .memberInfo h4 b, .usrMenu h3, .mfoot p {color:#989898;}
.loginBox li i.fa, .register li i.fa {color:#aaa;}
p.empty i {color:#ddd;}
.socicalogin i.fa, .memberInfo h4 i.fa {color:#fff;}

.memberInfo h4 em:before {content:" ";}


.pcTab b, .dataTab b, .pmTitle {color:#282828;}
.na {color:#5a5a5a;}

.pcTab b.enable, *.succed {color:#7a1;}
.pcTab b.disabled, *.pormpt {color:#f80;}
*.warning {color:#f00;}

button, a.upFile, a.upFile * {cursor:pointer;}




/* ===== d ===== */
.memberInfo dt *, .usrMenu a, .usrMenu a *, .dashboard li *, p.empty *, .ucSwap a, .mPager li *, a.upFile, a.upFile *, .starate li a, .siteNote a, .siteNote dt *, .noteList dt * {display:block;}
.memberInfo h4 *, p.obt a, .dataTab dd label, .mPager li, .cFind * {display:inline-block;}
.pc-title{
    display: inline-block;color:#333333;
}
.mobile-title{
    display: none;
}
.pcTab li, .dataTab, .msgTab li, .dualbox {display:table;}
.pcTab dl, .dataTab dl, .msgTab dl, .dualbox .dual {display:table-row;}
.pcTab dt, .pcTab dd, .dataTab dt, .dataTab dd, .msgTab dt, .msgTab dd, .dualbox .half {display:table-cell;}


.dashboard ul, .courselist dl,  .infoTab dl,.courselist dt, .comments dl, .starate, .siteNote dl, .siteNote dt, .noteList dl {display:-webkit-box;display:-webkit-flex;display:flex;}
.courselist dl{
    flex-direction:column;
}



/* ===== e ===== */




/* ===== f ===== */
.box {/* flex-direction: row | row-reverse | column | column-reverse; */}
.na {-webkit-flex-direction:row-reverse;flex-direction:row-reverse;}

.item {/* flex-grow: <number>; default 0 */}
.na {-webkit-flex-grow:1;flex-grow:1;}
.courselist dt, .viewDetail .infoTab dd, .comments dd, .siteNote dd.max, .noteList dt {-webkit-flex-grow:2;flex-grow:2;}


.item {/* flex-shrink: <number>;default 1 */}
.na, .viewDetail .infoTab dt, .comments dt {-webkit-flex-shrink:0;flex-shrink:0;}


.box {/* flex-wrap: nowrap | wrap | wrap-reverse; */}
.courselist dt {-webkit-flex-wrap:wrap;flex-wrap:wrap;}




.mpage, .usrMenu a *, .mt h3, .ucSwap li, .formAct dt, .formAct dd, .cFind p {float:left;}
.loginBox #vdimgck, .register #vdimgck, .mt p {float:right;}

.memberInfo h3, .dashboard em {font-family:"Poppins", "Open sans";}

* {font-size:0.75rem;}
.loginBox button, .loginBox li i.fa, .register button, .register li i.fa, .mt h3, .mt p *, .mfoot p {font-size:0.8rem;}
.na, p.empty b, .dataTab i.fa, .pmContent * {font-size:1rem;}
.loginBox h3, .socicalogin *, .ucr h1, .viewDetail h2, .comments h3 {font-size:1.25rem;}
.loginBox h2, .register h2, .dashboard li em, .pmTitle {font-size:1.6rem;}

.dashboard li i.fa, p.empty i {font-size:3.2rem;}

.memberInfo h4 * {font-size:0.6rem;}
.na {font-size:0.5rem;}

.mt h3, .memberInfo dd h3, .courselist h4, .siteNote dt, .siteNote dd.max a, .noteList dt a {font-weight:bold;}





/* ===== g ===== */


/* ===== h ===== */
.ucl {height:100%;}


/* ===== i ===== */


/* ===== j ===== */


/* ===== k ===== */


/* ===== l ===== */
.loginBox li p, .register li p, .memberInfo h4 em:before, .pcTab dd.infos em, a.upFile input, .starate li {left:0;}

* {line-height:1;}
.memberInfo dd h3, .memberInfo dd h4 *, .pcTab dt, .pcTab dd.infos *, .pcTab dd, .pcTab dd * {line-height:1rem;}
.courses dt h4 {line-height:1.25rem;}
p.obt a, .pmContent *, .viewDetail h2 {line-height:1.5rem;}
.loginBox li p, .register li p, .pmTitle {line-height:2rem;}




/* ===== m ===== */


/* ===== n ===== */


/* ===== o ===== */
.ucl {overflow:auto;}
a.upFile input {opacity:0}

.ot, .starate li a {overflow:hidden;text-indent:-5000rem;}




/* ===== p ===== */
.loginBox li i.fa, .loginBox li p, a#refresh, .register li i.fa, .register li p, .memberInfo dt, .dashboard li i.fa, .memberInfo h4 em:before, .pcTab dd.infos em, .cFind button, .cFind i, a.upFile input, .starate li {position:absolute;}
.ucl {position:fixed;}
.loginBox li, .loginBox li input, .register li, .register li input, .memberInfo dl, .ucr, .dashboard li a, .memberInfo h4 em, .memberInfo h4 i.fa, .pcTab dd.infos a, .cFind .c, .cFind p, a.upFile, a.upFile img, .starate ul {position:relative;}




/* ===== q ===== */


/* ===== r ===== */
.cFind button {right:0;}




/* ===== s ===== */


/* ===== t ===== */
.pcTab dd h4, .pcTab dd p, .msgTab dd p {text-align:left;}
.loginBox h2, .loginBox h3, .loginBox li i.fa, .loginBox button, .socicalogin *, .register h2, .register li i.fa, .register button, 
.usrMenu a i, .memberInfo h4 i, .pcTab dt, .pcTab dd, p.obt, p.empty *, .mfoot p, .msgTab dt, .msgTab dd, .mPager, .cFind i, .courselist .t dd, .courselist dd a, .comments p {text-align:center;}
p.obt {text-align:center !important;}
p.obt a{
    border:1px solid #919191;
}
.courselist ul{
    display:flex;
    flex-wrap: wrap;
    padding-bottom: 3rem;
}
.dataTab dt p {text-align:right;}

.memberInfo dt, .memberInfo h4 em:before, .pcTab dd.infos em, .cFind button, a.upFile input, .starate li {top:0;}
.loginBox li p, .register li p {top:100%;}

.memberInfo h4 em:before {transform:rotate(45deg);}

.loginBox a, .loginBox button, .loginBox input, .socicalogin *, .register a, .register button, .register input, 
.usrMenu a, .dashboard li a, .pcTab a, .pcTab a *, .ucSwap a, button, a.upFile {transition:all 300ms ease 0s;}

.jspTrack, .jspDrag {transition:background 300ms ease 0s;}




/* ===== u ===== */



/* ===== v ===== */
.memberInfo h4 *, .half, .pcTab dt, .pcTab dd, .dataTab dt, .dataTab dd, .mPager li {vertical-align:top;}




/* ===== w ===== */
a#refresh {white-space:nowrap;}

.mpage, .memberInfo dd, .memberInfo dd h3, .memberInfo dd h4, .dashboard, .fullbox, .dualbox, .dualbox .dual, .mt, .pcTab li, .pcTab dl, .pcTab dd.infos a, .mfoot, .formbox, .dataTab, .msgBox, .msgBox form, .msgTab li, .msgTab dl, .cFind, .cFind form, .cFind .c, .cFind input, .courselist dt h4, .viewDetail, .infoTab {width:100%;}
.half {width:50%;}
.dashboard li, .cFind p {width:25%;}

.js-list{
    background-color: #fff;
    border-radius: .3rem;
       padding-bottom: 2rem;
}
.js-box ul{
    display: flex;
    flex-wrap: wrap;
}
.js-box ul li{
    width: 20%;
    margin-left: 4%;
    height: 15rem;
    margin-top:1.4rem;
    border: 1px solid #E7E7E7;
}
.js-box ul li a{
    width: 100%;
}
.js-box ul li .js-top{
    height: 2.8rem;
    width: 100%;background-color: #E6B44C;
}
.js-box ul li .js-avatar{
    width:4.1rem ;
    height: 4.1rem;
    background-color: #ffffff;
    border-radius: 50%;
    margin:0 auto;
    margin-top:-2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.js-box ul li .js-avatar img{
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}
.js-box ul li h4{
    font-size: 1.2rem;
    color:#333333;
    margin-left: 1.3rem;
    margin-top:1rem;
}
.js-box ul li .js-info{
    font-size: .9rem;
    color:#666666;
    width: 80%;
    margin: 0 auto;
}

.js-box ul li .js-info p{
    margin-top: .8rem;
    color:#666666;
}
.js-details{
    padding: 2rem;
    background: #fff;
}
.js-details .js-title{
    color:#181818;
    font-size: 1.25rem;
}
.js-details .js-main{
    border: 1px solid #EFEFEF;
    margin-top: 2.5rem;
     box-sizing: border-box;
     padding:1.3rem 1.1rem;
}
.js-details .js-main .js-avatar{
    display: flex;
}
.js-details .js-main .js-avatar span{
    font-size: 1.5rem;
    color:#202020;
    margin-top:3.5rem;
    margin-left: 1.5rem;
}
.js-details .js-main .js-avatar div{
    width: 9.3rem;
    height: 9.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #5986B4;
}
.js-details .js-main .js-avatar div img{
    width: 8.5rem;
    height: 8.5rem;
}
.js-details .js-main .js-text p{
    font-size: 0.75rem;
    color:#202020;
    margin-top:1.5rem;
    line-height:1.8;
}
.js-details .js-main  h3{
    font-size: 1rem;
    color:#202020;
}

/* ===== x ===== */




/* ===== y ===== */




/* ===== z ===== */
* {z-index:0;}
.loginBox li i.fa, .register li i.fa, .memberInfo h4 i.fa, a.upFile input {z-index:1;}
.ucl {z-index:990;}




/* ========== special ========== */
.siteNote dd.max a {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}






}