/* 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; }
body{ background: url("/images/theme-c67/index/p-bg.jpg") repeat left top; background-size: 200px; overflow-x: hidden;}
main{overflow-x:hidden; margin-top: 96px;}
/** font-family:=================================*/
.color-white{color: #fff!important; }
.align-center { text-align: center; margin: auto;}
.bg-bk{background: #4a4a4a;}
.bg-orange{background: #f39700;  }
.bg-orange-line{background: #f39700;  }
.bg-blue{background: #00437c;  }
.cms-wrapper { position: relative; display: block; margin:0px auto; padding: 0px 20px; width: 100%;  max-width: calc((100% - 40px)/12*12 + 40px); }
 

@media (max-width:979px) {
.cms-wrapper { padding-right: 20px; padding-left: 20px;   }
}
@media (max-width:640px) {
 #section01 .cms-wrapper { padding-right: 0px; padding-left: 0px;}
     
}
@media (min-width:1025px) {
.cms-wrapper { padding-right: 40px; padding-left: 40px;   }
}
@media (min-width: 1100px) and (max-width: 1200px) {
.cms-wrapper { padding-right: 40px; padding-left: 40px;  }
}
@media (min-width: 1201px) and (max-width: 1300px) {
.cms-wrapper { padding-right: 30px; padding-left:30px; max-width: 100%;}
}
@media (min-width: 1301px) {
.cms-wrapper { padding-right: 80px; padding-left: 80px; max-width: 1440px; }
}

/*----------------------------------------/
common  
----------------------------------------*/
.main-wrap{ width: 100%; padding:0px; margin:auto; display: flex; flex-wrap: wrap;}
.section{ min-height: 50vh;}
/* ==== Main CSS === */
.cms-main-banner {overflow: hidden }
.banner-item{width: 100%; max-width: 100%; margin: 0px auto; padding:0px;position: relative;}
/* ==== Slider Style === */
.slider-item{ width: 100%; display: block;  overflow: hidden; position: relative;  }
.slider-item img { width: 100%; height: auto; display:block;position: relative;  }

.cms-main-banner .cms-sloga { width: auto; height: auto; position: absolute;left: auto; top:30%; right:30%; transform: translate(0, -30%); display: flex; flex-wrap: wrap; align-items: center; flex-direction: column; align-self: center;  z-index: 9;-webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }   

.imgSliderBox h3{ width: auto; margin: 0px 0px 0px 20px; padding:0;font-size:3.75rem; line-height:4.75rem; font-weight:700; letter-spacing:35px; color:#fff;; text-shadow: 0px 1px 2px rgba(0,0,0,.2); animation:fadeOutRight 1s both;}
.imgSliderBox p{ width: auto; margin:0px; padding:0; font-size:2rem;  line-height:3rem;   font-weight: 500; letter-spacing: 15px;   color:#fff;text-shadow: 0px 1px 2px rgba(0,0,0,.2);   overflow:hidden;  animation:fadeOutLeft 1s both;} 
.imgSliderBox .slider-item .cms-sloga.right { left: auto; top:30%; right:14%; transform: translate(0, -30%);}
.imgSliderBox.slick-active h3{  animation:fadeInDown 1s both 1s;}
.imgSliderBox.slick-active p{ animation:fadeInLeft 1s both 1.5s;}
.imgSliderBox.slick-active{/*  animation:Slick-FastSwipeIn 1s both ;*/}
.imgSliderBox .slider-item img{ -webkit-transform-origin: center center;  -ms-transform-origin: center center; -moz-transform-origin: center center; transform-origin: center center; -webkit-animation: zoom 36s ease-in-out infinite alternate; -moz-animation: zoom 36s ease-in-out infinite alternate; -o-animation: zoom 36s ease-in-out infinite alternate; -ms-animation: zoom 36s ease-in-out infinite alternate; animation: zoom 36s ease-in-out infinite alternate;}
 @media (max-width: 768px) {
.imgSliderBox .slider-item img{ animation:none;}
.imgSliderBox .slider-item .cms-sloga { top:10%;}    
.cms-main-banner .cms-sloga h3 {  font-size:1.75rem; line-height:2.75rem;   }
.cms-main-banner .cms-sloga p { font-size:100%;  }
.cms-main-banner .slick-dots{ display: none!important;}
}
@media (max-width: 767.98px) {
.cms-main-banner { width: 100%;aspect-ratio: 425/555.44}
.cms-main-banner .imgSliderBox { width: 100%; height:auto; }
.cms-main-banner .cms-sloga { width:90%; max-width: 100%; position: absolute; left:10%; top:24%;  }    
.cms-main-banner .cms-sloga h3 { margin-bottom: 5px; width: 100%;height: auto;  }
.cms-main-banner .cms-sloga p { width: 100%;font-size: 0.9rem; line-height: 1.3rem;   }
 } 
/*banner pagination Styles====*/
.pagination {position: absolute; left:44px; bottom: 14vh; width:15px; height: 300px; z-index: 9; color: #4a4a4a; font-size: 1.2rem; font-weight: 700;  line-height: 8rem;  text-align: center;}
.pagination:after{ content: ""; width: 1px; height: 60px; background: #ddd; position: absolute; left: 8px;  top: 32%;    }
 @keyframes Slick-FastSwipeIn{
 0%{transform:rotate3d(0,1,0,40deg) scale(0)  perspective(50px); } 
 100%{transform:rotate3d(0,1,0,0deg) scale(1) perspective(50px);} 
}
@-webkit-keyframes ProgressDots{from{width:0px;}to{width:100%;}}
@keyframes ProgressDots{from{width:0px;}to{width:100%;}}
@keyframes zoom {
from {-moz-transform: scale(1);transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.0, M12=0, M21=0, M22=1.0, SizingMethod='auto expand')";filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.0, M12=0, M21=0, M22=1.0, SizingMethod='auto expand');}
to {-moz-transform: scale(1.45); transform: scale(1.45);-webkit-transform: scale(1.45); -ms-transform: scale(1.45);-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');}
}


/*---------------------------------
best-wrap
----------------------------------------*/
.about{padding:100px 0px 50px 0px; background: url("/images/theme-c67/index/bg-about.jpg") no-repeat left top ; background-size: 100% auto;}
.box-wrap{width: 100%; padding:0px; display: flex; flex-wrap: wrap;  position: relative; }
.box-nav{width: 60%; margin:0px auto; order:1; position: relative;  display: flex;  flex-wrap: wrap; justify-content: center; align-items: center;}
.box-slider{width: 35%; margin:10% auto 0px 5%; padding:0px; order: 2; }
.box-nav-mobile{ display: none;} 
.nav-mobile{ overflow: auto;width: 100%;}

@media (max-width: 1280px) {
 .about{padding:0px;}   
}
 
@media (max-width: 1024px) {
.box-nav{width: 100%; margin: 0px auto;  padding-top:0px; display: none;}
.box-slider{width: 100%; margin:0px auto; padding:0px; order: 2; }
main{margin-top: 60px;}
.box-nav-mobile{ width: 100%; display: block}    
}

@media (max-width:1280px) {
.box-nav{transform: scale(.9);}
.box-nav-mobile .resp-tabs-container{transform: scale(.9);}
}
@media (max-width:767.98px) {
.about{padding:50px 0px 0px 0px; }
.box-wrap{  padding:0px; }
.box-nav{width: 100%;height: auto;margin-top: -100px;  }
.box-nav-mobile .resp-tabs-container{width: 100%;height: auto;margin-top: -100px;  }
.box-slider{margin-top: -50px; }
}
 
@media (max-width:640px) {
.box-nav{transform: scale(.75);}
.box-nav-mobile  .resp-tabs-container{transform: scale(.75);}
.box-slider{margin-top: -100px; }    
}

@media (max-width:480px) {
.box-nav{transform: scale(.65);}
.box-nav-mobile  .resp-tabs-container{transform: scale(.65);}
}
@media (max-width:420px) {
.box-nav{transform: scale(.5);margin-top: -240px;}  
.box-nav-mobile .resp-tabs-container{transform: scale(.5);margin-top: -200px;}  
.box-slider{margin-top: -200px; }

}






/*service*/
.service {  position: relative}
 @-webkit-keyframes circleAni {
  0% {  -webkit-transform: rotate(0deg); transform: rotate(0deg) }
  to {  -webkit-transform: rotate(360deg); transform: rotate(360deg)  }
}
@keyframes circleAni {
  0% { -webkit-transform: rotate(0deg);  transform: rotate(0deg)  }
  to { -webkit-transform: rotate(360deg);  transform: rotate(360deg)  }
} 

.outer-box { position: relative; z-index: 1; -webkit-box-flex: 1;  -ms-flex: 1; flex: 1}
/*中間文字區塊部*/
.service-box { position: absolute; z-index: 9;  width:100%;max-width: 400px;  margin: auto;  top: 50%; left: 50%;  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }


.round-list {  width:100%;max-width: 400px;  padding:0px 10px;  height: auto; margin: auto; position: relative;   }
.round-list  > li { pointer-events: none; }
.round-list  > li.current {-webkit-transition: all 0.4s ease; transition: all 0.4s ease;  opacity: 1}
.round-list .slick-prev{ left:calc(50% - 60px);}
.round-list .slick-next{ right:calc(50% - 60px); }
.round-list .slick-prev,.round-list .slick-next{top:auto; bottom:-60px; }
/*---------------------------------
.中間文字區塊
----------------------------------------*/
.round-item{width: 100%; height: auto;  display: flex; flex-wrap: wrap; justify-content: center;  flex-direction: column;  }
.round-title{ margin:auto auto 20px auto; color:#a41b29; font-size: 1.875rem; font-weight: 700;  }
.round-content{width: 100%;  margin: auto; padding:20px 0px; color:#6d6d6d; text-align: center;}
.round-content p{width: 100%;  margin: auto; font-size: 1.125rem; text-align: center;  color:#6d6d6d;;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; word-break: normal; }
@media (max-width:480px) {
 .round-content p{font-size: 24px}
}
/*  width: 800px;height: 800px;  左半邊圓圈 大小circle-content*/
.circle-content {position: relative;z-index: 2; margin: auto; width:800px;height:800px; }

.service .circle-content .circle-line{ pointer-events: none;position: absolute;  top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width:100%; height:100%;  }
.service .box-nav-mobile .circle-content .circle-line .line-style{display: none;}
/*circle bg color*/
.service .circle-content .circle-line:after {content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);  transform: translate(-50%, -50%); width: calc(100% - 300px); height: calc(100% - 300px); border-radius: 50%; background-color: #af9b89;  box-shadow: 0px 6px 10px 4px rgba(0,0,0,.2); }
.service .circle-content .titleWrap {position: absolute;pointer-events: none; top: 50%; left: 50%;  width: calc(100% - 380px);  height: calc(100% - 380px); display: -webkit-box; display: -ms-flexbox;  display: flex;  -webkit-box-orient: vertical;  -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;  -webkit-box-align: center; -ms-flex-align: center;  align-items: center;  -webkit-box-pack: center;  -ms-flex-pack: center; justify-content: center;  -webkit-transform: translate(-50%, -50%);  transform: translate(-50%, -50%); border-radius: 50%;  background: #f5f9fc; box-shadow: 0px 6px 10px 4px rgba(0,0,0,.2);  
}
@media (max-width:1024px) {
 .box-nav-mobile .circle-content {position: relative;z-index: 2; margin: auto; width:650px;height:650px; }      
 .box-nav-mobile .circle-content .circle-line:after {content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);  transform: translate(-50%, -50%); width: calc(100% - 100px); height: calc(100% - 100px); border-radius: 50%; background-color: #af9b89;  box-shadow: 0px 6px 10px 4px rgba(0,0,0,.2); }
 .box-nav-mobile .circle-content .titleWrap {position: absolute;pointer-events: none; top: 50%; left: 50%;  width: calc(100% - 180px);  height: calc(100% - 180px); display: -webkit-box; display: -ms-flexbox;  display: flex;  -webkit-box-orient: vertical;  -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;  -webkit-box-align: center; -ms-flex-align: center;  align-items: center;  -webkit-box-pack: center;  -ms-flex-pack: center; justify-content: center;  -webkit-transform: translate(-50%, -50%);  transform: translate(-50%, -50%); border-radius: 50%;  background: #f5f9fc; box-shadow: 0px 6px 10px 4px rgba(0,0,0,.2);  
}
    .box-nav-mobile .service-box{text-align: center;}    
}

/*外圍黑色圓圈線*/
.service .circle-content .dashed { position: absolute; top: 50%; left: 50%;  -webkit-transform: translate(-50%, -50%);  transform: translate(-50%, -50%); width: calc(100% - 200px); height: calc(100% - 200px);  /*stroke: #503c2a;stroke-width: 1px; */ fill: none; border:solid 2px #503c2a; border-radius: 99rem;}
.service .circle-content .service-item-list {    }
.service .circle-content .service-item-list li {   list-style: none; position: absolute; width: 104px;  height: 50%;   top: 0px; left: 50%;  margin-left: -52px; -webkit-transform-origin: center bottom;  transform-origin: center bottom}
.service .circle-content .service-item-list li.current .icon { background-color:#503c2a;   }
.service .circle-content .service-item-list li.current .icon a{   color:#fff;   }
.service .circle-content .service-item-list li.current:before {width: 18px; height: 18px; border: 1px solid #503c2a}

/* 圓圈圈樣式*/
.service .circle-content .service-item-list .item { position: relative}
.service .circle-content .service-item-list .icon {  margin: 40px auto; display: flex;  flex-wrap: wrap; justify-content: center;  align-items: center;   padding: 0px 10px;width: 100px; height: 100px;  background-color:#d2af8b; border-radius: 50%;   overflow: hidden;  -webkit-box-shadow: 2px 2px 25px 2px rgba(35, 58, 71, 0.2); box-shadow: 2px 2px 25px 2px rgba(35, 58, 71, 0.2);}
.service .circle-content .service-item-list .icon a { display: block; white-space:wrap; word-break: break-all;  font-size: 1.125rem; text-align: center; font-weight: 700;color: #503c2a; letter-spacing: 2px;} 

 
 
.service .circle-content .stroke { position: absolute; z-index: 1; top: 0; left: 0;  width: 100%;  height: 100%; -webkit-transform-origin: center; transform-origin: center;  stroke: #af9b89; stroke-width: 5px;  fill: none;}
.service .circle-content .stroke.ani circle { -webkit-transition: all 5s; transition: all 5s;}
.service .circle-content .stroke circle { fill: none; stroke: #af9b89; stroke-width: 3; webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-transition: all 0s; transition: all 0s;}




/*---------------------------------
.圖片輪播
----------------------------------------*/
.slider-for{ width: 100%; margin: 0px; padding: 0px; }
.slider-for .slick-slide {  width: 100%; height: 100%;  display: flex; justify-content: center; align-items: center;  }
.cms-block-txt {  width: 100%; margin: 0px 0px 15px 0px;  padding: 20px 80px 20px 0px;}
.cms-block-txt  h1{ width: 100%;display: block;margin: 0 auto 30px auto; font-size:1.875rem; font-weight:700; color:#4a4a4a;  }
.cms-block-txt figure{border: solid 1px rgba(0,0,0,.2);}
@media (max-width: 767.98px) {
.cms-block-txt { padding: 20px 0px;}
.box-slider .cms-title {display: none;}
}

 
 /*----------------------------------------/
產品總覽頁Product
----------------------------------------*/
.cms-product-wrap{ width: 100%; margin: 0px auto; padding:50px 0px; position: relative; }
@media (max-width:1200px) {
.cms-product-wrap{padding: 0px;}
}
.graphy1{width: 10%; height: auto; position: absolute; z-index: 9; left:0; top:16%; bottom: auto; opacity: .5; animation: bounceInUp 4s ;}
.graphy2{width: 8%; height: auto; position: absolute; z-index: 9; right: 0px; top:auto;bottom: -15%;  opacity: .5; animation: bounceInUp 4s ;}
.graphy3{width: 30%; height: 100vh; position: absolute; z-index: 9; left: 70px; right: auto; top:0px; bottom: -5%; opacity: 1; animation: bounceInUp 6s ;}
.abs-graphy { position: absolute;  width: 60%;}

.recommended{ padding-top: 100px; background-image: linear-gradient( to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); position: relative;}
@media (max-width: 1280px) {
.recommended{ padding-top: 0px; }

}


.grid-row {display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap;}
.grid-item { -webkit-box-flex: 1;  -ms-flex-positive: 1; flex-grow:1; width: 50%; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding: 15px;  position: relative;  }
.cate-row {display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap;}
.cate-video{ -webkit-box-flex: 1;  -ms-flex-positive: 1; flex-grow: 1; width: 42.5%; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding: 15px 0px ;  position: relative;  }
.cate-item{ -webkit-box-flex: 1;  -ms-flex-positive: 1; flex-grow: 1; width:57%; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding: 15px 0px 15px 12px;  position: relative;  }
 

.cate{ width: 100%; margin: 0px auto; padding: 0px; display: flex; flex-wrap: wrap; justify-content:flex-start;  align-content: flex-start; align-items: flex-start; list-style:none;   }
.cate li{width:calc(100%/2 - 20px); margin:0px 10px; padding:0px; position: relative;}
.cate li.full{width:calc(100%  - 20px); margin:0px 10px; padding:0px; position: relative;}
.cate li a{display: flex; flex-wrap: wrap;justify-content: flex-start; position: relative; }
.cate li figure { position: relative; overflow: hidden; margin: 0px; width: 100%; background: #4a4a4a; text-align: center; cursor: pointer;}
.cate li figure figcaption { color: #fff;  -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.cate li figure figcaption::before,.cate li figure  figcaption::after { pointer-events: none;}
.cate li figure  figcaption, .cate li figure  figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }
.cate li figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; opacity: 0; }
.cate li figure p {letter-spacing: 1px;font-size: 68.5%; position: relative; z-index: 99;}
.cate li:hover figure::after{ opacity:0; } 
.cate li figure::after{ content: ''; position: absolute; bottom: 0px; left: 0px; width: 100%; height:279px;  z-index:1; opacity:.85; } 
 
@media (max-width: 1024px) {
.cate li.full{width:100%; margin:0px;  }
}

@media (max-width: 767.98px) {
.cate-row {  -ms-flex-wrap: wrap; flex-wrap: wrap;}
.cate-video{width: 100%;}
.cate-item{width: 100%;padding:0px 0px 15px 0px ;   }
.cate li{width:calc(100%/2); margin:0px;}
  
}


 /*---------------*/
/***** Bubba *****/
/*---------------*/
figure.effect-bubba img { position: relative; display: block;  max-width: 100%; opacity:1; -webkit-transition: opacity 0.35s; transition: opacity 0.35s;}
figure.effect-bubba:hover img {opacity: .35;}
figure.effect-bubba h2 { font-size: 1.5rem; font-weight: 700;  letter-spacing: 3px; text-align: center; margin: auto; padding-top: 20%; word-break:keep-all; word-wrap: normal; position: relative; z-index: 99; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0px, 0px,0); transform: translate3d(0px, 0px,0); -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }
figure.effect-bubba:hover h2  { opacity: 1; -webkit-transform: translate3d(0,30px,0); transform: translate3d(0,30px,0); }
figure.effect-bubba figcaption::before,figure.effect-bubba figcaption::after { position: absolute; z-index: 2; top: 10px; right: 10px; bottom: 10px; left: 10px; content: ''; opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;}
figure.effect-bubba figcaption::before { border-top: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.5);  -webkit-transform: scale(1); transform: scale(1);}
figure.effect-bubba figcaption::after { border-right: 1px solid rgba(255,255,255,.5); border-left: 1px solid rgba(255,255,255,.5); -webkit-transform: scale(1); transform: scale(1); }
figure.effect-bubba:hover figcaption::before{opacity: 1;  -webkit-transform: scale(0,1); transform: scale(0,1);}
figure.effect-bubba:hover figcaption::after {opacity: 1; -webkit-transform: scale(1,0); transform: scale(1,0);}
.m-tb{display:none; }
.m-desk{display: block;}
@media (max-width:767.98px) {
.m-tb{display:block;max-width:100%;border:0; margin: auto;}
.m-desk{display:none;}
}
@media (max-width: 1024px) {
 figure.effect-bubba h2 { font-size: 1.875rem; }
}

 @media (max-width: 767.98px) {
 figure.effect-bubba h2 { font-size: 1.15rem;  }
}

 @media (max-width: 320px) {
 figure.effect-bubba h2 { font-size: 1rem; }
}

 
 
.video { width: 100%;padding: 0px;  margin: auto; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;   opacity: 1;-webkit-animation: fsUp 1s cubic-bezier(0.65, 0.05, 0.36, 1) both; animation: fsUp 1s cubic-bezier(0.65, 0.05, 0.36, 1) both; list-style: none; position: relative; }
.video figure::before, .video figure::after,.video figcaption{box-sizing: border-box;}
.video figure, .video figure::before, .video figure::after, .video figure img, .video figcaption, .video .txt-wrap{transition: all 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);}
.video:hover figure img {opacity: .5;   -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}
.video:hover figure::before { opacity: 1;}
.video:hover figcaption {top: 35%;   opacity: 1; transition-delay: .1s;}
.video figcaption { position: absolute; top: 30%; left: 32%; z-index: 2;  height: 75px; padding: 0 25px; color: #fff; line-height: 1.5; letter-spacing: 1px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); opacity: 1;}

.video figure{  width: 100%; min-width: 100%;  height: auto;  position: relative;line-height: 0;  border-radius:0px; overflow: hidden;background-color: #4a4a4a;  }
.video figure::before, .video figure::after{ content: ''; position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px;z-index: 1; margin: auto; pointer-events: none;}
.video figure::before{ border:solid 1px  rgba(255, 255, 255, 0.2); }
.video figure::after { border:solid 1px  rgba(255, 255, 255, 0.2);} 
.video figure img{   width: 100%; height: auto; backface-visibility: hidden;  }
@media (max-width:767.98px) {
.fancybox-slide--video .fancybox-content, .fancybox-slide--video iframe {width: 100%!important; height: 400px!important;}
.fancybox-slide--iframe .fancybox-content{height: auto!important; background-color: transparent;} 
}

.icon-play { position: absolute;  width: 100px;  height: 100px; border: solid 2px #fff; border-radius: 100px; top: 50px; left: 50px;}
.icon-play:before { content: ""; width: 34px; height: 53px; border-left: 2px solid #fff; border-radius: 5px; position: absolute; top: 23px; left: 37px;}
.icon-play:after { content: ""; position: absolute; top: 27px; left: 19px;  width: 42px; height: 42px; transform: rotate(45deg) skew(-5deg, -5deg); border-top: 2px solid #fff; border-right: 2px solid #fff; border-radius: 5px;}
.icon-play:hover { background-color: rgba(0, 0, 0, 0.5);}
 



/*--分類new-tag --*/
.course{padding:100px 0px 50px 0px; background: url("/images/theme-c67/index/bg-end-1.jpg") no-repeat left bottom #fff; background-size: 100% auto;}
.course-first{ -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; width:30%; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding: 15px 0px; position: relative;  }
.course-item{ -webkit-box-flex: 1;  -ms-flex-positive: 1; flex-grow: 1; width:70%; align-items: flex-start; padding: 0px 0px 15px 12px;  position: relative;  }
.course-first figure.effect-bubba h2{; -webkit-transform: translate3d(-80px, 0px,0); transform: translate3d(-80px, 0px,0);}
.product-list { width: 100%; padding:0px;  margin:0px auto;   display: flex;  flex-wrap: wrap; position: relative; z-index: 1; }
.product-list li{ width:calc(100%/3 - 10px); padding:0px;margin:0px 5px;box-sizing: border-box;overflow: hidden;list-style: none; position: relative; background: #fff; box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);transition: all 0.5s ease 0s; transform: scale(0.9); }
.product-list figure img {width: 100%; position: relative; overflow: hidden; transition: all 0.5s ease-in-out;}
.product-list li:hover figure img { opacity: .5;  transform: scale(1.15);    }
.product-list figure {position: relative; overflow: hidden; background: #fff; }
.product-list .inner{width: 100%;  min-height:100px;  padding:10px 20px;  position: relative;  z-index: 4; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);  -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s;  }
.product-list .date{  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color:#b18e43;}
.product-list a h3 {position: relative;width: 100%;  margin:0px 0px 10px 0px; font-size:1.125rem; line-height: 1.7142857143rem; font-weight:700; color:#a51b29;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; word-break: normal;}
.product-list a p { width: 100%;  font-size:1rem; line-height: 1.5rem; color:#4c4635; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; word-break: normal;}
.product-list li:before { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 0; height: 3px; background-color: #741a1e; transition: all 0.4s ease;} 
.product-list li:hover:before {width: 100%;}

.course-full{  width:100%; align-items: flex-start; padding: 0px;  position: relative;  }
.course-full .product-list li{ width:calc(100%/3 - 25px); padding:0px;margin:0px;  transform: scale(1); }
.course-full .product-list li:nth-child(2){margin:0px 32px;}
@media (max-width:1024px) {
.course-item{  padding: 0px 0px 15px 0px;   }
.product-list li{ width:calc(100%/3); padding:0px;margin:0px; }
.product-list .inner{ min-height:88px;  padding:10px;  }
.product-list a h3 {margin-bottom:0px;  font-size:1rem;  }
.product-list a p {   font-size:.9rem; line-height: 1.35rem;  }
}
@media (max-width:420px) {
.product-list a h3 { font-size:.875rem;  }
.product-list a p { font-size:.75rem;line-height: 1rem;  }    
}
@media (max-width:767.98px) {
.course{padding:50px 0px; }
.course-full .product-list li{width: 100%; margin-bottom: 10px; }
.course-full .product-list li a{  display: flex; flex-wrap: wrap; }
.course-full .product-list figure {width: 40%; }
.course-full .product-list .inner{width: 60%;}
.course-full .product-list li:nth-child(2){margin:0px 0px 10px 0px;}
.product-list .inner{ min-height:auto;  padding:0px 10px;  }
.course-first figure.effect-bubba h2{   writing-mode: horizontal-tb; -webkit-transform: translate3d(0px, -10px,0); transform: translate3d(0px, -10px,0);  }
.course-item{  width:100%; align-items: flex-start; padding: 0px 0px 15px 0px;  }
.product-list li{ width:calc(100%/2); padding:0px;margin:0px; }

}

/*-------------------*/
/***** 最新消息 *****/
/*------------------*/
.news{padding-bottom: 150px; background: url("/images/theme-c67/index/bg-end-2.jpg") no-repeat left top; background-size: 100% auto;}
.news-cate{ width: 35%;}
.news-item{ width: 65%;}

.news-list { width:calc(100% - 25px); padding: 0px 0px 20px 0px;  margin:0px auto 0px 25px;   display: flex;  flex-wrap: wrap; position: relative; z-index: 1; }
.news-list li{display: flex;flex-direction: column; width: 100%; padding:0px 15px 15px 0px;margin:0px; box-sizing: border-box;overflow: hidden;list-style: none;transition: all 0.5s ease 0s;border-bottom: dashed 1px #eee;position: relative;  }
.news-list li a:hover h3,.news-list li a:hover p,.news-list li a:hover .date {color:#a51b29;}  
.news-list figure img {width: 100%; position: relative; overflow: hidden; transition: all 0.5s ease-in-out;}
.news-list li:hover figure img { opacity: .5;  transform: scale(1.15); }
.news-list figure {position: relative; overflow: hidden;  }
.news-list .inner {  width: 100%; box-sizing: border-box;  padding:0px; }
.news-list .news-box {position: relative;  width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box;  padding: 0px; color: #b18f44; }
.news-list .date{  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color:#a51b29; }
.news-list a h3 {position: relative;width: 100%;  margin:0px 0px 10px 0px; font-size:1.125rem;  line-height: 1.7142857143rem;font-weight:700;  color:#a51b29;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; word-break: normal;}
.news-list a p { width: 100%; font-size: 1rem; font-weight: 700;line-height: 1.7142857143rem; color:#4a4a4a; overflow: hidden;   white-space: nowrap; text-overflow: ellipsis;    }
  
 @media (max-width:1024px) {
.news .grid-item{ flex-direction: column; display: flex; width: 50%;  }   
 }

  
 @media (max-width:979px) {
.news{padding-bottom: 50px;  background-color: #fff;}
.news .grid-row { flex-wrap:wrap; }
.news .grid-item{ width: 100%; justify-content: center;  }   
 }
@media (max-width:767.98px) {
 .news-list { width:100%; margin:0px auto; }
   
.news-cate{ display: none; }
.news-item{ width: 100%;}
   
}

 /* =======================*/
  /*cms-title Styles 樣式
=================================*/
.cms-title { width:300px; height: auto;margin:0px 0px 30px 0px;padding: 0px; display: block; position: relative;   } 
 .cms-title h1{ width: 100%;display: block;margin: 0 auto; font-size: 2.5rem; font-weight:700; color:#4a4a4a;  }
.cms-title h2{ width: auto;margin:0px; font-size:1.875rem; font-weight:700;   color: #a41b29  }
.cms-title h3{ margin: auto; font-size:1.188rem; line-height: 1.75rem; color:#131212; font-weight:700; letter-spacing:10px; text-align: center;   }
.cms-title p{ margin:0px auto 10px auto;font-size:1.125rem;  font-weight: 700;  letter-spacing:10px;color:#666; }
.cms-title span{  color:#666; font-size:.75rem;  font-weight: 700; }
 @media (max-width:820px) {
.cms-title h3{   letter-spacing:5px; }  
.cms-title p{ margin:0px auto ; }
.cms-title:after { left:0px;  }    
}
 @media (max-width:767.98px) {
.cms-title {  margin:0px auto 20px auto;  }     
.cms-title h3{  font-size: 1.313rem; line-height: 2rem; letter-spacing:0; }
}
 /*=================================*/
  /*cms-Title Styles 樣式
=================================*/
.cms-title-2 { width:auto; height: auto;margin:0px auto 60px auto;padding: 0px; display: flex;flex-wrap: wrap; flex-direction: column; justify-content: center;align-items: center; position: relative;  text-align: center; } 
.cms-title-2:after { content:"";width:20px; height: 20px;position: absolute; right:-25px; top:20px; background: url("/images/theme-c67/icon/dot-1.svg") no-repeat center top;} 
.cms-title-2:before { content:"";width:20px; height: 20px;position: absolute; left:-30px; top:20px; background: url("/images/theme-c67/icon/dot-1.svg") no-repeat center top;} 
.cms-title-2 h3{ margin: auto; font-size:1.875rem; font-weight:700; color: #a41b29; letter-spacing:5px;   text-align: center;  }
.cms-title-2 p{ margin:0px auto;font-size:1rem; line-height: 1.35rem; font-weight: 700;  letter-spacing:3px;color:#666;  text-align: center;}
.cms-title-2 span{  color:#666; font-size:.75rem;  font-weight: 700; text-align: center; }

 @media (max-width:1024px) {
 .cms-title-2 h3{  font-size:1.5rem;    }
    
}

 @media (max-width:767.98px) {
 .cms-title-2 { margin:0px auto 30px auto; } 
 }

 /*=================================*/
  /*cms-Title Styles 樣式
=================================*/
.cms-title-3 { width:23%; height: auto;margin:0px 0 60px 0;padding: 0px; display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column; align-items: center; position: relative;  text-align: center; } 
.cms-title-3:after { content:"";width:20px; height: 20px;position: absolute; right:-25px; top:20px; background: url("/images/theme-c67/icon/dot-1.svg") no-repeat center top;} 
.cms-title-3:before { content:"";width:20px; height: 20px;position: absolute; left:-30px; top:20px; background: url("/images/theme-c67/icon/dot-1.svg") no-repeat center top;} 
.cms-title-3 h3{ margin: auto; font-size:1.875rem; font-weight:700; color: #a41b29; letter-spacing:5px;   text-align: center;  }
.cms-title-3 p{ margin:0px auto;font-size:1rem; line-height: 1.35rem; font-weight: 700;  letter-spacing:3px;color:#666;  text-align: center;}
.cms-title-3 span{  color:#666; font-size:.75rem;  font-weight: 700; text-align: center; }

@media (max-width:1024px) {
.cms-title-3 { width:100%; }
.cms-title-3 h3{  font-size:1.5rem;    }
}
@media (max-width:979px) {
.cms-title-3 {  width: auto; text-align: center; justify-content: center; margin: auto auto 60px auto; } 

}
@media (max-width:767.98px) {
.cms-title-3 { margin:0px auto 60px auto; } 
}


 /*---------------*/
/***** btn *****/
/*---------------*/
.cms-btn-btnbox {position: relative;z-index:9; display: flex;  justify-content: center;  width: 100%; height: auto; margin:0px auto;  transition: all 1s;}  
.cms-block-btn{ width: auto; margin: 0 0 0 25px;padding: 20px 0px; color: #fff; position: relative;  display: flex; flex-wrap: wrap; justify-content: center; align-self: center; flex-direction: column; transition: all 0.5s; }



.icon-next{background: url("/images/theme-c67/icon/arrow-right-2.svg") no-repeat left 0px;  background-size:auto;}
 
.cms-next-button {width:160px; height:40px; position: relative; display: -webkit-box;  display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: space-between; cursor: pointer; background-color:transparent; border-radius:  30px; border:solid 1px #fff;}
.cms-next-button:hover .cms-next-button-circle, .cms-next-button:hover i { -webkit-transform: scale(1.05); transform: scale(1.05)}
.cms-next-button:hover .cms-next-button-txt{ -webkit-transform: translateX(5px); transform: translateX(5px)}
.cms-next-button-circle { width: 35px; height: 35px;  position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin:auto 5px;  background: #fff;  border-radius: 50%;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
.cms-next-button i { width: 32px; height: 32px;   -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
.cms-next-button-txt { padding-left: 15px; font-size: 16px; font-weight: 500; line-height: 1.5; color: #fff;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; position: relative}


.arrow-w{background: url("/images/theme-c67/icon/arrow-right-2.svg") no-repeat right top;  } 
.arrow-b{background: url("/images/theme-c67/icon/arrow-right-b.svg") no-repeat right top;  } 

@media (max-width:767px) {
.cms-next-button-txt { font-size: 14px; line-height: normal; letter-spacing: normal }
}


  
/*cms-btn Styles 1===*/
a.cms-btn-01{width: 100%; max-width: 180px; height: auto; display: block; color: #a41b29!important;font-weight:700;  overflow: hidden; padding:10px 40px; text-align: center;  background-color:transparent; cursor: pointer;  letter-spacing: 0.1rem; box-shadow: inset 0 0 0 1px #eaeff3;-webkit-transition: color 0.25s 0.0833333333s; transition: color 0.25s 0.0833333333s;  border: solid 1px #a41b29;position: relative;}
.cms-btn-01::before  {border: 1px solid #a41b29; box-sizing: border-box; content: ''; pointer-events: none; position: absolute; width:calc(100% - 6px); height:calc(100% - 6px); bottom: 3px; right: 3px;}
a.cms-btn-01:hover{color:#fff; border-color: #4a4a4a;  }
a.cms-btn-01:hover::before{border-color: #4a4a4a;   }

.cms-btn-01:focus{outline: 1px inset #fff;}
.cms-btn-01 span { font-size:1rem; font-weight: 700; letter-spacing: 1px; color: #a41b29; position: relative;z-index:1; transform-origin: center left; transition: color 0.3s ease;}
a.cms-btn-01 span{ background-image: linear-gradient( to right, #4a4a4a, #4a4a4a 50%, #a41b29 50%); background-size: 200% 100%; background-position: -100%; position: relative;  -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease-in-out;}
a.cms-btn-01:hover span { background-position: 0 50%;}
@media (max-width: 797.98px) {
 a.cms-btn-01{  margin: auto; }
}

 
/*cms-btn Styles 2===*/
a.cms-btn-02{width: 100%; max-width: 180px; height: auto; display: block;  padding:10px 40px;  margin:20px auto auto auto; color: #fff!important;font-weight:700;  overflow: hidden;text-align: center;  background-color:#a41b29; cursor: pointer;  letter-spacing: 0.1rem; box-shadow: inset 0 0 0 1px #eaeff3;-webkit-transition: color 0.25s 0.0833333333s; transition: color 0.25s 0.0833333333s;  position: relative;}
.cms-btn-02::before  {border: 1px solid #fff; box-sizing: border-box; content: ''; pointer-events: none; position: absolute; width:calc(100% - 6px); height:calc(100% - 6px); bottom: 3px; right: 3px;}
a.cms-btn-02:hover{color:#fff; background-color:#503c2a; }
.cms-btn-02:focus{outline: 1px inset #fff;}
.cms-btn-02 span { font-size:1rem; font-weight: 700; letter-spacing: 1px; color: #fff; position: relative;z-index:1; transform-origin: center left; transition: color 0.3s ease;}
a.cms-btn-02 span{ background-image: linear-gradient( to right, #fdd80a, #fdd80a 50%, #fff 50%); background-size: 200% 100%; background-position: -100%; position: relative;  -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease-in-out;}
a.cms-btn-02:hover span { background-position: 0 50%;}
@media (max-width: 991.98px) {
a.cms-btn-02{  font-size:0.9rem;   }
}




/* Sweep To Right */
.hvr-sweep-to-right { cursor: pointer; display: inline-block; position: relative; vertical-align: middle;  -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #0da1b0!important; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%;  -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: #fff!important;}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1);}
 

.hvr-sweep-to-bottom {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: .3s;
  transition-duration: .3s
}
.hvr-sweep-to-bottom:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10px;
  left: 0;
  right: 0;
  bottom:-10px;
  background: #b18e44;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out
}
.hvr-sweep-to-bottom:active, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:hover {
  color: #fff
}
.hvr-sweep-to-bottom:active:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:hover:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1)
}