/* ==== product Main CSS === */
.banner {margin:0px; position: relative; padding:50px 0px;   }
.banner::before { content: ""; position: absolute;  z-index:1;  width: calc(100% - 15%);  height:10%; bottom: 0px; right: 0; background: #fff; transition: 0.8s 1s;}
.banner::after { background: url(../images/index/bg-1.jpg) repeat #f8f8f8; }
 /* ==== 底圖 === */
.bg-background { background-image: attr(src url); background-repeat: no-repeat; background-size: contain;background-position:center top; position: absolute;z-index: -1; top: -126px; left: 0; right: 0; bottom: 0; line-height: 0;  width: 100%;  }
@media(max-width: 1440px) {
.bg-background { background-size:auto 100% ; transform: scale(.9)   }
}
 @media(max-width: 1280px) {
.bg-background { top: 0px;  background-size:contain;transform: scale(1) ; }
}
 @media(max-width: 992px) {
.bg-background { background-position:center ;   }
}
 /* ==== 0915v === */
.banner-item{width: 100%; margin: 0px auto auto auto; padding:0px; position: relative; }
.banner-item li{ width: 100%; height: 100%; margin: 0px auto; padding:0px;  position: relative; transition: all .5s ease; }
.slider-img { width:65%; height:auto;  margin:0px; padding:0px; position: relative;  }
.slider-img  figure { width:100%; height:auto;  margin:20px 0px 30px 0px;position: relative;  }
.slider-img  figure img {  display: block; width: 100%; height:auto;  margin: auto;position: relative; z-index:3;animation:fadeInRight 1s both 1s; }
.slider-img  figure::before{content: ""; width: 38%; height: calc(100% + 28%); display: block; position: absolute; right:16%; top:-22%;  border: solid 5px #f15921; z-index: 0;animation:fadeInDown 1s both 1s; }
.slider-img  figure::after{  width:200%; content: attr(data-content);color: #fff; font-size: 180px;  font-size: min(max(12vw, 90px), 180px); font-weight: 500; word-wrap: normal; font-family: 'MuseoModerno', cursive; letter-spacing: 6px; left:30%; top:-8%;position: absolute; z-index:0;animation:fadeInUp 1s both 1s;}
.slogan {width:calc(100% - 65%); height: auto;  margin: auto; position: relative; z-index: 5; animation:fadeInDown 1s both 1s; }   
.slogan::before{ content: attr(data-content);color: #000; font-size: 130px;  font-size: min(max(11vw, 90px), 130px); font-weight: 500;  letter-spacing: 3px;font-family: 'MuseoModerno', cursive; writing-mode: vertical-lr;position: absolute; left:0; top:10%;  transform:rotate(180deg);   }
.slogan::after{ content: "" ; width: 2px; height: 300px; background-color: #000;position: absolute; left:38%; top:0;  transform:rotate(45deg);  }
.slogan .txt-content{ width:170px;margin: 160px auto auto 220px; padding: 0px;}
.slogan .txt-content h1{margin: 0px; padding:0; font-size:40px; font-size: min(max(3.5vw, 30px), 40px); line-height:2.875rem; font-weight:500; text-align: left;  letter-spacing: 1px; color:#f15921;  }
.slogan .txt-content h2{ width:auto;margin:50px auto  0px auto; padding:0px 0px 0px 100px;font-size:40px; font-size: min(max(3.5vw, 16px), 40px);line-height:2.875rem; font-weight:500; color: #f15921; letter-spacing: 1px;   }
.slogan .txt-content p{width:100%;margin: 20px 0px 0px 0px;  padding:0px 0px 0px 10px; font-size:1rem; line-height: 1.5rem; text-align: left; font-weight:400; letter-spacing: 1px;color:#6d6d6d;   }

 /* ==== 下方敘述文字 === */
.slogan .txt-inner{display: block; width:100%; padding:50px 0px 0px 70px; }
.slogan .txt-inner P{padding:0;}
.txt-inner p{font-size:1rem; font-size: min(max(1vw, 14px), 16px); line-height: 1.5rem; letter-spacing: 1px; text-align: left; font-weight:400; color:#6d6d6d;   }
.txt-inner{ display: none;}
.txt-mobile{display: none;}

.border-line{width: 100%; height: 1px; background: #c0c0c0;}
.banner-nav{ width: 100%; max-width:1440px;  margin:0px auto auto auto; padding:60px 0px 100px 0px; list-style:none; display: flex; justify-content: flex-end; }
.banner-nav li{ font-size: 40px; font-size: min(max(3.5vw, 30px), 40px);font-weight: 500; letter-spacing: 1px; font-family: 'MuseoModerno', cursive;}
.banner-nav li a{ color: #000; }

.slider-item {width:100%;  padding: 60px 0px 0px  0px; margin: auto;  position: relative; display: flex; flex-wrap: wrap;  border-bottom: 1px solid rgb(188, 192, 192) }
 @media (min-width:1280px) {
.slider-item{ max-width:1280px; }
}
@media (min-width: 1520px) {
.slider-item{ max-width:1440px; padding: 100px 0px 0px 0px;}
}
 
@media(max-width: 1680px) {
.round-slider .slick-slide { padding: 70px 40px 40px 40px;}
}

@media(max-width: 1280px) {
.slider-item  { transform: scale(.9)}
.slider-img  figure::before{ height: calc(100% + 30%);  }
.banner-nav{ padding:40px 40px 100px 0px; }  
.slogan .txt-inner{ padding:40px 0px 0px 60px; }   
}
@media(max-width:1112px) {
.slogan .txt-content{ margin: 160px auto auto 200px;  }  
}
@media(max-width:1024px) {
.banner-item{margin: 30px auto auto auto;}
.slogan .txt-inner{ padding:40px 0px 0px  40px; }  
.slogan .txt-content{  margin: 160px auto auto 180px;  }  
.slogan::after{ height: 220px;top:20%; }
.slogan::before{top:20%;}
}
@media(max-width: 992px) {
.banner-item{margin: 30px auto auto auto; padding: 0px 40px; list-style: none;}
.slider-item  {transform: scale(1); }
.slider-img{padding-top:60px;}   
.slider-img  figure::before{ height: calc(100% + 32%);  }
.slogan::after{left:42%; top:10%; }
.slogan .txt-content{ width: 50%; margin: 120px auto auto 160px;  }  
.slogan .txt-inner{ padding:20px 0px 0px  0px; }    
}
@media(max-width:768px) {
.banner { padding: 0px 20px 40px 20px;  display: flex; flex-wrap: wrap; }
.banner::before{display: none;}
.slider-item,.banner-nav { transform: scale(1)}
.banner-item{order:2; }
.slider-item { padding:0px 80px; flex-direction: column-reverse; border-bottom: none;}
.slider-img figure::before{ width: 38%; height: calc(100% + 30%); right:30%; top:-20%;   }
.slider-img figure::after{content: ""; width: 5px; height: calc(100% + 25%);display: block; position: absolute;z-index: 99;left: auto; right:67%; top:-20%;  background: #f15921;animation:fadeInDown 1s both 1s; }
.slider-img{width:100%; margin-top: 20px; }   
.banner-item figure{margin: auto;}
.slogan {width:100%; height: auto;  margin:-10% auto 30px auto; position: relative; }   
.slogan::before,.slogan::after{ display: none;}   
.slogan .txt-content{ width:100%; margin: auto; display: flex;flex-wrap: wrap; justify-content: center; }  
.slogan .txt-inner{ display: none;}
.txt-inner{ display: block;  margin-top: 24px;}
.txt-inner P{ width:100%;margin:40px 0px; }
.txt-mobile{display: block;}  
.banner-nav{  margin-top:60px; padding:40px 0px; justify-content: center; }     
}

@media(max-width:767.98px) {
.banner-item{ padding: 0px 10px; }
.slider-item { padding:0px;   }
.slider-img  figure::after{ width: 4px; right:66.5%; top:-20%;  background: #f15921;animation:fadeInDown 1s both 1s; }
.banner { padding: 0px 20px 0px 20px; } 
.slider-img{ margin-top: 0px; }      
}
@media(max-width:440px) {
.slogan {  margin:-10% auto 0px auto;   }   
.slider-img  figure img {  width: 100%; height:auto;  }
.txt-inner{ margin-top: 10px;}
.banner .cms-wrapper {padding: 0px;}  
.banner-nav li{ letter-spacing: -1px; }

}
.mold-wrapper{}
@media (max-width:840px) {
.mold-wrapper{ padding:0px 40px;}
}




.about-blur { position: absolute;left:0; top:0; width: 100%; height: 100vh; z-index: -5;}
.img-blur { position: absolute; right:2%; top:-5%; width: 45%; height: 100%; z-index: -5;}
.img-blur-bg {max-width: 100%;height: 100%;background-position:center;background-repeat: no-repeat; background-size: cover; opacity: 1;}

.cms-bg{background-image: linear-gradient(to top, #fff 0%, #fbfdf6 90% ,#fff 100%);}


.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
.clearfix{display:block;zoom:1}

.main-area{ background: #fff;  }
.cms-bg{background-image: linear-gradient(to top, #fff 0%, #fbfdf6 90% ,#fff 100%);}

.grid-box{padding: 20px 20px 100px 120px;  margin: auto;}
.grid-wrap { display: flex; flex-wrap: wrap; justify-content: flex-start;width: 100%;position: relative;}
.grid-half{ width: calc(100% / 2);padding: 0px; position: relative;}


.title-area{width: 80%; margin: auto; text-align: center; color: #6d6d6d;}
.title-area > p { width: 100%; color: #6d6d6d; line-height: 1.6; letter-spacing: 1px; font-size: 16px;font-size: min(max(3.5vw, 14px), 16px);     }

.wrap-contact {padding: 50px 0px;position: relative; }
.contact-editor{ padding: 10px; text-align: center;}
@media (max-width:1024px) {
.contact-editor{ width: 90%; padding: 10px 20px; margin: auto;}
} 

@media (max-width:767.98px) {
.wrap-contact {padding: 50px 0px 0px 0px;}
.contact-editor{ width: 100%; padding: 10px;}
.title-area{width: 100%;padding:0px; text-align: left;}   
}

.contact-main {display: flex; padding:0px; margin-bottom: 60px;  }
@media (max-width: 768px) {
.contact-main {padding: 0px;margin-bottom: 15px; flex-direction: column;}
}
.contact-pic {width: 50%;padding:30px;position: absolute; right: -10%;  height: auto; background:#f8f8f8;box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);  }
.contact-title{ width: calc(100% - 10%); margin-bottom: 60px; display: flex; justify-content: space-between; align-self: flex-end;    word-break: keep-all;   word-wrap: break-word;}
.contact-title h3{  width: 50%; font-size:40px;  font-size: min(max(3.5vw, 24px), 40px); font-weight:500; font-family: 'MuseoModerno', cursive; position: relative;}
.contact-title span{font-size:20px;font-size: min(max(3.5vw, 18px), 20px);  font-weight:500;  display: flex; align-self: flex-end;}
@media (max-width: 1180px) {
.contact-title h3{  width: 100%; }
}

@media (max-width: 768px) {
.contact-title{ width: 100%; margin-bottom: 20px; padding:20px 0px; justify-content: flex-start; flex-direction: column;}
.contact-title h3:after { content: ""; display: block; width: 100%; height: 2px; margin: 0px auto;  position: absolute; bottom: 0;  background-color: #f15921;}
.contact-title span{ align-self: flex-start;}

}


.contact-line{ width: 100%; display: flex; flex-wrap: wrap; margin:0; padding:5px 10px;font-size: 0.875rem; align-content: center; align-items: center;   }
.contact-icon{ width: 50px; }
.contact-icon figure{ width: 50px;height:50px; margin: auto;   } 
.contact-txt{display: flex; flex-wrap: wrap; width:calc(100% - 50px - 40px); margin-left:40px; padding-bottom: 10px; position: relative;}
.contact-txt:after{ content: "" ; position: absolute; left:0px; bottom:0px; width: 100%; height:1px;background: #e4e4e4; }
.contact-fn{ display: flex;width: auto; margin-right:25px; font-size:20px;  font-size: min(max(3.5vw, 14px), 20px);  font-weight: 400; line-height: 1.75rem; letter-spacing:1px;  color: #6d6d6d;  }
.contact-fn a{ color: #6d6d6d;  }

.contact-pic.contact-line::last-child .contact-txt:after{ display:none!important; }

.contact-pic .contact-line:last-of-type .contact-txt:after { display: none;}
.contact-form { width: 50%;  padding: 20px 10px 20px 10px;  }

@media (max-width: 840px) {
.contact-pic {  right: 0; top:80px;  }
.contact-txt{ width:calc(100% - 50px - 10px); margin-left:0px; padding-bottom: 10px;  }
}

@media (max-width: 768px) {
.contact-pic {  width: 100%; order:2; right: auto; top:auto; padding:40px; position: relative; }
.contact-txt{ width:calc(100% - 50px - 40px); margin-left:40px;  }
.contact-form { width: 100%; padding: 0px 40px; }
}
@media (max-width: 767.98px) {
.contact-line{  justify-content: center;padding:5px 0px;  }
.contact-txt{ width:100%; margin:0px auto;  flex-direction: column; }  
.contact-icon{ width: 30px; }
.contact-icon figure{ width: 30px;height:30px; margin: auto;   } 
.contact-fn{margin:auto; font-size:14px;   }
}
 

.contact-form input,.contact-form option, .contact-form select{font-size: 1rem; line-height: 40px; font-weight:500; background: #fff; border:none; border-bottom: 1px solid #c0c0c0;}
.contact-form textarea{font-size:1rem; line-height: 40px; font-weight:500; background: #fff; border:none; border: 1px solid #c0c0c0;}
.contact-form select, .contact-form input, .contact-form option, .contact-form textarea, .contact-form input[type=radio] + label, .contact-form input[type=checkbox] + label { transition: all 0.5s; box-sizing: border-box; outline: none;}
.contact-form ul { margin: 2% auto; padding: 0px; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; }
.contact-form ul li { display: flex; flex-flow: wrap; width:calc(50% - 10px); margin: 15px 10px 15px 0px;}
@media (max-width: 920px) {
.contact-form ul {  margin: 2% auto;padding: 0px;  width:100%;}
.contact-form ul li {width: 100%; }
}
.contact-form ul li input { padding: 0 10px;  width: 100%; height: 40px;}
.contact-form ul li input::placeholder, .contact-form ul li textarea::placeholder { font-size:20px;  font-size: min(max(3.5vw, 14px), 20px);       font-weight:400;color: #000;}
.contact-form ul li select {padding: 0 0 0 5px; width: 100%;  height: 40px;line-height: 40px;font-weight:500;  color:#9d9d9d; }
.contact-form ul li select:focus option { color: #666;}
.contact-form ul li option {padding: 5px 10px;}
.contact-form ul li textarea {padding: 5px 10px;width: 100%; height: 100px; line-height: 20px;}
.contact-form ul li input:focus {background: #fff; color: #000;  border-bottom: solid 1px #f15921; }
.contact-form ul li textarea:focus {background: #fff; color: #000;  border: solid 1px #f15921; }
.contact-form ul li input:focus::placeholder, .contact-form ul li textarea:focus::placeholder { color: #f15921;  }
.contact-form ul li.width-full {  width:calc(100% - 10px);   }
.contact-form ul li font {font-size: 20px; letter-spacing: 0.05px; padding: 4px 0 10px 10px; margin: 0; width: 100%;}
.contact-form ul li label {font-size: 20px; letter-spacing: 0.05px; margin: 0;}
.contact-form ul li.width-2 { width: 20%;}
@media (max-width: 920px) {
.contact-form ul li.width-2 { width: 100%; }
}

.contact-form ul li.contact-msg {display: block;width: 100%;}
.contact-form ul li.contact-msg .item-title {padding: 0 10px; font-size:20px; font-size: min(max(3.5vw, 14px), 20px); font-weight:400; }
.contact-form ul.contact-btn  {border-bottom: solid 1px #dfdfdf;}
.contact-form ul.contact-btn li {display: flex; justify-content: center; margin: auto;}
@media (max-width: 600px) {
.contact-form ul.contact-btn li {max-width: 100%; }
}
.contact-form .contact-send { padding: 5px 20px; width: auto; max-width:200px;  height: auto !important; color: #fff; border-radius: 0px;background-color: #f15921; border: solid 1px #f15921;font-size: 30px; letter-spacing: 1px; font-family: 'MuseoModerno', cursive; position: relative;}
.contact-form .contact-send:hover { background-color:#000;   color: #fff;}
.contact-form .contact-clean{padding: 5px 0;height: auto !important;color: #707070;border-radius: 7px;background-color: #eee;border: solid 1px rgba(0, 0, 0, 0.1);}
.contact-form .contact-clean:hover { color: #fff;background-color: #555;}


.faq{  width: 100%;max-width: 90%; padding-bottom:10%; margin: auto; list-style: none;   }
.faq li { padding:30px 0px;  border-bottom: solid 1px #ebebeb;  margin-bottom:15px;  transition: all 0.3s linear 0s; }
.faq li:last-of-type{ border-bottom:none;}
.faq li:hover{ }

.faq li.active .answer {display: flex;flex-wrap: wrap; justify-content: flex-end;   max-height:100%;  transition: max-height 0.5s ease, padding-bottom 0.5s ease;    }
.faq li.active .question { color:#000; transition: color 0.5s ease;}
.faq li.active {   }
.faq li.active .question .faq-number{font-size: 90px;  transform-origin: center;  }
.faq .question {position: relative; width: 100%; padding:10px 20px; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center;  transition: all 0.3s linear 0s;}
.faq-number{width:25%; font-size:40px; font-size: min(max(3.5vw, 24px), 40px); font-weight:400; color:#f15921;  font-family: 'MuseoModerno', cursive;   transition: all 0.3s linear 0s; }
.faq-title{ font-size: 20px; font-weight:500; letter-spacing: 1px;transition: all 0.3s linear 0s; }

.faq-wrap{width: calc(100% - 25%); }
.faq-wrap p{font-size: 1rem; font-weight:400; line-height:2.15rem;letter-spacing: 1px;  color:#6d6d6d; }
.faq-wrap p strong{ color:#000; }

.faq li .answer {width: 100%; max-height: 0; padding:40px; display: none;color: #495057; overflow: hidden;  transition: max-height 0.5s ease, padding-bottom 0.5s ease;}
.faq li .answer a{ color:#3c9fcd; text-decoration: underline!important;  transition: all 0.3s linear 0s;}
.faq li .answer a:hover{ color:#70a84a;}

.faq .plus-minus-toggle { position: absolute;top: 50%; right: 0px;  z-index: 2;cursor: pointer; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%; background-color: transparent; transition: background-color .3s ease, transform .3s ease;}
.faq .plus-minus-toggle.collapsed { background-color:transparent; }
.faq .plus-minus-toggle:before,.faq .plus-minus-toggle:after { content: '';width: 21px;height:4px; right:15%; top: 45%; position: absolute; transform: translate(-50%, -50%);   transition: transform 500ms ease;}
.faq .plus-minus-toggle:after{transform: rotate(-45deg);  background:#f15921; }
.faq .plus-minus-toggle:before{ transform: rotate(45deg);  background:#f15921; }  
.faq .plus-minus-toggle.collapsed:after {transform: rotate(90deg); background:#000;}
.faq .plus-minus-toggle.collapsed:before {transform: rotate(180deg);background:#000;  }
.faq li.active .answer:before{ -ms-transform: translateY(-50%) scaleX(1); transform: translateY(-50%) scaleX(1);}
.faq li.active .answer:before { position: absolute; top: 50%; left: 0;  -ms-transform-origin: left; transform-origin: left; -ms-transform: translateY(-50%) scaleX(0); transform: translateY(-50%) scaleX(0); width: 3%;  height: 2px; background-color: #fff; transition: transform .3s ease;}

@media (max-width:767.98px) {
.t-section.bg-gray{background: #fff;} 
.faq{max-width: 100%;   padding:20px 0px 0px 0px; padding-right:0px;}  
.faq li { padding:0px;  }
.faq .question { font-size: 16px;}
.faq .question { padding:10px 34px 10px 0px; font-size:0.9375rem; }
.faq .plus-minus-toggle { right: -25px; top:20%; }
.faq-title{ font-size:14px;  }   
.faq-number{ font-size: 24px;  }   
.faq li.active .question .faq-number{font-size: 24px; }  
.faq-wrap{width: 100%; padding:20px 0px;} 
.faq li .answer { padding:0px; }   
.faq-wrap p{font-size: 14px; line-height: 1.5rem;  }   
}