/*滚动轴*/ body { font-family: "AritaHeiti","微软雅黑"; overflow-x: hidden; } ::-webkit-scrollbar{ width: 0; } :-webkit-scrollbar-track { background-color: #F5F5F5; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ::-webkit-scrollbar { width: 0px; background-color: #F5F5F5; } .fl { float: left; } .fr { float: right; } .clearfix { zoom: 1; } .clearfix:after { content: ''; display: block; clear: both; } ::-webkit-scrollbar-thumb { background-color: #999; } .wrap { width: 90%; margin: 0 auto; } .hidden { display: none; } .w_1440 { width: 1440px;/*1440px*/ margin: 0 auto; } .close-bar{ width: 100%; height: 40px; line-height: 40px; background: url(http://yun-image.elab-plus.com/images/projects/1_objects@2x_3.png) no-repeat 50% 50%; background-size: contain; cursor: pointer; } .head_box { position: relative; padding: 20px 0; height: 24px; } .menu_btn { text-align: center; } .menu_btn img, .menu_btn span { display: inline-block; vertical-align: middle; } .menu_btn span { font-size: 22px; color: #fff; margin-left: 18px; } .logo { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .csr { height: 908px; background: url(http://yun-image.elab-plus.com/images/Main@2x.png) center no-repeat; background-size: cover; text-align: center; padding: 393px 0 0; } .csr h3 { font-size: 76px; color: #fff; font-family: "AritaHeiti"; } .csr_text { font-size: 43px; color: #fff; font-family: "AritaHeiti"; } .a_btn { margin-top: 200px; text-align: center; } .a_btn a { width: 160px; height: 50px; font-size: 16px; color: #000; text-align: center; display: inline-block; line-height: 50px; background: #fff; border-radius: 40px; font-family: "AritaHeiti"; } .s_v { margin-right: 50px; } .section2 p { font-size: 20px; color: #fff; line-height: 1.6; font-family: "AritaHeiti"; max-width: 850px; margin: 0 auto 40px; text-align: left; } .section2 { padding: 7% 0; text-align: center; } .section2 h3 { font-size: 40px; color: #fff; font-family: "AritaHeiti"; margin-bottom: 55px; } .yewu { margin-top: 104px; } .yewu li { float: left; width: 25%; } .section3>h3 { font-size: 40px; color: #fff; font-family: "AritaHeiti"; } .section3 { background: url(http://yun-image.elab-plus.com/images/bg01.png) center no-repeat; background-size: 100% 100%; text-align: center; padding: 58px 0 67px; position: relative; z-index: 5; } .yewu li h3 { font-size: 120px; color: #3dadc0; font-family: "DINCond"; } .yewu li p { font-size: 25px; color: #fff; margin-top: 23px; font-family: "AritaHeiti"; } .section4 { padding: 24% 0 0; background: #1e2538; margin-top: -147px; } .section4_list { position: relative; padding-bottom: 93px; } .section4_list li { overflow: hidden; margin-bottom: 82px; position: relative; z-index: 5; } .section4_list_box { width: 50%; } .section4_list li:nth-child(2n) .section4_list_box { float: left; text-align: right; padding-right: 32px; } .section4_list li:nth-child(2n+1) .section4_list_box { float: right; text-align: left; padding-left: 36px; } .section4_list li:last-child { margin-bottom: 0; } .section4_list:after { content: ""; width: 2px; height: 100%; position: absolute; top: 0; left: 50%; margin-left: 1px; background: #4e5464; z-index: 1; } .h3 { font-size: 86px; position: relative; color: #41acc0; font-family: "DINCond"; line-height: 80%; } .latest { color: #fff; } .p { max-width: 594px; font-size: 23px; color: #fff; margin-top: 15px; position: relative; font-family: "AritaHeiti"; } .p1:after { content: ""; width: 30px; height: 30px; position: absolute; top: 50%; left: -46px; margin-top: -15px; background: #fff; border-radius: 50%; z-index: 5; } .pb { margin-left: 83px; } .tag:after { content: ""; width: 30px; height: 30px; position: absolute; top: 50%; margin-top: -15px; background: #fff; border-radius: 50%; z-index: 5; } .section4_list li:nth-child(2n) .tag:after { right: -49px; } .section4_list li:nth-child(2n+1) .tag:after { left: -49px; } .section4_list li.sec { margin-bottom: 0; } .more { display: block; width: 154px; height: 50px; background: #fff; border-radius: 40px; color: #000; font-size: 20px; text-align: center; line-height: 50px; margin: auto; position: relative; z-index: 5; font-family: "AritaHeiti"; } .section5 { padding: 60px 0; background: #1b2030; position: relative; overflow: hidden; } .hj_box { padding: 415px 0 0; background: url(http://yun-image.elab-plus.com/images/Group@2x02.png) center no-repeat; background-size: cover; text-align: center; height: 906px; overflow: hidden; } .hj_box h3 { font-size: 42px; color: #fff; margin-bottom: 160px; font-family: "AritaHeiti"; } #section4 { margin-top: 0; position: relative; padding-top: 107px; } #section4 ul:nth-child(2n) li:nth-child(2n+1) .section4_list_box { float: left; padding-right: 32px; text-align: right; } #section4 ul:nth-child(2n) li:nth-child(2n) .section4_list_box { float: right; padding-left: 36px; text-align: left; } .p1-1:after { left: auto; right: -46px; } #section4 ul:nth-child(2n) li:nth-child(2n+1) .tag:after { left: auto; right: -49px; } #section4 ul:nth-child(2n) li:nth-child(2n) .tag:after { right: auto; left: -49px; } .progress { width: 98%; text-align: center; } .progressFirst{ /*margin-top: -50px;*/ } .progressSecond{ /*margin-top: -50px;*/ } .p_fir { margin-right: 4%; } .p_border { border: 1px solid #fff;; } .progress>p { display: inline-block; width: 100%; height: 178px; padding: 33px 30px; overflow: hidden; position: relative; font-family: "AritaHeiti"; } .progress>p span { font-size: 20px; color: #fff; display: inline-block; width: 418px; line-height: 1.6; text-align: left; } .progress>p img { position: absolute; right: 5%; top: 14%; } .container { margin: 0 auto; } .con_t { background: #000004; position: relative; overflow: hidden; height: 983px; max-width: 1440px; margin: 0 auto; } .con_t img { width: 70%; max-width: 100%; display: block; margin: 50px auto 0; position: relative; z-index: 5; } .cai { font-size: 131px; color: #fff; font-family: "AritaHeiti"; position: absolute; top: 294px; left: 68px; z-index: 4; } .line { display: inline-block; width: 89px; height: 10px; background: #3fadbe; position: absolute; top: 454px; left: 86px; } .p_p { max-width: 412px; font-size: 20px; color: #fff; line-height: 1.6; font-family: "AritaHeiti"; position: absolute; top: 542px; left: 28px; z-index: 10; } .h33 { font-size: 36px; color: #fff; font-family: "AritaHeiti"; position: absolute; top: 122px; right: 256px; z-index: 10; } .work { position: absolute; right: 0; top: 296px; z-index: 10; } .work p, .work h3 { color: #fff; margin-bottom: 15px; } .work p { font-size: 18px; font-family: "AritaHeiti"; } .work h3 { font-size: 20px; font-family: "AritaHeiti"; } .n { font-size: 92px; color: #fff; font-family: "AritaHeiti"; position: absolute; top: 441px; right: 138px; z-index: 3; } .gx, .w { font-size: 20px; color: #fff; font-family: "AritaHeiti"; } .gx { position: absolute; right: 80px; bottom: 240px; z-index: 10; } .w { position: absolute; bottom: 130px; right: 0; z-index: 10; } .gx p, .w p { margin-bottom: 20px; } .swiper { overflow: hidden; position: relative; background: #202020; padding-bottom: 117px; } .swiper img { width: 100%; } .swiper-box { padding: 167px 0 0; } .s_inner { width: 92%; margin: 0 auto; font-family: "AritaHeiti"; } .swiper-box h3 { font-size: 46px; color: #fff; text-align: center; font-family: "AritaHeiti"; } .sm { font-size: 20px; color: #fff; text-align: right; margin-top: 15px; } .sub { font-size: 30px; color: #f7f7f7; line-height: 1.65; margin-top: 154px; font-family: "AritaHeiti"; } .span { text-align: center; margin-top: 120px; } .span .swiper-pagination-bullet { width: 15px; height: 15px; background: #3eaec0; } .span .swiper-pagination-bullet-active { opacity: 1; } .work_z { position: absolute; right: 0; top: 25px; } .container { width: 100%; margin: 0 auto; background: url(http://yun-image.elab-plus.com/images/BG@2x.jpg) center no-repeat; background-size: cover; } .wph { width: 133px; } .shun { width: 48px; } .p_fir1 { margin-right: 0; } .sb { width: 100%; position: relative; height: 1025px; } .shuzi { position: absolute; width: 100%; text-align: center; top: 0; left: 0; } .shuzi span { font-size: 30px; font-family: "AritaHeiti"; color: #fff; } .progress { position: relative; } .shuzi strong { font-size: 250px; color: #fff; font-family: "DINCond"; } .sp1 { margin-right: 128px; } .lf { position: absolute; top: -100px; left: 0; } .Line { position: absolute; left: 193px; top: -723px; } @media(max-width:1024px) { .csr h3 { font-size: .6rem; } .csr_text { font-size: .3rem; margin-top: .2rem; } .a_btn { margin-top: 2rem; } .csr { height: auto; background: url(http://yun-image.elab-plus.com/images/Group@2x03.png) center no-repeat; background-size: cover; padding: 3.93rem 0 1rem; } .a_btn a { width: 2.2rem; height: .8rem; font-size: .26rem; line-height: .8rem; border-radius: .4rem; } .s_v { margin-right: .5rem; } .section2 h3 { font-size: .42rem; margin-bottom: .3rem; } .section2 p { font-size: .3rem; margin-bottom: .25rem; } .yewu li { width: 50%; } .section3 { background: url(http://yun-image.elab-plus.com/images/bg03.png) center no-repeat; background-size: 100% 100%; padding: .87rem 0; } .yewu li h3 { font-size: .86rem; } .yewu li p { font-size: .25rem; margin-top: .23rem; } .yewu { margin-top: .75rem; } .section4 { margin-top: -2.4rem; padding: 4rem 0 0; } .section3>h3 { font-size: .42rem; } .section4_list li:nth-child(2n+1) .section4_list_box { padding-left: .32rem; padding-right: .3rem; } .p { font-size: .25rem; margin-top: .3rem; } .h3 { font-size: .6rem; } .p1:after { content: ""; width: .3rem; height: .3rem; top: 50%; left: -.46rem; margin-top: -.15rem; } .tag:after { content: ""; width: .3rem; height: .3rem; margin-top: -.15rem; } .section4_list li:nth-child(2n+1) .tag:after { left: -.8rem; } .section4_list li:nth-child(2n) .tag:after { right: -.5rem; } .section4_list li:nth-child(2n+1) .tag:after { left: -.43rem; } .section4_list li:nth-child(2n) .section4_list_box { padding-right: .32rem; padding-left: .32rem; } .section4_list li { margin-bottom: 1rem; } .more { width: 154px; height: .8rem; border-radius: .4rem; font-size: .25rem; line-height: .8rem; } .hj_box h3 { font-size: .5rem; margin-bottom: 1.6rem; } .progress>p span { float: none; margin-right: 0; font-size: .3rem; width: 100%; } .progress>p img { position: static; width: 1rem; margin: auto; } .progress>p { width: 100%; display: block; height: auto; padding: .3rem; margin-bottom: 25px; } #section4 ul:nth-child(2n) li:nth-child(2n+1) .tag:after { right: -.49rem; } #section4 ul:nth-child(2n) li:nth-child(2n) .tag:after { left: -.76rem; } #section4 ul:nth-child(2n) li:nth-child(2n+1) .tag:after { right: -.83rem; } .p1-1:after { right: -.83rem; left: auto; } #section4 { padding-top: 1.07rem; } .section4_list { padding-bottom: .5rem; } .s_inner { width: 92%; } .swiper { padding-bottom: 40px; } .swiper-box h3 { font-size: .28rem; } .sm, .sub { font-size: .23rem; } .sub, .span { margin-top: 1.5rem; } .con_t img { width: 6.64rem; margin: 1.18rem auto 0; } .left { top: 2rem; left: .15rem; } .cai { font-size: .6rem; top: 2.94rem; left: .68rem; } .line { width: .8rem; height: .1rem; top: 4.54rem; left: .66rem; } .con_t { padding: 0 .15rem; } .p_p { font-size: .2rem; top: 5.42rem; left: .28rem; max-width: 2.42rem; } .right { top: 1rem; right: 0; padding-right: .15rem; } .h33 { font-size: .36rem; top: 1.22rem; right: 0.56rem; } .work p { font-size: .18rem; margin-bottom: .15rem; } .work p, .work h3 { margin-bottom: .15rem; } .work { top: 2.96rem; } .work h3 { font-size: .2rem; } .n { font-size: .9rem; top: 4.4rem; right: 0; } .gx, .w { font-size: .26rem; } .gx { right: 0rem; bottom: 2.4rem; } .w { bottom: 1.3rem; right: 0; } .container { width: 100%; } .hj_box { padding: 4rem 0 0; height: 9.06rem; } /*.logo img { width: .42rem; }*/ .menu_btn img { width: .32rem; } .menu_btn span { font-size: .22rem; margin-left: .18rem; } .shuzi strong { font-size: 1.3rem; } .shuzi span { font-size: .3rem; } .shuzi { top: 2.3rem; } .gx p, .w p { margin-bottom: .2rem; } .sp1 { margin-right: 1.3rem; } .shuzi .sp1:last-child { margin-right: 0; } .shuzi p:nth-child(2) span{ margin-right: 0.35rem !important; } .con_t { height: 11rem; } .swiper-box { padding: 1.6rem 0 0; } .sb { height: 10.25rem; } .Line { width: 1.62rem; left: 0; top: -7.23rem; } .w_1440 { width: 98%; } } @media only screen and (min-width: 1440px){ .shuzi strong#withPlus sup { vertical-align: 0.7rem !important; font-size: 0.5rem !important; } .shuzi p:nth-child(2) span{ margin-right: 0.55rem !important; } } @media only screen and (min-width: 1920px){ .shuzi strong#withPlus sup { vertical-align: 0.5rem !important; font-size: 0.4rem !important; } .shuzi p:nth-child(2) span{ margin-right: 0.4rem !important; } .shuzi strong#withPlus { margin-right: -0.18rem !important; } } @media only screen and (min-width: 576px) { .shuzi { top: 20%; } .shuzi p:nth-child(2){ text-align: right; display: inline-block; width: 49%; } .shuzi p:nth-child(3) { text-align: left; display: inline-block; width: 49%; } .shuzi strong#withPlus { margin-left: 0.63rem; margin-right: -0.23rem; } .shuzi strong#withPlus sup { vertical-align: 0.8rem; font-size: 0.6rem; } } /***pad**/ @media only screen and (max-width: 1024px){ /*.s_inner h3 span { display: block; }*/ .cai { font-size: .6rem; top: 1.34rem; left: .68rem; } .line { width: .8rem; height: .1rem; top: 2.24rem; left: .71rem; } .h33 { font-size: .36rem; top: 0.82rem; right: 0.56rem; } .n { font-size: .7rem; top: 5.2rem; right: 0; } .p_p { font-size: .2rem; top: 6.02rem; left: .38rem; max-width: 3.52rem; } .gx { right: 0rem; bottom: 1.4rem; max-width: 60%; } .w { bottom: 0.3rem; right: 20%; } .gx, .w { font-size: .22rem; line-height: 90%; } .progressFirst { display: none; } .progressSecond { display: none; } #progreeBtn { display: inherit; } } /*****/ @media only screen and (max-width: 576px) and (-webkit-min-device-pixel-ratio:2) { .s_inner h3 span { display: block; } .cai { font-size: .6rem; top: 1.34rem; left: .68rem; } .line { width: .5rem; height: .1rem; top: 2.24rem; left: .71rem; } .h33 { font-size: 4.5vw; top: 0.2rem; right: auto; left: 50%; } .work { top: 0.96rem; right: auto; left: 50%; } .n { font-size: .7rem; top: 5.2rem; right: 0; } .p_p { font-size: .2rem; top: 6.02rem; left: .38rem; max-width: 3.52rem; } .gx { right: 0rem; bottom: 1.4rem; max-width: 60%; } .w { bottom: 0.3rem; right: 20%; } .gx, .w { font-size: .22rem; line-height: 90%; } } .top-menu { width: 100%; padding: 20px 0; height: 64px; font-size: 0; line-height: 24px; position: relative; z-index: 10; /*background: url(http://yun-image.elab-plus.com/images/menu-bg.jpg) no-repeat; background-size: 100% 100%; opacity: 0;*/ } .logo { width: 4.7%; position: absolute; bottom: 0%; left: 4%; cursor: pointer; } .inner-icon { width: 100%; position: relative; z-index: 1; } .menu { width: 3.4%; position: absolute; top: 35%; left: 48.3%; cursor: pointer; } .cases { width: 3.4%; position: absolute; top: 45; right: 4%; cursor: pointer; } /***left and right slide menu***/ .who-we-are, .what-we-do { width: 20%; line-height: 30px; height: 30px; position: absolute; z-index: 10; left: -8%; top: 45%; color: #1b2030; font-size: 14px; text-align: center; font-weight: 700; /*transform: rotate(90deg);*/ cursor: pointer; transition: all linear 0.6s; } .slide-line { position: absolute; left: 50%; top: 70%; width: 1px; height: 50px; margin: 3px auto 0; font-size: 0px; background: #fff; transform: translateY(3%); transition: all ease 0.8s; } .slide-line1 { position: absolute; left: 50%; top: -210px; width: 1px; height: 200px; margin: 3px auto 0; font-size: 0px; background: #fff; transform: translateY(-100px); transition: all ease 0.8s; opacity: 0; } .what-we-do { left: auto; right: -8%; transform: rotate(-90deg); } .who-we-are a, .what-we-do a { color: #fff; } .who-we-are .slide-line.active { transition: all ease 0.8s; transform: translateY(-110%); } .what-we-do:hover, .who-we-are:hover { color: #fff; } .what-we-do:hover a, .who-we-are:hover a{ color: #fff; } .what-we-do .slide-line.active, .who-we-are .slide-line.active { transition: all ease 0.8s; transform: translateY(50px); background: #fff; } .what-we-do .slide-line1.active, .who-we-are .slide-line1.active { transition: all ease 0.8s; transform: translateY(0px); background: #fff; opacity: 1; } /***middle**/ @media only screen and (max-width: 1024px) { .logo { width: 6%; } .menu { width: 4.5%; } .cases { width: 4.5%; } } /***middle portrait***/ @media only screen and (max-width: 768px) and (orientation: portrait) { .logo { width: 8%; } .menu { width: 6.5%; } .cases { width: 6.5%; } } /***small**/ @media only screen and (max-width: 576px) and (-webkit-min-device-pixel-ratio:2) { .logo { width: 18%; position: absolute; left: 42.5%; cursor: pointer; bottom: 15%; } .menu { width: 13.4%; position: absolute; bottom: 0; left: 5%; cursor: pointer; } .cases { width: 13.4%; } .who-we-are, .what-we-do{ display: none; } } .main-menu { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; max-height: 1500px; background: #34B5CB; transform: translateY(-100%); opacity: 0; transition: all ease 0.8s } .main-menu.active { transform: translateY(0); opacity: 1; } .menu-close { width: 40px; height: 40px; margin: 30px auto; color: #ffffff; font-family: "Arial"; font-size: 40px; cursor: pointer; background: url(http://yun-image.elab-plus.com/images/projects/1_objects@2x_3.png) no-repeat 50% 50%; background-size: contain; transition: all ease 1s; transform: rotate(0); } .menu-close:hover{ transform: rotate(360deg); } .menu-list { width: 100%; margin: 0 auto; margin-top: 10%; } .menu-list li { width: 100%; margin-bottom: 1%; color: #fff; font-size: 40px; font-weight: 700; text-align: center; letter-spacing: 4.689653px; font-family: 'AritaHeiti'; } .menu-list li small { width: 100%; display: block; font-size: 16px; } .menu-list li a { color: #fff; } .slider{ width: 100%; height: 100%; overflow: hidden; position: relative; z-index: 30; } .slider ul{ width: 100%; height: 100%; overflow: hidden; position: relative; } /****inner slider***/ .inslider{ width: 100%; height: 100%; overflow: hidden; position: relative; z-index: 30; } .inslider ul{ width: 100%; height: 100%; overflow: hidden; position: relative; } @media only screen and (max-width: 576px) and (-webkit-min-device-pixel-ratio:2) { .menu-close { margin-left: 5%; } .menu-list li { width: 95%; padding-left: 5%; text-align: left; margin-bottom: 5%; font-size: 7vw; } .logo { width: 18%; position: absolute; left: 42.5%; cursor: pointer; } .menu { width: 13.4%; position: absolute; top: 35%; left: 3%; cursor: pointer; } .cases { width: 13.4%; } .shuzi p{ margin-bottom: 7%; } .shuzi strong { font-size: 1.5rem; position: relative; } .shuzi strong sup{ font-size: 1rem; position: absolute; right: -21%; top: -19%; } }