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

.wow {
	animation-name: fadeInDown;
	-webkit-animation-name: fadeInDown;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	animation-duration: 1s;
	-webkit-animation-duration: 1s
}

.delay1 {
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s
}

.delay2 {
	animation-delay: 1.0s;
	-webkit-animation-delay: 1.0s
}

.delay3 {
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s
}

.delay4 {
	animation-delay: 2.0s;
	-webkit-animation-delay: 2.0s
}

.delay5 {
	animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s
}

#articleInfo4 {
	position: relative
}

#articleInfo4 .title {
	position: absolute;
	width: auto;
	height: 100%;
	left: 10px;
	top: 10px;
	letter-spacing: 0.65em;
	font-size: 12px;
	font-weight: bold;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	animation-name: fadeInLeft;
	-webkit-animation-name: fadeInLeft;
	transition: all 0.4s ease-in-out 0s;
	text-transform: uppercase;
	display: none;
}

#articleInfo4 .slashBox {
	position: absolute;
	top: 232px;
	left: 41px;
	z-index: -1;
	animation-name: fadeInLeftBig;
	-webkit-animation-name: fadeInLeftBig
}

#articleInfo4 .slashBox:before,
#articleInfo4 .slashBox:after {
	position: absolute;
	height: 250px;
	width: 250px;
	display: block;
	content: ""
}

#articleInfo4 .slashBox:before {
	height: 230px;
	background: #fff;
	left: calc(10% + 20px);
	z-index: -1
}

#articleInfo4 .slashBox:after {
	background: url(/images/style/04/img-slash.png) top left;
	left: 10%;
	z-index: -2
}

#articleInfo4 .info {
	overflow: hidden;
	margin-left: 0;
	position: relative;
	display: flex
}

#articleInfo4 .info .leftBox,
#articleInfo4 .info .rightBox {
	width: 66%;
	display: flex;
	flex-direction: column
}

#articleInfo4 .info .photoBox img {
	width: 100%;
	object-fit: cover
}

#articleInfo4 .info .leftBox img {
	height: 490px
}

#articleInfo4 .info .rightBox img {
	height: 800px;
	animation: moveObject 14s linear infinite
}

@keyframes moveObject {
	0% {
		object-position: 0% 50%
	}

	50% {
		object-position: 100% 50%
	}

	100% {
		object-position: 0% 50%
	}
}

#articleInfo4 .info .leftBox .photoBox,
#articleInfo4 .info .leftBox article {
	margin-left: 0px
}

#articleInfo4 .info .leftBox .sTitle {
	margin: 25px 0 20px;
	animation-name: fadeInLeft;
	-webkit-animation-name: fadeInLeft
}

#articleInfo4 .info .leftBox .sTitle:hover h3 {
	animation: animatedIcon 1s;
	-webkit-animation: animatedIcon 1.5s infinite linear;
	-moz-animation: animatedIcon 1.5s infinite linear;
	-ms-animation: animatedIcon 1.5s infinite linear;
	-o-animation: animatedIcon 1.5s infinite linear
}

@keyframes animatedIcon {
	0% {
		letter-spacing: 0
	}

	50% {
		letter-spacing: 10px
	}

	100% {
		letter-spacing: 0
	}
}

@-o-keyframes animatedIcon {
	0% {
		letter-spacing: 0
	}

	50% {
		letter-spacing: 10px
	}

	100% {
		letter-spacing: 0
	}
}

@-webkit-keyframes animatedIcon {
	0% {
		letter-spacing: 0
	}

	50% {
		letter-spacing: 10px
	}

	100% {
		letter-spacing: 0
	}
}

@-moz-keyframes animatedIcon {
	0% {
		letter-spacing: 0
	}

	50% {
		letter-spacing: 10px
	}

	100% {
		letter-spacing: 0
	}
}

@-ms-keyframes animatedIcon {
	0% {
		letter-spacing: 0
	}

	50% {
		letter-spacing: 10px
	}

	100% {
		letter-spacing: 0
	}
}

