/* 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 === */
  

/**banner=================================*/
.cms-main-banner { width: 100%;max-width: 90%; height: auto; margin:0px auto; padding:0px; position: relative; z-index: 1;  }
/*.cms-main-banner::before{content: "";width: 40%; height: 100px; position: absolute; z-index: 999; right: 0px; bottom: 0px; background: #fff; clip-path: polygon(9% 0, 100% 0, 100% 100%, 0% 100%);}*/
.cms-main-banner:after{content:'';position: absolute;z-index: 9999;right:10%; bottom:40px; display: block; width: 1px; height: 25px; background:#0070bd; }
.cms-main-banner .imgSliderBox { width: 100%; max-width: 100%; margin: 0px auto; padding:0px; display: flex; flex-wrap: wrap; justify-content: center; position: relative; z-index:0;; overflow: hidden;}
.slider-item { display: block; width: 100%; max-width: 100%; margin: auto; position: relative; z-index:2; }
.slider-item img { display: block;  width:  100%; max-width: 100%;  margin: auto; height: auto; position: relative; }
.cms-main-banner .slick-prev,.cms-main-banner .slick-next{position: absolute; top: auto!important; bottom:30px; z-index: 99; }
.cms-main-banner .slick-prev{left:85%;}
.cms-main-banner .slick-next{right:5%;}
.cms-main-banner .slick-dots{ position: absolute;  left: 10px!important; top:30%!important; display: block; width: 50px; padding: 0; margin: 0; list-style: none; text-align: center;}
.cms-main-banner .slick-dots li{ position: relative; display: block; width: 10px; height: 10px; margin:10px 5px; padding: 0; cursor: pointer; border-radius:99rem; border: none;}
.cms-main-banner.slick-dotted.slick-slider{ margin-bottom: 0px!important; }
.cms-main-banner .cms-sloga {width: 80%; max-width: 600px; height: auto;  margin: auto;  left:12%; top:38%;position: absolute;  display: flex; flex-wrap: wrap;  flex-direction: column;  z-index: 9;}   
.cms-main-banner .cms-sloga 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;}
.cms-main-banner .cms-sloga 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; }
.cms-main-banner .cms-sloga strong{color:#db0632;}
.cms-main-post-btn{margin: 20px auto;}

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



.zoom {-webkit-animation: zoom 2s ease-in-out; -moz-animation: zoom 2s ease-in-out; -o-animation: zoom 2s ease-in-out; -ms-animation: zoom 2s ease-in-out; animation: zoom 2s ease-in-out;}
.type { -webkit-animation-name: type; animation-name: type; -webkit-animation-timing-function:cubic-bezier(0.250, 0.460, 0.450, 0.940) ; animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940) ;}
.animated.type { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;}
.animated.zoom { -webkit-animation-duration: 6s; animation-duration:6s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}

@media (min-width: 1980px) {
.cms-main-banner .cms-sloga { max-width: 660px; right:15%; top:34%; }   
.cms-main-banner .cms-sloga h3 { font-size: 3.5rem; line-height:3.5rem; }

}
@media (min-width: 2500px) {
.cms-main-banner .cms-sloga { max-width: 720px; right:15%; top:34%; }   
.cms-main-banner .cms-sloga h3{ font-size: 4rem; line-height:4.5rem; }

}
@media (max-width: 1199.98px) {
.cms-main-banner .cms-sloga { top:40%;}    
.cms-main-banner.slick-dotted.slick-slider { margin-bottom: 0px; }
}

@media (max-width: 1024px) {
.cms-main-banner .cms-sloga {  left:5%; } 
} 

@media (max-width: 768px) {
.cms-main-banner { width: 100%; max-width: 100%; } 
 .cms-main-banner .imgSliderBox { width: 100%; height:500px; }
 .imgSliderBox .slider-item .cms-sloga { top:10%;}    
   
.cms-main-banner .cms-sloga h3 {  font-size:1.75rem; line-height:2.75rem; margin-bottom: 5px;  height: auto;  }
 .cms-main-banner .cms-sloga h4 { font-size:100%;  }
    
.type { animation:none; }
.animated.type { animation:none;}
} 
 
