@charset "UTF-8";
/* CSS Document */

/* CSS REQUIRED */
.state-icon {
    left: -5px;
}
.list-group-item-primary {
    color: rgb(255, 255, 255);
    background-color: rgb(66, 139, 202);
}

/* DEMO ONLY - REMOVES UNWANTED MARGIN */
.well .list-group {
    margin-bottom: 0px;
}

/* modal close button */
.modal_close 
{
    position: absolute;  
    top: 40px; 
    right: 12px; 
    display: block; 
    width: 14px; 
    height: 14px;  
    background: url("/resources/images/v2/modal_close.png");  
    z-index: 2;
}

/* Login stuff */
#lean_overlay {
position: fixed;
z-index: 10000;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
}

#loginModal {
    background-color:#f8f8f8;
}

#loginModalForm {
    padding: 15px;
}

.loginFormBox input {
    font-size: 16px;
    width: 235px;
    margin-left: 0px;
    margin-bottom: 10px;
    line-height: 19px;
    padding: 3px;
    padding-left: 10px;
    vertical-align: middle;
    border: 1px solid #dedede
}

.loginFormBox input[type="submit"] {
    width: 280px;
    height: 38px;
    border: 0;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    line-height: 36px;
    font-size: 16px;
    font-weight: 700;
    color: #FFF;
    background: #0D2A4B;
    border-radius: 3px;
    cursor: pointer;
    zoom: 1;
}

/** Main CSS elements **/

body,html {
    font: 100%;
    font-family:  "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color:#828587;
    line-height:18px;
    margin:0px;
    padding:0px;
    background-color: #FFFFFF;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}


*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

ul,li{
    margin: 0px;
    padding: 0px;
    list-style: none;

}

li,div,span{
    word-break:break-all; 
    word-wrap:break-word;
}

img{
    display:block;
    margin: auto;

}

.title{
    font-size: 160%;
    line-height: 40px;
    color: #2e87c5;

}

.titlesmall{
    font-size: 140%;
    line-height: 30px;
    color: #2e87c5;

}

.redmark{
    color: #ec008c;
    font-size: 18px;
}

.orange{
    color: #ff6600;
}

/*=============================================*/
.header{
    width: 100%;
    height: 84px;
    position: fixed;
    z-index: 900;
    background-color: #FFFFFF;
    box-shadow: 0px 1px 2px #999999;

}
.headerdown{
    width: 100%;
    height: 84px;


}

.header .logo{
    float: left;
    width: 23.5%;
    min-width: 335px;
    height: 84px;
    text-align: left;
}

.header .navigation{
    float: left;
    text-align: left;
    width: 63.6%;
    height: 84px;
    overflow: hidden;


}

.header .navigation a{
    color:#828587;
    float: left;
    height: 84px;
    display: block;
    line-height: 84px;
    padding-left: 10px;
    padding-right: 10px;
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -ms-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    transition: background-color 0.5s;
    text-decoration: none;

}



.header .navigation a.on,.header .navigation a:hover{
    color: #FFFFFF;
    background-color: #4b91f4;

}

.header .login{
    width: 152px;
    height: 84px;
    float: right;
    position: absolute;
    text-align: center;
    border-left:solid 1px #d9d9de ;
    top: 0px;
    right: 0px;
}

.header .loggedin {
    font-weight: bold
}

.header .login a{
    text-decoration: none;
    color: #00a0ff;
    line-height: 84px;

}

.header .login a:hover{
    text-decoration: none;
    color: #ff0000;
}

.header #btnmenuitem{
    background-image: url("/resources/images/v2/menuitem.png");
    background-size:100% 100%;
    width: 35px;
    height: 18px;
    float: right;
    display: none;
    position: absolute;
    right: 168px;
    top:35px;
}

.header .cart{
    position: absolute;
    right: 152px;
    width: 60px;
    float: right;
    height: 84px;
}

.header .cart-count{
    font-size:12px;
}

.header .cart-image {
    background-image: url("/resources/images/v2/cart/cart5.png");
    height:35px;
    width:40px;
    background-size:100% 100%;
}

.header .cart-image:hover {
    background-image: url("/resources/images/v2/cart/cart5hover.png");
}

.header #carticon{
    margin-top:10px;
    margin-right:10px;
    float:right;
    text-align: center;
}

.header #carticon:hover{
    color:#1D75BD;
}

/** Logged in dropdown menu **/
.header .loggedin ul {
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.header .loggedin ul li {
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

.header .loggedin ul li ul {
  padding: 0;
  position: absolute;
  width: 152px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}

.header .loggedin ul li a {
    font-size:12px;
}

.header .loggedin ul li ul li a {
    font-size:16px;
    line-height: 40px;
}

.header .loggedin ul li ul li { 
  border-top:1px solid;
  display: block; 
  text-align:center;
  background: #fff;
}

.header .loggedin ul li ul li:hover { background: #f8f8f8; }

.header .loggedin ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

/** Mobile devices **/
@media screen and (max-width: 640px) {

    .header{
        width: 100%;
        height:auto;
        position: fixed;
        z-index: 900;
        background-color: #FFFFFF;

    }


    .header .login a{
        text-decoration: none;
        color: #00a0ff;
        line-height: 84px;
        font-size: 140%;
    }


    .headerdown{
        width: 100%;
        height: 84px;
        display: block;
    }

    .header .cart{
        border-left: solid 1px #d9d9de;
        position: absolute;
        right: 152px;
        width: 50px;
        float: right;
        height: 84px;
    }

    .header #carticon{
        margin-right:10px;
        margin-top:10px;
        float: right;
    }

    .header .cart-image{
        width:30px;
        height:26px;
    }

    .header #btnmenuitem{
        background-size:100% 100%;
        background-image: url("/resources/images/v2/menuitem.png");
        width: 35px;
        height: 18px;
        float: right;
        display: block;
        position: absolute;
        right: 220px;
        top:35px;
    }


    .header .navigation{
        width: 100%;
        height: 0px;
        -webkit-transition: height 0.5s;
        -moz-transition: height 0.5s;
        transition: height 0.5s;

    }


    .header .navigation.show{
        height: 448px;
    }


    .header .navigation a{
        padding: 0px;
        color:#828587;
        background-color: #FFFFFF;
        width: 100%;
        height: 64px;
        display: block;
        line-height: 64px;
        text-align: center;
        text-decoration: none;
        font-size: 140%;

    }



    .header .navigation a.on,.header .navigation a:hover{
        color: #FFFFFF;
        background-color: #4b91f4;

    }



}

/*=============================================*/
.indexbanner{
    width: 100%;
    height: auto;
    overflow: hidden;
}

.banners a{
    display: block;
    float: left;
    width: 100%;

}


.indexbanner #arrowleft{
    display: block;
    width: 64px;
    height: 64px;
    background-image: url("/resources/images/v2/arrowleft.png");
    float: left;
    position: absolute;
    margin-top: 15%;
    left: 38px;
}
.indexbanner #arrowright{
    display: block;
    width: 64px;
    height: 64px;
    background-image: url("/resources/images/v2/arrowright.png");
    float: right;
    position: absolute;
    margin-top: 15%;
    right: 38px;
}

