

@media screen and (max-width: 1800px){
	.searchBox{display:none;}
	.btnSearchBox{float:right;display:block;position:relative;}
	.item.open .searchBox{display:block;position:absolute;right: 50px;bottom: -30px;}
	}

@media screen and (max-width: 1400px){
	header nav ul li{padding:0 10px;}
	header.top{box-shadow: 24px 24px 24px var(--shadow);width: 100%;}
	header .navigation{width:100vw;}
	header .navigation nav{top:-100%; box-shadow: 24px 24px 24px var(--shadow);position:fixed; transition: all .5s ease;width: 100%;right:0;}
	header .navigation nav.open{top:0; transition: all .5s ease; background:#fff;}
	header .navigation nav ul{display: none;}
	header .navigation nav.open ul{display:grid; margin: 100px auto;}
	
	
	header .headerWrapper{float:right; padding:10px 30px 10px 10px;}
	header .itemBox{padding:16px 0 0 0; margin-top:2px;}
    header li:after {display:none;}
	header li p{font-size:28px; font-weight:200;}
	header .menuBar .dropdown p{font-size:16px;text-indent:-10px; padding-left:12px; color:var(--white);}
	header .menuBar .menuDropdown a:first-of-type{color:var(--white);}
	header a:hover{color:var(--secondary) !important;}
	header a svg.downArrow .arrow{stroke:var(--white);}
	header a:hover svg polyline{stroke:var(--secondary) !important;}
	header .btnMenu{display:block !important; float: right; margin-top: 10px;}
	header .btnMenu.open .icon{ height:52px; width:52px; top:-5px; left:-20px;right: unset;}
    header .btnMenu i{width:40px;height:2px;background:var(--white);display:block;margin:5px auto; transition: all .5s ease;}
    header .btnMenu.open{display:block;}
    header .btnMenu.open i{position:absolute;transform:rotate(45deg);top:20px;left:12px; transition: all .5s ease;background:var(--white)}
    header .btnMenu.open i:first-child{transform:rotate(135deg); transition: all .5s ease;}
    header .btnMenu.open i:last-child{opacity:0 transition: all .5s ease;}
    header .btnMenu:hover{background:none;border-color:var(--secondary);}
    header .btnMenu:hover i{background:var(--secondary);}
	header .icon{top:14px;}
	nav{position:fixed;height:100%;left: 0%;top: 0%; right: 0%; ;z-index:98;display:none;opacity:0;}
    nav .menuBar{height:100%; width:100%;overflow:hidden; padding-top:120px; padding-bottom:60px;box-shadow: -2px 12px 14px rgba(0,0,0,0.2); animation: open .2s ease-in; background-color:var(--main); margin-top:0;}
	.menuBar .dropdown.aboutDropdown .dropdownContent{width:auto}
	nav.open{display:block; opacity:1; top: 0px; transition: open 0.5s ease-in;}
    nav ul{padding:50px 0;width:100%;font-size:16px;text-transform:uppercase;}
    nav ul li{padding-bottom:20px; white-space: normal;}
	.menuBar .menuDropdown a{overflow:visible;}
    nav i{width:30px;height:1px;background:#FFF;margin:auto;display:block}
    nav a:hover > i{opacity:1;right:-20px}
    nav ul li a{position:relative; text-decoration:none; cursor: pointer; font-size:28px; width:100%;}
	header.index .menuBar .menuDropdown a { color: var(--white);}
	header.index .menuBar .menuDropdown a:hover { color: var(--blue);}
	.menuBar .menuDropdown .dropdown.open{display:block; padding:0; top:0; background-color:transparent; border-bottom: none;}
	.menuBar .dropdown p svg .btn-arrow2{stroke: var(--white);}
	.dropdownWrapper{width:96%;}
	.menuBar .menuDropdown a { color: var(--white);}
	header.index .menuBar .menuDropdown svg.downArrow .arrow{ stroke: var(--white);}
	header.index .menuBar a .menuDropdown svg.downArrow .arrow{ stroke: var(--white);}
	.menuBar .menuDropdown a:hover { color: var(--blue);}
	header svg .btn-arrow2{ stroke:var(--white)}
	.menuBar .menuDropdown a svg.downArrow .arrow{fill:none; stroke:var(--white);stroke-miterlimit:10;stroke-width:1px;}
	.menuBar .menuDropdown a svg.downArrow{ margin-bottom: 2px;}
	.menuBar .menuDropdown a.open svg.downArrow{ transform:rotate(180deg);}
	header .menuBar .dropdown ul li ul{display:contents;}
	header .menuBar .dropdown ul li ul li a{font-size:16px;}
    nav ul li a i{width:10px;height:13px;position:absolute;top:13px;right:0;border:none;margin:0;background:none;opacity:0; font-style:normal;}
	header .navigation nav ul{width:260px; background-color:#fff; padding:0; float:none;display: grid;}
	header .wrapper{padding: 15px 20px;}
	header .lang p{padding:2px 0 8px;}
    header ul li .btn_dorpdown{display:block;}
	header ul{  padding:0; float:none; margin:0;overflow-x: hidden; overflow-y: auto;}
	header ul li{ float: none;overflow:auto;}
	.menuBar .menuDropdown{height:auto;}
	header .menuBar .dropdown ul li{min-width:unset;}
	.menuBar .dropdown .dropdownContent{box-shadow:unset; background:transparent;width:unset;padding:0;min-height:unset; width:100%;}
	.menuBar .dropdown .dropdownCol{height:auto;}
	.menuBar .dropdown{width:100% !important;}
	.menuBar .dropdown p{float:none; margin:0;}
	header .menuBar .dropdown{position:relative;}
	header .menuBar .dropdown{padding-top: 0; margin-left: 0;}
	header .menuBar .dropdown img{display:none;}
	
	footer .logo,footer .QR{margin:0 auto;text-align: center;}
	footer .logo p{ text-align: center;}
	section.aboutUs{margin-bottom:0;}
	section.map .mapAddress{width:60%;}
	section.map .asia{margin-left:-200px;}
	section.part2{background-size:cover;}
	footer .socialmedia{float:left;}
	footer .sitemap .wechatQRcode p{margin:20px 0 0;}
	section.news .news-contents p.news-contents-words{height:170px;}
}


@media screen and (max-width: 1200px){
	.mobile{display:block;}
	.desktop{display:none}
	footer .infoWrapper{}
	footer .info{margin:0 auto; max-width: none;width:100%;}
	section.slider1 .rsSlide:nth-of-type(1) .bannerArea{background-image:url('../img/index/banner1A-mobile.jpg'); }
	section.slider1 .rsSlide:nth-of-type(2) .bannerArea{background-image:url('../img/index/banner1B-mobile.jpg'); }
	section.aboutUs{margin-bottom: 50px;}
	section.mid{margin-top:80px;}
	section.mid .application{padding:16vw 10px 30px; overflow:visible;}
	section.part2:after{width: 90%;height: 300px;}
	section.map .mapAddress{ width: 300px; margin-left: -540px;}
	section.mid .application{aspect-ratio: unset;}
	footer .sitemap .wechatQRcode{float:left}
}

@media screen and (min-width: 1401px){
	html.block{overflow-y: scroll;}
	.menuBar li:hover .menuDropdown .dropdown{display:block !important;}
	
}

@media screen and (max-width: 991px){
	.mobile2{display:block;}
	.desktop2{display:none}
	html.block header{box-shadow:unset;}
	html.block header.top{box-shadow:unset;}
	section.index{padding:90px 0;}
	section.slider1 .Content .searchBox{display:block;}
	header .headerWrapper{float:right; padding:10px 30px 10px 10px;}
	header .itemBox{padding:16px 0 0 0; margin-top:2px;}
    header li:after {display:none;}
	header li p{font-size:28px; font-weight:200;}
	header .menuBar .dropdown p{font-size:16px;text-indent:-10px; padding-left:12px; color:var(--white);}
	header .menuBar .menuDropdown a:first-of-type{color:var(--white);}
	header a:hover{color:var(--secondary) !important;}
	header a svg.downArrow .arrow{stroke:var(--white);}
	header a:hover svg polyline{stroke:var(--secondary) !important;}
	header .btnMenu{display:block !important; float: right; margin-top: 10px;}
	header .btnMenu.open .icon{ height:52px; width:52px; top:-5px; left:-20px;right: unset;}
    header .btnMenu i{width:40px;height:2px;background:var(--white);display:block;margin:5px auto; transition: all .5s ease;}
    header .btnMenu.open{display:block;}
    header .btnMenu.open i{position:absolute;transform:rotate(45deg);top:20px;left:12px; transition: all .5s ease;background:var(--white)}
    header .btnMenu.open i:first-child{transform:rotate(135deg); transition: all .5s ease;}
    header .btnMenu.open i:last-child{opacity:0 transition: all .5s ease;}
    header .btnMenu:hover{background:none;border-color:var(--secondary);}
    header .btnMenu:hover i{background:var(--secondary);}
	header .icon{top:14px;}
	nav{position:fixed;height:100%;left: 0%;top: 0%; right: 0%; ;z-index:98;display:none;opacity:0;}
    nav .menuBar{height:100%; width:100%;overflow:hidden; padding-top:120px; padding-bottom:60px;box-shadow: -2px 12px 14px rgba(0,0,0,0.2); animation: open .2s ease-in; background-color:var(--main); margin-top:0;}
	.menuBar .dropdown.aboutDropdown .dropdownContent{width:auto}
	nav.open{display:block; opacity:1; top: 0px; transition: open 0.5s ease-in;}
    nav ul{padding:50px 0;width:100%;font-size:16px;text-transform:uppercase;}
    nav ul li{padding-bottom:20px; white-space: normal;}
	.menuBar .menuDropdown a{overflow:visible;}
    nav i{width:30px;height:1px;background:#FFF;margin:auto;display:block}
    nav a:hover > i{opacity:1;right:-20px}
    nav ul li a{position:relative; text-decoration:none; cursor: pointer; font-size:28px; width:100%;}
	header.index .menuBar .menuDropdown a { color: var(--white);}
	header.index .menuBar .menuDropdown a:hover { color: var(--blue);}
	.menuBar .menuDropdown .dropdown.open{display:block; padding:0; top:0; background-color:transparent; border-bottom: none;}
	.menuBar .dropdown p svg .btn-arrow2{stroke: var(--white);}
	.dropdownWrapper{width:96%;}
	.menuBar .menuDropdown a { color: var(--white);}
	header.index .menuBar .menuDropdown svg.downArrow .arrow{ stroke: var(--white);}
	header.index .menuBar a .menuDropdown svg.downArrow .arrow{ stroke: var(--white);}
	.menuBar .menuDropdown a:hover { color: var(--blue);}
	header svg .btn-arrow2{ stroke:var(--white)}
	.menuBar .menuDropdown a svg.downArrow .arrow{fill:none; stroke:var(--white);stroke-miterlimit:10;stroke-width:1px;}
	.menuBar .menuDropdown a svg.downArrow{ margin-bottom: 2px;}
	.menuBar .menuDropdown a.open svg.downArrow{ transform:rotate(180deg);}
	header .menuBar .dropdown ul li ul{display:contents;}
	header .menuBar .dropdown ul li ul li a{font-size:16px;}
    nav ul li a i{width:10px;height:13px;position:absolute;top:13px;right:0;border:none;margin:0;background:none;opacity:0; font-style:normal;}
	header .navigation nav ul{width:260px; background-color:#fff; padding:0; float:none;display: grid;}
	header .wrapper{padding: 15px 20px;}
	header .lang p{padding:2px 0 8px;}
    header ul li .btn_dorpdown{display:block;}
	header ul{  padding:0; float:none; margin:0;overflow-x: hidden; overflow-y: auto;}
	header ul li{ float: none;overflow:auto;}
	.menuBar .menuDropdown{height:auto;}
	header .menuBar .dropdown ul li{min-width:unset;}
	.menuBar .dropdown .dropdownContent{box-shadow:unset; background:transparent;width:unset;padding:0;min-height:unset; width:100%;}
	.menuBar .dropdown .dropdownCol{height:auto;}
	.menuBar .dropdown{width:100% !important;}
	.menuBar .dropdown p{float:none; margin:0;}
	header .menuBar .dropdown{position:relative;}
	header .menuBar .dropdown{padding-top: 0; margin-left: 0;}
	header .menuBar .dropdown img{display:none;}
	section.slider1 .Content{width:90%; margin:0 auto; left:5%;bottom:unset; top:120px;}
	section.slider1 .Content p{font-size:14px; }
	section.slider1 .Content p.slogan{font-size:24px; }
	section.catalogue{margin:20px auto 140px;}
	section.aboutUs .aboutUsBackground{background-image:url('../img/index/img-aboutUs-mobile.jpg'); background-position:right; background-color:var(--main); background-repeat:no-repeat; background-size:cover; margin: 30px 10px;}
	section.aboutUs .aboutUsBackground p.subtitle{padding:20px;}
	
	section.catalogue .col-catalogue .img-catalogue{height:60px; width:60px; background-size:cover;}
	section.aboutUs .img-aboutUs{display:none}
	section.mid{padding:60px 0;}
	section.mid .application-graphics{width:100%;}
	section.mid .application-graphics p{display:block; text-align: center;}
	section.mid .application{padding:10px; overflow: auto; background-position-y: center;}
	section.mid .application p{color:var(--white);text-align: center; margin: 60px auto;}
	section.mid .application1{background-image:url('../img/index/img-application1A.jpg');}
	section.mid .application2{background-image:url('../img/index/img-application2A.jpg');}
	section.mid .application3{background-image:url('../img/index/img-application3A.jpg');}
	section.mid .application4{background-image:url('../img/index/img-application4A.jpg');}
	section.mid .application5{background-image:url('../img/index/img-application5A.jpg');}
	section.mid .application6{background-image:url('../img/index/img-application6A.jpg');}
	section.mid .application-graphics{ text-align:center;}
	section.mid .application-graphics a{ display: inline-block; margin:10px auto 20px;}
	section.mid .application-graphics .moreBtn.white p{display:block}
	section.mid:before{display:none;}
	section.mid:after{display:none;}

	
	section.part2 .wrapper{ margin-top:20px;}
	section.part2 .contents{margin: 40px auto 0;}
	section.twoside .contents{padding:0 0 40px;}
	section.flow .step{margin:20px auto;width: 240px; max-width: unset; min-width: unset;}
	section.flow .step img{max-width:80px;float: left; margin-right: 24px;}
	section.flow .step .dot{float:left;}
	section.flow .step p{float:right;padding-top: 14px;}
	section.flow .flowline{ width: 100%; height: 74%; background: url('../img/index/BG-flow.png') no-repeat center;}
	section.flow .wrapper svg{display:none;}
	section.map{width:100%; border-radius: 0;}
	section.map .mapAddress{  width: 60%; margin-left: -60%;}
	section.linecard{margin-top: 0}
	section.linecard{width:100%; border-radius: 0;}
	section.index .wrapper{width:100%;}
	footer{padding:50px 30px 30px;}
	footer .wrapper{width:100%;float:left;}
	footer .sitemap .infoWrapper{width:100%;display: grid;  height: 48px; overflow: hidden;}
	footer .sitemap .infoWrapper.open{ height:unset;}
	footer .copyright p{font-size:14px}
	footer .sitemap .wechatQRcode{float:left;}
	footer .sitemap .wechatQRcode p{ margin:10px 0 0;}
}


@media screen and (max-width: 650px){
	header{padding-bottom: 0;}
	header .wrapper{padding:15px;}
	footer .infoWrapper{width:100%;}
	footer .infoWrapper a{margin:0;}
	swiper-slide .benifits:before{background:transparent;}
	section.aboutUs:after{height:400px;}
	section.catalogue{margin:20px auto 0;}
	section.map .mapAddress{width:100%; margin-top:0; margin-left:0; }
	section.mid .application p{font-size:14px;}
}