@media (max-width: 767.98px) {
.cms-main-banner:after{display: none;}
.cms-main-banner .cms-sloga { width:90%; max-width: 100%; position: absolute; left:10%; top:50%;  }   
.cms-main-banner .cms-sloga h3 {font-size: 1.875rem; margin-bottom: 5px; width: 100%;height: auto; color: #00437c; text-shadow: 0px 1px 2px rgba(255,255,255,.1); }
.cms-main-banner .cms-sloga h4 { width: 100%;font-size: 1rem; line-height: 1.3rem; color: #000; text-shadow: 0px 1px 2px rgba(255,255,255,.1); }
}
 





.slide .slide__img img { max-width: 100%; height: auto; opacity: 1 !important; -webkit-animation-duration: 3s; animation-duration: 3s; transition: all 1s ease;}
.slide .slide__content--headings .animated {transition: all 0.5s ease;}
.slider [data-animation-in] {  opacity: 0;  -webkit-animation-duration: 1.5s; animation-duration: 1.5s;  transition: opacity 0.5s ease 0.3s;}
 




@keyframes zoom {
  0% { -webkit-transform: scale(1); transform: scale(1); opacity: .8; }
  100% { -webkit-transform: scale(1.05); transform: scale(1.05);  opacity: 1; }
 }
 
@-webkit-keyframes type {
  0% { -webkit-transform: translateX(300px); transform: translateX(300px); opacity: 0; }
  100% { -webkit-transform: translateX(0);  transform: translateX(0); opacity: 1; }
}
@keyframes type {
  0% {-webkit-transform: translateX(300px); transform: translateX(300px); opacity: 0; }
  100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}

  
/* /////////// IMAGE ZOOM /////////// */
@-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);  }
}
.zoomOutImage { -webkit-animation-name: zoomOutImage; animation-name: zoomOutImage;}

.in.fade-in { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0);  opacity: 1;}
.in { -webkit-transform: translateY(20px);  -ms-transform: translateY(20px);  transform: translateY(20px); opacity: 0; transition: all 0.8s ease-out;}






 
.wave { position: absolute; z-index: 1;  width: 100%; padding-top: 12%; bottom: -45px; left: 0;   background-image: url("../images/index/wave.png");  background-repeat: repeat-x; background-size: 100%;animation: wave 16s linear infinite;}
 .wave::before {  content: ''; position: absolute; width: 100%; padding-top: 12%; bottom: -45px; left: 0; background-image: url("../images/index/wave.png"); background-repeat: repeat-x; background-size: 100%;opacity: .5; animation: wave-reverse 8s linear infinite;}
/* .wave::after { content: ''; position: absolute; width: 100%; padding-top: 12%; bottom: -45px; left: 0; background-image: url("../images/index/wave.png"); background-repeat: repeat-x; background-size: 100%;  opacity: .8; animation-delay: -4s; animation: wave 16s linear infinite;}
*/ 
 
 @media (max-width:840px) {
  .wave {bottom:-20px; }   
}
 @keyframes wave {
  0% { background-position: 0; }
  100% { background-position: 100vw; }
}
@keyframes wave-reverse {
  0% { background-position: 100vw; }
  100% { background-position: 0; }
}
 

 
/*scroller mousey Styles====*/
.scroll-downs { position: absolute;  left: 20px; bottom: 32vh;  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:#55a3ce; 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====*/
@media (max-width: 767.98px) {
    .scroll-downs { display: none;}   
}

/*----------------------------------------/
about  
----------------------------------------*/
/* about style */
.cms-about-wrap{ padding:100px 0px 60px 0px;  display: flex; flex-wrap: wrap; justify-content: center; position: relative; z-index: 2;}
.about-txt{width: 600px; padding:0px 50px 0px 50px;display: flex; flex-wrap: wrap; align-content: center; }
.about-txt p{ margin-top: 10px;  font-size:1.188rem;font-weight:500;  letter-spacing: 1px;}
.about{ width: 100%;  margin:50px auto; padding:0px; display: flex; flex-wrap: wrap; justify-content:center;align-content: flex-start;  list-style:none;}
.about li{width:calc(100%/5 - 20px); margin:10px 0px; padding:30px 0px;display: flex; flex-wrap: wrap; justify-content:center;align-items: stretch; align-self: stretch; flex-direction: column; position: relative;  }
.about li figure { width:200px; height:200px;position: relative; overflow: hidden; display: flex; margin: 20px auto; text-align: center; cursor: pointer;}

.about li .about-inner{  padding: 10px; display: flex; flex-wrap: wrap; align-items: center; flex-direction: column;  -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);  -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s;}

