@charset "utf-8"; @font-face { font-family: "HELVETICA CONDENSED BOLD"; src: url("../fonts/HELVETICA CONDENSED BOLD.woff2") format("woff2"), url("../fonts/HELVETICA CONDENSED BOLD.woff") format("woff"), url("../fonts/HELVETICA CONDENSED BOLD.ttf") format("truetype"), url("../fonts/HELVETICA CONDENSED BOLD.eot") format("embedded-opentype"), url("../fonts/HELVETICA CONDENSED BOLD.svg") format("svg"); font-weight: normal; font-style: normal; } .project-box{ background-color: #f0f0f0; height: 100vh; min-width: 1200px; } .enginner-box{ height: 100%; } .project-box .w1280{ height: 100%; } .project-box .j-leftfixed{ left: 4.95%; top: 50%; transform: translateY(-50%); } .project-tab-box{ position: absolute; top: 50%; right: 5.2%; transform: translateY(calc(-50% + 50px)); width: 68.75%; } .project-tab-box .project-item{ display: none; } .project-tab-box .trans{ width: 100%; } .engineer-box .list-item{ display: inline-block; *display: inline; zoom: 1; } .engineer-box .list-item{ margin-right: .75%; } .engineer-box .top-box, .engineer-box .bottom-box{ font-size: 0; } .engineer-box .top-box .list-item{ vertical-align: bottom; } .engineer-box .list .item{ position: relative; display: block; } .engineer-box .bottom-box .list .item{ margin-bottom: .25rem; } .engineer-box .list img{ width: 100%; } .engineer-box .top-box .list-item:nth-child(1), .engineer-box .bottom-box .list-item:nth-child(1){ width: 13.63%; } .engineer-box .top-box .list-item:nth-child(2), .engineer-box .bottom-box .list-item:nth-child(2){ width: 18.94%; } .engineer-box .top-box .list-item:nth-child(3), .engineer-box .bottom-box .list-item:nth-child(3){ width: 13.63%; } .engineer-box .top-box .list-item:nth-child(4), .engineer-box .bottom-box .list-item:nth-child(4){ width: 13.63%; } .engineer-box .top-box .list-item:nth-child(5){ width: 18.93%; } .engineer-box .top-box .list-item:nth-child(6){ width: 17.42%; } .engineer-box .bottom-box .list-item:nth-child(5){ width: 13.63%; } .engineer-box .bottom-box .list-item:nth-child(6){ width: 18.93%; } .engineer-box .top-box .list-item:last-child{ margin-right: 0; } .engineer-box .bottom-box .list-item{ vertical-align: top; } .engineer-box .list .hover{ position: absolute; left: 0; top: 0; opacity: 0; filter: alpha(opacity=0); transition: all .3s; } .engineer-box .list .text{ position: absolute; width: 100%; text-align: center; left: 0; top: 50%; transform: translateY(-50%); color: #fff; } .engineer-box .list .text .cn{ font-size: .5rem; line-height: .6rem; } .engineer-box .list .text .en{ font-size: .3rem; line-height: .5rem; text-transform: uppercase; margin-top: .25rem; font-family: arial; } .project-more{ position: absolute; font-size: .3rem; font-family: arial; color: #fff; opacity: 0; filter: alpha(opacity=0); transition: all .3s; } .engineer-box .list .project-more{ right: .5rem; bottom: .5rem; } .engineer-box .top-box .list-item:nth-child(2) .item{ margin-top: .25rem; } .engineer-box .bottom-box{ margin-top: .25rem; } .estate-list .estate-item{ position: absolute; width: 50%; } .estate-list .estate-item:nth-child(1){ left: 0; top: 0; } .estate-list .estate-item:nth-child(2){ right: 0; bottom: 0; } .estate-list .estate-item img{ width: 100%; } .estate-list .estate-item .hover{ position: absolute; left: 0; top: 0; width: 100%; opacity: 0; filter: alpha(opacity=0); transition: all .3s; } .estate-list .estate-item .text{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; color: #fff; } .estate-list .estate-item .text .cn{ font-size: .75rem; line-height: .8rem; } .estate-list .estate-item .text .en{ font-size: .4rem; line-height: .5rem; text-transform: uppercase; margin-top: 5px; } .estate-list .estate-item .estate-tit{ font-size: 1.5rem; line-height: 1.2rem; font-family: arial; text-transform: uppercase; color: #000; opacity: .2; filter: alpha(opacity=20); } .estate-list .estate-item .project-more{ right: 7.5%; bottom: 7%; } .estate-list .estate-item:nth-child(2) .estate-tit{ text-align: right; } .ppp-box .ppp-tit{ font-size: .75rem; line-height: .8rem; color: #333; font-family: arial; position: absolute; left: 0; top: 7.4% } .ppp-list .item{ position: absolute; width: 24.24%; } .ppp-list .item:nth-child(1){ left: 0; top: 18.51%; } .ppp-list .item:nth-child(2){ left: 0; bottom: 3.7%; } .ppp-list .item:nth-child(3){ top: 18.51%; left: 25.15%; } .ppp-list .item:nth-child(4){ top: 0%; left: 50.6%; } .ppp-list .item:nth-child(5){ bottom: 0%; left: 50.6%; } .ppp-list .item:nth-child(6){ top: 5.9%; right: 0; } .ppp-list .item:nth-child(7){ bottom: 0; right: 0; } .ppp-list .item img{ width: 100%; } .ppp-list .item .hover{ position: absolute; left: 0; top: 0; opacity: 0; filter: alpha(opacity=0); transition: all .3s; } .ppp-list .item .text{ position: absolute; left: 0; top: 50%; width: 100%; text-align: center; transform: translateY(-50%); color: #fff; } .ppp-list .item .text .cn{ font-size: .75rem; line-height: .8rem; } .ppp-list .item .text .en{ font-size: .4rem; line-height: .5rem; margin-top: 5px; font-family: arial; text-transform: uppercase; } .ppp-list .item .project-more{ bottom: 6.8%; right: 7.1%; } .edu-box .edu-tit{ font-size: 1.5rem; line-height: 1rem; font-family: arial; text-transform: uppercase; color: #000; opacity: .2; filter: alpha(opacity=20); } .edu-list{ font-size: 0; } .edu-list .item{ display: inline-block; *display: inline; zoom: 1; width: 37.12%; position: relative; vertical-align: top; } .edu-list .item:nth-child(2){ margin:1.25rem .75% 0; width: 24.24%; } .edu-list .item:nth-child(3){ margin-top: 2.75rem; } .edu-list .item img{ width: 100%; } .edu-list .item .hover{ position: absolute; left: 0; top: 0; width: 100%; opacity: 0; filter: alpha(opacity=0); transition: all .3s; } .edu-list .item .text{ position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); text-align: center; color: #fff; } .edu-list .item .text .cn{ font-size: .75rem; line-height: .8rem; } .edu-list .item .text .en{ font-size: .4rem; line-height: .5rem; font-family: arial; margin-top: 5px; text-transform: uppercase; opacity: .6; filter: alpha(opacity=60); } .project-list-box{ padding: 3rem 0 4.25rem; } .project-list-box .tab-btns{ padding: 0 3.5rem; overflow: hidden; position: relative; } .project-list-box .tab-btns .swiper-slide{ width: auto; text-align: center; margin-right: 2.75rem; } .project-list-box .tab-btns .swiper-slide:last-child{ margin-right: 0; } .project-list-box .tab-btns:before{ content: ""; position: absolute; left: 0; top: 1rem; width: 100%; height: 1px; background-color: #e5e5e5; } .project-list-box .tab-btns .icon{ width: 2rem; margin: 0 auto; position: relative; border-radius: 100%; } .project-list-box .tab-btns .icon img{ width: 100%; } .project-list-box .tab-btns .icon .hover{ position: absolute; left: 0; top: 0; width: 100%; opacity: 0; filter: alpha(opacity=0); transition: all .3s; } .project-list-box .tab-btns .txt{ font-size: .4rem; line-height: .5rem; margin-top: 5px; color: #333; } .project-list-box .tab-btns .swiper-slide.cur .hover{ opacity: 1; filter: alpha(opacity=100); } .project-list-box .tab-btns .swiper-button-prev, .project-list-box .tab-btns .swiper-button-next{ top: .5rem; position: absolute; margin: 0; background-color: #fff; } .project-list-box .tab-btns .swiper-button-prev{ left: 0; } .project-list-box .tab-btns .swiper-button-next{ right: 0; } .project-list{ margin-top: 1.4rem; } .project-list .row{ margin: 0 -.5rem; } .project-list .item{ padding: 0 .5rem; box-sizing: border-box; margin-bottom: 1.5rem; } .project-list .con-box{ display: block; position: relative; } .project-list .con-box:before{ content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: #004a9a; transition: all .3s; } .project-list .con-box .img{ overflow: hidden; } .project-list .con-box img{ width: 100%; transition: all .3s; } .project-list .text-box{ border: 1px solid #e5e5e5; border-top: none; } .project-list .text-box .top-box{ border-bottom: 1px solid #e5e5e5; padding: .6rem .7rem; font-size: 0; } .project-list .text-box .top-box .tit{ font-size: .325rem; line-height: .4rem; color: #999; padding-right: .75rem; position: relative; display: inline-block; *display: inline; zoom: 1; } .project-list .text-box .top-box .tit:before{ content: ""; position: absolute; right: 0; width: .375rem; height: 1px; background-color: #999; top: 50%; transform: translateY(-50%); } .project-list .text-box .project-tit{ font-size: .45rem; line-height: .55rem; color: #333; margin-top: .25rem; } .project-list .text-box .bottom-box{ padding: .5rem .7rem; } .project-list .bottom-box .honor{ float: left; font-size: .35rem; line-height: .45rem; color: #e60012; } .project-list .bottom-box .projectlist-more{ float: right; font-size: .35rem; line-height: .45rem; color: #666; } .project-list .paga{ margin-top: 1rem; } .join-box{ height: 100vh; background-repeat: no-repeat; background-position: top center; background-size: cover; } .join-box .list, .join-box .list .row{ height: 100%; } .join-box .list .item{ height: 50%; border-right: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); } .join-box .list .item:nth-child(3n){ border-right: none; } .join-box .list .item:nth-child(4), .join-box .list .item:nth-child(5), .join-box .list .item:nth-child(6){ border-bottom: none; } .join-box .list .con-box{ display: block; } .join-box .list .con-box .mask{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url('../img/join-mask.png'); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0; filter: alpha(opacity=0); transition: all .3s; } .join-box .list .con-box .text{ position: absolute; left: 0; padding:0 9.375%; bottom: calc(8.16% - 2.375rem); width: 100%; box-sizing: border-box; transition: all .3s; } .join-box .list .con-box .icon{ width: 1.65rem; transition: all .3s; } .join-box .list .con-box .icon img{ width: 100%; } .join-box .list .con-box .tit{ font-size: 1.2rem; line-height: 1.3rem; color: #fff; margin-top: .5rem; } .join-box .list .con-box .con{ margin-top: .5rem; font-size: .4rem; line-height: .5rem; color: #fff; } .join-box .list .con-box .join-btn{ display: block; width: 1.375rem; margin-top: 1rem; visibility: hidden; } .join-box .list .con-box .join-btn img{ width: 100%; } .join-list-box{ padding: 3rem 0 4.25rem; } .join-list-box .list .row{ margin: 0 -.5rem; } .join-list-box .list .item{ box-sizing: border-box; padding: 0 .5rem; margin-bottom: 1.5rem; } .join-list-box .list img{ width: 100%; } .join-list-box .list .txt{ font-size: .45rem; line-height: .75rem; margin-top: .6rem; } .join-list-box .list .paga{ margin-top: 1.5rem; } .recruit-box{ padding: 2.75rem 0 2.5rem; } .pub-tit{ font-size: .9rem; line-height: 1rem; color: #333; } .pub-con{ font-size: .4rem; line-height: .9rem; color: #666; } .idea-box .con{ margin-top: 1rem; } .idea-box .img-list{ margin-top: 1.75rem; } .idea-box .img-list img{ width: 100%; } .idea-box .img-list .mask{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url('../img/idea-mask.png'); opacity: 0; filter: alpha(opacity=0); } .idea-box .img-list .tit{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: .9rem; line-height: 1.2rem; color: #fff; text-align: center; width: 100%; transition: all .3s; } .idea-box .img-list .text{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; box-sizing: border-box; padding: 0 1.5rem; text-align: left; opacity: 0; filter: alpha(opacity=0); transition: all .3s; z-index: 3; } .idea-box .img-list .text-item{ margin-bottom: .25rem; } .idea-box .img-list .text-item:last-child{ margin-bottom: 0; } .idea-box .img-list .text-tit{ font-size: .45rem; line-height: .5rem; color: #fff; } .idea-box .img-list .txt-con{ font-size: .35rem; line-height: .75rem; color: #fff; margin-top: .3rem; } .idea-box .img-list .icon{ font-size: .75rem; color: #004a9a; height: 1.75rem; width: 1.75rem; text-align: center; line-height: 1.75rem; position: absolute; transition: all .3s; } .idea-box .img-list .item .icon{ background-color: #dfdfdf; } .idea-box .img-list .item:nth-child(1) .icon{ right: 0; bottom: 0; } .idea-box .img-list .item:nth-child(2) .icon{ left: 0; bottom: 0; } .idea-box .img-list .item:nth-child(3) .icon{ right: 0; top: 0; } .idea-box .img-list .item:nth-child(4) .icon{ left: 0; top: 0; } .idea-box .img-list .item:nth-child(1) .icon, .idea-box .img-list .item:nth-child(3) .icon{ border-right: 1px solid rgba(0,0,0,.1); } .idea-box .img-list .item:nth-child(1) .icon, .idea-box .img-list .item:nth-child(2) .icon{ border-bottom: 1px solid rgba(0,0,0,.1); } .idea-box .img-list .item.on .tit{ opacity: 0; filter: alpha(opacity=0); } .idea-box .img-list .item.on .mask{ opacity: 1; filter: alpha(opacity=100); } .idea-box .img-list .item.on .text{ opacity: 1; filter: alpha(opacity=100); } .idea-box .img-list .item.on .icon{ background-color: #004a9a; color: #fff; } .idea-box .img-list .item.on .hover{ opacity: 1; filter: alpha(opacity=100); } .idea-box .img-list .item.on .init{ opacity: 0; filter: alpha(opacity=0); } .route-box{ margin-top: 2.25rem; } .need-box{ height: 12.5rem; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } .need-box .text{ position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); text-align: center; font-size: 0; } .need-box .text .pub-tit{ color: #fff; } .need-box .text .line{ width: 1.25rem; height: 2px; background-color: rgba(255,255,255,.4); margin: .6rem auto 0; } .need-box .text .con{ font-size: .5rem; line-height: .6rem; color: #fff; text-align: center; margin-top: 1.1rem; } .need-box .text .need-more{ display: inline-block; *display: inline; zoom: 1; padding: 0 .9rem; font-size: 0; border: 1px solid rgba(255,255,255,.4); margin-top: 1.85rem; } .need-box .text .need-more span{ display: inline-block; *display: inline; zoom: 1; font-size: .35rem; line-height: 1rem; color: #fff; background-repeat: no-repeat; background-position: right center; background-image: url('../img/need-more.png'); padding-right: .6rem; background-size: .3rem; } .create-box{ padding: 2.75rem 0; } .create-box .num-box{ margin-top: 2rem; } .create-box .num-box .item{ text-align: center; } .create-box .num-box .item:nth-child(1){ float: left; } .create-box .num-box .item:nth-child(2){ position: absolute; left: 50%; top: 0; transform: translateX(-50%); } .create-box .num-box .item:nth-child(3){ float: right; } .create-box .num-top{ color: #004a9a; } .create-box .num-box .num{ display: inline-block; *display: inline; zoom: 1; font-size: 2.5rem; line-height: 2.5rem; vertical-align: bottom; font-family: "HELVETICA CONDENSED BOLD"; } .create-box .num-box .unit{ display: inline-block; *display: inline; zoom: 1; font-size: .4rem; line-height: .5rem; vertical-align: bottom; } .create-box .num-box .txt{ font-size: .4rem; line-height: .5rem; color: #222; margin-top: .4rem; } .tech-box{ padding: 2.25rem 0 3.75rem; background-repeat: no-repeat; background-position: top center; background-size: cover; } .tech-box .pub-tit{ padding-bottom: 1.75rem; border-bottom: 1px solid rgba(255,255,255,.1); text-align: center; color: #fff; margin-bottom: 2.25rem; } .tech-tab{ overflow: hidden; } .tech-tab .row{ margin: 0 -2.5rem; } .tech-tab .num-box{ font-size: 0; } .tech-tab .item{ box-sizing: border-box; padding: 0 2.5rem; text-align: center; margin-bottom: 2rem; } .tech-tab .num-box .num, .tech-tab .num-box .unit{ display: inline-block; *display: inline; zoom: 1; vertical-align: bottom; } .tech-tab .num-box .num{ font-size: 2.5rem; line-height: 2.5rem; color: #fff; font-family: "HELVETICA CONDENSED BOLD"; } .tech-tab .num-box .unit{ font-size: .4rem; line-height: .5rem; margin-left: .3rem; color: #fff; } .tech-tab .txt{ font-size: .4rem; line-height: .5rem; color: #fff; margin-top: .3rem; } .tech-tab-box .m-box{ display: none; } .tech-tab-box .prev, .tech-tab-box .next{ position: absolute; top: 50%; transform: translateY(calc(-50% - 1rem)); width: 15px; height: 26px; background-repeat: no-repeat; background-position: center; } .tech-tab-box .prev{ left: -1.75rem; background-image: url('../img/tech-prev.png'); } .tech-tab-box .next{ right: -1.75rem; background-image: url('../img/tech-next.png'); } .tech-tab-box .desc{ font-size: .4rem; line-height: .5rem; color: #fff; text-align: center; } .tech-con{ padding: 2.75rem 0 2.25rem; font-size: .55rem; line-height: .9rem; color: #333; } .tech-con img{ max-width: 100%; } .design-box{ text-align: center; padding: 2.75rem 0 2.5rem; } .design-box .pub-con{ width: 86.71875%; margin: 1rem auto 0; } .typical-box{ padding: 1.75rem 0 4.25rem; background-color: #f5f5f5; } .typical-tab{ overflow: hidden; } .typical-tab .buts{ margin-top: 2rem; } .build-box{ padding-top: 2.75rem; text-align: center; } .build-img{ width: 70.3125%; margin: 2rem auto 1.25rem; } .build-img .txt{ font-size: .5rem; line-height: .9rem; color: #004a9a; font-weight: bold; margin-top: .5rem; } .base-box{ padding: 3.25rem 0 2.25rem; background-repeat: no-repeat; background-position: top center; background-size: cover; margin-top: .5rem; } .base-box .img{ float: left; width: 72.265625%; margin-left: -1.25rem; } .base-box .img img{ width: 100%; } .base-box .base-text{ float: right; width: 28.125%; box-sizing: border-box; padding: 1rem .6rem 1.2rem; background-color: #004a9a; border-radius: .25rem; position: relative; margin-top: 2.25rem; } .base-box .base-text:before{ position: absolute; content: ""; width: 11px; height: 22px; top: 50%; transform: translateY(-50%); left: -11px; background: url('../img/jpg/j30.png') no-repeat center; background-size: 100%; } .base-box .base-text .top{ font-size: .35rem; line-height: .75rem; color: #fff; } .base-box .base-text .bottom{ font-size: .45rem; line-height: .7rem; color: #fff; padding: .4rem 0; font-weight: bold; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); margin-top: .6rem; } .green-box{ text-align: center; padding: 2.75rem 0 2.5rem; } .green-img{ margin: 2rem auto 0; width: 63.28125%; } .green-img .txt{ font-size: .55rem; line-height: .9rem; color: #222; font-weight: bold; box-sizing: border-box; padding: 0 1.75rem; position: relative; } .green-img .txt:before, .green-img .txt:after{ content: ""; position: absolute; top: 50%; width: 19px; height: 16px; background-repeat: no-repeat; background-position: center; margin-top: -8px; } .green-img .txt:before{ background-image: url('../img/green-yin1.png'); left: 0; } .green-img .txt:after{ background-image: url('../img/green-yin2.png'); right: 0; } .green-img .img{ margin-top: .75rem; } .number-box{ padding: 2.75rem 0 2.25rem; text-align: center; } .number-box .pub-tit{ margin-bottom: 1rem; } .number-box .num-box{ margin: 1.75rem 0 1.5rem; } .number-box .num-box .row{ margin: 0 -.3rem; } .number-box .num-box .item{ box-sizing: border-box; padding: 0 .3rem; } .number-box .num-box .con-box{ height: 1.65rem; line-height: 1.65rem; text-align: center; color: #004a9a; font-size: .4rem; font-weight: bold; border-radius: .825rem; border: 2px solid #004a9a; position: relative; } .number-box .num-box .con-box:before{ content: ""; position: absolute; right: -.4rem; top: 50%; width: 4px; height: 4px; margin-top: -2px; background-color: #004a9a; border-radius: 100%; } .number-box .num-box .item:last-child .con-box:before{ display: none; } .number-box .num-box .arrow{ margin-top: .25rem; } .number-box .num-box .txt{ font-size: .4rem; line-height: .5rem; font-weight: bold; margin-top: .5rem; } .epc-box{ text-align: center; padding: 2.75rem 0 2.5rem; } .epc-list{ margin-top: 2rem; } .epc-list .item img{ width: 100%; } .epc-box .epc-con{ margin: 1.25rem auto 0; width: 88.28125%; } .epc-list .item:before{ content: ""; position: absolute; right: 0; top: 0; width: 1px; height: 94%; background-color: #ddd; } .epc-list .item:last-child:before{ display: none; } .epc-list .item .pub-con{ padding: 0 .75rem; margin-top: .75rem; } .epc-box .desc{ padding: 0 9.375%; background-color: #eee; height: 1.75rem; line-height: 1.75rem; font-size: .4rem; color: #666; border-radius: .875rem; margin-top: 2.5rem; } .overseas-box{ padding: 2.75rem 0 2.5rem; text-align: center; } .overseas-box .overseas-con{ width: 85.15625%; margin: 1rem auto 0; } .overseas-box .oversea{ margin-top: 2rem; position: relative; } .overseas-box .oversea img{ width: 100%; } .overseas-box .oversea .text{ position: absolute; left: 0; top: 11.7647%; width: 82.8125%; padding: 0 6.25%; text-align: left; color: #fff; line-height: .6rem; } .fine-box{ padding: 2.75rem 0 2.25rem; text-align: center; } .fine-con{ margin: 1.1rem auto 0; } .fine-box .num-box{ font-size: 0; margin-top: 1.5rem; } .fine-box .num-box .item{ display: inline-block; *display: inline; zoom: 1; margin: 0 4.5rem; position: relative; } .fine-box .num-box .item:before{ content: ""; position: absolute; right: -4.5rem; top: 50%; width: 1px; height: 2.5rem; background-color: #000; opacity: .1; filter: alpha(opacity=10); transform: translateY(-50%); } .fine-box .num-box .item:last-child:before{ display: none; } .fine-box .num-box .num, .fine-box .num-box .unit{ display: inline-block; *display: inline; zoom: 1; vertical-align: bottom; color: #004a9a; } .fine-box .num-box .num{ display: inline-block; *display: inline; zoom: 1; font-size: 2.5rem; line-height: 2.5rem; font-family: "HELVETICA CONDENSED BOLD"; } .fine-box .num-box .unit{ font-size: .4rem; line-height: .5rem; } .fine-box .num-box .txt{ font-size: .4rem; color: #222; line-height: .5rem; margin-top: .3rem; } .edu-box2 .edu-img{ margin-top: 1.5rem; } .edu-box2 .edu-img .item{ width: 43.75%; float: left; } .edu-box2 .edu-img .item:nth-child(2n){ float: right; } .developinfo-box{ padding: 2.5rem 0 4rem; } .developinfo-box .pub-con{ margin-top: 1rem; } .developinfo-box .tit-box{ text-align: center; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(0,0,0,.2); } .developinfo-box .tit-box .date{ font-size: .35rem; line-height: .4rem; margin-top: .6rem; } .relative-box{ margin-top: 2rem; padding-top: 1.25rem; border-top: 2px dashed #d2d2d2; } .relative-tit{ font-size: .75rem; color: #004a9a; line-height: .8rem; } .relative-box .list{ margin-top: .9rem; } .relative-box .list .row{ margin: 0 -.3rem; } .relative-box .list .item{ box-sizing: border-box; padding: 0 .3rem; } .relative-box .list .txt{ font-size: .45rem; line-height: .5rem; color: #333; margin-top: .3rem; } .coo-box{ padding: 2.25rem 0 3.25rem; background-repeat: no-repeat; background-position: top center; background-size: cover; } .coo-tab-box{ margin-top: 1.25rem; } .coo-tab-box .m-box{ display: none; } .coo-tab{ overflow: hidden; } .coo-tab .swiper-slide{ margin-right: 1.3rem; } .coo-tab .swiper-slide:last-child{ margin-right: 0; } .coo-tab .row{ margin: 0 -.65rem; } .coo-tab .item{ box-sizing: border-box; padding: 0 .65rem; margin-bottom: 1rem; } .coo-tab .buts{ margin-top: .5rem; } .honor-box{ padding: 2.5rem 0 4.5rem; background-repeat: no-repeat; background-position: top center; background-size: cover; } .honor-box .pub-tit{ text-align: center; } .honor-tab-box{ margin-top: 1.75rem; padding-bottom: 8px; overflow: hidden; position: relative; } .honor-tab-box:before{ content: ""; position: absolute; left: 0; bottom: 7px; width: 100%; height: 1px; background-color: #ccc; } .honor-tab{ margin-top: 11rem; } .honor-tab .swiper-slide{ width: 50%; box-sizing: border-box; } .honor-tab .swiper-slide .point{ width: 12px; height: 12px; border: 1px solid rgba(0,0,0,.2); border-radius: 100%; position: absolute; left: -7px; bottom: -7px; background-color: #fff; } .honor-tab .swiper-slide .point:before{ content: ""; position: absolute; left: 50%; top: 50%; margin: -3px 0 0 -3px; width: 6px; height: 6px; background-color: #000; opacity: .4; filter: alpha(opacity=40); border-radius: 100%; } .honor-tab .con-box{ position: absolute; left: 0; bottom: 2.5rem; width: 100%; left: 0; bottom: 0; padding: 1rem 1rem 2.5rem; } .honor-tab .con-box:before{ content: ""; position: absolute; left: -1px; bottom: 0; width: 1px; height: 100%; background-color: #000; opacity: .2; filter: alpha(opacity=20); } .honor-tab .con-box:after{ content: ""; position: absolute; left: -7px; top: 0; width: 12px; height: 12px; background-color: #004a9a; border-radius: 100%; } .honor-tab .tit{ font-size: .6rem; line-height: .7rem; color: #004a9a; } .honor-tab .line{ width: .9rem; height: 2px; background-color: #999; margin-top: .6rem; } .honor-tab .con{ font-size: .35rem; line-height: .9rem; color: #666; margin-top: .75rem; } .love-box{ padding:2.75rem 0 4.25rem; } .love-box .love-con{ margin-top: 1rem; } .idea-box .img-list .init{ transition: all .3s; } .idea-box .img-list .hover{ position: absolute; left: 0; top: 0; opacity: 0; filter: alpha(opacity=0); transition: all .3s; } .love-box .img-list .text{ padding: 0 2.5rem; } .love-box .img-list .text-tit{ font-size: .75rem; line-height: .8rem; } .love-box .img-list .line{ width: .9rem; height: 1px; background-color: rgba(255,255,255,.4); margin-top: .4rem; } .love-box .img-list .txt-con{ margin-top: .6rem; } .love-list{ padding: 3rem 0 4.25rem; } .love-list .item{ display: block; padding: .6rem .75rem; transition: all .3s; } .love-list .item:nth-child(2n+1){ background-color: #f5f5f5; } .love-list .item .img{ float: left; width: 28.688%; overflow: hidden; } .love-list .item .img img{ width: 100%; transition: all .3s; } .love-list .item .text{ float: right; width: 65.57%; margin-top: .5rem; } .love-list .item .text .tit{ font-size: .6rem; line-height: .7rem; color: #333; transition: all .3s; } .love-list .item .text .desc{ font-size: .4rem; line-height: .5rem; color: #666; margin-top: .25rem; transition: all .3s; } .love-list .item .text .con{ font-size: .35rem; line-height: .75rem; color: #999; margin-top: .75rem; transition: all .3s; height: 1.5rem; overflow: hidden; } .love-list .item .text .arrow{ margin-top: 1.1rem; width: 16px; height: 12px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url('../img/love-arrow.png'); transition: all .3s; } .love-list .paga{ margin-top: 2rem; } .love-list .pub-tit{ margin-bottom: 1.75rem; } .story-box .item{ float: left; width: 25%; position: relative; } .story-box .item img{ width: 100%; } .story-box .item .hover{ position: absolute; left: 0; top: 0; opacity: 0; filter: alpha(opacity=0); transition: all .3s; } .story-box .item .text{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; } .story-box .item .tit{ font-size: 1.2rem; line-height: 1.3rem; color: #fff; } .story-box .item .desc{ font-size: .4rem; line-height: .5rem; margin-top: .5rem; color: #fff; } .story-box .item .story-btn{ width: 1.375rem; margin: 1rem auto 0; } .theory-box{ padding: 2.75rem 0 1.5rem; } .theory-box .theory-con{ margin-top: 1.25rem; } .theory-tab-box{ padding: 2.75rem 0 1.5rem; box-sizing: border-box; height: 15.5rem; position: relative; background-image: url('../img/theory-bg.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; } .theory-tab-box .theory-line-box{ position: absolute; left: 0; bottom: 1.5rem; width: 100%; height: 21px; white-space: nowrap; /* overflow: hidden; */ } .theory-tab-box .theory-line-box:before{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #c4c4c4; } .theory-tab-box .theory-line-box .line{ display: inline-block; *display: inline; zoom: 1; width: 1px; height: 11px; background-color: #c4c4c4; margin-right: 9px; vertical-align: bottom; } .theory-tab-box .theory-line-box .line:nth-child(10n){ height: 21px; margin-top: 1px; } .theory-tab{ height: 11.25rem; position: relative; } .theory-tab .con-box{ padding: 0 1.5rem 1.75rem; position: absolute; left: 0; bottom: 0; width: 100%; box-sizing: border-box; font-size: 0; } .theory-tab .con-box:before{ content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: calc(100% - .5rem); background-color: #999; opacity: .4; filter: alpha(opacity=40); } .theory-tab .con-box .point{ position: absolute; width: 16px; height: 16px; border-radius: 100%; background-color: rgba(0,74,154,.4); top: .4rem; left: -8px; transition: all .3s; } .theory-tab .con-box .point:before{ content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background-color: #004a9a; border-radius: 100%; transform: translate(-50%,-50%); transition: all .3s; } .theory-tab .con-box .year{ font-size: 1.5rem; line-height: 1.6rem; color: #e60012; font-family: arial; font-weight: bold; display: inline-block; *display: inline; zoom: 1; padding-bottom: .4rem; border-bottom: 2px solid #e60012; opacity: 0; filter: alpha(opacity=0); transition: all .3s; } .theory-tab .con-box .con{ font-size: .35rem; line-height: .75rem; color: #666; margin-top: .75rem; opacity: 0; filter: alpha(opacity=0); transition: all .3s; } .theory-tab .swiper-slide-active .con-box .point{ background-color: rgba(230,0,18,.4); } .theory-tab .swiper-slide-active .con-box .point:before{ background-color: #e60012; } .theory-tab .swiper-slide-active .con-box .year, .theory-tab .swiper-slide-active .con-box .con{ opacity: 1; filter: alpha(opacity=100); } .theory-tab .prev, .theory-tab .next{ position: absolute; bottom: 3.75rem; background-repeat: no-repeat; background-size: 24px; font-size: .9rem; line-height: 1rem; color: #999; padding-bottom: .75rem; z-index: 3; font-family: arial; } .theory-tab .prev{ text-align: left; background-position: left bottom; background-image: url('../img/theory-prev.png'); left: -5rem; } .theory-tab .next{ text-align: right; background-position: right bottom; background-image: url('../img/theory-next.png'); right: -5rem; } .theory-tab .swiper-button-disabled{ display: none; } .video-tab-box{ padding: 2.5rem 0 4.5rem; } .video-tab{ overflow: hidden; } .video-tab .play-btn{ position: absolute; left: 50%; top: 50%; width: 1.5rem; height: 1.5rem; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url('../img/jpg/j44.png'); transform: translate(-50%,-50%); } .video-tab .txt{ font-size: .45rem; line-height: .55rem; color: #333; margin-top: .5rem; } .video-tab .buts{ margin-top: 1.25rem; } .project-dialog-box{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .project-dialog-box .black{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: .5; filter: alpha(opacity=50); } .project-dialog{ width: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: .5rem; background-color: #fff; } .project-dialog .img-tab{ overflow: hidden; } .project-dialog img{ width: 100%; } .project-dialog .project-close{ position: absolute; right: -1rem; top: -1rem; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: 100%; background-image: url('../img/project-close.png'); } .project-dialog .prev, .project-dialog .next{ position: absolute; top: 50%; transform: translateY(-50%); width: 15px; height: 26px; background-repeat: no-repeat; background-position: center; background-size: 100%; } .project-dialog .prev{ left: -1.5rem; background-image: url('../img/tech-prev.png'); } .project-dialog .next{ right: -1.5rem; background-image: url('../img/tech-next.png'); } .project-dialog .txt{ color: #666; font-size: .4rem; line-height: .5rem; margin-top: .5rem; text-align: center; } @media (max-width: 1680px){ .theory-tab .next{ right: -3rem; } .theory-tab .prev{ left: -3rem; } } @media (max-width: 1366px){ .engineer-box .list .project-more{ display: none; } .theory-tab .prev{ left: -2.2rem; } .theory-tab .next{ right: -2.2rem; } .tech-tab .row{ margin: 0 -1rem; } .tech-tab .item{ padding: 0 1rem; } .epc-box .desc{ padding: 0 5%; } .project-dialog{ width: 70%; } }