@media screen and (max-width: 640px) {
    .indexbanner #arrowleft{

        margin-top: 12%;

    }
    .indexbanner #arrowright{

        margin-top: 12%;

    }
}

/*=============================================*/
.contentclass{
    width: 100%;
    height: auto;
    padding-top: 20px;
    padding-bottom: 30px;
    text-align: center;
    background-color: #FFFFFF;
}

.contentclass.float{
    position: fixed;
    top: 84px;
    z-index: 200;
}

.browse{
    width: 90%;
    height: auto;
    text-align: right;


}

.browse .btnbrowse{
    background-image: url("/resources/images/v2/btnbrowse.png");
    width: 114px;
    height: 41px;
    float: right;
    margin-top: -30px;
    background-repeat: no-repeat;
}


.classlist{

    height: auto;
    margin: auto;
    margin-top: 30px;
    overflow-x: hidden;
    text-align: center;
    max-width: 1128px;
    width: 90%;
}

.classlist .classitem{
    width: 352px;
    height: auto;
    padding-bottom: 10px;
    float: left;
    margin-right: 36px;
    border: solid 1px #dfdddd;
    border-radius: 10px;
}

.classlist .classitem:last-child{
    margin-right: 0px;
}



.classitem .classpic{
    width: 100%;
    height: 252px;
    overflow: hidden;
    display: block;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}


.classitem .classpic .iconnew{
    background-image: url("/resources/images/v2/icon_new.png");
    width: 56px;
    height: 56px;
    position: absolute;
    margin-top:0px;
    margin-left: 0px;
    z-index: 100;
}

.classitem .classpic img{
    width: 100%;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;

}

.classitem .classpic:hover img{
    transform:scale(1.5);
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    position: relative;
}

.classitem .classcontent{
    width: 100%;
    height: auto;
    margin: auto;
    text-align: left;

}

.classitem .classcontent .title{
    height: 70px;
    width: 95%;
    line-height: 30px;
    margin: auto;
}



.classitem .classcontent .detail{
    height: 100px;
    width: 95%;
    line-height: 25px;
    text-align: left;
    margin: auto;

}

 .tags{
    width: 95%;
    height: 54px;
    border-top: solid 2px #89bc04;
    text-align: left;
    padding-top: 18px;
    margin: auto;
}

 .tags .tag{
    font-size: 100%;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 6px;
    padding-right: 6px;
    color: #FFFFFF;
    display: block;
    float: left;
    text-decoration: none;
    margin-left: 5px;
}

 .tags .tagscience{
    background-color: #5fb9f8;
}
 .tags .tagtech{
    background-color: #8080c0;
}
 .tags .tagengineer{
    background-color: #89bc04;
}
 .tags .tagmath{
    background-color: #f96860;
}

