﻿*{margin:0;padding:0;box-sizing:border-box;-webkit-box-sizing:border-box;touch-action: manipulation;-webkit-tap-highlight-color: transparent;outline: none;}
html{overflow-x: hidden;}  
body,input,textarea,select{font-size:16px;color: #000;line-height: 1;font-family:'Microsoft Yahei','PingFang SC';/* ,Arial, Helvetica, sans-serif */}
.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden}
img,video{border:0;max-width: 100%;display:block;}
.imgs{overflow: hidden;}
.imgs img{transition: all .5s;}
a:hover .imgs img{transform: scale(1.08);}
a{text-decoration:none;transition: all .4s;color: #000;}
em,th,i,b{font-style:normal;font-weight:normal;}
ol,ul,li{list-style:none;}
table {border-spacing: 0;border-collapse: collapse}
hr{padding:0;display:block;border:0;border-top:1px solid #666}
input,button,textarea,select{font-size:100%;border:none;outline:none;resize:none;}
textarea{border:1px solid #ccc;outline:0;resize:none;width:100%;}
input{background-color:transparent;outline:0}
input[type=text]::placeholder,textarea::placeholder{color: #666;}
input:focus::placeholder,textarea:focus::placeholder{opacity: 0;}
.app{display: none!important;}
.pc{display: block!important;}
.flex{display: flex;}
.comWrapper{margin:0 auto;padding: 0 50px 0 57px;}

.f-button {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  position: relative;
  margin: 0;
  padding: 0;
  width: var(--f-button-width);
  height: var(--f-button-height);
  border: var(--f-button-border);
  border-radius: var(--f-button-border-radius);
  color: var(--f-button-color);
  background: var(--f-button-bg);
  box-shadow: var(--f-button-shadow);
  pointer-events: all;
  cursor: pointer;
  transition: var(--f-button-transition);
}
.f-button svg {
  width: var(--f-button-svg-width);
  height: var(--f-button-svg-height);
  fill: var(--f-button-svg-fill);
  stroke: currentColor;
  stroke-width: var(--f-button-svg-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.15s ease;
  transform: var(--f-button-transform);
  filter: var(--f-button-svg-filter);
  pointer-events: none;
}
.fancybox__content>.f-button.is-close-btn svg{width: 30px;height: 30px;}
.header{height: 104px;padding-top: 38px;display: flex;justify-content: space-between;}
.header a.logo{width: 73px;display: inline-flex;align-items: center;position: relative;z-index: 99;}
.headR{width: calc(100% - 100px);display: flex;justify-content: flex-end;align-items: center;}
.header .nav{display: flex;justify-content: flex-end;align-items: center;width: 100%;}
.header .nav li{margin-left: 6%;}
.header .nav li a{color: #f22121;text-transform: uppercase;display: block;padding: 10px 30px;position: relative;letter-spacing: 1px;}
.header .nav li a span{position: relative;z-index: 1;}
.header .nav li a::before{position: absolute;top: 0;left: 0;height: 100%;content: '';background-color: #f22121;width: 100%;transition: transform 0.3s ease-in-out;transform-origin: right top;transform: scale(0, 1);}
@media (hover: hover) {
.header .nav li a:hover{color: #fff;}
.header .nav li a:hover::before{width: 100%;transform-origin: left top;transform: scale(1, 1);} 
}
@media (min-width:1200px){
.header .nav li a.cur{color: #fff;}
.header .nav li a.cur::before{width: 100%;transform-origin: left top;transform: scale(1, 1);} 
}
.headR .lang{color: #f22121;margin-left: 8%;position: relative;cursor: pointer;z-index: 9;}
.headR .langTop{display: flex;align-items: center;color: #f22121;width:74px}
.headR .langTop a{display: flex;align-items: center;color: #f22121;width: 100%;}
.headR .langTop a:hover{text-decoration: underline;}
.header.headerBlack{background-color: transparent;position: absolute;top: 0;left: 0;width: 100%;}
@media (hover: hover) {
.header.headerBlack .nav li a{color: #fff;}
}
.header.headerBlack .headR .lang a{color: #fff;}
.header.headerBlack .langTop{color: #fff;}
.header.headerBlack .langTop a:hover{color: #f22121;}

.home{height: calc(100vh);}
.home .video{height: 100%;}
.home .video video{width: 100%;height: 100%;object-fit: cover;}

.information{padding-top: 35px;padding-bottom: 70px;}
.information dl{margin-top: 65px;max-width: 80%;}
.information dt{margin-bottom: 25px;color: #f22121;font-size: 34px;font-weight: 600;letter-spacing: 1px;}
.information dd{text-transform: initial;line-height: 1.7;/* font-weight: 100; */font-size: 16px;}
.information dd p{color: #595757;}
.information a.email{color: #595757;position: relative;}
.information a.email::before{position: absolute;bottom: 0;left: 0;width: 0;height: 1px;background-color: #000;content: '';transition: all .4s;}
.information a.email:hover{color: rgba(0, 0, 0, 1);}
.information a.email:hover::before{width: 100%;}

.maskbg{background-color: rgba(0,0,0,0);position: fixed;z-index: 9;width: 100%;height: 100%;top: 0;left:0;display: none;}
.project .search{border-top: 2px solid #b2b1b1;margin-top: 50px;display: flex;justify-content: flex-end;overflow: hidden;}
.project .search>div{width: 600px;display: inline-flex;justify-content: flex-end;padding-bottom: 15px;padding-top: 35px;position: relative;z-index: 99;max-width: 100%;}
.project .search p{font-size: 20px;text-transform: uppercase;color: #f22121;cursor: pointer;}
.searchBox{align-items: center;border-bottom: 2px dashed #c2c2c2;display: inline-flex;margin-top: 30px;max-width: 600px;width: 100%;padding-bottom: 5px;padding-bottom: 2px;background-color: #fff;position: absolute;top: 0;visibility: hidden;opacity: 0;right: 0;transition: all .4s;padding-bottom: 10px;}
.searchBox.cur{z-index: 1;visibility: visible;opacity: 1;}
.project .search input[type=text]{border: none;width: calc(100% - 40px);}
.project .search input[type=text]::placeholder{text-transform: uppercase;color: #a1a1a1;}
.project .search .searchBox  input[type=image]{opacity: 0;}
.project .search .searchBox.cur input[type=image]{opacity: 1;transition:opacity .1s .4s;width: 26px;}
.project .search .searchBox input[type=text]{position: absolute;right: -100%;top: 0;visibility: hidden;opacity: 0;transition: all .8s;}
.project .search .searchBox.cur input[type=text]{right: 0;z-index: 1;visibility: visible;opacity: 1;}

.project ul{display: flex;flex-wrap: wrap;margin-top: 25px;}
.project ul li{width: calc((100% - 20px) / 3);margin-right: 10px;margin-bottom: 10px;}
.project ul li:nth-of-type(3n){margin-right: 0;}
.project ul li a{display: block;width: 100%;position: relative;cursor: pointer;overflow: hidden;}
.project ul li a img{display: block;width: 100%;}
.project ul li a:hover .imgs{overflow: hidden;}
.project ul li a:hover .imgs img{transform: scale(1.08);}
.project ul li a .txt{position: absolute;left: 50%;width: 100%;transform: translateX(-50%);bottom: -5%;z-index: 1;font-size: 16px;color: #fff;font-weight: 400;text-transform: uppercase;transition: all .4s;opacity: 0;visibility: hidden;background-color: #000;padding:20px;height: 146px;}
.project ul li a:hover .txt{opacity: 1;visibility: visible;bottom: 0;}
.project ul li a .txt .des{display: flex;align-items: flex-start;justify-content: space-between;}
.project ul li a .txt .des span,.project ul li a .txt .des i{font-size: 16px;font-weight: 100;width: 50%;line-height: 1.5;}
.project ul li a .txt .des span{text-align: right;}
.project ul li a .txt p{width: 100%;line-height: 1.4;font-size: 24px;margin-top: 10px;}
.fancybox__content{background: transparent!important;}
.has-iframe .fancybox__content {height: 100%;}
.fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn{padding-top: 0;}
.fancybox__content>.f-button.is-close-btn{background-color: rgba(255, 255, 255, .3);border-radius:50%;opacity: 1;width: 30px;height: 30px;padding: 15px;top: 10%;right: -2%;}
.f-button{width: auto;height: auto;}
.f-button svg{width: auto;height: auto;}
.f-button:focus:not(:focus-visible){outline:none}
.f-button:focus-visible{outline:none;box-shadow:none}
#myCarousel {width:1730px;/* height:  100%; */max-width: 90%;/* min-height: 90%; */margin: auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
#myCarousel .f-carousel__slide {display: flex;justify-content: center;align-items: center;}
.f-carousel__viewport{border-radius: 15px;/* width: calc(100% - 80px);margin: 0 auto;height: auto;position: relative;top: 50%;transform: translateY(-50%); */}
.is-prev{left: -5.5%!important;padding: 10% 15px;}
.is-next{right: -5.5%!important;padding: 10% 15px;}
.imgbox{position: relative;width: 100%;box-shadow: none;}
.imgbox img{/* width: 100%; */height: 100%;object-fit: cover;max-height: 100vh;border-radius: 15px;overflow: hidden;margin: 0 auto;}
.imgbox .txt{position: absolute;left: 3.5%;bottom: 10%;color: #fff;z-index: 111;padding-right: 5%;max-width: 60%;}
.imgbox p{font-weight: 100;line-height: 1.9;letter-spacing: 1px;margin-top: 15px;}
.imgbox p:not(:first-of-type){text-align: justify;}
.imgbox p>span{opacity: .9;text-align: justify;display: block;}
.imgbox p>strong{font-size: 40px;font-weight: 600;letter-spacing: .1em;line-height: 1.15;text-transform: uppercase;}
.imgbox hr{ height:1px;margin:1.5em 0;padding:0;display:block;border:0;border-top:2px solid #fff;}
.imgbox1 img{filter: blur(20px) brightness(50%);}
.imgbox1 .txt{height: 86%;bottom: 7%;}

#myCarousel .f-carousel__slide .imgbox strong,#myCarousel .f-carousel__slide .imgbox hr,#myCarousel .f-carousel__slide .imgbox span{display: block;}
#myCarousel .f-carousel__slide.is-selected:nth-of-type(3) .imgbox img{width: 100%;}
#myCarousel .f-carousel__slide.is-selected .imgbox{box-shadow: none;background: none;}
#myCarousel .f-carousel__slide.is-selected .imgbox strong {animation: ups 1s both .1s;-webkit-animation: ups 1s both .1s;}
#myCarousel .f-carousel__slide.is-selected .imgbox hr{animation: ups 1s both .5s;-webkit-animation: ups 1s both .5s;}
#myCarousel .f-carousel__slide.is-selected .imgbox span,#myCarousel .f-carousel__slide.is-selected .imgbox p{animation: ups 1s both 1s;-webkit-animation: ups 1s both 1s;}
@keyframes ups {
  0% {
      transform: translateY(15px);
      opacity: 0;
  }
  100% {
    transform: translateY(0);
      opacity: 1;
  }
}
@-webkit-keyframes ups {
  0% {
    transform: translateY(15px);
      opacity: 0;
  }
  100% {
    transform: translateY(0);
      opacity: 1;
  }
}

@media (min-width:1200px) and (max-width:1700px){
.imgbox .txt{max-width: 80%;}
.imgbox p>strong{font-size: 28px;}
.project ul li a .txt .des span,.project ul li a .txt .des i{font-size: 15px;}
.project ul li a .txt p{font-size: 21px;}
.fancybox__content>.f-button.is-close-btn{right: -3.5%;}
}

@media (max-width:1200px){
body{font-size: 15px;}
.comWrapper{padding-left: 20px;padding-right: 20px;}
.app{display: block!important;}
.pc{display: none!important;}
.header{padding-top: 14px;height: inherit;padding-bottom: 8px;padding-right: 5px;}
.header a.logo{position: relative;z-index: 9999;}
.header a.logo img{height: 40px;}
.menu-handler{width:58px;height:58px;cursor:pointer;position:relative;z-index:9999;}
.menu-handler .burger{width:24px;height:2px;background:#f22121;display:block;position:absolute;z-index:5;top:20px;left:50%;margin:0px 0px 0px -12px;-webkit-transform-origin:center;transform-origin:center;}
.header.headerBlack .menu-handler .burger{background:#fff;}
.menu-handler .burger-2{top:27px}
.menu-handler .burger-3{top:35px}
.menu-handler.active .burger-1{top:27px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.menu-handler.active .burger-2{opacity:0;}
.menu-handler.active .burger-3{top:27px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.trans,.trans:hover{-webkit-transition:all 277ms ease-in-out;transition:all 277ms ease-in-out;}
.trans-fast,.trans-fast:hover{-webkit-transition:all 200ms ease-in-out;transition:all 200ms ease-in-out;-ms-transition:all 200ms ease-in-out}
.header .nav{position: fixed;top:-100%;/* top:80px; */width:100%;height:100vh;z-index:999;background:#fff;left: auto;flex-direction: column;justify-content:center;align-items: center;padding-top: 0px;left: 0;}
.header.headerBlack.cur{background-color: #000;}
.header.headerBlack .nav{background-color: #000;}
.header.headerBlack .nav a{color: #fff;}
.header .nav li{margin-left: 0;}
.header .nav li a{padding: 15px 25px;font-size: 24px;}
.headR .lang.active{position: fixed;left: -10px;bottom: 20px;z-index: 9999;}
.information{padding-top: 0;padding-bottom: 50px;}
.information dl{margin-top: 45px;}
.information dt{font-size: 25px;margin-bottom:20px}
.information dd{font-size: 14px;line-height: 1.6;font-weight: 500;}
.information dd p+p{margin-top: 8px;}
.project .search{margin-top: 35px;padding-top: 0;}
.project .search p{font-size: 16px;}
.project .search input[type=image]{width: 22px;}
.project ul li{width: 100%;margin-right: 0px!important;}
.project ul li a .txt{position: relative;left: auto;top: auto;transform: none;opacity: 1;visibility: visible;width: 100%;padding:20px 15px;}
.project ul li a .txt .des{align-items: flex-start;line-height:1.5}
.project ul li a .txt .des span,.project ul li a .txt .des i{font-size: 14px;width: 50%;word-wrap:break-word}
.project ul li a .txt .des span{text-align: right;}
.project ul li a .txt p{font-size: 18px;}
#myCarousel{max-width: 94%;}
.imgbox .txt{bottom: 5%;left: 5%;}
.imgbox p{font-size: 14px;letter-spacing: 0;line-height: 1.75;}
.imgbox p>strong{font-size: 24px;letter-spacing: 0;line-height: 1;}
.imgbox img{height: 80vh;object-fit: cover;}
.imgbox hr{border-width: 1px;}
.f-button{text-align: center;}
.f-button svg{width: 20px;height: inherit;}
.is-compact .fancybox__content>.f-button.is-close-btn{top: 9vh;right: -8px;}
.fancybox__content>.f-button.is-close-btn{width: 25px;height: 25px;padding: 5px;}
.projectDetail{margin-top: 20px;}
.projectDetail p{line-height: 1.6;font-size: 17px;}
.projectDetail p strong{font-size: 24px;font-weight: 500;}
.projectDetail p span{color: rgba(0, 0, 0, .8);text-align: justify;display: block;}
.detailBox{margin-top: 20px;}
}

.information{padding-bottom: 50px;}
.foot{border-top: 2px solid #929292;display: flex;align-items: center;justify-content: space-between;padding: 50px 0 0;margin-top: 100px;} 
.foot .l{display: flex;align-items: flex-end;}
.foot .l p{color: #595757;margin-right: 30px;display: inline-flex;align-items: flex-end;}
.foot .l a{align-items: flex-end;display: inline-flex;margin-left: 60px;}
.foot .l span{display: inline-flex;color: #595757;margin-left: 25px;}
.foot .r p a{color: #595757;}
.wxPop{height: calc(100vh - 130px - 104px);background-color: #fff;width: 100%;display: flex;align-items: center;justify-content: center;text-align: center;}
.wxPop p{color: #000;font-size: 20px;}
.wxPop .img{margin: 60px auto;}
.wxPop .img img{display: inline-block;}
.wxPop dt{color: #000;font-size: 25px;font-weight: 600;margin-bottom: 15px;}
.wxPop dd{color: #595757;}
@media (max-width:1200px){
.foot{display: block;/* margin: 0 20px 0 20px; */padding-top: 30px;margin-top: 40px;}
.foot .l{margin-bottom: 20px;flex-wrap: wrap;}
.foot .l p{width: 100%;}
.foot .l a{margin-left: 0;margin-top: 15px;display: flex;width: 100%;font-size:13px}
.foot .r p a{font-size:13px}
.foot .l a img{width: 35px!important;}
.foot .l span{margin-left: 15px;font-size:13px}
.wxPop{height: initial;padding: 30px 0 40px;height: 70vh;}
.wxPop p{max-width: 90%;margin: 0 auto;line-height: 1.5;font-size: 17px;}
.wxPop .img{margin: 30px auto;}
.wxPop .img img{width: 160px;}
.wxPop dt{font-size: 18px;}
.wxPop dd{font-size: 13px;}
.project ul li a .txt{height: initial;}
}
.information dl.iconList{max-width: 100%;}
.iconList dd{display: flex;align-items: flex-start;flex-wrap: wrap;justify-content: space-between;}
.iconList dd .icon{/*margin: 0 2.6%;*/}
.iconList dd .icon .img{height: 50px;display: flex;align-items: center;}
.iconList dd img{display: block;margin: 0 auto 15px;}
.iconList dd p{font-weight: 900;color: #848383;font-size: 16px;width: auto;display: inline-flex;position: relative;left: 50%;transform: translateX(-50%);}
.iconList dd .icon:first-of-type{margin-left: 0;}
/* .iconList dd .icon:first-of-type img{margin-left: 20px;} 
.iconList dd .icon:first-of-type p{left: 0;transform: none;}
.iconList dd .icon:last-of-type{margin-right: 0;}
.iconList dd .icon:last-of-type img{margin-right: 25px;}
.iconList dd .icon:last-of-type p{left: 0;transform: none;}*/
@media (min-width:1200px) and (max-width:1700px){
.information dl{max-width: 90%;}
.iconList dd .icon{/*margin: 0 1.3%;*/}
}
@media (max-width:1200px){
.information dl{max-width: 100%;}
.iconList dd .icon{margin: 0!important;width:50%;margin-bottom: 20px!important;}
.iconList dd .icon:first-of-type img{margin-left: auto;}
.iconList dd .icon:first-of-type p{left: 50%;transform: translateX(-50%);}
.iconList dd .icon{width: 65%;}
.iconList dd .icon p{text-align: center;}
.iconList dd .icon:nth-of-type(2n-1){width: 35%;}
.iconList dd .icon:last-of-type p{left: 50%;transform:translateX(-50%) ;}
.iconList dd .icon:last-of-type img{margin-right: auto;}
.foot .l a:nth-of-type(2){margin-top: 0;}
}

