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

html{scroll-padding: 100px;}

/*header*/
header{z-index: 3;position: sticky;left: 0;top: 0;width: 100%;height: 80px;background-color: #fff;box-shadow: 0 4px 10px rgba(0,0,0,.1);}
/*logo*/
header .logo{position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
header .logo img{display: block;max-height: 52px;}
/*导航-水平方向*/
header .nav-box-horizontal{position: absolute;right: 0;top: 50%;transform: translateY(-50%);font-size: 0;white-space: nowrap;}
header .nav-box-horizontal li{position: relative;display: inline-block;margin: 0 23px;font-size: 16px;line-height: 80px;transition: 0.3s;}
header .nav-box-horizontal li:after{content: "";position: absolute;left: 0;bottom: 20px;width: 100%;height: 2px;background-color: #009adc;transform: scaleX(0);transition: 0.3s;}
header .nav-box-horizontal li:first-child{margin-left: 0;}
header .nav-box-horizontal li:last-child{margin-right: 0;}
header .nav-box-horizontal li a{display: block;}
header .nav-box-horizontal li.on:after{transform: scaleX(1);}
header .nav-box-horizontal li.on a{color: #009adc;}

/*专题页*/
.topic-page{position: relative;background: #F1F4FA url(../images/topic_page_bg_Saudi.jpg) center top;background-size: cover;overflow: hidden;}
/*标题*/
.topic-page .common-title{display: flex;justify-content: center;margin-bottom: 1.5em;font-weight: bold;}
.topic-page .common-title .name{position: relative;}
.topic-page .common-title .name::before{content: '';position: absolute;left: -48px;top: .4em;width: 4px;height: 4px;color: #6C95F1;background-color: currentColor;box-shadow: 8px 0 currentColor, 32px 0 currentColor, 8px 8px currentColor, 16px 8px currentColor, 24px 8px currentColor, 32px 8px currentColor, 0 16px currentColor, 16px 16px currentColor, 24px 16px currentColor;opacity: .3;}
.topic-page .common-title .name::after{content: '';position: absolute;right: -16px;top: .4em;width: 4px;height: 4px;color: #6C95F1;background-color: currentColor;box-shadow: 0 0 currentColor, 16px 0 currentColor, 24px 0 currentColor, 32px 0 currentColor, 0 8px currentColor, 8px 8px currentColor, 16px 8px currentColor, 24px 8px currentColor, 10px 16px currentColor, 18px 16px currentColor;opacity: .3;}
/*布局*/
.topic-page .part1{padding: 80px 0;}
.topic-page .part2{padding: 80px 0;background: #C9E2F8 url(../images/related_news_part_bg.jpg) center no-repeat;background-size: cover;}
.topic-page .part3{padding: 100px 0;}

/*邀请函*/
.invitation-box{z-index: 1;position: relative;padding: 0 40px 80px;}
.invitation-box::before{content: '';z-index: -1;position: absolute;left: 0;right: 0;top: 110px;bottom: 0;background-color: #DBEFFF;pointer-events: none;}
.invitation-box .txt{padding: 60px 80px;background-color: #fff;line-height: 2;text-align: justify;clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 50px 100%, 0 calc(100% - 50px));}
.invitation-box .txt p{margin-bottom: 1em;}
.invitation-box .txt p:last-child{margin-top: 2em;text-align: right;font-weight: bold;}

/*相关报道*/
.related-news-swiper{position: relative;padding-bottom: 50px;overflow: hidden;}
.related-news-swiper .swiper-pagination{z-index: 1;bottom: 0;font-size: 0;}
.related-news-swiper .swiper-pagination .swiper-pagination-bullet{width: 10px;height: 10px;margin: 0 5px;background-color: #009ADC;border-radius: 4px;opacity: .4;transition: .3s;}
.related-news-swiper .swiper-pagination .swiper-pagination-bullet-active{opacity: 1;}
/*相关报道列表*/
.related-news-list{display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}
.related-news-list li{width: 45%;margin: 15px 2.5%;}
.related-news-list li a{display: flex;align-items: center;flex-wrap: wrap;background-color: #fff;}
.related-news-list li a .pic{flex: 0 0 200px;overflow: hidden;}
.related-news-list li a .pic em{display: block;width: 105%;padding-top: 70%;background-position: center;background-size: cover;background-repeat: no-repeat;transition: .5s;}
.related-news-list li a .info{flex: 1;overflow: hidden;padding: 0 20px;}
.related-news-list li a .info .tit{line-height: 1.6;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;transition: .3s;}
.related-news-list li a .info .date{margin-top: .8em;color: #666;}
.related-news-list li a:hover .pic em{transform: translateX(-4.5%);}
.related-news-list li a:hover .info .tit{color: #009ADC;}

/*展区导览*/
.exhibition-area-box{position: relative;margin-top: 60px;}
.exhibition-area-box .map-phone{display: none;}
.exhibition-area-box .list li{z-index: 1;position: absolute;padding: 0 1.5em;background-image: linear-gradient(90deg,#6C95F1,#9FE6FF);border-radius: 18px;line-height: 36px;font-weight: bold;color: #fff;}
.exhibition-area-box .list li:before{content: "";z-index: -1;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-image: linear-gradient(90deg,#6C95F1,#9FE6FF);border-radius: 18px;animation: liAni 2s linear infinite;}
.exhibition-area-box .list li:after{content: "";z-index: -1;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-image: linear-gradient(90deg,#6C95F1,#9FE6FF);border-radius: 18px;animation: liAni 2s 1s linear infinite;}
.exhibition-area-box .list li .name{white-space: nowrap;}
.exhibition-area-box .list li .dot{z-index: 1;position: absolute;width: 8px;height: 8px;background-color: #6C95F1;border-radius: 50%;}
.exhibition-area-box .list li .dot:before{content: "";z-index: -1;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: #6C95F1;border-radius: 50%;animation: dotAni 2s linear infinite;}
.exhibition-area-box .list li .dot:after{content: "";z-index: -1;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: #6C95F1;border-radius: 50%;animation: dotAni 2s 1s linear infinite;}
.exhibition-area-box .list li .svg-line{position: absolute;fill: transparent;stroke-width: 2;stroke: #6C95F1;stroke-linecap: round;stroke-dasharray: 6;stroke-dashoffset: 0;animation: svgAni 10s linear infinite;}
.exhibition-area-box .list li:nth-child(1){left: 8.77%;top: 17.60%;}
.exhibition-area-box .list li:nth-child(1) .dot{left: 248px;top: 190px;}
.exhibition-area-box .list li:nth-child(1) .svg-line{left: 100%;top: 16px;width: 140px;height: 180px;}
.exhibition-area-box .list li:nth-child(2){left: 39.47%;top: 3.46%;}
.exhibition-area-box .list li:nth-child(2) .dot{left: 174px;top: 290px;}
.exhibition-area-box .list li:nth-child(2) .svg-line{left: 100%;top: 16px;width: 40px;height: 280px;}
.exhibition-area-box .list li:nth-child(3){left: 83.07%;top: 1.35%;}
.exhibition-area-box .list li:nth-child(3) .dot{left: -44px;top: 110px;}
.exhibition-area-box .list li:nth-child(3) .svg-line{right: 100%;top: 16px;width: 42px;height: 100px;}
.exhibition-area-box .list li:nth-child(4){left: 87.89%;top: 33.08%;}
.exhibition-area-box .list li:nth-child(4) .dot{left: -148px;top: 70px;}
.exhibition-area-box .list li:nth-child(4) .svg-line{right: 100%;top: 16px;width: 146px;height: 60px;}
@keyframes liAni{
	100%{transform: scale(1.6,2.4);opacity: 0;}
}
@keyframes dotAni{
	100%{transform: scale(4);opacity: 0;}
}
@keyframes svgAni{
	to{stroke-dashoffset: 200;}
}


/*笔记本1920*1080显示放大比例为125%，实际分辨率为1920/1.25=1536*/
@media screen and (max-width: 1550px){
	
}

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

/*小屏PC，分辨率1280*/
@media screen and (max-width: 1300px){
	
}

/*pad横屏，分辨率1024*/
@media screen and (max-width: 1024px){
    /*header*/
	header{height: 50px;}
	header .w1140{width: 96%;}
	/*logo*/
	header .logo img{max-height: 24px;}
	/*导航-水平方向*/
	header .nav-box-horizontal li{margin: 0 4px;font-size: 12px;line-height: 50px;}
	header .nav-box-horizontal li:after{bottom: 10px;}
	header .nav-box-horizontal li:last-child{display: inline-block;}
    
	/*布局*/
	.topic-page .part1{padding: 40px 0 0;}
	.topic-page .part2{padding: 40px 0;}

	/*邀请函*/
	.invitation-box{padding: 0 15px 30px;}
	.invitation-box::before{top: 40px;}
	.invitation-box .txt{padding: 1.2em 1.5em 2em;clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px));}
	.invitation-box .txt p:last-child{margin-top: 1.5em;}
	
	/*相关报道列表*/
	.related-news-list li{width: 100%;margin: 10px 0;}
	.related-news-list li a .pic{flex: 0 0 160px;}
	.related-news-list li a .info{padding: 0 15px;}

	/*展区导览*/
	.exhibition-area-box{margin-top: 30px;}
	.exhibition-area-box .map-pc{display: none;}
	.exhibition-area-box .map-phone{display: block;}
	.exhibition-area-box .list{display: none;}
}

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