@media screen and (max-width: 640px) {
    .classlist{

        height: auto;
        margin: auto;
        margin-top: 30px;
        overflow-x: hidden;
        text-align: center;
        max-width: 1128px;
        width: 90%;
    }

    .classlist .classitem{
        width: 100%;
        height: auto;
        float: left;
        margin-right: 36px;
        border: solid 1px #dfdddd;
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .classitem .classcontent .detail{
        height: 100px;
        width: 95%;
        line-height: 25px;
        text-align: left;
        margin: auto;
        font-size: 140%;
    }

    .browse{
        width: 100%;


    }
}


/*======================================================*/
.contentnews{
    width: 100%;
    height: auto;
    padding-top: 35px;
    padding-bottom: 35px;
    text-align: center;
    background-color: #f7fafa;
    clear: both;
}

.contentnews .inner{
    width: 84%;
    max-width: 1136px;
    height: 359px;
    border: solid 1px #cac7c7;
    border-radius: 10px;
    background-color: #FFFFFF;
    margin: auto;
    padding: 8px;
    margin-top: 35px;
}

.contentnews .inner .segs{
    float: left;
    margin: 5px;

    color: #FFFFFF;
    font-size: 100%;
    background-color: #000000;
    overflow: hidden;



}

.contentnews .inner .segs img{
    opacity: 0.5;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    width: 100%;
    height: 100%;
}


.contentnews .inner .segs:hover img{
    opacity: 1;
}

.contentnews .inner .segs .indextags{
    background-color: #4b91f4;
    color: #FFFFFF;
    font-size: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 9px;
    padding-right: 9px;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 100;
}
.contentnews .inner .segs .titlenews{
    width: auto;
    height:  auto;
    text-align: left;
    color: #FFFFFF;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 5px;

    position: absolute;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    z-index: 100;
}



.contentnews .inner .segbig{
    width: 41%;
    height: 328px;
}
.contentnews .inner .segbig .titlenews{
    width: 25%;
    margin-top: 266px;
}
.contentnews .inner .segbig:hover .titlenews{
    margin-top: 329px;
    opacity: 0;
}

.contentnews .inner .seg2x{
    width: 37.3%;
    height: 160px;
}


.contentnews .inner .seg2x .titlenews{
    width: 23%;
    margin-top: 102px;
}
.contentnews .inner .seg2x:hover .titlenews{
    margin-top: 160px;
    opacity: 0;
}

.contentnews .inner .seg1x{
    width: 18.2%;
    height: 160px;
}


.contentnews .inner .seg1x .titlenews{
    width: 10%;
    margin-top: 75px;
}
.contentnews .inner .seg1x:hover .titlenews{
    margin-top: 160px;
    opacity: 0;
}


@media screen and (max-width: 640px) {
    .contentnews .inner{
        width: 90%;
        max-width: 1136px;
        height: auto;
        border: solid 1px #cac7c7;
        border-radius: 10px;
        background-color: #FFFFFF;
        margin: auto;
        padding: 8px;
        margin-top: 35px;
        overflow: hidden;
    }

    .contentnews .inner .segs{
        float: left;
        margin: 4px;

        color: #FFFFFF;
        font-size: 100%;
        background-color: #000000;
        overflow: hidden;



    }



    .contentnews .inner .segbig{
        width: 98.5%;
        height: auto;
    }
    .contentnews .inner .segbig .titlenews{
        width:88%;
        margin-top: 296px;
    }
    .contentnews .inner .segbig:hover .titlenews{
        margin-top: 329px;
        opacity: 0;
    }

    .contentnews .inner .seg2x{
        width: 98.5%;
        height:auto;
    }


    .contentnews .inner .seg2x .titlenews{
        width: 90%;
        margin-top: 132px;
    }
    .contentnews .inner .seg2x:hover .titlenews{
        margin-top: 160px;
        opacity: 0;
    }

    .contentnews .inner .seg1x{
        width: 48.4%;
        height: auto;
        float: left;
        margin-right: 4px;
    }


    .contentnews .inner .seg1x .titlenews{
        width: 46%;
        margin-top: 132px;
    }
    .contentnews .inner .seg1x:hover .titlenews{
        margin-top: 160px;
        opacity: 0;
    }


}

/*============================================*/
.contentevents{
    width: 100%;
    height: auto;
    padding-top: 35px;
    padding-bottom: 35px;
    text-align: center;
    clear: both;
}

.contentevents .inner{
    width: 90%;
    max-width: 1136px;
    height: 239px;
    margin: auto;

    margin-top: 35px;
    text-align: center;
}

.contentevents .inner a{
    border: solid 1px #cac7c7;
    border-radius: 10px;
    display: block;
    float: left;
    width: 540px;
    overflow: hidden;

}

.contentevents .inner a:first-child{
    margin-right: 45px;
}

.contentevents .inner a .titleevents{
    float: left;
    text-decoration: none;
    padding: 10px;
    color: #676765;
    font-size: 120%;
    line-height: normal;
}
.contentevents .inner a img{
    width:100%;
    height:238px;
    transition: all 0.5s;
   
}

.contentevents .inner a:hover img{
    opacity: 0.5;
}




@media screen and (max-width: 640px) {


    .contentevents .inner a{
        border: solid 1px #cac7c7;
        border-radius: 10px;
        display: block;
        margin-bottom: 10px;
        overflow: hidden;
        width: 100%;
    }

}


/*============================================*/
.contentplatforms{
    width: 100%;
    height: auto;
    padding-top: 35px;
    padding-bottom: 35px;
    text-align: center;
    background-color: #f7fafa;
}

.contentplatforms .inner{
    width: 90%;
    max-width: 1136px;
    height: 197px;
    margin: auto;

    margin-top: 35px;
}

.contentplatforms .inner a{
    float: left;
    display: block;
    width: 25%;
    height: 197px;
    text-align: center;
    line-height: 120%;
    text-decoration: none;
    font-size: 140%;
    color: #8a8d8f;
    transition: all 0.5s;
    padding: 10px;
    border-radius: 10px;
}

.contentplatforms .inner a:hover{
    background-color: #e6e6e6;
}


.contentplatforms .inner a img{
    margin: auto;
}


/*============================================*/
.contentaboutus{
    width: 100%;
    height: auto;
    padding-top: 35px;
    padding-bottom: 35px;
    text-align: center;
    background-color: #def7e0;
    overflow: hidden;
}

.contentaboutus .desc{
    width: 88%;
    max-width: 1005px;
    margin: auto;
    text-align: center;
    font-size: 100%;
    color: #3f4042;
    line-height: 30px;
    margin-top: 30px;
}

.contentaboutus .inner{
    width: 90%;
    max-width: 1136px;
    height: 197px;
    margin: auto;

    margin-top: 35px;
}

.contentaboutus .inner div{
    float: left;
    display: block;
    width: 25%;
    height: 197px;
    text-align: center;
    line-height: 140%;
    text-decoration: none;
    font-size: 90%;
    color: #3f4042;
    transition: all 0.5s;
    padding: 10px;
    border-radius: 10px;
}



.contentaboutus .inner div img{
    margin: auto;
}

@media screen and (max-width: 640px) {

    .contentaboutus .desc{
        width: 88%;
        max-width: 1005px;
        margin: auto;
        text-align: center;
        font-size: 120%;
        color: #3f4042;
        line-height: 30px;
        margin-top: 30px;
    }


}


/*===============================================*/

.footer{
    width: 100%;
    color: #FFFFFF;
    background-color: #0f2105;
    padding-top: 23px;
    padding-bottom: 23px;
    height: auto;
    clear: both;

}

.footer .footlink{
    width: 84.5%;

    height: 30px;
    margin: auto;
    font-size: 100%;
    text-align: left;
    margin-bottom: 20px;
}

.footer .footlink .names{
    float: left;
    text-align: left;
}

.footer .footlink .links{
    float: right;
    text-align: right;
}

.footer .footlink .links a{
   color: #FFFFFF;
    text-decoration: none;
}
.footer .footlink .links a:hover{
    text-decoration: underline;
}


.footer .icons{
    width: 84.5%;

    height: 125px;
    margin: auto;
    font-size: 100%;
    text-align: left;
    margin-bottom: 20px;
}

.footer .icons .address{
    float: left;
    text-align: left;
    width: 58%;
    min-width: 560px;
    line-height: 30px;
}
.footer .icons .address img{
    float: left;
    vertical-align: middle;
    margin-right: 20px;
}

.footer .icons .sns{
    float: right;
    text-align: right;
}


.footer .icons .sns .btnweixin{
    display: block;
    background-image: url("/resources/images/v2/iconweixin.png");
    width: 86px;
    height: 86px;
    float: left;
    margin-right: 50px;
}

.footer .icons .sns .btnweibo{
    display: block;
    background-image: url("/resources/images/v2/iconweibo.png");
    width: 86px;
    height: 86px;
    float: left;
}


.footer .friends{
    width: 84.5%;

    height: 50px;
    margin: auto;
    font-size: 100%;
    text-align: left;
    margin-bottom: 20px;
    line-height: 50px;

}


.footer .friends a,.footer .friends span{
    margin-right: 20px;
    float: left;
    height: 34px;
    line-height: 34px;
    vertical-align: middle;
}

.footer .copyright{
    width: 100%;
    height: 53px;
    border-top: solid 1px #56624f;
    text-align: center;
    font-size: 100%;
    line-height: 53px;
    clear: both;
}



@media screen and (max-width: 640px) {


    .footer .icons .sns{
        float: left;
        text-align: left;
        margin-top: 20px;
        margin-bottom: 20px;
    }


    .footer .friends{
        width: 100%;

        height: auto;
        margin-left: 50px;
        font-size: 120%;
        text-align: left;
        margin-bottom: 10px;
        line-height: 50px;
        float: left;

    }

    .footer .footlink{
        height: auto;
    }


    .footer .footlink .names{
        width: 100%;
        float: left;
        text-align: left;
        margin-bottom: 10px;
    }

    .footer .footlink .links{
        width: 100%;
        float: left;
        text-align: left;
        margin-bottom: 10px;
    }

}


/*============================================================*/
.loginpanel{
    width: 393px;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 20px;
    padding-bottom: 25px;
    border-radius: 10px;
    border:solid 1px #c8c2c2;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    background-color:white;
}

.loginpanel li{
    text-align: center;
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
    clear: both;
}

.loginpanel li.title{
    color: #000000;
    font-size: 24px;
}

.loginpanel li .iptbox{
    width: 353px;
    height: 41px;
    border-radius: 10px;
    border:solid 1px #c8c2c2;
    text-align: left;
    color: #363636;
    font-size: 16px;
    padding: 10px;
    font-family: Microsoft Yahei;
}

.loginpanel li button {
    font-family: Microsoft Yahei;
}

.loginpanel li .btn{
    width: 353px;
    height: 39px;
    line-height: 22px;
    border: none;
    border-radius: 10px;
    color: #FFFFFF;
    text-align: center;
    font-size: 16px;
    background-color: #4b91f4;
    cursor: pointer;
}

.loginpanel li .btn:hover{
    background-color: #0B53B5;
}

.loginpanel li .btn-browse-more{
    width: 353px;
    height: 39px;
    line-height: 22px;
    border: 2px solid;
    border-color:#00a0ff;
    border-radius: 10px;
    color: #00a0ff;
    text-align: center;
    font-size: 16px;
    background-color: #FFFFFF;
    cursor: pointer;
}
.loginpanel li .btn-browse-more:hover{
    background-color:#4b91f4;
    color:#FFFFFF;
}

.loginpanel li .linkgetpwd{
    float: left;
    text-decoration: none;
    color: #828587;
    font-size: 14px;
    margin-left: 10px;
}

.loginpanel li .linkreg{
    float: right;
    text-decoration: underline;
    color: #4b91f4;
    font-size: 14px;
    margin-right: 10px;
}

.loginpanel li .loginqq{
    float: left;
    background-image: url("/resources/images/v2/loginqq.png");
    width: 97px;
    height: 97px;
    display: block;
    margin-left: 50px;
}

.loginpanel li .loginweixin{
    float: right;
    background-image: url("/resources/images/v2/loginweixin.png");
    width: 97px;
    height: 97px;
    display: block;
    margin-right: 50px;
}

.loginpanel .agr{
    font-size: 14px;
    color: #828587;
}

.loginpanel .agr .agreement{
    color: #4b91f4;
    text-decoration: none;
}


.loginpanel .agr .agreement:hover{
    color: #ff0000;

}


/*===============================================*/
.userinfopanel{
    width: 64.7%;
    height: auto;
    min-width: 921px;
    clear: both;
    margin: auto;
    padding-bottom: 30px;
}

.userinfobottom{
    clear: both;
    width: 100%;
    height: 50px;
}

.userinfopanel .leftpanel{
    width: 288px;
    float: left;
    height: 354px;
    border:solid 1px #c8c2c2;
    border-radius: 10px;
    margin-top:54px ;
    padding-top: 20px;
    margin-right: 78px;
}

.userinfopanel .leftpanel div{
    width: 100%;
    text-align: center;
    padding-bottom: 24px;
}

.userinfopanel .leftpanel .userheader{
    margin: auto;
    width: auto;
    font-size: 22px;
    line-height: 30px;
    color: #000000;
}

.userinfopanel .leftpanel .userheader img{
    margin: auto;

}

.userinfopanel .leftpanel a{
    display: block;
    width: 250px;
    height: 39px;
    text-align: center;
    margin: auto;
    line-height: 39px;
    color: #FFFFFF;
    background-repeat: no-repeat;
    background-position: 20px;
    border-radius: 5px;
    text-decoration: none;
    margin-bottom: 28px;
}


.userinfopanel .leftpanel #btnset{
    background-image: url("/resources/images/v2/icon_userinfo_1.png");
    background-color: #89bc04;
}


