/* 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; }
html { font-size: 100%; }  
body { font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'Nunito', "sans-serif"!important;  overflow-x:hidden; margin:0; padding:0;  position: relative; }
#cms-main h1 {  font-size: 1.5rem; font-weight: 400;color:#411f1f; margin-bottom: 25px; line-height:2.75rem;    }
#cms-main h2 { font-size: 2rem; font-weight: 400;  margin: 5% auto;  }
#cms-main h3,#cms-main h4 { font-size: 1.5rem; font-weight: 400; }
#cms-main h5,#cms-main h6 { font-size: 1.125em; font-weight: 400 }

h1, h2, h3, h4, h5, h6 { line-height: 1.25em;font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'Nunito', "sans-serif"!important; }
p, td, li, label { font-size: 1rem;   color: #6a6a6a; line-height: 1.5rem;   font-weight: 400!important;}
 a { color:#232323;text-decoration: none!important; -moz-transition: color 0.25s ease, opacity 0.25s ease; -o-transition: color 0.25s ease, opacity 0.25s ease; -webkit-transition: color 0.25s ease, opacity 0.25s ease; transition: color 0.25s ease, opacity 0.25s ease }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a img { border: none; }
article a { word-wrap: break-word; word-break: keep-all; }
strong { font-weight: 700; }
 .no-gutters .col [class*="col-"] { padding-right: 0; padding-left: 0; }
 
 /**banner
=================================*/
.cms-main-banner{ width: 100%; height: auto; margin:-20px auto auto auto; padding: 0px; overflow: hidden;  position: relative; z-index: 0;}
.cms-main-banner img{ width: 100%; max-width: 100%;  height: auto; position: relative; }
.cms-main-banner .slick-prev { left:0;z-index: 1; }
.cms-main-banner .slick-next { right:0;z-index: 1;  }
.cms-main-banner .slick-dots { bottom:20px; }

@media (max-width: 767.98px) {
.cms-main-banner{ width: 100%; height: auto;  margin:0px auto;}
.cms-main-banner .slick-dots { bottom:-10px; }
}
/*-------------------*/
/***** 關於我們純文字區塊 *****/
/*------------------*/
 .cms-main-about:before{    content: ""; display: block; position: relative; width: 100%; height: 50px; opacity:.75; top: -35px; background: url(../images/index/nav-after.svg) right top  repeat-x; background-size: 100% auto; background-color: transparent;  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; transform: translate3d(450px, -10px, 0); z-index: 99;} 
