body{ background-image: linear-gradient(to bottom, rgba(193,140,70,0) 0%, #e5fdff 100%); /*background: url("../images/index/bg.jpg") repeat left top;  background-size:10% auto;*/}
 
.cms-top .cms-main-breads { margin-top: 0px; padding-left: 80px; position: relative; background-color: transparent;  }
 @media (max-width: 767.98px) {
 .cms-top .cms-main-breads { padding-left:15px; }
    
}
#cms-main .cms-top .cms-main-breads .breadcrumb li a{ color:#0da1b0;}
.cms-top .cms-main-breads .breadcrumb-item:first-child::before {content: ""; color:#0da1b0 !important;  background: url("../images/icon/home.svg") no-repeat left top; }
#cms-main .cms-top .breadcrumb-item+.breadcrumb-item::before { color:#0da1b0;}
.cms-main-wrap{width: 100%; display: flex; flex-wrap: wrap; align-content:flex-start;} 
 
.cms-wrapper-full:before{ content:"";  position: absolute; z-index:9; top:10%; right:15px;   width:40%; height: 200px;background: url("../images/index/w-t1.svg") no-repeat right top;   background-size: 100% auto; opacity: .1;}   
 @media (max-width: 1024px) {
.cms-wrapper-full:before{ width:50%; height: 200px; ;}   
}
 @media (max-width: 767.98px) {
.cms-wrapper-full:before{ display: none;}   
}
/*--分類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;}

/*--分類小圖示icon--*/
.icon-tag{ display: block; width: 16px; height: 16px;margin:5px 10px;  background: url("../images/icon/icon-tag.svg") no-repeat left 2px;opacity:.5; }
  
.cms-product-item{ width:100%; margin:30px auto; padding:40px; display: flex; flex-wrap: wrap;  position: relative; z-index: 2;  } 
.cms-product-item li { width:calc(100%/3 - 30px); margin:30px 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; overflow:hidden;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:hover figure img {   -webkit-transform: scale(1.05);  -ms-transform: scale(1.05);  transform: scale(1.05);  filter: grayscale(100%); }
.cms-product-item li .cms-product-inner{width:100%;padding:10px 20px; margin: 0px; position: relative;z-index: 9; background:#0fa2b1; display: flex; flex-wrap: wrap;transition: all 0.3s linear 0s;  } 
#cms-main .cms-product-inner h3{ width:100%; height: 44px; margin:15px 0px; font-size:1.125rem; line-height:1.35rem; font-weight:700;  color:#fff; overflow: hidden; word-break: break-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:hover .cms-product-inner{  transform: scale(1)  translateY(-20px);box-shadow: 0px 5px 5px rgba(0,0,0,.1); z-index: 999; }
.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;}
 
@media (max-width: 1024px) {
.cms-product-item{  padding:0px; } 
    
}
@media (max-width: 768px) {
.cms-product-item li { width:calc(100%/2 - 30px); }

}
@media (max-width: 767.98px) {
.cms-product-inner{width:100%;  } 
 #cms-main .cms-product-inner h3{ font-size:.9rem; }
}



/*----------------------------------------/
產品總覽頁Product
----------------------------------------*/
/* CSS Document */
.room-list{margin: 50px auto;padding: 0px; list-style: none; }
.room-list li{ display: flex;align-items: center; align-content: center; margin-bottom: 80px;}
.room-list li figure { position: relative; width: 50% ;}
.room-list li figure img { display: block; width: 100%;}
.room-list li .top-title { padding-bottom: 12px; margin-bottom: 12px;  border-bottom: 1px solid #afaca9;}
.room-list li .inner { width: calc(50% - 20px);  padding-top: 20px; padding-right: 20px; }
.room-list li:nth-child(even) .inner { padding-right: 0px; padding-left: 20px;}
.room-list li .title { font-size: 22px; letter-spacing: 0.05rem; color: #b5871a; font-weight: 700;}
.room-list li .text-box { margin-bottom: 30px;  font-weight: 400;  font-size: 17px; letter-spacing: 0.05em;  color: #474747;}

.info-item { display: flex;  margin-bottom: 25px;}
.info-item .box { display: flex; flex-direction: column; align-items: center; width: 33.333%; padding:0px 5px; }
.info-item .box:not(:last-child) {  border-right: 1px solid #e2e4e4;}
.info-item .icon { height: 30px; margin-bottom: 10px;}
.info-item .text {  font-size: 1rem; letter-spacing: 0.05em; color: #979796;}

.room-list li .buttonBox { display: flex;}
.room-list li .buttonBox .btn2 { margin-right: 20px;}
.room-list li:nth-child(odd) .top-title,.room-list li:nth-child(odd) .text-box,.room-list li:nth-child(odd) .info-item,.room-list li:nth-child(odd) .buttonBox {padding-right: 60px;}
.room-list li:nth-child(even) .top-title,.room-list li:nth-child(even) .text-box,.room-list li:nth-child(even) .info-item,.room-list li:nth-child(even) .buttonBox {padding-left: 60px;}
@media (max-width: 767px) {
.room-list li:nth-child(odd) .top-title,.room-list li:nth-child(odd) .text-box,.room-list li:nth-child(odd) .info-item,.room-list li:nth-child(odd) .buttonBox {padding-right: 20px;}
.room-list li:nth-child(even) .top-title,.room-list li:nth-child(even) .text-box,.room-list li:nth-child(even) .info-item,.room-list i:nth-child(even) .buttonBox {padding-left: 20px;}
}
 
@media (max-width: 640px) {
.room-list li{  flex-wrap: wrap; }
.room-list li:nth-child(odd) .top-title,.room-list li:nth-child(odd) .text-box,.room-list li:nth-child(odd) .info-item,.room-list li:nth-child(odd) .buttonBox {padding-right: 0;}
.room-list li:nth-child(even) .top-title,.room-list li:nth-child(even) .text-box,.room-list li:nth-child(even) .info-item,.room-list li:nth-child(even) .buttonBox {padding-left: 0;}
.room-list li figure { width: 100%;}
.room-list li .inner { width: 100%; }
}
 @media (max-width: 480px) {
.room-list li { margin-bottom: 30px; }
}

@media (min-width: 641px) {
.room-list li:nth-child(odd) { flex-direction: row-reverse; }
}

 

/***figure Hover: zoom***/
.room-list li figure  { position: relative;  overflow: hidden; height: auto;  }
.room-list li figure img { transition: all 0.3s linear; -webkit-backface-visibility: hidden;}
.room-list li figure:hover img { opacity: 0.3; transform: scale(1.05);}
@keyframes aniSlideLeft {
  0% { transform: translateX(10px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}


 
 /*cms-btn-more =================================*/ 
.cms-more { width: auto;   height: 35px; padding: 20px 2px 20px 15px; 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: flex-start; cursor: pointer;  border-radius:30px;  background-image: linear-gradient(120deg, #22559e 0%, #6fcccb 55%);  }
@media (max-width:767px) {
.cms-more { width: auto; height: 24px }
}
.cms-more:hover .cms-more-circle, .cms-more:hover i { -webkit-transform: scale(1.2); transform: scale(1.2)}
.cms-more:hover .cms-more-txt, .cms-more:hover i { -webkit-transform: translateX(5px); transform: translateX(5px)}
.cms-more:hover{background:#afd9d3; }
.cms-more-circle { width: 30px; height: 30px;  position: relative; display: block; margin-left: 20px; border:2px solid #fff;  border-radius: 50%;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
@media (max-width:767px) {
.cms-more-circle { width: 24px; height: 24px; margin-right: 15px}
}
.cms-more i { font-size: 1.875rem; color: #fff;  position: absolute; top: 0; bottom: 0; left: auto; margin: 5px auto auto 100px;   -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
.cms-more i.icon-check { font-size: 1.35rem; margin: 10px auto auto 86px;  }
.cms-more-txt { font-size: 16px; font-weight: 400; line-height: 1.5;  color: #fff;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
@media (max-width:767px) {
.cms-more-txt { font-size: 14px; line-height: normal; letter-spacing: normal }
}
@media (max-width:768px) {
a.btn-view{ font-size: 0.875rem;}
}

/*----------------------------------------/
詳細內容區塊
----------------------------------------*/
.cms-main-product-wrapper {  display: flex;  flex-wrap: wrap;  justify-content: center; width: 100%; margin:auto; padding: 0px; position: relative;}
 @media (min-width: 1200px) {
.cms-main-product-wrapper {  padding-right: 15px; padding-left: 15px; max-width: 1200px; margin: auto; }
 }
@media (min-width: 1400px) {
.cms-main-product-wrapper { max-width: 1440px;  }
 }

/*----------------------------------------/
圖片輪播區塊
----------------------------------------*/
.cms-slider-for { width:80%; padding:0px 0px 40px 0px; margin: 0px auto;  }  
.cms-slider-nav{ width:20%;padding:0px; margin: 0px; }
 
@media (max-width: 768px) {
.cms-slider-for { width:100%;    }  
.cms-slider-nav{ width:100%; }

}
 

.slider-for  { width: 100%;  margin: 0px!important; padding:0px!important;   display: flex; justify-content: center; align-content: center; align-items:center;  order: 1; }
.slider-for li,.slider-nav li { width: 100%; display: block;margin: auto; padding: 0px; cursor: pointer; }
.slider-for li img{ display: block; width: 100%; height: auto;margin: auto; padding:0px 0px 10px 0px 0px;}  
.slider-for .slick-dots{bottom: 20px;}
.slider-for .slick-prev{left:10px;} 
.slider-for .slick-next{ right:10px;}
.slider-nav{ width: 100%;  height: auto; margin:0px auto; padding:0px; display: flex; flex-wrap: wrap; justify-content:space-between;  align-content: stretch;  }
.slider-nav li{  opacity:.5; width:calc(100% - 20px);  margin:5px 10px 10px 10px; }
.slider-nav li.slick-current,.slider-nav li:focus{opacity: 1;}
.slider-nav li img{ width:100%; max-width:90%;  margin:0px auto;   }
.slider-nav .slick-dots {bottom:-20px;}
 @media (max-width: 768px) {
 .slider-nav{ padding:0px 15px; }  

}

 @media (max-width: 767.98px) {
  .slider-nav .slick-prev,.slider-nav .slick-next{ top:10%;}
}
@keyframes arrow-v {
0% {transform: translate(0, 0);opacity: 0}
100% {transform: translate(0, 30%);opacity: 1}
}

@keyframes arrow2-v {
0% {transform: translate(0, 0);opacity: 0}
100% {transform: translate(0, -30%);opacity: 1}
}
 
 
 /*----------------------------------------/
tab
----------------------------------------*/
 #cms-tabs-product .resp-tabs-list{ width: 100%;  justify-content: space-around;   border-bottom: solid 1px #e9ebef; border-top: solid 1px #e9ebef;  }
#cms-tabs-product .resp-tabs-list li { width:calc(100%/3); margin: 0px; justify-content: center;  font-size:1rem; font-weight: 700; background-color: #eee;  }
#cms-tabs-product .resp-tabs-list li.resp-tab-active{background-color:#269295; }
#cms-tabs-product .resp-tabs-list a:hover {  color: #c09547!important; }
#cms-tabs-product .resp-tab-content { padding:30px 0px ;}
.resp-tab-content h4{ margin:2% 0;  font-size:1.188rem; font-weight: 700; }
#cms-main .resp-tab-content p{ margin:1% auto; font-size: 1rem; font-weight: 400;  }
.edit{width: 100%; max-width:1280px;padding:15px 5px; margin: auto;   }
.edit h4 img{display: block; width: 100%; max-width:600px;  margin: 15px auto!important;}
.edit .description{display: block; width: 100%; max-width:680px;  margin: 15px auto!important;}
.imgEditor { width:80%; height: auto; margin: auto; display: block;} 
.cms-main-item-title{ width: 50%; margin:0px 0px 60px 0px; padding:5px 0px; background:#016f89;  -ms-flex-align: center; align-items: center; }
.cms-main-item-title h2{ margin-left: 15%; /*-webkit-transform: skewY(5deg); -ms-transform: skewY(5deg); transform: skewY(5deg);*/ font-size: 1.5rem;  font-weight: 700; color: #fff;}

 @media (max-width:820px) {
#cms-tabs-product .resp-tabs-list li {  font-size:0.875rem;   }
 }