body{
	background-color: #FFEFEB;
}
.sec1{
	padding: 14.6% 0 9%;
	background: linear-gradient(to bottom, #FF3129 20% ,#FFEFEB);
}
.sec1 .inner{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-direction: row;
}
.sec1 .left-part{
	width: 71.6%;
	border: 1px solid rgba(255,255,255,0.4);
	background-color: rgba(255,255,255,0.9);
	border-radius: 0.9375em;
}
.sec1 .left-part,.sec1 .right-part{
	transform: translate(0,20vh);
	opacity: 0;
	transition: transform 0.75s,opacity 0.75s;
}
.sec1 .left-part.actived,.sec1 .right-part.actived{
	transform: translate(0,0);
	opacity: 1;
}
.sec1 .left-part .title{
	padding: 3.5em 2.25em 2.75em;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-direction: row;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.sec1 .left-part .title h1{
	font-size: 2.375em;
	color: #000;
	margin-bottom: 1em;
	line-height: normal;
	margin-top: -0.1em;
}
.sec1 .left-part .title p{
	border: 1px solid #E8E8E8;
	background-color: #fff;
	display: inline-block;
	font-size: 0.875em;
	color: #606060;
	padding: 0.57em 1.7em;
	border-radius: 1em;
}
.sec1 .left-part .title p span{
	color: #000;
	margin-right: 0.5em;
}
.sec1 .left-part .title .btn{
	flex-shrink: 0;
	border-radius: 0.625em;
	padding: 0.5em 0.625em;
	background-color: #fff;
	fill: var(--theme-color);
}
.sec1 .left-part .title .btn svg{
	width: 2em;
}
.sec1 .left-part .content{
	color: #606060;
	line-height: 1.78;
	padding: 3em 3em 4.75em;
}
.sec1 .left-part .content *{
	font-size: 1.125em;
	max-width: 100%;
	color: inherit;
}
.sec1 .left-part .content em{
	font-style: normal;
}
.sec1 .left-part .relative-box{
	border-top: 1px solid rgba(0,0,0,0.1);
	border-bottom: 1px solid rgba(0,0,0,0.1);
	background-color: #fff;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-direction: row;
	padding: 2.75em;
}
.sec1 .left-part .relative-box a{
	color: #606060;
	font-weight: 500;
	max-width: 30%;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-direction: row;
	line-height: normal;
}
.sec1 .left-part .relative-box a span.tag{
	color: var(--theme-color);
	margin-right: 2em;
	flex-shrink: 0;
}
.sec1 .left-part .relative-box a::after{
	content: "\e908";
	font-family: "fontello";
	margin-left: 1em;
	flex-shrink: 0;
}
.sec1 .left-part .btn-box{
	padding: 11.25em 2.75em 4.625em;
}
.sec1 .left-part .btn-box .btn{
	background-color: var(--theme-color);
	border-radius: 0.625em;
	float: right;
	margin-left: 0.875em;
	display: block;
	padding: 0.5em 0.625em;
	position: relative;
}
.sec1 .left-part .btn-box .btn svg{
	fill: #fff;
	width: 2.25em;
}
.sec1 .left-part .btn-box .btn .tip-box{
	border-radius: 0.625em;
	background-color: #fff;
	border: 1px solid #DEE2E6;
	position: absolute;
	right: 100%;
	top: 50%;
	margin-right: 2em;
	transform: translate(20%,-50%);
	padding: 1em 1.375em;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.75s,transform 0.75s;
}
.sec1 .left-part .btn-box .btn:hover .tip-box{
	pointer-events: auto;
	opacity: 1;
	transform: translate(0,-50%);
}
.sec1 .left-part .btn-box .btn .tip-box::before,.sec1 .left-part .btn-box .btn .tip-box::after{
	content: "";
	border-style: solid;
	border-width: 0.6875em 0 0.6875em 0.875em; 
	display: block;
	position: absolute;
	left: 100%;
	top: 50%;
	margin-top: -0.6875em;
}
.sec1 .left-part .btn-box .btn .tip-box::before{
	border-color: transparent transparent transparent #DEE2E6;
}
.sec1 .left-part .btn-box .btn .tip-box::after{
	border-color: transparent transparent transparent #fff;
	margin-left: -2px;
}
.sec1 .left-part .btn-box .btn .tip-box p{
	font-size: 0.875em;
	color: #68717A;
	line-height: 1.5;
	width: 15em;
}

.sec1 .right-part{
	width: 26.66%;
	position: sticky;
	top: 1.5em;
}
.sec1 .right-part .like-box{
	border-radius: 0.9375em;
	border: 1px solid rgba(255,255,255,0.6);
	background-color: #333;
	padding: 1.25em 2em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	margin-bottom: 1.5em;
}
.sec1 .right-part .like-box h5{
	font-size: 1.125em;
	color: #fff;
}
.sec1 .right-part .like-box .like-btn{
	width: 3.125em;
	height: 3.125em;
	border: 2px solid rgba(255,255,255,0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
}
.sec1 .right-part .like-box .like-btn svg{
	fill: #fff;
	width: 50%;
}
.sec1 .right-part .like-box .like-btn.active svg{
	fill: var(--theme-color);
}
.sec1 .right-part .nav-box{
	padding: 2.5em 1.5em 1.25em;
	background-color: #fff;
	border-radius: 0.9375em;
}
.sec1 .right-part .nav-box h5{
	font-size: 1.5em;
	color: var(--theme-color);
	border-bottom: 1px solid rgba(0,0,0,0.1);
	text-align: center;
	margin-bottom: 1.25em;
	padding-bottom: 1.25em;
	font-weight: 500;
}
.sec1 .right-part .nav-box a{
	color: #606060;
	margin-left: 0.875em;
	display: block;
	margin-bottom: 2em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sec1 .right-part .nav-box a::before{
	content: "·";
	display: inline-block;
	vertical-align: top;
	margin-right: 0.5em;
}
.sec1 .right-part .nav-box a.active{
	color: var(--theme-color);
}

@media only screen and (min-width:1025px){
	.sec1 .left-part .title .btn:hover{
		background-color: var(--theme-color);
		fill: #fff;
	}
	.sec1 .left-part .relative-box a:hover{
		color: var(--theme-color);
	}
	.sec1 .left-part .btn-box .btn:hover{
		background-color: #fff;
	}
	.sec1 .left-part .btn-box .btn:hover svg{
		fill: var(--theme-color);
	}
	.sec1 .right-part .like-box .like-btn:hover svg{
		fill: var(--theme-color);
	}
	.sec1 .right-part .nav-box a:hover{
		color: var(--theme-color);
	}
}

@media only screen and (max-width:1024px){
	.sec1{
		padding: 10em 0 15%;
	}
	.sec1 .inner{
		display: block;
	}
	.sec1 .left-part{
		width: 100%;
	}
	.sec1 .left-part .title h1{
		font-size: 2em;
	}
	.sec1 .left-part .title p{
		font-size: 1em;
	}
	.sec1 .left-part .content *{
		font-size: 1em;
	}
	.sec1 .left-part .relative-box{
		display: block;
	}
	.sec1 .left-part .relative-box a{
		max-width: 100%;
		width: 100%;
		font-size: 1.5em;
		margin-bottom: 5%;
	}
	.sec1 .left-part .relative-box a:last-child{
		margin-bottom: 0;
	}
	.sec1 .left-part .btn-box{
		padding: 4.625em 2.75em;
	}
	.sec1 .left-part .btn-box .btn .tip-box p{
		font-size: 1.25em;
		width: 14em;
	}

	.sec1 .right-part{
		display: none;
	}
}