html, body { position: relative; height: 100%; } #menubg{ position: fixed; top:100px; left:0; height:calc(100% - 100px); width:120px; text-align: center; border-right:1px solid rgba(255, 255, 255, 0.4); z-index: 2000; } #menu{ top:50%; left:50%; transform: translate3d(-50%,-50%,0); } #menu li{ display: block; border-radius: 0; position: relative; width: 6px; height: 6px; margin-bottom:30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer; background: none; opacity: 1; background: rgba(255, 255, 255, 0.8); } #menu li.swiper-pagination-bullet-active,#menu.changemenucolor li.swiper-pagination-bullet-active{ background:none; } #menu li span{ display:none; 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%); color: #fff; width: 20px; line-height: 18px; font-weight: lighter; -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 li.swiper-pagination-bullet-active span{ display:block; } #menu.changemenucolor li{ background: rgba(40, 40, 40, 0.2); } #menu.changemenucolor li span{ color: #282828; } main{ width:100%; } /*screen01*/ .screen01{ width:100%; height: 100%; display:flex; justify-content: center; align-items: center; position: relative; } .swiper-banner{ width: 100%; height: 100%; } .swiper-banner .swiper-slide{ width: 100%; height: 100%; } .swiper-banner .swiper-slide>a{ display:flex; justify-content: center; align-items: center; width:100%; height: 100%; position: relative; overflow: hidden; } .swiper-banner .swiper-slide>a>img{ position: absolute; left:50%; top:50%; transform: translate(-50%,-50%) scale(1.05); min-width:100%; min-height:100%; } .swiper-banner .swiper-slide>a p img{ margin:0 auto; } .swiper-banner .banner01_text{ text-align: center; margin:0 auto; width: 100%; } .banner01_text p{ position: relative; overflow: hidden; height: 125px; width:100%; margin:0 auto; } @-webkit-keyframes bigscale{ 0%{ transform: translate(-50%,-50%) scale(1.05); } 100%{ transform: translate(-50%,-50%) scale(1); } } @keyframes bigscale{ 0%{ transform: translate(-50%,-50%) scale(1.05); } 100%{ transform: translate(-50%,-50%) scale(1); } } .bigscale{ -webkit-animation-name: bigscale; animation-name: bigscale; } .banner01_text p>span{ width: 1920px; display:block; position: absolute; font-family: xingshu; color: #fff; letter-spacing: -6px; font-size: 6rem; line-height: 125px; left:50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .banner01_text>small{ color: #fff; font-size: 16px; text-transform: uppercase; } .scrolldown1{ position: absolute; text-align: center; bottom:30px; cursor: pointer; z-index: 50; } @keyframes mouse-down { from { opacity: 0.2; } to { opacity: 1; } } @-webkit-keyframes mouse-down { from { opacity: 0.2; } to { opacity: 1; } } .scrolldown1 span { border: 3px solid rgba(255, 255, 255, 0.2); width: 44px; height: 44px; display: block; border-radius: 50%; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .scrolldown1 span:before{ display:block; content: ''; 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%); position: absolute; border-top:7px solid #fff; border-left:7px solid transparent; border-right:7px solid transparent; } .scrolldown1 span img{ display: block; position: absolute; left:22%; 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%); transform-origin: right center; -webkit-animation: mouse-dot 1.5s linear infinite; animation: mouse-dot 1.5s linear infinite; } @keyframes mouse-dot { from { -webkit-transform: translate(-50%,-50%) rotate(0); -moz-transform: translate(-50%,-50%) rotate(0); -ms-transform: translate(-50%,-50%) rotate(0); -o-transform: translate(-50%,-50%) rotate(0); transform: translate(-50%,-50%) rotate(0); } to { -webkit-transform: translate(-50%,-50%) rotate(360deg); -moz-transform: translate(-50%,-50%) rotate(360deg); -ms-transform: translate(-50%,-50%) rotate(360deg); -o-transform: translate(-50%,-50%) rotate(360deg); transform: translate(-50%,-50%) rotate(360deg); } } @-webkit-keyframes mouse-dot { from { -webkit-transform: translate(-50%,-50%) rotate(0); -moz-transform: translate(-50%,-50%) rotate(0); -ms-transform: translate(-50%,-50%) rotate(0); -o-transform: translate(-50%,-50%) rotate(0); transform: translate(-50%,-50%) rotate(0); } to { -webkit-transform: translate(-50%,-50%) rotate(360deg); -moz-transform: translate(-50%,-50%) rotate(360deg); -ms-transform: translate(-50%,-50%) rotate(360deg); -o-transform: translate(-50%,-50%) rotate(360deg); transform: translate(-50%,-50%) rotate(360deg); } } .scrolldown1 p{ color: #fff; font-size: 14px; font-weight: bold; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); margin-bottom:32px; position: relative; } .scrolldown1 p:before{ display:block; content: ''; position: absolute; left:calc(100% + 5px); top:50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 25px; height: 1px; background: rgba(255, 255, 255, 0.5); } main,.swiperbody { width: 100%; height: 100%; } .swiperbody>.swiper-wrapper>.swiper-slide{ display:flex; align-items: center; width:100%; height:100%; overflow: hidden; } .swiperbody .slide-inner { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-size: cover; background-position: center; } /*product */ .pro_cont{ position:relative; width:100%; height: 100%; } .pro_cont>.warpper{ position: absolute; bottom:16%; left:50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; } .swiper-pro{ width:100%; height:100%; } .swiper-pro .swiper-slide{ width: 100%; height: 100%; position: relative; overflow: hidden; } .swiper-pro .slide-inner { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-size: cover; background-position: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color:#fff; } .pro_top_text{ position: absolute; top:35%; left:50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .pro_top_text>p{ font-size: 2rem; color: #fff; } .pro_top_text>h3{ font-size: 3.2rem; color: #fff; font-weight: bold; margin-top:1.5vw; margin-bottom:1.5vw; } .pro_top_text>small{ color: #fff; font-size: 1.6rem; display:block; width:552px; line-height: 30px; } .pro_top_text>a{ color: #fff; font-size: 1.4rem; display:flex; justify-content: left; align-items: center; height: 50px; margin-top:2vw; } .pro_top_text>a>b{ display:block; width: 36px; height: 36px; border-radius: 50%; margin-right:4px; background:#0068b6 url("../images/morejt.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; } .pro_top_text>a>i{ font-style: initial; -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; } .pro_top_text>a:hover>b{ background:#0068b6 url("../images/morejt.png") no-repeat 14px center; } .pro_top_text>a:hover>i{ font-style: italic; } .swiper-probtn .swiper-slide{ display:flex; justify-content: left; align-items: center; } .swiper-probtn .swiper-slide img{ filter: grayscale(1) brightness(100); margin-right: 20px; } .swiper-probtn .swiper-slide.swiper-slide-thumb-active img{ filter: grayscale(0) brightness(1); background: #fff; border-radius: 50%; } .swiper-probtn .swiper-slide p{ color: #fff; font-size: 1.8rem; min-width:150px; } /*cultrue*/ .cultruebg{ background:url(../images/culbg.jpg) no-repeat center; background-size:cover; } .cultrue .warpper{ position:relative; height:100%; } .cultrue .warpper>img:first-of-type{ position: absolute; left:0; bottom:5%; } .cultrue .warpper>img:nth-of-type(2){ position: absolute; right:0; top:35%; } .circle_curl{ 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%); } .culmore{ display:block; position: absolute; } .cultextbg{ width: 890px; height: 890px; position:relative; } .cultextbg>b{ width: 700px; height: 700px; border:1px solid rgba(255, 255, 255, 0.49); border-radius: 50%; 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%); } .cultextbg>b.line02{ width: 970px; height: 970px; } .cultextbg>img,.cultext{ 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%); } .cultext{ top: 45%; } .cultext>div{ display:none; } .cultext h3{ color: #fff; font-size: 9.2rem; position: relative; left: -123px; line-height: 85px; } .cultext h4{ font-size: 5rem; color: #fff; font-weight: bold; text-transform: capitalize; width: 254px; line-height: 52px; } .cultext p{ font-size: 2rem; color: #fff; margin-top:5px; margin-bottom: 8px; } .cultext small{ font-size: 1.6rem; color: #fff; max-width: 261px; display: block; } .iconcul{ position: absolute; display:flex; justify-content: left; align-items: center; } .iconcul span{ color: #fff; display:block; width: 100px; font-size: 2rem; } .iconcul b{ display:block; width: 105px; height: 105px; -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; } .iconcul:hover b,.iconcul.changebg b{ background: url("../images/missicon.png") no-repeat center!important; background-size:cover; } .iconcul01{ top: 16%; right: -118px; } .iconcul02{ top:50%; left:-189px; } .iconcul03{ right:10%; bottom:10px; } .culmore{ display:block; position: absolute; left:60%; top:60%; border-radius: 50%; width: 120px; height: 120px; } @keyframes scalecir { 0%{ -webkit-transform: translate(-50%,-50%) scale(1.2); -moz-transform: translate(-50%,-50%) scale(1.2); -ms-transform: translate(-50%,-50%) scale(1.2); -o-transform: translate(-50%,-50%) scale(1.2); transform: translate(-50%,-50%) scale(1.2); } 100%{ -webkit-transform: translate(-50%,-50%) scale(0.8); -moz-transform: translate(-50%,-50%) scale(0.8); -ms-transform: translate(-50%,-50%) scale(0.8); -o-transform: translate(-50%,-50%) scale(0.8); transform: translate(-50%,-50%) scale(0.8); } } .culmore:before{ display:block; content: ''; position: absolute; left:50%; top:50%; -webkit-transform: translate(-50%,-50%) scale(1); -moz-transform: translate(-50%,-50%) scale(1); -ms-transform: translate(-50%,-50%) scale(1); -o-transform: translate(-50%,-50%) scale(1); transform: translate(-50%,-50%) scale(1); border-radius: 50%; background: rgba(12, 143, 242, 0.6); width: 100%; height: 100%; animation:scalecir 2s linear 0s infinite alternate; } .culmore:after{ display:block; content: ''; position: absolute; left:50%; top:50%; -webkit-transform: translate(-50%,-50%) scale(0.8); -moz-transform: translate(-50%,-50%) scale(0.8); -ms-transform: translate(-50%,-50%) scale(0.8); -o-transform: translate(-50%,-50%) scale(0.8); transform: translate(-50%,-50%) scale(0.8); background:#0c8ff2; border-radius: 50%; width: 100%; height: 100%; } .culmore>span{ color: #fff; font-size: 4.3rem; 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%); z-index: 10; } /*coop*/ .coopbg{ background:url("../images/coopbg.jpg") no-repeat center; background-size:cover; } .coop>.warpper{ display:flex; justify-content:center; align-items: center; height: 100%; } .coop_cont>h4{ font-size: 3.4rem; color: #3a3a3a; font-weight: bold; } .coop_cont>small{ display:block; color: #505050; font-size: 1.6rem; margin-bottom:2vw; } .coop_list ul li{ float:left; background:#fff; width:19.2%; margin-right:1%; margin-bottom: 1vw; height: 104px; } .coop_list ul li:nth-of-type(5n){ margin-right: 0; } .coop_list ul li img{ width: 80%; margin:0 auto; object-fit: contain; } /*footerbg*/ .footerbg{ background: url("../images/fotbg.jpg") no-repeat center; background-size:cover; } .indexfot{ height: 100%; } .indexfot .footer{ height: 100%; margin-top:7%; } .indexfot .fot_bot{ position: absolute; bottom:0; } .indexfot .footer>.warpper{ margin-bottom: 5%; } /*company*/ .company{ width:100%; height:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .company>div{ height:100%; } .com_video{ float:left; width:50%; background: url("../images/videobg.jpg") no-repeat center; background-size:cover; height: 100%; display:flex; justify-content: center; align-items: center; } .com_video>div{cursor:pointer} .com_video>div>b{ display:block; width: 74px; height: 74px; margin: 0 auto; position:relative; } .com_video>div>b:before{ width: 100%; height: 100%; position:absolute; background: url("../images/turnicon.png") no-repeat center; 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%); content: ''; display:block; animation:rotate360 5s linear 0s infinite normal ; } @keyframes rotate360 { 0%{ -webkit-transform: translate(-50%,-50%) rotate(0); -moz-transform: translate(-50%,-50%) rotate(0); -ms-transform: translate(-50%,-50%) rotate(0); -o-transform: translate(-50%,-50%) rotate(0); transform: translate(-50%,-50%) rotate(0); } 100%{ -webkit-transform: translate(-50%,-50%) rotate(360deg); -moz-transform: translate(-50%,-50%) rotate(360deg); -ms-transform: translate(-50%,-50%) rotate(360deg); -o-transform: translate(-50%,-50%) rotate(360deg); transform: translate(-50%,-50%) rotate(360deg); } } .com_video>div>b img{ width: 100%; height: 100%; object-fit: none; } .com_video>div>p{ font-size: 14px; color: #fff; text-transform: uppercase; margin-top:5px; } .com_left{ float:left; width:44.8%; height:100%; display:flex; justify-content: center; align-items: center; background: url("../images/combg.jpg") no-repeat right center; } .com_left>div{ position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:0 7%; } .com_left>div>small{ position:absolute; right:-89px; top:0; margin-top: 10%; font-size: 30px; color: #c0c0c0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); padding-right:80px; } .com_left>div>small:before{ width: 98px; height: 2px; background: #ddd; display: block; content: ''; position: absolute; left: 65%; bottom: 20px; } .com_left>div>small span{ color: #0068b6; font-weight: bold; } .com_left>div>div>h1{ font-size: 35px; color: #0068b6; font-weight: bold; margin-bottom:1vw; } .com_litter{ display:flex; height: 34px; justify-content: space-between; align-items: center; width: 95%; } .com_litter>h3{ font-size: 1.7rem; color: #484848; font-weight: bold; position:relative; } .com_litter>i{ display:block; width: 2px; height: 16px; background:#ddd; } .com_left>div>div>small{ margin-top: 1vw; font-size: 16px; color: #696969; line-height: 29px; display:block; margin-bottom: 1vw; } .com_left>div>div>a{ font-size: 16px; color: #0068b6; border-bottom: 2px solid #0068b6; } .com_left>div>div>p{ margin-top: 1vw; margin-bottom: 0.6vw; font-size: 24px; color: #484848; } .gupiao{ display:block; width: 100%; height: 400px; } /*news*/ .news{ background:#fff; display:flex; align-items: center; height: 100%; width:100%; position: relative; } .pt{ padding-top: 105px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .newstit{ color: #484848; font-size: 3.2rem; margin-bottom:2vw; } .Circles { position: absolute; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none !important; z-index: 0; } .Circles-circle { display: block; position: absolute; will-change: transform; transition: 1.2s cubic-bezier(0.165, 0.84, 0.44, 1); } .Circles-circle:nth-child(1) { width: 33.7vw; height: 33.7vw; left: -16.8vw; top: -16.8vw; background: #fff; z-index: 2; border-radius: 50%; } .Circles-circle:nth-child(2) { width: 59.68vw; height: 59.58vw; left: -29.84vw; top: -29.84vw; transition: 2s cubic-bezier(0.165, 0.84, 0.44, 1); background: #f6f6f6; border-radius: 50%; } .Circles-dot { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .Circles-dot:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s; will-change: transform; } .news_bom{ position: relative; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-bottom:8vw; z-index: 10; } .news-button{ position:absolute; left:0; bottom:0; display:flex; justify-content: left; } .news-button .swiper-button-next:after,.news-button .swiper-button-prev:after{ display:none; } .news-button .swiper-button-prev{ background:url("../images/newsjt_l.png") no-repeat center; } .news-button .swiper-button-next{ background:url("../images/newsjt_r.png") no-repeat center; } .news-button .swiper-button-next,.news-button .swiper-button-prev{ position:relative; left:initial; right:initial; border:1px solid #ccc; border-radius: 50%; margin-right:15px; width: 60px; height: 60px; 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; } .news-button .swiper-button-next:hover{ border:1px solid #1b88da; background:#1b88da url("../images/newsjt_rs.png") no-repeat center; } .news-button .swiper-button-prev:hover{ border:1px solid #1b88da; background:#1b88da url("../images/newsjt_ls.png") no-repeat center; } .news-button>a{ display:block; border-radius: 50px; border:1px solid #cccccc; text-align: center; font-size: 1.4rem; color: #515151; width: 170px; line-height: 60px; } .news-button>a span{ position:relative; z-index: 2; } .swipernews{ width: 100%; } .swipernews .swiper-slide{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-bottom: 7px; } .swipernews .swiper-slide a{ display: block; width:100%; } .swipernews .swiper-slide a>p{ font-size: 1.6rem; font-weight: bold; line-height: 26px; color: #434343; } .swipernews .swiper-slide a>p>span{ border-radius: 12px; border:1px solid #ccc; font-size: 1.4rem; padding:4px 17px; margin-right:7px; -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; } .swipernews .swiper-slide a:hover>p>span{ color: #0068b6; } .swipernews .swiper-slide a>h4{ margin-top:1.5vw; margin-bottom: 1.5vw; font-size: 2.8rem; color: #434343; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 84px; } .swipernews .swiper-slide a>small{ font-size: 1.4rem; color: #707070; line-height: 26px; margin-bottom:2vw; display:block; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .swipernews .swiper-slide a>span>i{ font-size: 1.4rem; color: #5c5c5c; line-height: 35px; float:left; -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; } .swipernews .swiper-slide a>span>b{ float:left; border-radius: 50%; display:inline-block; width:35px; height: 35px; background:#7d7d7d url("../images/morejt.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; margin-right:5px; } .swipernews .swiper-slide a:hover>span>b{ background: #0068b6 url("../images/morejt.png") no-repeat 13px center; } .news-button>a:hover>span{ color: #fff; }