.main, .wrap, body, html { height:100%; overflow:hidden; padding:0 }
.main .swiper { height:100% }
.main .swiper .swiper-slide { background-position:50% 50%; background-size:cover; position:relative }
.main .swiper .swiper-slide .slide-content { -webkit-transform:translateY(-20px); transform:translateY(-20px); width:70% }
@media screen and (max-width:830px) {
.main .swiper .swiper-slide .slide-content {
-webkit-transform:translateY(-65px);
transform:translateY(-65px);
width:88%
}
}
.main .swiper .swiper-slide .backgroundFill { height:100%; left:0; overflow:hidden; position:absolute; top:0; width:100%; z-index:0 }
.main .swiper .swiper-slide .backgroundFill img { -webkit-animation:brath 15s linear infinite; animation:brath 15s linear infinite; height:100%; -o-object-fit:cover; object-fit:cover; -o-object-position:center; object-position:center; width:100% }
@-webkit-keyframes brath { 0% {
-webkit-transform:scale(1);
transform:scale(1)
}
50% {
-webkit-transform:scale(1.1);
transform:scale(1.1)
}
to { -webkit-transform:scale(1); transform:scale(1) }
}
@keyframes brath { 0% {
-webkit-transform:scale(1);
transform:scale(1)
}
50% {
-webkit-transform:scale(1.1);
transform:scale(1.1)
}
to { -webkit-transform:scale(1); transform:scale(1) }
}
.main .swiper .swiper-slide .block { align-items:center; height:100%; justify-content:center; left:0; position:relative; top:0; z-index:2 }
.main .swiper .page2 .block { align-items:flex-end }
.main .content .copy { align-items:flex-start; color:#000; display:flex; flex-direction:column;text-shadow: #fff 1px 2px 2px;}
.main .content .copy .line1, .main .content .copy .line2 { font-family:MarkProBold; font-size:56px }
@media screen and (max-width:830px) {
.main .content .copy .line1, .main .content .copy .line2 {
font-family:MarkPro;
font-size:4rem;
line-height:1
}
}
.main .content .copy .line2 { font-family:MarkProLight }
@media screen and (max-width:830px) {
.main .content .copy .line2 {
font-size:3.2rem
}
}
.main .content .copy .line3 { font-family:SourceHanSansCNRegular; font-size:48px; margin-top:45px }
@media screen and (max-width:830px) {
.main .content .copy .line3 {
font-size:3.2rem
}
}
.main .content .copy .desc { color:#333; font-family:SourceHanSansCNLight; font-size:19px; line-height:normal; margin-top:16px }
@media screen and (max-width:830px) {
.main .content .copy .desc {
font-size:1.6rem
}
}
.main .content .copy .link-btn { margin-top:32px }
.swiper-wrapper { height:100%; width:100% }
.page1 .more { bottom:100px; color:#fff; font-size:19px; letter-spacing:5px; position:absolute; text-align:center; width:100%; z-index:10 }
.page1 .more a { background-color:hsla(0, 0%, 100%, .1); border:1px solid #fff; border-radius:5rem; cursor:pointer; padding:15px 30px 10px }
@media screen and (max-width:830px) {
.page1 .more a {
padding:10px 20px 5px
}
}
.page1 .swiper-pagination { bottom:57px; position:absolute; z-index:10 }
.page1 .swiper-pagination .swiper-pagination-bullet { background-color:hsla(0, 0%, 100%, .4) }
.page1 .swiper-pagination .swiper-pagination-bullet-active { background-color:#fff }
.page1 .v1 { height:100%; left:0; -o-object-fit:cover; object-fit:cover; pointer-events:none; position:absolute; top:0; width:100%; z-index:0 }
.page1 .content { -webkit-transform:translate3d(0, -10%, 0); transform:translate3d(0, -10%, 0) }
.page1 .content .copy .line1 { font-size:43px; font-size:8.4rem; line-height:1.1; margin:10px auto; text-align:center; }
.page1 .content .copy .desc { color:#000; font-family:SourceHanSansCNRegular; font-size:16px; margin:24px auto; width:500px; text-align:center;}
@media screen and (max-width:830px) {
.page1 .content {
-webkit-transform:translate3d(0, -100px, 0);
transform:translate3d(0, -100px, 0)
}
.page1 .content .copy .line1 {
font-size:4.3rem
}
.page1 .content .copy .line1 span {
display:block
}
.page1 .content .copy .desc {
font-size:1.3rem;
width:85%
}
}
.page2 .slide-content { flex-direction:row; height:88%; justify-content:space-between; -webkit-transform:translateY(0)!important; transform:translateY(0)!important }
.page2 .slide-content .left, .page2 .slide-content .right { height:100%; width:50% }
.page2 .slide-content .left .swiper-slide, .page2 .slide-content .right .swiper-slide { overflow:hidden }
.page2 .slide-content .left .text-block { color:#4d4d4d; font-size:41.6px; line-height:1.3 }
.page2 .slide-content .left .text-block .line { overflow:hidden }
.page2 .slide-content .left .text-block span { -webkit-text-fill-color:transparent; -webkit-background-clip:text; background-image:-webkit-linear-gradient(180deg, #29f19c, #02a1f9); display:block }
.page2 .slide-content .left .text-block:first-child { margin-top:112px }
.page2 .slide-content .left .text-block:nth-child(2) {
margin-top:48px
}
.page2 .slide-content .left .text-block:nth-child(3) {
margin-top:16px
}
.page2 .slide-content .left .swiper-slide:first-child .text-block:nth-child(2) {
font-size:29.6px;
line-height:1.3
}
.page2 .slide-content .left .text-block-title { color:#4d4d4d; font-family:MarkProLight; font-size:28.8px; line-height:normal }
.page2 .slide-content .left .text-block-title span { -webkit-text-fill-color:initial; -webkit-background-clip:initial; background-image:none }
.page2 .slide-content .left .text-block-en { font-family:MarkProMedium }
.page2 .slide-content .left .text-block-zh { font-family:SourceHanSansCNMedium }
.page2 .slide-content .left .swiper-pagination { align-items:flex-end; bottom:10%; justify-content:flex-start; left:0; position:absolute; width:100%; z-index:1 }
.page2 .slide-content .left .swiper-pagination .swiper-pagination-bullet { background-color:transparent; border-bottom:1.5px solid #000; border-radius:0; height:8px; margin:0 4px; opacity:.2; width:128px }
.page2 .slide-content .left .swiper-pagination .swiper-pagination-bullet-active { background-color:none; background-image:-webkit-linear-gradient(180deg, #29f19c, #02a1f9); border:none; opacity:1 }
@media screen and (max-width:830px) {
.page2 .slide-content .left .swiper-pagination {
bottom:5%;
justify-content:center
}
.page2 .slide-content .left .swiper-pagination .swiper-pagination-bullet {
height:6.5px;
width:64px
}
}
.page2 .slide-content .right { width:48% }
.page2 .slide-content .right .page2-swiper2 .swiper-slide img { height:100%; -o-object-fit:cover; object-fit:cover; -o-object-position:center; object-position:center }
@media screen and (max-width:830px) {
.page2 .slide-content {
display:flex;
flex-direction:column-reverse;
height:100%;
justify-content:flex-end;
width:100%!important
}
.page2 .slide-content .left {
height:40%;
margin:0 auto;
width:100%;
width:87.2%
}
.page2 .slide-content .left .text-block {
font-size:24px;
margin-top:0
}
.page2 .slide-content .left .text-block:first-child {
font-size:16px;
margin-top:48px
}
.page2 .slide-content .left .text-block:nth-child(2) {
margin-top:16px
}
.page2 .slide-content .left .text-block:nth-child(3) {
margin-top:0
}
.page2 .slide-content .left .text-block .clean span {
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
background-image:-webkit-linear-gradient(180deg, #02a1f9, #02a1f9)!important
}
.page2 .slide-content .left .text-block-en, .page2 .slide-content .left .text-block-zh {
align-items:flex-start;
display:flex;
flex-wrap:wrap
}
.page2 .slide-content .left .text-block-en .line:first-child, .page2 .slide-content .left .text-block-zh .line:first-child {
margin-right:4px
}
.page2 .slide-content .right {
height:60%;
width:100%
}
}
.page4 .content .copy .desc { color:#333 }
.page6 .content { line-height:normal }
.nav { background-color:transparent; color:#262626 }
.nav .main .nav-item .tools-item .search-item .search-btn i.icon-search { border-color:#fff }
.nav .item-block i.icon, .nav .item-block p { color:#fff }
@media screen and (min-width:961px) {
.nav .item-block:hover i.icon, .nav .item-block:hover p {
color:#09acdd!important
}
}
.nav .item-block.active { color:#09acdd }
.nav .item-block i.icon { display:none }
.nav.normal-nav { -webkit-animation:normal-nav .5s linear forwards;
animation:normal-nav .5s linear forwards
}
.nav.normal-nav i.icon, .nav.normal-nav p { color:#262626 }
.nav.normal-nav .main .nav-item .tools-item .search-item .search-btn i.icon-search { border-color:#262626 }
.nav.light-nav { -webkit-animation:light-nav .5s linear forwards;
animation:light-nav .5s linear forwards
}
.nav.light-nav .main .nav-item .tools-item .search-item .search-btn i.icon-search { border-color:#fff }
.nav.light-nav i.icon, .nav.light-nav p { color:#fff }
.nav:hover { background-color:#fff }
.nav:hover.light-nav { -webkit-animation:none; animation:none }
.nav:hover .main .nav-item .tools-item .search-item .search-btn i.icon-search { border-color:#000 }
.nav:hover .item-block i.icon, .nav:hover .item-block p { color:#262626 }
@media screen and (min-width:961px) {
.nav:hover .item-block:hover p {
color:#09acdd
}
}
@media screen and (max-width:830px) {
.nav {
background-color:#fff!important;
color:#262626!important
}
.nav.light-nav, .nav.normal-nav {
-webkit-animation:none;
animation:none
}
}
@-webkit-keyframes normal-nav { 0% {
-webkit-transform:translate3d(0, -70px, 0);
transform:translate3d(0, -70px, 0)
}
to { background-color:#fff; -webkit-transform:translateZ(0); transform:translateZ(0) }
}
@keyframes normal-nav { 0% {
-webkit-transform:translate3d(0, -70px, 0);
transform:translate3d(0, -70px, 0)
}
to { background-color:#fff; -webkit-transform:translateZ(0); transform:translateZ(0) }
}
@-webkit-keyframes light-nav { 0% {
background-color:#fff
}
to { background-color:transparent }
}
@keyframes light-nav { 0% {
background-color:#fff
}
to { background-color:transparent }
}