@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}
#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:60px;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;}
@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}
#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}
#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%}
}