.userinfopanel .leftpanel #btnpassword{
    background-image: url("/resources/images/v2/icon_userinfo_2.png");
    background-color: #4b91f4;
}

.userinfopanel .leftpanel #btnbind{
    background-image: url("/resources/images/v2/icon_userinfo_3.png");
    background-color: #4b91f4;
}

.userinfopanel .rightpanel{
    width: 555px;
    float: right;
    height: auto;
    margin-top:54px ;
    min-height: 500px;

}

.userinfopanel .rightpanel .formuserinfo{
    width: 100%;
    text-align: left;
}


.userinfopanel .rightpanel .formuserinfo li{
    width: 100%;
    text-align: left;
    padding-top: 30px;
    font-size: 18px;
    color: #0f2105;
    clear: both;
    display: block;
    height: auto;
}

.userinfopanel .rightpanel .formuserinfo .title{
    color: #0f75bd;
    width: 531px;
    float: right;
    height: 54px;
    border-bottom: solid 1px #c8c2c2;
    padding-top: 0px;
    font-size: 24px;
}

.userinfopanel .rightpanel .formuserinfo .headpic{
    width: 153px;
    height: 153px;
    text-align: center;
    vertical-align: middle;
    display: block;
    border: solid 1px #c8c2c2;
}

.userinfopanel .rightpanel .formuserinfo span{
    float: left;
}

.userinfopanel .rightpanel .formuserinfo .lefttitle{
    float: left;
    width: 111px;
    text-align: right;
    height: 44px;
    vertical-align: middle;
    line-height: 44px;
    padding-right: 10px;
}

.userinfopanel .rightpanel .formuserinfo #btnuploadhead{
    width: 248px;
    height: 39px;
    text-align: center;
    color: #FFFFFF;
    line-height: 39px;
    margin-left: 35px;
    display: block;
    background-color: #4b91f4;
    border-radius: 5px;
    margin-top: 113px;
    text-decoration: none;
}

