@import url("reset.css");
@charset "UTF-8";
/**
 *
 * @authors chan.yisen (aihuacyc@gmail.com)
 * @date    2016-10-31 10:25:51
 * @version $Id$
 * @public.less
 */
* {
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none;
}
:root{
  --visionW:220px;
  --visionH:220px;
  --valueW:185px;
  --valueH:205px;
}
@font-face {
  font-family: 'Roboto-Bold';
  src:  url('../fonts/Roboto-Bold.eot?1aukq4');
  src:  url('../fonts/Roboto-Bold.eot?1aukq4#iefix') format('embedded-opentype'),
    url('../fonts/Roboto-Bold.ttf?1aukq4') format('truetype'),
    url('../fonts/Roboto-Bold.woff?1aukq4') format('woff'),
    url('../fonts/Roboto-Bold.svg?1aukq4#Prompt-Thin') format('svg');
}
@font-face {
  font-family: 'Roboto-Regular';
  src:  url('../fonts/Roboto-Regular.eot?1aukq4');
  src:  url('../fonts/Roboto-Regular.eot?1aukq4#iefix') format('embedded-opentype'),
    url('../fonts/Roboto-Regular.ttf?1aukq4') format('truetype'),
    url('../fonts/Roboto-Regular.woff?1aukq4') format('woff'),
    url('../fonts/Roboto-Regular.svg?1aukq4#Prompt-Thin') format('svg');
}
@font-face {
  font-family: 'Roboto-Medium';
  src:  url('../fonts/Roboto-Medium.eot?1aukq4');
  src:  url('../fonts/Roboto-Medium.eot?1aukq4#iefix') format('embedded-opentype'),
    url('../fonts/Roboto-Medium.ttf?1aukq4') format('truetype'),
    url('../fonts/Roboto-Medium.woff?1aukq4') format('woff'),
    url('../fonts/Roboto-Medium.svg?1aukq4#Prompt-Thin') format('svg');
}
@font-face {
  font-family: 'Inter';
  src:  url('../fonts/Inter.eot?1aukq4');
  src:  url('../fonts/Inter.eot?1aukq4#iefix') format('embedded-opentype'),
    url('../fonts/Inter.ttf?1aukq4') format('truetype'),
    url('../fonts/Inter.woff?1aukq4') format('woff'),
    url('../fonts/Inter.svg?1aukq4#Prompt-Thin') format('svg');
}

html,body{position: relative;margin: 0 auto;padding: 0;width:100%;min-width:320px;height:auto;overflow-x: hidden;}
body{overflow: hidden;}

html.bodyhide,
body.bodyhide{overflow: hidden; height: 100vh;}
body table,tr,td {border-collapse: collapse;}
body ul, li {list-style-type: none;}
body img{border: none;width:100%; height:auto;display: block;}
body b{font-weight:normal;}
body p.no_pad{padding-bottom: 0px!important;}

a{color: #393727;transition:all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-o-transition: all 0.3s;}
a:hover{color: #3fbee0;}
a,a:hover,a:focus,a:active{text-decoration:none;}
a.underl{text-decoration: underline;}
a.underl:hover{text-decoration: none;}
.a_link{ text-decoration:underline}

.clearfix {*zoom: 1;clear:both;}
.clearfix::after{content: "";display: block;}
.ipad_show,.ph_show{display: none;}
.ipad_hide,.ph_hide{display: block;}

.flex_w_ipad,
.flex{position: relative;display: flex;width: 100%;height: auto;}
.flexsm{position: relative;display: flex;}
.flex_1{ flex: 1;}
.flex_w{position: relative;display: flex;flex-wrap:wrap;width: 100%;height: auto;}
.justify_around_center{justify-content:space-around;align-items:center;}
.justify_around_start{justify-content:space-around;align-items:flex-start;}
.justify_around_stretch{justify-content:space-around;align-items:stretch;}
.justify_between_center{justify-content:space-between;align-items:center;}
.justify_between_star{justify-content:space-between;align-items:flex-start;}
.justify_between_stretch{justify-content:space-between;align-items:stretch;}
.justify_star_stretch{justify-content:flex-start;align-items:stretch;}
.justify_center_center{justify-content:center; align-items:center;}
.justify_center_stretch{justify-content:center; align-items:stretch;}
.justify_star_center{justify-content:flex-start;align-items:center;}
.justify_end_center{justify-content:flex-end;align-items:center;}
.flex_column{position: relative;display: flex;flex-direction:column;}
.flex_column_ipad{position: relative;display: flex;width: 100%;height: auto;}
.col_100{position:relative;width: 100%;}
.col_70{position:relative;width: 70%;}
.col_60{position:relative;width: 60%;}


.com_position{position:relative;width: 100%;height: auto;}
.trans_x{left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);}
.trans_y{top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);}
.trans_xy{top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);}

img.img_900{position: relative;max-width: 900px;margin:0px auto;}

.text_center{text-align: center;}
.text_right{text-align: right;}
.text_upper{text-transform: uppercase;}
.text_justify{text-align: justify;}

