@charset "utf-8";
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html,body{
	width: 100%;
	height: 100%;
}
body{
	font-family: "microsoft yahei";
	font-size: 18px;
	color: #333;
}
img{
	display: block;
	border: 0;
	width: 100%;
	height: 100%;
}
ul, li{
	list-style: none;
}
a{
	text-decoration: none;
	color: #333;
}

#main{
	width: 100%;
	height: 100%;
}
.cont{
	width: auto;
	height: 100%;
	overflow: hidden;
	position: relative;
}
.content{
	width: 100%;
	height: 700px;
	position: absolute;
	top: 50%;
	margin-top: -350px;
	left: 0;
	perspective:500px;
}
.col{
	height: 100%;
	float: left;
	background-size: 100%;
	background-repeat: no-repeat;
	position: relative;
	background-position: left center;
}
.title{
	width: 103px;
	height: 319px;
	position: absolute;
}
.title a{
	display: block;
	width: 29px;
	height: 112px;
	position: absolute;
	top: 276px;
	left: 60px;
	background: url(../../images/zt_dah/more.png) no-repeat;
	cursor: pointer;
}

/* 第一部分 */
.p1{
	width: 1920px;
	background-image: url(../../images/zt_dah/bg01.jpg);
}

.logo{
	width: 160px;
	height: 36px;
	position: absolute;
	left: 20px;
	top: 20px;
	display: block;
}
.xuehua{
	width: 1412px;
	height: 700px;
	background: url(../../images/zt_dah/xuehua.png) no-repeat;
	position: absolute;
	left: 0;
	top: -700px;
	animation: xuhua 20s linear infinite;
}

@keyframes xuhua{
	from{
		top: -700px;
		opacity: 1;
	}
	to{ 
		top:700px;
		opacity: 0;
	}
}

.dah_logo{
	width: 704px;
	height: 408px;
	background: url(../../images/zt_dah/dah_logo.png) no-repeat;
	position: absolute;
	left: 248px;
	animation: dah_logo 1s forwards linear;
}
@keyframes dah_logo{
	from{transform: scale(0.5);}
	to{transform: scale(1);}
}

.go{
	width: 99px;
	height: 120px;
	position: absolute;
	bottom: 4px;
	left: 552px;
	background: url(../../images/zt_dah/chufa.png) no-repeat;
	animation: go 0.2s 1s forwards ease-in;
	transform-origin: 0% 100%;
	opacity: 0;
}

@keyframes go{
	from{transform: rotateX(90deg);
	opacity: 1;}
	to{transform: rotateX(0);
	opacity: 1;}
}

.go img{
	width: 31px;
	height: 33px;
	position: absolute;
	left: 10px;
	top: 16px;
	animation: go_arr 3s linear infinite;
	animation-direction:alternate;
}

@keyframes go_arr {
	from{ left: 20px;}
	to{ left: 46px;}
}
.tips{
	font-size: 16px;
	color: #0f61b5;
	position: absolute;
	bottom: 10px;
	left: 527px;
	opacity: 0;
	animation: tips 1s 2s forwards;
}
@keyframes tips{
	from{opacity: 0;}
	to{opacity: 1;}
}
.djs{
	width: 280px;
	height: auto;
	overflow: hidden;
	position: absolute;
	left: 456px;
	bottom: 26px;
}
.djs > p{
	font-size: 28px;
	font-weight: bold;
	color: #0f61b5;
}
.djs_time{
	width: 100%;
	height: auto;
	overflow: hidden;
	text-align: center;
	margin-top: 10px;
	margin-left: -15px;
}
.djs_time_i{
	display: inline-block;
	margin: 0 6px;
}
.djs_time_i span{
	background: #0F61B5;
	padding: 10px 6px;
	color: #fff;
	font-weight: bold;
	display: block;
}
.djs_time_i p{
	font-size: 18px;
	color: #333333;
}
.ydy1{
	width: 271px;
	height: 331px;
	background: url(../../images/zt_dah/ydy1.png) no-repeat;
	position: absolute;
	top: -80px;
	right: 226px;
	transform: scale(0);
	animation:  ydy1 0.5s 2.6s forwards ease-in;
}
@keyframes ydy1{
	from{
		transform: scale(0);
		top: -80px;
	}
	to{
		transform: scale(1);
		top: 0;
	}
}

