/* 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:=================================*/
.color-white{color: #fff!important;  }
.txt-stork { -webkit-text-stroke: 1px #c2c3c4;  -webkit-text-fill-color: transparent;}
 .wrapper { position: relative; display: block; margin:0px auto; padding: 0px 20px; width: 100%;  max-width: calc((100% - 40px)/12*12 + 40px); }
@media (min-width:1025px) {
.wrapper { padding-right: 40px; padding-left: 40px;   }
}
@media (min-width: 1201px) and (max-width: 1400px) {
.wrapper { padding-right: 20px; padding-left: 20px; max-width: 100%;}
}
@media (min-width: 1401px) {
.wrapper { padding-right: 80px; padding-left: 80px; max-width: 1440px; }
}
.wrapper-full { position: relative; display: block; margin:0px auto; padding: 0px 20px; width: 100%;  max-width: calc((100% - 40px)/12*12 + 40px); }
@media (min-width:1025px) {
.wrapper-full { padding-right: 40px; padding-left: 40px;   }
}
@media (min-width: 1201px) and (max-width: 1400px) {
.wrapper-full { padding-right: 20px; padding-left: 20px; }
}
@media (min-width: 1401px) {
.wrapper-full { padding-right: 100px; padding-left: 100px;   }
}
 

.banner{width: 100%; max-width: 100%;height: auto; margin:120px auto auto auto; display: block; padding:0px;  position: relative; }
.banner .slick-dots{ bottom: 20px}
.banner .slide { width: 100%; min-height:66vh;position: relative;}
.banner .slide .slide-img { width: 100%; height: auto;  overflow: hidden; position: relative; z-index: 1;}
.banner .slide .slide-img::before {content: ''; background:radial-gradient(circle at 35% 25%,rgb(179, 182, 194) 0,rgba(179,182,194,0.9),rgba(179,182,194,0.8) 40%,rgba(179,182,194,0.6) 90%,rgba(179,182,194,0.4) 95%,rgba(179,182,194,0.2) 100%); width: 105.098%; height: 0; padding-bottom: 105.098%; border-radius: 50%; position: absolute; left: -52%; bottom: -52%; z-index: 50; filter: blur(100px);}
.banner .slide .slide-img::after {content: ''; width: 43.09%; height: 0; padding-bottom: 50.973%; background: url("../images/idx_bn_star.png") no-repeat center / cover; position: absolute; bottom: 0; left: 0; z-index: 100;}
.banner .slide .slide-img figure img { width: 100%; height: auto;  opacity: 1 !important;  -webkit-animation-duration: 6s; animation-duration: 6s; transition: all 1s ease;}

@media (min-width: 1600px) {
.banner .slide { width: 100%;  height: auto; display: block; position: relative;}
}
@media (max-width:1200px) {.banner{ margin-top: 60px;}}
@media (max-width:1180px) {
.banner .slide {min-height: 56vh; }
.banner .slick-dots{ bottom: 20px}
}
@media (max-width:1024px) {
.banner .slide {min-height: 37vh; }
 }
@media (max-width:840px) {
 .banner{ margin-top: 60px; }
.banner .slide {  min-height:32vh; }
}
.banner .slide .slide-content { width: 55%; position: absolute;top:38%;  left: 10%; z-index: 10; transform: translate(-10%, -38%);}
.banner .slide .slide-content-headings {   text-shadow: 0px 1px 2px rgba(0,0,0,.2);  }
.banner .slide .slide-content-headings span{ color: #bb1331;font-weight:700;font-size:1.375rem; display: block;}
.banner .slide .slide-content-headings h2 { color: #bb1331; margin-bottom: 30px; font-size:2.5rem; font-weight:700; line-height:2.5rem; margin: 10px 0; text-align: left;position: relative;z-index:3; }
.banner .slide .slide-content-headings h3 { color: #000;font-size:1.875rem;line-height:3rem; font-weight: 700; margin-bottom: 10px;  }
.banner .slide .slide-content-headings p { color: #000;font-size:1rem;  font-weight: 700;  }  
@media (min-width: 1400px) {
.banner .slide .slide-content { max-width: 500px; top:55%;  left:15%; transform: translate(-15%, -55%);}
.banner .slide .slide-content-headings { transform: scale(1.25)}
}
@media (min-width: 1900px) {
.banner .slide .slide-content { top:50%;  left:20%; transform: translate(-20%, -60%);}
.banner .slide .slide-content-headings { transform: scale(1.65)}
}

@media (max-width:840px) {
.banner .slide .slide-content {top:55%; left: 15%;  }
.banner .slide .slide-content-headings h2 { font-size: 2rem;   line-height:2.35rem; margin-bottom: 10px; }
.banner .slide .slide-content-headings h3 { font-size:1rem; font-weight:700; line-height:1.5rem; letter-spacing: -0.1px;   }
}

@media (max-width:767.98px) {
.banner .slide .slide-content { width: 80%;   left:15%; top:50%; transform: translate(-15%, -50%);}
.banner .slide .slide-content-headings h2 { font-size: 2rem;   line-height:2.35rem; margin-bottom: 10px; }
.banner .slide .slide-content-headings h3 { font-size:1rem; font-weight:700; line-height:1.5rem; letter-spacing: -0.1px;   }

}
@media (max-width:640px) {
.banner .slide .slide-content-headings h2 { font-size: 1.75rem;}
.banner .slide .slide-content-headings h3 { font-size:.875rem;  line-height: 1rem; }
.banner .slide .slide-content-headings p {line-height: 1rem;}
}
@media (max-width:320px) {
 .banner .slide .slide-content { left:18%;  }   
.banner .slide .slide-content-headings h2 { font-size: 1.5rem;}
 .banner .slide .slide-content-headings .btnbox{margin: 0px;}
}

/* /////////// IMAGE ZOOM /////////// */
@media (min-width:769px) {
.banner .slide .slide-content-headings .animated { transition: all 0.5s ease;}
.banner .slider [data-animation-in] {opacity: 0;  -webkit-animation-duration: 6s; animation-duration:6s; transition: opacity 0.5s ease 0.3s;}
.zoomOutImage { -webkit-animation-name: zoomInImage; animation-name: zoomInImage;}    
}
@-webkit-keyframes zoomInImage {
from { transform: scale3d(1, 1, 1); }
to { transform: scale3d(1.1, 1.1, 1.1); }
}
@keyframes zoomInImage {
from { transform: scale3d(1, 1, 1); }
to { transform: scale3d(1.1, 1.1, 1.1); }
}
.zoomInImage { -webkit-animation-name: zoomInImage; animation-name: zoomInImage;}
@-webkit-keyframes zoomOutImage {
from { transform: scale3d(1.1, 1.1, 1.1); }
to {transform: scale3d(1, 1, 1); }
}
@keyframes zoomOutImage {
from { transform: scale3d(1.1, 1.1, 1.1); }
to { transform: scale3d(1, 1, 1); }
}

.text-content{ width: 100%; font-weight: 700; font-size:2rem!important; margin-bottom: 10px; color: #000!important; }
.text-content:first-letter{ color:#e60012;}
@media (max-width: 1199.98px) {
.text-content {  font-size:1.5rem!important;  }
}
@media (max-width:767.98px) {
.text-content{ font-size:1.25rem!important; margin-bottom: 5px;  }   
}

.main-wrap{ width: 100%; padding:0px; margin:0px auto; height: auto;  display: flex; flex-wrap: wrap;  }
.main-about{ position: relative; margin:0px; padding:80px 0px 100px 0px; display: flex; flex-wrap: wrap;justify-content: space-between; background-color: #fff; background-image:url("../images/index/bg-about-1.png"),url("../images/index/bg-about.jpg");
background-position: right top,left bottom; background-size:40%  auto,100% auto; background-repeat: no-repeat;}
.main-about .animated {  -webkit-animation-duration: 1.5s; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;}
.block {width:50%; height: auto;margin: 0; padding:0px;  position: relative;z-index: 1 }
.block-txt{width:80%; margin:60px auto; padding:0px 30px;}
.block p { width: 100%; font-size:1.125rem;  line-height:2rem; font-weight: 400;  padding:5px; margin-bottom:15px;  color:#3f3a39;  }
.block p strong{  display: block;  width: 100%; font-size: 1.313rem; line-height: 2rem; letter-spacing: 1.2px; font-weight:400;  padding:5px; margin-bottom: 10px; color: #3f3a39; }
.block-box{ width: 80%;bottom: 0px;left:0px;  position: absolute; z-index: 9; }
.post-btn{  margin-left:62.5%; }
.card-1{ width:80%; height: auto;  position: relative; z-index: 1;  }
 .card-1 img{display: block; margin: auto; }
@media (max-width:1366px) {
.block-txt{width:100%; margin:60px auto; padding:0px 30px;}
.block p {  font-size:1rem;  line-height:1.75rem;  }
}
@media (max-width: 1280px) {
 .main-about{ padding:80px 20px 40px 20px;}
.block-txt{width:100%; padding:20px;  }
 }
@media (max-width: 1180px) {
    .card-1{ width:100%; height: auto;  margin: auto;}
}
@media (max-width: 1024px) {
.main-about{ padding:40px 0px; }
.block {width:100%;margin: 0px; padding: 0px; display: block; }  
.block-txt{ padding:20px;margin: 0px;  }
.block-box{ width: 100%;}   
 
      
}
@media (max-width:992px) {
.card-1{    height: auto;  margin:10px auto; }
  

}
@media (max-width:767.98px) {
.block-txt{ margin:20px 0px; padding: 0px 20px;}   
}
@media (max-width:640px) {
 
.block p { padding:5px 0px; margin-bottom: 20px;  }    
.block-txt .btn-02{margin-bottom: 20px;}
}


 

.bg-product{background: url("../images/index/bg-pro.jpg") no-repeat left bottom #f5f5f5; background-size: cover;}
.bg-applaction{position:relative;z-index: 0; background-color: #fff}
 

/*產品清單頁  cms-main-.product-item  
----------------------------------------*/
 .produt-wrap{width:100%; padding: 0px;margin:0px auto; background-color:#018cf9;position: relative;  }

 .produt-wrap::before { content: "";  width:45%; height: 116%; background-color:#bb1331; position: absolute;left:0px; top:-10%; border-radius: 0px 100px 100px 0px;   z-index:1; }
@media (max-width: 1280px) {
.produt-wrap{ padding:20px 0px;}
.produt-wrap::before {  height: 105%;   top:-5%;   }
}
@media (max-width: 1024px) {
.produt-wrap{padding:0px; }
}
@media (max-width: 767.98px) {
 .produt-wrap::before { width: 80%; height: 102%;   top:-2%;   }   
}
 .product-item { width:100%; margin:0px auto;  padding:50px 50px 20px 50px; display: flex; flex-wrap: wrap; position: relative; }
.product-item li { width:calc(100%/3  - 20px); margin:0px 10px 20px 10px; padding:0px; z-index: 1; list-style: none;  transition: all 0.3s linear 0s; position: relative; }
.product-item li.first{ padding:50px 0px 0px 50px;     }
.product-item li .item{width:100%; margin:0px auto;  padding:0px; display: flex; flex-wrap: wrap; position: relative; overflow: hidden;}
.product-item li .item figure::before { opacity:.5; width:100%; height: 100%;  content: ""; position: absolute;z-index:99; bottom: 0px; left:0px;  background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);  } 
.product-item  li:hover  .item figure::before {  opacity: 1;} 

.product-item li figure{ width: 100%;height: 0;  padding-bottom: 100%; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s; }
.product-item li:hover img { transform: scale(1.05);  opacity: 1; }
.product-item .inner{  margin:auto; padding:20px; width:100%; position: absolute; left:0px; top:65%; z-index: 1;transition: all 0.3s ease-in-out; }
.product-item li:hover .inner{   top:35%; transition: all 0.3s ease-in-out; }

.product-item .inner .inner-title { width: calc(100% - 72px);   position: relative;padding-bottom: 5px; transition: all 0.3s ease-in-out;} 
.product-item .inner .inner-title::before { width:100%; height: 4px;  content: ""; position: absolute;z-index: 9; bottom: 0px; left:0px; display: block; background-color:#fff;  } 
.product-item .inner .inner-title::after { width:40px; height: 4px;  content: ""; position: absolute;z-index: 99; bottom: 0px; left:0px; display: block; background-color:#bb1331;  } 
.product-item .inner h3{ margin: 10px 0px; font-size:2rem;font-weight:700;color:#fff; letter-spacing: 1px;   white-space: pre-line;word-break:normal; word-wrap:break-word; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;position: relative;z-index: 99; }
.product-item .inner h3::after { width:20px; height: 4px;  content: ""; position: absolute;z-index: 99; bottom: 0px; left:0px; display: block; background-color:#bb1331;  } 
.product-item .inner h3:first-child:after { width: 36px;  height: 36px;  content: ""; position: absolute;z-index: -1; top: 0px; left: -18px; display: block; background-color:#c0002d; border-radius: 50%; } 
.product-item .inner h3 a {color:#fff; }

.product-item .inner p{ opacity: 0;margin-top: 20px; font-size:1.125rem; line-height: 1.75rem; font-weight:400; color:#312927;  overflow: hidden; white-space:pre-wrap;word-break: normal;word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;} 
.product-item li:hover p{ color:#fff;  opacity: 1;}
.product-item li .item .text-button  {position: absolute;z-index: 9; right: 0px; bottom:0px;}
 .product-item li:hover .text-button  {  filter: hue-rotate(120deg);}
.product-item .slick-prev{left:-35px;}
.product-item .slick-next{ right:0px;}

@media (max-width: 1280px) {
 .product-item {   padding:20px;  }
}

@media (max-width: 1280px) {
.product-item .inner h3{  font-size:1.75rem;   }
}

@media (max-width: 1024px) {
.product-item .inner h3{  font-size:1.5rem;}
.product-item .inner .inner-title { width: calc(100% - 40px);  }     
}
@media (max-width: 992px) {
 .product-item li { width:calc(100%/2  - 20px); margin:0px 10px 20px 10px; padding:0px; z-index: 1; list-style: none;  transition: all 0.3s linear 0s; position: relative; }
 }

 @media (max-width: 767.98px) {
  .product-item li.first{ padding:0px;     }   
 .product-item li { width: 100%; margin:0px 10px 20px 10px; padding:0px; z-index: 1; list-style: none;  transition: all 0.3s linear 0s; position: relative; }
 .product-item .inner h3{  font-size:1.175rem;}
   .product-item .inner p{  font-size:.9rem; line-height:1.375rem;}   
 }

 @media (max-width:420px) {
     
 .product-item .inner h3{  font-size:1.125rem;}
     .product-item .inner{  top:50%;  }
     .product-item li:hover .inner{ top:20%;   }
}

a.text-button,.text-button a{color: #181a86;}
.text-button { width:72px; height: 72px; border-radius:50%; display: block; background: url("../images/index/circle-up.png") no-repeat center bottom #172b7e;  margin:0px;  text-transform: uppercase;  cursor: pointer;  position: relative; transition: padding 0.3s ease}
 
@media (max-width: 1280px) {
.text-button { width:60px; height:60px;  }
}
@media (max-width: 1024px) {
.text-button { width:40px; height:40px; background-size: 40px; }
}
 
.advantage{ padding: 80px 50px; background-image: linear-gradient(to bottom, rgba(0,140,248,1) 0%, rgba(0,33,71,1) 100%); position: relative; z-index: 0;}
@media (max-width: 1024px) {
 .advantage{ padding:20px 50px;}   
}
@media (max-width:767.98px) {
 .advantage{ padding:20px;}   
}


.icon-list{width: 100%; margin:0px auto; padding:30px 0px; display: flex; flex-wrap: wrap; position: relative; z-index: 1; }
.icon-list li{width:calc(100%/2); margin:10px 0px 30px 0px;  transition: all 0s ease 0s;position: relative;list-style: none; } 
.icon-list li .item{ width: 100%; margin:0px; padding:0px 0px 0px 10px;display:flex; flex-wrap: wrap;  align-content: flex-start; }


.icon-list .item .flag { width:30%; margin-bottom: unset;}
.icon-list .item .flag img{ width:100%; max-width: 80%; height: auto; padding-right:10px; }

.icon-list .item .inner{ width:70%; padding:20px 0px 20px 50px; transition: all 0.3s ease-in-out; }
 
.icon-list .inner h3{ margin: 10px 0px; font-size:1.75rem;font-weight:700;color:#fff; letter-spacing: 1px;   white-space: pre-line;word-break:normal; word-wrap:break-word; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;position: relative;z-index: 99; }
.icon-list .inner h3:first-child:after { width: 36px;  height: 36px;  content: ""; position: absolute;z-index: -1; top: 0px; left: -18px; display: block; background-color:#c0002d; border-radius: 50%; } 
.icon-list .inner p{  margin-top: 20px; font-size:1.125rem; line-height: 1.75rem; font-weight:400; color:#fff;  overflow: hidden; white-space:pre-wrap;word-break: normal;word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;} 
 
 @media (max-width: 1280px) {
.icon-list li h3{  font-size: 1.75rem; }
.icon-list li p{font-size:.875rem; }
}
 
 @media (max-width: 992px) {
.icon-list li{width:calc(100%/2 - 20px); margin:10px 20px 30px 0px;   }      
.icon-list .item .flag {   margin-bottom: unset;}
.icon-list .item .inner{ width:100%; padding:20px 0px 20px 0px;   }
}
@media (max-width:767.98px) {
.icon-list{  padding:30px 0px ; }
.icon-list li{width:100%; margin:0px; ; } 
}

.bg-background::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(to bottom, rgba(0,140,248,1) 0%, rgba(0,140,248,.85) 30%,rgba(0,33,71,.5) 100%);}

/* ==== 底圖 === */
.bg-background { background-image: attr(src url); background-repeat: no-repeat; background-size: cover;background-position:center bottom; position: absolute;z-index: 0; top:0px; left: 0; right: 0; bottom: 0; line-height: 0;  width: 100%;   }
@media(max-width: 992px) {
.bg-background {background-position:center;}
}
/*-------------------*/
/***** 最新消息 *****/
/*------------------*/
 
.grid-left{width:30%; padding-left: 50px; padding-top: 70px;  }
.grid-right{width:70%; padding-top: 70px;  }
.grid-txt{ padding:0px; margin-bottom: 20px; }
.grid-txt p{color: #fff;font-size: 1.125rem; line-height: 1.5rem; font-weight: 700;}
 @media (max-width: 1180px) {
.grid-left{ width:35%;  padding-left: 20px; padding-right: 20px;}
.grid-right{width:65%; }    
 }

@media (max-width: 1024px) {
.grid-txt p{ font-size: 1rem; }
}


@media (max-width: 992px) {
.grid-left{ width:100%;padding-top: 20px; }
.grid-right{width:100%; margin-top: 0px; padding-top: 0px;}    
.grid-txt{ padding:0px; margin-bottom: 20px; }
    
} 





.news{ background:#fff; position: relative; padding: 50px;}
.news::before { content: ''; position: absolute;z-index: 1; top: -180px; left: 0; width: 100%;height: 450px;  background:url("../images/index/gold-line.png") no-repeat left top; background-size: 100% auto;}
@media (max-width: 1366px) {
.news::before {   top: -130px; left: 0; width: 100%;height: 400px;   background-size: 100% auto;}
}
 @media (max-width: 1024px) {
.news::before {top: -90px; left: 0; width: 100%;height: 300px;   background-size: 100% auto;}
}
 @media (max-width:767.98px) {
 .news{  padding: 50px 20px;}    
.news::before {top: -40px; left: 0;  }
}

 @media (max-width:380px) {
 .news{  padding: 50px 10px;}    
.news::before {top: -30px; }
}

.box{ width: 100%;height: 100%;margin: auto; position: relative;z-index: 1; background-color: transparent; border:10px solid transparent;}
.border-img{-moz-border-image: -moz-linear-gradient(top left,  #f3d125 0%, #c79026 100%); -webkit-border-image: -webkit-linear-gradient(top left, #f3d125 0%, #c79026 100%); border-image: linear-gradient(to bottom right, #f3d125 0%, #c79026 100%);border-image-slice: 1;}
	  
 @media (max-width:380px) {
.box{ background-color: transparent; border:5px solid transparent;}    
 .border-img{-moz-border-image: -moz-linear-gradient(top left,  #f3d125 0%, #c79026 100%); -webkit-border-image: -webkit-linear-gradient(top left, #f3d125 0%, #c79026 100%); border-image: linear-gradient(to bottom right, #f3d125 0%, #c79026 100%);border-image-slice: 1;}
}
 @media (max-width:280px) {
     .box{ background-color: transparent; border:5px solid transparent;}    
}

/*--分類new-tg --*/
.new-tag { width:auto;; font-size: 0.875rem; font-weight: 700; border-radius:30px;    }
.new-tag a{color:#fff;   padding:2px 10px    }
.new-tag-01{color:#fff; background:#053688;}
.new-tag-02{color:#fff; background:#cb60b2;}
.new-tag-03{color:#fff; background:#05babe;}
 

.news-list{width: 100%; margin: 0px;  padding: 0px; display: flex;  flex-wrap: wrap; position: relative; z-index: 1; }
.news-list li{ width:calc(100% - 20px); padding:0px 10px 10px 10px;margin: 0px 10px 30px 10px; box-sizing: border-box; list-style: none; overflow: hidden; background-color: #fff; transition: all 0.5s ease 0s; }
.news-list figure img { max-width:100%; height: auto; object-fit: cover; margin: auto; display: block; border-radius:0px;   transition: all 0.5s ease-in-out;}
.news-list figure  {width: 100%; padding-bottom: 100%; height: 0; overflow: hidden; position: relative;  z-index: 1;   object-fit: cover; margin: auto; display: block; -webkit-transition: opacity 0.35s; transition: opacity 0.35s;  }
.news-list .news-item  {width:100%; height: auto; padding: 0px; display: flex;  flex-wrap: wrap; transition: all 0.5s ease 0s;    }
.news-list .news-pic  {width:100%; height: auto; padding: 0px; overflow: hidden; position: relative;border-radius:0px;background-color: #000;  }
.news-list .news-box{position: relative;width:100%; margin: 0px;padding:5px 0px;  box-sizing: border-box;display: -ms-flexbox; display: flex; flex-wrap: wrap;align-content: flex-start }
.news-list h3 {position: relative;width: 100%; min-height: 60px;  margin:0px 0px 5px 0px; font-size:1.375rem; line-height:1.75rem; font-weight:400; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow-wrap: break-word;  }
 
.news-list a h3 { color:#002148; }
.news-list p{ font-size:1.05rem; line-height: 1.5rem; color:#000; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; }

.listDateBox{width:100%; display: flex; align-items: center; flex-wrap: wrap;  padding: 20px 0px;position: relative; }
.list-date {padding-left: 20px; ; color:#999;} 
.listBox {width: 100%; padding: 10px 0px 30px 0px; font-size: 1rem; color:#666464;  }
/*hover */
 
.news-list li:hover figure {   transform: scale(1.05);transition: all 0.5s ease 0s; }
.news-list li:hover .listDateBox:before,.news-list li:hover h3:before {   }
 .news-list a:hover h3,.news-list a:hover p,.news-list li:hover h3,.news-list li:hover p,.news-list li:hover .listDateBox{ color: #bb1331 }

.view {width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-bottom: 1px solid #e5e5e5; cursor: pointer; padding-left: 3px;}
.view:hover a { border-bottom: 1px solid #c7a26d; color: #c7a26d;}
.view:hover .circle { -webkit-animation: run 1s ease-in-out infinite;  animation: run 1s ease-in-out infinite;}
.news-list .slick-dots{bottom:10px;}
@media (max-width:1200px) {
 .news-list{  padding: 30px 0px;}
}
@media (max-width:768px) {
 .news-list li{ width:calc(100% - 20px); padding:0px ;margin: 0px 10px; }
 .news-list h3 { font-size:1rem; line-height:1.5rem;  }
 .news-list p{ font-size:.95rem;  } 
 .list-date {padding-left: 0px;width: 100%;font-size:.875rem; }    
}


/*----------------------------------------/
產品清單頁  cms-product-cate  
----------------------------------------*/
.cate { width:100%; margin:0px;  padding:0px; display: flex; flex-wrap: wrap; position: relative;z-index: 0;}
.cate li {width:100%;height: auto; margin:0px; padding:0px; position: relative; z-index: 1; list-style: none;  transition: all 0.3s linear 0s; overflow: hidden;}
.cate li img { transition: all 0.3s ease;overflow: hidden;  opacity:1;  }
 .cate li figure {display: block; vertical-align: top;  width:100%; height:auto; margin: 0px; position: relative;z-index: 3; transition: all 0.3s linear 0s; overflow: hidden;} 
 
.cate li .inner-body { width: 100%;  position: absolute; z-index: 9; left: 50%; bottom:15%; padding: 20px; -webkit-transform: translate(-50%, -15%); transform: translate(-50%, -15%); -webkit-box-sizing: border-box;box-sizing: border-box;   transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); text-align: center;  }
.cate li  h3 { width: 100%; margin-bottom: 20px; font-size:1.5rem;  font-size: min(max(3.5vw, 1.15rem),1.5rem);  letter-spacing: 3px;  line-height: 3rem; font-weight:700; text-align: center;  color:#fff; word-wrap: normal; text-transform: uppercase; -webkit-text-stroke: 1px rgba(255,255,255,.15); text-shadow: 0px 2px 3px rgba(0,86,57,.5);   }
 @media (max-width:1180px) {
.cate li .inner-body { left: 50%; bottom:0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);  } 
.cate li h3 {   font-size:1.375rem; line-height: 2rem; text-align: center;   }    
}

@media (max-width: 767.98px) {
.cate li{width:100%;height: auto; margin:0px;}
.cate li h3 { margin-bottom: 10px; font-size:1.35rem; line-height: 1.75rem;}
 .cate li .inner-body {   bottom:10%; -webkit-transform: translate(-50%, -10%); transform: translate(-50%, -10%);  } 
   
}

 @media (max-width:280px) {
.cate li .inner-body { left: 50%; bottom:0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);  } 
}

.bg-cate{ background: -webkit-gradient(linear, left bottom, left top, color-stop(70%, #e7ecf0), color-stop(70%, #fff), to(#fff));  background: linear-gradient(0deg, #e7ecf0 70%, #fff 70%, #fff 100%); }



    /*cms-Title Styles 樣式
=================================*/
.title { width: 100%; height: auto; margin:0px auto 30px auto;padding: 0px; display: flex;flex-wrap: wrap;  flex-direction:column; position: relative; } 
.title h1{ width: 100%;display: block;margin: 0; font-size: 4.5rem; font-size: min(max(3vw, 2rem), 4.5rem); font-weight:900; color:#bc1331;  letter-spacing:1px;    word-wrap: normal;text-transform: uppercase;
}
.title h2{ width: 100%;display: block;margin: 0; margin:0px; font-size:3.75rem; line-height: 3.75rem;  font-weight: 900; color:#bc1331;   word-wrap: normal; text-transform: uppercase;
}
.title h3{ width: auto;  margin:30px 0; font-size: 1.875rem; font-size: min(max(3vw, 1.5rem), 1.875rem);  font-weight:700; word-wrap: normal;   }
.title h4{ margin:10px auto; font-weight: 700; color:#bea570;  }
 .title p{ margin:10px  0px;font-size: 1.15rem;  line-height:1.75rem;  font-weight: 700;  letter-spacing:1px;  }
.title span{ margin:0px; font-size: 2rem; color:#181a86;  font-weight:400;  position: relative;  word-wrap: normal;  }
@media (max-width:1280px) {
.title h1{  font-size: 3rem;   }
.title h2{  font-size: 3rem;  }
}
@media (max-width:768px) {
.title h1{  font-size: 2rem;   }
.title h2{  font-size: 1.875rem;  }
}
/*v-title-2  樣式
=================================*/
.title-2 { width:100%; height: auto;  margin:30px auto; padding:0px; text-align: left; position: relative;  }
.title-2 span{ margin:0px auto; font-size: 2rem; color:#181a86;  font-weight:400;  position: relative;text-transform: uppercase; }
.title-2 h2{ margin:0px; font-size:3.75rem; line-height: 3.75rem;  font-weight: 900; color:#fff;   word-wrap: normal; text-transform: uppercase; }
.title-2 p{ margin:0px auto;font-size: 1.15rem;  line-height:1.75rem;  font-weight: 700;  letter-spacing:1px; color:#fff;   }
.title-2 strong{color:#181a86;}

@media (max-width: 1440px) {
.title-2  h2{font-size:2.875rem;}       
.title-2 span{ font-size: 1.75rem;  }
}
@media (max-width: 1180px) {
.title-2 h2,.title-2 h3,.title-2 p{ margin:15px auto; }
    .title-2 h2{ font-size:2.75rem;}  
    .title-2 p{font-size: 1rem;}       

}
 
@media (max-width: 767.98px) {
.title-2 h2{font-size:1.875rem; line-height: 1.875rem}        
.title-2 p{ line-height: 1.35rem;}   
.title-2 span{  line-height: 1rem;   }    
}

@media (max-width: 640px) {
.title-2 { padding:0px; }
.title-2 p{ font-size: .9rem; line-height: 1.15rem; }      
}
 




/*v-title-2  樣式
=================================*/
.title-3 { width:auto; height: auto;  margin:30px auto; padding:0px; text-align: center; position: relative;z-index: 1;  }
.title-3::before {content: ""; display: inline-block; width: 150px; height: 2px; background: #fff; position: absolute; left: 20px; top:50%;}
.title-3::after {content: ""; display: inline-block; width: 150px; height: 2px; background: #fff; position: absolute; right: 20px;  top:50%; }
 
.title-3 span{ margin:0px auto; font-size: 2rem; color:#fff;  font-weight:400;  position: relative; }
.title-3 h2{ margin:0px 0px 15px 0px; font-size:3.75rem;   font-weight:900;  color:#fff; word-wrap: normal;  text-transform: uppercase;}
.title-3 p{ margin:0px auto;font-size: 1.15rem;  line-height:1.75rem; font-weight: 700;   letter-spacing:2px; color:#fff;   }
 

 
@media (max-width: 1180px) {
.title-3 h2{font-size:2.75rem;}   
.title-3 p{font-size: 1rem;}   
.title-3 h2,.title-3 h3,.title-3 p{ margin:15px auto; }
}
 
@media (max-width: 767.98px) {
.title-3 h2{font-size:1.875rem;}        
.title-3 p{ line-height: 1.35rem;}   
.title-3 span{  line-height: 1rem;}  
.title-3::before {content: ""; display: inline-block; width: 50px; height: 2px; background: #fff; position: absolute; left: -50px; top:75%;}
.title-3::after {content: ""; display: inline-block; width:  50px; height: 2px; background: #fff; position: absolute; right: -50px;  top:75%; }

}

@media (max-width: 640px) {
.title-3 { padding:0px 10px; }

}
 




 
 /***** btn **** 
=================================*/
.btn-btnbox {position: relative;z-index:9; display: flex;  justify-content: center;  width: 100%; height: auto; margin:0px;  transition: all 1s;}  
.btnbox {position: relative;z-index:99; display: flex; width: 100%; height: auto; margin:40px 0px 0px 0px;  transition: all 1s;}  
/*mousey Styles====*/
.scroll-downs { position: absolute; top: -30px; right: 0; bottom: auto; left: 0; margin:auto; width :20px; height: 44px;z-index: 9;}
.mousey { width: 2px; padding: 5px 8px; height: 24px; border: 1px solid #0070bd; border-radius: 25px; opacity: 0.75; box-sizing: content-box; position: relative; }
.mousey:after{content: "";position: absolute;top:38px; left:8px;width: 1px; height:30px; background:#0070bd;}
.scroller { width: 2px; height: 8px; border-radius: 25%; background-color:#0070bd; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite;}
@keyframes scroll {
0% { opacity: 0; }
10% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(15px); opacity: 0;}
}
/*white border
=================================*/
 .btn-01{ cursor: pointer; width:200px; height:2.75rem; padding:0px 30px;margin: 0px; line-height:2.75rem; display: flex;justify-content: center; align-items: center;  position: relative; border: solid 1px #fff;   border-radius:30px;  background-color:transparent; z-index: 1; overflow: hidden; }
.btn-01 span { display: flex;  transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 2px;}
.btn-01 em {position: absolute;width:60px; height:25px; right:20px;top: 20%; transition: all 0.3s ease; background: url("../images/icon/arrow-right-2.svg") no-repeat right top; z-index:1; }
.btn-01:before,.btn-01:after {content: '';background:#fff;height:100%; width: 0;position: absolute;  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
.btn-01:before { top: 0; left: 0; right: auto;  }
.btn-01:after { bottom: 0; right: 0; left: auto; }
.btn-01:hover:before { width: 100%; right: 0; left: auto;}
.btn-01:hover:after {  width: 100%; left: 0; right: auto;}
.btn-01:hover span{color: #bb1331;}
.btn-01:hover em{ transform:translateX(20px);  filter: brightness(100%) invert(1) }

/*cms-btn Styles 1
=================================*/
.btn-02{ cursor: pointer; width:200px; height:2.75rem; padding:0px 30px;margin:50px 0px 20px 0px; line-height:2.75rem; display: flex;justify-content: center; align-items: center;  position: relative; border:none; border-radius:30px;   background-color:#bb1331; z-index: 1; overflow: hidden; }
.btn-02 span { display: flex;  transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 2px;}
.btn-02 em {position: absolute;width:60px; height:25px; right:20px;top: 20%; transition: all 0.3s ease; background: url("../images/icon/arrow-right-2.svg") no-repeat right top; z-index:1;   }
.btn-02:before,.btn-02:after {content: '';background:#002148;height:100%; width: 0;position: absolute;  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
.btn-02:before { top: 0; left: 0; right: auto;  }
.btn-02:after { bottom: 0; right: 0; left: auto; }
.btn-02:hover:before { width: 100%; right: 0; left: auto;}
.btn-02:hover:after {  width: 100%; left: 0; right: auto;}
.btn-02:hover span{color: #fff;}
.btn-02:hover em{ transform:translateX(20px);  }



