﻿/* @font-face {
    font-family: Noto Sans SC;
    font-weight: 100;
    src: url(../fonts/fonts/NotoSansSC-Regular.64778228.woff2) format("woff2"), url(../fonts/fonts/NotoSansSC-Thin.c695f43e.woff) format("woff"), url(../fonts/fonts/NotoSansSC-Thin.30fd1899.otf) format("opentype")
}

@font-face {
    font-family: Noto Sans SC;
    font-weight: 300;
    src: url(../fonts/fonts/NotoSansSC-Light.c2cbe070.woff2) format("woff2"), url(../fonts/fonts/NotoSansSC-Light.f27b741b.woff) format("woff"), url(/fonts/fonts/NotoSansSC-Light.ce5a6e16.otf) format("opentype")
}

@font-face {
    font-family: Noto Sans SC;
    font-weight: 400;
    src: url(../fonts/fonts/NotoSansSC-Regular.64778228.woff2) format("woff2"), url(/fonts/fonts/NotoSansSC-Regular.a13acdc0.woff) format("woff"), url(/fonts/fonts/NotoSansSC-Regular.4809f99c.otf) format("opentype")
}

@font-face {
    font-family: Noto Sans SC;
    font-weight: 500;
    src: url(../fonts/fonts/NotoSansSC-Medium.846b9f0e.woff2) format("woff2"), url(/fonts/fonts/NotoSansSC-Medium.9ab10683.woff) format("woff"), url(/fonts/fonts/NotoSansSC-Medium.b66e8f6d.otf) format("opentype")
}

@font-face {
    font-family: Noto Sans SC;
    font-weight: 700;
    src: url(../fonts/fonts/NotoSansSC-Bold.276991d3.woff2) format("woff2"), url(/fonts/fonts/NotoSansSC-Bold.d9a15ec9.woff) format("woff"), url(/fonts/fonts/NotoSansSC-Bold.68638deb.otf) format("opentype")
}

@font-face {
    font-family: Noto Sans SC;
    font-weight: 900;
    src: url(../fonts/fonts/NotoSansSC-Black.1fc5893e.woff2) format("woff2"), url(/fonts/fonts/NotoSansSC-Black.5357a23c.woff) format("woff"), url(/fonts/fonts/NotoSansSC-Black.6e1f3f1c.otf) format("opentype")
} */
body {
   font-family: SimSun;
   font-size: 16px;
}
::-webkit-scrollbar {
   width: 5px;
   height: 5px;
}

::-webkit-scrollbar-track-piece {
   background-color: rgba(0, 0, 0, 0.2);
   -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
   height: 5px;
   background-color: rgba(125, 125, 125, 0.7);
   -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
   width: 5px;
   background-color: rgba(125, 125, 125, 0.7);
   -webkit-border-radius: 6px;
}
.app-home-business {
   background-color: #fbfbfb;
   overflow: hidden;
}
.app-container {
   margin-left: auto;
   margin-right: auto;
   max-width: 1400px;
   width: 94%;
}
.app-home-business .wrapper {
   display: flex;
   padding: 6% 0;
}
.app-home-business .header {
   display: flex;
   flex: 0 0 auto;
   flex-direction: column;
   justify-content: center;
   transform: translateY(-24px);
   width: 30%;
}

.app-page-title .cn {
   color: #C00000;
   font-size: 40px;
   /*font-weight: 700;*/
   line-height: 1.4;
}
.app-page-title .en {
   color: rgba(0,0,0,.8);
   font-size: 14px;
   font-weight: 300;
   text-transform: uppercase;
}
.app-page-link {
   align-items: center;
   color: #C00000;
   display: inline-flex;
   font-size: 20px;
   height: 52px;
   justify-content: center;
   line-height: 1;
   padding: 0 2em;
   position: relative;
   transition: all .6s ease;
   white-space: nowrap;
   border: 0;
}
.app-page-link span {
   position: relative;
   z-index: 2;
}
.app-page-link:after {
   background: url(/upload/2023/09/202309071997usk.png) no-repeat 50%/cover;
   opacity: 0;
}
.app-home-business .header .app-page-link {
   margin-top: 50px;
   
}
.app-page-link:before {
   border: 2px solid #C00000;
}
.app-page-link:hover:after {
   opacity: 1;
}
.app-page-link:hover {
   border-color: transparent;
   color: #fff;
}

.app-page-link:after, .app-page-link:before {
   bottom: 0;
   content: "";
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
   transition: opacity .6s ease;
}


.app-home-business .main {
   flex: 1 1 auto;
}
.app-home-business .main .list {
   display: flex;
   flex-wrap: wrap;
   margin: -60px -20px 0;
}
.app-home-business .main .list .item {
   margin-top: 60px;
   padding: 20px;
   width: 25%;
}
.app-home-business .main .list .item .inner {
   font-size: 14px;
}
.app-home-business .main .list .item .inner .logo {
   align-items: center;
   display: flex;
   height: 60px;
   width: 120px;
}
.app-home-business .main .list .item .inner .logo img {
   max-height: 100%;
   max-width: 100%;
}
.app-home-business .main .list .item .inner .name {
   font-size: 22px;
   margin-top: 0.25em;
}
*, :after, :before {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}


.app-home-about .row {
   align-items: center;
   display: flex;
   padding: 12% 0;
}
.app-home-about .row .col:first-child {
   flex: 0 0 auto;
   margin-right: 100px;
   width: 360px;
}
.app-page-title+*, .app-page-title+*+* {
   margin-top: 40px;
}
.app-element-intro {
   color: hsla(0,0%,5%,.8);
   font-size: 14px;
   line-height: 1.8;
   text-align: justify;
}

.app-home-about .row .col:last-child {
   width: calc(100% - 460px);
}
.app-home-about .row .col {
   flex: 1 1 auto;
}
.col {
   -ms-flex-preferred-size: 0;
   -webkit-box-flex: 1;
   -ms-flex-positive: 1;
   -webkit-flex-basis: 0;
   flex-basis: 0;
   -webkit-flex-grow: 1;
   flex-grow: 1;
   max-width: 100%;
}
.app-home-about .number {
   display: flex;
   justify-content: flex-end;
}

