/* 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:=================================*/
.txt-ch{font-family:'Noto Sans TC',"sans-serif"; }
.txt-ch-title { font-family: 'Noto Sans TC', serif; font-size: 2.4rem; line-height: 130%;}
.txt-tc{font-family: 'Noto Sans TC','Microsoft JhengHei', '微軟正黑體',sans-serif;}
.color-white{color: #fff!important; }
.color-gray{color:#5a5a5a; }
.f-400{font-weight: 400!important;}
.vText { -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }
.cms-wrapper { position: relative; display: block; margin:0px auto;  width: 100%; padding:0px 20px;  max-width: calc((100% - 40px)/12*12 + 40px)}
@media (min-width:1025px) {
.cms-wrapper { padding-right: 20px; padding-left: 20px;  }
}
@media (min-width:1100px) {
.cms-wrapper { padding-right:30px; padding-left: 30px;  }
}
@media (min-width:1200px) {
.cms-wrapper { padding-right: 40px; padding-left: 40px; max-width: 1280px}
}
@media (min-width:1920px) {
.cms-wrapper { padding-right: 40px; padding-left: 40px; max-width: 1440px }
}

/**banner=================================*/
.cms-main-banner { width: 100%; height: auto; margin:0px auto; padding:0px; position: relative; z-index: 1; }
.cms-main-banner:before{ content:"";position: absolute; z-index:1; top: 0; left: 0px;   width: 100%; height:660px; background: url("../images/index/mask.png") repeat-x left top; background-size: 70% auto;animation: fly 200s infinite linear; pointer-events: none;}  
@media (max-width: 1024px) {
.cms-main-banner:before{ bottom: -20px; }  
 }
@media (max-width: 940px) {
.cms-main-banner:before{ bottom: -60px; }  
 }
@media (max-width: 768px) {
.cms-main-banner:before{ bottom: -90px; }  
}

@media (max-width: 767px) {
.cms-main-banner:before{ display: none; }  
}
@media (min-width: 1800px) {
.cms-main-banner:before{  height:500px;  background-size: 60% auto; }
}

@media (min-width: 2200px) {
.cms-main-banner:before{   height:620px;  }
}
@keyframes fly {
0% { background-position-x: 0; }
100% {  background-position-x: 3800px; }
}
.cms-main-banner .imgSliderBox {  width: 100%; max-width: 100%; margin: 0px auto; padding:0px; display: flex; flex-wrap: wrap; justify-content: center; position: relative; z-index:0;; overflow: hidden;}
.slider-item { display: block; width: 100%; max-width: 100%; height: auto;  margin: auto; position: relative; z-index:2; }
.slider-item img { display: block;  width:100%; max-width: 100%;  margin: auto; height: auto; position: relative;  -o-object-fit: cover;  object-fit: cover; -webkit-backface-visibility: hidden;  backface-visibility: hidden; transition: all 0.3s; z-index: 0;    }
 

.cms-main-banner .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;
}
.cms-main-banner .slick-dots { bottom:40px!important;  }
.cms-main-banner .cms-sloga { width: 60%; height: 100%; position: absolute; left:0px; top:20px;  z-index: 99; }   
.cms-main-banner .cms-sloga img{ width: 60%; max-width: 600px; margin: auto;}
.cms-main-banner .cms-sloga h2 { margin:30px auto; font-size:2.35rem; line-height:3rem; letter-spacing: 1px;text-align: center; position: relative;font-weight:400;color:#fff; word-wrap:break-word;word-break:keep-all; text-shadow: 0px 2px 5px rgba(0,0,0,.5);}

  @media (min-width:1200px) {
.cms-main-banner .cms-sloga {  top:15%; }   
 }
 
  @media (max-width: 1199.98px) {
.cms-main-banner .cms-sloga { top:10%;}    
.cms-main-banner .cms-sloga h2 {  font-size:1.75rem; line-height:2rem; letter-spacing:5px;}
.cms-main-banner .cms-sloga p { font-size:1rem; line-height:2rem; letter-spacing:5px;}
}

@media (max-width: 920px) {
.cms-main-banner .cms-sloga { top:20px;}    
 }

@media (max-width: 767px) {
.cms-main-banner { width: 100%;height:630px; } 
.cms-main-banner .imgSliderBox { width: 100%; }
.cms-main-banner .imgSliderBox .slider-item img { width: 100%; height: auto; min-height:540px;animation:none;}   
.slider-item-img { width:30%; left:auto;right: 0px; top:0;  }    
.cms-main-banner .cms-sloga { width:100%; max-width: 500px; position: absolute; left:0px; top:25%; word-break: break-all;/*writing-mode: horizontal-tb;*/  }
.cms-main-banner .cms-sloga h2 {  font-size:1.5rem; line-height:2rem; letter-spacing:1px;}
.type { animation:none; }
.animated.type { animation:none;}
} 
 

@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.5);
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -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');
    }
}
 