.userinfopanel .rightpanel .formuserinfo .iptbox{
    width: 444px;
    height: 44px;
    border-radius: 10px;
    border:solid 1px #c8c2c2;
    text-align: left;
    color: #363636;
    font-size: 16px;
    padding: 10px;
}

.userinfopanel .rightpanel .formuserinfo .genderrow{
    width: 60%;
    text-align: left;

}


.userinfopanel .rightpanel .formuserinfo .genderrow img{
    display:inline;
    vertical-align: middle;

}

.userinfopanel .rightpanel .formuserinfo .btnsave{
    display: block;
    width: 248px;
    height: 39px;
    line-height: 39px;
    text-align: center;
    color: #FFFFFF;
    font-size: 18px;
    background-color: #4b91f4;
    text-decoration: none;
    border-radius: 5px;
    margin: auto;
}
.userinfopanel .rightpanel .formuserinfo .validbox{
    float: left;
    width: 157px;
    margin-right: 20px;
}
.userinfopanel .rightpanel .formuserinfo .validcode{
    float: left;
    margin-right: 10px;

    display: block;
    height: 50px;
    line-height:40px;
    color: #0f75bd;
    text-decoration: none;
    width: 250px;
}

.userinfopanel .rightpanel .formuserinfo .validcode img{
    float: left;
    margin-top: 6px;

}


.userinfopanel .rightpanel .formuserinfo .bindwrapper{
    float: left;
    width: 268px;
    text-align: center;

}

.userinfopanel .rightpanel .formuserinfo .bindwrapper .btnbind{
    display: block;
    width: 160px;
    height: 41px;
    line-height: 41px;
    text-align: center;
    color: #FFFFFF;
    font-size: 18px;
    background-color: #4b91f4;
    text-decoration: none;
    border-radius: 5px;
    margin: auto;
    margin-top: 20px;
}


@media screen and (max-width: 640px) {

    .userinfopanel .leftpanel{
        width: 600px;
        float: left;
        height: auto;
        border:solid 1px #c8c2c2;
        border-radius: 10px;
        margin-top:54px ;
        padding: 10px;
        margin-left: 10px;

    }


    .userinfopanel .leftpanel .userheader{
        margin: auto;
        width: 142px;
        font-size: 22px;
        line-height: 30px;
        color: #000000;
        float: left;
        overflow: hidden;
        padding-bottom: 0px;
    }

    .userinfopanel .leftpanel .userheader img{
        margin: auto;

    }

    .userinfopanel .leftpanel a{
        display: block;
        width: 140px;
        height: 39px;
        float: left;
        text-align: center;
        margin-top: 30px;
        margin-right: 5px;
        line-height: 39px;
        color: #FFFFFF;
        background-repeat: no-repeat;
        background-position: 20px;
        border-radius: 5px;
        text-decoration: none;

    }


    .userinfopanel .leftpanel #btnset{
        background-image: none;
        background-color: #89bc04;
    }


    .userinfopanel .leftpanel #btnpassword{
        background-image: none;
        background-color: #4b91f4;
    }

    .userinfopanel .leftpanel #btnbind{
        background-image: none;
        background-color: #4b91f4;
    }


    .userinfopanel .rightpanel{
        width: 555px;
        float: left;
        height: auto;
        margin-top:54px ;
        margin-left:30px ;
        min-height: 500px;

    }
}


/*======================================================================*/
.middlenavi{
    width: 100%;
    height: auto;
    border-bottom: solid 1px #dcdada;
    margin-bottom: 32px;
}

.middlenavi .coursesnavi{
    margin: auto;
    text-align: left;
    width: 63.6%;
    height: 56px;
    overflow: hidden;
}

.middlenavi .coursesnavi a{
    float: left;
    line-height: 56px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    color: #828587;
    font-size: 16px;
    text-decoration: none;
}

.middlenavi .coursesnavi a.on,.middlenavi .coursesnavi a:hover{
    color: #FFFFFF;
    background-color: #8DC63F;
    background-image: url("/resources/images/v2/tri.png");
    background-repeat: no-repeat;
    background-position: 50% bottom;
}

.middlenavi .coursesnavi .search{
    width: 187px;
    height: 35px;
    float: right;
    border: solid 1px #cac7c7;
    border-radius: 5px;
    margin-top: 9px;
    overflow: hidden;
}

.middlenavi .coursesnavi .search .kw{
    padding-left: 5px;
    width: 145px;
    height: 35px;
    border: none;
    background-color: #ebe8e8;
    text-align: left;
    font-size: 14px;
    line-height: 35px;
    float: left;
}


.middlenavi .coursesnavi .search .btnsearch{
    width: 35px;
    height: 35px;
    text-align: center;
    background-image: url("/resources/images/v2/iconsearch.png");
    background-repeat: no-repeat;
    background-position: 9px;
    background-color: #89bc04;
    display: block;
    float: left;
}

.middlenavi .coursesnavi .search .btnsearch:active{
    background-color: #699100;
}


.courseitem{
    width: 1134px;
    min-width: 1134px;
    border: solid 1px #cac7c7;
    border-radius: 10px;
    padding: 15px;
    height: 100%;
    clear: both;
    margin: auto;
    background-color: #f8f6f6;
    margin-bottom: 30px;
}

.courseitem .courseiteminner{
    background-color: #FFFFFF;
    border-radius: 5px;
}

.courseitem .left{
    width: 476px;
    height: 349px;
    border-radius: 5px;
    display: block;
    float: left;
    position: relative;
}

.courseitem .left img{
    width: 100%;
    height: 100%;
}

.courseitem .right{
    width: 590px;
    height: 349px;
    margin-left: 20px;
    float: left;
}

.courseitem .right ul{
    width: auto;
    height: auto;
    margin-right: 20px;
}

.courseitem .right ul .title{
    /* height:60px; */
    color: #0054a6;
    font-size: 22px;
    margin-top: 5px;
    border-bottom: solid 2px #89bc04;
    text-align: left;
    line-height:35px;
    padding-bottom: 10px;
}
.courseitem .right ul .title a{
    color: #0054a6;
    text-decoration: none;
}

.courseitem .right ul .title a:hover{
    color: #ff0000;
}

.courseitem .right ul .tags{
    border:none;
    width: 60%;
    float: left;
    height: 36px;
    padding-top: 5px;
    font-size: 14px;
    margin-top: 10px;
}

.courseitem .right ul .tags.tagsbottom{
    margin-top:0px;
    width: 70%;
}

