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

#articleInfo31 { position: relative; }
#articleInfo31 .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; }
#articleInfo31 .slashBox { position: absolute; top: 232px; left: 41px; z-index: -1; animation-name: fadeInLeftBig; -webkit-animation-name: fadeInLeftBig; }
#articleInfo31 .slashBox:before, #articleInfo31 .slashBox:after { position: absolute; height: 250px; width: 250px; display: block; content: ""; }
#articleInfo31 .slashBox:before { height: 230px; background: #fff; left: calc(10% + 20px); z-index: -1; }
#articleInfo31 .slashBox:after { background: url(/images/style/04/img-slash.png) top left; left: 10%; z-index: -2; }
#articleInfo31 .info { overflow: hidden; margin-left: 60px; position: relative; display: flex; }
#articleInfo31 .info .leftBox, #articleInfo31 .info .rightBox { width: 66%; display: flex; flex-direction: column; }
#articleInfo31 .info .photoBox img { width: 100%; object-fit: cover; }
#articleInfo31 .info .leftBox img { height: 490px; }
#articleInfo31 .info .rightBox img { height: 800px; animation: moveObject 14s linear infinite; -webkit-animation: moveObject 14s linear infinite; }

#articleInfo31 .info .leftBox .photoBox, #articleInfo31 .info .leftBox article { margin-left: 0; }
#articleInfo31 .info .leftBox .sTitle { margin: 25px 0 20px; animation-name: fadeInLeft; -webkit-animation-name: fadeInLeft; }
#articleInfo31 .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; }

#articleInfo31 .info .leftBox .sTitle p { font-size: 19px; font-weight: 800; display: flex; align-items: center; }
#articleInfo31 .info .leftBox .sTitle p:after { margin-left: 10px; width: 150px; height: 1px; background: #0000008c; display: inline-block; content: ""; vertical-align: middle; }
#articleInfo31 .info .leftBox .sTitle h3 { font-size: 35px; }
#articleInfo31 .info .leftBox article { font-size: 16px; line-height: 170%; animation-name: fadeInUp; -webkit-animation-name: fadeInUp; }
#articleInfo31 .info .rightBox { margin-left: 2%; width: 32%; }
#articleInfo31 .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; list-style: none; 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; }

#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: #000; }
#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; }

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

/* animation */
@keyframes moveObject { 0% { object-position: 0% 50%; } 50% { object-position: 100% 50%; } 100% { object-position: 0% 50%; } }
@-webkit-keyframes moveObject { 0% { object-position: 0% 50%; } 50% { object-position: 100% 50%; } 100% { object-position: 0% 50%; } }
@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; } }
@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); } }
@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); } }

@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) {
	#articleInfo31 .slashBox:before, #articleInfo31 .slashBox:after { width: 150px; height: 170px; }
	#articleInfo31 .slashBox:before { height: 150px; }
}
@media screen and (max-width:768px) {
	#articleInfo31 .info .leftBox { width: 100%; }
	#articleInfo31 .info .rightBox { display: none; }
	#articleInfo31 .slashBox { top: 213px; }
	#articleInfo31 .slashBox:before, #articleInfo31 .slashBox:after { width: 250px; height: 270px; }
	#articleInfo31 .slashBox:before { height: 250px; }
	#articleInfo31 .info .leftBox .sTitle p:after { width: 60%; }
}
@media screen and (max-width:640px) {
	#articleInfo31 .slashBox:before { height: 150px; }
	#articleInfo31 .slashBox:after { height: 170px; }
}
@media screen and (max-width:480px) {
	#articleInfo31 .slashBox { display: none; }
	#articleInfo31 .info .leftBox article { margin-left: 0; }
}
@media screen and (max-width:480px) {
	#articleInfo31 .title { position: relative; height: auto; -webkit-writing-mode: horizontal-tb; writing-mode: horizontal-tb; top: -4px; }
	#articleInfo31 .info, #articleInfo31 .info .leftBox .photoBox { margin-left: 0; }
	#articleInfo31 .info .leftBox .sTitle { margin: 20px 0 10px; }
	#articleInfo31 .info .leftBox .sTitle p:after { width: 40%; }
}