/* common */
:root {--color1:#e70012;}
:root {--color2:#333333;}
:root {--color3:#325484;}


h1, h2, h3, h4, h5, h6, p {margin: 0;}
ul,li {margin-bottom: 0;}
a:hover {text-decoration: none;color: #333;}
:focus {outline: 0 !important;}
table {border-collapse: collapse;border-spacing: 0;}
sup{font-size: 55%;}
.uk-container-xlarge {max-width: 1500px;}

::-webkit-scrollbar {width: 8px;border-radius: 8px;}
::-webkit-scrollbar-track {background: #fff;border-radius: 8px;}
::-webkit-scrollbar-thumb {background: #e70012;-webkit-border-radius: 8px;border-radius: 8px;border: 1px solid #f5f5f5;}

/* header */
.header{z-index: 999;position: absolute;width: 100%;transition: 0.6s all;transition-delay: 0.1s;}
.header .uk-logo{ padding: 15px 40px;}
.header .uk-logo img{ height: 50px;}
.header .nav>li{ position: relative;}
.uk-navbar-item, .uk-navbar-nav>li>a{min-height: 60px !important;}
.header .nav>li>a {line-height: 60px;color: #333;padding: 0; margin: 0 20px; transition: .5s all;display: inline-block;font-size: 16px; font-weight: 300; font-family: 'OPPOSans-R',sans-serif; position: relative;}
.header .nav>li>a::before{ position: absolute; left:0; bottom:0; width: 100%; height: 3px; background:var(--color1) ; content: ""; opacity: 0;}
.header .nav>li.active>a::before,.header .nav>li:hover>a::before{ opacity: 1;}
.header .nav>li:hover>a , .header .nav>li.active>a {color: var(--color1);font-weight: 700;}
.header .uk-navbar-toggle {width: 40px; height: 40px; min-height: 40px !important; padding: 10px; border-radius: 100%;background: #fff;}
.header .uk-navbar-toggle svg * {transition: .5s all;}
.header .uk-navbar-toggle:hover svg * {stroke: var(--color1);}
[class*=uk-navbar-dropdown-bottom] {margin-top: 3px;}
.header .i_search.uk-navbar-dropdown {padding: 10px;width: 500px;border-radius: 15px;border: 2px solid var(--color1);background: var(--color1);}
.header .uk-search-default .uk-search-input {border-radius: 15px;border: 2px solid var(--color1);background: #fff;}
.header .uk-close {color: #fff;}
[class*=uk-dropdown-bottom] {margin-top: 0;}
.header .uk-dropdown { margin-top: 0; width: 172px;min-width: 100px;background-color: transparent;box-shadow: none;padding: 0; left:50% !important; transform: translateX(-50%);}

.header .nav>li .uk-dropdown-nav>li>a {background-color: rgba(255, 255, 255, 1);transform: translateX(30px);transition: .5s all;display: block;padding: 0 20px;opacity: 0;font-size: 16px;font-family: 'OPPOSans-R',sans-serif; font-weight: 300; line-height: 45px;position: relative;color: #333; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.1);}
.header .nav>li .uk-dropdown-nav>li:last-child>a{border-bottom:none;}
.header .nav>li:hover .uk-dropdown {display: block;}
.header .nav>li:hover .uk-dropdown-nav>li>a {transform: translateX(0);opacity: 1;}
.header .nav>li .uk-dropdown-nav>li:hover>a ,.header .nav>li .uk-dropdown-nav>li.active>a {color: var(--color1); font-weight: 700;}

.language{ margin-left: 10px;}
.language .uk-button-default{ width: 40px; padding: 0 !important; border-radius: 100%;}
.language .uk-drop{ width: 60px !important; padding: 20px !important; right:0; left:inherit !important; transition: .5s all;}
.language .uk-drop a{ color: #333;}
.language .uk-drop a:hover{ color: var(--color1);}
[class*=uk-drop-bottom] {margin-top: 10px !important;}

/*.header .navBox .uk-button{background: none;padding: 0; width: 70px; height: 70px;}
.header .navBox .uk-offcanvas-bar{ width: 700px; padding: 0; background: #fff;}
.header .navBox .uk-close{ color: var(--color1);}
.topBox{ right:30px; top:30px;}
.topBox input{ background: #f1f1f1 !important; border: none; border-radius: 5px; color: #2d2d2d !important; text-indent: 30px;}
.topBox button{ border: none; background: none;}
.topBox .language{ margin-left: 10px;}
.topBox .language a{color: #2d2d2d;}
.header .nav{ display: block;}
.header .nav>li{padding: 10px 0; transition: .6s all;}
.header .nav>li>a { width: 180px; line-height: 80px;color: var(--color2);padding: 0 20px;font-size: 18px; box-sizing: border-box;}
.header .nav>li.active,.header .nav>li:hover{background: var(--color1);}
.header .nav>li.active a,.header .nav>li:hover a{ color: #fff;}
.header .nav>li .uk-nav-sub{ width: calc(100% - 160px);}
.header .nav>li .uk-nav-sub ul{ height: 100%;align-content: center; list-style: none;}
.header .nav>li .uk-nav-sub li{ width: 25%; padding: 5px 0;}
.header .nav>li .uk-nav-sub li a{ font-size: 16px;color: var(--color2);}
.header .nav>li .uk-nav-sub li a:hover{ text-decoration: underline;}
.header .nav>li.active .uk-nav-sub li a,.header .nav>li:hover .uk-nav-sub li a{ color: #fff;}
.header .nav>li:first-child.active,.header .nav>li:first-child:hover{ background: none !important;}
.header .nav>li:first-child.active a,.header .nav>li:first-child:hover a{ color: var(--color1);}*/


/* i_banner */
.i_banner{ width: 100%; height: 100%;}
.i_banner .uk-card{ margin-top: 15%;}
.i_banner .uk-card h1 {font-size: 80px;font-weight: 700;color: #333;line-height: 1.2;}
.i_banner .uk-card p{ font-size: 36px;color: #333; line-height: 2; }
.i_banner .uk-card a{ padding: 10px 40px; background:var(--color1); border-radius: 0 100px 100px 0; ont-size: 24px;}
.i_banner li:nth-child(2) h1:nth-child(2){ display: none;}
.i_banner .uk-position-bottom-right{ bottom:30px;}
.i_banner .uk-slidenav{ margin-left: 10px; padding: 13px 18px; border-radius: 100%; background: #fff; box-sizing: border-box;}
.i_banner .uk-slidenav polyline{ color: #838383}
.i_banner .uk-slidenav:last-child{background:var(--color1);}
.i_banner .uk-slidenav:last-child polyline{ color: #fff}

/* index_title */
.index_title h2{ font-size: 60px; font-weight: bold;color: var(--color1);}
.index_title h3 {font-size: 36px; color: var(--color2); text-transform: uppercase;}

/* i_btn */
.i_btn {color: var(--color1);}
.i_btn:hover {color: var(--color3);}

/* i_about */
.i_about{ background: #fff;}
.i_about .uk-padding-xlarge {padding: 85px 115px 20px;}
.i_about p{ font-size: 16px;font-weight: 300; color: #333; line-height: 30px;}


#adv h4 span.counter-value{ font-size: 72px; font-weight: 700; color: var(--color3); line-height: 100%;}
#adv h4 sup { top: 0; left: -20px; font-size: 52px;}
#adv p{font-size: 24px; color: var(--color3);margin-bottom: 10px;margin-left: -10px;}
#adv h5{font-size: 18px; margin-top: 10px; font-weight: 300;}


/* i_prod */
.i_prod .i_prod_nav .uk-card{ margin: 0 30px;}
.i_prod .i_prod_nav .uk-card a{ font-size: 18px; color:var(--color2);}
.i_prod .i_prod_nav .uk-card.uk-active a{ font-weight: bold;}
.i_prod .i_prod_bg{ padding: 30px 0; background: rgba(255,255,255,0.6);}
.i_prod .i_prod_li .uk-inline-clip{ background: #fff;}
.i_prod .i_prod_name h4{  margin-top: 10px; color: var(--color2);overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.i_prod a:hover .i_prod_name h4{ color: var(--color1);}
.i_prod .i_prod_btn img{width: 32px;}
.i_prod .i_prod_btn .uk-position-center-left{ left:-80px;}
.i_prod .i_prod_btn .uk-position-center-left img{transform: scaleX(-1);filter: grayscale(100%);-webkit-filter: grayscale(100%);filter: brightness(0%) invert(100%);-webkit-filter: brightness(0%) invert(100%);mix-blend-mode: difference;}
.i_prod .i_prod_btn .uk-position-center-right{ right:-80px;}


/* i_application */
.i_application .i_appl_box{ margin-left: 10%; z-index: 9; position: relative;}
.i_application .index_title{ margin-top: 25%;}
.i_application .index_title h2,.i_application .index_title h3{ color: #fff;}
.i_application .index_title p{ font-size: 18px; line-height: 30px; color: #fff;}
.i_application .uk-position-bottom-left{ width: 100%;}
.i_application_nav .uk-cardbody{ margin-right: 1px; padding: 30px; background:rgba(255,255,255,0.5);transition: transform 0.3s ease;}
.i_application_nav .uk-cardbody h4{ font-size: 24px;}
.i_application_nav .uk-cardbody .pic{ bottom:30px; right:30px; display: none;}
.i_application_nav .uk-cardbody .pic img{ height: 50px;}
.i_application_nav .uk-cardbody:hover,.i_application_nav .uk-active .uk-cardbody{ background:var(--color1); height: 120%;transform: translateY(-30px);}
.i_application_nav .uk-cardbody:hover h4,.i_application_nav .uk-active .uk-cardbody h4{ color: #fff;}
.i_application_nav .uk-cardbody:hover path,.i_application_nav .uk-active .uk-cardbody path{ fill:#fff;}
.i_application_nav .uk-cardbody:hover .pic,.i_application_nav .uk-active .uk-cardbody .pic{ display: block;}
.i_application_nav .uk-active .uk-cardbody::before{ content: ""; position: absolute; left:0; bottom:-30px; width: 100%; height: 30px; background:var(--color1);;}

/* i_partner */
.i_partner .partnerlist{ list-style-type: none;}
.i_partner .partnerlist li{ width: 9.09%;}
.i_partner .partnerlist li>div{ margin: 5px; background: #fff;}


/* i_news */
.i_news .i_news_l .title{ padding: 20px;background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));}
.i_news .i_news_l .title h4{ font-size: 24px; color: #fff;}
.i_news .i_news_l .title h6{ color: #fff;}
.i_news .i_news_r{ padding: 30px; background: #f7f7f7; }
.i_news .i_news_r h4{font-size: 24px; color: var(--color2);}
.i_news .i_news_r p{ margin: 20px 0; color: #777;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;overflow: hidden;}
.i_news .i_news_r h6{ color: #777;}
.i_news .i_news_r>div:first-child{ margin-bottom: 20px; border-bottom: 1px solid #afafaf;}

/*banner*/
.banner h2{ font-size: 80px; font-weight: 900; text-transform: uppercase; color: rgba(255,255,255,0.1); line-height: 100%;}
.banner h3{ font-size: 50px; font-weight: 700; color: #fff;line-height: 100%;}

/* navbar */
.navbar { padding: 20px 0; border-bottom: 1px solid #e5e5e5;}
.navbar .sortnav{gap:40px;}
.navbar .sortnav a{font-size: 18px;font-weight: 500;color: #333;}
.navbar .sortnav a.active{font-weight: 700;color: var(--color1); position: relative;}
.navbar .sortnav a.active::before{ position: absolute; left:50%; bottom:-29px; transform: translateX(-50%); content: ""; width: 16px; height: 16px; background: url(../image/dian.png) no-repeat; background-size: contain;}
.navbar a {transition: .5s all;}
.navbar a:hover {color: var(--color1);}

.position,.position a{ font-size: 18px; font-weight: 500; color: #fff;}
.sortnav{ gap:40px;}
.sortnav a{ position: relative; line-height: 190%; padding: 10px 0;}
.sortnav a::before{ position: absolute; bottom:0; left:0; content: ""; width: 100%; height: 2px; background: #fff; display: none;}
.sortnav a.active::before,.sortnav a:hover::before{ display: block; }

.sortnav_product{ gap:60px; border-bottom: 1px solid #e2e1e1;}
.sortnav_product>div{padding: 20px 0;}
.sortnav_product a{ font-size: 18px;font-weight: 500;color: #333;position: relative;}
.sortnav_product a::before{ position: absolute; bottom:-22px; left:0; content: ""; width: 100%; height: 2px; background: var(--color1); display: none;}
.sortnav_product a.active::before,.sortnav_product a:hover::before{ display: block;}



/* about */
.about h3{ font-size: 48px;}
.about .text p{ font-size: 14px; line-height: 25px; text-indent: 30px;}
.about canvas{ border-top-right-radius:100px; border-bottom-left-radius:100px;}
.about #adv .counter-value{ font-size: 48px !important;}
.about #adv p{ font-size: 18px !important; }
#adv>div:last-child .counter-value,#adv>div:last-child p {color: var(--color1);}


.about_title h2{ font-size: 48px;}
.about_title h3{ font-size: 36px; font-weight: bold; text-transform: uppercase;color: #f1f1f1; z-index: -1;}
.about_title h4{ font-size: 30px; display: flex; justify-content: center; gap: 40px;}
.about_title h4 svg:first-child{ margin-top: -50px;}
.about_title h4 svg:last-child{ margin-top: 50px;}

.cult_top{ font-size: 22px; font-weight: bold;color: var(--color2);line-height: 1.1;}
.cult_top img{ margin-left: 10px; height: 50px;}
.cultural_list .uk-slideshow-items li{ border-radius: 10px;}
.cultural_list .text{ background: var(--color3);}
.cultural_list .text>div{ margin-right: 5%;}
.cultural_list .text h3{ font-size: 36px; color: #fff;}
.cultural_list .text h2{ font-size: 48px; font-weight: bold; color: #fff;}
.cultural_list .text h2::before{ position: absolute; bottom:-30px; right:0; content: ""; width: 88px; height: 4px; background: #fff; }
.cultural_list .uk-position-cover{ top:calc(50% - 230px); left:calc(40% - 230px);}
.cultural_list .yuan{ width: 460px; height: 460px; border-radius: 100%; border: 1px solid #fff; }
.cultural_list .uk-slidenav-box{transform: rotate(90deg); background: #234779;padding: 24px 16px; border-radius: 100%;}
.cultural_list .uk-slidenav-box .uk-slidenav{ color: rgba(102,102,102,0); padding: 5px;}
.cultural_list .uk-slidenav-box .uk-slidenav svg{ width: 10px;}
.cultural_list .uk-slidenav-box .uk-slidenav polyline{ fill:#fff;}
.cultural_list .uk-slideshow-nav{ padding: 0; margin: 0; list-style-type: none;}
.cultural_list .uk-slideshow-nav li{ position: absolute;}
.cultural_list .uk-slideshow-nav li a{font-size: 24px; color: rgba(255,255,255,0.5);}
.cultural_list .uk-slideshow-nav li span{font-size: 36px; padding-right: 10px; color: #fff; opacity: 0;}
.cultural_list .uk-slideshow-nav li.uk-active a{ color: #fff;}
.cultural_list .uk-slideshow-nav li.uk-active span{opacity: 1;}
.cultural_list .uk-slideshow-nav li:first-child{top: 5%;right: -5%;}
.cultural_list .uk-slideshow-nav li:nth-child(2){top: 30%;right: -20%;}
.cultural_list .uk-slideshow-nav li:nth-child(3){bottom: 30%;right: -20%;}
.cultural_list .uk-slideshow-nav li:last-child{bottom: 5%;right: -3%;}
.cultural_list .yuan1{ position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); content: ""; width: 74%; height: 74%;}
.cultural_list .yuan1 .element{ width: 100%; height: 100%; border: 1px solid rgba(255,255,255,0.5);border-radius: 100%;transition: transform 0.5s;animation: zoomCycle 4s infinite;}
@keyframes zoomCycle {
  0%, 100% { transform: scale(1); } 
  50% { transform: scale(1.1); } 
}


.globa{background-image: linear-gradient(to top, #eaeaea, #fff);}
.globa .city{ bottom:50px; color: var(--color3);}

.partner .about_title h2,.partner .about_title p{ color: #fff;}
.partner .about_title h3{ color: rgba(255,255,255,0.1);}
.partner .partnerlist{ list-style-type: none;}
.partner .partnerlist li{ width: 9.09%;}
.partner .partnerlist li>div{ margin: 5px;}



/* contact */
.contact h3 b{ display: block;font-size: 42px;}
.contact h4{ font-size: 36px; font-weight: bold;}
.contact h5{ line-height: 50px; font-size: 18px;}
.contact svg{ margin-right: 5px;}


/* message */
.message .index_title{ margin-right: 20%;}
.message .index_title h2{ font-size: 40px;}
.message form { margin-left: 0;}
.message p{ margin-bottom: 10px;}
.message label {font-size: 16px;color: #333;margin-bottom: 10px;display: block;}
.message .uk-input {border: none;background-color: #fff;padding: 0;height: 45px;color: #666; padding-left: 30px; font-weight: 300;}
.message .uk-textarea {border: none;background-color: #fff;padding: 0;color: #666; line-height: 45px;padding-left: 30px; font-weight: 300;}
.message .uk-select {border: none;background-color: #fff;padding: 0;color: #666;}
.uk-input, .uk-select, .uk-textarea {color: #666;}
.uk-input:focus, .uk-select:focus, .uk-textarea:focus {border-color: var(--color1);}
.uk-select:not([multiple]):not([size]) option {color: #666;}
.message select option {color: #333;}
.message img{ height: 45px;}
.message .uk-button { display: block; width: 200px;margin: 0 auto; background-color:var(--color1);border:none;line-height: 45px;font-weight: 300; color: #fff; transition: .5s all;}


/* newslist */
.newsbox:first-child{border-top: 1px solid #eeeeee;}
.newsbox{ padding: 20px 0; border-bottom: 1px solid #eeeeee;transition: .6s all;}
.newsbox .time{ padding: 20px; text-align: center;}
.newsbox .time h3{ font-size: 70px; font-weight: bold;}
.newsbox .time p{ font-size: 18px; color: #555;}
.newsbox .time hr{ width: 40px; margin-left: 20px;}
.newsbox .text{ padding-right: 30px;}
.newsbox .text h4{ font-size: 24px;}
.newsbox .text p{ color: #777;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
.newsbox .text .btn_news{color: #777;}
.newsbox:hover{ background: #f5f5f5;transform: translateX(10px);}
.newsbox:hover .text h4{color: var(--color1);}
.newsbox:hover .text .btn_news{color: var(--color1);}


/* news */
.news h3{ font-size: 20px; font-weight: bold; color: var(--color1);}
.news p {text-indent: 32px;font-size: 16px;font-weight: 300; color: #333;line-height: 1.8;text-align: justify;}
.news p img {display: block;margin: 10px auto;}
.news h6 {margin-top: 20px;color: #999;}
.news_back {padding: 10px 30px;color: #fff;font-weight: 300;background: var(--color1);}
.news_back:hover{ color: #fff;}

.uk-pagination a:hover{ color: var(--color1);}

/* productlist */
.search_product{ margin: 0 auto; width: 65%; padding: 20px; background: #f5f5f5; border-radius: 5px;box-sizing: border-box;}
.search_product input{ border: none; background: none; width: 70%; }
.search_product button{border: none; background: none;}

.productlist_list{ width: 100%; list-style: none; display: flow-root;}
.productlist_list li{ float: left; width: calc(25% - 20px); margin-right: 20px; margin-bottom: 20px; margin-top: 0 !important; padding: 20px; background: #f5f5f5; border-radius: 5px;transition: .6s all; box-sizing: border-box;}
.productlist_list .uk-inline-clip{ background: #fff;}
.productlist_list li h4{font-size: 20px; display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical;overflow: hidden;}
.productlist_list li:hover{background: #fff;box-shadow: 0px 0px 9.4px 0.6px rgba(0, 0, 0, 0.15);}
.productlist_list li:hover h4{color: var(--color1);}

.productlist .uk-card{ padding: 20px; background: #f5f5f5; border-radius: 5px;transition: .6s all;}
.productlist .uk-card h4{ font-size: 20px; display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical;overflow: hidden;}
.productlist .uk-card:hover{ background: #fff;box-shadow: 0px 0px 9.4px 0.6px rgba(0, 0, 0, 0.15);}
.productlist a:hover h4{color: var(--color1);}



/* product */
.product h2{ font-size: 20px; font-weight: bold; color: var(--color1);}
.product h3{ font-size: 16px; font-weight: 300; color: #666;}
.product .name{background: #e8e6e6; padding: 10px 0 10px 40px;}
/*多图*/
.product_show{border: 1px solid #d3d3d3; display: none;}
.product_.active canvas{border: 1px solid var(--color1) !important;}

/*solution*/
.solution .uk-inline-clip{ border-radius: 10px;}
.solution h4{ font-size: 24px;}
.solution1{ border-radius: 10px;}
.solution1 img{ height: 100px;}
.solution1 p{font-size: 14px; color: #777;}
.solution2 h4{ color: #fff;}
.solution2 p{font-size: 14px; color: #fff;}
.solution3 .uk-overlay{ height: 100%;border-radius: 10px; opacity: 0; transition: .6s all;}
.solution3 p{font-size: 16px; color: #666; font-weight: 300;}
.solution3:hover .uk-overlay{ opacity: 1;transition: .6s all;}
.solution4{padding: 10px; background: #f5f5f5; border-radius: 5px;transition: .6s all; box-sizing: border-box;}
.solution4:hover{background: #fff;box-shadow: 0px 0px 9.4px 0.6px rgba(0, 0, 0, 0.15);}
.solution5{ padding: 120px 0;}
.solution5 #adv h4 span.counter-value{ font-size: 48px; color: #fff;}
.solution5 #adv p{font-size: 16px; color: #fff;}
.solution5 #adv h5{font-size: 14px; color: #fff;}

/**/
.development_text h3{ font-size: 48px; font-weight: bold;}
.development_text p{ font-size: 24px; line-height: 1.7;}
.responsibility{ padding-top: 120px; padding-bottom: 30px;}
.responsibility .title h2{font-size: 60px; color: #fff;}
.responsibility .title h3{font-size: 36px; font-weight: bold; color: #fff;}
.resp_nav .uk-card a{ padding: 0 30px; font-size: 18px; color: #fff;}
.resp_nav .uk-card.uk-active a{color: var(--color3);font-weight: bold;}
.resp_nav .uk-card::after{ position: absolute; left:0; top:50%; transform: translateY(-50%); content: ""; width: 1px; height: 200%; background-image: linear-gradient(to bottom, #fff, transparent);}
.resp_nav .uk-card:last-child::before{ position: absolute; right:0; top:50%; transform: translateY(-50%); content: ""; width: 1px; height: 200%; background-image: linear-gradient(to bottom, #fff, transparent);}
.resp_pd p{ font-size: 14px; line-height: 1.7; color: #333; }

/* foot */
.foot .foot_logo img{ height: 80px;}
.foot .foot_contact p{ color: var(--color2);}
.foot hr{ color: #cdcdcd;}
.foot h4{ font-size: 18px;}
.foot ul li a{ color: #666;}
.foot ul li a:hover{color: var(--color1);}


.copyright{ padding: 10px 0; color: var(--color2);font-size: 18px; }
.copyright a{color: var(--color2);}
.copyright a:hover{color: var(--color1);}

/* pagination */
.pagination a{ margin: 0 6px; background: #f8f8f8;width: 36px;height: 36px;line-height: 36px; border-radius: 100%; color: #666; display: inline-block;}
.pagination a.page-num-current,.pagination a:hover{ background: var(--color1); color: #fff;}


@keyframes linebig {
    0    {top:272px;height: 0;}
    33%  {top:0;height: 272px;}
    66%  {top:0;height: 272px;}
    100% {top:272px;height: 0;}
}
 
/*Safari 和 Chrome:*/
@-webkit-keyframes linebig {
    0    {top:272px;height: 0;}
    33%  {top:0;height: 272px;}
    66%  {top:0;height: 272px;}
    100% {top:272px;height: 0;}
}

@keyframes linesmall {
    0    {top:0;height: 272px;}
    33%  {top:0;height: 272px;}
    66%  {top:0;height: 0;}
    100% {top:272px;height: 0;}
}
 
/*Safari 和 Chrome:*/
@-webkit-keyframes linesmall { 
    0    {top:0;height: 272px;}
    33%  {top:0;height: 272px;}
    66%  {top:0;height: 0;}
    100% {top:272px;height: 0;}
}
/* swiper-container-vertical */
.swiper-container-vertical>.swiper-pagination-bullets {right: 50px;}
.swiper-container-vertical>.swiper-pagination-bullets:before {content: '';width: 1px;height: 272px;background-color: #333;display: block;margin-left: 2px;}
.swiper-container-vertical>.swiper-pagination-bullets::after {content: '';width: 2px;height: 0px;background-color: #333;transition: .5s all;position: absolute;left: 1px;top:0;animation: 0;}
.swiper-container-vertical>.swiper-pagination-bullets.big::after {animation:linebig 1s 1;}
.swiper-container-vertical>.swiper-pagination-bullets.small::after {animation:linesmall 1s 1;top:272px;}
.swiper-pagination-bullet {width: 6px;height: 6px;background-color: #333; margin-left: 3px}

.swiper-container-vertical>.swiper-pagination-bullets.uk-active:before {background-color: #333;}
.swiper-container-vertical>.swiper-pagination-bullets.uk-active:after {background-color: #333;}
.swiper-pagination-bullets.uk-active .swiper-pagination-bullet {border-color: #333;}
.swiper-pagination-bullets.uk-active .swiper-pagination-bullet.swiper-pagination-bullet-active {border-color: #333;}

/* @media */
@media screen and (max-width: 2200px) {
}
@media screen and (max-width: 1440px) {
	

}
@media(min-width:961px){
	.productlist_list li:first-child{width: calc(50% - 20px);}
.productlist_list li:first-child canvas{ width: 100%; padding-top: 9%; position: relative;}
}
@media screen and (min-width: 960px) and (max-width: 1440px) {
	.swiper-container-vertical>.swiper-pagination-bullets {right: 2% !important;}
	.header .navBox .uk-button{ width: 60px; height: 60px;}
	.i_banner .uk-card h1{ font-size: 64px;}
	.i_banner .uk-card p{ font-size: 28px;}
	.index_title h2{ font-size: 48px;}
	.index_title h3{ font-size: 24px;}
	.i_prod .i_prod_name h4{font-size: 18px;}
	.i_application .i_appl_box{ margin-left: 5% !important;}
	.i_application .index_title p{ font-size: 16px;}
	.i_application_nav .uk-card h4{ font-size: 20px;}
	.i_news .i_news_r h4{ font-size: 20px;}
	.i_news .i_news_l .title h4{font-size: 20px;}
	.copyright{ font-size: 16px;}
	
	.position, .position a{ font-size: 16px;}
	.productlist_list li h4{font-size: 18px;}
	.about_title h2{font-size: 36px;}
	.about_title h4{font-size: 24px;}
	.development_text h3{font-size: 36px;}
	.development_text p{font-size: 20px;}
	.responsibility .title h2{font-size: 48px;}
	.responsibility .title h3{font-size: 24px;}
	.resp_nav .uk-card a{font-size: 16px;}
	
	.about .uk-margin-medium-top{ margin-top: 20px !important;}
	.about .uk-margin-top{ margin-top: 0 !important;}
	.about h3 {font-size: 32px;}
	.about #adv .counter-value {font-size: 42px !important;}
	#adv h5{font-size: 16px !important; margin-top: 5px !important; }
	.cultural_list .uk-slideshow-nav li a{font-size: 20px;}
	.cultural_list .text h2{font-size: 36px;}
	.cultural_list .text h3{font-size: 24px;}
	
	
}

@media screen and (max-width: 960px) {
	.uk-navbar.uk-active {background-color: rgba(0, 0, 0, 0.2);}
	.uk-logo img {height: 40px;}
	.uk-navbar-toggle{color: var(--color1);}
	.uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle{ min-height: 60px !important;}
	.uk-sticky-placeholder{ height: 0 !important;}
	.uk-offcanvas-bar {width: 100%;left: 100%;background-color: #fff;padding: 0;}
	.uk-offcanvas-bar svg {color: #333;}
	.uk-offcanvas-bar a {color: #999;}
	.uk-offcanvas-bar .uk-nav>li>a {color: #999;}
	.uk-offcanvas-bar .uk-nav>li.uk-active>a {color: #333;}
	.uk-offcanvas-bar a:hover {color: #333;}
	.uk-offcanvas-bar .uk-nav-sub>li.uk-active>a {color: #333;}
	.uk-offcanvas-bar hr {border-color: #dedede;}
	.uk-offcanvas-bar h6 {color: #999;}
	.uk-offcanvas-bar .uk-nav-parent-icon>.uk-parent>a::after {background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E");transform: rotate(180deg);}
	.uk-offcanvas-bar .uk-nav-parent-icon>.uk-parent.uk-open>a::after {background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E");}
	#tm-mobile .uk-list li.uk-active a {color: #333;}
	
	.swiper-pagination{ display: none;}
	.swiper-slide{ height: 100% !important;}
	.i_banner .uk-position-bottom-right{ bottom:100px;}
	.i_banner .uk-card{ width: 100%;flex-direction: inherit;}
	.i_banner .uk-card>div{ padding: 0 20px;}
	.i_banner .uk-card h1{ font-size: 32px;}
	.i_banner .uk-card p{ font-size: 20px;}
	.i_banner a.btn {line-height: 40px;padding: 0 10px 0px;font-size: 16px;}
	.uk-margin-medium-top{ margin-top: 20px !important;}
	.uk-margin-medium-bottom{ margin-bottom: 20px !important;}
	.uk-margin-large-top{ margin-top: 20px!important;}
	.index_title h2{ font-size: 32px;}
	.index_title h3{font-size: 24px;}
	.i_prod_nav{flex-wrap: wrap;}
	.i_prod .i_prod_nav .uk-card{ width: 33.33%;margin: 5px 0;text-align: center;}
	.i_prod .i_prod_bg{ padding: 0;}
	.i_prod .i_prod_pd{ overflow: auto;}
	.i_prod .i_prod_btn .uk-position-center-left{left: 0;margin: 0;}
	.i_prod .i_prod_btn .uk-position-center-right{right: 0;margin: 0;}
	.i_prod .i_prod_btn img{width: 20px;}
	.i_prod .uk-inline-clip { margin: 30px;}
	.i_prod .i_prod_name{ margin-top: -20px; padding-bottom: 10px;}
	.i_application .i_appl_box{ margin-left: 5%; margin-right: 5%;}
	.i_application .index_title p{font-size: 15px;line-height: 25px;}
	.i_application_nav{ margin-left: -5%; margin-right: -5%;}
	.i_application_nav>div{ width: 33.33%; margin-bottom: 2px;}
	.i_application_nav .uk-cardbody{ padding: 10px;}
	.i_application_nav .uk-cardbody h4{ font-size: 18px;}
	.i_application_nav .uk-cardbody .uk-margin-medium-top{ margin-top: 0 !important;}
	.i_application_nav .uk-cardbody .pic{ right:10px;bottom: 10px;}
	.i_application_nav .uk-cardbody .pic img{ height: 30px;}
	.i_application .uk-position-bottom-left{ bottom:100px;}
	.i_application_nav .uk-cardbody:hover, .i_application_nav .uk-active .uk-cardbody{transform: translateY(-13px);}
	.i_application_nav .uk-active .uk-cardbody::before{ bottom:-13px;}
	.i_partner .partnerlist li>div{ margin: 2px;}
	
	.i_news .i_news_l .title h4{ font-size: 18px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}
	.i_news .i_news_l .title h6{ display: none;}
	.i_news .i_news_r{ padding: 10px;}
	.i_news .i_news_r h4{font-size: 18px;}
	.i_news .i_news_r p{ display: none;}
	.i_news .i_news_r h6{padding-bottom: 10px;}
	
	.foot { min-height: inherit;}
	.foot .uk-padding{ padding: 0;}
	.foot_logo{justify-content: center;}
	.foot_logo img{ height: 50px !important;}
	

	
	.about_title h2 { font-size: 36px;}
	.about_title h3{font-size: 32px;}
	
	.sortnav{ gap:inherit; width: 100%;}
	.sortnav>div{ width: 33.33%;padding: 5px 0;}
        .sortnav a::before{bottom:5px;}
	
	.sortnav_product{gap: 0;flex-wrap: wrap;}
	.sortnav_product>div{width: 33.33%; padding: 5px 0;}
	.sortnav_product a{ padding: 0;}
	.sortnav_product a::before{bottom: -5px;}
	
	.productlist{ padding-top: 10px;}
	.search_product{ width: 100%;padding: 10px;}
	.search_product input{ font-size: 15px;}
	.productlist_list{display: flex;flex-wrap: wrap;justify-content: space-between;}
	.productlist_list li{width: 49%; margin-right: 0; margin-bottom: 10px;}
	
	.about h3{ font-size: 32px;}
	.about canvas {border-top-right-radius: 50px; border-bottom-left-radius: 50px;}
	.cult_top img{ height: 30px;}
	.cultural_list .uk-slideshow-items li{background: var(--color3);}
	.cultural_list .uk-position-cover{top: 25%;}
	.cultural_list .yuan{ width: 260px; height: 260px;}
	.cultural_list .uk-slideshow-nav li a{ font-size: 18px;}
	.cultural_list .uk-slideshow-nav li span{ font-size: 24px;}
	.cultural_list .uk-slideshow-nav li:first-child{right: -19%;}
	.cultural_list .uk-slideshow-nav li:nth-child(2){ right: -34%;}
	.cultural_list .uk-slideshow-nav li:nth-child(3){right: -34%;}
	.cultural_list .uk-slideshow-nav li:last-child{right: -18%;}
	.cultural_list .text{ margin-top: 80px;}
	.cultural_list .text h3{ font-size: 18px;}
	.cultural_list .text h2{ font-size: 24px;}
	.cultural_list .text h2::before{bottom: -20px;width: 48px;}
	
	.globa .city{position: inherit !important;bottom: 10px;}
	.globa .city p{ font-size: 15px;}
	.partnerlist{ padding-left: 0;}
	.partnerlist li{ width: 16.6% !important;}
	
	#adv{visibility: inherit !important;}
	#adv h4 span.counter-value{ font-size: 36px !important;}
	#adv h4 sup{ font-size: 36px;}
	#adv p{ font-size: 18px;}
	#adv h5{ font-size: 16px;}

	.contact h3{ padding: 60px;font-size: 16px;}
	.contact h3 b{font-size: 36px;}
	.contact h4{ font-size: 24px;}
	.contact h5{font-size: 16px; line-height: 20px; padding: 10px 0;}
	.contact .uk-padding{ padding: 15px;}
	.message .index_title h3{font-size: 18px;}
	.message .index_title h2{font-size: 36px;}
	.message form>div{ padding-left: 0;}
	.message form>div:last-child{ width: 100%;}
	.message .uk-button{ margin: 0;}
	
	.newsbox .text h4{ font-size: 20px;}
	.newsbox .text p{font-size: 15px;}
	.newsbox .uk-inline-clip{ margin-top: 10px;}
	
	.about_title h4{ font-size: 24px;}
	.development_text h3{font-size: 32px;}
	.development_text p{font-size: 18px;}
	.responsibility{padding-top: 60px;background-position: 60% 50%;}
	.responsibility .title h2{font-size: 36px;}
	.responsibility .title h3{font-size: 24px;}
	
	.resp_nav .uk-card::after{ height: 100%;left: -5px;}
	.resp_nav .uk-card:last-child::before{height: 100%;}
	.resp_nav .uk-card a{ font-size: 15px;padding: 0;}
	.resp_nav>div{padding: 0 10px;}
	
	.solution1 img{ height: 60px;}
	.solution5{ padding: 50px 0;}
	
	
	

	
}