@charset "utf-8";

::-webkit-scrollbar{width: 6px; height: 6px;}
::-webkit-scrollbar-track{background: #fff;}
::-webkit-scrollbar-thumb{background: #000;}
::-webkit-scrollbar-thumb:vertical:hover{background: #464646;}

body,td,th,input,textarea,select{font-family: 'Muli', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Microsoft YaHei','PingFang SC', 'Source Han Sans SC', 'Noto Sans CJK SC', Helvetica, Arial, sans-serif; color: #464646; outline: none;}
html{font-size: 62.5%;}
html, body{background: #fff; width:100%;}
body.noscroll{overflow: hidden;}
html,body,form{margin: 0;}
img{border: 0px none; vertical-align: middle; outline: none; max-width: 100%; width: auto; height: auto;}
ul,dl{display: block; margin: 0; padding: 0;}
ul,dl{display: block; margin: 0; padding: 0;}
dd{margin: 0; padding: 0;}
li{list-style: none;}
p{display: block; margin: 0; padding: 0;}
a,button,input,img,div,p,li,span{border: 0px none; outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;}
table{border-collapse: collapse;}
a{text-decoration: none; color: #43454b; outline: none;}
a:active{color: #04458e;}
div::after, ul::after, li::after, p::after, dl::after{content: ''; display: block; width: 0; height: 0; clear: both; font-size: 0;}
.after-none::after{display: none;}
#think_page_trace_open{z-index: 999998;}
*{line-height: 1;}
mark{display: inline-block;}


.wrap{max-width: 1700px; margin: auto; padding-left: 100px; box-sizing: border-box;}

@media (max-width:1680px){
  .wrap{max-width: 1600px;}
}
@media (max-width:1440px){
  .wrap{max-width: 1350px; padding-left: 60px; padding-right: 30px;}
}
@media (max-width:1366px){
  .wrap{max-width: 1300px; padding-left: 60px; padding-right: 30px;}
}
@media (max-width:1024px){
  .wrap{max-width: 960px; padding-left: 30px; padding-right: 30px;}
}
@media (max-width:1000px){
  .wrap{max-width: 100%; padding-left: 0; padding-right: 0;}
}


#wrapper{position: relative; transition: all .45s;}
#wrapper::after{content: ''; display: block; width: 100%; height: 100%; left: 0; top: 0; position: fixed; z-index: 99999; transition: all .35s; visibility: hidden;}
#wrapper.active{overflow: hidden; transform: translateX(115px);}
#wrapper.active::after{background: rgba(0,0,0, .36); visibility: visible;}


#menu{position: fixed; z-index: 10000; left: 0; top: 0; width: 480px; height: 100%; background: #fff; transform: translateX(-480px); transition: all .45s;}
#menu.active{box-shadow: 8px 0 30px rgba(0,0,0, .08); transform: translateX(0);}
#menu .logo{margin: 50px auto auto 120px;}
#menu .mp-logo{display: none;}
#menu .close{position: absolute; left: 35px; top: 48px; display: block; width: 36px; height: 36px; text-align: center; line-height: 38px; border-radius: 50%; transition: all .3s;}
#menu .close:hover{transform: rotate(90deg); background: #eff0f2;}
#menu .close>i{color: #111; font-size: 1.4rem;}

#menu .list{margin: 40px auto auto 120px; padding-top: 20px;}
#menu .list dl{margin-bottom: 32px;}
#menu .list dl dt>a{display: block; color: #111; font-size: 1.76rem;}
#menu .list p{height: 20px;}
#menu .list dl dd{margin-top: 12px;}
#menu .list dl dd>a{display: block; font-size: 1.6rem; height: 26px; line-height: 26px; color: #0e55a4;}
#menu .list dl a:hover{text-decoration: underline;}

#menu .btn{position: absolute; left: 120px; bottom: 50px; color: #111; font-size: 1.6rem; border: 1px solid #191919; border-radius: 30px; display: block; width: 190px; height: 39px; line-height: 39px; text-align: center; transition: all .3s;}
#menu .btn:hover{background: #191919; color: #fff;}
#menu .btn>i{margin-right: 8px; font-size: 1.8rem; position: relative; top: 1px;}


@media (max-width:1000px){
  #menu{width: 100%; transform: translateX(-100%);}
  #menu .logo{display: none;}
  #menu .mp-logo{display: block; margin: 32px auto auto 100px;}
  #menu .mp-logo img{height: 26px;}
  #menu .close{left: 25px; top: 28px;}

  #menu .list{margin: 25px auto auto 98px;}
  #menu .list dl{margin-bottom: 25px;}
  #menu .list dl dt>a{font-size: 1.7rem;}
  #menu .list dl dt>a.big{font-size: 2.6rem;}
  #menu .list p{height: 20px;}
  #menu .list dl dd{margin-top: 10px;}
  #menu .list dl dd>a{display: block; font-size: 1.6rem; height: 24px; line-height: 24px;}

  #menu .btn{left: 98px; bottom: 35px;}
}



#top{height: 42px; background: #111; display: none;}
#top .wrap{display: flex; justify-content: space-between; font-size: 1.4rem;}
#top .wrap::after{display: none;}

#top .l a{color: #fff; vertical-align: middle; display: inline-block; height: 42px; line-height: 40px; padding: 0 3px; transition: all .25s; font-size: 1.6rem;}
#top .l a i{color: #fff; margin-right: 7px;}
#top .l .icon-Phone-Shopping{font-size: 1.72rem; top: 1px; position: relative;}
#top .l a.mail, #top .l a.skype, #top .l a.whatsapp{margin-left: 12px;}
#top .l a .icon-mail{font-size: 2rem; top: 2px; position: relative;}
#top .l a .icon-logo-skype{font-size: 1.8rem; top: 2px; position: relative;}
#top .l a .icon-whatsapp1{font-size: 1.8rem; top: 2px; position: relative;}
#top .l a:hover{opacity: .8;}

#top .r{text-align: right;}
#top .r a{color: #fff; vertical-align: middle; display: inline-block; height: 42px; line-height: 40px; padding: 0 3px; transition: all .2s; margin-right: 3px;}
#top .r a:hover{opacity: .8;}
#top .r .icon-facebook{font-size: 1.5rem;}
#top .r .icon-twitter{font-size: 1.62rem;}
#top .r .icon-linkedin{font-size: 1.68rem;}

#top .r .btn{background: #04458e; padding: 0 20px; margin-left: 14px; margin-right: 0;}
#top .r .btn:hover{background: #279830; opacity: 1;}
#top .r .btn i{position: relative; top: -1px; font-size: 1.7rem; vertical-align: middle; margin-right: 5px;}

@media (max-width:1000px){
  #top{display: none;}
}


#head{height: 100px; background: #fff; position: relative; z-index: 9;}

.nav-container{width: 100px; height: 100px; text-align: center; position: fixed; z-index: 999; margin-left: -130px;}
#nav{width: 42px; height: 42px; display: inline-block; text-align: center; line-height: 42px; position: relative; top: 29px; transition: all .25s; background: #fff;}
#nav:hover{background: #f5f5f5; border-radius: 50%;}
#nav i{display: block; width: 16px; height: 2px; background: #111; position: absolute; top: 20px; left: 13px;}
#nav i::before{width: 16px; height: 2px; content: ''; display: block; position: absolute; top: -5px; background: #111;}
#nav i::after{width: 16px; height: 2px; content: ''; display: block; position: absolute; bottom: -5px; background: #111;}

#head .logo{display: block; width: 245px; height: 60px; position: relative; z-index: 1; top: 21px; line-height: 60px; float: left;}
#head .mp-logo{display: none;}

#head .menu{width: 760px; float: left; height: 100px; margin-left: 100px;}
#head .menu>li{float: left; margin-right: 5px; height: 100%; position: relative;}
#head .menu>li>a{display: block; height: 100%; line-height: 100px; color: #111; font-size: 1.4rem; padding: 0 20px; font-family: 'Montserrat'; text-transform: uppercase; transition: all .25s;}
#head .menu>li:hover>a{color: #0e55a4;}
#head .menu>li>i{position: absolute; left: 50%; top: 62px; margin-left: -6px; font-size: 1.4rem; color: #111; transition: all .18s;}
#head .menu>li:hover>i{top: 70px; color: #30a239;}

#head .menu>li>div{position: absolute; left: 0; top: 103px; background: #fff; min-width: 240px; opacity: 0; visibility: hidden; transition: all .15s; border-top: 3px solid #2e7eef;}
#head .menu>li:hover>div{opacity: 1; top: 100px; visibility: visible; transition: all .25s;}
#head .menu>li>div>a{display: block; color: #111; font-size: 1.3rem; padding: 17px 20px; border-bottom: 1px solid #ededed; transition: all .3s;}
#head .menu>li>div>a>img{width: 50px; height: 35px; background: #eee; display: inline-block; margin-right: 10px;}
#head .menu>li>div>a:last-child{border-bottom: 0px none;}
#head .menu>li>div>a:hover{background: #0e55a4; color: #fff;}

#head .search-container{width: 360px; height: 46px; float: right; margin-top: 26px; position: relative; z-index: 1;}
#head .search-container .icon-search{font-size: 2.2rem; color: #111; position: absolute; right: 17px; top: 12px; cursor: pointer;}
#head .search-container input{width: 100%; height: 100%; line-height: 46px; background: #f5f5f5; border-radius: 30px; font-size: 1.56rem; padding-left: 22px; padding-right: 48px; box-sizing: border-box;}
#head .search-container input::placeholder{color: #999;}

#head .mp-search, #head .mp-search-container{display: none;}

@media (max-width:1680px){
  #head .menu{margin-left: 55px;}
}
@media (max-width:1560px){
  #head .search-container{width: 320px;}
}
@media (max-width:1480px){
  #head .search-container{width: 280px;}
}

@media (max-width:1440px){
  .nav-container{margin-left: -95px;}

  #head .wrap{max-width: 1380px; padding-left: 60px; padding-right: 0;}

  #head .menu{width: 710px; margin-left: 40px;}
  #head .menu>li{margin-right: 4px;}
  #head .menu>li>a{padding: 0 16px;}
  #head .search-container{width: 290px;}
}
@media (max-width:1366px){
  #head .wrap{max-width: 1330px; padding-left: 60px; padding-right: 0;}

  #head .menu{width: 680px; margin-left: 35px;}
  #head .menu>li{margin-right: 0;}
  #head .menu>li>a{padding: 0 15px; font-size: 1.4rem;}
  #head .menu>li>div>a{font-size: 1.5rem;}
  #head .search-container{width: 270px;}
}
@media (max-width:1280px){
  #head{min-height: 76px; height: auto; transition: all .3s;}

  .nav-container{width: 76px; height: 76px; text-align: center; margin-left: 0; left:-14px; top: 0; transition: all .2s;}
  .nav-container.active{top: -15px;}
  #nav{top: 18px;}
  .nav-container.active #nav{box-shadow: 5px 5px 15px rgba(0,0,0, .08);}

  #head .logo{display: none;}
  #head .mp-logo{display: block; width: 200px; height: 76px; top: 0; line-height: 78px; float: none; text-align: center; margin: auto; position: absolute; left: 0; right: 0;}
  #head .mp-logo>img{height: 26px;}

  #head .menu, #head .search-container{display: none;}
  #head .mp-search{display: block; width: 42px; height: 42px; line-height: 42px; position: absolute; right: 5px; top: 21px; text-align: center;}
  #head .mp-search>i{font-size: 2.1rem; color: #111;}
  #head .mp-search-container{display: block; padding: 0 15px 0 15px; position: relative; height: 0; overflow: hidden; transition: all .23s;}
  #head .mp-search-container.active{padding: 5px 15px 15px 15px; height: 50px;}
  #head .mp-search-container input{background: #eee; width: 100%; padding: 11px 32px 11px 10px; box-sizing: border-box; font-size: 1.6rem; font-weight: 300; position: relative; z-index: 1;}
  #head .mp-search-container input::placeholder{line-height: 1.3;}
  #head .mp-search-container .icon-_delete-big{position: absolute; right: 18px; top: 12px; font-size: 1.2rem; display: block; width: 32px; height: 32px; text-align: center; line-height: 32px; z-index: 2;}
}


#foot{background: #121212; position: relative; z-index: 2;}
#foot .container{padding-top: 80px; padding-bottom: 80px;}

#foot .tit-container{color: #fff; margin-top: -10px;}
#foot .tit-container .tit{color: #fff;}
#foot .tit-container .desc{color: #bbb;}

#foot .list{margin-top: 50px; display: flex; justify-content: space-between;}
#foot .list a{border: 1px solid #2b2b2b; width: 30%; padding: 20px 20px 50px 20px; box-sizing: border-box; transition: all .2s; position: relative; background: #2b2b2b; display: block;}
#foot .list a:hover{border: 1px solid rgba(255,255,255, .3); background: #2b2b2b;}
#foot .list a .tit{color: #fff; font-size: 1.6rem; line-height: 1.25;}
#foot .list a .date{color: #bbb; margin-top: 12px; font-size: 1.3rem; position: absolute; bottom: 20px;}
#foot .list a .date i{vertical-align: middle; position: relative; top: -1px; color: #bbb; margin-right: 6px;}

#foot .btm{border-top: 1px solid rgba(255,255,255, .12); padding: 30px 0;}
#foot .btm .wrap{display: flex; justify-content: space-between;}
#foot .btm-l-tit{color: #fff; font-size: 1.6rem; font-weight: bold; display: inline-block; vertical-align: middle; margin-right: 16px; position: relative; top: -1px;}
#foot .btm-l a{display: inline-block; width: 36px; height: 36px; background: #000; vertical-align: middle; text-align: center; line-height: 36px; color: #999; transition: all .35s;}
#foot .btm-l a:hover{background: #0e55a4; color: #fff;}
#foot .btm-r{text-align: right; color: #777; font-size: 1.3rem; line-height: 1.5;}
#foot .btm-r a{color: #999;}
#foot .btm-r a:hover{color: #fff; text-decoration: underline;}
#foot .btm-l i{position: relative; top: 1px;}
#foot .btm-l .icon-instagram{font-size: 1.75rem; position: relative; top: 2px;}

@media (max-width:1280px){
  #foot .wrap{display: block;}
  #foot .container{padding: 60px 15px;}
  #foot .l{width: 100%;}

  #foot .list{display: block;}
  #foot .list a{width: 100%; margin-bottom: 1px;}

  #foot .btm{padding: 30px 15px 36px 15px;}
  #foot .btm .wrap{display: block;}
  #foot .btm-r{text-align: left;}
}


#to-top{display: block; width: 50px; height: 50px; background: #111; position: fixed; z-index: 99999; right: -50px; bottom: 5px; text-align: center; opacity: .8; transition: all .3s; cursor: pointer;}
#to-top.active{right: 5px;}
#to-top:hover{opacity: 1;}
#to-top i{font-size: 2.8rem; padding-top: 5px; display: inline-block;}
#to-top i, #to-top div{color: #fff;}
#to-top div{font-size: 1.2rem; margin-top: -3px;}

@media (max-width:1366px){
  #to-top{display: block; width: 45px; height: 45px; right: -45px; bottom: 5px;}
  #to-top i{font-size: 2.4rem; padding-top: 4px;}
  #to-top div{font-size: 1rem; margin-top: -3px;}
}


/* 只显示一行 */
.ellipsis{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/* 只显示两行 */
.ellipsis-line-2{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 只显示三行 */
.ellipsis-line-3{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}



/* getmore相关 */
#backbuttonstate{display: none;}

#getmore{height: 47px; margin-top: 10px; margin-bottom: 20px; text-align: center;}

#getmore .loading-box{margin: 0px 0 100px 0; height: 47px; text-align: center; line-height: 47px; display: none;}
#getmore .loading-box>div{width: 12px; height: 12px; background-color: #1885f5; border-radius:100%; display:inline-block; animation:bouncedelay 1.4s infinite ease-in-out; animation-fill-mode:both; margin:0 3px;}
#getmore .loading-box .bounce1{animation-delay:-0.32s;}
#getmore .loading-box .bounce2{animation-delay:-0.16s;}
@keyframes bouncedelay{
  0%,80%,100% {transform: scale(0.0);}
  40%{transform: scale(1.0);}
}

#getmore .handle{padding: 0 40px; font-size: 1.5rem; color: #2b2b2b; background: #fff; height: 47px; line-height: 45px; display: inline-block; transition: all .2s; display: none; border-radius: 100px; border: 1px solid #999;}
#getmore .handle>span{font-size:1rem; transform:scale(.7); display:inline-block; vertical-align:top; margin-left:.6rem;}
#getmore .handle:hover{background: #0e55a4; border: 1px solid #0e55a4; color: #fff;}


/* 当前位置 */
#path{background: #fff; padding: 20px 0; position: fixed; z-index: 998; top: 100px; width: 100%;}
#path a{display: inline-block; font-size: 1.3rem;}
#path a:hover{text-decoration: underline;}
#path a>i{font-size: 1.3rem; margin-right: 5px;}
#path .split::after{content: '\e615'; font-family: 'iconfont'; font-size: 1.2rem; color: #ccc; margin-left: 5px; display: inline-block; width: 15px;}


/* 内页栏目banner下的子菜单 */
#child{padding: 70px 0; background: #fafafa;}
#child .wrap{height: 80px; box-shadow: 0 10px 25px -4px rgba(24, 92, 197, 0.18); display: flex; justify-content: space-between; overflow: hidden;}
#child .wrap>a{display: block; height: 100%; text-align: center; width: 33.333333%; line-height: 80px; background: #fff; color: #2e2d3c; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei'; font-size: 1.9rem; position: relative; transition: all .35s;}
#child .wrap>a::after{content: ''; display: block; width: 1px; height: 1.9rem; background: #ccc; position: absolute; right: 0; top: 31px;}
#child .wrap>a:last-child::after{display: none;}
#child .wrap>a:hover{background: #2e7eef; color: #fff;}
#child .wrap>a.active{background: #2e7eef; color: #fff;}
#child .wrap>a:hover::after, #child .wrap>a.active::after{display: none;}


@media (max-width:1280px){
  /* 去掉AOS的默认隐藏状态 */
  [data-aos^=fade][data-aos^=fade]{
    opacity: 1;
  }
  /* 去掉默认的搜索小图标 */
  input[type="search"]::-webkit-search-decoration{
    display: none;
  }
  /* 去掉默认的x */
  input[type="search"]::-webkit-search-cancel-button{
    display: none;
  }
  /* 去掉ios下的圆角 */
  input[type='search']{
    -webkit-appearance: none;
  }
}





