.courseitem .right ul .tags.tagsbottom .tag{
    float: right;
}

.courseitem .right ul .authors{
    width: 40%;
    float: right;
    text-align: right;
    font-size: 14px;
    line-height: 36px;
    margin-top: 10px;
}

.courseitem .right ul .brief{
    width: 100%;
    text-align: left;
    line-height: 140%;
    height: 215px;

}

.courseitem .right ul .btnletspro{
    display: block;
    width: 123px;
    height: 43px;
    float: left;
}

.courseitem .right ul .btnbuy{
    display: block;
    width: 150px;
    height: 40px;
    background-image: url("/resources/images/v2/btnbuy.png");
    float: left;
}


.courseitem .right ul .btnread{
    display: block;
    width: 114px;
    height: 46px;
    background-image: url("/resources/images/v2/btnread.png");
    float: right;
}

.btnmorecourse{
    width: 130px;
    height: 41px;
    background-image: url("/resources/images/v2/btnmore.png");
    margin: auto;
    display: block;
    margin-bottom: 30px;
}



@media screen and (max-width: 640px) {
    .middlenavi{
        width: 209px;
        height: auto;
        position: fixed;
        left: 0px;
        top:297px;
        z-index: 100;
        border-bottom: none;
    }

    .middlenavi .coursesnavi{
        width: 100%;
        height:auto;
        background-image: url("/resources/images/v2/coursenaviback.png");
        text-align: center;
        margin: auto;
        display: none;


    }


    .middlenavi .coursesnavi a{
        display: block;
        width: 100%;
        height: 52px;
        margin: auto;
        border-bottom: dashed 1px #FFFFFF;
        color: #FFFFFF;
    }

    .middlenavi .coursesnavi .last{
        border-bottom: none;
    }

    .middlenavi .coursesnavi a.on,.middlenavi .coursesnavi a:hover{
        color: #FFFFFF;
        background-color: #4b91f4;
        background-image: url("/resources/images/v2/tri.png");
        background-repeat: no-repeat;
        background-position: 50% bottom;
    }

    .middlenavi .coursesnavi .search{
        display: none;
    }


    .courseitem{
        width:640px;
        border: none;
        float: none;
        height: 100%;
        clear: both;
        margin: auto;
        background:none;
        margin-top:78px;
        text-align: left;

    }


    .courseitem .courseiteminner{
        background-color: #FFFFFF;
        border-radius: 5px;
        text-align: left;
    }

    .courseitem .left{
        width: 585px;
        height:auto;
        margin: auto;
        display: block;
        float: left;


    }

    .courseitem .left img{
        border-radius: 10px;
        overflow: hidden;
        width: 100%;

    }

    .courseitem .right{
        width: 585px;
        height: auto;
        margin: auto;
        float: left;
        clear: both;
    }

    .courseitem .right ul{

        margin-right: 0px;
    }

    .courseitem .right ul .title{
        text-align: center;
        margin-top: 0px;
    }


    .courseitem .right ul .tags{
        border:none;
        width: 100%;
        float: right;
        height: 36px;
        padding-top: 5px;
        font-size: 14px;
        margin-top: 10px;

    }

    .courseitem .right ul .tags .tag{
        float: right;
    }

    .courseitem .right ul .authors{
        width: 100%;
        float: right;
        text-align: center;
        font-size: 14px;
        line-height: 36px;
        margin-top: 0px;
        
    }

    .courseitem .right ul .brief{
        height: auto;
        padding-bottom: 10px;

    }

}


/*=====================================================*/


.eventsitem{
    width: 79.6%;
    min-width: 1134px;
    border: solid 1px #cac7c7;
    border-radius: 10px;
    padding: 15px;
    height: 100%;
    clear: both;
    margin: auto;

    margin-bottom: 30px;
}

.eventsitem .eventslistinner{
    background-color: #FFFFFF;
    border-radius: 5px;
}


.eventsitem .left{
    width: 100%;
    height: 238px;
    border-radius: 5px;
    display: block;
    float: none;
    position: relative;
}



.eventsitem .right{
    width: 100%;
    height: auto;
    padding-left: 20px;
    padding-right: 20px;
    float: none;
}

.eventsitem .right ul .title{
    width: 60%;
    float: left;
    border-bottom: none;
    margin-top: 0px;
}


.eventsitem .right ul .tags{
    width: 40%;
    float: right;
}

.eventsitem .right ul .brief{
    clear: both;
    height: 68px;
    font-size: 16px;
    line-height: 140%;
    width: 80%;
}

.eventsitem .right ul .btneventdetail{
    display: block;
    width: 136px;
    height: 40px;
    background-image: url("/resources/images/v2/btneventdetail.png");
    float: right;
    margin-top: -65px;
}



@media screen and (max-width: 640px) {

    .eventsitem{
        width: 640px;

        border: none;

        padding: 15px;
        height: 100%;
        clear: both;
        margin: auto;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .eventsitem .eventslistinner{
        background-color: #FFFFFF;
        border-radius: 5px;
        width: 585px;
    }


    .eventsitem .left{
        width: 100%;
        height: auto;
        border-radius: 5px;
        display: block;
        float: none;
        position: relative;
        margin-bottom: 10px;
    }




    .eventsitem .right{
        width: 100%;
        height: auto;
        padding-left: 0px;
        padding-right: 0px;
        float: none;
    }

    .eventsitem .right ul .title{
        width: 70%;
        float: left;
        border-bottom: none;
        margin-top: 0px;
        overflow: hidden;
    }


    .eventsitem .right ul .tags{
        width: 100%;
  
        margin-top: 0px;
    }

    .eventsitem .right ul .brief{
        clear: both;
        height: auto;
        font-size: 16px;
        line-height: 140%;
        width: 100%;

    }

    .eventsitem .right ul .btneventdetail{
        display: block;
        width: 136px;
        height: 40px;
        background-image: url("/resources/images/v2/btneventdetail.png");
        float: right;
        margin-top: 0px;

    }
}


/*==============================*/
.detailpage{
    width: 1149px;
    min-width: 1149px;
    height: auto;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 40px;
}

.detailpage .detailtop{
    width: 100%;
    height: auto;
    padding-bottom: 10px;
    border-bottom: solid 2px #4b91f4;
    margin-bottom: 20px;
}

.detailpage .title{
    width: 100%;
    height: 60px;
    font-size: 140%;
    font-weight: bold;
    text-align: center;
    border-bottom: none;

}


.detailpage .title.newstitle{
    width: 100%;
    height: auto;
    font-size: 28px;
    font-weight: normal;
    text-align: center;
    border-bottom: none;
    color: #000000;


}

.detailpage .source{
    width: 100%;
    text-align: right;
    margin-bottom: 20px;
    color: #000000;
}

.detailpage .titlepic{
    float: left;
    margin-right: 37px;
    /*max-width:1000px*/;
}

.detailpage .author{
    width: 100%;
    height: 24px;
    font-size: 14px;
    text-align: center;
    line-height: 24px;
    margin: auto;
}

.detailpage .tags{
    float: right;
    height: 24px;
    border-top: none;
    width: 100%;
    padding-top: 0px;
    margin-top: -24px;
    font-size: 14px;

}

.detailpage .tags .tag{
    float: right;


}


.detailpage .detailleft .tags .tag{
    font-size: 14px;
    line-height: 140%;
}

.detailpage .detailcontent{
    width: 100%;
    height: auto;
    clear: both;
    text-align: left;
    font-size: 18px;
    line-height: 160%;
    padding-bottom: 15px;
    background-color: #f8f8f8;
}

.detailpage .detailcontent span{
    padding: 10px;
    display: block;
}

/* This is to override the parent css for img so that xiumi content displays correctly */
#detailcontent img{
    display: inherit;
}

