/* ==== product Main CSS === */
.banner {margin:-3% 0px 0px 0px; position: relative; padding: 0px 0px 50px 0px;z-index: 1;  }
 .banner::after {  content: "";  position: absolute; z-index:-1; width: 100%; height: calc(100% + 180px); top: -180px; right: 0; background: url(../images/index/bg.jpg) repeat #f8f8f8; background-size: 100px; transition: 0.8s 1s;}
 /*---------------------------------
h1
----------------------------------------*/

.mobile-navbar{display: none;}
@media (max-width:991.98px) {
.mobile-navbar{display: block;}

}

.slogan {width:50%; height: auto;  margin: auto; position: absolute; top:5%; left:9%;  z-index: 1;}   
.slogan::before{ content: attr(data-content);color: #000; font-size: 120px; font-weight: 500;  letter-spacing: 3px;font-family: 'MuseoModerno', cursive; writing-mode: vertical-lr;position: absolute; left:5%; top:0;  transform:rotate(180deg);   }
.slogan::after{ content: "" ; width: 2px; height:260px; background-color: #000;position: absolute; left:30%; top:-18%; transform:rotate(45deg);  }
.slogan .txt-content{ width: 50%; margin: auto; padding: 0px; }
.slogan .txt-content h1{width: 60%; margin:80px 0px 50px 80px; padding:0;font-size:40px; font-size: min(max(10vw, 20px), 40px);line-height:3.25rem; font-weight:500; text-align: left;  letter-spacing: 1px; color:#000;  }
 @media (max-width: 1440px) {
.slogan {transform: scale(.85);  top:12%; left:5%; }
.slogan::after{  left:35%; top:-18%;   }
.slogan .txt-content h1{  width: 70%;margin:80px 0px 50px 90px; }
}

@media (max-width: 1366px) {
.slogan .txt-content{ width: 70%; margin: auto; padding: 0px 0px 0px 50px; }
}
@media (max-width: 1280px) {
.slogan { top:12%; }   
}
@media (max-width: 1024px) {
.slogan { left:2%;  transform: scale(.75)} 
.slogan::after{  left:40%; top:-10%;   }
.slogan .txt-content h1{  width: 80%;margin:100px 0px 50px 110px; }
}
@media (max-width:992px) {
.slogan {width:100%; position: relative;} 
 .slogan::before{display: none;}
.slogan::after{display: none;  }
.slogan .txt-content{ width: 100%; margin: auto; padding: 0px; }
.slogan .txt-content h1{width: 100%; margin:80px auto 20px auto; text-align: center;color: #f15921; }    
}
@media (max-width:991.98px) {
 .box-slider .slogan {display: none}   
  
}
@media (max-width:767.98px) {
.slogan{padding-top: 100px; left:0px; top:0px;  transform: scale(1)}    
 }
@media (max-width:575.98px) {
.slogan{padding-top: 60px;  }    

}
/*---------------------------------
best-wrap
----------------------------------------*/
.box-wrap{width: 100%; padding:0px; display: flex; flex-wrap: wrap; position: relative; }
/*左右寬度*/

.box-slider{width: 50%; margin: 0px; padding:0px; }
@media (max-width: 1440px) {
.box-wrap{margin-top: -50px}
}
@media (max-width:991.98px) {
.box-slider{width: 100%; margin: 0px auto; padding:0px; }
.box-wrap{ flex-direction: column-reverse; margin-top: 0;}

}
 

/*---------------------------------
.圖片輪播
----------------------------------------*/
.slider-for{ width: 100%; margin: 0px; padding: 0px; }
.slider-for .slick-slide {width: 100%; height: 100%;  display: flex; justify-content: center; align-items: center;  }
.slider-for .round-content{display: none;}

.img-item { width:100%;  height:100%;  padding:0px 40px 0px 30px; margin:auto 0;  position: relative;   }
.img-item figure { width:100%; margin:50px auto auto auto;  }
.img-item figure img { max-width: 100%;height: auto; margin: auto auto auto 30px;  position: relative; z-index: 1; }
.img-item figure::before{content: ""; width: 43%; height:90%; display: block; position: absolute; left:-10%; top:-4%;  border: solid 5px  #f15921; ; z-index: -1;}
.img-item figure::after{  width:200%; content: attr(data-content);color: #fff; font-size: 180px; font-weight: 500; word-wrap: normal; font-family: 'MuseoModerno', cursive; left:-96%; top:10%;position: absolute; z-index:0;}
@media (max-width: 1440px) {
.img-item figure { width:90%;  margin:110px 0px auto -20px;  }
.img-item figure::before{  height: 570px; }
}
@media (max-width: 1366px) {
.img-item figure::before{  height: 540px; }
}
@media (max-width: 1280px) {
.img-item figure {  margin:100px auto auto auto; padding:50px 0px; }
.img-item figure img { margin: auto auto auto -20px;  }
}

@media (max-width: 1180px) {
.img-item figure img{   margin: 20px auto auto -20px; }
.img-item figure::before{  height: 500px; }
}

@media (max-width: 1024px) {
.img-item figure img{ margin:40px auto auto -20px; }
.img-item figure::before{  height: 420px; }
}
 
@media (max-width:991.98px) {
.slider-for{ margin-top: -270px;}   
.img-item { width:100%;  height:auto;  padding:0px;  }
.img-item figure { margin:0px auto; padding: 0px; }
.img-item figure::before{ display: none; }
.img-item figure img{margin: auto;}
}
@media (max-width:575.98px) {
.slider-for .round-content{display: block; margin-top: 130px;}
 .img-item { margin-top: -120px;  padding:0px;  }
   
}

@media (max-width:430px) {
 .img-item { margin-top: -80px;}
   
}

/*---------------------------------
.circle
----------------------------------------*/
.box-nav{width: 50%; margin: 0px 0px 0px -150px;   }
  @media (max-width: 1680px) {
.box-nav{  margin: 0px 0px 0px -50px;}
}
@media (max-width: 1440px) {
.box-nav{ padding-top:30px;  transform: scale(.85)}
}
@media (max-width: 1280px) {
.box-nav{   transform: scale(.8)}
}
@media (max-width: 1180px) {
.box-nav{   transform: scale(.75)}
}
@media (max-width: 1024px) {
.box-nav{  padding-top:0px;  transform: scale(.65)}
}
@media (max-width:992px) {
.box-nav{width: 100%; margin: 0px auto;  padding-top:50px; transform: scale(.85) }
}
@media (max-width:767.98px) {
.box-nav{  padding-top:0px;;margin-top:-10%;}
}
@media (max-width:575.98px) {
.box-nav{ transform: scale(1)!important;padding:0px; margin:0px auto;   }  
}

.round-block{ position: absolute; right:auto; top:0px; border-radius: 50%; }
.round-slider .slick-list { width: 640px; height: 640px;  margin: auto; border-radius: 50%;   padding:0px;  background-color:transparent;  position: relative;}

/*---------------------------------
.box-nav round-slider
----------------------------------------*/
.round-slider{position: absolute;left:-20px; top:20px; display: flex; flex-wrap: wrap;justify-content: center;  align-items: center; }
.round-slider li { position: absolute; left:0; top:0;   transition: all 0s linear;  }
.round-slider .slick-slide { position: relative;  padding: 40px; outline: none;   }
.round-slider .slick-track { height: 100%;}
.round-slider .slick-prev,.round-slider .slick-next{ width: 50px; height: 50px;top:auto; bottom:3%;}
.round-slider .slick-prev{left:calc(52% - 50px)}
.round-slider .slick-next{right:calc(47% - 50px);}

@media (max-width: 1520px) {
.round-slider .slick-slide { margin-top:30px;   }
}


  @media (max-width:992px) {
.round-slider .slick-slide { margin-top:50px;   }
.round-slider .slick-list {margin-left: auto;}    
.round-slider .slick-prev{left:calc(52% - 50px); bottom: -20px;}
.round-slider .slick-next{right:calc(48% - 50px); bottom: -20px;}
}
@media (max-width:720px) {
 .round-slider .slick-list {transform: scale(.75);   }

 } 
@media (max-width:575.98px) {
.round-block{ position: absolute; right:auto;  top:100px; }
.round-slider .slick-track { }
 .round-slider{ width: 320px; height: 320px; margin:0px auto; padding:0px;  overflow: hidden; border-radius:50%;  left: auto; }       
.round-slider .slick-list { width: 300px; height: 300px; transform: scale(1);  overflow: hidden; pointer-events: none; }
.round-slider li { position: absolute; left:auto; top:0; }   

.round-slider .slick-prev,.round-slider .slick-next{ top:50%; bottom:auto;}
.round-slider .slick-prev{left:50px}
.round-slider .slick-next{right:50px;}
.round-slider .slick-prev:before  { content: "";width: 30px; height:30px;  margin: auto;  display: block; background: url("../images/icon/arrow-left.svg") no-repeat center top;  }
.round-slider .slick-next:before { content: ""; width: 30px; height: 30px;  margin: auto;  display: block; background: url("../images/icon/arrow-right.svg") no-repeat center top; }  
} 
 
 

/*---------------------------------
.中間文字區塊
----------------------------------------*/
.round-slider li.slick-current.slick-active{    }
.round-slider li.slick-slide:not(.slick-current) .slider-paging-number  button:before {background-color:#000;} 
.round-slider li.slick-slide.slick-active {  }
.round-item{width: 100%; height: 100%; padding: 30px 0px 50px 0px; margin: auto;  display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;  }
.round-title{  width: 100%; padding: 10px;margin: auto auto 20px auto; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; flex-direction: column;  }
.round-number{margin-bottom: 40px; font-size: 90px; text-align: center; font-family: 'MuseoModerno', cursive; }
.round-number-title{ color:#f15921; font-size: 30px;}
.round-sub{ width: 100%; margin: auto; display: flex; flex-wrap: wrap; justify-content: center;  }
.round-sub-title{ width:50%; padding: 0 20px; margin: 5px auto;display: flex;justify-content: center; font-size: 20px; letter-spacing: 3px; position: relative;}
.round-sub-title:before{  content: ""; display: block; position: absolute;width: 1px!important; height:100%!important; background: #eee; left:0px; top:0px; }
.round-sub-title:last-of-type:after{  content: ""; display: block; position: absolute;width: 1px!important; height:100%!important; background: #eee; right:0px; top:-5px; }
.round-content{width: 100%; max-width:85%; margin: auto; padding:20px; color:#6d6d6d;}
.round-content p{ font-size: 16px; letter-spacing: 2px; }
@media (max-width:575.98px) {
.round-item{width: 100%; height: 100%; padding: 0px; margin:  auto;  align-items: center;  }
.round-number{ font-size: 40px;margin-bottom: 0px;  }
 .round-title{ padding: 10px;margin:0px auto;   }   
.round-number-title{ font-size: 20px;}
.round-sub { text-align: center;}
.round-sub-title{ width:100%; padding:0px; margin:0px auto 5px auto;  font-size: 14px; letter-spacing: 1px; }
.round-sub-title:before,.round-sub-title:last-of-type:after{display: none}
 .round-content{display: none;}   
}
 



 
.round-area  { width:100%; display: flex; flex-wrap: wrap; justify-content: center;  }
.round-area .circleBox .stroke {  position: absolute; top: -8px;  left: 0;  width: 100%; height: 100%;  -webkit-transform-origin: center center; transform-origin: center center; stroke: #f15921;  stroke-width: 2px; fill: none;}
.round-area .circleBox .stroke.ani circle {  -webkit-transition: all 0.6s; transition: all 0.6s;}
.round-area .circleBox .stroke circle {  fill: none; stroke: #f15921;  stroke-width: 2; stroke-dashoffset: 0; -webkit-animation-iteration-count: 1;  animation-iteration-count: 1; -webkit-animation-timing-function: linear; animation-timing-function: linear;  -webkit-transition: all 0s;  transition: all 0s;}
.round-area .circleBox .bg_stroke {  position: absolute;  top: -8px; left: 0;  width: 100%;  height: 100%;  -webkit-transform-origin: center center; transform-origin: center center; stroke: #dedede; stroke-width: 2px;fill: none;}
.round-area .circleBox .bg_stroke.ani circle {  -webkit-transition: all 0.6s;  transition: all 0.6s;}
.round-area .circleBox .bg_stroke circle { fill: none; stroke: #dedede; troke-width: 2; stroke-dashoffset: 0;  -webkit-animation-iteration-count: 1;  animation-iteration-count: 1;   -webkit-animation-timing-function: linear;  animation-timing-function: linear;  -webkit-transition: all 0s;  transition: all 0s; /*stroke-linecap: round;*/  /*stroke-linejoin: round;*/  /* animation-duration: 100s; */}

 .round-area .round-nav {   -ms-flex-negative: 0; flex-shrink: 0;  margin:auto;  padding:50px;  position: relative;  width: 720px; height: 720px; display: -webkit-box;  display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center;  justify-content: center;}
.round-area .round-nav .round-dot  { position: relative; width: 100%; height: 100%; border-radius: 50%; background:#fff;}
.round-area .round-nav li { list-style: none;  position: absolute; bottom: 50%; left: calc(50% - 64px);  height: 50%;  width: 128px; -webkit-transform-origin: center bottom; transform-origin: center bottom;  z-index: 1;}
.round-area .round-nav li.noData .dot-box::after {background-color: #aaaaaa;}
.round-area .round-nav li.hasData { cursor: pointer;}
.round-area .round-nav li.hasData:hover .title a { }
 
.round-area .round-nav li.hasData.current .dot-box::after {background-color: #fff;  -webkit-transition-delay: 0.4s; transition-delay: 0.4s;}
.round-area .round-nav li.hasData.current .dot-box span { background-color: #f15921;color: #fff; -webkit-transition-delay: 0.4s;  transition-delay: 0.4s;  -webkit-transform: scale(1); transform: scale(1);}
 .round-area .round-nav .item { position: relative; z-index: 1;   padding: 0px 0px 10px 0px;  margin: 0 auto;  height: 100%;  width: 100%;}
.round-area .round-nav .dot-box { position: absolute; top: 0px;  left: 50%;  width: 85px; height: 85px;  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: -webkit-box; display: -ms-flexbox;  display: flex;  -webkit-box-align: center;  -ms-flex-align: center; align-items: center;  -webkit-box-pack: center;  -ms-flex-pack: center;  justify-content: center;}
 
.round-area .round-nav .dot-box::after { content: "";  position: absolute; top: 50%; left: 50%; margin-top: -4px; margin-left: -4px; width: 8px; height: 8px; background-color: #555; border-radius: 50%; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
.round-area .round-nav .dot-box span { position: relative;  display: block; width: 38px;  height: 38px; padding-top:3px; text-align: center;  border-radius: 50%; background-color: #f8f8f8; -webkit-transition: all 0.4s ease;  transition: all 0.4s ease;   -webkit-transform: scale(1); transform: scale(1); font-family: 'MuseoModerno', cursive; }
.round-area .round-nav .title {  position: absolute; top:-10px;left:-80px; font-size: 14px; font-weight: 400; text-align: center; line-height: 1.2; color: #6d6d6d; letter-spacing: 3px; max-width: 135px; }
.round-area .round-nav .title a { color: #6d6d6d; -webkit-transition: all 0s;  transition: all 0s;}
.round-area .round-nav .dot-box::after { content: ""; position: absolute; top: 50%; left: 50%; margin-top: -3px;margin-left: -3px;  width:6px; height:6px; background-color: #555; border-radius: 50%;  -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
 
.round-area .round-nav li:nth-child(1) .title { top:-45px;left:25%; }
.round-area .round-nav li:nth-child(2) .title { left:-50px; }
.round-area .round-nav li:nth-child(3) .title { top: -20px; left: -80px; }
.round-area .round-nav li:nth-child(4) .title { top: -20px;}
.round-area .round-nav li:nth-child(5) .title { left:-80px; }
.round-area .round-nav li:nth-child(6) .title { top:25px;left:0; }
.round-area .round-nav li:nth-child(7) .title { left:auto; right: -90px; }
.round-area .round-nav li:nth-child(8) .title { left:auto; right: -40px; }
.round-area .round-nav li:nth-child(9) .title { left:auto; right: -50px; }
.round-area .round-nav li:nth-child(10) .title { left:auto; right:-80px; }
.round-area .round-nav li:nth-child(odd)  .dot-box::after { display: none;}
.round-area .round-nav li:nth-child(even) .dot-box::after { display: none;}
 
.round-area .round-nav li:nth-child(2) .dot-box span,.round-area .round-nav li:nth-child(2).hasData.current .dot-box span  { -webkit-transform: rotate(36.8deg); transform: rotate(36.8deg);  }
.round-area .round-nav li:nth-child(3) .dot-box span,.round-area .round-nav li:nth-child(3).hasData.current .dot-box span  { -webkit-transform: rotate(70.8deg); transform: rotate(70.8deg);  }
.round-area .round-nav li:nth-child(4) .dot-box span,.round-area .round-nav li:nth-child(4).hasData.current .dot-box span  { -webkit-transform: rotate(110deg); transform: rotate(110deg);  }
.round-area .round-nav li:nth-child(5) .dot-box span,.round-area .round-nav li:nth-child(5).hasData.current .dot-box span  { -webkit-transform: rotate(145deg); transform: rotate(145deg);  }
.round-area .round-nav li:nth-child(6) .dot-box span,.round-area .round-nav li:nth-child(6).hasData.current .dot-box span  { -webkit-transform: rotate(180deg); transform: rotate(180deg);  }
.round-area .round-nav li:nth-child(7) .dot-box span,.round-area .round-nav li:nth-child(7).hasData.current .dot-box span  { -webkit-transform: rotate(-145deg); transform: rotate(-145deg);  }
.round-area .round-nav li:nth-child(8) .dot-box span,.round-area .round-nav li:nth-child(8).hasData.current .dot-box span  { -webkit-transform: rotate(-110deg); transform: rotate(-110deg);  }
.round-area .round-nav li:nth-child(9) .dot-box span,.round-area .round-nav li:nth-child(9).hasData.current .dot-box span  { -webkit-transform: rotate(-70.8deg); transform: rotate(-70.8deg);  }
.round-area .round-nav li:nth-child(10) .dot-box span,.round-area .round-nav li:nth-child(10).hasData.current .dot-box span  { -webkit-transform: rotate(-36.8deg); transform: rotate(-36.8deg);  }
@media (max-width:575.98px) {
.round-area .round-nav { transform: scale(.6); margin-top: -15%;  }
.round-area .round-nav .title { display: none; }
.round-area .round-nav .round-dot li .dot-box span  {  width: 60px!important;  height: 60px!important; font-size: 20px; padding-top: 10px;  }
}
@media (max-width:420px) {
.round-area { transform: scale(.9); margin-top: -10%;  }    
}