/* CSS Document */
@charset "UTF-8";
html {
font-family: "寰蒋闆呴粦", "瀹嬩綋", Helvetica Neue, Helvetica, Arial, sans-serif;
}
html,
body {
position: relative;
height: 100%;
line-height: 24px;
font-size: 16px;
color: #202020;
background: #fff;
outline: 0;
}
html,
body,
header,
section,
footer,
div,
ul,
ol,
li,
img,
a,
span,
em,
del,
legend,
center,
strong,
var,
fieldset,
form,
label,
dl,
dt,
dd,
cite,
input,
hr,
time,
mark,
code,
figcaption,
figure,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
border: 0;
padding: 0;
font-style: normal;
box-sizing: border-box;
}
ul,
li {
list-style: none;
}
b,
strong {
font-weight: 700;
}
pre {
overflow: auto;
}
img {
border: 0;
display: block;
margin: 0 auto;
/* position: relative;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; */
}
img:hover {
/* transform: scale(1);
margin-top: -2px;
top: -2px; */
}
em,
i {
font-style: normal;
}
p {
margin-top: 0;
margin-bottom: 0;
}
div {
margin: 0 auto;
}
a {
color: #221815;
text-decoration: none;
background-color: transparent;
}
a:hover {
outline: 0;
color: #221815;
}
area {
outline: none
}
textarea {
overflow: hidden;
resize: none;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
font: inherit;
color: inherit;
}
hr {
height: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
pre {
overflow: auto;
}
button,
.aui-btn {
position: relative;
display: inline-block;
font-size: 14px;
font-weight: 400;
text-decoration: none;
text-align: center;
margin: 0;
background: #e5e5e5;
padding: 0 12px;
height: 30px;
line-height: 30px;
border: 1px solid #bdbdbd;
border-radius: 1px;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
user-select: none;
}
textarea {
width: 100%;
-webkit-appearance: none;
padding: 5px;
margin-bottom: 15px;
line-height: 21px;
-webkit-user-select: text;
background-color: #fff;
border: none;
border-radius: 3px;
outline: none
}
select,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="time"] {
width: 100%;
-webkit-appearance: none;
-webkit-user-select: text;
padding: 0px;
margin-bottom: 0px;
background-color: #fff;
border: none;
border-radius: 0px;
outline: none;
}
input[type="submit"] {
padding: 0px;
margin-bottom: 0px;
border: 0;
border-radius: 0px;
outline: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #969697;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #969697;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #969697;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #969697;
}
.clearfix {
clear: both;
}
.clearfix:before {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.fl {
float: left !important;
}
.fr {
float: right !important;
}
.white,
.white a,
.white a:hover {
color: #fff !important;
}
.w100 {
width: 100%;
margin: 0 auto;
}
.all {
width: 75vw;
min-width: 1200px;
margin: 0 auto;
}
.con {
width: 75%;
min-width: 1200px;
margin: 0 auto;
}
.font16 {
font-size: 16px !important;
}
.font14 {
font-size: 14px !important;
}
.font12 {
font-size: 12px !important;
}
.song {
font-family: "瀹嬩綋";
}
/*鏂囧瓧瀵归綈*/
.text-l {
text-align: left!important;
}
.text-c {
text-align: center!important;
}
.text-j {
text-align: justify!important;
}
.text-r {
text-align: right!important;
}
/*鑷姩闅愯棌鏂囧瓧*/
.ellipsis-1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ellipsis-2 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/**top**/
.txt-swiper {
width: 100%;
height: 100%;
max-height: 930px;
position: relative;
z-index: 2;
}
.txt-swiper h3 {
position: absolute;
left: 0vw;
top: 0vw;
width: 100%;
height: 100%;
}
.slide1 {
/* position: absolute;
left: 50vw;
top: 19vw;
width: 45vw;
margin-left: -22.5vw; */
}
.slide2 {
/* position: absolute;
left: 40vw;
top: 19vw;
width: 45vw; */
}
.slide1 img,
.slide2 img {
width: 100%;
}
.word {
display: block;
perspective: 50vw;
perspective-origin: 0% 30%;
position: relative;
height: 9vw;
}
.letter {
display: inline-block;
position: absolute;
}
.txt-swiper .swiper-button-next,
.txt-swiper .swiper-button-prev {
left: 12.5vw;
right: auto;
top: auto;
bottom: 2vw;
width: 7vw;
height: 4vw;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1vw;
line-height: 3vw;
margin-top: 0;
text-transform: uppercase;
color: #fff;
background: none;
outline: none
}
.txt-swiper .swiper-button-next span,
.txt-swiper .swiper-button-prev span {
font-size: 2vw;
}
.txt-swiper .swiper-button-next {
left: 19.3vw;
}
.path {
fill: none;
stroke: #fff;
stroke-miterlimit: 10;
stroke-width: 1.8px;
transition: opacity 0.3s, fill 0.3s, stroke 0.3s;
}
.txt-swiper .swiper-pagination {
color: #fff;
width: auto;
right: 12vw;
top: 41vw;
/* bottom: 5.6vw; */
font-size: 1.3vw;
color: #b9bac3;
line-height: 1.6vw;
}
.txt-swiper .swiper-slide {
perspective: 50vw;
perspective-origin: 50% 50%;
}
.txt-swiper .swiper-pagination ul {
width: 10.9vw;
}
.txt-swiper .swiper-pagination ul li {
position: absolute;
left: 0;
top: 0;
font-size: 4.5vw;
line-height: 5.5vw;
color: #e9ba85;
text-align: right;
}
.txt-swiper .swiper-pagination .total {
position: absolute;
left: 6vw;
top: 0vw;
}
.img-swiper {
position: absolute;
width: 100%;
height: 1px;
background: #001c43;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
}
.img-swiper .swiper-slide img {
width: 100%;
/* height: 100%;
object-fit: cover; */
}
.ui-loop {
position: absolute;
width: 3.5vw;
height: 3.5vw;
right: 24vw;
bottom: 3.3vw;
z-index: 3;
}
.path-loop {
fill: none;
stroke: #fff;
stroke-miterlimit: 10;
stroke-width: 2px;
}
.path-loop-bg {
fill: none;
stroke: #fff;
stroke-miterlimit: 10;
stroke-width: 2px;
opacity: 0.1;
}
.header {
width: 87.5vw;
height: auto;
position: absolute;
right: 0;
top: 1.2vw;
z-index: 4;
}
.logo {
float: left;
width: 12.5vw;
/* max-width: 240px; */
/* height: 3.33vw; */
/* max-height: 64px; */
}
.logo img {
width: 100%;
}
.menu {
float: right;
padding-right: 2vw;
}
.jianti {
width: 6vw;
height: 3.33vw;
position: relative;
overflow: hidden;
float: left;
}
.jianti div {
width: 100%;
height: 3.33vw;
line-height: 3.33vw;
position: absolute;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.jianti .one {
top: 0;
left: 0;
z-index: 1;
}
.jianti:hover .one {
top: -3.33vw;
left: 0;
}
.jianti .one a {
font-size: 1vw;
color: #fff;
text-decoration: none;
}
.jianti .two {
bottom: -3.33vw;
left: 0;
z-index: 6;
}
.jianti:hover .two {
bottom: 0px;
left: 0;
}
.jianti .two a {
font-size: .8rem;
color: #fff;
text-decoration: none;
}
.menu p {
float: right;
margin-left: 1.5vw;
font-size: 26px !important;
line-height: 3.33vw;
position: relative;
}
.menu p:hover {
color: #fff;
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
@media screen and (max-width:1440px) {
/* .menu {
width: 1200px;
margin-left: -600px;
}
.menu ul {
width: 930px;
}
.menu p {
margin-left: 25px;
} */
}
.footer {
width: 100%;
height: 366px;
background: url(../img/foot.jpg) no-repeat top center #002e59;
overflow: hidden;
position: relative;
}
.footer .all {
width: 75%;
min-width: 1200px;
padding: 35px 0 30px;
}
.flogo {
height: 125px;
border-bottom: 1px solid #dcdcdc;
}
.flogo img {
height: 58px;
}
.footnav {
float: right;
width: 908px;
height: 59px;
line-height: 59px;
}
.footnav li {
float: left;
width: 112px;
height: 60px;
line-height: 59px;
font-size: 16px;
text-align: right;
position: relative;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.footnav li a {
position: absolute;
left: 0;
top: 0;
display: block;
width: 112px;
font-size: 16px;
}
.footnav li a:hover {
transform: scale(1);
margin-top: -2px;
top: -2px;
}
.fadress {
float: left;
width: 976px;
padding: 22px 0 0;
}
.fadress p {
float: left;
width: auto;
padding-right: 100px;
font-size: 18px;
line-height: 36px;
}
.fadress p:nth-of-type(3) {
padding-right: 0px;
}
.fadress p span {
display: inline-table;
font-size: 20px;
line-height: 36px;
padding: 0 5px;
}
.ewm {
width: 210px;
margin-right: 10px;
}
.ewm div {
float: left;
color: #999ba8 !important;
margin-top: 93px;
}
.footer .xia {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 14px;
font-family: songti;
color: #8d98a8;
clear: both;
text-transform: uppercase;
background: #002e59;
position: absolute;
bottom: 0;
left: 0;
}
/**瑙e喅鏂规**/
.solution {
width: 75vw;
min-width: 1200px;
height: auto;
padding-bottom: 100px;
}
.solubox {
float: left;
width: 48.6%;
height: 280px;
padding: 57px 315px 35px 38px;
overflow: hidden;
position: relative;
padding: 0;
}
.solubox:nth-of-type(2n) {
float: right;
}
.solubox:hover {
width: 48.6%;
height: 280px;
transform: scale(1);
margin-top: -2px;
top: -2px;
}
.sobg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 278px;
}
.sobg img {
width: 100%;
height: 100%;
}
.socheng {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 278px;
background: rgba(0, 32, 55, .2);
z-index: 2;
}
/* .solubox strong {
display: block;
font-size: 30px;
line-height: 64px;
font-weight: 500;
}
.solubox span {
display: block;
width: 150px;
height: 2px;
background: rgba(255, 255, 255, .3);
margin: 0 auto 30px 0;
}
.solubox i {
display: block;
margin-left: 0;
width: 75px;
height: 2px;
background: rgba(255, 255, 255, .3);
}
.solubox p {
font-size: 18px;
line-height: 26px;
text-align: justify;
} */
.solubox strong {
position: absolute;
left: 35px;
top: 57px;
width: 350px;
z-index: 3;
display: block;
font-size: 30px;
line-height: 64px;
font-weight: 500;
}
.solubox span {
position: absolute;
left: 35px;
top: 125px;
z-index: 3;
display: block;
width: 150px;
height: 2px;
background: rgba(255, 255, 255, .3);
margin: 0 auto 30px 0;
}
.solubox i {
display: block;
margin-left: 0;
width: 75px;
height: 2px;
background: rgba(255, 255, 255, .3);
}
.solubox p {
position: absolute;
left: 35px;
top: 155px;
width: 350px;
z-index: 3;
font-size: 18px;
line-height: 26px;
text-align: justify;
}