/* CSS Document */

/** font-family:=================================*/

body{background:linear-gradient(to left, #d0d7df, #edeff2);}

.color-white{color: #fff!important;  }

.txt-stork { -webkit-text-stroke: 1px #c2c3c4;  -webkit-text-fill-color: transparent;}

.wrapper { position: relative; display: block; margin:0px auto; padding: 0px 20px; width: 100%;  max-width: calc((100% - 40px)/12*12 + 40px); }

@media (min-width:1025px) {

.wrapper { padding-right: 40px; padding-left: 40px;   }

}

@media (min-width: 1201px) and (max-width: 1400px) {

.wrapper { padding-right: 30px; padding-left: 30px; max-width: 100%;}

}

@media (min-width: 1401px) {

.wrapper { padding-right: 80px; padding-left: 80px; max-width: 1440px; }

}

.cell { display: none !important;}

.desk { display: block !important;}

@media (max-width:992px) {

.cell { display: block !important; border: 0;   }

.desk { display: none !important; }

}



.banner{background:#fff;  margin-top: 0px;position: relative; }

.banner .item { width: 100%; height:auto;position: relative; overflow: hidden;}

.banner .item.youtube{ width: 100%; height:100vh; }

@media (max-width:1024px) {

.banner .item.youtube{  height:60.5vh; }

}

@media (max-width:992px) {

.banner .item.youtube{  height:100vh; }

}

@media (max-width:768px) {

.banner .item.youtube{  height:75vh; }

}

@media (max-width:767.98px) {

.banner .item.youtube{  height:73vh; }

}

.slide-content-headings, .slick-slide::before, .slick-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden;}

.main-slider { position: relative; width: 100%; height:auto;  margin-bottom: 0; opacity: 0;  overflow: hidden;visibility: hidden; -webkit-transition: all 1.2s ease;  -moz-transition: all 1.2s ease; -o-transition: all 1.2s ease; -ms-transition: all 1.2s ease; transition: all 1.2s ease; }

.main-slider.slick-initialized { opacity: 1; visibility: visible;}

.slick-dotted.slick-slider { margin-bottom: 0;}

.slick-slide { position: relative;}

.slick-slide::before { background-color: #000000; opacity: 0.3; z-index: 1;}

.slick-slide video { display: block;  position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto;  -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.slick-slide iframe { position: relative; pointer-events: none;}

.slick-slide figure { position: relative; height: 100%; margin: 0; overflow: hidden; }

.slick-slide .slide-image { opacity: 0; height: 100%; background-size:cover; background-position: center;  -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease;}

.slick-slide .slide-image.show {  opacity: 1;}

.slick-slide .image-entity { height:100vh; opacity: 0; overflow: hidden; visibility: hidden;}

.slick-slide .loading { position: absolute; top: 44%; left: 0; width: 100%;}

.slick-slide .slide-media { animation: slideOut 0.4s cubic-bezier(0.4, 0.29, 0.01, 1);}

.slick-slide.slick-active { z-index: 1;}

.slick-slide.slick-active .slide-media {  animation: slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1);}

.slick-slide.slick-active .slide-content-headings { opacity: 1;  -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0);  -o-transform: translateY(0); transform: translateY(0);  transition: all 0.7s cubic-bezier(0.32, 0.34, 0, 1.62) 0.6s;}

.slide-content-headings { position: relative; padding:0px 0px 0px 30px; border-left: 3px solid #fff; opacity: 0; z-index: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;  -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px);  transform: translateY(100px);}

.slide-content { width: 50%; position: absolute; left: 10%; top:25%;text-transform: uppercase; /*transform: translate(-15%, -50%); */z-index: 999;}

.slide-content-headings h2 { font-size: 2.5rem; font-weight:700; line-height:3.275rem; color:#fff; margin:0px 0px 10px 0;letter-spacing:2px; word-wrap: normal; text-shadow: 1px 2px 2px rgba(0,0,0,.2) }

.slide-content-headings p {margin-bottom: 25px; font-size:1.275rem; font-weight:500; line-height:2rem;color:#fff;  letter-spacing: 1px; word-wrap: normal; text-shadow: 1px 2px 2px rgba(255,255,255,.2)  } 

.slide-content-headings h2 strong{display: block}

 @media (max-width:1024px) {

.slide-content-headings h2 { font-size: 2.125rem;line-height:2.5rem; }

.slide-content-headings p { font-size:1rem;line-height: 1.35rem;  }

}

@media (max-width:992px) {

.slide-content-headings { padding:0px 20px;}

.slide-content { width:80%; left:10%; top:20%; }

.slide-content-headings h2 { font-size: 3rem;line-height:3.75rem; margin:0px 0px 30px 0;}

.slide-content-headings p { font-size:1.375rem;  line-height:2rem; color: #fff } 

}

@media (max-width:640px) {

.slide-content-headings h2 { font-size: 1.75rem;line-height:2.5rem;margin-bottom: 10px; }

.slide-content-headings p { font-size:1rem;  line-height:1.5rem; color: #fff } 	

}

@media (max-width:420px) {

.slide-content-headings { padding:0px 10px;}

.slide-content-headings h2 strong{display: inline-block!important;}

.slide-content-headings h2 { font-size: 1.275rem;line-height:1.5rem;margin-bottom: 10px; }

.slide-content-headings p { font-size:.75rem;  line-height:1rem;  } 	

}

@media (max-width:280px) {

.slide-content-headings h2 { font-size:.9rem;line-height:1.5rem;margin-bottom: 10px; }

.slide-content-headings p {display: none } 	

}

@keyframes slideIn {

from { filter: url(blur.svg#blur); filter: blur(15px); -webkit-filter: blur(15px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius="10");  }

to { filter: url(blur.svg#blur); filter: blur(0);  -webkit-filter: blur(0); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius="10");}

}

@keyframes slideOut {

from { filter: url(blur.svg#blur);filter: blur(0);  -webkit-filter: blur(0);  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius="10");}

to {  filter: url(blur.svg#blur); filter: blur(15px);  -webkit-filter: blur(15px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius="10");}

}

@-webkit-keyframes zoomInImage {

from { transform: scale3d(1, 1, 1); }

to { transform: scale3d(1.1, 1.1, 1.1); }

}

@keyframes zoomInImage {

from { transform: scale3d(1, 1, 1); }

to { transform: scale3d(1.1, 1.1, 1.1); }

}

.zoomInImage { -webkit-animation-name: zoomInImage; animation-name: zoomInImage;}

@-webkit-keyframes zoomOutImage {

from { transform: scale3d(1.1, 1.1, 1.1); }

to {transform: scale3d(1, 1, 1); }

}

@keyframes zoomOutImage {

from { transform: scale3d(1.1, 1.1, 1.1); }

to { transform: scale3d(1, 1, 1); }

}



 

.main-wrap{ width: 100%; padding:0px; margin:0px auto; height: auto;  display: flex; flex-wrap: wrap;  }

.main-about{ position: relative; margin:0px; padding:0px;  background-color: #d8dfe5 }

.main-about::after{/*width:200%;*/ content: attr(data-content);color: #000; font-size: 180px; font-weight: 900; word-wrap: normal;font-family: "Raleway", sans-serif; letter-spacing: 3px; -webkit-text-stroke: 1px #c2c3c4;  -webkit-text-fill-color: transparent; left:10%; top:-5%; position: absolute; z-index:1;}

.main-about .animated { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;}

@media (max-width:1024px) {

.main-about::after{width:200%; font-size: 120px;top:0px; left:40%;   }

}

@media (max-width:840px) {

.main-about::after{width:200%; font-size: 120px;top:0px; left:20%;   }

}

@media (max-width: 767.98px) {

.main-about{ padding:40px 0px 0px 0px;background-size: 100% auto; background-position:0px top;}   

.main-about::after{width:100%; font-size: 80px;top:1%; left:0px;}

}

@media (max-width: 420px) {

.main-about::after{ font-size: 66px;}



}





.block {width:50%; height: auto;margin: 0; padding: 2vw 6vw;}

@media (max-width: 992px) {

.block {width:100%;margin: 0px; padding: 0px 40px; }  

} 

 @media (max-width:767.98px) {

.block { padding: 0px; }  

} 

.block-txt{width:100%; margin: auto; padding:50px 0px ;  display: block; position: relative;z-index: 9;   }

.block-txt p { font-size:1rem;  line-height:1.875rem; font-weight: 400;   margin-bottom: 10px; color:#3b3d40 }

.block-txt p strong{  display: block;  width: 100%; font-size: 1.313rem; line-height: 2rem; letter-spacing: 1.2px; font-weight:400;   margin-bottom: 10px; color: #fff; }

.post-btn{  margin-top:30px; }



 @media (max-width: 1280px) {

.block-txt p { font-size:0.9rem; }

}

@media (max-width:840px) {

.block-txt{ margin:50px 0px; padding: 0px 40px;}   

}

@media (max-width:767.98px) {

.block-txt{  padding: 0px 30px;}   

}

@media (max-width:640px) {

.block-txt p { font-size:0.9rem; line-height: 1.5rem;  }

}

 

@media (max-width:320px) {

.block-txt{  padding: 0px 20px;}  

 }



.icon-list{ width:100%; display: flex; flex-wrap: wrap;margin: 0px; padding: 0px; list-style: none}

.icon-list li{ width: calc(100%/3 - 20px);margin:10px; text-align: center;}

.icon-list li figure{width: 72px; height: auto; display: block; margin: auto }

.icon-list li h3{margin: 0px auto; font-size:1.375rem; font-weight:700; color: #003399;display: block}

.icon-list li p{margin: 0px auto; font-size:1rem; font-weight:700;}

 @media (max-width: 1280px) {

.icon-list li figure{width: 60px;   }

}



 @media (max-width:640px) {

.icon-list li{ width: calc(100%/2 - 20px);margin:10px; text-align: center;}

}



.block-pic {width:50%; height: auto;margin: 0; padding:0px;  position: relative;  }

 @media (max-width: 992px) {

.block-pic {width:100%; height: 420px; order: 2;  }

}

@media (max-width: 320px) {

.block-pic {width:100%; height: 360px; }

}

 



.card-box{ width: 100%; height: 100%;  } 

.card-2 { width: 100%;  background-image: attr(src url); background-repeat: no-repeat; background-size:  cover; background-position:left bottom;   position: absolute;z-index: 1; top:0px; left: 0; right: 0; bottom: 0; line-height: 0;  border-radius:0px 200px 0px 0px; overflow: hidden  }

 @media (max-width:1024px) {

.card-2{ margin: auto;  }

.card-2 img {  display: block; margin: auto;  }

}



 @media (max-width:992px) {

.card-2 { background-position:left top; }	 

}



  

/***** product  **** 

=================================*/

.produt-wrap{width:100%; padding:40px 0px;margin:0px auto; }

.produt-wrap .title-2 p { font-weight: 400; line-height: 1.875;}

@media (max-width: 1440px) {

.produt-wrap{ padding:20px 0px;}

}

@media (max-width: 1024px) {

.produt-wrap{padding:50px 0px; }

}

/*----------------------------------------/

Product

---------------------------------------- */

.bg-product{ background-image:url("../images/index/bg-product.jpg");background-color:#11214a; background-position: left bottom; background-size: 100% auto ; background-repeat: no-repeat;   }



.product { margin:60px auto 30px auto; padding: 0px 20px;  }

.product li {width:calc(100% - 30px); margin:auto 15px; position: relative;  transition: all 0.3s linear 0s; list-style: none; }

.product li .item{width: 100%;  }

.product li .inner-body { position: relative;  width:100%; height: auto; padding:20px;  z-index: 9;  }

.product li h3 { position: relative; z-index: 5; font-size:1.375rem; font-weight: 400; color: #000; text-align: center; letter-spacing: 1px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; padding-bottom: 10px; overflow-wrap: break-word; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); }

.product li h3::after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background:#fdb212; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0);}

.product li:hover h3{color:#fdb212 }

.product li:hover h3::after { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}

.product li .photo { width: 100%; height: auto; padding: 0px;  overflow: hidden;   }

.product li .photo figure{ width: 100%; padding-top:100%; height: 0; object-fit: cover;overflow: hidden; position: relative; transition: all 0.5s ease 0s;}

.product li .photo figure img { max-width: none; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-backface-visibility: hidden; backface-visibility: hidden;}

.product li:hover  .photo figure img { transform: scale(1.05)}

.product .slick-prev{ top:35%; left:-40px }

.product .slick-next{ top:35%; right:-40px }

@media (max-width:1366px) {

.product .slick-prev{  left:-20px }

.product .slick-next{ right:-20px }

}

@media (max-width:1280px) {

.product li h3 { font-size:1.375rem; margin-bottom: 10px; }   

.product .slick-prev{  left:-10px }

.product .slick-next{ right:-10px }

}



@media (max-width:1024px) {

.product li h3 { font-size:1.15rem; }   

 }



 @media (max-width:840px) {

.product li h3 {  color:#fff; }   	 

.product {margin:120px auto 0px auto;  }

}



 @media (max-width:767.98px) {

.product { margin:60px auto 0px auto; padding: 0px 20px;  }

.product .slick-prev,.product .slick-next{  top:-50px; bottom:auto;  width: 36px;  height: 36px;}

.product .slick-prev{ left:calc(100% - 50% - 50px);}

.product .slick-next{ right:calc(100% - 50% - 50px);}

.product li .inner-body { padding:10px;  }



}

@media (max-width:480px) {

.product { margin:60px auto 0px auto; padding: 0px 0px;  }

.product li {width:100%; margin:auto; }

.product li h3 { font-size:0.875rem; margin-bottom: 10px; }   

}

@media (max-width:280px) {

.product li {width: 100%;}    

}



/* ==== 底圖 === */

 .bg-light{background:linear-gradient(to left, #d0d7df, #edeff2);}

 .cms-slider-nav { width: 100%; height: auto; margin:0px auto; padding: 0px 60px;order: 1; position: relative ;z-index: 1}

.cms-slider-nav:after{content: ""; width: 100%; height: 1px; background-color:#6E6E6E; position: absolute;z-index:-1; left:0px; top:52%;}  

  

.slider-nav { width: 100%; margin: auto;  padding: 0px;position: relative; z-index: 2;}

.slider-nav li {width: 100%;  margin:15px auto; cursor: pointer; position: relative;z-index: 5;}

.slider-nav li .item { display:flex; flex-wrap: wrap; align-items: center;  justify-content: center; margin: auto; }

.slider-nav li figure{  width:70px;height:70px;  margin: auto; padding: 10px; border-radius:15px;background: #fff ;  }

.slider-nav span{  width: calc(100% - 90px); margin-bottom: 20px; font-size: 14px; color: #000;font-weight: 700; line-height: 1.125rem;}

.slider-nav li.slick-slide.slick-current{color: #202287; }

.slider-nav li.slick-slide.slick-current figure img{   filter:invert(100%) brightness(5) grayscale(1);}

.slider-nav li.slick-slide.slick-current figure{background-color: #004094}

.slider-nav li.slick-slide.slick-current .item {    }

.slider-nav li.slick-slide.slick-current  span{ color: #000066;  }

 @media (max-width:1140px) {

.cms-slider-nav {  padding: 0px 20px; }	

}

 

@media (max-width:840px) {

.cms-slider-nav { margin:20px auto; padding: 0px;  }

.slider-nav {  padding: 0px 20px;}	

.slider-nav li {font-size:1.5rem;  }

.slider-nav li.slick-slide.slick-current:after{ bottom: 0px;  }

}



@media (max-width:767.98px) {

.cms-slider-nav:after{display: none}  	

.slider-nav {padding: 0px;}

.slider-nav li figure{  width:60px;height:60px; padding:0px;margin: auto; border-radius:15px;background: #fff ;  }

.slider-nav span{  width: calc(100% - 70px); margin-bottom: 0px; font-size: 0.875rem;  }	

}

/*----------------------------------------/

產品清單頁  cms-main-product-item  

----------------------------------------*/

 .cms-slider-for { width:100%;  margin: 0px 0px 0px 10%; padding:0px!important; display: flex; justify-content: center; align-content: flex-start; flex-wrap: wrap;  order: 2;}

.application { width:100%; margin:0px auto;  padding:0px;  position: relative; }

.application li { width: 100%; margin:10px auto; padding:0px;  overflow: hidden;  position: relative; z-index: 1; list-style: none;  transition: all 0.3s linear 0s;  }

.application li .item{display: flex;flex-wrap: wrap;}

.application li figure{ width: 60%; padding-bottom:35.5%;  position: relative; height: 0; overflow: hidden; transition: all 0.5s ease 0s; background: #fff; border-radius:30px; }

.application li figure img {  width: 100%; max-height: 100%;  transition: all 0.3s;}

.application li figure:hover img { transform: scale(1.1);  opacity: .85; }

.application li .inner{width:40%; margin: auto  auto auto -10% ; padding:30px; position: relative;z-index: 99;  background-color:#fff; border-radius:30px;   } 

.application li .inner-txt{ width: calc(100% - 120px); margin-left: 20px; }

.application li .inner h3{ font-size:1.5rem; font-weight:500; line-height:2rem; color:#003399;   }

.application li .inner h3 a{ color:#000;  display: flex; flex-wrap: wrap;  }

.application li .inner p{ flex: 0 0 100%;   margin:5px 0px; padding: 0px;  font-size: 0.9rem; line-height: 1.5rem; text-align: left;  } 

.application li:hover figure{ box-shadow:0px 5px 8px rgba(0,0,0,.05);} 

.application li:hover .inner h3 a,.application li:hover .inner p{color:#000; }



.icon-img{ width: 80px; height: 80px; padding:  0px; position: relative;   transition: all 0.5s ease 0s;display: flex; flex-wrap: wrap; justify-content: center; align-items: center;   }

.icon-img:before { left:-1px; top:-1px;content: ""; width: calc(80px + 2px);  height: calc(80px + 2px); display: block;  border: dotted 4px #003399; border-radius:99rem; position: absolute;   animation: rotateIt 20s infinite linear; transform-origin: 50% 50%;}

.icon-img:after { opacity:.75;  right:0px; top:0px;content: ""; width: calc(80px + 2px);  height: calc(80px + 2px); display: block;  border: dotted 2px #dbeaff; border-radius:99rem; position: absolute;   animation: rotate2 36s infinite linear; transform-origin: 50% 50%;}

.icon-img img { width:60px; height:60px!important;  margin: auto; display: block; position: relative  }

 



.application .slick-prev,.application .slick-next{bottom: auto; top:1%; }   

.application .slick-prev{left:calc(100% - 25%);}

.application .slick-next{right:15%}

@media (max-width: 1024px) {

.application li { margin:40px 100px 40px 0px;}

.application li .inner-txt{ width:100%;  margin-left: auto;  }

 }



@media (max-width: 840px) {

.cms-slider-for {  margin:20px 0px;  }		

.application .slick-prev{left:calc(100% - 30%);}

.application li { margin:40px auto 40px 40px;}

.application li .inner{  margin: auto  auto auto -5% ; padding:20px;    } 

.application li .inner h3{ font-size:1.125rem;  }

.icon-img{ width: 60px; height: 60px;}

.icon-img:before {  width: calc(60px + 2px);  height: calc(60px + 2px);  }

.icon-img:after {  width: calc(60px + 2px);  height: calc(60px + 2px); }

.icon-img img { width:36px; height:36px!important; }	

}



@media (max-width:767.98px) {

.cms-slider-for {  margin:0px;  }		

.application .slick-prev,.application .slick-next{ top:-3%}   

.application .slick-prev{left:calc(100% - 50% - 50px);}

.application .slick-next{right:calc(100% - 50% - 50px);}	

.application li { margin:40px auto ;  border-radius:10px; }	

.application li .inner{  min-height:auto; padding: 10px 20px;   } 

.application li figure{ width: 100%; padding-bottom:57.725%; border-radius:0px; }

.application li .inner{width:100%; margin: auto ; padding:20px;border-radius:0px; } 

}

@keyframes rotate {

  0% { transform: rotate(0deg) }

  to { transform: rotate(360deg)  }

}

@keyframes rotate2 {

  0% { transform: rotate(0deg) scale(1) }

  to { transform: rotate(359deg) scale(1)  }

}



@keyframes rotateIt {

  to { transform: rotate(-360deg); }

}



/*----------------------------------------/

number-list

---------------------------------------- */

.number{padding: 40px; background-color: #fff;}

.number-list{ width: 100%; margin: 0px; padding: 0px; display: flex;flex-wrap: wrap; list-style: none}

.number-list li{ width: calc(100%/4 - 20px); margin: 80px 20px 80px 0px;  }

.number-list li .number-b{font-size:5rem; line-height: 3rem; font-weight: 900;color: #003399; margin-bottom: 30px;  }

.number-list li .number-t{ font-size: 1rem; line-height: 1.5rem; font-weight:500; color: #000; }

@media (max-width:1024px) {

.number-list li .number-b{font-size:4rem; line-height:2rem;   }	

}

@media (max-width:840px) {

.number-list li{ width: calc(100%/2 - 30px); margin:30px  auto;  }	

}

@media (max-width:767.98px) {

.number{padding: 40px 0px;}

.number-list li .number-b{font-size:3rem; line-height:2rem;   }	

.number-list li .number-t{ font-size: 0.875rem;  font-weight:400;  }

}

@media (max-width:767.98px) {

.number-list li{ margin:10px  auto;  }	

.number-list li .number-b{font-size:2rem;  }	

}

 /*----------------------------------------/

faq

---------------------------------------- */

.bg-background { width: 100%;  background-image: attr(src url); background-repeat: no-repeat; background-size:100% auto;background-position:left center; position: absolute;z-index:-1; top:0px; left: 0; right: 0; bottom: 0; line-height: 0;   } 

.faq-box{ position: relative; display: flex;flex-wrap: wrap; align-items: center; background: url("../images/index/bg-faq.jpg") no-repeat left top  ;background-size:100% auto; background-attachment: fixed; background-color:#002e46 }

.faq-block{ width: 50%; padding:100px 0px; }

@media (max-width:767.98px) {

.faq-block{ width: 100%; padding:20px 0px; }

}



.faq{  width: 100%; max-width: 75%; margin: auto; list-style: none; padding:20px 0px;  background-color: transparent;}

.faq li { margin:  auto;  padding: 0px ; display: flex; flex-wrap: wrap; border: solid 1px #fff; background:#fff; position: relative;  }

.faq li.active .answer {display: block; max-height:100%;  margin: 0px; padding:20px 30px; transition: max-height 0.5s ease, padding-bottom 0.5s ease;  }

.faq li.active .answer ul{width: 100%; margin: 0px; padding: 0px;}

.faq li.active .answer ul li{ border:none; font-size: 1.125rem; font-weight: 500;color: #000;}

.faq li.active h3.question { color:#000; background-color: #fff; transition: color 0.5s ease; box-shadow: 2px 1px 5px rgba(0,0,0,.35)}

.faq li.active { background-color:#fff; }

.faq li.active p{font-size: 1.125rem; font-weight: 500; color: #000;}

.faq h3.question {position: relative; width: 100%; padding:20px 0px 20px 20px;margin: 0px; cursor: pointer;font-size: 1.275rem;font-weight:700; color: #003399;background-color: #e9eff6;  transition: color 0.5s ease;}

.faq li .answer { display: none;color: #495057; font-size: 16px; line-height: 24px;width: 100%; max-height: 0; padding:15px 15px 25px 70px; overflow: hidden;  transition: max-height 0.5s ease, padding-bottom 0.5s ease;}

.faq li .answer a{ color:#003399; text-decoration: underline!important; }

.faq li .answer a:hover{ color:#70a84a;}

.faq .plus-minus-toggle { position: absolute;top:calc(50% - 25px); right: 10px;  z-index: 2;cursor: pointer; width: 40px; height: 40px; border-radius:99rem;border: solid 1px #e4e4e4;transition: background-color .3s ease, transform .3s ease;}

.faq .plus-minus-toggle.collapsed { background:#fff; }

.faq .plus-minus-toggle:before  { content: '';width: 14px;height:2px; right:40%; top: 47%; position: absolute; transition: transform 500ms ease;}

.faq .plus-minus-toggle:after { content: '';width: 14px;height:2px; right:18%; top: 47%; position: absolute; transition: transform 500ms ease;}

.faq .plus-minus-toggle:after{transform: rotate(45deg);  background:#000; }

.faq .plus-minus-toggle:before{ transform: rotate(-45deg);  background:#000; }  

.faq .plus-minus-toggle.collapsed:after {transform: rotate(-45deg); background:#003399;}

.faq .plus-minus-toggle.collapsed:before {transform: rotate(45deg); background:#003399;  }

.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;}





/*hover*/

.faq li:hover{border-color:#f8b500;  }

.faq li:hover h3.question {color:#f8b500; }

.faq li:hover .plus-minus-toggle.collapsed { background:#f8b500; }

.faq li:hover .plus-minus-toggle.collapsed:after {  background:#fff;}

.faq li:hover .plus-minus-toggle.collapsed:before { background:#fff;  }

 

@media (max-width:992px) {

.faq-box{  background-size:  auto;  background-position: center }	

.faq{max-width: 100%; margin: auto; padding: 20px; }   

.faq .question { font-size: 16px;}

.faq h3.question {  font-size:0.9375rem; }

.faq li.active .answer ul li{font-size:0.9375rem;}	

.faq li.active p{font-size:0.9375rem;}

 }



 

@media (max-width:420px) {

.faq .plus-minus-toggle { right: 0px; }    

.faq li .answer {padding:15px 15px 25px 60px;}

}



 

/*-------------------*/

/***** 最新消息 *****/

/*------------------*/

.brand{width: 100%; padding:40px 0px;background-color: #fff;}

.brand-list{ width: 100%; margin: auto; padding:0px 20px; display: flex; flex-wrap: wrap; list-style: none}

.brand-list li{width:100%; margin:10px; padding:0px; transition: all 0s ease 0s;border:solid 1px rgba(33,82,132,0); } 

.brand-list li a{  padding: 0px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; flex-direction: column } 

.brand-list li a figure  {width:200px; height: auto; position: relative;  z-index: 1; transition: all 0.5s ease 0s; transition: all 0.5s ease-in-out; }

.brand-list li a figure img { width: 100%;height: auto; padding: 0px;  filter:invert(50%) grayscale(1);}	

.brand-list li a h3 {width:100%; margin: 0px auto; padding:0px;  font-size:0.875rem; text-align: center; line-height: 1.5rem; letter-spacing: 1px; font-weight:400; text-decoration: none; color:#1d1d1f;  word-break: normal; word-wrap:normal;    }        

.brand-list li:hover figure img{ filter:none; }

.brand-list li a:hover h3{ color:#e50012;}

.brand-list li.slick-current  figure img{ filter:none; }

 

.brand-list .slick-prev{ top:40%; left:-20px; }

.brand-list .slick-next{ top:40%; right:-20px; }





@media (max-width: 768px) {

.brand-list li a figure  {width:100px; height: auto; }

}

@media (max-width: 640px) {

.brand-list li a figure  {width:80px; height: auto; }	

}



.main-contact{   margin:0px; padding:0px; overflow: hidden;position: relative;z-index: 0;background-color:#fff;  }

.contact-wrap{width: 100%;  margin: auto; display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; }

 

.contact-detail{width:50%;  margin:30px auto auto auto; display: flex; flex-wrap: wrap; align-items: center ;  }

.contact-box{ width:calc(100% - 50%);align-items: center; background-color:#e9eaea; }

 @media (max-width: 840px) {

.contact-detail{width:100%;  padding: 20px;  }

.contact-box{ width:100%; }

}

/* ==== 底圖 === */

.bg-contact { width: 50%;  background-image: attr(src url); background-repeat: no-repeat; background-size:100% auto; background-position:left bottom;  background-color: #004098; position: absolute;z-index: -1; top:0px; left: 0; right: 0; bottom: 0; line-height: 0;  }

 

@media(max-width: 840px) {

.bg-contact { padding: 100px 0px; width: 100%;background-position:right 11vw; background-size:50% auto;  }

}

@media(max-width:767.98px) {

.bg-contact {  background-position:right 5vw;  }

}





/*----------------------------------------/

title樣式5

----------------------------------------*/

.title-h2-sub{ width: 80%; margin: auto; padding: 0px 70px; }

.title-h2-sub h2{ margin-bottom: 30px; font-size: 2.75rem;  font-size: min(max(3.5vw, 1.75rem), 2.75rem);  line-height: 130%;font-weight: 700; letter-spacing: 3px; color: #fff; text-transform:uppercase}

.title-h2-sub span{  font-size: 1.375rem;font-size: min(max(3.5vw, 1rem), 1.375rem); line-height: 130%;font-weight: 400; color: #fff; text-transform:uppercase  }

.title-h2-sub p{ margin-top: 0px; font-size:1.125rem;  font-size: min(max(3.5vw, 1rem), 1.125rem); line-height:1.375rem; font-weight:400;color: #fff; }

.title-h2-sub strong{font-weight:900;}



 @media (max-width: 1180px) {

.title-h2-sub{ width: 100%;  padding: 0px 50px; }	 

}

 @media (max-width: 998px) {

.title-h2-sub{text-align: left; padding-left: 20px;} 

}

 @media (max-width: 840px) {

.title-h2-sub{ width: 100%;  padding: 0px 20px; }	 

}

 @media (max-width: 640px) {

.title-h2-sub{  padding: 0px; }	 

.title-h2-sub p{ line-height:1.375rem; }

}



/*----------------------------------------/

form

----------------------------------------*/

.contact-form{width:100%;margin: auto; padding:50px 0px;}

.contact-form input, .contact-form option, .contact-form select, .contact-form textarea { font-size: 1.15rem;background: #fff; border: 1px solid #b0c9ec;  border-radius: 8px;}

.contact-form select, .contact-form input, .contact-form option, .contact-form textarea, .contact-form input[type=radio] + label, .contact-form input[type=checkbox] + label {font-size: 1.15rem;transition: all 0.5s; box-sizing: border-box;outline: none;}

.contact-form ul {width: 100%; margin: auto;  padding:0px 60px; display: flex; flex-wrap: wrap; list-style: none; }

.contact-form ul li { width: calc(100%/2 - 20px); margin: 15px 10px 15px 10px;}

.contact-form ul li input { padding: 0 10px;width: 100%;height: 46px;   }

.contact-form ul li input::placeholder, .contact-form ul li textarea::placeholder { color:#b8bac6; font-size: 1.15rem;  }

.contact-form ul li select {  padding: 0 0 0 5px;  width: 100%; height: 46px; line-height: 40px;font-weight:400; color: #b8bac6;}

.contact-form ul li select:focus option {color: #666;}

.contact-form ul li option { padding: 5px 10px;}

.contact-form ul li textarea { width: 100%;height: 100px;line-height: 20px; padding: 5px 10px;}

.contact-form ul li input:focus, .contact-form ul li textarea:focus {background: #fff8de;color: #000;}

.contact-form ul li input:focus::placeholder, .contact-form ul li textarea:focus::placeholder {  color: #000;}

.contact-form ul li.width-full {  width: calc(100% - 20px); margin-right: 0px !important;}



.red{position: relative}

.red:after{content:"*";color:#a01f35; font-size: 1.25rem; font-weight: 700; padding-right: 3px;position: absolute; left:0px; top:0px; }



.must{position: relative}

.must:after{content:"*";color:#a01f35; font-size: 1.25rem; font-weight: 700; padding-right: 3px;position: absolute; left:5px; top:5px; }

@media (max-width: 1280px) {

.contact-form ul {  padding:0px 20px;  }

}

@media (max-width: 840px) {

.contact-form{ padding: 0px;}

.contact-form ul {  padding: 40px 40px 0px 40px;  }

}

@media (max-width: 768px) {

.contact-form ul  {width: 100%; margin: 15px 0px;padding: 0px 20px; }

.contact-form ul li {width: 100%; margin: 15px 0px;padding: 0px;}  

.contact-form ul li.width-full { width:100%;}

	

}



@media (max-width: 767.98px) {

.contact-form{ padding: 20px;}

.contact-form ul{ padding: 0px; }

.contact-form ul li {margin:5px 0px; }   

	

}

@media (max-width: 320px) {

.contact-form ul{ padding: 0px; }

}



 



 

.title {  width: 100%; margin:0px auto 30px 0px; padding: 0px; letter-spacing: 2px; text-transform:uppercase } 

.title h1,.title h2{  margin:10px  auto; font-size:1.75rem; font-weight:600; color: #003399;  }

.title em{ font-size:1rem; font-weight:700; color: #003399; display: block }

.title span{ font-size: 2.75rem; font-weight:700; color: #000;  }

.title strong{color:#003399;}



 @media (max-width:1160px) {

.title h1,.title h2{ font-size: 1.875rem;}

.title span{ font-size: 1.875rem; }	 

}



@media (max-width:840px) {

.title {width: 100%; margin: auto;}

.title h1,.title h2{  font-size: 1.5rem;}  

.title h2 span{margin-left: 10px;}

.title span{ font-size: 1rem;}       

}



@media (max-width:767.98px) {

.title { margin:0px auto;  }  

.title h2 span{ display: block; font-size: .875rem;margin-left: 0; }       

}

@media (max-width:320px) {

.title h1,.title h2{  font-size: 1.175rem;   }  

.title h3{ font-size: 1rem;   }   

}





.title-2 {  width: 100%; margin:0px auto 30px 0px; padding: 0px; text-align: center;  text-transform:uppercase } 

.title-2 h2{  margin:10px  auto; font-size: 2.5rem; font-weight:700; color: #003399; letter-spacing: 2px;  }

.title-2 h3{ font-size: 2.125rem; font-weight:500; color: #000; letter-spacing: 2px; }

.title-2 p{ margin: 0px auto; }

.title-2 strong{color: #000; }

 @media (max-width:1160px) {

.title-2 h2{ font-size: 1.875rem; }

.title-2 p{ font-size: 0.9rem; }	 

}

@media (max-width:840px) {

.title-2 {width: 100%; margin: auto;}

.title-2 h2{  font-size: 1.275rem;}  

.title-2 h2 span{margin-left: 10px;}

 }

@media (max-width:767.98px) {

.title-2 { margin:0px auto;  }  

.title-2 h2 span{ display: block; font-size: .875rem;margin-left: 0; }   

.title-2 p{ font-size: 0.75rem; }	 

	

}

@media (max-width:320px) {

.title-2 h2{  font-size: 1.175rem;}  

.title-2 h3{ font-size: 1rem;}   

}



.title-3 { width: auto; margin:0px auto 10px 0px; padding: 0px 0px 5px 0px; text-transform:uppercase;position: relative;   } 

.title-3:after { content: ""; width: 100%; height: 2px; background-color: #555; position: absolute; left:0px;bottom:0px;   } 

.title-3 h2{  margin:0px auto 10px auto; font-size: clamp(1.5rem, 2.3vw, 2.5rem); font-weight:600; color: #003399; letter-spacing: 1px;  }





 /***** btn **** 

=================================*/

.btn-btnbox {position: relative;z-index:9; display: flex;  justify-content: center;  width: 100%; height: auto; margin:15px 0px;  transition: all 1s;}  



/*scroller mousey Styles====*/

.scroll-downs { position: absolute; left: 50%; top: 85vh;  margin:0px auto; width :20px; height: auto;display: flex;  justify-content: center;transition: all 1s;z-index: 9;}

.mousey { width: 2px; padding: 5px 8px; height: 24px; border: 2px solid #fff; border-radius: 25px; opacity: 0.75; box-sizing: content-box; position: relative; }

/*.mousey:before{content:attr(data-content)!important; padding: 5px 0px; font-size: 0.875rem; font-weight: 700; color: #fff; text-align: center; writing-mode: vertical-lr;position: absolute;top:-100px; left:0px; height: 100px;}*/

.scroller { width:4px; height: 8px; border-radius: 25%; background-color:#fff; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite;}



@media (max-width:1160px) {

.scroll-downs { display: none; }    

}





@keyframes scroll {

0% { opacity: 0; }

10% { transform: translateY(0); opacity: 1; }

100% { transform: translateY(15px); opacity: 0;}

}

/*.btn-1

=================================*/

.btn-1 {position:relative; border: none; cursor: pointer; margin: 20px auto; padding:12px 20px; background:#003399; border-radius:30px; overflow: hidden; }

a.btn-1 { color: #fff;}

a:active .btn-1 {background-color:#004198;}

.btn-1 span { color: #fff;font-weight:700; position: relative;z-index:1; transform-origin: center left; transition: color 0.3s ease; }

.btn-1:before,.btn-1:after {content: '';background:#fdb212;height:100%; width: 0;position: absolute;  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);border-radius:30px; overflow: hidden; }

.btn-1:before { top: 0; left: 0; right: auto;}

.btn-1:after { bottom: 0; right: 0; left: auto;}

.btn-1:hover:before { width: 100%; right: 0; left: auto;}

.btn-1:hover:after { width: 100%; left: 0; right: auto;}



 

/*.btn-02

=================================*/

.btn-02{ cursor: pointer; width:200px; height:2.75rem; padding:0px 30px 0px 50px;margin: 0px; line-height:2.75rem; display: flex; align-items: center; position: relative; box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.34); background-color:#003399; z-index: 1; border-radius:30px; overflow: hidden; }

.btn-02 span {display: flex;  transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1; font-weight: 700; color: #fff;}

.btn-02 em {position: absolute;width:32px; height:32px;right:5px;top:5px;border-radius:99rem; transition: all 0.3s ease; background: url("../images/icon/arrow-right-f.svg") no-repeat center; background-size:22px;  background-color: #fff;  z-index:1;  }

.btn-02:before,.btn-02:after {content: '';background:#fdb212;height:100%; width: 0;position: absolute;  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}

.btn-02:before { top: 0; left: 0; right: auto;  }

.btn-02:after { bottom: 0; right: 0; left: auto; }

.btn-02:hover:before { width: 100%; right: 0; left: auto;}

.btn-02:hover:after { width: 100%; left: 0; right: auto;}

.btn-02:hover span{color: #fff;}

.btn-02:hover em{ transform:translateX(5px);}

@media (max-width: 320px) {

.btn-02{  width:100%;  }   

.btn-02 span { font-size:.9rem;}   

}