@charset "utf-8";
@-webkit-viewport { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
@font-face {font-family: 'Myriad Pro'; src: url("../fonts/Myriad-Pro.eot"); src: url("../fonts/Myriad-Pro.eot?#iefix") format('embedded-opentype'), url("../fonts/Myriad-Pro.woff2") format('woff2'), url("../fonts/Myriad-Pro.woff") format('woff'), url("../fonts/Myriad-Pro.ttf") format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Myriadbold';src: url("../fonts/MyriadPro-Bold.eot"); src: url("../fonts/MyriadPro-Bold.eot?#iefix") format('embedded-opentype'), url("../fonts/MyriadPro-Bold.woff2") format('woff2'),url("../fonts/MyriadPro-Bold.woff.woff") format('woff');font-weight: normal;font-style: normal;}
@font-face { font-family: 'JaguarJCBook'; src: url("../fonts/jaguarjc_book.woff2") format('woff2'),  url("../fonts/jaguarjc_book.woff") format('woff'), url("../fonts/jaguarjc_book.ttf"); font-weight: normal; font-style: normal;}
* { -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; }
/* CSS Document */
/*html { width: 100%; height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
*/
body { width: 100%; height: 100%; margin: 0 auto; overflow-x: hidden; position: relative; font-size: 100%; line-height: 1; font-weight: normal; font-family: '微軟正黑體', 'Microsoft JhengHei', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: 'liga', 'kern'; -webkit-overflow-scrolling: touch; }
h1 {  font-size: 1.2em; font-weight: 700; color: #000;     }
h2 { font-size: 2rem; font-weight: 700;  margin: 5% auto; }
h3, h4 { font-size: 1.15em; 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 }
h1, h2, h3, h4, h5, h6 { line-height: 1.25em }
p { font-size:1rem; color: #333; line-height: 1.75rem;  font-weight: 400; }
a { color: inherit; text-decoration: none; -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  }
a:hover{ opacity: .8;}
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; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.color-white { color: #fff!important; }
.color-orange { color: #C71E50!important; }
.color-pink { color:#ff6666!important; }
.color-blue { color:#01a396; margin: 5px 0; }
.color-bk { color:#000;  }

/*-------main-----*/
main{ min-height:650px;padding-top:130px;}
.container { width: 100%;   margin:0px auto auto auto;   position:relative; vertical-align: top;  overflow: hidden;}
.content { width: 100%;  margin: 0 auto; display:block;   }
.area { padding: 20px 0; }
.wrapper{width: 98%; max-width: 1024px; margin:60px auto auto auto; display: block; }
.area p{ font-size:.9rem;  }
.cart-content{width:96%; max-width: 960px; display: block; margin:1% auto auto auto; }
/***banner area=======================================================================*/
.banner {position: relative; width: 100%; height: auto; display: block;   z-index: 1;  margin-top: 0px;  }
.banner-img { width: 100%; display: block; position: relative; z-index: 3; overflow: hidden; }
.banner-img img { width: 100%;    position: relative; z-index: auto; }
.banner-wrap { width: 100%; margin-top:3rem;   position: absolute;   z-index: 999; }
.header-wrap { position: relative;  z-index: 99; display: block; width: 90%;  margin: 0 auto; text-align: center; }
.wrap-mv:after {content: ''; position: absolute; top: 0; left: 0; width: 100%;  height: 100%;  background:rgba(0,0,0,.4);}
.play-btn { cursor: pointer; width: 60px !important; height: 60px !important;left:20vw;top:2vh;background-color: inherit !important; border: solid 1px #fff; border-radius: 50%;  z-index: 9999;position: absolute; display: flex;align-items: center;justify-content: center; }
.play-btn img { max-width: 18px; pointer-events: none;}
.big-title {  width: 100%;  height: auto; max-width: 1080px; padding: 0 20px;  margin: auto; text-align: center; background-color: inherit; position: absolute;   left: 50%;  top: 50%;  transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); z-index: 9999;}
.big-title h2{ font-size: 1.75rem; font-weight: 700; text-align: center;    margin-bottom: 12px; text-transform:uppercase; color: #fff;text-shadow: 0px 2px 5px rgba(0,0,0,.7)}
.big-title p {  font-size: 1.18rem;  text-align: center; color: #fff;text-shadow: 0px 1px 6px rgba(0,0,0,1)}

/*description =======================================================================	*/
.description p { font-size:.9rem; color:#00a596; font-weight: 400; line-height: 1.65rem; }
.description{padding: 20px; margin-bottom: 25px; background:#f5fbf9; border: solid 1px #ecf1f0;}
/*=========breadcrumbs=============================================*/
.breadcrumbs-box {  width: 100%;  max-width: 1200px; height: 80px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between;}
.breadcrumbs-box h1 { font-size: 1.875rem; font-weight: 700; color: #2a2a2a; line-height: 1.2; margin: 0; }
.breadcrumbs{  display: flex;  align-items: center;}
.breadcrumbs li:first-of-type{ padding:0 0 2px 20px; background: url(../images/icon/icon-home.svg) no-repeat left -3px;background-size:16px auto;   }
.breadcrumbs li{ font-size: 0.875rem; color: #b8b8b8;  display: flex;  align-items: center;}
.breadcrumbs li:after { content: '';  width: 2px; height: 10px; margin: 0 16px; background-color: #b8b8b8; display: block;}
.breadcrumbs li:last-child:after {display: none;}
.breadcrumbs li a { max-width: 95px; color: #b8b8b8; overflow: hidden; text-overflow: ellipsis; white-space: pre;}

@media (max-width:768px) {
 .breadcrumbs-box{ justify-content: center; flex-direction: column;}
 .breadcrumbs{  display: flex;width: 100%;}
/*.big-title { top: 25%;  transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);z-index: 9999;}
*/	
}
@media (max-width:767px) {
.breadcrumbs-box { padding: 0 30px;}
.breadcrumbs-box h1 { font-size: 1.25rem; text-align: center; }
/*.big-title { top: 35%; left: 0px; transform:none;}*/
	
}

/*==========nav.stick==========*/
nav.stick { background: none; border-bottom: none;}
nav.stick ul { background-color: #1267b2;   height:50px; display: flex;  align-items: center;  justify-content: center;}
nav.stick ul span {  display: none;}
nav.stick ul li {  color: #c8c8c8;  height: 100%;  position: relative; display: flex;  align-items: center;}
nav.stick ul li.current { color: #fff;}
nav.stick ul li:after {  content: '';  min-width: 1px;  height: 11px;  margin: 0 25px;  background-color: rgba(255, 255, 255, 0.3); display: block;}
nav.stick ul li:last-child:after {  display: none;}
nav.stick ul li.current a { background-color: #0d589a;}
nav.stick ul li a { font-size: 1rem; font-weight: 400;  width: 100%; color: #fff; height: 100%; letter-spacing: 0.05rem; padding: 0 20px; position: relative; display: flex; align-items: center;}
nav.stick ul li a:hover { background-color: rgba(255, 255, 255, 0.3);}
nav.stick ul li a.now-stay:before {  content: " "; height: 0;  width: 0; margin-left: -10px; position: absolute; top: 100%; left: 50%; z-index: 6; border: solid transparent; border-top-color: #1267b2; border-width: 10px;}
.stick i.icon-plus { width: 12px; height: 12px; margin-left: 5px; transform: translateX(-10px); background:  url(../images/icon/icon-plus-w.svg) no-repeat; background-size: 12px auto;}
@media (max-width:768px) {
  nav.stick ul li:after { display: none;  }
  nav.stick { position: relative; }
  nav.stick ul {width: 100%; height: auto; min-height: 50px; position: absolute; left: 0; top: 0; z-index: 5; flex-direction: column;}
  nav.stick ul li { width: 100%; text-align: center; border-top: solid 1px #ccc; }
  nav.stick ul li a { height: 50px; justify-content: center;  }
  nav.stick ul span { height: 50px; color: #fff; display: flex; align-items: center;
  }
}
nav.stick.navfix {  position: fixed;  top:50px; left: 0; right: 0; z-index: 9;  }
@media only screen and (max-width:1180px) {nav.stick.navfix {  top:50px; }}
@-webkit-keyframes getIn {
    0% { opacity: 0; -webkit-transform: translate3d(0, -120%, 0); transform: translate3d(0, -120%, 0); }
    100% { opacity: 1;  -webkit-transform: none; transform: none; }
}
@keyframes getIn {
    0% { opacity: 0; -webkit-transform: translate3d(0, -120%, 0); transform: translate3d(0, -120%, 0); }
    100% { opacity: 1;  -webkit-transform: none; transform: none; }
}
.getIn {-webkit-animation-duration: 1s; animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both; -webkit-animation-name: getIn; animation-name: getIn;}
@media (max-width:767px) {
  nav.stick.navfix {  top: 60px; }
}
/*==========nav.stick end==========*/


/* page =======================================================================*/
.page { width: 100%; max-width: 1160px; margin: 0px auto;  display:block; text-align: center; }
.page ol li { width: 34px; height: 34px; display: inline-block;border-radius: 50%; border: 1px solid #ddd; position: relative; line-height: 32px; text-align: center; list-style-type: none; margin: 5% auto 2% 5px; background-color:#fff; }
.page ol li:hover {  border: 1px solid #ddd;}
.page ol li.current a { background: #000; color: #fff; border-radius: 50%;}
.page ol li a { border: none; color: #000; display: block; padding: 0; line-height: 32px; height: 100%; text-decoration: none; }
.page ol li a:hover, .page ol li a:focus { background: none; color: #00a596; }
.page li.prev, .page li.next,.page li.prev:hover,.page li.next:hover{  background: none; border: none;}
.page li.prev:before, .page li.next:before { content: '';   display: block;  }
.page li.prev:before { content:  url(../images/icon/arrow-left.svg);    }
.page li.next:before { content: url(../images/icon/arrow-right.svg);  }

/**title style*/
.title-wrap{  float: right; margin: 5% 0 0 0;  display:block; position: relative; z-index: 999; text-align: left; border: solid 1px #000;}
.title-wrap p{ color:#c71e56; font-size:1.35rem;font-weight: 400;   }
.title-1 { display:block;  margin: 3% auto;  width: 100%; max-width: 500px;  font-size: 1.5rem;text-align:center; font-weight: 400; letter-spacing: 5px;}
.title-1::after {content: ""; display: block; margin:5px auto; background:#01a396;  width:10%; height: 3px;    }
.title-2 {   margin:-20% auto 10% 0; width: 100%;  display: block;  font-size: 2.35rem; color: #000; text-align:left; font-weight: 400; letter-spacing: 1px; }
.title-2::after {content: ""; display: block; position: absolute;  margin-left:-30px; margin-top: -20px;  background:#01a396;  width: 25px; height:2px;   }
.title-3 { margin:0 auto 5% auto; padding-left:100px;  display: block;  position: relative; font-size: 1.5rem; color: #000; text-align:left; font-weight: 400; letter-spacing: 1px; background: url(../images/index/h3.jpg)  no-repeat left 10px; }
.title-4 { margin:2% auto 2% 1%; padding-left:50px; display: block;  position: relative; font-size: 1.25rem; color: #000; text-align:left; font-weight: 400; letter-spacing: 1px; background: url(../images/index/h3.jpg)  no-repeat -40px 10px; }
.half{width:100%; display: block; margin: 0; }
.txt-right{ text-align: right; font-weight: 300;} 
/* button --- */
.animate, .btn, .btn-border:before, .btn-border:after { -webkit-transition: all 0.3s; transition: all 0.3s; }
.btn { display: block; width:130px; line-height:1.25rem; margin: 8px auto; padding:10px 15px; font-size: 15px; position: relative; opacity: .999; border-radius:5px; text-transform: capitalize;  }

.btn-bk { color: #000;  background: #fff; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font-weight:500; border: solid 1px #000;}
.btn-bk:hover { color: #fff; background: #000; }
.btn-bk:active { color: #000; background: #fff; }

.btn-back {  color: #5D7C89;  margin-bottom: 15px; padding: 5px 20px; font-size: 14px; line-height: 28px;  text-align: center; background: url(../images/icon/arrow-left.svg) no-repeat left 8px;}
.btn-back:hover { color: #c9163a;  }

.btn-link { color: #00a596;  background: #fff; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font-weight:500; border: solid 1px #00a596;}
.btn-link:hover { color: #fff; background: #00a596; }
.btn-link:active { color: #00a596; background: #fff; }

.btn-more { color: #fff;  background: #00a596; text-align: center; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font-weight:500; border: solid 1px #00a596;}
.btn-more:hover { color: #00a596; background: #fff; }
.btn-more:active { color: #fff; background: #00a596; }
.btn-add {padding:10px 10px 10px 40px ;  color: #fff;  background: url(../images/icon/shopping-cart.svg)no-repeat 4px 8px #00a596; background-size: 28px auto;   }
.btn-add:hover { color: #fff;   background-color:#E1BD00; box-shadow: 0px 5px 5px rgba(0,0,0,.3 )}
.btn-love {padding:10px 0px 10px 50px ;  color: #c9163a;  background: url(../images/icon/love.svg)no-repeat 10px 8px; background-size: 26px auto;  border: solid 1px #c9163a;  }
.btn-love:hover { color: #fff;   background-color:#ff6666;  box-shadow: 0px 5px 5px rgba(0,0,0,.3 ); border: solid 1px #ff6666;}
.btn-pink {padding:10px 20px;  font-weight: 400; background:#ff6666;  color: #fff; }
.btn-pink:hover { color: #fff;  background: #444;   box-shadow: 0px 3px 10px rgba(255,102,102,.5); }


.btn-readmore { max-width: 200px; color: #333;}
a.btn-readmore { margin-top: 16px; padding: 10px 25px;    font-weight: 200;  color: #333;  background-color: #fff; border:solid 1px #adadad;}
a.btn-readmore:hover{ background: #333; color: #fff; }
.btn-submit{padding:10px 20px;  font-weight: 400; background:#00a796 !important; border: solid 1px #00a796; color: #fff; vertical-align: text-bottom; }
.btn-submit:hover { color: #fff;  background: #444;   box-shadow: 0px 3px 10px rgba(255,102,102,.5); }
.btn-rest{padding:10px 20px;  font-weight: 400; background:#888!important;  color: #fff; }
.btn-rest:hover { color: #fff;  background: #444;   box-shadow: 0px 3px 10px rgba(255,102,102,.5); }
.btnbox {  width: 100%; margin: 0 auto; display: flex;  justify-content: center;}

/* ===============  Forms  =============== */
form { margin: auto; display: block; }
input::placeholder { color:#afbabf;}
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; font-family: 'Myriad Pro', '微軟正黑體', 'Microsoft JhengHei', Arial, sans-serif;}
button, input { line-height: normal; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; height: 13px;  width: 13px; border: 1px solid #afbabf;border-radius:30px;}
input[type="radio"]:checked:before, input[type="checkbox"]:checked:before{ border: 1px solid #afbabf; color: #fff; background-color: #afbabf; }
input[type="radio"]:checked, input[type="checkbox"]:checked{ border: 5px solid #3a88fd; color: #fff; background-color: #f6f6f6; }

input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }

/* 去除input藍色框框 */
input, button, select, textarea { outline: none; }
*:focus { outline: none; }
/* placeholder 點一下後快速消失 */
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; }

/**-input width--**/
.length-l{ width:100%; }
.length-m{ width:100%; }
.length-s{ width:100%; }
/* width size*/
.row { margin-right: -15px; margin-left: -15px; }
.row .columns-padding { padding: 0 !important; }
.columns { display: inline-block; vertical-align: top; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 { width:100%; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }
.txtcols {  -webkit-column-count: 1;   -moz-column-count: 1;  column-count: 1; column-gap: 80px;}

/*ul style======================================================================*/
.dot{ width: auto;  display: block; margin: 5px auto; }
.dot li{ width: 100%; display: block; padding:1px 0 3px 15px; font-size:.9rem; line-height:1.4em; font-weight:400; color: #6a6a6a;  background: url( ../images/icon/dot.svg)  no-repeat left 4px; background-size:6px;}
ul.arrow{ width: 100%; display: block; margin: 1.5% auto; }
ul.arrow li{ width: 100%; display: block; padding:1px 0 10px 15px; font-size:15px; line-height:1.4em; font-weight:300; background: url(../images/arrow-right.png) no-repeat left 8px; background-size:8px;}

.decimal { list-style-position: outside; list-style-type: decimal; padding-left: 15px;}
.decimal li{margin-bottom: 10px; font-size:15px; line-height:1.5em; font-weight:300;  }

.icon-book {width: 20px;height: 20px; background: url(../images/icon/icon-book.svg) no-repeat left top;background-size:20px; }
.icon-plus {width: 20px;height: 20px; background: url(../images/icon/icon-plus.svg) no-repeat left top;background-size:16px; }
.icon-mark {width: 20px;height: 20px; background: url(../images/icon/icon-info.svg) no-repeat left top;background-size:20px; }
.icon-plus-w {width: 20px;height: 20px; background: url(../images/icon/icon-plus-w.svg) no-repeat left top;background-size:16px; }



@media only screen and (max-width: 992px) { 
.breadcrumbs { justify-content:center; } 
main{padding-top:81px}
.breadcrumbs-box h1 {font-size: 1.5rem;}
}
@media (min-width:768px) {
.container { width: 100%;  }


}

@media (min-width:980px) {
.play-btn {  left: 25vw;top:30vh;}

input[type="radio"]+label, input[type="checkbox"]+label { font-size:.95rem;  background-color: rgba(126,144,174,0); }
input[type="radio"]:checked+label, input[type="checkbox"]:checked+label { color: #eb6967; background-color: transparent; }
input[type="radio"]:hover+label, input[type="checkbox"]:hover+label { color: #000 }
input[type="radio"]:checked+label:before, input[type="checkbox"]:checked+label:before { border-color: #eb6967 }
.txtcols {  -webkit-column-count: 2;  -moz-column-count: 2;  column-count: 2;  column-gap: 80px; column-rule: 1px solid #e4e8e7; padding: 10px;	}
	
.row { margin-right: -15px; margin-left: -15px; }
.columns { display: inline-block; vertical-align: top; }

/**-input width--**/
.length-l{ width:70%!important; }
.length-m{ width:55%; }
.length-s{ width:33%!important; }
/*-------cart step  elements----*/
	
}


@media (min-width: 1025px) { 
  .big-title h2{ font-size: 5.6rem; line-height:5.5rem; }
}
@media (min-width: 999px) {
.banner-img {  max-height: 640px;  height: calc(100vh - 180px); }
.content { width: 80%; margin:auto -15px; padding:2% 4%;  display:inline-block;}
}
@media only screen and (max-width:1024px) {
  .big-title h2{ font-size: 2.6rem; line-height:2.5rem; }
}
/*  動畫區 
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.animated-slow { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

.hide, .wp1, .wp2, .wp3, .wp4, .wp5, .wp6 { visibility: hidden; }
.fadeInUp, .fadeIn, .bounceIn, .fadeInLeft, .fadeInRight { visibility: visible !important; opacity: 1; }

.delay-02s { animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }
.delay-03s { animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
.delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay-06s { animation-delay: 0.6s; -webkit-animation-delay: 0.6s; }
.delay-07s { animation-delay: 0.7s; -webkit-animation-delay: 0.7s; }
.delay-08s { animation-delay: 0.8s; -webkit-animation-delay: 0.8s; }
.delay-09s { animation-delay: 0.9s; -webkit-animation-delay: 0.9s; }
.delay-10s { animation-delay: 1s; -webkit-animation-delay: 1s; }
.delay-15s { animation-delay: 1.5s; -webkit-animation-delay: 1.5s; }
.delay-20s { animation-delay: 2s; -webkit-animation-delay: 2s; }
.delay-25s { animation-delay: 2.5s; -webkit-animation-delay: 2.5s; }
.delay-30s { animation-delay: 3s; -webkit-animation-delay: 3s; }
.delay-35s { animation-delay: 3.5s; -webkit-animation-delay: 3.5s; }
.delay-40s { animation-delay: 4s; -webkit-animation-delay: 4s; }

/* animate.css 
@-webkit-keyframes fadeInUp {
  from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; }
}

@keyframes fadeInUp {
  from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; }
}

.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }

@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }

@-webkit-keyframes fadeInLeft {
  from { opacity: 0; -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; }
}

@keyframes fadeInLeft {
  from { opacity: 0; -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; }
}

.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; }

@-webkit-keyframes fadeInRight {
  from { opacity: 0; -webkit-transform: translate3d(5%, 0, 0); transform: translate3d(5%, 0, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; }
}

@keyframes fadeInRight {
  from { opacity: 0; -webkit-transform: translate3d(5%, 0, 0); transform: translate3d(5%, 0, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; }
}

.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }
/*自訂動畫
@-webkit-keyframes fadeInLine {
  0% { opacity: 0; height: 0; }
  100% { opacity: 1; height: 120px; }
}

@keyframes fadeInLine {
  0% { opacity: 0; height: 0; }
  100% { opacity: 1; height: 120px; }
}

.fadeInLine { -webkit-animation-name: fadeInLine; animation-name: fadeInLine; }

/* fixed滾動條 scrollbar */
.mCSB_inside > .mCSB_container { margin-right: 0; }
.mCSB_scrollTools { opacity: 0; }
.mCSB_scrollTools { width: 1px; }


.pro-banner {max-width: 1100px; margin: auto;}
article.machine h2,
article.specifi h2,
article.information h2,
article.application h2,
article.catalog-specifi>h2,
article.features h2 {
  font-size: 1.875rem;
  font-family: 'Myriad Pro','Arial','微軟正黑體';
  font-weight: 600;
  text-align: center;
  margin-bottom: 60px;
}
article.catalog-specifi {
  padding: 115px 0 125px 0;
  margin: 0 auto;
  /*border-bottom: solid 5px #f4f4f4;*/
  /*overflow: hidden;*/

  position: relative;
}
article.catalog-specifi>h2 {
  /*opacity: 0;*/
}
article.catalog-specifi:after {
  content: '';
  width: 100vw;
  height: 5px;
  max-width: 1080px;
  background-color: #f4f4f4;

  position: absolute;
  left: 50%;
  bottom: 0;

  display: block;

  transform: translateX(-50%);
}
article.catalog-specifi section {
    max-width: 1120px;
    padding: 0 20px;
    margin: 0 auto;
    /*opacity: 0;*/
}
article.catalog-specifi section ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
article.catalog-specifi section ul li {
  width: calc(50% - 8px);

  display: flex;
  align-items: center;
}
article.catalog-specifi section ul li h2 {
  font-weight: 900;
  width: 34%;
  max-width: 180px;
  height: 100%;
  margin: 0 2px 0 0;
  display: flex;
  align-items: center;
}
article.catalog-specifi section ul li p {
  width: 66%;
  height: 100%;
  /*max-width: 350px;*/
  margin-left: 2px;
  padding: 40px 0;

  display: flex;
  align-items: center;
}

article.catalog-specifi section ul li>* {
  font-size: 1rem;
  font-family: 'Myriad Pro','微軟正黑體';
  border-bottom: solid 1px #ccc;
}
article.catalog-specifi section ul li:first-child>*,
article.catalog-specifi section ul li:nth-child(2)>* {
  border-top: solid 3px #000;
}

article.catalog-specifi section ul li.single-last {
  width: 100%;
}
article.catalog-specifi section ul li.single-last> p {
  width: 100%;
  max-width: none;
}
article.catalog-specifi section ul li.single-last>* {
  border-bottom: solid 2px #000;
}


article.catalog-specifi section ul li.two-last>* {
  border-bottom: solid 2px #000;
}

.cate3{white-space:nowrap;}

@media (max-width:767px) {

  .cate3{white-space: inherit;}
  .two-last-0{height: 0;}

  article.catalog-specifi section ul li {
    width: 100%;

    justify-content: space-between;
  }
  article.catalog-specifi section ul li p {
    width: auto;
  }
  article.catalog-specifi section ul li h2 {
    max-width: 100px;
    margin-right: 12px;
  }

  article.catalog-specifi section ul li:first-child>*,
  article.catalog-specifi section ul li:nth-child(2)>*,
  article.catalog-specifi section ul li>*,
  article.catalog-specifi section ul li.single-last>*,
  article.catalog-specifi section ul li.two-last>* {
    border: none;
  }

  article.catalog-specifi section ul li p {
    text-align: justify;
  }
}

article.features {
  padding: 115px 20px 0 20px;
}
article.features>h2 {
  /*opacity: 0;*/
}
article.features section.grid {
  max-width: 1080px;
  /*padding: 0 20px;*/
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
article.features section div h2 {
  text-align: left;
  margin-bottom: 0;

  display: flex;
  align-items: baseline;
}
article.features section div h2 span {
  font-family: 'Myriad Pro','微軟正黑體';
  color: #054278;
  text-align: left;
  line-height: 1.6;
}
article.features section div h2 span.title {
  font-size: 1.25rem;
  font-weight: 900;
  margin-bottom: 25px;
}
article.features section div h2 span.num {
  font-size: 1.875rem;
  padding-right: 30px;
}
article.features section div p,
article.features section div li {
  font-size: 1rem;
  font-family: 'Myriad Pro','微軟正黑體';
  line-height: 1.6;
  text-align: justify;
}
article.features section div li {
  margin-left: 15px;
}

article.features section div.grid-item {
  opacity: 1;
  /*transform: translateY(150px);*/
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
article.features section div.grid-item.upup {
  transform: translateY(0px);
}
article.features section div.grid-item div {
  background-color: #f6f6f6;
  min-height: 100%;
  padding: 55px 30px;
}
article.features section div.grid-item ol {list-style:decimal;}

.grid-sizer, .grid-item {
  width: 32.408%;
  min-height: 120px;
  margin-bottom: 15px;
  /*margin-right: 1.338%;*/
}
.grid .grid-item:nth-child(3n+3) {margin-right: 0;}


@media (max-width:1023px) {
  .grid-sizer, .grid-item, .grid .grid-item:nth-child(3n+3) {
    width: 48%;
    margin-right: 2%;
  }
  .grid .grid-item:nth-child(2n+2) {margin-right: 0;}
}
@media (max-width:767px) {
  .grid-sizer, .grid-item, .grid .grid-item:nth-child(3n+3), .grid .grid-item:nth-child(2n+2) {
    width: 100%;
    margin-right: 0%;
  }
}


article.contact {
  padding: 115px 0 140px 0;
  opacity: 1;
}
article.contact >* {
  font-size: 1.25rem;
  font-family: 'Myriad Pro','微軟正黑體';
  font-weight: 600;
  margin: 0 auto;
}
article.contact h2 {
  max-width: 382px;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 50px;
  font-weight: 900;
}
article.contact p {
  cursor: pointer;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-color: #005bac;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all .5s ease;
}
article.contact p span {
  width: 90px;
  text-align: center;
  line-height: 1.6;
}
article.contact p a {position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;}
article.contact p:hover {background-color: #7a1623; transition: all .5s ease;}

article.contactl {
  padding: 70px 0 140px 0;
  opacity: 1;
}
article.contactl > * {
  font-size: 1.25rem;
  font-family: 'Myriad Pro','微軟正黑體';
  font-weight: 600;
  margin: 0 auto;
}
article.contactl h2 {
  max-width: 382px;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 50px;
  font-weight: 900;
  font-size: 1.25rem;
}
article.contactl h2 span {
  display: block;
}
article.contactl p {
  cursor: pointer;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-color: #005bac;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all .5s ease;
  margin: 0 auto;
}
article.contactl p span {
  width: 90px;
  text-align: center;
  line-height: 1.6;
}
article.contactl p a {position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;}
article.contactl p:hover {background-color: #7a1623; transition: all .5s ease;}

nav.stick.core-nav .wrap-search-top{display: none !important;}

.seo_zone .seo_inner{max-width: 1080px;padding-top: 30px;margin: 0 auto;}
.seo_zone .seo_inner p {line-height: 28px;margin-bottom: 15px;}
@media only screen and (max-width:1024px){.seo_zone .seo_inner {margin: 0 10px;}}
@media only screen and (max-width:600px){.seo_zone .seo_inner p{font-size: 16px;}
.breadcrumbs li:after {margin: 0 10px;}
}
.iteml {
  position: relative;
}
.iteml p {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(-50%);
  height: 60px;
  background-color: rgba(0,0,0, 0.7);
  width: 100%;
  color: #fff;
}
@media only screen and (max-width:768px){
  .owl-carousel .slick-dots li:last-child {margin-right: 0;}

}
@media only screen and (max-width:600px){
  .item p {
    height: 40px;
  }
  .slick-dots {
    position:unset;
    text-align: center;
  }
}