Abody,div,dl,dt,dd,Substrate condition,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0; font-family:'Microsoft YaHei';}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}img{max-width:100%}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ul{list-style-type:disc;list-style-position:outside;padding-left:20px}ol{padding-left:18px}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:''}abbr,acronym{border:0}.row:after,.row:before{display:table;content:" ";clear:both}.row{margin-right:0;margin-left:0}input,textarea{font-family:Arial,'Microsoft YaHei',sans-serif}::-webkit-input-placeholder{color:#939393;font-family:Arial,'Microsoft YaHei',sans-serif;opacity:1}::-ms-input-placeholder{color:#939393;font-family:Arial,'Microsoft YaHei',sans-serif;opacity:1}::placeholder{color:#939393;font-family:Arial,'Microsoft YaHei',sans-serif;opacity:1}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}.container{margin-left:auto;margin-right:auto;padding-right:15px;padding-left:15px;box-sizing:border-box}@media (min-width: 768px){.container{width:750px}}@media (min-width: 992px){.container{width:970px}}@media (min-width: 1230px){.container{width:1200px}}
/*HEADER*/
:root {--BG:#eff4f8; --BG2: #f3efec; --gray:#eee; --blue:#28bfcd; --main:#053566; --secondary: #d73624; --shadow: rgba(13 125 255 / 10%); --word: #777; --word2: #1c2c39; --word3: #aaa; --word4: #3a2020;--white: #fff; --linear: linear-gradient(to right, rgba(16, 68, 126, 0.9) 0%, rgba(44, 175, 214, 0.8) 100%); --linear2: linear-gradient(to right, rgb(16, 96, 134) 0%, rgb(5, 53, 102) 100%);  --linear3: linear-gradient(100deg, rgba(5,53,102,1) 0%, rgba(5,53,102,1) 35%, rgba(40,191,205,0) 80%);}

html{}
body{font-size:14px; color:#646464;  background-color:var(--BG) !important;; overflow-x: hidden; min-height:100vh; max-width:2560px; margin:auto !important;}
input{padding:0 10px !important;}
input:-internal-autofill-selected {background-color:var(--BG) !important;}
input::placeholder{font-size:14px; }
select:focus-visible{outline:0 solid var(--BG)}
input:focus-visible{outline:0 solid var(--BG)}
textarea:focus-visible{outline:0 solid var(--BG)}
a{text-decoration:none; cursor:pointer;}
a:link, a:visited{color:inherit}
p{text-align: left; float:left;font-weight:400;}
p.title{color:var(--white); font-size: 40px;}
p.subtitle{color:var(--white); font-size: 24px; width:100%;}
nav{position:relative;height:100%;z-index:98; float:right; display:block;}
ul{list-style-type: none; font-size:14px; color:var(--white); font-weight:400;}
ul li{float:left; padding:0 15px;}
header ul li{white-space:nowrap;}
footer ul li{white-space:nowrap;}
.inner{background-color:var(--BG); margin-top: 83px;}
.inner .topBanner{background-size:cover; position: relative; z-index: 12;}
.left{float:left !important;}
.right{float:right !important;}
.center{text-align:center;}
.mobile{display:none;}
.mobile2{display:none;}
.invisible{opacity: 0;}
.visible{animation: fadeInUp 2000ms; }
.visible2{animation: fadeInDown 2000ms; }
.visible3{animation: fadeInLeft 2000ms; }
.visible4{animation: fadeInRight 2000ms; }
.zero{padding:0 !important;}
table, th, td { border: 0px solid black; border-collapse: collapse; }
table{width:100%; }

svg{width:14px; height:14px;margin-bottom: -2px;margin:0 10px;}
svg .btn-arrow2{fill:none; stroke:var(--white);stroke-miterlimit:10;stroke-width:1px;}

.moreBtn{ background-color:transparent; overflow:auto; text-align:left; border-radius:4px; padding:5px 40px; float:left; border:1px solid var(--main);}
.moreBtn p{text-align:center; margin:0 auto !important; float:none; font-size:14px !important;color:var(--main);line-height: 30px; padding:0 !important;}
.moreBtn.white{ border:1px solid var(--white);}
.moreBtn.white p{color:var(--white); font-size:14px !important;}
.moreBtn svg{margin:0;}
.moreBtn svg .btn-arrow2{stroke:var(--main);}

a:hover .moreBtn p{color:var(--white);}
a:hover .moreBtn svg .btn-arrow2{stroke:var(--white);}

.moreBtn.white svg .btn-arrow2{stroke:var(--white);}
.moreBtn:hover{ background-color:var(--secondary); color:var(--white);}
.moreBtn.moreBtnBG{ background-color:var(--main); border-color:var(--white);}
a:hover .moreBtn.moreBtnBG{ background-color:var(--secondary);}
.moreBtn.moreBtnBG p{ color:var(--white) !important;}
.moreBtn.moreBtnBG svg .btn-arrow2{stroke:var(--white) !important;}


.sitemap{margin:10px 0; float:none;overflow:auto;}
.sitemap .btn-sitemap{height:20px; width:20px; float:left; background-image:url('../img/btn-sitemap.png');}
.sitemap a:hover .btn-sitemap{background-position:bottom;}
.sitemap p{color:var(--main);}
.sitemap a:hover p{color:var(--secondary);}

header{width: 100%; z-index: 1000;  position: fixed; top: 0; padding:0 30px; max-width:2560px;background-color:var(--main); transition: all ease 0.5s; border-bottom:1px solid var(--secondary);}
header ul li{float:left; padding:0 30px;}
header .langWrapper{width:100%; float:right; margin-bottom: -10px; position: relative; z-index: 99;}
header .langWrapper .lang{background-color:var(--blue); color:var(--white);float: right; padding: 5px 20px; border-radius: 0 0 4px 4px;}
header .langWrapper .lang a{ color:var(--white);}
header a:hover{ color:var(--secondary);}
header .langWrapper .lang a:hover{color:var(--secondary);}
header .logo{z-index:99; position:relative;}
header .logo img{position:relative;float:left;transition:all ease 0.3s;-webkit-transition:all ease 0.3s; height:40px ;}
header.index .logo img{display:none;}
header .btnMenu{display:none; width:42px;height:52px;position:relative;padding-top:11px;cursor:pointer;z-index:99;transition: open ease 0.3s;-webkit-transition: open ease 0.3s;top:1.5%;float:left;}
header .icon{ position:absolute; top:6px; right:0;}
header .itemBox{float:right; margin-top:10px;}

header.index .searchBox{display:none;}
.btnSearchBox{display:none;}
.searchInput{display:flex; width: 284px; overflow:hidden;}
.searchBox{position:relative;display:inline-block; vertical-align: top; margin: 10px 0 0 10px;border-radius: 4px; overflow: hidden;float:left; border:1px solid var(--blue)}
.searchBox input {height: 30px;  border:0; font-size: 18px;float: left;padding:0 20px; background:var(--white); color: var(--word); width:100%;}
.searchBox form {float:right; border-radius:0; font-size:14px;}
.searchBox select {height:30px; border:0; float:right; background:transparent;color:var(--white);}
.searchBox select option {width:64px; background:var(--BG); border-bottom:1px solid var(--main);color:var(--white);}
.searchBox .searchBtn{height: 30px; padding: 3px 10px; font-size: 18px; cursor: pointer; box-sizing: border-box; background-color:var(--blue); float:right;width: 44px;}

.searchBox .searchBtn:hover {background-color:var(--secondary);}
.searchBox .searchBtn img{ height:24px; width:24px;}
header .btnRFQ{ float:left; height: 40px; padding-right:30px ;}
header .btnRFQ a .btnIcon{float:left; background-position:top; background-image:url(../img/header/header-ico-RFQ.png);background-repeat:no-repeat; background-size:90%; height:30px; width:30px; margin:5px}
header .btnRFQ a:hover .btnIcon{background-position:bottom;}
header .btnRFQ a p{float:left;color:var(--white); font-size:16px; padding:10px 0; font-weight:400;}
header .btnRFQ a:hover p{color:var(--secondary)}
header .btnLang{ float:left; height: 40px;width:52px;}
header .btnLang ul{display:none;padding:0; background:var(--BG);}
header .btnLang.open ul{display:block;overflow:auto;}
header .btnLang li{float:none;}
header .btnLang li:after{display:none;}
header .btnLang a .btnIcon{float:none; background-image:url(../img/header/header-ico-lang.png);background-repeat:no-repeat; background-size:100%; height:30px; width:30px; margin:5px auto;}

header .btnLang a p{text-align:center; color:var(--secondary); font-size:16px; padding:0; margin: 4px auto; width: 100%;}
header .btnLang:hover a .btnIcon{background-position:bottom;}
header .btnLang a p:hover{color:var(--secondary)}
header .btnSearchBox{ float:left; height: 40px; cursor:pointer;position:relative; }
header .btnSearchBox .btnIcon{float:left; background-image:url(../img/header/header-ico-searchingBar.png);background-repeat:no-repeat; background-size:100%; height:30px; width:30px; margin:5px}
header .btnSearchBox p{float:left;color:var(--white); font-size:16px; margin: 4px auto; width: 100%; }
header .btnSearchBox:hover .btnIcon{background-position:bottom;}
header .btnSearchBox:hover p{color:var(--secondary)}
header .btnSearchBox .searchBox{position:absolute; bottom:-48px; right:0}
header .btnSearchBox.open .searchBox{display:block !important}
header li p:after {content: ''; display: block; margin-left: 36px; height: 1px; width: 0px; background: transparent; transition: width .5s ease, background-color .5s ease;}
header li:hover a:first-of-type{color:var(--secondary);}
header li li:hover p:after {  width: 100%; background: var(--secondary);}


/*dropdown*/
.menuBar{overflow:hidden; margin-top:19px}
.menuBar .dropdown{display:none; height: auto; width: 100%; left: 0; position: fixed;  background-color: var(--BG); padding:20px 10px; top: 80px;border-bottom: 1px solid var(--secondary); box-shadow:24px 24px 24px 24px var(--shadow);}
.menuBar .dropdown .dropdownCol{float:left;}
.menuBar .dropdown ul{padding:0;}
header .menuBar .dropdown ul li{padding:0 5px; min-width: 260px;}
header .menuBar .dropdown ul li:after{margin:30px 0 0 0;}
header .menuBar .dropdown ul li:hover p:after{width:100%;}
.menuBar .dropdown p{ line-height:30px;font-size: 14px; color:var(--main);overflow:hidden;}
.menuBar .dropdown a:hover p{color:var(--secondary);}
.menuBar .dropdown p svg .btn-arrow2{stroke:var(--main);}
.menuBar .dropdown a:hover p svg .btn-arrow2{stroke:var(--secondary);}
.dropdownWrapper{margin:10px auto; width:90%; }
.menuGraphics{float:left;}
.menuBar .dropdown .dropdownContent{padding: 40px 0 0 80px; float:left;  max-width:600px;}
.menuBar .dropdown img{padding:13px; background-color:#eee; box-shadow: 3px 6px 6px rgba(0,0,0,0.2); max-width: none;}
.menuBar .menuDropdown{height:42px; cursor: default;}


section .wrapper{width:90%; margin: 0 auto;}

section.slider1{position: relative;overflow: hidden;width: 100%; margin:80px auto 0;}
section.slider1 .wrapper{width:100%;}
section.slider1 .Content{position:absolute; bottom:50px; left:0%; z-index:10; padding:20px 40px; margin:0 40px; width:90%; max-width:740px; border-radius:4px; text-align: left;}
section.slider1 .Content img{margin-bottom:30px;}
section.slider1 .Content .searchBox{float:none;margin: 0;}
section.slider1 .Content .searchBox .searchInput{width:100%;}
section.slider1 .Content p{ letter-spacing:2px;float:none;}
section.slider1 .bannerArea{background-size:cover; background-position:right; height:100%;}
section.slider1 .rsSlide:nth-of-type(1) .bannerArea{background-image:url('../img/index/banner1B.jpg'); }
section.slider1 .rsSlide:nth-of-type(2) .bannerArea{background-image:url('../img/index/banner1A.jpg'); }
section.slider1 .rsDefault .rsTabs{padding-top:0; margin:-30px auto 0; z-index:999;}
section.slider1 .rsDefault .rsTab.rsNavSelected{background:var(--secondary); border:var(--main);}
section.slider1 .banner{position: relative;}
section.slider1 .royal{width: 100%; height:500px; position: relative; direction: ltr; padding:0; margin:0;}
section.slider1 .rsContent{ position: relative; overflow: hidden; z-index: 100;}
section.slider1 .rsContent p.slogan{font-size:48px;}
section.slider1 .rsContent p{font-size:24px;}
section.slider1 a.btnArrow{position: relative;  transform:rotate(45deg); }
section.slider1 .arrow{margin:10px auto; text-align:center;  position: relative; animation: icon 1s infinite; }
section.slider1 .arrow div{width:40px; height:40px; border-bottom:1px solid var(--white); border-right:1px solid var(--white); transform:rotate(45deg);margin: 80px auto;  text-align: center;}
section.slider1 .rsNoDrag{color:var(--word);}

section{position: relative;overflow: hidden;width: 100%; margin: auto;}

section.aboutUs{position: relative; z-index: 10; overflow: visible;}
section.aboutUs:before{content:""; position:absolute; z-index:2;top:-200px; left:0;height:800px; width:800px; background-image: url('../img/index/BG-aboutUs.jpg'); background-size:cover;}
section.aboutUs:after{content:""; position:absolute; z-index:4; left:0;margin:0 10%; width:80%; height: 500px; bottom: -40px;  border-radius: 4px; background-image: var(--linear2); }
section.aboutUs .row{position:relative; z-index:6;}
section.aboutUs .wrapper{width:90%; float:none; margin: 0 auto; max-width:900px;}
section.aboutUs .aboutUsBackground{background-image:var(--linear); margin:160px 50px 0; padding:30px 0; overflow:hidden; text-align:center; border-radius:4px; position:relative; z-index:4;}
section.aboutUs .aboutUsBackground p.subtitle{font-size:18px; letter-spacing: 2px; padding:20px 40px;}
section.aboutUs .aboutUsBackground .content p{ padding:0 40px 20px;}
section.aboutUs .aboutUsBackground p{ color:var(--white); line-height:30px; letter-spacing:1px;}
section.aboutUs .aboutUsBackground a{margin:10px auto; display: inline-block;}
section.aboutUs .img-aboutUs{margin-left:-16.6667%; margin-top:80px; padding-right:30px; z-index:10;}
section.aboutUs .img-aboutUs img{border-radius:4px;}

section.catalogue{ width:90%; overflow:hidden; margin: 60px auto 0; text-align: center;position: relative; z-index: 200;}
section.catalogue p.title{text-align:center; color:var(--main); width:100%;}
section.catalogue a{float: none; margin: 10px auto; display: inline-block;}
section.catalogue .row a{display:block;}
section.catalogue .row a img{max-width:80px;}
section.catalogue .col-catalogue{ text-align:center; overflow:auto; margin:10px auto 0; }
section.catalogue .col-xs-4{ border-right:1px solid var(--main);}
section.catalogue .col-xs-4:last-of-type{border-right:0; }
section.catalogue .col-catalogue p{color:var(--main); width:100%; text-align:center;}
section.catalogue .col-catalogue p.subtitle{font-size: 14px; letter-spacing: 2px; min-height: 40px; padding: 0; margin: 0;}
section.catalogue .col-catalogue .img-catalogue{width:100px; height:100px; float:none; margin:0 auto; background-size:cover !important;}
section.catalogue a:hover .col-catalogue .img-catalogue{background-position:bottom;}
section.catalogue a:hover .col-catalogue p{color:var(--secondary);}
section.catalogue .col-catalogue .img-catalogue1{background:url('../img/index/icon-catalogue1.png') top;}
section.catalogue .col-catalogue .img-catalogue2{background:url('../img/index/icon-catalogue2.png') top;}
section.catalogue .col-catalogue .img-catalogue3{background:url('../img/index/icon-catalogue3.png') top;}
section.catalogue .col-catalogue .img-catalogue4{background:url('../img/index/icon-catalogue4.png') top;}
section.catalogue .col-catalogue .img-catalogue5{background:url('../img/index/icon-catalogue5.png') top;}
section.catalogue .col-catalogue .img-catalogue6{background:url('../img/index/icon-catalogue6.png') top;}


section.mid{ background:url('../img/index/BG-mid.jpg') fixed no-repeat bottom; width:100%; position:relative;position: relative; min-height: 400px; margin:180px auto 0; padding-bottom:100px;}
section.mid:before{position:absolute; content:""; width:100%; height:180px; top:0; left:0; z-index:2;background:url('../img/index/background.png');}
section.mid:after{position:absolute; content:""; width:100%; height:180px; bottom:0; left:0; z-index:2;background:url('../img/index/background2.png');}
section.mid .wrapper{position:relative;z-index:10;}
section.mid .application-contents{float:right;}
section.mid .application-graphics{float:left;}
section.mid .application{aspect-ratio: 1; background-size:cover; margin:10px auto; border-radius:4px;}
section.mid .application-graphics p{ display:none;}
section.mid .application1{background-image:url('../img/index/img-application1.jpg');}
section.mid .application2{background-image:url('../img/index/img-application2.jpg');}
section.mid .application3{background-image:url('../img/index/img-application3.jpg');}
section.mid .application4{background-image:url('../img/index/img-application4.jpg');}
section.mid .application5{background-image:url('../img/index/img-application5.jpg');}
section.mid .application6{background-image:url('../img/index/img-application6.jpg');}
section.mid .application-color{background:var(--linear2);}
section.mid .border-radius-top{ border-radius:240px 10px 10px 10px;}
section.mid .border-radius-bottom{ border-radius:10px 10px 240px 10px;}
section.mid .border-radius-left{ border-radius:10px 240px 10px 10px;}
section.mid .border-radius-right{ border-radius:10px 10px 10px 240px;}


section.mid p.subtitle{ color:var(--main);}
section.mid .application{padding:12vw 10px 10px 40px; overflow:hidden;margin: 4px auto;}
section.mid .contents{padding-bottom:30px; overflow:auto;}
section.mid .contents p.application-points{float:left; width:50%; color:var(--main); font-size:18px;padding:5px 20px;}

section.news{background-color:var(--gray); margin:0 auto; padding:80px 0 40px;}
section.news .news-contents{background-image:var(--linear2); border-radius:4px; padding:30px;overflow: auto; margin:10px auto; max-width: 700px;}
section.news .news-contents img{padding-bottom:20px;}
section.news .news-contents p{color:var(--white);}
section.news .news-contents p.news-contents-words{height:100px; width:100%;}
section.news .news-contents p.subtitle{font-weight:400; height:60px;}

section.SampleRequest{background:url('../img/testing.jpg') fixed no-repeat bottom; width:100%; position:relative;position: relative; padding:40px 0 }
section.SampleRequest .content{text-align:center; overflow: hidden; margin:0 auto; max-width: 900px;}
section.SampleRequest .content p{margin:20px auto;float: none;text-align:center; color:var(--white);}
section.SampleRequest .content a{display: inline-block;}

footer{float:left; width:100%; padding:50px 0 10px; overflow:auto; position:relative; z-index:10; min-height:30vh; background-color: var(--main);}
footer .wrapper{width:90%; float:none; text-align:center; margin:auto;}
footer .infoWrapper{display: flex; flex-direction: column;}
footer .infoWrapper a:first-of-type p{text-indent:0}
footer .infoWrapper a p{text-indent:-10px;}
footer svg .btn-arrow{stroke:var(--word3);fill:none; }
footer p{text-align:left;}
footer a{width:auto;}
footer a:hover p{color:var(--secondary)}
footer .logo{width:100%; float:left; text-align:left; }
footer img{ max-width:100px; margin:0 auto; width: 100%; float:left}
footer .sitemap{ float:left; overflow:hidden;width: 100%; margin:0;}
footer .sitemap p{padding:0 20px 40px 0;}
footer .sitemap p.subtitle{font-size:24px; padding-bottom:10px;color:var(--word);transition: all .5s ease;}
footer .sitemap a:hover p.subtitle{color:var(--secondary);transition: all .5s ease;}
footer .sitemap svg{width:24px; height:30px;float:left;margin:5px 30px 5px 0;}
footer .sitemap svg .btn-arrow2{fill:none; stroke:var(--word);stroke-miterlimit:30;stroke-width:3px;transition: all .5s ease;}
footer .sitemap a:hover svg .btn-arrow2{ stroke:var(--secondary);}
footer .info{ float:left;}
footer .info p{padding:5px 10px 0; color:var(--white);}
footer .info p.subtitle{font-size:20px; padding-bottom:10px; color:var(--blue);margin-left: -10px;  margin-bottom: 0; }
footer .info .address:before{background:url('../img/index/icon-address.png') no-repeat; background-size:cover; width:30px; height:30px; display: block; content: ''; position: absolute; top: 0; left: -20px;}
footer .info .tel:before{background:url('../img/index/icon-tel.png') no-repeat; background-size:cover; width:30px; height:30px; display: block; content: ''; position: absolute; top: 0; left: -20px;}
footer .info .email:before{background:url('../img/index/icon-email.png') no-repeat; background-size:cover; width:30px; height:30px; display: block; content: ''; position: absolute; top: 0; left: -20px;}
footer .info .address{margin-left:20px; padding-left:20px; position:relative;}
footer .info .tel{margin-left:20px; padding-left:20px; position:relative;}
footer .info .email{margin-left:20px; padding-left:20px; position:relative;}
footer .QR{width:8%; min-width:120px; float:left;}
footer .QR img{padding-bottom:30px; max-width:80px; margin:30px auto 0; width: 100%;}
footer .copyright p{font-size:9px; color:var(--white);}