.cms-main-about:after{    content: ""; position: absolute;  width: 100%; height: 50px;  top:-25px; background: url(../images/index/nav-after.svg) left top  repeat-x; background-size:100% auto; background-color: transparent;   animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite; opacity:1; z-index: 999;}
.cms-main-about{position: relative;margin-top: 50px; width: 100%; z-index: 0; padding:0; margin: 0;   background-image: linear-gradient(to bottom, #fef3d3 0%, #fefbf4 100%); }
.cms-main-about-content {width:100%;  max-width:1100px; margin: 0 auto; padding:80px 10px; display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; z-index: 99;}
.cms-main-about-content blockquote{width:100%;  max-width:600px; margin: 0 auto; display: flex; justify-content: center;  text-align-last: center; color: #0d386d;font-size:1.313rem; font-weight: 700; line-height: 2rem; }
.cms-main-about-txt{ margin:5% auto; padding:0px 15px;display: flex; flex-wrap: wrap; align-content: center; align-items: center; }
.cms-main-about-txt-1{  width: 50%; }
.cms-main-about-txt-2{  width: 35%; }

.item-circle{ display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; width: 80px; height:80px; border-radius:50%; background: #f39139;}
.item-circle i{ display: flex;  color: #fff; font-size: 3rem; font-weight: 300; }
.item-wrap{flex: 0 0 70%; padding-left: 15px; }
#cms-main .item-wrap h3 {margin-bottom: 15px; color:#0d386d; line-height: 1.75rem;  }
#cms-main .item-wrap p { color:#56667a;  font-weight: 400!important; font-size:0.9375rem; line-height: 1.75rem;  }

@media (max-width: 1024px) {
.cms-main-about:before{  top: -6px;     } 
.cms-main-about:after{  top:-7px;}

}
@media (max-width: 768px) {
 .cms-main-about-content {width: 100%;max-width:600px; margin:0 auto; padding:50px 10px 130px 10px;}
.cms-main-about-txt-1,.cms-main-about-txt-2{width: 100%;}
}
  
.cms-main-news:before{  content: ""; display: block; width:100%; height:200px; position:relative;z-index:0; pointer-events: none;margin-top: -140px; background: url("../images/index/bg-circle.svg") right top repeat-x; background-size: 100% auto; background-color: transparent; animation:bgcircle 10s linear infinite; }
@keyframes bgcircle {
    0%{transform:scale(1);}
    50%{transform:scale(1.25); }
    100%{transform:scale(1);}
}
.cms-main-wrap{ width: 100%; max-width: 1200px; margin: auto; height: auto;  display: flex; flex-wrap: wrap;}
.cms-main-news-left { width: 50%; display: flex;  justify-content: center;  }
.cms-main-news-right { width: 50%;padding: 30px; display: flex;  justify-content: flex-start;flex-wrap: wrap; }
.cms-news-top{width: 100%;    margin:0 ; padding: 30px 15px; display: flex; flex-wrap: wrap;  justify-content: center; position: relative;  }
.cms-news-top figure { width: 100%; max-width:400px; height: 384px; margin: 0 auto; padding: 10px 0px; background: url("../images/index/new-bg.jpg")  no-repeat right top;  background-size: 400px 384px;}
.cms-news-top figure img { width: 100%;  max-width: 90%; margin: auto; border-radius:50%;  display: flex; justify-content: center; }
.cms-news-top figcaption { width:80%; margin-top: 2%;  padding: 10px 30px; margin: auto;}
#cms-main .cms-news-top figcaption h3 a{ width: 100%; margin-bottom: 10px; font-size:1.313rem; font-weight:400; line-height: 1.5; color:#eb5e02; overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;   }
#cms-main .cms-news-top figcaption p { width: 100%; font-size: 0.95rem;color:#56667a; overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;   }
#cms-main .cms-news-top figcaption .cms-date{margin-bottom: 10px; font-size:0.875rem; font-weight:400; color: #f4b03d; }
.cms-news-top .slick-dots {  bottom:20px;}
@media (max-width: 768px) {
.cms-main-wrap{margin-top:-100px; }
.cms-main-news-left { width: 100%;}
.cms-main-news-right { width: 100%;}
.cms-news-top figure {  max-width:380px; margin: 0 auto; padding: 10px 0px; background-position: center top; background-size: 100% 340px;}
.cms-news-top figcaption { width:100%; padding: 10px;}
}
/*-------------------*/
/***** 最新消息輪播 *****/
/*------------------*/
.cms-main-news-list { width: 100%; margin:0 auto;  display: flex;flex-wrap: wrap; flex-direction: column; }
.cms-main-news-list li { width: 100%; margin: 30px auto 50px auto;padding:10px 0px 0px 35px; transition: all 0.4s ease-in-out;  -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out; list-style: none; background: url("../images/index/dot-2.svg")  no-repeat left top;  background-size: 10% auto; }
#cms-main .cms-main-news-list li h3{ width: 100%; margin-bottom: 10px; font-size: 1.313rem; font-weight: 700; line-height: 1.5;  color: #eb5e02; overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;   }
#cms-main .cms-main-news-list p { width: 100%; font-size: 0.95rem;color:#56667a; overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;   }
.cms-date{ font-size:0.875rem;  color: #f4b03d; }
#cms-main .cms-main-news-list li:hover h3,#cms-main .cms-main-news-list li:hover p { color: #fcca5c;}
 @media (max-width: 767.98px) {
.cms-main-news-list li {margin: 20px auto; }
}

.penguin-wrap{ width:100%; height: 150px; margin-top: 0px; display: flex; flex-wrap: wrap; position: relative;}
.penguin { position: absolute; left: 8%; top: 5%; display: block; width: 98px; height: 150px;  background: url("../images/index/penguin-3.svg") no-repeat center;  -webkit-animation: pro 3s infinite ease-in-out both; animation: pro 10s infinite ease-in-out both; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom;  z-index: 9; }
.penguin-one {
      position: absolute;
      left: 18%;
      top: 0;
       display: block;
      width: 74px;
      height: 150px;
      background: url("../images/index/penguin-1.svg") no-repeat center;
      -webkit-animation: pro 3s infinite ease-in-out both;
      animation: pro 3s infinite ease-in-out both;
      -webkit-transform-origin: bottom;
      -ms-transform-origin: bottom;
      transform-origin: bottom;
      z-index: 9; }
.penguin-two {
      position: absolute;
      left:12%;
      top: -10%;
       display: block;
      width: 96px;
      height: 150px;
      background: url("../images/index/penguin-2.svg") no-repeat center;
      -webkit-animation: proTwo 3s infinite ease-in-out both;
      animation: proTwo 6s infinite ease-in-out both;
      -webkit-transform-origin: bottom;
      -ms-transform-origin: bottom;
      transform-origin: bottom;
      z-index:9;}
.penguin-four {
      position: absolute;
      right:5%;
      top: 4%;
       display: block;
      width: 96px;
      height: 150px; background: url("../images/index/penguin-1.svg") no-repeat center; animation:bgcircle 4s linear infinite; z-index:9; }
.penguin-five {
          position: relative;
          right: 1%;
          top: 8%;
           display: block;
          width: 100px;
          height: 150px;
          background: url("../images/index/penguin-4.svg") no-repeat center;
     animation: wave 15s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; transform: translate3d(1450px, 0px, 0); 
          z-index: 9;}
@-webkit-keyframes pro {
  0%,
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  30% {
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg); }
  45% {
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg); }
  60% {
    -webkit-transform: rotate(3.6deg);
    transform: rotate(3.6deg); }
  75% {
    -webkit-transform: rotate(-1.2deg);
    transform: rotate(-1.2deg); } }
@keyframes pro {
  0%,
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  30% {
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg); }
  45% {
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg); }
  60% {
    -webkit-transform: rotate(3.6deg);
    transform: rotate(3.6deg); }
  75% {
    -webkit-transform: rotate(-1.2deg);
    transform: rotate(-1.2deg); } }
@-webkit-keyframes proTwo {
  0%,
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  30% {
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg); }
  45% {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg); }
  60% {
    -webkit-transform: rotate(-3.6deg);
    transform: rotate(-3.6deg); }
  75% {
    -webkit-transform: rotate(1.2deg);
    transform: rotate(1.2deg); } }