.products a {
   display: block;
   width: 18.4%;
   box-sizing: border-box;
   background-color: #b4b8ba;
   padding: 25px;
   margin-right: 2%;
   transition: all .3s;
}
.products a .cont {
   display: block;
   width: 100%;
   box-sizing: border-box;
   border: 2px solid #fff;
   padding: 70px 20px;
}
.products a .cont h3 {
   font-size: 40px;
   color: #fff;
   font-weight: bold;
   text-transform: uppercase;
}


.app-news-views {
   align-items: center;
   display: flex;
   padding:6% 0;
}
.app-news-views-header {
   flex: 0 0 auto;
   width: 320px;
}
.app-news-views-main {
   flex: 0 0 auto;
   padding-left: 80px;
   width: calc(100% - 320px);
}
.app-news-views-list {
   align-items: stretch;
   display: flex;
   flex-wrap: wrap;
   margin: -17px;
}
.app-user-views-list {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    margin: -17px;
 }
 .app-user20-views-list {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    margin: -17px;
 }
.app-page-news-item {
   flex: 0 0 auto;
   padding: 15px;
   width: 33.33%;
}
.app-page-news-item .inner {
   color: #333;
   display: block;
   font-size: 18px;
   height: 100%;
   width: 100%;
}
.app-page-news-item .inner .image {
   overflow: hidden;
   width: 100%;
}
.app-page-news-item .inner .image .picture {
   background-position: 50%;
   background-repeat: no-repeat;
   background-size: cover;
   height: 0;
   padding-bottom: 75%;
   transition: transform .6s ease;
   width: 100%;
}
.app-page-news-item .inner .intro {
   padding: 1em 20% 1em 0;
   text-align: left;
}
.app-page-news-item .inner .intro .title {
   font-weight: 500;
   line-height: 1.4;
   font-size: 18px;
}
.app-page-news-item .inner .intro .time {
   color: #666;
   font-size: 12px;
   margin-top: 1em;
   opacity: .75;
}
.app-page-news-item .inner:hover .image .picture {
   transform: scale(1.2);
}


@media screen and (max-width: 1024px){
   .app-home-business .header {
       padding: 30px 0 15px;
       transform: translateY(0);
       width: 100%;
   }
   .app-home-business .wrapper {
       flex-direction: column;
   }
   .app-home-business .header .app-page-link {
       margin-top: 3%;
   }
} 
@media screen and (max-width: 1200px){
   .app-page-title .cn {
       font-size: 30px;
   }
   .app-page-title .en {
       font-size: 12px;
   }
   .app-page-link {
       font-size: 18px;
       height: 48px;
   }
   .app-news-views-header {
       width: 240px;
   }
} 
@media screen and (max-width: 1000px) {
   .app-page-title .cn {
       font-size: 26px;
   }
}
@media screen and (max-width: 800px) {
   .app-page-link {
       font-size: 14px;
       height: 40px;
   }
}
@media screen and (max-width: 600px) {
   .app-home-business .main .list .item {
       width: 33.33%;
   }
   .app-page-link {
       font-size: 12px;
       height: 36px;
   }
   .app-page-link:before {
       border-width: 1px;
   }
}
@media screen and (max-width: 450px){
   .app-home-business .main .list .item {
       width: 50%;
   }
} 

@media screen and (max-width: 900px) {
   .app-news-views-header {
       width: 100%;
   }
   .app-news-views {
       flex-wrap: wrap;
   }
}


@media screen and (max-width: 1200px) {
.app-news-views-main {
       padding-left: 60px;
       width: calc(100% - 240px);
   }
}

@media screen and (max-width: 1000px) {
   .app-news-views-list {
       margin: -12px;
   }
   .app-news-views-main {
       padding-left: 40px;
   }
}
@media screen and (max-width: 960px) {
.app-news-views {
       padding: 40px 0;
   }
}

@media screen and (max-width: 900px) {
.app-news-views-main {
       margin-top: 5vw;
       padding-left: 0;
       width: 100%;
   }
}

@media screen and (max-width: 1200px) {
.app-page-news-item .inner .intro .title{
       font-size: 16px;
   }
}
@media screen and (max-width: 1000px){
   .app-page-news-item .inner .intro .title {
           font-size: 14px;
       }
}

@media screen and (max-width: 700px) {
   .app-page-news-item {
       width: 50%;
   }
}

.app-home-about .number .item:not(:first-child) {
   margin-left: 50px;
}


@media screen and (max-width: 1440px) {
.app-home-about .row .col:last-child {
       width: calc(100% - 420px);
   }
}
@media screen and (max-width: 1200px){
.app-home-about .row .col:last-child {
       width: calc(100% - 340px);
   }
       .app-page-title+*,
       .app-page-title+*+* {
           margin-top: 35px;
       }
} 
@media screen and (max-width: 1000px) {
   .app-home-about .row .col:first-child {
       margin-right: 0;
       width: 100%;
   }

   .app-home-about .row .col:last-child {
       width: 100%;
   }

   .app-home-about .row {
       flex-wrap: wrap;
   }
       .app-home-about .number {
           justify-content: space-between;
           margin-top: 40px;
       }
}

.app-element-number .count img{
   max-width: 100%;
}





.app-page-banner {
   height: 34.72vw;
   max-height: 500px;
   min-height: 452px;
   position: relative;
   z-index: 1;
}
.app-page-banner .app-container {
   height: 100%;
   position: relative;
   z-index: 1;
}
.app-page-banner .content {
   align-items: flex-end;
   display: flex;
   height: 100%;
}


.app-page-banner .bg.pc {
   display: block;
}