.cms-main-wrap{ width: 100%; padding:0px 50px;  margin:0px auto; height: auto;  display: flex; flex-wrap: wrap;justify-content: center;  }
@media (max-width:1180px) {
.cms-main-wrap{  padding:0px; }    
}
@media (max-width: 767.98px) {
.cms-main-wrap{ padding:0px; }
}

/*-------------------*/
/***** timeline *****/
/*------------------*/
.be-1{ background: url("../images/index/be-1.svg") no-repeat left 0px; }
.be-2{background: url("../images/index/be-2.svg") no-repeat left 0px; }
.be-3{background: url("../images/index/be-3.svg") no-repeat left 0px; }
.be-4{background: url("../images/index/be-4.svg") no-repeat left 0px; }
.be-5{background: url("../images/index/be-5.svg") no-repeat left 0px; }
/*========== timeline==========    */
.timeline { width: 100%; display: flex; flex-wrap: wrap; flex-direction: row;   margin: 20px auto; padding:50px 0px; position: relative;}
.timeline:after { content: ""; width: 100%; height: 100%; position: absolute;left:50%;top:50%; transform: translate(-50%, -50%); background:url("../images/index/line.png") no-repeat center top; background-size: 100% auto;  z-index: -1;   }
.timeline li{ width: calc(100%/2); margin: auto;  display: flex; flex-wrap: wrap;}
.timeline-event-icon { width: 140px;height: 140px;padding:20px 0px; margin: 0px; display: flex; align-items: center; justify-content: center; align-self: center;position: relative;}
.timeline-event-icon i { display: block; margin: auto; width: 140px;height: 140px;}

.timeline li:nth-child(1) { margin-left: -70px; padding: 90px 0px 0px 0px; }
.timeline li:nth-child(2) {padding: 90px 0px 0px 0px; }
.timeline li:nth-child(3) { margin-left: -70px; padding: 90px 0px 0px 0px;flex-direction: row-reverse; }
.timeline li:nth-child(4) {margin-left: 70px; padding: 90px 0px 0px 0px;flex-direction: row-reverse;  }
.timeline li:nth-child(5) { margin-left: -70px;padding: 140px 0px 0px 0px; }
  
 @media (min-width:1920px) {
.timeline li:nth-child(3) { padding: 140px 0px 0px 0px; }
.timeline li:nth-child(4) { padding: 140px 0px 0px 0px; }
.timeline li:nth-child(5) { padding: 160px 0px 0px 0px; }
}

 @media (max-width:1280px) {
.timeline li:nth-child(1) { padding: 70px 0px 0px 0px; }
.timeline li:nth-child(2) {padding: 70px 0px 0px 0px; }
.timeline li:nth-child(3) { padding: 80px 0px 0px 0px;flex-direction: row-reverse; }
.timeline li:nth-child(4) {padding: 80px 0px 0px 0px;flex-direction: row-reverse;  }
.timeline li:nth-child(5) {padding: 80px 0px 0px 0px; }

}

