/* 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; }
 .cms-wrapper { display: block; margin:0px auto; padding: 0px 20px; width: 100%;  max-width: calc((100% - 40px)/12*12 + 40px); }
@media (min-width: 980px) {
.cms-wrapper { width: 96%;}
}
@media (min-width: 1300px) {
.cms-wrapper { width:92%;}
}
@media (min-width: 1600px) {
.cms-wrapper {  width:90%;max-width: 1400px;}
}
/* ==== Main CSS === */
.cms-main-banner {background:#fff; }
/* ==== Slider Style === */
.slider-item{ width: 100%; display: block;  overflow: hidden; position: relative;  }
.slider-item img { width: 100%; height: auto; position: relative; display:block; }
.imgSliderBox .slider-item .cms-sloga {width: 80%; max-width: 700px; height: auto;  margin: auto;  left:16%; top:30%;position: absolute;  display: flex; flex-wrap: wrap;  flex-direction: column;  z-index: 9;}   
.imgSliderBox h3{ margin: 0px 0px 15px 0px; padding:0;font-size:3rem; line-height:3rem; font-weight:700; word-wrap: normal; text-align: left;  letter-spacing: 1px; color:#f39800;; text-shadow: 0px 1px 2px rgba(0,0,0,.1); animation:fadeOutRight .6s both;}
.imgSliderBox h4{ width: 80%;margin: 0px 0px 20px 0px; padding:0; font-size:2rem;  line-height:2.5rem;  text-align: left; font-weight: 600;  color:#000;text-shadow: 0px 1px 2px rgba(0,0,0,.1);   overflow:hidden;  animation:fadeOutLeft .6s both;}
.imgSliderBox strong{ color: #cb2520 ;}
.imgSliderBox .cms-main-post-btn{ width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; animation:fadeOutLeft 1s both;}
.imgSliderBox .cms-main-post-btn a{ margin: 10px 15px 10px 0px;}
.imgSliderBox.slick-active h3{  animation:fadeInDown .5s both .8s;}
.imgSliderBox.slick-active h4{ animation:fadeInLeft .7s both 1s;}
.imgSliderBox.slick-active .cms-main-post-btn{  animation:fadeInLeft .5s both 1s;}
.imgSliderBox.slick-active{ /*animation:Slick-FastSwipeIn 1s both*/;}
.imgSliderBox .slider-item img{ -webkit-transform-origin: center center;  -ms-transform-origin: center center; -moz-transform-origin: center center; transform-origin: center center; -webkit-animation: zoom 60s ease-in-out infinite alternate; -moz-animation: zoom 60s ease-in-out infinite alternate; -o-animation: zoom 60s ease-in-out infinite alternate; -ms-animation: zoom 60s ease-in-out infinite alternate; animation: zoom 60s ease-in-out infinite alternate;}
@media (min-width: 1940px) {
.imgSliderBox .slider-item .cms-sloga {width: 80%; max-width: 800px;}   
.imgSliderBox h3{  font-size:5rem;  line-height:4.75rem;  }
.imgSliderBox h4{  font-size:2.75rem;  line-height:3.75rem;  }
}
@media (max-width: 767.98px) {
.imgSliderBox .slider-item .cms-sloga {width: 80%; max-width: 700px;  left:5%;  }  
.imgSliderBox h3{ line-height:1.75rem; }

}

.banner-item{width: 100%; max-width: 100%; margin: 0px auto; padding:0px;position: relative;  }
.banner-nav .slick-slider{ width: 100%; margin:0px auto; padding:0px!important;position: relative;  }
.banner-nav{ width: 60%; margin: 0px auto; padding: 0px; list-style:none;   }
.banner-nav li{width:100%; height:auto; margin:0px 0px 0px 5px; padding:0px; position: relative; }
.banner-nav li figure { position: relative; overflow: hidden; margin: 0px; width: 100%; height: auto;  text-align: center; cursor: pointer;}
.banner-nav li figure img {  height: auto; opacity: .5; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; -webkit-filter:grayscale(100%); background: #000;}
.banner-nav li figure:hover img {-webkit-filter:grayscale(0);opacity: 1; }
.banner-nav li.slick-current img{-webkit-filter:grayscale(0);opacity: 1;}

.box-zone {
    width: 100%;
    padding-top: 40.33%;
    position: relative;
}
.box-in {
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

@media (max-width:767px) {
    .box-zone {
        width: 100%;
        padding-top: 129.78%;
        position: relative;
    }
}

.pagination {position: absolute; left:44px; bottom: 40vh; width:15px; height: 300px; z-index: 9; color: #000; font-size: 1.2rem; font-weight: 700;  line-height: 8rem;  text-align: center;}
.pagination:after{ content: ""; width: 1px; height: 60px; background: #ddd; position: absolute; left: 8px;  top: 32%;    }
 
/*scroller mousey Styles====*/
.scroll-downs { position: absolute;  left: 40px; bottom: 30vh;  margin:0px auto; width :20px; height: auto;display: flex;  justify-content: center;transition: all 1s;z-index: 99;}
.mousey { width: 2px; padding: 5px 8px; height: 24px; border: 2px solid #000; border-radius: 25px; opacity: 0.75; box-sizing: content-box; position: relative; }
.mousey:before{content:attr(data-content)!important; padding: 5px 0px; font-size: 0.875rem; font-weight: 700; color: #000; text-align: center; writing-mode: vertical-lr;
position: absolute;top:-100px; left:0px; height: 100px;}
 .scroller { width:4px; height: 8px; border-radius: 25%; background-color:#cc2621; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite;}

@media (max-width: 1440px) {
.pagination { bottom: 26vh;  }   
.scroll-downs { bottom: 16vh;  }
}

@media (max-width: 1366px) {
.pagination { bottom: 26vh;  }   
.scroll-downs { bottom: 16vh;  }
}
@media (max-width: 1180px) {
.pagination { bottom: 46vh;  }   
.scroll-downs { bottom: 36vh;  }
}


@media (max-width:979px) {
.pagination { display: none; }   
.scroll-downs { display: none;  }
}






@keyframes scroll {
0% { opacity: 0; }
10% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(15px); opacity: 0;}
}
/*end scroller mousey Styles====*/
.cms-main-social{ position: absolute; left:28px; top: 15%; width:50px; height: 300px; z-index: 9; }
.cms-main-social ul.cms-social-icons li {position: relative;  z-index: 1; display: flex;  align-items: center; justify-content: center; text-align: center; width: 30px; height: 30px; margin:10px auto; background: #666464; border-radius:99rem;  }
.cms-main-social ul.cms-social-icons li:hover {  background:#f39800;  }

@keyframes Slick-FastSwipeIn{
 0%{transform:rotate3d(0,1,0,150deg) scale(0)  perspective(400px);} 
 100%{transform:rotate3d(0,1,0,0deg) scale(1) perspective(400px);} 
}
@-webkit-keyframes ProgressDots{from{width:0px;}to{width:100%;}}
@keyframes ProgressDots{from{width:0px;}to{width:100%;}}
@keyframes zoom {
    from {
        -moz-transform: scale(1);
        transform: scale(1);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.0, M12=0, M21=0, M22=1.0, SizingMethod='auto expand')";
        filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.0, M12=0, M21=0, M22=1.0, SizingMethod='auto expand');
    }
    to {
        -moz-transform: scale(1.15);
        transform: scale(1.15);
        -webkit-transform: scale(1.15);
        -ms-transform: scale(1.15);
        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
        filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');
    }
}
 @media (max-width: 1024px) {
.cms-main-banner .cms-sloga {  left:5%; } 
} 
 
@media (max-width: 768px) {
.cms-main-banner .cms-sloga { top:40%;}    
.cms-main-banner .cms-sloga h3 {  font-size:1.75rem;   }
.cms-main-banner .cms-sloga h4 { font-size:100%;  }
.cms-main-banner .slick-dots{ display: none!important;}
}
@media (max-width: 767.98px) {
.cms-main-banner { width: 100%;} 
.cms-main-banner .imgSliderBox { width: 100%; height:auto; }
.cms-main-banner .cms-sloga { width:90%; max-width: 100%; position: absolute; left:10%; top:24%;  }    
.cms-main-banner .cms-sloga h3 { margin-bottom: 5px; width: 100%;height: auto;  }
.cms-main-banner .cms-sloga h4 { width: 100%;font-size: 0.9rem; line-height: 1.3rem;   }
.cms-main-banner .slick-dots{ display: none!important;}
} 

@keyframes rotate {
  0% { transform: rotate(0deg) }
  to { transform: rotate(360deg)  }
}
@keyframes rotate2 {
  0% { transform: rotate(0deg) scale(1) }
  to { transform: rotate(-359deg) scale(1)  }
}

@keyframes rotateIt {
  to { transform: rotate(-360deg); }
}

.grid-box{  width: 100%; height: 100%; margin: 100px auto auto auto; }  
@media (max-width:979px) {
.grid-box{    margin: 30px auto auto auto; }  
    
}
.grid-height{ height: 600px; padding: 100px 0px;  }
.bg-about{ background: url("../../webp/images/index/bg-line.webp") no-repeat left top; background-size: 100% auto;}

.cms-main-wrap{ width: 100%; padding:0px; margin:auto; display: flex; flex-wrap: wrap;  }
.cms-block-box {width:100%; margin:100px auto; padding:15px;    }

.cms-block-txt{width:80%; margin:15px auto; padding: 0px; text-align: center;  }
.cms-block-txt h1{margin:0px auto 15px auto; font-size:2.5rem; font-weight:700;   color:#000;  animation:fadeInLeft .6s both 1s;  }
.cms-block-txt p{ font-size: 1.5rem;font-weight:400; line-height: 1.75rem; color:#000; animation:fadeInRight .9s both 1,5s;}

.cms-compare{width: 100%; display: flex; flex-wrap: wrap;   margin: 20px 0px 0px 0px ; padding: 0px 0px 10% 0px; }
.cms-compare li{width:calc(100%/3 - 20px); height: 300px; margin:5px 10px; padding: 0px; list-style: none; overflow: hidden; }  
.cms-compare .item{width: 100%; padding:50px 20px; display: flex; flex-wrap: wrap;justify-content: center; align-items: center; background: url("../../webp/images/index/box-bg.webp") right top #eff0f0;}
.item-number{display: flex; flex-wrap: wrap; align-items: center; margin:20px auto 50px auto; font-size:5rem; font-weight: 700;}
.item-number span{ margin-left: 15px;  font-size: 1.25rem; font-weight: 900;}
.item-txt{  margin: 10px; min-height: 80px;}
.item-txt p{ font-size: 1rem;line-height: 1.5rem; text-align: center; margin: 5px 0px; }
@media (max-width:979px) {
.cms-block-box {  margin:50px auto;  }
.cms-block-txt{width:100%;  }
.cms-compare .item{ padding:50px 5px;}
.item-number{  margin:20px auto 30px auto;  }
.item-txt{  margin: 10px; height: 170px;}
}
@media (max-width:767.98px) {
.cms-block-box {  margin:0px auto;padding: 0px;  }
.cms-block-txt h1{ font-size:1.5rem;  }
.cms-block-txt p{ font-size: 1rem; line-height: 1.5rem; }
.cms-compare li{width:100%; height: auto; margin:5px 0px; padding: 0px; }  
.item-number{  margin:20px auto ; font-size:2.5rem;  }
.item-txt{  margin: 10px; height: auto;}
.cms-compare .item{ padding:10px 5px;}
}



/*-------------------*/
/***** product  *****/
/*------------------*/
.cms-title-wrap{ width: 100%; margin: auto; display: flex; flex-wrap: wrap; align-content: center;}
.cms-title-main{ width: 40%; }
.cms-title-main h2{ width: auto; margin: 30px 60px 30px 0px; text-align: right;  font-size: 2.15rem; color: #2a82bc; font-weight: 700; letter-spacing: 2px; }
.cms-title-sub{ width: 60%; margin: auto; }
.cms-title-sub p { width: 100%; font-size:1.188rem; line-height:2rem; font-weight: 400;  padding:0px;  letter-spacing: 1px; color:#131212; }

 @media (max-width:1024px) {
.cms-title-main{ width: 38%; }
.cms-title-sub{ width: 62%; }   
}
 
@media (max-width:920px) {
.cms-title-main{ width: 100%; }
.cms-title-sub{ width: 100%; }   
.cms-title-main h2{ margin: 30px auto; text-align: center;}
.cms-title-sub p {text-align: center; }
}
 
/*----------------------------------------/
產品清單頁  cms-main-product-item  
----------------------------------------*/

.cms-product-cate { width:100%; margin:0px auto;  padding:30px 0px 60px 0px;  display: flex; flex-wrap: wrap;  overflow: hidden;}
.cms-product-cate li { width:100%; height: auto; margin:20px 10px; padding:0px; position: relative; z-index: 1; list-style: none;  transition: all 0.3s linear 0s; overflow: hidden;}
 .cms-product-cate li img { transition: all 0.3s ease;overflow: hidden; }
.cms-product-cate li:hover img {transform: scale(.95); opacity: .5;  }
.cms-product-cate li:after,.cms-product-cate li:before {pointer-events: none; content: ''; width:calc(100% - 15px); height:100%;  box-sizing: border-box;  position: absolute; top: 0;  left: 0;  transform: scale(0); transition: 0.5s;z-index:9; }
.cms-product-cate li:after { border-top: 2px solid #312927;  border-right:2px solid #312927;  transform-origin: 100% 0%;}
.cms-product-cate li:before { border-bottom: 2px solid #312927; border-left: 2px solid #312927; transform-origin: 0 100%;}
.cms-product-cate li:hover:after,.cms-product-cate li:hover:before { transform: scale(1);}
.cms-product-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;} 
.cms-product-cate li figure:before {  content: ""; display: block; width: calc(100% - 15px);  background-image: linear-gradient(to bottom, rgba(255,255,255,.0) 50%, rgba(0,0,0,.75)  100%); opacity: 1; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;}
.cms-product-cate li:hover figure:before {    background-image: linear-gradient(to bottom, rgba(255,255,255,.0) 20%, rgba(0,0,0,1)  100%); }
.cms-product-cate li .inner-body { position: absolute;bottom:20px; left:0px; width:calc(100% - 20px); height: auto; padding:10px 20px;  display: block;z-index: 9; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1);}
.cms-product-cate li:hover .inner-body {  margin-top: -22px; -webkit-transform: translateY(-22px); transform: translateY(-22px)}
.cms-product-cate li a h3 {position: relative;  width: 100%; z-index: 8; font-size:2rem;  line-height: 2rem; font-weight:900; color:#fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; }
.cms-product-cate li a span {position: relative;  width: 100%; z-index: 8; font-size:0.7rem;  line-height: 2rem; font-weight:500; color:#fff;  }
 @media (max-width:979px) {
.cms-product-cate li a h3 { font-size:1.5rem;  line-height: 2rem;   word-wrap: normal;}
.cms-product-cate li figure:before {  width: 100%;   }
}
 @media (max-width:767.98px) {
 .cms-product-cate li { margin:20px 5px; }    
 .cms-product-cate li:after,.cms-product-cate li:before {  width:100%;  }   
 .cms-product-cate li .inner-body {  width:100%;  height: auto; padding:10px;  } 
  .cms-product-cate li a h3 { font-size:1rem;  line-height:1rem;  }   
}
/***  Progress Bar*/
.progress { display: block; width: calc(100% - 100px); height: 5px; margin-left:100px; margin-top: -25px; overflow: hidden; background-color: #c9c9ca; background-image: linear-gradient(to right, #e7141a, #e7141a); background-repeat: no-repeat;  background-size: 0 100%; transition: background-size 0.4s ease-in-out;}
.sr-only {  position: absolute;  width: 1px; height: 1px; padding: 0;  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
.cms-product-cate .slick-prev{left:0px; top:auto;bottom:0px;}
.cms-product-cate .slick-next{left:50px; right: auto; top:auto;bottom:0px;}
.cms-product-cate.slick-prev,.cms-product-cate.slick-next{ width: 50px; height: 50px;  border-radius:0; background: #f39800; transition: all .35s ease;  transform: scale(1);  opacity: 1;z-index: 999;   }


 /* choose style */
.choose{ width: 100%;padding:50px 0px; margin:0px auto; position: relative; background:url("../images/index/bg-bottom.jpg") no-repeat left bottom #000;background-size: 100% auto;}
.choose-txt{width: 600px; padding:0px 50px 0px 50px;display: flex; flex-wrap: wrap; align-items: center; }
.choose-txt p{ margin-top: 10px;  font-size:1.188rem;font-weight:500;  letter-spacing: 1px;}
.choose .cms-title-3 h2{   font-size: 1rem; color:#fff;}
.choose .cms-title-3 h2 span{ display: block; font-size: 6rem;}
.choose-left{ width: 30%;  margin:auto; padding:40px 0px;   }
.choose-right{ width: 70%;  margin:auto; padding:40px;border-left:solid 1px #fff;}
.choose-item {width: 100%; padding:0px 0px 30px 0px; display: flex; flex-wrap: wrap;flex-direction: column;}
.choose-item h3 { color:#fff; font-size: 1.5rem; font-weight: 700; margin:0px 0px 15px 0px;  }
.choose-item p { color:#fff; font-size: 1rem; font-weight: 400;  }
 @media (max-width:979px) {
 .choose{ background-position: right bottom;background-size: 144% auto;  }
 .choose .cms-title-3 h2 span{   font-size:4rem;}
}
 @media (max-width:840px) {
 .choose{  background-size: 160% auto;  }
}
 @media (max-width:797.98px) {
 .choose{  padding:0px;  background:url("../../webp/images/index/bg-bottom-m.webp") no-repeat left bottom #000;background-size: 100% auto;}
.choose-left{ width: 100%;  margin:auto; padding:20px 0px;   }
.choose-right{ width: 100%;  margin:auto; padding:20px 0px;border-left:none}
}


.cate-video{ width: 100%; padding:0px; position: relative; background:url("../../webp/images/index/bg-video.webp") no-repeat left bottom #000;background-size:80% auto; }
.cate-video:after{ content: "";position: absolute; left:0px; bottom:0px;z-index: 1; width: 100%; height: 100%; background-image: linear-gradient(to bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,.85) 100%);}
.video { width: auto;  padding:25vh 0px;  margin: auto;  display: flex; flex-wrap: wrap;  justify-content: center; align-items: center;  opacity: 1; animation: fsUp 1s cubic-bezier(0.65, 0.05, 0.36, 1) both; list-style: none; position: relative; }
/* .video:hover figcaption {top: 35%;   opacity: 1; transition-delay: .1s;}
*/ 
 @media (max-width:1180px) {
.cate-video{ background-size:100% auto; }
 }
 @media (max-width:979px) {
 .video {padding:12vh 0px;   }
 }
 @media (max-width:767.98px) {
.cate-video{ background-size:160% auto; }
 }



 @media (max-width:767.98px) {
.fancybox-slide--video .fancybox-content, .fancybox-slide--video iframe {width: 100%!important; height: 400px!important;}
.fancybox-slide--iframe .fancybox-content{height: auto!important; background-color: transparent;} 
}

.icon-play { position: relative;z-index: 2;  width: 100px;  height: 100px; border: solid 2px #fff; border-radius: 100px; }
.icon-play:before { content: ""; width: 34px; height: 53px; border-left: 2px solid #fff; border-radius: 5px; position: absolute; top: 23px; left: 37px;}
.icon-play:after { content: ""; position: absolute; top: 27px; left: 19px;  width: 42px; height: 42px; transform: rotate(45deg) skew(-5deg, -5deg); border-top: 2px solid #fff; border-right: 2px solid #fff; border-radius: 5px;}
.icon-play:hover { background-color: rgba(0, 0, 0, 0.5);}


.slider-nav{  width: 100%; padding:0px; margin:0px auto; display: flex;flex-wrap: wrap; }
.slider-nav li { width: calc(100%/4 - 20px); padding:50px 20px; margin:0px 10px;  list-style: none;  }
.nav-item { text-align: center; width: 100%; padding-bottom: 34px; position: relative}
.nav-item:hover .nav-img { }
.nav-item:hover .nav-img img { filter:invert(1);  }
.nav-item:hover .nav-img img { filter:invert(1);  }
.nav-item:hover p { color: #cc2621}
.nav-img {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin:10px auto;width: 100%; position: relative;}
.nav-img img {  margin: auto;display: block;  width:100px; height: 100px;   }
.nav-item p{ padding: 10px 25px; font-size:1.5rem; line-height: 1.75rem; color: #000; font-weight: 700;   }
 @media (max-width:979px) {
 .slider-nav li { width: calc(100%/4 - 10px); padding:50px 0px; margin:0px 5px;  }
 .nav-item p{ padding: 10px; font-size:1.15rem; line-height: 1.5rem;   }
 .nav-img img { width:80px; height: 80px;   }
 }
 
@media (max-width:768px) {
.slider-nav li { padding:10px 5px; margin: auto; display: flex;flex-wrap: wrap; justify-content: center;   }
}
@media (max-width:767.98px) {
.slider-nav li {  width: calc(100%/2 - 20px); padding:10px 5px;  }
}
@media (max-width:320px) {
.slider-nav li {  width: calc(100%/2 -  0px); padding:10px 0px;  }
  .nav-item p{ padding: 10px 0; font-size:1rem;  }  
}

/*--分類new-tag --*/
 .new-tag { display: flex; flex-wrap: wrap; align-items: center; width: auto; padding:0px 8px; font-size: 0.875rem; 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: relative;   }
.new-tag a{color:#fff;}
.new-tag-01{ background:#e7141a;}

.cms-news-list {width: 100%; margin: 0px auto;padding: 0px;  position: relative; z-index: 1; }
.cms-news-list li{ width: 100%; padding:0px;margin: 30px 0px; box-sizing: border-box;overflow: hidden;list-style: none; background: #fff; transition: all 0.5s ease 0s;  position: relative;}
.cms-news-list li a{display: flex; flex-wrap: wrap; }
.cms-news-list figure { width: 100%; padding: 20px;  overflow: hidden; }

.cms-news-list figure img {width: 100%; height: auto; margin: auto; position: relative; overflow: hidden; transition: all 0.5s ease-in-out;}
 .cms-news-list .news-box{position: relative;width:100%;  margin:0px;padding:20px; box-sizing: border-box;display: -ms-flexbox; display: flex; flex-wrap: wrap;justify-content: space-between; }
.cms-news-list h3 {position: relative;width: 100%; height: auto;  margin:15px 0px; font-size:1.5rem; line-height:1.35rem; font-weight:700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow-wrap: break-word; }
.cms-news-list a h3 { color:#000; }
.cms-news-list a:hover h3 { color:#e7141a!important; }
.cms-news-list a p{ width: 100%; font-size: 1rem; line-height: 1.5rem; color:#666; margin:5px 0px 15px 0px; overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow-wrap: break-word; }
.listDateBox {width: auto; padding: 0px; margin:0;font-size:0.875rem; color:#555; display: flex; flex-wrap: wrap;justify-content: flex-end;align-items: center; position: relative; }
.listBox{width:100%; padding:0px 0px 25px 0px;position: relative; }
@media (max-width:767.98px) {
.cms-news-list li{  margin: 30px 5px; }    
.cms-news-list figure { padding:0px;}   
.cms-news-list h3 { font-size:1.15rem; line-height:1.35rem;  }   
.cms-news-list a p{   font-size: .875rem; line-height: 1.15rem;  }
.cms-news-list .news-box{ padding:10px 0px;  }     
}
 
.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;}

.view a { margin-bottom: -1px; font-size: 13px; font-weight: 700; text-transform: uppercase; color: #153872; letter-spacing: 2.3px; border-bottom: 1px solid #153872; padding-bottom: 16px; padding-top: 2px;}
.view .circle { display: -webkit-box; display: -ms-flexbox; display: flex;  width: 36px; height:36px; border-radius: 999px; border: 1px solid #153872; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center;  -ms-flex-pack: center; justify-content: center; margin-right: 16px; background: url("../images/icon/arrow-right-2.svg") no-repeat center;background-size: 14px;}
@-webkit-keyframes sx {
from {  -webkit-transform: translateX(0);  transform: translateX(0); }
50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); }
to {  -webkit-transform: translateX(0);  transform: translateX(0); }
}

@keyframes run {
from { -webkit-transform: translateX(0);  transform: translateX(0); }
50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); }
to {  -webkit-transform: translateX(0); transform: translateX(0); }
}
 



.cms-end-txt{width:80%; margin:0px auto; padding:50px 0px 0px 0px; text-align: center; display:flex; flex-wrap: wrap; justify-content: center;flex-direction: column; }
.cms-end-txt p{ font-size: 1.75rem;font-weight:600; line-height: 1.75rem; color:#fff; }
  @media (max-width:979px) {
   .cms-end-txt p{ font-size: 1.5rem; }
   
}
.cms-end-txt .cms-btn-02{margin:30px auto;}
 @media (max-width:1180px) {
     .cms-end-txt{width:100%;}
}


.text-button { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.125rem; cursor: pointer; display: inline-block; color: currentColor; padding-left: 2.1875rem; position: relative; transition: padding 0.3s ease;}
.text-button::before { content: ''; display: inline-block; position: absolute; left: 0; top: 50%; width: 1.5625rem; height: 0.0625rem; background: currentColor; vertical-align: middle; margin-right: 0.625rem; transition: padding 0.3s ease}
@media (hover: hover) {
.text-button:hover { color: currentColor; padding-left: 2.8125rem  }
.text-button:hover:before { width: 2.1875rem; color: currentColor  }
}
@media (max-width: 798px) {
.text-button { letter-spacing: 0rem; }  
p a.text-button { font-size: 0.7rem; }    
}
 /*cms-Title Styles 樣式
=================================*/
.cms-title { width: 100%; margin:0px auto;padding: 0px;position: relative; } 
.cms-title h1{ width: 100%;display: block;margin: 0 auto; font-size: 2.5rem; font-weight:900; color:#000;  }
.cms-title h2{ width: auto;margin:15px auto; font-size:1.875rem;   font-weight:700;     }
.cms-title h3{ margin:15px auto; font-size: 2.35rem; line-height: 3.75rem; color:#131212; font-weight:900; letter-spacing:10px; text-align: center;   }
.cms-title p{ margin:10px auto;  font-weight: 400; line-height: 1.35rem;  color:#fff; }
.cms-title strong{ color:#f39800;; }
 @media (max-width:820px) {
 .cms-title h3{   letter-spacing:5px; }    
}
 @media (max-width:767.98px) {
.cms-title {  margin:0px auto 20px auto;  }     
.cms-title h3{  font-size: 1.313rem; line-height: 2rem; letter-spacing:0; }

}
 /*ms-title-2  樣式
=================================*/
.cms-title-2 { width:100%;  margin:0px; padding: 0; position: relative; }
.cms-title-2 h1{ width: auto;margin:15px auto; font-size: 2.5rem; color:#000; font-weight:700; letter-spacing: 2px; }
.cms-title-2 h2{ width: auto; margin:0px auto ; font-size: 3.5rem; font-weight: 700; color:#cc2621; letter-spacing: -1px;   }
.cms-title-2 h3{ width: 100%;   margin:15px auto; font-size:1.313rem; color:#000; font-weight:700;  }
.cms-title-2 p{ width: auto; margin:0px; font-weight:700;color:#000;  }
 @media (max-width:979px) {
  .cms-title-2 h2{  font-size: 2.5rem;   }
 }
 @media (max-width:767.98px) {
.cms-title-2 h1{ font-size: 2.15rem;   }
.cms-title-2 h2{  font-size: 1.75rem;   }
}
 @media (max-width:767.98px) {
.cms-title-2 h1{ font-size: 2.15rem;   }
.cms-title-2 h2{  font-size: 1.75rem;   }
}
 @media (max-width:320px) {
.cms-title-2 h2{ font-size: 1.5rem; }
}
/*ms-title-3  樣式
=================================*/
.cms-title-3 { width:100%; height: auto;  margin:auto; padding: 0; display: flex;  flex-wrap: wrap; justify-content: center;  flex-direction:column; position: relative; }
.cms-title-3 h2{ width: auto;margin:0px auto 30px auto; font-size: 3.5rem; font-weight: 700; color:#cc2621; letter-spacing: -1px;   }
.cms-title-3 p{ width: auto; margin:0px auto;  font-size:1rem; line-height: 2rem; font-weight: 400; padding: 0px;  color: #666464;   }
 @media (max-width:979px) {
  .cms-title-3 h2{ font-size: 2.5rem;   }
}
 @media (max-width:320px) {
.cms-title-3 h2{ font-size: 1.5rem; }
}
/*---------------*/
/***** btn *****/
/*---------------*/
.cms-btn-btnbox {position: relative;z-index:9; display: flex;  justify-content: center;  width: 100%; height: auto; margin:0px auto;  transition: all 1s;}  
.cms-btnbox {position: relative;z-index:9; display: flex;  justify-content: center;  width: 100%; height: auto; margin:20px auto 0px auto;  transition: all 1s;}  
.icon-next{background: url("../images/icon/arrow-right-2.svg") no-repeat left 0px;  background-size:auto;}


.cms-next-button {width:150px; height:40px; 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: space-between; cursor: pointer; background-color:transparent; border-radius:  30px;}
.cms-next-button:hover .cms-next-button-circle, .cms-next-button:hover i { -webkit-transform: scale(1.05); transform: scale(1.05)}
.cms-next-button:hover .cms-next-button-txt{ -webkit-transform: translateX(5px); transform: translateX(5px)}
.cms-next-button-circle { width: 35px; height: 35px;  position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin:auto 5px;  background: #fff;  border-radius: 50%;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
.cms-next-button i { width: 32px; height: 32px;   -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
.cms-next-button-txt { padding-left: 10px; font-size: 16px; font-weight: 500; line-height: 1.5; color: #fff;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; position: relative}

.bg-bk{background: #666464;}
.bg-red{background: #cb2520;  }
.bg-red-line{background:#cb2520;  }

.arrow-w{background: url("../images/icon/arrow-right-2.svg") no-repeat right top;  } 
.arrow-b{background: url("../images/icon/arrow-right-b.svg") no-repeat right top;  } 

@media (max-width:767px) {
.cms-next-button { width: auto; height: 24px }
.cms-next-button-circle { width: 24px; height: 24px; margin-right: 15px}
.cms-next-button i { width: 22px; height: 22px; margin: auto auto auto 10px}
.cms-next-button-txt { font-size: 14px; line-height: normal; letter-spacing: normal }
}


 /*cms-btn Styles 1 bk===*/
 a.cms-btn-01{width: 100%; max-width: 200px; height: auto; display: block; padding:10px 40px; margin: auto; color: #312927;font-weight:700;  overflow: hidden;text-align: center;  background-color: transparent;border:solid 1px transparent; cursor: pointer;  letter-spacing: 0.1rem;  box-shadow: inset 0 0 0 1px #eee;-webkit-transition: color 0.25s 0.0833333333s; transition: color 0.25s 0.0833333333s;  position: relative;}
.cms-btn-01::before, .cms-btn-01::after {border: 0 solid transparent; box-sizing: border-box; content: ''; pointer-events: none; position: absolute; width: 0; height: 0; bottom: 0; right: 0;}
.cms-btn-01::before{border-bottom-width: 2px; border-left-width: 2px;}
.cms-btn-01::after{border-top-width: 2px; border-right-width: 2px;}
 a.cms-btn-01:hover{color:#fff; background:#312927; }
.cms-btn-01:hover::before, .cms-btn-02:hover::after{border-color:#312927; -webkit-transition: border-color 0s, width 0.25s, height 0.25s; transition: border-color 0s, width 0.25s, height 0.25s; width: 100%; height: 100%;}
.cms-btn-01:hover::before{-webkit-transition-delay: 0s, 0s, 0.25s; transition-delay: 0s, 0s, 0.25s;}
.cms-btn-01:hover::after{-webkit-transition-delay: 0s, 0.25s, 0s; transition-delay: 0s, 0.25s, 0s;}
.cms-btn-01:focus{outline: 1px inset #fff;}
.cms-btn-01 span { display: block; padding-right:5px; transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1;font-size:1.188rem; font-weight: 700; letter-spacing: 1px; color: #fff;}
.cms-btn-01 em {position: absolute;width:60px; height:25px; right:10px;top: 20%; transition: all 0.3s ease; background: url("../images/icon/arrow-right-f.svg") no-repeat right top; z-index:1;   }
.cms-btn-01:hover em{ transform:translateX(10px); -webkit-filter:invert(1);}

@media (max-width: 991.98px) {
 a.cms-btn-01{  font-size:0.9rem;   }
}

 
/*cms-btn Styles 2===*/
 a.cms-btn-02{width: 100%; max-width: 200px; height: auto;   display: block; color: #fff!important;font-weight:700;  overflow: hidden; padding:10px 40px; text-align: center;  background-color: transparent;border:solid 1px transparent; cursor: pointer;  letter-spacing: 0.1rem;  box-shadow: inset 0 0 0 1px #eaeff3;-webkit-transition: color 0.25s 0.0833333333s; transition: color 0.25s 0.0833333333s;  position: relative;}
.cms-btn-02::before, .cms-btn-02::after {border: 0 solid transparent; box-sizing: border-box; content: ''; pointer-events: none; position: absolute; width: 0; height: 0; bottom: 0; right: 0;}
.cms-btn-02::before{border-bottom-width: 2px; border-left-width: 2px;}
.cms-btn-02::after{border-top-width: 2px; border-right-width: 2px;}
 a.cms-btn-02:hover{color:#fff; background:#000; }
.cms-btn-02:hover::before, .cms-btn-02:hover::after{border-color:#000; -webkit-transition: border-color 0s, width 0.25s, height 0.25s; transition: border-color 0s, width 0.25s, height 0.25s; width: 100%; height: 100%;}
.cms-btn-02:hover::before{-webkit-transition-delay: 0s, 0s, 0.25s; transition-delay: 0s, 0s, 0.25s;}
.cms-btn-02:hover::after{-webkit-transition-delay: 0s, 0.25s, 0s; transition-delay: 0s, 0.25s, 0s;}
.cms-btn-02:focus{outline: 1px inset #fff;}
.cms-btn-02 span { display: block; padding-right:5px; transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1;font-size:1.188rem; font-weight: 700; letter-spacing: 1px; color: #fff;}
.cms-btn-02 em {position: absolute;width:60px; height:25px; right:10px;top: 25%; transition: all 0.3s ease; background: url("../images/icon/arrow-right-f.svg") no-repeat right top; z-index:1;  -webkit-filter:invert(1);  }
.cms-btn-02:hover em{ transform:translateX(10px);}

@media (max-width: 991.98px) {
 a.cms-btn-02{  font-size:0.9rem;   }
}

#amg-home-popup {z-index: 100010;}