.text_count{column-count:2;-webkit-column-count:2;-moz-column-count:2;column-gap:80px; -webkit-column-gap:80px;-moz-column-gap:80px;column-rule:5px solid #fff;-webkit-column-rule:5px solid #fff;-moz-column-rule:5px solid #fff;}
.line3{overflow: hidden;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient: vertical;box-orient: vertical;display: -webkit-box;display: box;}

#ver-en{
  font-family: "Inter", Arial, Helvetica, sans-serif, Verdana;
  font-size:14px;
  line-height: 1.4;
  color: #000000;
  font-style: normal;
}
#ver-tc{
  font-family:"Microsoft JhengHei", "宋体", Arial, Helvetica, Verdana, sans-serif;
  font-size:14px;
  line-height: 1.4;
  color: #000000;
  font-style: normal;
}

.font_sm{
  font-size:14px;
}

.font_RobotoBold{font-family: 'Roboto-Bold';}
.font_RobotoMedium{font-family: 'Roboto-Medium';}
.font_RobotoRegular{font-family: 'Roboto-Regular';}
.font_interBold{ font-weight: 600; }

.warp{
  position: relative;
  width: 100%;
  height: auto;
}
.warpMainBg{
  background:#fff url('../images/mainBG.jpg') center no-repeat;
  background-size: 100% auto;
}
.container{
  position: relative;
  width: 100%;
  height: auto;
  max-width:900px;
  padding-right:30px;
  padding-left:30px;
  margin:0px auto;
}

body h1{
  position:relative;
  font-size:36px;
  font-weight: bold;
  line-height:1.3;
}
body #pageWarp h1{
  position:relative;
  font-size:32px;
}
body h2{
  position:relative;
  font-size:28px;
  font-weight: 600;
}

body h3{
  position:relative;
  font-size:22px;
  line-height: 1.4;
  font-weight: 600;
}

body h4{
  position:relative;
  font-size:18px;
}
h2.titleH2{
  display: inline-block;
  padding-bottom:15px;
}
h2.titleH2::after{
  content: "";
  display: block;
  position: absolute;
  width: 60px;
  height: 3px;
  background: #39c0dd;
  bottom: 0px;
  left: 50%;
  margin-left: -30px;
}
.color_w{color: #fff;}
.color_b{color: #3fbee0;}



.Margbot30{margin-bottom: 30px;}
.Padbot10{
  padding-bottom: 10px;
}
.Padbot20{
  padding-bottom:20px;
}
.Padbot30{
  padding-bottom: 30px;
}
.PadTop30{padding-top: 30px;}
.PadTop40{padding-top:40px;}
.PadTop50{padding-top:50px;}
.Padbot40{padding-bottom:40px;}
.Padbot60{padding-bottom:60px;}
.Padbot100{ padding-bottom: 100px;}
.Padbot150{ padding-bottom: 150px;}
.Padbot180{ padding-bottom: 180px;}


.maxWidmatr{
  max-width: 880px;
  margin: 0px auto;
}
.maxWidmatr1{
  max-width: 640px;
  margin: 0px auto;
}
/*menu*/
.menuBtn{
  position: relative;

}
span#menu {
    position: relative;
    display: block;
    z-index: 6;
    width: 25px;
    height: 18px;
    cursor: pointer;
    /*transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);*/
}
#menu i {
    position: absolute;
    display: block;
    width: 100%;
    height:3px;
	border-radius:20px;
    background: #000;
    transition:all 0.3s;
 -moz-transition: all 0.3s;
 -webkit-transition: all 0.3s;
 -o-transition: all 0.3s;
}
#menu i:nth-of-type(2) {
    top: 50%;
    margin-top: -1px;
}
#menu i:last-child {
    bottom: 0px;
}
#menu.active i:first-child {
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
top: 50%;
}
#menu.active i:nth-child(2) {
visibility: hidden;
opacity: 0;
}
#menu.active i:last-child {
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg);
top: 50%;
bottom: auto;
}