.about li h3 {  margin:15px auto;  font-size:1rem; font-weight: 700;text-align: center; }
.about li p { margin:5px auto; color:#fff; font-size: 1.75rem; font-weight: 700; text-align: center;-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(0deg, #8e38f3, #6242e0, #554cde, #485ede, #3d69dd, #2288dc), linear-gradient(180deg, #151515, #151515);
-webkit-text-fill-color: rgba(0, 0, 0, 0);
line-height: 1; }
.about li:before {content: "";  width: 100%;  height: 100%; position: absolute;  left: 0px; top:0px; }

/*hover style*/

.about li:hover figure img{ filter: blur(3px); opacity: .5;   } 
.about li:hover .about-inner{ -webkit-transform: translate3d(0,-150px,0); transform: translate3d(0,-150px,0); }
.about li:hover:before { transform: scale(1); background:#55a5ce; }
@media (max-width:840px) {
.cms-main-about{  margin-top:0px; padding:150px 0px;}
.about li{width:calc(100%/3); margin:10px 0px; padding:30px 0px; }
}


@media (max-width:767.98px) {
.about li{  width: 100%;padding: 0px 20px;  flex-direction: row; }
.about li figure { width:100px; height:100px;}
.about-inner{width:calc(100% - 120px); padding: 0px 10px; justify-content: flex-start;}
.about li h3, .about li p {text-align: left; margin:15px 0px;}
.about li:hover .about-inner{ -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0); }
}

 
.bg-about{background-image: linear-gradient(to top, #ccdcec 0%, white 100%); }


.bg-program{ background-image: linear-gradient(to top, #01afb8 0%, #fff 50%, #ccdcec 100%); position: relative;}

.cms-main-wrap{ width: 100%; padding:0px; margin:auto; display: flex; flex-wrap: wrap;  }
.cms-block-box {width:70%; margin:100px auto; padding:15px;}
.cms-block-box-4 {width:40%; margin:100px auto; padding:15px;}
.cms-block-box-6 {width:60%; margin:100px auto; padding:15px;}
.cms-block-box-full {width:100%; margin: auto; padding:15px;}


.cms-block-txt{width:80%;   margin:0px auto; padding: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; text-align: center;}
.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(2){  padding: 40px 0px 0px 0px;}
.cms-block {width: 100%; margin: 0px auto; padding:0px; }
.cms-block-txt{ width: 100%;padding: 0px;}
    .cms-block-txt p{ font-size: 0.9rem;
    font-weight: 400;text-align: left;
    line-height: 1.35rem;}
}
 

 

.esg-card { position: relative; padding-right: 2.34375vw; padding-left:0;color: #fff}
@media (max-width:767px) {
.esg-card { padding-right: 4.6875vw;padding-left: 4.6875vw}
}

.card-deco { position: absolute; z-index: 3}

@media (max-width:767px) {
	.card-deco { -ms-transform: none !important; transform: none !important }
}



.card-deco.learn { top: -.10417vw; left: 3.85417vw; width: 6.25vw; -webkit-animation: rotate_learn 2.3s linear infinite alternate; animation: rotate_learn 2.3s linear infinite alternate}
@media (max-width:840px) {
}
@media (max-width:767px) {
.card-deco.learn { top: 0; right: 9.375vw; width: 23.125vw }
}

.card-deco.plan { top: 0; right: 3.17708vw; width: 4.375vw; -webkit-animation: float_plan 3s linear infinite alternate; animation: float_plan 3s linear infinite alternate}
@media (max-width:840px) {
.card-deco.plan { right: 1vw; width: 10vw }
}
@media (max-width:767px) {
.card-deco.plan { top: 0; left: 4.375vw; width: 21.875vw }
}

.card-deco.cloud { top: 0; left: 8vw; width: 9.16667vw}

@media (max-width:767px) {
.card-deco.cloud { top: -4.9375vw; right: auto; left: -10.9375vw; width: 29.0625vw }
}



@-webkit-keyframes rotate_learn {
	0% { transform: rotate(10deg) }
 	to { transform: rotate(-10deg) }
}
 @keyframes rotate_learn {
	0% { transform: rotate(10deg) }
 	to { transform: rotate(-10deg) }
}

@-webkit-keyframes float_plan {
	0% { transform: translateY(-10px) }
 	50% { transform: translateY(0) }
 	to { transform: translateY(10px) }
}

@keyframes float_plan {
	0% { transform: translateY(-10px) }
 	50% { transform: translateY(0) }
 	to { transform: translateY(10px) }
}

 



.card-price,.card-slogan,.card-title {position: relative; z-index: 1}
.card-slogan {  font-size: 1.82292vw; font-weight: 900;  text-align: center; letter-spacing: .1em; line-height: 2.5rem;}

@media (max-width:840px) {
 .card-slogan {  line-height: 1.5rem;}

}
@media (max-width:767px) {
.card-slogan { padding-bottom: 2.8125vw; font-size: 5vw }
 }

.card-title { white-space: nowrap; line-height: 1}
.card-title-number { font-size: 3.64583vw; font-weight: 900; letter-spacing: .05em}
@media (max-width:767px) {
.card-title-number { font-size: 15vw }
}


.card-title-unit { font-size: 1.97917vw; font-weight: 900}

@media (max-width:767px) {
.card-title-unit { font-size: 5vw }
}


.card-price { padding-top: .88542vw; font-weight: 900; text-align:center; color: #dfd4fd; letter-spacing: .05em; line-height:1.5rem;}
@media (max-width:767px) {
.card-price { padding-top: .625vw; font-size: 4.375vw }
}

.item-2 .card-price { color: #fde9aa}
@media (max-width:767px) {
.item-2 .card-price { font-size: 4.375vw }
}

.esg-card:after,.esg-card:before { content: ""; position: absolute; top: 0; left: 0; width: inherit; height: inherit; border-radius: 100%}
.esg-card:before { -webkit-animation: bump 12s linear infinite; animation: bump 12s linear infinite}
.esg-card:after { -webkit-animation: bump 12s linear 1s infinite; animation: bump 12s linear 1s infinite}
.esg-card.item-1 { margin:0px auto; padding: 9.42708vw 0px 0px 0px; width: 25vw; height: 25vw}
.esg-card.item-1:after,.esg-card.item-1:before {background-image: linear-gradient(180deg, #e2d7ff, #6035e5)}

@media (max-width:840px) {
 .esg-card.item-1 {   padding: 5vw 0px 0px 0px; }
}
@media (max-width:767px) {
.esg-card.item-1 { left: -3.75vw; margin-top: 0; margin-right: 0; padding-top: 29.375vw; width: 93.125vw; height: 81.875vw; margin-bottom: 34px }
}

.esg-card.item-2 {margin:-20% auto 0px auto; padding: 9.42708vw 0px 0px 0px;width: 23vw;height: 23vw}
.esg-card.item-2:after,.esg-card.item-2:before {background-image: linear-gradient(180deg, #fcbe87, #fbd205)}
@media (max-width:840px) {
.esg-card.item-2 { margin:10% auto 0px auto;  width: 30vw;height:30vw}
}
@media (max-width:767px) {
.esg-card.item-2 {margin: auto;padding-top: 21.875vw;width: 75vw;height: 69.6875vw}
}


.esg-card.item-3 {margin:0px auto; padding-top:5vw;width: 22vw;height: 22vw}
@media (max-width:840px) {
.esg-card.item-3 {width: 30vw;height:30vw}
}


@media (max-width:767px) {
.esg-card.item-3 {margin: 22px auto 0;padding-top: 26.5625vw;width: 76.875vw;height: 73.125vw}
}

.esg-card.item-3:after,.esg-card.item-3:before {background-image: linear-gradient(135deg, #f473aa 30%, #ffd27d 100%)}

@-webkit-keyframes bump {
	0% {border-radius: 100%}
	10% {border-radius: 100% 70%}
	20% {border-radius: 91% 88% 75% 69%}
	30% {border-radius: 100% 100% 85%}
	40% {border-radius: 88% 100% 70%}
	50% {border-radius: 75% 100% 100%}
	60% {border-radius: 87% 78% 75% 84%}
	70% {border-radius: 79% 90% 80% 72%}
	80% {border-radius: 76% 92% 90% 77%}
	90% {border-radius: 83% 77% 99% 88%}
	to {border-radius: 100%}
}

@keyframes bump {
	0% {border-radius: 100%}
	10% {border-radius: 100% 70%}
	20% {border-radius: 91% 88% 75% 69%}
	30% {border-radius: 100% 100% 85%}
	40% {border-radius: 88% 100% 70%}
	50% {border-radius: 75% 100% 100%}
	60% {border-radius: 87% 78% 75% 84%}
	70% {border-radius: 79% 90% 80% 72%}
	80% {border-radius: 76% 92% 90% 77%}
	90% {border-radius: 83% 77% 99% 88%}
	to {border-radius: 100%}
}

@-webkit-keyframes bump2 {
	0% { transform: rotate(0deg) }
 	to { transform: rotate(1turn) }
}

@keyframes bump2 {
	0% { transform: rotate(0deg) }
 	to { transform: rotate(1turn) }
}

 



@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;  position: relative; z-index: 1; background: #fff;}
.cms-news-title{ width: 40%;  display: flex; flex-wrap: wrap; justify-content:center; align-items:center;flex-direction: column; }
.cms-news-box{ width: 60%;padding: 20px 0px 20px 30px;  }


@media (max-width:840px) { 
.cms-news{  padding: 20px 0px; }
.cms-news-title{ width:40%;  }
.cms-news-box{ width:60%; padding: 20px 0px; }
 }





.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 li .new-class {  width: 90px; color: #fff; font-size: 24px; font-weight:400; line-height: 34px; letter-spacing: 0.8px;  text-align: center; padding: 0 10px; position: absolute;  top: 6px; right: 25px; z-index: 3;}
.cms-news-list li .new-class::after {  content: ''; width: 100%; height: 100px; background: linear-gradient(-50deg, rgba(114, 175, 211, 1) 0%, rgba(55, 236, 186, 1) 100%); box-shadow: 0 0 10px rgb(0 0 0 / 16%);position: absolute; top: calc(50% - 50px); left: 0; z-index: -1;}
.cms-news-list li.item{width: 100%; padding: 0px;margin: 0px; position: relative; z-index: 1;}
.cms-news-list li.item::before {  content: ''; width: 80px; height: 100px; background: #01afb8; position: absolute;  top: -10px;  right: 78px; z-index: 0;  -webkit-transform: skewX(-40deg); -ms-transform: skewX(-40deg); transform: skewX(-40deg);}
 


.cms-news-list{ width: 100%; padding: 0px; margin: auto;position: relative; }
.cms-news-list li{display: flex;flex-direction: column; width:calc(100% - 50px); padding:0px;margin:30px 25px ; box-sizing: border-box; list-style: none;transition: all 0.5s ease 0s;  position: relative;    }
.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 {width: 100%; position: relative; overflow: hidden; box-shadow: 0 5px 15px rgb(0 0 0 / 15%); transition: all 0.5s ease-in-out; }
.cms-news-list figure img {width: 100%; transition: all 0.5s ease-in-out; }
.cms-news-list li:hover figure img  {  transform: scale(1.15);  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: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 0px; }
.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{   width:calc(100% - 20px); padding:0px;margin:30px 10px ; }
.cms-news-list .news-box {  padding:10px 0px 30px 0px; }
}





 /* choose style */
.cms-main-choose{ width: 100%;padding:50px 0px 100px 0px; margin:0px auto; position: relative; background: #f4f3f2; }
.choose{ width: 100%;  margin: 0px auto; padding: 0px; display: flex; flex-wrap: wrap; justify-content:flex-start;align-content: flex-start; align-items: flex-start; list-style:none;}
.choose li{width:calc(100%  - 20px); margin: auto;  position: relative;}
.choose li figure{  margin: auto;display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center;align-items: center;  }
.choose li figure img { width:100%; height:auto;display: block; margin: auto;  position: relative; overflow: hidden; text-align: center; cursor: pointer;-webkit-filter:grayscale(1) opacity(.8);}
 
 
 
 /* main-contact */
.cms-main-contact{ width: 100%;padding:150px 0px; margin:0px auto; position: relative; background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);}
.cms-main-contact h2{width: auto; margin:15px auto 30px auto; font-size: 2.15rem; color:#fff; font-weight:500; text-align: center; letter-spacing: 2px;  }
@media (max-width: 797.98px) {
.cms-main-contact h2{ font-size: 1.75rem;}   
}
 

.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%; max-width: 50%; height: auto;margin:0px auto;padding: 0px; display: block; position: relative; } 

.cms-title h1{ width: 100%;display: block;margin: 0 auto 15px auto; font-size: 2.5rem; font-weight:900; text-align: center;  color: #00447c }
.cms-title h2{ width: auto;margin:0px auto 15px auto; font-size:2.15rem; font-weight:700;  color:#55a5ce;   text-align: center;   }
.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{ width: 80%; padding: 0px 50px;  margin:0px auto 10px auto;font-size:0.9rem;  font-weight: 400; line-height: 1.35rem;  text-align: center;   }
.cms-title strong{ color:#f39800;; }
 @media (max-width:840px) {
.cms-title {   max-width: 80%;  } 
.cms-title h1{ font-size: 2rem;  }
.cms-title h2{ font-size: 1.5rem;  }
.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; }
 .cms-title p{ width: 100%; padding: 0px;  }

}
 /*ms-title-2  樣式
=================================*/
.cms-title-2 { width:100%;  margin:0px; padding: 0; position: relative; }
.cms-title-2::after { display: block;  content: ""; height: 60px; width: 1px; margin: 0 auto 20px auto; background-color: #ccc;}
.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 15px auto; font-size: 3rem; font-weight: 700;text-align: center;   -webkit-background-clip: text; background-clip: text;background-image: linear-gradient(-20deg, #00437c 0%, #21d4fd 100%);  -webkit-text-fill-color: rgba(0, 0, 0, 0);  }
 .cms-title-2 h3{ width: 100%; margin:15px auto;font-size: 2.5rem; color:#00437c; font-weight:700; text-align: center; }
 
 @media (max-width:840px) {
 .cms-title-2 h2{ font-size: 2rem; }
 .cms-title-2 h3{ font-size: 1.5rem; }
     
}
/*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;z-index: 9; }
.cms-title-3 h2{ width: auto;margin:0px auto 5px auto; font-size: 3rem; font-weight: 500; 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);}
 

 
.grid-row-wrapper { padding-right: 15px; padding-left: 15px;  width: 100%;margin: 0 auto}
.grid-row { display: -webkit-box; display: -ms-flexbox; display: flex;  -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin: 2% auto;}
.grid-row .grid-item { position: relative; width: 100%; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; justify-content: space-between; padding: 15px;}
    

 
@media (max-width: 767.98px) {
.grid-row-wrapper { padding-left: 15px;  padding-right: 15px; }
 .grid-row {  -ms-flex-wrap: wrap; flex-wrap: wrap; }
   
.grid-row-wrapper .grid-row .grid-item { padding-left: 0;padding-right: 0;}
 }
 

@media (min-width: 768px) {
.grid-row-wrapper {width: 750px; }  
}
  
@media (min-width: 992px) {
.grid-row-wrapper { width: 970px;}
.grid-row-wrapper .grid-row { -ms-flex-wrap: nowrap; flex-wrap: nowrap}
.grid-row-wrapper .grid-row .grid-item { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; width: 0  }
}

@media (min-width: 1200px) {
.grid-row-wrapper { width: 1170px}
}