@charset "utf-8";
@import url("./base.css");

@font-face {
    font-family: 'Poppins-Regular';
    src: url('../font/Poppins-Regular.eot');
    src:
    url('../font/Poppins-Regular.eot?#font-spider') format('embedded-opentype'),
    url('../font/Poppins-Regular.woff') format('woff'),
    url('../font/Poppins-Regular.ttf') format('truetype'),
    url('../font/Poppins-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins-Medium';
    src: url('../font/Poppins-Medium.eot');
    src:
    url('../font/Poppins-Medium.eot?#font-spider') format('embedded-opentype'),
    url('../font/Poppins-Medium.woff') format('woff'),
    url('../font/Poppins-Medium.ttf') format('truetype'),
    url('../font/Poppins-Medium.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* flex布局 */
.disflex{display: flex;}
.flexCenter{display: flex;justify-content: center;align-items: center;}
.flexBetween{display: flex;justify-content: space-between;align-items: center;}
.flexAlignCenter{display: flex;align-items: center;}
.flexBetweenTop{display: flex;justify-content: space-between;}

/*文字截断*/
.TXTovehid{display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.TXTovehid-two{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.TXTovehid-three{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}

/*transition*/
.tran200{-webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -ms-transition:all 0.2s linear; transition:all 0.2s linear;}
.tran300{-webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -ms-transition:all 0.3s linear; transition:all 0.3s linear;}
.tran400{-webkit-transition:all 0.4s linear; -moz-transition:all 0.4s linear; -ms-transition:all 0.4s linear; transition:all 0.4s linear;}
.tran500{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -ms-transition:all 0.5s linear; transition:all 0.5s linear;}
.tran1000{-webkit-transition:all 1s linear; -moz-transition:all 1s linear; -ms-transition:all 1s linear; transition:all 1s linear;}

/*动效*/
.scaleimg:hover .pic img,
.scaleimg:hover .pic em{ -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}

/* 背景图片 */
.bgStyle{position: absolute;left: 0;top:0;width: 100%;height: 100%;background-repeat: no-repeat;background-position: center;background-size: cover;}
.bgCover{background-position: center;background-repeat: no-repeat;background-size: cover;}
.bgContain{background-position: center;background-repeat: no-repeat;background-size: contain;}

/*黑色遮罩层*/
.black-layer{display: none;z-index: 10;position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(0,0,0,.6);}
.black-layer-header{z-index: 3;}
/*弹窗-视频*/
.popup-video{display: none;z-index: 11;position: fixed;left: 50%;top: 50%;width: 90%;max-width: 1000px;transform: translate(-50%,-50%);}
.popup-video .close-btn{z-index: 1;position: absolute;right: 0;top: 0;display: inline-flex;justify-content: center;align-items: center;width: 40px;height: 40px;background-color: #0F5ADE;font-size: 40px;color: #fff;cursor: pointer;}
.popup-video video{display: block;width: 100%;max-height: 600px;object-fit: contain;}

/* 安全线 */
.w1300{width: 90%;margin: 0 auto;max-width: 1300px;}

/* 边距 */
.padding80{padding: 80px 0;}

/* brief */
.brief{font-size: 56px;line-height: 1.14;}
.brief1{font-size: 24px;line-height: 1.33;}
.brief2{font-size: 40px;line-height: 1.35;}
.brief3{font-size: 18px;line-height: 1.33;}

/* 相对定位 */
.poHidden{position: relative;overflow: hidden;}

header{z-index: 9;}

/* html,body{scroll-behavior:smooth;} */

/* 浮动 */
.fl{float: left;}
.fr{float: right;}

/* 加粗 */
.bold{font-weight: bold;}

/*  滚动条 */
body *::-webkit-scrollbar{width: 4px;height: 4px;background: rgba(255,255,255,0) !important;border-radius: 2px;}
body *::-webkit-scrollbar-thumb{background: rgba(255,255,255,0.50) !important;border-radius: 2px;}

/* topic-page */
.topic-page{font-family: "Microsoft YaHei";}

/* 菜单 */
.topic-page .menu{position: fixed;left: 2%;top: 50%;transform: translateY(-50%);z-index: 9;opacity: 0;visibility: hidden;transition: 0.3s;}
.topic-page .menu.show{opacity: 1;visibility: visible;}
.topic-page .menu li{padding: 14px 0;}
.topic-page .menu li a{display: block;padding-left: 18px;position: relative;color: #FFFFFF;line-height: 1;font-weight: bold;}
.topic-page .menu li a::before{content: "";width: 9px;height: 9px;box-sizing: border-box;border: 1px solid currentColor;border-radius: 50%;position: absolute;left: 0;top: 3px;z-index: 2;}
.topic-page .menu li a span{display: block;}
.topic-page .menu li.active a span{background-image: linear-gradient(0deg, #0492FF 0%, #0495FF 0%, #02C2FF 24%, #00F8FF 38%, #FDFFFF 55%, #FFFFFF 100%);-webkit-background-clip: text;color: transparent;background-clip: text;}

/* banner */
.topic-page .banner img{width: 100%;}

/* main */
.topic-page .main{background: url(../images/topic_bg.jpg) no-repeat center top;background-size: cover;}

/* 标题 */
.topic-page .title{margin-bottom: 50px;flex-direction: column;}
.topic-page .title .num{font-size: 142px;background-image: linear-gradient(0deg, rgba(4,146,255,0) 0%, rgba(112,255,255,0.14) 55%, rgba(255,255,255,0.2) 100%);-webkit-background-clip: text;color: transparent;background-clip: text;font-family: "Poppins-Medium";line-height: 120px;height: 120px;font-weight: bold;}
.topic-page .title .ch{background-image: linear-gradient(0deg, #0492FF 0%, #0495FF 0%, #02C2FF 24%, #00F8FF 38%, #FDFFFF 55%, #FFFFFF 100%);-webkit-background-clip: text;color: transparent;background-clip: text;margin-top: -52px;}
.topic-page .title .en{color: #89D3E8;font-family: "Poppins-Regular";line-height: 20px;text-transform: uppercase;font-weight: normal;letter-spacing: 8px;}

/* 线条 */
.topic-page .line{background: url(../images/line.png) no-repeat center bottom;background-size: 100% auto;}

/* 分页器 */
.container .swiper-pagination{bottom: 30px;display: flex;align-items: center;justify-content: center;width: 100%;}
.container .swiper-pagination .swiper-pagination-bullet{width: 20px;height: 6px;background: #fff;opacity: 0.6;border-radius: 4px;margin: 0 3px;transition: 0.3s;}
.container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity: 1;width: 30px;}

/* 媒体中心 */
.topic-page .part1 .cont-left{width: 57%;}
.topic-page .part1 .cont-left .container{border-radius: 0 0 12px 12px;}
.topic-page .part1 .cont-left .wrap{display: block;border-radius: 12px;overflow: hidden;}
.topic-page .part1 .cont-left .pic{padding-bottom: 462px;z-index: 2;padding-bottom: 320px;}
.topic-page .part1 .cont-left .text{height: 248px;box-sizing: border-box;padding: 36px 40px 0;color: #FFFFFF;overflow: hidden;line-height: 33px;position: relative;height: 208px;padding: 28px 40px 0;}
.topic-page .part1 .cont-left .text::before{content: "";width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0.2;background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);border-radius: 0 0 12px 12px;}
.topic-page .part1 .cont-left .text .tit,
.topic-page .part1 .cont-left .text .desc{position: relative;z-index: 2;}
.topic-page .part1 .cont-left .text .tit{margin-bottom: 20px;margin-bottom: 12px;}
.topic-page .part1 .cont-right{width: 41.5%;box-sizing: border-box;height: 710px;position: relative;overflow: hidden;border-radius: 12px;overflow: hidden;height: 526px;}
.topic-page .part1 .cont-right::before{content: "";width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0.3;background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);border-radius: 0 0 12px 12px;}
.topic-page .part1 .cont-right ul{height: 100%;overflow: auto;position: relative;z-index: 2;}
.topic-page .part1 .cont-right ul li{position: relative;}
.topic-page .part1 .cont-right ul li::before{content: "";width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: rgba(255,255,255,0.10);box-shadow: 0 0 6px 0 rgba(0,0,0,0.02);opacity: 0;transition: 0.3s;}
.topic-page .part1 .cont-right ul li .wrap{position: relative;z-index: 2;padding: 18px 20px;color: #FFFFFF;line-height: 26px;}
.topic-page .part1 .cont-right ul li .wrap::before{content: "";width: calc(100% - 40px);height: 1px;position: absolute;left: 20px;bottom: 0;background: rgba(255,255,255,0.6);}
.topic-page .part1 .cont-right ul li:last-child .wrap::before{display: none;}
.topic-page .part1 .cont-right ul .pic{width: 234px;padding-bottom: 140px;flex-shrink: 0;margin-right:20px;border-radius: 12px;}
.topic-page .part1 .cont-right ul .date{line-height: 20px;margin-bottom: 12px;}
.topic-page .part1 .cont-right ul li:hover::before{opacity: 1;}


/* 相关视频 */
/*.topic-page .part2 .container{padding-bottom: 26px;}*/
.topic-page .part2 .container .swiper-pagination{bottom: 20px;}
.topic-page .part2  .icon{position: absolute;width: 30px;position: absolute;right: 20px;top: 20px;}
.topic-page .part2 .cont-left{width: 29.8%;}
.topic-page .part2 .cont-left li{margin-bottom: 20px;}
.topic-page .part2 .cont-left li:last-child{margin-bottom: 0;}
.topic-page .part2 .cont-left a{display: block;height: 0;padding-bottom: 180px;border-radius: 12px;}
.topic-page .part2 .cont-left a .tit{position: absolute;left: 0;bottom: 0;z-index: 2;width: 100%;box-sizing: border-box;padding: 0 20px;background: rgba(0,0,0,.3);color: #FFFFFF;line-height: 40px;display: none;}
.topic-page .part2 .cont-left a:hover .bgStyle{transform: scale(1.05);}
.topic-page .part2 .cont-right{width: 68.8%;position: relative;}
.topic-page .part2 .cont-right a{display: block;height: 0;padding-bottom: 580px;border-radius: 12px;padding-top: 0 !important;}
.topic-page .part2 .cont-right a .icon{width: 60px;}
.topic-page .part2 .cont-right a .text{position: absolute;left: 0;bottom: 0;z-index: 2;width: 100%;box-sizing: border-box;padding: 20px 20px 13px 37px;background: rgba(0,0,0,.3);color: #FFFFFF;line-height: 32px;display: none;}
.topic-page .part2 .cont-right a .text .tit{margin-bottom: 4px;}
.topic-page .part2 .cont-right a:hover .bgStyle{transform: scale(1.05);}

/* 精彩掠影 */
.topic-page .part3 .container{padding-bottom: 3px;}
.topic-page .part3 .container .swiper-pagination{bottom: 0;}
/*.topic-page .part3 ul{display: flex;flex-wrap: wrap;}
.topic-page .part3 ul li{width: 32%;margin: 0 2% 2% 0;}
.topic-page .part3 ul li:nth-child(3n){margin-right: 0;}*/
.topic-page .part3 ul li{margin-bottom: 20px;width: 100%;}
.topic-page .part3 ul li a{display: block;padding-bottom: 58.33%;border-radius: 12px;}
.topic-page .part3 ul li a img{position: absolute;left: 0;top: 0;width: 100%;height: 100%;object-fit: cover;}

/* 图片弹窗 */
.viewer-backdrop{background-color: rgba(0,0,0,.6);}

.custom-select .name:after{width: 0 !important;height: 0 !important;border: 4px solid transparent !important;border-top-color: #999 !important;transform: translateY(-25%) !important;}

/*笔记本1920*1080显示放大比例为125%，实际分辨率为1920/1.25=1536*/
@media screen and (max-width: 1920px){
}
	
/*笔记本1920*1080显示放大比例为125%，实际分辨率为1920/1.25=1536*/
@media screen and (max-width: 1550px){
/* brief */
.brief{font-size: 46px;}
.brief1{font-size: 20px;}
.brief2{font-size: 34px;}
.brief3{font-size: 15px;}

.w1300{width: 75% !important;}

.fz18{font-size: 16px;}
.fz22{font-size: 18px;}


}

/*中屏PC，分辨率1366*/
@media screen and (max-width: 1440px){

}

/*小屏PC，分辨率1280*/
@media screen and (max-width: 1300px){
/* brief */
.brief{font-size: 36px;}
.brief1{font-size: 16px;}
.brief2{font-size: 26px;}
.brief3{font-size: 12px;}

.w1300{width: 90% !important;}


	
}

/*pad横屏，分辨率1024*/
@media screen and (max-width: 1024px){
/* brief */
.brief{font-size: 24px;}
.brief1{font-size: 14px;}
.brief2{font-size: 18px;}
.brief3{font-size: 12px;}

}

/*phone和pad竖屏，分辨率820*/
@media screen and (max-width: 820px){

.padding80{padding: 30px 0;}

.fz28{font-size: 18px;}
.fz22{font-size: 16px;}
.fz18{font-size: 15px;}

.topic-page .menu{display: none;}

.container .swiper-pagination{bottom: 15px;}

.topic-page .title{margin-bottom: 20px;}
.topic-page .title .num{font-size: 66px;height: 56px;line-height: 56px;}
.topic-page .title .ch{margin-top: -20px;}
.topic-page .title .en{letter-spacing: 3px;}

.topic-page .part1 .content{flex-wrap: wrap;}
.topic-page .part1 .cont-left,
.topic-page .part1 .cont-right{width: 100%;}
.topic-page .part1 .cont-left{margin-bottom: 20px;}
.topic-page .part1 .cont-left .pic{padding-bottom: 62.4%;padding-bottom: 45%;}
.topic-page .part1 .cont-left .text{height: auto;padding: 20px 20px 40px;line-height: 24px;}
.topic-page .part1 .cont-left .text .tit{margin-bottom: 8px;}
.topic-page .part1 .cont-right{height: auto;}
.topic-page .part1 .cont-right ul li .wrap{line-height: 20px;padding: 12px;}
.topic-page .part1 .cont-right ul .pic{width: 146px;padding-bottom: 88px;margin-right: 12px;}
.topic-page .part1 .cont-right ul .date{margin-bottom: 2px;}

.topic-page .part2 .cont-left,
.topic-page .part2 .cont-right{width: 100%;}
.topic-page .part2 .cont-left li{margin-bottom: 12px !important;}
.topic-page .part2 .cont-left a,
.topic-page .part2 .cont-right a{padding-bottom: 46.4%;}
.topic-page .part2 .cont-right a .text{padding: 0 20px;}
.topic-page .part2 .cont-right a .text .desc{display: none;}
.topic-page .part2 .cont-right a .icon{width: 30px;}

.topic-page .part3 .container{padding-bottom: 20px;}
/*.topic-page .part3 ul{justify-content: space-between;}
.topic-page .part3 ul li{width: 49%;margin-right: 0;}*/
.topic-page .part3 ul li{margin-bottom: 8px;}
}

@media screen and (max-width: 768px){
.topic-page .part2 .cont-right,
.topic-page .part2 .cont-left li{padding-top: 0;}
}