@font-face { font-family:FUTURA; src: url("../img/font/FUTURAMDBTMEDIUM.TTF"); } @font-face { font-family:PFD; src: url("../img/font/PFDinTextCompPro-Regular.ttf"); } /* pswp = photoswipe */ .pswp{display:none;position:absolute;width:100%;height:100%;left:0;top:0;overflow:hidden;-ms-touch-action:none;touch-action:none;z-index:1500;-webkit-text-size-adjust:100%;-webkit-backface-visibility:hidden;outline:0} .pswp *{-webkit-box-sizing:border-box;box-sizing:border-box} .pswp img{max-width:none} .pswp--animate_opacity{opacity:.001;will-change:opacity;-webkit-transition:opacity 333ms cubic-bezier(.4,0,.22,1);transition:opacity 333ms cubic-bezier(.4,0,.22,1)} .pswp--open{display:block} .pswp--zoom-allowed .pswp__img{cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in} .pswp--zoomed-in .pswp__img{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab} .pswp--dragging .pswp__img{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing} .pswp__bg{position:absolute;left:0;top:0;width:100%;height:100%;background:url(../images/black_90.png) repeat;background:none rgba(0,0,0,.9);opacity:0;transform:translateZ(0);-webkit-backface-visibility:hidden;will-change:opacity} .pswp__scroll-wrap{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden} .pswp__container,.pswp__zoom-wrap{-ms-touch-action:none;touch-action:none;position:absolute;left:0;right:0;top:0;bottom:0} .pswp__container,.pswp__img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none} .pswp__zoom-wrap{position:absolute;width:100%;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transition:-webkit-transform 333ms cubic-bezier(.4,0,.22,1);transition:transform 333ms cubic-bezier(.4,0,.22,1)} .pswp__bg{will-change:opacity;-webkit-transition:opacity 333ms cubic-bezier(.4,0,.22,1);transition:opacity 333ms cubic-bezier(.4,0,.22,1)} .pswp--animated-in .pswp__bg,.pswp--animated-in .pswp__zoom-wrap{-webkit-transition:none;transition:none} .pswp__container,.pswp__zoom-wrap{-webkit-backface-visibility:hidden} .pswp__item{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden} .pswp__img{position:absolute;width:auto;height:auto;top:0;left:0} .pswp__img--placeholder{-webkit-backface-visibility:hidden} .pswp__img--placeholder--blank{background:#222} .pswp--ie .pswp__img{width:100%!important;height:auto!important;left:0;top:0} .pswp__error-msg{position:absolute;left:0;top:50%;width:100%;text-align:center;font-size:14px;line-height:16px;margin-top:-8px;color:#CCC} .pswp__error-msg a{color:#CCC;text-decoration:underline} .pswp__button{width:44px;height:44px;position:relative;background:0 0;cursor:pointer;overflow:visible;-webkit-appearance:none;display:block;border:0;padding:0;margin:0;float:right;opacity:.75;-webkit-transition:opacity .2s;transition:opacity .2s;-webkit-box-shadow:none;box-shadow:none} .pswp__button:focus,.pswp__button:hover{opacity:1} .pswp__button:active{outline:0;opacity:.9} .pswp__button::-moz-focus-inner{padding:0;border:0} .pswp__ui--over-close .pswp__button--close{opacity:1} .pswp__button{background:url(../images/default-skin.png) 0 0 no-repeat;background-size:264px 88px;width:44px;height:44px} @media (-webkit-min-device-pixel-ratio:1.1),(-webkit-min-device-pixel-ratio:1.09375),(min-resolution:105dpi),(min-resolution:1.1dppx){ .pswp--svg .pswp__button{background-image:url(../images/default-skin.svg);} .pswp__button--close{color:#fff} } .pswp__button--close{background-position:0 -44px} .pswp__button--share{background-position:-44px -44px} .pswp__button--fs{display:none} .pswp--supports-fs .pswp__button--fs{display:block} .pswp--fs .pswp__button--fs{background-position:-44px 0} .pswp__button--zoom{display:none;background-position:-88px 0} .pswp--zoom-allowed .pswp__button--zoom{display:block} .pswp--zoomed-in .pswp__button--zoom{background-position:-132px 0} .pswp--touch .pswp__button--arrow--left,.pswp--touch .pswp__button--arrow--right{visibility:hidden} .pswp__button--arrow--left,.pswp__button--arrow--right{top:50%; width: 42px; height: 42px; line-height: 42px; margin-top: -21px; position: absolute; border-radius: 50%; border: 2px solid #fff; color: #fff; background:none; display: block; font-family:"iconfont" !important;font-size:24px; text-align: center; font-style:normal; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} .pswp__button--arrow--left{left:2%} .pswp__button--arrow--right{right:2%;} .pswp__button--arrow--left:before{content: "\e61d";} .pswp__button--arrow--right:before{content: "\e61e";} .pswp__button--arrow--left:hover,.pswp__button--arrow--right:hover{color:#E60012; border-color: #E60012;} .pswp__counter,.pswp__share-modal{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .pswp__share-modal{display:block;background:rgba(0,0,0,.5);width:100%;height:100%;top:0;left:0;padding:10px;position:absolute;z-index:1600;opacity:0;-webkit-transition:opacity .25s ease-out;transition:opacity .25s ease-out;-webkit-backface-visibility:hidden;will-change:opacity} .pswp__share-modal--hidden{display:none} .pswp__share-tooltip{z-index:1620;position:absolute;background:#FFF;top:56px;border-radius:2px;display:block;width:auto;right:44px;-webkit-box-shadow:0 2px 5px rgba(0,0,0,.25);box-shadow:0 2px 5px rgba(0,0,0,.25);-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);-webkit-transition:-webkit-transform .25s;transition:transform .25s;-webkit-backface-visibility:hidden;will-change:transform} .pswp__share-tooltip a{display:block;padding:8px 12px;color:#000;text-decoration:none;font-size:14px;line-height:18px} .pswp__share-tooltip a:hover{text-decoration:none;color:#000} .pswp__share-tooltip a:first-child{border-radius:2px 2px 0 0} .pswp__share-tooltip a:last-child{border-radius:0 0 2px 2px} .pswp__share-modal--fade-in{opacity:1} .pswp__share-modal--fade-in .pswp__share-tooltip{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)} .pswp--touch .pswp__share-tooltip a{padding:16px 12px} a.pswp__share--facebook:before{content:'';display:block;width:0;height:0;position:absolute;top:-12px;right:15px;border:6px solid transparent;border-bottom-color:#FFF;-webkit-pointer-events:none;-moz-pointer-events:none;pointer-events:none} a.pswp__share--facebook:hover{background:#3E5C9A;color:#FFF} a.pswp__share--facebook:hover:before{border-bottom-color:#3E5C9A} a.pswp__share--twitter:hover{background:#55ACEE;color:#FFF} a.pswp__share--pinterest:hover{background:#CCC;color:#CE272D} a.pswp__share--download:hover{background:#DDD} .pswp__counter{float:left;height:44px;font-size:13px;line-height:44px;color:#FFF;opacity:.75;padding:0 10px} .pswp__caption{position:absolute;left:0;bottom:0;width:100%;min-height:44px} .pswp__caption__center{text-align:center;max-width:600px;font-size:15px;margin:0 auto;padding:20px 10px;color:#fff} .pswp__caption__center .xzy-zan{float:right;display:block} .pswp__caption--empty{display:none} .pswp__caption--fake{visibility:hidden} .pswp__preloader{width:44px;height:44px;position:absolute;top:0;left:50%;margin-left:-22px;opacity:0;-webkit-transition:opacity .25s ease-out;transition:opacity .25s ease-out;will-change:opacity;direction:ltr} .pswp__preloader__icn{width:20px;height:20px;margin:12px} .pswp__preloader--active{opacity:1} .pswp__preloader--active .pswp__preloader__icn{background:url(preloader.gif) 0 0 no-repeat} .pswp--css_animation .pswp__preloader--active{opacity:1} .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn{-webkit-animation:clockwise .5s linear infinite;animation:clockwise .5s linear infinite} .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut{-webkit-animation:donut-rotate 1s cubic-bezier(.4,0,.22,1) infinite;animation:donut-rotate 1s cubic-bezier(.4,0,.22,1) infinite} .pswp--css_animation .pswp__preloader__icn{background:0 0;opacity:.75;width:14px;height:14px;position:absolute;left:15px;top:15px;margin:0} .pswp--css_animation .pswp__preloader__cut{position:relative;width:7px;height:14px;overflow:hidden} .pswp--css_animation .pswp__preloader__donut{-webkit-box-sizing:border-box;box-sizing:border-box;width:14px;height:14px;border:2px solid #FFF;border-radius:50%;border-left-color:transparent;border-bottom-color:transparent;position:absolute;top:0;left:0;background:0 0;margin:0} @media screen and (max-width:1024px){.pswp__preloader{position:relative;left:auto;top:auto;margin:0;float:right} } @-webkit-keyframes clockwise{0%{-webkit-transform:rotate(0);transform:rotate(0)} 100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)} } @keyframes clockwise{0%{-webkit-transform:rotate(0);transform:rotate(0)} 100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)} } @-webkit-keyframes donut-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)} 50%{-webkit-transform:rotate(-140deg);transform:rotate(-140deg)} 100%{-webkit-transform:rotate(0);transform:rotate(0)} } @keyframes donut-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)} 50%{-webkit-transform:rotate(-140deg);transform:rotate(-140deg)} 100%{-webkit-transform:rotate(0);transform:rotate(0)} } .pswp__ui{-webkit-font-smoothing:auto;visibility:visible;opacity:1;z-index:1550} .pswp__top-bar{position:absolute;left:0;top:0;height:44px;width:100%} .pswp--has_mouse .pswp__button--arrow--left,.pswp--has_mouse .pswp__button--arrow--right,.pswp__caption,.pswp__top-bar{-webkit-backface-visibility:hidden;will-change:opacity;-webkit-transition:opacity 333ms cubic-bezier(.4,0,.22,1);transition:opacity 333ms cubic-bezier(.4,0,.22,1)} .pswp--has_mouse .pswp__button--arrow--left,.pswp--has_mouse .pswp__button--arrow--right{visibility:visible} .pswp__caption,.pswp__top-bar{background-color:rgba(0,0,0,.5)} .pswp__ui--fit .pswp__caption,.pswp__ui--fit .pswp__top-bar{background-color:rgba(0,0,0,.3)} .pswp__ui--idle .pswp__top-bar{opacity:1} .pswp__ui--idle .pswp__button--arrow--left,.pswp__ui--idle .pswp__button--arrow--right{opacity:0} .pswp__ui--hidden .pswp__button--arrow--left,.pswp__ui--hidden .pswp__button--arrow--right,.pswp__ui--hidden .pswp__caption,.pswp__ui--hidden .pswp__top-bar{opacity:.001} .pswp__ui--one-slide .pswp__button--arrow--left,.pswp__ui--one-slide .pswp__button--arrow--right,.pswp__ui--one-slide .pswp__counter{display:none} .pswp__element--disabled{display:none!important} .pswp--minimal--dark .pswp__top-bar{background:0 0} #gallery2 .pswp__caption__center{text-align:center;font-size:18px} /*main style end*/ /*index-begin*/ /*header-begin*/ #header{ position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 124px; background-color: white; transition: 0.5s; } .header-inner{ width: 1441px; height: 124px; margin: 0 auto; text-align: center; position: relative; } .header-inner-ul{ display: inline-block; } .header-inner-li{ float: left; width: 114px; padding: 41px 0; } .header-inner-li h2{ font-size: 16px; line-height: 1; color: rgb(51,51,51); padding-bottom: 14px; text-align: center; transition: 0.5s; } .header-inner-li h3{ font-size: 12px; line-height: 1; font-family: arial; color: rgb(153,153,153); text-align: center; transition: 0.5s; } .header-icon{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .icon-wrapper{ width: 126px; } .header-inner-li:hover h2,.header-inner-li:hover h3,.header-inner-li-active h2,.header-inner-li-active h3{ color: rgb(223,33,40); } .header-oa{ position: absolute; right: 0; top: 41px; } .header-oa a{ display: block; font-size: 12px; line-height: 28px; padding: 0 10px; color: rgb(102,102,102); border: 1px solid rgb(174,174,174); transition: 0.5s; float: left; margin-right: 8px; } .header-oa a:hover{ color: rgb(223,33,40); border-color: rgb(223,33,40); } .header-oa div{ float: left; cursor: pointer; width: 27px; height: 28px; border: 1px solid rgb(125,125,125); transition: 0.5s; } .header-oa div span{ display: block; width: 5px; height: 1px; margin: 13px 0 0 9px; background-color: rgb(102,102,102); position: relative; transition: 0.5s; } .header-oa div span:before{ content: ""; display: block; width: 10px; height: 1px; background-color: rgb(102,102,102); position: absolute; left: 0; top: -3px; transition: 0.5s; } .header-oa div span:after{ content: ""; display: block; width: 10px; height: 1px; background-color: rgb(102,102,102); position: absolute; left: 0; bottom: -3px; transition: 0.5s; } .header-oa div:hover{ border-color: rgb(223,33,40); } .header-oa div:hover span,.header-oa div:hover span:after,.header-oa div:hover span:before{ background-color: rgb(223,33,40); } .header-second{ width: 100%; border-top: 1px solid rgb(219,219,219); transition: 0.5s; background-color: white; opacity: 0; transform: translateX(100%); visibility: hidden\9; } .header-second-active{ opacity: 1; transform: translate(0); visibility: visible\9; } .header-second-inner{ width: 1441px; height: 230px; margin: 0 auto; text-align: center; } .header-second-inner-ul{ display: inline-block; } .header-second-inner-li{ width: 114px; height: 200px; float: left; border-right: 1px solid rgb(219,219,219); cursor: pointer; transition: 0.5s; position: relative; } .header-second-inner-li:before{ content: ""; display: block; width: 100%; height: 2px; background-color: rgb(223,33,40); position: absolute; left: 0; top: -1px; transition: transform .56s cubic-bezier(.215,.61,.355,1); transform: scaleX(0); transform-origin: 100%; visibility: hidden\9; } .header-second-inner-li:hover{ background-color: rgb(22,71,151); } .header-second-inner-li:hover:before{ transform-origin: 0; transform: scaleX(1); visibility: visible\9; } .header-second-inner-li:hover .header-second-inner-li-li a{ color: white; } .header-second-inner-li-sp{ width: 126px; } .header-second-inner-li-ul{ padding-top: 30px; } .header-second-inner-li-li{ padding-bottom: 18px; } .header-second-inner-li-li a{ display: block; font-size: 12px; line-height: 1; color: rgb(97,97,97); transition: 0.5s; } #header-phone{ position: fixed; top: 0; left: 0; width: 100%; height: 96px; background-color: white; z-index: 999; display: none; } .header-phone-icon{ width: 60px; padding: 10px 0 0 20px; } .header-phone-line-wrapper{ width: 46px; height: 33px; position: absolute; top: 29px; right: 16px; cursor: pointer; } .header-phone-line,.header-phone-line:before,.header-phone-line:after{ display: block; width: 46px; height: 5px; background-color: rgb(22,71,151); position: absolute; } .header-phone-line{ top: 14px; left: 0; transition: 0.3s; } .header-phone-line:before,.header-phone-line:after{ content: ""; display: block; transition-property: top,transform; transition-duration: 0.3s,0.3s; transition-delay: 0.3s,0s } .header-phone-line:before{ left: 0; top: -14px; } .header-phone-line:after{ left: 0; top: 14px; } .header-phone-line.header-phone-line-active{ background-color: transparent } .header-phone-line.header-phone-line-active:after, .header-phone-line.header-phone-line-active:before{ transition-delay: 0s,0.3s; } .header-phone-line.header-phone-line-active:before{ top: 0; transform: rotateZ(45deg); } .header-phone-line.header-phone-line-active:after{ top: 0; transform: rotateZ(-45deg); } #header-phone-nav{ position: fixed; top: 0; right: -260px; opacity: 0; transition: 0.5s; z-index: 1001; width: 260px; height: 100vh; overflow: auto; } #header-phone-nav.header-phone-nav-active{ right: 0; opacity: 1; } .header-phone-nav-ul{ padding: 57px 0 62px; background-color: rgb(28,88,187); } .header-phone-nav-li{ transition: 0.5s; cursor: pointer; } .header-phone-nav-li a{ display: block; font-size: 20px; line-height: 2.6; text-align: center; color: white; } .header-phone-nav-li:hover,.header-phone-nav-li-active{ background-color: rgb(85,127,232); } .header-phone-nav-li-active .header-phone-nav-li-ul{ display: block; } .header-phone-nav-close{ width: 35px; height: 35px; position: absolute; top: 10px; right: 20px; cursor: pointer; } .header-phone-nav-close-line{ width: 20px; height: 4px; background-color: white; transform: rotateZ(45deg); position: relative; transform-origin: center; margin-left: 8px; } .header-phone-nav-close-line:before{ content: ""; display: block; width: 20px; height: 4px; position: absolute; left: 0; top: 0; background-color: white; transform: rotateZ(90deg); transform-origin: center; } .header-phone-nav-li-ul{ width: 85%; margin: 0 auto; padding: 25px 0 43px; border-top: 1px solid white; display: none; } .header-phone-nav-li-li{ float: left; width: 50%; padding: 15px 0; } .header-phone-nav-li-li a{ display: block; font-size: 16px; line-height: 1; text-align: center; } #mask{ position: fixed; width: 100%; height: 0; z-index: 1000; background-color: rgba(0,0,0,0.9); transition: 0.5s; opacity: 0; } #mask.mask-active{ opacity: 1; height: 100%; } /*header-end*/ /*index-banner-begin*/ #index-banner{ width: 96%; margin: 0 auto; position: relative; overflow: hidden; } .slick-1-banner-wrapper>a>img{ width: 100%; } .slogan { position: absolute; top: 39%; left: 0; width: 100%; } .slogan p { color: white; text-align: center; opacity: 0; transform: translateY(50px); -webkit-transform: translateY(50px); } .slogan-p-1 { font-size: 56px; font-weight: bold; } .slogan-p-2 { font-family: arial; font-size: 14px; line-height: 1; } .slick-1 .slick-current .slogan p { opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); transition: 0.55s; } .slick-1 .slick-current .slogan .slogan-p-2 { transition-delay: 0.2s; } .share{ width: 55px; height: 179px; background-color: white; position: absolute; bottom: 0; left: 0; } .share ul{ padding: 40px 0 0 10px; } .share ul li{ padding-bottom: 20px; height: 20px; } .share ul li a{ display: block; width: 100%; height: 100%; background-repeat: no-repeat; transition: 0.25s; } .share_wechat a{ background-image: url(../images/wechat.png); } .share_wechat a:hover{ background-image: url(../images/wechat_blue.png); } .share_weblog a{ background-image: url(../images/weblog.png); } .share_weblog a:hover{ background-image: url(../images/weblog_blue.png); } .share_qq a{ background-image: url(../images/qq.png); } .share_qq a:hover{ background-image: url(../images/qq_blue.png); } .share ul li:hover img{ transform: translateY(-10px); } .scroll-down{ margin-bottom: 18px; } .scroll-down p{ font-size: 12px; line-height: 1; font-family: arial; color: rgb(170,170,170); padding: 22px 0 11px; text-align: center; } .scroll-down img{ margin: 0 auto; animation: movedown 1s infinite; } @keyframes movedown{ from{transform: translateY(0);} to{transform: translateY(10px);} } /*index-banner-end*/ /*index-content-begin*/ #index-content-top{ width: 96%; height: 917px; margin: 0 auto; border: 1px solid rgb(214,214,214); } .index-content-top-inner{ width: 1441px; margin: 0 auto; } .index-content-top-inner-left,.index-content-top-inner-right{ float: left; width: 50%; box-sizing: border-box; } .index-content-top-inner-left-line{ width: 140px; height: 6px; background-color: rgb(40,40,40); margin: 43px 0 40px; } .index-content-top-inner-left h2{ font-size: 45px; line-height: 1; padding-bottom: 5px; } .index-content-top-inner-left p{ font-size: 14px; color: rgb(102,102,102); padding-top: 10px; width: 70%; text-align: justify; } .index-content-top-inner-left a{ display: block; width: 333px; background-color: rgb(28,88,187); font-size: 16px; line-height: 5.4; text-align: center; color: white; margin-top: 100px; position: relative; } .index-content-top-inner-right{ position: relative; margin-top: 67px; } .videobox{ width: 100%; /*height: 480px;*/ } .videobox-btn{ width: 72px; height: 72px; border-radius: 50%; box-sizing: border-box; border: 3px solid white; background-image: url(../images/arrow-right.png); background-repeat: no-repeat; background-position: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transition: 0.5s; cursor: pointer; transform-origin: center; } .videobox-btn:hover{ transform: scale(0.9); -webkit-transform: scale(0.9); } .jwlogo{ display: none!important; } #index-content-bottom{ width: 96%; margin: 0 auto; /* height: 1561px;*/ background-color: rgb(8,28,61); transform: translateX(6px); margin-top: -75px; padding-bottom: 100px; padding-bottom: 220px\9; position: relative; } .index-content-bottom-inner{ width: 1441px; margin: 0 auto; transform: translateY(-120px); overflow: hidden; } .slick-2-banner-wrapper-left,.slick-2-banner-wrapper-right{ width: 50%; float: left; height: 555px; } .slick-2-banner-wrapper-left{ position: relative; overflow: hidden; } .slick-2-banner-wrapper-left img{ width: 100%; height: 100%; } .slick-2-banner-wrapper-left-name{ position: absolute; left: 61px; bottom: 15px; } .slick-2-banner-wrapper-left-name-a-01,.slick-2-banner-wrapper-left-name-a-02{ display: block; font-size: 15px; line-height: 70px; padding: 0 28px; border: 1px solid rgb(136,133,135); float: left; transition: 0.5s; } .slick-2-banner-wrapper-left-name:hover a{ background-color: rgb(28,88,187); border-color: rgb(28,88,187); } .slick-2-banner-wrapper-left-line{ width: 100%; height: 1px; background-color: rgb(136,133,135); position: absolute; left: 0; bottom: 86px; } .slick-2 .slick-dots li{ width: 6px; height: 6px; border: 2px solid white; border-radius: 50%; } .slick-2 .slick-dots li a{ display: block; width: 100%; height: 100%; text-indent: 99999px; } .slick-2 .slick-dots .slick-active{ background-color: white; } .slick-2 .slick-dots{ bottom: 19px; left: -49px; } .slick-2-banner-wrapper-right{ background-color: rgb(28,88,187); } .slick-2-banner-wrapper-right h2{ font-size: 45px; line-height: 1.5; padding-top: 124px; text-align: center; color: white; } .slick-2-banner-wrapper-right h3{ font-size: 16px; line-height: 1; padding-top: 15px; color: white; text-align: center; } .slick-2-banner-wrapper-right-line{ width: 1px; height: 19px; background-color: white; margin: 12px auto 38px; } .slick-2-banner-wrapper-right p{ width: 75%; margin: 0 auto; font-size: 14px; text-align: center; color: white; } .slick-2-banner-wrapper-right a{ display: block; width: 214px; border: 1px solid white; margin: 59px auto 0; font-family: futura; font-size: 16px; line-height: 3.6; text-align: center; } .index-content-bottom-inner-middle-left,.index-content-bottom-inner-middle-middle,.index-content-bottom-inner-middle-right{ width: 33.33%; height: 358px; float: left; overflow: hidden; position: relative; } .index-content-bottom-inner-middle-left img{ width: 100%; height: 100%; transition: 1s; } .index-content-bottom-inner-middle-left:hover img{ transform: scale(1.08); } .index-content-bottom-inner-middle-left-div{ width: 100%; position: absolute; left: 0; bottom: 38px; padding-top: 15px; border-top: 1px solid rgb(247,247,247); } .index-content-bottom-inner-middle-left-div-p-01{ font-size: 14px; line-height: 1; float: left; padding-left: 26px; color: white; transition: 0.5s; width: 60%; height: 14px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .index-content-bottom-inner-middle-left-div-p-02{ font-size: 12px; line-height: 14px; width: 40%; box-sizing: border-box; height: 14px; float: left; padding-left: 50px; color: white; transition: 0.5s; } .index-content-bottom-inner-middle-middle{ background-color: rgb(239,239,239); } .index-content-bottom-inner-middle-middle-inner{ width: 80%; margin: 0 auto; padding-top: 59px; } .index-content-bottom-inner-middle-middle-inner h3{ font-size: 12px; line-height: 1; color: rgb(128,128,128); padding-bottom: 25px; } .index-content-bottom-inner-middle-middle-inner h2{ font-size: 20px; line-height: 1; color: rgb(51,51,51); padding-bottom: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .index-content-bottom-inner-middle-middle-inner p{ font-size: 14px; color: rgb(102,102,102); padding-bottom: 77px; } .index-content-bottom-inner-middle-middle-inner a{ display: block; width: 146px; height: 51px; border: 1px solid rgb(153,153,153); margin-left: 10px; font-size: 16px; line-height: 51px; color: rgb(68,68,68); text-align: center; transition: 0.5s; } .index-content-bottom-inner-middle-middle-inner a:hover{ border-color: rgb(28,88,187); color: rgb(28,88,187); } .index-content-bottom-inner-middle-right img{ width: 100%; height: 100%; transition: 1s; } .index-content-bottom-inner-middle-right-div{ position: absolute; top: 40%; left: 0; width: 100%; } .index-content-bottom-inner-middle-right-div h2{ font-size: 45px; line-height: 1.4; color: rgb(39,39,39); text-align: center; } .index-content-bottom-inner-middle-right-div h3{ font-size: 16px; line-height: 1; color: rgb(39,39,39); text-align: center; } .index-content-bottom-inner-middle-right:hover img{ transform: scale(1.08); } .index-content-bottom-inner-bottom-left,.index-content-bottom-inner-bottom-right{ width: 50%; float: left; height: 555px } .index-content-bottom-inner-bottom-left{ overflow: hidden; cursor: pointer; } .index-content-bottom-inner-bottom-left img{ width: 100%; min-height: 100%; transition: 1s; } .index-content-bottom-inner-bottom-left:hover img{ transform: scale(1.08); } .index-content-bottom-inner-bottom-right{ background-color: white; } .index-content-bottom-inner-bottom-right h2{ font-size: 45px; line-height: 1.4; padding-top: 124px; text-align: center; color: rgb(51,51,51); } .index-content-bottom-inner-bottom-right h3{ font-size: 16px; line-height: 1; padding-top: 15px; color: rgb(102,102,102); text-align: center; } .index-content-bottom-inner-bottom-right-line{ width: 1px; height: 19px; background-color: rgb(153,153,153); margin: 12px auto 38px; } .index-content-bottom-inner-bottom-right p{ width: 75%; margin: 0 auto; font-size: 14px; text-align: center; color: rgb(102,102,102); } .index-content-bottom-inner-bottom-right a{ display: block; width: 214px; border: 1px solid rgb(102,102,102); margin: 59px auto 0; font-size: 16px; line-height: 3.6; text-align: center; background-color: rgb(22,71,151); } .index-content-bottom-footer{ width: 100%; position: absolute; bottom: 0; left: 0; border-top: 1px solid rgb(77,91,115); } .index-content-bottom-footer-inner{ width: 1441px; margin: 0 auto; position: relative; } .index-content-bottom-footer-inner>ul>li>a{ font-size: 16px; line-height: 1; transition: 0.5s; } .index-content-bottom-footer-inner>ul>li>a:hover{ color: rgb(223,33,40); } .index-content-bottom-footer-inner>ul{ padding: 55px 0 32px 0; } .index-content-bottom-footer-inner>ul>li{ float: left; padding-right: 50px } .contact-method{ padding-bottom: 36px; } .contact-method p{ font-size: 14px; line-height: 24px; float: left; padding-left: 30px; padding-right: 70px; color: white; position: relative; } .contact-method-loc:before{ content: ""; display: block; width: 21px; height: 24px; background-image: url(../images/loc.png); position: absolute; left: 0; top: 0; } .contact-method-phone:before{ content: ""; display: block; width: 22px; height: 22px; background-image: url(../images/phone.png); position: absolute; left: 0; top: 0; } .go-top{ position: absolute; top: 42px; right: 0; } .go-top-left,.go-top-right{ float: left; } .go-top-left{ width: 221px; height: 54px; background-color: white; font-size: 14px; line-height: 54px; color: rgb(68,67,67); box-sizing: border-box; padding-left: 37px; position: relative; cursor: pointer; margin-right: 17px; } .go-top-left:after{ content: ""; display: block; width: 9px; height: 14px; background-image: url(../images/arrow-right-02.png); position: absolute; top: 22px; right: 22px; transition: 0.5s; } .go-top-left-active.go-top-left:after{ transform: rotateZ(-90deg); } .go-top-right{ width: 58px; height: 54px; background-color: rgb(22,71,151); background-image: url(../images/gotop.png); background-repeat: no-repeat; background-position: center; cursor: pointer; } .more-links { position: absolute; left: 0; bottom: 54px; background-color: white; height: 0; transition: 0.5s; overflow: hidden; } .more-links li a { font-size: 14px; line-height: 54px; width: 221px; display: block; color: rgb(68,67,67); padding-left: 37px; box-sizing: border-box; transition: 0.5s; } .more-links li a:hover{ color: rgb(28,88,187); } /*index-content-end*/ /*footer-begin*/ .footer-bottom{ background-color: white; } .footer-bottom-inner{ width: 1441px; margin: 0 auto; padding: 22px 0 32px; } .footer-bottom-inner a{ color: #666;} .footer-bottom-inner a:hover{ color: rgb(22,71,151);} .footer-bottom-inner p{ float: right; font-size: 14px; line-height: 1; color: rgb(61,61,61); padding-left: 89px; } .footer-bottom-inner p:last-child{ padding-left: 0; } .footer-bottom-inner img{ display: inline-block;} .footer-bottom-inner .ba{ margin-left: 5px; width: 20px;} .footer-top{ background-color: rgb(8,28,61); } .footer-top-inner{ width: 1441px; margin: 0 auto; position: relative; } .footer-top-inner>ul{ padding: 55px 0 32px 0; } .footer-top-inner>ul>li>a{ font-size: 16px; line-height: 1; transition: 0.5s; } .footer-top-inner>ul>li>a:hover{ color: rgb(223,33,40); } .footer-top-inner>ul>li{ float: left; padding-right: 50px; } /*footer-end*/ /*index-end*/ /*aboutus-company-begin*/ /*banner-begin*/ #banner{ position: relative; overflow: hidden; } #banner img{ width: 100%; } #banner h1{ width: 100%; font-size: 50px; text-align: center; font-weight: bold; color: white; position: absolute; top: 46%; left: 0; } #banner h1:after{ content: ""; display: block; width: 60px; height: 2px; background-color: white; position: absolute; bottom: 0; left: 50%; margin-left: -30px; } /*banner-end*/ /*nav-begin*/ #nav{ width: 96%; /*margin: 0 auto;*/ padding: 0 2%; border-bottom: 1px solid rgb(222,222,222); text-align: center; height: 80px; background-color: white; } .nav-ul{ display: inline-block; } .nav-li{ float: left; margin-right: 30px; } .nav-li a{ display: block; font-size: 16px; line-height: 5; color: rgb(51,51,51); padding: 0 32px; position: relative; transition: 0.5s; } .nav-li:last-child{ margin-right: 0; } .nav-li.nav-li-active a,.nav-li:hover a{ color: rgb(223,33,40); } .nav-li a:before{ content: ""; display: block; width: 8px; height: 8px; background-color: rgb(223,33,40); position: absolute; left: 50%; margin-left: -4px; bottom: 12px; transition: transform .56s cubic-bezier(.215,.61,.355,1); transform: scale(0); transform-origin: center; visibility: hidden\9; } .nav-li a:after{ content: ""; display: block; width: 100%; height: 3px; background-color: rgb(223,33,40); position: absolute; left: 0; bottom: -2px; transition: transform .56s cubic-bezier(.215,.61,.355,1); transform: scaleX(0); transform-origin: 100%; visibility: hidden\9; } .nav-li:hover a:before,.nav-li.nav-li-active a:before{ transform: scale(1); visibility: visible\9; } .nav-li.nav-li-active a:after,.nav-li:hover a:after{ transform: scaleX(1); transform-origin: 0; visibility: visible\9; } /*nav-end*/ /*aboutus-company-content-begin*/ #aboutus-company-content{ background-color: white; } .aboutus-company-content-inner{ width: 1150px; margin: 0 auto; padding: 100px 0 175px; } .aboutus-company-content-inner>h2{ font-size: 30px; line-height: 1.5; padding-bottom: 15px; color: rgb(51,51,51); position: relative; } .aboutus-company-content-inner>h2:after{ content: ""; display: block; width: 40px; height: 2px; background-color: rgb(102,102,102); position: absolute; left: 0; bottom: 0; } .aboutus-company-content-inner>h1{ font-size: 45px; line-height: 1; font-family: futura; color: rgb(51,51,51); position: relative; } .aboutus-company-content-inner>h1:after{ content: ""; display: block; width: 40px; height: 2px; background-color: rgb(102,102,102); position: absolute; left: 0; bottom: -35px; } .aboutus-company-content-inner-div{ padding-top: 140px; } .aboutus-company-content-inner-left{ float: left; width: 40%; } .aboutus-company-content-inner-left img{ width: 100%; } .aboutus-company-content-inner-right{ float: left; width: 60%; padding-left: 66px; box-sizing: border-box; } .aboutus-company-content-inner-right h2{ font-size: 24px; padding-bottom: 10px; font-weight: bold; color: rgb(51,51,51); } .aboutus-company-content-inner-right p{ font-size: 14px; line-height: 2; color: rgb(102,102,102); text-align: justify; } .aboutus-company-content-inner-right a{ display: block; width: 193px; background-color: rgb(143,143,143); font-size: 14px; line-height: 4; color: white; text-align: center; margin-top: 50px; transition: 0.5s; } .aboutus-company-content-inner-right a:hover{ background-color: rgb(22,71,151); } #aboutus-org-content{ background-color: white; } .aboutus-org-content-inner{ padding: 70px 0 170px; } .aboutus-company-content-inner-img{ max-width: 100%; margin: 80px auto 0; } /*aboutus-company-content-end*/ /*aboutus-company-end*/ /*aboutus-leader-begin*/ /*aboutus-leader-content-begin*/ .aboutus-leader-content{ padding-top: 100px; } #aboutus-leader-content{ background-color: white; } .aboutus-leader-content-inner{ width: 1150px; margin: 0 auto; padding: 75px 0 190px; } .aboutus-leader-content-inner-left{ float: left; width: 32%; } .aboutus-leader-content-inner-left img{ width: 100%; } .aboutus-leader-content-inner-right{ float: left; width: 68%; box-sizing: border-box; padding-left: 68px; } .aboutus-leader-content-inner-right-name{ padding-top: 29px; padding-bottom: 16px; } .aboutus-leader-content-inner-right-name h2{ font-size: 24px; line-height: 1; padding-right: 18px; border-right: 1px solid rgb(198,209,229); float: left; color: rgb(51,51,51); } .aboutus-leader-content-inner-right-name h3{ float: left; font-size: 16px; line-height: 24px; padding-left: 18px; color: rgb(52,52,52); } .aboutus-leader-content-inner-right-intr{ background-color: rgb(233,237,245); } .aboutus-leader-content-inner-right-intr p{ width: 84%; padding: 30px 0 40px 20px; font-size: 15px; color: rgb(93,93,93); } .aboutus-leader-content-inner-right-carcer{ padding-top: 24px; } .aboutus-leader-content-inner-right-carcer h2{ font-size: 16px; font-weight: bold; color: rgb(39,39,39); } .aboutus-leader-content-inner-right-carcer p{ font-size: 15px; line-height: 2.3; color: rgb(94,94,94) } /*aboutus-leader-content-end*/ /*aboutus-leader-end*/ /*aboutus-content-begin*/ #aboutus-content{ overflow: hidden; background-image: url(../img/banner_15.jpg); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } .blank{ height: 548px; } #aboutus-content>img{ width: 100%; } #aboutus-ceo-content{ background-color: rgb(240,240,240); } .aboutus-company-content-inner-left p{ font-size: 15px; line-height: 3; text-align: center; color: rgb(102,102,102); } .slick-3{ width: 100%; box-sizing: border-box; padding: 0 50px 0 70px; } .slick-3-item-inner{ border-radius: 50%; overflow: hidden; margin-right: 20px; cursor: pointer; position: relative; } .slick-3-item-inner img{ width: 100%; min-height: 100%; } .leader-info{ background-color: rgba(45,89,161,0.9); background-color: rgb(45,89,161)\9; filter:alpha(opacity=90); width: 100%; height: 100%; border-radius: 50%; position: absolute; left: 0; top: 100%; transition: 0.5s; } .slick-3-item-inner:hover .leader-info{ top: 0; } .leader-info>a{ display: block; width: 100%; height: 100%; } .leader-info-inner{ width: 70%; margin: 0 auto; } .leader-info-inner-name{ border-bottom: 1px solid white; padding-top: 25px; } .leader-info-inner-name span{ font-size: 14px; line-height: 3; } .leader-info-inner-name-left{ float: left; padding-left: 20px; } .leader-info-inner-name-right{ float: right; padding-right: 20px; } .leader-info-inner-intr{ font-size: 14px; height: 50px; overflow: hidden; padding-top: 17px; } .leader-info-inner-more{ font-size: 14px; line-height: 3; color: white; padding-top: 10px; border-bottom: 1px solid white; } .slick-3 .slick-prev:before,.slick-3 .slick-next:before{ content: none; } .slick-3 .slick-prev, .slick-3 .slick-next{ width: 26px; height: 42px; margin-top: -21px; } .slick-3 .slick-prev{ left: 0; background-image: url(../images/arrow-groups.png); background-position: left top; } .slick-3 .slick-prev:hover{ background-position: left -42px; } .slick-3 .slick-next{ right: 0; background-image: url(../images/arrow-groups.png); background-position: 26px top; } .slick-3 .slick-next:hover{ background-position: 26px -42px; } #aboutus-honor-content{ background-image: url(../img/banner_25.jpg); background-position: center; background-repeat: no-repeat; background-repeat: repeat-y\9; background-size: cover; } .aboutus-honor-content{ margin-bottom: 85px; } .aboutus-honor-content-inner{ width: 1150px; margin: 0 auto; padding: 70px 0 170px; } .aboutus-honor-content-inner>h2,.aboutus-honor-content-inner>h1{ color: white; } .aboutus-honor-content-inner>h2:after,.aboutus-honor-content-inner>h1:after{ background-color: white; } .slick-4{ margin-right: -16px; } .slick-4-item-inner{ margin-right: 16px; cursor: pointer; border: 5px solid white; position: relative; overflow: hidden; } .slick-4-item-inner img{ width: 100%; } .slick-4-item-mask{ width: 100%; height: 100%; background-color: rgba(223,33,40,0.7); background-image: url(../images/glass_icon.png); background-repeat: no-repeat; background-position: center; position: absolute; top: 0; left: 0; opacity: 0; transform: translateY(100%); transition: 0.5s; background-color: rgb(223,33,40)\9; filter:alpha(opacity=70); visibility: hidden\9; } .slick-4-item-inner:hover .slick-4-item-mask{ opacity: 1; transform: translateY(0); visibility: visible\9; } .slick-4 .slick-prev:before, .slick-4 .slick-next:before{ content: ""; display: block; width: 12px; height: 20px; background-image: url(../images/arrow-groups-02.png); position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .slick-4 .slick-prev:before{ background-position: left top; } .slick-4 .slick-next:before{ background-position: 12px top; } .slick-4 .slick-prev, .slick-4 .slick-next{ width: 49px; height: 49px; border: 1px solid rgba(255,255,255,0.5); border: 1px solid rgb(255,255,255)\9; filter:alpha(opacity=50); border-radius: 50%; top: auto; bottom: -85px; transition: 0.5s; visibility: hidden\9; } .slick-4 .slick-prev{ left: 45%; } .slick-4 .slick-next{ right: 45%; } .slick-4 .slick-prev:hover,.slick-4 .slick-next:hover{ border-color: white; } .slick-4 .slick-prev:hover:before{ background-position: left -20px; } .slick-4 .slick-next:hover:before{ background-position: 12px -20px; } .pswp__button--arrow--left, .pswp__button--arrow--right{ border-radius: 0; border: none; width: 65px; height: 65px; background-color: rgb(69,69,69); /*position: relative;*/ } .pswp__button--arrow--left:before{ content: ""; display: block; width: 12px; height: 20px; background-image: url(../images/arrow-groups-02.png); background-position: left top; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .pswp__button--arrow--left:hover:before{ background-position: left -20px; } .pswp__button--arrow--right:before{ content: ""; display: block; width: 12px; height: 20px; background-image: url(../images/arrow-groups-02.png); background-position: 12px top; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .pswp__button--arrow--right:hover:before{ background-position: 12px -20px; } /*aboutus-content-end*/ /*news-begin*/ /*news-banner-begin*/ #news-banner{ width: 96%; margin: 0 auto; } #news-banner #nav{ width: auto; background-color: white; } .nav-inner{ margin: 0 3px; height: 80px; } #news-banner #banner h1{ font-size: 60px; position: relative; } #news-banner #banner h1:after{ width: 90px; height: 6px; margin-left: -45px; } #news-banner #banner h2{ font-family: futura; font-size: 54px; text-align: center; color: white; } .banner-slogan{ position: absolute; top: 46%; left: 0; width: 100%; } /*news-banner-end*/ /*news-content-begin*/ #news-content{ background-color: white; width: 96%; margin: 0 auto; } .news-content-ul{ margin: 0 3px; padding-bottom: 40px } .news-content-li{ width: 100%; padding: 35px 20%; transition: 0.5s; box-sizing: border-box; border-top: 1px solid rgb(227,227,227); } .news-content-li:first-child{ border-top: none; } .news-content-li a{ display: block; width: 100%; height: 100%; } .news-content-li a>div{ float: left; box-sizing: border-box; } .news-content-li-left{ width: 29%; overflow: hidden; } .news-content-li-left img{ min-width: 100%; transition: 2s; } .news-content-li-middle{ width: 58%; padding-left: 35px; } .news-content-li-middle h2{ font-size: 18px; line-height: 2.5; color: rgb(51,51,51); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-content-li-middle p{ font-size: 14px; color: rgb(153,153,153); height: 50px; overflow: hidden; padding-top: 16px; text-align: justify; } .news-content-li-middle span{ font-size: 12px; line-height: 1; color: rgb(153,153,153); margin-top: 40px; position: relative; } .news-content-li-middle span:after{ content: ""; display: block; width: 28px; height: 1px; background-color: rgb(204,204,204); position: absolute; top: 7px; left: 70px; } .news-content-li-right{ width: 13%; padding-top: 20px; } .news-content-li-right p:first-child{ font-size: 40px; color: rgb(153,153,153); text-align: right; } .news-content-li-right p:last-child{ font-size: 12px; color: rgb(153,153,153); text-align: right; } .news-content-li:hover{ background-color: rgb(232,236,242); } .news-content-li:hover .news-content-li-left img{ transform: scale(1.2); } #news-more a{ display: block; width: 100%; font-size: 14px; line-height: 4; color: rgb(153,153,153); text-align: center; transition: 0.5s; } #news-more a:hover{ background-color: rgb(28,88,187); color: white; } /*new-content-end*/ /*news-end*/ /*news-details-begin*/ #news-details-content{ margin-top: 124px; } .news-details-content-top{ background-color: rgb(218,228,245); padding: 100px 0 80px; } .news-details-content-top-inner,.project-details-content-top-inner{ width: 1000px; margin: 0 auto; } .news-details-content-top-inner h1{ font-size: 32px; line-height: 1; color: rgb(45,45,45); } .news-details-content-top-inner p{ padding-left: 28px; margin-top: 20px; font-size: 14px; line-height: 1; color: rgb(111,111,111); position: relative; } .news-details-content-top-inner p:after{ content: ""; display: block; width: 14px; height: 14px; background-image: url(../images/calendar.png); position: absolute; top: -1px; left: 6px; } .project-details-content-top-inner h1{ font-size: 32px; line-height: 1; color: rgb(45,45,45); } .project-details-content-top-inner p{ font-size: 14px; line-height: 1; color: rgb(48,48,48); padding-top: 28px; } .news-details-content-middle{ background-color: rgb(229,229,229); } .news-details-content-middle-inner{ width: 1000px; margin: 0 auto; height: 63px; } .news-details-content-middle-inner-left{ float: left; } .news-details-content-middle-inner-left p{ float: left; font-size: 14px; line-height: 63px; color: rgb(69,69,69); padding-right: 20px; } .news-details-content-middle-inner-left a{ display: block; width: 36px; height: 36px; margin-top: 14px; margin-right: 5px; background-color: rgb(158,158,158); float: left; background-repeat: no-repeat; background-position: center; border-radius: 50%; transition: 0.5s; } .news-details-content-middle-inner-left a:hover{ background-color: rgb(22,71,151); } .news-details-content-middle-inner-left-wechat{ background-image: url(../images/wechat_02.png); } .news-details-content-middle-inner-left-weblog{ background-image: url(../images/weblog_02.png); } .news-details-content-middle-inner-right{ float: right; } .news-details-content-middle-inner-right a{ display: block; width: 125px; background-color: white; font-size: 14px; line-height: 63px; color: rgb(83,83,83); text-align: center; float: left; transition: 0.5s; } .news-details-content-middle-inner-right a:hover,.news-details-content-middle-inner-right .news-details-content-middle-inner-right-active{ background-color: rgb(22,71,151); color: white; } .news-details-content-bottom{ background-color: rgb(244,244,244); padding: 60px 0 100px; } .news-details-content-bottom-inner{ width: 1000px; margin: 0 auto; } .news-details-content-bottom-inner p{ font-size: 14px; color: rgb(107,107,107); text-align: justify; } .news-details-content-bottom-inner img{ max-width: 100%; margin: 0 auto; } /*news-details-end*/ /*project-begin*/ #project-content{ width: 1400px; margin: 0 auto; padding: 70px 0 130px; } .project-content-li{ width: 32%; margin-right: 2%; float: left; padding-bottom: 40px; cursor: pointer; } .project-content-li:nth-child(3n){ margin-right: 0 } .project-content-li-a{ display: block; position: relative; overflow: hidden; } .project-content-li-a img{ width: 100%; } .project-content-li-a-p-01{ font-size: 14px; line-height: 1; color: rgb(123,123,123); padding: 18px 0 12px 25px; } .project-content-li-a-p-02{ font-size: 18px; line-height: 1; color: rgb(51,51,51); padding-left: 25px; transition: 0.5s } .project-content-li-a-div{ width: 100%; height: 100%; background-color: rgba(22,71,151,0.9); background-color: rgb(22,71,151)\9; filter:alpha(opacity=90); visibility: hidden\9; position: absolute; top: 0; left: 0; opacity: 0; transform: translateY(100%); transition: 0.5s; } .project-content-li-a-div span{ display: block; width: 185px; height: 55px; box-sizing: border-box; border: 1px solid white; font-size: 14px; line-height: 53px; color: white; text-align: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .project-content-li:hover .project-content-li-a-div{ opacity: 1; transform: translateY(0); visibility: visible\9; } .project-content-li:hover .project-content-li-a-p-02{ color: rgb(223,33,40); } /*project-end*/ /*culture-content-begin*/ #culture-content{ overflow: hidden; } .aboutus-culture-content{ background-color: white; } .culture-ul{ margin-top: 190px; } .culture-li{ width: 20%; float: left; cursor: pointer; } .culture-li-div{ width: 158px; height: 158px; border-radius: 50%; margin: 0 auto; box-sizing: border-box; border: 1px solid rgb(101,101,101); position: relative; background-repeat: no-repeat; background-position: center; transition: 0.5s; } .culture-li:nth-child(1) .culture-li-div{ background-image: url(../images/icon_01.png); } .culture-li:nth-child(2) .culture-li-div{ background-image: url(../images/icon_02.png); } .culture-li:nth-child(3) .culture-li-div{ background-image: url(../images/icon_03.png); } .culture-li:nth-child(4) .culture-li-div{ background-image: url(../images/icon_04.png); } .culture-li:nth-child(5) .culture-li-div{ background-image: url(../images/icon_05.png); } .culture-li-div p{ width: 100%; text-align: center; font-size: 14px; line-height: 1; color: rgb(102,102,102); position: absolute; left: 0; top: 73%; transition: 0.5s; } .culture-li-p{ font-size: 16px; line-height: 1; color: rgb(51,51,51); text-align: center; padding-top: 30px; position: relative; transition: 0.5s; } .culture-li-p:after{ content: ""; display: block; width: 36px; height: 1px; background-color: rgb(153,153,153); position: absolute; bottom: -20px; left: 50%; margin-left: -18px; transition: 0.5s; } .culture-li:hover .culture-li-div{ background-color: rgb(22,71,151); border-color: rgb(22,71,151); } .culture-li:hover:nth-child(1) .culture-li-div{ background-image: url(../images/icon_01_white.png); } .culture-li:hover:nth-child(2) .culture-li-div{ background-image: url(../images/icon_02_white.png); } .culture-li:hover:nth-child(3) .culture-li-div{ background-image: url(../images/icon_03_white.png); } .culture-li:hover:nth-child(4) .culture-li-div{ background-image: url(../images/icon_04_white.png); } .culture-li:hover:nth-child(5) .culture-li-div{ background-image: url(../images/icon_05_white.png); } .culture-li:hover .culture-li-div p{ color: white; } .culture-li:hover .culture-li-p{ color: rgb(22,71,151); } .culture-li:hover .culture-li-p:after{ background-color: rgb(22,71,151); } .slick-5{ width: 60%; margin: 0 auto; } .slick-5-item{ height: 100%; position: relative; outline: none; } .slick-5-item img{ width: 100%; height: 100%; } .slick-5-item-inner{ width: 396px; height: 179px; padding: 45px 0 0 66px; box-sizing: border-box; background-color: white; position: absolute; bottom: 0; right: 0; opacity: 0; filter:alpha(opacity=0); transition: 2s; } .slick-5 .slick-current .slick-5-item-inner{ opacity: 1; filter:alpha(opacity=100); } .slick-5-item-inner p{ font-size: 14px; line-height: 1; color: rgb(102,102,102); padding-bottom: 23px; } .slick-5-item-inner h2{ font-size: 20px; line-height: 1; color: rgb(51,51,51); position: relative; } .slick-5-item-inner h2:after{ content: ""; display: block; width: 38px; height: 1px; background-color: rgb(102,102,102); position: absolute; bottom: -20px; left: 0; } .slick-5 .slick-list{ overflow: visible; } .slick-5 .slick-dots li{ width: 10px; height: 10px; box-sizing: border-box; border: 2px solid rgb(158,158,158); border-radius: 50%; margin: 0 2px; } .slick-5 .slick-dots .slick-active{ background-color: rgb(223,33,40); border-color: rgb(223,33,40); } .slick-5 .slick-dots li a{ display: block; width: 100%; height: 100%; text-indent: 99999px; } .slick-5 .slick-dots{ width: auto; right: 63px; bottom: 17px; } .slick-5 .slick-next:before,.slick-5 .slick-prev:before{ content: none; } .slick-5 .slick-next,.slick-5 .slick-prev{ width: 62px; height: 62px; background-color: white; transition: 0.5s; z-index: 10; } .slick-5 .slick-next:hover,.slick-5 .slick-prev:hover{ background-color: rgb(223,33,40); } .slick-5 .slick-next{ right: -102px; } .slick-5 .slick-prev{ left: -102px; } .slick-5 .slick-next i,.slick-5 .slick-prev i{ width: 10px; height: 18px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background-image: url(../images/arrow-groups-03.png); } .slick-5 .slick-prev i{ background-position: left top; } .slick-5 .slick-prev:hover i{ background-position: left -18px; } .slick-5 .slick-next i{ background-position: 10px top; } .slick-5 .slick-next:hover i{ background-position: 10px -18px; } .aboutus-benefit-content{ background-color: white; } .slick-5-mask-left{ height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.8); background-color: rgb(0,0,0)\9; filter:alpha(opacity=90); } .slick-5-mask-right{ height: 100%; position: absolute; top: 0; right: 0; background-color: rgba(0,0,0,0.8); background-color: rgb(0,0,0)\9; filter:alpha(opacity=90); } .slick-5-wrapper{ position: relative; } .slick-6-item{ margin-right: 25px; outline: none; } .slick-6-item img{ width: 100%; } .slick-6{ margin-top: 123px; margin-right: -25px; } .slick-6-item-content{ box-sizing: border-box; border: 1px solid rgb(204,204,204); padding: 20px 30px 25px; transition: 0.5s; } .slick-6-item-content h2{ font-size: 15px; font-weight: bold; line-height: 1; color: rgb(102,102,102); padding-bottom: 9px; transition: 0.5s; } .slick-6-item-content p{ font-size: 14px; color: rgb(102,102,102); height: 50px; overflow: hidden; transition: 0.5s } .slick-6-item-content span{ font-size: 12px; line-height: 1; color: rgb(153,153,153); padding-top: 33px; transition: 0.5s; } .slick-6-item:hover .slick-6-item-content{ background-color: rgb(22,71,151); border-color: rgb(22,71,151); } .slick-6-item:hover .slick-6-item-content h2,.slick-6-item:hover .slick-6-item-content p,.slick-6-item:hover .slick-6-item-content span{ color: white; } .slick-6 .slick-dots{ bottom: -94px; } .slick-6 .slick-dots li a{ display: block; width: 100%; height: 100%; text-indent: 99999px; } .slick-6 .slick-dots li{ width: 10px; height: 10px; box-sizing: border-box; border: 2px solid rgb(158,158,158); border-radius: 50%; } .slick-6 .slick-dots .slick-active{ background-color: rgb(223,33,40); border-color: rgb(223,33,40); } .slick-7{ margin-top: 80px; margin-right: -14px; } .slick-7-item{ margin-right: 14px; outline: none; } .slick-7-item img{ width: 100%; } .slick-7-item h2{ font-size: 14px; line-height: 1; color: rgb(82,82,82); padding-top: 15px; text-align: center; } .slick-7 .slick-next:before,.slick-7 .slick-prev:before{ content: none; } .slick-7 .slick-next,.slick-7 .slick-prev{ width: 62px; height: 62px; background-color: white; transition: 0.5s; z-index: 10; top: 40%; } .slick-7 .slick-next:hover,.slick-7 .slick-prev:hover{ background-color: rgb(223,33,40); } .slick-7 .slick-next{ right: -102px; } .slick-7 .slick-prev{ left: -102px; } .slick-7 .slick-next i,.slick-7 .slick-prev i{ width: 10px; height: 18px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background-image: url(../images/arrow-groups-03.png); } .slick-7 .slick-prev i{ background-position: left top; } .slick-7 .slick-prev:hover i{ background-position: left -18px; } .slick-7 .slick-next i{ background-position: 10px top; } .slick-7 .slick-next:hover i{ background-position: 10px -18px; } /*culture-content-end*/ /*hr-begin*/ .aboutus-hr-content{ background-color: white; } .hr-left,.hr-right{ box-sizing: border-box; float: left; margin-top: 140px; } .hr-left{ width: 35%; border: 1px solid rgb(223,33,40); box-sizing: border-box; padding: 70px 0 50px 8%; } .hr-left p{ font-size: 20px; line-height: 1; color: rgb(223,33,40); padding-bottom: 20px; } .hr-right{ width: 65%; padding-left: 70px; } .hr-right h2{ font-size: 22px; line-height: 3; color: rgb(47,47,47); } .hr-right p{ font-size: 15px; line-height: 1.5; color: rgb(102,102,102); } .recr-ul{ margin-top: 120px; } .recr-li{ width: 100%; margin-bottom: 5px; } .recr-li-active .recr-li-header{ background-color: rgb(223,33,40); } .recr-li-header{ position: relative; cursor: pointer; background-color: rgb(70,70,70); transition: 0.5s; } .recr-li-span-01{ font-size: 16px; line-height: 49px; color: white; padding-left: 80px; } .recr-li-span-02{ width: 13px; height: 3px; background-color: white; position: absolute; top: 23px; right: 47px; transition: 0.5s; transform-origin: center; } .recr-li-span-02:after{ content: ""; display: block; width: 13px; height: 3px; background-color: white; transform-origin: center; transform: rotateZ(90deg); transition: 0.5s; } .recr-li-active .recr-li-span-02{ transform: rotateZ(180deg); } .recr-li-active .recr-li-span-02:after{ opacity: 0; } .recr-li-content{ box-sizing: border-box; padding: 30px 65px; background-color: white; display: none; } .recr-li-active .recr-li-content{ display: block; } .recr-li-content p{ font-size: 14px; color: rgb(102,102,102); } /*hr-end*/ /*bids-begin*/ .bids-nav{ background-color: transparent!important; } .bids-ul{ margin-top: 136px; } .bids-li{ width: 48%; margin-right: 4%; margin-bottom: 38px; background-color: white; float: left; } .bids-li:nth-child(2n){ margin-right: 0; } .bids-li>a{ display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 40px 50px 40px 30px; } .bids-li-left{ background-color: rgb(170,170,170); box-sizing: border-box; padding: 20px 10px 20px 15px; float: left; margin-right: 37px; transition: 0.5s; } .bids-li-left h2{ font-size: 16px; line-height: 1; color: white; position: relative; } .bids-li-left h2:after{ content: ""; display: block; width: 20px; height: 2px; background-color: white; position: absolute; left: 0; bottom: -13px; } .bids-li-left h1{ font-family: PFD; font-size: 30px; line-height: 1; padding-top: 25px; color: white; } .bids-li-left p{ font-family: PFD; font-size: 15px; line-height: 1; padding-top: 14px; color: white; } .bids-li-right h2{ font-size: 18px; line-height: 1.4; color: rgb(73,73,73); padding-top: 10px; transition: 0.5s; } .bids-li-right span{ font-size: 14px; line-height: 1; color: rgb(153,153,153); padding: 0 16px 3px 0; border-bottom: 1px solid rgb(208,208,208); padding-top: 70px; } .bids-li:hover .bids-li-left{ background-color: rgb(223,33,40); } .bids-li:hover .bids-li-right h2{ color: rgb(223,33,40); } .bids-paging{ margin-top: 140px; text-align: center; } .bids-paging-li{ display: inline-block; vertical-align: middle; } .bids-paging-li a{ display: block; width: 33px; height: 33px; font-size: 14px; line-height: 33px; color: rgb(51,51,51); transition: 0.5s } .bids-paging-li-active a,.bids-paging-li:hover a{ background-color: rgb(223,33,40); color: white; } .bids-paging-li-prev,.bids-paging-li-next{ display: inline-block; vertical-align: middle; } .bids-paging-li-prev{ margin-right: 40px; } .bids-paging-li-next{ margin-left: 40px; } .bids-paging-li-prev a,.bids-paging-li-next a{ display: block; width: 33px; height: 33px; line-height: 33px; font-size: 14px; background-repeat: no-repeat; background-position: center; } .bids-paging-li-prev a{ background-image: url(../images/arrow-1.png); } .bids-paging-li-next a{ background-image: url(../images/arrow-2.png); } /*bids-end*/ /*bids-notice-begin*/ .bids-notice-content{ background-color: white; } .bids-notice-content-inner{ margin-top: 140px; } .bids-notice-content-inner h2{ font-size: 20px; color: rgb(51,51,51); } .bids-notice-content-inner p{ font-size: 15px; color: rgb(102,102,102); } /*bids-notice-end*/ /*services-begin*/ .services-content{ background-color: white; } .services-content-inner{ padding-top: 90px; } .services-content-inner p{ font-size: 15px; color: rgb(102,102,102); } .contact-content-inner{ background-image: url(../img/banner_57.png); background-repeat: no-repeat; background-position: center; } .contact-content-inner-inner{ margin-top: 144px; } .contact-content-inner-inner-left,.contact-content-inner-inner-right{ float: left; height: 474px; } .contact-content-inner-inner-left{ width: 58%; box-shadow: 0 0 1px rgb(179,179,179), 0 0 2px rgb(190,190,190), 0 0 3px rgb(202,202,202), 0 0 4px rgb(212,212,212), 0 0 5px rgb(220,220,220), 0 0 6px rgb(227,227,227), 0 0 7px rgb(231,231,231), 0 0 8px rgb(235,235,235); } .contact-content-inner-inner-right{ width: 42%; background-color: rgb(22,71,151); box-sizing: border-box; padding: 125px 40px 0; } .contact-content-inner-inner-right h2{ font-size: 24px; line-height: 1; font-weight: bold; padding-bottom: 13px; border-bottom: 1px solid rgb(115,145,193); color: white; } .contact-phone,.contact-address{ margin-top: 50px; } .contact-phone-icon,.contact-address-icon{ width: 40px; height: 40px; border: 1px solid white; background-repeat: no-repeat; background-position: center; margin-right: 18px; float: left; } .contact-phone-icon{ background-image: url(../images/phone_02.png); } .contact-address-icon{ background-image: url(../images/loc_02.png); } .contact-phone h3,.contact-address h3{ font-size: 14px; line-height: 1; color: white; } .contact-phone p{ font-size: 20px; line-height: 1; padding-top: 8px; color: white; } .contact-address p{ font-size: 15px; line-height: 1; padding-top: 13px; color: white; padding-left: 60px; } #map{ width: 100%; height: 100%; } #map img{ display: inline; } .anchorBL{ display: none!important; } /*services-end*/ /*404-begin*/ #err-banner{ background-color: white; width: 100%; height: 100%; box-sizing: border-box; padding-bottom: 55px; } .err-banner-inner{ width: 96%; background-color: rgb(28,88,187); margin: 0 auto; height: 100%; } .err-banner-content{ padding-top: 338px; } .err-icon{ max-width: 100%; margin: 0 auto; } .err-banner-content-p-01{ padding-top: 110px; } .err-banner-content-p-02{ padding-top: 40px; } .err-banner-content-p-03{ padding-top: 15px; } .err-banner-content-p-03 a{ display: inline; color: rgb(255,224,48); } .err-banner-content p{ font-size: 16px; line-height: 1; text-align: center; color: white; } .err-banner-content span{ display: inline; } .qrcode-wrapper{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 998; display: none; } .qrcode{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } /*404-end*/ #close-dock { position: absolute; right: 0; top: 0; background-color: #fff; background-color: rgba(0,0,0,0); text-align: center; width: 36px; height: 36px; line-height: 36px; font-size: 15px; cursor: pointer; text-indent: 10px; }