/** font-family:=================================*/
 .f-400{font-weight: 400!important;}
.vText { -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }
.color-red{color: #9e2b2f;}
.color-white{color: #fff!important; }
.color-gray{color:#597990; }
.txt-stork { -webkit-text-stroke: 1px #333;  -webkit-text-fill-color: transparent;}
.txt-center{ text-align: center;}

.wrapper { position: relative; display: block; margin:0px  auto;  width: 100%; padding:0px 30px;  max-width: calc((100% - 60px)/12*12 + 60px)}
@media (min-width:1025px) {
.wrapper {padding: 0px 40px;  }
}
@media (min-width: 1401px) {
.wrapper { width: 100%;max-width: 90%; padding: 0px;  }
}
@media (min-width: 1920px) {
.wrapper { width: 100%;max-width: 100%;   padding-left: calc(50% - 720px)!important;  padding-right: calc(50% - 720px)!important;}
}



@media (max-width:767.98px) {
 .wrapper { width: 100%;max-width: 100%; padding: 0px 20px;  }   
}

.banner{ position: relative;  margin-top: 0px;  background-color: #000; }  
.banner .item {  position: relative; overflow: hidden;}

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

.main-slider { position: relative;  height: 50vw; min-height: 8vw;  margin-top: 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;}
.main-slider .slick-dots li button:before{background-color:#e60012 }
.main-slider .slick-dots{ position: absolute; bottom:60px;}
.slick-dotted.slick-slider { margin-bottom: 0;}

.slick-slide { position: relative;}
.slick-slide video { display: block; position: relative; top: 0px; left: 50%; min-width: 100%; height: 100%; transform: translate(-50%, 0); overflow: hidden; }
.slick-slide iframe { position: relative; pointer-events: none;   width: 100vw; height: 56vw;}
.slick-slide figure { position: relative; height: 100%; margin: 0; }

 
@media (max-width:840px) {
.main-slider { height: 58vw;   }
 }
@media (max-width:767.98px) {
.main-slider { height: 100vw; }
.slick-slide iframe {   width: 100vw; height: 100vw;}
.main-slider .slick-dots{ bottom:30px;}	
}
@media (max-width:280px) {
.main-slider .slick-dots{   bottom:20px;}		
}
.slick-slide .slide-image { opacity: 0; height:100vh; 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 40px; 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: 55%; position: absolute; left: auto; right:0px; bottom:20%;text-transform: uppercase;   z-index: 999;}
.slide-content-headings h2 { font-size:2.75rem; font-weight:700; line-height:3.5rem; color:#9a000b; margin:0px 0px 30px 0;letter-spacing: 2px; word-wrap: normal; text-shadow: 1px 2px 2px rgba(0,0,0,.2) }
 .slide-content-headings p { font-size:1.275rem; font-weight:400; line-height:2rem;color:#fff;  letter-spacing: 2px; word-wrap: normal; text-shadow: 1px 2px 2px rgba(0,0,0,.2)  } 
.slide-content-headings span { font-size:1.125rem; font-weight:400; line-height:1.375rem;color:#fff;  letter-spacing: 1px; word-wrap: normal; text-shadow: 1px 2px 2px rgba(0,0,0,.2)  } 
@media (max-width:1160px) {
.slide-content-headings h2 { font-size: 2rem; line-height:2.5rem;  margin-bottom: 20px; }
.slide-content-headings h3 { font-size: 2rem; line-height:2.5rem;}
.slide-content-headings p { font-size:1.15rem;  }
}
@media (max-width:840px) {
.slide-content { width: 90%;  top:15%;  left:30%; transform: translate(-30%, -15%);}
.slide-content-headings h2 { font-size: 2rem; margin-bottom: 20px; }
.slide-content-headings h3 { font-size: 2rem;  }
.slide-content-headings p { font-size:1.5rem;  }
}
@media (max-width:767.98px) {
.slide-content-headings { position: relative; padding:0px 20px;}	
.slide-content-headings h2 { font-size: 1.5rem;  line-height:1.5rem;  margin-bottom: 10px; }
.slide-content-headings h3 { font-size: 1.15rem;  line-height:1.5rem;   }
.slide-content-headings p { font-size:1rem;line-height: 1.35rem;  }
}

@media (max-width:320px) {
.slide-content-headings h2 { font-size: 1.375rem; line-height:1.375rem; margin: 10px 0px; }
.slide-content-headings span {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{  padding:0px; margin:0px auto; height: auto;  display: flex; flex-wrap: wrap;  }
.main-about{ position: relative; margin:0px; padding:0px; }
 
.block {width:50%; height: auto;margin: 0; padding: 6vw 5vw;}
@media (max-width: 1112px) {
.block {width:100%;margin: 0px; padding: 0px; }  
} 
 

.block-txt{width:100%; margin: auto; padding:50px 0px ;  color:#fff; position: relative;z-index: 9;   }
.block-txt p { font-size:1rem;  line-height:1.875rem; font-weight: 400;   margin-bottom:15px; color:#fff }
 
@media (max-width:840px) {
.block-txt{ margin:50px 0px; padding: 0px;}   
}
 
@media (max-width:640px) {
.block-txt p { font-size:0.9rem; line-height: 1.5rem;  }
}
 

.block-pic {width:50%; display: flex; flex-wrap: wrap; align-content: space-around; justify-content: flex-end; }
.card-box{ width: auto; height: auto;  border-radius:20px; overflow: hidden;  } 
@media (max-width: 1112px) {
.block-pic {width:100%; justify-content: center; padding-top: 2rem }
}
/*底圖*/
.card-bg{width: 100%; background-image: attr(src url); background-repeat: no-repeat; background-size:auto 100% ; background-position:left top;background-color: #000; position: absolute;z-index: -1; top:0; left: 0; right: 0; bottom: 0; line-height: 0;}

.icon-bg{ padding:4vw 5vw;  background: #9a000b; overflow: hidden; position: relative;}
.icon-box{ width: 50%;align-items: center;  }
.icon-box .title-2{padding-left: 2vw}

.icon-list{ width:100%; margin:auto; padding:10px 0px; display: flex; flex-wrap: wrap;  align-items: center; }
.icon-list li{width:calc(100%/3 - 20px); margin:auto ;   transition: all 0s ease 0s;position: relative; list-style: none} 
.icon-list li .item {width:100%; height: auto;  display:flex; flex-wrap: wrap; align-items: center;  justify-content: flex-start;   }

.icon-list li .inner{width:100%; padding:10px ; }
.icon-list li h3 {margin-bottom:30px; font-size:4rem; line-height: 1.5rem; font-weight:700; color: #fff;  } 
.icon-list li h3 em {font-size:1.875rem; font-weight:900;font-style: normal; vertical-align:top }  
.icon-list li p {font-size:1.125rem; line-height: 1.375rem; font-weight:500; color: #fff;letter-spacing: 3px }  
 @media (max-width: 840px) {
.icon-bg{ padding:4vw 0; }  
.icon-box{ width: 100%; }     
}
 
 @media (max-width: 640px) {
.icon-list li h3 {  font-size:2.875rem;  } 
.icon-list li .inner{ padding:0px ; }     
}
 @media (max-width: 320px) {
.icon-list li h3 {  font-size:1.875rem;  } 
.icon-list li h3 em {font-size:1rem;}  
  .icon-list li p {font-size:0.875rem;  letter-spacing: 0 }  

}

/***** product  **** 
=================================*/
.produt-wrap{width:100%; padding:40px 0px;margin:0px auto;position: relative  }
@media (max-width: 1440px) {
.produt-wrap{ padding:20px 0px;}
}
@media (max-width: 1024px) {
.produt-wrap{padding:50px 0px; }
}

@media (max-width: 768px) {
.produt-wrap{padding:80px 0px 0px 0px; }
}


/*----------------------------------------/
Product
---------------------------------------- */
 
.bg-product{width: 100%; background-image: attr(src url); background-repeat: no-repeat; background-size:100% auto; background-position:left top;background-color: #000; position: absolute;z-index: -1; top:0; left: 0; right: 0; bottom: 0; line-height: 0;}

@media (max-width:840px) {
.bg-product{ background-position:left -18vh; }  
}
@media (max-width:640px) {
.bg-product{ background-position:left  0px; }  
}
.product { margin:60px auto 30px auto; padding: 50px 0px;  }
.product li {width:100%; margin:auto; position: relative;  transition: all 0.3s linear 0s; list-style: none;transform: scale(0.75) }
.product li .item{width: 100%;  }
.product li .inner { position: relative;  width:100%; height: auto; padding:20px;  z-index: 9;    }
.product li h3 {  margin-bottom: 10px; position: relative; z-index: 5; font-size:1.375rem; font-weight: 600; color:#e4e1e1; text-align: center;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 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:#9a000b; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0);}
.product li p { font-size:1rem; font-weight: 400; line-height: 1.65rem;   color:#e4e1e1; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); }

.product li:hover h3,.product li:hover p{color:#9a000b; }
.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; background-color: #fff  }
.product li .photo figure{ width: 100%; padding-top:75%; 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)}

/*.slick-current*/
.product li.slick-current{transform: scale(1)}
.product li.slick-current h3,.product li.slick-current p { color: #fff;}
.product li.slick-current h3::after{ background:#e4e1e1!important;}

.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:60px auto 0px auto;  }
}

 @media (max-width:767.98px) {
.product { margin:60px auto 0px auto; padding: 0px 20px;  }
.product .slick-prev,.product .slick-next{  top:-30px; 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%;}    
}

.feature-wrap{width:100%; padding: 100px 0px;margin:0px auto;position: relative  }
@media (max-width:840px) {
 .feature-wrap{ padding: 30px 0px 0px 0px;}   
}


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

.feature { max-width: 960px;  margin: 30px auto; padding: 50px 0px; display: flex; flex-wrap: wrap; }
.feature li {width:calc(100%/2 - 20px); margin:auto 10px; position: relative;  transition: all 0.3s linear 0s; list-style: none; border-radius:15px; overflow: hidden; box-shadow: 5px 2px 10px rgba(255,255,255,.2); border: solid 1px rgba(255,255,255,.2);}

.feature li .photo { width: 100%; height: auto; padding: 0px;  overflow: hidden; background-color: #fff  }
.feature  li .photo figure{ width: 100%; padding-top:75%; height: 0; object-fit: cover;overflow: hidden; position: relative; transition: all 0.5s ease 0s;}
.feature  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;}
@media (max-width:840px) {
 .feature { max-width: 100%;  margin: 0px auto; padding:0px;  }   
 .feature li {width:calc(100%/2 - 30px); margin:auto 15px; }
 }
@media (max-width:640px) {
 .feature li {width:calc(100% - 30px); margin:15px auto; }

}


.title-block{ width: 100%;  max-width: 80%; margin:160px auto 20px auto; padding: 0px; display: flex; flex-wrap: wrap; align-items: center }
.title-block-title{ width: 40%;}
.title-block-inner{width: 60%; padding-left: 40px; border-left:solid 2px #fff;}

.title-block h2{  margin:30px auto; font-size: min(max(3.5vw, 1.375rem), 2.5rem); font-weight:700; color: #fff;letter-spacing: 2px;  }
.title-block p{  font-size: min(max(3.5vw, 0.875rem), 1rem); font-weight:400; color: #fff;}
.title-block strong{display: block}

 @media (max-width:840px) {
 .title-block{  max-width: 100%; margin:60px auto 20px auto;  }
}
 @media (max-width:640px) {
.title-block-title{ width: 100%; }
.title-block-inner{width: 100%; padding-left:0px; border-left:none;}
.title-block{text-align: center}

}


.brand{ padding: 100px 0px 300px 0px;margin:0px auto;position: relative }
.brand-list{ width: 100%; margin:30px auto; padding: 0px; display: flex; flex-wrap: wrap; justify-content: center; list-style: none}
.brand-list li{width:120px; margin:10px; padding:0px; transition: all 0s ease 0s;} 
.brand-list li .photo{  padding: 0px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; flex-direction: column; } 
.brand-list li .photo figure  {width:120px; height: 120px; position: relative;  z-index: 1; transition: all 0.5s ease 0s; transition: all 0.5s ease-in-out; background-color: rgba(255,255,255,.3);  box-shadow: 5px 2px 10px rgba(255,255,255,.2); border: solid 1px rgba(255,255,255,.2); }
.brand-list li .photo figure img { width: 100%;height: auto; padding: 0px;     }
.brand-list li:hover figure{  background-color: rgba(137,3,13,.2);  box-shadow: 5px 2px 10px rgba(0,0,0,.4); border: solid 1px rgba(137,3,13,.8);  }
 
.bg-brand{width: 100%; background-image: attr(src url); background-repeat:no-repeat; background-size:100%  auto; background-position:left bottom;background-color: #000; position: absolute;z-index: -1; top:0; left: 0; right: 0; bottom: 0; line-height: 0;}

@media (max-width:840px) {
.brand{ padding: 100px 0px 60px 0px; }
}

.news-wrap{width: 100%; margin: 0px; padding:50px 0px 10px 0px; background-color:#000 }
.news{ width:100%; margin: auto;display: flex; flex-wrap: wrap  }
.news-block{width:50%;}
.news-list { width: 100%; margin:40px auto auto auto;padding: 0px 20px; }

@media (max-width:840px) {
.news-wrap{ padding:0px 0px 10px 0px;}
.news-block{width:100%;}    
}


.news-list.first .news-pic { width: 100%;padding: 0 ;   overflow: hidden}
.news-list.first .news-box { width: 100%;padding: 20px;  }
.news-list.first  .item {   border-bottom:none;  }
 
.news-list li {width:calc(100% - 20px);height: auto;  margin:30px 10px 80px 0px; padding:0px 20px; list-style: none;position: relative; transition: all 0.3s linear 0s;}
.news-list .item { display: flex; flex-wrap: wrap;  padding:0px; border-bottom: 1px solid #555;   transition: all 0.3s linear 0s;position: relative;}
.news-list .news-pic { width:40%;padding: 0 ;   overflow: hidden}
.news-list .news-box { width: 60%;padding: 20px;  }
.news-list figure  {width: 100%; padding-bottom: 52.75%; height: 0; overflow: hidden; position: relative;  z-index: 1;  background: #1d1d1f;  transition: all 0.5s ease-in-out;}
.news-list figure img { width:100%; height: auto; object-fit: cover; margin: auto; display: block; border-radius:0px;   transition: all 0.5s ease-in-out;}
 .news-list .news-box .news-date { width: 100%; margin:0px;  display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;  -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.news-list .news-box .date { font-size: 12px; font-weight: 400; color: #fff;}
 .news-list .news-box  .new-tag  {padding: 2px  10px;border-radius: 15px;color: #fff;background-color:#89030d; display: block;	font-size: 12px;  }
.news-list .news-box .news-inner {width: 100%;}

.news-list .news-box h3 { margin: 12px auto;  color: #fff}
.news-list .news-box h3 a {  font-weight: 500; font-size: 1.375rem; font-size: min(max(3.5vw, 1rem), 1.375rem); color: #fff; white-space: wrap;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break:normal; overflow-wrap: break-word;  }
.news-list .news-box p {min-height:70px;font-size: 1rem; color: #fff; line-height: 1.375rem; letter-spacing: 0.75px;   margin:5px 0px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; word-break:normal;}
.news-list li:hover .item{ transform: scale3d(1.01, 1.01, 1.01); box-shadow: 2px 4px 16px rgba(0,0,0,.1);}

.news-list li:hover .item  h3 a ,.news-list li:hover .item  p ,.news-list li:hover .item .date {color:#89030d;}
.news-list li:hover:hover figure img { transform: scale(1.05);  opacity: 0.6; }
@media (max-width:840px) {
.news-list li {width:100%; margin:30px auto; padding:0px;}
}

@media (max-width: 640px) {
.news-wrap{display: none }  
.news-list li { margin:10px auto;  }    
.news-list .news-pic { width: 100%;  }
.news-list .news-box { width: 100%;padding: 0px;  }
.news-list .slick-dots{ margin: 0;left: 0!important;  }
}

 
.main-contact{   margin:0px; padding:0px; overflow: hidden;position: relative;z-index: 0;background-color:#000;  }
.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; padding: 40px 40px 40px 100px; display: flex; flex-wrap: wrap;    }
.contact-list{ width: 80%; margin:2% auto; padding:20px 0px 120px 0px;  display: flex; flex-wrap: wrap}
.contact-list li{ width:calc(100%/2);  margin:2% 0px;  display: flex; flex-wrap: wrap; color: #fff;}
.contact-list li .info-title{width: 26px; height: 26px;}
.contact-list li .info-title img{width: 26px; height: 26px;}
.contact-list li .info-txt{ padding-left: 6px; width: calc(100% - 26px - 6px);color: #fff}
.contact-list li .info-txt a{ color: #fff}

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

.contact-box{ width:calc(100% - 50%);align-items: center; background-color:#e9eaea; }
 @media (max-width: 840px) {
.contact-list{ width: 100%;padding:20px 0px 20px 20px;  }     
.contact-detail{width:100%;  padding: 20px;  }
.contact-box{ width:100%; }
}
 @media (max-width: 640px) {
.contact-list li{ width:100%;  margin:2% 0px; }     
}
 @media (max-width: 320px) {
  .contact-list{ padding:20px 0px 20px 0px;  }     
   
}

/* ==== 底圖 === */
.bg-contact { width: 50%;  background-image: attr(src url); background-repeat: no-repeat; background-size:100% auto; background-position:left bottom;  background-color: #000; 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 -20vh;}
}
@media(max-width:767.98px) {
.bg-contact {  background-position:right 5vw;  }
}
@media(max-width:640px) {
.bg-contact {  background-position:right 17vw;  }
}
@media(max-width:320px) {
.bg-contact {  background-position:right 45vw;  }
}
@media(max-width:280px) {
.bg-contact {  background-position:right 65vw;  }
}

.title-h2-sub{ width: 80%; margin: auto; padding:0px; }
.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 rgba(137,3,13,.2);  border-radius: 0px;}
.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:#89030d; 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:#89030d; font-size: 1.25rem; font-weight: 700; padding-right: 3px;position: absolute; left:0px; top:0px; }

.must{position: relative}
.must:after{content:"*";color:#89030d; 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: 0px auto;padding:30px 30px 0px 30px; }
.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:8px 0px; }   
.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: 0.9rem; }	
.contact-form ul li input::placeholder, .contact-form ul li textarea::placeholder { font-size: 0.9rem;  }
    
}
@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{  margin:10px  auto; font-size: min(max(3.5vw, 1.375rem), 2rem); font-weight:700; color: #fff;  }
.title strong{ display: block;}


.title-2 { width: 100%; margin:30px auto; padding: 0px;  text-transform:uppercase } 
.title-2 h2{  margin:10px  auto; font-size: min(max(3.5vw, 1.375rem), 2.5rem); font-weight:700; color: #fff;letter-spacing: 2px;  }
.title-2 span{  font-size: min(max(3.5vw, 0.875rem), 1rem); font-weight:700; color: #fff;}
.title-2 strong{ display: block;}

.title-3 {  width: 100%; max-width: 600px; margin:30px auto; padding: 0px;  text-transform:uppercase; text-align: center} 
.title-3 h2{  margin:30px auto; font-size: min(max(3.5vw, 1.375rem), 2.5rem); font-weight:700; color: #9a000b;letter-spacing: 2px;  }
.title-3 p{  font-size: min(max(3.5vw, 0.875rem), 1rem); font-weight:400; color: #222;}
.title-3 strong{ display: block;}
@media (max-width:840px) {
.title-3 {  margin:60px auto 30px auto;}  
 .title-3 h2{ letter-spacing: 1px;  }   
.title-3 p{ color: #fff;}    
}

.title-3-w {width: 100%; max-width: 600px; margin:30px auto; padding: 0px;  text-transform:uppercase; text-align: center} 
.title-3-w h2{margin:30px auto; font-size: min(max(3.5vw, 1.375rem), 2.5rem); font-weight:700; color: #fff;letter-spacing: 2px;  }
.title-3-w p{font-size: min(max(3.5vw, 0.875rem), 1rem); font-weight:400; color: #fff;}
.title-3-w strong{ display: block;}
@media (max-width:840px) {
.title-3-w {margin:0px auto 30px auto; } 
.title-3-w h2{margin:0px auto 10px auto;}
.title-3-w p{letter-spacing: -0.5px;}   
}


/*cms-btn Styles 樣式=================================*/ 
.btn-1 { cursor: pointer; width: 100%;  max-width: 220px; height: 3rem; line-height: 3rem; display: flex;  flex-wrap: wrap; justify-content: center; align-items: center; margin:20px auto; position: relative;background:#9a000b; border:solid 1px #9a000b;; z-index: 1;  }
.btn-1 span { font-size: 1rem; font-weight: 400;  color: #fff; text-transform: uppercase;letter-spacing: 3px;  text-align: center; padding:0px 10px;transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1;}
.btn-1 em {position: relative;width: 60px; height: 1px;  margin-right: 10px; transition: all 0.3s ease; background: #fff;  z-index:1;   }
.btn-1 i {  position: relative;  width: 10px!important; height: 10px!important; border-radius:99rem; background: #fff; z-index:1;   }

.btn-1:before,.btn-1:after {content: '';background:#1d1d1f;height:100%; width: 0;position: absolute;transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
.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-1:hover span{ color:#fff;}
.btn-1:hover em{background:#266433; transform: scaleX(0.5);}
.btn-1:hover i{background:#266433;  }
@media (max-width:767.98px) {
.btn-1 {  width: 100%;  max-width: 180px; height: 2.5rem; line-height: 2.5rem;  }   
.btn-1 em { width: 20px;   }
}

/*cms-btn Styles 樣式=================================*/ 
.btn-2 { cursor: pointer; width: 100%;  max-width: 220px; height: 3rem; line-height: 3rem; display: flex;  flex-wrap: wrap; justify-content: center; align-items: center; margin:20px auto; position: relative;background-color:transparent; border:solid 1px #fff;; z-index: 1;  }
.btn-2 span { font-size:1em; font-weight: 400;  color: #fff; text-transform: uppercase;letter-spacing: 3px;  text-align: center; padding:0px 10px;transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1;}
 
.btn-2:before,.btn-2:after {content: '';background:#1d1d1f;height:100%; width: 0;position: absolute;transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
.btn-2:before { top: 0; left: 0; right: auto;   }
.btn-2:after { bottom: 0; right: 0; left: auto; }
.btn-2:hover:before { width: 100%; right: 0; left: auto;}
.btn-2:hover:after {  width: 100%; left: 0; right: auto;}
.btn-2:hover{border:solid 1px #1d1d1f;}
.btn-2:hover span{ color:#fff;}
 
@media (max-width:767.98px) {
.btn-2 {  width: 100%;  max-width: 180px; height: 2.5rem; line-height: 2.5rem;  }   
}

 
/* 2.hover-filled-slide-down */
.hover-filled-slide-down::before { bottom: 0; left: 0; right: 0;  height: 100%; width: 100%;}
.hover-filled-slide-down:hover::before { height: 0%;}


/*cms-btn Styles 4====*/
.btn-btnbox {position: relative;z-index:1; display: flex;  justify-content: center;  width: 100%; height: auto;  margin: 0px;   padding: 30px 0px;transition: all 1s;}
.btnbox {  width: 100%; height: auto; display: flex;   margin: 0px;   padding: 30px 0px;   transition: all 1s; }
.hotNews {position: fixed; left: -472px; top: 18%; z-index: 9; height: auto; width: 100%; max-width: 502px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; transition: all 0.5s ease 0s;}
.hotNewsH {left: 0px; transition: all 0.5s ease 0s;}
.hotNewsC {width: calc(100% - 35px); height: 100%; max-height: 520px; overflow: scroll;  border-right: 15px solid  #b62f01; background-color: #fff; padding: 20px; box-shadow: 3px 3px 10px rgb(0 0 0 / 50%); border-radius:0px 15px 15px 0px;  }
.hotNewsC a:link, .hotNewsC a:visited {text-decoration:underline; color:#b62f01; transition: all 0.5s ease 0s;}
.hotNewsC a:active, .hotNewsC a:hover {text-decoration:underline; color:#000; cursor:pointer; transition: all 0.5s ease 0s;}
.hotNewsCC {  }
.hotNewsCC h3{ font-size: 1.5rem; font-weight: 500; margin-bottom: 10px; letter-spacing: 3px; }
.hotNewsCC p{ font-size:0.9rem; font-weight:400; line-height: 1.5rem; letter-spacing: 2px; color:#858585 }
.hotNewsB {width: 35px; height: 90px; font-size: 1rem; font-weight:700; letter-spacing: 1px; writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; *display: inline; *writing-mode: tb-rl; color: #fff; background-color: #b62f01; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); cursor: pointer; border-bottom-left-radius: 8px; border-top-left-radius: 8px;}
.hotNewsB::after {content: ''; height: 0; width: 0; border-color: #fff transparent transparent transparent; border-style: solid solid solid solid; border-width: 6px 4px; margin: 3px 0 0 -5px;-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg);}
@media only screen and (max-width: 576px) {
.hotNews {max-width: 90%;}
.hotNewsH {left: calc(-90% + 30px); transition: all 0.5s ease 0s;}
.hotNewsC {padding: 15px 15px 100px 15px;}

}
@media only screen and (max-width: 430px) {
.hotNewsC {padding: 10px 10px 100px 10px;}

}