.timeline-event-content { width: calc(100% - 180px); padding: 20px; /*box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);*/}
.timeline-event-title { font-size: 1.5rem; line-height: 1.4; text-transform: uppercase; font-weight: 600; color: #0fa2b1; letter-spacing: 1.5px;  margin-bottom: 15px;}
.timeline-event-description p{ font-size:1rem; line-height: 1.4;  color:#2a424c;}
 @media (max-width:1280px) {
 .timeline { padding:20px 50px; width:90%; }
.timeline-event-icon { width: 100px; height: 100px; margin:0px auto;}
.timeline-event-icon i {width: 100px; height: 100px;}
.timeline-event-content { width: calc(100% - 140px); }   
.timeline-event-title { font-size: 120%; line-height: 1.4; text-transform: uppercase; font-weight: 600; color: #0fa2b1; letter-spacing: 1.5px;  margin-bottom: 15px;}
.timeline-event-description { width: 100%;}
    
.timeline-event-description p{ font-size:100%; line-height: 1.4;  color:#2a424c;}
 }
 
 @media (max-width:1024px) {
.timeline { padding:20px 40px; width:94%; }
.timeline-event-content { width: calc(100% - 100px); min-height: 200px;   padding: 10px;  }   
}
 @media (max-width:820px) {
.timeline {margin: 0px auto;  padding:0px; width:100%;  }     
.timeline:after { display: none;  }
.timeline li:nth-child(1),.timeline li:nth-child(2),.timeline li:nth-child(3),.timeline li:nth-child(4),.timeline li:nth-child(5) { margin-left:0px; padding: 0px; flex-direction: row;align-items: flex-start; align-content: flex-start; }
.timeline-event-content { width:100%; }       
 }

 @media (max-width:767.98px) {
 .timeline-event-description p{ font-size:.9rem; }  
}

/*========== end timeline ==========    */
.cms-main-about{position: relative; margin:0px auto; padding:120px 0px 40px 0px; width: 100%;display: flex; flex-wrap: wrap;  z-index: 0;   }
.cms-main-about:before { content: ""; width:30%; height: 40%; position: absolute;left:15px;top:-92px; background:url("../images/index/hand.png") no-repeat center 0px; background-size: contain;  z-index:1;   }
.cms-block-txt-2{width:40%; margin:0; padding: 0px 0px;  }
#cms-main .cms-main-txt p { width: 100%; font-size:1rem; text-align: center; line-height: 180%; font-weight: 400;  padding:5px; margin-bottom: 20px;  color:#2c2c2c; }
#cms-main .cms-main-txt p strong{  display: block;  width: 100%; font-size: 1.313rem; line-height: 2rem; letter-spacing: 1.2px; font-weight:400;  padding:5px; margin-bottom: 10px; color: #000; }
.cms-main-about-card { width:100%;  margin:20px 0px;   padding:0px; display: flex; flex-wrap: wrap; align-items: center;position: relative;pointer-events: none; }
@media (max-width: 1280px) {
.cms-main-about{ padding: 0px 0px 40px 0px;}
.cms-main-about:before {  width:40%; height: 40%; position: absolute;left:15px;top:-92px;   }   
}

@media (max-width: 920px) {
.cms-block-txt{ padding: 0px 20px;  } 
}
@media (max-width: 767.98px) {
.cms-main-about{  padding: 40px 0px 0px 0px;  }   
.cms-main-about:before {  width:50%; height: 20%; position: absolute;left:0px;top:-96px;   }   
 }
/*-------------------*/
/***** product  *****/
/*------------------*/
.cms-produt-wrap{width:100%; height: auto; padding:0px;margin:50px 0px 0px 0px; display: flex; flex-wrap: wrap;  justify-content: flex-end; align-items: flex-end;  position: relative;z-index: 0; background-image: url("../images/index/p-1.jpg"),url("../images/index/p-1-bg.jpg");  background-repeat: no-repeat, repeat-x; background-position: left bottom;  background-size: auto 100%;  }
.cms-produt-wrap:before { content: ""; width:300px; height: 108px; position: absolute;right:0px;top:0px; background:url("../images/index/top.svg") no-repeat center top; background-size: contain;  z-index:99;}
.cms-produt-wrap:after { content: ""; width:100px; height:250px; position: absolute;left:0px;top:0px; background:url("../images/index/top-left.svg") no-repeat left top; background-size: contain;  z-index:99;}
@media (min-width: 1400px) {
.cms-produt-wrap{   background-size:auto 130%;  }
}
.cms-slider-nav { width: 35%; height: auto; margin: 0px; padding:108px 0px 0px 0px;  display: flex; flex-wrap: wrap;   }
.slider-nav { width: 100%; height: auto;  margin:  0px;  padding:0px!important; list-style: none; position: relative;z-index: 9; }
.slider-nav li { width: 100%; margin:0px; padding: 0px; background:#0fa2b1;  cursor: pointer;  position: relative; z-index: 1; }
.slider-nav li:before{ content: ""; position: absolute; z-index: 0;left:20px; top:0px; width: calc(100% - 40px); height:1px; background: rgba(255,255,255,.2);  pointer-events: auto }
.slider-nav .item{width: 100%;display: flex; flex-wrap: wrap; align-items: center; margin:0px auto; padding:10px;  }
.slider-nav .item-img{width: 40%; padding: 10px; max-width: 100%;}
.slider-nav .item-img img{width:70%; max-width: 100%; margin: auto;}
.slider-nav .item-txt{width: 60%;display: flex; flex-wrap: wrap; align-content: flex-start;}
.slider-nav .item-txt h3{margin-bottom: 10px; font-size:1.063rem; color: #fff; font-weight:700;   }
.slider-nav .item-txt p{margin-bottom: 10px; font-size:1rem; line-height: 1.35rem; color: #fff; font-weight:400;   }
@media (max-width: 1280px) {
.cms-slider-nav { width: 36%;}
.slider-nav .item-img{width: 30%; }
.slider-nav .item-txt{width: 70%; } 
.slider-nav .item{ padding:25px 10px;  }   
}
@media (max-width: 1024px) {
.cms-slider-nav { width: 40%;}    
}
@media (max-width: 840px) {
.cms-produt-wrap{   background-size:100% auto ;  }
.slider-nav .item-img img{width:100%; }

}
@media (max-width: 767.98px) {
.cms-produt-wrap{ padding-top:200px;  background-size:100% auto ;background-position: left top;   }
.cms-produt-wrap:before { width:100px; height: 10%;  }
.cms-produt-wrap:after { width:20px; height: 30%;  }
.cms-slider-nav { width: 100%;  margin-left: 0px; }  
}

.cms-product{ width: 100%; position: relative;}
.cms-product:after { content: ""; width:400px; height: 30%; position: absolute;left:0px;top:0px; background:url("../images/index/top-left.svg") no-repeat left top; background-size: contain;  z-index:99;   }
.cms-product .cms-title .txt {margin: 0px 0px 15px 0px;}
.cms-product .cms-title{ width: auto; position: absolute;left: 8%;top:100px;  }
 
@media (max-width: 1800px) {
.cms-product .cms-title{ left: 2%;}
}
@media (max-width: 1366px) {
.cms-product .cms-title{ left: 0;top:100px;  }
}
@media (max-width: 1286px) {
.cms-product .cms-title{ left: -20px;top:80px;  }
}
@media (max-width: 820px) {
.cms-product .cms-title{  width: 100%; width: 620px; position: relative;  }
.cms-product .cms-title h2 { width: 100%; width: 620px; margin: 30px 0px; line-height: 4rem;  }
}
@media (max-width:767.98px) {
.cms-product:after { width:20px; height: 30%;  }  
 .cms-product .cms-title{  width: 100%; left:-40px; top:0px; margin-bottom: 0px; transform: scale(0.55)}
}

 /*------------產品總覽頁Product -----------------*/
.cms-product-cate{ width:100%; margin: auto; padding:30px 0px 20px 100px; position: relative;  pointer-events: auto; }
.cms-product-cate li{ width:100%; margin:0px auto; padding:60px 0px 30px 5px;  ransition: all 0.5s ease 0s; cursor: pointer;position: relative; }
.cms-product-cate li a{   display: flex; flex-wrap: wrap; justify-content: space-between;  align-self: flex-start;  transition: all 0.5s ease 0s;  cursor: pointer; } 
.cms-product-cate li figure{ width:50%; height:auto; padding:10px 0px; margin: auto;  display: flex;  transition: all 0.5s ease 0s;}
.cms-product-cate li figure img{ margin: auto;  width:100%; max-width: 100%; transition: all 0.5s ease 0s;	}
.cms-product-cate li:hover{ transform: scale(1);   }
.cms-product-cate li .cms-product-inner{width: 50%; padding:50px 70px 50px 0px; margin: 0px; display: flex; flex-wrap: wrap; align-content:center; align-items:center;  transition: all 0.3s linear 0s;  } 
#cms-main .cms-product-cate li .cms-product-inner h3{ margin:0px 0px; padding: 0px; font-size:3.75rem; line-height:5rem; font-weight:700;  color:#b7cc19;  letter-spacing: 2px; overflow: hidden; word-break:keep-all;  word-wrap:break-word;text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }
#cms-main .cms-product-cate li .cms-product-inner p{ display: block;  margin:10px 0px; font-size: 2.5rem; line-height: 1.75rem; font-weight: 700; color:#2a424c;   } 
.cms-product-cate .slick-prev,.cms-product-cate .slick-next{top:70%; z-index: 9;}
.cms-product-cate .slick-prev{ left:10%; ; transform:translateX(-10%);  }
.cms-product-cate .slick-next{left:15%; transform:translateX(-15%);  }


 @media (max-width: 1366px) {
.cms-product-cate li .cms-product-inner{  padding:50px 20px; } 
#cms-main .cms-product-cate li .cms-product-inner h3 { font-size:2.5rem; line-height:4rem;  }
#cms-main .cms-product-cate li .cms-product-inner p { font-size:2rem;   }
}

 @media (max-width: 820px) {
.cms-product-cate{  padding:0px 0px 20px 40px; }   
.cms-product-cate .slick-prev{ left:10%; ; transform:translateX(-10%);  }
.cms-product-cate .slick-next{left:20%; transform:translateX(-20%);  }
 }
@media (max-width:767.98px) {
.cms-product-cate{ margin-top: -5%; padding:0px 0px 50px 0px; }   
 .cms-product-cate li{  padding:0px 0px 30px 0px;   }
.cms-product-cate li figure{ width:100%; order: 1; }
.cms-product-cate li .cms-product-inner{width: 100%; padding:10px 20px; margin: 0px; order: 2;  } 
 .cms-product-cate .slick-prev,.cms-product-cate .slick-next{bottom:0; top:auto; }   
 .cms-product-cate .slick-prev{ left:35%; ; transform:translateX(-35%);  }
.cms-product-cate .slick-next{left:55%; transform:translateX(-55%);  }
   
}

@media (min-width:1900px) {
#cms-main .cms-product-cate li .cms-product-inner h3{  font-size:3.75rem; line-height:5rem;  }
#cms-main .cms-product-cate li .cms-product-inner p{  font-size: 2.5rem; line-height: 1.75rem;   } 
}




/*----------cms-about-------------------*/
 .cms-about { width: 100%; padding:20px 0px;position: relative; margin:0 auto;background:url("../images/index/bg-about.jpg") no-repeat left top;}
.cms-about-wrap { width:100%; display: flex; flex-wrap: wrap; margin: 0px;  padding:30px 0px; position: relative;   }
.cms-about-txt{width: calc(50% - 140px);  margin:0 auto; padding:40px 70px;}
.cms-about-txt h4{ margin-bottom: 15px; font-size: 2rem; font-weight: 700;  color:#b7cc19;letter-spacing: -1px;  }
.cms-about-txt p{ color: #333333; font-size: 1.063rem; margin: 15px 0px 50px 0px; }
.cms-about-txt a{  margin: 30px 0px; }
.cms-about-item{width: 50%;  margin:0; padding: 0px; }
 @media (max-width: 1440px) {
.cms-about-txt{width: calc(50% - 40px);  margin:0 auto; padding:0px 20px 20px 20px; }
}

 @media (max-width: 1280px) {
.cms-about-txt h4{  font-size:1.5rem; font-weight: 700;  color:#b7cc19;letter-spacing: -1px;  }
.cms-about-txt p{ font-size: 100%;}
.cms-about-txt a{  margin: 30px 0px 0px 0px; }
}

 @media (max-width: 820px) {
.cms-about {  padding: 0px; background-position: left bottom;}   
.cms-about-txt{width: calc(100% - 140px);  margin:0 auto; padding:40px 70px;}
.cms-about-item{width: 100%;  margin:0; padding: 0px; }    
}

 @media (max-width: 767.98px) {
.cms-about-wrap { margin-top:30px; padding:0px 0px 30px 0px; position: relative;   }     
 .cms-about-txt{width: 100%;  margin:0 auto; padding:40px 20px;}
.cms-about-item{width: 100%;  margin:0; padding: 0px; }    
}


 /*----------------------------------------/
產品清單頁  cms-main-product-item  
---------------------------------------*/
.proiect{width:100%;padding:100px 0px 50px 100px;position: relative;z-index: 1;  }
.cms-box-wrap{width: 100%; display: flex; flex-wrap: wrap;position: relative;z-index: 1;   }
.cms-box-wra p{font-size:0.9375rem!important; }

 
 
.cms-product-item{ width:100%; margin:0; padding:40px 40px 40px 0px;  position: relative; z-index: 2;  } 
.cms-product-item li { width: 100%; margin:15px; padding: 0px; position: relative; z-index: 0; list-style: none; display: flex; flex-wrap: wrap;  transition: all 0.3s linear 0s;}
.cms-product-item li figure { width:100%; height:auto; margin: auto; transition: all 0.5s ease 0s;  }
.cms-product-item li figure img {width: 100%; max-width: 100%;  transition: all 0.3s;}
.cms-product-item li .cms-product-inner{width:100%;padding:10px 20px; margin: 0px; position: relative;z-index: 9; background:#0fa2b1; transition: all 0.3s linear 0s;  } 
#cms-main .cms-product-inner h3{flex: 0 0 100%; margin:15px 0px; font-size:1.125rem; line-height:1.35rem; font-weight:700;  color:#fff; overflow: hidden; word-break:keep-all;  word-wrap:break-word;text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; position: relative; }
 
.cms-product-item li.slick-current {  transform: scale(1)  translateY(-20px); z-index: 999; box-shadow: 0px 10px 10px rgba(0,0,0,.2) }
.listDateBox { display: flex; align-items: center; flex-wrap: wrap;  }
.listDateBox .date  { padding-left: 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #fff;}
 
  
.cms-product-item .slick-prev, .cms-product-item .slick-next{ top: auto; bottom: -40px; }
.cms-product-item .slick-prev{left:45%;}
.cms-product-item .slick-next{right:45%;}


@media (max-width: 1180px) {
.proiect{width:100%;padding:100px 0px 50px 50px;  }
.cms-product-item{  padding:20px; }     
}
@media (max-width: 820px) {
.cms-product-item .slick-prev{left:42%;}
.cms-product-item .slick-next{right:42%;}

}

@media (max-width: 767.98px) {
 .proiect{width:100%;padding:50px 0px 50px 20px;}
 .cms-product-item{  padding:20px 0px; margin-left: -10px; }        
 .cms-product-inner{width:100%;  } 
 #cms-main .cms-product-inner h3{ font-size:.9rem; }
 .cms-product-item .slick-prev,.cms-product-item .slick-next{bottom:-30px; top:auto; }   
 .cms-product-item .slick-prev{ left:35%; ; transform:translateX(-35%);  }
 .cms-product-item .slick-next{left:55%; transform:translateX(-55%);  }
   
}


/*--分類new-tag --*/
.new-tag { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; width: auto;padding: 0px 10px ; font-size: 0.875rem; font-weight: 400; color:#c09547;  transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; text-transform: capitalize;  word-break: keep-all; z-index: 9;  position: relative; }
.new-tag:after{ content:""; position: absolute; right:-10px; top:12px; width: 20px; height: 1px; background:#fff;  }
a.new-tag {color:#fff;}
.new-tag-01{color:#fff; border: solid 1px #fff;}
.new-tag-02{color:#ee8103; border: solid 1px #ee8103;}
.new-tag-03{color:#000; border: solid 1px #000;}

/*--service --*/
.service{width:100%;padding:100px 0px 0px 15px;position: relative;z-index: 1;  }
.service .cms-title-2 {margin-left: 100px;}
.service-box{width: 50%; padding: 0px;  }
.service-box .item{ width:100%; height: 100%;  height: 600px; margin:0px; padding:0px; display: flex; flex-wrap: wrap; justify-content: center;align-items:center; position: relative;}
.service-box .item-icon{ width:40%; height:auto;  margin: auto;}
.service-box .item-icon img { width:100%; height:auto;   }
.service-box .item-box{  width:50%;  margin: 0px auto; padding:50px 10px 10px 10px;  z-index: 9;  }
.service-box .item-box h3{ font-size: 1.875rem; font-weight: 700; margin: 15px 0px;color: #2a424c; text-align: center; } 
.service-box .item-box p{ font-size: 1.125rem; line-height: 1.75rem; font-weight: 400; margin: 15px 0px;color: #2a424c; } 
.item-bg-1 { width: 100%; max-width: 100%; height: auto;  margin: auto; position: relative; z-index:2; background: url("../images/index/end-1.jpg") no-repeat left bottom #eee; background-size:auto 100% ;}
.item-bg-2 {  width: 100%; max-width: 100%; height: auto;  margin: auto; position: relative; z-index:2; background-image: url("../images/index/end-2.png"), url("../images/index/end-2.jpg"); background-position: -25px bottom,right top; background-color: #eeeeee; background-size:20% auto,auto 100%; background-repeat: no-repeat;  }

@media (max-width: 1520px) {
.item-bg-2 { background-size:25% auto,auto 100%;  }    
}
@media (max-width: 1180px) {
.item-bg-2 { background-size:25% auto,100% auto ;  }    
}
@media (max-width: 10240px) {
.service-box .item-box{  width:70%;  margin: 0px auto;  }    
}

.service-box .item-box a.cms-btn{ width: 100%; max-width: 220px; margin-top: 40px;}

@media (max-width: 820px) {
.service-box{width: 100%; padding: 0px;  }
}

@media (max-width: 767.980px) {
.service{ padding:20px 0px 0px 0px;  }
.service .cms-title-2 {margin-left: 20px;}  
.service-box .item{ width:100%; height: 480px;  }
.service-box .item-box{ width:80%; } 
 .service-box .item-box p{ font-size:0.9rem;  } 
 }

/*.item-bg img {  width:100%; max-width: 100%;  height: auto; display: block; margin: auto;  position: relative;  -o-object-fit: cover;  object-fit: cover; -webkit-backface-visibility: hidden;  backface-visibility: hidden; transition: all 0.3s;   z-index: 0;    }
*/

 /*cms-Title Styles 樣式
=================================*/
.cms-title { width: 100%; height: auto; margin:0px auto 30px auto;padding: 0px; display: flex; justify-content: center;align-items: flex-start; flex-wrap: wrap; flex-direction:column;  }
.cms-title .txt{  width:auto; min-width: 400px; height: 62px; margin: auto auto 15px auto;  }
.cms-title .txt img{ display: block; width: auto; min-height:62px; margin:0px auto; }
 
.cms-title h1{ margin:30px auto; font-size:2.75rem; line-height: 2.5rem; color:#0fa2b1; font-weight:500; }
.cms-title h2{ margin:60px auto 30px auto; font-size:2.75rem; line-height: 2.5rem;  letter-spacing:2px;color:#0fa2b1; font-weight:500; }
.cms-title span{ width: auto; margin:10px auto; font-size:1rem; letter-spacing:2px; font-weight:400; color: #333;   }
.cms-title p{ margin:0px;font-size: 0.9375rem;  font-weight: 700; color:#8f929e;}

@media (max-width:1680px) {
.cms-title{ transform: scale(0.8)}
 }

@media (max-width:1520px) {
.cms-title{ transform: scale(0.75)}
 }
@media (max-width:1366px) {
.cms-title{ transform: scale(0.7)}
 }
@media (max-width:1280px) {
.cms-title{ transform: scale(0.6)}
 }

 

.cms-title-2 { width:100%;  margin:0px 0px 2% 0px;  padding: 0px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; flex-direction:column;  }
.cms-title-2 .txt{ width:80%;  min-width: 300px;  height: 62px; margin: 15px 0px; }
.cms-title-2 .txt img{ display: block; width: 100%;   height:62px; margin:0px; }

.cms-title-2 .txt-1{  width: 30%;  min-width: 300px;  height: 62px; margin: 15px 0px;  }
.cms-title-2 .txt-1 img{ display: block; width: 100%;   height:62px; margin:0px; }
 
.cms-title-2 h1{ margin:5px 0px; font-size:2.15rem; line-height: 3rem; color:#0fa2b1; font-weight:500;  }
.cms-title-2 h1 span{  font-size:1rem; font-weight:400;  color:#6c7280;  }



.cms-title-2 h2{ margin:5px 0px; font-size:2.15rem; line-height: 3rem; color:#0fa2b1; font-weight:500;  }
.cms-title-2 h2 span{  font-size:1rem; font-weight:400;  color:#6c7280;  }

.cms-title-2 p{ width:100%;  margin:0px auto;  font-size:0.75rem; font-weight:400; text-align: center; color:#6c7280;  }
@media (max-width: 1180px) {
 .cms-title-2 h2{ font-size:1.75rem; line-height:2rem;  } 
}
@media (max-width: 767.98px) {
 
.cms-title-2 h1{ margin:5px 0px; font-size:1.35rem; line-height: 1.75rem;  }
.cms-title-2 h2{   font-size:1.35rem; }
.cms-title-2 p{ width: 90%;   }
.cms-title { margin: 0 0px 20px 0px; justify-content: flex-start;   align-content: flex-start; align-items: flex-start;  }
.cms-title span{  margin:10px 0;   }
}
 
/*---------------*/
/***** btn *****/
/*---------------*/

.cms-btn { width: 100%; max-width: 200px; height: 42px;   margin: 15px auto;  padding: 0px 20px; text-decoration: none; display: flex;align-items: center;align-self: center;  align-content: center; justify-content: center; cursor: pointer;  border-radius:30px;  overflow: hidden;position: relative;  }
a.cms-btn { color: #fff;font-size: 1rem; font-weight:500; letter-spacing: 1px; background-color:transparent; text-shadow: 0px 1px 1px rgb(0,0,0,.3); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1); }
.cms-btn:hover {border-color: rgba(255, 255, 255,.5); }
a.cms-btn:hover {color: #fff;}
.cms-btn:before { content: ""; position: absolute; top: 0; left: -100%; width: 100%;  height: 100%; background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.6), transparent); transition: all 650ms;}
.cms-btn:hover:before {left: 100%;}
.cms-btn i {  width:26px; height:26px; margin:5px 15px 0px 15px ; -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
.cms-btn i.icon-next {  width:20px; height:20px; margin:0px  0px 0px 50px ; }
.cms-btn:hover i{ -webkit-transform: translateX(10px); transform: translateX(10px)}
.cms-btn span { -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
.cms-btn:hover span{ -webkit-transform: translateX(-5px); transform: translateX(-5px)}

a.cms-btn-1 { background-image: linear-gradient(-75deg, #0fa2b1 0%, #b7cc19 100%); ; text-shadow: 0px 1px 1px rgb(0,0,0,.3); box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.1); }
a.cms-btn-2 { background-image: linear-gradient( 45deg, #c98f25 10%, #ffd66b 60%, #c98f25 80%); text-shadow: 0px 1px 1px rgb(0,0,0,.3); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1); }

@media (max-width: 768px) {
.cms-btn i { width:18px; height: 18px;  }
.cms-btn {padding: 15px;}
}

/*cms-btn Styles 4====*/
.cms-btn-btnbox {position: relative;z-index:99; display: flex;  justify-content: center;  width: 100%; height: auto; margin:-120px auto 60px auto;  transition: all 1s;}  
.scroll-downs { position: absolute; top: 0; right: 0; bottom: auto; left: 0; margin: auto; width :20px; height: 44px; z-index: 99;}
.mousey { width: 2px; padding: 5px 8px; height: 24px; border: 1px solid #333; border-radius: 25px; opacity: 0.75; box-sizing: content-box; position: relative;}
.mousey:after{content: "";position: absolute;top:38px; left:8px;width: 1px; height:50px; background: #c1c1c1;}
.scroller { width: 2px; height: 8px; border-radius: 25%; background-color: #333; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite;}
 
@keyframes scroll {
0% { opacity: 0; }
10% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(15px); opacity: 0;}
}
@media (max-width: 920px) {
.scroll-downs { display: none;}   
}

/* 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: #000!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);}