@import url('/css/animate.css');

.wow {
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-duration: 2s;
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-ms-animation-duration: 2s;
	-o-animation-duration: 2s
}

#articleInfo3 {
	position: relative
}

#articleInfo3 h2.Ptitle {
	text-align: left;
	margin-bottom: 15px;
	margin-top: 30px;
	font-weight: 600;
	font-size: max(2 * (1vw + 1vh) / 2, 20px);
	padding: 0 15px;
	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-ms-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	color: #062253;
}

#articleInfo3 h2.Ptitle:before {
	content: "";
	position: absolute;
	width: 3px;
	height: 100%;
	background: #162b5a;
	left: 0;
}

#articleInfo3 p {
	margin-bottom: 40px;
	font-weight: 300;
	line-height: 200%;
	font-size: 15px;
	padding: 0 10px;
	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-ms-animation-name: fadeInUp;
	-o-animation-name: fadeInUp
}

#articleInfo3 .webframe,
#sixBox .webframe {
	overflow: hidden;
	width: 1530px;
	margin: 0 auto
}

#articleInfo3 .title-set {
	position: relative;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 0;
	list-style: none;
	justify-content: space-between;
	margin-bottom: 20px;
}

#articleInfo3 .title-set:before {
	content: "";
	position: absolute;
	width: 210px;
	aspect-ratio: 3/1;
	background: url(/userfiles/images/20240731012827150.png);
	bottom: 88px;
	right: 0;
	background-size: contain;
	background-repeat: no-repeat;
}

#articleInfo3 .title-set>div {
	width: calc((100%/3) - 66px);
	position: relative;
	padding: 30px 30px 90px;
	display: flex;
	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-ms-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	border: rgb(227 227 227 / 51%) 1px solid;
	margin-bottom: 6px;
}

#articleInfo3 .title-set .box02 {
	animation-delay: 100ms
}

#articleInfo3 .title-set .box03 {
	animation-delay: 200ms
}

#articleInfo3 .title-set .box04 {
	animation-delay: 300ms
}

#articleInfo3 .title-set .box05 {
	animation-delay: 400ms
}

#articleInfo3 .title-set .box06 {
	animation-delay: 500ms
}

#articleInfo3 .title-set .box07 {
	animation-delay: 600ms
}

#articleInfo3 .title-set>div:before {
	content: '';
	width: 100%;
	height: 1px;
	background: #e0e0e0;
	position: absolute;
	bottom: 26px;
	left: 0;
	transition: all 0.4s ease
}

#articleInfo3 .title-set>div:nth-of-type(3n+1):before {
	width: calc(100% - 30px);
	left: 30px
}

#articleInfo3 .title-set>div:nth-of-type(3n):before {
	width: calc(100% - 30px);
	left: 0
}

#articleInfo3 .title-set>div:hover:before {
	background: #d94926;
}

#articleInfo3 .title-set>div .free {
	display: flex;
	flex-wrap: wrap
}

#articleInfo3 .title-set>div .free .num {
	width: 32px;
	height: 32px;
	background: #ffffff;
	border: 1px solid #dedede;
	border-radius: 50%;
	text-align: center;
	color: #454545;
	font-size: 13px;
	line-height: 30px;
	letter-spacing: 0;
	position: absolute;
	bottom: 10px;
	left: 90px;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease
}

#articleInfo3 .title-set>div:hover .free .num {
	background: #d94926;
	color: #fff;
	border: 1px solid #f5f7fa
}

#articleInfo3 .title-set>div .free .icon {
	width: 48px;
	height: 55px;
	margin-right: 15px;
	position: relative;
	overflow: hidden;
	display: flex
}

#articleInfo3 .title-set>div .free .icon img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
	display: inline-block
}

#articleInfo3 .title-set>div:hover .free .icon img {
	top: -52px
}

#articleInfo3 .title-set h2 {
	font-weight: 400;
	font-size: 24px;
	color: #111;
	font-size: 20px;
	line-height: 120%;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
	display: flex;
	width: calc(100% - 65px);
	align-items: center
}

#articleInfo3 .title-set h3 {
	color: #9a9a9a;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.6px;
	overflow: hidden;
	margin-top: 5px;
	font-weight: normal;
	display: flex;
	width: calc(100% - 65px);
	margin-left: 65px
}

#articleInfo3 .small-talk {
	float: right
}

#articleInfo3 .small-talk p {
	text-align: right;
	font-size: 16px;
	color: #e19dc5;
	line-height: 180%;
	width: 280px
}

#articleInfo3 .walink {
	display: flex;
}

#articleInfo3 .walink a {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 33.3%;
	padding: 35px 10px;
	color: #162b5a;
	font-size: max(1.5*(1vw + 1vh) / 2, 16px);
	font-weight: 500;
	border: rgb(22 43 90 / 38%) 1px solid;
	margin: 10px 10px;
}

#articleInfo3 .walink a:hover {
	background: #162b5a;
	color: white;
}

@media screen and (max-width: 1440px) {
	#articleInfo3 .title-set>div {
		padding: 30px 15px 90px;
		width: calc((100%/3) - 35px);
	}
}

@media screen and (max-width: 768px) {
	#articleInfo3 .title-set>div {
		padding: 30px 15px 90px;
		width: calc((100%/2) - 33px);
	}

	#articleInfo3 .title-set>div:nth-of-type(3n+1):before {
		width: 100%;
		left: 0
	}

	#articleInfo3 .title-set>div:nth-of-type(3n):before {
		width: 100%;
		left: 0
	}

	#articleInfo3 .walink a {
		padding: 20px 10px;
	}
}

@media screen and (max-width: 480px) {
	#articleInfo3 h2.Ptitle {
		font-size: 25px
	}

	#articleInfo3 .title-set:before {
		display: none;
	}

	#articleInfo3 .title-set>div {
		width: calc(100% - 30px)
	}

	#articleInfo3 .walink a {
		padding: 15px 0;
		margin: 12px 3px;
	}
}