.app-page-banner .bg {
   background-position: 50%;
   background-repeat: no-repeat;
   background-size: cover;
   bottom: 0;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
}
.app-page-banner .content .text {
   align-items: flex-end;
   color: #fff;
   display: flex;
   flex-wrap: wrap;
   font-size: 80px;
   line-height: 1.25;
   padding-bottom:100px;
   font-weight: 600;
}
@media screen and (max-width: 1600px){
   .app-page-banner .content .text {
       font-size: 70px;
       padding-bottom: 90px;
   }
}
@media screen and (max-width: 1200px){
   .app-page-banner .content .text {
           font-size: 60px;
           padding-bottom: 80px;
       }
}
@media screen and (max-width: 1000px){
   .app-page-banner .content .text {
           font-size: 50px;
           padding-bottom: 70px;
       }
}
@media screen and (max-width: 800px){
   .app-page-banner .content .text {
           font-size: 40px;
           padding-bottom: 60px;
       }
}
@media screen and (max-width: 600px){
   .app-page-banner .content .text {
           font-size: 30px;
           padding-bottom: 50px;
       }
}
.app-page-banner .bg.m {
   display: none;
}
@media screen and (max-width: 600px) {
   .app-page-banner .bg.m {
       display: block;
   }
}
.app-page-banner .content .text .cn {
   flex: 0 0 auto;
   font-size: 2em;
   font-weight: 700;
   margin-bottom: 20px;
   margin-right: 0.5em;
   max-width: 5em;
}



.app-page-breadcrumbs {
   background-color: #fff;
   border-bottom: 1px solid #eee;
   height: 80px;
   overflow: hidden;
   position: relative;
   z-index: 1;
}
.app-page-breadcrumbs .app-container {
   height: 100%;
}
.app-page-breadcrumbs .wrapper {
   align-items: center;
   display: flex;
   font-size: 16px;
   height: 100%;
   justify-content: space-between;
   position: relative;
}
.app-page-breadcrumbs .wrapper .breadcrumbs {
   align-items: center;
   color: #666;
   display: flex;
   line-height: 1;
   padding-right: 2em;
   position: relative;
   white-space: nowrap;
   z-index: 5;
}
.app-page-breadcrumbs .wrapper .breadcrumbs .home {
   display: inline-flex;
   margin-right: 0.5em;
}
.app-page-breadcrumbs .wrapper .breadcrumbs a {
       transition: .6s ease;
       color: #666;
}
.app-page-breadcrumbs .wrapper .menus {
   align-items: center;
   color: #666;
   display: flex;
   justify-content: flex-end;
   line-height: 1;
   position: absolute;
   right: 0;
   transition: z-index .3s ease;
   transition-delay: .6s;
   white-space: nowrap;
   z-index: 1;
}
.app-page-breadcrumbs .wrapper .menus a{
   color: #666;
}
.app-page-breadcrumbs .wrapper .menus a+a {
   margin-left: 2em;
   transition: .6s ease;
  
   
}
.app-page-breadcrumbs .wrapper .breadcrumbs a:hover {
   color: #C00000;
}
.app-page-breadcrumbs .wrapper .menus a:hover {
   color: #C00000;
}
.app-page-breadcrumbs .wrapper .breadcrumbs .home svg {
   fill: currentColor;
   height: 1em;
   width: 1em;
}

@media screen and (max-width: 1200px){
   .app-page-breadcrumbs {
       height: 68px;
   }
   .app-page-breadcrumbs .wrapper {
       font-size: 14px;
   }
} 
@media screen and (max-width: 1000px) {
   .app-page-breadcrumbs {
           height: auto;
       }
   .app-page-breadcrumbs .wrapper {
       flex-wrap: wrap;
       font-size: 14px;
   }
   .app-page-breadcrumbs .wrapper .breadcrumbs,.app-page-breadcrumbs .wrapper .menus {
       flex: 0 0 auto;
       height: 58px;
       overflow-x: auto;
       width: 100%;
   }
   .app-page-breadcrumbs .wrapper .menus {
       justify-content: flex-start;
       position: static;
   }
   .app-page-breadcrumbs:after {
       background-color: hsla(0, 0%, 93%, .75);
       content: "";
       display: block;
       height: 1px;
       left: 0;
       position: absolute;
       right: 0;
       top: 58px;
   }
}


