@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;
}

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

/* flex布局 */
.disFlex{display: flex;}
.flexWrap{flex-wrap: wrap;}
.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;}

/*文字截断*/
.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.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}

/* 背景图片 */
.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;}
.padding100{padding: 100px 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;}
.poRe{position: relative;}

header{z-index: 9;}

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

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

/* topic-page */
.topic-page{font-family: "Montserrat-Regular";}

/* 菜单 */
.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{margin-top: 0 !important;}
.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 img{height: 236px;}


.border{position: absolute;left: 0;top: 0;width: 100%;height: 100%;box-sizing: border-box;border-radius: 22px;padding: 1px;
    background: linear-gradient(
      90deg, 
      rgba(255, 255, 255, 0.67) 0%, 
      rgba(255, 255, 255, 0) 14%, 
      rgba(255, 255, 255, 0.63) 41%, 
      rgba(255, 255, 255, 0) 60%, 
      #FFFFFF 81%, 
      rgba(255, 255, 255, 0.19) 100%
    );
    -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.bg{content: "";width: calc(100% - 2px);height: calc(100% - 2px);position: absolute;left: 1px;top: 1px;position: absolute;left: 1px;top: 1px;background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(24px);border-radius: 20px;} 

/* 按钮 */
.btnStyle{position: absolute;left: 0;bottom: 0;width: 100%;}
.btnStyle .btn{width: 50px;height: 50px;position: relative;margin: 0 20px;cursor: pointer;transition: 0.3s;}
.btnStyle .btn::before,
.btnStyle .btn::after{content: "";width: 100%;height: 100%;position: absolute;left: 0;top: 0;transition: 0.3s;}
.btnStyle .btn::before{background: url(../images/circle1.svg) no-repeat center;background-size: 100% 100%;}
.btnStyle .btn::after{background: url(../images/circle2.svg) no-repeat center;background-size: 100% 100%;opacity: 0;}
.btnStyle .btn img{z-index: 3;}
.btnStyle .btn:hover::before{opacity: 0;}
.btnStyle .btn:hover::after{opacity: 1;}
.btnStyle .btn.swiper-button-disabled{pointer-events: none;opacity: .5;}

/* 媒体中心 */
.part1 .content{justify-content: space-between;}
.part1 .contLeft{width: 53.8%;box-sizing: border-box;padding: 24px 24px 38px;}
.part1 .contLeft .container{padding-bottom: 70px;}
.part1 .contLeft .pic{padding-bottom: 420px;border-radius: 16px;}
.part1 .contLeft .tit{padding: 10px 0 0;line-height: 70px;}
.part1 .contLeft .desc{line-height: 32px;height: 64px;}
.part1 .contLeft a{color: #fff;}
.part1 .contLeft a:hover .pic .bgStyle{transform: scale(1.1);}
.part1 .contLeft .swiper-pagination{bottom: 0;}
.part1 .contLeft .swiper-pagination .swiper-pagination-bullet{width: 30px;height: 30px;margin: 0 4px;position: relative;background: none;opacity: 0.35;transition: 0.3s;}
.part1 .contLeft .swiper-pagination .swiper-pagination-bullet::before{content: "";width: 10px;height: 10px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);border-radius: 50%;}
.part1 .contLeft .swiper-pagination .swiper-pagination-bullet::after{content: "";width: 100%;height: 100%;position: absolute;left: 0;top: 0;box-sizing: border-box;border: 1px solid #FFFFFF;border-radius: 50%;transform: scale(0.5);opacity: 0;transition: 0.3s;}
.part1 .contLeft .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity: 1;}
.part1 .contLeft .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after{transform: scale(1);opacity: 1;}
.part1 .contRight{width: 44.3%;}
.part1 .contRight li{margin-top: 24px;}
.part1 .contRight li:first-child{margin-top: 0;}
.part1 .contRight .wrap{padding: 12px 30px 12px 12px;}
.part1 .contRight .pic{width: 196px;padding-bottom: 132px;flex-shrink: 0;margin-right: 24px;border-radius: 12px;}
.part1 .contRight .text{flex: 1;overflow: hidden;color: #fff;}
.part1 .contRight .date{font-family: "Poppins-Regular";}
.part1 .contRight .date img{margin-right: 8px;}
.part1 .contRight .tit{line-height: 26px;margin-top: 10px;}
.part1 .contRight .wrap:hover .pic .bgStyle{transform: scale(1.1);}

.part2 .title{margin-bottom: 0;}
.part2 .container{/*padding: 20px 0 150px;margin-top: -20px;*/}
.part2 .container .swiper-slide{width: 672px;height: 380px;border-radius: 16px;overflow: hidden;}
.part2 .container .wrap{/*transform: scale(0.81);*/display: block;opacity: 0;}
.part2 .container .wrap .pic{height: 0;padding-bottom: 380px;border-radius: 16px;}
.part2 .container .wrap .pic .bgStyle::before{content: "";width: 100%;height: 100px;position: absolute;left: 0;bottom: 0;background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);opacity: 0;transition: 0.3s;}
.part2 .container .wrap .icon{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -70%);}
.part2 .container .wrap .text{position: absolute;left: 0;bottom: 18px;width: 100%;box-sizing: border-box;padding: 0 30px;color: #fff;line-height: 24px;}
.part2 .container .wrap .text .tit{line-height: 30px;margin-bottom: 8px;}
/*.part2 .container .wrap .text .tit,*/
/*.part2 .container .wrap .text .desc{transform: translateY(30px);opacity: 0;}*/
.part2 .container .swiper-slide-active .wrap{transform: scale(1);box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.24);}
.part2 .container .swiper-slide-prev .wrap,
.part2 .container .swiper-slide-active .wrap,
.part2 .container .swiper-slide-next .wrap{opacity: 1;}
.part2 .container .swiper-slide-active .wrap .text .tit,
.part2 .container .swiper-slide-active .wrap .text .desc{transform: translateY(0);opacity: 1;}
.part2 .container .swiper-slide-active .wrap .bgStyle::before{opacity: 1;}
.part2 .container .swiper-slide-active .wrap .text .tit{transition-delay: 0.3s;}
.part2 .container .swiper-slide-active .wrap .text .desc{transition-delay: 0.5s;}
.part2 .container.swiper-container-horizontal>.swiper-scrollbar{bottom: 100px;height: 2px;background: #C7CBD4;}
.part2 .container.swiper-container-horizontal>.swiper-scrollbar .swiper-scrollbar-drag{background-image: linear-gradient(90deg, #FFC300 0%, #FCEB91 51%, #FFFFFF 100%);}
.part2 .container .wrap:hover .pic .bgStyle{transform: scale(1.1);}




.part3 .container{padding-bottom: 100px;}
.part3 .container .wrap{display: block;height: 0;padding-bottom: 59.52%;border-radius: 12px;}
.part3 .container .wrap img{position: absolute;left: 0;top: 0;width: 100%;height: 100%;object-fit: cover;}
.part3 .container .wrap:hover img{transform: scale(1.1);}

/* 视频弹窗 */
/* 去掉 layer 外壳阴影、边框 */
.no-shadow {box-shadow: none !important;-webkit-box-shadow: none !important;border: none !important;}

/* 去掉 iOS 视频控件自带阴影 */
.no-shadow video {-webkit-appearance: none !important;box-shadow: none !important;}
/* ② 把视频变成“块级+等比缩放” */
.m-video-wrap {position: relative;width: 100%;height: 0;padding-bottom: 56.25%;   /* 16:9 固定比例 */background: #000;}
.m-video-wrap video {position: absolute;left: 0;top: 0;width: 100%;height: 100%;object-fit: contain;      /* 防止拉伸变形 */}

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

/*笔记本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: 70%;}

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



}

/*中屏PC，分辨率1366*/
@media screen and (max-width: 1480px){
.topic-page .title img{height: 180px;}
.part2 .container .swiper-slide{width: 580px;height: 328px;}
.part2 .container .wrap .pic{padding-bottom: 328px;}
/*.part2 .container .wrap{transform: scale(0.61);}*/

}

/*小屏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%;}


	
}

/*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;}

.padding100{padding: 50px 0;}
.topic-page .title img{height: 120px;}

.part1 .content{flex-wrap: wrap;}
.part1 .contLeft,
.part1 .contRight{width: 100%;}
.part1 .contRight li,
.part1 .contRight li:first-child{margin-top: 20px;}
.part1 .contRight .wrap{padding: 12px;}
.part1 .contRight .pic{width: 148px;padding-bottom: 100px;margin-right: 12px;}
.part1 .contRight .tit{margin-top: 5px;}
.part1 .contLeft{padding: 15px 15px 20px;}
.part1 .contLeft .pic{padding-bottom: 64.4%;}
.part1 .contLeft .tit{line-height: 40px;}
.part1 .contLeft .container{padding-bottom: 40px;}
.part1 .contLeft .swiper-pagination .swiper-pagination-bullet{width: 22px;height: 22px;}
.part1 .contLeft .swiper-pagination .swiper-pagination-bullet::befor{width: 8px;height: 8px;}


/*.part2 .container{padding-bottom: 80px;}*/
.part2 .container .swiper-slide{width: 100%;height: auto;}
.part2 .container .wrap .pic{padding-bottom: 56.54%;}
.part2 .container .wrap .icon{height: 32px;}
.part2 .container .wrap .text{padding: 0 15px;bottom: 10px;}
.part2 .container .wrap .text .tit{margin-bottom: 0;}
.part2 .container.swiper-container-horizontal>.swiper-scrollbar{bottom: 55px;}


.btnStyle .btn{width: 40px;height: 40px;margin: 0 10px;}
.btnStyle .btn img{height: 12px;}

.part3 .container{padding-bottom: 60px;}
}

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

.padding80{padding: 30px 0;}

.fz24{font-size: 17px;}
.fz22{font-size: 16px;}
.fz18{font-size: 15px;}

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



}