@charset "utf-8";
::-webkit-scrollbar{ width: 6px; height: 1px;}
::-webkit-scrollbar-thumb { border-radius: 3px; background: #222f52;}
::-webkit-scrollbar-track { border-radius: 3px; background: transparent}

body:before{ content: ''; display: block; width: 100%; height: 5vw; min-height: 50px;}
.header{ position: fixed; top: 0; right: 0; z-index: 10; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; width: 100%; height: 5vw; min-height: 50px; background: white;}
.header-left,
.header-right{ display: flex; align-items: center;}

.header .logo{ padding: 0 1.25vw;}
.header .logo a,
.header .logo a img{ display: block; width: auto; height: 100%;}
.header .tag{ position: relative; padding: 0 1.25vw; font-size: 12px; line-height: 1.5; color: #999;}
.header .tag:before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; display: block; width: 1px; height: 24px; margin: auto; background: #ccc; }

.header .phone{ padding: 0 1.25vw; font-size: 20px; font-family: Bahnschrift; color: #222F52; }
.header .nav{ display: flex; flex-flow: row nowrap; font-size: 16px; line-height: 3;}
.header .nav a{ position: relative; padding: 0 2em; color: #666;}
.header .nav a:after{ content: ''; position: absolute; top: 0; bottom: 0; right: -2px; display: block; width: 4px; height: 4px; margin: auto; background: #ccc; }
.header .nav a:last-child:after{ width: 1px; height: 1em; right: 0}

.nk-menu{ position: relative; display: flex; justify-content: center; align-items: center; width: 5vw; height: 5vw; min-width: 50px; min-height: 50px; background: #DCB572; cursor: pointer;}
.nk-menu i{ font-size: 1.5vw; color: white}

.navigation{ position: fixed; top: 5vw; right: 0; z-index: 9; width: 100vw; height: calc( 100vh - 5vw); background: white; display: none;}
.navigation .wrapper{ display: grid; grid-template-columns: repeat(2,1fr); width: 100%; height: 100%;}
.navigation .wrapper .left,
.navigation .wrapper .right{ display: flex; flex-flow: row nowrap; justify-content: center; padding-top: 10vw;}
.navigation .wrapper .left{ background: white;}
.navigation .wrapper .right{ background: #F7F8FA;}
.navigation .wrapper .left .nav{ width: 12.5vw; min-width: 7em; font-size: 20px;}
.navigation .wrapper .left .nav a{ display: block;}
.navigation .wrapper .left .nav dt{ position: relative; margin-bottom: 10px; border-bottom: 1px solid #ddd; font-size: 20px; line-height: 2;}
.navigation .wrapper .left .nav dt a{ width: 50%; color: #222;}
.navigation .wrapper .left .nav dd{ margin-bottom: 20px; font-size: 16px; line-height: 2; color: #666; display: none;}
.navigation .wrapper .left .nav dd a{ color: #666; }
.navigation .wrapper .left .nav dd a:hover{ color: #222;}
.navigation .wrapper .left .nav dd:nth-of-type(1){display: block;}
.navigation .wrapper .right dl dt{ position: relative; font-size: 36px; line-height: 2; color: #222; text-transform: uppercase;}
.navigation .wrapper .right dl dt:before{ content: ''; position: absolute; bottom: 0; left: 0; width: 2em; height: 2px; background: #222; font-size: 36px;}
.navigation .wrapper .right dl dd{ padding-top: 20px; font-size: 16px; line-height: 2; color: #666;}

.navigation .wrapper .left .nav dt.has:before{ content:''; position: absolute; top: 0; bottom: 0; right: 0; display: block; width: 11px; height: 1px; margin: auto; background: #ccc; }
.navigation .wrapper .left .nav dt.has:after{ content: ''; position: absolute; top: 0; bottom: 0; right: 5px; display: block; width: 1px; height: 11px; margin: auto; background: #ccc; }
.navigation .wrapper .left .nav dt.has.open:after{ display: none;}


.container{ width: 100%; overflow: hidden;}

.slider{ position: relative; background: #f4f4f4;}

.slider .culture{ position: absolute; right: 0; bottom: 2.5vw; left: 0; z-index: 8; display: grid; grid-template-columns: repeat(3,1fr); width: 100%; max-width: 1440px; padding: 1.25vw 0; margin: auto; border-radius: 4px; background: rgba(19,29,64,.9);}
.slider .culture:before,
.slider .culture:after{ content: ''; position: absolute; top: 0; bottom: 0; display: block; width: 1px; height: 50%; margin: auto; background: rgba(255,255,255,.1);}
.slider .culture:before{ left: 33.33333%;}
.slider .culture:after{ right: 33.33333%;}
.slider .culture .itm{ display: grid; grid-template-columns: 5vw auto; grid-template-rows: repeat(2,1fr); color: white}
.slider .culture .itm i{ grid-row: span 2; place-self: center center; font-size: 36px; color: #DCB572}
.slider .culture .itm b{ font-size: 18px; line-height: 1.75; font-weight: normal;}
.slider .culture .itm span{ font-size: 14px; line-height: 1.75;}

.index_slider{ position: relative; z-index: 2;}
.index_slider .slick-slide{display: block;}
.index_slider .itm{ position: relative; width: 100%; height: 45vw;}
.index_slider .itm .thumb{ position: absolute; top: 0; right: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden;}
.index_slider .itm .thumb .img{transition:5s; transform:scale(1.05)}
.index_slider .slick-ani .itm .thumb .img{transform:scale(1)}

.index_slider .itm .info{ position: relative; z-index: 2; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; width: 100%; max-width: 1440px; height: 100%; padding-bottom: 10vw; margin: auto; line-height: 1.25; }
.index_slider .itm .info .name{ font-size: 30px; color: white;transform:translateY(50px);transition:2s;opacity:0;}
.index_slider .itm .info .cn{ margin: 1.25vw 0 1.875vw; font-size: 48px; font-weight: bold; color: #DCB572;transform:translateY(60px);transition:2s;opacity:0;transition-delay: .1s;}
.index_slider .itm .info .en{ font-size: 15px; font-family: Bahnschrift; text-transform: uppercase; color: white; transform:translateY(80px);transition:2s;opacity:0;transition-delay: .2s;}
.index_slider .itm .info .detl{ padding: 0 2em; margin-top: 5vw; font-size: 16px; line-height: 2.25; color: white; background: #DCB572;transform:translateY(100px);transition:2s;opacity:0;transition-delay: .3s;}

.index_slider  .slick-ani .itm .info .name{transform:translateY(0);opacity:1}
.index_slider .slick-ani  .itm .info .cn{transform:translateY(0);opacity:1}
.index_slider  .slick-ani .itm .info .en{transform:translateY(0);opacity:1}
.index_slider .slick-ani  .itm .info .detl{transform:translateY(0);opacity:1}

.index_slider .slick-arrow{ position: absolute; top: 0; bottom: 0; z-index: 3; display: flex; justify-content: center; align-items: center; width: 5vw; height: 5vw; margin: auto; font-size: 2.5vw; color: white; font-family: "Font Awesome 5 Pro"; cursor: pointer; opacity: 0.2;}
.index_slider .slick-arrow:hover{ opacity: 1;}
.index_slider .slick-prev{ left: 0;}
.index_slider .slick-next{ right: 0;}
.index_slider .slick-prev:before{ content: '\f053';}
.index_slider .slick-next:before{ content: '\f054';}

.index_slider .care{ position: absolute; bottom: .625vw; right: 0; left: 0; z-index: 3; font-size: 12px; color: white; line-height: 1; text-align: center; opacity: 0.5; }

.row{ padding: 2.5vw 0;}
.row-titl,
.row-content{ position: relative; width: 100%; max-width: 1440px; margin: auto;}

.nk-en{ display: block; font-size: 36px; line-height: 1.5; font-weight: bold; font-family: Bahnschrift; color: #222F52; text-transform: uppercase;}
.nk-cn{ display: block; font-size: 24px; line-height: 1.5; color: #222}
.nk-line{ font-size: 36px; width: 1em; height: 4px; margin-top: 30px; background: #DCB572;}
.nk-dsc{ display: block; margin-top: 30px; font-size: 16px; line-height: 2; color: #666;}

.products .row-titl .detl{ position: absolute; top: 0; right: 0; display: flex; align-items: flex-start;}
.products .row-titl .detl span{ padding: 0 1em; margin-right: 3px; font-size: 14px; line-height: 2; color: #fff; background: #222F52;}
.products .row-titl .detl i{ width: 2.5em; height: 2.5em; font-size: 16px; color: #fff; text-align: center; line-height: 2.5; background: #DCB572;}
.products .row-titl .catg{ position: absolute; right: 0; bottom: 0; font-size: 0;}
.products .row-titl .catg a{ display: inline-block; padding: 0 1em; margin-left: 1em; font-size: 14px; line-height: 2.25; color: #999; background: #E8EAF6;}
.products .row-titl .catg a.on{ color: white; background: #DCB572;}
.products .row-content{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 1.25vw; max-width: 100%; padding: 2.5vw 1.25vw 0;}
.products .row-content .itm{ grid-column-start: span 3;}
.products .row-content .itm .thumb{ position: relative; display: block; width: 100%; height: 0; padding-bottom: calc(100% / 3 * 2 );}
.products .row-content .itm .thumb .img{ position: absolute !important; top: 0; right: 0;}
.products .row-content .itm .info{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 1.25vw;text-align: center;}
.products .row-content .itm .info .titl{ width: 100%; font-size: 18px; line-height: 2; color: #222; text-overflow:ellipsis; overflow: hidden; white-space: nowrap; }
.products .row-content .itm .info .catg{ font-size: 14px; line-height: 2; color: #999}
.products .row-content .itm .info .catg:before{ content: '\f02c'; font-family: 'Font Awesome 5 Pro'; font-weight: 100; margin-right: 0.25em;}
.products .row-content .itm .info span{ font-size: 12px; color: #ccc; text-align: center; line-height: 1.5;}

.about{ padding: 5vw 0; background: #F7F8FA}
.about .row-content{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 1.25vw;}
.about .row-content .info{ grid-column: 1/9;}
.about .row-content .info .social{ display: flex; margin: 2.5vw 0; font-size: 24px;}
.about .row-content .info .social a{ margin-right: 4em; color: #999;}
.about .row-content .info .social a:hover{ margin-right: 4em; color: #DCB572;}
.about .row-content .info .nbr{ position: relative; display: grid; grid-template-columns: repeat(4,1fr);}
.about .row-content .info .nbr:after{ content: ''; position: absolute; top: 0; right: 0; z-index: 0; display: block; width: 200%; height: 100%; background: white;}
.about .row-content .info .nbr .itm{ position: relative; z-index: 1; display: flex; flex-flow: column nowrap; padding: 1.25vw 0}
.about .row-content .info .nbr .itm b{ font-size: 48px; line-height: 1; font-family: Bahnschrift; color: #222F52;}
.about .row-content .info .nbr .itm i{ width: 20px; height: 4px; margin: 15px 0; background: #DCB572;}
.about .row-content .info .nbr .itm span{ font-size: 14px; line-height: 1; color: #666;}
.about .row-content .cover{ grid-column: 10/13; box-shadow: 12px 12px 6px rgba(0,0,0,0.2); background: white;}

.advantage{ padding: 0; background: #F7F8FA;}
.advantage .row-titl{ display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 1.25vw; padding: 2.5vw 0 1.25vw;}
.advantage .row-titl:after{ content: ''; position: absolute; top: 0; left: calc((100% - 100vw) / 2); z-index: 0; width: 100vw; height: 100%; background: #1D2846;}
.advantage .row-titl *{ position: relative; z-index: 1; color: white;}
.advantage .row-titl .titl{ grid-column: 1/5;}
.advantage .row-titl .titl .nk-line{ background: white;}
.advantage .row-titl .dsc{ grid-column: 5/13; text-align: right;}
.advantage .row-titl .dsc h1{ font-size: 36px; line-height: 1.5; margin: 2.5vw 0 1.25vw;}
.advantage .row-titl .dsc p{ font-size: 16px; line-height: 2;}
.advantage .row-titl .nbr{ grid-column: 1/13; display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 1.25vw; margin-top: 1.25vw;}
.advantage .row-titl .nbr span{ font-size: 48px; line-height: 1; font-family: Bahnschrift;}
.advantage .row-content{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 1.25vw; }
.advantage .row-content .itm{ display: flex; flex-flow: column nowrap; padding: 1.25vw 0}
.advantage .row-content .itm b{ font-size: 24px; line-height: 1.75; color: #222F52}
.advantage .row-content .itm i{ font-size: 12px; line-height: 1.75; font-family: Bahnschrift; font-style: normal; color: #ccc; text-transform: uppercase;}

.news .row-titl{ position: relative; overflow: hidden;}
.news .row-titl .nk-en,
.news .row-titl .nk-cn{ text-align: right;}
.news .row-titl .nk-line{ float: right;}
.news .row-titl .arrows{ position: absolute; top: 0; left: 0; display: flex;}
.news .row-titl .arrows .prev,
.news .row-titl .arrows .next{ width: 1.5em; font-size: 24px; line-height: 1.5; text-align: center; cursor: pointer; color: #ccc;}
.news .row-titl .arrows .next{ margin-left: 1.25vw;}
.news .row-titl .arrows .prev:hover,
.news .row-titl .arrows .next:hover{ color: #DCB572;}
.news .row-content{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 1.25vw;}
.news .row-content>.itm a{ display: block; background: #fafafc;}
.news .row-content>.itm a .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 56.25%;}
.news .row-content>.itm a .thumb .img{position: absolute !important; top: 0; right: 0;}
.news .row-content>.itm a .info{ padding: 1.25vw 0;}
.news .row-content>.itm a .info .titl{ font-size: 18px; color: #222; text-overflow: ellipsis; overflow: hidden; white-space:nowrap;}
.news .row-content>.itm a .info .dt{ font-size: 14px; color: #222;}
.news .row-content>.itm a .info .dsc{ margin-top: 1.25vw; font-size: 14px; line-height: 2; color: #999; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; overflow: hidden; }
.news .row-content .carousel{ grid-column: 2/5; margin-left: -1.25vw;}
.news .row-content .carousel .itm{ padding-left: 1.25vw;}
.news .row-content .carousel .itm a{ display: flex; flex-flow: column nowrap; justify-content: center; height: 100%; padding: 1.25vw;}
.news .row-content .carousel .itm a .dt{ align-self: flex-start; padding: 1.05em 1em; margin-bottom: 1.875vw; border: 2px solid #666; font-size: 13px; color: #222;}
.news .row-content .carousel .itm a .dt .m-d{ font-size: 24px;}
.news .row-content .carousel .itm a .dt .yy{ font-size: 14px;}
.news .row-content .carousel .itm a .info .titl{ font-size: 18px; color: #222; text-overflow: ellipsis; overflow: hidden; white-space:nowrap;}
.news .row-content .carousel .itm a .info .dsc{ margin-top: 1.25vw; font-size: 14px; line-height: 2; color: #999; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-break:break-word; overflow: hidden;}
.news .row-content .carousel .itm a .detl{ margin-top: 2.5vw; font-size: 14px; color: #222}
.news .row-content .carousel .itm a .detl:before{ content: 'detail'}

.contact{ background: #F7F8FA;}
.contact .row-content{ display: flex; justify-content: space-between;}
.contact .row-content .info .nk-line{ margin-bottom: 30px;}
.contact .row-content .info .itm{ font-size: 16px; line-height: 2; color: #666;}
.contact .row-content .info .itm i{ color: #DCB572; width: 1em; text-align: center; margin-right: 0.25em;}
.contact .row-content .qcode{ align-self: center; width: 120px; margin-top: 5vw;}
.contact .row-content .qcode img{ display: block; width: 120px; height: 120px; background: white;}
.contact .row-content .qcode span{ display: block; font-size: 16px; line-height: 3; text-align: center; color: #666;}
#map{ width: 50%; background: #fff;}

.partner{ background: #131D40;}
.partner .row-titl>*{ color: white; text-align: center;}
.partner .row-titl .nk-line{ margin: 30px auto; background: white;}

.partner-list{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 1.25vw;}
.partner-list .itm{ display: flex; justify-content: center; align-items: center; height: 90px; background: white;}
.partner-list .itm img{ max-width: 100%; max-height: 100%;}

.footer{ width: 100%; border-top: 1px solid #222F52; background: #131D40;}
.footer .row-content{ display: flex; justify-content: space-between; align-items: center; padding: 0.625vw 0; font-size: 14px; line-height: 2; color: white}
.footer .row-content a{ color: white}

.convenient-btn{ position: fixed; right: 0; bottom: 10%; z-index: 9; display: flex; flex-flow: column nowrap;}
.convenient-btn a{ position: relative; right: -5.5em; display: flex; flex-flow: row nowrap; align-items: stretch; margin-top: 20px; font-size: 14px; color: #fff; transition: .3s;}
.convenient-btn a i{ display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50% 0 0 50%; font-size: 16px; text-align: center; background: #222f52;}
.convenient-btn a span{ padding-right: .75em; padding-left: 0.25em; line-height: 40px; background: #222f52;}
.convenient-btn a:hover{ right: 0;}

/* sub */
.container-sub{ width: 100%; overflow: hidden; background: #f7f8fa;}
.container-sub.has{/*  padding-top: 48px; */}
.container-sub.has .category{ /* position: fixed; top: 5vw;  */left: 0; z-index: 4; width: 100%;}

.category{ background: white;}
.category .row-content{ display: flex; flex-flow: row wrap; justify-content: center; height: 48px; }
.category .row-content a{ position: relative; display: flex; align-items: center; height: 100%; padding: 0 2.5em; font-size: 16px; color: #666;}
.category .row-content a:after{ content: ''; position: absolute; top: 0; bottom: 0; right: -.5px; display: block; width: 1px; height: 20%; margin: auto; background: #ccc; }
.category .row-content a:last-child:after{ display: none;}
.category .row-content a.on,
.category .row-content a:hover{ color: #222;}
.category .row-content a:hover:before,
.category .row-content a.on:before{ content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 3px; background: #222; }


.pagination{ position: relative; display: flex; flex-flow: row nowrap; justify-content: center; padding: 2.5vw;}
.pagination a.arrow{ position: absolute; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; width: 48px; height: 48px; margin: auto; border-radius: 50%; font-size: 14px; background: white; color: #333; box-shadow: 0 0 5px rgba(0,0,0,.05);}
.pagination a.arrow.prev{ left: 1.25vw;}
.pagination a.arrow.next{ right: 1.25vw;}
.pagination a.normal{ display: flex; justify-content: center; align-items: center; padding: .75em 1.5em; font-size: 18px; font-weight: bold; font-family: Bahnschrift; color: #999}
.pagination a.normal.on{ color: #222;}

/* about */
.wrapper-about{ width: 100%}
.about-cover{ display: flex; flex-flow: column nowrap; justify-content: flex-end; width: 100%; height: 25vw; padding: 5vw; background: #333; color: white;}
.about-cover .titl .en{ font-size: 36px; font-weight: bold; text-transform: uppercase;}
.about-cover .titl .cn{ font-size: 48px;}
.about-cover .titl:after{ content: ''; display: block; width: 36px; height: 1px; margin: 1.25vw 0; background: white; }
.about-cover .info{ font-size: 16px; line-height: 2;}

.about-1{ display: grid; /* grid-template-columns: 40% auto; */ width: 100%; max-width: 1440px; margin: 2.5vw auto 0; background: white;}
.about-1 .social{ display: flex; flex-flow: column nowrap; justify-content: center; padding: 2.5vw; background: #222f52; color: white;}
.about-1 .social .en{ font-size: 48px;}
.about-1 .social .dsc{ font-size: 16px;}
.about-1 .social .btn{ display: flex; margin-top: 5vw;}
.about-1 .social .btn a{ display: flex; justify-content: center; align-items: center; width: 48px; height: 48px; margin-right: 2em; border-radius: 50%; font-size: 20px; color: #222f52; background: white;}
.about-1 .content{ display: flex; flex-flow: column nowrap; justify-content: center; padding: 2.5vw 5vw; }
.about-1 .content .titl{ font-size: 24px; color: #222f52}
.about-1 .content .titl:after{ content: ''; display: block; width: 20px; height: 2px; margin: 1.25vw 0; background: #ccc;}
.about-1 .content .info{ font-size: 16px; line-height: 2; color: #666;}
.about-1 .content .detl{ margin-top: 2.5vw; font-size: 16px; color: #222;}
.about-1 .content .detl:before{ content: 'Detail'}

.about-2{ width: 100%; max-width: 1440px; margin: 0 auto 2.5vw; background: white;}
.about-2 .itm{ position: relative;}
.about-2 .itm .info{ position: absolute; top: 0; left: 0; z-index: 1; display: flex; flex-flow: column nowrap; justify-content: center; width: 50%; height: 100%; padding: 5vw; background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,0)); color: white;}
.about-2 .itm .info .titl{ font-size: 28px; font-weight: bold;}
.about-2 .itm .info .titl:after{ content: ''; display: block; width: 10px; height: 2px; margin: 0.625vw 0; background: white;}
.about-2 .itm .info .dsc{ font-size: 16px; line-height: 2;}
.about-2 .itm .info .detl{ margin-top: 5vw; font-size: 16px; color: white;}
.about-2 .itm .info .detl:before{ content: 'Detail'}
.about-2 .itm .thumb{ width: 100%; height: 25vw;}

.about-3{ position: relative; display: grid; grid-template-columns: repeat(5,1fr); width: 100%; padding: 0 2.5vw; margin: auto; }
.about-3:after{ content: ''; position: absolute; top: 50%; left: -50%; z-index: 0; display: block; width: 200%; height: 1px; background: #ccc; }
.about-3 .itm{ z-index: 1; display: grid; grid-template-rows: repeat(2,1fr);}
.about-3 .itm .yy{ position: relative; align-self: start; padding: 1.875vw; font-size: 48px; font-weight: bold; color: #222f52; cursor: pointer; transition:.15s}
.about-3 .itm .yy:after{ content: ''; position: absolute; top: 0; left: 1.875vw; z-index: 0; display: block; width: 1px; height: 0; background: #ccc; transition:.3s}
.about-3 .itm .yy:before{ content: ''; position: absolute; top: -7px; left: calc( 1.875vw - 7px); z-index: 1; display: block; width: 15px; height: 15px; border: 1px solid #ccc; box-shadow: 0 0 0 2px #fff inset; border-radius: 50%; background: #222; transition:.3s}
.about-3 .itm:nth-of-type(odd) .yy{ align-self: end;}
.about-3 .itm:nth-of-type(odd) .yy:after{ top: auto; bottom: 0;}
.about-3 .itm:nth-of-type(odd) .yy:before{ top: auto; bottom: -7px;}
.about-3 .itm .info{ padding: 1.875vw; font-size: 16px; line-height: 2; color: #222; cursor: pointer; transition:.3s}
.about-3 .itm:hover .yy{ color: #DCB572;}
.about-3 .itm:hover .yy:before{ top: calc( 1.875vw - 7px); border: 1px solid #DCB572; background: #DCB572;}
.about-3 .itm:nth-of-type(odd):hover .yy:before{ top: auto; bottom: calc( 1.875vw - 7px)}
.about-3 .itm:hover .yy:after{ height: 1.875vw;}
.about-3 .itm:hover .info{ background: #DCB572; color: white;}

.about-4{ display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,auto); width: 100%; max-width: 1440px; margin: 2.5vw auto 0; background: white;}
.about-4 .box.network{ background: #222; color: white}
.about-4 .box .titl{ padding: 2.5vw 5vw 2.5vw}
.about-4 .box .titl .en{ font-size: 28px;}
.about-4 .box .titl .cn{ font-size: 20px;}

.resources .content{ display: flex; justify-content: space-between; padding: 0 5vw 2.5vw;}
.resources .content .itm{ display: flex; flex-flow: column nowrap; line-height: 1;}
.resources .content .itm b{ font-size: 48px;}
.resources .content .itm i{ align-self: flex-start; width: 24px; height: 4px; margin: 1.25vw 0; background: #000;}
.resources .content .itm span{ font-size: 16px;}

.network{ grid-row: 1/3;}
.network .content{ padding: 0 5vw 2.5vw;}
.network .content .info{ font-size: 14px; line-height: 2;}
.network .content .info img{ display: block; width: 100%; }

.achievement{ background: #222f52; color: white}
.achievement .content{ padding: 0 5vw 2.5vw; font-size: 16px; line-height: 2;}

.about-5{ width: 100%; background: #222; padding: 2.5vw 0; margin: 2.5vw 0;}
.about-5 .titl{ padding-top: 2.5vw; text-align: center; color: white;}
.about-5 .titl .en{ font-size: 28px;}
.about-5 .titl .cn{ font-size: 20px;}
.about-5 .honor-list{ position: relative; width: 100%; max-width: 1440px; padding: 2.5vw 0; margin: auto;}
.about-5 .honor-list .itm .thumb{ position: relative; z-index: 1; width: 72%; height: 0; padding-bottom: 96%; margin: auto; transform: scale(.8); transition: .3s;}
.about-5 .honor-list .itm .img{ position: absolute !important;}
.about-5 .honor-list .slick-active.slick-center .itm .thumb{ transform: scale(1); transition: .3s;}
.about-5 .honor-list .slick-arrow{ position: absolute; top: 0; bottom: 0; z-index: 3; display: flex; justify-content: center; align-items: center; width: 2.5vw; height: 2.5vw; margin: auto; font-size: 1.25vw; color: white; font-family: "Font Awesome 5 Pro"; cursor: pointer;}
.about-5 .honor-list .slick-prev{ left: 0;}
.about-5 .honor-list .slick-next{ right: 0;}
.about-5 .honor-list .slick-prev:before{ content: '\f053';}
.about-5 .honor-list .slick-next:before{ content: '\f054';}

.about-6{ position: relative; display: grid; grid-template-columns: repeat(7,1fr); grid-template-rows: repeat(2,1fr); width: 100%; max-width: 1440px; margin: 0 auto 2.5vw; background: white;}
.about-6:before{ content: ''; position: absolute; top: 50%; right: 0; z-index: 0; display: block; width: 100%; height: 1px; background: #eee;}
.about-6:after{ content: ''; position: absolute; top: 0; right: calc( 100% / 7 * 2 ); z-index: 0; display: block; width: 1px; height: 100%; background: #eee;}
.about-6 .info{ z-index: 1; grid-column: span 3; grid-row: span 2; padding: 2.5vw; background: #222f52; color: white}
.about-6 .info .titl{}
.about-6 .info .titl .en{ font-size: 28px;}
.about-6 .info .titl .cn{ font-size: 20px;}
.about-6 .info .content{ padding-top: 2.5vw; font-size: 14px; line-height: 2;}
.about-6 .info .content h1{ font-size: 24px; margin-bottom: 1.25vw;}
.about-6 .itm{ position: relative; grid-column: span 2; display: flex; flex-flow: column nowrap; padding: 2.5vw;}
.about-6 .itm .cn{ font-size: 20px; font-weight: bold; color: #222f52}
.about-6 .itm .en{ font-size: 14px; color: #999;}
.about-6 .itm .detl{ position: absolute; right: 2.5vw; bottom: 2.5vw; color: #666}
.about-6 .itm .detl:before{ content: 'Detail';}


/* product-page */
.wrapper-product-page{ width: 100%; max-width: 1440px; padding: 1.25vw; margin: 2.5vw auto; background: white;}
.wrapper-product-page .itm{ display: grid; grid-template-columns: repeat(2,1fr); grid-template-areas: 'a b'; background: white;}
.wrapper-product-page .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 50%;}
.wrapper-product-page .itm .thumb .img{ position: absolute !important; top: 0; right: 0;}
.wrapper-product-page .itm .info{ display: flex; flex-flow: column nowrap; padding: 5vw;}
.wrapper-product-page .itm .info .en{ margin-bottom: .5vw; font-size: 18px; line-height: 1.25; font-family: Bahnschrift; text-transform: uppercase; color: #131d40}
.wrapper-product-page .itm .info .cn{ font-size: 28px; line-height: 1.5; font-weight: bold; color: #222f52;}
.wrapper-product-page .itm .info .cn:after{ content: ''; display: block; width: 2em; height: 2px; margin: 1.25vw 0; background: #000;}
.wrapper-product-page .itm .info .detl{ align-self: flex-start; padding: 0 2em; font-size: 16px; line-height: 2; color: white; background: #DCB572; text-transform: uppercase;}
.wrapper-product-page .itm .info .detl:before{ content: 'detial';}
.wrapper-product-page .itm:nth-of-type(2n) .thumb{ grid-area: b;}
.wrapper-product-page .itm:nth-of-type(2n) .info{ grid-area: a;}
/* product-list */
.wrapper-product{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 1.25vw; max-width: 100%; padding: 2.5vw 1.25vw 0;}
.wrapper-product .itm{ grid-column-start: span 2;}
.wrapper-product .itm .thumb{ position: relative; display: block; width: 100%; height: 0; padding-bottom: calc(100% / 3 * 2 );}
.wrapper-product .itm .thumb .img{ position: absolute !important; top: 0; right: 0;}
.wrapper-product .itm .info{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 0.75vw; background: white;}
.wrapper-product .itm .info .titl{ font-size: 18px; line-height: 2; color: #222}
.wrapper-product .itm .info .catg{ font-size: 14px; line-height: 2; color: #999}
.wrapper-product .itm .info .catg:before{ content: '\f02c'; font-family: 'Font Awesome 5 Pro'; font-weight: 100; margin-right: 0.25em;}
.wrapper-product .itm .info span{ font-size: 12px; color: #ccc; text-align: center; line-height: 1.5;}

/* product-list */
.wrapper-album{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 1.25vw; width: 100%; max-width: 1440px; padding: 2.5vw 0 0; margin: auto;}
.wrapper-album .itm{ display: grid; grid-template-columns: repeat(2,1fr); }
.wrapper-album .itm .thumb{ position: relative; display: block; width: 100%; height: 0; padding-bottom: 100%;}
.wrapper-album .itm .thumb .img{ position: absolute !important; top: 0; right: 0;}
.wrapper-album .itm .info{ display: flex; flex-flow: column nowrap; justify-content: center; padding: 1.25vw; background: white;}
.wrapper-album .itm .info .name{ font-size: 18px; line-height: 1; color: #222}
.wrapper-album .itm .info .name:after{ content: ''; display: block; width: 1em; height: 2px; margin: 1.25vw 0; background: #222f52; }
.wrapper-album .itm .info .dsc{ font-size: 14px; line-height: 2; color: #666;}

/* news */
.wrapper-news{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 1.25vw; width: 100%; max-width: 1440px; padding-top: 2.5vw; margin: auto;}
.wrapper-news>.itm{ padding: 1.875vw; background: white; overflow: hidden;}
.wrapper-news>.itm .info{ display: flex; flex-flow: column nowrap; width: 80%;}
.wrapper-news>.itm .info .titl{ font-size: 24px; color: #222; text-overflow: ellipsis; overflow: hidden; white-space:nowrap;}
.wrapper-news>.itm .info .dsc{ margin: .75vw 0 1.25vw; font-size: 16px; line-height: 2; color: #999; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; overflow: hidden;}
.wrapper-news>.itm .info .detl{ align-self: flex-start; padding: 0 2em; border: 1px solid #ccc; border-radius: 1.25em; font-size: 14px; line-height: 2.5; color: #333;}
.wrapper-news>.itm .info .det2{ align-self: flex-start; padding: 0 2em; border: 1px solid #ccc; border-radius: 1.25em; font-size: 14px; line-height: 2.5; color: #333;}
.wrapper-news>.itm .info .detl:before{ content: '了解更多';}
.wrapper-news>.itm .info .det2:before{ content: '点我下载';}
.wrapper-news>.itm .date{ float: right; position: relative; display: flex; flex-flow: column nowrap; font-family: Bahnschrift; line-height: 1.25;}
.wrapper-news>.itm .date:before{ content: ''; position: absolute; top: 0; left: -.5em; display: block; width: 1px; height: 100%; background: #ccc; font-size: 48px;}
.wrapper-news>.itm .date .d{ font-size: 48px; font-weight: bold;}
.wrapper-news>.itm .date .y-m{ font-size: 14px;}
.wrapper-news>.itm:hover{ box-shadow: 0 0 1.25vw rgba(0,0,0,.1);}
.wrapper-news>.itm .info .detl:hover{ color: white; border-color: #DCB572; background: #DCB572;}
.wrapper-news>.itm .info .det2:hover{ color: white; border-color: #DCB572; background: #DCB572;}

.carousel-news{ position: relative; grid-column: 1/3; width: 100%;}
.carousel-news .itm{ display: grid !important; grid-template-columns: repeat(2,1fr); grid-gap: 5vw; padding: 1.875vw; background: white;}
.carousel-news .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 56.25%;}
.carousel-news .itm .thumb .img{ position: absolute !important; top: 0; right: 0;}
.carousel-news .itm .content{ position: relative; display: flex; flex-flow: column nowrap; padding: 2.5vw 0; padding-right: 20%;}
.carousel-news .itm .content .titl{ font-size: 28px; color: #222; text-overflow: ellipsis; overflow: hidden; white-space:nowrap;}
.carousel-news .itm .content .dsc{ margin: .75vw 0 1.25vw; font-size: 16px; line-height: 2; color: #999; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; overflow: hidden;}
.carousel-news .itm .content .detl{ align-self: flex-start; padding: 0 2em; margin-top: 4vw; border: 1px solid #ccc; border-radius: 1.25em; font-size: 14px; line-height: 2.5; color: #333;}
.carousel-news .itm .content .detl:before{ content: '了解更多';}
.carousel-news .itm .date{ position: absolute; top: 2.5vw; right: 0; display: flex; flex-flow: column nowrap; font-family: Bahnschrift; line-height: 1.25;}
.carousel-news .itm .date:before{ content: ''; position: absolute; top: 0; left: -.5em; display: block; width: 1px; height: 100%; background: #ccc; font-size: 48px;}
.carousel-news .itm .date .d{ font-size: 48px; font-weight: bold;}
.carousel-news .itm .date .y-m{ font-size: 14px;}
.carousel-news .itm .content .detl:hover{ color: white; border-color: #DCB572; background: #DCB572;}

.carousel-news .slick-dots{ position: absolute; right: 1.875vw; bottom: 1.875vw; display: flex;}
.carousel-news .slick-dots li{ width: 6px; height: 6px; border-radius: 50%; margin-left: 6px; background: #999; cursor: pointer;}
.carousel-news .slick-dots li.slick-active{ background: #DCB572;}

/* contact */
.wrapper-contact{ display: grid; grid-template-columns: repeat(2,1fr); width: 100%; max-width: 1440px; padding: 1.25vw; margin: 2.5vw auto; background: white;}
#contact-map{ grid-column: 1/3; height: 25vw; background: #000;}
.contact-en,
.contact-cn{ position: relative; padding: 5vw; font-size: 16px; line-height: 2; color: #666;}
.contact-cn:before{ content: ''; position: absolute; top: 20%; left: -0.5px; display: block; width: 1px; height: 60%; background: #eee; }

/* content */
.wrapper-article{ display: grid; width: 100%; max-width: 1440px; margin: 2.5vw auto;}
.wrapper-article .article-title{ padding-bottom: 2.5vw; font-size: 36px; font-weight: bold;}
.wrapper-article .article-caption{ padding-bottom: 2.5vw; font-size: 14px; font-family: Bahnschrift;}
.wrapper-article .article-caption i{ margin-right: 0.5em;}
.wrapper-article .article-content{ padding: 3vw 2.5vw; background: white; font-size: 16px; line-height: 2; color: #333;}
.wrapper-article .article-content img{ max-width: 100%;}
.wrapper-article .article-arrows{ /* display: flex;  */flex-flow: row nowrap; /* justify-content: space-between; */ align-items: center; padding: 2.5vw; border-top: 1px solid #f2f3f5; background: white;}
.wrapper-article .article-arrows .next{ font-size: 16px; color: #666;}
.wrapper-article .article-arrows .next:before{ content: '下一篇：'; color: #999;}
.wrapper-article .article-arrows .goback{ font-size: 16px; line-height: 2; padding: 0 1.5em; border: 1px solid #ccc; color: #333;float:right;}
.wrapper-article .article-arrows .goback i{ font-size: 14px; color: #ccc; margin-left: 0.5em;}

/* team */
.wrapper-team{ width: 100%}
.team-cover{ display: flex; flex-flow: column nowrap; justify-content: flex-end; width: 100%; height: 40vw; padding: 5vw; background: #333; color: white;}
.team-cover .titl .en{ font-size: 36px; font-weight: bold; text-transform: uppercase; }
.team-cover .titl .cn{ font-size: 48px;}
.team-cover .titl:after{ content: ''; display: block; width: 36px; height: 1px; margin: 1.25vw 0; background: white; }
.team-cover .info{ font-size: 16px; line-height: 2;}

.team-introduce{ display: grid; grid-template-columns: repeat(4,1fr); width: 100%; max-width: 1440px; margin: 2.5vw auto; background: white; }
.team-introduce .info{ grid-column: span 2; padding: 2.5vw 3vw; font-size: 14px;}
.team-introduce .info .titl{ font-size: 20px; color: #222}
.team-introduce .info .titl:after{ content: ''; display: block; width: 1em; height: 2px; margin: 1vw 0; background: #333;}
.team-introduce .info .content{ color: #666;}
.team-introduce .itm{ position: relative; cursor: pointer;}
.team-introduce .itm .thumb{ position: relative; z-index: 0; width: 100%; height: 0; padding-bottom: 100%; filter: grayscale(1)}
.team-introduce .itm .thumb .img{ position: absolute !important; top: 0; right: 0;}
.team-introduce .itm .msk{ position: absolute; width: 100%; height: 100%; z-index: 1; padding: 2.5vw; background: rgba(0,0,0,.3); color: white; opacity: 0;}
.team-introduce .itm .msk .name{ position: relative; font-size: 16px;}
.team-introduce .itm .msk .name:after{ content: ''; display: block; width: 1em; height: 1px; margin: 1.25vw 0 2.5vw; background: white;}
.team-introduce .itm .msk .dsc{ font-size: 14px;}
.team-introduce .itm:hover .thumb{ filter: grayscale(0)}
.team-introduce .itm:hover .msk{ opacity: 1;}

.team-introduce a.itm{ position: relative; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; background: #222; color: white}
.team-introduce a.itm:after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; display: block; width: 0; height: 0; margin: auto; border-radius: 100%; background: #222f52; opacity: 0; transition: .3s cubic-bezier(0.4, 0.0, 0.2, 1);}
.team-introduce a.itm .cn{ z-index: 1; font-size: 16px;}
.team-introduce a.itm .en{ z-index: 1; font-size: 32px; text-transform: uppercase;}
.team-introduce a.itm:hover:after{ width: 100%; height: 100%; border-radius: 0; opacity: 1;}

.team-mechanism{ display: grid; grid-template-columns: repeat(4,1fr); width: 100%; max-width: 1440px; margin: 2.5vw auto; background: white; }
.team-mechanism .titl{ display: flex; flex-flow: column nowrap; justify-content: center; padding: 2.5vw; font-size: 20px; color: white; background: #222f52;}
.team-mechanism .titl .en{ font-size: 32px; line-height: 1.25; text-transform: uppercase;}
.team-mechanism .titl .cn:after{ content: ''; display: block; width: 2px; height: 3em; margin: 1vw 0; background: white;}
.team-mechanism .titl .detl{ font-size: 16px; line-height: 2; color: white; transition: .15s}
.team-mechanism .titl .detl:before{ content: 'Detail'}
.team-mechanism .info{ grid-column: span 3;}
.team-mechanism .info img{ display: block; max-width: 100%; height: auto;}

/* channel */
.wrapper-channel{ display: grid; width: 100%; max-width: 1440px; margin: 2.5vw auto;}
.wrapper-channel .channel-content{ padding: 3vw 2.5vw; background: white; font-size: 16px; line-height: 2; color: #333;}
.wrapper-channel .channel-content img{ max-width: 100%;}


@media screen and (min-width: 992px) {
	
	.nk-menu{
		display:none;
	}
}
@media screen and (max-width: 1450px){
	.header .nav a{padding: 0 1em; }
}


.img{
	max-width:100%!important;
}

.newtj{
	width:350px;
}

.newtj img{
	width:100%;
	max-height:195px;
}