.app-news-views-item {
   padding: 17px;
   width: 50%;
}
.app-news-views-item .inner {
   background: linear-gradient(to right bottom, #fbfbfb, #fff);
   border: 1px solid #f4f4f4;
   box-shadow: 6px 6px 0 rgba(0, 66, 105, .08);
   display: flex;
   flex-direction: column;
   font-size: 14px;
   height: 150px;
   justify-content: space-between;
   padding: 1em 1.25em;
   transition: box-shadow .6s ease, background .6s ease;
   width: 100%;
}
.app-news-views-item .inner {
   background: linear-gradient(to right bottom, #fbfbfb, #fff);
   border: 1px solid #f4f4f4;
   box-shadow: 6px 6px 0 rgba(0, 66, 105, .08);
   display: flex;
   flex-direction: column;
   font-size: 14px;
   height: 150px;
   justify-content: space-between;
   padding: 1em 1.25em;
   transition: box-shadow .6s ease, background .6s ease;
   width: 100%;
}
.app-news-views-item .inner .title {
   font-size: 18px;
   font-weight: 500;
}
.app-news-views-item .inner .time {
   color: #666;
}
@media screen and (max-width: 550px) {
.app-news-views-item {
       width: 100%;
   }
}
@media screen and (max-width: 1000px) {
.app-news-views-item {
       padding: 12px;
   }
}
@media screen and (max-width: 1200px) {
.app-news-views-item .inner .title {
       font-size: 16px;
   }
}

.app-news-views-item .inner:hover {
   background: #fff;
   box-shadow: 8px 8px 0 rgba(0, 66, 105, .15);
}

.app-page-breadcrumbs .wrapper .breadcrumbs a:not(.home)+:before,
.app-page-breadcrumbs .wrapper .breadcrumbs span:not(.home)+:before {
   content: ">";
   margin: 0 .25em;
}

.app-page-list-article {
   padding: 60px 0;
}
.app-page-list-article .item {
   align-items: center;
   display: flex;
   justify-content: space-between;
   padding: 40px;
   position: relative;
   transition: transform .8s ease, opacity .8s ease, box-shadow .3s ease;
}
.app-page-list-article .item:before {
   border: 1px solid #eee;
   bottom: 0;
   left: 0;
   opacity: 0;
   pointer-events: none;
   right: 0;
   top: 0;
}
.app-page-list-article .item .main {
   align-items: flex-start;
   display: flex;
   font-size: 20px;
   line-height: 1.2;
}
.app-page-list-article .item .main .time {
   border-right: 1px solid #eee;
   color: #C00000;
   font-family: DinPro;
   line-height: 1.5;
   margin-right: 2em;
   padding-right: 2em;
   white-space: nowrap;
}
.app-page-list-article .item .main .text .title {
   color: #333;
   font-weight: 500;
   line-height: 1.5;
}
.app-page-list-article .item .image {
   flex: 0 0 auto;
   margin-left: 2em;
   width: 200px;
}
.app-page-list-article .item .image .picture {
   background-position: 50%;
   background-repeat: no-repeat;
   background-size: cover;
   display: block;
   padding-bottom: 75%;
   width: 100%;
}
.app-page-list-article .item:after,
.app-page-list-article .item:before {
   content: "";
   position: absolute;
   transition: opacity .3s ease;
}
.app-page-list-article .item:after {
   background-color: #eee;
   bottom: 0;
   height: 1px;
   left: 0;
   right: 0;
}
.app-page-list-article .item:hover {
   box-shadow: 8px 8px 0 rgba(0, 66, 105, .15);
}
.app-page-list-article .item+.item {
   margin-top: 30px;
}
.app-page-list-article .item:before {
   border: 1px solid #eee;
   bottom: 0;
   left: 0;
   opacity: 0;
   pointer-events: none;
   right: 0;
   top: 0;
}
.app-page-list-article .item:hover:before {
   opacity: 1;
}


@media screen and (max-width: 1200px) {
.app-page-list-article {
       padding: 50px 0;
   }
       .app-page-list-article .item .main {
           font-size: 18px;
       }
}


@media screen and (max-width: 1000px) {
.app-page-list-article .item .main {
       font-size: 16px;
   }
}

@media screen and (max-width: 800px){
   .app-page-list-article .item .main {
           font-size: 14px;
       }
.app-page-list-article .item {
       padding: 30px;
   }
       .app-page-list-article .item .image {
           width: 140px;
       }
} 

@media screen and (max-width: 600px) {
.app-page-list-article .item {
       align-items: stretch;
       padding: 20px 20px 20px 10px;
   }
       .app-page-list-article .item .main {
           flex-direction: column;
           justify-content: space-between;
       }
               .app-page-list-article .item .main .time {
                   border-right: 0;
                   margin-right: 0;
                   margin-top: 2em;
                   order: 1;
                   padding-right: 0;
               }
                               .app-page-list-article .item .image {
                                   margin-left: 1em;
                               }
}



.app-pagination {
   align-items: center;
   color: #666;
   display: flex;
   font-size: 24px;
   justify-content: center;
   padding: 60px 0;
}
.app-page-link-icon {
   padding: 0;
   width: 52px;
}
.app-pagination .m,
.app-pagination .pc {
   align-items: center;
   justify-content: center;
   padding: 0 1em;
}
.app-pagination .m {
   display: none;
}
.app-pagination .pc a+a {
   margin-left: 1em;
}
.app-pagination .disabled {
   cursor: default !important;
   pointer-events: none !important;
}
.app-pagination .pc a.current,
.app-pagination .pc a:hover {
   color: #C00000;
}
@media screen and (max-width: 1000px) {
.app-pagination .pc {
       display: none;
   }
       .app-pagination .m {
           display: flex;
       }
}
.app-page-list-article+.app-pagination {
   padding-top: 0 !important;
}

.h-screen {
   height: 100vh;
}
.w-full {
   width: 100%;
}

@media (min-width: 1200px) {
   .hidden-lg {
       display: none !important;
   }
}

@media (min-width: 768px) and (max-width: 991px) {
   .hidden-sm {
       display: none !important;
   }
}

@media (max-width: 767px) {
   .hidden-xs {
       display: none !important;
   }
}

@media (min-width: 992px) and (max-width: 1199px) {
   .hidden-md {
       display: none !important;
   }
}

.index-banner {
   font-size: 0;
   position: relative;
   overflow: hidden;

   .index-banner-title {
       color: #fff;
       font-weight: 300;

       .btn-more {
           border-radius: 9999px;
           display: inline-flex;
           font-size: 14px;
           position: relative;
           padding-right: 16px;
           color: #fff;

           i {
               position: absolute;
               right: 0;
               top: 50%;
               font-size: 12px;
               margin-top: -6px;
               -webkit-transform: scale(0.8);
               transform: scale(0.8);
               -webkit-transform-origin: right center;
               transform-origin: right center;
           }
       }
   }
}



@media (min-width: 1025px) {
   .index-banner .index-banner-title .btn-more:hover {
       color: $vi;
   }
}

.index-banner .index-banner-title h3{
   font-size: 120px;
   font-weight: 700;
   color: #fff;
}
.index-banner .index-banner-title p{
   font-size: 25px;
   font-weight: 400;
   color: #fff;
 
}
.flex {
   display: flex;
}

.block {
   display: block;
}

.inline {
   display: inline;
}

.inline-block {
   display: inline-block;
}

.overflow-hidden {
   overflow: hidden;
}

.items-center {
   align-items: center;
}

.flex-wrap {
   flex-wrap: wrap;
}

.text-left {
   text-align: left;
}

.text-center {
   text-align: center;
}

.text-right {
   text-align: right;
}

.font-bold {
   font-weight: bold;
}

.absolute {
   position: absolute;
}

.relative {
   position: relative;
}

.object-cover {
   object-fit: cover;
}

.w-full {
   width: 100%;
}

.h-screen {
   height: 100vh;
}

.inset-0 {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}
.fs120 {
   font-size: 120px;
}


.app-page-body {
   background-color: #fff;
}
.app-classification-container {
   min-height: 50vh;
   overflow: hidden;
}
.app-classification,
.app-classification-container {
   
}
.app-classification-page {
   display: flex;
}
.app-classification-side {
   flex: 0 0 auto;
   padding: 60px 0;
   width: 300px;
}
.app-page-title {
   line-height: 1.4;
}
.app-classification-side .menus {
   font-size: 18px;
   padding-right: 1em;
}
.app-page-title+*,
.app-page-title+*+* {
   margin-top: 40px;
}
.app-classification-side .menus .item+.item {
   margin-top: 1em;
}

.app-classification-side .menus .item {
   color: #0c0c0c;
}
.app-classification-side .menus .item.active {
   color: #C00000;
   font-size: 20px;
   font-weight: 500;
}
.app-classification-side .menus .item a {
   color: currentColor;
}
.app-classification-side .menus .item a:hover {
   color: #C00000;
}
.app-classification-main {
   background-color: #fff;
   flex: 1 1 auto;
   min-height: 50vh;
   position: relative;
   width: 100%;
}
.app-classification-main .wrapper {
   padding: 60px;
}
.app-page-logos {
   display: flex;
   flex-wrap: wrap;
   margin: 0 -20px;
   padding: 20px 0;
}
.app-classification-main .wrapper .app-page-logos-item {
   width: 33.33%;
}
@media screen and (max-width: 960px) {
   .app-classification-main .wrapper .app-page-logos-item {
       width: 50%;
   }
   }
.app-page-logos-item {
   align-items: center;
   display: flex;
   flex: 0 0 auto;
   flex-direction: column;
   justify-content: center;
   padding: 20px;
   width: 33.33%;
}
.app-page-logos-item .inner {
   display: block;
   font-size: 18px;
   max-width: 260px;
   width: 100%;
}
.app-page-logos-item .inner .image {
   align-items: center;
   display: flex;
   height: 75px;
   justify-content: center;
   line-height: 0;
   position: relative;
   width: 100%;
}
.app-page-logos-item .inner .image img {
   max-width: 100%;
}
.app-page-logos-item .inner .image:after {
   border: 1px solid #eee;
   bottom: 0;
   content: "";
   display: block;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
   transition: border-color .3s ease;
   z-index: 1;
}

.app-page-content {
   margin-left: auto;
   margin-right: auto;
   max-width: 900px;
}
.app-page-content-header {
   padding: 50px 0;
   text-align: center;
}
.app-page-content h1 {
   font-size: 24px;
   font-weight: 500;
   color: #0c0c0c;
}
.app-page-content-header .extra {
   align-items: center;
   color: #6d7278;
   display: flex;
   flex-wrap: wrap;
   font-size: 14px;
   justify-content: center;
   margin-top: 1em;
}
.app-page-content-header .extra a,
.app-page-content-header .extra span {
   align-items: center;
   color: currentColor;
   display: inline-flex;
   margin: 0 1em;
   white-space: nowrap;
}
.app-page-content-main {
   color: #6c7279;
   font-size: 16px;
   line-height: 1.8;
   padding-bottom: 100px;
}
.app-page-pages {
   border-top: 1px solid #ddd;
   display: flex;
   justify-content: space-between;
   margin-top: 40px;
   padding-bottom: 60px;
   padding-top: 20px;
   width: 100%;
}
.app-page-pages>div:first-child {
   text-align: left;
}
.app-page-pages>div:last-child {
   text-align: right;
}
.app-page-pages>div span {
   font-size: 12px;
   opacity: .5;
}
.app-page-pages>div {
   flex: 0 0 auto;
   font-size: 14px;
   width: 45%;
}


@media screen and (max-width: 600px) {
.app-page-pages {
       flex-direction: column;
   }
       .app-page-pages>div:last-child {
           margin-top: 15px;
           text-align: left;
       }
               .app-page-pages>div {
                   width: 100%;
               }
               
}

@media screen and (max-width: 1000px) {
.app-page-content-main {
       font-size: 14px;
       padding-bottom: 80px;
   }
}

.app-page-content-main p{
   line-height: 1.8;
   margin-bottom: 10px;
}

@media screen and (max-width: 1600px) {
.app-container {
       max-width: 1160px;
   }
}
@media screen and (max-width: 1000px) {
.app-classification-side {
       width: 240px;
   }
       .app-classification-side .menus {
           font-size: 14px;
       }
}

@media screen and (max-width: 960px) {
.app-classification-side {
       padding: 40px 0;
       width: 180px;
   }
}


@media screen and (max-width: 960px){
.app-classification-main .wrapper {
       padding: 40px 20px;
   }
} 

@media screen and (max-width: 800px) {
.app-page-logos {
       margin: 0 -10px;
   }
       .app-classification-page {
           flex-wrap: wrap;
       }
               .app-classification-main {
                   margin-left: -3vw;
                   margin-right: -3vw;
                   width: auto;
               }
}

@media screen and (max-width: 500px){
.app-page-logos-item .inner .image {
       height: 65px;
   }
} 



.app-page-part-1 {
   display: flex;
   padding: 60px 0;
}
.app-page-part-1-header {
   flex: 0 0 auto;
   width: 320px;
}
.app-page-part-1-main {
   flex: 1 1 auto;
   margin-left: 160px;
   width: 100%;
}
.moup-editor-braft p {
   margin: 0;
   min-height: 1em;
}

.app-page-even,
.app-page-zebra-item:nth-child(2n) {
   background-color: #f8f8f8;
}
.app-element-intro {
   color: hsla(0, 0%, 5%, .8);
   font-size: 14px;
   line-height: 1.8;
   text-align: justify;
}
.app-mission .intro h3 {
   color: #000;
   font-size: 24px;
   /*font-weight: 500;*/
}
.app-mission .intro+.intro {
   margin-top: 4em;
}


.app-page-part-14 {
   display: flex;
   margin: 0 -30px;
   padding: 60px 0;
}

.app-page-part-14-header {
   width: 40%;
}

.app-page-part-14-header,
.app-page-part-14-main {
   flex: 0 0 auto;
   padding: 0 30px;
}
.app-page-part-14-main {
   width: 60%;
}
.app-page-part-14-main .image-side img {
   height: auto;
   width: 100%;
}

.app-page-list-member {
   align-items: stretch;
   display: flex;
   flex-wrap: wrap;
   margin: -20px;
}
.app-page-list-member .app-page-list-member-item {
   max-width: 100%;
   width: 50%;
   padding: 17px;
}
.app-page-list-member-item .inner {
   background: linear-gradient(to right bottom, #fbfbfb, #fff);
   border: 1px solid #f4f4f4;
   box-shadow: 6px 6px 0 rgba(0, 66, 105, .08);
   display: flex;
   flex-direction: column;
   font-size: 14px;
   padding: 1em 1.25em;
   transition: box-shadow .6s ease, background .6s ease;
   width: 100%;
   height: 100%;
}
.app-page-list-member-item .inner .name{
       color: #C00000;
       font-size: 22px;
       font-weight: 500;
       padding: 0.5em 0;
       display: flex;
           align-items: flex-start;
           flex-direction: column;
   }
.app-page-list-member-item .name small{
   font-size: 14px;
   color: #666;
}

@media screen and (max-width: 1200px) {
.app-page-part-1-header {
       width: 280px;
   }
       .app-page-part-1-main {
           margin-left: 120px;
       }
}
@media screen and (max-width: 1000px) {
   .app-page-part-1-header {
           width: 240px;
       }
               .app-page-part-1-main {
                   margin-left: 80px;
               }
}


@media screen and (max-width: 960px) {
.app-page-part-1 {
       flex-wrap: wrap;
       padding: 40px 0;
   }
       .app-page-part-1-header {
           width: 100%;
       }
               .app-page-part-1-main {
                   margin-left: 0;
                   margin-top: 40px;
                   width: 100%;
               }
                               .app-page-list-member .app-page-list-member-item {
                                   
                                   width: 100%;
                                  
                               }
}


.app-footer {
   background-color: #C00000;
   color: #fff;
}
.app-footer-main {
   background-color: #303132;
   border-top: 4px solid #C00000;
}
.app-footer-wrapper {
   display: flex;
   justify-content: space-between;
   padding: 40px 0;
}
.app-footer-wrapper .menus {
   display: flex;
   flex: 1 1 auto;
   padding-right: 60px;
}
.app-footer-wrapper .aside,
.app-footer-wrapper .menus dl+dl {
   margin-left: 60px;
}
.app-footer-wrapper .menus dl {
   flex: 1 1 auto;
   width: 16.66%;
}
.app-footer-wrapper dl dt {
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 20px;
   white-space: nowrap;
   color: #9E9E9E;
}
.app-footer a {
   color: #9E9E9E;
}

.app-footer-wrapper .aside {
   flex: 0 0 auto;
}
.app-footer-wrapper dl dt {
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 20px;
   white-space: nowrap;
}
.app-footer-wrapper dl dd {
   font-size: 14px;
   font-weight: 300;
}
.app-footer-aside {
   align-items: center;
   display: flex;
   font-size: 12px;
   font-weight: 300;
   justify-content: space-between;
   padding: 1em 0;
   color: #fff;
}
.app-footer-aside .text{
   color: #fff;
}


@media screen and (max-width: 960px){
   .app-footer-main{
       display: none;
   }
}


.app-page-part-8-header {
   align-items: center;
   display: flex;
   justify-content: space-between;
}
.app-page-part-8 {
   padding: 60px 0;
}
.app-page-part-8-header .more1 {
   margin-top: 0;
}


.app-page-part-2 {
   display: flex;
   padding: 60px 0;
}

.app-form .app-page-part-2-header {
   display: flex;
   padding-top: 12.5%;
}

.app-page-part-2-header {
   flex: 0 0 auto;
   width: 320px;
}
.app-page-part-2-main {
   flex: 1 1 auto;
   margin-right: 160px;
   width: 100%;
}
.app-page-part-2-main .container {
   max-width: 100% !important;
}
.align-items-start {
   -webkit-box-align: start !important;
   -ms-flex-align: start !important;
   -webkit-align-items: flex-start !important;
   align-items: flex-start !important;
}

.justify-content-start {
   -webkit-box-pack: start !important;
   -ms-flex-pack: start !important;
   -webkit-justify-content: flex-start !important;
   justify-content: flex-start !important;
}

.mu-input.has-label {
   min-height: 72px;
}

.mu-input.full-width {
   width: 100%;
}

.mu-input.has-label {
   padding-bottom: 12px;
   padding-top: 28px;
}

.mu-input {
   color: rgba(0, 0, 0, 0.54);
}

.mu-input {
   color: rgba(0, 0, 0, .54);
   display: inline-block;
   font-size: 16px;
   margin-bottom: 16px;
   min-height: 48px;
   padding-bottom: 12px;
   padding-top: 4px;
   position: relative;
   width: 256px;
}
.mu-input-content {
   height: 100%;
   position: relative;
}

.mu-text-field {
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   width: 100%;
}
.col-12 {
   -webkit-box-flex: 0;
   -ms-flex: 0 0 100%;
   -webkit-flex: 0 0 100%;
   flex: 0 0 100%;
   max-width: 100%;
}

.col {
   -ms-flex-preferred-size: 0;
   -webkit-box-flex: 1;
   -ms-flex-positive: 1;
   -webkit-flex-basis: 0;
   flex-basis: 0;
   -webkit-flex-grow: 1;
   flex-grow: 1;
   max-width: 100%;
}
.app-page-part-2-maim {
   flex: 1 1 auto;
   width: 100%;
}
.mu-text-field-input {
   -webkit-box-flex: 1;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background: none;
   border: none;
   border-radius: 0 0 0 0;
   -webkit-box-shadow: none;
   box-shadow: none;
   color: rgba(0, 0, 0, .87);
   display: block;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
   font-family: inherit;
   font-size: inherit;
   font-stretch: inherit;
   font-style: inherit;
   font-variant: inherit;
   font-weight: inherit;
   height: 32px;
   margin: 0;
   outline: none;
   padding: 0;
   position: relative;
   width: 100%;
}
.mu-input-line {
   background-color: rgba(0, 0, 0, 0.12);
}
.mu-input-focus-line {
   border: none;
   bottom: -1px;
   height: 2px;
   left: 0;
   margin: 0;
   position: absolute;
   right: 0;
   -webkit-transform: scaleX(0);
   transform: scaleX(0);
   -webkit-transition: -webkit-transform .45s cubic-bezier(.23, 1, .32, 1);
   transition: -webkit-transform .45s cubic-bezier(.23, 1, .32, 1);
   -o-transition: transform .45s cubic-bezier(.23, 1, .32, 1);
   transition: transform .45s cubic-bezier(.23, 1, .32, 1);
   transition: transform .45s cubic-bezier(.23, 1, .32, 1), -webkit-transform .45s cubic-bezier(.23, 1, .32, 1);
}
.mu-input-line {
   background-color: rgba(0, 0, 0, 0.12);
}
.mu-input-focus-line,
.mu-input__error .mu-input-line {
   background-color: #C00000;
}
.mu-input-content {
   height: 100%;
   position: relative;
}
.mu-input-line {
   background-color: rgba(0, 0, 0, .12);
   border: none;
   bottom: -1px;
   height: 1px;
   left: 0;
   margin: 0;
   position: absolute;
   right: 0;
}
.app-form .mu-input.required .mu-input-label:before {
   color: red;
   content: "*";
}

@media screen and (max-width: 960px) {
.app-page-part-2 {
       flex-wrap: wrap;
       padding: 40px 0;
   }
       .app-form .app-page-part-2-header {
           padding-top: 0;
       }
}


.app-page-zebra .app-page-part-1 {
   padding: 90px 0 !important;
}
.app-page-zebra .app-page-part-1-header {
   flex: 0 0 auto;
   width: 45%;
}


.app-page-zebra .app-page-part-1-main {
   flex: 1 1 auto;
   margin-left: 0 !important;
   width: 100%;
   overflow: hidden;
}
.app-page-zebra .app-page-part-1-main .app-page-intro-grid {
   margin-left: -60px;
   margin-right: -60px;
}

.app-page-intro-grid {
   align-items: stretch;
   display: flex;
   flex-wrap: wrap;
   margin: -20px;
}
.app-page-zebra .app-page-part-1-main .app-page-intro-grid .item {
   padding-left: 60px;
   padding-right: 60px;
}

.app-page-intro-grid .item {
   flex: 0 0 auto;
   padding: 20px;
   width: 50%;
}
.app-page-zebra .app-page-part-1 .app-page-intro-grid .item .inner .title {
   color: #000;
}

.app-page-intro-grid .item .inner .title {
   align-items: center;
   color: #004269;
   display: flex;
   font-size: 24px;
   font-weight: 700;
}
.app-page-intro-grid .item .inner .title .index {
   font-size: 1.12em;
   margin-right: 0.5em;
   /*font-weight: 700;*/
   color: #000;

}
.app-page-intro-grid .item .inner .title .text {
   font-size: 1.12em;
   margin-right: 0.5em;
   /*font-weight: 700;*/
   color: #222;
}
.app-page-intro-grid .item .inner .intro {
   color: #666;
   font-size: 14px;
   line-height: 1.6;
   margin-top: 1em;
   text-align: justify;
   
}

.app-page-part-20-main .item {
   display: flex;
   font-size: 16px;
}
.app-page-part-20-main .item dt {
   color: #000;
   display: flex;
   flex: 0 0 auto;
   font-weight: 600;
   height: 48px;
   justify-content: center;
   margin-right: 1em;
   text-align: center;
}
.app-page-part-20-main .item dd {
   color: #666
}
.app-page-part-20-main .item+.item {
   margin-top: 1.5em;
}
.app-page-zebra-item:nth-child(2n) {
   background-color: #f8f8f8;
}
.app-page-zebra-item p {
   margin: 0;
   min-height: 1em;
}

@media screen and (max-width: 1200px) {
.app-page-part-1-header {
       width: 280px;
   }
}
@media screen and (max-width: 1000px){
.app-page-part-1-header {
       width: 240px;
   }
} 
@media screen and (max-width: 960px) {
.app-page-zebra .app-page-part-1-header {
       width: 100%;
   }
}

@media screen and (max-width: 1200px){
.app-page-intro-grid .item .inner .title {
       font-size: 22px;
   }
} 
@media screen and (max-width: 800px){
.app-page-intro-grid .item .inner .title {
       font-size: 18px;
   }
} 
@media screen and (max-width: 600px) {
.app-page-intro-grid .item {
       padding: 10px;
       width: 100%;
   }
       .app-page-intro-grid {
           margin: -10px;
       }
}
@media screen and (max-width: 960px) {
.app-page-zebra .app-page-part-1 {
       padding: 60px 0 !important;
   }
}

.mouse {
   fill: #fff;
   bottom: 3.5vw;
   height: auto;
   left: 50%;
   max-width: 40px;
   min-width: 30px;
   position: absolute;
   transform: translateX(-50%);
   width: 5vw;
   z-index: 1;
}
.mouse polygon:first-child {
   animation: mouseDown .9s linear 0s infinite;
}

.mouse polygon {
   opacity: 0;
}
.mouse polygon:nth-child(2) {
   animation: mouseDown .9s linear .3s infinite;
}
.mouse polygon:nth-child(3) {
   animation: mouseDown .9s linear .6s infinite;
}
@keyframes mouseDown {

   0%,
   to {
       opacity: 0
   }

   50% {
       opacity: 1
   }
}



.appear-text {
   display: flex;
   flex-direction: column;
}
.appear-text .appear-text-row {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   font-size:4.6vw;
   font-weight: 700;
   color: #fff
}

.kong{
   display: inline-block;
   width: 60px;
}



@media screen and (max-height: 800px), screen and (max-width: 1600px) {
.appear-text .appear-text-row {
           font-size:78px
   }
       .kong {
           width: 50px;
       }
               .index-banner .index-banner-title p{
                   font-size: 18px;
               }
}

@media screen and (max-height: 750px),screen and (max-width:1000px) {
.appear-text .appear-text-row {
       font-size:68px
   }
       .kong {
           width: 40px;
       }
               .index-banner .index-banner-title p {
                   font-size: 16px;
               }
}

@media screen and (max-height: 700px),screen and (max-width:900px) {
.appear-text .appear-text-row {
       font-size:58px
   }
       .kong {
           width: 30px;
       }
                .index-banner .index-banner-title p {
                    font-size: 14px;
                }
}

@media screen and (max-height: 650px),screen and (max-width:580px) {
.appear-text .appear-text-row {
       font-size:48px
   }
       .kong {
           width: 20px;
       }
}

@media screen and (max-height: 500px),screen and (max-width:480px) {
.appear-text .appear-text-row {
       font-size:30px
   }
       .kong {
           width: 10px;
       }
}




@media screen and (min-width: 961px) {
   .app-footer .aos-init:first-child {
       transition-delay: .04s
   }

   .app-footer .aos-init:nth-child(2) {
       transition-delay: .08s
   }

   .app-footer .aos-init:nth-child(3) {
       transition-delay: .12s
   }

   .app-footer .aos-init:nth-child(4) {
       transition-delay: .16s
   }

   .app-footer .aos-init:nth-child(5) {
       transition-delay: .2s
   }

   .app-footer .aos-init:nth-child(6) {
       transition-delay: .24s
   }

   .app-footer .aos-init:nth-child(7) {
       transition-delay: .28s
   }
}





.app-home-banner-video .mobile,
.app-home-banner-video .pc {
   background-repeat: no-repeat;
   background-size: cover;
   height: 100%;
   width: 100%;
}
.app-home-banner-video .pc {
 background-position: center center;
   display: block;
}
.app-home-banner-video video {
   height: 100%;
   object-fit: cover;
   object-position: center center;
   pointer-events: none;
   width: 100%;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
}


.app-user-views-item {
    padding: 17px;
    width: 25%;
 }
 .app-user-views-item .inner {
    background: linear-gradient(to right bottom, #fbfbfb, #fff);
    border: 1px solid #f4f4f4;
    box-shadow: 6px 6px 0 rgba(0, 66, 105, .08);
    display: flex;
    flex-direction: column;
    font-size: 14px;
    height: 150px;
    justify-content: space-between;
    padding: 1em 1.25em;
    transition: box-shadow .6s ease, background .6s ease;
    width: 100%;
 }
 .app-user-views-item .inner {
    background: linear-gradient(to right bottom, #fbfbfb, #fff);
    border: 1px solid #f4f4f4;
    box-shadow: 6px 6px 0 rgba(0, 66, 105, .08);
    display: flex;
    flex-direction: column;
    font-size: 14px;
    height: 150px;
    justify-content: space-between;
    padding: 1em 1.25em;
    transition: box-shadow .6s ease, background .6s ease;
    width: 100%;
 }
 .app-user-views-item .inner .title {
    font-size: 18px;
    font-weight: 500;
 }
 .app-user-views-item .inner .time {
    color: #666;
 }

 @media screen and (max-width: 1200px) {
 .app-user-views-item .inner .title {
        font-size: 16px;
    }
 }
 @media screen and (max-width: 1000px) {
    .app-user-views-item {
           padding: 12px;
           width:50%;
       }
    }
    @media screen and (max-width: 550px) {
        .app-user-views-item {
               width: 100%;
           }
        }
         
 .app-user-views-item .inner:hover {
    background: #fff;
    box-shadow: 8px 8px 0 rgba(0, 66, 105, .15);
 }


 .app-user20-views-item {
    padding: 17px;
    width: 20%;
 }
 .app-user20-views-item .inner {
    background: linear-gradient(to right bottom, #fbfbfb, #fff);
    border: 1px solid #f4f4f4;
    box-shadow: 6px 6px 0 rgba(0, 66, 105, .08);
    display: flex;
    flex-direction: column;
    font-size: 14px;
    height: 150px;
    justify-content: space-between;
    padding: 1em 1.25em;
    transition: box-shadow .6s ease, background .6s ease;
    width: 100%;
 }
 .app-user20-views-item .inner {
    background: linear-gradient(to right bottom, #fbfbfb, #fff);
    border: 1px solid #f4f4f4;
    box-shadow: 6px 6px 0 rgba(0, 66, 105, .08);
    display: flex;
    flex-direction: column;
    font-size: 14px;
    height: 200px;
    justify-content: space-between;
    padding: 1em 1.25em;
    transition: box-shadow .6s ease, background .6s ease;
    width: 100%;
 }
 .app-user20-views-item .inner .title {
    font-size: 18px;
    font-weight: 500;
 }
 .app-user20-views-item .inner .time {
    color: #666;
 }



 
        
        @media screen and (max-width: 1200px) {
            .app-user20-views-item .inner .title {
                   font-size: 16px;
               }
            }   
            @media screen and (max-width: 1000px) {
                .app-user20-views-item {
                       padding: 12px;
                       width:33.33%;
                   }
                }        
   @media screen and (max-width: 550px) {
        .app-user20-views-item {
               width: 50%;
           }
        }
 .app-user20-views-item .inner:hover {
    background: #fff;
    box-shadow: 8px 8px 0 rgba(0, 66, 105, .15);
 }




