/*----------------------------------------- 
   Adjustment for css frameworks  
 ----------------------------------------*/
 * { -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; }
  a, button {  text-decoration: none;  color: inherit; -webkit-transition: opacity .3s; transition: opacity .3s; cursor: pointer;}
/*----------------------------------------/
  Default Typography
----------------------------------------*/
html { font-size: 100%; }  
body{font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'Poppins', "sans-serif"!important;  overflow-x:hidden; margin:0; padding:0; height: 100%;  color:#363c40; position: relative;   }
#cms-main p, #cms-main td, #cms-main li, #cms-main label { font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'Poppins', "sans-serif"!important; margin-bottom: 0px;  line-height: 1.85rem; font-weight: 400;}
#cms-main h1, #cms-main h2, #cms-main h3, #cms-main h4, #cms-main h5, #cms-main h6 { font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'Poppins', "sans-serif";   }
h1 {font-size: 2.36rem;margin:0.4rem 0;}
h2 {font-size: 2rem;margin:0.6rem 0;}
h3 {font-size: 1.73rem;margin:0.7rem 0;}
h4 {font-size: 1.6rem;margin:0.8rem 0;}
h5 {font-size: 1.48rem;margin:0.8rem 0;}
h6 {font-size: 1.3rem;margin:0.8rem 0;}
#cms-main p {margin:auto 0; display: block;}
#cms-main a{ color:#1f1f20; text-decoration: none;  }
#cms-main a:hover, #cms-main a:active, #cms-main a:visited, #cms-main a:focus {text-decoration: none;  }
@media all and (max-width: 1024px) {
h1 {font-size: 2rem;}
h2 {font-size: 1.73rem;}
h3 {font-size: 1.6rem;}
h4 {font-size: 1.48rem;}
h5 {font-size: 1.3rem;font-weight:bold;}
h6 {font-size: 1rem;font-weight:bold;}
}
.txt-ch{font-family: 'Noto Sans TC', 'Microsoft JhengHei',"sans-serif"; }
.txt-en{font-family: 'Poppins', "sans-serif"; }


.cms-wrapper{ width: 100%; max-width: 1300px; margin: auto; }

 /*----------------------------------------/
  banner area
----------------------------------------*/
.cms-main-banner { width:100%; height: 100%; padding: 0; margin:-30px auto auto auto; display: flex; flex-wrap: wrap;  justify-content:center; align-items:center; align-content: center;   z-index: 0; line-height: 2.5em; vertical-align: top;  overflow: hidden;position: relative; }
.cms-main-banner-img{width: 100%;  position: relative; top: 0%; margin-top: 0px; z-index: 0;}
 .cms-main-banner-img img  { width: 100%; height: auto; top:0px; -o-object-fit: cover;  object-fit: cover; -webkit-backface-visibility: hidden;  backface-visibility: hidden; transition: all 0.3s; position: relative; z-index: 1; -webkit-clip-path: polygon(0 0, 100% 0%, 100% 84%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 84%, 0% 100%);}
 
.cms-main-banner .slick-prev,.cms-main-banner .slick-next { position: absolute;top:25%; z-index: 999; }
.cms-main-banner .slick-prev  {left:50px; }
.cms-main-banner .slick-next {right:50px; }
@media (max-width: 767.98px) {
.cms-main-banner { margin:0px auto auto auto;   }    
.cms-main-banner .slick-prev, .cms-main-banner .slick-next{top:20%;} 
.cms-main-banner .slick-prev  {left:0px; }
.cms-main-banner .slick-next {right:0px; }  
.cms-main-banner-img img  {  -webkit-clip-path:none;clip-path:none;}   
}

/* Banner 內文字 =====================================================================*/
.cms-main-banner-txt {width: 100%; max-width: 1200px; height: 300px; margin:2% auto auto auto; padding: 20px; display: flex; flex-wrap: wrap;  justify-content:flex-start;  flex-direction:column; position: absolute; z-index: 99;overflow:hidden;}
.cms-main-banner-txt h1 {  font-size:3rem; font-weight: 700; text-align: left; letter-spacing:1px; color: #fff; background-image: linear-gradient(180deg, #c30211 30%, #e60013 100%);     -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.cms-main-banner-txt h2 { margin: 0px; font-size:2.5rem; font-weight:400; text-align: left; letter-spacing:1px; color: #fff; }
 #cms-main .cms-main-banner-txt p {margin:10px 0px 0px 0px; font-size:1.313rem; font-weight: 500; color: #fff;}
 
@media (max-width: 767.98px) {
.cms-main-banner-txt { height: auto; margin:0 auto auto auto; padding: 20px;  }
    
.cms-main-banner-txt h1 {  font-size: 1.25rem;  margin: 0px 0px 0px 0px; }
.cms-main-banner-txt h2 {  font-size:1rem; margin-top:0px;   }
  #cms-main .cms-main-banner-txt p {margin:0px; font-size:0.8125rem;line-height: 1rem; }
  
.cms-main-banner-txt em { font-size: 1rem; margin-top: 0px; }
}
  /*----------------------------------------/
cms-main-content
----------------------------------------*/
.cms-main-content{position: relative; padding:50px 0px; }
@media (max-width: 768px) {
.cms-main-content{  padding:20px 0px 50px 0px; }      
}
/*----------------------------------------/
麵包屑 自訂顏色樣式
----------------------------------------*/
.cms-main-breads{ width: 100%;  margin: auto; padding:0px 15px;position: relative;z-index:2;  color:#000;  }
.cms-main-breads .breadcrumb{padding:5px 0px;color:#878787;  margin: 0 auto; max-width: 1160px;background:none;justify-content: flex-start; }
#cms-main .cms-main-breads .breadcrumb li{ font-size: 0.875rem;  color:#e60013;  max-width: 200px; overflow: hidden;  word-break: break-all; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical; }
#cms-main .cms-main-breads .breadcrumb li a{ color: #e60013;  opacity: .5;}
.breadcrumb-item::before {  content: "\ed9b"; color:#e60013 !important;  font-family: 'boxicons'; opacity: .5;  }
#cms-main .breadcrumb-item+.breadcrumb-item::before { content: "\ecee";font-family: 'boxicons'; opacity: .5;}
/* description =======================================================================	*/
#cms-main .cms-description{  max-width: 80%; display: flex; flex-wrap: wrap; justify-content:center; align-items: center; flex-direction: column;  padding:20px; margin:10px auto;     }
#cms-main .cms-description h2{ width: 100%;  margin:0px 15px 15px 15px;  display: flex;  justify-content: flex-start; font-weight: 700;color:#411f20;}
#cms-main .cms-description h2::before{  content: ''; width: 50px;  height:2px; margin-top:25px; margin-right: 30px;  background:#222;  }
#cms-main .cms-description p{margin:0 !important;font-size:0.875rem; line-height: 1.65rem; color:#222;  }
@media (max-width: 767.98px) {
#cms-main .cms-description{ max-width:100%;} 
#cms-main .cms-description h2::before{ display: none; }
#cms-main .cms-description p{ max-width: 100%; font-size:0.8rem; }
}
 
/*----------------------------------------/
  title樣式 cart
----------------------------------------*/
.cms-title { margin: 0; padding: 10px 8px; font-size: 1.15rem;font-weight: 400;display: flex; align-items: center; flex-wrap: wrap; flex-direction: column; justify-content: center;  }
.cms-title span{ display:block; font-size:.875rem;color: #b4a174; font-weight: 700; text-align: center;  } 
.cms-title-h1 { width:100%; margin-bottom: 30px;  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;  }
.cms-title-h1::before,.cms-title-h1::after{  content: ''; width: 50px;  height: 1px;   background:#000;  }
.cms-title-h1::before { margin-right: 30px}
.cms-title-h1::after { margin-left: 30px}
.cms-title-h1 i{ margin: 0 auto; display: flex;  width:80px; height: 80px;  }
.cms-title-h1 i img{max-width: 100%; height: auto;}
 
@media (max-width: 767.98px) {
.cms-title-h1 { font-size:1.5rem;margin-bottom:0px;margin-top: 15px; }   
.cms-title-h1::before,.cms-title-h1::after{ display: none;  }
}
.cms-btn-btnbox{ display: flex; justify-content: center; align-content: center; margin-top: 5rem; }
.cms-txt-stork { -webkit-text-stroke: 1px #222;  -webkit-text-fill-color: transparent;}



/*tab-bar style======================================================================*/
.cms-tab-bar {position: relative;width: 100%;  min-height:40px;  display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; background:#000; z-index:1;   }
.cms-tab-bar .cms-btn-tab{ color: #fff; width: 100%; text-align:center;margin: 0px auto; padding: 10px 0px; }
.cms-tab-bar .cms-btn-tab::after { float: right; margin-right: 20px; content: ""; display: inline-block; vertical-align: middle; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: transform .5s; transition: transform .5s; }
ul.cms-tab { left: 0; right: 0; margin: 0; padding: 0; background-color:transparent; display: none;  list-style: none; z-index:0; }
ul.cms-tab li {width: 100%;display: flex; justify-content: center;border-bottom: 1px solid #fff; text-shadow:none; background: #555;z-index: 1; }
ul.cms-tab li:first-child { border-top: 1px solid #fff; }
ul.cms-tab li:last-child { border-bottom: none; }
ul.cms-tab a {padding:8px 10px; text-align: center; text-decoration: none; color: #fff; }
ul.cms-tab a:hover { color:#ac0b0b; }
ul.cms-tab li a span{  text-align: center; color:#fff;}

@media (min-width:768px) {
.cms-tab-bar { margin-top: -35px; background:none; z-index: 1; position: relative; }
.cms-tab-bar .cms-btn-tab { display: none;   }
div.cms-tab-bar { width:100%; display: flex; margin:0px auto auto auto; font-size: 1rem!important; transition: background-color 220ms ease-in, box-shadow 80ms ease-in; background: transparent; box-shadow: none; border: none;z-index:0;  }
ul.cms-tab { width: 100%; display: flex; align-items: center; justify-content:center; flex-wrap: wrap; text-align: center; z-index:0;position:relative;   }

ul.cms-tab a { padding:5px 15px;  color:#50585c;  }
ul.cms-tab li.current{ color:#fff!important;  text-shadow:none;    }
ul.cms-tab li{ display: flex; width: auto;  margin:5px 0px;   position: relative;z-index: 1; background-color:transparent; border-bottom:none!important; } 
 ul.cms-tab li a{ padding:10px; font-size:1rem; color:#6c7280; transition: transform 0.2s;  position: relative; z-index: 2;  }
ul.cms-tab li:hover a{ color:#fff;   }
ul.cms-tab li a span{   padding:0px 20px; text-align: center; color:#fff; font-weight: 700; position: relative; z-index: 2; }
ul.cms-tab li.current a span{ color:#fff; z-index: 2;}
ul.cms-tab li.current::before { top: -10px; bottom: -8px; background-color: #e60013; content: ""; position: absolute; z-index: 0; left: 0; right: 0; display: block; -moz-transform: skew(-15deg, 0deg); -o-transform: skew(-15deg, 0deg); -ms-transform: skew(-15deg, 0deg);  -webkit-transform: skew(-15deg, 0deg ); transform: skew(-15deg,0deg); -moz-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease;   box-shadow: 6px 5px 5px -2px rgba(0,0,0,.3);  } 
    
  ul.cms-tab li.current a:before{ background-color:#e60013!important; z-index: 0;}
  
ul.cms-tab li:hover a:before{ background-color:#e60013!important; z-index: 0;}
ul.cms-tab li a::before { content: ""; position: absolute; top:-5px; bottom: 0; left: 0; z-index: 0; right: 0;  display: block;background: #000;  -moz-transform: skew(-15deg, 0deg);  -o-transform: skew(-15deg, 0deg); -ms-transform: skew(-15deg, 0deg); -webkit-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg); -moz-transition: background-color 0.3s ease;  -o-transition: background-color 0.3s ease; -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease;
}                                     
ul.cms-tab li:first-child {  border-top: none;   }
ul.cms-tab li:last-child { border-bottom:none; }
ul.cms-tab li.current:hover:after{   border-color:#f3a432 transparent transparent transparent;  }
}

 
/*----------------------------------------/
  分頁 自訂顏色樣式
----------------------------------------*/
#cms-main-pages .cms-pagination{ margin:10px auto;  display: flex; justify-content: center;  }
.cms-pagination .page-link { color:#31315e; background-color:#fff; border: 1px solid #e3ded2;}
.cms-pagination .page-link:hover { color: #fff; background-color:#dcdddd; border-color:#dcdddd;}
.cms-pagination .page-link:focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);}
.cms-pagination .page-item:first-child .page-link { }
.cms-pagination .page-item:last-child .page-link { }
.cms-pagination .page-item.active .page-link { color: #fff!important;  background-color:#222; border-color:#222;}
.cms-pagination .page-item.disabled .page-link { color: #6c757d;  background-color: #fff; border-color:#e3ded2;}

/*----------------------------------------/
  btn 自訂顏色樣式
----------------------------------------*/
 
#cms-main .btn { padding: 0.375rem 0.75rem;  margin-bottom:5px;  font-size: .95rem; line-height: 1.75; border-radius:0px;  }
#cms-main .btn-xs { padding: 0.1rem 0.75rem; width: auto!important;  margin-bottom:5px;  font-size: .75rem; line-height: 1.5; border-radius:5px;  }
#cms-main .btn-w { width: auto!important; max-width:30%; margin:5px;  font-size: .875rem; line-height: 1.5; border-radius:5px;  }

#cms-main .btn-secondary{  font-size: .95rem;color:#fff;line-height: 1.5;  }
 @media (max-width: 767.98px) {
#cms-main .btn { padding: 0.375rem 0.7rem; font-size: .875rem;    }
#cms-main .btn-secondary{ font-size: .875rem;  } 
#cms-main .btn-w {   max-width:100%;   }
     
}   
 .btn-back {  color: #48443b;  margin-bottom: 15px; padding: 5px 20px;   line-height: 28px;  text-align: center; background: url(../images/icon/arrow-left.svg) no-repeat left 8px; border: solid 1px #48443b;}
.btn-back:hover { color: #c9163a;  }
.cms-btn-submit{  font-weight: 400;  border-radius:0px; background:#000;  color: #fff; vertical-align: text-bottom; }
.cms-btn-submit:hover { color: #fff;  background:#232323;   box-shadow: 0px 3px 10px rgba(148,0,11,.5); }
 
 .cms-text-pink{color: #ed5a5a!important;}
button.cms-btn-01 {border:none; }

.cms-btn-01 {cursor: pointer; width: 100%; max-width: 300px; height: 2.5rem; line-height: 2.5rem; display: block; margin: auto; position: absolute;   box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.34); background-color: #000; border-radius:25px;}
.cms-btn-01 span { display: block; text-transform: uppercase;letter-spacing: 3px; transform-origin: center left; transition: color 0.3s ease;position: relative;z-index: 1;font-size: 1rem; color: #fff;}
 .cms-btn-01:before,.cms-btn-01:after {content: '';background: #fff;height: 50%; 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 Styles 2===*/
#cms-main a.cms-btn-02{ color: #fff; font-size:1.313rem; line-height:2rem; font-weight: 500; max-height: 200px; overflow: hidden; text-overflow: initial;  padding:8px 25px; background:#000; border: none; cursor: pointer;  letter-spacing: 0.5rem;box-shadow: inset 0 0 0 1px #232323;    -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:#000; background:#eee; }
.cms-btn-02:hover::before, .cms-btn-02:hover::after{border-color: #333; -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%;  font-size:0.9rem;   }
}
 
a.cms-btn-back { width:auto; color:#797371!important; padding: 10px; font-weight: 700;border: solid 1px #797371;   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;  }
.cms-btn-back:before,.cms-btn-back::after{  content: ''; width: 30px; height:1px; background:#797371;-moz-transition: ease 0.3s; -o-transition: ease 0.3s; -webkit-transition: ease 0.3s;  transition: ease 0.3s;  }
.cms-btn-back:before { margin-right: 20px; margin-left: 5px;}
.cms-btn-back:after { margin-left: 20px; margin-right: 5px;}
a.cms-btn-back:hover {   color:#94000b!important; border: solid 1px #94000b;}
.cms-btn-back:hover:before{ background:#94000b; -moz-transform: translateX(20%); -ms-transform: translateX(20%); -webkit-transform: translateX(20%); transform: translateX(20%);  }
.cms-btn-back:hover:after{ background:#94000b;-moz-transform: translateX(-20%); -ms-transform: translateX(-20%); -webkit-transform: translateX(-20%); transform: translateX(-20%);  }
@media (max-width: 767.98px) {
.cms-btn-back  { font-size:.875rem; padding:5px  10px;}  
.cms-btn-back:before,.cms-btn-back::after{ display: none; }
 }
 
.cms-btn-play {  width: 116px; height: 116px;  z-index: 9999; position: absolute;  margin: auto; display: flex;  align-items: center;  justify-content: center;}
.cms-btn-play:before { content: '';  position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);  width:60px; height:60px; background: url("../images/icon/play-btn.svg") no-repeat; background-size: contain;}
.cms-btn-play:hover .rotate2 {  -webkit-animation: rotate 1s linear infinite;animation: rotate 1s linear infinite;}
.cms-btn-play .rotate1,.cms-btn-play .rotate2 { -webkit-transform: translate(5px, 5px); -ms-transform: translate(5px, 5px);transform: translate(5px, 5px);}
.cms-btn-play .rotate2 { stroke-dashoffset: 110; stroke-dasharray: 360; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-90deg) translate(5px, 5px); -ms-transform: rotate(-90deg) translate(5px, 5px); transform: rotate(-90deg) translate(5px, 5px);}
.cms-btn-play-bg{width: 116px; height: 116px;}
.cms-btn-play .bg {  opacity: .85;}

@-webkit-keyframes rotate {
  0% {  -webkit-transform: rotate(-90deg) translate(5px, 5px); transform: rotate(-90deg) translate(5px, 5px);}
  100% { -webkit-transform: rotate(270deg) translate(5px, 5px);transform: rotate(270deg) translate(5px, 5px);}
}

@keyframes rotate {
  0% { -webkit-transform: rotate(-90deg) translate(5px, 5px);transform: rotate(-90deg) translate(5px, 5px); }
  100% { -webkit-transform: rotate(270deg) translate(5px, 5px);transform: rotate(270deg) translate(5px, 5px);}
 }

/*cms-btn-more =================================*/ 
#cms-main a.cms-btn-more{ position: relative; display: block;width: auto;  min-width: 200px;  max-width: 300px;  max-height:50px;  margin:15px 0; padding:6px 40px; font-size: 1rem; font-weight: 700; color:#fff;  background:#e60013; letter-spacing: 1px;  -webkit-transition: 0.3s ease;  transition: 0.3s ease; -webkit-clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%); clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%); }
#cms-main a.cms-btn-more:hover{ color:#000!important;    }
#cms-main a.cms-btn-more:before { content: ""; position: absolute; top:20px; left:80px;  width: 100px; height: 8px; background:url("../images/icon/arrow-01.svg") no-repeat right top; transition: all 0.3s ease; font-family: 'boxicons';}
#cms-main a.cms-btn-more:hover:before { transform:translateX(10%); font-size:24px;  transition: all 0.3s ease; overflow: hidden; }
@media (max-width: 768px) {
#cms-main a.cms-btn-more{   letter-spacing: 0em; }
}




.cms-back-button {  width: auto; height: 35px; margin: 0; 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: flex-start; cursor: pointer}
@media (max-width:767px) {
.cms-back-button { width: auto; height: 24px }
}
.cms-back-button:hover .cms-back-button-circle { -webkit-transform: scale(1.2); transform: scale(1.2)
}
.cms-back-button:hover .cms-back-button-txt, .cms-back-button:hover i { -webkit-transform: translateX(-5px); transform: translateX(-5px)}




.cms-back-button-circle { width: 35px; height: 35px;  position: relative; display: block; margin-right: 20px; border: 1px solid #e60013;  border-radius: 50%;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}

@media (max-width:767px) {
.cms-back-button-circle { width: 24px; height: 24px; margin-right: 15px}
}


.cms-back-button i.arrow-l { width: 31px; height: 31px; position: absolute;background: url("../images/icon/arrow-left.svg") no-repeat left top; top: 0; bottom: 0; left: 0; margin: auto auto auto 13px;   -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}

.cms-back-button i.arrow-r { width: 31px; height: 31px; position: absolute;background: url("../images/icon/arrow-right.svg") no-repeat left top; top: 0; bottom: 0; left: 0; margin: auto auto auto 13px;   -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}

@media (max-width:767px) {
.cms-back-button i { width: 22px; height: 22px; margin: auto auto auto 10px}
}
.cms-back-button-txt { font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 1px; color: #e60013;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
@media (max-width:767px) {
  .cms-back-button-txt { font-size: 14px; line-height: normal; letter-spacing: normal }
}



.cms-next-button {  width: auto; height: 35px; 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: flex-start; cursor: pointer}
@media (max-width:767px) {
.cms-next-button { width: auto; height: 24px }
}
.cms-next-button:hover .cms-next-button-circle, .cms-next-button:hover i { -webkit-transform: scale(1.2); transform: scale(1.2)}
.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: block; margin-left: 20px; border: 1px solid #e60013;  border-radius: 50%;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}

@media (max-width:767px) {
.cms-next-button-circle { width: 24px; height: 24px; margin-right: 15px}
}

 .cms-next-button i.arrow-r { width: 31px; height: 31px; position: absolute;background: url("../images/icon/arrow-right.svg") no-repeat right top; top: 0; bottom: 0; left: auto; margin: auto auto auto 106px;   -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}

@media (max-width:767px) {
.cms-next-button i { width: 22px; height: 22px; margin: auto auto auto 10px}
}
.cms-next-button-txt { font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 1px;  color: #e60013;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
@media (max-width:767px) {
  .cms-next-button-txt { font-size: 14px; line-height: normal; letter-spacing: normal }
}



















 
/*----------------------------------------/
  ul style 自訂樣式
----------------------------------------*/
.cms-dot{ width: 100%;  display: block; margin: 5px; }
.cms-dot li{ width: 100%; display: block; padding:2px 15px; margin: 0px; font-size:1rem; line-height:1.75rem; font-weight:400;  background: url(../images/icon/dot.svg)  no-repeat left 10px; background-size:6px;}
.cms-arrow{ width: 100%; display: block; margin: 1.5% auto; }
.cms-arrow li{ width: 100%; display: block; padding:1px 0 10px 15px; font-size:15px; line-height:1.4em; font-weight:400; background: url(../images/icon/arrow-right.svg) no-repeat left 8px; background-size:8px;}
.cms-decimal { list-style-position: outside; list-style-type: decimal; padding-left: 15px;}
.cms-decimal li{margin-bottom: 10px; font-size:15px; line-height:1.5em; font-weight:400;  }

/*----------------------------------------/
  ul style 自訂樣式
----------------------------------------*/

.cms-table-scroll { overflow-x: auto; }
 /*--------form style-------------*/
#cms-main label{   font-size:.9rem; }
input, option, textarea, input[type="radio"]{min-height:2rem; line-height:2rem;  padding-left:15px;  font-size:0.875rem; color: #000;background-color:#f7f7f7;border: 1px solid #f7f7f7;border-radius:0px;  }
input[type="radio"]+label, input[type="checkbox"]+label { width:auto; box-sizing: border-box; padding: 5px 5px 0px 5px; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[type="search"], textarea { -webkit-appearance: none;}
input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="search"] { line-height: 1.5em;vertical-align: top;}
*:focus { outline: none; }

/* placeholder --*/  
input::placeholder {  font-size:0.875rem;  }
input:focus, textarea:focus { outline: none;  }
input:focus:placeholder { color: transparent;  }
input:focus::-webkit-input-placeholder { color: transparent; }
input:focus:-moz-placeholder { color: transparent; }
input:focus::-moz-placeholder { color: transparent; }
input:focus:-ms-input-placeholder { color: transparent; }
select{min-height:2rem; line-height:2rem;  padding-left:15px;  font-size:0.875rem; color: #000;background-color:#f7f7f7;border: 1px solid #f7f7f7;border-radius:0px;  }

/*IE */
select::-ms-expand {display: none; }
select:focus{ box-shadow: 0 0 5px 2px #467BF4;    }
input, button, select, textarea { outline: none; }