#articleInfo4 .info .leftBox .sTitle p {
	font-size: 19px;
	font-weight: 800;
	display: flex;
	align-items: center;
	color: #122c5b;
}

#articleInfo4 .info .leftBox .sTitle p:after {
	margin-left: 10px;
	width: 150px;
	height: 1px;
	background: #0000008c;
	display: inline-block;
	content: "";
	vertical-align: middle
}

#articleInfo4 .info .leftBox .sTitle h3 {
	font-size: 35px;
	color: #122c5b;
}

#articleInfo4 .info .leftBox article {
	font-size: 16px;
	line-height: 170%;
	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp
}

#articleInfo4 .info .rightBox {
	margin-left: 2%;
	width: 32%
}

#articleInfo4 .info .rightBox .photoBox {
	animation-name: fadeInRight;
	-webkit-animation-name: fadeInRight
}

#serviceboxin {
	padding: 50px 0 10px
}

#serviceboxin h2 {
	text-align: center;
	font-size: 33px;
	font-weight: 300;
	color: #cb5834;
	letter-spacing: 5px
}

#serviceboxin ul {
	overflow: hidden;
	position: relative;
	margin: 0px 0 30px;
	z-index: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	list-style: none;
	padding-left: 0
}

#serviceboxin ul li {
	position: relative;
	margin: 20px 0;
	width: 16.6%;
	height: 320px
}

#serviceboxin ul li .item {
	padding: 20px 10px
}

#serviceboxin ul .Img {
	margin: 0 auto;
	position: relative;
	width: 163px;
	height: 143px;
	padding: 16.5px 0px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

#serviceboxin ul .Img:before {
	position: absolute;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	border: 2px #dadada dotted;
	top: 0px;
	left: 8px;
	content: "";
	-webkit-animation: round 50s linear infinite;
	animation: round 50s linear infinite
}

@keyframes round {
	from {
		transform: rotate(0)
	}

	to {
		transform: rotate(1turn)
	}
}

@-webkit-keyframes round {
	from {
		-webkit-transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(1turn)
	}
}

@keyframes newsfix1 {
	from {
		transform: translateY(0)
	}

	to {
		transform: translateY(10px)
	}
}

@-webkit-keyframes newsfix1 {
	from {
		-webkit-transform: translateY(0)
	}

	to {
		-webkit-transform: translateY(10px)
	}
}

@keyframes newsfix2 {
	from {
		transform: translateX(0)
	}

	to {
		transform: translateX(-10px)
	}
}

@-webkit-keyframes newsfix2 {
	from {
		-webkit-transform: translateX(0)
	}

	to {
		-webkit-transform: translateX(-10px)
	}
}

#serviceboxin ul .Img .num {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	position: absolute;
	top: 8px;
	left: 7px;
	width: 43px;
	height: 43px;
	background-color: #ffffff;
	border-radius: 50%;
	-webkit-box-shadow: 0px 0px 7px 0px rgb(140 140 140 / 47%);
	box-shadow: 0px 0px 7px 0px rgb(140 140 140 / 47%);
	z-index: 10;
	color: #ca5834
}

#serviceboxin ul .Img .pic {
	width: 100%;
	background-color: #1b4144;
	border-radius: 50%;
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease
}

#serviceboxin ul .Img .pic img {
	display: block;
	width: 100%;
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease
}

#serviceboxin ul li:nth-child(6) {
	border-right: none
}

#serviceboxin ul li .item .circle {
	position: relative;
	margin: 0 auto 15px;
	width: 110px;
	height: 110px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-color: #cb5834;
	box-sizing: border-box;
	text-align: center;
	font-size: 55px;
	line-height: 90px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center
}

#serviceboxin ul li .item .circle img {
	-webkit-filter: contrast(0) brightness(200%);
	filter: contrast(0) brightness(200%);
	width: 60px;
	height: 60px
}

#serviceboxin ul li .item .circle i {
	color: #fff
}