@keyframes proTwo {
  0%,
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  30% {
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg); }
  45% {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg); }
  60% {
    -webkit-transform: rotate(-3.6deg);
    transform: rotate(-3.6deg); }
  75% {
    -webkit-transform: rotate(1.2deg);
    transform: rotate(1.2deg); } }
@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -600px;
  }
}
@keyframes swell {
  0%,
	100% {
    transform: translate3d(0, -15px, 0);
  }
  50% {
    transform: translate3d(0, 0px, 0);
  }
}
 @media (max-width: 1024px) {
.penguin-two , .penguin-one,.penguin-five {display: none;}
.penguin {top:-20px;} 
.penguin-four {top:-20px;}    
}

/*-------------------*/
/***** 產品目錄方格 *****/
/*------------------*/
.cms-main-facility:before{  content: ""; display: block; width:100%; height:200px; position:relative;z-index:99; pointer-events: none;margin-top: -50px; background: url("../images/index/nav-bg-01.svg") right top repeat-x; background-size: 100% auto; background-color: transparent; animation:bgcircle 5s linear infinite; }
.cms-main-facility { width: 100%; padding:0px 0px 100px 0; margin:0; position: relative; display: flex; flex-wrap: wrap; background:#fffaf1; }
.cms-main-facility-item { width: 30%;display: flex; flex-wrap: wrap;  }
#cms-main .cms-main-facility-item h3{ margin:25px 0; width: 100%;  font-size:1.5rem; color:#0d386d; font-weight: 700;  position: relative;   }
.title-facility{ display: flex; width: 140px; height: 70px; margin:0px 0px 0px 100px;  background: url("../images/index/icon-house.svg") no-repeat left top;}
.cms-main-txt{width: 100%;  padding-left: 10%;  margin: auto auto 5% auto; display: flex; flex-wrap: wrap;}
#cms-main .cms-main-txt p { width: 100%; font-size: 0.95rem;color:#56667a;  font-weight: 400;  padding:5px;   }
@media (max-width: 1024px) {
.cms-main-facility:before{ margin-top: -40px;  background-size: 200% auto; z-index:9; animation:none; }  
 
}
 /*-------------------*/
/***** 園區設施*****/
/*------------------*/
.cms-main-card { width:70%;  margin:0px; padding:0px;  display: flex; flex-wrap: wrap; }
.cms-main-card ul { width: 100%; max-width:100%;  margin:0 auto;  }
.cms-main-card li { width: 100%; max-width: 200%;  margin: auto; display: flex; flex-wrap: wrap; flex-direction: column;  justify-content: center; }
.cms-main-card li figure { display: block;  width: 100%; max-width:80%; margin:0 auto;position: relative;  border-radius:25px; }
.cms-main-card li figure:before{content: ""; display: block; width:307px; height:132px; position:absolute;z-index:9; bottom: 0px; pointer-events: none; background: url("../images/index/mask.png") left top no-repeat; background-size: 100% auto;  }
.cms-main-card li  figure img {  width: 100%; max-width: 100%;  border-radius:25px;transition: all 0.3s;}
@media (max-width: 768px) {
.cms-main-facility-item { width: 100%;}
.cms-main-card { width:100%; padding:50px 0px 0px 0px;}
.cms-main-card li figure:before{  width:150px; height:60px; position:absolute;z-index:9; bottom: 0px; pointer-events: none; background: url("../images/index/mask.png") left top no-repeat; background-size: 100% auto;  }
.cms-main-card .slick-dots{ bottom: -40px;}   
} 

/*-------------------*/
/***** 圖文方格 *****/
/*------------------*/
.cms-main-product:before{  content: ""; display: block; width:100%; height:200px; position:relative;z-index:0; pointer-events: none;margin-top: -150px; background: url("../images/index/bg-circle.svg") right top repeat-x; background-size: 100% auto; background-color: transparent; animation:bgcircle 10s linear infinite; }
.cms-main-product { width: 100%; padding:0px 15px 40px 15px; margin: auto; position: relative; background-image: url("../images/index/new-left.png"), url("../images/index/new-right.png");background-position: -3% 40%, right 70%; background-repeat: no-repeat; background-size:15% auto, 18% auto;  }
.cms-main-product-item { width:100%; max-width: 1200px;  margin:80px auto;  padding:30px 0px;   overflow: hidden; }
.cms-main-product-item li { width: 100%; max-width:80%;   margin: 0px auto;  padding:10px; height: auto; position: relative; z-index: 1;transition: all 0.3s linear 0s;}
.cms-main-product-item li a{ display: flex; flex-wrap: wrap; justify-content:center;}
.cms-main-product-item li:hover { transform: scale(0.95);}
.cms-main-product-item li a figure { position: relative;   width:100%;  height: auto;  overflow: hidden; transition: all 0.5s ease 0s; }
.cms-main-product-item li a figure img {  width: 100%; max-width: 60%; transition: all 0.3s;  border-radius:15px;  }
.cms-main-product-item li:hover figure img { transform: scale(1.1);  opacity: 0.6;  border-radius:15px;}
#cms-main .cms-main-product-item li a h3{flex: 0 0 100%; margin: 10px; font-size:1.15rem; font-weight: 700; text-align: center; color:#0d386d; overflow: hidden; word-break:break-all; word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }
#cms-main .cms-main-product-item li a span.cms-main-product-unit{  margin: 0 10px; font-size:0.875rem; color:#56667a; text-align: right;overflow: hidden; word-break:break-all; word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp:2;  -webkit-box-orient: vertical; }
.cms-main-product-item li a span.cms-main-product-price{ width: auto;  margin: 0 10px;font-size:1rem; color:#56667a;  text-align: center; font-weight: 700;  }
.cms-main-product-item .slick-dots {bottom:-10px;  }	
@media (max-width: 767.98px) {
.cms-main-product {padding:0px 15px 0px 15px;background-position:-10% 20%, right 70%; background-size:35% auto, 28% auto;  }
.cms-main-product:before{ width:100%; height:100px; margin-top: -50px;background-size: 120% auto; }
.cms-main-product-item { margin:10px auto; }
 .cms-main-product .slick-prev { left:-5%; }
.slick-next { right:-5%; }
.slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 40% !important; z-index:0; display: block; width:30px; height: 58px; padding: 0; border-radius:0; outline: none; }
 
}
 
/*-------------------*/
/***** 關於我們純文字區塊 *****/
/*------------------*/
 
 
.cms-main-brand{position: relative;margin:-150px auto 0px auto; width: 100%; z-index: 0; padding:0px 0px 60px 0px; display: flex; flex-wrap: wrap; justify-content: space-between;  background: url("../images/index/about-end.jpg") right top no-repeat; background-size: 100% auto; }
 .cms-main-brand-txt{ margin:5% auto; padding:0px 15px;display: flex; flex-wrap: wrap; align-content: center; align-items: center; }
.cms-main-brand-left{  width: 50%; display: flex; flex-wrap: wrap; justify-content: flex-end; position: relative; z-index: 3;  }
.cms-main-brand-right{  width: 50%; background:url("../images/index/eco.png") no-repeat left 25%; padding:180px 0px 0px 0px; position: relative; z-index: 1;}

.item-txt{  width:80%; padding-left: 50px; }
.item-txt p{ margin: 15px 0px; font-size:1.063rem; line-height: 1.75rem;  color:#56667a; }

.item-img-1{ flex: 0 0 80%; display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 240px -45px auto auto;  }
.item-img-2 img,.item-img-3 img{ width: 100%; max-width:70%;}
.item-img-2{flex: 0 0 50%; margin: -50px -20px 0px 0px; animation:bgcircle 12s ease-in-out infinite;}
.item-img-3{flex: 0 0 50%; margin: 50px -20px 0px 0px;  animation:bgcircle 5s ease-in-out infinite;}
@media (min-width: 1600px) {
.item-img-1{ flex: 0 0 80%; display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 220px -30px auto auto;  }
.cms-main-brand-right{   background-position: left 30%; }
}
@media (max-width: 768px) {
.cms-main-brand{margin: -20px auto 0px auto; flex-direction:column-reverse;}    
.cms-main-brand-left{width: 100%;}
.cms-main-brand-right{width: 100%; padding:0px; background-size: 100% auto;  background-position: left 30%; }
.item-txt{  width:100%; padding:0px 30px; }    
.item-img-1{  margin:20px auto auto auto;  }
.item-img-2{  margin: 0px -20px 0px 0px; }
 }
/*cms-Title Styles 樣式
=================================*/
/*Style 1
=================================*/
.cms-title { margin:0px auto; width: 100%; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; flex-direction:column;}
#cms-main .cms-title h1{ margin:0px; font-weight: 400; color:#eb5e02;  font-size:2rem;  }
#cms-main .cms-title h3 { margin:35px 0px 0px 0px; width:100%;  position: relative; z-index: 1;  color:#945e34;font-weight: 700; font-size: 2.25rem;  }
#cms-main .cms-title p{ display: block; margin: 15px auto; font-size:0.9375rem; font-weight: 700!important;color:#0d386d; }
.cms-title-h2 { width:100%; margin:0px auto 0 auto; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content:center;  -ms-flex-pack: center; justify-content: center;  -webkit-align-items: center;  -ms-flex-align: center;  align-items: center; flex-wrap: wrap; flex-direction:column;  z-index: 1;position: relative;}
#cms-main .cms-title-h2 h2{ margin:0px; color:#eb5e02;font-weight: 400; font-size: 2.25rem;  }
#cms-main .cms-title-h2 p{ margin:0px; font-size:0.9375rem; font-weight: 700!important;color:#0d386d;  }
.cms-title-h2::before { content: ''; position: absolute;  margin: -100px 30px 0px -400px;  width: 100px;  height:53px;  background: url("../images/index/dot-1.png") no-repeat left top; background-size:70% auto;   animation:bgcircle 9s linear infinite;}
.cms-title-h2::after { content: ''; position: absolute;  margin: -50px 0px 0px 500px; width: 100px;  height: 53px;  background: url("../images/index/dot-2.png") no-repeat left top;background-size:80% auto;  animation:bgcircle 6s ease-in-out infinite;}
@media (max-width: 767.98px) {
#cms-main .cms-title h1{  font-size:1.75rem;  }
#cms-main .cms-title-h1 h2 { font-size:1.5rem;margin-bottom: 10px;margin-top: 15px; }  
}

 
.cms-title-h3 { width:100%; height: auto; margin:0 auto; padding-left: 100px;padding-top: 0px;  padding-bottom: 0; position: relative; z-index: 9; display: flex; justify-content: flex-start; align-items: flex-start;  flex-wrap: wrap; flex-direction:column; background: none;}
#cms-main .cms-title-h3 h2{ margin:0px; color:#eb5e02;font-weight: 400; font-size: 2.25rem; position: relative; z-index: 9; }
#cms-main .cms-title-h3 p{ margin:0px; font-size:0.9375rem; font-weight: 700!important;color:#0d386d; position: relative; z-index: 9; }
#cms-main .cms-title-h3 h2:before { content: '';position: absolute;  margin-left: -40px; width:100px; height:80px; background: url(../images/index/dot-2.svg) no-repeat left top; z-index: 0;} 
@media (max-width: 767.98px) {
}
.cms-title-h4 { width:100%; height: auto; margin:0 auto;  padding: 50px;   position: relative; z-index: 9; display: flex; justify-content: flex-start; align-items: flex-start;  flex-wrap: wrap; flex-direction:column; background: none;}
#cms-main .cms-title-h4 h2{ margin:250px 0px 0px 0px; color:#fff;font-weight: 400; font-size: 2.25rem; position: relative; z-index: 9; }
#cms-main .cms-title-h4 p{ margin:0px; font-size:0.9375rem; font-weight: 700!important;color:#fff; position: relative; z-index: 9; }
#cms-main .cms-title-h4 h2:before { content: '';position: absolute;  margin-top: -90px; width:200px; height:106px; background: url("../images/index/title-2.svg") no-repeat left top; z-index: 0;} 
#cms-main .cms-title-h4 h3{ margin:100px 0px 10px 0px; color:#eb5e02;  }

@media (max-width: 767.98px) {
 .cms-title-h4 {  padding:30px 50px 10px 50px; }
   
 #cms-main .cms-title-h4 h2{color:#0d386d; }
#cms-main .cms-title-h4 p{color:#0d386d; }
   
}


/*cms-btn Styles 樣式
=================================*/ 
 /*cms-btn Styles 1===*/
.cms-btn-01 { cursor: pointer; width: 100%; max-width: 220px; height: 3rem; line-height: 3rem; display: block; margin: 0; position: relative;   box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.34); background-image: linear-gradient(to right, #ec640a 10%, #fcca5c 100%); border-radius:25px; z-index: 1;  }
.cms-btn-01 span { display: block;padding-left: 35px;text-transform: uppercase;letter-spacing: 3px; transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1; font-weight: 400;  color: #fff;}
.cms-btn-01 em {position: absolute;width: 45%; height: 1px;right: 23px;top: 50%;transform: scaleX(0.25); transform-origin: center right; transition: all 0.3s ease; background: #fff;  z-index:1;   }
.cms-btn-01:before,.cms-btn-01:after {content: '';background:#f39139;height:100%; width: 0;position: absolute;transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
.cms-btn-01:before { top: 0; left: 0; right: auto;  border-radius:25px; }
.cms-btn-01:after { bottom: 0; right: 0; left: auto; border-radius:25px; }
.cms-btn-01:hover:before { width: 100%; right: 0; left: auto;}
.cms-btn-01:hover:after {  width: 100%; left: 0; right: auto;}
.cms-btn-01:hover span{ color: #000;}
.cms-btn-01:hover em{background: #000; transform: scaleX(0.5);}
  /*cms-btn Styles 2===*/
#cms-main a.cms-btn-02{color: #fff;  font-size:1rem; text-align: center;  display: block; width: auto; max-width: 300px; max-height:40px;  }
#cms-main a.cms-btn-02 {padding:0.5rem 2rem;background: none; border: none; cursor: pointer;line-height: 1.5rem; letter-spacing: 0.05rem;box-shadow: inset 0 0 0 1px #fff; color: #fff;  -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-btn-02:hover{color:#94000b;}
.cms-btn-02:hover::before, .cms-btn-02:hover::after{border-color: #94000b; -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;}

@media (max-width: 991.98px) {
#cms-main a.cms-btn-02{max-width: 100%; max-height:36px; font-size:0.9rem;   }
}

 

 #cms-main a.cms-btn-more{ position: relative; display: block; width: auto; margin:15px auto; padding:6px 25px 6px 25px; font-size: 1rem; font-weight: 700; color:#5c6b7d; letter-spacing: 1px;  -webkit-transition: 0.3s ease;  transition: 0.3s ease; }
#cms-main a.cms-btn-more:hover{ color:#eb5e02!important;    }
#cms-main a.cms-btn-more:before { content: "\ebab"; position: absolute; top:4px; left: 0px;   font-size:24px; color: #eb5e02;    transition: all 0.3s ease; font-family: 'boxicons';}
#cms-main a.cms-btn-more:hover:before {   top:4px; left:5px; transform:translateX(20%); font-size:24px;  transition: all 0.3s ease; font-family: 'boxicons'; overflow: hidden; }

@media (max-width: 767.98px) {
#cms-main a.cms-btn-more{   letter-spacing: 0em; }
}
 
 
/*cms-btn Styles 4====*/
.cms-btn-btnbox {position: relative;z-index:1; display: flex;  justify-content: center;  width: 100%; height: auto; margin:20px auto;  transition: all 1s;}