/* 冬奥进行时 */
.dajxs{
	width: 2336px;
	background-image: url(../../images/zt_dah/bg02.jpg);
}
.title1{
	left: 116px;
	top: 0;
	background: url(../../images/zt_dah/title01.png) no-repeat;
}
.dajxs_main{
	width: 1290px;
	height: auto;
	overflow: hidden;
	margin-left: 340px;
	margin-top: 125px;
}
.dajxs_main_l{
	width: 670px;
	height: auto;
	overflow: hidden;
	float: left;
}
.dajxs_main_l a{
	display: block;
	float: left;
	width: 320px;
	height: 204px;
	overflow: hidden;
	position: relative;
	margin-left: 30px;
	margin-bottom: 30px;
}
.dajxs_main_l a:nth-of-type(odd){
	margin-left: 0;
}
.dajxs_main_l a:nth-of-type(3),
.dajxs_main_l a:nth-of-type(4){
	margin-bottom: 0;
}
.dajxs_main_l a span{
	width: 100%;
	height: 100%;
	display: block;
}
.dajxs_main_r{
	width: 566px;
	height: auto;
	overflow: hidden;
	float: left;
	margin-left: 50px;
	background: #e5f5ff;
	padding: 40px;
}
.dajxs_main_r a{
	font-size: 18px;
	line-height: 27px;
	color: #333;
	display: block;
	width: 100%;
	margin-bottom: 28px;
}
.dajxs_main_r a:hover{
	color: #0F61B5;
}
.dajxs_main_r a:last-of-type{
	margin-bottom: 0;
}
.guodu{
	width: 1500px;
	height: 960px;
	background: url(../../images/zt_dah/gd1.png) no-repeat;
	position: absolute;
	left: 3700px;
	top: 0;
	z-index: 10;
}

/* 冬奥星风采 */
.dhxfc{
	width: 3659px;
	background-image: url(../../images/zt_dah/bg03.jpg);
}
.dhxfc::after{
	content: "";
	width: 395px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: url(../../images/zt_dah/bg04_1.png);
	background-position: right center;
	background-size: 100%;
}
.title2{
	background: url(../../images/zt_dah/title02.png);
	left: 1020px;
	top: 0;
	z-index: 100;
}
.ydy2{
	width: 353px;
	height: 287px;
	background: url(../../images/zt_dah/ydy2.png)no-repeat;
	position: absolute;
	left: 500px;
	top: 146px;
}
.xfc_news{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
}
.xfc_news_item{
	width: 120px;
	height: 146px;
	display: block;
	position: absolute;
	background: url(../../images/zt_dah/jxs_bg.png);
}
.xfc_news_item:nth-of-type(1){
	left: 1085px;
	top: 507px;
}
.xfc_news_item:nth-of-type(2){
	left: 1459px;
	top: 430px;
}
.xfc_news_item:nth-of-type(3){
	left: 1484px;
	top: 175px;
}
.xfc_news_item:nth-of-type(4){
	left: 1725px;
	top: 4px;
}
.xfc_news_item:nth-of-type(5){
	left: 2062px;
	top: 150px;
}
.xfc_news_item:nth-of-type(6){
	left: 2023px;
	top: 378px;
}
.xfc_news_item:nth-of-type(7){
	left: 2527px;
	top: 288px;
}
.xfc_news_item:nth-of-type(8){
	left: 2514px;
	top: 4px;
}
.xfc_news_item span{
	display: block;
	width: 112px;
	height: 112px;
	border-radius: 50%;
	overflow: hidden;
	margin-top: 4px;
	margin-left: 4px;
}
.xfc_news_txt{
	width: 324px;
	height: 110px;
	background: #E5F5FF;
	position: absolute;
	right: 42px;
	top: 11px;
	z-index: -1;
	padding: 10px;
	display: flex;
	align-items: center;
	display: none;
}
.xfc_news_txt p{
	font-size: 18px;
	line-height: 27px;
	color: #333;
	width: 216px;
	white-space: pre-line;
}

