.main-area{ background-image: linear-gradient(to top, rgba(193,140,70,0) 50%, #f7f5f6 100%); /*background: url("../images/index/bg.jpg") repeat left top;  background-size:10% auto;*/}
.main-banner:before{ content:"";position: absolute; z-index:9; top: 0px; left: 0px;   width: 100%; height: auto; background-image: linear-gradient(to top, rgba(193,140,70,0) 0%, rgba(252,251,249,1   ) 100%);  }  
 .text-stroke{ -webkit-text-stroke: 1px #a3d6bf;} 
.cms-top.main-area{margin-top: 20px;}
 
.main-wrap{width: 100%; display: flex; flex-wrap: wrap; align-content:flex-start;}

 
/* CSS Document */
.room-list{margin: 50px auto;padding: 0px; list-style: none; }
.room-list li{ display: flex;align-items: center; flex-wrap: wrap; margin-bottom: 80px;}
.room-list li .pic { position: relative; width:60% ;}
.room-list figure img { max-width:100%; height: auto; object-fit: contain; margin: auto; display: block; overflow: hidden; border-radius:0px;   transition: all 0.5s ease-in-out;}
.room-list figure  {width: 100%; padding-bottom: 52%; height: 0; overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s; transition: all 0.5s ease-in-out;}
.room-list li .top-title { padding-bottom: 12px; margin-bottom: 12px;  border-bottom: 1px solid #e84a75;}
.room-list li .inner { width: calc(40% - 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: 1.75rem; font-size: min(max(3vw, 1.25rem), 1.75rem);font-weight:700; line-height:2rem; letter-spacing: 3px; color:#e84a75;  }
.room-list li .text-box { margin-bottom: 30px;  font-weight: 600;  font-size: 1.15rem;  font-size: min(max(3vw, 1rem), 1.15rem);  line-height:2rem; letter-spacing: 1px;  color: #000;}

.info-item { display: flex; flex-wrap: wrap; width: 100%;  margin-bottom: 25px;}
.info-item .box { display: flex; flex-direction: column; justify-content: center; align-items: center; width:calc(100%/4); padding:0px 5px;  }
.info-item .box:not(:last-child) {  border-right: 1px solid #ecdce0;}
.info-item .icon {width: 36px; height: 36px; display: flex; flex-wrap: wrap;  justify-content: center; align-items: center; margin-bottom: 10px;}
.info-item .icon img{width: 36px; height: 36px; display: flex; flex-wrap: wrap;  justify-content: center; align-items: center;     margin-bottom: 10px;}

.info-item .text { min-height:48px; font-size: 1rem; font-size: min(max(3vw, .75rem), 1rem); font-weight: 600; letter-spacing: 0.05em; color:#000;}

.room-list li .buttonBox { display: flex;}
.room-list li .buttonBox  { 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: 50px;}
.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: 50px;}
@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: 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;}
.info-item .box {  width:calc(100%/3); padding:0px 5px;margin-bottom: 10px; }
.room-list li .pic { width:100%;}    
.room-list li .inner { width: 100%; padding: 0px; }
.room-list li .buttonBox  .text-button{ margin-top: 0px;}
}
@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;}
}

/*----------------------------------------/
詳細內容區塊
----------------------------------------*/
.main-product-wrapper {  display: flex;  flex-wrap: wrap;  justify-content: center; width: 100%; margin:auto; padding: 0px; position: relative;}
 @media (min-width: 1200px) {
.main-product-wrapper {  padding-right: 15px; padding-left: 15px; max-width: 1200px; margin: auto; }
 }
@media (min-width: 1400px) {
.main-product-wrapper { max-width: 1440px;  }
 }
 
/*----------------------------------------/
圖片輪播區塊
----------------------------------------*/
.room{width:calc(100% - 100px); padding: 20px 50px; margin: auto; display: flex;  flex-wrap: wrap;justify-content: center; position: relative;  }
.box-full{ width:100%;  }  
.box-full .info-item {  display: flex; width: 100%; margin-top: 30px;}
.box-full .info-item .box {  width:calc(100%/8); padding:0px 5px;}
@media (max-width: 840px) {
.room{width:100%;  padding: 20px;  }
}
@media (max-width: 768px) {
.box-full .info-item .box {  width:calc(100%/4); padding:0px 5px;}
.box-full .info-item { margin-top:0px; margin-bottom: 0px;}
.box-4{ width:100%; }  
.box-6{ width:100%; }
}
@media (max-width:320px) {
.room{  padding: 20px 0px; }
.box-full .info-item .box {  width:calc(100%/3); padding:0px 5px;}
.box-4 .info-item .icon { margin-right: 10px; margin-bottom: 0; }   
}
@media (min-width: 441px) {
.box-4 .info-item .box:not(:last-child) { border-right: 1px solid #e2e4e4; }
}

.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;}  
.slider-for .slick-dots{bottom: 20px;}
.slider-nav{ width: 100%;  height: auto; margin:10px auto; padding:0px;  order: 2;  }
.slider-nav li{  opacity:.5; width:calc(100% - 20px);  margin: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; }  
.slider-nav .slick-prev{left:-15px;} 
.slider-nav .slick-next{ right: -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:#e84a75; }
#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;   }
 }
 @media (max-width:320px) {

#cms-tabs-product .resp-tabs-list li { margin: 0px; padding: 0px; font-size:0.75rem;    }
}