#serviceboxin ul .Txt {
	padding: 20px 0px 0;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	font-family: "Noto Sans TC", sans-serif;
	color: #000000
}

#serviceboxin ul .title {
	position: relative;
	padding: 7px 0;
	margin-bottom: 5px;
	font-size: 20px;
	font-weight: 500;
	color: #414242;
	text-align: center
}

#serviceboxin ul .title:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: calc(50% - 8px);
	width: 16px;
	height: 1px;
	background-color: #1b4144
}

#serviceboxin ul li .item:hover .circle {
	animation: flipInX 1.5s both;
	-webkit-animation: flipInX 1.5s both;
	animation-duration: 1s;
	-webkit-animation-duration: 1s
}

@keyframes flipInX {
	0% {
		transform: perspective(400px) rotateX(90deg);
		animation-timing-function: ease-in;
		opacity: 0
	}

	40% {
		transform: perspective(400px) rotateX(-20deg);
		animation-timing-function: ease-in
	}

	60% {
		transform: perspective(400px) rotateX(10deg);
		opacity: 1
	}

	80% {
		transform: perspective(400px) rotateX(-5deg)
	}

	to {
		transform: perspective(400px)
	}
}

@-webkit-keyframes flipInX {
	0% {
		-webkit-transform: perspective(400px) rotateX(90deg);
		-webkit-animation-timing-function: ease-in;
		opacity: 0
	}

	40% {
		-webkit-transform: perspective(400px) rotateX(-20deg);
		-webkit-animation-timing-function: ease-in
	}

	60% {
		-webkit-transform: perspective(400px) rotateX(10deg);
		opacity: 1
	}

	80% {
		-webkit-transform: perspective(400px) rotateX(-5deg)
	}

	to {
		-webkit-transform: perspective(400px)
	}
}

#serviceboxin ul li .item p {
	text-align: center;
	font-size: 15px;
	font-weight: 300
}

@media screen and (max-width:1280px) {
	#serviceboxin ul li {
		width: 33.3%
	}
}

@media screen and (max-width:768px) {
	#serviceboxin ul li .item {
		padding: 5px
	}
}

@media screen and (max-width:640px) {
	#serviceboxin ul li {
		width: 50%;
		height: 270px
	}

	#serviceboxin ul li:nth-child(2) .item {
		border-left: 0
	}
}

@media screen and (max-width:480px) {
	#serviceboxin ul li {
		height: 240px
	}
}

@media screen and (max-width:1280px) {

	#articleInfo4 .slashBox:before,
	#articleInfo4 .slashBox:after {
		width: 150px;
		height: 170px
	}

	#articleInfo4 .slashBox:before {
		height: 150px
	}
}

@media screen and (max-width:768px) {
	#articleInfo4 .info .leftBox {
		width: 100%
	}

	#articleInfo4 .info .rightBox {
		display: none
	}

	#articleInfo4 .slashBox {
		top: 213px
	}

	#articleInfo4 .slashBox:before,
	#articleInfo4 .slashBox:after {
		width: 250px;
		height: 270px
	}

	#articleInfo4 .slashBox:before {
		height: 250px
	}

	#articleInfo4 .info .leftBox .sTitle p:after {
		width: 60%
	}
}

@media screen and (max-width:640px) {
	#articleInfo4 .slashBox:before {
		height: 150px
	}

	#articleInfo4 .slashBox:after {
		height: 170px
	}
}

@media screen and (max-width:480px) {
	#articleInfo4 .slashBox {
		display: none
	}

	#articleInfo4 .info .leftBox article {
		margin-left: 0
	}
}

@media screen and (max-width:480px) {
	#articleInfo4 .title {
		position: relative;
		height: auto;
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		top: -4px
	}

	#articleInfo4 .info,
	#articleInfo4 .info .leftBox .photoBox {
		margin-left: 0
	}

	#articleInfo4 .info .leftBox .sTitle {
		margin: 20px 0 10px
	}

	#articleInfo4 .info .leftBox .sTitle p:after {
		width: 40%
	}
}