.cms-main-area{ background: #fff;  }
.cms-top.cms-main-area{margin-top:50px;  background-image:url("../images/index/bg-gear.svg"),url("../images/index/bg-box.svg"); background-position: right 30%,left top; background-repeat: no-repeat,repeat;
background-size:auto 60%,20% auto ; background-attachment: fixed; } 
 
/*.cms-main-area::before { content: ''; position: absolute; width: 100%; max-width: 1160px; height: 100%; top: 0; left: 0; right: 0; z-index: -1; margin: auto; background-image: linear-gradient(to bottom, #eee 0, #eee 100%), linear-gradient(to bottom, #eee 0, #eee 100%), linear-gradient(to bottom, #eee 0, #eee 100%), linear-gradient(to bottom, #eee 0, #eee 100%), linear-gradient(to bottom, #eee 0, #eee 100%); background-size: 1px 100%; background-position: 0 0, 25% 0, 50% 0, 75% 0, 100% 0; background-repeat: no-repeat;}
*/
.cms-bg{background:#202287; }
.cms-bg-grinding{ background: url("../images/manufacturing/m4-bg.jpg") no-repeat left top #f1f1f1; background-size:100% auto;}
.cms-bg-machining { background: url("../images/manufacturing/m7-bg.jpg") no-repeat left bottom #fff; background-size:60% auto;}

.cms-bg-search{margin-top:50px;  background-image:url("../images/index/bg-gear.svg"),url("../images/index/bg-box.svg"); background-position: right 30%,left top; background-repeat: no-repeat,repeat;
background-size:auto 60%,20% auto ; background-attachment: fixed; } 

.cms-bg-search-2::before { content: ''; position: absolute; width: 100%; max-width: 1160px; height: 100%; top: 0; left: 0; right: 0; z-index: -1; margin: auto; background-image: linear-gradient(to bottom, #eee 0, #eee 100%), linear-gradient(to bottom, #eee 0, #eee 100%), linear-gradient(to bottom, #eee 0, #eee 100%), linear-gradient(to bottom, #eee 0, #eee 100%), linear-gradient(to bottom, #eee 0, #eee 100%); background-size: 1px 100%; background-position: 0 0, 25% 0, 50% 0, 75% 0, 100% 0; background-repeat: no-repeat;}


.text-stroke{ -webkit-text-stroke: 1px #a3d6bf;} 
.cms-main-wrap{width: 100%;padding:60px 0px; display: flex; flex-wrap: wrap; align-content:flex-start;}
  
.cms-main-wrap{ width: 100%; padding:0px;  margin:0px auto; height: auto;  display: flex; flex-wrap: wrap;justify-content: center;  }
.cms-block-wrap {width:100%; height: auto; padding:0px;  display: flex; flex-wrap: wrap;position: relative;  }
.cms-block {width:50%; height: auto; padding:20px 40px ;  display: flex; flex-wrap: wrap; align-items: center; position: relative;z-index: 1 }
 


.cms-block-txt{width:100%; margin:0; padding: 0px; display: flex; flex-wrap: wrap;align-content: center; position: relative; z-index: 1;}
#cms-main .cms-block p { width: 100%; margin-bottom: 20px;font-weight:400;line-height: 1.45rem;  }
#cms-main .cms-block p strong{  display: block;  width: 100%; font-size: 1.313rem; font-weight:700; margin-bottom: 10px; color: #000; }
.cms-about-card { width:50%;  margin:-2% 0px 0px 0px; padding:0px; display: flex; flex-wrap: wrap;justify-content: flex-end; align-items: flex-start;position: relative;z-index:1; }
.cms-about-card .item-full{ width: 100%; max-width: 100%;height: auto ; margin:0px; padding:0px; position: relative;z-index: 1;clip-path: polygon(0 0, 100% 0, 62% 100%, 0% 100%);}
.cms-about-card .item-1{ width: 50%; max-width: 100%;height: auto ; margin:0px; padding:0px; position: absolute; right:0; bottom: 0; z-index: 99;  }
 
@media (max-width:768px) {
.cms-main-about{ padding:40px 0px; }
.cms-block {width: 100%; margin: 0px auto; padding:0px 15px; }
.cms-block-txt{ padding: 0px;}
  .cms-about-card { width:80%;  margin:2% 0px 0px 0px; order: 2;  }  
 }

.cms-block-txt-wrap{ width: 100%; padding:30px;  margin:0px auto; height: auto;  display: flex; flex-wrap: wrap; align-items: center; }
.cms-block-title{width:30%; margin:0; padding: 0px; display: flex; flex-wrap: wrap; position: relative; z-index: 1;}
.cms-block-txt-box{width:70%; margin:0; padding: 0px;   position: relative; z-index: 1;}
.cms-f6{width:60%; margin:0px 0px 30px 0px;  padding: 0px; display: flex; flex-wrap: wrap; justify-content: flex-start;}
.cms-f6 img, .cms-f10 img{ width: 100%; height: auto; display:block;padding:0px 10px; margin: auto; }
.cms-f4{width:40%; margin:0px; padding: 0px; display: flex; flex-wrap: wrap;   }
.cms-f10{width:100%; margin:0px 0px 15px 0px; padding: 0px;   }
.cms-f5{width:50%; margin:0px 0px 30px 0px;  padding: 0px;  }
.cms-f5 img{ max-width: 100%; height: auto; display:block; padding:0px 10px; margin: auto; }

.cms-box-wrap-2{ width:100%; padding:80px 0px; margin:0 auto;  display: flex; flex-wrap: wrap; justify-content: center;position: relative; z-index: 0; }
.cms-box-right-2{width:60%; margin:0px; padding:0px 60px; display: flex; flex-wrap: wrap; align-content: center; z-index: 0;  }
.cms-box-right-2 .cms-f10{ margin: 50px auto auto 0px; padding: 30px; }
.cms-box-left-2{ width:35%;  margin:auto auto auto 5%; padding:0px; display: flex; flex-wrap: wrap; justify-content: flex-start;align-content: flex-start; position: relative;z-index: 1 }

.cms-box-wrap-3{ width:100%; padding:0px; margin:0 auto;  display: flex; flex-wrap: wrap; justify-content: center;position: relative; z-index: 0; }
.cms-box-right-3{width:50%; margin:0px; padding:0px; display: flex; flex-wrap: wrap; align-content: center; z-index: 0;  }
.cms-box-right-3 .cms-f10{ margin:0px; padding:0px; }
.cms-box-right-3 .cms-f10 img{ margin:0px; padding:0px; }

.cms-box-left-3{ width:50%;  margin:auto; padding:0px 50px; display: flex; flex-wrap: wrap; justify-content: flex-start;align-content: flex-start; position: relative;z-index: 1 }
@media (min-width:1440px) {
.cms-box-left-3{  padding:0px 150px;}
}
@media (max-width:820px) {
.cms-block-txt-wrap{ padding:30px 0px; }
.cms-block-title{width:100%; }
.cms-block-txt-box{width:100%;}
.cms-box-left-2{ width:40%; margin:auto;}   
.cms-box-right-2 {  padding:0px 10px; }
 .cms-box-right-3{width:100%; margin:0px; padding:0px;   }
.cms-box-left-3{ width:100%; padding:30px 20px;  }   
}
@media (max-width:768px) {
.cms-box-left-2{ width:100%; margin: auto; }
.cms-box-right-2{width:100%; padding: 0px;}
.cms-box-right-2 .cms-f10{ margin: 50px auto auto 0px; padding:0px; }

.cms-f5{width:100%; margin:0px 0px 30px 0px;  }

}
.cms-bg .cms-title-3 h2:before{ right:2%; width: 30%; background:#fff!important;} 
.cms-box-full{width:100%; padding:50px; margin:-5% auto auto auto;  display: flex; flex-wrap: wrap; justify-content:center;position: relative; z-index: 0;  background: #fff;}





 /*research  樣式
=================================*/
.research.cms-block-wrap { padding:80px 50px;   }
.research.cms-block-wrap .cms-f5{ max-width: 100%; padding:0px 20px; margin: auto;   } 
.research.cms-block-wrap .cms-f5 img{ max-width: 100%; padding: 20px; margin: auto;  border-radius:20px;   }
.research-img{ width: 100%; padding:0px 20px; margin:5% auto; display: flex; flex-wrap: wrap; position: relative; z-index: 0;  }
.research-img li{ width:calc(100%/3 - 20px); margin: 10px; list-style: none;}
 

.research-pic{ width: 100%; padding:0px 20px; margin:5% auto; display: flex; flex-wrap: wrap; position: relative; z-index: 0;  }
.research-pic li{ width:calc(100%/2 - 40px); margin: 20px; padding: 20px; list-style: none;}
.research-pic li h3{ font-size: 1.15rem; margin: 20px auto; text-align: center; }

@media (max-width:768px) {
.research.cms-block-wrap { padding:20px 50px;   }
}
@media (max-width:767.98px) {
.research.cms-block-wrap { padding:20px;   }
.research.cms-block-wrap .cms-f5{  padding:0px;  } 
.research-img li{ width:calc(100%/2); margin: 10px 0px; list-style: none;}
.research-pic{ width: 100%; padding:0px;  }
 .research-pic li{ width:calc(100% ); margin: 20px auto; padding: 20px 0px;  }  
}


.map-wrapper-row {  max-width:1100px; margin: 0 auto; padding:0px;}
 
.map-list{ width: 100%;   margin: auto;  display: flex; flex-wrap: wrap; }
.map-list li{width: auto; margin: 10px;display: flex; flex-wrap: wrap; align-items: center;}
.map-list li span{ margin-left: 5px;}
.box-brick { width: 16px; height: 16px;border-radius:99rem;  }
.yellow{ background-color:rgba(235, 154, 36,.85)!important; }
.blue{  background-color:#026ebb!important;}
.green{  background-color:rgba(76, 175, 80,.85)!important;}
.red{background-color:rgba(201,7,7,.85)!important;}

.t-yellow{ color: #eb9a26; }
.t-blue{ color: #026ebb;}
.t-green{ color: #4caf50;}


.map-pins-component { margin-top: 60px; position: relative;}
.map-wrapper-pic{display: none; }
@media (max-width:767.98px) {
.map-pins-component { display: none;}
.map-wrapper-pic{display: block; margin:20px  auto;}
}


.map-pins-component .map-image {  max-width: 100%; opacity: 0.3;}
.map-pins-component .pin { position: absolute; display: inline-block; text-align: center;  z-index: 10;  transition: 0.5s; transform: scale(1) translateY(0); cursor: pointer; perspective: 300px; transform: rotateX(25deg); transform-origin: 50% 100%;}

 .map-pins-component .pin:hover, .map-pins-component .pin.is-opened {  transition: 0.5s; transform: scale(1.1) translateY(0);  z-index: 30;}
.map-pins-component .pin:hover .pin-label span, .map-pins-component .pin.is-opened .pin-label span { background: #FFF1C6; transition: 0.5s;position: relative;}
 
.map-pins-component .pin-icon {  width: 40px; position:relative;  }
.map-pins-component .pin-label { color: white; text-align: center;position:relative; width: 100%; }
.map-pins-component .pin-label span {transition: 0.2s; margin-top: 40px; margin-left: 120px;background-color:transparent; padding: 5px 8px;display: inline-block;border-radius: 20px;font-size: 14px;font-weight: bold;letter-spacing: 2px;}
 
#map-2.map-pins-component .pin-label { color: white; text-align: center; position:relative; width: 100%; min-width: 300px; }

#map-2.map-pins-component .pin-label span.left {position:absolute; left: -100px; top:-100px;}
#map-2.map-pins-component .pin-label span.top {position:absolute; left: -200px; top:-100px;}
#map-2.map-pins-component .pin-label span.bottom {position:absolute; left: 30px; top:-40px;}
#map-2.map-pins-component .pin-label span.left-bottom {position:absolute; left: -180px; top:-30px;}


.map-pins-component .pin-1-1{  left: 5%; top: 42%;}
.map-pins-component .pin-1-2{ left: 10%; top: 17%;}
.map-pins-component .pin-1-3{ left: 19%; top:58%;}
.map-pins-component .pin-1-4{ left: 41%; top: 58%;}
.map-pins-component .pin-1-5{ left: 75%;  top: 48%;}



#map-2.map-pins-component .pin-2-1{ left: 4%; top: 70%;}
#map-2.map-pins-component .pin-2-2{ left:8%; top: 55%;}
#map-2.map-pins-component .pin-2-3{ left:11%; top:57%;}
#map-2.map-pins-component .pin-2-4{ left: 8%; top: 74%;}
#map-2.map-pins-component .pin-2-5{ left: 39%;  top:68%;}

#map-2 .pulse { left: 45%; top: -34px; margin: 8px 0px 0px -10px; z-index: -2;}





.pin-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border:solid 2px rgba(255,255,255,.5);
   position: absolute;
  left: 50%; 
  top: 50%;
  margin: -20px 0 0 -20px;
  -webkit-animation-name: bounce;
  -moz-animation-name: bounce;
  -o-animation-name: bounce;
  -ms-animation-name: bounce;
  animation-name: bounce;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  -ms-animation-duration: 1s;
  animation-duration: 1s;
}


 #map-2 .pin-dot {  top:70%;}
.pin-dot-red {background:rgba(201,7,7,.5)!important}
.pin-dot-yellow {background:rgba(235, 154, 36,.5)!important}
.pin-dot-green {background:rgba(76, 175, 80,.25)!important;}
.pin-dot:after {
  content: '';
  width: 12px;
  height: 12px;
  margin: 1px 0px 0px 1px; left: 5%; top:5%;
  background: rgba(255,255,255,.1);
  position: absolute;
  border-radius: 50%;
}
.pulse {
  border-radius: 50%; border: solid 1px rgba(255,255,255,.5);
  height:30px;
  width: 30px;
  position: absolute;
  left: 45%;
  top: 3%;
  margin: 8px 0px 0px -12px;
  z-index: -2;
}
.pulse:after {
  content: "";
  border-radius: 50%;
  height: 50px;
  width: 50px;
  position: absolute;
  margin: -15px 0 0 -22px;
  -webkit-animation: pulsate 1s ease-out;
  -moz-animation: pulsate 1s ease-out;
  -o-animation: pulsate 1s ease-out;
  -ms-animation: pulsate 1s ease-out;
  animation: pulsate 1s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-box-shadow: 0 0 1px 2px rgba(255,255,255,.5);
  box-shadow: 0 0 1px 2px rgba(255,255,255,.5);
  -webkit-animation-delay: 1.1s;
  -moz-animation-delay: 1.1s;
  -o-animation-delay: 1.1s;
  -ms-animation-delay: 1.1s;
  animation-delay: 1.1s;
}
@-moz-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-o-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    filter: alpha(opacity=0);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-moz-keyframes bounce {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-2000px) rotate(-45deg);
    -moz-transform: translateY(-2000px) rotate(-45deg);
    -o-transform: translateY(-2000px) rotate(-45deg);
    -ms-transform: translateY(-2000px) rotate(-45deg);
    transform: translateY(-2000px) rotate(-45deg);
  }
  60% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(30px) rotate(-45deg);
    -moz-transform: translateY(30px) rotate(-45deg);
    -o-transform: translateY(30px) rotate(-45deg);
    -ms-transform: translateY(30px) rotate(-45deg);
    transform: translateY(30px) rotate(-45deg);
  }
  80% {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -moz-transform: translateY(-10px) rotate(-45deg);
    -o-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(-45deg);
    -moz-transform: translateY(0) rotate(-45deg);
    -o-transform: translateY(0) rotate(-45deg);
    -ms-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
  }
}
@-webkit-keyframes bounce {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-2000px) rotate(-45deg);
    -moz-transform: translateY(-2000px) rotate(-45deg);
    -o-transform: translateY(-2000px) rotate(-45deg);
    -ms-transform: translateY(-2000px) rotate(-45deg);
    transform: translateY(-2000px) rotate(-45deg);
  }
  60% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(30px) rotate(-45deg);
    -moz-transform: translateY(30px) rotate(-45deg);
    -o-transform: translateY(30px) rotate(-45deg);
    -ms-transform: translateY(30px) rotate(-45deg);
    transform: translateY(30px) rotate(-45deg);
  }
  80% {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -moz-transform: translateY(-10px) rotate(-45deg);
    -o-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(-45deg);
    -moz-transform: translateY(0) rotate(-45deg);
    -o-transform: translateY(0) rotate(-45deg);
    -ms-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
  }
}
@-o-keyframes bounce {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-2000px) rotate(-45deg);
    -moz-transform: translateY(-2000px) rotate(-45deg);
    -o-transform: translateY(-2000px) rotate(-45deg);
    -ms-transform: translateY(-2000px) rotate(-45deg);
    transform: translateY(-2000px) rotate(-45deg);
  }
  60% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(30px) rotate(-45deg);
    -moz-transform: translateY(30px) rotate(-45deg);
    -o-transform: translateY(30px) rotate(-45deg);
    -ms-transform: translateY(30px) rotate(-45deg);
    transform: translateY(30px) rotate(-45deg);
  }
  80% {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -moz-transform: translateY(-10px) rotate(-45deg);
    -o-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(-45deg);
    -moz-transform: translateY(0) rotate(-45deg);
    -o-transform: translateY(0) rotate(-45deg);
    -ms-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
  }
}
@keyframes bounce {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-2000px) rotate(-45deg);
    -moz-transform: translateY(-2000px) rotate(-45deg);
    -o-transform: translateY(-2000px) rotate(-45deg);
    -ms-transform: translateY(-2000px) rotate(-45deg);
    transform: translateY(-2000px) rotate(-45deg);
  }
  60% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(30px) rotate(-45deg);
    -moz-transform: translateY(30px) rotate(-45deg);
    -o-transform: translateY(30px) rotate(-45deg);
    -ms-transform: translateY(30px) rotate(-45deg);
    transform: translateY(30px) rotate(-45deg);
  }
  80% {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -moz-transform: translateY(-10px) rotate(-45deg);
    -o-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(-45deg);
    -moz-transform: translateY(0) rotate(-45deg);
    -o-transform: translateY(0) rotate(-45deg);
    -ms-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
  }
}

 /*ms-title-2  樣式
=================================*/
.cms-name { width:100%;  margin:0px;  padding:30px 0px; display: flex;  flex-wrap: wrap; justify-content: flex-start; flex-direction: column;  position: relative; }
.cms-name h2{ width: 100%;  display: block; margin:0px; font-size: 2.5rem; font-weight:700; color:#202287!important;  }
.cms-name h3{ font-size: 2rem; font-weight:700;   }
.cms-name p{ width: 100%; display: block;margin:0px; font-size:0.9rem; font-weight: 700; color: #bfa571!important;   letter-spacing: 1px; }
.cms-name span{ width:100%; display: block;margin:0px; font-size: 0.95rem; font-weight: 700; color:#3884c7;  }

.sec1 { position: relative; display: -webkit-box; display: -ms-flexbox;  display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;  margin-bottom: 100%;  width: 100%;  min-height: 800px; height: calc(100vh - 130px); background-color: #fff;}
.sec1.unlock { margin-bottom: 0; }
.fixblk { position: fixed; top: 0; z-index: -1; margin-top: 250px;  width: 100%; background: #000; }
.fixblk.unlock { position: relative;  margin-top: 110px;  z-index: 5; }
 
.spec-item  { max-width: 960px; width: 100%!important;display: block;margin:20px auto; padding:50px 0px 80px 0px; }
 

/*.spec-table { max-width: 100%; width: 960px!important;display: block;margin:0px auto 60px auto; border-collapse: separate; background: #fff;border-radius: 15px;  }
 .spec-table thead{ background:#3D4081;   }
.spec-table tbody{ }
.spec-table th:first-child{ border-radius:15px 0px 0px 0px; }
.spec-table th:last-child{ border-radius:0px 15px 0px 0px; }
.spec-table th { padding:10px; font-size: 1.063rem; font-weight: 700; color: #fff; }
.spec-table td { padding:10px; font-size: 1.063rem; border-right:solid 1px #d0d2f1; border-bottom: solid 1px #d0d2f1;}
.spec-table td:last-child { border-right:none; }
.spec-table tr:last-child td{  border-bottom:none;}
.spec-table.table-h {  height: 500px; overflow-y: auto; display: block; } 
  @media (max-width: 820px) {
.spec-table { display: block; width: 100%;  overflow-x: auto;  }
.spec-table td { white-space: nowrap;}
 
} */

 
.table-h{ width:100%; max-width: 960px; table-layout: fixed; }
.tbl-header{ color: #fff;background: -webkit-linear-gradient(left,#1f2387, #00bcd4); background: linear-gradient(to right,#1f2387, #00bcd4);border-radius: 25px 25px 0px 0px; }
.tbl-content{ height:300px; overflow-x:auto; margin-top: 0px;  border: 1px solid #ddddec; border-radius:0px 0px 0px 25px;  }
.table-h tbody{ background-color: #fff;}
.table-h th{ padding: 20px 15px; text-align: left; font-weight: 700; font-size: 0.9375rem; color: #fff; border-left: solid 1px rgba(255,255,255,0.5); text-transform: uppercase;}
.table-h td{ padding: 15px; text-align: left; vertical-align:top; font-weight: 700; font-size: 1rem;  line-height: 1.35rem; color: #000; border-bottom: solid 1px rgba(0,0,255,0.1); border-left: solid 1px rgba(0,0,255,0.1);}
/*.table-h tr td:nth-child(even) { background-color:#F8F8F8;}
.table-h tr td:first-child{  background-color: #EAF3F3; }
*/ 

.table-h ul{ display: block; width: 100%; margin: 0px; padding:0px 0px 0px 5px;  }
.table-h ul li{margin: 0px; padding: 0px 0px 5px 0px; font-size: .9rem;  line-height: 1.35rem;}
.tr-color-1 { background-color:#f4f4f4;}
.tr-color-2{  background-color:#edf7ff; }
tbody:hover tr:hover td { color:#324960; background:#EAF3F3;} 
::-webkit-scrollbar { width: 8px;} 
::-webkit-scrollbar-track {  -webkit-box-shadow: inset 0 0 6px rgba(31,35,135,0.3); } 
::-webkit-scrollbar-thumb {background-color:rgba(31,35,135,1);  -webkit-box-shadow: inset 0 0 6px rgba(31,35,135,1); }
 
 @media (max-width: 820px) {
 .table-h { display: block; width: 100%;  overflow-x: auto; }
 .table-h td { white-space: nowrap;}   
 
}