@charset "utf-8";
*{margin:0px; padding:0px;}
html{color:#000;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;font-size: 16px;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
input,button,textarea,select,optgroup,option{font-family:"微软雅黑";font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}
input,select{vertical-align:middle;}
body{font-family: "微软雅黑";color:#333;overflow-x: hidden;}
select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;}
table{font-size:inherit;font:100%; border-collapse:collapse;}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
/*title*/
h1 { font-size:32px;}
h2 { font-size:26px;}
h3 { font-size:20px;}
h4 { font-size:14px;}
h5 { font-size:12px;}
h6 { font-size:10px;}
a {color:#333;}
a ,a:hover{text-decoration:none;}
.mt10{ margin-top:10px;}
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;font-size: 0;}
.clearfix { display:inline-block; }
.clear{ clear:both;}
/*header{padding: 10px 2%;display: flex;justify-content: space-between;background:#FFF; box-shadow: 0 0 15px rgba(0,0,0,0.1);}*/
.head{display: flex;align-items: center;}
.head .logo{margin-right: 20px}
.head .logo img{max-width: 150px;display: inline-block}
.head .nav{}
.head .nav li{display:inline-block; vertical-align:middle; position: relative; }
.head .nav li i{display: block;position: absolute;right: 5px;top: 10px;width: 24px;height: 14px;background: url(/skin/yunketang/images/icon-hot.png) no-repeat;}
.head .nav li>a{display:block;font-size:18px;line-height: 60px;color: #333;position: relative;margin: 0 30px;}
.head .nav li>a:before{position: absolute;left: 0;bottom: 5px;width: 100%;height: 4px;background: #FFF;border-radius: 2px;content:'';}
.head .nav li.active>a:before{ background: #0072ff; display: block; }
.banner{width: 100%;background:#f5f7f9 url(/skin/yunketang/images/bg.jpg) bottom no-repeat;background-size: cover;position: relative;display: flex;/* height: 650px; */padding-bottom: 20px;}
.container{position:relative;margin:0 auto;width: 100%;max-width: 1400px;padding: 0 50px;}
.ban-img{width:54%}
.ban-img img{width:100%;}
.ban-flex{display: flex;flex-direction: row;justify-content: space-between;align-items: flex-end;}
.ban-box{width:45%;padding-top: 30px;}
.ban-box .ban-title{font-size: 25px;color:#000000;font-weight: 550;letter-spacing: 2px;margin-bottom:8px;}
.ban-icon{display:flex;}
header .right{display: flex;align-items: center;}
.search-box form{background:#f3f6f8;border:1px solid #eaf0f7;height: 35px;width: 300px;border-radius: 50px;position: relative;display: flex;}
.search-box .text{border:none;background:none;width: 100%;height: 34px;line-height: 34px;}
.search-box .btn{position: absolute;right: 10px;background: none;border:none;font-size: 15px;color:#818999;padding-left: 5px;height: 34px;line-height: 34px;display: flex;align-items: center;top: 0;cursor: pointer;}
header .icon-box {width: 35px;height: 35px;border-radius:50%;background:#f3f6f8;border:1px solid #eaf0f7;display: flex;align-items: center;justify-content: center;margin: 0 20px;}
header .icon-box img{height: 20px;}
.search-box .btn::before{display:inline-block;height: 18px;width:0.5px;background:#818999;content:'';margin-right: 3px;}
.search-box .search-icon img{width:25px;height:25px;}
.search-box .search-icon{display:flex;align-items: center;margin-left: 5px;}
header .login{background: #0060ea;color: #fff;padding: 7px 30px;cursor: pointer;border-radius: 6px;}
.ban-icon label{display:inline-block;background:#d5edff;margin-right:10px;padding:3px 15px;border-radius:20px;border:1px solid #fff;font-size:14px;}
.ban-intro{width: 100%;margin-top: 25px;}
.intro-icon span{display: inline-block;width: 220px;height: 45px;background: url(/skin/yunketang/images/icon1.png) no-repeat;line-height: 45px;font-size: 20px;text-indent: 40px;font-weight: 550;letter-spacing: 2px;background-size: 100%;border-top-left-radius: 20px;}
.intro-icon span.active{background: url(/skin/yunketang/images/icon_h1.png) no-repeat;color: #fff;background-size: 100%;}
.intro-icon span:last-child{margin-left: -10px;}
.intro-box{background: #FFF;line-height: 30px;font-size: 15px;margin-bottom: 20px;}
.intro-box>span{color: #0c6eee;font-size: 15px;margin-left: 5px;}
.intro-box>span a{color: #0c6eee;font-size: 15px}
.credit-box{display: flex;align-items: center;margin-bottom: 20px;}
.credit-box .credit{margin-right: 20px;background: #f7f7f7;border-radius: 5px;padding: 8px 30px;color: #000;}
.credit-box .credit:last-child{margin-right: 0}
.school{color: #000;}
.intro-bg{background: #ffffff;border-top-right-radius: 20px;border-bottom-right-radius: 20px;border-bottom-left-radius: 20px;padding: 13px 20px 20px;}
.school>span{font-weight:normal;}
.join-box{display: flex;margin-top: 30px;justify-content: space-between;align-items: center;}
.join-box .teacher{color: #000;}
.join-box .teacher>span{color: #000;}
.join-box .join{background: #0566ec;border-radius: 50px;padding: 7px 40px;cursor: pointer;color: #fff;}
.teaching-box{width: 100%;display: flex;margin-top:15px;justify-content: space-between;}
.teaching-box .item{
    width: 47%;
    padding: 20px 0;
    border: 1px solid #fff;
    border-radius: 15px;

}
.teaching-box .item-knowledge{background: #d5edff url(/skin/yunketang/images/knowledge.png) 85% center no-repeat;background-size: 80px;}
.teaching-box .item-teaching{background: #d5edff url(/skin/yunketang/images/teaching.png) 85% center no-repeat;background-size: 80px;}
.teaching-box .item .item-title{text-indent:30px;font-size:18px;margin-bottom:10px;font-weight:550;}
.teaching-box .item .item-text{text-indent:30px;}
.teaching-box .item .num{font-size:20px;font-weight:550;}
.tab-nav{width: 100%;display: flex;margin-top: 50px;justify-content: center;}
.main-bg{background: #f5f7f9;padding-bottom: 50px;}
.tab-nav ul{display:flex;background:#fff;width: 100%;justify-content: space-evenly;padding: 20px 0;border-radius: 50px;}
.tab-nav ul li{font-size:16px;font-weight:550;letter-spacing:1px;display: flex;flex-direction: column;align-items: center;cursor:pointer}
.tab-nav ul li.active::after{height: 5px;content:'';display:inline-block;width: 70px;background:#0566ec;margin-top: 4px;border-radius: 5px;}
.main-bg .content{display: flex;justify-content: space-between;}
.box-left{width: 160px;/* flex: 0; */}
.tab-nav ul li.active{color: #0566ec}
.box-left ul{width: 100%;border:1px solid #e9e9e9;border-radius: 10px;padding: 15px 0; }
.box-left ul li{width: 100%;height: 30px;line-height: 30px;text-align: left;text-indent: 30px;margin-bottom: 18px;font-weight: 550;color: #000;font-size: 15px;letter-spacing: 1px;position: relative;cursor: pointer;}
.box-left ul li.active::after{height:25px;content:'';display:inline-block;width:3px;background:#7061fd;margin-top: 4px;border-radius: 5px;position: absolute;left: 0;}
.box-left ul li.active{color: #7061fd}
.box-right{flex: 1;margin-left: 30px;}
.box-content{margin-top: 30px;background: #fff;padding: 30px 40px;border-radius: 30px;}
.box-right-title{font-size:20px;font-weight:550;margin-bottom:20px;letter-spacing: 1px;}
.teaching-item{width:100%;}
.box-content .box{margin-bottom:40px;font-size:15px;line-height:30px;}
.teaching-item .item{display:flex;flex-direction: column;margin-bottom: 20px;background: #fafafa;padding: 16px 20px;border-radius: 20px;}
.teaching-item .item>dl{display:flex;align-items: center;margin-bottom: 20px;}
.teaching-item .item>dl img{display:inline-block;border-radius: 15px;}
.teaching-item .item>dl .img{margin-right:20px;display: flex;}
.teaching-item .dl-text dt{font-size:20px;font-weight:550;margin-bottom:10px;}
.teaching-item .dl-text dt>span{background:#ebe9fb;color:#604ffd;font-size:15px;padding:4px 10px;border-radius:5px;}
.teaching-item .dl-text dd{font-size:15px;}
.teaching-item .item .teaching-intro{font-size:15px;line-height:30px;}
.describe{font-size:15px;line-height:30px;}
.box-content .box img{max-width: 100%;display: inline-block}
.video-icon{text-align:right;}
.video-icon .video-icon-span{background:#f8f8f8;color:#000;margin-right:10px;display:inline-block;padding:8px 15px;border-radius:15px;font-weight:550;font-size:14px;letter-spacing:1px;cursor: pointer}
.video-box{width: 100%}
.video-item{margin-bottom: 30px;}
.video-box .video-title{background: #fafafa;display: flex;align-items: flex-start;height: 40px;line-height: 40px;margin-top: 30px;padding: 10px 20px;font-size:18px;font-weight:550;letter-spacing: 1px;border-radius: 15px;}
.video-box .video-title label{font-size:15px;cursor:pointer;font-weight:500}
.video-box .item-title{flex:1;margin-left: 50px;}
.video-box .item{}
.video-box .item dl dt{height: 50px;line-height: 50px;border-bottom:1px solid #eeeeee;padding-left:125px;cursor: pointer;}
.video-box .item dl dt span{text-indent: 30px;display: inline-block}
.video-box .item dl dd{height: 50px;line-height: 50px;border-bottom:1px solid #eeeeee;padding-left:185px;}
.video-box .item dl dt:hover{background: #f9f8fe;color:#4936fc;cursor:pointer; }
.video-box .item dl dd:hover{background: #f9f8fe; color:#4936fc;cursor:pointer;}
.box-select-title{display: flex;justify-content: space-between;}
.box-select .layui-form-item{display:flex;font-weight: 500;}
.box-select .layui-input-block{margin-left:10px;}
.box-select-item{}
.box-table{width: 100%;border:1px solid #ebebeb;/*  */}
.box-table tr:nth-child(1){background: #fafafa;}
.box-table tr{height:50px;line-height:50px;border:1px solid #ebebeb;}
.box-table tr th{padding-left:10px;}
.box-table tr td{padding-left:10px;}
.box-table tbody{border-radius: 10px;overflow: hidden;}
.box-table tr td img{width: 23px;height: 23px;object-fit:contain}
.box-table tr td label{margin-right:5px}
.box-label-text{display: flex;justify-content: space-between;}
.box-label-text .total label{font-size:25px;font-weight:550;margin:0 2px;color:#604ffd}
#chart-container {
    position: relative;
    overflow: hidden;
    height: 400px;
    width: 700px;
    float:left;
}
.box-chart-bg{background: #fafafa;margin-top:30px;border-radius:20px;height: 400px}
.box-grades{float:right;width:40%;display: flex;margin-top: 160px;}
.box-grades .grades{margin-right: 140px;font-size:18px;position: relative;}
.box-grades .grades:last-child{margin-right:0;}
.box-grades .grades span{font-size:25px;font-weight:550;color:#000;margin-right:5px;}
.box-grades .grades::before{display:inline-block;width: 13px;height: 13px;background:#19cb45;content:'';position: absolute;top: 22px;border-radius:4px;left: -25px;}
.box-grades .grades-color1::before{background: #1fa2ff}
.grades-item{margin-top:30px;border:1px solid #f0f0f0;border-radius:20px;}
.grades-item dl{border-bottom:1px solid #f0f0f0;padding: 5px 20px;display: flex;align-items: center;height: 115px;}
.grades-item dl dt{display: flex;flex-direction: column;margin-right: 100px;width: 100px;}
.grades-item dl dt span{font-size:32px;font-weight:550;color: #19cb45}
.grades-item dl dd{flex:1;line-height:28px;}
.grades-item dl dt span.color{color: #1fa2ff}
.course-box{width:100%;}
.course-item1{display:flex;margin-bottom: 25px;}
.item-first{width: 25%;margin-right: 25px;background:#eff2ff;border-radius:20px;position:relative;height: 200px;display: flex;flex-direction: column;justify-content: space-between;}
.item-second{flex:1;display:flex;flex-direction: column;background: #fcfbff;padding: 20px;border-radius: 20px;justify-content: space-between;}
.item-second2{display: flex;justify-content: space-between;}
.item-first::after{display:inline-block;width:80px;height:80px;background:#fff url(/skin/yunketang/images/icon_01_03.jpg) center no-repeat;content:'';background-size: 50px;border-radius:50%;position: absolute;bottom: 20px;right: 20px;}
.item-first .title{margin-top:20px;padding-left: 20px;font-size:16px;}
.item-first .num{margin-bottom:20px;padding-left: 20px;}
.course-box .num{font-size:15px;}
.course-box .num span{font-size:30px;font-weight:550;margin-right:2px;}
.item-second1 i{display: inline-block;width: 20px;height: 20px;background:#e8e7eb url(/skin/yunketang/images/icon_01_01.png) center no-repeat;border-radius: 50%;margin-left: 5px;}
.item-second1>div{display: flex;align-items: center;}
.item-second2 dl dt i{display: inline-block;width: 20px;height: 20px;background:#e8e7eb url(/skin/yunketang/images/icon_01_01.png) center no-repeat;border-radius: 50%;margin-left: 5px;}
.item-second2 dl dt{display: flex;align-items: center;}
.item2-first{width: 100%;margin-right: 25px;background:#e8faec;border-radius:20px;position:relative;height: 200px;display: flex;flex-direction: column;justify-content: space-between;}
.item2-first .title{margin-top:20px;padding-left: 20px;font-size:16px;}
.item2-first .num{margin-bottom:20px;padding-left: 20px;}
.course-item2{display:grid;gap: 25px;grid-template-columns: 25% auto auto;}
.item2-second{width:100%;background:#efedff;border-radius:20px;display: flex;flex-direction: column;justify-content: space-between;}
.item2-third{width:100%;background:#e5faf4;border-radius:20px;position:relative;display: flex;flex-direction: column;justify-content: space-between;}
.item2-third::after{display:inline-block;width:80px;height:80px;background:#fff url(/skin/yunketang/images/icon_01_07.jpg) center no-repeat;content:'';border-radius:50%;position: absolute;bottom: 20px;right: 20px;background-size: 50px;}
.item2-second .title{margin-top:20px;padding-left: 20px;font-size:16px;}
.item2-second .num{margin-bottom:20px;padding-left: 20px;}
.item2-third .title{margin-top:20px;padding-left: 20px;font-size:16px;}
.item2-third .num{margin-bottom:20px;padding-left: 20px;}
.atlas-box{display: grid;gap: 25px;grid-template-columns:repeat( 3 ,1fr);}
.atlas-item{width: 100%;  height: 200px;border-radius:20px;display: flex;flex-direction: column;justify-content: space-between;}
.atlas-first{background: #1fa1ff url(/skin/yunketang/images/icon_01_11.jpg) bottom right no-repeat;background-size: 150px;color:#fff;}
.atlas-second{background: #eff2ff}
.atlas-third{background: #fcfbff}
.atlas-item .num{margin-bottom:20px;padding-left: 20px;}
.atlas-item .title{margin-top:20px;padding-left: 20px;font-size:16px;}
.atlas-item .num span{font-size:30px;font-weight:550;margin-right:2px;}