/* 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', '微軟正黑體', 'Roboto', sans-serif!important; overflow-x:hidden; margin:0; padding:0; height: 100%; position: relative; background: url("../images/index/bg-paper.jpg") repeat;   }
h1 {  font-size: 2.35rem; font-weight: 400; color: #2e3160;     }
h2 { font-size: 2rem; font-weight: 400;  margin: 5% auto; color: #2e3160;}
h3, h4 { font-size: 2rem; font-weight: 400; }
h5, h6 { font-size: 1.125em; font-weight: 400 }
h1, h2, h3, h4, h5, h6 { display: block; margin: 0 auto 0.5rem auto;  font-family: 'Noto Sans TC', 'Microsoft Jhenghei', '微軟正黑體', 'Roboto', sans-serif!important;font-weight: 400!important; }
h1, h2, h3, h4, h5, h6 { line-height: 1.25em }
p, td, li, label { font-size: 1rem;   color: #6a6a6a; line-height: 1.5rem;   font-weight: 400!important;}
a {  color:#454b4f; 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; }
 /**banner
=================================*/
.cms-main-banner{ width: 90%; height: auto; margin:10px auto 0px auto; padding: 0px; overflow: hidden;  position: relative; z-index: 0; box-shadow: 10px 30px 30px rgba(0,0,0,.3);}
.cms-main-banner img{ width: 100%; max-width: 100%;  height: auto;}
@media (max-width: 767.98px) {
    .cms-main-banner{ width: 100%; height: auto;  margin:0px auto;}
}
/*-------------------*/
/***** 關於我們純文字區塊 *****/
/*------------------*/
.cms-main-about{position: relative; z-index: 0; padding:0; margin: 0; background-image:url("../images/index/left-01.png"),url("../images/index/right-01.png"); background-repeat: no-repeat; background-position:left 25vh , right top; background-attachment: scroll; background-size:25% auto,35% auto;  }
.cms-main-about-content {width: 60%;  max-width:600px; margin:0 auto 0 1rem; padding:120px 10px;   display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center;  }
.cms-main-about-txt{  margin:20px 0; line-height:2.5rem;  color:#000;   }
@media (max-width: 767.98px) {
.cms-main-about{  background-position:left bottom , right top;  background-size:45% auto,45% auto;  }
.cms-main-about-content {width: 100%;  max-width:600px; margin:0 auto 0 1rem; padding:120px 10px;   display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center;  }
    
}
 
/*-------------------*/
/***** 最新消息列表 *****/
/*------------------*/
.cms-main-news{position: relative; z-index: 0; padding:0; margin: 0; background: url("../images/index/bg-news.jpg") no-repeat left top; background-size:35% auto;  display: flex;  flex-wrap: wrap; justify-content: flex-end; }
.cms-main-news-list { display: flex; flex: 0 0 80%;  flex-wrap: wrap; margin:0 auto ;  padding:20px;}
.cms-main-news-list li { flex: 0 0 100%;  display: flex;    padding:10px;   transition: all 0.4s ease-in-out;  -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out; border-bottom: solid 1px rgba(0,0,0,.1);   }
.cms-main-news-list li:hover{ transform: scale(.99) ; }
.cms-main-news-list a { width: 100%;  display: flex;   flex-wrap: wrap; }
.cms-main-news-list a span{    flex: 0 0 20%;  font-size: 0.875rem; line-height: 1.6; color: #454b4f; text-align: left; display: flex; align-content: center; align-items: center; }
.cms-main-news-list li a h4 { flex: 0 0 80%;  font-size:1.25rem; font-weight:400; line-height: 1.6; color:#28282C; overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;   }

@media (max-width: 767.98px) {
 .cms-main-news{ display: none; }
.cms-main-news-list {  flex: 0 0 100%;   padding:20px 10px;}
}
/*-------------------*/
/***** 圖文4方格 *****/
/*------------------*/

.cms-main-blog { width: 100%; padding: 0px; margin:4% auto 0 auto; position: relative;   z-index:11; background-image:url("../images/index/title-left.png"),url("../images/index/title-right.png"); background-position:-5vw 2vh,80vw 15vh;  background-size:25% auto, 25% auto;  background-repeat: no-repeat; background-color: #fff;}
.cms-main-blog .cms-item{display: flex; width: 100%; margin: 30px 15px; padding:0px; height: auto; position: relative; transition: all 0.3s linear 0s;}
.cms-main-blog .cms-item:hover { box-shadow: 0 1px 35px 0 rgba(0, 0, 0, 0.3);}
.cms-main-blog .cms-item figure { position: relative; overflow: hidden;  width:100%; max-width:100%; height: auto; align-items: flex-start;   transition: all 0.5s ease 0s; }
.cms-main-blog .cms-item figure img {  width: 100%; max-width: 100%; transition: all 0.3s;}
.cms-main-blog.cms-item:hover figure img { transform: scale(1.1);  opacity: 0.6;}
/*.cms-item figure .date { position: absolute;  top: 20px;  right: 20px; background: #ac0b0b;  color: #fff;  font-weight: bold; border-radius: 100%;  height: 55px; width: 55px; display: flex; flex-direction: column; align-items: center; font-size: 12px; text-transform: uppercase;}
*/
.cms-main-blog .cms-item-inner { position: relative; width: 100%; height: 140px; bottom:0px;  padding:20px 5px;  }
.cms-main-blog .cms-item-inner .cms-item-tag {  position: absolute; top: -30px;  left: 0; color: #fff; text-transform: uppercase; background:#8a5b1e;  padding: 10px 15px;  font-size:0.875rem; font-weight: bold;  border-bottom-left-radius:15px;   border-top-right-radius:15px;   }
.cms-main-blog .cms-item-title { margin: 0; padding: 0 0 10px; color: #6d430d; font-size:1.15rem; font-weight: 700;}
.cms-main-blog .cms-item-text p{ margin:0px; padding: 0 ; font-size:0.9rem;  line-height: 1.5rem;  overflow: hidden; text-overflow: ellipsis;   text-overflow: initial;  display: -webkit-box;  -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.cms-main-blog .slick-current { transform: scale(1.1);  transition: all .5s ease; -webkit-transition: all .5s ease; moz-transition: all .5s ease;  -o-transition: all .5s ease;  -ms-transition: all .5s ease;}	
.cms-main-blog .slick-dots {bottom:-60px;  }	
 @media screen and (max-width: 767px) {
 .cms-main-blog { margin:14% auto 0 auto;  background:url("../images/index/title-right.png") no-repeat 80vw 10vh ;  background-color: #fff; background-size:25% auto; }
.cms-main-blog .cms-item-inner .cms-item-tag { padding: 5px 10px;  font-size:0.75rem;  }
}

/*-------------------*/
/*****產品4方格 *****/
/*------------------*/
.cms-main-product{ position: relative; padding:5rem 0px; }
.cms-main-product-item { width:98%; max-width:1360px;   margin:3% auto;  display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center;  }
.cms-main-product-item li{  display: flex;flex-wrap: wrap; justify-content: center; align-items: center;  width:100%;  margin:80px 10px 0px 10px; padding:20px 10px; position: relative;  transition: all 0.5s ease 0s; background: #fff; }
.cms-main-product-item li img{ width:100%; max-width: 90%; height: auto; align-items: flex-start;   transition: all 0.5s ease 0s; }
.cms-main-product-item li img:hover{  transform: scale(0.9); }
.cms-main-product-item li:hover h3{transform: scale(0.9); }
.cms-main-product-item li h3{  justify-content: center; margin: 0 auto 10px auto; font-size:1.15rem; font-weight: 400;  text-align: center; line-height:1.4rem;  color:#000;   transition: all 0.5s ease 0s;  text-transform: capitalize; overflow: hidden;   word-break: keep-all;  text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 3;  -webkit-box-orient: vertical; }
.cms-main-product-item li p{ font-size:0.875rem; color:#726A6A; margin: 0 auto 10px auto; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: pre;}
.cms-main-product-item li span.cms-main-product-price{ display: flex; justify-content: center;    margin: 0 auto 10px auto;font-size:1rem; color:#6971c7;  font-weight: 700; }
.cms-main-product-item li:after,.cms-main-product-item li:before {pointer-events: none; content: ''; width: 95%; height: 95%; box-sizing: border-box;  position: absolute; top:8px;  left: 5px;  transform: scale(1); transition: 0.5s;}
.cms-main-product-item li:after { border-top: 1px solid #ced1ec;  border-right: 1px solid #ced1ec; }
.cms-main-product-item li:before { border-bottom: 1px solid #ced1ec; border-left: 1px solid #ced1ec;  }
 

.cms-main-product-note { position: absolute; top:-50px; left: 0; width: 200px; height: 150px;   font-size: 0.875rem; text-align: left; line-height: 1.5em; text-shadow:none; z-index: 11; }
.cms-main-product-note.cms-main-product-note-sale {  color: #cc3333; padding:10px 0px 0px 50px; background: url("../images/icon/note.png") no-repeat left top;  background-size:55px 40px;}
.cms-main-product-note.cms-main-product-note-stock { color: #ff9900; padding:10px 0px 0px 50px; background: url("../images/icon/note-1.png") no-repeat left top;  background-size:55px 40px;}

 

/*cms-Title Styles 樣式
=================================*/
/*Style 1
=================================*/

.cms-title-h1 { display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-pack: justify; -ms-flex-pack: justify;  justify-content: center;  -webkit-box-align: center;  -ms-flex-align: center; align-items: center;}
.cms-title-h1 h1{ margin:1rem auto; font-weight: 400; color:#2e3160;}
.cms-title { margin: auto;  display: flex; justify-content: center;  align-items: center; flex-wrap: wrap; flex-direction: column; }
.cms-title span{ display:block; font-size:.875rem;color: #6e77ce;  } 
.cms-title::before{  content: ''; -webkit-flex-grow: 1;  -ms-flex-positive: 1; flex-grow: 1;  width: 100%;  height: 15px; background: url("../images/index/title-line.png") right top/contain no-repeat;  }
.cms-title::after { content: '';  -webkit-flex-grow: 1;  -ms-flex-positive: 1; flex-grow: 1; width: 100%; height:15px;  background: url("../images/index/title-line.png") left top/contain no-repeat;  }
.cms-title::before { margin-bottom:10px}
.cms-title::after { margin:0px}


 @media screen and (max-width: 767px) {
 .cms-title::before { display: none;}
}

/*Style 2
=================================*/

.cms-title-h2 { width: 100%; display: flex; flex-wrap: wrap; position: relative;  }
.cms-title-h2::after { position: absolute; content: ''; margin-left:-20%; width: 100%; height:136px;  background: url("../images/index/title-news.png") left top/contain no-repeat;  }
.cms-title-h2 h2 { margin:15px 15px 0 15px;  display: flex;  justify-content: flex-start; flex-direction: column; font-weight: 400; }
.cms-title-h2 span { font-size: .875rem; color: #6e77ce;  text-align: left; display: flex; }
.cms-title-h2 i{ display:flex; width:80px; height: 80px;  }
.cms-title-h2 i img{max-width: 100%; height: auto;margin: 0; }



/*Style 3
=================================*/
.cms-title-h3{ position: relative;  width: 80%; margin:100px auto 50px auto;  }
.cms-title-h3 h2 {width: auto;  display: flex; align-items: center; flex-wrap: wrap; justify-content: center; color: #3b3e6a; font-weight: 400;  }
.cms-title-h3 span{  font-size:.875rem;color: #6e77ce;text-align: center; display: flex; justify-content: center; } 
.cms-title-h3 h2:before { margin-right: 50px;  } 
.cms-title-h3 h2:before  {  content: ""; flex-grow: 1; padding:0 100px;  height: 15px; background: url("../images/index/title-line.png") left/contain repeat-x;display: block;}
.cms-title-h3 h2:after {  content: ""; flex-grow: 1; padding:0 100px;  height: 15px;   background: url("../images/index/title-line.png") left/contain repeat-x;display: block;}
.cms-title-h3 h2:after { margin-left: 50px;} 
@media (max-width: 767.98px) {
 .cms-title-h3{width: 100%; margin:100px auto 50px auto;  }
 .cms-title-h3 h2:before  {  padding:0 10px;  }
.cms-title-h3 h2:after {  padding:0 10px; }

}




.cms-items-container {width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap;  flex-flow: row wrap; -webkit-box-pack: justify;  -ms-flex-pack: justify;  justify-content: flex-start;  -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;  padding-top: 10px;}
 @media screen and (max-width: 991px) {
.cms-items-container { height: auto; }
 }
.cms-item, .cms-item-lg, .cms-item-2x{ display: block;height: 100%; width: 25%;padding-left: 10px;padding-right: 10px;text-decoration: none; color: #333;}
@media screen and (max-width: 991px) {
.cms-item, .cms-item-lg, .cms-item-2x { width: 50%; margin-top: 15px;margin-bottom: 15px;}
}

@media screen and (max-width: 767px) {
.cms-item, .cms-item-lg, .cms-item-2x { margin-top: 10px;margin-bottom: 10px;}
}
.cms-item img, .cms-item-lg img, .cms-item-2x img{ width: 100%;height: auto;}
.cms-item-2x { width: 50%;}
@media screen and (max-width: 991px) {
.cms-item-2x {  width: 100%;}
}
a.cms-item:hover, a.cms-item-lg:hover, a.cms-item-2x:hover, a.cms-item:focus, a.cms-item-lg:focus, a.cms-item-2x:focus, a.cms-item-2x:hover,a.cms-item-2x:focus {color: #666; text-decoration: none;}
.cms-item-title { font-size: 1em; font-weight: 700; margin-top: 10px; overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.cms-item-descnohs { font-size: 15px; line-height: 26px; overflow: hidden; display:-webkit-box;}

 
.cms-decorate{ height: 162px; width: 100%; position: absolute; z-index: 10; left: 0px;}
.cms-decorate:after {
	content:"";
	background-image: url(../images/index/back_wave01.png);
	background-repeat: repeat-x;
	background-position: center 20px;
	height: 162px;
	width: 100%;
	position: absolute;
	z-index: 0;
	left: 0px;
	bottom: 0px;
	animation-name: wave1;
	animation-duration: 20s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation-name: wave1;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
@keyframes wave1 {
0% {background-position: 0px 20px;}
100% {background-position: 1080px 20px;}
}
@-webkit-keyframes wave1 {
0% {background-position: 0px 20px;}
100% {background-position: 1080px 20px;}
}
.cms-decorate:before {
	content:"";
	background-image: url(../images/index/back_wave02.png);
	background-repeat: repeat-x;
	background-position: center 20px;
	height: 162px;
	width: 100%;
	position: absolute;
	z-index: 0;
	left: 0px;
	bottom: 0px;
	animation-name: wave2;
	animation-duration: 20s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation-name: wave2;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
@keyframes wave2 {
0% {background-position: 1080px 20px;}
100% {background-position: 0px 20px;}
}
@-webkit-keyframes wave2 {
0% {background-position: 1080px 20px;}
100% {background-position: 0px 20px;}
}


.cms-decorate-end { height: 100px; width: 100%; position: absolute; z-index: 10; left: 0px;}
.cms-decorate-end:after {
	content:"";
	background-image: url(../images/index/back_wave03.png);
	background-repeat: repeat-x;
	background-position: center 0px;
	height: 100px;
	width: 100%;
	position: absolute;
	z-index: 0;
	left: 0px;
	bottom: 0px;
	animation-name: wave3;
	animation-duration: 20s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation-name: wave3;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
@keyframes wave3 {
0% {background-position: 0px 0px;}
100% {background-position: 1080px 0px;}
}
@-webkit-keyframes wave3 {
0% {background-position: 0px 0px;}
100% {background-position: 1080px 0px;}
}
.cms-decorate-end:before {
	content:"";
	background-image: url(../images/index/back_wave04.png);
	background-repeat: repeat-x;
	background-position: center 0px;
	height: 100px;
	width: 100%;
	position: absolute;
	z-index: 0;
	left: 0px;
	bottom:0px;
	animation-name: wave4;
	animation-duration: 30s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation-name: wave4;
	-webkit-animation-duration: 30s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
@keyframes wave4 {
0% {background-position: 1080px 0px;}
100% {background-position: 0px 0px;}
}
@-webkit-keyframes wave4 {
0% {background-position: 1080px 0px;}
100% {background-position: 0px 0px;}
}

 

/*cms-btn Styles 樣式
=================================*/ 
 /*cms-btn Styles 1===*/
a.cms-btn-01  { position: relative; margin:20px auto;padding: 0 50px; display: flex;align-items: center;  border: 3px double #fff; background:#e68d00;  font-size: 1rem;  color: #fff!important; font-weight: 400; line-height: 38px;  letter-spacing: 2px; transform: scale(1);  transition: all 1s; }
a.cms-btn-01::after {content: ""; width:80px; height: 80px; display: block; position: absolute; right: -120px; top:0px; background: url("../images/icon/icon-p1.png") left top; background-size: 80px;animation: peo2 2500ms infinite ease-in-out;}
a.cms-btn-01:hover { color:#fff;text-shadow:1px 1px  rgba(0,0,0,.5);  background:#30315f; transform: scale(1.05);}
 
 /*cms-btn Styles 2===*/
.cms-btn-02{ width:247px; height:150px;   padding:100px 0px 0px 100px; margin:20px 0px; text-align: center; font-size: 1.1rem; font-weight:400;  background:url("../images/index/title-03.png") no-repeat left top; background-size:100px 153px;  -webkit-transition: all 0.3s; transition: all 0.3s;  }
.cms-btn-02:hover { color:#ff7e03;text-shadow:1px 1px  rgba(0,0,0,.5);}
.cms-btn-02:active { color: #2A1557; }

/*cms-btn Styles 3====*/
a.cms-btn-03  {width: 40%; margin:20px auto; padding: 0 50px; position: relative; display: flex;  align-items: center; border: 3px double #fff; background:#e68d00; font-size:1rem; color: #fff!important; font-weight: 400; line-height: 38px; letter-spacing: 2px;  transform: scale(1);  transition: all 1s; }
a.cms-btn-03::after {content: ""; width:80px; height: 80px; display: block; position: absolute; right: 0px; top:-50px; background: url("../images/icon/icon-p2.png") left top; background-size: 80px;animation: 1600ms peo infinite alternate ease-in-out;}
a.cms-btn-03:hover { color:#fff;text-shadow:1px 1px  rgba(0,0,0,.5);  background:#30315f; transform: scale(1.05);}

 @media screen and (max-width: 767px) {
 a.cms-btn-03  {width: 100%;}
}

@keyframes peo {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@-webkit-keyframes peo {
  0% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(1.05); }
  100% { -webkit-transform: scale(1); }
}
@-webkit-keyframes peo2 {
  0% {
    -webkit-transform: rotate(-5deg) scale(1) translate(-100%, -30%);
    transform: rotate(-5deg) scale(1) translate(-100%, -30%); }
  50% {
    -webkit-transform: rotate(5deg) scale(1) translate(-100%, -30%);
    transform: rotate(5deg) scale(1) translate(-100%, -30%); }
  100% {
    -webkit-transform: rotate(-5deg) scale(1) translate(-100%, -30%);
    transform: rotate(-5deg) scale(1) translate(-100%, -30%); } }
@keyframes peo2 {
  0% {
    -webkit-transform: rotate(-5deg) scale(1) translate(-100%, -30%);
    transform: rotate(-5deg) scale(1) translate(-100%, -30%); }
  50% {
    -webkit-transform: rotate(5deg) scale(1) translate(-100%, -30%);
    transform: rotate(5deg) scale(1) translate(-100%, -30%); }
  100% {
    -webkit-transform: rotate(-5deg) scale(1) translate(-100%, -30%);
    transform: rotate(-5deg) scale(1) translate(-100%, -30%); } 
}

/*cms-btn Styles 4====*/
.cms-btn-btnbox {position: relative;display: flex;  justify-content: center;  width: 100%; height: auto; margin:0px auto; -webkit-transform: scale(1);  -ms-transform: scale(1);  -o-transform: scale(1); -moz-transform: scale(1);  transform: scale(1);  transition: all 1s;}
.cms-btn-btnbox.cms-btn-04 {   -webkit-animation-delay:1s; -moz-animation-delay:1s;  -ms-animation-delay:1s;  -o-animation-delay:1s;  animation-dely:1s;}
.cms-btn-btnbox.cms-animated {
  -webkit-animation: 1600ms pulsate infinite alternate ease-in-out;
  -moz-animation: 1600ms pulsate infinite alternate ease-in-out;
  -ms-animation: 1600ms pulsate infinite alternate ease-in-out;
  -o-animation: 1600ms pulsate infinite alternate ease-in-out;
  animation: 1600ms pulsate infinite alternate ease-in-out;
}
 @keyframes pulsate {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@-webkit-keyframes pulsate {
  0% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(1.05); }
  100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulsate {
  0% { -moz-transform: scale(1); }
  50% { -moz-transform: scale(1.05); }
  100% { -moz-transform: scale(1); }  
}
@-ms-keyframes pulsate {
  0% { -ms-transform: scale(1); }
  50% { -ms-transform: scale(1.05); }
  100% { -ms-transform: scale(1); }  
}
@-o-keyframes pulsate {
  0% { -o-transform: scale(1); }
  50% { -o-transform: scale(1.05); }
  100% { -o-transform: scale(1); }  
}