.arrowBox .arrow, .arrowBox .arrow:before , .service .circleContentBox, .service .circleContentBox .product-item .icon, .service .circleContentBox .product-item li:before { -webkit-transition: all 0.4s ease; transition: all 0.4s ease}
.titleBox { position: relative;  margin-bottom: 40px;text-align: center;line-height: 1.6}
.titleBox .title-ch { font-size: 2rem; letter-spacing: 0.05em;color: #3f3f3f}
  

@media (max-width:640px) {
.titleBox .title-ch { font-size: 1.75rem;  }
}
.titleBox .title-ch:after { content: ""; display: block; width: 145px;height: 12px;  margin:20px auto 0; background: -webkit-gradient(linear, left top, right top, from(#ee8a0c), color-stop(57%, #f8b234));
    background: linear-gradient(to right, #fdcf00 0%, #f8b234 57%);  webkit-box-shadow: 0px 0px 13px 0px rgba(240, 139, 21, 0.5); box-shadow: 0px 0px 13px 0px rgba(240, 139, 21, 0.5);}
.titleBox .titleEn { font-weight: 400;  font-size: .9rem; letter-spacing: 1px; color: #929292}
 
.service { position: relative}
 
.service .item .Img { width: 120px; height: 120px; border-radius: 50%; overflow: hidden}
.service .item .Img img { width: 100%; display: block;  -webkit-backface-visibility: hidden; backface-visibility: hidden}
.service .serviceBox { display: -webkit-box; display: -ms-flexbox; display: flex; margin:300px 0px 50px 0px ; background:#eaf7ff;  border-radius:0px  250px 0px 250px}
@media (max-width:1180px) {
.service .serviceBox { display: none  }
}
@-webkit-keyframes circleAni {
0% {  -webkit-transform: rotate(0deg);  transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}
@keyframes circleAni {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg);  transform: rotate(360deg) }
}
.service .outerBox {  position: relative; z-index: 1; -webkit-box-flex: 1; -ms-flex: 1; flex: 1}
@media (max-width:1440px) {
.service .outerBox { width: 100% }
}
.service .product-pic-box { position: relative; z-index: 0; width: 44%; height: 630px}
@media (max-width:1280px) {
.service .product-pic-box { width: 38% }
}
@media (max-width:1180px) {
.service .product-pic-box { display: none }
}
.service .product-list { z-index: 0}
.service .product-list > li { pointer-events: none; opacity: 0}
.service .product-list > li.current { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; pointer-events: auto; opacity: 1;}
.service .product-list .item { display: -webkit-box; display: -ms-flexbox; display: flex;  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 90px 0 0 130px}
@media (max-width:1440px) {
.service .product-list .item {  padding: 90px 0 0 115px }
}
.service .product-list .name span { display: block; font-size: 50px; font-weight: 900;  color:#0071be;  margin-bottom: 25px;font-family: 'Roboto', sans-serif; font-style: italic; }
.service  h3,.service ul li{   margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;  }
.service .product-list .name a{ display: block; margin-bottom: 10px; font-size: 35px; letter-spacing: 2.8px; white-space: nowrap;color:#0072bf;}
@media (max-width:1280px) {
.service .product-list .name {font-size: 30px; }
}
.service .product-list .listTitle { margin-bottom: 10px; font-size: 20px;  font-weight: 700;  letter-spacing: 2.5px; color: #3f3f3f;font-family: 'Roboto', sans-serif;font-style: italic;}
.service .product-list .text { width: 400px;  height: 135px; line-height: 1.75rem; letter-spacing: 1px; margin-bottom: 40px;}
@media (max-width:1280px) {
.service .product-list .text {  width: 300px; font-size: .875rem;  }
}
.service .product-list ul.w-list  { position: relative; margin: 0px; padding: 0px; list-style: none}
.service .product-list ul.w-list li { position: relative; margin: 0px; padding-left: 15px; list-style: none}
.service .product-list ul.w-list li:before { content: ""; position: absolute; top: calc(50% - 1px); left: 0; width: 6px; height: 6px; background-color:#42adc9; border-radius: 99rem;}
.service .circleContentBox { position: absolute; z-index: 2; bottom: 20px; right: -45px; width: 800px; height: 800px;margin-left: auto}
  

@media (max-width:1560px) {
.service .circleContentBox {right: -95px  }
}
@media (max-width:1180px) {
.service .circleContentBox { display: none }
}
.service .circleContentBox .circleBox { position: absolute; top: 50%;  left: 50%;  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: none; width: 100%; height: 100%}
.service .circleContentBox .circleBox:after { content: ""; position: absolute;  top: 50%; left: 50%;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(100% - 200px); height: calc(100% - 200px);  border-radius: 50%; background-image: linear-gradient(to bottom, rgba(207, 235, 255, .95) 0%, rgba(26, 141, 226, .5)  100%);  webkit-box-shadow: 0px 0px 13px 0px rgba(26, 141, 226, .5); box-shadow: 0px 0px 13px 0px rgba(26, 141, 226, .5);}
@media (max-width:1180px) {
.service .circleContentBox .circleBox:after { width: calc(100% - 60px); height: calc(100% - 60px) }
}
@media (max-width:640px) {
.service .circleContentBox .circleBox:after { width: calc(100% - 6px); height: calc(100% - 6px) }
}
.service .circleContentBox .dashed {  position: absolute; top: 5px; left: 5px; width: calc(100% - 10px);  height: calc(100% - 10px); stroke: #65beff;  stroke-width: 1px;  fill: none}
@media (max-width:640px) {
.service .circleContentBox .dashed { display: none }
}
.service .circleContentBox .product-item li { list-style: none; position: absolute; width: 104px; bottom: 50%; left: 50%; margin-left: -52px; height: 50%; -webkit-transform-origin: center bottom; transform-origin: center bottom}
.service .circleContentBox .product-item li.current .icon { border: 8px solid #fccf00;box-shadow: 0px 0px 13px 0px rgba(240, 139, 21, 0.5);}
.service .circleContentBox .product-item li.current:before { width: 18px; height: 18px; border: 1px solid #fcd424}
.service .circleContentBox .product-item li:after { content: ""; position: absolute; top: 0px; left: 50%;  -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 11px; height: 11px; border-radius: 50%; background-color:#fcd424}
.service .circleContentBox .product-item li:before { content: ""; position: absolute; top: -3.5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-radius: 50%}
.service .circleContentBox .product-item .item { position: relative}
.service .circleContentBox .product-item .name { position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center; padding-top: 5px;}
.service .circleContentBox .product-item .name span{display: block;  }
@media (max-width:1180px) {
.service .circleContentBox .product-item .name { display: none}
}
.service .circleContentBox .product-item .name a { display: block;white-space: nowrap; font-size: .9rem; font-weight: 500; color: #111111; letter-spacing:1px}
.service .circleContentBox .product-item .icon {  margin: 40px -10px 0;  width: 120px; height: 120px; background-color: #fff; border: 8px solid #f5f9fc; border-radius: 50%; overflow: hidden;-webkit-box-shadow: 2px 2px 25px 2px rgba(35, 58, 71, 0.2); box-shadow: 2px 2px 25px 2px rgba(35, 58, 71, 0.2);}
@media (max-width:1180px) {
.service .circleContentBox .product-item .icon { display: none;  }
}
.service .circleContentBox .product-item .icon img { width: 100%; display: block;  -webkit-backface-visibility: hidden; backface-visibility: hidden}
.service .circleContentBox .stroke { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform-origin: center; transform-origin: center; stroke: #fcd424; stroke-width: 5px; fill: none;}
.service .circleContentBox .stroke.ani circle { -webkit-transition: all 5s; transition: all 5s}
.service .circleContentBox .stroke circle { fill: none; stroke: #fcd424; stroke-width: 3; -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;}
.service .circleContentBox .titleWrap { position: absolute; top: 50%; left: 50%; width: calc(100% - 400px); height: calc(100% - 400px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); letter-spacing: 1px; border-radius: 50%; background: #f5f9fc}
.service .circleContentBox .titleWrap .text { position: relative; width: 305px;  text-align: center; letter-spacing: 1.8px; font-weight: 500; color: #575757}
 

.service .arrowWrap { position: absolute;  z-index: 9999; left: 0; top: 50%;  -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex;  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; cursor: pointer;}
@media (max-width:1440px) {
.service .arrowWrap {display: none }
}
.service .arrowWrap .arrowNext, .service .arrowWrap .arrowPrev { position: relative; z-index: 9999;padding: 157.5px;  background: #fff; -webkit-box-shadow: 2px 2px 15px 2px rgba(35, 58, 71, 0.05);  box-shadow: 2px 2px 15px 2px rgba(35, 58, 71, 0.05); border-radius: 50%;}
@media (max-width:1560px) {
.service .arrowWrap .arrowNext, .service .arrowWrap .arrowPrev {padding: 140px}
}
 .service .arrowWrap .arrowPrev:after { content: ""; position: absolute; z-index: 1; top: 50%;  -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; height: 20px; width: 30px;  background: url("../images/icon/arrow-right-2.svg") no-repeat center top; }


.service .arrowWrap .arrowNext:after { content: ""; position: absolute; z-index: 1; top: 50%;  -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; height: 20px; width: 30px; background: url("../images/icon/arrow-left-2.svg") no-repeat center top; }

 
.service .arrowWrap .arrowNext { -webkit-transform: translateX(200px); transform: translateX(200px)}
.service .arrowWrap .arrowNext:after { left: 22px}
.service .arrowWrap .arrowNext .arrow { left: 15px; -webkit-transform: translateY(-50%);transform: translateY(-50%);}
.service .arrowWrap .arrowNext:hover { padding: 160px; -webkit-box-shadow: 2px 2px 15px 2px rgba(35, 58, 71, 0.1);  box-shadow: 2px 2px 15px 2px rgba(35, 58, 71, 0.1); -webkit-transform: translateX(190px); transform: translateX(190px);}
@media (max-width:1560px) {
.service .arrowWrap .arrowNext:hover { padding: 130px}
}
.service .arrowWrap .arrowNext:hover:after {width: 70px;left: -16px}
.service .arrowWrap .arrowPrev {  -webkit-transform: translateX(-200px); transform: translateX(-200px)}
.service .arrowWrap .arrowPrev:after { right: 22px;}
.service .arrowWrap .arrowPrev .arrow { right: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%)}
.service .arrowWrap .arrowPrev:hover { padding: 160px;  -webkit-box-shadow: 2px 2px 15px 2px rgba(35, 58, 71, 0.1); box-shadow: 2px 2px 15px 2px rgba(35, 58, 71, 0.1); -webkit-transform: translateX(-190px); transform: translateX(-190px);}
 

@media (max-width:1560px) {
.service .arrowWrap .arrowPrev:hover { padding: 130px }
}
.service .arrowWrap .arrowPrev:hover:after {width: 70px;  right: -16px}
.service .arrowWrap .arrow { position: absolute; z-index: 1; top: 50%; width: 40px; height: 40px}
.service .arrowWrap_m { position: relative;  z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center;  -ms-flex-align: center; gn-items: center;  cursor: pointer; margin-top: 10px;padding: 0 10px 10px;}
@media (min-width:1181px) {
.service .arrowWrap_m { display: none; }
}
.service .arrowWrap_m .arrowNext, .service .arrowWrap_m .arrowPrev { position: relative; z-index: 0; line-height: 12px}
.service .arrowWrap_m .arrowNext:after, .service .arrowWrap_m .arrowPrev:after { content: ""; position: absolute; top: 50%;  -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; display: block; height: 2px; width: 30px; background: #40b0b8}
.service .arrowWrap_m .arrowNext:after { left: 7px}
.service .arrowWrap_m .arrowNext:hover:after {  width: 45px; left: -6px}
.service .arrowWrap_m .arrowPrev:after { right: 7px}
.service .arrowWrap_m .arrowPrev:hover:after { width: 45px; right: -6px}
.service .arrowWrap_m .arrow { width: 40px; height: 40px}
 
.service .serviceBox_m { display: none; position: relative; z-index: 1}
@media (max-width:1180px) {
.service .serviceBox_m { padding: 80px 0 0; display: block;}
}
.service .serviceBox_m .service-nav { margin-bottom: 20px; position: relative; overflow: hidden;}
.service .serviceBox_m .service-nav:after { content: ""; position: absolute; z-index: 0; top: 50%; left: 50%; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); display: block; width: 100%; height: 1px; background: #e5e5e5;}
.service .serviceBox_m .service-nav .slick-list { z-index: 1}
.service .serviceBox_m .service-nav .Img { border: 5px solid #fff; margin: 0 auto 10px; -webkit-box-shadow: 2px 2px 10px 2px rgba(35, 58, 71, 0.1); box-shadow: 2px 2px 10px 2px rgba(35, 58, 71, 0.1)}
@media (max-width:480px) {
.service .serviceBox_m .service-nav .Img { width: 90px; height: 90px;}
}
.service .serviceBox_m .service-nav a { display: block; font-size: 1.5rem;font-weight: 500;   text-align: center; letter-spacing: 1px; color:#0071C0}
@media (max-width:428px) {
.service .serviceBox_m .service-nav a { font-size: 0.875rem; }
}

.service .serviceBox_m .service-nav .name { font-size: 1.5rem; text-align: center; letter-spacing: 1px; color: #0071C0 }
.service .serviceBox_m .service-nav .name span{ font-size: 1.5rem; display: block; margin: auto; font-family:'Roboto', sans-serif; }
@media (max-width:480px) {
.service .serviceBox_m .service-nav .name span{ font-size: 1rem;  }
}

.service-nav .slick-prev,.service-nav .slick-next{  top:35%; }






.service .serviceBox_m .item { position: relative; z-index: 1; display: -webkit-box;  display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal;  -ms-flex-direction: column; flex-direction: column}
.service .serviceBox_m .service-for { max-width: 800px; margin: 0 auto}
@media (max-width:800px) {
.service .serviceBox_m .service-for { padding: 0 10px }
}

.service-for .item{   margin:0px auto; padding: 10px 80px;}
@media (max-width:480px) {
.service-for .item{   margin:0px auto; padding: 10px;}
    
}
.service-for .name { margin: 20px 0; padding:0px; font-weight: 900; font-size: 1.5rem; letter-spacing: 1px; color: #0071C0 }
.service-for .name a{  color: #0071C0 }
.service-for .title span { font-family:'Roboto', sans-serif;  font-weight: 900; font-size: 45px; padding-right: 20px; color: #42adc9;}
.service-for .inner .listTitle { margin-bottom: 10px; font-size: 20px; font-weight: 700; letter-spacing: 1.5px; font-family:'Roboto', sans-serif; }
.service-for .inner ul { padding: 0 25px 25px 25px; margin: auto;}
.service-for .inner ul li{ padding: 0px; line-height: 1.8; letter-spacing: 0.8px; font-size: 1rem; }