/* 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; }
.align-center { text-align: center; margin: auto;}


.cms-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) {
.cms-wrapper { padding-right: 40px; padding-left: 40px;   }
}
@media (min-width: 1201px) and (max-width: 1400px) {
.cms-wrapper { padding-right: 20px; padding-left: 20px; max-width: 100%;}
}
@media (min-width: 1401px) {
.cms-wrapper { padding-right: 80px; padding-left: 80px; max-width: 1440px; }
}
/* ==== 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: 600px; height: auto;  margin: auto;  left:12%; top:30%;position: absolute;  display: flex; flex-wrap: wrap;  flex-direction: column;  z-index: 9;}   
.imgSliderBox h3{ margin: 0px 0px 10px 0px; padding:0;font-size:3.75rem; line-height:4.75rem; font-weight:700; text-align: left;  letter-spacing: 1px; color:#fff;; text-shadow: 0px 1px 2px rgba(0,0,0,.1); animation:fadeOutRight 1s both;}
.imgSliderBox h4{ width: 80%;margin: 0px 0px 20px 0px; padding:0; font-size:2rem;  line-height:2.5rem;  text-align: left; font-weight: 500;  color:#fff;text-shadow: 0px 1px 2px rgba(0,0,0,.1);   overflow:hidden;  animation:fadeOutLeft 1s both;}

.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 1s both 1s;}
.imgSliderBox.slick-active h4{ animation:fadeInLeft 1s both 1.5s;}
.imgSliderBox.slick-active .cms-main-post-btn{  animation:fadeInLeft 1s 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:6rem;  }
.imgSliderBox h4{  font-size:2.75rem;  line-height:3.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;}
  
 
/*banner pagination Styles====*/
.pagination {position: absolute; left:44px; bottom: 14vh; 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: 4vh;  margin:0px auto; width :20px; height: auto;display: flex;  justify-content: center;transition: all 1s;z-index: 999;}
.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: #666464; 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:#f39800; 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;}
}
/*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%; } 
 .scroll-downs {  display: none;}
} 
 @media (max-width: 768px) {
 .imgSliderBox .slider-item .cms-sloga { top:10%;}    
.cms-main-banner .cms-sloga h3 {  font-size:1.75rem; line-height:2.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;}
} 
 
/*----------------------------------------/
about  
----------------------------------------*/
.bg-about{ background: url("../images/index/about-pic.jpg") no-repeat -30% top; background-size: 90% auto;}
.cms-main-wrap{ width: 100%; padding:0px; margin:auto; display: flex; flex-wrap: wrap;  }
.cms-block-box {width:50%; margin:100px auto; padding:15px;}
.cms-block-txt{width:100%;   margin:0px 0px 15px 0px; padding: 20px 80px 20px 0px;    }
.cms-block-txt h1{margin:0px auto 30px auto; font-size:1.313rem; font-weight:700; color:#55a5ce;   }
.cms-block-txt h3 span{display: block; margin:0px auto; font-size:1.35rem; font-weight:700; color:#000;   }
.cms-block-txt p{margin-bottom: 15px; font-size: 1rem;font-weight:500; line-height: 2rem; color:#3b3d40; }
.cms-block-pic{ width: 100%; padding: 0px;}
@media (max-width:1024px) {
.cms-block-box .cms-title{transform: scale(0.8)}
}
@media (max-width:920px) {
.cms-block-box {width:100%; margin: 0px auto; padding:0px;}
}
@media (max-width:768px) {
.cms-block-box:nth-child(1){order: 2;  }
.cms-block-box:nth-child(2){order: 1; padding: 40px 0px 0px 0px;}
.cms-block {width: 100%; margin: 0px auto; padding:0px; }
.cms-block-txt{ padding: 0px;}
}

 

 
/*----------------------------------------/
Brand For Agent
----------------------------------------*/
.cms-product-cate{ width:100%; margin:0px auto;  padding: 40px 0px 60px 0px; }
.cms-product-cate li { width: 100%; margin:0px 10px;padding:20px; position: relative; z-index: 1; list-style: none;background:rgba(255,255,255,.5); border-radius:99rem;  transition: all 0.3s linear 0s; transform: scale(.85); }
.cms-product-cate li:hover {transform: scale(1.05); } 
.cms-product-cate li figure{  width:100%; height: auto; margin-bottom:0px; overflow: hidden;background:rgba(255,255,255,1); border-radius:99rem;   position: relative; order: 2;  }
.cms-product-cate li figure img {  width: 100%; max-width: 100%; height: auto;transition: all 0.5s ease 0s;  }
.cms-product-cate li.slick-current {transform: scale(1.05);  }
.cms-product-cate li.slick-current figure{ box-shadow: 0px 3px 10px rgba(0,0,0,.5); }
.cms-product-cate .slick-prev{left:-30px; top:45%; background-color: transparent;  border: solid 1px #fff;}
.cms-product-cate .slick-next{right:-30px;  top:45%; background-color: transparent;  border: solid 1px #fff;}
@media (max-width:769px) {
.cms-product-cate .slick-prev{left:-20px; }
.cms-product-cate .slick-next{right:-20px;  }
}



/* choose style */
.cms-main-choose{ width: 100%;padding:250px 0px 150px 0px; margin:0px auto; position: relative; background-image:url("../images/index/about-brand.jpg") ,url("../images/index/about-brand-end.jpg");  background-repeat: no-repeat;background-position: left top,right bottom; background-color:#00437d; background-size: 100% auto;}
.cms-choose-wrap{ display: flex; flex-wrap: wrap; justify-content: center;}
.choose-txt{width: 600px; padding:0px 50px 0px 50px;display: flex; flex-wrap: wrap; align-content: center; }
.choose-txt p{ margin-top: 10px;  font-size:1.188rem;font-weight:500;  letter-spacing: 1px;}
.cms-main-choose .cms-title-3 h2,.cms-main-choose .cms-title-3 h3,.cms-main-choose .cms-title-3 p{ color:#fff;}
.choose{ width: 100%;  margin:50px auto; padding:0px; display: flex; flex-wrap: wrap; justify-content:center;align-content: flex-start;  list-style:none;}
.choose li{width:calc(100%/3 - 80px); margin:10px 0px; padding:30px;display: flex; flex-wrap: wrap; justify-content:center;align-items: stretch; align-self: stretch; flex-direction: column; position: relative; border: solid 1px #fff;}
.choose li figure { width:120px; height:120px;position: relative; overflow: hidden; display: flex; margin: 20px auto; text-align: center; cursor: pointer;}
 
.choose li .choose-inner{  padding: 10px; display: flex; flex-wrap: wrap; align-items: center;   -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);  -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s;}

 .choose li h3 {  margin:15px auto; color:#fff; font-size: 1.5rem; font-weight: 700; }
.choose li p {  min-height: 50px; margin:15px auto; color:#fff; font-size: 1rem; font-weight: 500; text-align: center; }
.choose li:before {content: "";  width: 100%;  height: 100%; position: absolute;  left: 0px; top:0px; }

 /*hover style*/
 
.choose li:hover figure img{ filter: blur(3px); opacity: .5;   } 
.choose li:hover .choose-inner{ -webkit-transform: translate3d(0,-150px,0); transform: translate3d(0,-150px,0); }
.choose li:hover:before { transform: scale(1); background:#55a5ce; }


@media (max-width:1180px) {
.cms-main-choose{  margin-top:-30px; position: relative; background-image:url("../images/index/about-brand.jpg") ,url("../images/index/about-brand-end.jpg");  background-repeat: no-repeat;background-position: left top,right bottom; background-color:#00437d; background-size: 100% auto;}
}
 
 


@media (max-width:840px) {
.cms-main-choose{  margin-top:0px; padding:150px 0px;}
.choose li{width:calc(100%/3); margin:10px 0px; padding:30px 0px; }
}


@media (max-width:767.98px) {
.choose li{  width: 100%;  flex-direction: row; }
.choose li figure { width:100px; height:100px;}
.choose-inner{width:calc(100% - 120px); padding: 0px 10px; justify-content: flex-start;}
.choose li h3, .choose li p {text-align: left; margin:15px 0px;}
.choose li:hover .choose-inner{ -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0); }
    
}
.cms-application{ width:calc(100% - 80px); margin:0px auto; padding: 40px; }
.cms-application-cate{width:100%; margin:0px; padding:0px; }
.cms-application-cate li { width: 100%; height: auto;  margin:0px;padding:0px; position: relative; z-index:0; list-style: none; transition: all 0.3s linear 0s;overflow: hidden;   }
.cms-application-cate li figure{ width:100%; height: auto; position: relative;  background: #00437c; }
.cms-application-cate li figure img { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
.cms-application-cate li:after,.cms-application-cate li:before {pointer-events: none; content: ''; width: calc(100% - 16px);  height: calc(100% - 16px);   box-sizing: border-box;  position: absolute; top: 8px;  left: 8px;  transform: scale(0); transition: 0.5s;z-index:9; }
.cms-application-cate li:after { border-top: 2px solid #fff;  border-right:2px solid #fff;  transform-origin: 100% 0%;}
.cms-application-cate li:before { border-bottom: 2px solid #fff; border-left: 2px solid #fff;   transform-origin: 0 100%;}

.cms-application-cate li.slick-current figure{ box-shadow: 0px 3px 10px rgba(0,0,0,.5); }
.cms-application-cate .slick-prev{left:-30px; top:45%; background-color: transparent;  border: solid 1px #fff;}
.cms-application-cate .slick-next{right:-30px;  top:45%; background-color: transparent;  border: solid 1px #fff;}
/*icon style*/
.nav-box{ width: calc(100% - 16px);  padding: 10px; display: flex; flex-wrap: wrap; align-items: center; position: absolute; left: 16px; bottom: 16px; z-index: 9;  -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);  -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s;}
.nav-name{ width: calc(100% - 100px);  padding:10px 10px 10px 20px; flex-direction: column;color: #00437c; order: 2; }
.nav-name h3{font-size: 1.5rem; font-weight: 700; }
.nav-name span{font-size: 0.9rem; font-weight: 700;}
.nav-item { width:100px;     text-align: center; position: relative; order: 1;}
.nav-img { width:100px;height:100px; margin: auto;  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;  border-radius: 99rem;background-color:#00437c;position: relative;}
.nav-img:before { content: ""; width: calc(100% - 16px);  height: calc(100% - 16px); display: block;  border: dashed 1px  #fff; border-radius: 99rem;position: absolute; animation: rotateIt 20s infinite linear; transform-origin: 50% 50%;}
.nav-img img { width:50px!important;  height: auto; display: block; margin: auto;   }
/*hover style*/
.cms-application-cate li:hover figure img{ filter: blur(3px); opacity: .5; } 
.cms-application-cate li:hover .nav-box{ -webkit-transform: translate3d(0,-150px,0); transform: translate3d(0,-150px,0); }
.cms-application-cate li:hover .nav-name {color: #fff; -webkit-transition-delay: 0.05s; transition-delay: 0.05s; -webkit-transition-duration: 0.35s; transition-duration: 0.35s;}
.cms-application-cate li:hover .nav-img { background-color:#55a5ce; }
.cms-application-cate li:hover:after,.cms-application-cate li:hover:before { transform: scale(1);}

@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); }
}

@media (max-width:1440px) {
.cms-application{ width:calc(100% - 20px); padding: 40px 10px; }
.nav-box{ width:100%;left: 0px;  }   
.nav-item { width:80px;  }    
.nav-img { transform: scale(.8)}
.nav-name{  width: calc(100% - 80px);  }    
}
@media (max-width:768px) {
.cms-application{ width:100%; padding: 40px 0px; }
.nav-box{ flex-direction: column;  }  
.nav-name{  width:100%;  }       
}

/*-------------------*/
/***** 最新消息 *****/
/*------------------*/
.cms-news{ width:100%; padding: 20px 40px; background-image: url("../images/index/line.png"),url("../images/index/new-end.jpg"),linear-gradient(to bottom, #fff 0%, #e3edf6 50%,#e3edf6 100%); background-repeat: no-repeat, no-repeat,repeat; background-position: -100px 200px,right bottom, left bottom; background-size: auto, auto 30%, auto}
.cms-news-title{ width: 33%;  display: flex; flex-wrap: wrap; justify-content:center; align-items:center;flex-direction: column; }
.cms-news-box{ width: 67%;  }

.cms-news-title .cms-title-3{width: auto;}
.cms-news-title .cms-title-3 h2,.cms-news-title .cms-title-3 h3{margin: 0px;}
 
 /*--分類new-tag --*/
.new-tag {  width:100px;padding: 0px 10px ; font-size: 0.875rem; font-weight: 400; color:#c09547; z-index: 9; right: 0px; bottom: 0px;  position: absolute; }
/*.new-tag:after{ content:""; position: absolute; right:-10px; top:12px; width: 20px; height: 1px; background:#0da1b0;  }*/
a.new-tag {color:#fff;}
.new-tag-01{color:#fff; background:#55a5ce;}
.new-tag-02{color:#fff; background:#b7cb1b;}
.new-tag-03{color:#fff; background:#f6d60a;}

  
.cms-news-list { width: calc(100% - 40px); padding: 20px;  margin: 10px auto;   display: flex;  flex-wrap: wrap; position: relative; z-index: 1; }
.cms-news-list li{display: flex;flex-direction: column; width: 100%; padding:15px;margin:20px 5px 60px 5px; box-sizing: border-box;overflow: hidden;list-style: none;transition: all 0.5s ease 0s;  position: relative;   border: solid 1px #eee; background: #fff;box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1); }
.cms-news-list li a:hover h3,.cms-news-listli a:hover p,.cms-news-listli a:hover .date {color:#55a5ce;}  
.cms-news-list figure img {width: 100%; position: relative; overflow: hidden; transition: all 0.5s ease-in-out;}
.cms-news-list li:hover figure img { opacity: .5;  transform: scale(1.15); background:#0da1b0  }
.cms-news-list figure {position: relative; overflow: hidden;  }
.cms-news-list .news-box {position: relative;  width: 100%; box-sizing: border-box;  padding:10px 0px; }
.cms-news-list .date{  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #aaa;}
.cms-news-list a h3 {position: relative;width: 100%; min-height:60px; margin:0px 0px 10px 0px; font-size:1.125rem;  line-height: 1.7142857143rem;font-weight:700;  color:#00437c;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; word-break: normal;}
.cms-news-list a p { width: 100%; font-size: 0.9375rem; line-height: 1.7142857143rem; color:#3b3d40; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; word-break: normal;}
 
.cms-news-list .slick-dots{ bottom: 20px;}
@media (max-width:1680px) { 
.cms-news-title{ width:25%;  }
.cms-news-box{ width:75%;  }
 }
@media (max-width:1440px) { 
.cms-news-list { width: 100%; padding: 20px 0px; }
}
@media (max-width: 798px) {
.cms-news-title .cms-title-3 h2,.cms-news-title .cms-title-3 h3{margin: auto;}
.cms-news{ width:100%; padding: 20px 10px; }
.cms-news-title{ width:100%;  }
.cms-news-box{ width:100%;  }
.cms-news-list{margin: 0px; padding: 0px;}   
.cms-news-list a h3{ font-size: 0.9375rem; }
.cms-news-list li{  padding:5px;  }
.cms-news-list .news-box {  padding:10px 0px 30px 0px; }
}


/*-------------------*/
/***** end contact  *****/
/*------------------*/
.cms-slider-wrap{ width: 100%; margin: auto; padding:0px 0px 50px 0px;  display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column;}
 .cms-slider-nav { width: 100%; max-width: 70%; height: auto; margin:20px auto; padding:0px 40px;  position: relative;  }
.cms-slider-nav:after{ content: ""; width: 80%; height: 1px; background:#00437c; position: absolute; z-index: 0; left:10%; top:25%; transform: translate(0,-25%);}

.slider-nav{ width: 100%;  padding: 0px 80px; margin: auto; display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; z-index: 9; }
.slider-nav li { width:calc(100%/3 - 40px); padding:10px 20px; margin: auto; display: flex;flex-wrap: wrap; justify-content: center; position: relative;}
.slider-nav li:before{ content:""; width: 10px; height: 10px; position:absolute;z-index: 3; right:5px; top:23%;  transform: translate(0,-23%);margin: auto; background:#3878e0; border-radius:99rem;  }
.slider-nav li:after{ content:""; width: 20px; height: 20px; position:absolute; z-index: 1; right:  0px; top:22%; transform: translate(0,-22%); margin: auto; background:#e3edf6; border: dashed 1px #727984;border-radius:99rem;  }

.slider-nav li:last-child:before,.slider-nav li:last-child:after{ display: none;}



.p-item { text-align: center; width: 100%; padding-bottom: 34px; position: relative}
.p-item:hover .p-img {background-color: #55a5ce}
.p-item:hover .p-img img {   opacity: 1}
.p-item:hover .p-img:before { border: dashed 1px #fff; filter: grayscale(1) brightness(1) opacity(1);}
.p-item:hover p { color:#55a5ce}
.p-img {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin:10px auto;width: 88px;height: 88px;border-radius: 99rem;background-color:#00437c;position: relative;}
.p-img:before { content: ""; width: calc(100% - 16px);  height: calc(100% - 16px); display: block;  border: dashed 1px #fff;border-radius: 99rem;position: absolute;animation: rotate2 20s infinite linear; transform-origin: 50% 50%;  }
.p-img img { margin: auto;display: block; width: 52px; height: 52px; }
.p-item p{ margin: 25px auto; font-size:1.313rem; color: #00437c; font-weight: 700; line-height: 2rem; }
 
 @media (max-width:1440px) {
.cms-slider-nav {  max-width: 100%; }   
}

 @media (max-width:768px) {
.cms-slider-nav{ padding:0px; }
.slider-nav{padding: 0px; }     
.cms-slider-nav:after{ width: 100%; left:0; transform: translate(0,0);}
.slider-nav li { width:calc(100%/3 - 10px); padding:10px 5px;  }
}
 @media (max-width:767.98px) {
 .slider-nav li:before{  right:-5px;    }
.slider-nav li:after{  right: -10px;   }
    
  .p-item p{ font-size:1rem;  line-height: 1.5rem; }
}

/*-------------------*/
/***** 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; }
}



.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:300px; height: auto;margin:0px 0px 60px 0px;padding: 0px; display: block; position: relative; } 
.cms-title:after { content: "";width:150px; height: 150px;position: absolute; left:0px; top:-55px; background: url("../images/index/h1.svg") no-repeat center top;} 


.cms-title h2{ width: auto;margin:0px; font-size:2.15rem; font-weight:700;   color: #00447c  }
.cms-title p{ margin:0px auto 10px auto;font-size:1.125rem;  font-weight: 700; line-height: 1.35rem;  color:#55a5ce; }


.cms-title h1{ width: 100%;display: block;margin: 0 auto; font-size: 2.5rem; font-weight:900; color:#000;  }
.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 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 0px 15px 0px; font-size: 1.75rem; font-weight: 700;   }
/*.cms-title-2 h3 strong{padding-right:100px; position: relative;  }
.cms-title-2 h3 strong:before { content: ""; width: 50px; height: 2px; right: 25px; top:18px; position: absolute; background-color: #131212; }*/
.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 auto; font-weight:400;color:#666464;  }

 @media (max-width:767.98px) {
.cms-title-2 h1{ font-size: 2.15rem;   }

}

/*ms-title-3  樣式
=================================*/
.cms-title-3 { width:100%; height: auto;  margin:0px auto 30px 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 5px auto; font-size: 1.5rem; font-weight: 700; color:#55a5ce;  }
.cms-title-3 h3{ width: auto;margin:0px auto 0px auto;  font-size: 2.5rem; font-weight: 700;  color:#00437c;letter-spacing:5px;  }
 .cms-title-3 p{ width: auto; margin:0px auto;  font-size:1rem; line-height: 2rem; font-weight: 500; padding: 0px;  color: #666464;   }
/*---------------*/
/***** 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:160px; 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; border:solid 1px #fff;}
.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: 15px; 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: #000;}
.bg-orange{background: #f39700;  }
.bg-orange-line{background: #f39700;  }
.bg-blue{background: #00437c;  }

.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-txt { font-size: 14px; line-height: normal; letter-spacing: normal }
}


/*cms-btn Styles 1===*/
.cms-btn-01 { cursor: pointer; width:140px; height:2.75rem; padding:0px 50px 0px 0px; line-height:2.75rem; display: block; margin: 0; position: relative;  z-index: 1;transition: all 0.3s ease; }
.cms-btn-01 span { display: block;  width:auto;  transform-origin: center left; letter-spacing: 1px; transition: all 0.3s ease; position: relative;z-index:1; font-size: 1.063rem; font-weight: 400; color:#369ecf;}
.cms-btn-01 em {position: absolute;width:60px; height:25px; right:0px;top: 25%; transition: all 0.3s ease; background: url("../images/icon/arrow-right-2.svg") no-repeat right top; z-index:1;   }
.cms-btn-01:hover span{ transform:translateX(40px);}
.cms-btn-01:hover em{ transform:translateX(20px);}
/*cms-btn Styles 2===*/
#cms-main 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: #2a82bc;border:solid 1px #0070bd; 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;}
#cms-main 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;   }
.cms-btn-02:hover em{ transform:translateX(10px);}

@media (max-width: 991.98px) {
#cms-main a.cms-btn-02{  font-size:0.9rem;   }
}
/* Sweep To Right */
.hvr-sweep-to-right { cursor: pointer; display: inline-block; position: relative; 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; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #0da1b0!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;}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: #fff!important;}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1);}