/* 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; }
/** font-family:=================================*/
.wrapper { position: relative; display: block; margin:0px auto; padding: 0px 20px; width: 100%;  max-width: calc((100% - 40px)/12*12 + 40px); }
@media (min-width:1025px) {
.wrapper { padding-right: 40px; padding-left: 40px;   }
}
@media (min-width: 1201px) and (max-width: 1400px) {
.wrapper { padding-right: 20px; padding-left: 20px; max-width: 100%;}
}
@media (min-width: 1401px) {
.wrapper { padding-right: 80px; padding-left: 80px; max-width: 1440px; }
}
/* ==== Main CSS === */
.banner {background:#fff; padding-left: 70px;}
@media (min-width: 1200px) {
 .banner {  padding-left: 90px;}
}


@media (min-width: 1400px) {
 .banner {  padding-left: 110px;}
}

@media (min-width: 1800px) {
 .banner {  padding-left: 135px;}
}

@media (max-width: 992px) {
 .banner {  padding-left: 0px;}
}
.color-white{color: #fff!important; }
.color-orange{color: #f39800!important; }
/* ==== Slider Style === */
.slider-item{ width: 100%; display: block;  overflow: hidden; position: relative;  }
.slider-item img { width: 100%; height: auto; position: relative; display:block; }
.imgSliderBox .slider-item .slogan {width: 80%; max-width: 600px; height: auto;  margin: auto;  left:12%; top:30%;position: absolute;  display: flex; flex-wrap: wrap;  flex-direction: column;  z-index: 9;}   
.imgSliderBox h3{ margin: 0px 0px 30px 0px; padding:0;font-size:3rem; line-height:3.5rem; font-weight:700; text-align: left;  letter-spacing: 1px; color:#000;; text-shadow: 0px 1px 2px rgba(0,0,0,.1); animation:fadeOutRight 1s both;}
.imgSliderBox h4{ width:80%;margin: 0px 0px 20px 0px; padding:0; font-size:2rem;  line-height:2.5rem;  text-align: left; font-weight: 600;  color:rgba(0,0,0,.5);text-shadow: 0px 1px 2px rgba(0,0,0,.5);   overflow:hidden;  animation:fadeOutLeft 1s both;}
.imgSliderBox .main-post-btn{ width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; animation:fadeOutLeft 1s both;}
.imgSliderBox .main-post-btn a{ margin: 10px 15px 10px 0px;}
.imgSliderBox.slick-active h3{  animation:fadeInDown 1s both 1s;}
.imgSliderBox.slick-active h4{ animation:fadeInLeft 1s both 1.5s;}
.imgSliderBox.slick-active .main-post-btn{  animation:fadeInLeft 1s both 1s;}
.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 60s ease-in-out infinite alternate; -moz-animation: zoom 60s ease-in-out infinite alternate; -o-animation: zoom 60s ease-in-out infinite alternate; -ms-animation: zoom 60s ease-in-out infinite alternate; animation: zoom 60s ease-in-out infinite alternate;}
@media (min-width: 1940px) {
.imgSliderBox .slider-item .slogan {width: 80%; max-width: 800px;}   
.imgSliderBox h3{  font-size:4rem;  line-height:4.75rem;  }
.imgSliderBox h4{  font-size:2.75rem;  line-height:3.75rem;  }
}


.banner-item{width: 100%; max-width: 100%; margin: 0px auto; padding:0px;position: relative;  aspect-ratio: 1773 / 868;overflow: hidden}
.banner-item .slick-prev{ left:10px;}
.banner-item .slick-next{right:10px;}
.banner-nav .slick-slider{ width: 100%; margin:0px auto; padding:0px!important;position: relative;  }
.cms-banner-nav{width: 60%; margin: 0px auto; padding: 0px; }
.banner-nav{ width: 100%; margin: 0px auto; padding: 0px; list-style:none;   }
.banner-nav li{width:100%; height:auto; margin:0px 0px 0px 5px; padding:0px; position: relative; }
.banner-nav li figure { position: relative; overflow: hidden; margin: 0px; width: 100%; height: auto;  text-align: center; cursor: pointer;}
.banner-nav li figure img {  height: auto; opacity: .5; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; -webkit-filter:grayscale(100%); background: #000;}
.banner-nav li figure:hover img {-webkit-filter:grayscale(0);opacity: 1; }
.banner-nav li.slick-current img{-webkit-filter:grayscale(0);opacity: 1;}
  
 @media (max-width: 1024px) {
.banner .slogan {  left:5%; } 
} 
 
@media (max-width: 992px) {
.imgSliderBox .slider-item .slogan{ width: 60%; max-width:500px;  top:30%;}    
.banner .slogan h3 { margin-bottom: 0px; font-size:1.75rem;line-height: 1.875rem; }
.banner .slogan h4 { font-size:150%;  }
.banner .slick-dots{ display: none!important;}
}
@media (max-width: 767.98px) {
.banner { margin-top: 60px; width: 100%;} 
.banner .imgSliderBox { width: 100%; height:auto; }
.imgSliderBox .slider-item .slogan{ width:100%; max-width:320px; position: absolute; left:5%;  }    
.banner .slogan h3 { margin-bottom: 15px; width: 100%;height: auto;  }
.banner .slogan h4 {   font-size:120%; line-height: 1.5rem; }
.banner .slick-dots{ display: none!important;}
.imgSliderBox .main-post-btn{  display: none}
.cms-banner-nav{width: 100%; margin: 0px auto; padding: 0px; order:1;} 
 .banner-nav .slick-prev,.banner-nav .slick-next,.product-cate .slick-prev,.product-cate .slick-next{  top:35%;width: 36px; height:36px;}   
 .banner-nav .slick-prev{ left:5px;}
.banner-nav .slick-next{right:5px;}
.banner-item{aspect-ratio: 375 / 500.48;}

} 


@keyframes Slick-FastSwipeIn{
 0%{transform:rotate3d(0,1,0,150deg) scale(0)  perspective(400px);} 
 100%{transform:rotate3d(0,1,0,0deg) scale(1) perspective(400px);} 
}
@-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.15);
        transform: scale(1.15);
        -webkit-transform: scale(1.15);
        -ms-transform: scale(1.15);
        -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');
    }
}
 /**訊息公告區塊 =================================*/
.notice{width: 100%;  padding:0px; position: relative;display: flex; flex-wrap: wrap; }
.notice-wrap{ width:40%; margin:0; padding:10px 0px 0px 0px; }
@media (max-width:767.98px) {
.notice-wrap{ width:100%; order: 2;   }  
}
.notice-title{ width:100%; color: #f39800; font-weight: 700;display: flex; flex-wrap: wrap;align-items:center;}
.notice-title i{ display: inline-block;   }
.notice-list{ width:100%; padding:0px;margin: 0px; position: relative; }
.notice-list li{list-style: none;padding:0px;margin: 0px;  }
.notice-list li a{ color: #000; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
.notice-list li .news-pic{width: 30%;}
.notice-list li .news-inner{width: 70%;padding: 10px; }
.notice-list li .news-inner p{ font-size: 1rem; line-height: 1.15rem;   overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1);}
 
.notice-list .slick-prev { width: 24px;height: 24px; top:17px; left:calc(100% - 60px);z-index: 1; }
.notice-list .slick-next { width: 24px;height: 24px;  top:17px; right:0;z-index: 1;  }
.notice-list .slick-prev:before, .notice-list .slick-next:before { width: 12px;height: 12px;  color: #fff; }
.notice-list .slick-prev:hover,.notice-list .slick-next:hover{color: transparent;outline: none;background:#d42d24;  }
.pagination {position: absolute; left:44px; bottom: 14vh; width:15px; height: 300px; z-index: 9; color: #000; 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%;    }
/*scroller mousey Styles====*/
.scroll-downs { position: absolute;  left: 40px; bottom: 4vh;  margin:0px auto; width :20px; height: auto;display: flex;  justify-content: center;transition: all 1s;z-index: 999;}
.mousey { width: 2px; padding: 5px 8px; height: 24px; border: 2px solid #000; border-radius: 25px; opacity: 0.75; box-sizing: content-box; position: relative; }
.mousey:before{content:attr(data-content)!important; padding: 5px 0px; font-size: 0.875rem; font-weight: 700; color: #666464; text-align: center; writing-mode: vertical-lr;
position: absolute;top:-100px; left:0px; height: 100px;}
.scroller { width:4px; height: 8px; border-radius: 25%; background-color:#f39800; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite;}
@media (max-width:1200px) {
.scroll-downs { left: 18px;bottom: 25vh; }    
}
@media (max-width:992px) {
.scroll-downs { display: none; }    
}

/*end scroller mousey Styles====*/
.main-social{ position: absolute; left:28px; top: 15%; width:50px; height: 300px; z-index: 9; }
.main-social ul.social-icons li {position: relative;  z-index: 1; display: flex;  align-items: center; justify-content: center; text-align: center; width: 30px; height: 30px; margin:10px auto; background: #666464; border-radius:99rem;  }
.main-social ul.social-icons li:hover {  background:#f39800;  }
@media (max-width:1200px) {
.pagination { left:22px; bottom:30vh; width:15px; height: 300px; z-index: 9; color: #000; font-size: 1.2rem; font-weight: 700;  line-height: 8rem;  text-align: center;}
.main-social{   left:8px; top: 10%; width:50px; height: 300px; z-index: 9; }
}

@media (max-width:992px) {
.pagination { display:none; }
.main-social{  display:none; }
}


@keyframes scroll {
0% { opacity: 0; }
10% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(15px); opacity: 0;}
}
 
.compare{ width: 100%; height: 100%; padding:8% 50px;margin:0px auto;  background-image: linear-gradient(to bottom, #f1f4f4 0%, #d9e1e0 100%);position: relative;z-index: 0;  }
.compare:after{content: ""; width: 50%; height: 100%; right: 0px; top:0px; background-image: linear-gradient(to bottom, #fff 30%, #fce2ad 100%);position: absolute; z-index: 1;}
.compare-box{width:calc(100% - 100px - 600px); padding-left: 40px; display: flex;flex-wrap: wrap; align-items: center; position: relative; z-index: 2;  }
.compare-txt{ width: 100%; padding: 30px 0px 0px 100px;  }
.compare-txt h2{color:#f39800; text-align: justify;}
.compare-txt p{ text-align: justify;}
@media (min-width:1520px) {
.compare{ padding:8% 50px 8% 15%;}
}
@media (min-width:1600px) {
.compare{ padding:8% 5% 8% 15%;}
}
@media (min-width:1900px) {
.compare{ padding:8% 5% 8% 20%;}
.compare-box{width:calc(100% - 160px - 680px);   }
}
@media (max-width:1280px) {
.compare{   padding:4% 50px 0px 50px;  }
.compare-box{width:calc(100% - 100px - 600px); padding-left: 40px;   }
.compare-txt p{ text-align: left;}
.compare-txt{ padding: 30px; }
}
@media (max-width:1200px) {
.compare-box{width:calc(100% - 100px - 400px);  }
}
@media (max-width:992px) {
.compare:after{content: ""; width:100%; height: 50%; right: 0px; bottom:0px; }
.compare-box{width:100%;padding-left: 0px;} 
.compare-txt{ padding: 30px 0px; }
}
@media (max-width:767.98px) {
.compare{ padding:4% 0px 0px 0px;}
.compare-txt{ padding: 30px; }  
.compare-txt h2{color:#f39800; text-align: left;}
.compare-txt p{ text-align: left; line-height: 1.5rem; }
}


.cms-slider-nav { width: 100px;  height: auto; margin:auto 0px; padding:0px; position: relative; z-index: 2;  }
.slider-nav { width:100px; margin:0px auto; padding:20px 0px; display: flex;flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column;  position: relative; z-index: 1;}
.slider-nav .slick-list{ width: 100%; margin:0px auto; padding:0px 0px 100px 0px!important;position: relative;  }
.slider-nav li { width:68px;height: 68px; margin:8px 0px;  padding:0px;list-style: none; display: block; border-radius: 99rem; position: relative; transition: all 0.3s linear 0s; transform: scale(.85); }


.slider-nav li figure{ width:68px;height: 68px; display: block; margin: auto;   position: relative; z-index: 1; }
.slider-nav li figure img{ width:100%;height: auto;  margin: auto; border-radius: 99rem;box-shadow: 0px 5px 8px rgba(0,0,0,.3); position: relative; z-index: 1; }
 
.slider-nav li.slick-current figure:before, .slider-nav li:hover figure:before{opacity: 1;}

 .slider-nav li figure:before {opacity: 0; content: "";position: absolute;z-index: 9; left:-9px; top:-9px;  width: calc(68px + 18px);  height: calc(68px + 18px); display: block;  border: dashed 2px #f39800; border-radius:99rem;   animation: rotateIt 20s infinite linear;  transform-origin: 50% 50%;}


 .slider-nav li:hover img,.slider-nav li.slick-current img{transform: scale(1.3);transition: all 0.5s ease 0s; }
@media (max-width:640px) {
.cms-slider-nav { width: 100%; margin: 0px; }
.slider-nav .slick-list{ padding:0px 0px 40px 0px!important;}
.slider-nav { width:100%; padding: 0px; flex-direction: row; justify-content: flex-start; }
.slider-nav .slick-track{  margin-left:-70px; }
.slider-nav li { width:68px!important; height: 68px!important;  margin:8px;  padding:0px;  }  
}

@media (max-width:320px) {
.slider-nav li {  margin:8px 4px;   }  
}

.cms-slider-for{ width:600px;  z-index: 999; padding:0px 2% 0px 3%; }
.slider-for{ width:600px;height: 600px; margin:0px auto; padding:0px;  border-radius: 99rem; background:#f0f0f0;  overflow: hidden; box-shadow: 0px 10px 12px -6px rgba(51, 51, 51, 0.5);}
.slider-for li { width:100%;height: auto; margin: auto; padding: 0px;list-style: none;   border-radius: 99rem;  }
.slider-for li img{ width:100%;height:100%;  border-radius: 99rem;   }


@media (min-width:1900px) {
.cms-slider-for{ width:680px; }
.slider-for{ width:680px;height: 680px; }
}
@media (max-width:1200px) {
.cms-slider-for{ width:400px;  z-index: 2; padding:0px 2% 0px 3%; }  
.slider-for{ width:400px;height: 400px; margin:0px auto; padding:0px;  border-radius: 99rem; background:#f0f0f0;  box-shadow: 0px 10px 12px -6px rgba(51, 51, 51, 0.5);}
}
@media (max-width:992px) {
.cms-slider-for{ width:460px;margin:0px auto;  }  
.slider-for{ width:460px;height: 460px; }
}
@media (max-width:640px) {
.cms-slider-for{ width:400px;margin: auto;  }  
.slider-for{ width:400px;height: 400px; }
}
@media (max-width:420px) {
.cms-slider-for{ width:300px;margin: auto;  }  
.slider-for{ width:300px;height: 300px; }
}


@media (max-width:320px) {
.cms-slider-for{ width:260px;  }  
.slider-for{ width:260px;height: 260px; padding: 0px;}
}



@keyframes rotate {
  0% { transform: rotate(0deg) }
  to { transform: rotate(360deg)  }
}
@keyframes rotate2 {
  0% { transform: rotate(0deg) scale(1) }
  to { transform: rotate(-359deg) scale(1)  }
}

@keyframes rotateIt {
  to { transform: rotate(-360deg); }
}
.bg-about{ background: url("/images/theme-b67/index/bg-line.jpg") no-repeat left top; background-size: 100% auto;}

.main-wrap{ width: 100%; padding:0px; margin:auto; display: flex; flex-wrap: wrap;  }
.block-box {width:50%; margin:100px auto; padding:15px; display: flex; flex-wrap: wrap;   }
.cms-dot{width: 100%; display: flex; flex-wrap: wrap;margin: 20px 0px ; padding: 0px; }
.cms-dot li{width:calc(100%/2 - 20px); margin:5px 10px; padding: 0px; }
.block-txt{width:100%;   margin:0px 0px 15px 0px; padding: 0px;    }
.block-txt h3{margin:0px auto 15px auto; font-size:1.875rem; font-weight:700; color:#f39800;   }
.block-txt h3 span{display: block; margin:0px auto; font-size:1.35rem; font-weight:700; color:#000;   }
.block-txt p{ font-size: 1rem;font-weight:400; line-height: 1.75rem; color:#000; }
 @media (max-width:920px) {
.block-box {width:100%;margin:40px auto 0px auto; }
}


@media (max-width:768px) {
  .main-wrap{     }
  
.block {width: 100%; margin: 0px auto; padding:0px; }
.block-txt{ padding: 0px;}
 }

@media (max-width:767.98px) {
 .cms-dot{ margin: 0px 0px 20px 20px; }   
 .cms-dot li{width:100%; margin:0px;  }  
.block-box {padding: 15px 0px; }
    
}

/*-------------------*/
/***** product  *****/
/*------------------*/
.title-wrap{ width: 100%; margin: auto; display: flex; flex-wrap: wrap; align-content: center;}
.title-main{ width: 40%; }
.title-main h2{ width: auto; margin: 30px 60px 30px 0px; text-align: right;  font-size: 2.15rem; color: #2a82bc; font-weight: 700; letter-spacing: 2px; }
.title-sub{ width: 60%; margin: auto; }
.title-sub p { width: 100%; font-size:1.188rem; line-height:2rem; font-weight: 400;  padding:0px;  letter-spacing: 1px; color:#131212; }
 @media (max-width:1024px) {
.title-main{ width: 38%; }
.title-sub{ width: 62%; }   
}
 
@media (max-width:920px) {
.title-main{ width: 100%; }
.title-sub{ width: 100%; }   
.title-main h2{ margin: 30px auto; text-align: center;}
.title-sub p {text-align: center; }
}
 
/*----------------------------------------/
產品清單頁  cms-main-product-item  
----------------------------------------*/
.product-cate{ width:100%; margin:0px auto;  padding: 40px 0px 60px 0px; }
.product-cate li { width: 100%; margin:0px 30px;padding:20px; position: relative; z-index: 1; list-style: none; transition: all 0.3s linear 0s; transform: scale(.85); }
.product-cate li:hover {transform: scale(1.05); } 
.product-cate li figure{  width:100%; height: auto; margin-bottom:0px; overflow: hidden; background-color:transparent;  border-radius:15px;  position: relative; order: 2;  }
.product-cate li figure img {  width: 100%; max-width: 100%; height: auto;transition: all 0.5s ease 0s;  }
.product-cate li.slick-current {transform: scale(1.05);  }
.product-cate li.slick-current figure{ box-shadow: 0px 3px 10px rgba(0,0,0,.5);  }
.product-cate .slick-prev{left:-20px;}
.product-cate .slick-next{right:-20px;}
@media (max-width:767.98px) {
.product-cate li {margin:0px;}
.product-cate li:nth-child(odd) a{ flex-direction:  column-reverse;  } 
.product-cate li h3:before{ width:30px; height:30px; right: -15px;  top:5px;   }    
}

.product-item  {width:100%; margin:0px auto;  padding: 40px 0px 60px 0px; }
.product-item li{  width: 100%; margin:0px 30px;padding:20px; position: relative; z-index: 1; list-style: none; transition: all 0.3s linear 0s; transform: scale(.85);  }
.product-item li figure {  position: relative; width: 100%; padding-bottom: 100%;  height: 0; transition: all 0.5s ease 0s; border-radius:15px;  }
.product-item li:hover {transform: scale(1.05); } 
.product-item li img {  max-width: 100%;  height: 100%;  transition: all .35s ease; border-radius:15px;  }
 .product-inner{width: 100%;  text-align: center;}
.product-item li h3 { margin: 5px 0px; font-size:1.313rem; line-height: 1.466; font-weight: 700; overflow: hidden;white-space: normal;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; text-overflow: ellipsis; }
.product-item li a h3 { color:#000;}
.product-item li a:hover h3 { color:#f39800;}
.product-item li p{ color: #262626; font-size: 15px; line-height: 1.466; word-wrap: break-word;  text-overflow: ellipsis; height: 45px;}
 
.product-item li.slick-current {transform: scale(1.05);  }
.product-item li.slick-current figure{ box-shadow: 0px 3px 10px rgba(0,0,0,.5);  }
.product-item .slick-prev{left:-20px; top:calc(50% - 50px);}
.product-item .slick-next{right:-20px; top:calc(50% - 50px);}



@media (max-width: 1180px) {
.product-item li a:before { opacity: 1; }
.product-item li a figure,.product-item li a .arrow {opacity: 1;  }
 }
@media (max-width: 1024px) {
.product-item  {width: 100%; padding: 0px;  margin: 0 auto; }
.product-item li:hover,.product-item li.slick-current {transform: scale(.85); } 
    
 }
 @media (max-width: 992px) {
.product-item li a .arrow:before { border-width: 0 0 70px 70px; }
}
@media (max-width: 767.98px) {
.product-item  {  padding: 40px 25px 60px 25px; }
.product-item li.slick-current{transform: scale(.85);  }
.product-item li.slick-current figure{ box-shadow:none;  }
.product-item li{  padding: 0px;  margin: 15px auto;  }
.product-item li a:before { left:8px; right: 8px; top:8px; bottom: 8px;  }
.product-item li h3 { font-size:1rem; line-height: 1.466; }
.product-item .slick-prev,.product-item .slick-next{top:35%;}
.product-item .slick-prev,.product-item .slick-next{width: 36px; height: 36px; }
.product-item .slick-prev{left:-15px;}
.product-item .slick-next{right:-15px;}

}







 /* choose style */
.main-choose{ width: 100%;padding:50px 0px; margin:0px auto; position: relative; background:url("/images/theme-b67/index/bg-bottom.jpg") no-repeat left bottom #000;background-size: 100% auto;}
.choose-txt{width: 600px; padding:0px 50px 0px 50px;display: flex; flex-wrap: wrap; align-content: center; }
.choose-txt p{ margin-top: 10px;  font-size:1.188rem;font-weight:500;  letter-spacing: 1px;}
.main-choose .title-3 h2{ color:#f39800;}
.main-choose .title-3 h3{color:#fff;}

.choose{ width: 100%;  margin:50px auto; padding:5% 0px; display: flex; flex-wrap: wrap; justify-content:center;align-content: flex-start;  list-style:none;}
.choose li{width:calc(100%/3 - 80px); margin:10px 40px; padding:0px; justify-content:center;position: relative; }
.choose li figure { width:120px; height:120px;position: relative; overflow: hidden; margin: 20px auto; text-align: center; /*cursor: pointer;*/}
.choose li h3 { color:#f39800; font-size: 1.5rem; font-weight: 700; margin:15px auto;  }
.choose li p { color:#fff; font-size: 1rem; font-weight: 400;line-height: 1.5rem;  }
@media (max-width:1200px) {
.main-choose{ width: 100%;padding:20px 0px;  background-size:cover;}
.choose{ margin:50px auto; padding:0px;  }
.choose li{width:calc(100%/3 - 40px); margin:10px 20px;  }
}
@media (max-width:767.98px) {
.main-choose{ background-color: #000;  background-size:100% auto; background-attachment: fixed;} 
.choose li{ width:100%; margin:10px 0px;   }    
}
.text-button { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.125rem; cursor: pointer; display: inline-block; color: currentColor; padding-left: 2.1875rem; position: relative; transition: padding 0.3s ease;}
.text-button::before { content: ''; display: inline-block; position: absolute; left: 0; top: 50%; width: 1.5625rem; height: 0.0625rem; background: currentColor; vertical-align: middle; margin-right: 0.625rem; transition: padding 0.3s ease}
@media (hover: hover) {
.text-button:hover { color: currentColor; padding-left: 2.8125rem  }
.text-button:hover:before { width: 2.1875rem; color: currentColor  }
}
@media (max-width: 798px) {
.text-button { letter-spacing: 0rem; }  
p a.text-button { font-size: 0.7rem; }    
}
 /*cms-Title Styles 樣式
=================================*/
.title { width: 100%; margin:0px auto;padding: 0px;position: relative; } 
.title h1{ width: 100%;display: block;margin: 0 auto; font-size: 2.5rem; font-weight:900; color:#000;  }
.title h2{ width: auto;margin:15px auto; font-size:1.875rem;   font-weight:700;     }
.title h3{ margin:15px auto; font-size: 2.35rem; line-height: 3.75rem; color:#131212; font-weight:900; letter-spacing:10px; text-align: center;   }
.title p{ margin:10px auto;  font-weight: 400; line-height: 1.35rem;  color:#fff; }
.title strong{ color:#f39800;; }
 @media (max-width:820px) {
 .title h3{   letter-spacing:5px; }    
}
 @media (max-width:767.98px) {
.title {  margin:0px auto 20px auto;  } 
.title h1{  font-size: 1.875rem;   }
.title h2{  font-size:1.375rem; letter-spacing:0; }     
.title h3{  font-size: 1.313rem; line-height: 2rem; letter-spacing:0; }
}
 /*ms-title-2  樣式
=================================*/
.title-2 { width:100%;  margin:0px; padding: 0; position: relative; }
.title-2 h1{ width: auto;margin:15px auto; font-size: 2.5rem; color:#000; font-weight:700; letter-spacing: 2px; }
.title-2 h2{ width: auto; margin:0px 0px 15px 0px; font-size: 1.75rem; font-weight: 700;word-break: normal;   }
.title-2 h3{ width: 100%; margin:15px auto; font-size:1.313rem; color:#000; font-weight:700;  }
.title-2 p{ width: auto; margin:0px auto; font-weight:400;color:#666464;  }
 @media (max-width:767.98px) {
.title-2 h1{ font-size: 2.15rem;}
.title-2 h2{  font-size: 1.375rem; }
 .title-2 h3{ font-size:1.175rem;   }  
 }

/*ms-title-3  樣式
=================================*/
.title-3 { width:100%; height: auto;  margin:0px auto 30px auto; padding: 0; display: flex;  flex-wrap: wrap; justify-content: center; flex-direction:column; position: relative; }
.title-3 h2{ width: auto;margin:0px auto 10px auto; font-size: 2.5rem; font-weight: 700; color:#000;  }
.title-3 h3{ width: auto;margin:0px auto 10px auto;  font-size: 1.75rem; font-weight: 700;  color:#fff;  }
.title-3 p{ width: auto; margin:0px auto;  font-size:1rem; line-height: 2rem; font-weight: 400; padding: 0px;  color: #666464;}
 @media (max-width:767.98px) {
 .title-3 h2{ font-size: 2rem;  }  
 .title-3 h3{ font-size: 1.5rem; }    
}
/*---------------*/
/***** btn *****/
/*---------------*/
.btn-btnbox {position: relative;z-index:9; display: flex;  justify-content: center;  width: 100%; height: auto; margin:0px auto;  transition: all 1s;}  
.btnbox {position: relative;z-index:9; display: flex;  justify-content: center;  width: 100%; height: auto; margin:20px auto 0px auto;  transition: all 1s;}  
.icon-next{background: url("/images/theme-b67/icon/arrow-right-2.svg") no-repeat left 0px;  background-size:auto;}
.next-button {width:196px; 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;}
.next-button:hover .next-button-circle, .next-button:hover i { -webkit-transform: scale(1.05); transform: scale(1.05)}
.next-button:hover .next-button-txt{ -webkit-transform: translateX(5px); transform: translateX(5px)}
.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}
.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}
.next-button-txt { padding-left: 10px; 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}

.bg-bk{background: #666464;}
.bg-orange{background: #f39700;  }
.bg-orange-line{background: #f39700;  }

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