.img_jz{ position: relative; overflow: hidden; } .img_jz{ display:block; position: relative; } .img_jz>img{ width: 100%; height: 100%; object-fit: contain; } /*title*/ .title{ padding-top: 3.5vw; padding-bottom: 3vw; text-align: center; background: url("../images/titbg.png") no-repeat center top; } .title h3{ font-weight: bold; font-size: 3.2rem; color: #484848; } .title small{ font-size: 1.6rem; color: #484848; } /*menu*/ .head{ width: 100%; height: 120px; position: fixed; top:0; border-bottom: 1px solid rgba(255, 255, 255, 0.3); z-index: 1000; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .logo{ float:left; display:flex; justify-content: left; align-items: center; height: 120px; } .logo img{ height: 55px; filter: grayscale(100) brightness(100); -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } @font-face { font-family: youshe; src: url('../font/youshe.ttf'); } @font-face { font-family: douyu; src: url('../font/douyu.ttf'); } .logo div{ font-size: 1.7rem; color: #fff; width: 421px; line-height: 30px; padding-left: 15px; margin-left: 15px; position:relative; font-family: douyu; -webkit-text-stroke: 0.5px #009d85; text-shadow: 0 3px 5px #3f3f3f; } .logo div>span{ font-size: 36px; line-height: 47px; font-weight: bold; font-family: youshe; color: #009d85; -webkit-text-stroke: 0.1px #fff; text-shadow: 0 3px 5px #3f3f3f; } .headright{ float:right; } .navbar{ float:left; height: 100%; position: relative; } .navbar>i{ display: block; content: ''; position: absolute; left:0; bottom:2px; height: 3px; background: #009d85; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .navbar li{ float:left; padding-right:33px; } .navbar li a{ display: block; font-size: 1.6rem; color: #fff; line-height: 122px; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .tel01{ float:left; background:url("../images/24h.png") no-repeat left center; padding-left:45px; color: #fff; font-size: 16px; line-height: 120px; margin-right: 12px; font-weight:bold; } .telchange{ color: #4c4c4c; background:url("../images/24hs.png") no-repeat left center; } .menu{ float:left; margin-top:37px; position: relative; background:#009d85; /* 涓€浜涗笉鏀寔鑳屾櫙娓愬彉鐨勬祻瑙堝櫒 */ background:-moz-linear-gradient(-75deg, #cae2de,#43cab5, #cae2de); background:-webkit-linear-gradient(-75deg, #cae2de,#43cab5,#cae2de); background:-o-linear-gradient(-75deg, #cae2de,#43cab5, #cae2de); width: 48px; height: 48px; border-radius: 50%; overflow: hidden; cursor: pointer; } #indexg0 { left: 15px; top: 5px; width: 16px; height: 16px; border-radius: 50%; position: absolute; background: #fff; } .fixcont{ position: fixed; left:0; bottom:65px; z-index: 1000; } .headfix{ border-bottom: none; } .headfix .logo{ display:none; } .headfix .navbar{ display:none; } /*head--end*/ /*navlist*/ .navlist{ position: absolute; left:0; top:100%; width:100%; z-index: -1; opacity: 0; -webkit-transition: 350ms 0s all linear; -moz-transition: 350ms 0s all linear; -ms-transition: 350ms 0s all linear; -o-transition: 350ms 0s all linear; transition: 350ms 0s all linear; } .navlist.showthisnav{ z-index: 100; opacity: 1; } .navlist .warpper{ background: rgba(0, 0, 0, 0.67); } .navlist .warpper>div{ display:none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:3vw 3vw; } .navlist .warpper>div:after{ display:block; content: ''; clear: both; } .navlist .warpper>div.thisshow{ display:block; } .navlist a{ float:left; display:block; font-size: 14px; color: #ffffff; position: relative; width: 180px; padding-bottom: 20px; margin-bottom: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-right:5%; } .navlist a:nth-of-type(6n){ margin-right: 0; } .navlist a:before,.navlist a:after{ display: block; content: ''; height: 1px; background: #a8a8a8; position: absolute; left:0; bottom:0; width: 100%; } .navlist a:after{ background: #009d85; width: 38px; -webkit-transition: 350ms 0s all linear; -moz-transition: 350ms 0s all linear; -ms-transition: 350ms 0s all linear; -o-transition: 350ms 0s all linear; transition: 350ms 0s all linear; } .navlist a:hover:after { width: 100%; } /*menushow-start*/ .menushow{ background: #fff; width:100%; height: 100%; position: fixed; z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: 150ms 0s all ease; -moz-transition: 150ms 0s all ease; -ms-transition: 150ms 0s all ease; -o-transition: 150ms 0s all ease; transition: 150ms 0s all ease; } .menuani{ opacity: 1; visibility: visible; z-index: 1000; -webkit-transition: 150ms 0s all ease; -moz-transition: 150ms 0s all ease; -ms-transition: 150ms 0s all ease; -o-transition: 150ms 0s all ease; transition: 150ms 0s all ease; } .menushow>b{ display: block; position: absolute; width: 1750px; height: 1750px; right: -17%; top: -17%; -webkit-transition: 400ms 100ms all linear; -moz-transition: 400ms 100ms all linear; -ms-transition: 400ms 100ms all linear; -o-transition: 400ms 100ms all linear; transition: 400ms 100ms all linear; opacity: 1; } .menuani>b { width: 3000px; height: 3000px; right: -23%; top: -35%; opacity: 0; } .menushow>b:before{ display: block; content: ''; position: absolute; border-radius: 50%; right:-10%; top:-10%; background: #009d85; width: 80%; height: 80%; } .menushow>b:after{ display: block; content: ''; position: absolute; background:#fff; border-radius: 50%; right:0; top:0; width:60%; height: 60%; } .menushow ul{ position: relative; height: 100%; } .menushow ul li{ float:left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width:25%; height: 100%; -webkit-transition: 400ms 0s all linear; -moz-transition: 400ms 0s all linear; -ms-transition: 400ms 0s all linear; -o-transition: 400ms 0s all linear; transition: 400ms 0s all linear; text-align: center; position: relative; overflow: hidden; opacity: 0; left:5px; } .menuani ul li{ opacity: 1; left:0; } .menuani ul li>div{ position: relative; width:100%; height:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 62%; } .menuani ul li:before{ display: block; content: ''; position: absolute; left:0; top:0; width:100%; height: 100%; -webkit-transition: 300ms 0s all ease; -moz-transition: 300ms 0s all ease; -ms-transition: 300ms 0s all ease; -o-transition: 300ms 0s all ease; transition: 300ms 0s all ease; background: #fff; } .menushow ul li:first-of-type:hover:before{ background: url("../images/menubg01.jpg") no-repeat center; background-size:cover;} .menushow ul li:nth-of-type(2):hover:before{ background: url("../images/menubg02.jpg") no-repeat center; background-size:cover;} .menushow ul li:nth-of-type(3):hover:before{ background: url("../images/menubg03.jpg") no-repeat center; background-size:cover;} .menushow ul li:nth-of-type(4):hover:before{ background: url("../images/menubg04.jpg") no-repeat center; background-size:cover;} .menu_tit h2{ color: #3b4048; transition: all 0.5s ease; font-weight: bold; font-size: 3rem; } .menu_tit small{ color: rgba(59, 64, 72, 0.3); transition: all 0.5s ease; font-size: 1.6rem; font-family: 'f-light'; font-weight: lighter; text-transform: capitalize; display:block; margin-top:0.7vw; margin-bottom: 4vw; } .menushow ul li:hover .menu_tit h2,.menushow ul li:hover .menu_tit small{ color: #fff; } .menu_num{ text-align: center; position: absolute; left:50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: 10vw; background: linear-gradient(to bottom, #f3f4f4, rgba(243, 244, 244, 0)); -webkit-background-clip: text; color: transparent; font-size: 13rem; line-height: 1; font-family: 'f-Regular'; transition: all 0.5s ease; pointer-events: none; z-index: 1; } .menushow ul li:hover .menu_num{ opacity: 0; transform: translate(-50%, 100%); } .menu_nav a{ display: block; -webkit-transition:300ms 0s all linear; -moz-transition: 300ms 0s all linear; -ms-transition: 300ms 0s all linear; -o-transition: 300ms 0s all linear; transition: 300ms 0s all linear; opacity: 0; top:5px; position: relative; } .menushow ul li:hover .menu_nav a{ opacity: 1; top:0; } .menu_nav a span{ display:inline-block; height: 45px; line-height: 45px; position: relative; overflow: hidden; font-size: 1.8rem; color: #fff; } .menu_nav a span:after{ display: block; content: ''; position: absolute; left:0; bottom:0; width:0; background: #fff; height: 2px; -webkit-transition: 350ms 0s all linear; -moz-transition: 350ms 0s all linear; -ms-transition: 350ms 0s all linear; -o-transition: 350ms 0s all linear; transition: 350ms 0s all linear; } .menu_nav a:hover span:after{ width: 100%; } .menu_close{ position: absolute; top:20px; right:20px; z-index: 100; cursor: pointer; } .menu_close img{ -webkit-transition: 350ms 0s all linear; -moz-transition: 350ms 0s all linear; -ms-transition: 350ms 0s all linear; -o-transition: 350ms 0s all linear; transition: 350ms 0s all linear; filter: grayscale(41) brightness(1); } .menu_close:hover img{ filter: grayscale(0) brightness(1)!important; } .fixcont{ margin:0 20px; display:flex; justify-content: space-between; width: 97px; } .fixcont>div{ position: relative; cursor: pointer; } .fixcont02>div{ background: #fff; border-radius: 25px; position: absolute; bottom:calc(100% + 20px); width:45px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:15px 8px; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; opacity: 0; z-index: -1; visibility: hidden; } .fixcont02>div:before{ display: block; content: ''; position: absolute; top:95%; left:16px; border-right:17px solid transparent; border-top: 16px solid #fff; } .fixcont02.mshow>div{ opacity: 1; z-index: 99; visibility: visible; bottom:calc(100% + 16px); } .fixcont02>div img{ width: 100%; } .fixcont02>div a:first-of-type{ display: block; margin-bottom:10px; } .fixcont01>a{ color: #fff; border-bottom: 1px solid #fff; height: 35px; width: 0; display: block; overflow: hidden; position: absolute; left:calc(100% + 16px); top:0; -webkit-transition: 350ms 0s all linear; -moz-transition: 350ms 0s all linear; -ms-transition: 350ms 0s all linear; -o-transition: 350ms 0s all linear; transition: 350ms 0s all linear; } .fixcont01:hover>a { width: 124px; } .fixcont01>a>span{ position: absolute; line-height: 35px; font-size: 1.6rem; color: #fff; } /*btn*/ .more{ border-radius: 32px; display: block; text-align: center; overflow: hidden; position: relative; width: 175px; height: 56px; line-height: 56px; background: #009d85; margin-top:1.5vw; } .more span{ position: relative; font-size: 18px; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; display: block; text-align: left; width:calc(100% - 40px); color: #fff; margin:0 auto; background: url("../images/appmore.png") no-repeat right center; } .more:hover span{ color: #fff; } .more:before{ content:""; width:100%; height:100%; background:#43cab5; position:absolute; left:0; bottom:0; transform-origin:100%; -webkit-transform-origin:100%; -webkit-transition:-webkit-transform .6s cubic-bezier(.4,0,.2,1); transition:-webkit-transform .32s cubic-bezier(.4,0,.2,1); transition:transform .6s cubic-bezier(.4,0,.2,1); transition:transform .6s cubic-bezier(.4,0,.2,1),-webkit-transform .6s cubic-bezier(.4,0,.2,1); transform:scaleX(0); -webkit-transform:scaleX(0); visibility:hidden\9;} .more:hover:before{ transform:scaleX(1); -webkit-transform:scaleX(1); -moz-transform:scaleX(1); transform-origin:0; -webkit-transform-origin:0; visibility:visible\9;} /*footer*/ .footer{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background:url("../images/fotbg.jpg") no-repeat center; background-size:cover; } .fot_top{ display:flex; justify-content: space-between; align-items: center; height: 142px; margin-bottom:3vw; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .fot_top a img{ width: 235px; } .totop{ background: #009d85 url("../images/totopicon.png") no-repeat center; cursor: pointer; width: 85px; height: 48px; border-radius: 35px; } .fot_mid{ padding-bottom:5.5vw; } .foot-nav{ float:left; display:flex; justify-content: space-between; width:calc(100% - 267px - 25%); } .foot-nav>li{ max-width: 120px; } .foot-nav>li>a{ font-size: 16px; color: #292929; display: block; position: relative; padding-bottom: 24px; margin-bottom:6px; } .foot-nav>li>a:after{ display:block; content: ''; position: absolute; bottom:0; background:#009d85; left:0; width:20px; height: 3px; } .foot-nav>li>div a{ font-size:1.4rem; color: rgba(51, 51, 51, 0.7); margin-top:1vw; display: block; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; max-width:100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .foot-nav>li>div a:hover{ color: #009d85; } .foot-cont{ width:373px; float:left; margin-left:4%; } .foot-cont>p{ font-size: 1.6rem; color: #292929; margin-bottom:0.5vw; } .foot-cont>h3{ color: #009d85; font-weight: bold; font-size: 3.8rem; margin-bottom:0.5vw; } .foot-cont>small{ color: rgba(51, 51, 51, 0.7); font-size: 1.4rem; display: block; margin-bottom:0.5vw; } .foot-cont>div{ margin-top:2vw; } .foot-cont>div:after{ display: block; content: ''; clear: both; } .foot-code{ float:right; background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:16px; width:188px; } .foot-code img{ max-width: 100%; } .foot-code p{ text-align: center; line-height: 30px; font-size: 1.6rem; color: #252525; } .fot_bot{ line-height: 80px; height: 80px; overflow: hidden; background:#009d85; } .fot_bot p{ float:left; font-size: 14px; color: #fff; } .fot_bot a{ float:right; font-size: 14px; color: #fff; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .fot_bot a:hover{ text-decoration: underline; } /*footer--end*/ /*zbanner*/ .zbanner{ position: relative; overflow: hidden; height: 23vw; background-size:cover!important; } .zbanner>div{ position: absolute; width:100%; text-align: center; color: #fff; top:calc(50% + 60px); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .zbanner>div>p{ color: #fff; font-size: 3.4rem; text-transform:uppercase; } .zbanner>div>h2{ color: #fff; font-size:4.2rem; font-weight: bold; } .zbanner>b{ display: block; position: absolute; bottom:20px; left:50%; width: 50px; height: 50px; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); cursor: pointer; } .zbanner>b img{ width:100%; height: 100%; object-fit: none; } .crumbsbg{ background: #009d85; } .cru_left{ float:left; color: #fff; font-size: 1.6rem; } .cru_left a{ display:block; line-height: 88px; color: #fff; float:left; font-size: 1.6rem; margin-right:47px; position: relative; overflow: hidden; } .cru_left a:after{ display:block; content: ''; position: absolute; bottom:0; left:0; height: 4px; background: #fff; width: 0; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .cru_left a:hover:after,.cru_left a.jump:after{ width: 100%; } .crumbs{ float:right; color: #fff; font-size: 1.4rem; line-height: 88px; } .crumbs a{ color: #fff; font-size: 1.4rem; } .com01{ padding:3vw 0; } .com01 .left{ float:left; width:51%; } .com01 .left>h4{ font-size: 3.6rem; color: #009d85; font-weight: bold; margin-top: 2vw; margin-bottom: 10px; } .com01 .left>h3{ font-size: 3.2rem; color: #333333; line-height: 40px; font-weight: bold; } .com01 .left>b{ display: block; width: 40px; height: 2px; background: #009d85; margin-top: 15px; margin-bottom: 1vw; } .com01 .left>small{ font-size: 1.6rem; line-height: 30px; color: #323131; } .com01 .right{ float:right; width: 41.5%; } .com01 .right img{ width: 100%; height: 100%; object-fit: contain; } /*com02*/ .com02{ padding:1.6vw 0; position: relative; overflow: hidden; } .com02:before{ display: block; content: ''; height: 22vw; background: #009d85; width:100%; position: absolute; bottom:0; left:0; } .com02_text{ float:left; padding-left:calc(50% - 800px); } .com02_text>img{ filter:grayscale(100) brightness(100); width: 328px; margin-top: 3vw; margin-bottom: 20px; } .com02_text>p{ font-size: 2.5rem; color: #009d85; line-height: 27px; text-align: center; width: 297px; border-left:4px solid #009d85; border-right:4px solid #009d85; margin-bottom: 19vw; } .com02_text ul li{ float:left; width: 187PX; } .com02_text ul li>h3 span{ font-size: 4.2rem; color: #fff; font-weight: bold; } .com02_text ul li>h3 sub{ font-size: 1.4rem; font-weight: bold; color: #009d85; border-radius:50%; background: #fff; width: 25px; height: 25px; vertical-align: super; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top:2px; text-align: center; } .com02_text ul li>small{ display:block; font-size: 1.2rem; color: #fff; } .com02_video{ height: 36.8vw; } #playVideo,.video-preview,.jwplayer video,#playVideo #playercontainer{ width: 100%!important; height: 100%!important; } /*workshop*/ .com03{ padding:5vw 0; } .com03 .warpper{ height: 650px; } .swiperwork{ width: 100%; height: 100%; } .com03 .swiper-slide { height: calc((100% - 24px) / 2); } .com03 .swiper-slide a{ display: block; width: 100%; height: 100%; position: relative; } .com03 .swiper-slide a img{ width: 100%; height: 100%; object-fit: cover; } .com03 .swiper-slide a p{ position: absolute; bottom:0; left:0; width:100%; text-align: center; background: rgba(0, 0, 0, 0.6); color: #fff; line-height: 60px; font-size: 1.6rem; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .com03 .swiper-slide a:hover p{ background: #009d85; } /*honor*/ .com04{ background: #f0f0f0; padding:5vw 0; } .swipehonor a{ display: block; width:100%; height: 24vw; background: #fff; position: relative; overflow: hidden; } .swipehonor1 a{ display:block; height: 23.5vw; width: 100%; } .swipehonor1 .swiper-slide{ width: 310px!important; } .swipehonor a img{ position: absolute; left:50%; top:50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); max-width: 100%; max-height: 100%; } .swipehonor1 a img{ position: initial; width: 100%; height: 100%; top:0; left:0; transform: none; object-fit: contain; } .zcom_hon_tit{ text-align: center; } .zcom_hon_tit ul{ display:inline-block; margin-bottom:35px; } .zcom_hon_tit ul li{ float:left; margin-right:20px; background: #919191; line-height: 35px; padding:0 15px; color: #fff; font-size: 16px; cursor: pointer; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .zcom_hon_tit ul li:last-of-type{ margin-right: 0; } .zcom_hon_tit ul li:hover,.zcom_hon_tit ul li.hoverin{ background: #009d85; } .zcom_hon_cont>div{ display:none; } .com05{ background: url("../images/cultruebg.jpg") no-repeat center; background-size:cover; padding:5vw 0; display:flex; align-items: center; } .com05>.warpper{ display:flex; justify-content: space-between; align-items: center; } .com05>.warpper>div{ width: 45%; } .com05>.warpper>div>h3{ font-size: 3.2rem; color: #fff; font-weight: bold; } .com05>.warpper>div>p{ color: #fff; font-size: 1.6rem; text-transform: uppercase; margin-bottom:3vw; } .com05>.warpper>div>small{ color: #fff; font-size: 1.6rem; line-height: 35px; } .com06{ padding:5vw 0; } .com06 .warpper{ height: 530px; } .com06 .swipercoop{ width: 100%; height: 100%; } .com06 .swipercoop .swiper-slide{ height: calc((100% - 51px) / 4); } .com06 .swipercoop .swiper-slide a{ display: block; width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border:1px solid #c2c2c2; } .com06 .swipercoop .swiper-slide a img{ width:100%; height: 100%; object-fit: scale-down; } .pd5{ padding:5vw 0; } .zapp ul li{ float:left; width: 49.5%; margin-right:1%; margin-bottom:1vw; } .zapp ul li:nth-of-type(2n){ margin-right:0; } .zapp ul li a{ display: block; width:100%; height: 25vw; position: relative; overflow: hidden; } .zapp ul li a>img{ width: 100%; height: 100%; object-fit: cover; } .zapp ul li a>div{ position: absolute; top:0; left:0; width:100%; height: 100%; text-align: center; color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top:20%; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; background: transparent repeat-x center bottom; } .zapp ul li a:hover>div { background: url("../images/appbg.png") repeat-x center bottom; } .zapp ul li a>div>h4{ font-weight: bold; font-size: 3.4rem;} .zapp ul li a>div>p{ font-size: 3.6rem; line-height: 37px; font-weight: bold; text-transform: uppercase; } /*zcontact*/ .zcont_tit{ line-height: 75px; color: #313131; font-size: 2.2rem; position: relative; padding-left:20px; margin-top: 4vw; } .zcont_tit:after{ display: block; content: ''; background: #009d85; position: absolute; width: 3px; height: 24px; left:0; top:50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .zcontact_war>h2{ font-size: 3.4rem; color: #313131; } .zcontact_cont{ display:flex; justify-content: space-between; border-top: 1px solid #e5e5e5; padding:2vw 0; } .zcontact_cont li:last-of-type b{ display: block; width: 96px; } .zcontact_cont li:last-of-type b img{ width: 100%; } .zcontact_cont li>p{ font-size: 1.6rem; color: #4a4a4a; } .zcontact_cont li>small{ font-size: 1.8rem; color: #4a4a4a; margin-top:8px; display: block; } .zcont_title{ font-weight: bold; color: #3a3a3a; font-size: 3.2rem; padding-bottom:17px; position: relative; margin-bottom: 2vw; } .zcont_title:after{ display: block; content: ''; width: 77px; height: 4px; background: #009d85; position: absolute; bottom:0; left:0; } .zmes{ background: url("../images/zmsgbg.jpg") no-repeat center; padding:4vw 0; } .zmes .warpper{ background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:3vw 4vw; } .zcontact>.warpper{ padding-bottom:2vw; } #formData>div{ float:left; width:32%; margin-right:2%; margin-bottom: 10px; } #formData>div:nth-of-type(3n){ margin-right: 0; } #formData>div>label{ line-height: 55px; font-size: 1.8rem; color: #313131; display: block; } #formData>div>input,#formData>div>textarea{ line-height: 50px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:0 15px; border:1px solid #d7d7d6; border-top: 3px solid #9a9999; } #formData>div.zmsg_textarea{ width: 100%; } #formData>div.zmsg_textarea textarea{ height: 178px; } #formData>.zms_code{ width:100%; } #zmscode input{ width: 49%; float:left; line-height: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:0 15px; border:1px solid #d7d7d6; border-top: 3px solid #9a9999; } #zmscode .verify{ height: 54px; float:left; margin-left:2%; } #zmscode .verify img{ height: 100%; } #formData>a{ float:left; display: block; width: 100%; line-height: 59px; font-size: 2.2rem; color: #fff; text-align: center; background: #009d85; margin-top: 2vw; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } #formData>a:hover{ background: #43cab5; } .contact-map{ width: 100%; height: 580px; position: relative; overflow: hidden; } .zcont_code{ position: absolute; right:0; top:0; background: #009d85; width: 200px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:18px; height: 200px; } .zcont_code>img{ width: 100%; } #dituContent{ height: 100%; } /*znews*/ .news-list ul li{ border-bottom: 1px solid #ddd; } .news-list ul li a{ display: flex; justify-content: space-between; padding:30px 0; } .news-list ul li a>b{ width: 32%; height: 19vw; } .news-list ul li a>b>img{ -webkit-transition: 500ms 0s all linear; -moz-transition: 500ms 0s all linear; -ms-transition: 500ms 0s all linear; -o-transition: 500ms 0s all linear; transition: 500ms 0s all linear; } .news-list ul li a:hover>b>img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .news-list ul li a>div{ width: 53%;} .news-list ul li a>div>p{ color: #aaaaaa; font-size: 1.6rem; } .news-list ul li a>div>h3{ color: #333333; font-size: 1.8rem; padding-top:2vw; padding-bottom: 20px; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .news-list ul li a:hover>div>h3 { color: #009d85; } .news-list ul li a>div>small{ font-size: 1.6rem; color: #666666; line-height: 1.65; height: 10vw; display: block; } .news-list ul li a>span{ margin-top: 2vw; border-radius: 50%; width:30px; height: 30px; background: url("../images/newsicon.png") no-repeat center; border:1px solid #333; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .news-list ul li a:hover>span{ -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } /*newsinfo*/ .newslist a{ display:block; float:left; width: 24%; margin-right: 1.3%; background: #f3f3f3; padding-top:25px; margin-bottom: 20px; } .newslist a:nth-of-type(4n){ margin-right: 0; } .newslist a>p{ font-weight: bold; font-size: 20px; color: #505050; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .newslist a:hover>p{ color: #3688ea; } .newslist a>span{ font-size: 12px; color: #505050; display:block; margin-top: 8px; margin-bottom: 11px; } .newslist a>small{ font-size: 14px; color: #505050; line-height: 26px; height: 86px; display: block; width: 100%; margin-top:5px; } .newslist a>p,.newslist a>span,.newslist a>small{ padding:0 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .newslist a>b{ width: 100%; height: 240px; } .newslist a>b img{ object-fit: cover; } .newslist a>b p{ position: absolute; width:100%; height: 100%; bottom:0; left:0; background: rgba(22, 85, 188, 0.4); -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; opacity: 0; } .newslist a:hover>b p{ opacity: 1; } .newslist a>b span{ position: absolute; font-weight: normal; letter-spacing: 3px; top: 55%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 109px; line-height: 28px; font-size: 12px; padding-left: 14px; color: #fff; border-radius: 20px; border: 1px solid #fff; background: url(../images/jt02.png) no-repeat 91px center; -webkit-transition: 350ms 200ms all ease; -moz-transition: 350ms 200ms all ease; -ms-transition: 350ms 200ms all ease; -o-transition: 350ms 200ms all ease; transition: 350ms 200ms all ease; opacity: 0; } .newslist a:hover>b span{ opacity: 1; top:50%; } .z_news_info .zpage_tit{margin-top:0} .newsinfo_l{float:left; width:70%; background:#fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:20px 20px; border-right:1px solid #ddd; } .newsinfo_r{float:right;width:30%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left:30px; padding-top:20px; } .newsinfo_l>h3{color:#333;font-size:26px; margin-bottom: 2.08333vw; line-height: 45px; font-weight:lighter;border-bottom:1px solid #ddd;padding-bottom: 10px;} .newsinfo_l .p_content{ line-height: 37px; } .newsinfo_l .p_content img{ max-width:100%; display:inline-block; text-align: center; } .othernews_text>h5{ font-size: 18px; color: #1c1c1c; margin-top:10px; -webkit-transition: 350ms 0ms all ease; -moz-transition: 350ms 0ms all ease; -ms-transition: 350ms 0ms all ease; -o-transition: 350ms 0ms all ease; transition: 350ms 0ms all ease; } .othernews_text>small{ font-size: 14px; color: #737373; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top:10px; margin-bottom: 15px; } .othernews_text>small p{ text-indent: 0!important; } .othernews_text>span{ font-size: 15px; color: #515151; background: url("../images/otherjt.png") no-repeat right center; padding-right:35px; -webkit-transition: 350ms 0ms all ease; -moz-transition: 350ms 0ms all ease; -ms-transition: 350ms 0ms all ease; -o-transition: 350ms 0ms all ease; transition: 350ms 0ms all ease; } .newsinfo_r a:hover .othernews_text>h5{ color: #2c5c92; } .newsinfo_r a:hover .othernews_text>span{ padding-right: 40px; } .newsinfo_r>h3{ font-size: 25px; color: #1c1c1c; font-weight: bold; border-bottom: 1px solid #ddd; line-height: 45px; margin-bottom: 2.08333vw; padding-bottom: 10px; } .newsinfo_r>a{ display: block; width:100%; margin-bottom:4vw; } .newsinfo_r>a b{ width: 100%; height: 27vh; } .newsinfo_r>a b img{ width: 100%; } .infotime{margin-bottom:20px} .infotime span{display:inline-block;line-height:25px;padding-left:28px;margin-right:25px;font-size:15px;color:#797878} .infotime span:first-of-type{background:url(../images/time.png) no-repeat left center} .infotime span:last-of-type{background:url(../images/watch.png) no-repeat left center} .infotime a{ float:right; background: url("../images/back.png") no-repeat left center; padding-left:35px; font-size: 16px; color: #333; -webkit-transition: 350ms 0ms all ease; -moz-transition: 350ms 0ms all ease; -ms-transition: 350ms 0ms all ease; -o-transition: 350ms 0ms all ease; transition: 350ms 0ms all ease; } .infotime a:hover{ color: #009d85; background: url("../images/backs.png") no-repeat left center; } .info_share{border-bottom:1px solid #ddd;margin-top:20px;padding-bottom:5px;margin-bottom:10px;} .info_share span{float:left} .share{float:left} .newsPage .page-a{ line-height: 30px; color: #666; border-bottom: 1px solid #ddd; } .newsPage .page-a a{ white-space: nowrap; color: #666;} .infozbanner .zbanner{ height: 410px!important; } .infozbanner .zbanner .warpper{display:none;} /*zproduct*/ .de-product-list ul li{ float:left; width:24%; margin-right:1.3%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .de-product-list ul li:nth-of-type(4n){ margin-right: 0; } .de-product-list ul li .img{ display:block; height: 17vw; border:1px solid #ddd; } .de-product-list ul li .img img{ width: 100%; height: 100%; object-fit: contain; } .zgoods_tit{ background: #009d85; width: 80%; margin:0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:10px; position: relative; top: -30px; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .de-product-list ul li:hover .zgoods_tit{ background: #a9a9a9; } .zgoods_tit{ display:flex; justify-content: center; align-items: center; height: 76px; } .zgoods_tit p{ text-align: center; color: #fff; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .zgoods_tit small{ display: block; color: #fff; text-align: center; } /*zproinfo*/ .zpro_info_cont1{ padding-top: 36px; padding-bottom: 40px; border-bottom: 1px solid #ddd; position: relative; } .zpro_cont1_left{ float:left; width: 43%; height:395px; } .gallery-top-right{ width: calc(100% - 5% - 84px); margin-left: 5%; float:right; height:100%; background: #fff; } .gallery-top-right .swiper-slide img{ max-width: 100%; max-height: 100%; position: absolute; top:50%; left:50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .gallery-thumbs-left{ float:left; width:83px; height:100%; padding:30px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } .gallery-thumbs-left .swiper-slide{ position: relative; overflow: hidden; background:#fff; } .gallery-thumbs-left .swiper-slide img{ max-width: 100%; position: absolute; top:50%; left:50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .gallery-thumbs-left .swiper-slide img.shuiyin{ max-width: initial; width: 75%; min-height: initial; opacity: 0.55; } .gallery-thumbs-left .swiper-button-next:after,.gallery-thumbs-left .swiper-button-prev:after{ display: none; } .gallery-thumbs-left .swiper-button-next{ width: 100%; height: 20px; line-height: 20px; bottom:0; right:0; top: initial; background: #eeeeee url("../images/zpro_jtr.png") no-repeat center; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .gallery-thumbs-left .swiper-button-prev{ width: 100%; height: 20px; line-height: 20px; background: #eeeeee url("../images/zpro_jtl.png") no-repeat center; top:0; left:0; margin-top: 0; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .gallery-thumbs-left .swiper-button-prev:hover,.gallery-thumbs-left .swiper-button-next:hover{ background-color:#d1d1d1; } .zpro_cont1_right{ float:right; width: 50%; margin-left: 5%; } .zpro_cont1_right>p{ font-size: 22px; color: #333333; line-height: 44px; margin-bottom: 20px; border-bottom: 1px dashed #d2d2d2;; } .zpro_cont1_right>h5{ font-size: 14px; font-weight: normal; color: #333333; } .zpro_cont1_right>h5 span{ color: #009d85; } .zpro_cont1_right>small{ display: block; height: 92px; overflow: hidden; margin-top: 10px; margin-bottom: 37px; font-size: 14px; color: #333333; line-height: 24px; } .zpro_cont1_right>small>span{ color: #666666; } .zpro_cont1_right>span{ font-size: 14px; color: #999999; } .zpro_cont1_right>h4{ font-size: 22px; color: #009d85; } .gallery-top-right .swiper-slide img.shuiyin{ max-width: initial; width: 75%; min-height: initial; opacity: 0.55; } .zbtn{ margin-top:2vw; margin-bottom: 2vw; } .zbtn a{ display: block; float:left; margin-right:11px; line-height: 46px; color: #fff; font-size: 14px; width: 170px; padding-left:73px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .zbtn a:first-of-type{ background: #009d85 url("../images/zproicon01.png") no-repeat 40px center; } .zbtn a:hover:first-of-type{ background-color: #0e4195; } /*.zbtn a:last-of-type{*/ /*background: #009d85 url("../images/zproicon02.png") no-repeat 40px center;*/ /*}*/ .zbtn a:hover:last-of-type{ background-color: #237ed2; } .tuijian{ margin-top: 55px; } .tuijian>h4{ font-size: 16px; color: #ffffff; padding-left: 25px; line-height: 62px; margin-bottom: 46px; background: url("../images/tuijianbg.jpg") no-repeat left center; } .zpro_info_cont2{ padding-top: 27px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .zpro_info_cont2 p{ font-size: 15px; color: #666666; line-height: 34px; } .zpro_info_cont2 img{ margin:0 auto; margin-top: 13px; margin-bottom: 15px; } .zpro_info_cont2 table{ width: 100%!important; border-collapse: collapse!important; } .zpro_info_cont2 table td img{ max-width: 220px !important; } .zpro_info_cont2 table td{ border:1px solid #d2d2d2!important; padding:10px 40px!important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .tuijiancont{ width: 100%; height: 210px; position: relative; } .tuijiancont .swiper-button-next{ right:-50px; } .tuijiancont .swiper-button-prev { left:-50px; } .tuijiancont .swiper-button-next:after,.tuijiancont .swiper-button-prev:after{ font-size: 29px; color: #0054a7; font-weight: bold; } .swiper-tj,.swiper-tj .swiper-slide,.swiper-tj .swiper-slide div{ width:100%; height: 100%; } .swiper-tj { overflow: hidden; } .swiper-tj .swiper-slide div a{ width:100%; height: 100%; display: block; position: relative; overflow: hidden; } .swiper-tj .swiper-slide div a img{ width: 100%; height: 100%; object-fit: cover; } .swiper-tj .swiper-slide div a p{ background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 15px; line-height: 38px; text-align: center; position: absolute; bottom:0; left:0; width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:0 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .swiper-tj .swiper-slide div a:hover p{ background: #009d85; } .newsPage{ padding-bottom: 60px; margin-top: 45px; } .page-a{ border-bottom: 1px solid #ddd; line-height: 35px; color: #707070; } .page-a a{ color: #707070; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .page-a a:hover{ text-decoration: underline; color: #009d85!important; } .zpro_info_cont2 strong{ line-height: 75px; color: #313131; font-size: 2.2rem; position: relative; padding-left: 20px; margin-top: 4vw; } .zpro_info_cont2 strong:after{ display: block; content: ''; background: #009d85; position: absolute; width: 3px; height: 24px; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } /*page*/ .de-page-mian { overflow: hidden; text-align: center; font-size: 0; margin: 10px 0 35px; } .de-page-mian .page-inner { display: inline-block; overflow: hidden; } .de-page-mian .page-inner a { display: block; float: left; min-width: 26px; padding: 0 5px; height: 36px; border: 1px solid #dddddd; background: #fff; text-align: center; line-height: 36px; font-size: 14px; color: #333; margin-right: -1px; overflow: hidden; } .de-page-mian .page-inner a.active, .de-page-mian .page-inner a:hover { color: #fff; border-color: #009d85; background: #009d85; } .de-page-mian .page-inner a.prev { margin-right: 10px; background: #fff url(../images/prev.jpg) no-repeat center; } .de-page-mian .page-inner a.prev.on { background: #fff url(../images/prev-hover.jpg) no-repeat center; } .de-page-mian .page-inner a.prev:hover { background-color: #fff; border-color: #dddddd; } .de-page-mian .page-inner a.next { margin-left: 10px; margin-right: 15px; background: #fff url(../images/next.jpg) no-repeat center; } .de-page-mian .page-inner a.next.on { background: #fff url(../images/next-hover.jpg) no-repeat center; } .de-page-mian .page-inner a.next:hover { background-color: #fff; border-color: #dddddd; } .de-page-mian .page-inner a.page-btn { font-size: 12px; margin-right: 0; width: 63px; margin-left: 10px; } .de-page-mian .page-inner span { display: block; font-size: 12px; color: #333; float: left; line-height: 38px; } .de-page-mian .page-inner input { display: block; float: left; height: 36px; width: 36px; border: 1px solid #dddddd; text-align: center; line-height: 36px; font-size: 14px; color: #333; margin: 0 5px; } /*caseinfo*/ .caseinfo_pic .button-prev, .caseinfo_pic .button-next { transition: 0.5s; outline: none; position: absolute; width: 140px; z-index: 10; top: 60%; transform: translateY(-34px); cursor: pointer; } .caseinfo_pic .button-prev { left: 4vw; } .caseinfo_pic .button-next { right: 4vw; } .caseinfo_pic .button.disabled { opacity: 0.2; cursor: default; } #arrow-svg-home { transform: translateY(353px); } .button-next #arrow-svg-home { transform: translateY(353px) rotateY(180deg); transform-origin: 80px 0px 0px; } svg { transition: 0.5s; } .cls-1 { transition: 0.5s; opacity: 0.4; transform-origin: -20px 40px; opacity: 1; } .cls-4 { transition: 0.5s; stroke-width: 2px; stroke: #4acbb7; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.4; transform-origin: 0px 0px 0px; } #arrow-trg { transition: 0.5s; fill: #4acbb7; transform: rotateY(180deg) translate(-53px, 39px); } #line { transition: 0.5s; stroke: #4acbb7; transform: translate(50px, 42px); } .caseinfo_pic .button-prev:not(.disabled):hover svg { transform: translateX(-25px); } .caseinfo_pic .button-next:not(.disabled):hover svg { transform: translateX(25px); } .caseinfo_pic .button:not(.disabled):hover .cls-1 { transform: scale(1.1); } .caseinfo_pic .button:not(.disabled):hover .cls-4 { stroke-dasharray: 2px; stroke-dashoffset: 2px; opacity: 1; } .caseinfo_pic .button:not(.disabled):hover #arrow-trg { transform: rotateY(180deg) translate(-37px, 39px); } .caseinfo_pic .button:not(.disabled):hover #line { transform: translate(35px, 42px) scaleX(0.33); } .zcase .newsinfo_l{ float:none; width:100%; padding-right: 0; border-right: none; } .zcase .newsinfo_r{ float:none; width:100%; } .zcase .newsinfo_r h3{ width: 100%; } .zcase .newsinfo_r a{ float:left; width: 32%; margin-right:2%; } .zcase .newsinfo_r a:nth-of-type(3n){ margin-right: 0; } .zcase .newsinfo_r a b{ width:100%; height: 17vw; } .zcase .newsinfo_r a b img{ object-fit: cover; } .caseinfo_pic .swiper-slide{ width: 500px; } .caseinfo_pic .swiper-slide div{ width: 100%; background: #fff; height: 18vw; } .caseinfo_pic .swiper-slide b{ float:left; width: 92%; height: 100%; } .caseinfo_pic .swiper-slide b img{ object-fit: cover; } .caseinfo_pic .swiper-slide p{ float:right; width: 5%; height: 100%; writing-mode:lr-tb; writing-mode:tb-rl; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right:2%; padding-top: 2%; } .zcaseinfo_tit{ margin-top: 2vw; font-size:2.8rem; color: #333; padding-left:15px; position: relative; overflow: hidden; margin-bottom: 1.5vw; } .zcaseinfo_tit:before{ display: block; content: ''; position: absolute; left:0; top:50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 3px; height: 28px; background: #009d85; } /*zappinfo*/ .zappinfo{ padding-bottom:3vw; } .zappinfo_cont{ position: relative; padding-bottom:45px; } .zappinfo_cont:before{ position: absolute; content: attr(data-name); font-size: 7.6rem; font-weight: bold; bottom:0; right:0; color: #efefef; text-transform: uppercase; } .zappinfo_cont{ padding:20px; line-height: 35px; } .zappinfo .img_jz{ width: 100%; height: 25vw; } .zappinfo .img_jz img{ object-fit: cover; } /*zproinfo_tit*/ .zproinfo_tit{ display:flex; justify-content: left; flex-wrap: wrap; width: 600px; border-top: 1px dashed #dddddd; padding-top: 1vw; position: absolute; } .zproinfo_tit p{ background:#ddd; width: 183px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 32px; padding-top:5px; padding-bottom: 5px; background-size: 100% 100%; line-height: 42px; color: #fff; font-size: 18px; margin-bottom: 10px; cursor: pointer; display:flex; align-items: center; -webkit-transition: 350ms 0s all ease; -moz-transition: 350ms 0s all ease; -ms-transition: 350ms 0s all ease; -o-transition: 350ms 0s all ease; transition: 350ms 0s all ease; } .zproinfo_tit p b{ display: block; background: #fff url("../images/infovideo.png") no-repeat center; background-size: 26px; border-radius: 50%; width:35px; height: 35px; margin-right: 15px; } .zproinfo_tit p:first-of-type{ margin-right:15px; } .zproinfo_tit p:first-of-type b{ background: #fff url("../images/infodes.png") no-repeat center; background-size: 26px; } .zproinfo_tit p.chosethis{ background: #009d85; } #proinfoVideo{ width: 39%!important; height: 330px !important; margin:0 auto; } .zjoin{ background-size:cover; background-position: center; display:flex; justify-content: left; align-items: center; height: 657px; margin-top: 3vw; margin-bottom: 3vw; } .zjoin>div{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left:160px; } .zjoin h3{ color: #fff; font-size: 56px; } .zjoin small{ color: #fff; font-size: 1.8rem; line-height: 30px; } .zjoin h5{ color: #fff; font-weight: bold; font-size: 24px; } /*mobile_bottom_fix*/ .mobile_bottom_fix{ position: fixed; bottom:0; left:0; width:100%; z-index: 1000; background:#048672; } .mobile_bottom_fix a{ display:block; text-align: center; float:left; width: 33.3%; } .mobile_bottom_fix a:nth-of-type(2){ margin-left:1px solid #fff; margin-right: 1px solid #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mobile_bottom_fix a span{ color: #fff; font-size: 1.6rem; line-height: 35px; padding-left:25px; } .mobile_bottom_fix a:first-of-type span{background: url("../images/m_foticon01.png") no-repeat left center;} .mobile_bottom_fix a:nth-of-type(2) span{background: url("../images/m_foticon02.png") no-repeat left center;} .mobile_bottom_fix a:nth-of-type(3) span{background: url("../images/m_foticon03.png") no-repeat left center;}