/* 冬奥群像 */
.title3{
	background: url(../../images/zt_dah/title03.png);
	left: 3100px;
	top: 310px;
	z-index: 100;
}
.qx_item{
	width: 103px;
	height: 74px;
	position: absolute;
	background: url(../../images/zt_dah/xuedui.png);
	display: block;
}
.qx_item:nth-of-type(1){
	left: 1160px;
	top: 382px;
}
.qx_item:nth-of-type(2){
	left: 1333px;
	top: 624px;
}
.qx_item:nth-of-type(3){
	left: 1637px;
	top: 525px;
}
.qx_item:nth-of-type(4){
	left: 1669px;
	top: 300px;
}
.qx_item:nth-of-type(5){
	left: 1994px;
	top: 618px;
}
.qx_item:nth-of-type(6){
	left: 2326px;
	top: 537px;
}
.qx_item:nth-of-type(7){
	left: 2517px;
	top: 616px;
}
.qx_item:nth-of-type(8){
	left: 2650px;
	top: 500px;
}
.qx_item:nth-of-type(9){
	left: 2700px;
	top: 214px;
}
.qx_item:nth-of-type(10){
	left: 2950px;
	top: 210px;
}
.qx_item:nth-of-type(11){
	left: 2935px;
	top: 444px;
}
.qx_item:nth-of-type(12){
	left: 2766px;
	top: 380px;
}
.qx_msg{
	display: block;
	width: 160px;
	height: 96px;
	background: url(../../images/zt_dah/qx_msg.png);
	position: absolute;
	left: -30px;
	top: -80px;
	display: none;
}
.qx_msg span{
	display: block;
	width: 80px;
	height: 80px;
	background: #fff;
	border: 4px solid #f1b655;
	float: left;
}
.qx_msg_r{
	width: 80px;
	height: 80px;
	float: left;
	padding: 8px 4px;
}
.qx_msg_r p{
	font-size: 18px;
	color: #fff;
	white-space: nowrap;
}
.qx_ys{
	font-weight: bold;
}
.qx_del{
	margin-top: 6px;
}
.cz{
	width: 37px;
	height: 44px;
	position: absolute;
	display: block;
	left: 40px;
	top: 30px;
	background: url(../../images/zt_dah/chanzi.png);
}
.qx_item:hover .cz{
	animation: cz 0.5s linear infinite;
	animation-direction:alternate;
}

@keyframes cz{
	from{transform: rotate(-10deg);}
	to{transform: rotate(0deg);}
}


.lujing {
	width: 100%;
	height: 100%;
	position: relative;
	margin-left: 160px;
	margin-top: 57px;
}

.lujing svg {
	width: 100%;
	height: 100%;
}

.lujing svg path {
	stroke: black;
	fill: none;
	stroke-width: 0;
}
@keyframes svg-path-animation {
	from {
		offset-distance: 100%;
	}
	to {
		offset-distance: 0%;
	}
}
.ydy3{
	position: absolute;
	top: -40px;
	left: 0;
	width: 104px;
	height: 89px;
	background: url(../../images/zt_dah/ydy3.png);
	offset-path: path("M3429,333S2889.37-37.3,2470.7,121.494C2308.47,183.027,2285.97,480.548,2022,412c-160.42-41.66-155.61-371.933-374-376-241.4-4.5-82.39,195.473-320,425-144.86,139.935-511.867,38.56-539-192C738.319-161.661,337.719,55.913,0,73");
	offset-distance: 100%;
	transform: rotate(180deg);
	transition: all 1s;
}
	
.an_ydy3{
	animation: svg-path-animation 10s linear;
}
.click_tips{
	width: 209px;
	height: 22px;
	position: absolute;
	background: url(../../images/zt_dah/click_tips.png);
	right: 666px;
	bottom: 80px;
}


