/*
Theme Name: haoracle
Theme URI:
Description: SEO优化站主题
Version: 1.0.0
Author: rawait
Author URI:
Tags:
*/

/*---------------------------------------- documen ----------------------------------------*/
:root{--color-main:#367ae5;--color-red:#ff4e00;--color-gray:#f3f3f3;--color-eee:#eee}
*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent}
input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}
a{text-decoration:none}
a:focus{outline:.05rem auto -webkit-focus-ring-color;outline-offset:-.02rem}
img{max-width:100%;height:auto;vertical-align:middle}
input,textarea,frame,iframe,img,fieldset,input,textarea{border:0}
body{font-family:"Microsoft Yahei",tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;min-height:100%;_background-attachment:fixed}
a{color:#333;outline:0;text-decoration:none}
a:hover,a:focus{color:var(--color-main);text-decoration:none}
input,select,textarea,button{font-family:"Microsoft Yahei",tahoma,arial,Hiragino Sans GB,"\5b8b\4f53",sans-serif;resize:none;outline:0}
button{border:0}
object,input{vertical-align:middle}
table{border-spacing:0;border-collapse:collapse}
ul,ol,dl,dt,dd{list-style:none;margin:0;padding:0}
p{margin:0}
i,em{font-style:normal}
html,body{position:relative}
.fl,.rollfl{float:left}
.fr{float:right}
.expand{width:100%;text-align:center}
.text-ellipsis{text-align:justify;position:relative;z-index:9}
.text-ellipsis::after{content:'...';float:right;width:50px;height:50%;padding-right:5px;text-align:right;background:linear-gradient(to right,rgba(255,255,255,0),#fff 40px);position:absolute;bottom:0;right:0;z-index:9}
.js-tableswitch .title-item{cursor:pointer}
.js-tableswitch .list-item{display:none}
.js-tableswitch .list-item.show{display:block}
.js-select .select-list{transition:all .3s;visibility:hidden;opacity:0}
.js-select .select-list.show{visibility:visible;opacity:1}
.js-showmore{overflow:hidden;position:relative;z-index:9}
.js-showmore.show{height:auto}
.js-showmore .showmore-btn{float:left;width:100%;height:32px;line-height:32px;color:var(--color-red);background:linear-gradient(to bottom,transparent,#fff 26px);text-align:center;cursor:pointer;opacity:1;visibility:visible;position:absolute;left:0;bottom:0;z-index:9}
.js-showmore.show .showmore-btn{visibility:hidden;opacity:0}
.js-choose>.choose-btn{float:left;margin:0 20px 20px 0;padding:8px 20px;color:var(--color-main);border-radius:3px;border:1px solid var(--color-main);background:#fff;cursor:pointer}
.js-choose>.choose-btn.active{color:#fff;background:var(--color-main)}
body{margin:0;font-size:14px;line-height:1.5;color:#333;background-color:#fff}
.img-center{position:relative;z-index:9}
.img-center>img{float:left;max-width:100%;margin:auto;position:absolute;top:0;right:0;bottom:0;left:0;z-index:9}
.color-red{color:var(--color-red)}
.text-ellipsis{text-align:justify;position:relative;z-index:9}
.text-ellipsis::after{content:'...';float:right;width:50px;height:50%;padding-right:5px;text-align:right;background:linear-gradient(to right,rgba(255,255,255,0),#fff 40px);position:absolute;bottom:0;right:0;z-index:9}
.page{float:left;width:100%}
.page.hidden{position:fixed;top:0;overflow:hidden}
.container{width:1200px;margin:0 auto;*zoom:1}
.container::before,.container::after{display:table;content:"";line-height:0}
.container::after{clear:both}
.content{min-height:70vh}
/*---------------------------------------- floor ----------------------------------------*/
.floor{float:left;width:100%}
.floor-title{float:left;margin:20px 0 0 0;width:100%;height:32px;line-height:32px;font-size:20px}
.floor-title>.icon{float:left;margin-right:10px;width:32px;height:32px;background:url(./resource/images/floor-icon.png) no-repeat center center;background-size:100% auto}
.floor-title>.text{float:left;font-size:20px;font-weight:400}
.floor-title>.subtitle{float:left;font-size:14px;color:#888}
.floor02-title{float:left;margin:20px 0 0 0;width:100%;font-weight:400}
.floor02-title>.item{float:left;padding:8px 20px;font-size:20px;color:var(--color-main);border-radius:8px 8px 0 0;cursor:pointer;background-color:var(--color-gray)}
.floor02-title>.text{float:left;margin-left:20px;font-size:14px;color:#888;line-height:46px}
/*---------------------------------------- topbar ----------------------------------------*/
.topbar{padding:8px 0;background-color:var(--color-gray);overflow:hidden}
.topbar-text{float:left;font-size:12px}
.topbar-menu{float:right}
.topbar-menu>.text,.topbar-menu>.tel{float:left;font-size:12px;color:#666;position:relative;z-index:9}
.topbar-menu>.text{padding-right:10px;margin-right:10px}
.topbar-menu>.text::after{content:'';float:left;width:1px;height:14px;background-color:#aaa;transform:translate(0,-50%);position:absolute;right:0;top:50%;z-index:9}
/*---------------------------------------- header ----------------------------------------*/
.header-left{float:left;margin:20px 0;font-weight:normal}
.header-left>.logo{float:left;margin:0;padding:0;width:180px;height:54px;overflow:hidden;position:relative;z-index:9}
.header-left>.logo>a{float:left;width:100%}
.header-left .logo-img{float:left;width:100%;cursor:pointer}
.header-left>.campus{float:left;margin:20px 0 0 20px;padding-left:20px;border-left:1px solid #aaa}
.header-left .campus-item{float:left;margin-right:10px;width:220px;height:34px;background-color:var(--color-gray);border-radius:4px;position:relative}
.header-left .campus-item:last-child{margin-right:0}
.header-left .campus-item>.title{float:left;width:60px;height:34px;color:#fff;font-size:16px;border-radius:4px;box-shadow:0 0 12px rgba(0,0,0,.2);background-color:var(--color-main);display:flex;align-items:center;justify-content:center;position:absolute;left:0;top:0;z-index:8}
.header-left .campus-item>.text{float:left;width:130px;height:34px;line-height:34px;color:#666;margin:0 30px 0 60px;padding:0;text-align:center;font-family:'Microsoft YaHei',Verdana,Arial,Helvetica,sans-serif;border:0;outline:0;cursor:pointer;background-color:var(--color-gray)}
.header-left .campus-item>.arrow{float:left;width:12px;height:12px;margin-top:-4px;cursor:pointer;position:absolute;top:50%;right:12px;z-index:9}
.header-left .campus-item>.arrow::after,.header-left .campus-item>.arrow::before{content:'';width:0;height:0;border:6px solid transparent;border-top-color:var(--color-gray);position:absolute;left:0;top:0}
.header-left .campus-item>.arrow::before{border-top-color:#666;top:2px}
.header-left .campus-item>.list{float:left;width:100%;border-radius:4px;background-color:var(--color-gray);overflow:hidden;position:absolute;top:35px;left:0;z-index:999}
.header-left .campus-item .list-nape{float:left;width:220px;height:34px;line-height:34px;color:#888;text-align:center;cursor:pointer;border-bottom:1px solid #dfdfdf}
.header-left .campus-item .list-nape:hover{background-color:var(--color-main);color:#fff}
.header-right{float:right;width:40%;height:32px;margin:42px 0 20px;overflow:hidden}
.header-right>.cooperation{float:left;width:100%;overflow:hidden;position:relative;z-index:9}
.header-right .item-icon{float:left;width:32px;height:32px;background-image:url(./resource/images/cooperation-icon.jpg);background-repeat:no-repeat;background-position:center;background-size:100% auto}
.header-right .item-icon.oracle{background-position:0 0}
.header-right .item-icon.microsoft{background-position:0 -32px}
.header-right .item-icon.unity{background-position:0 -64px}
.header-right .item-icon.baidu{background-position:0 -96px}
.header-right .item-icon.puhua{background-position:0 -128px}
.header-right .item-icon.xinkaipu{background-position:0 -160px}
.header-right .item-icon.ruiqi{background-position:0 -192px}
.header-right .item-icon.huawei{background-position:0 -224px}
.header-right .item-icon.tencent{background-position:0 -256px}
.header-right .item-text{float:left;padding:0 14px 0 8px;line-height:16px;font-size:12px}
/*---------------------------------------- nav ----------------------------------------*/
.nav{background-color:var(--color-main)}
.nav-menu{float:left;width:100%}
.nav-menu>.menu-item{float:left;width:12.5%;height:44px;line-height:44px;text-align:center;display:flex;justify-content:center;position:relative;z-index:99}
.nav-menu>.menu-item>a{float:left;font-size:16px;color:#fff;cursor:pointer;transition:color .2s;position:relative;z-index:9}
.nav-menu>.menu-item>a::after{content:"";float:left;width:100%;height:2px;background-color:#fff;visibility:hidden;transform:scale(0);transition:all .3s;position:absolute;left:0;bottom:0;z-index:9}
.nav-menu>.menu-item.current-menu-item>a,.nav-menu>.menu-item.current-menu-parent>a,.nav-menu>.menu-item.current-page-ancestor>a,.nav-menu>.menu-item:hover>a{color:#fff}
.nav-menu>.menu-item.current-menu-item>a::after,.nav-menu>.menu-item.current-menu-parent>a::after,.nav-menu>.menu-item.current-page-ancestor>a::after,.nav-menu>.menu-item:hover>a::after{visibility:visible;transform:scale(1)}
.nav-menu>.menu-item.menu-item-has-children>a::before{content:"";width:0;height:0;margin-top:-2px;border-width:6px;border-color:#fff transparent transparent transparent;border-style:solid;position:absolute;right:-20px;top:50%;z-index:9}
.nav-menu>.menu-item.menu-item-has-children:hover>a::before{margin-top:-8px;border-color:transparent transparent #fff transparent}
.nav-menu>.menu-item>.sub-menu{float:left;width:100%;background-color:#fff;opacity:0;visibility:hidden;transition:all .3s ease-out;transform:translate3d(0px,20px,0px);box-shadow:0 2px 10px rgba(0,0,0,.2);position:absolute;left:0;top:44px;z-index:9}
.nav-menu>.menu-item:hover>.sub-menu{visibility:visible;opacity:1;transform:translate3d(0px,0px,0px)}
.nav-menu>.menu-item>.sub-menu>.menu-item{float:left;width:100%}
.nav-menu>.menu-item>.sub-menu>.menu-item>a{float:left;width:100%;padding:0 10px;color:#888;text-align:center;border-bottom:1px solid #ddd;transition:all .2s}
.nav-menu>.menu-item>.sub-menu>.menu-item>a:hover{color:var(--color-main);text-indent:1em}
/*---------------------------------------- crumbs ----------------------------------------*/
.crumbs-box{float:left;width:100%;padding:16px 0;line-height:26px;border-bottom:1px solid #ddd}
.crumbs-box>.title{float:left;color:#999;position:relative;z-index:9}
.crumbs-box>a{float:left}
.crumbs-box>i{float:left;width:26px;height:26px;position:relative;z-index:9}
.crumbs-box>i::before,.crumbs-box>i::after{content:'';margin-top:-6px;border-width:6px;border-style:solid;position:absolute;top:50%;right:50%;z-index:9}
.crumbs-box>i::before{border-color:transparent transparent transparent #aaa;margin-right:-10px}
.crumbs-box>i::after{border-color:transparent transparent transparent #fff;margin-right:-8px}
.crumbs-box>i::before{z-index:8}
.crumbs-box>i::after{z-index:9}
/*---------------------------------------- footer ----------------------------------------*/
.footer{float:left;padding:16px 0;margin:30px 0 0;width:100%;color:#666;line-height:24px;background-color:var(--color-gray);overflow:hidden}
.footer-logo{float:left;width:160px;height:48px;background-color:var(--color-eee)}
.footer-logo>.img{float:left;width:100%}
.footer-menu{float:left}
.footer-menu>.menu-item{float:left;margin-right:30px}
.footer-menu>.menu-item>a{float:left;color:#888;text-decoration:underline}
.footer-menu>.menu-item>a:hover{color:var(--color-main)}
.footer-consult{float:left}
.footer-copyright{float:left;width:100%}
.footer-copyright>a{color:#666}
.footer-copyright>a:hover{color:var(--color-main);text-decoration:underline}
/*---------------------------------------- banner ----------------------------------------*/
.banner{margin-top:10px}
.banner-container{float:left;width:900px;height:460px;border-radius:8px;background-color:var(--color-eee);overflow:hidden;position:relative;z-index:9}
.banner-item{float:left;width:100%;height:100%;background-repeat:no-repeat;background-position:top center;background-size:cover;overflow:hidden}
.banner-pagination{text-align:right;position:absolute;z-index:9}
.banner-pagination.swiper-pagination-bullets{bottom:10px;left:0;width:92%;margin:0 4%}
.banner-pagination>.swiper-pagination-bullet{width:10px;height:10px}
.banner-pagination>.swiper-pagination-bullet-active{color:var(--color-main)}
.banner-news{float:left;width:290px;height:460px;margin-left:10px;padding:25px 20px;background-color:var(--color-gray);border-radius:8px;overflow:hidden}
.banner-news>.title{float:left;margin:0;width:100%;font-size:20px;line-height:28px}
.banner-news .title-icon{float:left;width:28px;height:28px;margin-right:10px;background:url(./resource/images/floor-icon.png) no-repeat center center;background-size:100% auto}
.banner-news>.list{float:left;width:100%;margin-top:20px}
.banner-news .list-item{float:left;width:100%;margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#888;transition:all .3s}
.banner-news .list-item:last-child{margin-bottom:0}
.banner-news .list-item:nth-child(1),.banner-news .list-item:nth-child(2),.banner-news .list-item:nth-child(3),.banner-news .list-item:hover{color:var(--color-main)}
.banner-shortcuts{float:left;width:100%}
.banner-shortcuts>.item{float:left;margin:10px 12px 0 0;width:291px;height:190px;text-align:center;border-radius:8px;font-size:20px;transition:all .3s;cursor:pointer;overflow:hidden;position:relative;top:0;z-index:9}
.banner-shortcuts>.item:hover{top:-6px;box-shadow:0 26px 40px -26px rgba(0,0,0,.4)}
.banner-shortcuts>.item01{background-color:#f8c898;color:#966135}
.banner-shortcuts>.item02{background-color:#c7df95;color:#649333}
.banner-shortcuts>.item03{background-color:#a7d9e2;color:#219393}
.banner-shortcuts>.item04{margin-right:0;background-color:#98c4e9;color:#2f6291}
.banner-shortcuts>.item>.icon{float:left;width:100%;height:72px;margin:34px 0 14px;background-image:url(./resource/images/banner-icon.png);background-repeat:no-repeat;background-size:72px auto}
.banner-shortcuts>.item01>.icon{background-position:center 0}
.banner-shortcuts>.item02>.icon{background-position:center -72px}
.banner-shortcuts>.item03>.icon{background-position:center -144px}
.banner-shortcuts>.item04>.icon{background-position:center -216px}
/*---------------------------------------- recommend ----------------------------------------*/
.recommend{margin-top:20px}
.recommend-list{float:left;width:32%;margin-right:2%;padding:30px 20px 20px;background-color:var(--color-gray);border-radius:8px}
.recommend-list:nth-child(3n){margin-right:0}
.recommend-title{float:left;width:100%;margin:0;font-weight:400}
.recommend-title>a{float:left;padding-left:14px;font-size:20px;line-height:22px;border-left:3px solid var(--color-main)}
.recommend-content{float:left;width:100%;margin-top:20px}
.recommend-content>.item{float:left;width:100%;position:relative}
.recommend-content>.item:first-child{margin-bottom:10px}
.recommend-content>.item:last-child{margin-bottom:0}
.recommend-content .item-img{float:left;width:180px;height:120px;background-color:#fff;background-repeat:no-repeat;background-size:cover;background-position:center center;border-radius:8px;overflow:hidden}
.recommend-content .item-title{float:left;width:100%;line-height:2;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recommend-content .item-text{float:left;width:100%;height:56px;margin-top:4px;line-height:28px;color:#666;overflow:hidden}
.recommend-content .item-text::after{background:linear-gradient(to right,rgba(255,255,255,0),var(--color-gray) 40px)}
.recommend-content>.item:first-child>.item-title{font-size:16px;color:var(--color-main)}
.recommend-content>.item:hover .item-title{color:var(--color-main)}
.recommend-content .item-time{float:left;width:100%;margin-top:6px;color:#888}
.recommend-content>.item:first-child>.item-title,.recommend-content>.item:first-child>.item-text,.recommend-content>.item:first-child>.item-time{padding-left:200px;margin-left:-180px}
/*---------------------------------------- stuzone ----------------------------------------*/
.stuzone{margin-top:20px}
.stuzone-piclist{float:left;width:480px}
.stuzone-piclist>.title,
.stuzone-piclist>.list{float:left;width:100%}
.stuzone-piclist .title-item{float:left;width:108px;margin:16px 16px 0 0;border-radius:8px;overflow:hidden;position:relative;top:0;transition:all .3s}
.stuzone-piclist .title-item:last-child{margin-right:0}
.stuzone-piclist .title-item.active{top:-2px;box-shadow:0 0 12px rgba(0,0,0,.4)}
.stuzone-piclist .title-item>.img{float:left;width:100%;height:72px;background-color:#f1f1f1;background-repeat:no-repeat;background-position:center;background-size:cover}
.stuzone-piclist .list-item{float:left;width:100%;margin:16px 0 0 0;border-radius:8px;overflow:hidden;position:relative}
.stuzone-piclist .list-item>.img{float:left;width:100%;height:320px;background-color:#f1f1f1;background-repeat:no-repeat;background-position:center;background-size:cover}
.stuzone-piclist .list-item>.title{float:left;width:100%;padding:10px 20px;font-size:16px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:rgba(0,0,0,.6);position:absolute;left:0;bottom:0;z-index:9}
.stuzone-textlist{float:right;width:690px}
.stuzone-textlist>.title{float:left;width:100%;margin:16px 0 0}
.stuzone-textlist .title-item{float:left;width:128px;height:36px;margin-right:20px;font-size:16px;color:var(--color-main);border:1px solid #2772e7;border-radius:50px;display:flex;align-items:center;justify-content:center}
.stuzone-textlist .title-item>.icon{float:left;width:20px;height:20px;margin:0 6px 0 0;background-image:url(./resource/images/stuzone-icon.png);background-repeat:no-repeat;background-size:auto 40px;background-position-y:-20px}
.stuzone-textlist .title-item.item01>.icon{background-position-x:0}
.stuzone-textlist .title-item.item02>.icon{background-position-x:-20px}
.stuzone-textlist .title-item.active{color:#fff;background-color:var(--color-main)}
.stuzone-textlist .title-item.active>.icon{background-position-y:0}
.stuzone-textlist .title-item>.text{float:left}
.stuzone-textlist>.list{float:left;width:100%;margin-top:16px}
.stuzone-textlist .list-item{float:left;width:100%}
.stuzone-textlist .list-item>.nape{float:left;width:100%}
.stuzone-textlist .list-item>.nape:first-child{margin-bottom:10px}
.stuzone-textlist .list-item .nape-img{float:left;width:240px;height:160px;border-radius:8px;background-color:#f1f1f1;background-repeat:no-repeat;background-position:center;background-size:cover;position:relative;z-index:9}
.stuzone-textlist .list-item .nape-detail{float:left;width:100%;padding-left:260px;margin-left:-240px}
.stuzone-textlist .list-item .nape-detail>.title{float:left;width:100%;font-size:16px;line-height:36px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stuzone-textlist .list-item .nape-detail>.text{float:left;width:100%;height:56px;margin-top:14px;color:#666;line-height:28px;overflow:hidden}
.stuzone-textlist .list-item .nape-detail>.view{float:left;width:100px;height:34px;margin-top:14px;color:var(--color-main);border:1px solid var(--color-main);display:flex;align-items:center;justify-content:center}
.stuzone-textlist .list-item .nape-detail>.view:hover{color:#fff;background-color:var(--color-main)}
.stuzone-textlist .list-item .nape-text{float:left;max-width:80%;padding-left:16px;color:#666;line-height:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
.stuzone-textlist .list-item .nape-text::before{content:'';float:left;width:6px;height:6px;border:2px solid var(--color-main);border-radius:50%;transform:translateY(-50%);position:absolute;left:0;top:50%;z-index:9}
.stuzone-textlist .list-item .nape-text:hover{color:var(--color-main)}
.stuzone-textlist .list-item .nape-time{float:right;color:#999;line-height:32px}
/*---------------------------------------- iso ----------------------------------------*/
.iso-wrapper{float:left;width:100%;margin-top:20px}
.iso-wrapper>.title{float:left;width:100%;line-height:22px}
.iso-wrapper .title-text{float:left;padding-left:12px;font-size:20px;border-left:3px solid var(--color-main);line-height:22px}
.iso-wrapper .title-hint{float:right;color:var(--color-main)}
.iso-wrapper>.strengths{float:left;width:100%;border:1px solid #e1e1e1;border-radius:8px;overflow:hidden}
.iso-wrapper .strengths-item{float:left;width:33.3333%;padding:20px 0;font-size:16px;border-right:1px solid #e1e1e1;text-align:center;overflow:hidden;display:flex;flex-direction:column;align-items:center;position:relative;z-index:9}
.iso-wrapper .strengths-item.item01,.iso-wrapper .strengths-item.item02,.iso-wrapper .strengths-item.item03{border-bottom:1px solid #e1e1e1}
.iso-wrapper .strengths-item:nth-child(3n){float:right;border-right:0}
.iso-wrapper .strengths-item.item01{color:#209a7d}
.iso-wrapper .strengths-item.item02{color:#60a44b}
.iso-wrapper .strengths-item.item03{color:#1c74b3}
.iso-wrapper .strengths-item.item04{color:#1c74b3}
.iso-wrapper .strengths-item.item05{color:#2795c2}
.iso-wrapper .strengths-item.item06{color:#49b2bd}
.iso-wrapper .strengths-item>.icon{float:left;width:56px;height:56px;background-image:url(./resource/images/iso-icon.png);background-repeat:no-repeat;background-size:auto 336px;background-position-x:0}
.iso-wrapper .strengths-item.item01>.icon{background-position-y:0}
.iso-wrapper .strengths-item.item02>.icon{background-position-y:-56px}
.iso-wrapper .strengths-item.item03>.icon{background-position-y:-112px}
.iso-wrapper .strengths-item.item04>.icon{background-position-y:-168px}
.iso-wrapper .strengths-item.item05>.icon{background-position-y:-224px}
.iso-wrapper .strengths-item.item06>.icon{background-position-y:-280px}
.iso-wrapper .strengths-item>.text{float:left;margin-top:10px}
.iso-wrapper .strengths-item>.show{float:left;width:100%;height:100%;padding:10px 20px;font-size:14px;color:#fff;visibility:hidden;opacity:0;display:flex;align-items:center;transition:all .3s;position:absolute;top:0;left:0;z-index:9}
.iso-wrapper .strengths-item>.show::after{content:'';float:left;width:0;height:0;background-color:rgba(0,0,0,.6);visibility:hidden;opacity:0;transition:all .3s;transform:translate(-50%,-50%);position:absolute;top:50%;left:50%;z-index:-1}
.iso-wrapper .strengths-item:hover>.show{visibility:visible;opacity:1}
.iso-wrapper .strengths-item:hover>.show::after{width:100%;height:100%;visibility:visible;opacity:1}
.iso-wrapper>.teacher-container{float:left;width:100%;margin-top:20px;padding-bottom:30px;overflow:hidden;position:relative;z-index:9}
.iso-wrapper .teacher-box{float:left;width:50%}
.iso-wrapper .teacher-box>.img{float:left;width:116px;height:140px;overflow:hidden;background-color:var(--color-eee);background-repeat:no-repeat;background-size:cover;background-position:center center}
.iso-wrapper .teacher-box>.name{float:left;padding:4px 20px;font-size:16px;color:#fff;background-color:var(--color-main);position:relative;left:-20px;top:10px;z-index:9}
.iso-wrapper .teacher-box>.detail{float:left;width:100%;height:72px;margin:20px 0 0 -116px;padding:0 40px 0 146px;line-height:24px;overflow:hidden}
.iso-wrapper .teacher-pagination{width:100%;text-align:center;position:absolute;left:0;bottom:0;z-index:9}
.iso-wrapper .teacher-pagination .swiper-pagination-bullet-active{color:var(--color-main)}
.iso-wrapper>.certificate{float:left;width:100%;margin-top:20px}
.iso-wrapper .certificate-item{float:left;width:285px;height:202px;margin-right:20px;box-shadow:0 2px 10px rgba(0,0,0,.2);overflow:hidden;position:relative;z-index:9}
.iso-wrapper .certificate-item:nth-child(4n){margin-right:0}
.iso-wrapper .certificate-item>img{float:left;width:100%}
/*---------------------------------------- course ----------------------------------------*/
.course{margin-top:20px;padding-bottom:20px;background-color:var(--color-gray);overflow:hidden}
.course-content{float:left;width:100%}
.course-content>.wrapper{float:left;width:100%;margin-top:10px}
.course-content .wrapper-title{float:left;padding:20px 0;width:200px;border-radius:8px;display:flex;flex-direction:column;align-items:center}
.course-content .wrapper-title>.name{float:left;height:28px;margin:0;line-height:28px;font-size:20px;font-weight:400;text-align:center}
.course-content .wrapper-title>.subname{float:left;height:44px;padding:0 10px;margin-top:2px;line-height:1.6;text-align:center}
.course-content .wrapper-title>.icon{float:left;width:100%;height:136px;margin-top:10px;background-image:url(./resource/images/course-icon.png);background-repeat:no-repeat;background-size:136px auto;background-position-x:center}
.course-content .wrapper-title>.enter{float:left;padding:4px 0;margin:10px 0 0;width:122px;height:32px;text-align:center;border-width:1px;border-style:solid;border-radius:4px;transition:all .3s}
.course-content .wrapper-detail{float:left;margin:0 10px;width:720px;border-width:1px;border-style:solid;border-radius:8px 8px 0 0;background-color:#fff}
.course-content .wrapper-detail>.box{float:left;width:100%;padding:0 28px 20px}
.course-content .wrapper-detail .box-item{float:left;width:220px;margin-top:23px;color:#666;text-align:center;display:flex;flex-direction:column;align-items:center}
.course-content .wrapper-detail .box-item>.icon{float:left;width:64px;height:64px;background-image:url(./resource/images/course-detail-icon.png);background-repeat:no-repeat;background-size:128px auto;background-position-x:0;transition:all .3s}
.course-content .wrapper-detail .box-item:hover{color:var(--color-main)}
.course-content .wrapper-detail .box-item:hover>.icon{background-position-x:-64px}
.course-content .wrapper-detail .box-item>.icon01{background-position-y:0}
.course-content .wrapper-detail .box-item>.icon02{background-position-y:-64px}
.course-content .wrapper-detail .box-item>.icon03{background-position-y:-128px}
.course-content .wrapper-detail .box-item>.icon04{background-position-y:-192px}
.course-content .wrapper-detail .box-item>.icon05{background-position-y:-256px}
.course-content .wrapper-detail .box-item>.icon06{background-position-y:-320px}
.course-content .wrapper-detail>.ad{float:left;width:100%;height:64px;background-color:var(--color-eee);background-repeat:no-repeat;background-position:center top;background-size:cover;overflow:hidden}
.course-content .wrapper-article{float:left;width:260px;padding:20px 30px;border-radius:8px;background-color:#fff}
.course-content .wrapper-article>.title{float:left;width:100%;padding-bottom:10px;font-size:16px;text-align:center;border-bottom:1px solid #bababa}
.course-content .wrapper-article>.list{float:left;width:100%;margin-top:17px}
.course-content .wrapper-article .list-item{float:left;width:100%;margin-bottom:6px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-content .wrapper-article .list-item:last-child{margin-bottom:0}
.course-content>.java>.wrapper-title{background-color:#f9c898}
.course-content>.java>.wrapper-title>.icon{background-position-y:0}
.course-content>.java>.wrapper-title>.name,.course-content>.java>.wrapper-title>.subname,.course-content>.java>.wrapper-title>.enter,.course-content>.java>.wrapper-article>.title,.course-content>.java>.wrapper-article>.item:hover{color:#c4641a}
.course-content>.java>.wrapper-title>.enter{border-color:#c4641a}
.course-content>.java>.wrapper-title>.enter:hover{background-color:#c4641a}
.course-content>.java>.wrapper-detail{border-color:#f9c898}
.course-content>.java>.wrapper-detail>.ad{background-image:url(./resource/images/course-adimg01.jpg)}
.course-content>.html5>.wrapper-title{background-color:#f6f29b}
.course-content>.html5>.wrapper-title>.icon{background-position-y:-136px}
.course-content>.html5>.wrapper-title>.name,.course-content>.html5>.wrapper-title>.subname,.course-content>.html5>.wrapper-title>.enter,.course-content>.html5>.wrapper-article>.title,.course-content>.html5>.wrapper-article>.item:hover{color:#c5950f}
.course-content>.html5>.wrapper-title>.enter{border-color:#c5950f}
.course-content>.html5>.wrapper-title>.enter:hover{background-color:#c5950f}
.course-content>.html5>.wrapper-detail{border-color:#f6f29b}
.course-content>.html5>.wrapper-detail>.ad{background-image:url(./resource/images/course-adimg02.jpg)}
.course-content>.ui>.wrapper-title{background-color:#c7df95}
.course-content>.ui>.wrapper-title>.icon{-ms-background-position-y:-272px;background-position-y:-272px}
.course-content>.ui>.wrapper-title>.name,.course-content>.ui>.wrapper-title>.subname,.course-content>.ui>.wrapper-title>.enter,.course-content>.ui>.wrapper-article>.title,.course-content>.ui>.wrapper-article>.item:hover{color:#649433}
.course-content>.ui>.wrapper-title>.enter{border-color:#649433}
.course-content>.ui>.wrapper-title>.enter:hover{background-color:#649433}
.course-content>.ui>.wrapper-detail{border-color:#c7df95}
.course-content>.ui>.wrapper-detail>.ad{background-image:url(./resource/images/course-adimg03.jpg)}
.course-content>.php>.wrapper-title{background-color:#a6d9e2}
.course-content>.php>.wrapper-title>.icon{-ms-background-position-y:-408px;background-position-y:-408px}
.course-content>.php>.wrapper-title>.name,.course-content>.php>.wrapper-title>.subname,.course-content>.php>.wrapper-title>.enter,.course-content>.php>.wrapper-article>.title,.course-content>.php>.wrapper-article>.item:hover{color:#079292}
.course-content>.php>.wrapper-title>.enter{border-color:#079292}
.course-content>.php>.wrapper-title>.enter:hover{background-color:#079292}
.course-content>.php>.wrapper-detail{border-color:#a6d9e2}
.course-content>.php>.wrapper-detail>.ad{background-image:url(./resource/images/course-adimg04.jpg)}
.course-content>.unity>.wrapper-title{background-color:#9595c5}
.course-content>.unity>.wrapper-title>.icon{-ms-background-position-y:-544px;background-position-y:-544px}
.course-content>.unity>.wrapper-title>.name,.course-content>.unity>.wrapper-title>.subname,.course-content>.unity>.wrapper-title>.enter,.course-content>.unity>.wrapper-article>.title,.course-content>.unity>.wrapper-article>.item:hover{color:#633163}
.course-content>.unity>.wrapper-title>.enter{border-color:#633163}
.course-content>.unity>.wrapper-title>.enter:hover{background-color:#633163}
.course-content>.unity>.wrapper-detail{border-color:#9595c5}
.course-content>.unity>.wrapper-detail>.ad{background-image:url(./resource/images/course-adimg05.jpg)}
.course-content .wrapper-title>.enter:hover{color:#fff}
/*---------------------------------------- piclist ----------------------------------------*/
.piclist-content{float:left;width:100%;margin-top:20px}
.piclist-content>.item{float:left;width:285px;margin:0 20px 20px 0}
.piclist-content>.item:nth-child(4n){margin-right:0}
.piclist-content .item-img{float:left;width:100%;height:168px;background-color:var(--color-eee);background-repeat:no-repeat;background-size:cover;background-position:center center;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.2);overflow:hidden}
.piclist-content .item-title{float:left;width:100%;margin-top:10px;padding:0 20px;font-size:16px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.piclist-content .item-title:hover{color:var(--color-main)}
/*---------------------------------------- picscroll ----------------------------------------*/
.picscroll-content{float:left;width:100%;height:188px;margin-top:20px;overflow:hidden}
.picscroll-item{float:left;padding-right:10px;position:relative;z-index:9}
.picscroll-item>.img{float:left;width:266px;height:188px;background-color:var(--color-eee);background-repeat:no-repeat;background-size:cover;background-position:center center}
.picscroll-item>.title{float:left;padding:6px 10px;width:266px;color:#fff;text-align:center;background-color:rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;left:0;bottom:0;z-index:9}
/*---------------------------------------- environment ----------------------------------------*/
.environment-content{float:left;width:100%;margin-top:20px}
.environment-content>.item{float:left;width:206px;height:134px;margin:0 12px 12px 0;transition:all .3s;overflow:hidden;position:relative;left:0;top:0;z-index:9}
.environment-content>.item:nth-child(1),.environment-content>.item:nth-child(2){width:374px;height:280px;margin-right:14px}
.environment-content>.item:nth-child(4),.environment-content>.item:nth-child(6){margin-right:0}
.environment-content>.item:hover{top:-6px;box-shadow:0 20px 30px -20px rgba(0,0,0,.4)}
.environment-content .item-img{float:left;width:100%;height:100%;background-color:var(--color-eee);background-repeat:no-repeat;background-size:cover;background-position:center center}
.environment-content .item-title{float:left;padding:6px 20px;width:100%;color:#fff;font-weight:400;font-size:16px;line-height:24px;text-align:center;background-color:rgba(0,0,0,.6);transition:all .3s;position:absolute;bottom:-36px;left:0;z-index:9}
.environment-content .item:hover>.item-title{bottom:0}
/*---------------------------------------- alliance ----------------------------------------*/
.alliance-content{float:left;width:100%;padding:20px 20px 0;background-color:var(--color-gray);border-radius:0 8px 8px 8px}
.alliance-content>.item{float:left;width:220px;height:85px;margin:0 15px 20px 0}
.alliance-content .item:nth-child(5n){margin-right:0}
.alliance-content .item-img{float:left;width:100%;height:100%;background-color:#fff;overflow:hidden;transition:all .3s;position:relative;top:0;z-index:9}
.alliance-content .item-img:hover{top:-6px;box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
/*---------------------------------------- blogroll ----------------------------------------*/
.blogroll-list{float:left;width:100%;padding:20px 20px 10px;background-color:var(--color-gray);border-radius:0 8px 8px 8px}
.blogroll-list>.menu-item{float:left;margin:0 20px 10px 0}
.blogroll-list>.menu-item>a{float:left;color:#888}
.blogroll-list>.menu-item>a:hover{color:var(--color-main);text-decoration:underline}
/*---------------------------------------- shortcut ----------------------------------------*/
.shortcut{width:70px;font-family:Microsoft YaHei,arial,helvetica,sans-serif;position:fixed;top:14%;right:0;z-index:100000}
.shortcut.hide{display:none}
.shortcut-box{float:left;width:100%;margin:0;padding:0;list-style:none;position:relative}
.shortcut-box>.item{float:left;width:100%;padding:6px 0;margin-top:1px;cursor:pointer}
.shortcut-box>.item.company{background-color:#35a5db}
.shortcut-box>.item.tutorial{background-color:#fc4573}
.shortcut-box>.item.qq{background-color:#fa52ed}
.shortcut-box>.item.consult{background-color:#add641}
.shortcut-box>.item.mobile{background-color:#e67b24}
.shortcut-box>.item.company:hover{background-color:#4eb2e0}
.shortcut-box>.item.tutorial:hover{background-color:#fc678c}
.shortcut-box>.item.qq:hover{background-color:#fa6cee}
.shortcut-box>.item.consult:hover{background-color:#b7db58}
.shortcut-box>.item.mobile:hover{background-color:#e78131}
.shortcut-box>.item>a{float:left;width:100%}
.shortcut-box .item-icon{float:left;width:50px;height:40px;margin:0 10px;background-repeat:no-repeat;background-size:50px auto;background-image:url(./resource/images/shortcut-icon.png);background-position-x:0}
.shortcut-box>.item .item-icon{background-position-x:0}
.shortcut-box>.item.company .item-icon{background-position-y:0}
.shortcut-box>.item.tutorial .item-icon{background-position-y:-40px}
.shortcut-box>.item.qq .item-icon{background-position-y:-80px}
.shortcut-box>.item.consult .item-icon{background-position-y:-120px}
.shortcut-box>.item.mobile .item-icon{background-position-y:-160px}
.shortcut-box>.backtop{float:left;width:100%;padding:4px 0;color:#fff;background-color:var(--color-main);cursor:pointer;visibility:hidden;opacity:0}
.shortcut-box>.backtop.show{visibility:visible;opacity:1}
.shortcut-box>.backtop:hover{background:#6a97e8}
.shortcut-box .backtop-icon{float:left;width:100%;height:24px;position:relative}
.shortcut-box .backtop-icon::before,.shortcut-box .backtop-icon::after{content:'';float:left;width:0;height:0;margin-left:-10px;border:10px solid transparent;position:absolute;left:50%;top:50%;z-index:9}
.shortcut-box .backtop-icon::before{margin-top:-14px;border-bottom-color:var(--color-main);z-index:9}
.shortcut-box>.backtop:hover>.backtop-icon:before{border-bottom-color:#6a97e8}
.shortcut-box .backtop-icon:after{margin-top:-16px;border-bottom-color:#fff;z-index:8}
.shortcut-box .backtop-text{float:left;width:100%;height:16px;line-height:16px;font-size:12px;text-align:center}
.shortcut-box>.item>.mobile-box{float:left;width:140px;padding:10px 0;background-color:#e78131;transition:all .3s;visibility:hidden;opacity:0;position:absolute;right:-141px;bottom:49px;z-index:-1}
.shortcut-box>.item>.mobile-box>.title{float:left;width:100%;margin-bottom:8px;padding:0 10px;font-size:14px;color:#fff;text-align:center}
.shortcut-box>.item>.mobile-box>.phone{float:left;width:100%;padding:0 10px}
.shortcut-box>.item>.mobile-box .phone-input,.shortcut-box>.item>.mobile-box .phone-submit{float:left;width:100%;padding:6px 10px;border:0;outline:0;background:#fff;border-radius:4px}
.shortcut-box>.item>.mobile-box .phone-submit{margin-top:10px;padding:4px 0;color:#e78131;cursor:pointer}
.shortcut-box>.item.mobile:hover>.mobile-box{right:70px;visibility:visible;opacity:1}
.shortcut-box .item-text{float:left;width:100%;margin-top:4px;font-size:12px;color:#fff;line-height:1.2;text-align:center}
/*---------------------------------------- page404 ----------------------------------------*/
.page404{float:left;width:100%}
.page404-img{float:left;width:100%;height:380px;margin-top:80px;background:url(./resource/images/404.jpg) no-repeat center center;background-size:contain}
.page404-font{float:left;padding:40px 0;font-size:20px;width:100%;text-align:center;color:#111}
.page404-list{float:left;width:100%;margin:0;text-align:center;font-size:16px;color:#666;display:flex;justify-content:center}
.page404-list>.item{float:left;margin-right:80px;position:relative;z-index:9}
.page404-list>.item:last-child{margin-right:0}
.page404-list>.item>a{float:left;width:180px;height:42px;text-align:center;line-height:42px;background:var(--color-main);color:#fff;border:1px solid var(--color-main);transition:background .3s;border-radius:46px;overflow:hidden}
.page404-list>.item>a:hover,.page404-list>.item>a:focus{color:var(--color-main);background:#fff}
/*---------------------------------------- js video wrapper ----------------------------------------*/
.js-video-wrapper{float:left;width:100%;height:100%;visibility:hidden;opacity:0;transition:all .3s;position:fixed;top:0;left:0;z-index:999999}
.js-video-wrapper.show{visibility:visible;opacity:1}
.js-video-wrapper>.mask{position:absolute;top:0;left:0;z-index:99;width:100%;height:100%;background-color:rgba(0,0,0,.8)}
.js-video-wrapper>.box{float:left;width:1000px;height:600px;background-color:var(--color-eee);border-radius:8px;box-shadow:0 0 24px rgba(0,0,0,.6);transform:translate(-50%,-50%);overflow:hidden;position:absolute;top:50%;left:50%;z-index:101}
.js-video-wrapper .box-close{float:left;width:30px;height:30px;cursor:pointer;position:absolute;top:20px;right:20px;z-index:99}
.js-video-wrapper .box-close::before,.js-video-wrapper .box-close::after{content:'';float:left;width:2px;height:30px;background-color:#fff;position:absolute;top:0;left:14px;z-index:9}
.js-video-wrapper .box-close::before{transform:rotate(-45deg)}
.js-video-wrapper .box-close::after{transform:rotate(45deg)}
.js-video-wrapper .box-close:hover{color:var(--color-main)}
.js-video-wrapper .box-video{float:left;width:100%;height:100%}
.js-video-wrapper .video-js{float:left;width:100%;height:100%}
.js-video-wrapper .box-show{position:relative;float:left;width:100%;height:100%}
.js-video-wrapper button{outline:0}
.js-video-wrapper .vjs-big-play-button{left:50%;top:50%;margin:-45px 0 0 -45px;width:3em;height:3em;line-height:3em;border-radius:100%;background:0}
.js-video-wrapper .vjs-big-play-button:before{position:absolute;top:50%;left:50%;z-index:9;margin:-0.5em 0 0 -0.375em;content:'';width:0;height:0;border-left:1em solid #fff;border-top:.5em solid transparent;border-bottom:.5em solid transparent}
/*---------------------------------------- js certificate wrapper ----------------------------------------*/
.js-certificate-wrapper{float:left;width:100%;height:100%;transition:all .3s;transform:translate(-50%,-50%);visibility:hidden;opacity:0;position:fixed;top:50%;left:50%;z-index:999999}
.js-certificate-wrapper.show{visibility:visible;opacity:1}
.js-certificate-wrapper>.mask{float:left;width:100%;height:100%;background-color:rgba(0,0,0,.8);position:absolute;top:0;left:0;z-index:99}
.js-certificate-wrapper>.box{float:left;width:800px;height:566px;background-color:var(--color-eee);border-radius:8px;box-shadow:0 0 24px rgba(0,0,0,.6);transform:translate(-50%,-50%);transition:all .3s;overflow:hidden;position:absolute;top:150%;left:50%;z-index:101}
.js-certificate-wrapper.show>.box{top:50%}
.js-certificate-wrapper .box-close{float:left;width:30px;height:30px;cursor:pointer;position:absolute;top:20px;right:20px;z-index:99}
.js-certificate-wrapper .box-close::before,.js-certificate-wrapper .box-close::after{content:'';float:left;width:2px;height:30px;background-color:#fff;position:absolute;top:0;left:14px;z-index:9}
.js-certificate-wrapper .box-close::before{transform:rotate(-45deg)}
.js-certificate-wrapper .box-close::after{transform:rotate(45deg)}
.js-certificate-wrapper .box-close:hover{color:var(--color-main)}
.js-certificate-wrapper .box-img{float:left;width:100%;height:100%;overflow:hidden}
.js-certificate-wrapper .box-img>.img{float:left;width:100%}
/*---------------------------------------- pagination ----------------------------------------*/
.pagination{float:left;width:100%}
.pagination-list{float:left;padding:30px 0;width:100%;display:flex;justify-content:center}
.pagination-list>.item{float:left;margin-right:10px}
.pagination-list>.item>a,.pagination-list>.item>span{float:left;padding:4px 12px;border:1px solid #b3b3b3;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.2);overflow:hidden;cursor:pointer;color:#666}
.pagination-list>.item>a:hover,.pagination-list>.item>span:hover{background-color:var(--color-eee)}
.pagination-list>.item.active>span{color:#fff;border-color:var(--color-main);background-color:var(--color-main)}
/*---------------------------------------- articlelist ----------------------------------------*/
.articlelist{float:left;width:886px}
.articlelist-box{float:left;width:100%}
.articlelist-box>.excerpt{float:left;padding:20px 0;width:100%;border-bottom:1px solid #ddd}
.articlelist-box .excerpt-img{float:left;width:180px;height:120px}
.articlelist-box .excerpt-img>.img{float:left;width:100%;height:100%;background-color:var(--color-eee);transition:all .3s;overflow:hidden}
.articlelist-box .excerpt-img:hover>.img{transform:scale(1.1)}
.articlelist-box .excerpt-detail{float:left;width:100%;margin-left:-180px;padding-left:200px}
.articlelist-box .excerpt-detail>.title{float:left;width:100%;margin:0;font-size:16px;color:#111;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.articlelist-box .excerpt-detail>.title:hover{color:var(--color-main)}
.articlelist-box .excerpt-detail>.abstract{float:left;width:100%;margin:16px 0 0;color:#888;line-height:22px;max-height:44px;overflow:hidden}
.articlelist-box .excerpt-detail>.meta{float:left;width:100%;margin:14px 0 0;line-height:22px}
.articlelist-box .excerpt-detail .meta-time{float:right;color:#888}
/*---------------------------------------- teacherslist ----------------------------------------*/
.teacherslist{float:left;width:100%;margin:40px 0;overflow:hidden}
.teacherslist-title{float:left;width:100%}
.teacherslist-title>.item{float:left;width:190px;margin:0 12px 12px 0;text-align:center;border:1px solid var(--color-eee);transition:all .3s}
.teacherslist-title>.item:nth-child(6n){margin-right:0}
.teacherslist-title>.item>a{float:left;width:100%;padding:10px 0;color:#666;font-size:16px;transition:all .3s}
.teacherslist-title>.item:hover{border-color:var(--color-main)}
.teacherslist-title>.item:hover>a{color:var(--color-main)}
.teacherslist-title>.item.active{border-color:var(--color-main);background-color:var(--color-main)}
.teacherslist-title>.item.active>a{color:#fff}
.teacherslist-detail{float:left;width:100%}
.teacherslist-detail>.item{float:left;margin:12px 12px 0 0;width:392px;background-color:var(--color-eee);overflow:hidden;transition:all .3s;position:relative;top:0;z-index:9}
.teacherslist-detail>.item:hover{top:-6px;box-shadow:0 26px 40px -26px rgba(0,0,0,.2)}
.teacherslist-detail>.item:nth-child(3n){margin-right:0}
.teacherslist-detail .item-img{float:left;width:200px;height:200px;background-repeat:no-repeat;background-position:top center;background-size:cover;overflow:hidden}
.teacherslist-detail .item-detail{float:left;width:100%;height:200px;padding:20px 20px 20px 220px;margin-left:-200px;overflow:hidden}
.teacherslist-detail .item-detail>.name{float:left;width:100%;font-size:16px;line-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.teacherslist-detail .item-detail>.infor{float:left;width:100%;max-height:124px;margin-top:10px;color:#666;overflow:hidden;overflow-y:auto}
.teacherslist-detail>.item:hover>.item-detail>.name,.teacherslist-detail>.item:hover>.item-detail>.infor{color:var(--color-main)}
.teacherslist-detail .item-detail>.infor::-webkit-scrollbar{width:5px;height:5px}
.teacherslist-detail .item-detail>.infor::-webkit-scrollbar-track,.teacherslist-detail .item-detail>.infor::-webkit-scrollbar-thumb{border-radius:999px;border:0 solid transparent}
.teacherslist-detail .item-detail>.infor::-webkit-scrollbar-track{box-shadow:1px 1px 5px rgba(100,100,100,.4) inset}
.teacherslist-detail .item-detail>.infor::-webkit-scrollbar-thumb{min-height:20px;background-clip:content-box;box-shadow:0 0 0 5px rgba(100,100,100,.6) inset}
.teacherslist-detail .item-detail>.infor::-webkit-scrollbar-corner{background:transparent}
/*---------------------------------------- videolist ----------------------------------------*/
.videolist{float:left;width:100%;margin:40px 0;overflow:hidden}
.videolist-title{float:left;width:160px;position:relative;z-index:9}
.videolist-title>.line{float:left;width:1px;height:88%;background-color:#898989;position:absolute;right:14px;top:12px;z-index:1}
.videolist-title>.item{float:left;width:100%;margin-bottom:30px;line-height:28px;position:relative;z-index:9}
.videolist-title>.item:last-child{margin-bottom:0}
.videolist-title>.item>a{float:left;width:100%}
.videolist-title .item-text{float:left;color:#666}
.videolist-title>.active .item-text{color:var(--color-main)}
.videolist-title .item-icon{float:right;width:28px;height:28px;background-color:var(--color-main);border:8px solid #fff;border-radius:100%;box-shadow:2px 2px 8px rgba(0,0,0,.4)}
.videolist-title>.item:hover>.item-text,.videolist-title>.item.active>.item-text{color:var(--color-main)}
.videolist-detail{float:left;width:100%;padding-left:200px;margin-left:-160px}
.videolist-detail>.title{float:left;width:100%;margin-bottom:20px;font-size:18px}
.videolist-detail>.item{float:left;width:320px;margin:0 20px 20px 0}
.videolist-detail>.item:nth-child(3n){margin-right:0}
.videolist-detail .item-img{float:left;width:100%;height:214px;border-radius:8px;cursor:pointer;overflow:hidden;position:relative;z-index:9}
.videolist-detail .item-img>.img{float:left;width:100%;height:100%;background-color:var(--color-eee);background-repeat:no-repeat;background-position:center center;background-size:cover}
.videolist-detail .item-img>.mask{float:left;width:100%;height:100%;background-color:rgba(0,0,0,.4);border-radius:8px;position:absolute;top:0;left:0;z-index:98}
.videolist-detail .item-img>.icon{float:left;width:64px;height:64px;border:2px solid #fff;border-radius:100%;background-color:rgba(0,0,0,.6);transform:translate(-50%,-50%);position:absolute;left:50%;top:50%;z-index:99}
.videolist-detail .item-img>.icon::after{content:'';width:0;height:0;border-style:solid;border-color:transparent transparent transparent #fff;border-width:10px 0 10px 20px;transform:translate(-30%,-50%);position:absolute;left:50%;top:50%;z-index:9}
.videolist-detail .item-title{float:left;padding:0 10px;margin-top:10px;width:100%;font-size:16px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/*---------------------------------------- sidebar ----------------------------------------*/
.sidebar{float:right;width:284px}
.sidebar-item{float:left;width:100%}
.sidebar-item>.title{float:left;width:100%;padding-left:10px;margin:20px 0;line-height:22px;font-size:16px;font-weight:normal;border-left:3px solid var(--color-main)}
.sidebar-item>.box{float:left;width:100%;padding:10px 16px;border:1px solid #ddd}
.sidebar-item .box-item{float:left;width:100%;margin-bottom:10px;line-height:24px}
.sidebar-item .box-item:last-child{margin-bottom:0}
.sidebar-item .box-item>.circle{float:left;width:4px;height:4px;margin:10px 0;border-radius:100%;background-color:var(--color-main)}
.sidebar-item .box-item>.title{float:left;color:#666}
.sidebar-item.classdata .box-item>.title{margin-left:8px}
.sidebar-item.courses .box-item>.title,.sidebar-item.hotlists .box-item>.title{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-item .box-item>.title:hover{color:var(--color-main)}
.sidebar-item .box-item>.apply{float:right;color:var(--color-red)}
.sidebar-item .box-kefu{float:left;margin:10px 76px 0;padding:6px 20px;border:1px solid var(--color-main);color:var(--color-main);transition:all .3s}
.sidebar-item .box-kefu:hover{background-color:var(--color-main);color:#fff}
.sidebar-item .box-text{float:left;margin:0;width:100%;color:#666;line-height:24px}
/*---------------------------------------- articledetail ----------------------------------------*/
.articledetail{float:left;width:886px}
.pagedetail{width:100%}
.articledetail-title{float:left;width:100%;margin:30px 0 20px;font-size:22px;color:#333;text-align:center}
.articledetail-meta{float:left;padding:0 0 30px;width:100%;border-bottom:1px solid #ddd;display:flex;justify-content:center}
.articledetail-meta>.item{float:left;margin-right:20px}
.articledetail-meta>.item:last-child{margin-right:0}
.articledetail-meta .item-title,.articledetail-meta .item-text{float:left}
.articledetail-content{float:left;width:100%;padding:30px 0;font-size:16px;line-height:2;text-indent:2em}
.articledetail-content img{display:block;margin:10px auto;max-width:600px;height:auto}
.articledetail-content a{color:var(--color-main)}
.articledetail-copyright{float:left;width:100%;margin:0 0 30px;padding:10px 30px;background:#f1f1f1;border-radius:3px;overflow:hidden}
.articledetail-copyright>.from{float:left;width:100%;color:#999;display:flex;justify-content:center}
.articledetail-copyright .from-title{float:left}
.articledetail-copyright .from-url{float:left;word-break:break-all}
.articledetail-copyright>.hint{float:left;width:100%;margin-top:4px;color:#999;text-align:center}
.articledetail-list{float:left;width:100%;border-top:2px solid #e1e1e1}
.articledetail-list>.item{width:50%}
.articledetail-list>.item.prev{float:left}
.articledetail-list>.item.next{float:right}
.articledetail-list .item-title{float:left;width:72px;margin-top:-2px;padding:4px 0;font-size:16px;line-height:30px;font-weight:700;text-align:center;border-top:2px solid var(--color-main)}
.articledetail-list .item-text{float:left;width:100%;margin-left:-72px;padding-left:82px;font-size:16px;line-height:38px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/*---------------------------------------- classtime ----------------------------------------*/
.classtime{float:left;width:100%;margin-top:60px}
.classtime-title{float:left;width:100%;margin:0;font-size:52px;color:var(--color-main);font-weight:400;text-align:center}
.classtime-form>form{float:left;width:100%}
.classtime-form>.title{float:left;width:100%;margin-bottom:20px;font-size:24px;text-align:center}
.classtime-form>.item{float:left;margin:30px 6% 0;width:38%;height:52px;background-color:var(--color-eee);border-radius:8px;position:relative}
.classtime-form .item-icon{float:left;width:24px;height:24px;margin:14px 18px;background-image:url(./resource/images/classtime-icon.png);background-repeat:no-repeat;background-size:24px auto;background-position-x:center;position:absolute;left:0;top:0;z-index:9}
.classtime-form .item-icon.icon01{background-position-y:0}
.classtime-form .item-icon.icon02{background-position-y:-24px}
.classtime-form .item-icon.icon03{background-position-y:-48px}
.classtime-form .item-icon.icon04{background-position-y:-72px}
.classtime-form .item-icon.icon05{background-position-y:-96px}
.classtime-form .item-input{float:left;margin:0;padding:0 12%;width:100%;height:52px;line-height:52px;font-size:18px;color:#666;font-family:'Microsoft YaHei',Verdana,Arial,Helvetica,sans-serif;border:1px solid var(--color-eee);outline:0;background-color:var(--color-eee);border-radius:6px;transition:all .3s}
.classtime-form .item-input:focus{border-color:var(--color-main);box-shadow:0 0 10px rgba(0,0,0,.2)}
.classtime-form .item-arrow{float:left;width:20px;height:20px;margin-top:-4px;cursor:pointer;position:absolute;top:50%;right:24px;z-index:9}
.classtime-form .item-arrow::after,.classtime-form .item-arrow::before{content:'';float:left;width:0;height:0;border:10px solid transparent;border-top-color:var(--color-eee);position:absolute;left:0;top:0}
.classtime-form .item-arrow::before{border-top-color:#666;top:2px}
.classtime-form>.item.show .item-arrow{margin-top:-12px}
.classtime-form>.item.show .item-arrow::after,.classtime-form>.item.show .item-arrow::before{border-color:transparent;border-bottom-color:var(--color-eee)}
.classtime-form>.item.show .item-arrow::before{top:-2px;border-color:transparent;border-bottom-color:#666}
.classtime-form>.submitbtn{float:left;margin:30px 30% 0;width:40%;padding:14px 0;color:#fff;font-size:24px;background-color:var(--color-main);border:0;border-radius:8px;cursor:pointer;transition:all .3s;position:relative;top:0}
.classtime-form>.submitbtn:hover{top:-6px;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.classtime-form .item-list{float:left;width:100%;border-radius:8px;background-color:var(--color-eee);box-shadow:0 2px 10px rgba(0,0,0,.2);opacity:0;visibility:hidden;transition:all .3s;position:absolute;top:100%;left:0;z-index:99}
.classtime-form>.item.show .item-list{opacity:1;visibility:visible}
.classtime-form .item-list>.nape{float:left;padding:10px 20px;width:100%;color:#999;cursor:pointer;border-bottom:1px solid #ddd}
.classtime-form .item-list>.nape:last-child{border-bottom:0}
.classtime-form .item-list>.nape:hover{background-color:var(--color-main);color:#fff}
.classtime-warmtips{float:left;width:100%;margin-top:60px;padding-bottom:40px;border-top:1px solid #ddd}
.classtime-warmtips>.title{float:left;width:100%;padding:30px 0 14px;font-size:16px}
.classtime-warmtips>.text{float:left;width:100%;text-indent:2em;line-height:26px}
/*---------------------------------------- fixedlayer ----------------------------------------*/
.fixedlayer{float:left;width:100%;height:100%;background-color:rgba(0,0,0,.6);visibility:hidden;opacity:0;transition:all .3s;position:fixed;top:0;left:0;z-index:1000000}
.fixedlayer.show{visibility:visible;opacity:1}
.fixedlayer-box{float:left;width:520px;height:400px;transform:translate(-50%,-50%);position:absolute;top:50%;left:50%;z-index:9}
.fixedlayer-box>.img{float:left;width:100%;height:100%;background:url(./resource/images/fixedlayer-img.png) no-repeat center center;background-size:contain;cursor:pointer}
.fixedlayer-box>.close{float:left;width:42px;height:42px;cursor:pointer;background-color:#fff;border:6px solid #fff;border-radius:50%;position:absolute;top:20px;right:20px;z-index:99}
.fixedlayer-box>.close::before,.fixedlayer-box>.close::after{content:'';float:left;width:2px;height:30px;background-color:#999;position:absolute;top:0;left:14px;z-index:9}
.fixedlayer-box>.close::before{transform:rotate(-45deg)}
.fixedlayer-box>.close::after{transform:rotate(45deg)}