/* CSS Document */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; }

/** font-family:=================================*/
.txt-ch{font-family:'Noto Sans TC','Microsoft JhengHei',"sans-serif"; }
.txt-en{font-family: 'Nunito',"sans-serif"; }
.color-white{color: #fff!important; }
.color-bk{color:#4d4d4d!important; }

.cms-wrapper { position: relative; margin-right: auto; margin-left: auto; width: 100%; padding-right: 0px; padding-left:0px; max-width: calc((100% - 40px)/12*12 + 40px)}
@media (min-width:1200px) {
.cms-wrapper { padding-right:20px; padding-left: 20px;max-width: 1280px; }
}
@media (min-width:1600px) {
.cms-wrapper { padding-right: 40px; padding-left: 40px; max-width: 1440px; }
}
.cms-wrapper-full { position: relative; margin-right: auto; margin-left: auto; width: 100%; padding-right: 0px; padding-left: 0px; max-width: calc((100% - 40px)/12*12 + 40px)}
@media (min-width:1002px) {
.cms-wrapper-full { padding-right: 10px; padding-left: 10px;   }
}
@media (min-width:768px) {
.cms-wrapper-full { padding-right: 10px; padding-left: 10px;   }
}
@media (min-width:1920px) {
.cms-wrapper-full{ padding-right: 40px; padding-left: 40px; }
}
 
 
/**banner=================================*/
.cms-main-banner { width: 100%; max-width:100%; height: auto; margin:0px auto; padding:0px;  position: relative; z-index: 2;  }
.cms-main-banner::before{ content: "";position: absolute; width: 100%; height: 240px;bottom:-2px; left:0px; background: url("../images/index/mask.svg") no-repeat left top; background-size: cover; z-index:4; }
.cms-main-banner .imgSliderBox { position: relative; z-index:0;width: 100%; display: flex; flex-wrap: wrap; }
.cms-main-banner img{ display: block; width: 100%; max-width: 100%;  height: auto; position: relative;  -webkit-animation: zoom 6s ease-in-out; -moz-animation: zoom 6s ease-in-out; -o-animation: zoom 3s ease-in-out; -ms-animation: zoom 6s ease-in-out; animation: zoom 6s ease-in-out;animation-iteration-count:infinite;}
.cms-main-banner .slick-prev { left:0;z-index: 1; }
.cms-main-banner .slick-next { right:0;z-index: 1;  }
.cms-main-banner .slick-dots { width: 100%; left:-130px;  bottom:2%!important; position: absolute;  flex-direction: row;z-index: 999;  }

@media (max-width: 1024px) {
.cms-main-banner::before{ height: 200px; background-position: center bottom; background-size: 100% auto;;  }
}
@media (max-width: 882px) {
.cms-main-banner::before{ height: 220px; bottom:-2px;  }
}
@media (max-width: 767.98px) {
.cms-main-banner::before{ width: 100%; height: 140px;bottom:-2px;   }
 .cms-main-banner .slick-dots { right:0px;}
}
@media (min-width: 1440px) {
.cms-main-banner::before{ height: 260px;}    
}
 
@media (min-width: 1560px) {
.cms-main-banner::before{   height: 280px; }   
}
 @media (min-width: 1760px) {
.cms-main-banner::before{  height: 300px; }    
}
@media (min-width: 1920px) {
.cms-main-banner::before{   height: 360px; }   
}
@media (min-width: 1960px) {
.cms-main-banner::before{   height: 360px; }   
}

@media (min-width:2300px) {
.cms-main-banner::before{ height: 440px; }   
}

.slider-item-img img { display: block;  -webkit-animation: zoom 3s ease-in-out; -moz-animation: zoom 3s ease-in-out; -o-animation: zoom 3s ease-in-out; -ms-animation: zoom 3s ease-in-out; animation: zoom 3s ease-in-out;}
.cms-main-banner .cms-sloga { width:40%; max-width: 550px; position: absolute; display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; z-index: 9;}   
.cms-main-banner .cms-sloga h2 {margin-bottom:0px;  width: 100%; display: block; font-size: 3.25rem;  font-weight:900;  color:#d1322a; word-wrap:break-word; position: relative;z-index: 1;}
.cms-main-banner .cms-sloga p { width: 100%;  font-size: 2.35rem; font-weight:900; line-height:2rem; color:#fff; text-align: left;word-wrap:break-word; word-break: normal; }

.cms-sloga-1 { left:10%; top:36%;  }   
.cms-sloga-2 { left:60%; top:36%;  }   
.cms-sloga-3 { left:50%; top:36%;  }   
@media (min-width:1600px) {
.cms-main-banner .cms-sloga { width:40%; max-width: 640px;}      
.cms-main-banner .cms-sloga h2 { font-size: 3.5rem; }
}

@media (max-width: 1024px) {
.cms-main-banner .cms-sloga { width:60%; max-width: 700px;}      
    
.cms-sloga-1 { left:10%; top:26%;  }   
.cms-sloga-2 { left:60%; top:26%;  }   
.cms-sloga-3 { left:50%; top:26%;  }   
}
@media (max-width: 767.98px) {
.cms-main-banner .imgSliderBox { width: 100%; height:420px; }
.cms-main-banner .cms-sloga { width:80%; max-width: 600px; position: absolute; left:20px; top:auto;bottom:30%;  }    
.cms-main-banner .cms-sloga h2 { margin-bottom: 5px; width: 100%;height: auto; font-size: 2.5rem; line-height: 2.15rem; }
.cms-main-banner .cms-sloga p {  font-size: 1.75rem;  }
.type { animation:none; }
.animated.type { animation:none;}
} 
 .type { -webkit-animation-name: type; animation-name: type; -webkit-animation-timing-function:cubic-bezier(0.250, 0.460, 0.450, 0.940) ; animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940) ;}
.animated.type { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;}
 @keyframes zoom {
0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
50% { -webkit-transform: scale(1.02); transform: scale(1.02);  opacity: 1; }
100% { -webkit-transform: scale(1); transform: scale(1);  opacity: 1; }
 }
@-webkit-keyframes type {
0% { -webkit-transform: translateX(600px); transform: translateX(600px); opacity: 0; }
100% { -webkit-transform: translateX(0);  transform: translateX(0); opacity: 1; }
}
@keyframes type {
0% {-webkit-transform: translateX(600px); transform: translateX(600px); opacity: 0; }
100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}
@keyframes zoomin {
0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
50% { -webkit-transform: scale(1.01); transform: scale(1.01);  opacity: 1; }
100% { -webkit-transform: scale(1); transform: scale(1);  opacity: 1; }
}
 /*-------------------*/
/***** 關於我們純文字區塊 *****/
/*------------------*/
 .cms-main-about{position: relative; z-index: 0; padding:15px 0; margin: 0; background: url("../images/index/bg-dot.svg") no-repeat left top; background-size: 30% auto; }
.cms-main-about-box{  width: 100%;  margin: auto;  display: flex; flex-wrap: wrap; justify-content: space-between; }
.cms-main-about-txt{width: 50%; margin:0 ; padding:30px 40px; line-height:2.5rem;  color:#000;}
.cms-main-about-txt p{margin:10px 0px 30px 0px;font-size: 1.125rem; line-height:1.85rem;  font-weight: 500; }
.cms-main-about-pic{width:calc(50% - 2%); margin:0 0 auto 2%; padding:0px 15px; display: flex; flex-wrap: wrap;  text-align: right;position: relative; z-index:9;  }
 .cms-pic{width:calc(100% - 110px); position: relative; display: flex; justify-content: center; align-items:center; align-self: center; margin: auto; z-index: 3; border-radius: 99rem;}
.cms-pic figure{margin:-10% auto 0px auto; display: flex;flex-wrap: wrap; justify-content: center; }
.cms-pic img{ width: 100%; max-width: 100%; border-radius: 99rem; border: 10px solid #fff;box-shadow: rgb(50 50 93 / 25%) 0px 50px 100px -20px, rgb(0 0 0 / 30%) 0px 30px 60px -30px;}
.feature-icon{ width: 110px; margin: 0;padding: 0; position: relative; list-style: none; z-index: 4;} 
.feature-icon li { width: 100%;margin-bottom: 30px;  display: flex; flex-wrap: wrap;  }
.feature-icon i{width: 80px; height: 80px; display: block; margin: auto; }
.feature-icon sapn{width: 100%;margin: 0;font-size: 0.85rem;line-height: 1.35rem; text-align: center; font-weight: 700; color:#000; word-break: normal; word-wrap:normal; } 
.feature-icon li:nth-child(1){margin-left: 50%!important;}
.feature-icon li:nth-child(3){margin-left: 20%!important;}
.feature-icon li:nth-child(4){margin-left: 50%!important;}
.feature-1{background: url("../images/index/icon-1.svg") no-repeat center top;}
.feature-2{background: url("../images/index/icon-2.svg") no-repeat center top;}
.feature-3{background: url("../images/index/icon-3.svg") no-repeat center top;}
.feature-4{background: url("../images/index/icon-4.svg") no-repeat center top;}
 

.cms-main-about-pic::before { display: block; content: ''; width: 490px; height:490px; position: absolute; left: 96px; top:  20px;  z-index: 0; border:3px solid rgba(209, 50, 42, .1); border-left-color: rgba(209, 50, 42,.8);animation: loader-spin 3s infinite linear; vertical-align: top;  border-radius: 50%; opacity:0.5;  }
.cms-main-about-pic::after { display: block; content: ''; width: 540px; height:540px; position: absolute; left: 70px; top: 0px; z-index: 1;  border: 1.5px solid rgba(208, 49, 42,.2); border-left-color: rgba(208, 49, 42,1); animation: loader-spin 2s infinite linear; vertical-align: top; border-radius: 50%; opacity:0.75;}
@keyframes loader-spin {
0% {  transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}

@media (max-width: 820px) {
.cms-main-about-box{padding:0px 30px;}
.cms-main-about-txt{width: 100%; margin:0 ; padding:30px 15px; line-height:2.5rem;  color:#000;}
.cms-main-about-pic{width:100%;  padding:0px;}
.cms-pic figure{margin-top: -10%;  justify-content: center;}
.cms-pic img{ width:80%; max-width: 100%;  } 
.cms-main-about-pic::before { left: 96px; top: -20px;}
.cms-main-about-pic::after { left: 70px; top: -44px;}
}

@media (max-width: 767.98px) {
.cms-main-about-box{padding:0px 15px;}
.cms-main-about-pic{ flex-direction: column; justify-content: center;}   
.cms-pic{width:100%; order: 1;}    
.feature-icon{ width: 100%;display: flex; flex-wrap: wrap; justify-content: flex-start; order: 2;}    
.feature-icon li { width: calc(100%/2);margin: 0px; } 
.feature-icon li:nth-child(1){margin-left: auto!important;}
.feature-icon li:nth-child(3){margin-left:auto!important;}
.feature-icon li:nth-child(4){margin-left: auto!important;}
.cms-pic img{ width:100%; max-width: 100%;  }     
}
@media (max-width: 576px) {
.cms-main-about-pic::before, .cms-main-about-pic::after { display: none;}
}
 /*----------------------------------------/
產品清單頁  cms-main-product-item  
----------------------------------------*/
.cms-main-product { width: 100%; padding:50px 15px;  margin:0 auto; position: relative;background:url("../images/index/mask-2.png") no-repeat left top; background-size: 100% auto;   }
.cms-main-product-item { width:100%; margin:0px auto;  padding:20px 0px; display: flex; flex-wrap: wrap; }
.cms-main-product-item li { width: calc( 100% - 30px); margin:0px 15px; padding:0px; transform: scale(0.8);  display: flex; flex-wrap: wrap;align-self: flex-start;  align-content: flex-start; align-items: flex-start;  position: relative; z-index: 1; list-style: none;  transition: all 0.3s linear 0s;}
.cms-main-product-item li figure{ position: relative; width:100%; height: auto; margin-bottom:0px; overflow: hidden; background-color: transparent;  transition: all 0.5s ease 0s; }
.cms-main-product-item li img {  width: 100%; max-width: 100%;  transition: all .35s ease;}
.cms-main-product-item li:hover{box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}
.cms-main-product-item li:hover img { transform: scale(1.1);  opacity: 1; }
.cms-main-product-item .cms-main-product-inner{  width: 100%; display: flex; flex-wrap: wrap;padding: 10px 20px;   position: relative;} 
#cms-main .cms-main-product-item .cms-main-product-inner h3 a{ width: 100%; min-height:52px; font-weight:700; font-size:1.188rem;  color: #000; line-height:1.5rem; overflow: hidden; white-space:pre-wrap;
word-break: normal;word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }
#cms-main .cms-main-product-item li .cms-main-product-inner p{ width: 100%; margin: 10px 0px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; overflow: hidden; white-space:pre-wrap;
word-break: normal;word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;} 
 
.cms-main-product-item li:hover .btn-area { visibility: visible; opacity: 1; transform: translateY(0) }
.btn-area { width: 100%; background-color: #d1322a; display: flex; position: relative; visibility: hidden;  opacity: 0; transition: all .35s ease;  transform: translateY(10px);}
.btn-area:after { content: ""; display: block; width: 1px; height: 1.375em;  border-left: 1px solid #2c2c2c; position: absolute; left: 50%; top: 50%; transform: translateY(-50%)}
.btn-area .btn {  display: block;  width: 50%; text-align: center;  padding: 10px 0; font-weight: bold; color: #fff}
.btn-area .btn:hover{ opacity: .5; }
.cms-main-product-item li.slick-current{ transform: scale(1.2);  }
.cms-main-product-item .slick-prev{left:30%;} 
.cms-main-product-item .slick-next{right:30% }
@media (max-width: 767.98px) {
.cms-main-product {  background-size: 260% auto;   }   
.cms-main-product-item .slick-prev{left:0;} 
.cms-main-product-item .slick-next{right:0 }
.cms-main-product-item li.slick-current{ transform: scale(1);  }
}
/**Application=================================*/
.cms-application { width: 100%; max-width:100%; height: auto; display: flex; flex-wrap: wrap;  justify-content: flex-end; margin:0px auto;  padding: 40px 0px; position: relative; z-index: 2;}
.cms-application-wrap{width:100%; max-width:1600px; display: flex; flex-wrap: wrap; justify-content: space-between;  margin:0px; padding:0px; background: url("../images/index/map.png") no-repeat left bottom; background-size:65% auto; overflow: hidden;}   
@media (max-width: 767.98px) {
 .cms-application{  padding: 0px 15px;}    
 .cms-application-wrap{ background-position: left bottom; background-size: 100% auto;}   
   
}
.round-slider{ width:calc(60% - 50px);margin-left:50px; display: flex;flex-wrap: wrap; justify-content: flex-start; align-content: center;position: relative;z-index: 1;}
@media (min-width: 767.98px) {
.round-slider{ width:calc(60% - 20px);margin-left:20px; display: flex;flex-wrap: wrap; justify-content: flex-start; align-content: center;}

}
@media (max-width: 767.98px) {
.round-slider{ width:100%; margin-left: 0!important; padding: 0;}
.round-slider .slick-list::before{ width: 100%!important; height: 100%!important; top: 50%!important; left: 50%!important; transform: translate(-50%,-50%); }
}
.round-slider .slick-dots li {position: absolute; }
.round-slider .slick-list { margin: auto; padding: 0px;width: 600px; height: 600px; position: relative;    }
.round-slider .slick-list::after{ content: ""; display: block; width: 600px; height: 600px;border-radius: 50%;  border:dashed 1px #E1080C;  position: absolute;top:0px;left:0px; }
.round-slider .slick-list::before{ content: ""; display: block; width: 460px; height: 460px; border-radius: 50%; background: rgba(255,238,238,.5);  position: absolute; top:12%;left:12%; }

.round-slider .slick-list li{ display: flex; flex-wrap: wrap;justify-content: center; width:100%; margin: auto; padding: 0px 20px;  position: relative;z-index: 0; -webkit-transition: all 2s linear; -moz-transition: all 2s linear; transition: all 2s linear; }
.round-slider .slick-list li figure{ width: 600px; height: 600px; margin: 5% auto; background-color: transparent; position: relative;}
.round-slider .slick-list li figure img{ width: 100%; max-width:90%; margin:auto; padding:0px;  }
 
.round-slider .inner{ width: 80%; display: block; margin:auto; padding: 0px 0px 0px 20%; position: absolute;left: auto; top:10%;  z-index: 99; }  
.round-slider .inner h3{  display: block; margin: 0px auto 5px auto ; font-size: 1.875rem; font-weight: 900; color:#d0312a; }
.round-slider .inner h4{  display: block; margin: 0px auto; font-size: 1.5rem; font-weight: 500; color:#000;}

@media (min-width: 767.98px) {
.round-slider .slick-list {  width: 740px; height: 740px;  }
.round-slider .slick-list::after{  width: 740px; height: 740px; }
.round-slider .slick-list::before{  width: 600px; height: 600px;  top:10%;left:10%; }
.round-slider .slick-list li figure{ width: 740px; height: 740px;overflow: hidden;}

}


@media (min-width: 768px) {
.round-slider .slider-paging-number li:nth-child(1){ margin-top:20%!important; margin-left: 100%!important; } 
.round-slider .slider-paging-number li:nth-child(2){ margin-top:-10%!important; margin-left: 10%!important;}   
.round-slider .slider-paging-number li:nth-child(3){ margin-top:20%!important; margin-left: -40%!important;}   
.round-slider .slider-paging-number li:nth-child(4){ margin-top:20%!important; margin-left: -50%!important;}   
.round-slider .slider-paging-number li:nth-child(5){ margin-top:15%!important; margin-left: -20%!important;}   
.round-slider .slider-paging-number li:nth-child(6){ margin-top:15%!important; margin-left: 60%!important;}   

}

.round-slider .slider-paging-number { margin: 0; padding: 0; transform: translate(-50%, -50%); top: 46%; left:18%; list-style-type: none;   position: absolute; z-index: 9999;}
.round-slider .slider-paging-number li [type=button],.round-slider .slider-paging-number li button { width: 100px!important; height:100px!important; border-radius:99rem;  position: relative; border: none;}
.round-slider .slider-paging-number li{position: relative; width: 100px!important; height:100px!important; font-size: 0;}
.round-slider .slider-paging-number li button:before{  content: ""; display: block; position: absolute;width: 100px!important; height:100px!important;  transform: translate(-7%, -32%);border-radius:99rem;  z-index: 0;   }
.round-slider .slider-paging-number li:nth-child(1) button:before{  background: url("../images/index/a-1.svg") no-repeat center top; background-size: 64px; }
.round-slider .slider-paging-number li:nth-child(2) button:before{  background: url("../images/index/a-2.svg") no-repeat center top; background-size: 64px; }
.round-slider .slider-paging-number li:nth-child(3) button:before{  background: url("../images/index/a-3.svg") no-repeat center top; background-size: 64px; }
.round-slider .slider-paging-number li:nth-child(4) button:before{  background: url("../images/index/a-4.svg") no-repeat center top; background-size: 64px; }
.round-slider .slider-paging-number li:nth-child(5) button:before{  background: url("../images/index/a-5.svg") no-repeat center top; background-size: 64px; }
.round-slider .slider-paging-number li:nth-child(6) button:before{  background: url("../images/index/a-6.svg") no-repeat center top; background-size: 64px; }
.round-slider .slider-paging-number li.slick-active button{ background-color:#ffeeee; border: solid 2px #fd7a5f; }
.round-slider .slick-slide {  position: relative; outline: none;}
.round-slider li{ display: flex; flex-wrap: wrap; justify-content: center;}

@media (max-width: 1500px) {
	.round-slider .slider-paging-number{left: 16%;}
}
@media (max-width: 1400px) {
	.round-slider .slider-paging-number{left: 13%;}
}
@media (max-width: 992px) {
	.round-slider .slider-paging-number{left: 96px;}
}



.slider-for{ width:40%;display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: stretch;   position: relative; z-index: 0;}
.slider-for .slick-slide {   text-align: center; width: 100%; height: 100%; align-items: center; justify-content: flex-end;  color: #fff; position: relative; z-index: 0;}
.slider-for li{width: 100%;  display: flex;  justify-content: flex-end;   position: relative; z-index: 0; }
.slider-for img{  width:100%; max-width: 100%; min-height: 500px;position: relative; z-index: 0; }
.slider-for:before{  content: ""; display: block; position: absolute;  width: 100%; height: 100%; left:0px; top:-60px; z-index: 0; background: url("../images/index/hexagon.png") no-repeat left top ; background-size: cover; }
 
@media (max-width: 820px) {
.slider-for{ align-items: stretch; align-self: flex-end;  }
.slider-for img{ min-height: auto;}
.slider-for:before{ width: 100%; min-height:60%; left:80px; top:-60px;  }
.round-slider .inner{ left:150px;top:10%; z-index: 99; }  
}


@media (max-width: 767.98px) {
.round-slider .slick-list { width: 420px; height: 420px;margin: auto;padding: 0px; }
.round-slider .slick-list::after{ content: ""; display: none; width: 400px; height:400px;  position: absolute; top:10px;left:10px; z-index: 0}
.round-slider .slick-list li{ width: 400px; height: 400px;margin:10px auto;  padding: 0px; }
.round-slider .slick-list li figure{ width: 380px; height: 380px; margin: auto; }
.round-slider .inner{ left:0px;top:0px; }  
.round-slider .slider-paging-number { top: 90%!important; left:50%!important;  position: absolute; width: 100%; display: flex; justify-content: center; z-index: 9999; }
.round-slider .slider-paging-number li [type=button],.round-slider .slider-paging-number li button { width: 60px!important; height:60px!important;    }
.round-slider .slider-paging-number li:nth-child(1) button:before{ background-size: 48px; background-position:center center;top: 52%;left: 50%;transform:translate(-50%, -50%);width: 60px!important;height: 60px!important;}
.round-slider .slider-paging-number li:nth-child(2) button:before{ background-size: 48px; background-position:center center;top: 52%;left: 50%;transform:translate(-50%, -50%);width: 60px!important;height: 60px!important;}
.round-slider .slider-paging-number li:nth-child(3) button:before{ background-size: 48px; background-position:center center;top: 52%;left: 50%;transform:translate(-50%, -50%);width: 60px!important;height: 60px!important;}
.round-slider .slider-paging-number li:nth-child(4) button:before{ background-size: 48px; background-position:center center;top: 52%;left: 50%;transform:translate(-50%, -50%);width: 60px!important;height: 60px!important;}
.round-slider .slider-paging-number li:nth-child(5) button:before{ background-size: 48px; background-position:center center;top: 52%;left: 50%;transform:translate(-50%, -50%);width: 60px!important;height: 60px!important;}
.round-slider .slider-paging-number li:nth-child(6) button:before{ background-size: 48px; background-position:center center;top: 52%;left: 50%;transform:translate(-50%, -50%);width: 60px!important;height: 60px!important;}
.slider-for{ width:100%;right:0!important; top:20px; position: absolute; z-index: 0;margin-bottom: 50px;}
.slider-for img{ width: 100%; min-height:300px; z-index: 1;  }
.slider-for:before{ width: 100%; height: 100%; left:0; top:0px;z-index: 0; /*display: none;*/}
.round-slider .inner h3{ font-size: 1.5rem; color: #000;}
.round-slider .inner h4{  font-size: 1.15rem; color: rgba(0,0,0,.5);}
}

@media (max-width: 576px) {
.round-slider .slick-list { width: 100%; height: 100%; }
}

@media (max-width: 430px) {
.round-slider .slider-paging-number{flex-wrap: wrap;}
.round-slider .slider-paging-number li{width: calc(100% / 3)!important;height: 80px!important;}
}
/*-------------------*/
/***** news *****/
/*------------------*/
 .cms-news-wrap { width: 100%; max-width:100%; height: auto; display: flex; flex-wrap: wrap;  justify-content: flex-end; margin:0px auto;  padding: 40px 0px; position: relative; z-index: 0; background:#efefef;}
.cms-news-wrap::before{content: "NEWS & EXHIBITIONS";display: block; position:absolute; z-index: 2; left:0px; top:-150px;  font-size:3rem; font-weight: 900;color:#ebebeb; writing-mode: vertical-lr;text-orientation: mixed;}
.cms-news-wrap::after { width:50%; height:100%; top:0px;  left: 0; content: ""; position: absolute; z-index: 0; display: block;   background:#f5f5f5; } 
.cms-news-wrap .cms-wrapper{ position: relative; z-index: 2; }
.cms-news-wrap .cms-title-2{ width: 60%;}
.cms-news-box { width: 100%; max-width: 900px; margin: 10px auto;  padding:0px; display: flex;  flex-wrap: wrap;  justify-content:center; position: relative; z-index: 1; }

.cms-news-box-item{width: 50%; }



.cms-main-news-list { width: 100%; max-width: 400px; margin: 10px auto;  padding:0px; display: flex;  flex-wrap: wrap;  justify-content:center; position: relative; z-index: 1; }
.cms-main-news-list li{ display: flex; flex-wrap: wrap;flex-direction: column; width:100%; margin: 20px auto; padding:0px; ; box-sizing: border-box;  overflow: hidden; list-style: none;  transition: all 0.5s ease 0s; position: relative; }
.cms-main-news-list li:hover{ }
.cms-main-news-list figure {width: 100%;  max-width: 400px; height: auto; position: relative; overflow: hidden;  }
.cms-main-news-list figure img {width: 80%;max-width: 100%; padding: 20px; position: relative; overflow: hidden;  background-color:#efefef; transition: all 0.5s ease-in-out;}
.cms-main-news-list figure:hover img { opacity: .5;border-color: #df7475;  transform: scale(1.15); }
.listDateBox { display: flex; align-items: center; flex-wrap: wrap;  }
.listDateBox .date,.listDateBox .category {  font-size: 0.875rem;  font-weight: 400; color: #c3262c;}
.listDateBox .category {  position: relative;  margin-left: 5px; padding-left: 5px; text-transform: uppercase;}
.listDateBox .category::before {  content: "";  position: absolute; left: 0; margin-top: 10px;  width: 1px; height: 12px; background-color: #aaa;}
.listDateBox .mTitle { position: relative; padding-left: 18px; margin-left: 7px;  font-size: 13px; letter-spacing: 0.02em;  color: #aaa;}
.listDateBox .mTitle::before { content: ""; position: absolute; left: 0;  top: 10px;  width: 12px;  height: 1px; background-color: #e1e1e1;}

.new-tag { display: flex; flex-wrap: wrap; flex-direction: row; bottom:0px; left: 20px;  width: auto;padding:5px 10px; font-size: 0.75rem;  font-weight: 700; border-radius:5px;  color: #fff; transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; overflow: hidden; text-transform: capitalize;  word-break: keep-all;   z-index: 9;  position: absolute; }
.new-tag-01{ background:#c3262c;}

.cms-main-news-list .news-box {width: 100%; margin: 0;  padding:20px ;  position: relative;  box-sizing: border-box;display: -ms-flexbox; display: flex; flex-wrap: wrap; align-self: center;   color:#353535; font-size: 14px; font-weight: 400; line-height: 1.8rem; letter-spacing: 0.5px; }
 .cms-main-news-list p { width: 100%; height: 52px; font-size: 0.875rem; line-height: 1.7142857143rem;  letter-spacing: .05em;color:#999; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word;}
.cms-main-news-list p a{ color:#000;   }

.cms-main-news-list  h3 a:before { content: ""; position: absolute;width: 100%; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #000!important;  -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.cms-main-news-list h3 a:hover, .cms-application-list h3 a:focus, .cms-application-list h3 a:active {  color: #fff!important; }
.cms-main-news-list  h3 a:hover:before, .cms-application-list h3 a:focus:before, .cms-application-list h3 a:active:before { -webkit-transform: scaleX(1); transform: scaleX(1);}
.cms-main-news-list h3 {position: relative;width: 100%; height: 74px;  font-size:1.5625rem;  line-height: 2rem; font-weight:400;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word;}
.cms-main-news-list  h3 a { cursor: pointer; color: #000; padding:5px 0px; display: inline-block;  vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0);  -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}


.cms-main-news-list .slick-prev { top:-20%;left:38%;z-index: 1; }
.cms-main-news-list .slick-next {  top:-20%;right:52%;z-index: 1;  }
.cms-main-news-list .slick-dots { width: 100%;  position: absolute; justify-content: center; align-items: center; z-index: 999;  }

 @media (max-width: 767.98px) {
.cms-news-wrap { padding: 0px 15px; }  
.cms-news-wrap .cms-title{ margin-left:auto; width: 100%;}
.cms-main-news-list .slick-prev { top:50%;left:0;z-index: 1; }
.cms-main-news-list .slick-next {  top:50%;right:5%;z-index: 1;  }
.cms-news-box-item{width: 100%;  }    
 
}
 /*-------------------*/
/***** product  *****/
/*------------------*/
.cms-main-product { width:100%; padding:100px 15px 0px 15px; margin:0 auto; position: relative; z-index: 0;  }
@media (min-width: 992px) and (max-width: 1199.98px) {
.cms-main-product {  padding:100px 15px 0px 15px; }
}
@media (max-width: 1199.98px) {
.cms-main-product {  padding:100px 15px 50px 15px; }
}
@media (max-width: 768px) {
.cms-main-product {  padding:15px; }
}
/*------------video -----------------*/
.cms-main-video{width:100%;  margin:0px auto; padding:50px 0px; position:relative; z-index: 0; display: flex; flex-wrap: wrap; flex-direction: column;background:url(../images/index/bg-video.jpg) no-repeat left bottom;background-size: 100% auto; }
.video-list { width: 100%; max-width: 1440px; margin: 0 auto; padding:20px; display: flex; flex-wrap: wrap;justify-content: flex-end;  }
.video-list li { width: 100%; height: auto; margin: auto 0px; position: relative; z-index: 1; display: flex; flex-wrap: wrap;  list-style: none;  transform: scale(.6);  transition: transform 0.5s; }
.video-list li:hover{ }
.video-list li a div {padding: 20px 5px;}
.video-list li a div h3 { font-size: 0.938rem; font-weight:700; line-height: 1.6; color:#ac0b0b; }
.video-list li img{ max-width: 100%; border: solid 5px rgba(255,255,255,.2);transition: all 0.4s ease-in-out; box-shadow: 0 2px 16px 0 rgba(0,0,0,0.4); position: relative; z-index: 1; }

.video-list li.slick-current{ transform: scale(.9); }

.video-list .slick-prev {top:auto;bottom:0px;left:45%;z-index: 1; }
.video-list .slick-next {top:auto;bottom:0px;right:45%;z-index: 1;  }
 @media (max-width: 768px) {
.video-list .slick-prev {top:auto;bottom:0px;left:35%;z-index: 1; }
.video-list .slick-next {top:auto;bottom:0px;right:35%;z-index: 1;  }
     
}

/*cms-Title Styles 樣式
=================================*/
.cms-title { width: auto; height: auto; margin:0px;  padding:30px 0px;  display: flex;  align-items: flex-start; flex-wrap: wrap; flex-direction:column; }
.cms-title h1{  display: block; margin: 0 auto; font-size: 3rem; font-weight: 900; color:#d0312a;}
.cms-title h2{  display: block; margin: 0; font-size: 3rem; font-weight: 900; color:#d0312a;}
.cms-title p{ margin:0px auto; text-align: center; font-weight: 700; color:#615f5e;}
.cms-title-2 { width:100%; height: auto; margin:0 auto 2% auto;  padding-top: 0px;  padding-bottom: 0; display: flex;  flex-wrap: wrap; justify-content: center; align-items: center;  flex-direction:column; background: none;}
#cms-main .cms-title-2 p{ width: 63%;  margin:10px auto;  font-size:1.313rem;font-weight:400; text-align: center; color:#6c7280;  }
.cms-title-style{  display: block; margin: 0 auto 15px auto; font-size: 3rem; font-weight: 900; color:#d0312a;}
.cms-title-span{  font-size:1.063rem;font-weight: 700; line-height: 1.6; color: #666; margin: 0; text-align: center;} 
@media (max-width: 1024px) {
.cms-title-style{  margin-bottom:10px; }


}

@media (max-width: 767.98px) {
 .cms-title h1{  font-size: 1.875rem;  }
   
.cms-title-style{ margin-top: 0px; font-size: 1.875rem;}
.cms-title-style:after {width: 42px; height: 46px;}
#cms-main .cms-title-2 p{ width: 90%;   }
 
}

/*---------------*/
/***** btn *****/
/*---------------*/
.icon-next{background: url("../images/icon/arrow-right.svg") no-repeat left 2px;  background-size: auto;}
.cms-btn { width: auto; height: 35px; padding: 20px 40px; font-weight: 700; text-decoration: none; border: 1px solid transparent;  display: -webkit-box;  display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; cursor: pointer;  border-radius:0px;  overflow: hidden;position: relative;  }
a.cms-btn { color:#fff;   }
.cms-btn:hover {  border-color: rgba(255, 255, 255,.5);  box-shadow: 1px 1px 8px rgba(255, 255, 255, 0.4);}
a.cms-btn:hover {  color: #fff;}
.cms-btn:before { content: ""; position: absolute; top: 0; left: -100%; width: 100%;  height: 100%; background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.6), transparent); transition: all 650ms;}
.cms-btn:hover:before {left: 100%;}
a.cms-btn i {   margin-left: 10px; width:30px; height: 20px; -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
.cms-btn:hover i{ -webkit-transform: translateX(15px); transform: translateX(15px)}

@media (max-width: 768px) {
.cms-btn i { width:18px; height: 18px;  }
.cms-btn {padding: 15px;}
}

/*cms-btn-more =================================*/ 
.custom-btn-1{  width: auto; height: 35px; padding: 20px 40px; font-weight: 700; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; cursor: pointer; background-color:#d1322a; border-radius:30px;  background-size: 20px auto;  -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s  }
.custom-btn-1:hover{background:#4d4d4d; }
@media (max-width: 767.98px) {
a.cms-btn { color:#fff;   }
.custom-btn-white{ background-color: transparent}
}

/*cms-btn-white =================================*/ 
.custom-btn-white{ border: solid 1px #fff;   }
a.cms-btn.custom-btn-white{ color:#fff;  }
.custom-btn-white .icon-next{background: url("../images/icon/arrow-right-b.svg") no-repeat left 0px;  background-size:100% auto;}


/*cms-btn Styles 4====*/
.cms-btn-btnbox {position: relative;z-index:1; display: flex;   width: 100%; height: auto; margin:20px auto;  transition: all 1s;}

/* Bounce To Right */
.hvr-bounce-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-bounce-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #756b63;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {
  color: white;
}
.hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* Underline From Left */
.hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #000;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
  right: 0;
}