@charset "utf-8";
:root {
    --primary-blue: #0066ff;
    --light-blue: #e6f0ff;
    --bg-gradient: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
    --text-main: #333333;
    --text-sub: #666666;
    --card-shadow: 0 4px 20px rgba(0, 102, 255, 0.08);
    --hover-shadow: 0 8px 30px rgba(0, 102, 255, 0.15);
}
* { margin:0; padding:0;box-sizing: border-box;font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:16px; background-color: #fff; min-width: 1200px;}
form, img, table, td { border:0; margin:0;}
ul, ol, li { list-style-type:none; display: block; margin:0; padding:0;}
input, textarea, img { vertical-align:middle; }
a { color:#000000; text-decoration:none; }
a:link { text-decoration:none; }
a:visited { color:#000000; }
a:active { color:#f60; }
a:hover { color:#039; }
.clear{clear:both;}
.clearfix:after,.clearfix:before{display:table;line-height:0;content:""}
.clearfix:after{clear:both}
.wtbg{ background-color:#fff;}
.wtbg_transp{background:rgba(255,255,255,.8);}
.greybg{ background-color:#f1f1f1;}
.imgw{ width:100%;}
.imgw img{width:100%;}
.f12 { font-size:12px; }
.f14 { font-size:14px; }
.f16 { font-size:16px; }
.f18 { font-size:18px; }
.f20 { font-size:20px; }
.fgray { color:gray; }
.fgray2 { color:#5B5B5B; }
.fbla { color:#282828; }
.fora { color:#FF6600; }
.fred { color:#FF0000; }
.fblu { color:#039; }
.fblu2 { color:#0088E7;} 
.fwhite {color: #ffffff}
.green{color:#090;}
.red {color:#FF0000;}
.blue{ color:#0e4afa;}
.contain{ margin:0 auto; width:1200px;}
.pad{ margin:0 auto;}
.bold{ font-weight:bold;}
.msg_box{text-align: center;}
.colortext{background: linear-gradient(96deg, #005eff 3.57%, #28d3fd 107.23%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
/*头部*/
header{background:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 40px;box-shadow:0 2px 10px rgba(0,0,0,0.05);position:sticky;top:0;z-index:1000}
.logo-area{display:flex;align-items:center;gap:15px;font-weight:bold;font-size:18px;color:#1366EC ;}
.logo{width:40px;height:40px;}
.logo img{ width: 100%; margin: 8px 0 0 0;}
.navs{ display:flex;flex-wrap:wrap; flex-direction:row; justify-content:space-between; width: 1000px;}
.navs a{ color:#333; font-weight:500; font-size:16px; line-height:40px; display: inline-block;position: relative;}
.navs a:hover{ background: linear-gradient(96deg, #005eff 3.57%, #28d3fd 107.23%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;animation: textGradientFlow 3s linear infinite; background-size: 200% 100%;}
.navs a.on{background: linear-gradient(85deg, #1366EC 0%, #856EFA 69%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;animation: textGradientFlow 3s linear infinite; background-size: 200% 100%;}
.navs a:hover::after,.navs a.on::after {
    content: "";
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(85deg, #1366EC 0%, #856EFA 69%);;
    animation: textGradientFlow 3s linear infinite;
    background-size: 200% 100%;
    position: absolute;
    bottom: -2px;
    left: 50%;
    margin-left: -10px;
}
@keyframes textGradientFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
a.topbtn{padding:6px 20px; display: inline-block; border:1px solid #ddd; background: linear-gradient(85deg, #1366EC 0%, #856EFA 69%); border-radius:20px; cursor:pointer; color:#fff;}
.nav-actions img{ height: 24px; width: 24px; border-radius: 24px;}
.btn_submit{ height:30px; line-height:30px; border:1px solid #186ea9; border-radius: 4px; text-align:center; background-color:#186ea9; color:#fff; font-size:14px; cursor:pointer; padding:0px 10px;}
.btn_cancel{ height:30px; line-height:30px; border:1px solid #CCC;border-radius: 4px; text-align:center; background-color:#f5f5f5; color:#186ea9; font-size:14px; cursor:pointer; padding:0px 10px;}
.star0{ width: 24px; background: url(/images/star.png);}
.star1{ width: 24px; background: url(/images/star.png);}
.star2{ width: 48px; background: url(/images/star.png);}
.star3{ width: 72px; background: url(/images/star.png);}
.star4{ width: 96px; background: url(/images/star.png);}
.star5{ width: 120px; background: url(/images/star.png);}
.position{ height: 40px; padding:20px 0; font-size: 14px;}
.position a{ color: #8c8c8c; font-size: 14px;}
.flex-col{display:flex;flex-wrap:wrap; flex-direction:row; justify-content:space-between;}
.flex-row{display:flex;flex-wrap:wrap; flex-direction:column; justify-content:space-between;}
.bg_grey{background-color: #f8f9fd;}
.bg_grl{background: url(/images/aibg10.png) center;}
.aibanner{background: linear-gradient(96deg, #005eff 3.57%, #28d3fd 107.23%); position: relative;}
.aibanner_bg{background: url(/images/aibanner5.jpg) center no-repeat; background-size: cover; width: 100%; height: 260px; padding: 80px 0 0 0; }
.aibanner text{ display: block;text-align: center;font-size:66px;color:white;font-weight:800;position: relative;text-shadow:0 4px 20px rgba(0,102,255,0.1);letter-spacing:5px;background:linear-gradient(to bottom,#ffffff,#e6f0ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1))}
@-webkit-keyframes scale-bg{from{-webkit-transform:scale(1.2);transform:scale(1.2);}to{-webkit-transform:scale(1);transform:scale(1);}}
@keyframes scale-bg{from{-webkit-transform:scale(1.2);transform:scale(1.2);}to{-webkit-transform:scale(1);transform:scale(1);}}
.index-slide{width:100%;height:200px; overflow: hidden;}
.index-slide .swiper-slide{font-size:18px;background: linear-gradient(97.79deg, #dfebfe 9.39%, #f2f6ff 70.46%, #eeebff 91.53%); border-radius: 20px; margin: 0 20px 0 0; padding: 0 20px;}
.index-slide .swiper-slide a{width:100%; height:200px;display:flex;justify-content:center;align-items:center; flex-direction: column;}
.index-slide .swiper-slide .slidet1{ margin: 20px 0 10px 0; font-size: 14px; font-weight:600;}
.index-slide .swiper-slide .slidet2{font-size: 12px; color: #888; font-weight:100;}
.index-slide .swiper-slide img{display:block;width:100px;height:100px;border-radius: 100px;transition: all 0.3s;}
.index-slide .swiper-slide img:hover{transform: scale(1.1);}
.hidden{ display: none;}
#callboard-box{width:100%; height:40px;background-color:#dddddd;margin:10px 0 0 0;}
#callboard{line-height:40px; color:#717171;  display:flex;flex-wrap:wrap; flex-direction:row; justify-content:space-between;}
#callboard .t{width:70px;text-align: left;}
#callboard .cont{ width:1000px; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}
#callboard .cont li{display: inline-block; margin: 0 20px 0 0;}
#callboard .more{width:70px; text-align: right;}
#callboard .more a{color:#e83926; font-weight:bold;}

.menu_nav{position:relative;}
.site_menu{display:flex;flex-wrap:wrap; flex-direction:row; justify-content:space-between;height:50px;}
.site_menu li{position:relative; width:292px; text-align:center;}
.site_menu li h2{ display:block; color:#fff; background-color:#172a88; font-size:16px; font-weight:500; height:50px; line-height:50px;}
.site_menu li h2:hover{ font-size:28px;}
.site_menu li ul{ display:none; position:absolute; left:0; top:50px; width:292px; padding:10px 0 0 0;}
.site_menu li ul li{ height:40px; margin:0 0 10px 0; background-color:rgba(23,42,136,0.2);}
.site_menu li ul a{color:#8d8d8d; display:block; height:40px; line-height:40px; padding:0 20px; box-sizing:border-box;}

.course-btns{display:flex;flex-wrap:wrap; flex-direction:row; justify-content:space-between;}
.course-btns a{width:394px; height:110px; text-align:center; color:#fff; font-size:30px; display:block; line-height:110px;}
.test-onl{ margin:20px 0 0 0;}
.test-onl img{ width:100%; height:715px;}

/*show*/
.show-box{}
.show-box h2{ font-size:30px; font-weight: 500; text-align: center; padding: 20px 0;}
.content,.ke-content{ font-size: 15px; line-height: 30px;}

/*list*/
.list-title{ padding:20px 0 40px 0;}
.list-title h1{ font-size:30px;  line-height:40px; padding: 20px 0; text-align:center; margin:0 0 36px 0;}
.list-title h1 img{ margin:0 20px 0 0;}
.list-title h2{ text-align:center; font-weight: 100;}
.list-title h2 a{ display:inline-block; padding:6px 20px; line-height:30px; font-size:14px; text-align:center; color:#333; background:#fff;  border-radius:10px; margin: 0 10px 0 0;}
.list-title h2 a.on{ display:inline-block;background:linear-gradient(85deg, #1366EC 0%, #856EFA 69%); color: #fff;}
/**4列**/
.imgs4 ul{display:flex;flex-wrap:wrap; flex-direction:row; justify-content:space-between;}
.imgs4 ul::after{ content:''; width:280px;}
.imgs4 li{ width:280px; border-radius:4px; color:#a4a4a4; background-color:#fff; margin:0 0 20px 0;box-shadow: 2px 2px 5px rgba(150,150,150,0.3);}
.imgs4 li.aft{ width:280px; height:0;}
.imgs4 li .img{ width:100%; height:210px; border-top-left-radius:4px; border-top-right-radius:4px;}
.imgs4 li h2{ padding:12px 10px; font-size:20px; font-weight:500; color:#4e4e4f;}
.imgs4 li p{ font-size:14px; padding:0 10px;}
.imgs4 li h3{ margin:20px 10px 0 10px; height:20px; padding:10px 0; font-size:14px; line-height:20px; border-top:1px solid #ebe9e9; text-align:right; vertical-align:middle;}

/**3列**/
.imgs3 ul{display:flex;flex-wrap:wrap; flex-direction:row; justify-content:space-between;}
.imgs3 ul::after{ content:''; width:380px;}
.imgs3 li{ width:380px; border-radius:4px; color:#a4a4a4; background-color:#fff; margin:0 0 30px 0;box-shadow: 2px 2px 5px rgba(150,150,150,0.3);}
.imgs3 li.aft{ width:380px; height:0;}
.imgs3 li .img{ width:100%; height:220px; border-top-left-radius:4px; border-top-right-radius:4px;}
.imgs3 li h2{ padding:12px 10px; font-size:20px; font-weight:500; color:#4e4e4f;}
.imgs3 li p{ font-size:14px; padding:0 10px;}
.imgs3 li h3{ margin:15px 10px 0 10px; height:20px; padding:0 0 15px 0; font-size:14px; line-height:20px; text-align:left; vertical-align:middle;}
.imgs3 li h4{ height:50px; display:block;display:flex;flex-wrap:wrap; flex-direction:row; justify-content:space-between; padding:5px 10px; box-sizing:border-box; line-height:40px;}
.imgs3 li h4 img{ width:35px; height:35px;}
.imgs3 li h4 .score{ color:#bb4646; font-size:32px; font-weight:600;}
.imgs3 li h3.border-top{ border-bottom:0px solid #ebe9e9;border-top:1px solid #ebe9e9;margin:0 10px 0 10px; padding:15px 0 15px 0; text-align:right;}

/**2列**/
.imgs2 ul{display:flex;flex-wrap:wrap; flex-direction:row; justify-content:space-between;}
.imgs2 ul::after{ content:''; width:570px;}
.imgs2 li{ width:570px; border-radius:4px; color:#a4a4a4; background-color:#fff; margin:0 0 40px 0;box-shadow: 2px 2px 5px rgba(150,150,150,0.3);}
.imgs2 li.aft{ width:570px; height:0;}
.imgs2 li .img{ width:100%; height:234px; border-top-left-radius:4px; border-top-right-radius:4px;}
.imgs2 li h2{ padding:12px 10px; font-size:20px; font-weight:500; color:#4e4e4f;}
.imgs2 li .countdown{ text-align:right; height:32px; float:right; color:#fff;}
.imgs2 li .countdown::after{ clear:both;}
.countdown span{ display:inline-block; float:left;}
.countdown .texts{ background-color:#6e74e5; height:32px; line-height:32px; padding:0 15px 0 10px;}
.countdown .triangle{width: 0;height: 0;border-bottom:32px solid #6e74e5;border-left: 32px solid transparent;}
.imgs2 li p{ clear:both; font-size:14px; padding:0 10px; text-align:left;}
.imgs2 li h3{ margin:20px 10px 0 10px; height:20px; padding:10px 0; font-size:14px; line-height:20px; border-top:1px solid #ebe9e9; display:flex;flex-wrap:wrap; flex-direction:row; justify-content:space-between;}

/*剧中分页*/
.pagination{float:left;width:100%;overflow:hidden;position:relative; margin:0 0 50px 0;}
.pagination ul{clear:left;float:left;position:relative;left:50%;text-align:center}
.pagination li{margin:0 22px;display:block;float:left;position:relative;right:50%}
.pagination a{display:block;color:#888;background-color:#fff; border:1px solid #dddddd; width:38px; height:40px; line-height:40px; text-align:center; border-radius:6px; font-size:14px; font-weight:100; font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;}
.pagination a.cur,.pagination a:hover{color:#fff;background-color:#409eff;display:block;border:1px solid #409eff;}

/**课程**/
.course_list{display:flex;flex-wrap:wrap; flex-direction:row; justify-content: flex-start;gap: 0 1%;}
.course_list li{width:24%;box-shadow:0 0 14px 0 rgba(78,112,163,.2); background-color: #fff; margin: 0 0 20px 0;border: 1px solid #FFF; box-sizing: border-box; border-radius:10px;}
.course_list li:hover{ border: 1px solid #09F;}
.course_list li .imgbox{width:100%; height: 172px; overflow: hidden; position: relative;}
.course_list li img{width:100%; height: 172px; border-top-left-radius: 10px; border-top-right-radius: 10px; background: linear-gradient(97.79deg, #dfebfe 9.39%, #f2f6ff 70.46%, #eeebff 91.53%); object-fit:cover;transition: all 0.3s;border-top-left-radius: 10px; border-top-right-radius: 10px;}
.course_list li img:hover{transform: scale(1.1);border-top-left-radius: 10px; border-top-right-radius: 10px; }
.course_list .imglabel{ position: absolute;top:10px; right:10px; background: rgba(24, 25, 27, .6);color: #fff; border-radius: 6px; font-size: 12px; padding: 3px 5px;}
.course_list li .txtbox{ padding: 10px;}
.course_list li .txtbox .subtitle{ font-size: 14px; height: 20px; line-height: 20px;}
.course_list li h2{ font-size: 18px; font-weight: 500; line-height: 24px; height: 48px; margin: 0 0 10px 0;display: -webkit-box;  -webkit-line-clamp: 2; overflow: hidden;  -webkit-box-orient: vertical;}
.course_list li h3{ padding: 10px 0;display:flex;flex-wrap:wrap; margin: 0; flex-direction:row; justify-content:space-between;}
.course_list li h3 span{ display: inline-block; font-size: 12px; background-color: #eff6ff; color: #2563eb; padding: 5px 10px; text-align: center; border-radius: 8px;}
.course_list li h3 span.hits{ background: none; color: #6b7280;}
.course_list li h3 span.speaker{ color: #6b7280; font-size: 12px; font-weight:100;}

#root{ min-width: 1200px; margin: 20px 0 0 0;}
#root .dlbox{display:flex;flex-wrap:wrap; flex-direction:row; justify-content:left;}
#root dl{ width:20%;}
#root dt{ font-size: 18px; font-weight: 700; line-height: 24px; margin: 0 0 16px 0; color: #151515;}
#root dd a{color: #151515; font-size: 14px; margin-bottom: 10px; display: block;}
#root dd img{ height: 90px;}
#root .copybox{ display:flex;flex-wrap:wrap; flex-direction:row; justify-content:space-between;margin:20px 0 0 0; border-top: 1px solid #ddd; padding: 20px 0; }
#root .cptxts{font-size: 14px; color:#707070;}
#root .mpicon{width:160px; display:flex;flex-wrap:wrap; flex-direction:row; justify-content:space-between;}
#root .mpicon img{ height:36px;}

.preview-box{position:absolute;top:-160px;left:50%;transform:translateX(-50%);background-color:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.2);padding:10px;opacity:0;visibility:hidden;transition:all 0.3s ease;z-index:100;pointer-events:none}
.preview-box.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(-5px)}
.preview-box img{width:120px;height:120px;object-fit:contain;display:block}
.preview-box::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #fff}
.preview-text{text-align:center;font-size:12px;color:#666;margin-top:8px;padding-top:8px;border-top:1px solid #eee}

.tabs{display:flex;flex-wrap:wrap; flex-direction:row; justify-content:center;}
.tabs li{margin:0 20px 10px 0; color:#333; padding:10px 30px;  font-weight:500;border-bottom:none; border-radius:6px; background-color: #f5f5f5; line-height: 30px; font-size: 18px; cursor: pointer;}
.tabs li.on{ color: #fff; background:url(/images/btnbg1.png) center no-repeat; background-size:cover;}