#serviceboxin{
    padding: 50px 0 10px;
}
#serviceboxin h2 {text-align: center;font-size: 33px;font-weight: 500;letter-spacing: 5px;font-family: "Noto Serif TC", serif;color: #323232;}
#serviceboxin ul {overflow: hidden;position: relative;margin: 0px 0 30px;z-index: 1;display: flex;flex-wrap: wrap;-webkit-box-pack: center;list-style: none;padding-left: 0;}
#serviceboxin ul li {position: relative;margin: 20px 0;width: calc(100%/5);}
#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: 2px;left: 11px;content: "";-webkit-animation: round 50s linear infinite;animation: round 50s linear infinite;}

/* animation */
@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: #5d3e4a;}
#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: linear-gradient(140deg, #502d40, #755f5e);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 {/* width: 100%; */height: 240px;}
}