.base-content{width:1500px; margin:120px auto 0;}
.service-title{width:100%; float:left; margin-bottom:100px}
.service-title h2{width: 400px; margin:0; line-height:1.5em; font-size:18px; letter-spacing:0.1em; text-align:justify;}
.service-title p{width: 600px; margin:0; line-height:1.5em; font-size:14px; letter-spacing:0.1em; text-align:justify;color: #333;}
.flowbox-title{width:100%; float:left; margin-bottom:50px}
.flowbox-title h2{width: 400px; margin:0; line-height:1.5em; font-size:18px; letter-spacing:0.1em; text-align:justify;}
.service-list{width: 100%;float:left;}
.service-list li{width: calc((100% - 3%)/2); float: left;margin: 0 3% 140px 0;font-size:0;border-top: 0.5px solid #000;border-top-height:thin;padding-top:35px;vertical-align:top; overflow:hidden;}
.service-list li:nth-child(2n) {margin: 0 0 140px;}
.service-left{ width: 50%; float: left; margin:0}
.service-left h2{margin:0 0 15px 0;  font-size:18px;}
.service-left h3{margin:0;  font-size:46px; color: #222; line-height: 1.2em;}
.flowbox{ width: 100%; float: left;}
.flow-info{ width:70%; float: left;margin-right: 12%;}
.flow-info{opacity: 0;-moz-transform: translateX(-30px);-ms-transform: translateX(-30px);-webkit-transform: translateX(-30px);transform: translateX(-30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.flow-info.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.flow-en{width: 13%;float:left;margin-right: 5%;font-size:30px;font-weight: 500;}
.flow-en{opacity: 0;-moz-transform: translateX(30px);-ms-transform: translateX(30px);-webkit-transform: translateX(30px);transform: translateX(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.flow-en.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.flow-title{width: 100%; margin: 0 0 12px; font-size:17px;font-weight: 500;}
.flow-tx{ width: 100%;float: left;}
.flow-tx p{line-height: 1.8em; font-size:15px;text-align:justify;}

.work {float:left; width:100%; margin:0 0 100px; text-align: center;}
.work .work-item {width: calc((100% - 8%)/3);float: left;margin: 0; padding: 26px 10px; position: relative; border: 1px solid #ccc;line-height: 1.5em;}
.work .work-item:nth-child(2) {margin: 0 4%;}
.work .work-item:nth-child(3) {margin: 0}
.work .work-item:nth-child(4) {margin: 0;}
.itemtitle{ font-size: 16px;font-family: 'Noto Sans TC', sans-serif;font-weight:400; color: #111;}
.itemst{ font-size: 12px; color: #666;}
.work .work-item:hover{border: 1px solid #111;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s;}


@media only screen and (max-width:1600px) {
.base-content{width:85%;margin:90px auto 0}
.service-title{margin-bottom: 70px}
.flowbox-title{margin-bottom: 30px}
.service-list li{margin: 0 3% 110px 0;}
.service-list li:nth-child(2n) {margin: 0 0 110px;}
}
@media only screen and (max-width:1200px) {
.base-content{width:88%;margin:65px auto 0}
.service-title{margin-bottom:50px;}
.flowbox-title{margin-bottom:25px;}
.flow-info{ width:72%;margin-right: 10%;}
.flow-en{width: 13%;margin-right: 5%;}
.service-list li{margin: 0 3% 80px 0;}
.service-list li:nth-child(2n) {margin: 0 0 80px;}
.work .work-item {width: calc((100% - 10%)/3);margin: 0;}
.work .work-item:nth-child(2) {margin: 0 5%;}
.work .work-item:nth-child(3) {margin: 0;}	
.work .work-item.show:nth-child(4) {margin: 0;}
}
@media only screen and (max-width:980px) {
.base-content{width:90%;margin:40px auto 0}
.service-title{margin-bottom: 40px}
.service-title h2{font-size:16px;}
.flowbox-title{margin-bottom: 20px}
.flowbox-title h2{font-size:16px;}
.flow-info{width:92%;margin-right:8%;}
.flow-en{width:92%;margin-right: 8%;margin-bottom: 15px}
.service-list li{margin: 0 3% 50px 0;}
.service-list li:nth-child(2n) {margin: 0 0 50px;}
.work .work-item {width: calc((100% - 6%)/2);margin: 0 0 20px 0;}
.work .work-item:nth-child(2) {margin: 0 0 20px 6%;}
.work .work-item:nth-child(3) {margin: 0;}	
.work .work-item.show:nth-child(4) {margin: 0;}
}
@media only screen and (max-width:767px) {
.base-content{margin:35px auto 0}
.service-title{margin-bottom:20px}
.service-title h2{width: 100%; line-height:1.5em; font-size:15px; letter-spacing:0.05em;}
.flowbox-title{margin-bottom:15px}
.flowbox-title h2{width: 100%; line-height:1.5em; font-size:15px; letter-spacing:0.05em;}
.service-list li{width:100%; margin: 0 0 35px;padding-top:15px;}
.service-list li:nth-child(2n) {margin: 0 0 35px;}
.flow-en{width:100%;margin-right: 0;margin-bottom: 10px;font-size:22px;}
.flow-info{width:100%;margin-right:0;}
.flow-tx p{font-size:16px;}
.work .work-item {width: calc((100% - 4%)/2); margin: 0 4% 10px 0;}
.work .work-item:nth-child(2) {margin: 0 0 10px 0;}
.work .work-item:nth-child(3) {margin: 0 4% 0 0;}	
.work .work-item:nth-child(4) {margin: 0;}	
}