.hero{position:relative;width:100%;float: left; margin:59px 0 0;padding-bottom:48%;overflow:hidden;}
.hero-box,.hero-box:after{top:0;left:0;width:100%;height:100%;position:absolute}
.hero-box{-webkit-transition:1.8s opacity,1.8s visibility;transition:1.8s opacity,1.8s visibility;pointer-events:none;opacity:0;}
.hero-box:after{display:block;content:'';opacity:.1;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.1)),color-stop(49%,#000),color-stop(78%,#000),to(black));background:-webkit-linear-gradient(top,rgba(0,0,0,.1) 0,#000 49%,#000 78%,#000 100%);background:linear-gradient(to bottom,rgba(0,0,0,.1) 0,#000 49%,#000 78%,#000 100%)}
.hero-box.js_active{visibility:visible;-webkit-transition-delay:0s;transition-delay:0s;pointer-events:auto;opacity:1}
.hero-image{width:100%;max-width:100%;min-height:100%;background-size: cover;background-position: center center;background-repeat: no-repeat;}
.hero-item{width:100%;height:100%}

@media only screen and (max-width: 1600px) {
.hero{padding-bottom:52.5%}
}
@media only screen and (max-width: 1280px) {
.hero{padding-bottom:57.5%}
}
@media only screen and (max-width: 980px) {
.hero{padding-bottom:110%}
}
@media only screen and (max-width: 767px) {
.hero{padding-bottom:159%}
}

.about{width:100%;float:left;}
.about-container{width:100%;float: left;}
.about-top{width:1300px;margin:100px auto 50px;text-align: center;}
.info-title{width:100%;float:left;margin: 0;padding: 0 32%}
.info-title h2{margin: 0 0 60px; font-size: 14px;font-weight: 500}
.info-title h3{margin: 0 0 30px; font-size:30px;letter-spacing: 0.2em;font-weight: 400}
.info-title p{line-height:2.2em;font-size: 16px;letter-spacing: 0.2em}
.about-bgwrap{width:100%;float: left; position: relative}
.about-bg{width:100%;float: left; height:250px;background-color: #f2f2f2; clip-path:polygon(54% 59%, 73% 5%, 100% 48%, 100% 100%, 0 100%, 0 21%);}

/* 小球樣式設定 */
:root{--contentMaxWidth: 2560px;--contentWidth: 90vw;--commonWidth: min(var(--contentWidth), var(--contentMaxWidth));--gridNum: 12;--gridGap: min(5vw, var(--contentMaxWidth) * .5);--gridWidth: calc(((var(--commonWidth) + var(--gridGap)) / var(--gridNum)) - var(--gridGap));--groundHeight: 25vw;--sectionPadding: calc(var(--gridWidth) * 1 + var(--gridGap) * 1);}

.about-top{width:var(--commonWidth);margin-left:auto;margin-right:auto;padding-bottom:var(--sectionPadding)}.aboute-container{text-align:center;position:relative;padding-bottom:calc(var(--groundHeight) * .66)}.aboute-container .js-shapeAnimation{position:absolute;width:100%;height:100%;top:0;left:0;z-index:1}.js-shapeAnimation{width:100%;height:80vh;position:relative}.js-shapeAnimation__canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block}.js-shapeAnimation{position:absolute;width:100%;height:100%;top:0;left:0;z-index:11}

@media only screen and (max-width: 1600px) {
.about-top{width:1200px;margin:80px auto 40px;}
.info-title{padding: 0 23%}
}
@media only screen and (max-width: 1280px) {
.about-top{width:88%;margin:60px auto 40px;}
.info-title{padding: 0 20%}	
}
@media only screen and (max-width: 980px) {
.about-top{width:90%;margin:55px auto 30px;}
.info-title{padding: 0 8%}	
.info-title h2{margin: 0 0 45px;}
.info-title h3{margin: 0 0 25px; font-size:24px;}
.info-title p{line-height:2em;}	
}
@media only screen and (max-width: 767px) {
.about-top{width:var(--commonWidth);margin-left:auto;margin-right:auto;padding-bottom:var(--sectionPadding);margin:40px auto 20px;}
.info-title{padding: 0}	
.info-title h2{margin: 0 0 20px;}
.info-title h3{margin: 0 0 12px; font-size:22px;}
.info-title p{line-height:1.9em;}
.about-bg{height:80px;clip-path:polygon(54% 59%, 73% 5%, 100% 48%, 100% 100%, 0 100%, 0 21%);}
.ball {width: 50px;height:50px;position: absolute;top:0;left:51%;}
}

.taem{width:100%; float:left; background:#f2f2f2;}
.taem-content{width:1400px; padding:40px 0 100px;margin: 0 auto}
.teamw-item{width:100%; float:left;margin:0;position: relative} 
.teanleft{width:50%; float:left;margin:0 0 0 50%}
 .teanleft img{max-width:100%;height: auto; margin: 0; display: block;border-radius: 5px} 
.boss-left{width:40%; position: absolute;top:50%;left: 0;transform: translate(0, -50%);}
.boss-title{width:100%;float:left;font-size: 14px;font-weight: 500;margin-bottom: 22px}
.boss-info{width:100%;float:left; letter-spacing: 0.1em;}
.boss-info h2{margin:0 0 10px;  font-size:20px; line-height: 1.8em;}
.boss-info p{margin:0 0 10px;font-size: 15px;line-height: 2em;text-align:justify;}
.boss-info span{font-size: 16px;letter-spacing: 0;margin-left: 5px;font-weight: 500}

@media only screen and (max-width: 1600px) {
.taem-content{width: 1200px; padding:30px 0 80px;}
}
@media only screen and (max-width: 1280px) {
.taem-content{width:88%;padding:10px 0 80px;}
}
@media only screen and (max-width: 980px) {
.taem-content{width:90%; padding:10px 0 60px;}	
.boss-left{width:44%; position: absolute;top:50%;left: 0;transform: translate(0, -50%);}
}
@media only screen and (max-width: 767px) {
.taem-content{padding:0 0 40px;}
.teanleft{width: 100%; margin:0 0 25px 0; }
 .teanleft img{max-width:100%;margin: 0; display: block;} 
.boss-left{width:100%; position:static;transform: translate(0, 0);}
.boss-info{margin-bottom: 20px}
}

.tagbox{width: 100%;float: left;}
.tag-list{width:100%; float:left;margin: 40px 0 50px 0}
.blog-btn{width:auto; float: left;text-align:center;font-size: 13px;letter-spacing:0.03em;margin-right: 12px;}
  .blog-btn a {display:block; height: 50px; padding:0 14px;border-bottom-left-radius: 8px; border-bottom-right-radius: 20px;border-top-left-radius: 8px;border-top-right-radius: 8px;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s;line-height: 50px;color: #fff;}
  .blog-btn a:hover {color: #000;background-color: #bbb!important;border-bottom-left-radius: 20px; border-bottom-right-radius: 8px;border-top-left-radius: 8px;border-top-right-radius: 8px;}
.caseall{width:100%;float: left; display:block;}
.caseall ul { margin:0; padding:0; list-style:none;} 
.caseall li {margin:0; display: inline;text-align:center;font-size: 13px;font-weight: 500; letter-spacing: -0.01em;white-space: nowrap;} 
.caseall li::after {content: "/"; margin-left: 5px;margin-right: 5px;color: #888888;}
.caseall li:last-child::after {display: none;}
@media only screen and (max-width: 980px) {
.tag-list{margin:80px 0 40px}
}
@media only screen and (max-width: 767px) {
.tag-list{margin:20px 0 15px}
.blog-btn{letter-spacing:0.03em;margin-right: 12px;margin-bottom: 15px}

}