.cms-main-area.cms-product-arera{ position: relative; padding: 0px;  width: 100%; display: flex; flex-wrap: wrap; justify-content: center; background: #fff; margin: 280px 0px 0px 0px;   }
.cms-main-area.cms-product-arera .cms-main-content {width:calc(100% - 260px);  padding-left:20px; }
.cms-main-product-wrapper {  display: flex;  flex-wrap: wrap;   width: 100%; max-width: 1200px; margin:0px auto auto auto;  padding: 0px;}
.cms-main-product-wrapper .cms-title-block{ width: 100%; max-width: 100%;   margin:1% 0px; padding: 0px 15px; display: flex; flex-wrap: wrap; justify-content: flex-start; }
.cms-main-product-wrapper .cms-title-block h1 {width:100%; margin:12px 0; font-size:2.25rem;  color:#222; text-align:left; font-weight:400; }
.cms-title-block h1::before,.cms-title-block h1::after{display: none;}

 
/*font size*/
.cms-f7-mr{ padding-left: 10px; }
.cms-f3{font-size: 1.5rem;}
.cms-f4{font-size: 1.25rem;}
.cms-f5{font-size: 1rem;}
.cms-f6{font-size: 0.875rem;}
.cms-f7{font-size: 0.75rem!important;}


/*----------------------------------------/
產品清單頁  cms-main-product-item  
----------------------------------------*/
.cms-project-item { width:100%;  margin:15px  auto;  padding:0px 0px 60px 0px; display: flex; flex-wrap: wrap; overflow: hidden;  list-style: none; }
.cms-project-item li { width: calc(100% / 3 - 80px); margin:30px 40px; padding: 15px 0px; height: auto; position: relative; transition: all 0.3s linear 0s; z-index: 1; background: #fff; }
.cms-project-item li:nth-child(3n){margin-right: 0px;}
.cms-project-item li a figure { position: relative; width:100%; height:180px;  background:#fff; overflow: hidden; transition: all 0.5s ease 0s; border: solid 1px #e5e5e5;/*box-shadow: 0 6px 15px rgb(36 37 38 / 8%);*/   }
.cms-project-item li a figure img {  width: 100%; max-width: 100%; height: auto;   transition: all 0.3s; -webkit-transform: translate3d(0,0px,0);transform: translate3d(0px,0px,0px);  }
#cms-main .cms-project-item li a h3{ margin:5px auto ; padding: 5px; width: 100%;  height:54px; max-height:54px;  font-size:1.125rem; font-weight: 700;color: #000; overflow: hidden; word-break:break-all; word-wrap:break-word;text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}
#cms-main .cms-project-item li p{ margin:15px auto ; padding: 5px; width: 100%; min-height:76px; max-height:76px;  font-size:0.875rem; font-weight: 400; line-height: 1.5rem; color: #000; overflow: hidden; word-break:break-all; word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp:3;  -webkit-box-orient: vertical;}
#cms-main .cms-project-item .cms-f7 a {padding-left: 5px; color:#737373;}
.cms-detail { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: center; align-items: center; border-top: solid 2px #555;}
.cms-detail-time{ flex: 1 1 auto; margin:0px; padding:0px 5px; font-size:0.875rem; line-height: 1.5rem; color:#6c7280; text-align: left;  }
.cms-detail-price{ flex: 1 1 auto;margin:0px; text-align: right; font-size:1rem; color:#000;  font-weight: 700; }

 @media (max-width: 1024px) {
 .cms-project-item li a figure { width:100%; height:150px;  }
 }
 @media (max-width: 768px) {
  .cms-project-item li { width: calc(100% / 3 - 40px); margin:30px 20px;  }
  .cms-detail-price{  text-align: left;  }
 
  }



@media (max-width: 767.98px) {
.cms-project-item li { width: calc(100% / 2 - 10px); margin: 10px 5px; height: auto;  }
.cms-project-item li:nth-child(3n){margin-right: auto;}
.cms-project-item li:nth-child(2n){margin-right: 0;}
#cms-main .cms-project-item li a h3{   font-size:1rem;  height:52px; max-height:52px;   }
#cms-main .cms-project-item li p{    font-size:0.75rem; }

}

#cms-main-pages{ margin:10px auto;  display: flex; justify-content: center;  }






 /*----------------------------------------/
btn區塊
----------------------------------------*/
.cms-product-group{width: 100%; margin-top: 2%; display: flex; flex-wrap: wrap; justify-content:space-between;}
#cms-main .cms-product-group .btn{  }
 
/*----------------------------------------/
促銷區塊
----------------------------------------*/
.cms-promotion { margin:10px auto; padding:5px; font-size:0.875rem; font-weight:400; display: flex;  flex-wrap: wrap;  background-color: #fff;  }
.cms-promotion a{color:#b9afa1;}
.cms-coupon{  margin:0px; padding: 0px;  color:#333; }
.cms-label { width: 100%; display: flex; flex-wrap: wrap; padding:3px; }
#cms-main .cms-label a.cms-ticket{padding:2px 5px;  margin: 0 10px; color:#fff; border: solid 1px #c30d23; background:#c30d23;}
 
 
/*----------------------------------------/
projects-show 
----------------------------------------*/
.cms-main-product-left{width:70%; margin:0; padding: 0px; align-content: flex-start; align-items: flex-start; }
.cms-main-product-left-image{width: 100%;  display: block; margin:0; padding: 0px;}
.cms-main-product-right{ width: 30%;   margin-bottom: 15px;  overflow: hidden;}
.cms-main-product-right .cms-main-breads .breadcrumb{justify-content: flex-start;}
/*----------------------------------------/
圖片輪播區塊
----------------------------------------*/
ul.cms-slider-for{ width: 100%;  height: auto; margin:0px; padding: 0px; }
ul.cms-slider-for li { width:100%;  display: block;  }
ul.cms-slider-for li img{ width:100%;max-width:100%; margin: auto;   }
#cms-main ul.cms-slider-for .slick-dots {bottom:-20px;}
ul.cms-slider-nav{ width: 100%; height: auto; margin:10px 0px; padding: 0px; }
ul.cms-slider-nav li{  opacity: .5; margin:10px 0px; padding: 0px; }
ul.cms-slider-nav li:focus{opacity: 1;}
ul.cms-slider-nav li img{ width:80%; margin:0;  }
#cms-main ul.cms-slider-nav .slick-dots {bottom:-20px;}
.cms-slider-for .slick-prev,.cms-slider-for .slick-next{ top:50%;}
.cms-slider-for .slick-prev {left:40px!important;z-index:1}
.cms-slider-for .slick-next {right:0px!important;}
.cms-main-product-right .cms-main-breads .breadcrumb{justify-content: flex-start;}
@media (max-width: 768px) {
.cms-main-product-left{width:60%;}
.cms-main-product-right{ width:40%; }

ul.cms-slider-for li iframe{max-height: 220px;}
}
@media (max-width: 767.98px) {
.cms-main-product-left,.cms-main-product-right{width: 100%;padding:0px 15px;  }
}


/*----------------------------------------/
projects-message 
----------------------------------------*/
.cms-project-left{width:30%; margin:15px auto; align-content: flex-start; align-items: flex-start; }
.cms-project-left-image{width: 100%; position: relative;max-width: 48rem; }
.cms-project-right{ width: 70%; margin:15px auto;  overflow: hidden; border: 1px solid #e9e9e9;}
.cms-project-right .cms-main-breads .breadcrumb{justify-content: flex-start;}
.cms-project-right .cms-main-product-info{border:none;}
@media (max-width: 767.98px) {
.cms-project-left,.cms-project-right{width: 100%;padding:0px 15px;  }
}

 
.cms-main-product-info{ width:100%; padding:30px;  background:#fff; border: 1px solid #e9e9e9  }
#cms-main .cms-main-product-info h1{padding:0px 0px 15px 0px;width: 100%; display: flex; justify-content: flex-start; font-size:1.25rem; font-weight: 400; color:#000; position: relative; word-spacing: normal; word-break:normal; }
.cms-product-description{ padding:15px 0px; }
#cms-main .cms-product-description p {margin-bottom: 15px; font-size:0.9375rem; color: #98979d;}
#cms-main .cms-product-description ul{width: 100%; margin: auto;   font-size:0.9375rem;}
#cms-main .cms-product-description ul li{width: 100%;margin:0px; padding: 0px; display: flex; flex-wrap: wrap; align-content: center; align-items: center; font-size:0.85rem; line-height: 1rem; }
#cms-main .cms-product-description ul li span.cms-item-title{width:auto; justify-content: flex-start; padding:5px 5px 5px 0px;color:#98979d;  font-size:0.85rem;}
#cms-main .cms-product-description p strong{color:#000;}
.cms-product-marker { margin:15px 0px; border-top: 1px solid #e2e2e2; width: 100%;}
 
 @media (max-width: 991.98px) {
.cms-main-product-info{padding-left:0; }    
}
@media (max-width: 767.98px) {
 .cms-main-product-info{  padding:10px 0px; border:none; }    
}


/*----------------------------------------/
產品規格
----------------------------------------*/
.cms-product-form-item{ display: flex; flex-wrap: wrap; align-content: center; align-items: center;}
.cms-option {flex: 1 1 auto; min-width: 0; min-height: 0;}
.cms-main-product-info del{color: #98979d;} 
.cms-price { display: flex; font-size:1.313rem;  font-weight:700; color:#000;  }
.cms-price b{ margin-left: 5px; font-size:1.313rem; font-weight:400;   }
.cms-goal{ display:flex;  flex:0 0 100%; flex-direction: column; margin-top: -5px;margin-left: 5px; font-size:0.75rem;  }
.cms-goal-title{ display: block; width: 100%; font-size:1rem; font-weight: 400; }
.cms-goal-item{  display: block; width: 100%;font-size:1.5rem; font-weight: 700; }
.cms-goal-sub-title{   width:auto;font-size:0.875rem; font-weight: 700; }
.cms-sum-raised{ display:flex; flex:0 0 100%; flex-wrap: wrap;justify-content: space-between;  align-content: center; align-items: center; }
.cms-sum-raised .progress{   width: 100%; height:6px;  margin: 10px 0px; border-radius:0px;  }

 #countdown{width: 100%; display: flex; flex-wrap: wrap; justify-content: center;margin:0; }
#countdown ul{width: 100%; display: flex; flex-wrap: wrap;justify-content: space-between; align-content: center; align-items: center; margin: 0px; padding: 0px; }
#countdown ul li {width:22%; max-width: 100%;  margin: 0px; padding:0px; display: flex; flex-wrap: wrap;justify-content: center; align-content: center; align-items: center; flex-direction: column; font-size: 0.875em; color: #000;list-style-type: none; text-transform: uppercase; border-right: solid 1px rgba(255,255,255,.5);   border-radius:99rem;}
#countdown ul li:last-of-type{ border-right:none; box-shadow:none;  }
#countdown li span {display: block; font-size: 1.5rem; font-weight: 700; color: #000; }
.countdown{ width: 100%; max-width: 360px; margin: auto; padding: 10px 0px; display: flex;   }
.countdown h3{font-size: 1.375rem; font-weight: 700; }


/* Form Progress */
.cms-progress {  width: 100%; margin: 20px auto; text-align: center;}
.cms-progress .circle,.cms-progress .bar { display: inline-block; background: #fff; width: 40px; height: 40px; border-radius: 40px; border: 1px solid #d5d5da;}
.cms-progress .bar { position: relative; width:50px; height: 6px; top: -33px; margin-left: -5px; margin-right: -5px; border-left: none; border-right: none;border-radius: 0;}
.cms-progress .circle .label { display: inline-block; width: 32px; height: 32px;  border-radius: 32px; margin-top: 3px; color: #b5b5ba;font-size: 17px;}
.cms-progress .circle .title { width: 100%; color: #b5b5ba; font-size:0.75rem; line-height: 30px; margin-left: -5px; word-wrap: normal;word-break: keep-all;   }
/* Done / Active */
.cms-progress .bar.done,.cms-progress .circle.done {background: #eee;}
.cms-progress .bar.active { background: linear-gradient(to right, #EEE 40%, #FFF 60%);}
.cms-progress .circle.done .label { color: #FFF; background: #ffc008; box-shadow: inset 0 0 2px rgba(0,0,0,.2);}
.cms-progress .circle.done .title { width: 100%; color: #444;  font-size:0.75rem;  line-height:15px;}
.cms-progress .circle.active .label { color: #FFF; background: #555; box-shadow: inset 0 0 2px rgba(0,0,0,.2);}
.cms-progress .circle.active .title {color: #0c95be;}
 

 /*----------------------------------------/
social-icons
----------------------------------------*/
#cms-main .cms-main-product-info .cms-social-icons{color:#675952;  display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-items: center; font-size:0.75rem;   }
 #cms-main .cms-main-product-info .cms-social-icons li{ width: auto!important; margin:5px; padding-top: 8px;  }
#cms-main .cms-main-product-info .cms-social-icons li a{ opacity:1;font-size:0!important;color:#675952!important;  }
/*----------------------------------------/
tab
----------------------------------------*/
.cms-tabs-list{width: 100%; margin:0; padding: 0; display: flex; flex-wrap: wrap; list-style: none;}
.cms-tabs-list li{width: auto; margin: 0px 20px;  font-size:0.875rem; color: #222;}
#cms-main .cms-tabs-list li.current a{color: #000;}
#cms-main .cms-tabs-list li.current a:after{ content: "";  width: 100%; height: 2px; position: relative;  bottom: -20px; z-index: 9; background: #000; display: block;}
.cms-tabs-list .badge{ color: #555;}
#cms-tabs-product .cms-tabs-content { padding:30px 0px ;}
.resp-tab-content h4{ margin:2% 0;  font-size: 1.15rem; font-weight: 700; }
#cms-main .resp-tab-content p{ margin:1% auto; font-size: 1rem; font-weight: 400;  }
.edit{ display: flex; flex-wrap: wrap; flex-direction: column; width: 100%; max-width:960px;padding:15px 5px; margin: auto; border-bottom: dashed 1px #c5c5c5; }
#cms-main .edit h3{ display: flex; justify-content: center;width: 100%; max-width:680px;  margin:15px auto!important; color:#333;font-size:1.5rem;  font-weight: 700;  }
#cms-main .edit h4{  width: 100%;  margin:15px auto!important; color:#333;font-size:1.35rem;  font-weight: 300;  }
.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;}
.cms-project{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; padding:1.5rem 0; }
.cms-project-wrap{width: 70%;  padding: 0px 1rem 0 0;  }
.cms-project-nav{width: 30%;  padding: 0px; position: sticky;top: 120px;right: 66px;height: 100%; overflow: hidden; overflow-y: scroll; height: 80vh; padding-bottom: 20px; padding-left: 60px; }
@media (max-width: 1024px) {
.cms-project-wrap{  padding: 0px 1rem;  }
   
}
@media (max-width: 768px) {
.cms-project-nav{width: 30%; right: 30px; } 
}
@media (max-width: 767.98px) {
.cms-project-wrap{width: 100%;}
.cms-project-nav{width: 100%; position: relative;  top: auto;right: auto;  height: auto; padding: 20px;  overflow-y: scroll; }
}
/*cms-plan*/
.cms-plan{ width: 100%; display: flex; flex-wrap: wrap; padding: 1rem; margin-bottom: 30px;   border:solid 1px #e0e0e0; border-radius:5px;   }
.cms-plan .b{color: #000; font-size: 1.25rem;   font-weight: 700; }
.cms-plan .b:hover{color:#ffb200;  }
#cms-main #cms-tabs-project .cms-plan p{ font-size:0.9375rem;   }
.cms-plan-box{width: 100%; display: flex; flex-wrap: wrap; margin-bottom: 15px; }
.cms-plan-box-txt{margin-left: 1rem;color: #767676; font-size: 0.75rem;}
#cms-tabs-project .resp-tabs-list { width: 100%; justify-content: flex-start; margin:0px auto!important; border: none;  }
.cms-project-tab{ width: 100%;  padding: 0px; background-color: #f5f5f5;  border-top:solid 1px #e0e0e0;  border-bottom:solid 1px #e0e0e0; }
.cms-project-tab-wrap{width: 100%; max-width: 1200px; display: flex; flex-wrap: wrap; justify-content: center; margin: auto; padding: 10px 0px;}
.cms-tab-wrap{width: 70%; padding: 0px;  display: flex; flex-wrap: wrap;  align-content: center; align-items: center;}
.cms-tab-btn{width: 25%; display: flex; flex-wrap: wrap; justify-content: flex-end; padding:0px;}
#cms-main #cms-tabs-project .resp-tab-active { color: #000!important; background: none;  border-bottom: solid 2px #000;}
#cms-main #cms-tabs-project .resp-tabs-list li{color:#8a8787; background: none; font-size: 0.9375rem;}
@media (max-width: 768px) {
.cms-tab-wrap{width: 100%; }
.cms-tab-btn{width: 100%; margin-top: 20px; }
#cms-main .cms-tabs-list li.current a:after{ display: none;}
.cms-tabs-list li{width: auto; margin: 0px 10px;  }
}

/* cms-project-nav */
.cms-nav-box{width: 100%; padding: 1rem; margin-bottom: 2rem;  color: #e0e0e0; }
.cms-nav-box { border: 1px solid #f1f1f1;  transition: all .3s;}
.cms-nav-box:hover { border: 1px solid #999;  }
.cms-nav-box h3{font-size: 1.375rem; font-weight: 700;color: #000;  }
.tag-wrap{ width: 100%; margin-bottom: 10px; }
.tag{font-size: 0.75rem; font-weight: 700; width: auto; padding: 5px 5px; margin: 0px 6px; }
/* tag color*/
.bg-near-white { background-color: #f4f4f4;}
.bg-red { background-color: #c45059; color: #fff;}  

.cms-nav-box-mv{ overflow: auto;}
#cms-main #cms-tabs-project .cms-nav-box-mv p{ font-size: 0.875rem;color: #101010; }
.cms-nav-box-bor{ margin-top: 1rem; padding:0 0.25rem; border: solid 1px #767676; font-size: 0.75rem; text-align: center; }
.cms-sold{ opacity: .5; box-shadow: none;}
.cms-sold:hover{ opacity: .5;  border: 1px solid #f1f1f1;box-shadow: none;}


.cms-nav-update{width: 100%; padding: 1rem; margin-bottom: 2rem;  color: #e0e0e0; }
.cms-search{ width: 100%; display: flex; flex-wrap: wrap; }
.cms-search label{width: 100%; font-size: 1rem; color: #767676; border-bottom: solid 1px #767676; margin-bottom: 10px;}
.cms-search input{flex: 1 1 auto; min-width: 0; min-height: 0;}
.cms-search  [type="search"] { -webkit-appearance: textfield; outline-offset: -2px;}
.cms-search input, .cms-search textarea { padding: 0.25rem 0.5rem; margin-bottom: 0.5rem; background: #fff; border: 1px solid #e0e0e0; font-size: .875rem; border-radius: .125rem; color: #767676;}
.cms-search button{display: inline-block; cursor: pointer;background: #fff; border: solid 1px #3f3f3f; color:#3f3f3f;margin-left:-5px;  padding: 0.4rem 1rem; border-radius: 0px 4px 4px 0px; line-height: 1rem; opacity: 0.9; white-space: nowrap; transform: translateZ(0);}
.cms-search form{margin: 15px 0px;}

.cms-nav-update h3{font-size: 1rem; color: #767676;border-bottom: solid 1px #767676; margin-bottom: 10px; padding-bottom: 10px;}
a.cms-nav-update-btn{ display: block; font-size: 0.875rem;font-weight: 400; color: #111;margin-bottom: 0.25rem;padding: 0.5rem;border-radius: 0.25rem; }
a.cms-nav-update-btn:hover{ background: #f5f5f5; }

.cs-comment{ width: 100%; display: flex; flex-wrap: wrap;}
.cs-comment-list{ width: 100%; display: flex; flex-wrap: wrap;margin: 15px 0px; padding: 0px; border-bottom:solid 1px #e0e0e0;}
.cs-comment-pic{ width: 32px; height: 32px;}
.cs-comment-wrap{ width:calc(100% - 50px);   }
.cs-comment-date{ width: 100%; padding: 0px 20px; display: flex; flex-wrap: wrap; }
.cs-comment-peo{ width: 80%; margin:0px; padding: 0px; display: flex;   justify-content:flex-start; }
#cms-main #cms-tabs-project .cs-comment-peo a.b{font-weight: 700; color:#0050a2; }
.cs-comment-peo .tag{ margin: 5px; padding:2px 5px!important; max-height:30px;  font-size: 0.75rem; border-radius:4px; }
.bg-green {color: #fff; background-color: #229f2a;}
.border-light-red { color:#f33737; border: solid 1px #f33737;}
.cs-comment-fr{ width: 20%; display: flex; justify-content:flex-end; font-size: 0.875rem;}
.cs-comment-txt{ padding:20px; font-size: 0.875rem;}
@media (max-width: 767.98px) {
.cs-comment-peo{ width: 100%; }
.cs-comment-fr{ width: 100%; display: flex; justify-content:flex-start;  }
}

.cs-faq{ width: 100%; display: flex; flex-wrap: wrap;}
.cs-faq-list{ width: 100%; display: flex; flex-wrap: wrap;margin: 15px auto; }
.cs-faq-title{ width: 100%;font-size: 0.875rem; padding: 0px 20px; display: flex; flex-wrap: wrap; font-weight: 700;color: #0050a2;}
.cs-faq-date{ width: 100%; font-size: 0.75rem;padding: 0px 20px; display: flex; flex-wrap: wrap; font-weight: 700;color: #000;}
.cs-faq-txt{ width: 100%; padding:20px;margin: 10px; font-size: 0.875rem; background-color: #f4f4f4; border-radius: 10px;}