@import "../font/iconfont.css";
html {
font-family: "Microsoft YaHei", sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
overflow-x: hidden;
font-size: 100px;
}
body {
margin: 0;
overflow-x: hidden;
font-size: 16px;
}
@media (max-width: 1200px) {
body {
font-size: 14px;
}
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
object {
pointer-events: none;
}
a {
color: inherit;
text-decoration: none;
}
p,
h1,
h2,
h3,
h4,
h5 {
margin: 0;
}
a:active,
a:hover {
outline: 0;
}
a:active .oppress img,
a:hover .oppress img {
transform: scale(1.1);
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
button,
input,
optgroup,
select,
textarea {
display: block;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
margin: 0;
font: inherit;
color: inherit;
padding: 0;
border: 0;
outline: 0;
background-color: transparent;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
textarea {
overflow: auto;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td,
th {
padding: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
.t-center {
text-align: center;
}
.col {
margin-right: -18px;
margin-bottom: -18px;
}
@media (max-width: 768px) {
.col {
margin-right: -10px;
margin-bottom: -10px;
}
}
.col .col-content {
margin-right: 18px;
margin-bottom: 18px;
}
@media (max-width: 768px) {
.col .col-content {
margin-right: 10px;
margin-bottom: 10px;
}
}
.col-2 .col-item {
width: 50%;
}
.col-3 .col-item {
width: 33.3333%;
}
.col-4 .col-item {
width: 25%;
}
@media (max-width: 1000px) {
.col-4 .col-item {
width: 33.3333%;
}
}
@media (max-width: 768px) {
.col-4 .col-item {
width: 50%;
}
}
@media (max-width: 500px) {
.col-4 .col-item {
width: 100%;
}
}
.clearTransition {
-webkit-transition: all 0s;
-moz-transition: all 0s;
-o-transition: all 0s;
transition: all 0s;
}
.transition1 {
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.transition2 {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.transition4 {
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.transition6 {
-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
transition: all 0.6s linear;
}
.text-over,
.text-more-over,
.text-more-over4,
.text-more-over3 {
overflow: hidden;
text-overflow: ellipsis;
}
.text-over {
white-space: nowrap;
}
.text-more-over {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.text-more-over3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.text-more-over4 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.top-item,
.bottom-item,
.middle-item {
display: inline-block;
}
.middle-item {
vertical-align: middle;
}
.top-item {
vertical-align: top;
}
.bottom-item {
vertical-align: bottom;
}
.not-float,
.clear-middle {
width: auto;
}
.contain-img,
.cover-img,
.containImg,
.coverImg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: scroll;
}
.contain-img,
.containImg {
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.cover-img,
.coverImg {
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.full {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.full.left {
right: auto;
}
.full.right {
left: auto;
}
.full.top {
bottom: auto;
}
.full.bottom {
top: auto;
}
.tab-content .item,
.none {
display: none;
}
a,
.clear-middle,
.clear:after,
.tab-content .item.active,
.square:after,
.pos-cont:after,
.top50,
.block-cont:after,
.block {
display: block;
}
.fade {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
a,
.fade,
.touch .default {
transition: all 0.4s ease;
}
.fade-active,
.touch.on .fade,
.touch.swiper-slide-active .fade,
.touch:hover .fade {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.fade-enter-to,
.fade-leave,
.fade-on {
visibility: visible;
opacity: 1;
pointer-events: unset;
}
.cc {
-webkit-border-radius: 960px;
-moz-border-radius: 960px;
border-radius: 960px;
}
.square:after {
padding-top: 100%;
}
.pull-back {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.pos-center,
.top50 {
top: 50%;
}
.top50,
.pos-center {
position: absolute;
}
@media (max-width: 1280px) {
.hide-mob {
display: none;
}
}
@media (min-width: 1280px) {
.hide-pc {
display: none;
}
}
.fade-masking {
background-image: -webkit-linear-gradient(bottom, #000, transparent);
background-image: -moz-linear-gradient(bottom, #000, transparent);
background-image: -ms-linear-gradient(bottom, #000, transparent);
background-image: -o-linear-gradient(bottom, #000, transparent);
background-image: linear-gradient(bottom, #000, transparent);
}
@keyframes appear-show {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes appear-hide {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(2);
}
}
@keyframes sport-right {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
@keyframes sport-reset {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes sport-default {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
.interaction.active > .default,
.interaction.swiper-slide-active > .default,
.interaction:hover > .default {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: all 0.4s ease;
}
.interaction.active > .fade,
.interaction.swiper-slide-active > .fade,
.interaction:hover > .fade {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
#fade-panel {
display: none;
position: fixed;
z-index: 2100;
}
#fade-panel .close {
position: absolute;
left: 50%;
top: 100%;
margin: 16px 0 0 -16px;
width: 32px;
height: 32px;
opacity: 0.4;
cursor: pointer;
}
#fade-panel .close:hover {
opacity: 1;
}
#fade-panel .close:after,
#fade-panel .close:before {
position: absolute;
content: "";
top: 50%;
left: 0;
right: 0;
height: 1px;
margin-top: -0.5px;
background-color: #fff;
}
#fade-panel .close:before {
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
#fade-panel .close:after {
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
#panel-bg {
background-color: rgba(0, 0, 0, 0.8);
z-index: 1;
}
#panel-content {
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
-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: 90%;
max-width: 852px;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
#panel-content.video {
height: 80%;
}
#panel-content.video > .video {
display: block;
}
#panel-content.iframe > .iframe {
width: 100%;
height: 100%;
overflow: hidden;
border: 0 none;
display: block;
}
#panel-content.iframe:after {
width: 100%;
padding-top: 64%;
}
#panel-content.img {
height: 80%;
}
#panel-content.img > .img {
display: block;
}
#panel-content > .video-box {
max-width: 100%;
max-height: 100%;
display: none;
}
.box-3d {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.spacing,
.spacing-top {
padding-top: 1rem;
}
@media (max-width: 1000px) {
.spacing,
.spacing-top {
padding-top: 50px;
}
}
.spacing,
.spacing-bottom {
padding-bottom: 1rem;
}
@media (max-width: 1000px) {
.spacing,
.spacing-bottom {
padding-bottom: 50px;
}
}
.body-container {
padding-left: 1.2rem;
padding-right: 1.2rem;
}
.hoz-container {
padding-top: 0.6rem;
padding-bottom: 0.6rem;
}
@media (max-width: 768px) {
.hoz-container {
padding-top: 20px;
padding-bottom: 20px;
}
}
.row-container {
padding-left: 0.6rem;
padding-right: 0.6rem;
}
@media (max-width: 768px) {
.row-container {
padding-left: 20px;
padding-right: 20px;
}
}
.edit-content {
line-height: 1.8;
}
.edit-content img {
height: auto !important;
}
.load-more-state {
text-align: center;
opacity: 0.7;
padding-top: 30px;
margin-top: 0.2rem;
}
.load-more-state > .state.loading,
.load-more-state > .state.end {
display: none;
}
.load-more-state > .state > .iconfont {
font-size: 150%;
opacity: 0.5;
display: inline-block;
}
.load-more-state > .state.loading > .iconfont {
animation: xuanzhuan 2s ease-out infinite;
}
@keyframes xuanzhuan {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}
.load-more-state.loading > .state.default,
.load-more-state.loading > .state.end {
display: none;
}
.load-more-state.loading > .state.loading {
display: block;
}
.load-more-state.end > .state.default,
.load-more-state.end > .state.loading {
display: none;
}
.load-more-state.end > .state.end {
display: block;
}
.load-more-state.active {
background-color: #006a8f;
color: #fff;
}
.adpat-text {
font-size: 20px;
}
@media (max-width: 1500px) {
.adpat-text {
font-size: 18px;
}
}
@media (max-width: 1200px) {
.adpat-text {
font-size: 16px;
}
}
.text-node {
font-size: 16px;
line-height: 1.8;
opacity: 0.7;
}
@media (max-width: 1440px) {
.text-node {
line-height: 1.6;
font-size: 14px;
}
}
.text-node * {
font-size: inherit !important;
line-height: inherit !important;
}
.object-cover {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.oppress {
overflow: hidden;
}
.oppress img,
.oppress .cover-img,
.oppress .contain-img,
.oppress .img {
transition: all 2s linear;
}
.oppress:hover img,
.oppress:hover .cover-img,
.oppress:hover .contain-img,
.oppress:hover .img {
transform: scale(1.1);
}
.f10 {
font-size: 10px;
}
.f12 {
font-size: 12px;
}
.f14 {
font-size: 14px;
}
.f18 {
font-size: 18px;
}
.f20 {
font-size: 20px;
}
.f22 {
font-size: 22px;
}
.f24 {
font-size: 24px;
}
.f26 {
font-size: 26px;
}
.f30 {
font-size: 30px;
}
.f32 {
font-size: 32px;
}
.f36 {
font-size: 36px;
}
.f40 {
font-size: 40px;
}
.f45 {
font-size: 45px;
}
.bold {
font-weight: bold;
}
.pa,
.pt {
padding-top: 1rem;
}
@media (max-width: 1080px) {
.pa,
.pt {
padding-top: 50px;
}
}
.pt,
.pb {
padding-bottom: 1rem;
}
@media (max-width: 1080px) {
.pt,
.pb {
padding-bottom: 50px;
}
}
[class^="flex"],
[class*=" flex"] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.flex-start {
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.flex-end {
-webkit-box-align: end;
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
.flex-balance,
.flex-between {
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.flex-gather,
.flex-center {
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.flex-balance,
.flex-gather,
.flex-middle {
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.flex-wrap {
-webkit-box-wrap: wrap;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-around {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.flex-column {
-webkit-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.colfff {
color: #fff;
}
.maincolor {
color: #006a8f;
}
.maincolor2 {
color: #fa8e22;
}
.op5 {
opacity: 0.5;
}
.op7 {
opacity: 0.7;
}
.op8 {
opacity: 0.8;
}
/* SELECT - Normal State */
.select-box select {
width: 100%;
height: 100%;
padding: 0;
cursor: pointer;
border: 0;
outline: 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: transparent;
padding: 0 44px;
}
@media (max-width: 1000px) {
.select-box select {
padding: 0 20px;
}
}
/* SELECT - Disabled */
.select-box select:disabled {
pointer-events: none;
opacity: 0.5;
}
#aside {
position: fixed;
text-align: center;
z-index: 20;
padding: 0;
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
overflow: visible;
left: 0.75em;
}
#aside .item + .item {
margin-top: 0.75em;
}
#aside .item .cc {
width: 2.625em;
height: 2.625em;
border-radius: 50%;
background-color: #fff;
color: 838383;
transition: all 0.4s ease-out;
box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.15);
}
#aside .item .cc .icon {
font-size: 1.5em;
}
#aside .item .fade {
position: absolute;
left: 100%;
padding-left: 0.5em;
margin-left: -8px;
top: 50%;
transform: translateY(-50%);
}
#aside .item .content {
background-color: #006a8f;
border-radius: 6px;
padding: 16px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
#aside .item .content .char {
color: #fff;
white-space: nowrap;
font-size: 1.25em;
line-height: 1;
font-weight: bold;
}
#aside .item .content img {
width: 120px;
height: 120px;
object-fit: contain;
max-width: unset;
}
#aside .item.active .cc,
#aside .item:hover .cc {
background-color: #006a8f;
color: #fff;
}
#aside .item.active .fade,
#aside .item:hover .fade {
margin-left: 0;
}
@media (max-width: 800px) {
#aside {
bottom: 60px;
}
#aside .fade {
display: none;
}
}
@media (min-width: 801px) {
#aside {
bottom: 20px;
}
#aside .fill {
display: none;
}
}
.more {
cursor: pointer;
position: relative;
padding: 0 22px;
width: 144px;
height: 40px;
color: #006a8f;
border-width: 1px;
border-color: #006a8f;
border-style: solid;
box-sizing: border-box;
border-radius: 20px;
}
.more:hover {
color: #fff;
background-color: #006a8f;
}
.more.spe-more {
color: #006a8f;
}
.more.spe-more .icon-box {
transform: rotate(45deg);
margin-right: 1em;
}
.more.spe-more:hover .icon-box {
transform: rotate(0);
margin-right: 0.5em;
}
.more.active-more {
border-bottom: 1px solid #006a8f;
}
.more.active-more span {
color: #006a8f;
}
.more.active-more .icon-box {
color: #fff;
background-color: #006a8f;
margin-left: 0.5em;
}
.more.active-more:hover .icon-box {
transform: rotate(-45deg);
margin-left: 1em;
}
.more.gray-more {
border-color: rgba(0, 0, 0, 0.3);
color: rgba(0, 0, 0, 0.6);
}
.more.gray-more:hover {
color: #fff;
background-color: #006a8f;
border-color: #006a8f;
}
.more.spe-long {
width: auto;
height: auto;
display: inline-block;
padding: 8px 25px;
}
.more.spe-long .char {
margin-right: 0.5em;
}
.more.white-more {
color: #000;
background-color: #fff;
width: 132px;
height: 46px;
}
.more.white-more > span {
margin-right: 0.4em;
font-size: 14px;
}
.more.white-more .icon {
font-size: 18px;
}
.more.white-more:hover {
background-color: #006a8f;
color: #fff;
}
@media (max-width: 1080px) {
.more .icon {
font-size: 18px;
}
}
@media (max-width: 800px) {
.more > span {
margin-right: 0.2em;
}
.more .icon {
font-size: 16px;
}
.more:hover {
padding-left: 15px;
}
.more:hover::after {
width: 90px;
}
}
.go .char {
position: relative;
opacity: 0.9;
margin-left: 0.5em;
}
.go .char::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 1px;
background-color: rgba(0, 0, 0, 0.9);
}
.go .icon-box {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #fa8e22;
color: #fff;
transition: all 0.4s ease;
}
.go .icon-box img {
width: 15px;
}
.go:hover .icon-box {
transform: rotate(45deg);
margin-left: 0.3em;
}
.go.spe-go .icon-box {
transform: rotate(45deg);
margin-left: 0;
}
.go.spe-go:hover .icon-box {
transform: rotate(0);
margin-left: 0.3em;
}
.go.spe-go2 {
color: #000;
border: 1px solid rgba(0, 0, 0, 0.5);
}
@media (max-width: 800px) {
.go .icon-box {
width: 40px;
height: 40px;
}
}
.same-circle i {
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #000;
animation: glimmer 3s linear infinite;
}
@keyframes glimmer {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.same-circle i:nth-of-type(2) {
background-color: rgba(0, 0, 0, 0.5);
margin: 0 3px;
animation-delay: 0.2s;
}
.same-circle i:nth-of-type(3) {
background-color: rgba(0, 0, 0, 0.3);
animation-delay: 0.4s;
}
.same-circle.color-circle i {
background-color: #006a8f;
}
.same-circle.color-circle i:nth-of-type(2) {
background-color: rgba(0, 106, 143, 0.5);
}
.same-circle.color-circle i:nth-of-type(3) {
background-color: rgba(0, 106, 143, 0.3);
}
.datum .item {
position: relative;
cursor: pointer;
transition: all 0.3s ease-out;
}
.datum .item .top {
opacity: 0.7;
}
.datum .item:hover .top {
opacity: 1;
color: #006a8f;
}
.datum .item:hover .data-rolling {
transition: color 0.3s ease-out !important;
}
.datum .icon {
margin-right: 0.5em;
}
.datum .enb {
line-height: 1;
height: 1em;
overflow: hidden;
position: relative;
font-size: 40px;
text-align: center;
}
.datum .enb::before {
content: attr(data-unit);
font-size: 16px;
font-weight: bold;
position: absolute;
right: 0;
bottom: 10px;
font-family: "Microsoft YaHei", sans-serif;
}
.datum .enb::after {
content: attr(data-content);
position: absolute;
top: 40%;
right: 0;
transform: translateY(-50%);
font-size: 36px;
font-family: 'adineueBold', sans-serif;
}
.datum.spe-datum .item {
margin-bottom: 50px;
}
.datum.spe-datum .item:first-child .enb {
width: fit-content;
}
.datum.spe-datum .item .icon {
font-size: 36px;
opacity: 0.5;
}
.datum.spe-datum .item .enb::before {
left: auto;
right: 0;
}
.datum.spe-datum .item .info {
margin-left: 35px;
}
.datum.spe-datum .item .info .text {
opacity: 0.7;
}
.datum.spe-datum .item:hover .icon {
opacity: 1;
color: #006a8f;
}
.datum.spe-datum .item:hover .info .text {
opacity: 1;
}
@media (min-width: 801px) {
.datum .enb {
width: fit-content;
}
}
@media (max-width: 800px) {
.datum {
margin-top: 50px;
flex-wrap: wrap;
justify-content: space-between;
}
.datum .item {
margin-bottom: 30px;
}
.datum .enb {
font-size: 40px;
}
.datum .enb::before {
font-size: 12px;
}
.datum .enb::after {
font-size: 16px;
}
.datum.spe-datum {
padding-left: 14%;
}
.datum.spe-datum .item {
margin-bottom: 30px;
}
.datum.spe-datum .item:nth-of-type(2) .enb::before {
right: 80px;
}
.datum.spe-datum .item:nth-of-type(4) .enb::before {
right: 50px;
}
.datum.spe-datum .item .icon {
font-size: 26px;
}
.datum.spe-datum .item .info {
margin-left: 25px;
}
}
@media (max-width: 1480px) {
.f30 {
font-size: 26px;
}
.f36 {
font-size: 34px;
}
}
@media (max-width: 1380px) {
.f30 {
font-size: 24px;
}
.f36 {
font-size: 30px;
}
}
@media (max-width: 1280px) {
.f24 {
font-size: 20px;
}
}
@media (max-width: 1024px) {
.f14 {
font-size: 12px;
}
.f18 {
font-size: 16px;
}
.f20 {
font-size: 18px;
}
.f22 {
font-size: 18px;
}
.f26 {
font-size: 20px;
}
.f30 {
font-size: 22px;
}
.f32 {
font-size: 26px;
}
.f36 {
font-size: 25px;
}
.f40 {
font-size: 29px;
}
.f45 {
font-size: 30px;
}
.dot .box img {
width: 160px;
}
}
ul.pagination {
text-align: center;
padding-top: 20px;
margin-top: 0.3rem;
padding-left: 0;
font-size: 0;
color: #a7a7a7;
}
ul.pagination li {
display: inline-block;
vertical-align: middle;
margin: 0 5px;
position: relative;
overflow: hidden;
line-height: 3.125em;
font-size: 14px;
width: 3.125em;
height: 3.125em;
font-family: 'mont', sans-serif;
transition: all 0.4s ease;
border-radius: 50%;
}
ul.pagination li a {
transition: none;
}
ul.pagination li span {
display: block;
}
ul.pagination li a,
ul.pagination li span {
font-size: 0.9em;
position: relative;
z-index: 2;
}
ul.pagination li:hover,
ul.pagination li.active {
color: #fff;
background-color: #006a8f;
}
ul.pagination li:last-child,
ul.pagination li:first-child {
text-decoration: unset;
background-color: #fff;
border: 2px solid #ddd;
box-sizing: border-box;
width: 3.125em;
height: 3.125em;
}
ul.pagination li:last-child > span,
ul.pagination li:first-child > span {
display: block;
}
ul.pagination li:last-child > a,
ul.pagination li:first-child > a,
ul.pagination li:last-child > span,
ul.pagination li:first-child > span {
overflow: hidden;
text-indent: -100px;
font-size: 0.9em;
font-family: "icon";
}
ul.pagination li:last-child > a:after,
ul.pagination li:first-child > a:after,
ul.pagination li:last-child > span:after,
ul.pagination li:first-child > span:after {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-indent: 0;
}
ul.pagination li:last-child:hover,
ul.pagination li:first-child:hover {
color: #006a8f;
border-color: #006a8f;
}
ul.pagination li:last-child {
margin-left: 0.24rem;
margin-right: 0;
}
ul.pagination li:last-child > a:after,
ul.pagination li:last-child > span:after {
content: "\e85c";
}
ul.pagination li:first-child {
margin-right: 0.24rem;
margin-left: 0;
}
ul.pagination li:first-child > a:after,
ul.pagination li:first-child > span:after {
content: "\e85e";
}
ul.pagination li.disabled {
pointer-events: none;
}
@media (max-width: 1680px) {
ul.pagination li {
font-size: 18px;
}
}
@media (max-width: 1440px) {
ul.pagination li {
font-size: 16px;
}
}
@media (max-width: 1280px) {
ul.pagination li {
font-size: 14px;
}
}
body > .fill {
overflow: hidden;
padding-left: 20px;
padding-right: 20px;
}
img {
border: 0;
max-width: 100%;
vertical-align: middle;
}
@media (max-width: 768px) {
.logo {
max-width: 5.5em;
min-width: 130px;
}
}
.main {
max-width: 1600px;
margin: 0 auto;
}
.main.spe-main {
max-width: 1440px;
}
@media (max-width: 1680px) {
.main {
max-width: 1500px;
}
}
@media (max-width: 1580px) {
.main {
max-width: 1400px;
}
}
@media (max-width: 1480px) {
.main {
max-width: 1300px;
}
.main.spe-main {
max-width: 1300px;
}
}
@media (max-width: 1380px) {
.main {
max-width: 1200px;
}
.main.spe-main {
max-width: 1200px;
}
}
@media (max-width: 1280px) {
.main {
max-width: 1000px;
}
.main.spe-main {
max-width: 1000px;
}
}
@media (max-width: 1080px) {
.main {
max-width: 100%;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
.main.spe-main {
max-width: 100%;
}
}
.swiper-change .swiper-timing {
height: auto !important;
}
.swiper-change .swiper-timing > .real {
width: 2em;
height: 2em;
line-height: 2em;
cursor: pointer;
opacity: 1;
background-color: transparent !important;
margin: 0 10px;
}
.swiper-change .swiper-timing > .real > svg {
display: block;
width: 100%;
}
.swiper-change .swiper-timing > .real > svg > .cls-1 {
fill: none;
stroke: #fff;
stroke-width: 2px;
stroke-dasharray: 0, 125.6;
}
.swiper-change .swiper-timing > .real > svg > .cls-2 {
fill: rgba(255, 255, 255, 0.2);
}
.swiper-change .swiper-timing > .real.swiper-pagination-bullet-active {
width: 2em;
height: 2em;
line-height: 2em;
}
.swiper-change .swiper-timing > .real.swiper-pagination-bullet-active > svg > .cls-1 {
animation: banner-animation 9s linear infinite;
}
@keyframes banner-animation {
0% {
stroke-dasharray: 0, 125.6;
}
100% {
stroke-dasharray: 125.6, 0;
}
}
.swiper-change .swiper-timing > .real.swiper-pagination-bullet-active > svg > .cls-2 {
fill: #fff;
}
.swiper-change .swiper-timing.web > .real {
margin: 0 10px;
}
.swiper-change .swiper-timing.web > .real > svg > .cls-1 {
stroke: #006a8f;
}
.swiper-change .swiper-timing.web > .real > svg > .cls-2 {
fill: #006a8f;
}
.swiper-change .swiper-timing.web > .real:not(.swiper-pagination-bullet-active) > svg > .cls-2 {
fill: #7f7f7f;
}
.rang-box {
width: 7em;
}
.rang-box label {
color: #454545;
}
.rang-box label .char,
.rang-box label input {
transition: all 0.4s ease-out;
}
.rang-box label .char {
font-size: 12px;
}
.rang-box label .input {
width: 2.5em;
height: 1.5em;
}
.rang-box label .input input {
text-align: center;
width: 100%;
height: 100%;
box-sizing: border-box;
border-bottom: 1px solid #c6c6c6;
background-color: #f7f7f7;
transition: all 0.4s ease;
font-size: 0.875em;
}
.rang-box dd {
margin: 0.75em 0 0;
height: 0.75em;
position: relative;
}
.rang-box dd .handle,
.rang-box dd .capacity,
.rang-box dd .occupy {
position: absolute;
}
.rang-box dd .capacity,
.rang-box dd .occupy {
left: 0;
right: 0;
top: 50%;
height: 2px;
margin-top: -1px;
}
.rang-box dd .occupy,
.rang-box dd .handle {
background-color: #797979;
transition: background-color 0.2s ease-out, margin 0.1s ease-out;
}
.rang-box dd .capacity {
background-color: #cccccc;
z-index: 1;
}
.rang-box dd .occupy {
background-color: #797979;
z-index: 2;
}
.rang-box dd .handle {
top: 0;
z-index: 3;
left: -0.375em;
width: 0.75em;
height: 0.75em;
border-radius: 0.75em;
cursor: grab;
}
.rang-box dd .handle:after {
content: "";
display: block;
position: absolute;
left: -0.5em;
top: -0.5em;
right: -0.5em;
bottom: -0.5em;
}
.rang-box.handle-left .occupy,
.rang-box.handle-right .occupy,
.rang-box.handle-left .handle.left,
.rang-box.handle-right .handle.right {
background-color: #006a8f;
}
.rang-box.handle-left label:first-child .char,
.rang-box.handle-right label:last-child .char {
color: #006a8f;
}
.rang-box.handle-left label:first-child input,
.rang-box.handle-right label:last-child input {
border-color: #006a8f;
}
body.handle-min,
body.handle-max,
body.handle-min .rang-box .handle,
body.handle-max .rang-box .handle {
cursor: grabbing;
}
body.handle-min .rang-box.active .occupy,
body.handle-min .rang-box.active .handle.left {
background-color: #006a8f;
}
body.handle-max .rang-box.active .occupy,
body.handle-max .rang-box.active .handle.right {
background-color: #006a8f;
}
@keyframes circle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.share .item {
margin-right: 15px;
}
.share .item .cc {
width: 2.625em;
height: 2.625em;
border-radius: 50%;
transition: all 0.4s ease-out;
background-color: rgba(115, 115, 115, 0.3);
}
.share .item .cc .icon {
font-size: 1em;
opacity: 0.8;
}
.share .item.active .cc,
.share .item:hover .cc {
background-color: #006a8f;
color: #fff;
}
.share .item.active .cc .icon,
.share .item:hover .cc .icon {
opacity: 1;
}
.swiper-change .btn {
opacity: 1;
cursor: pointer;
color: rgba(0, 0, 0, 0.6);
}
.swiper-change .btn:after {
font-size: 16px;
}
.swiper-change .btn:hover {
color: #006a8f;
}
.swiper-change .swiper-pagination.num-pagination {
max-width: 100%;
bottom: auto;
left: auto;
right: auto;
top: 62%;
transform: translate(0, -50%);
color: #006a8f;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.swiper-change .swiper-pagination.num-pagination .swiper-pagination-total {
font-size: 20px;
font-family: "mont", sans-serif;
width: 30%;
}
.swiper-change .swiper-pagination.num-pagination .swiper-pagination-current {
font-size: 48px;
font-family: "MontBold", sans-serif;
width: 27%;
}
.swiper-change.spe-change .btn {
color: #fff;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 18px;
overflow: hidden;
border-width: 1px;
border-color: rgba(255, 255, 255, 0.9);
border-style: solid;
border-radius: 50%;
}
.swiper-change.spe-change .btn:after {
display: none;
}
@media (max-width: 768px) {
.swiper-change.spe-change .btn {
width: 40px;
height: 40px;
line-height: 40px;
}
}
.swiper-change.spe-change .btn:hover {
color: #006a8f;
border-color: rgba(255, 255, 255, 0.7);
background-color: rgba(255, 255, 255, 0.7);
}
.swiper-change.spe-change.shadow .btn {
color: #006a8f;
background-color: #ffffff;
box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.1);
opacity: 1;
}
.swiper-change.spe-change.shadow .btn:hover {
color: #fff;
background-color: #006a8f;
}
.swiper-change.spe-change.shadow .swiper-pagination .swiper-pagination-bullet {
background-color: rgba(0, 0, 0, 0.15);
}
.swiper-change.spe-change.shadow .swiper-pagination .swiper-pagination-bullet-active {
background-color: #ff006f;
}
.swiper-change.spe-change.gray .btn {
color: rgba(0, 0, 0, 0.7);
background-color: #ffffff;
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15);
}
.swiper-change.spe-change.gray .btn:hover {
color: #fff;
border-color: #006a8f;
background-color: #006a8f;
}
.swiper-change.spe-change.gray .swiper-pagination .swiper-pagination-bullet {
background-color: rgba(0, 0, 0, 0.15);
}
.swiper-change.spe-change.gray .swiper-pagination .swiper-pagination-bullet-active {
background-color: #006a8f;
}
.swiper-change.spe-change.gray .swiper-pagination.gray .swiper-pagination-bullet-active {
background-color: #303233;
}
.swiper-change.spe-change .swiper-pagination .swiper-pagination-bullet {
background-color: rgba(255, 255, 255, 0.8);
margin: 0 8px;
opacity: 1;
width: 10px;
height: 5px;
border-radius: 2.5px;
transition: all 0.5s ease;
}
.swiper-change.spe-change .swiper-pagination .swiper-pagination-bullet-active {
width: 34px;
height: 5px;
background-color: #006a8f;
}
.swiper-change.spe-change2 .btn {
width: 44px;
height: 44px;
line-height: 44px;
color: rgba(0, 0, 0, 0.3);
border-color: rgba(0, 0, 0, 0.3);
opacity: 1;
}
.swiper-change.spe-change2 .btn:hover {
color: #fff;
border-color: #006a8f;
background-color: #006a8f;
}
.swiper-change.spe-change3 .btn.swiper-button-prev {
left: 15%;
top: 40%;
transform: rotate(90deg);
}
.swiper-change.spe-change3 .btn.swiper-button-next {
left: 15%;
right: auto;
transform: rotate(90deg);
top: 65%;
}
.scroll-down {
text-align: center;
cursor: pointer;
}
.scroll-down .mouse {
width: 26px;
height: 37px;
background: #000 linear-gradient(transparent 0%, transparent 50%, #ffffff 50%, #ffffff 100%);
border-radius: 100px;
background-size: 100% 200%;
-webkit-animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
margin: 0 auto 10px;
position: relative;
overflow: hidden;
}
.scroll-down .mouse::before,
.scroll-down .mouse::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.scroll-down .mouse::before {
width: 24px;
height: 35px;
background-color: #000;
border-radius: 100px;
}
.scroll-down .mouse::after {
background-color: #fff;
width: 2px;
height: 4px;
-webkit-animation: trackBallSlide 5s linear infinite;
animation: trackBallSlide 5s linear infinite;
}
.scroll-down .icon {
-webkit-animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite;
animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite;
}
@keyframes colorSlide {
0% {
background-position: 0% 100%;
}
20% {
background-position: 0% 0%;
}
21% {
background-color: #4e5559;
}
29.99% {
background-color: #ffffff;
background-position: 0% 0%;
}
30% {
background-color: #4e5559;
background-position: 0% 100%;
}
50% {
background-position: 0% 0%;
}
51% {
background-color: #4e5559;
}
59% {
background-color: #ffffff;
background-position: 0% 0%;
}
60% {
background-color: #4e5559;
background-position: 0% 100%;
}
80% {
background-position: 0% 0%;
}
81% {
background-color: #4e5559;
}
90%,
100% {
background-color: #ffffff;
}
}
@keyframes trackBallSlide {
0% {
opacity: 1;
-webkit-transform: scale(1) translateY(-10px);
transform: scale(1) translateY(-10px);
}
6% {
opacity: 1;
-webkit-transform: scale(0.9) translateY(5px);
transform: scale(0.9) translateY(5px);
}
14% {
opacity: 0;
-webkit-transform: scale(0.4) translateY(20px);
transform: scale(0.4) translateY(20px);
}
15%,
19% {
opacity: 0;
-webkit-transform: scale(0.4) translateY(-10px);
transform: scale(0.4) translateY(-10px);
}
28%,
29.99% {
opacity: 1;
-webkit-transform: scale(1) translateY(-10px);
transform: scale(1) translateY(-10px);
}
30% {
opacity: 1;
-webkit-transform: scale(1) translateY(-10px);
transform: scale(1) translateY(-10px);
}
36% {
opacity: 1;
-webkit-transform: scale(0.9) translateY(5px);
transform: scale(0.9) translateY(5px);
}
44% {
opacity: 0;
-webkit-transform: scale(0.4) translateY(20px);
transform: scale(0.4) translateY(20px);
}
45%,
49% {
opacity: 0;
-webkit-transform: scale(0.4) translateY(-10px);
transform: scale(0.4) translateY(-10px);
}
58%,
59.99% {
opacity: 1;
-webkit-transform: scale(1) translateY(-10px);
transform: scale(1) translateY(-10px);
}
60% {
opacity: 1;
-webkit-transform: scale(1) translateY(-10px);
transform: scale(1) translateY(-10px);
}
66% {
opacity: 1;
-webkit-transform: scale(0.9) translateY(5px);
transform: scale(0.9) translateY(5px);
}
74% {
opacity: 0;
-webkit-transform: scale(0.4) translateY(20px);
transform: scale(0.4) translateY(20px);
}
75%,
79% {
opacity: 0;
-webkit-transform: scale(0.4) translateY(-10px);
transform: scale(0.4) translateY(-10px);
}
88%,
100% {
opacity: 1;
-webkit-transform: scale(1) translateY(-10px);
transform: scale(1) translateY(-10px);
}
}
@-webkit-keyframes nudgeMouse {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
30% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
60% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
80% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes nudgeMouse {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
30% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
60% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
80% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes nudgeText {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
30% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
60% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
80% {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes nudgeText {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
30% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
60% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
80% {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes colorText {
21% {
color: #222a30;
}
30% {
color: #ffffff;
}
51% {
color: #222a30;
}
60% {
color: #ffffff;
}
81% {
color: #222a30;
}
90% {
color: #ffffff;
}
}
@keyframes colorText {
21% {
color: #222a30;
}
30% {
color: #ffffff;
}
51% {
color: #222a30;
}
60% {
color: #ffffff;
}
81% {
color: #222a30;
}
90% {
color: #ffffff;
}
}
#header {
bottom: auto;
z-index: 100;
color: #fff;
overflow: visible;
}
#header .logo .l2 {
display: none;
}
#header .nav .subset:empty {
display: none !important;
}
#header .main {
padding-top: 0.45rem;
}
#header.inside {
background-color: #f2f1f1;
border-bottom: 1px solid #006a8f;
color: #2a2a2a;
}
#header.inside .logo .l1 {
display: none;
}
#header.inside .logo .l2 {
display: block;
}
#header.inside .main {
padding-bottom: 0.6rem;
}
@media (min-width: 801px) {
#header.inside {
position: static;
}
#header .nav .fade {
top: 100%;
padding-top: calc(0.1rem + 0.875em);
white-space: nowrap;
margin-top: -8px;
}
#header .nav .fade,
#header .nav .subset:before {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#header .nav .subset {
position: relative;
background-color: #fff;
padding: 1.5em 0;
border-radius: 0.5em;
white-space: nowrap;
min-width: 12em;
text-align: center;
color: #777;
line-height: 2.75em;
}
#header .nav .subset:before {
content: "";
bottom: 100%;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 7px solid #fff;
}
#header .nav .subset a {
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
#header .nav .subset a:hover {
border-color: #006a8f;
background-color: rgba(0, 106, 143, 0.2);
color: #006a8f;
}
#header .nav .touch:hover .fade {
margin-top: 0;
}
}
@media (max-width: 800px) {
#header {
position: fixed;
transition: all 0.4s ease-out;
background-color: #006a8f;
}
#header.inside .menu .cls {
fill: #000;
}
#header.inside.scroll {
border-color: transparent;
}
#header.inside.scroll .logo .l2 {
display: none;
}
#header.inside.scroll .logo .l1 {
display: block;
}
#header.scroll {
background-color: #000;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
#header .menu .cls,
#header.scroll .menu .cls,
#header.on .menu .cls {
fill: #fff;
}
#header .logo,
#header .menu {
position: relative;
z-index: 2;
}
#header .menu svg {
width: 28px;
}
#header .menu .cls {
transition: all 0.6s ease-out;
}
#header .menu .cls4 {
font-size: 20px;
text-anchor: middle;
dominant-baseline: middle;
font-family: 'Mont', sans-serif;
}
#header .nav {
position: absolute;
left: 100%;
top: 0;
color: #fff;
width: calc(100% - 58px);
background-color: #006a8f;
height: 100vh;
overflow-y: auto;
box-sizing: border-box;
padding: 30px;
display: block;
line-height: 60px;
}
#header .nav .top {
width: fit-content;
padding: 0;
line-height: inherit;
height: auto;
}
#header .nav .touch {
margin: 0;
}
#header .nav .touch:after {
content: "\e665";
position: absolute;
right: 0;
top: 30px;
line-height: 1;
width: 1em;
text-align: center;
margin-top: -0.5em;
transition: all 0.4s ease;
font-family: 'icon', sans-serif;
}
#header .nav .touch.noAfter::after{
display: none;
}
#header .nav .touch.on:after {
transform: rotateZ(-180deg);
}
#header .nav .fade {
visibility: visible;
opacity: 1;
pointer-events: unset;
display: none;
transition: 0s none;
}
#header .nav .fade .subset {
background-color: rgba(0, 0, 0, 0.1);
padding: 20px;
line-height: 2;
}
#header .mask {
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
#header .main {
transition: all 0.6s ease-out;
padding-bottom: 12px !important;
padding-top: 12px !important;
}
#header.on .main {
transform: translateX(calc(58px - 100%));
}
#header.on .mask {
visibility: visible;
opacity: 1;
pointer-events: unset;
}
#header.on .menu .cls1 {
width: 73px;
transform: rotateZ(32deg);
transform-origin: left 6px;
}
#header.on .menu .cls2 {
opacity: 0;
}
#header.on .menu .cls3 {
width: 73px;
transform: rotateZ(-32deg);
transform-origin: left 40px;
}
}
.nav .top {
min-width: 45px;
height: 2.9em;
line-height: 2.9em;
position: relative;
overflow: hidden;
text-align: right;
}
.nav .top::before {
content: '';
position: absolute;
top: 0;
right: 100px;
width: 45px;
height: 45px;
background-image: url('../images/title-bg.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0;
transition: all 0.6s ease-out;
z-index: -1;
}
.nav .touch {
position: relative;
}
.nav .touch + .touch {
margin-left: 0.7rem;
}
.nav .touch:hover .top::before,
.nav .touch.active .top::before {
right: 0;
opacity: 1;
}
#footer {
padding: 0.9rem 0 0.3rem;
background-image: url('../images/bg5.jpg');
color: #fff;
}
#footer .container {
margin-bottom: 0.3rem;
}
#footer .container .left-box {
width: 30%;
}
#footer .container .nav {
margin-left: 1.1rem;
}
#footer .container .info {
margin-left: -0.7rem;
}
#footer .container .info dl {
margin: 35px 0 0 0.7rem;
}
#footer .container .info dl:first-child {
width: 100%;
}
#footer .container .info dd {
margin-top: 0.1rem;
margin-left: 0;
}
#footer .container .info dd .link{
position: relative;
display: inline-block;
}
#footer .container .info dd .link:hover{
opacity: 1;
/*text-decoration: underline;*/
}
#footer .container .info dd .link:hover::after{
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background-color: #fff;
}
#footer .container .toTop {
cursor: pointer;
width: 45px;
height: 45px;
border-width: 1px;
border-color: #ffffff;
border-style: solid;
border-radius: 50%;
transition: all 0.4s ease;
}
#footer .container .toTop .icon {
transform: rotate(-90deg);
}
#footer .container .toTop:hover {
border-color: #006a8f;
background-color: #006a8f;
}
#footer .container .middle {
padding: 115px 0 88px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
#footer .copyright {
/*margin: 0 -16px;*/
font-size: 14px;
}
#footer .copyright a {
/*margin: 0 16px;*/
opacity: 0.5;
}
#footer .copyright a:hover {
opacity: 1;
text-decoration: underline;
}
@media (max-width: 1024px) {
#footer .copyright {
display: block;
text-align: center;
}
#footer .copyright .item {
width: fit-content;
margin: 0 auto;
}
}
#footer .links .blogroll {
position: relative;
}
#footer .links .blogroll .static {
width: 10.625em;
height: 3.125em;
box-sizing: border-box;
padding: 0.5em 1em 0.5em 1.375em;
border: 1px solid rgba(255, 255, 255, 0.5);
}
#footer .links .blogroll .static .char {
font-size: 14px;
opacity: 0.5;
}
#footer .links .blogroll .static .cc {
width: 1.75em;
height: 1.75em;
background-color: #006a8f;
color: #fff;
}
#footer .links .blogroll .static .cc .icon {
font-size: 12px;
}
#footer .links .blogroll .fade {
position: absolute;
left: 0;
top: 100%;
margin-top: 10px;
color: #232323;
z-index: 100;
width: 100%;
}
#footer .links .blogroll .fade .content {
width: 100%;
max-width: calc(100vw - 60px);
background-color: #fff;
padding: 1em;
height: 180px;
overflow-y: auto;
border-radius: 0.5em;
box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
#footer .links .blogroll .fade .content a {
font-size: 14px;
padding: 5px 0.5em;
}
#footer .links .blogroll .fade .content a:hover {
background-color: #f2f2f2;
color: #006a8f;
}
#footer .links .blogroll:hover .static {
background-color: #006a8f;
border: 1px solid #006a8f;
}
#footer .links .blogroll:hover .static .char {
opacity: 1;
}
#footer .links .blogroll:hover .static .cc {
background-color: #fff;
color: #006a8f;
}
#footer .links .blogroll:hover .fade {
margin-top: 0;
}
@media (max-width: 1680px) {
#footer .container {
display: block;
}
#footer .container .wechat {
margin-top: 30px;
}
}
@media (max-width: 800px) {
#footer {
padding-top: 48px;
}
#footer .container {
position: relative;
}
#footer .container .middle,
#footer .container .top {
flex-wrap: wrap;
}
#footer .container .left-box {
width: 100%;
}
#footer .container .nav {
display: none;
}
#footer .container .info {
font-size: 13px;
}
#footer .container .info dl {
margin: 20px 0 0 0.7rem;
}
#footer .container .middle {
padding: 30px 0 ;
}
#footer .container .toTop {
position: absolute;
top: 200px;
right: 20px;
}
#footer .container .wechat {
flex-wrap: wrap;
justify-content: space-between;
margin-top: 30px;
}
#footer .container .wechat li {
margin-right: 0;
margin-bottom: 20px;
position: relative;
width: 100%;
text-align: center;
}
#footer .container .wechat li:nth-of-type(3){
margin-bottom:0;
}
#footer .container .wechat li .pic-box {
width: 110px;
height: 110px;
margin: 0 auto 10px;
}
}
.wechat li {
margin-right: 44px;
}
.wechat li .pic-box {
width: 150px;
height: 150px;
border-radius: 10px;
background-color: #fff;
overflow: hidden;
margin-bottom: 15px;
}
.wechat li img {
width: 100%;
height: 100%;
}
.wechat li p {
opacity: 0.7;
}
#banner {
height: 100vh;
position: relative;
z-index: 1;
}
#banner > .swiper .hide-mob,
#banner > .swiper .hide-pc{
width: 100%;
height: 100%;
}
#banner > .swiper {
height: 100%;
}
#banner > .swiper .swiper-slide .bg {
transform: scale(1.1, 1.1);
transition: transform 5s linear;
}
#banner > .swiper .swiper-slide .right-pic {
position: absolute;
top: 50%;
right: 10%;
transform: translateY(-50%);
}
#banner > .swiper .swiper-slide .right-pic img {
opacity: 0;
/*transform: scale(0.4, 0.4);*/
transition: all .5s linear;
}
#banner > .swiper .swiper-slide .banner-txt {
filter: drop-shadow(0 0 1em rgba(0, 0, 0, 0.2));
mask-image: -webkit-linear-gradient(-25deg, #000 0%, #000 50%, transparent 52%, #000 54%, transparent 56%, transparent 120%);
-webkit-mask-image: -webkit-linear-gradient(-25deg, #000 0%, #000 50%, transparent 52%, #000 54%, transparent 56%, transparent 120%);
mask-size: 300% 100%;
-webkit-mask-size: 300% 100%;
mask-position: 100% center;
-webkit-mask-position: 100% center;
transition: all 3s ease-out;
}
#banner > .swiper .swiper-slide .banner-txt .zh {
padding: 260px 0 80px;
}
#banner > .swiper .swiper-slide .banner-txt .title {
font-size: 45px;
}
#banner > .swiper .swiper-slide .banner-txt .title span {
text-align: center;
width: 65px;
display: inline-block;
background-image: url('../images/word-bg.png');
background-position: left center;
background-repeat: no-repeat;
background-size: 65px 40px;
margin-right: 8px;
}
#banner > .swiper .swiper-slide .banner-txt .sub-title {
margin-top: 20px;
font-size: 30px;
}
@media (max-width: 1480px) {
#banner > .swiper .swiper-slide .banner-txt .title {
font-size: 35px;
}
#banner > .swiper .swiper-slide .banner-txt .zh {
padding: 240px 0 40px;
}
#banner > .swiper .swiper-slide .banner-txt .sub-title {
font-size: 25px;
}
}
@media (max-width: 768px) {
#banner > .swiper .swiper-slide .banner-txt {
width: 94%;
}
#banner > .swiper .swiper-slide .banner-txt .zh {
padding: 200px 0 20px;
}
#banner > .swiper .swiper-slide .banner-txt .title {
font-size: 25px;
}
#banner > .swiper .swiper-slide .banner-txt .title span {
width: 45px;
background-size: 45px 30px;
margin-right: 3px;
}
#banner > .swiper .swiper-slide .banner-txt .sub-title {
margin-top: 10px;
font-size: 16px;
}
}
@media (max-width: 376px) {
#banner > .swiper .swiper-slide .banner-txt {
width: 95%;
}
#banner > .swiper .swiper-slide .banner-txt .zh {
padding: 150px 0 20px;
}
#banner > .swiper .swiper-slide .banner-txt .title {
font-size: 24px;
}
#banner > .swiper .swiper-slide .banner-txt .title span {
width: 30px;
background-size: 30px 25px;
margin-right: 2px;
}
#banner > .swiper .swiper-slide .banner-txt .sub-title {
margin-top: 8px;
font-size: 16px;
}
#banner .banner-txt .mont {
line-height: 1.4;
width: 100%;
font-size: 12px;
}
}
#banner > .swiper .swiper-slide.swiper-slide-active .banner-txt {
mask-position: 0 center;
-webkit-mask-position: 0 center;
}
#banner > .swiper .swiper-slide.swiper-slide-active .bg {
transform: scale(1, 1) rotate(0.002deg);
}
#banner > .swiper .swiper-slide.swiper-slide-active .right-pic img {
opacity: 1;
/*transform: scale(1, 1) rotate(0.002deg);*/
}
#banner > .swiper .swiper-change {
position: absolute;
left: 0;
bottom: 0;
z-index: 10;
width: 100%;
padding-bottom: 45px;
}
#banner > .swiper .swiper-change .main {
position: relative;
height: 100%;
}
#banner > .swiper .swiper-change .btn-box {
width: 175px;
position: relative;
}
#banner > .swiper .swiper-change .left-box {
width: 500px;
padding-bottom: 70px;
border-bottom: 1px solid rgba(255,255,255,.2);
position: relative;
}
#banner > .swiper .swiper-change .left-box .banner-num {
position: relative;
padding-top: 5px;
padding-left: 30px;
font-style: italic;
}
#banner > .swiper .swiper-change .left-box .banner-num::before {
content: '';
position: absolute;
top: 11px;
left: 0;
width: 15px;
height: 2px;
background-color: #fff;
}
#banner > .swiper .swiper-change .left-box .swiper-pagination {
left: auto;
bottom: auto;
top: 0;
right: 0;
text-align: right;
}
@media (max-width: 1080px) {
#banner > .swiper .swiper-change .swiper-pagination {
width: 100%;
text-align: center;
}
#banner > .swiper .swiper-change .left-box {
width: 100%;
padding-bottom: 30px;
}
#banner > .swiper .swiper-change .btn-box {
display: none;
}
}
#banner .banner-txt {
position: absolute;
top: 40%;
left: 4%;
transform: translateY(-50%);
box-sizing: border-box;
}
#banner .banner-txt .content {
padding-left: 80px;
background-image: url('../images/bg.png');
background-position: left center;
background-repeat: no-repeat;
background-size: 421px 300px;
}
#banner .banner-txt .mont {
text-transform: uppercase;
/*font-style: italic;*/
line-height: 2;
/*width: 60%;*/
}
@media (max-width: 1680px) {
#banner > .swiper .swiper-slide .right-pic {
max-width: 35%;
right: 5%;
}
#banner .banner-txt {
left: 0;
}
}
@media (max-width: 1480px) {
#banner .banner-txt {
left: 0;
}
}
@media (max-width: 800px) {
#banner > .swiper .swiper-slide .right-pic {
max-width: inherit;
width: 75%;
right: auto;
left: 50%;
top: 25%;
transform: translateX(-50%);
}
#banner .banner-txt {
top: 60%;
}
#banner .banner-txt .content {
padding-left: 20px;
background-size: 220px 160px;
}
#banner .banner-txt .mont {
line-height: 1.8;
width: 100%;
}
}
#banner.page-banner {
position: relative;
z-index: 9;
height: 700px;
overflow: hidden;
}
#banner.page-banner img {
animation: bgScale 5s linear forwards;
transition: transform 5s linear;
}
@keyframes bgScale {
0% {
transform: scale(1.1, 1.1);
}
100% {
transform: scale(1, 1) rotate(0.002deg);
}
}
#banner.page-banner .banner-txt {
position: absolute;
top: 50%;
left: 5%;
transform: translateY(-50%);
z-index: 10;
width: 90%;
}
#banner.page-banner .banner-txt .content {
padding-bottom: 60px;
}
#banner.page-banner .banner-txt .title {
font-size: 40px;
}
#banner.page-banner .banner-txt .zh {
padding: 160px 0 20px;
}
#banner.page-banner .banner-txt .mont {
width: 100%;
}
#banner.page-banner .right-nav {
position: absolute;
bottom: -100px;
right: -100px;
width: 490px;
height: 490px;
border-width: 1px;
border-color: rgba(255, 255, 255, 0.3);
border-style: solid;
border-radius: 50%;
padding-top: 174px;
box-sizing: border-box;
background-color:rgba(255, 255, 255, 0.5);
backdrop-filter: blur(20px);
z-index: 100;
}
#banner.page-banner .right-nav .ul li:not(:last-child) {
margin-bottom: 50px;
}
#banner.page-banner .right-nav .ul li a {
color: rgba(0, 0, 0, .6);
position: relative;
padding-left: 120px;
}
#banner.page-banner .right-nav .ul li a .icon-box {
width: 36px;
height: 36px;
border-width: 1px;
border-color: #006a8f;
border-style: solid;
border-radius: 50%;
position: absolute;
top: -8px;
left: -20px;
opacity: 0;
}
#banner.page-banner .right-nav .ul li a .icon-box::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 9px;
height: 9px;
border-radius: 50%;
background-color: #006a8f;
}
#banner.page-banner .right-nav .ul li:nth-of-type(1) a .icon-box {
left: -14px;
}
#banner.page-banner .right-nav .ul li.active a,
#banner.page-banner .right-nav .ul li:hover a {
color: #006a8f;
font-size: 20px;
}
#banner.page-banner .right-nav .ul li.active a .icon-box,
#banner.page-banner .right-nav .ul li:hover a .icon-box {
opacity: 1;
}
@media (max-width: 1480px) {
#banner.page-banner {
height: 600px;
}
#banner.page-banner .right-nav {
bottom: -160px;
right: -150px;
}
}
@media (max-width: 800px) {
#banner.page-banner{
height: 230px;
padding-top: 60px;
}
#banner.page-banner .banner-txt {
box-sizing: border-box;
width: 90%;
}
#banner.page-banner .banner-txt .title {
font-size: 20px;
}
#banner.page-banner .banner-txt .mont {
line-height: 1.4;
font-size: 12px;
}
#banner.page-banner .right-nav {
position: absolute;
bottom: -100px;
right: -80px;
width: 300px;
height: 300px;
padding-top: 64px;
display: none;
}
#banner.page-banner .right-nav .ul li:not(:last-child) {
margin-bottom: 30px;
}
#banner.page-banner .right-nav .ul li a {
padding-left: 80px;
}
#banner.page-banner .right-nav .ul li:nth-of-type(1) a .icon-box {
left: 0;
}
}
.page-nav {
height: 85px;
background-color: #fff;
position: relative;
z-index: 9;
}
.page-nav .item {
flex: 1;
height: 85px;
text-align: center;
box-sizing: border-box;
border-bottom: 1px solid #dcdee1;
}
.page-nav .item:not(:last-child) {
border-right: 1px solid #dcdee1;
}
.page-nav .item a {
height: 100%;
line-height: 85px;
opacity: 0.8;
}
.page-nav .item:hover,
.page-nav .item.active {
border-bottom: none;
border-right: none;
}
.page-nav .item:hover a,
.page-nav .item.active a {
color: #fff;
opacity: 1;
background-color: #006a8f;
}
@media (max-width: 800px) {
.page-nav {
height: auto;
}
.page-nav .list {
flex-wrap: wrap;
}
.page-nav .list .item {
flex: auto;
height: 50px;
border-bottom: 1px solid #dcdee1;
}
.page-nav .list .item a {
padding: 0 10px;
line-height: 50px;
}
}
.same-title {
background-image: url('../images/title-bg2.png');
background-position: left 14px;
background-repeat: no-repeat;
background-size: 45px 31px;
padding-left: 56px;
}
.same-title .mont {
font-style: italic;
}
.same-title.center {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
}
.same-title.colfff {
background-image: url('../images/title-bg4.png');
position: relative;
}
.same-title.colfff::before {
content: '';
position: absolute;
top: -35px;
left: -90px;
width: 384px;
height: 147px;
background-image: url('../images/title-bg3.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
@media (max-width: 800px) {
.same-title.colfff::before {
top: -31px;
left: -59px;
width: 280px;
height: 120px;
}
.same-title.center {
width: 90%;
top: 50px;
left: 20px;
transform: none;
}
}
.same-sub-title {
font-size: 48px;
line-height: 1.3;
font-weight: 600;
}
.same-sub-title .spe-color {
background: -webkit-linear-gradient(left, #e2c366, #f6e8a5 25%, #f6e8a5 50%, #fff 75%, #e4c572);
color: transparent;
-webkit-background-clip: text;
background-size: 100% 100%;
}
@media (max-width: 1480px) {
.same-sub-title {
font-size: 40px;
}
}
@media (max-width: 800px) {
.same-sub-title {
font-size: 28px;
}
}
.phs {
width: 6.3em;
height: 6.3em;
overflow: visible;
}
.phs .group {
transform-origin: center center;
animation: animate01 36s linear infinite;
}
@keyframes animate01 {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.phs .cls1,
.phs .cls3 {
fill: none;
stroke-width: 1px;
stroke: rgba(0, 0, 0, 0.8);
}
.phs .cls1 {
stroke-dasharray: 258,370;
stroke-dashoffset: -150;
}
.phs .cls2 {
fill: rgba(0, 0, 0, 0.8);
font-size: 16px;
text-transform: uppercase;
}
.phs .cls4 {
fill: none;
transform: rotateZ(80deg);
transform-origin: center center;
}
.same-more .circle {
margin-left: -30px;
}
.same-more:hover .i {
animation: transleX .8s ease-out infinite;
}
.same-scroll-down img {
animation: animate02 4s linear infinite;
}
@keyframes animate02 {
0% {
transform: translateY(0);
}
40% {
transform: translateY(0.7em);
}
100% {
transform: translateY(0);
}
}
@keyframes transleX {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(-7px, 0);
}
100% {
transform: translate(0, 0);
}
}
#core {
height: 1080px;
background-image: url('../images/bg1.jpg');
background-position: center top;
padding-bottom: 120px;
box-sizing: border-box;
overflow: hidden;
position: relative;
background-color: #d3e0ef;
}
#core .marquee {
line-height: 1;
white-space: nowrap;
overflow: hidden;
position: relative;
z-index: 8;
margin: 20px 0;
}
#core .marquee .box img {
max-width: fit-content;
}
#core .phs {
position: absolute;
left: 0;
top: 1.25em;
}
#core .main {
position: relative;
}
#core .left-box {
position: absolute;
top: 0;
left: 0;
width: 35%;
z-index: 99;
}
#page-news .left-box .bottom-pic img,
#core .left-box .full img {
animation: shake 3s linear infinite;
}
#core .wave{
width: 100%;
position: absolute;
left: 0;
bottom: -170px;
animation: shake 6s linear infinite;
}
#core .wave img{
width: 100%;
}
#core .core-swiper {
width: 100%;
padding: 70px 0 180px 28%;
text-align: right;
box-sizing: border-box;
}
#core .core-swiper .two-sub {
margin: 25px 0 50px;
}
#core .core-swiper .desc .info {
margin-top: 25px;
text-align: left;
}
#core .core-swiper .pic-box {
max-width: 45%;
margin-top: -50px;
}
/*#core .core-swiper.home-core-swiper {*/
/* user-select: none;*/
/* cursor: url("../images/mouse-icon.png"), auto;*/
/*}*/
#core .core-swiper.home-core-swiper .swiper-change{
width: 200px;
position: absolute;
bottom: 350px;
left: 50%;
transform: translateX(-50%);
z-index: 99;
}
@media (max-width: 1580px){
#core .core-swiper.home-core-swiper .swiper-change{
bottom: 300px;
}
}
@media (max-width: 1480px) {
#core .left-box {
width: 30%;
}
#core .core-swiper {
padding: 70px 0 180px 28%;
}
#core .core-swiper .pic-box {
max-width: 41%;
}
#core .wave {
bottom: -100px;
}
#core .core-swiper.home-core-swiper .swiper-change{
bottom: 200px;
}
}
@media (max-width: 1300px){
#core .core-swiper.home-core-swiper .swiper-change{
bottom: 150px;
}
}
@media (max-width: 800px) {
#core {
height: auto;
padding-bottom: 0;
background-position: center 115px;
background-color: #e6eff4;
}
#core .marquee .box {
height: 60px;
}
#core .marquee .box img {
height: 100%;
}
#core .left-box {
left: 5%;
width: 90%;
}
#core .main.pb {
padding-top: 300px;
}
#core .core-swiper {
width: 100%;
padding: 70px 0 0;
}
#core .core-swiper .content {
flex-wrap: wrap;
}
#core .core-swiper .content .title {
display: flex;
justify-content: flex-end;
}
#core .core-swiper .content .title .sub{
width: 77%;
}
#core .core-swiper .two-sub {
margin: 25px 0 30px;
}
#core .core-swiper .desc .info {
margin-top: 25px;
}
#core .core-swiper .pic-box {
max-width: 80%;
margin: 20px auto 0;
}
#core .core-swiper.home-core-swiper .swiper-change{
width: 100%;
}
}
#core.page-core {
background-image: url('../images/bg7.jpg');
padding-bottom: 50px;
height: auto;
}
#core.page-core .main {
position: relative;
}
#core.page-core .swiper-box {
margin-right: -10%;
}
#core.page-core .core-swiper {
width: 100%;
padding: 70px 0 0;
text-align: left;
box-sizing: border-box;
margin: 0;
}
#core.page-core .core-swiper .swiper-slide {
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.5);
padding: 0 100px;
height: 625px;
box-sizing: border-box;
}
#core.page-core .core-swiper .swiper-slide .content {
height: 100%;
}
#core.page-core .core-swiper .swiper-slide .bottom-box {
position: relative;
padding-left: 218px;
}
#core.page-core .core-swiper .swiper-slide .bottom-box .phs{
top: 0;
}
#core.page-core .core-swiper .swiper-slide .two-sub {
margin: 30px 0 80px;
}
#core .core-swiper .swiper-slide .tags{
margin-top: 30px;
}
#core.page-core .core-swiper .pic-box {
margin-top: 0;
width: 40%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#core.page-core .core-swiper .pic-box img {
max-height: 90%;
}
#core.page-core .swiper-change {
position: absolute;
top: 125px;
right: -16px;
width: 180px;
}
@media (max-width: 1480px) {
#core.page-core .core-swiper .swiper-slide {
height: 525px;
padding: 0 80px;
}
#core.page-core .core-swiper .swiper-slide .bottom-box {
padding-left: 128px;
}
#core.page-core .core-swiper .pic-box{
width: 36%;
}
}
@media (max-width: 800px) {
#core.page-core {
background-position: center top;
}
#core.page-core .swiper-change {
display: none;
}
#core.page-core .swiper-box {
margin-right: 0;
}
#core.page-core .core-swiper .swiper-slide {
height: auto;
padding: 120px 20px 30px;
}
#core.page-core .core-swiper .swiper-slide .content {
flex-wrap: wrap;
}
#core.page-core .core-swiper .swiper-slide .bottom-box {
padding-left: 0;
position: static;
}
#core.page-core .core-swiper .swiper-slide .two-sub {
margin: 30px 0 ;
}
#core.page-core .core-swiper .pic-box {
margin-top: 20px;
width: 60%;
height: auto;
}
#core.page-core .core-swiper .phs {
position: absolute;
left: 20px;
top: 20px;
}
#core .core-swiper .swiper-slide .tags{
margin-top: 20px;
}
}
@keyframes shake {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, -10px);
}
100% {
transform: translate(0, 0);
}
}
#celebrity {
position: relative;
}
#celebrity .same-title {
position: absolute;
top: 90px;
left: 8%;
z-index: 99;
}
#celebrity .celebrity-swiper {
height: 800px;
}
#celebrity .celebrity-swiper .swiper-slide .center-pic{
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
z-index: 99;
width: 40%;
height: 75%;
}
#celebrity .celebrity-swiper .swiper-slide .center-pic img{
max-height: 100%;
}
#celebrity .celebrity-swiper .swiper-slide .txt-box {
position: absolute;
top: 40%;
right: 6%;
padding-left: 110px;
padding-top: 60px;
max-width: 400px;
}
#celebrity .celebrity-swiper .swiper-slide .txt-box .phs {
position: absolute;
left: 0;
top: 1.25em;
}
#celebrity .celebrity-swiper .swiper-slide .txt-box .phs .cls1,
#celebrity .celebrity-swiper .swiper-slide .txt-box .phs .cls3 {
stroke: #fff;
}
#celebrity .celebrity-swiper .swiper-slide .txt-box .phs .cls2 {
fill: #fff;
}
#celebrity .celebrity-swiper .swiper-slide .txt-box .desc .title {
margin-bottom: 5px;
}
#celebrity .celebrity-swiper .swiper-slide .txt-box .icon-box {
margin-top: 95px;
}
#celebrity .celebrity-swiper .swiper-pagination {
bottom: 35px;
}
@media (max-width: 1480px) {
#celebrity .same-title {
left: 5%;
}
#celebrity .celebrity-swiper {
height: 100vh;
}
#celebrity .celebrity-swiper .swiper-slide .txt-box {
right: 4%;
max-width: 300px;
}
}
@media (max-width: 800px) {
#celebrity .same-title {
top: 50px;
left: 10%;
}
#celebrity .celebrity-swiper {
height: 800px;
}
#celebrity .celebrity-swiper .swiper-slide .txt-box {
max-width: 100%;
width: 100%;
position: absolute;
top: 65%;
right: 0;
padding-left: 110px;
padding-top: 60px;
padding-bottom: 20px;
background-color: rgba(0, 0, 0, 0.7);
box-sizing: border-box;
}
#celebrity .celebrity-swiper .swiper-slide .txt-box .phs {
top: 3.25em;
left: 10px;
}
#celebrity .celebrity-swiper .swiper-slide .txt-box .icon-box {
margin-top: 35px;
}
#celebrity .celebrity-swiper .swiper-pagination {
bottom: 25px;
}
#celebrity .celebrity-swiper .swiper-slide .center-pic{
bottom: 30%;
width: 70%;
height: 65%;
}
}
#product {
position: relative;
background-image: url('../images/bg3.jpg');
height: 900px;
overflow: hidden;
}
#product .top-box {
position: absolute;
top: 120px;
left: 7%;
width: 85%;
z-index: 240;
}
#product .content {
height: 100%;
}
#product .content .left-nav {
width: 900px;
height: 900px;
background-color: rgba(255, 255, 255, .1);
padding-top: 20%;
-webkit-clip-path: circle(60% at 0 50%);
clip-path: circle(60% at 0 50%);
box-sizing: border-box;
position: relative;
z-index: 100;
}
#product .content .left-nav .nav {
position: relative;
z-index: 99;
}
#product .content .left-nav .nav .item {
padding-left: 216px;
position: relative;
margin-bottom: 44px;
cursor: pointer;
}
#product .content .left-nav .nav .item span {
margin-left: -20px;
color: rgba(0, 0, 0, 0.7);
transition: all 0.4s ease;
position: relative;
z-index: 10;
}
#product .content .left-nav .nav .item img {
opacity: 0;
transition: all 0.4s ease;
}
#product .content .left-nav .nav .item::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 3px;
background-color: #006a8f;
transition: all 0.6s ease;
transform: translateY(-50%);
}
#product .content .left-nav .nav .item.on img {
opacity: 1;
}
#product .content .left-nav .nav .item.on span {
font-size: 20px;
color: #006a8f;
}
#product .content .left-nav .nav .item.on::after {
width: 80px;
}
#product .content .right-box {
width: 75%;
margin-left: -25%;
padding-top: 10%;
}
#product .content .right-box .top-info {
width: 100%;
margin-top: -90px;
margin-bottom: 50px;
}
#product .content .right-box .words {
margin-top: 15px;
}
#product .content .right-box .words .item {
position: relative;
width: 112px;
height: 112px;
}
#product .content .right-box .words .item span {
display: block;
width: 40px;
line-height: 1.2;
}
#product .content .right-box .words .item::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('../images/title-bg5.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
animation: animate01 26s linear infinite;
}
#product .content .right-box .words .item:not(:last-child) {
margin-right: 40px;
}
#product .content .right-box .words .item:nth-of-type(2)::after {
animation-delay: 1s;
animation: animate01 30s linear infinite;
}
#product .content .right-box .words .item:nth-of-type(3)::after {
animation-delay: 0.5s;
animation: animate01 40s linear infinite;
}
#product .content .right-box .words .item:nth-of-type(4)::after {
animation-delay: 2.5s;
animation: animate01 45s linear infinite;
}
#product .content .right-box .box-swiper {
/*margin-top: 60px;*/
position: relative;
padding-top: 90px;
}
#product .content .right-box .box-swiper .pro-swiper .swiper-slide a {
padding: 0 10%;
}
#product .content .right-box .box-swiper .pro-swiper .swiper-slide a .pic-box {
max-height: 300px;
}
#product .content .right-box .box-swiper .pro-swiper .swiper-slide a .pic-box img {
max-width: 80%;
max-height: 80%;
}
#product .content .right-box .box-swiper .pro-swiper .swiper-slide a .title {
margin-top: 15px;
text-align: center;
transform: translateY(150px);
opacity: 0;
transition: all 0.6s ease;
color: #006a8f;
}
#product .content .right-box .box-swiper .pro-swiper .swiper-slide.swiper-slide-active a .title {
opacity: 1;
transform: translateY(0);
}
#celebrity .celebrity-swiper .swiper-slide .txt-box .desc .title span,
#product .content .right-box .box-swiper .pro-swiper .swiper-slide.swiper-slide-active a .title span{
margin-left:.5em;
}
#product .content .right-box .box-swiper .swiper-change {
width: 40%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
z-index: 200;
}
@media (max-width: 1480px) {
#product {
height: 750px;
}
#product .content {
height: 100%;
}
#product .content .left-nav {
width: 750px;
height: 750px;
}
#product .content .left-nav .nav .item {
padding-left: 150px;
}
}
@media (max-width: 800px) {
#product {
height: auto;
padding-top: 150px;
}
#product .top-box {
position: absolute;
top: 50px;
left: 5%;
width: 90%;
}
#product .content {
flex-wrap: wrap;
}
#product .content .left-nav {
width: 100%;
height: auto;
padding-top: 0;
-webkit-clip-path: none;
clip-path: none;
background-color: transparent;
}
#product .content .left-nav .left-bg {
display: none;
}
#product .content .left-nav .nav .item {
padding-left: 80px;
margin-bottom: 8px;
}
#product .content .left-nav .nav .item.on::after {
width: 50px;
}
#product .content .right-box {
width: 100%;
margin-left: 0;
padding: 30px 0 40px;
box-sizing: border-box;
}
#product .content .right-box .top-info {
width: 100%;
margin-top: 30px;
}
#product .content .right-box .words {
margin-top: 15px;
flex-wrap: wrap;
justify-content: space-between;
}
#product .content .right-box .words .item {
width: 80px;
height: 80px;
}
#product .content .right-box .words .item::after {
width: 80px;
height: 80px;
}
#product .content .right-box .words .item:not(:last-child) {
margin-right: 0;
}
#product .content .right-box .box-swiper{
padding: 20px ;
box-sizing: border-box;
overflow: hidden;
}
#product .content .right-box .box-swiper .swiper-change {
width: 100%;
}
}
@media (max-width: 376px) {
#product .content .right-box .words .item {
margin-top: 10px;
}
}
#product.page-top-product{
height: auto;
}
#product.page-top-product .content .right-box {
width: 100%;
margin-left: 0;
padding-top: 0;
margin-top: -60px;
}
#product.page-top-product .content .pic-box {
height: 440px;
}
#product.page-top-product .content .pic-box img{
max-height: 100%;
}
#product.page-top-product .content .pic-box .ul {
height: 100%;
align-items: flex-end;
}
#product.page-top-product .content .pic-box .ul li {
margin: 0 30px;
}
@media (max-width: 1480px){
#product.page-top-product .content .right-box {
margin-top: 20px;
}
/*#product.page-top-product .content .pic-box {*/
/* height: 320px;*/
/*}*/
}
@media (max-width: 800px) {
#product.page-top-product {
height: auto;
padding-top: 0;
}
#product.page-top-product .content .right-box {
margin-top: 30px;
}
#product.page-top-product .content .pic-box {
height: auto;
}
#product.page-top-product .content .pic-box .ul {
height: 100%;
align-items: center;
flex-wrap: wrap;
}
#product.page-top-product .content .pic-box .ul li {
width: 33.33%;
margin: 0;
}
#product.page-top-product .content .pic-box .ul li img {
max-width: 80%;
}
}
#product.page-top-product2 .content .right-box .words .item::after {
background-image: url('../images/title-bg6.png');
}
#brand {
height: 950px;
background-image: url('../images/bg4.jpg');
position: relative;
overflow: hidden;
}
#brand .content {
width: 40%;
margin: 170px auto 0;
position: relative;
z-index: 99;
}
#brand .content .info .text-node {
opacity: 1;
margin: 30px 0 45px;
}
#brand .content .info .bottom a span {
margin-right: 10px;
}
#brand .content .info .bottom .play-video {
margin-left: 70px;
}
#brand .content .info .bottom .play-video .icon {
width: 38px;
height: 38px;
background-color: rgba(255, 255, 255, 0.4);
text-align: center;
line-height: 38px;
border-radius: 50%;
}
#brand .content .info .bottom .play-video:hover .icon{
background-color: #006a8f;;
}
#brand .content .bottom-box {
margin-top: 140px;
}
#brand .content .bottom-box .item .icon-box {
width: 96px;
height: 118px;
background-image: url('../images/brand-bg.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0 auto 14px;
transition: all 0.4s ease;
}
#brand .content .bottom-box .item:nth-of-type(2) {
margin: 0 138px;
}
#brand .content .bottom-box .item:hover .icon-box {
background-image: url('../images/brand-bg2.png');
animation: shake .8s linear forwards;
}
#brand .mark .circle {
position: absolute;
left: 50%;
top: 50%;
margin-left: -353px;
margin-top: -436px;
animation: waves 8s linear infinite;
opacity: 0;
transform: scale(0);
border-radius: 50%;
}
#brand .mark .circle.circle2 {
animation-delay: 3s;
}
#brand .mark .circle.circle3 {
animation-delay: 5s;
}
@keyframes waves {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(0.8);
opacity: 1;
}
100% {
transform: scale(2.5);
opacity: 0;
}
}
@media (max-width: 1680px) {
#brand .content {
width: 44%;
}
}
@media (max-width: 1480px) {
#brand {
height: 100vh;
}
#brand .same-title {
margin-left: 40px;
}
#brand .content {
width: 50%;
margin: 70px auto 0;
}
#brand .content .bottom-box {
margin-top: 70px;
}
}
@media (max-width: 800px) {
#brand {
height: auto;
}
#brand .same-title {
margin-left: 30px;
}
#brand .content {
width: 90%;
}
#brand .content .bottom-box {
justify-content: space-between;
flex-wrap: wrap;
align-items: flex-start;
}
#brand .content .bottom-box .item {
width: 48%;
text-align: center;
margin-bottom: 30px;
}
#brand .content .bottom-box .item:nth-of-type(1){
width: 100%;
}
#brand .content .bottom-box .item:nth-of-type(2) {
margin: 0 ;
}
#brand .mark .circle {
width: 300px;
height: 400px;
margin-left: -150px;
margin-top: -200px;
}
}
#brand.page-brand {
height: 1000px;
background-image: url('../images/bg8.jpg');
}
#brand.page-brand .same-title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#brand.page-brand .main {
height: 100%;
}
#brand.page-brand .content {
width: 90%;
height: 100%;
margin: 0 auto ;
}
#brand.page-brand .content .bottom-box {
margin-top: 0;
}
#brand.page-brand .content .bottom-box .item {
text-align: center;
}
#brand.page-brand .content .bottom-box .item .icon-box {
width: 125px;
height: 125px;
background-image: none;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
}
#brand.page-brand .content .bottom-box .item:nth-of-type(1) {
position: absolute;
top: 40%;
left: 0;
}
#brand.page-brand .content .bottom-box .item:nth-of-type(2) {
position: absolute;
top: 60%;
left: 65%;
}
#brand.page-brand .content .bottom-box .item:nth-of-type(3) {
position: absolute;
top: 10%;
left: 75%;
}
#brand.page-brand .content .bottom-box .item:hover .icon-box {
background-image: url('../images/brand-bg3.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
#brand.page-brand .mark .circle {
margin-left: -280px;
margin-top: -280px;
animation: waves2 8s linear infinite;
}
#brand.page-brand .mark .circle.circle2 {
animation-delay: 3s;
}
#brand.page-brand .mark .circle.circle3 {
animation-delay: 5s;
}
@keyframes waves2 {
0% {
transform: scale(0.5);
opacity: 1;
}
50% {
transform: scale(1.8);
opacity: 0.4;
}
100% {
transform: scale(2.8);
opacity: 0;
}
}
@media (max-width: 1480px) {
#brand.page-brand {
height: 100vh;
}
#brand.page-brand .same-title {
margin-left: 0;
}
}
@media (max-width: 800px) {
#brand.page-brand {
height: 700px;
}
#brand.page-brand .same-title {
margin-left: 0;
}
#brand.page-brand .content .bottom-box .item {
width: auto;
}
#brand.page-brand .content .bottom-box .item .icon-box {
width: 80px;
height: 80px;
}
#brand.page-brand .content .bottom-box .item:nth-of-type(1) {
top: 25%;
left: 0;
}
#brand.page-brand .content .bottom-box .item:nth-of-type(2) {
top: 70%;
left: 50%;
}
#brand.page-brand .content .bottom-box .item:nth-of-type(3) {
top: 10%;
left: 50%;
}
#brand.page-brand .mark .circle {
width: 300px;
height: 300px;
margin-left: -150px;
margin-top: -150px;
}
}
#about {
background-image: url('../images/bg6.jpg');
}
#about .content .left-info {
width: 35%;
margin-right: 10%;
}
#about .content .left-info .top-title {
margin-bottom: 35px;
}
#about .content .oppress {
width: 640px;
height: 464px;
border-radius: 20px;
margin-top: 60px;
}
@media (max-width: 800px) {
#about .top-box {
flex-wrap: wrap;
}
#about .top-box .same-title {
width: 100%;
margin-bottom: 40px;
}
#about .content {
flex-wrap: wrap;
}
#about .content .left-info {
width: 100%;
margin-right: 0;
}
#about .content .left-info .top-title {
margin-bottom: 30px;
}
#about .content .oppress {
width: 100%;
height: 250px;
border-radius: 20px;
margin-top: 40px;
}
}
.product-lists .ul li {
margin-bottom: 70px;
}
.product-lists .ul li:last-child {
margin-bottom: 0;
}
.product-lists .ul li a {
border-radius: 20px;
height: 715px;
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.product-lists .ul li a .oppress {
width: 50%;
height: 100%;
}
.product-lists .ul li a .info {
width: 50%;
height: 100%;
background-image: url('../images/bg9.png');
background-position: right bottom;
padding-top: 110px;
text-align: center;
box-sizing: border-box;
}
.product-lists .ul li a .info .title span{
margin-left: .5em;
}
.product-lists .ul li a .info .sub-tit {
opacity: 0.9;
margin-top: 5px;
}
.product-lists .ul li a .info .pic {
height: 400px;
}
.product-lists .ul li a .info .pic img {
max-height: 80%;
}
.product-lists .ul li a .info .more {
margin: 0 auto;
}
.product-lists .ul li a:hover .gray-more {
color: #fff;
background-color: #006a8f;
border-color: #006a8f;
}
.product-lists .ul li a:hover .info .sub-tit,
.product-lists .ul li a:hover .info .title{
color: #006a8f;
}
@media (max-width: 1480px) {
.product-lists .ul li a {
height: 550px;
}
.product-lists .ul li a .info {
padding-top: 70px;
}
.product-lists .ul li a .info .pic {
height: 300px;
}
}
@media (max-width: 800px) {
.product-lists .ul li {
margin-bottom: 30px;
}
.product-lists .ul li a {
height: auto;
flex-wrap: wrap;
}
.product-lists .ul li a .oppress {
width: 100%;
height: 250px;
}
.product-lists .ul li a .info {
padding: 40px 0;
width: 100%;
}
.product-lists .ul li a .info .pic {
height: 200px;
}
}
.product-details {
background-image: url('../images/bg11.jpg');
padding-bottom: 40px;
}
.product-details .main {
position: relative;
}
.product-details .main .phs {
width: 8.3em;
height: 8.3em;
position: absolute;
top: 44px;
left: 46%;
z-index: 99;
}
.product-details2 .main .phs{
top: -60px;
}
.product-details .main .phs .cls2 {
font-size: 18px;
}
@media (max-width: 800px) {
.product-details{
padding-bottom: 80px;
}
.product-details .main:first-child{
padding-top: 70px;
}
.product-details .main .phs {
left: auto;
right: 20px;
}
.product-details2 .main .phs{
top: 0;
}
}
/*.product-details .content-lists .top-content .items {*/
/* display: none;*/
/*}*/
.product-details .content-lists .top-content .items .left-box {
width: 40%;
}
.product-details .content-lists .top-content .items .left-box .top-unit .circle {
margin-right: 0.5em;
margin-top: -2px;
}
.product-details .content-lists .top-content .items .left-box .top-unit .circle i {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #303233;
}
.product-details .content-lists .top-content .items .left-box .top-unit .circle i:first-child {
border: 2px solid #303233;
background-color: transparent;
box-sizing: border-box;
}
.product-details .content-lists .top-content .items .left-box .title {
margin: 25px 0;
}
.product-details .content-lists .top-content .items .left-box .link-btn {
padding: 70px 0;
margin-top: 70px;
border-top: 1px solid #dcdee1;
border-bottom: 1px solid #dcdee1;
}
.product-details .content-lists .top-content .items .left-box .buy {
width: 258px;
height: 58px;
border-width: 1px;
border-color: rgba(0, 0, 0, 0.3);
border-style: solid;
border-radius: 30px;
padding: 0 36px;
box-sizing: border-box;
}
.product-details .content-lists .top-content .items .left-box .buy:hover{
color: #fff;
background-color: #006a8f;
border-color: #006a8f;
}
.product-details .content-lists .top-content .items .right-box {
width: 50%;
position: relative;
}
.product-details .content-lists .top-content .items .right-box .swiper-box {
width: 100%;
}
.product-details .content-lists .top-content .items .right-box .swiper-box .gallery {
height: 560px;
border-radius: 20px;
}
.product-details .content-lists .top-content .items .right-box .swiper-box .gallery a {
height: 100%;
position: relative;
}
.product-details .content-lists .top-content .items .right-box .swiper-box .gallery a .play-icon {
position: absolute;
bottom: 40px;
right: 60px;
z-index: 8;
width: 80px;
height: 80px;
color: #006a8f;
background-color: rgba(255,255,255,.7);
text-align: center;
line-height: 80px;
border-radius: 50%;
}
.product-details .content-lists .top-content .items .right-box .swiper-box .gallery a .play-icon:hover{
background-color:#fff;
}
.product-details .content-lists .top-content .items .right-box .swiper-box .gallery a .play-icon .icon {
padding-left: 8px;
}
.product-details .content-lists .top-content .items .right-box .swiper-box .thumb {
height: 180px;
margin-top: 25px;
}
.product-details .content-lists .top-content .items .right-box .swiper-box .thumb .swiper{
height: 100%;
}
.product-details .content-lists .top-content .items .right-box .swiper-box .thumb .swiper-slide {
height: 100%;
border-radius: 10px;
overflow: hidden;
border: 2px solid transparent;
box-sizing: border-box;
transition: all .4s ease;
cursor: pointer;
}
.product-details .content-lists .top-content .items .right-box .swiper-box .thumb .swiper-slide-thumb-active{
border: 2px solid #006a8f;
}
.product-details2 .content-lists .top-content .items .right-box .swiper-box .thumb .swiper-slide-thumb-active{
border: 2px solid #e6cb7a;
}
.product-details2 .swiper-change.spe-change .swiper-pagination .swiper-pagination-bullet-active{
background-color: #e6cb7a;
}
.product-details .content-lists .top-content .items.on {
display: block;
}
@media (max-width: 1480px) {
.product-details .content-lists .top-content .items .right-box .swiper-box .gallery {
height: 460px;
}
.product-details .content-lists .top-content .items .right-box .swiper-box .thumb {
height: 150px;
margin-top: 20px;
}
}
@media (max-width: 800px) {
.product-details .content-lists .top-content .items .flex-balance {
flex-wrap: wrap;
}
.product-details .content-lists .top-content .items .left-box {
width: 100%;
}
.product-details .content-lists .top-content .items .left-box .title {
margin: 25px 0;
}
.product-details .content-lists .top-content .items .left-box .link-btn {
padding: 30px 0;
margin-top: 30px;
}
.product-details .content-lists .top-content .items .right-box {
width: 100%;
margin-top: 30px;
}
.product-details .content-lists .top-content .items .right-box .swiper-box .gallery {
height: 300px;
}
.product-details .content-lists .top-content .items .right-box .swiper-box .gallery a .play-icon {
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
line-height: 50px;
}
.product-details .content-lists .top-content .items .right-box .swiper-box .gallery a .play-icon .icon {
padding-left: 2px;
}
.product-details .content-lists .top-content .items .right-box .swiper-box .thumb {
height: 80px;
margin-top: 10px;
}
}
.product-details .bottom-swiper {
position: relative;
padding-bottom: 80px;
height: 200px;
}
.product-details .bottom-swiper .main.spe-box {
max-width: 93.5%;
}
.product-details .bottom-swiper .nav-swiper {
padding-bottom: 40px;
overflow: visible;
}
.product-details .bottom-swiper .nav-swiper .swiper-slide a{
padding-top: 80px;
}
.product-details .bottom-swiper .nav-swiper .swiper-slide .mark {
position: relative;
}
.product-details .bottom-swiper .nav-swiper .swiper-slide .mark .circle {
position: absolute;
left: 50%;
top: 50%;
width: 10px;
height: 10px;
margin: -5px 0 0 -5px;
opacity: 0;
transform: scale(0);
background-color: #006a8f;
border-radius: 50%;
}
.product-details .bottom-swiper .nav-swiper .swiper-slide .mark .circle.circle1 {
opacity: 1;
transform: scale(1);
}
.product-details .bottom-swiper .nav-swiper .swiper-slide .mark .circle.circle2 {
animation: waves3 5s linear infinite;
animation-delay: 1s;
}
@keyframes waves3 {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1);
opacity: 0.6;
}
100% {
transform: scale(3);
opacity: 0;
}
}
.product-details .bottom-swiper .nav-swiper .swiper-slide .pic-box {
width: 152px;
height: 152px;
border-width: 3px;
border-color: #006a8f;
border-style: solid;
border-radius: 50%;
box-sizing: border-box;
padding: 5px;
margin: 0 auto;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
transition: all 0.6s ease;
opacity: 0;
}
.product-details .bottom-swiper .nav-swiper .swiper-slide .pic-box .pic {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
}
.product-details .bottom-swiper .nav-swiper .swiper-slide .char {
margin-top: 20px;
}
.product-details .bottom-swiper .nav-swiper .swiper-slide.swiper-slide-next a{
padding-top: 30px;
}
.product-details .bottom-swiper .nav-swiper .swiper-slide.on .mark {
display: none;
}
.product-details .bottom-swiper .nav-swiper .swiper-slide.on .pic-box{
top: -60px;
opacity: 1;
}
.product-details .bottom-swiper .nav-swiper .swiper-slide.on .char {
font-size: 20px;
color: #006a8f;
}
.product-details .bottom-swiper .nav-swiper .swiper-slide.on a{
padding-top: 80px;
}
.product-details .bottom-swiper .nav-swiper .swiper-pagination {
bottom: -20px;
}
.product-details .bottom-swiper .bg {
width: 100%;
height: 100px;
position: absolute;
top: 100px;
left: 0;
}
@media (max-width: 800px) {
.product-details .bottom-swiper {
padding-bottom: 40px;
height: 140px;
}
.product-details .bottom-swiper .nav-swiper {
padding-bottom: 30px;
}
.product-details .bottom-swiper .nav-swiper .swiper-slide a{
padding-top: 60px;
}
.product-details .bottom-swiper .nav-swiper .swiper-slide.on a{
padding-top: 60px;
}
.product-details .bottom-swiper .nav-swiper .swiper-slide .pic-box {
width: 120px;
height: 120px;
}
.product-details .bottom-swiper .nav-swiper .swiper-pagination {
bottom: -20px;
}
.product-details .bottom-swiper .main {
max-width: 100%;
}
.product-details .bottom-swiper .nav-swiper .swiper-slide .mark {
display: none;
}
.product-details .bottom-swiper .nav-swiper .swiper-slide .pic-box{
top: -60px;
opacity: 1;
}
.product-details .bottom-swiper .nav-swiper .swiper-slide .char {
font-size: 20px;
color: #006a8f;
}
}
.product-details2 .content-lists .top-content .items .right-box .swiper-box .gallery a .play-icon {
color: #3b3b3b;
}
.product-details2 .bottom-swiper .nav-swiper .swiper-slide .mark .circle {
background-color: #e6cb7a;
}
.product-details2 .bottom-swiper .nav-swiper .swiper-slide .pic-box {
border-color: #e6cb7a;
}
.product-details2 .bottom-swiper .nav-swiper .swiper-slide.swiper-slide-active .char {
color: #000;
}
#service .top-box .left-info {
width: 40%;
}
#service .top-box .left-info .text-node {
margin: 40px 0 70px;
}
#service .phs {
width: 20em;
height: 20em;
position: relative;
top: 0;
left: 50%;
transform: translateX(-50%);
}
#service .phs .cls4 {
opacity: 0;
}
#service .phs .cls3 {
fill: #006a8f;
stroke: #006a8f;
}
#service .bottom-swiper {
padding-bottom: 100px;
}
#service .bottom-swiper .nav-swiper {
margin: -100px 0 0;
}
#service .bottom-swiper .nav-swiper .tit {
text-align: center;
margin-top: 5px;
}
#service .bottom-swiper .nav-swiper .swiper-slide {
padding-top: 0;
}
#service .bottom-swiper .nav-swiper .swiper-slide.swiper-slide-active {
padding-top: 100px;
}
#service .bottom-swiper .bg {
top: 180px;
}
@media (max-width: 800px) {
#service .phs {
width: 15em;
height: 15em;
}
#service .top-box {
flex-wrap: wrap;
}
#service .top-box .left-info {
width: 100%;
margin-bottom: 30px;
}
#service .top-box .left-info .text-node {
margin: 30px 0 ;
}
#service .bottom-swiper {
padding-bottom: 0;
margin-top: 0;
padding-top: 0;
height: auto;
}
#service .bottom-swiper .nav-swiper {
margin: -50px 0 0;
}
#service .bottom-swiper .nav-swiper .swiper-slide.swiper-slide-active {
padding-top: 50px;
}
#service .bottom-swiper .bg {
top: 180px;
}
}
.service-lists .ul li {
background-image: url('../images/bg12.jpg');
height: 1000px;
}
.service-lists .ul li a {
height: 100%;
box-sizing: border-box;
}
.service-lists .ul li a .main {
position: relative;
width: 100%;
height: 100%;
}
.service-lists .ul li a .info {
width: 40%;
}
.service-lists .ul li a .info .same-sub-title {
padding-bottom: 70px;
margin-bottom: 70px;
border-bottom: 1px solid #dcdee1;
}
.service-lists .ul li a .info .more {
margin-top: 85px;
}
.service-lists .ul li a .right-box {
width: 50%;
height: 715px;
position: relative;
}
.service-lists .ul li a .right-box .phs {
position: absolute;
top: 100px;
left: -50px;
z-index: 100;
}
.service-lists .ul li a .right-box .oppress {
width: 100%;
height: 100%;
border-radius: 20px;
}
.service-lists .ul li a:hover .gray-more {
color: #fff;
background-color: #006a8f;
border-color: #006a8f;
}
.service-lists .ul li:nth-of-type(2n) {
background-image: url('../images/bg13.jpg');
}
.service-lists .ul li:nth-of-type(2n) a .main .info {
padding-left: 60%;
}
.service-lists .ul li:nth-of-type(2n) a .right-box {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.service-lists .ul li:nth-of-type(2n) a .right-box .phs {
left: auto;
right: -50px;
}
@media (max-width: 1480px) {
.service-lists .ul li {
height: 800px;
}
.service-lists .ul li a .right-box {
height: 600px;
}
}
@media (max-width: 800px) {
.service-lists .ul li {
height: auto;
}
.service-lists .ul li a .main {
flex-wrap: wrap;
}
.service-lists .ul li a .info {
width: 100%;
}
.service-lists .ul li a .info .same-sub-title {
padding-bottom: 30px;
margin-bottom: 30px;
border-bottom: 1px solid #dcdee1;
}
.service-lists .ul li a .info .more {
margin-top: 25px;
}
.service-lists .ul li a .right-box {
height: 300px;
width: 100%;
margin-top: 80px;
}
.service-lists .ul li a .right-box .phs {
top: -40px;
left: 0;
}
.service-lists .ul li:nth-of-type(2n) a .main .info {
padding-left: 0;
}
.service-lists .ul li:nth-of-type(2n) a .right-box {
position: relative;
top: 0;
left: 0;
transform: none;
}
.service-lists .ul li:nth-of-type(2n) a .right-box .phs {
top: -40px;
left: 0;
}
}
#institutions {
background-image: url('../images/bg14.jpg');
}
#institutions .sub {
margin-top: 30px;
}
#institutions .content .left-box {
width: 50%;
position: relative;
padding-top: 70px;
}
#institutions .content .left-box .phs {
width: 8em;
height: 8em;
position: absolute;
top: 0;
right: 0;
}
#institutions .content .right-box {
width: 45%;
}
#institutions .content .right-box .search-form {
padding-bottom: 60px;
margin-bottom: 60px;
border-bottom: 1px solid #dcdee1;
}
#institutions .content .right-box .search-form .select-address .select-box {
position: relative;
border-width: 1px;
border-color: rgba(48, 50, 51, 0.5);
border-style: solid;
border-radius: 8px;
background-color: transparent;
height: 54px;
width: 160px;
margin-right: 35px;
}
#institutions .content .right-box .search-form .select-address .select-box::after {
content: "\e665";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-family: "icon";
}
#institutions .content .right-box .search-form .select-address .select-box select {
width: 100%;
padding: 0 12px;
}
#institutions .content .right-box .search-form .submit-btn {
width: 160px;
height: 56px;
border-radius: 8px;
border-width: 1px;
border-color: rgba(48, 50, 51, 0.5);
border-style: solid;
text-align: center;
line-height: 56px;
cursor: pointer;
transition: all .4s ease;
}
#institutions .content .right-box .search-form .submit-btn:hover{
color: #fff;
background-color: #006a8f;
}
#institutions .content .right-box .address-lists {
max-height: 580px;
overflow-y: auto;
}
#institutions .content .right-box .address-lists ul li {
margin-bottom: 25px;
}
#institutions .content .right-box .address-lists ul li .add {
margin-top: 10px;
}
#institutions .content .right-box .address-lists ul li .add .icon-box {
border-width: 1px;
border-color: rgba(48, 50, 51, 0.5);
border-style: solid;
border-radius: 50%;
width: 40px;
height: 40px;
margin-right: 10px;
}
#institutions .content .right-box .address-lists ul li .add span {
flex: 1;
}
@media (max-width: 800px) {
#institutions .content {
flex-wrap: wrap;
}
#institutions .content .left-box {
width: 100%;
}
#institutions .content .right-box {
width: 100%;
}
#institutions .content .right-box .search-form {
padding-bottom: 30px;
margin-bottom: 30px;
flex-wrap: wrap;
}
#institutions .content .right-box .search-form .select-address {
margin-bottom: 20px;
}
#institutions .content .right-box .search-form .submit-btn {
width: 100%;
}
#institutions .content .right-box .address-lists {
max-height: 400px;
overflow-y: auto;
}
}
.channels {
position: relative;
}
.channels .ul {
margin-top: 60px;
}
.channels .ul li {
width: 30%;
height: 318px;
border-width: 1px;
border-color: rgba(68, 138, 163, 0.2);
border-style: solid;
border-radius: 20px;
background-image: url('../images/svg.png');
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
text-align: center;
position: relative;
}
.channels .ul li::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background-color: #006a8f;
background-image: url('../images/svg.png');
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transition: all 0.4s ease;
z-index: 1;
border-radius: 20px;
}
.channels .ul li .code-box,
.channels .ul li .pic-box,
.channels .ul li p,
.channels .ul li .same-circle {
position: relative;
z-index: 9;
}
.channels .ul li p {
margin: 15px 0 35px;
}
.channels .ul li .icon-box {
width: 120px;
height: 120px;
border-radius: 50%;
background-color: #4c96b0;
margin: 0 auto;
}
.channels .ul li .icon-box .icon {
font-size: 50px;
}
.channels .ul li .code-box {
border-radius: 10px;
background-color: #f8f8f8;
width: 150px;
height: 150px;
overflow: hidden;
display: none;
margin: 0 auto;
}
.channels .ul li p{
padding-bottom: 2px;
}
.channels .ul li:nth-of-type(2) p{
position: relative;
display: inline-block;
}
.channels .ul li:nth-of-type(2) p:hover::after{
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background-color: #fff;
}
.channels .ul li .code-box img {
width: 100%;
height: 100%;
}
.channels .ul li:nth-of-type(1) .pic-box {
border-radius: 10px;
background-color: #f8f8f8;
width: 150px;
height: 150px;
overflow: hidden;
}
.channels .ul li:nth-of-type(1) .pic-box img {
width: 100%;
height: 100%;
}
.channels .ul li:nth-of-type(3) .icon-box .icon {
font-size: 36px;
}
.channels .ul li:not(:first-child):hover .pic-box {
display: none;
}
.channels .ul li:not(:first-child):hover .code-box {
display: block;
}
.channels .ul li:hover::before {
height: 100%;
}
.channels .ul li:hover p {
color: #fff;
}
.channels .ul li:hover .color-circle i {
background-color: #fff;
}
.channels .ul li:hover .color-circle i:nth-of-type(2) {
background-color: rgba(255, 255, 255, 0.5);
}
.channels .ul li:hover .color-circle i:nth-of-type(3) {
background-color: rgba(255, 255, 255, 0.3);
}
@media (max-width: 800px) {
.channels .ul {
margin-top: 40px;
flex-wrap: wrap;
}
.channels .ul li {
width: 100%;
height: 318px;
margin-bottom: 30px;
}
}
#page-news {
background-image: url('../images/bg15.jpg');
}
#page-news .left-box {
width: 40%;
}
#page-news .left-box .bottom-pic {
margin-top: -40px;
}
#page-news .left-box .bottom-pic .en-box {
margin-top: -20px;
padding-right: 18%;
}
#page-news .left-box .bottom-pic .Mont {
font-size: 5em;
opacity: 0.08;
text-transform: uppercase;
font-style: italic;
}
#page-news .left-box .bottom-pic .Mont.bottom {
text-align: right;
}
#page-news .content {
width: 60%;
height: 670px;
margin-left: -10%;
}
#page-news .content .left-news {
width: 41%;
}
#page-news .content .left-news .item:not(:last-child) {
margin-bottom: 33px;
}
#page-news .content .left-news .item .oppress {
width: 100%;
height: 200px;
box-sizing: border-box;
transition: all 0.4s ease;
border-radius: 20px;
}
#page-news .content .left-news .item .oppress img {
transform: scale(1.05);
}
#page-news .content .left-news .item.on .oppress {
border: 5px solid #006a8f;
}
#page-news .content .left-news .item.on .oppress img {
transform: scale(1);
}
#page-news .content .middle-box {
width: 55%;
height: 100%;
border-radius: 10px;
background-color: #fff;
padding: 75px 65px 70px;
box-sizing: border-box;
}
#page-news .content .middle-box .news-swiper .ul li a .title {
margin-top: 30px;
}
#page-news .content .middle-box .news-swiper .ul li a .text-node {
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin: 50px 0 110px;
padding-top: 50px;
}
#page-news .content .middle-box .news-swiper .ul li a .go {
width: 40px;
height: 40px;
border-radius: 50%;
color: #000;
border: 1px solid rgba(0, 0, 0, 0.6);
opacity: 0.5;
transition: all 0.4s linear;
}
#page-news .content .middle-box .news-swiper .ul li a:hover .title {
color: #006a8f;
}
#page-news .content .middle-box .news-swiper .ul li a:hover .go {
color: #fff;
background-color: #006a8f;
opacity: 1;
border-color: #006a8f;
}
#page-news .content .middle-box .news-swiper .swiper-change {
position: relative;
margin-top: 68px;
margin-left: -10px;
width: 50%;
padding-bottom: 20px;
}
@media (max-width: 1080px) {
#page-news .content {
height: auto;
margin-left: 0%;
margin-top: 30px;
}
#page-news .content .middle-box {
width: 80%;
padding: 30px;
}
#page-news .content .middle-box .news-swiper .ul li a .oppress {
height: 300px;
border-radius: 10px;
margin-bottom: 20px;
}
#page-news .content .middle-box .news-swiper .ul li a .title {
margin-top: 10px;
}
#page-news .content .middle-box .news-swiper .ul li a .text-node {
margin: 30px 0;
padding-top: 30px;
}
#page-news .content .middle-box .news-swiper .swiper-change,
.news-swiper .swiper-pagination{
width: 100%;
}
}
@media (max-width: 800px) {
#page-news .content {
width: 100%;
}
#page-news .content .middle-box {
width: 100%;
padding: 25px;
}
#page-news .content .middle-box .news-swiper .ul li a .oppress {
height: 200px;
}
}
@media (max-width: 800px) {
/*#page-news {*/
/* padding: 20px 0;*/
/*}*/
#page-news .main {
flex-wrap: wrap;
}
#page-news .left-box {
width: 100%;
}
#page-news .left-box .bottom-pic .en-box {
padding-right: 0;
}
#page-news .left-box .bottom-pic .Mont {
font-size: 4em;
margin-left: 0;
}
}
.news-list {
background-image: url('../images/bg16.jpg');
}
.news-list .lists {
margin-right: -4%;
margin-bottom: -70px;
}
.news-list .lists .item {
width: 29.33%;
margin-right: 4%;
margin-bottom: 70px;
}
.news-list .lists .item .oppress {
width: 100%;
height: 300px;
border-radius: 20px;
}
.news-list .lists .item .title {
color: #303233;
margin: 30px 0 20px;
}
.news-list .lists .item:hover .title {
color: #006a8f;
}
@media (max-width: 800px) {
.news-list .lists {
margin-right: 0;
margin-bottom: -30px;
}
.news-list .lists .item {
width: 100%;
margin-right: 0;
margin-bottom: 30px;
}
.news-list .lists .item .oppress {
width: 100%;
height: 250px;
border-radius: 20px;
}
.news-list .lists .item .title {
margin: 20px 0 10px;
}
}
.newsdetails {
padding-top: 64px;
background-image: url('../images/bg17.jpg');
}
.newsdetails .left-slide {
width: 12%;
}
.newsdetails .left-slide .date .year {
margin-bottom: 10px;
}
.newsdetails .left-slide .date {
margin-top: 26px;
}
.newsdetails .left-slide .date p {
margin-top: -5px;
}
.newsdetails .left-slide .btn-box {
margin-top: 65px;
}
.newsdetails .left-slide .btn-box a {
margin-bottom: 20px;
}
.newsdetails .left-slide .btn-box a i {
width: 50px;
height: 50px;
border-width: 1px;
border-color: rgba(0, 0, 0, 0.1);
border-style: solid;
border-radius: 50%;
margin-right: 10px;
box-sizing: border-box;
}
.newsdetails .left-slide .btn-box a.back i,
.newsdetails .left-slide .btn-box a:hover i {
border: none;
color: #fff;
background-color: #006a8f;
}
.newsdetails .article {
width: 90%;
padding: 0 5%;
box-sizing: border-box;
}
.newsdetails .article .tit {
font-size: 48px;
padding-bottom: 55px;
margin-bottom: 60px;
cursor: #303233;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.newsdetails .article .desc {
color: rgba(0, 0, 0, 0.7);
line-height: 1.6;
}
.newsdetails .article .desc a {
display: inline-block;
}
@media (max-width: 1280px) {
.newsdetails .left-slide {
width: 15%;
}
}
@media (max-width: 1024px) {
.newsdetails {
padding-top: 0;
}
.newsdetails .content {
flex-wrap: wrap;
}
.newsdetails .article {
width: 100%;
padding: 0;
}
.newsdetails .left-slide {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.newsdetails .left-slide .date-box {
display: flex;
align-items: center;
}
.newsdetails .left-slide .date-box .date {
margin-top: 0;
margin-left: 30px;
}
.newsdetails .left-slide .date-box .date .day {
font-size: 32px;
}
.newsdetails .left-slide .date-box .date p {
margin-top: -5px;
}
.newsdetails .left-slide .btn-box {
margin-top: 0;
display: flex;
align-items: center;
}
.newsdetails .left-slide .btn-box a {
margin-bottom: 0;
}
.newsdetails .left-slide .btn-box a i {
width: 30px;
height: 30px;
}
.newsdetails .left-slide .btn-box a span {
display: none;
background-color: #ffffffb3;
}
.newsdetails .article {
margin-top: 20px;
}
.newsdetails .article .tit {
margin-top: 20px;
padding-bottom: 12px;
margin-bottom: 20px;
font-size: 25px;
line-height: normal;
}
.newsdetails .article .desc {
font-size: 14px;
}
}
#video {
background-image: url('../images/bg17.jpg');
}
#video .left-box {
position: relative;
}
#video .left-box .swiper-change {
width: 320px;
height: 418px;
position: absolute;
top: 100px;
left: 0;
background-image: url('../images/bg18.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 320px 419px;
}
#video .content {
width: 70%;
}
#video .content .news-swiper {
padding-bottom: 180px;
}
#video .content .video-lists .item {
width: 45%;
}
#video .content .video-lists .item .oppress {
width: 100%;
height: 300px;
border-radius: 20px;
margin-bottom: 30px;
position: relative;
}
#video .content .video-lists .item .oppress::before {
content: '';
position: absolute ;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: rgba(0, 0, 0, 0.6);
transition: all 0.4s ease;
z-index: 9;
}
#video .content .video-lists .item .oppress .play-icon {
position: absolute;
top: 50%;
left: 50%;
z-index: 8;
width: 80px;
height: 80px;
color: #006a8f;
background-color: rgba(255,255,255,.7);
text-align: center;
line-height: 80px;
border-radius: 50%;
opacity: 0;
transform: translate(-50%, -50%);
z-index: 10;
transition: all 0.6s ease;
}
#video .content .video-lists .item .oppress .play-icon:hover{
background-color: #ffffff;
}
#video .content .video-lists .item .oppress .play-icon .icon {
padding-left: 8px;
}
#video .content .video-lists .item .oppress .title {
transition: all 0.4s ease;
}
#video .content .video-lists .item:nth-of-type(2n) {
margin-top: 120px;
}
#video .content .video-lists .item:hover .oppress::before {
opacity: 1;
}
#video .content .video-lists .item:hover .oppress .play-icon {
opacity: 1;
}
#video .content .video-lists .item:hover .title {
color: #006a8f;
}
#video .content .swiper-change {
width: 180px;
position: absolute;
left: 0;
bottom: 80px;
}
@media (max-width: 1024px) {
#video .main {
flex-wrap: wrap;
padding-bottom: 0;
}
#video .left-box .swiper-change {
display: none;
}
#video .content {
width: 100%;
padding-top: 40px;
}
#video .content .news-swiper {
padding-bottom: 100px;
}
#video .content .video-lists .item {
width: 48%;
}
#video .content .video-lists .item .oppress {
width: 100%;
height: 150px;
margin-bottom: 10px;
}
#video .content .video-lists .item .oppress .play-icon {
width: 50px;
height: 50px;
line-height: 50px;
}
#video .content .video-lists .item .oppress .play-icon .icon {
padding-left: 2px;
}
#video .content .video-lists .item:nth-of-type(2n) {
margin-top: 60px;
}
#video .content .swiper-change {
width: 180px;
position: absolute;
left: 0;
bottom: 80px;
}
}
#contact {
background-image: url('../images/bg19.jpg');
}
#contact .content .left-info {
width: 32%;
}
#contact .content .left-info .connect-box {
margin: 70px 0;
}
#contact .content .left-info .connect-box .item {
margin-bottom: 45px;
}
#contact .content .left-info .connect-box .item .icon-box {
width: 58px;
height: 58px;
border-width: 1px;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-radius: 50%;
font-size: 18px;
}
#contact .content .left-info .connect-box .item .txt {
margin-left: 15px;
flex: 1;
}
#contact .content .left-info .connect-box .item .txt .char {
margin-top: 4px;
}
#contact .content .left-info .connect-box .item .txt .char.link:hover{
color: #006a8f;
/*text-decoration: underline;*/
}
#contact .content .left-info .connect-box .item .txt .char.link{
position: relative;
display: inline-block;
}
#contact .content .left-info .connect-box .item .txt .char.link:hover::after{
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background-color: #006a8f;
}
#contact .content .left-info .connect-box .item:hover .icon-box {
animation: shake 0.6s linear forwards;
}
#contact .content .left-info .wechat li .pic {
width: 88px;
height: 88px;
padding: 8px;
}
#contact .content .right-map{
position: relative;
}
#contact .content .right-map .icon{
position: absolute;
top: 42%;
left: 38%;
animation: shake 2s linear infinite;
}
@media (max-width: 1480px){
#contact .content .left-info {
width: 45%;
}
}
@media (max-width: 1024px) {
#contact .content {
flex-wrap: wrap;
}
#contact .content .left-info {
width: 100%;
margin-top: 30px;
}
#contact .content .left-info .connect-box {
margin: 30px 0;
}
#contact .content .left-info .connect-box .item {
margin-bottom: 30px;
}
}
@media (max-width: 800px) {
.connect-channels {
padding-top: 100px;
}
#contact .content .right-map .icon{
width: 100px;
position: absolute;
top: 36%;
left: 32%;
}
}