File: /www/wwwroot//www.xxlht.com/sh/163/index_files/index.css
* {
margin: 0;
padding: 0;
list-style: none;
font-family:"Microsoft YaHei";
}
html, body, section {
width: 100%;
/*height: 960px;*/
/*height: 100%;*/
/*min-height: 960px;*/
font-size: 16px;
}
section {
width: 100%;
height: 960px;
/*height: 100%;*/
/*min-height: 960px;*/
font-size: 16px;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix {
clear: both;
}
.back-to-top{
position: fixed;
width: 106px;
height: 106px;
bottom: 20px;
right: 20px;
color: #ffffff;
cursor: pointer;
background: url("../index_files/back-to-top.png");
}
/*p{
animation: pstyle 1.5s ease-in-out infinite alternate;
}*/
section > div {
width: 1100px;
height: 100%;
margin: 0 auto;
}
/*心动的感觉*/
@keyframes beat {
0% {
transform: scale(1);
}
50% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
/*第一屏*/
#pc #p1 {
overflow: hidden;
background: url("../index_files/bj.png") 0 0 no-repeat;
/*background: url("http://img.mp.itc.cn/upload/20160713/abf30a7fa0db4be08e465b73cfb8b2c3_th.jpg") 0 0 no-repeat;*/
background-size: 3022px 100%;
animation: move 20s linear 0s infinite normal;
}
@keyframes move {
0% {
background-position: 0 0;
}
50% {
background-position: -1100px 0;
}
100% {
background-position: 0 0;
}
}
#pc #p1 .titile {
width: 100%;
height: 148px;
line-height: 148px;
}
#pc #p1 .titile .title-left {
float: left;
width: 180px;
}
#pc #p1 .titile .title-left img {
vertical-align: middle;
}
#pc #p1 .titile .title-right {
float: right;
}
#pc #p1 .titile .title-right li {
float: left;
margin-left: 50px;
font-size: 16px;
color: #ffffff;
cursor: pointer;
opacity: 0.8;
}
#pc #p1 .titile .title-right li:hover {
opacity: 1;
}
/*#pc #p1 .titile .title-right li a{
color: #ffffff;
}*/
#pc #p1 .content .content-left {
margin-top: 150px;
}
#pc #p1 .content .content-left p {
line-height: 75px;
font-size: 60px;
color: #ffffff;
/*cursor: pointer;*/
}
/*#pc #p1 .content .content-left p:hover{
cursor: pointer;
animation: pstyle 1.5s ease-in-out infinite alternate;
}*/
#pc #p1 .content .content-left p:nth-of-type(3), #pc #p1 .content .content-left p:nth-of-type(4) {
font-size: 24px;
color: #ffffff;
line-height: 28px;
font-weight: lighter;
}
#pc #p1 .content .content-left .qrcode {
margin-top: 70px;
}
#pc #p1 .content .content-left .qrcode img {
width: 144px;
height: 144px;
}
#pc #p1 .content .content-left .qrcode ul {
margin-left: 20px;
}
#pc #p1 .content .content-left .qrcode ul li span {
z-index: 2;
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url("../index_files/ios02.png") no-repeat 45px 10px;
padding-left: 25px;
box-sizing: border-box;
}
#pc #p1 .content .content-left .qrcode ul li {
position: relative;
width: 200px;
height: 52px;
line-height: 52px;
text-align: center;
border: 1px solid #ffffff;
border-radius: 26px;
margin-top: 10px;
font-size: 20px;
color: #ffffff;
font-weight: lighter;
cursor: pointer;
}
#pc #p1 .content .content-left .qrcode ul li:nth-of-type(2) span {
padding-left: 25px;
box-sizing: border-box;
background: url("../index_files/Android02.png") no-repeat 25px 12px;
}
#pc #p1 .content .content-left .qrcode ul li:nth-of-type(2) span:hover {
color: #09c5AD;
padding-left: 25px;
box-sizing: border-box;
background: url("../index_files/Android01.png") no-repeat 25px 12px;
}
#pc #p1 .content .content-left .qrcode ul li span:hover {
color: #09c5AD;
background: url("../index_files/ios01.png") no-repeat 45px 12px;
}
#pc #p1 .content .content-left .qrcode ul li::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 24px;
z-index: 1;
opacity: 0;
background-color: rgb(255, 255, 255);
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: scale(0.5, 1);
transform: scale(0.5, 1);
}
#pc #p1 .content .content-left .qrcode ul li:hover::before {
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
#pc #p1 .content .content-left .qrcode p {
margin-top: 20px;
font-size: 14px;
color: #ffffff;
line-height: 30px;
font-weight: lighter;
}
#pc #p1 .content .content-right {
position: relative;
right: 0;
}
#pc #p1 .content .content-right img {
position: absolute;
right: -50px;
z-index: 1;
}
#pc #p1 .content .content-right img:nth-of-type(1):hover {
/*z-index: 99;*/
/*animation: neon1 0.5s;*/
/*z-index: 99;*/
}
#pc #p1 .content .content-right img:nth-of-type(2) {
top: 60px;
right: 160px;
}
#pc #p1 .content .content-right img:nth-of-type(3) {
right: 390px;
z-index: 100;
animation: beat 0.7s ease 0s infinite normal;
}
@keyframes neon1 {
0% {
right: -50px;
z-index: 0;
}
50% {
right: -150px;
z-index: 0;
}
100% {
right: -50px;
z-index: 99;
}
}
@-webkit-keyframes pstyle {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #f5f5f5,
0 0 70px #f5f5f5,
0 0 80px #f5f5f5,
0 0 100px #f5f5f5,
0 0 150px #f5f5f5;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #f5f5f5,
0 0 35px #f5f5f5,
0 0 40px #f5f5f5,
0 0 50px #f5f5f5,
0 0 75px #f5f5f5;
}
}
/*第二屏*/
#pc #p2 {
background-color: #f7f7f7;
}
#pc #p2 .content {
height: 100%;
}
#pc #p2 .content .content-left {
width: 474px;
height: 100%;
position: relative;
}
#pc #p2 .content-left .swiper-container {
width: 355px;
position: absolute;
bottom: 29px;
left: 60px;
}
#pc #p2 .content .content-left > img {
position: absolute;
bottom: 0;
}
#pc #p2 .content .content-left > img:nth-of-type(2) {
bottom: 680px;
left: 40px;
animation: beat 0.7s ease 0s infinite normal;
}
#pc #p2 .content .content-right {
width: 626px;
height: 100%;
padding-left: 100px;
box-sizing: border-box;
padding-top: 300px;
}
#pc #p2 .content .content-right p {
line-height: 100px;
font-size: 60px;
color: #333333;
}
#pc #p2 .content .content-right p:nth-of-type(2), #pc #p2 .content .content-right p:nth-of-type(3) {
font-size: 24px;
color: #666666;
line-height: 30px;
font-weight: lighter;
}
#pc #p2 .content .content-right .qrcode {
margin-top: 110px;
}
#pc #p2 .content .content-right .qrcode > img {
width: 144px;
height: 144px;
}
#pc #p2 .content .content-right .qrcode ul {
margin-left: 20px;
}
#pc #p2 .content .content-right .qrcode ul li span {
z-index: 2;
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url("../index_files/ios01.png") no-repeat 45px 10px;
padding-left: 25px;
box-sizing: border-box;
}
#pc #p2 .content .content-right .qrcode ul li {
position: relative;
width: 200px;
height: 52px;
line-height: 52px;
text-align: center;
border: 1px solid #09c5AD;
border-radius: 26px;
margin-top: 10px;
font-size: 20px;
color: #09c5AD;
font-weight: lighter;
cursor: pointer;
}
#pc #p2 .content .content-right .qrcode ul li:nth-of-type(2) span {
padding-left: 25px;
box-sizing: border-box;
background: url("../index_files/Android01.png") no-repeat 25px 12px;
}
#pc #p2 .content .content-right .qrcode ul li:nth-of-type(2) span:hover {
color: #ffffff;
padding-left: 25px;
box-sizing: border-box;
background: url("../index_files/Android02.png") no-repeat 25px 12px;
}
#pc #p2 .content .content-right .qrcode ul li span:hover {
color: #ffffff;
background: url("../index_files/ios02.png") no-repeat 45px 12px;
}
#pc #p2 .content .content-right .qrcode ul li::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 24px;
z-index: 1;
opacity: 0;
background-color: #09c5AD;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: scale(0.5, 1);
transform: scale(0.5, 1);
}
#pc #p2 .content .content-right .qrcode ul li:hover::before {
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
/*
#pc #p2 .content .content-right .qrcode ul li {
width: 200px;
height: 52px;
line-height: 52px;
text-align: center;
border: 1px solid #09c5AD;
border-radius: 26px;
margin-top: 14px;
font-size: 20px;
color: #09c5AD;
font-weight: lighter;
cursor: pointer;
background: url("../index_files/ios01.png") no-repeat 30px 10px;
}
#pc #p2 .content .content-right .qrcode ul li:nth-of-type(2) {
padding-left: 15px;
box-sizing: border-box;
background: url("../index_files/Android01.png") no-repeat 20px 12px;
}
#pc #p2 .content .content-right .qrcode ul li:nth-of-type(2):hover {
color: #ffffff;
padding-left: 15px;
box-sizing: border-box;
background:#09c5AD url("../index_files/Android02.png") no-repeat 20px 12px;
}
#pc #p2 .content .content-right .qrcode ul li:hover {
color: #ffffff;
background:#09c5AD url("../index_files/ios02.png") no-repeat 30px 12px;
}
*/
#pc #p2 .content .content-right .qrcode p {
margin-top: 20px;
font-size: 14px;
color: #666666;
line-height: 30px;
font-weight: lighter;
}
/*第三屏*/
#pc #p3 > div {
padding-top: 80px;
box-sizing: border-box;
}
#pc #p3 > div > p {
text-align: center;
}
#pc #p3 > div > p:nth-of-type(2) {
font-size: 28px;
color: #333333;
margin-top: -20px;
}
#pc #p3 .about-us {
width: 1000px;
height: 520px;
background-color: #f8f8f8;
padding: 30px 45px 30px 30px;
box-sizing: border-box;
font-size: 16px;
margin-top: 80px;
border-radius: 10px;
}
#pc #p3 .about-us h5 {
margin: 20px 0;
}
#pc #p3 .about-us p {
margin-bottom: 20px;
line-height: 24px;
color: #666666;
}
#pc #p3 .about-us p span{
display: inline-block;
width: 5px;
height: 5px;
line-height: 15px;
border-radius: 50%;
background-color: #09c5AD;
margin-right: 5px;
margin-bottom: 3px;
margin-left: 5px;
}
#pc #p3 .about-us p:nth-last-of-type(3),#pc #p3 .about-us p:nth-last-of-type(2),#pc #p3 .about-us p:last-of-type {
width: 450px;
}
#pc #p3 .about-us img {
float: right;
margin-top: -300px;
margin-right: -140px;
}
/*第四屏*/
#pc #p4 {
background-color: #f7f7f7;
}
#pc #p4 > div {
/*width: 1375px;*/
padding-top: 80px;
box-sizing: border-box;
}
#pc #p4 > div > p {
text-align: center;
}
#pc #p4 > div > p:nth-of-type(2) {
font-size: 28px;
color: #333333;
margin-top: -20px;
}
#pc #p4 .employee {
margin-top: 80px;
}
#pc #p4 .employee ul li {
width: 260px;
height: 195px;
margin-right: 15px;
margin-bottom: 15px;
position: relative;
border-radius: 6px;
/*cursor: pointer;*/
}
#pc #p4 .employee ul li img {
border-radius: 6px;
transition: all 0.2s linear;
}
#pc #p4 .employee ul li:hover img {
/*width: 270px;*/
box-shadow: 0px 0px 30px #dcdcdc;
/*margin-left: -5px;*/
margin-top: -2px;
}
#pc #p4 .employee ul li .job {
width: 260px;
height: 40px;
line-height: 40px;
text-align: center;
color: #ffffff;
background-color: #21cab5;
border-radius: 0 0 6px 6px;
opacity: 0;
position: absolute;
bottom: 0;
transition: all 0.2s linear;
}
#pc #p4 .employee ul li:hover .job {
/*width: 270px;*/
/*left: -5px;*/
opacity: 0.9;
bottom: 2px;
}
#pc #p4 .employee ul li .space-job {
width: 260px;
height: 195px;
position: relative;
background-color: #f0f0f0;
color: #cccccc;
text-align: center;
line-height: 195px;
border-radius: 6px;
}
#pc #p4 .employee ul li:hover .space-job {
/*width: 270px;*/
box-shadow: 0px 0px 30px #dcdcdc;
/*margin-left: -5px;*/
margin-top: -2px;
}
#pc #p4 .ourteam{
margin-top: 80px;
position: relative;
}
#pc #p4 .ourteam img:hover{
box-shadow: 0px 0px 30px #dcdcdc;
margin-top: -2px;
}
#pc #p4 .ourteam img:nth-of-type(1){
position: absolute;
left: 0;
top: 0;
}
#pc #p4 .ourteam img:nth-of-type(2){
position: absolute;
right: 0;
top: 0;
}
#pc #p4 .ourteam img:nth-of-type(3){
position: absolute;
right: 0;
top: 213px;
}
#pc #p4 .ourteam img:nth-of-type(4){
position: absolute;
right: 0;
top: 430px;
}
#pc #p4 .ourteam img:nth-of-type(5){
position: absolute;
left: 376px;
top: 430px;
}
#pc #p4 .ourteam img:nth-of-type(6){
position: absolute;
left: 0;
top: 430px;
}
/*第五屏*/
#pc #p5 {
}
#pc #p5 > div {
padding-top: 80px;
box-sizing: border-box;
position: relative;
}
#pc #p5 > div > p {
text-align: center;
}
#pc #p5 > div > p:nth-of-type(2) {
font-size: 28px;
color: #333333;
margin-top: -20px;
}
#pc #p5 .map-contact {
margin-top: 220px;
margin-left: 100px;
background-color: #f8f8f8;
width: 1000px;
height: 380px;
border-radius: 10px;
padding-top: 50px;
}
#pc #p5 .map-contact iframe {
margin-top: -150px;
margin-left: -100px;
box-shadow: 0px 0px 30px #cccccc;
}
#pc #p5 .map-contact p {
margin-left: 590px;
font-size: 18px;
line-height: 2em;
color: #666666;
}
#pc #p5 .map-contact p:nth-of-type(1) {
margin-top: 60px;
}
#pc #p5 .copy-right {
width: 100%;
height: 50px;
line-height: 50px;
position: absolute;
bottom: 0;
text-align: center;
font-size: 14px;
color: #999999;
}