.detailpage .detailcontent .brief{
    padding: 20px;
    margin: auto;
    display: table-cell;
}

.detailpage .detailleft{
    width: 66.5%;
    min-width: 765px;
    float: left;
    height: auto;
    text-align: left;
    color: #000000;
    margin-top: 30px;
    font-size: 18px;
    line-height: 180%;
    clear: both;

}

.detailpage .detailleft .btns{
    width:765px;
    text-align: right;
    height: auto;
    display: block;
    position: relative;
    float: none;
    clear: both;
    margin: auto;
    margin-top: 50px;
}


.detailpage .detailleft .btnbuy{
    display: block;
    background-image: url("/resources/images/v2/btnbuy.png");
    width: 150px;
    height: 40px;
    float: right;
    margin-right: 30px;
}


.detailpage .detailleft .btnbbs{
    display: block;
    background-image: url("/resources/images/v2/btnbbs.png");
    width: 150px;
    height: 40px;
    float: right;

}

.detailpage .detailright{

    width: 327px;
    min-width: 327px;
    float: right;
    height: auto;
    padding-top: 20px;
    top: 920px;

}

.detailpage .detailright.right2{
    top: 600px;
}

.detailpage .detailright .btnenroll{
    display: block;
    background-image: url("/resources/images/v2/btnenroll.png");
    width: 329px;
    height: 207px;
    color: #676765;
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
    margin-bottom: 10px;
}


.detailpage .detailright .btnbbslink{
    display: block;
    background-image: url("/resources/images/v2/btnbbsback.png");
    width: 327px;
    height: 143px;
    color: #676765;
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
    padding-top: 64px;

}

.detailpage .detailright .courseset{
    display: block;
    width: 327px;
    height: auto;
    background-repeat:no-repeat;
    background-image: url("/resources/images/v2/coursesetback.png");
    margin-top: 10px;
    padding-top: 62px;
    border: solid 2px #e4e9e9;
    border-radius: 10px;
}
.detailpage .detailright .courseset li{
    text-align: left;
    padding-left: 32px;
    font-size: 18px;
    color: #676765;
    /* height: 33px; */
    line-height: 33px;
    background-image: url("/resources/images/v2/dot.png");
    background-repeat: no-repeat;
    background-position: 20px 14px;
}

.detailpage .detailright .coursekit{
    display: block;
    width: 327px;
    height: auto;
    background-repeat:no-repeat;
    background-image: url("/resources/images/v2/coursesetback.png");
    margin-top: 10px;
    padding-top: 62px;
    padding-bottom: 15px;
    border: solid 2px #e4e9e9;
    border-radius: 10px;
}
.detailpage .detailright .coursekit li{
    text-align: center;
    font-size: 18px;
    color: #676765;
    padding-top: 15px;
    line-height: 33px;
}

.detailpage .detailright .spider{
    width: 327px;
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    border: solid 1px #e9e9e9;
    border-radius: 10px;
    padding: 5px;
}

.detailpage .detailright .btnupload{
    display: block;
    background-image: url("/resources/images/v2/btnuploadback.png");
    width: 327px;
    height: 103px;
    color: #676765;
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
    padding-top: 64px;
    margin-top: 10px;

}

.detailpage .detailright .btnkcg{
    display: block;
    background-image: url("/resources/images/v2/bg_krg.png");
    width: 327px;
    height: 103px;
    color: #676765;
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
    padding-top: 64px;
    margin-top: 10px;
}

.detailpage .detailright .btnenroll{
    display: block;
    background-image: url("/resources/images/v2/bg_reserve.png");
    width: 327px;
    height: 103px;
    color: #676765;
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
    padding-top: 64px;
    margin-top: 10px;
}



.detailpage .detailright .share{
    display: block;
    width: 327px;
    height: 138px;
    background-image: url("/resources/images/v2/shareback.png");
    margin-top: 10px;
    padding-top: 12px;
}

.detailpage .detailright .share li{
    width: auto;
    height: 45px;
    line-height: 45px;
    font-size: 20px;
    color: #676765;
    text-align: left;
}

.detailpage .detailright .share .left{
    width: 148px;
    float: left;
    margin-left: 39px;
}


.detailpage .detailright .share .right{
    width: 122px;
    float: left;
}

.detailpage .detailright .share .right .smallbtn{
    float: left;
    margin-right: 10px;
}

.detailpage  .classlist{
    width: 100%;
}

.detailpage .relatednews{
    width: 100%;
    clear: both;
}

.detailpage .relatednews .title{
    font-weight: normal;

}

.detailpage .relatednews ul{
    width: 100%;
    height: auto;
}

.detailpage .relatednews ul li{
    width: 270px;
    height: 237px;
    float: left;
    margin-right: 17px;
    background-color: #000000;
    overflow: hidden;
    border: solid 1px #bcb1a6;
    border-radius: 5px;


}

.detailpage .relatednews ul li img{
    transition: all 0.5s;
    opacity: 0.5;

}

.detailpage .relatednews ul li:hover img{
    opacity: 1;
}

.detailpage .relatednews ul li .retitle{
    position: absolute;
    width: 280px;
    height: auto;
    font-size: 16px;
    color: #FFFFFF;
    margin-top: 195px;
    text-align: center;
    z-index: 100;
    transition: all 0.5s;
    text-decoration: none;
}