/*header*/
#header{
  position: relative;
  width: 100%;
  height: auto;
  z-index: 8;
}
.header_top{
 position: relative;
 width: 100%;
 height: auto;
 padding: 10px 0px;
 background: #000000;
}
.header_bot{
  position: fixed;
  width: 100%;
  height: auto;
  background: #ffffff;
   transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.header_bot.delayed_sticky_mode {box-shadow: 0px 0px 10px #d8d8d8;
  /*position: fixed;*/
  top: 0px;
  /*left: 0px;*/
/*  animation:slideDow 1s forwards;
  -webkit-animation:slideDow 1s forwards;
  -moz-animation:slideDow 1s forwards;
  -ms-animation:slideDow 1s forwards;*/
}
ul.langUl{ padding-left:30px;}
ul.langUl li{
  position: relative;
  margin-left:2px;
}
ul.langUl li a{
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
}
ul.langUl li:hover a,
ul.langUl li.active a{background: #3fbee1;  color: #fff;}

.logoBtn{
  position: relative;
  /*width: 20%;*/
  padding:15px 4vw 15px 0;
}
.logoBtn a{display: block; width: 150px;}
.footLogoBox .logoBtn a{width: 120px;}
.navBox{
  position: relative;
  flex: 1;
}
.navBox ul.langUl{ display:none;}
ul.navUl{
  position: relative;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  color: #000000;
}
#ver-en ul.navUl{ font-size:14px;}
ul.navUl li a.bg_a{position: relative; display: block;font-weight:bold;text-transform: uppercase;}
ul.navUl li a.bg_a br{ display:block;}
ul.navUl li a.bg_a::after{
  content: '';
  display: block;
  position: absolute;
  width: 0px;
  height: 2px;
  bottom: -2px;
  left: 0px;
  background: #3fbddf;
  transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
}

ul.navUl li.current a.bg_a::after,
ul.navUl li:hover a.bg_a::after{ width: 100%;}

ul.navUl li.current a.bg_a,
ul.navUl li:hover a.bg_a{
 color: #3fbddf;
}

ul.navUl li{position: relative; padding:10px 0px;}
ul.navUl li .slideBox{
  position: absolute;
  padding: 15px 0px;
  background: #3fbddf;
  top: 100%;
  display: none;
}
.navBox ul.navUl li:hover .slideBox{
  display: block;
}
ul.navUl li .slideBox a{
  color: #fff;
  white-space: nowrap;
  display: block;
  padding:5px 20px;

}

ul.navUl li .slideBox a:hover,
ul.navUl li .slideBox a.currentSm{ background: #fff; color: #3fbddf;}

/*/heder -end */

/*footer*/
#footer{
  position: relative;
  width: 100%;
  height: auto;
  background: #f2f2f2;
  padding:30px 0px;
}

.footLogoBox{
  position: relative;
}
.footLogoBox .logoBtn{padding: 0px;}
.footLogoBox .footetTXt{
  position: relative;
  padding-top: 30px;
}
.footerNav{
  position: relative;
  flex: 1;
  padding-left:2vw;
}
.footernavUl li{position: relative;width:19%;padding:0 10px;border-left: 1px solid rgb(222, 222, 222);}
.footernavUl li:first-child { border-left-color: transparent;}
.footernavUl li a.bg_a{font-weight: bold;position: relative;}
.footernavUl li a.bg_a br{ display:block;}
.footernavUl .slideBox{position: relative; padding:15px 0 5px 0; color: #707070; font-size:12px; }
.footernavUl .slideBox a{display: block; line-height: 1; padding-bottom:10px; white-space: nowrap;} 　
/*.footernavUl .slideBox a:hover{color: ;}*/
.footernavUl .slideBox a span{
  padding-right: 5px;
  font-size: 10px;
  color: #707070;
}
/*footer - end*/



/*seation 1*/
section.autoplayVideo {
  position: relative;
  width: 100%;
  height: 1080px;
  overflow: hidden;
}
.video-js{width: 100%; height: 100%;}
section.autoplayVideo video{
  object-fit: cover;
}

.sloganBox{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}
.sloganBox::before{
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 100%;
  background: rgba(0,0,0,0.58);
  top: 0px;
  left: 0px;
}
.sloganBox .container{height: 100%;}
.sloganTxt{
  position: absolute;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
}
.LineBlock{
  position: relative;max-width: 180px; width: 35%; height: 3px ; background-color: #fff;
  overflow: hidden;
}
.LineBlock-gap{
  background-color: #3fbddf;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15px;
  height: 3px;
  animation: RadiantAnimation 1.5s infinite ease-in-out;
  -webkit-animation: RadiantAnimation 1.5s infinite ease-in-out;
  -moz-animation: RadiantAnimation 1.5s infinite ease-in-out;
  -ms-animation: RadiantAnimation 1.5s infinite ease-in-out;
}
a.linkMore{
  position: relative;
  display: inline-block;
  background: #3fbddf;
  color: #fff;
  padding:10px 25px;
  border-radius: 100px;
}
a.linkMore:hover{
  background: #fff;
  color: #3fbddf;
}

/*section1 -end*/



/*section2*/
.visionSection{
  position: relative;
  width:100%;
  height: auto;
  z-index: 6;
  opacity: 0;
  animation:fadeIn 0.5s linear 2s 1 forwards;
  -webkit-animation:fadeIn 0.5s linear 2s 1 forwards; /* Safari 和 Chrome */
}
.visionMain{
  position: relative;
  width: 100%;
  height: auto;
  padding-top: calc(var(--visionW)/2 + 100px);
}

ul.visionUl{justify-content: center;
  position: absolute;
  top: calc(var(--visionW)/2 - var(--visionW));
  z-index: 5;
}
ul.visionUl li{
  position: relative;
  width: var(--visionW);
  height: var(--visionH);
  margin:0 2%;
  color: #707070;
  box-shadow: 0px 0 15px rgb(0 0 0 / 30%);
  background: #fff;
  display: flex;
  align-items: center;

}
ul.visionUl li .itemBoximg{
  position: absolute;
  width:100%;
  height: 0px;
  bottom: 0px;
  left: 0px;
  background: url("../images/iconBg.jpg") center no-repeat;
  transition: all 0.6s;
  -moz-transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -o-transition: all 0.6s;
}

ul.visionUl li::before{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 10px;
  left: 0px;
  bottom: 0px;
  background: #3fbddf;
  transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
}
ul.visionUl li:hover::before,
ul.visionUl li.active::before{display: none;}
ul.visionUl li dl{
  position: relative;
  padding: 0px 20px;
}
ul.visionUl li dl dt{
  position: relative;
  width:65px;
  height:65px;
  margin:0px auto;
}
ul.visionUl li dl dd{
  position: relative;
  text-align: center;
  padding-top:20px;
  transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
}

li.visionItem1 dl dt{
  background: url("../images/busIcon1.svg") center no-repeat;
  background-size: contain;
}
li.visionItem2 dl dt{
  background: url("../images/busIcon2.svg") center no-repeat;
  background-size: contain;
}
li.visionItem3 dl dt{
  background: url("../images/busIcon3.svg") center no-repeat;
  background-size: contain;
}

li.visionItem1.active dl dt,
li.visionItem1:hover dl dt{
  background: url("../images/busIcon1_h.svg") center no-repeat;
  background-size: contain;
}
li.visionItem2.active dl dt,
li.visionItem2:hover dl dt{
  background: url("../images/busIcon2_h.svg") center no-repeat;
  background-size: contain;
}
li.visionItem3.active dl dt,
li.visionItem3:hover dl dt{
  background: url("../images/busIcon3_h.svg") center no-repeat;
  background-size: contain;
}

ul.visionUl li:hover .itemBoximg,
ul.visionUl li.active .itemBoximg{
  height: 100%;
}

ul.visionUl li:hover,
ul.visionUl li.active{
  color: #fff;
}

/****************************************************/

ul.valueLinxUl{
	max-width:840px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; margin:auto;
}
ul.valueLinxUl li{
  position: relative;
  width: var(--valueW);
  height: var(--valueH);
  margin: 0px 2px;
}
ul.valueLinxUl li .popBgdiv{
  position: relative;
  width: 100%;
  height: 100%;
   color: #707070;
  display: flex;
  align-items: center;
  transition: all 0.6s;
  -moz-transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -o-transition: all 0.6s;
  background: url("../images/valueIconBG.png") center no-repeat;
  background-size: 100% 100%;
}
ul.valueLinxUl li .popBgdiv dl{
  position: relative;
  width: 100%;
  height: auto;
  text-align: center;
}
ul.valueLinxUl li .popBgdiv dl dt{
  position: relative;
  width: 100%;
  height:40px;
  display: flex;
  justify-content: center;
    align-items: center;
}
ul.valueLinxUl li .popBgdiv dl dt img{ width: auto; height: auto; max-width: 100%; max-height: 100%;}
ul.valueLinxUl li .popBgdiv dl dd{
  padding-top: 10px;
  position: relative;
  font-family: "Roboto-Bold";
}
ul.valueLinxUl li.active .popBgdiv,
ul.valueLinxUl li:hover .popBgdiv{
  background: url("../images/valueIconBG_h.png") center no-repeat;
  background-size: 100% 100%;
  color: #fff;
}

ul.valueLinxUl li:hover .popBgdiv{
  -webkit-transform: scale(1.1) translateZ(0);
    transform: scale(1.1) translateZ(0);
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

ul.valueLinxUl li.valueLinx1 dl dt{
  background: url("../images/valueIcon1.svg") center no-repeat;
  background-size: contain;
}
ul.valueLinxUl li.valueLinx2 dl dt{
  background: url("../images/valueIcon2.svg") center no-repeat;
  background-size: contain;
}
ul.valueLinxUl li.valueLinx3 dl dt{
  background: url("../images/valueIcon3.svg") center no-repeat;
  background-size: contain;
}
ul.valueLinxUl li.valueLinx4 dl dt{
  background: url("../images/valueIcon4.svg") center no-repeat;
  background-size: contain;
}
ul.valueLinxUl li.valueLinx5 dl dt{
  background: url("../images/valueIcon5.svg") center no-repeat;
  background-size: contain;
}
ul.valueLinxUl li.valueLinx6 dl dt{
  background: url("../images/valueIcon6.svg") center no-repeat;
  background-size: contain;
}
ul.valueLinxUl li.valueLinx7 dl dt{
  background: url("../images/valueIcon7.svg") center no-repeat;
  background-size: contain;
}


ul.valueLinxUl li.valueLinx1.active dl dt,
ul.valueLinxUl li.valueLinx1:hover dl dt{
  background: url("../images/valueIcon1_h.svg") center no-repeat;
  background-size: contain;
}
ul.valueLinxUl li.valueLinx2.active dl dt,
ul.valueLinxUl li.valueLinx2:hover dl dt{
  background: url("../images/valueIcon2_h.svg") center no-repeat;
  background-size: contain;
}
ul.valueLinxUl li.valueLinx3.active dl dt,
ul.valueLinxUl li.valueLinx3:hover dl dt{
  background: url("../images/valueIcon3_h.svg") center no-repeat;
  background-size: contain;
}
ul.valueLinxUl li.valueLinx4.active dl dt,
ul.valueLinxUl li.valueLinx4:hover dl dt{
  background: url("../images/valueIcon4_h.svg") center no-repeat;
  background-size: contain;
}
ul.valueLinxUl li.valueLinx5.active dl dt,
ul.valueLinxUl li.valueLinx5:hover dl dt{
  background: url("../images/valueIcon5_h.svg") center no-repeat;
  background-size: contain;
}
ul.valueLinxUl li.valueLinx6.active dl dt,
ul.valueLinxUl li.valueLinx6:hover dl dt{
  background: url("../images/valueIcon6_h.svg") center no-repeat;
  background-size: contain;
}
ul.valueLinxUl li.valueLinx7.active dl dt,
ul.valueLinxUl li.valueLinx7:hover dl dt{
  background: url("../images/valueIcon7_h.svg") center no-repeat;
  background-size: contain;
}


/*ul.valueLinxUl li.valueLinx5{ margin-left: calc(var(--valueW)/2);}*/
ul.valueLinxUl li.valueLinx5,ul.valueLinxUl li.valueLinx6,ul.valueLinxUl li.valueLinx7{margin-top: -30px;}
/*************************************************/
.missionSlideMain{
  position: relative;
  width: calc(100% + 20px);
  height: auto;
  margin-left: -20px;
}

.slideMissionBox .missslideItem{
  position: relative;
  padding: 20px;
}
.slideMissionBox .missslideItem dl{
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  box-shadow: 0px 0 15px rgb(0 0 0 / 30%);
  cursor: pointer;
}
.slideMissionBox .missslideItem dl dt{
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.slideMissionBox .missslideItem dl dt img{
  transition: transform 1s ease;
  -moz-transition: transform 1s ease;
  -ms-transition: transform 1s ease;
  -webkit-transition: transform 1s ease;
}
.slideMissionBox .missslideItem:hover dl dt img{
  transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
}

.slideMissionBox .missslideItem dl dd{
  position: relative;
  padding:20px;
}

.slideMissionBox .missslideItem dl dd p{
  color: #707070;
  padding-top:15px;
  text-align: left;
  text-justify:inter-ideograph;
}

ul.boardUl{
  position: relative;
  width:100%;
  flex-wrap: wrap;
  height: auto;
  display: flex;
    justify-content: space-between;
    align-items: stretch;
}

ul.boardUl li{
  /*position: relative;*/
  width: 25%;
  height: auto;
  /*overflow: hidden;*/
  cursor: pointer;
}
ul.boardUl li dl{ position: relative; width: 100%; height: auto;}
ul.boardUl li dl dt{
  position: relative; width: 100%; height: auto;
   overflow: hidden;
}
ul.boardUl li dl dt img{
  transition: transform 1s ease;
  -moz-transition: transform 1s ease;
  -ms-transition: transform 1s ease;
  -webkit-transition: transform 1s ease;
}
ul.boardUl li dl dd{
  position: absolute;
  opacity: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  display:flex;
     align-items: center;justify-content:center;
  padding:0px 20px;
background-color: rgb(0 0 0 / 30%);
  color: #fff;
   transition: all 0.6s;
    -moz-transition: all 0.6s;
    -webkit-transition: all 0.6s;
    -o-transition: all 0.6s;
}
ul.boardUl li dl dd img{width:25px;}
ul.boardUl li dl dd a{margin: auto; display: table;}
.boardDiv{
  position: relative;
  width: 100%;
  height: auto;    text-align: center;
  padding-top:20px;
  /*padding-left: 20px;
  border-left: 2px solid #fff;*/
}

ul.boardUl li:hover dl dd{
  opacity: 1;
}
ul.boardUl li:hover dl dt img{
  transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
}


.boardDeatil{
  position: relative;
  width: calc(100% * 4);
  height: auto;
  display: none;
}
ul.boardUl li.active{position: relative; z-index: 8;}
ul.boardUl li.active dl::after{
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-top: 13px solid #999999;
  opacity: 0.8;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
}

.boardDeatil .boardDeatilItem{
  position: relative;
  width: 100%;
  height: auto;
  padding:20px 30px;
  margin-top: 20px;
  background: #999999;
  color: #fff;
}
.boardDeatil .boardCloseBtn{
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 99;
  color: #fff;
}
.boardDeatil.Item2{
  left: -100%;
}
.boardDeatil.Item3{
  left: calc(-100%*2);
}
.boardDeatil.Item4{
  left: calc(-100%*3);
}
/*section2 end*/

/*page*/
#pageWarp{
  position: relative;
  width: 100%;
  height: auto;
  background:#fff url("../images/mainBG.jpg") top center no-repeat;
  background-size: 100% auto;
}
.pageBanner{
  position: relative;
  padding:150px 0px 50px 0px;
}
span.logoTitBtn{
  position: relative;
  display: block;
  width: 36px;
  height: auto;
  margin-right: 20px;
}
.setionPage{
  position: relative;
  width: 100%;
  height: auto;
  min-height: 200px;
  padding-bottom: 100px;
}


/*partaner*/

ul.partnerUl{
  position: relative;
  width: 100%;
  height: auto;
}
ul.partnerUl li{
  position: relative;
  width: 31%;
  box-shadow: 0px 0 20px rgb(0 0 0 / 30%);
  background: #fff;
  margin-bottom:30px;
}
ul.partnerUl li a{position: relative;display: block;}
ul.partnerUl li dl{
  position: relative;
  width: 100%;
  height: auto;
  padding:30px;
}
ul.partnerUl li dl dt{position: relative; padding:0px 10px; width: 100%; height:60px; display: flex;
    align-items: center;
    justify-content: center;
}
ul.partnerUl li dl dt img{
  width: auto;height: auto; max-width: 100%; max-height: 100%; margin:0px auto;
}
ul.partnerUl li dl dd{
  position: relative;
  padding-top:20px;
  line-height:1.3;
}
ul.partnerUl li dl dd span{font-size: 16px;}
ul.partnerUl li dl dd p{
  position: relative;
  padding: 20px 0px;
}

ul.margulTwo li{
  margin: 0px 2%;
}

a.lenaMore{display: block;}
a.lenaMore span.iconfont{
  font-size: 10px;
}
/*partaner end*/

/*bus product*/
.busProductItem{
  position: relative;
  padding:35px 50px 50px 50px;
  width: 100%;
  height: auto;
  background: url("../images/bus/productBg.jpg") center no-repeat;
  background-size: 100% 100%;
  color: #fff;
  margin-bottom: 60px;
}
.busProductItem:last-child{margin-bottom: 0px;}
.busProductItem .iconfont{ position:absolute; right:0; top:0; font-size:40px;line-height: 1;}
.busPro_l{
  position: relative;
  width: 50%;
  height: auto;
}
.busPro_r{
  position: relative;
  width: 50%;
  height: auto;
}
/*.busProductItemLast .busProductItemLastInfo,
.busProductItemBtn .busPro_r{display: none;}
.busProductItem:first-child .busPro_r{display: block;}*/
.busProductItem:hover::before{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: rgba(0,0,0,0.3);
}
.busProductItem:hover{ cursor:pointer;}
/*.busProductItem:hover .busPro_r p{
 font-size: 16px
}*/
.busPro_l strong{font-family: "Inter", Arial, Helvetica, sans-serif, Verdana;
  display: block;
  font-size:100px;
    line-height: 0.8;
    padding-bottom: 20px;
}
.busPro_r p{
        transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
}
.busPro_l span{
  font-size:26px;
  line-height: 1;
}
.busPro_r ul{position: relative;width: 100%; height: auto;}
.busPro_r ul li{position: relative; width: 100%; height: auto; padding:20px 0px; border-bottom: 1px solid #b4b5b7;}
.busPro_r ul li:last-child{border-bottom: none; padding-bottom: 0px;}
.busPro_r ul li:first-child{padding-top: 0px;}
.busPro_r ul li span{display: block; padding-bottom:15px;}
.busPro_r ul li span i{font-style: normal;  padding-right: 15px;}
.titfont40{font-size: 40px; line-height: 1; }
.titfont30{font-size:24px; line-height:1.2; }
.titfont20{font-size: 20px; line-height: 1.4; }


.busProductItemSMB{
  position: relative;
  padding-bottom: 50px;
  border-bottom: 1px solid #b4b5b7;
  margin-bottom: 50px;
}
/*bus product end*/

/*bus-servers*/
.busServesItem{
  position: relative;
  margin-bottom: 60px;
}
.busServesItem:last-child{margin-bottom: 0px;}
.busServeText,
.busServeImg{
  position: relative;
  width: 50%;
  height: auto;
}
.busServeText{
  color: #fff;
  background: #000;
  padding:80px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

ul.gongsiUl{position: relative;}
ul.gongsiUl li{ padding-right:10px;
  position: relative;
  height: auto;
  color: #3fbee0;
}
ul.gongsiUl li:last-child{ padding-right:0}
ul.gongsiUl li p{display: flex; align-items: flex-end;}
ul.gongsiUl li p strong{ font-size:30px; line-height: 1; display: block;font-family: "Inter", Arial, Helvetica, sans-serif, Verdana; }
ul.gongsiUl li p span{ padding-left: 1px; font-size:24px; line-height: 1;}
ul.gongsiUl li p span i{ font-style:inherit; font-size:16px;}
ul.gongsiUl li b{color: #fff; font-size: 12px; display: block;    padding-top:8px;line-height: 1.2;}
/*bus-servers end*/



/*/***************************** ir ****************************/

.yearBoxWarp{
  position: relative;
}
.yearTxt{
  color: #3fbee0;
  font-size: 24px;
  line-height: 1;
  font-weight: 100;
}
.yearBoxWarp .selectBox{
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100px;
    border-bottom: 5px solid #3fbee0;
}

.yearBoxWarp .selectBox span.iconDowmY{
    position: absolute;
    left: 2px;
    font-size: 14px;
    color: #3fbee0;
}
.yearBoxWarp .selectBox input{position: relative; width: 100%; color: rgba(0,0,0,0.6);}
.yearBoxWarp .selectBox ul.selectUL{
   position: absolute;
   display: none;
   top: 100%;
    right: 0px;
    z-index: 1010;
    width: 100%;
    border: 1px solid #aaa;
    border-top: 0;
    background: #fff;
    -webkit-box-shadow: 0 4px 5px rgb(0 0 0 / 15%);
    box-shadow: 0 4px 5px rgb(0 0 0 / 15%);
    border-radius: 5px;
}
.yearBoxWarp .selectBox ul.selectUL li{ position:relative;}
.yearBoxWarp .selectBox ul.selectUL li a{ cursor: pointer; display:block;padding: 8px 10px; font-size: 14px; }
.yearBoxWarp .selectBox ul.selectUL li:hover{
    background: #EFEFEF;
}
.yearBoxWarp .selectBox ul.selectUL li:hover a{color: #FF3A3A;}
.yearBoxWarp .selectInput{
  cursor:pointer;
  position: relative;
  border: none;
  border-radius: 4px;
  padding:6px 0px 6px 12px;
  font-size: 20px;
  text-align: center;
   appearance:button;
   -moz-appearance:button; /* Firefox */
   -webkit-appearance:button; /* Safari 和 Chrome */
}

ul.selectUL li a{color: #7c7c7c;}


ul.pageUl{
  position: relative;
  width: 100%;
  max-width: 280px;
  margin:0px auto;
}
ul.pageUl li{
  position: relative;
  width: 100%;
  height: auto;
}
ul.pageUl li a{
  display: flex;
  width: 30px;
  height: 30px;
  font-size: 14px;
  border-radius: 4px;
  justify-content: center;
    align-items: center;
  line-height: 30px;
  margin-right: 8px;
}
ul.pageUl li.pageBtn a{
  position: relative;
  background: #f2f2f2;
}
ul.pageUl li a.moredian{
  border: none;
  color: #ccc;
}
ul.pageUl li.pageBtn:active a{ opacity:0.8;transform:scale(0.96);}
ul.pageUl li.pageBtn:hover a,
ul.pageUl li.pageBtn.active a{
  background: #3fbee0;
  color: #fff!important;
}
ul.pageUl li.disable a{
  color: rgba(0,0,0,0.3);
}
ul.pageUl li.disable:hover a,
ul.pageUl li.disable:active a{
  color: rgba(0,0,0,0.3) !important;
  pointer-events: none;
  opacity:1;
  transform:scale(1);
}
.table_box{width:100%;border-left:1px solid #dddddd;border-top:1px solid #dddddd;}
.table_box tr td{ padding:10px; border-bottom:1px solid #dddddd;border-right:1px solid #dddddd;}
ul.annList{position: relative; width: 100%; height: auto;}
ul.annList li{position: relative; width: 100%; height: auto; margin-bottom: 30px;}
ul.annList li:last-child{margin-bottom: 0px;}

ul.annList li dl.annlistDL{
  position: relative;
  padding: 30px 40px;
}
ul.annList li:nth-of-type(even) dl.annlistDL{
  background: #f5fdff;
}
ul.annList li:nth-of-type(odd) dl.annlistDL{
  background: #e2f9ff;
}
ul.annList li dl.annlistDL dt{position: relative; flex: 1;}
ul.annList li dl.annlistDL dt a{display: flex;
    position: relative;
    justify-content: flex-end;}
ul.annList li dl.annlistDL dt a span{font-size: 32px; color: #3fbee0;}
ul.annList li dl.annlistDL dd {
  position: relative;
  width: 85%;
  height: auto;
  max-width: 880px;
  zoom: 0.9;
}
ul.annList li dl.annlistDL dd span{display: block; padding-bottom: 20px;}
ul.annList li dl.annlistDL dd a{ padding-bottom: 10px; display: block;}
ul.annList li dl.annlistDL dd a:last-child{padding-bottom: 0px;}




ul.irGovUL{
  position: relative;
  width: 100%;
  height: auto;
}

ul.irGovUL li{
  position: relative;
  width: 100%;
  height: auto;
  padding: 50px 0px;
  border-bottom: 1px solid #c9c9c9;
}
ul.irGovUL li:first-child{padding-top: 0px;}
ul.irGovUL li:last-child{padding-bottom: 0px;  border-bottom: none}

ul.irGovUL li p{position: relative; zoom: 0.9;   padding-bottom: 30px;}
a.termsBtn{
  display: inline-block; background: #c9c9c9;
  padding:6px 15px; color: #fff; border-radius: 50px;

  /*font-family: "Roboto-Bold";*/
}
a.termsBtn:hover{background: #000;}



ul.irEsgUl{
  position: relative;
  width: calc(100% + 40px);
  height: auto;
  margin-left: -20px;
}

ul.irEsgUl li{
  position: relative;
  width: 25%;
  height: auto;
  padding: 0px 20px;
  margin-bottom: 50px;
  overflow: hidden;
}
ul.irEsgUl li a{display: block;position: relative;}
ul.irEsgUl li dl dt {position: relative;width: 100%;}
ul.irEsgUl li dl dt img{width:165px; height:210px; margin:auto;}
ul.irEsgUl li dl dd{zoom: 0.9; line-height: 1.2; text-align: center; position: relative; padding-top: 10px;}




.irFaqTit{
  position: relative;
  width: 100%;
  height: auto;
  padding: 30px 0px;
  text-align: center;
  background: #e2f9ff;
  margin-bottom: 50px;
}

ul.irFaqUl{
  position: relative;
  width: 100%;
  height: auto;
}
ul.irFaqUl li{
  position: relative;
  width: 100%;
  height: auto;
  background: #fff;
  box-shadow: 0px 0 15px rgb(0 0 0 / 30%);
  margin-bottom: 30px;
  padding:20px 30px;
   cursor: pointer;
}
ul.irFaqUl li .irFaqSlide{
  position: relative;
  padding-top: 20px;
  zoom: 0.9;
  display: none;
}
ul.irFaqUl li .irFatitleBx strong{
  display: block;font-size: 20px;font-family: 'Roboto-Bold';
}
ul.irFaqUl li .irFatitleBx span{ font-size: 30px; color: #c9c9c9;}
ul.irFaqUl li .irFatitleBx.active strong{
  color: #3fbee0
}



.irEnquBox{
  position: relative;
  width: 100%;
  height: auto;
  background: #fff;
  box-shadow: 0px 0 15px rgb(0 0 0 / 30%);
  padding: 6vw;
  max-width: 900px;
  margin: 0px auto;
  border-radius: 20px;
}
.irEnquBoxBG{
  position: relative;
  width: 100%;
  height: auto;
  background: url("../images/ir/enquiryIcon.png") center right no-repeat;
  background-size: contain;
}
ul.irEnqUl{
  position: relative; width: 100%;
  height: auto;
  margin-top: 10px;
}
ul.irEnqUl li{
  position: relative;
  padding-bottom: 15px;
}
ul.irEnqUl li:last-child{ padding-bottom:0;}
ul.irEnqUl li span{ color: #3fbee0; padding-right: 10px;}




ul.newCenterUl{
  position: relative;
  display: flex;
  flex-wrap:wrap;
  align-items: stretch;
  height: auto;
  width: calc(100% + 40px);
  margin-left: -20px;
}

ul.newCenterUl li{
  position: relative;
  padding: 0px 20px;
  width: 33.333333%;
  height: auto;
  margin-bottom: 50px;
}

ul.newCenterUl li dl{
  position: relative;
  width: 100%;
  height: auto;
  background: #fff;
  box-shadow: 0px 0 15px rgb(0 0 0 / 30%);
}

ul.newCenterUl li dl dt{position: relative;}
ul.newCenterUl li dl dt .newsData{
 position: absolute;
 background: #3fbee0;
 bottom: 0px;
 left: 0px;
 z-index: 2;
 padding:20px 25px;
 color: #fff;
 text-align: center;
}
ul.newCenterUl li dl dt .newsData span{ display: block; font-size: 40px; line-height: 1.1;}

ul.newCenterUl li dl dd{
  position: relative;
  padding: 20px;
}

ul.newCenterUl li dl dd strong{
  font-size: 20px;
  padding-bottom: 20px;
  line-height: 1.2;
  display: block;
  position: relative;
}

ul.newCenterUl li dl dd p{
  position: relative;
  padding-bottom: 20px;
}
a.newsMore{
  display: inline-block;
  position: relative;
  color: #3fbee0;
}

.infoMain{position: relative; width: 100%; height: auto;}

.pageBanner.newsDetailbaner{padding-bottom: 10px;}
.infoMain.newsDetailInfoM{width: calc(100% + 100px);
  margin-left: -50px;}
ul.newCenterUl.newCenterDetailUl {width: 100%; margin-left: 0px;}
ul.newCenterUl.newCenterDetailUl li{width: 100%; padding: 50px; margin-bottom: 0px;}
ul.newCenterUl.newCenterDetailUl li dl{ padding: 50px;}
ul.newCenterUl.newCenterDetailUl li dl dd{padding: 20px 0px;}



.contactBox{
	margin:auto;
  position: relative;
  width: 100%;
     max-width: 640px;
    height: auto;
    padding: 3vw;
  background: #fff;
  box-shadow: 0px 0 15px rgb(0 0 0 / 30%);
  border-radius: 20px;
}

.contactBox .contactItem{
  position: relative;
  padding: 50px 0px;
  border-bottom: 1px solid #b9b9b9;
}
.contactBox .contactItem:first-child{padding-top: 0px;}
.contactBox .contactItem:last-child{padding-bottom: 0px; border-bottom: none;}




@keyframes RadiantAnimation{
  0%{left:-15px}
  100%{left:100%}
}

@-webkit-keyframes RadiantAnimation{
  0%{left:-15px}
  100%{left:100%}
}

@-moz-keyframes RadiantAnimation{
  0%{left:-15px}
  100%{left:100%}
}



@keyframes slideDow{
  0%{
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
  }
  100%{
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
  }
}

@-webkit-keyframes slideDow{
  0%{
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
  }
  100%{
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
  }
}

@-moz-keyframes slideDow{
  0%{
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
  }
  100%{
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
  }
}