/* 海外看 */
.hwk{
	width: 1808px;
	background-image: url(../../images/zt_dah/bg04.jpg);
}
.title4{
	width: 111px;
	height: 327px;
	background: url(../../images/zt_dah/title04.png);
	left: 230px;
	top: 50px;
}
.title4 a{
	top: 326px;
}
.hwk_news{
	width: 960px;
	height: auto;
	overflow: hidden;
	margin-left: 466px;
	margin-top: 50px;
}
.hwk_news_t{
	width: 100%;
	height: auto;
	overflow: hidden;
}
.hwk_news_t_item{
	width: 300px;
	height: 292px;
	float: left;
	margin-right: 30px;
	border-bottom: 2px solid #f7c951;
	display: block;
}
.hwk_news_t_item:last-of-type{
	margin-right: 0;
}
.hwk_news_t_img{
	width: 100%;
	height: 192px;
	position: relative;
}
.hwk_news_t_img span{
	position: absolute;
	display: block;
	width: 60px;
	height: 60px;
	background: url(../../images/zt_dah/play.png);
	right: 10px;
	bottom: 10px;
	transition: all 1s;
}
.hwk_news_t_item:hover span{
	opacity: 0;
}
.hwk_news_t_item p{
	font-size: 18px;
	color: #333333;
	line-height: 27px;
	margin-top: 6px;
}
.hwk_news_t_item i{
	display: block;
	width: 27px;
	height: 9px;
	background: url(../../images/zt_dah/arrow.png);
	margin: 0 auto;
	margin-top: 18px;
}
.hwk_news_t_item:hover p{
	color: #0F61B5;
}

.hwk_news_b{
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-top: 50px;
}
.hwk_news_b a{
	font-size: 18px;
	color: #333333;
	display: block;
	width: 48%;
	float: left;
	padding: 16px 0;
}
.hwk_news_b a:nth-child(even){
	float: right;
}
.hwk_news_b a::before{
	content: "";
	width: 10px;
	height: 10px;
	display: block;
	background: #0F61B5;
	float: left;
	margin-top: 8px;
	margin-right: 10px;
}
.hwk_news_b a:hover{
	color: #0F61B5;
}
.foot{
	width: 45px;
	height: 447px;
	position: absolute;
	right: 120px;
	top: 127px;
	background: url(../../images/zt_dah/foot.png);
}

/********************************/
/********************************/
/********************************/
/********************************/
/********************************/
/********************************/
/********************************/
/********************************/

/* 竖屏 */
@media screen and (orientation:portrait ) {
	body{
		position: relative;
		overflow: hidden;
	}
	#main{
		position: absolute;
		width: 100vh;
		height: 100vw;
		top: 0;
		left: 100vw;
		transform: rotate(90deg);
		transform-origin: 0% 0%;
		overflow-y: auto;
		overflow-x: auto;
		border: 1px solid transparent;
	}
	.xfc_news_txt{
		display: block;
	}
	.dajxs_main_l_item_txt{
		width: 100%;
		height: 100px;
		background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
		position: absolute;
		left: 0;
		bottom: 0px;
	}
	.dajxs_main_l_item_txt p{
		font-size: 18px;
		color: #fff;
		line-height: 27px;
		text-align: left;
		position: absolute;
		left: 0;
		bottom: 6px;
		padding: 0 10px;
	}
}

/* 横屏 */
@media screen and (orientation:landscape){
	#main{
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	
	/* 冬奥进行时 */
	.dajxs_main_l_item_txt{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.6);
		position: absolute;
		left: 0;
		top: 204px;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: top 1s;
	}
	.dajxs_main_l a:nth-of-type(3) .dajxs_main_l_item_txt,
	.dajxs_main_l a:nth-of-type(4) .dajxs_main_l_item_txt{
		top: -204px;
	}
	.dajxs_main_l_item_txt p{
		font-size: 18px;
		color: #fff;
		line-height: 27px;
		text-align: center;
		white-space: pre-wrap;
	}
	.dajxs_main_l a:hover .dajxs_main_l_item_txt{
		top: 0;
	}
}