.detailpage .relatednews ul li:hover .retitle{
    margin-top: 260px;
    opacity: 0;
}


.detailpage .contentevents .inner{
    width: 100%;
}


.detailpage .contentevents .browse{
    margin-top: -30px;
}

.detailpage .floatnavi{
    display: none;
    position: fixed;
    top: 83px;
    margin-left: 0px;
    float: left;
}

@media screen and (max-width: 640px) {
    .detailpage{
        width: 91.8%;
        min-width: 588px;
        height: auto;
        margin: auto;
        margin-top: 30px;
        margin-bottom: 40px;

    }

    .detailpage .detailcontent img{
        width: 100%;
    }

    .detailpage .detailright.right2{
        top: 0px;
    }
    .detailpage .detailright .btnenroll{
        margin: auto;
    }

    .detailpage .detailleft{
        width: 60%;
        min-width: 588px;
        float: none;
        height: auto;

    }

    .detailpage .detailleft img{
        width: auto;
    }

    .detailpage .detailright{
        display: block;
        width: 100%;
        top:auto;
        float: none;
        height: auto;
        clear: both;
        margin-left: 0px;
        position: relative;
    }

    .detailpage .detailright .spider{
        
        margin: auto;
        margin-top: 20px;
    }

    .detailpage .detailleft .btns{
        width:100%;
        min-width: 588px;
        text-align: right;
        height: auto;
        display: block;
        position: relative;
        float: none;
        clear: both;
        margin: auto;
        margin-top: 30px;
    }

    .detailpage .detailleft .btnbuy{
        float: left;
    }
    .detailpage .detailleft .btnbbs{
        float: right;
    }

    .detailpage .detailright .btnkcg{
        display: block;
        background-image: url("/resources/images/v2/bg_krg.png");
        width: 327px;
        height: 103px;
        color: #676765;
        font-size: 20px;
        text-align: center;
        line-height: 30px;
        text-decoration: none;
        padding-top: 64px;
        margin: auto;
        margin-top: 10px;
    }

    .detailpage .detailright .btnenroll{
        display: block;
        background-image: url("/resources/images/v2/bg_reserve.png");
        width: 327px;
        height: 103px;
        color: #676765;
        font-size: 20px;
        text-align: center;
        line-height: 30px;
        text-decoration: none;
        padding-top: 64px;
        margin: auto;
        margin-top: 10px;
    }


    .detailpage .detailright .btnbbslink,.detailpage .detailright .courseset{
        display: none;
    }

    .detailpage .detailright .btnbbslink,.detailpage .detailright .coursekit{
        margin: auto;
    }

    .detailpage .detailright .btnupload{
        margin: auto;
        margin-top: 20px;
     }

    .detailpage .detailright .share{
        display: block;
        width:100%;
        min-width: 588px;
        height: 138px;
        background-image: none;
        margin-top: 10px;
        padding-top: 12px;
    }

    .detailpage .detailright .share .left{
        width: 35%;
        float: left;
        margin-left: 39px;
        height: 87px;
        line-height: 87px;
        font-size: 30px;
    }


    .detailpage .detailright .share .right{
        width: 40%;
        float: left;
        height: 87px;
        line-height: 87px;
    }

    .detailpage .detailright .share .smallbtn{
        width: 87px;
        height: 87px;
    }
    .detailpage .detailright .share .smallbtn img{
        width: 87px;
        height: 87px;
    }

    .detailpage  .classlist .classitem{
        width: 80%;
        margin: auto;
        margin-bottom: 50px;
        float: none;

    }
    .detailpage  .classlist .classitem .classcontent{
        padding: 5px;
        padding-bottom: 15px;
    }

    .detailpage .title.newstitle{

        margin-bottom: 20px;

    }

    .detailpage .relatednews ul li{
        margin-top: 20px;

    }

    .detailpage .floatnavi ,.detailpage .floatnavi .floatnaviinner{
        display: none;
    }


}



/*=======================hr page=================================*/
.hrpage{
    width: 84.5%;
    height: auto;
    margin: auto;
    margin-top: 58px;
    margin-bottom: 60px;
}

.hrpage .poslist{
    width: 288px;
    height: auto;
    border-radius: 10px;
    border: solid 1px #c8c2c2;
    padding: 20px;
    float: left;
    position: fixed;
}

.hrpage .poslist .title{
    font-size: 20px;
    line-height: 39px;
    width: 248px;
    height: 39px;
    color: #FFFFFF;
    margin: auto;
    text-align: center;
    margin-bottom: 10px;
    background-color: #4b91f4;
}

.hrpage .poslist a{
    display: block;
    width: 243px;
    height: auto;
    color: #343434;
    font-size: 20px;
    line-height: 28px;
    border-bottom: solid 1px #b5b5b5;
    text-align: left;
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 5px;
}

.hrpage .poslist a:hover{
    background-color: #dadada;
}


.hrpage .hrlist{
    width: 70.3%;
    height: auto;
    float: right;
}

.hrpage .hrlist .title{
    font-size: 26px;
    line-height: 52px;
    width: 100%;
    height: 52px;
    color: #FFFFFF;
    margin: auto;
    text-align: left;
    margin-bottom: 10px;
    padding-left: 15px;
    background-color: #4b91f4;
}

.hrpage .hrlist .hritem{
    width: 100%;
    height: auto;
    padding: 10px;
    text-align: left;
    font-size: 20px;
    line-height: 34px;
    margin-bottom: 30px;
}

.hrpage .hrlist .hritem .jobtitle{
    font-size: 20px;
    color: #4b91f4;
    text-shadow: -1px 1px 1px #cfdefb;
}

.hrpage .hrlist .hritem .hrmail{
    color: #f26521;
    text-decoration: none;
}

@media screen and (max-width: 640px) {
    .hrpage{
        width: 95%;
    }
    .hrpage .poslist{
       /*
        position: fixed;
        left: 0px;
        top: 140px;
        background-color: #FFFFFF;
        */
        display: none;
    }

    .hrpage .hrlist{
        width: 100%;
        height: auto;
        float: none;
        margin: auto;
    }
}
a:link {text-decoration:none;color:#2e87c5;}
a:visited {text-decoration:none;color:#2e87c5;}
a:hover {text-decoration:none;color:#2e87c5;}
a:active {text-decoration:none;color:#2e87c5;}

.after-school-container h4 {
    margin-bottom: 15px
}