/*init.css*/ body.index-body{overflow-x: hidden;} .hide { display: none; } .mini{min-width:1200px;max-width:100%;margin:auto;} .mirl{width:1200px;margin:auto;} .fl{float: left;} .fr{float: right;} .fixed{position:fixed;} .relative{position:relative;} .absolute{position:absolute;} .lazy{background:url("../images/load-ico.gif") no-repeat center center;} .wrap{margin-top: 83px;} .common-title{text-align: center;} .common-title h2{font-size:24px;color:#000000;line-height: 40px;} .common-title h3{font-size:14px;color:#000;line-height: 28px;letter-spacing: 5px;margin-bottom: 3px;} .common-title .title-line{ display: none;position:relative;padding:0 30px;font-size: 16px;color:#000;line-height: 60px;letter-spacing: 12px;} .container{padding-top: 90px;} .tabs{margin-top:72px;margin-bottom: 106px;text-align: center;} .tabs a{position: relative;display: inline-block;margin-right: 54px;} .tabs a .border{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); min-width:152px;max-width: 300px; padding:7px 0;border:1px solid #b5b5b5; line-height: 24px;font-size: 14px; color:rgba(255,255,255,0);letter-spacing: 2px; } .tabs a .item{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); min-width:152px;max-width: 300px; padding:7px 0;border:1px solid #bababa; line-height: 24px;font-size: 14px; color:#656565;background-color: #fff; position: absolute;top:-6px; left:6px;letter-spacing: 2px; } .tabs a:hover .item{ transform: translate(-6px,6px); border-color:#bababa; } .tabs a.on .item{ transform: translate(-6px,6px); border-color:#bababa; } .btn-page { width:700px; margin:70px auto 0 auto; text-align: center; } .btn-page a{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); display: inline-block; width: 13px; height:24px; text-align: center; } .btn-page .prev { background: url("../images/n-icon-02.png") no-repeat center center; background-size: 13px 24px; } .btn-page .next { background: url("../images/n-icon-03.png") no-repeat center center; background-size: 13px 24px; } .btn-page .prev:hover{ background: url("../images/n-icon-06.png") no-repeat center center; } .btn-page .next:hover{ background: url("../images/n-icon-07.png") no-repeat center center; } .btn-page .page-num{ display: inline-block; height:24px; line-height: 24px; } .btn-page .page-num p{ font-family: "Microsoft Yahei"; display: inline-block; font-size: 14px; color:#000; line-height: 24px; padding-right: 14px; background:url("../images/icon-18.png") no-repeat right center; } .btn-page .page-num span{ font-family: "Microsoft Yahei"; display: inline-block; font-size: 14px; color:#000; line-height: 24px; padding-left: 2px; } .imgMouseMoveLeft{ max-width: 1200px; overflow: hidden; margin-bottom: 70px; } .imgMouseMoveLeft:after{ content:""; display: block; width:100%; padding-top: 468px; } .imgMouseMoveLeft .slideBoxLeft{ position: absolute; width:99999px; top:0; left:0; height:100%; transform: translateX(0); } .imgMouseMoveLeft .slideBoxLeft img{ max-width: 100%; } .imgMouseMoveLeft .slideBoxLeft li{ float: left; transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); margin-right: 12px; } .slideBtnLeft{ display: inline-block; width: 64px; height: 1px; text-align: center; position: absolute; left:1218px; bottom:56px; } .slideBtnLeft .slideBtn{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); width: 20px;height: 36px; background: url("../images/icon-24.png") no-repeat center center; display: block; } .slideBtnLeft .slideBtn:hover{ transform: scale(0.8) translateX(6px); background: url("../images/icon-26.png") no-repeat center center; } .imgMouseMoveRight{ width:100%; overflow: hidden; float: right; } .imgMouseMoveRight .slideBoxRight{ position: absolute; top:0; left:0; height:100%; width:100%; transform: translateX(0); } .imgMouseMoveRight .slideBoxRight img{ max-width: 100%; } .imgMouseMoveRight .slideBoxRight li{ float: left; transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); margin-left: 14px; } .slideBtnRight{ display: inline-block; width: 64px; height: 1px; text-align: center; position: absolute; right:1186px; bottom:76px; } .slideBtnRight .slideBtn{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); width: 20px; height: 36px; display: block; background: url("../images/icon-23.png") no-repeat center center; } .slideBtnRight .slideBtn:hover{ transform: scale(0.8) translateX(6px); background: url("../images/icon-25.png") no-repeat center center; } /*鐐瑰嚮鍥剧墖寮瑰嚭鍥剧墖妗?/ .pop-up{ // display: block; transition:all 1s ; visibility: hidden; opacity: 0; position: fixed; top:0;left:0; right:0;bottom:0; width:100%; height:100%; background-color: #fff; z-index:99999; } .pop-up.active{ visibility: visible; opacity: 1; } .pop-up .slick-dots button{ display: none; } .pagination{ position: absolute; bottom:20px; right:60px; } .pagination p, .pagination i, .pagination span{ display: inline-block; font-size: 14px; color:#000; line-height: 24px; font-family: "Microsoft Yahei"; } .bodys{ width:100%; height:100%; } .pop-main{ position: absolute; top:50px; left:50px; width: 1100px; height:600px; } .pop-main .slick .items { height: 600px; position: relative; } .pop-main .items a { transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); position: absolute; left: 0;top: 0; width: 1100px; height: 600px; z-index: 100; } .pop-main a img { background: url("../images/ajax-loader.gif") center center no-repeat; height: 100%; width: auto; margin: auto; } .pop-up a.close{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); display: block; position: absolute; top:38px; right:38px; width:22px; height:22px; background:url("../images/n-icon-04.png") no-repeat center center; background-size: 22px; z-index:300; } .pop-up a.close:hover{ background:url("../images/n-icon-05.png") no-repeat center center; } .pop-main .slick-arrow{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); border:none; width:13px; height:22px; background-color: #003e52; position: absolute; top:50%; margin-top: -18px; cursor: pointer; padding-top: 0; padding-bottom: 0; z-index: 300; } .pop-main .slick-prev { left:0; background: url("../images/n-icon-02.png") no-repeat center center; background-size:13px 22px; } .pop-main .slick-next { right:0; background: url("../images/n-icon-03.png") no-repeat center center; background-size:13px 22px; } .pop-main .slick-prev:hover{ background: url("../images/n-icon-06.png") no-repeat center center; } .pop-main .slick-next:hover{ background: url("../images/n-icon-07.png") no-repeat center center; } .pop-rows{ position: relative; width:100%;height:auto; } .pop-main .pop-subs{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); cursor: text; position: absolute; bottom:0;left:0; width:100%; z-index: 200; height: 100%; overflow: hidden; } .pop-main .inner-info{ position: relative;height: 100%;} .pop-txt-bg{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); cursor: text; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity: 0; visibility: hidden; position: absolute; bottom:0;left:0; background-color: rgba(255,255,255,.8); width:100%; z-index: 200; height: 50%; overflow: hidden; } .pop-main .pop-text{ padding:0 99px; } .pop-title{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); width:22%;transform: translateX(-20px);padding-top: 2%; } .pop-title h5{ font-size: 24px;line-height: 34px; color:#000;letter-spacing: 1px; margin-bottom: 10px; } .pop-cont{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); width:71%;transform: translateX(-20px); position: absolute;right:22px;height:94%;overflow-y:auto; top:18px;padding:0 0 4% 0; } .pop-title h3{ display: inline-block; margin-right: 30px;margin-bottom: 2px; font-size: 12px;line-height: 24px; color:#232323;letter-spacing: 1px; } .pop-cont p{ font-size: 14px;line-height: 28px; color:#232323;letter-spacing: 2px; padding-right: 99px; } .pop-txt-bg.show{ filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity: 1; visibility: visible; } .pop-main .pop-title.show, .pop-main .pop-cont.show{ transform: translateX(0px); } .pop-main .show-text{ transition:opacity 1.6s cubic-bezier(0.165, 0.84, 0.44, 1); position: absolute; display: block; opacity: 1; top: inherit;left: inherit; width: 100px;height: 35px; background: #000;bottom: 0; right: 22px;color: #fff; line-height: 35px;text-align: center; z-index: 210; } .pop-main .show-text:hover{ opacity: .6; } /*end*/ /*header*/ .header{ transition:all .6s ; padding:20px 0; left:0; top:0; width:100%; background-color: #000; z-index: 400; } .navslip{ position: absolute; bottom:0;left:0; width:0;height:2px; background-color: #fff; display: none; overflow: hidden; } .header.action{ padding:12px 0;} .header .header-bg{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); position: fixed; top:74px; left:0; width:100%; height:46px; background-color: #f9f9f9; visibility:hidden; opacity: 0; transform-origin: left top; transform: scaleY(0); } .header .header-bg.show{ visibility: visible; transform: scaleY(1); opacity: 1; } .header .header-bg i{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); display: none; width:23px; height:23px; position: fixed; top:10px; right:4%; background:url("../images/icon-22.png") no-repeat right center; cursor:pointer; z-index: 100; background-size:15px; } .header .header-bg i:hover{ transform: rotate(90deg); } .header .navs>ul>li{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; cursor:pointer; float: left; margin: 0 57px; } .header .navs>ul>li.on a:after{ content:""; display: block; position: absolute; bottom:0;left:0; width:100%;height:2px; background-color: #fff; } .header .navs>ul>li>a{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; display: block; min-width: 60px; font-size:14px; color:#fff; line-height: 50px; letter-spacing:1px; text-align:center; } .header .navs>ul>li>a:hover{ color:#bababa;} .header .navs .sub-box.active{ visibility: visible; transform: scaleY(1); opacity: 1; } .header .sub-box{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); position: absolute; visibility:hidden; z-index: 200; opacity: 0; transform-origin: left top; transform: scaleY(0); top:56px; left:50%; padding:4px 0; width: 500px; margin-left: -250px; text-align: center; } .header .sub-box li{ display: inline-block; } .header .sub-box a{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); display: inline-block; font-size:12px; color:#959595; letter-spacing:4px; line-height: 36px; margin-right:16px; text-align: center; } .header .sub-box a:hover{ color:#003e52; } /*end*/ /*footer*/ .footer{ background-color: #000; max-width:100%; padding:30px 0 40px 0; } .footer .links{ margin-left: 26px; } .footer .links p{ font-size:12px; color:#f5f5f5; line-height: 50px; } .footer .links p a{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); display: inline-block; margin-left: 14px; font-size:12px; color:#666; } .footer .links p a:hover{ color:#f5f5f5; } .footer .share-icon{ height:50px; line-height: 50px; } .footer .share-icon a{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); display: inline-block; width:14px; height:14px; margin-left:8px; overflow: hidden; } .footer .share-icon a.tw{ background:url("../images/icon-07.png") no-repeat center center; } .footer .share-icon a.fc{ background:url("../images/icon-08.png") no-repeat center center; } .footer .share-icon a.g{ background:url("../images/icon-09.png") no-repeat center center; } .footer .share-icon a.tw:hover{ background:url("../images/icon-10.png") no-repeat center center; } .footer .share-icon a.fc:hover{ background:url("../images/icon-11.png") no-repeat center center; } .footer .share-icon a.g:hover{ background:url("../images/icon-12.png") no-repeat center center; } /*end*/ /*index*/ .index-body{ overflow-y: hidden; } .index-body .header{ display: none; } .index-body.scroll{ overflow-y:auto; } .index-body .work-list { margin-bottom: 120px; } .home{ background-color: #fff; z-index: 500; display: none; } .home .subject{ width:100%; height:100%; } .guide-cont{ position: absolute; top:50%;left:50%; transform: translate(-50%,-50%); } .guide-logo img{ transform-style: preserve-3d; width:300px; /*animation:guide-logo 2s linear 1;*/ } .guide-txt{ position: absolute;top:90px;right:8px;} .guide-txt span{ width:9px;display: inline-block; font-size: 12px;font-weight: bold;color:#000; transform-style: preserve-3d; /*animation:guide-txt 4s linear 1;*/ } @keyframes guide-logo{ 0%{ transform: scale(0.4); opacity: 0; } 50%{ transform: scale(0.6); opacity: 0.6; } 100%{ transform: scale(1); opacity: 1; } } @keyframes guide-txt{ 50%{ transform: translateX(2px); opacity: 0.8; } 70%{ transform: translateX(-6px); opacity: 1; } 100%{ width:4px; opacity: 1; } } .guide-cn-txt{ margin-top: 30px;} .guide-cn-txt span{ display: inline-block;font-size: 18px;color:#003e52; transform-origin: 50% 50% -10px; transform-style: preserve-3d; transform: rotateX(1turn); animation: flip 3s 1; } .guide-cn-txt span:nth-child(1){ animation-delay: 0.1s; } .guide-cn-txt span:nth-child(2){ animation-delay: 0.3s; } .guide-cn-txt span:nth-child(3){ animation-delay: 0.5s; } .guide-cn-txt span:nth-child(4){ animation-delay: 0.7s; } .guide-cn-txt span:nth-child(5){ animation-delay: 0.9s; } .guide-cn-txt span:nth-child(6){ animation-delay: 1.1s; } .guide-cn-txt span:nth-child(7){ animation-delay: 1.2s; } .guide-cn-txt span:nth-child(8){ animation-delay: 1.3s; } .guide-cn-txt span:nth-child(9){ animation-delay: 1.5s; } .guide-cn-txt span:nth-child(10){ animation-delay: 1.7s; } @keyframes flip { to { transform: rotateX(-45deg); } } .home .cont{ width:866px; height:318px; position: absolute; top:50%; left:50%; margin-left: -433px; margin-top: -159px; } .home .pic{ margin-right: 30px; margin-top: 18px; } .home .home-text { margin-top: 10px; } .home .home-title h4{ font-size: 50px; color:#000; } .home .home-title h5{ font-size: 82px; color:#003e52; font-family:"LATOREGULAR"; } .home .home-text p{ font-size: 18px; color:#000; line-height: 30px; } .switchPage_dragbar{ visibility:hidden; width:1200px; height:1px; position: absolute; border-bottom: #83CC32 1px solid; left: 15px;top: 0; z-index: 1;padding: 0 39px; } .switchPage_draghandle{ position: absolute; width: 180px;height: 10px; overflow: hidden; background-color: red; bottom: -5px;cursor: pointer; margin: 0 39px;left: 0; } .index-wrap .container{ padding-top: 0; } .index-wrap .subject{ width:62.5%;} .index-wrap .subject .items{ width:33.3333%;float: left;} .index-wrap .subject a{ display: block;padding-left: 12px;} .index-wrap .subject img{ max-width: 100%;} .index-wrap .common-title a.title-line{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); display: inline-block; letter-spacing: 4px; } .index-wrap .common-title .title-en{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1);} .index-wrap .common-title a.title-line:hover, .index-wrap .common-title a.title-line:hover p{ color:#003e52; } .slick-index .slick-arrow{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); border:none;text-indent: -999999999px; position: absolute;top:50%;margin-top: -40px; width: 80px;height: 80px;z-index: 40;cursor: pointer; } .slick-index .slick-prev{ left:40px; background: url(../images/arr-01.png) no-repeat center center; } .slick-index .slick-next{ right:40px; background: url(../images/arr-02.png) no-repeat center center; } .slick-index .slick-prev:hover{ background: url(../images/arr-03.png) no-repeat center center; } .slick-index .slick-next:hover{ background: url(../images/arr-04.png) no-repeat center center; } .index-wrap .slick img{ max-width: 100%; } .index-wrap .slick h2{ position: absolute; right:11%; bottom:186px; font-family: "LatoBlack"; font-size:60px; color:#fff; line-height: 48px; } .index-wrap .slick p{ position: absolute; right:11%; bottom:122px; letter-spacing: 14px; font-size: 30px; line-height: 30px; color:#fff; } .index-wrap .slick-dots { width:100%; text-align: center; position: absolute; bottom:24px; } .index-wrap .slick-dots li{ display: inline-block; margin-right:24px; } .index-wrap .slick-dots button{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); border:none; text-indent: -9999999px; width:24px; height:3px; background-color: #fff; cursor: pointer; } .index-wrap .slick-dots .slick-active button{ background-color: #053e51; } .index-wrap .inner{ width:1016px; margin:80px auto 60px auto; text-align: left; } .index-wrap .index-project-text, .index-wrap .work-text{display: none;} .index-wrap .inner .slidebar{ width:214px; margin-right: 5%; } .index-wrap .inner-title{ width:70%; margin-top: 40px; } .index-wrap .inner-title .slidebar{ width:20%; } .index-wrap .inner .slidebar h3{ font-size: 24px; line-height: 36px; color:#000; margin-bottom: 8px; } .index-wrap .inner .slidebar p{ font-size: 16px;line-height: 24px; color:#000;text-align: left; } .index-wrap .inner .main{ width:75%; } .index-wrap .inner .main p{ font-size: 14px; color:#5b5b5b; line-height: 24px; letter-spacing: 2px; margin-bottom: 16px; } .index-wrap .about-list:after{ content:"";display: block; padding-top: 24.47%; } .index-wrap .scrollBox{ overflow-x: hidden; overflow-y: hidden; position: absolute;top:0; left:0;height:100%;width:62.5%; } .index-wrap .about-list .common-title{ position: absolute; right:0; top:50%; margin-top: -30px; z-index: 10;width:37.5%; text-align: center; } .index-wrap .scrollBox .img-box{ float: left;} .index-wrap .scrollBox .img-01{ width:60%;} .index-wrap .scrollBox .img-02{ width:40%;} .index-wrap .scrollBox .img-padding{ position: relative;display: inline-block;} .index-wrap .scrollBox .img-01 .a-content{ margin-right: 12px;display: inline-block;} .index-wrap .scrollBox .img-padding:after{ transition:background 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);content:"";display: block;position: absolute;left:0;top:0;width:100%;height:100%;} .index-wrap .scrollBox .img-padding:hover:after{ background-color: rgba(0,0,0,.4);} .index-wrap .scrollBox .img-02 .img-padding{ margin:0 6px;} .index-wrap .scrollBox img{ max-width: 100%;} .index-wrap .scrollBox .index-wrap .team-list .slick_box{ position: absolute; left:0; top:0; } .index-wrap .team-list .items{ float: left; margin-left: 16px; } .index-wrap .team-list .items:first-child{ margin-left: 0; } .index-wrap .team-list .items img{ max-width: 100%; } .index-wrap .drawImageBox .common-title{ position: absolute; left:0; top:50%; margin-top: -30px; z-index: 10; width:37.5%; } .index-wrap .about-list{ width:100%; margin:60px 0; } .index-wrap .about-list .about_slick, .index-wrap .work-box .wokr_slick{ position: absolute; top:0; left:0; } .index-wrap .about-list li{ float: left; } .index-wrap .about-list li a{ display: block; margin-right:14px; } .index-wrap .about-list li:last-child a{ margin-right: 0; } .index-wrap .about-list li img{ max-width: 100%; } .index-wrap .work-text{ min-height: 280px; width:auto; margin-bottom: 25px; } .index-wrap .work-text .sub{ width:884px; position: absolute; left:38.2%; } .index-wrap .work-text .main{ margin-right: 54px; } .index-wrap .work-list{ width: 100%;position: relative; margin-top: 20px;margin-bottom: 90px; overflow: hidden; } .index-wrap .work-list:after{ content:""; display: block; padding-top: 24.47%; } .index-work-box{ width:62.5%;position: absolute; top:0;right:0; } .index-work-box img{ max-width: 100%;} .index-work-box .img-box{ float: right;} .index-work-box .img-padding{ position: relative;display: inline-block;} .index-work-box .img-01 .img-padding{ margin: 0 6px;} .index-work-box .img-02 .img-padding{ margin-left: 12px;} .index-work-box .img-padding:after{ transition:background 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);content:"";display: block;position: absolute;left:0;top:0;width:100%;height:100%;} .index-work-box .img-padding:hover:after{ background-color: rgba(0,0,0,.4);} .index-work-box .img-01{ width:40%;} .index-work-box .img-02{ width:60%;} .index-wrap .work-list .common-title{ position: absolute;left: 0;top: 50%; margin-top: -30px;z-index: 10;width:37.5%; text-align: center; } .index-wrap .work-list li{ float: left; } .index-wrap .work-list li a{ display: block; margin-left: 14px; } .index-wrap .work-list li:first-child a{ margin-left: 0; } .index-wrap .work-list li img{ max-width: 100%; } .index-wrap .section{ width:1200px; margin-top: 60px; margin-bottom: 116px; float: right; } .index-wrap .index-new-list{ width:100%; min-height: 355px; margin-top: 16px; margin-bottom: 90px; } .news-box{ position: absolute;top:0;left:0; width:77.5%;height: 100%; } .index-new-list li{ margin-bottom:0;} .index-wrap .index-new-list .common-title{ position: absolute; right:0;top: 50%;width:37.5%; margin-top: -36px;z-index: 10; } .index-wrap .index-new-list .title-line{ text-align: center; } .index-about .title-line, .new-lists .title-line{ font-size: 24px; line-height: 36px; color: #000;letter-spacing: 6px; } .index-wrap .map{ margin-top: 100px; } .index-wrap .map img{ max-width:100%; } .index-wrap .mapMsgText{ width:980px; height:300px; position: absolute; bottom:50px; left:50%; margin-left: -450px; background-color: rgba(117,117,117,.6); } .index-wrap .mapMsgText .mapSub{ width:980px; height:300px; } .index-wrap .mapMsgText h5{ font-family: "LATOREGULAR"; font-size: 22px; color:#fff; line-height: 36px; } .index-wrap .mapMsgText h6{ font-size: 16px; line-height: 20px; color:#fff; } .index-wrap .mapMsgText p{ font-size: 12px; line-height: 18px; color:#fff; } .index-wrap .mapMsgText .common-title{ position: absolute; left:120px; top:50%; margin-top: -30px; } .index-wrap .mapMsgText .txt{ display: inline-block; position: absolute; top:50%; right:170px; margin-top: -85px; height:170px; overflow: hidden; } .index-wrap .mapMsgText .common-title a{ color:#fff; line-height: 42px; } .index-wrap .mapMsgText .common-title p{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); font-size: 18px; } .index-wrap .mapMsgText .title-line:before{ background-color: #fff; } .index-wrap .mapMsgText .title-line:after{ background-color: #fff; } /*end*/ /*join*/ .join-wrap .lists{ margin: 100px auto 160px auto; width:950px; } .join-wrap .lists li{ border-top:1px solid #d9d9d9; padding: 52px 0; cursor: pointer; } .join-wrap .lists li:last-child{ border-bottom:1px solid #d9d9d9; } .join-wrap .lists .inner{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); padding-left:58px;padding-right: 30px; display: inline-block; } .join-wrap .inner i{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); display: block; width:20px;height:20px; position: absolute;left:852px; top:50%;margin-top: -10px; background:url("../images/n-icon-12.png") no-repeat center center; background-size: 20px; } .join-wrap .inner.icon i{ background:url("../images/n-icon-10.png") no-repeat center center; background-size: 20px; } .join-wrap .lists li:hover .inner i{ background:url("../images/sign.png") no-repeat center center; background-size: 20px; } .join-wrap .lists li:hover .inner.icon i{background:url("../images/n-icon-11.png") no-repeat center center; background-size: 20px;} .join-wrap li.on i{ background:url("../images/reduce.png") no-repeat center center; background-size: 10px 2px; width: 10px;height: 2px;margin-top: -1px; left: 855px; } .join-wrap .lists li.tag{ padding-bottom: 0; } .join-wrap .lists li.tag .cont{ padding-bottom: 40px; } .join-wrap .lists .inner img{ position: absolute; left:12px; top:18px; width: 26px; height:26px; } .join-wrap .lists h5{ font-size:18px; color:#000; line-height:36px; } .join-wrap .lists h6{ font-size:16px; color:#666; line-height:18px; } .join-wrap .lists .cont{ margin-top: 40px; display: none; padding-left: 13px; width:870px; } .join-wrap .lists .cont p{ font-size:14px; color:#5b5b5b; line-height: 40px; letter-spacing: 2px; } /*end*/ /*contact*/ .contact-wrap .container{ padding-top: 0; padding-bottom: 110px; } .contact-wrap .map{ margin: 58px auto 56px auto; width: 1150px; height:514px; } .contact-wrap .map .anchorBL{ display: none; } .contact-wrap .basic{ width:800px; margin:0 auto; } .contact-wrap .basic .txt p{ margin-top: 20px; font-size:22px; color:#000; line-height: 36px; font-family: "LATOREGULAR"; } /*.contact-wrap .basic .hybr{ margin-left: 118px; }*/ .contact-wrap .basic .hybr h6{ font-size:14px; color:#000; line-height: 18px; letter-spacing: 1px; } .contact-wrap .basic .hybr p{ font-size:12px; color:#000; line-height: 18px; } /*end*/ /*download*/ .download-wrap .container{ margin-bottom: 176px; font-size: 0; } .download-wrap .lists ul{ margin: 0 -24px;} .download-wrap .lists li{ display: inline-block; width:25%; margin-bottom: 48px; } .download-wrap .lists a{ display: block; margin:0 24px; } .download-wrap .lists .inner-img img{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); max-width:100%;filter: none; -webkit-filter: none;-moz-filter: none; -ms-filter: none;-o-filter: none; filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); } .download-wrap .lists .inner-cont{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); position: absolute;top:0;left:0;right:0;bottom:0; transform: scale(0);opacity: 0;filter:alpha(opacity=0); -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .download-wrap .lists .text{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); position: absolute;bottom:0;left:0; width:100%;z-index: 10; } .download-wrap .lists h5{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); display: inline-block;transform: scale(0);opacity: 0; filter:alpha(opacity=0);-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; font-size: 16px;color:#fff;line-height: 24px; text-align: center;padding:18px 33px 18px 5px; margin:0 14px;background:url("../images/icon-17.png") no-repeat right 0px; } .download-wrap .lists a:hover .inner-cont{ transform: scale(1); opacity: 1; filter:alpha(opacity=100); -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .download-wrap .lists a:hover .inner-img img{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0); -webkit-filter: grayscale(0); } .download-wrap .lists a:hover h5{ transform: scale(1); opacity: 1; filter:alpha(opacity=100); -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; } /*end*/ /*news*/ .news-wrap .btn-page{margin: 70px auto 170px auto;} .news-wrap .list-box{ min-height: 95px;} .news-wrap .emptys p{ text-align: center;line-height: 24px;font-size: 14px;letter-spacing: 2px;color:#656565;} .new-lists{ margin-bottom: 8px; } .new-lists li{ float: left; width:33.3333%; margin-bottom: 70px; } .new-lists li.imgWidth{ width:66.6666%; } .new-lists li.imgWidth img{ max-width: 100%; height: 100%; } .new-lists li.imgWidth .col{ width:87.5%;} .new-lists li a{ position: relative; display: block; padding-right: 12px; margin-right: 62px; backface-visibility: hidden; } .new-lists .col{ padding:0 46px 0 50px; min-height: 350px; height: 350px; min-width: 33.333333%; width:73.33333%; } .new-lists .col p{ font-size: 14px; color:#5b5b5b; line-height: 25px; } .new-lists .new-text{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); border:1px solid #bababa; position: absolute; left:12px; bottom:15px; background-color: #fff; display: table; backface-visibility: hidden; transform-style: preserve-3d; } .new-lists .new-text .text{ display: table-cell; vertical-align: middle; } .new-lists .new-border{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); border:1px solid #bababa; } .new-lists .new-border h5, .new-lists .new-border p{ color: rgba(255,255,255,0); } .new-lists h5{ font-size:20px; line-height: 40px; color:#000; } .new-lists h5 span{ font-size: 50px; } .new-lists li a:hover .new-text{ background-color: #757575; border-color:#757575; transform: translate(-12px,15px); } .new-lists li a:hover .new-text h5, .new-lists li a:hover .new-text h5 span, .new-lists li a:hover .new-text p{ color:#fff; } .new-lists li.imgWidth .new-text{ padding:0; width:auto; } .new-lists li.imgWidth .new-text .text{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); position: absolute; left:50px; top:50%; max-width: 250px; height:140px; margin-top: -70px; } .new-lists li.imgWidth .new-text .text h5, .new-lists li.imgWidth .new-text .text h5 span, .new-lists li.imgWidth .new-text .text p{ color:#fff; } .new-lists li.imgWidth .new-text{ border-color:#fff; } .new-lists li.imgWidth .bg-img{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); position: absolute; left:0;top:0; right:0;bottom:0; width:100%;height:100%; background-color: #757575; opacity: 0; filter:alpha(opacity=0); -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .new-lists li.imgWidth a:hover .new-text{ background-color: #fff; border-color:#fff; } .new-lists li.imgWidth a:hover .new-border{ border-color:#fff; } .new-lists li.imgWidth a:hover .bg-img{ opacity: 0.6; filter:alpha(opacity=60); -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=60)"; } /*end*/ /*new-details*/ .news-details .new-bg-img{margin-top: 60px; } .news-details .new-bg-img img{ max-width: 100%;} .news-details .subject{ margin: 42px auto 102px auto; width:1000px; } .news-details .title{ margin-bottom: 48px; } .news-details .title h5{ text-align: center; font-family: "Microsoft Yahei"; font-size:24px; color:#000; line-height: 36px; margin-bottom: 8px; } .news-details .title time{ display: block; text-align: center; font-size: 14px; color:#959595; line-height: 24px; } .news-details .text p{ font-family: "Microsoft Yahei"; font-size: 14px; color:#5b5b5b; line-height: 30px; margin-bottom: 34px; } .news-details img { display: inline-block; } .return-list{ margin-bottom: 150px;} .return-list a{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); display: block; margin:0 auto; width:18px; height:23px; background:url("../images/n-icon-08.png") no-repeat center center; background-size: 18px 23px; } .return-list a:hover{ background:url("../images/n-icon-09.png") no-repeat center center; } .news-details .boxs{ width:1200px; margin:0 auto 110px auto; } .news-details .boxs ul{ margin-top: 90px; } .news-details .boxs li{ width:33.3333333%; } .news-details .boxs .imgWidth{ width:43.7%; } .news-details .imgWidth .col{ width:auto;} .news-details .boxs .imgWidth a{ margin-right: 12px; padding-right: 12px; } .news-details .boxs .col{ padding:0 46px; } .news-details .boxs .new-text .text{ text-align: left; } /*end*/ /*work*/ .work-wrap .btn-page{ margin-top: 84px; } .work-wrap .container{ margin-bottom: 170px; } .work-wrap .lists{ margin-top: 70px; } .work-wrap .lists li{ float: left; margin-bottom: 50px; } .work-wrap .lists ul { margin-right: -12px; } .work-wrap .lists li.imgWidth{ width:50%; } .work-wrap .lists li a{ display: block; margin-right:12px; } .work-list li .inner-img { height: 390px; } .work-list li .inner-img img{ height: 100%; width: auto; filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); } .work-list .inner-cont { transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0; filter:alpha(opacity=0); -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; position: absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%; } .work-list .inner-cont .text{ max-height: 200px; overflow: hidden; position: absolute; top:50%; left:0; width:100%; margin-top: -47px; } .work-list .inner-cont h5{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0; filter:alpha(opacity=0); -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; font-size:24px; line-height: 34px; color:#fff; text-align: center; margin-bottom: 26px; } .work-list .inner-cont p{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0; filter:alpha(opacity=0); -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; font-size:14px; color:#fff; line-height: 34px; text-align: center; } .work-list em{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); display: none; transform: translateX(-100%); opacity: 0; filter:alpha(opacity=0); -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; width:64px; height:6px; position: absolute; left:50%; bottom:50px; margin-left: -32px; background:url("../images/icon-19.png") no-repeat center center; } .work-list li a:hover .inner-img img{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0); -webkit-filter: grayscale(0); } .work-list li a:hover .inner-cont{ opacity: 1; filter:alpha(opacity=100); -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .work-list li a:hover .inner-cont h5{ opacity: 1; filter:alpha(opacity=100); -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .work-list li a:hover .inner-cont p{ opacity: 1; filter:alpha(opacity=100); -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .work-list li a:hover em{ transform: translateX(0%); opacity: 1; filter:alpha(opacity=100); -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; } /*end*/ /*work-details*/ .work-details .content{ margin-top: 50px; } .work-details .slideBtnLeft{ left:63.8%; } .work-details .imgMouseMoveLeft{ margin-bottom: 50px; } .work-details .subject{ width:1190px; margin-bottom: 55px; } .work-details .subject .box{ float: right; } .work-details .subject .slidebar{ width:250px; margin-right: 118px; } .work-details .subject .slidebar h5{ font-size: 24px; color:#000; line-height: 24px; margin-bottom: 25px; } .work-details .subject .slidebar p{ font-size: 14px; color:#959595; line-height: 24px; } .work-details .subject .main{ width:470px; } .work-details .subject .main h6{ font-size: 18px; color:#000; line-height: 30px; margin-bottom: 26px; } .work-details .subject .main p{ font-size: 14px; color:#5b5b5b; line-height: 40px; letter-spacing: 2px; margin-bottom: 40px; text-align: justify; } .work-details .imgMouseMoveRight{ width:1208px; margin-top: 60px; height: 470px; } .work-details .container{ margin-bottom: 232px; } /*end*/ /*team*/ .team-wrap .subject img{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); max-width: 100%; filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); } .team-wrap .subject a:hover img{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0); -webkit-filter: grayscale(0); } .common-team-cont .pic{ position: relative;} .common-team-cont .pic:after{ transition:background 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);content:"";display: block;position: absolute;left:0;top:0;width:100%;height:100%;} .common-team-cont a:hover .pic:after{ background-color: rgba(0,0,0,.4);} .team-wrap .subject a{ display: block; padding-left: 14px; } .team-wrap .subject button:before{ content: ""; display: block; padding-top: 10px; } .team-wrap .slick-prev{ display: none !important; } .team-wrap .sub-middle{ margin-bottom: 145px; } .team-wrap .common-title{ margin-top: 70px;margin-bottom: 80px;} .team-wrap .sub-01{ float: right; } .team-wrap .sub-01 button{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); border:none;color:#003e52;text-indent: -99999px; cursor: pointer;width:20px;height:36px; position: absolute;left:-64px;right:0;bottom: 28px; background: url("../images/icon-23.png") no-repeat center center; padding-top: 0;padding-bottom: 0; } .team-wrap .sub-01 button:hover{ transform: scale(0.8) translateX(-6px); background: url("../images/icon-25.png") no-repeat center center; } .team-wrap .sub-02{ float: left; } .team-wrap .sub-02 button{ transition:all .5s cubic-bezier(0.165, 0.84, 0.44, 1); border:none;color:#003e52;text-indent: -99999px; cursor: pointer;width:20px;height:36px; position: absolute;right:-64px;bottom: 28px; background: url("../images/icon-24.png") no-repeat center center; padding-top: 0;padding-bottom: 0; } .team-wrap .sub-02 button:hover{ transform: scale(0.8) translateX(-6px); background: url("../images/icon-26.png") no-repeat center center; } .team-wrap .hybr{ margin-top: 112px; margin-bottom: 146px; text-align: center; } .team-wrap .hybr p{ font-size: 14px; color:#5b5b5b; line-height: 30px; } /*end*/ /*team-detaisl*/ .team-details .container{ margin-bottom: 102px; } .team-details .content{ margin: 96px auto 116px auto; width:1110px; } .team-details .content .pic{ width:467px; } .team-details .content .inner{ width:470px; height: 470px; display: table; } .team-details .content .title{ margin-bottom: 36px; } .team-details .content .title h5{ font-size: 24px; color:#003e52; margin-bottom:16px; } .team-details .content .title h6{ font-size: 22px; color:#656565; line-height: 24px; margin-bottom: 8px; } .team-details .content .title p{ font-size: 16px; color:#959595; line-height: 24px; } .team-details .content .txt p{ font-family: "Microsoft Yahei"; font-size: 14px; color:#5b5b5b; line-height: 30px; } /*end*/ /*about*/ .about .pop-main .slick-prev { left:0;} .about .pop-main .slick-next { right:0;} .about-wrap .container{ margin-bottom: 134px; } .about-wrap .box{ margin-top: 86px; } .about-wrap .content{ margin-top: 50px; } .about-wrap .content a{ display: inline-block;position: relative;} .about-wrap .content a:after{ transition:background 1.6s ease;content: "";display: block;position: absolute;top:0;left:0;width:100%;height:100%;background-color: rgba(0,0,0,0);} .about-wrap .content a:hover:after{ background-color: rgba(0,0,0,.4);} .about-wrap .subject{ width:1200px; } .about-wrap .slick_team .items{ float: left;width:33.333333%; } .about-wrap .subject .text{ width:60%; float: right; } .about-wrap .subject h5{ font-size: 18px; color:#000; line-height: 30px; margin-bottom: 30px; } .about-wrap .subject .text p{ font-size: 14px; color:#5b5b5b; line-height: 28px; letter-spacing: 2px; text-align: justify; } .about-wrap .inner{ margin-top: 160px; } .about-wrap .slideBtnLeft{ left:63.8%; } .about-wrap .imgMouseMoveRight{ max-width: 1200px; margin-top: 60px; height: 468px; } /*end*/ @media only screen and ( max-width:1460px ){ .pop-up a.close{ top:15px;right:15px; } .new-lists li.imgWidth .new-border{ width:86.5%;} .news-details .new-lists .imgWidth .new-border{ width: 84%;} } @media only screen and ( max-width:1300px ){ .header .navs>ul>li>a{ text-align: center; } .header .sub-box{ width:330px; left:0; text-align: right; } .slideBtnLeft{ left:1190px; } .index-wrap .mapMsgText .common-title{ transform: inherit; } } @media only screen and ( max-width:1200px ){ body.index-body{ overflow-x: scroll; } .index-wrap .drawImageBox{ overflow: hidden; } } @media only screen and ( max-height:767px ){ .pop-up{ overflow: auto;} } /* 0316 by Sunny */ .slick-index-box{position: relative;overflow: hidden;} .slick-index-box:before{content: '';display: block;padding-top: 41.6666%;} .slick-index-box .slick-index{position: absolute;top: 0;right: 0;bottom: 0;left: 0;} .index-wrap .scrollBox .img-01 .a-content{display: block;} .index-wrap .scrollBox .img-01 .img-padding, .index-work-box .img-02 .img-padding{position: relative;display: block;padding-top: 66.0112%;} .index-wrap .scrollBox .img-01 .img-padding img, .index-work-box .img-02 .img-padding img{position: absolute;top: 0;left: 0;} .index-wrap .scrollBox .img-02 .img-padding, .index-work-box .img-01 .img-padding{position: relative;display: block;padding-top: 100%;} .index-wrap .scrollBox .img-02 .img-padding img, .index-work-box .img-01 .img-padding img{position: absolute;top: 0;left: 0;} .index-wrap .map a{position: relative;display: block;overflow: hidden;} /* .index-wrap .map a:before{content: '';display: block;padding-top: 38.0208%;} */ /* .index-wrap .map a img{position: absolute;top: 0;left: 0;width: 100%;} */ .index-wrap .map a img{width: 100%;} .home{height: 100vh;display: block;opacity: 0;-webkit-animation: fadeIn 2s ease-in-out;animation: fadeIn 2s ease-in-out;-webkit-animation-fill-mode: both;animation-fill-mode: both;} @-webkit-keyframes fadeIn{ 0%{opacity: 0} 100%{opacity: 1} } @keyframes fadeIn{ 0%{opacity: 0} 100%{opacity: 1} }