/*长三角定制界面样式*/
@charset "utf-8";

:root{
    --SYS_PLATFORM_COLOR:#053A95;
    --SYS_PLATFORM_HOVER_COLOR:#0F4BB0;
    --SYS_PLATFORM_TEXT_COLOR:#434d57;
}
/*elementy*/
.i-search,.icon-lock,.icon-date,.icon-clock,.icon-cycle,.icon-date01,.icon-clock01,.icon-cycle01,.line-top,.line-bottom,.side-dot,
.input-c,.input-r,.pagination .page-num a,.icon-edit,.icon-sort,.icon-arrow,.test-title .test-no,.icon-back,.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span,.steps-num,.icon-date02,.icon-attach,.icon-snotice,.icon-report01,.icon-window,.icon-window01,.icon-date04,.icon-view04,.introjs-helperNumberLayer,
.ic{
    display:inline-block;
    vertical-align:middle;
    background-repeat:no-repeat;
    background-image:url(../../images/custom/csj/sprite.png);
}
/*layout*/
.ui-dialog .ui-dialog-titlebar-close,.d-close ,.partner-link,.icon-app
{
    display:inline-block;
    vertical-align:middle;
    background-repeat:no-repeat;
    background-image:url(../../images/custom/csj/sprite.png);
}

/*base*/
html{min-width: 1440px;}
.csj-link{color: var(--SYS_PLATFORM_COLOR);}
.csj-link .arrow{font-size: 24px;display: inline-flex;vertical-align: text-bottom;line-height: 20px;}
.csj-link:hover{color: var(--SYS_PLATFORM_HOVER_COLOR);text-decoration: underline}
/**/
.csj-header{background-color: var(--SYS_PLATFORM_COLOR)}
.csj-layout{position: relative}
.csj-layout-part{padding: 40px 0;}
.csj-content{width: 1180px;margin: 0 auto;}
.csj-header-bar{display: block;background-color: #052968;}
.csj-header-bar .csj-content{height: 30px;display: flex;justify-content: space-between;align-items: center}
.csj-slogan{letter-spacing: 3px;font-size: 12px;font-family: "Droid Sans Mono Dotted";color:#fff;}

.csj-header .csj-content{display: flex;justify-content: space-between;align-items: center;padding: 24px 0;}
.csj-header .btn-hollow{border-color: #fff;color:#fff;}
.csj-header .btn-hollow:hover{background-color: #fff;color:var(--SYS_PLATFORM_HOVER_COLOR);}
.csj-header .login-before{display: flex;flex-direction: row;color:#fff;align-items: center}
.csj-header .login-before .sp-line{height: 8px;display: inline-block;margin: 0 10px;width: 1px;background-color: #fff;}
.csj-header .link-default{color:#fff;}
.csj-header .user-select{margin: 0;}
.csj-header .user-select .dk-selected{background-color: transparent}
.csj-header .user-select .dk-selected:before{border-top-color: #fff;}
.csj-header .user-select .dk-select-options{border:none;background-color: rgba(0, 0, 0, 0.60);padding: 0;}
.csj-header .user-select .dk-option{padding: 0 8px;line-height: 38px;color: #fff;font-size: 14px;}
.csj-header .user-select .dk-option-selected{background-color: transparent}
.csj-header .user-select .dk-option-selected:hover{background-color:#616f7e;}
.csj-header .user-select .dk-selected{height: 33px;}



.csj-top-menu{background-color: var(--SYS_PLATFORM_HOVER_COLOR);}
.csj-top-menu .csj-menus{width: 1180px;margin: 0 auto;display: flex;justify-content: center;}
.csj-top-menu .csj-menu{width: 33.33%;font-size: 16px;text-align: center;transition: all .3s;border-left: 1px solid var(--SYS_PLATFORM_HOVER_COLOR)}
.csj-top-menu .csj-menu a{color:#fff;display: block;height: 50px;line-height: 49px;}
.csj-top-menu .csj-menu:hover,.csj-top-menu .csj-menu.current{background-color: var(--SYS_PLATFORM_COLOR);}

.csj-banner{height: 204px;background-position: center center}
.csj-school-list{display: flex;flex-wrap: wrap;margin: 30px -10px;min-height: 300px;align-items:start}
.csj-school-list .csj-school{display: flex;width: 280px;flex-direction: column;border-radius: 8px;border: 1px solid #E5E6EB;margin: 10px;box-sizing: border-box}
.csj-school-list .zt-cover{height: 180px;display: flex;align-items: center;justify-content: center;}
.csj-school-list .zt-cover img{width: 116px;height: 116px;border-radius: 50%;}
.csj-school-list .zt-name{background-color: #E5E6EB;line-height: 66px;font-size: 18px;text-align: center;max-width: 280px;padding: 0 10px;
    overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.csj-school-list .csj-school:hover .zt-name{color: var(--SYS_PLATFORM_HOVER_COLOR)}

.layout-footer{background: url("../../images/custom/csj/footer-bg.png") center 0 no-repeat #262B32;font-size: 12px}
.layout-footer .csj-content{padding: 40px 0;display: flex;color:rgba(255,255,255,.6);justify-content: space-between}
.layout-footer .csj-content a{color:rgba(255,255,255,.6)}
.layout-footer .csj-content a:hover{color:rgba(255,255,255)}
.footer-logo img{width: 280px;}
.qrcode-list{margin-top: 40px; display: flex;flex-direction: row;justify-content: space-between}
.qrcode-item img{width: 100px;height: 100px;display: block;}
.qrcode-item .v-name{display: block;text-align: center;line-height: 30px;}
.footer-info dt{margin-bottom: 14px;color:#fff;font-size: 14px;}
.footer-info dd{margin-top: 12px;}
.csj-copyright{background-color: #000;text-align: center;color:#fff;padding: 12px;}

.banner-mask{background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.63) 100%);
    height: 96px;position: absolute;z-index: 2;left: 0;bottom: 0;right:0px;}

.home-panel .v-header{margin-bottom: 16px;display: flex;justify-content: space-between;align-items: center}
.home-panel .v-header .v-name{color:#1D2129;font-size: 30px;font-style: normal;font-weight: 700;line-height: normal;}

.csj-course-list{margin: -10px -10px 0;display: flex;flex-wrap: wrap}
.csj-course-view{width: 280px;margin: 10px;}
.csj-course-view:hover .v-cover img{transform: scale(1.2)}
.csj-course-view .v-cover{overflow: hidden;}
.csj-course-view .v-cover img{width: 100%;transition: all .3s;display: block;height: 158.66px;}
.csj-course-view .v-tag{display: inline-flex;align-items: center;justify-content: center;background-color: #F2F3F5;color:#86909C;font-size: 14px;padding: 2px 4px;}
.csj-course-view .v-intro{background: #F5F5F5;padding: 16px 20px;font-size: 18px;}
.csj-course-view .v-intro .v-name{width: 100%;margin-bottom: 10px;max-width: 860px;}
.csj-course-view .v-intro .v-user{width: 100%;}
.csj-course-view .v-intro .user-head-30{width: 28px; height: 28px;}
.csj-course-view .v-info{color:#86909C;font-size: 16px;height: 48px;line-height:24px;overflow: hidden}
.view-hor{display: flex;flex-direction: row;width: 100%;margin: 10px 0;}
.view-hor .v-cover{height: 156px;flex:  0 0 274px;}
.view-hor .v-intro{background-color: transparent;padding: 0 20px;}
.view-hor .v-intro .v-name{margin-bottom:0;}
.view-hor .v-intro .v-tags{margin: 6px 0;}
.view-hor .v-info{height: 88px;font-size: 14px;line-height: 22px;}

.csj-teacher-list {margin: -10px -10px 0;display: flex;flex-wrap: wrap}
.csj-user-card{display: inline-flex;flex-direction: column;padding: 36px 0;margin: 10px;text-align: center;align-items: center;background-color: #fff;width: 180px;}
.csj-user-card img{width: 88px;height: 88px;border-radius: 50%;display: inline-block;}
.csj-user-card .v-name{font-size: 18px;line-height: 26px;margin: 16px 0 8px}
.csj-user-card .v-school{font-size: 14px;color:#86909C;}
.csj-user-card .v-name,.csj-user-card .v-school{max-width: 80%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
/*index.html*/
.new-course .csj-course-view .v-intro{background-color: #fff;}
.recommended-course .csj-course-view:not(:first-child){margin-top: 32px;}

.csj-home-banner{height: 380px;position: relative;overflow: hidden}
.csj-home-banner .slides-item{height: 380px;}
.csj-home-banner .slidesjs-next,.csj-home-banner .slidesjs-previous{z-index: 30;
    display:block;position: absolute;left:50%;top:50%;transform: translateY(-50%);width: 32px;height: 32px;background-color: var(--SYS_PLATFORM_COLOR);
}
.csj-home-banner .slidesjs-next:hover,.csj-home-banner .slidesjs-previous:hover{background-color: var(--SYS_PLATFORM_HOVER_COLOR)}
.csj-home-banner .slidesjs-previous{margin-left: -588px;}
.csj-home-banner .slidesjs-next{margin-left: 556px}
.csj-home-banner .slidesjs-previous:before{content: '‹';}
.csj-home-banner .slidesjs-next:before{content: '›'}
.csj-home-banner .slidesjs-previous:before,.csj-home-banner .slidesjs-next:before{
    display: inline-block;position: absolute;top:40%;left: 50%;transform: translate(-50%,-50%);font-size: 30px;color:#fff;vertical-align: text-bottom;line-height: 32px;
}
/*课程.html*/
.csj-course-index.course-index{width: 1180px;}
.csj-course-index.course-index .sidebar{width: 260px;}
.csj-course-index.course-index .main{width: 900px;}

.csj-course-index .view-intro{background-color: #fff;padding: 0 10px;padding-right: 160px;}
.csj-course-index .view-intro .view-teacher{background-color: #F7F8FA;height: 154px;width: 153px;display: flex;align-items: center;justify-content: center}
/*.csj-course-index .view-intro .vh-cert-link{right: 40px;}*/
.csj-course-index .view-intro .view-desc{font-size: 14px;line-height: 22px;margin: 0;height: 44px;overflow: hidden;color:#86909C;}
.csj-course-index .view-intro .view-cell{height: 48px;margin: 10px 0;}
.csj-course-index .view-intro .t-img img{height: 58px;width: 58px;}
.csj-course-index .view-progressbar{}
.csj-course-index .view-item{margin-bottom: 40px;}
.csj-course-index .view-img{width: 274px;height: 154px}
.csj-course-index .view-img img{width: 100%;height: 100%;}
.csj-course-index .view-intro .view-title .link-default{font-size: 18px;}
.csj-course-index .view-progressbar .progressbar-text{color:#86909C;font-size: 12px;}
.csj-course-index .view-progressbar .progressbar-text em{font-style: normal;color:#1D2129;font-size: 16px;}
.csj-course-index .view-progressbar .progressbar-value{color:#86909C;padding-bottom: 2px;}
.csj-course-index .view-progressbar .progressbar-bg{background-color: #E3EEFF;height: 8px;border-radius: 3px;}
.csj-course-index .view-progressbar .progressbar-in{background-color: var(--SYS_PLATFORM_COLOR);height: 8px;border-radius: 3px;}
.csj-course-index .tree-root.tree-node{background: var(--SYS_PLATFORM_COLOR);padding: 5px 24px;}
.csj-course-index .tree-root .tree-title{font-size: 24px;}
.csj-course-index .tree-node{background: var(--SYS_PLATFORM_HOVER_COLOR);cursor: pointer;height: 54px;line-height: 54px;}
.csj-course-index .tree-node:hover{background: var(--SYS_PLATFORM_COLOR);}
.csj-course-index .tree-node .input-c{background: none;border: 1px solid rgba(255,255,255,.6);width: 16px;height: 16px;margin: 4px;border-radius: 2px;
background-color: rgba(255,255,255,.2);position: relative}
.csj-course-index .tree-node .input-c.selected{border: 1px solid #fff;}
.csj-course-index .tree-node .input-c.selected:before{display: block;content: '✔';position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);color:#fff;font-family: sans-serif;}
.csj-tree-menu  .tree-nav .tree-node{padding: 0 24px;}
.csj-tree-menu  .tree-nav .tree-title{width: 66%;font-size: 18px;}
.csj-tree-menu  .tree-nav .sub-tree .tree-node{padding-left: 48px;}
.csj-tree-menu  .tree-nav .sub-tree .tree-title{width: 78%;font-size: 16px;}
.csj-tree-menu  .sub-tree{display: none;}
.csj-tree-menu  img{margin-right: 6px;}
.csj-tree-menu  .current .sub-tree{display: block;}
.csj-tree-menu  .current{display: block;}
.csj-tree-menu  .sub-tree li.current .tree-node{background-color: var(--SYS_PLATFORM_COLOR);border-left: 8px solid #052968;position: relative;padding-left: 40px;}
.csj-tree-menu  .sub-tree li.current .tree-node:before{position: absolute;content: ' ';display: block;width: 0;height: 0;top:50%;left: -6px;transform: translate(0,-50%);
    border: 4px solid transparent;border-left-color:#fff;}

.csj-course-index .pagination li{background-color: #fff;border-radius: 2px;margin: 0 4px;}
.csj-course-index .pagination li a{color:#1D2129;font-size:  14px;}
.csj-course-index .pagination .page-num.current{background-color: #E3EEFF;}
.csj-course-index .pagination .page-num.current a{background-color: #E3EEFF;background-image: none;}
.csj-course-index .pagination .page-next a, .csj-course-index .pagination .page-prev a{font-size: 20px;padding-top: 1px;color:#C9CDD4;}
.csj-course-index .pagination .page-next:hover a, .csj-course-index .pagination .page-prev:hover a{color:var(--SYS_PLATFORM_COLOR);}
.csj-course-index .pagination .page-num:hover a{color: var(--SYS_PLATFORM_COLOR);font-size: 14px;}
.csj-crumbs {font-size: 14px;color:#86909C;margin-bottom: 10px;}
.csj-crumbs a{color: #1D2129;font-size: 14px;}
/*课程-详情.html*/
.csj-course-center .view-handle .btn-public{background-color:var(--SYS_PLATFORM_HOVER_COLOR);}
.csj-course-center .view-handle .btn-public:hover{background-color:var(--SYS_PLATFORM_COLOR);}
.csj-course-center .para-view{background-color: #fff;border-top-color: #F2F3F5;padding-top: 20px;}
.csj-course-center .para-view .para-title{font-size: 16px;color: #1D2129;font-weight: bold}
.csj-course-center .para-view .para-title i{display: none}
.csj-course-center .para-view table{width: 100%;}
.csj-course-center .para-view table th{background-color: #F7F8FA;padding: 10px 12px;}
.csj-course-center .para-view table td{padding: 10px 12px;border-top: 1px solid #F2F3F5;}

.csj-video-banner{background-color: #F5F5F5;}
.csj-video-banner .v-body{overflow: hidden}
#video-slides {position: relative;width: 1045px!important;height: 364px!important;margin: 0 auto;overflow: initial!important;}
.csj-video-banner .slidesjs-container,
.csj-video-banner .slidesjs-control,
.csj-video-banner .slides-item{height: 364px!important;}
.csj-video-banner .slidesjs-next,.csj-video-banner .slidesjs-previous{z-index: 30;
    display:block;position: absolute;left:50%;top:50%;transform: translateY(-50%);width: 28px;height: 28px;background-color: rgba(201, 205, 212, 1);
    border-radius: 50%;
}
.csj-video-banner .slidesjs-next:hover,.csj-video-banner .slidesjs-previous:hover{background-color: var(--SYS_PLATFORM_HOVER_COLOR)}
.csj-video-banner .slidesjs-previous{margin-left: -588px;}
.csj-video-banner .slidesjs-next{margin-left: 556px}
.csj-video-banner .slidesjs-previous:before{content: '‹';}
.csj-video-banner .slidesjs-next:before{content: '›'}
.csj-video-banner .slidesjs-previous:before,.csj-video-banner .slidesjs-next:before{
    display: inline-block;position: absolute;top:40%;left: 50%;transform: translate(-50%,-50%);font-size: 30px;color:#fff;vertical-align: text-bottom;line-height: 32px;
}
.vb-view{flex-shrink: 0;padding: 20px;display: flex;flex-direction: row;align-items: center;margin: 0 auto;background-color: #fff;}
.vb-view video{width: 578px;height: 324px;}
.vb-view .vb-intro{padding: 20px;text-align: center;font-size: 16px;color:#86909C;}
.vb-view .vb-title{font-size: 24px;font-style: normal;font-weight: 700;line-height: 160%;margin: 16px 0 12px;color:#1D2129;}

.feature-course{display: flex;flex-direction: row;justify-content: flex-start;padding: 0;margin: -20px 0 0 -20px;}
.feature-course .csj-course-view{width: 280px;height:162px;margin: 20px 0 0 20px;}
.feature-course .csj-course-view .v-cover img{transform: none}
.feature-course .v-name{font-size: 20px;font-weight: 700;color:#fff;width: auto;max-width: 220px;position: relative;z-index: 2;left:24px;top:26px;}
.feature-course .cover-img,
.feature-course .v-info{position: absolute;left:0;top:0;width: 100%;height: 100%;}
.feature-course .v-info{background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(3px);;border:14px solid transparent;
    overflow: hidden;box-sizing: border-box;color:#fff;font-size: 14px;line-height: 22px;}

.flip-state{perspective: 1000px;transform-style: preserve-3d;}
.flip-state, .front, .back,.flip {
    width: 280px;height:162px;
}
.flip{position: relative;transition: 0.3s;transform-style: preserve-3d;transform-origin: center;}
.flip .front,.flip .back{position: absolute;width: 100%;height: 100%;top:0;left:0;z-index: 1;backface-visibility: hidden}
.flip .front{z-index: 2}

.flip:hover .front{z-index: 1}
.flip:hover .back{z-index: 2}
.flip-x .back{transform: rotateX(-180deg);}
.flip-y .back{transform: rotateY(-180deg);}

.flip-state:hover .flip-x {
    transform: rotateX(180deg);
}

.csj-course-index.course-index .sidebar{display: none}
.csj-course-index.course-index .main{width: 1180px;}
.csj-course-index.course-index .csj-crumbs{margin-top: 30px}
.csj-course-index .search-factor{font-size: 30px;font-weight: 700;}
.csj-course-index .search-tool{font-size: 16px;}
.csj-course-index .search-bar{padding-bottom: 32px;}
.csj-course-index .select-label{color:rgba(134, 144, 156, 1);line-height: 38px;}
.select-course-state{width: 110px;display: inline-block;vertical-align: middle}
.select-course-state .dk-selected{height: 36px;line-height: 34px;}
.select-course-state .dk-selected:before{border-top-color: rgba(29, 33, 41, 1);}
.select-course-state .dk-selected:hover, .select-course-state .dk-selected:focus{border-color:rgba(5, 58, 149, 1);}
.radio-buttons{display: inline-block;vertical-align: middle}
.radio-buttons a{font-size: 16px;padding: 0 16px;height: 40px;display: inline-block;border-radius: 2px;line-height: 39px;}
.radio-buttons a:hover{color:rgba(5, 58, 149, 1)}
.radio-buttons a.selected{background-color: rgba(5, 58, 149, 1);color:#fff;}
.item-select{display: inline-block;vertical-align: middle}
.v-course-index .view-img{width: 274px;height: 152px;}
/*.v-course-index .view-sign{left:0;right:0;bottom:0;height: 38px;background-color: rgba(0, 0, 0, 0.5);line-height: 38px;text-align: left;padding: 0 14px;}*/
.v-course-index .tag-mark{position: absolute;left:0;top:0;height: 26px;width: 62px;background-color: #86909C;color:#fff;font-size: 14px;z-index: 2;text-align: center;display: flex;align-items: center;justify-content: center}
.v-course-index .tag-mark.underway{background-color: #00B42A;}
.v-course-index .tag-mark.tag-learn{background: linear-gradient(101.45deg, #0E54CD -1.59%, #002E7D 103.23%);width: 76px;height: 34px;display: flex;align-items: center;justify-content: center
;left:10px;bottom:10px;top:auto;border-radius: 2px;}
.v-course-index .view-intro{ padding-top: 16px;padding-left: 16px;width: 758px!important;}
.v-course-index:hover .view-intro{background: linear-gradient(90deg, #F7F8FA 0%, rgba(247, 248, 250, 0) 100%);}

.v-course-index .view-title{margin-bottom: 8px;}
.v-course-index .title-year{color:#86909C;font-size: 16px;display: inline-block;vertical-align: middle}
.v-course-index .view-title .substr{display: inline-block;width: auto;max-width: 590px;font-size: 28px;font-weight: 700;vertical-align: middle}
.v-course-index .view-title .learn-count.normal{background-color:rgba(78, 89, 105, 0.05);color:#4E5969;border-color: #4E5969;}
.v-course-index .view-title .learn-count{display: inline-block;vertical-align: middle;border:1px solid var(--SYS_PLATFORM_COLOR);color:var(--SYS_PLATFORM_COLOR);font-size: 12px;padding: 4px 10px;border-radius: 2px;line-height: 22px;
    background-color: rgba(5, 58, 149, 0.05);
}
.v-course-index .view-title .learn-count em{font-style:normal;font-weight: 800;font-size: 14px;}
.v-course-index .view-teacher{background-color:#F7F8FA;border-radius: 4px;}
.v-course-index .view-teacher .t-name{font-size: 14px;margin-top: 8px;}
.v-course-index .input-value{overflow: hidden;color: #86909C;max-height: 40px;}
.v-course-index .time-str{color:var(--SYS_PLATFORM_COLOR);}
.v-course-index .view-handle .tag{display: inline-block;vertical-align: middle;background-color: #EDEFF2;height: 22px;min-width: 53px;padding: 0 4px;text-align: center;
font-size: 12px;color:#4E5969;}

.input-group-print{display: flex;flex-direction: row;font-size: 14px;align-items: flex-start}
.input-group-print .input-label{width: 90px;text-align: revert;display: inline-flex;align-items: center;gap:4px;padding-right: 0;}
.input-group-print .input-value{flex: 1;padding: 4px 0;line-height: 22px;}

.csj-school-logo-list{display: flex;flex-wrap: wrap;min-height: 300px;align-items:start;margin: 20px 0 0 -20px;}
.csj-school-logo-list .csj-school{display: flex;width: 280px;height:140px;box-sizing: border-box;border-radius: 8px;margin: 20px 0 0 20px}
.csj-school-logo-list .csj-school img{width: 100%;height: 100%;object-fit: cover}

.countdown-card{display: flex;align-items: center;color:#4E5969;font-size: 14px;}
.countdown-card >span{display: inline-flex;background-color: rgba(5, 58, 149, 0.08);align-items: center;justify-content: center;
    color:var(--SYS_PLATFORM_COLOR);width: 19px;height: 30px;margin-right: 2px;font-size: 22px;font-weight: 600;}
.countdown-card >label{margin: 0 4px}
.view-time-interval{display: flex;align-items: center;margin-top: 12px;}