@charset "utf-8";
/* CSS Document */
/*all*/
@media screen and (max-width: 1024px) {
	.mune,.xxl,.fo1{ display:none;}
	#hamburger,.xl{ display:block;}
	.bottomlist{ display:block;}
	.footer{ margin-bottom:65px;}
}

/*index*/
@media screen and (max-width: 1700px) {
	.video-box{width:100%; height:700px;}
}
@media screen and (max-width: 1500px) {
	.warp2{ width:1100px;}
	.num { padding: 10px 40px;}
	.ipb a>img { padding-top: 10%;}
	.fo1 .left .munel { padding: 0 40px;}
	.mune .down { margin-right: 20px;}
	.tablea .box{background-size: auto 100% !important;}
	.tablea .box2 h3 {  padding-top: 25%;  font-size: 3.2em;  padding-left: 6%;}
	.video-box{width:100%; height:600px;}
}
@media screen and (max-width: 1350px) {
	.video-box{width:100%; height:500px;}
}
@media screen and (max-width: 1200px) {
	.warp2{ width:960px;}
	.ia,.ip{padding: 60px 0;}
	.i-tit { font-size: 4em;}
	.ia-num { padding-top: 60px;}
	.num h3 span { font-size: 2.4em;}
	.ipb{ width:50%;}
	.fo1 .left .munel { padding: 0 30px;}
	.mune .down { margin-right: 0px;}
	.video-box{width:100%; height:400px;}
}
@media screen and (max-width: 1024px) {
	.header-tit .lun{ display:none;}
	.warp2{ width:90%;}
	.logo{ padding:0;}
	.share span{ padding:30px 30px 0px 0;}
	.share{ padding-right:40px;}
	.tablea .box{ height:600px !important;  background-size:auto 100% !important;}
	.num h3 span { font-size: 2em;}
	.ipi { width:90%;  padding: 30px 20px;  margin-top: 20%;}
	.inews { padding: 50px 0;}
	.i-tit { font-size: 3.2em;}
	.banner-slider .txt h4 {font-size: 1.8em;}
	.tablea .box2 h3 {  padding-top: 25%;  font-size: 2em;  line-height:30px; padding-left: 6%;}
	.icom .dots .dot{ width:25%; text-align:center;}
	.icom .dots .dot img{ max-width:180px;}
	.icom{ padding:45px 0 40px 0;}
	.video-box{width:100%; height:300px;}
	.case-b .warp>.txt>h3{ font-size:2.4em;}
}
@media screen and (max-width: 900px) {
	.ipb { max-width: 600px; width:100%; margin:0 auto; float:none;}
	.ia, .ip { padding: 40px 0;}
	.ia p { font-size: 1.4em;  line-height: 28px;}
	.num {  padding: 10px 20px;}
	.num h3 span { font-size: 1.8em;}
	.num h3 { font-size: 2em;}
	.tablea .box h3 {  padding-top: 8%;   font-size: 2.4em;  line-height: 30px;  margin-bottom: 0px; width:60%;}
	.tablea .box h4 {   font-size: 1.4em;  width: 60%;}
	.tablea .box3 h3,.tablea .box3 h4 { width:100% !important;}
	.tablea .box:nth-child(2)>img {width: 240px !important;}
	.tablea .box>img {width: 100px; margin-top:20px;}
}
@media screen and (max-width: 750px) {
	.video-box{width:100%; height:200px;}
}
@media screen and (max-width: 650px) {
	.ipi h3 { font-size: 3em;}
	.ipi { width:calc(100% - 40px);margin-top:0%;}
	.num{ width:45%;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
	.num:nth-child(3){ border:none;}
	.warp {  width: calc(100% - 20px);}
	.share { padding-right: 20px;}
	#hamburger {right: 15px;}
	.tablea .box h3 {  font-size: 1.8em;}
	.icom .dots .dot{ width:33.33%; padding:10px 8px;}
	.icom .warp>h4{ display:inline;}
}
@media screen and (max-width: 450px) {
	.video-box{width:100%; height:160px;}
}
@media screen and (max-width: 400px) {
	.logo img{ width:150px;}
	.share span { padding: 20px 20px 0px 0;}
	.share {  padding-right: 40px;}
	#hamburger{ top:75px;}
	.tablea .box h3,.tablea .box h4{ width:80%;}
	.tablea .box { height: 400px !important;}
	.ia-num { padding-top: 20px;}
	.num {padding: 9px;}
	.ip h4 {   font-size: 1.4em;    padding: 25px 0;}
	.ipb a>img {padding-top: 5%;width: 85px !important;}
	.ipb p { font-size: 2em;}
	.icom .dots .dot{ width:50%;}
}

/*about*/
@media screen and (max-width: 1200px) {
	.am { padding: 40px 30px; height: 300px;}
	.am1 h4 { font-size: 5em;}
}
@media screen and (max-width: 1024px) {
	.am { width:calc(100% - 20px);  height: 260px;}
	.am1 h4,.am2 h4, .am3 h4, .am4 h4  { font-size: 3.2em;}
	.about .ia-num { padding-top: 20px;}
}
@media screen and (max-width: 700px) {
	.am4 {  height:420px;}
}
@media screen and (max-width: 500px) {
	.ia .i-tit { margin-bottom: 20px;}
	.about p { margin-bottom: 20px;}
	.about-more { padding: 40px 0;}
}
/*about2,3*/
@media screen and (max-width: 1024px) {
	.about2 { padding: 40px 0;}
	.a2-box { margin-bottom: 30px;}
	.about-tit{ text-align:center;}
	.about-tit a { font-size: 1.6em;  margin: 20px 0;  padding: 0 3%;}
	.about-tit a:after { bottom: -20px;}
}
@media screen and (max-width:600px) {
	.about-tit a { font-size: 1.4em;}
	.a2-tit img { margin-right: 20px;}
	.a2-box p {  margin-left: 63px;  font-size: 1.4em; line-height: 24px;}
	.a3-box p {  font-size: 1.4em;  line-height: 24px;}
	.a3-box { padding: 20px 20px 20px 40px;}
	.a3-box h3:before { width: 25px;}
	.about .ia-num .num h3{ font-size:1.6em;}
	.about .ia-num .num h4{ font-size:1.4em;}
}
/*about4*/
@media screen and (max-width: 1024px) {
	.about4 .ab4t{ padding:60px 40px;}
	.about4 .ab4t .dot { width: calc(50% - 20px); margin: 0 10px;}
}
@media screen and (max-width: 600px) {
	.about4>.product-list{ width:100%;}
	.about4 .ab4-txt{ width:100%;}
	.about4 .ab4t .dot { width:100%; margin:0;}
	.about4 .ab4t .dot{ padding:10px  25px;}
	div.fy a,div.fy span.current,div.fy span.disabled  {margin:2px 2px;padding:5px 10px;font-size:1.4em;}
}
/*about5*/
@media screen and (max-width: 1024px) {
	.a5-box { padding: 30px 30px 0 30px;}
	.a5-box p { font-size: 1.4em;  margin-bottom: 20px;}
	.about5 { padding: 35px 0;}
}
@media screen and (max-width: 800px) {
	.a5-box { padding: 30px 10px 0 10px;}
	.a5-box p { margin-bottom: 10px;}
}

/*contact*/
@media screen and (max-width: 1400px) {
	.contact .right{ width:100%;}
	.contact .right>*{ width:50%; float:left;}
	.contact .right .txt{ width:50%; max-width:50%; padding:50px}
	.contact .right>* {  height: 500px;}
	#map{ width: 100% !important;  height: 400px !important;}
	.contact .right .txt, .contact .right form { max-width:80%;}
}
@media screen and (max-width: 900px) {
	.contact .right>*{ width:100%; float:none;}
	.contact .right .txt { width: 100%;}
}
@media screen and (max-width: 650px) {
	.contact .right .txt{ padding:50px 0;}
}
@media screen and (max-width: 450px) {
	.ct h3 { font-size: 3em; margin-bottom:10px;}
	.ct span { font-size: 3.8em;}
	.ct { margin-bottom: 20px;}
	.contact .right .txt p {font-size: 1.4em;}
	.contact .right>* {height:fit-content;}
	.contact .right .txt, .contact .right form{ padding:40px 0;}
}

/*product*/
@media screen and (max-width: 1600px) {
	.pb{ margin:0 4% 20px 4%;}
}
@media screen and (max-width: 1024px) {
	.pt h3 { padding: 30px 20px 15px 40px; font-size: 2.4em;}
	.pl, .pt h3 { width: 220px; float:none;}
	.pl a { padding: 20px 20px 20px 40px;  font-size: 1.4em;}
	.pl a:after { width: 8px;  height: 8px;  top:23px;  left: 40px;}
	.pb{ width:40%;}
}
@media screen and (max-width: 900px) {
	.pb { width: 90%; max-width:480px;}
}
@media screen and (max-width: 600px) {
	.pt h3 {padding: 15px 30px; font-size: 1.8em;}
	.product-box{ padding-top:110px;}
	.product{ position:relative;}
	.product-list{ position:absolute; top:0; left:0; width:100%;}
	.product>.product-list,.pt,.pl, .pt h3 { width: 100%;}
	.pl{ display:none;}
	.p-btn{ display:block; position:absolute; top:22px; right:30px; }
	.product {display: block;}
}
/*productshow*/
@media screen and (max-width: 1600px) {
	.pn .product-txt { padding: 0 20px 20px 20px;}
	.pt1>*{ width:100%; float:none;}
	.pti{ text-align:center;}
	.ptt { padding:0 30px 40px 30px; max-width:100%;  padding-top: 0px;}
	.ptd{ max-width:300px;}
	.pn .product-txt { margin: 40px;}
}
@media screen and (max-width: 800px) {
	.pn .product-txt { padding: 0; margin:20px 20px 20px 20px;width: calc(100% - 40px);  padding:0;}
	.pn .pl a { padding: 15px 40px 15px 40px;}
	.pt2-1,.pt2-2,.pt2-3,.pt2-4,.pt2-1 h3,.pt2-2 h3,.pt2-3 h3,.pt2-4 h3{ margin-bottom:20px;}
	.pt2 { padding: 25px 25px 0 25px;}
	.pt2 h3 { font-size: 1.8em;}
	.ptt { padding: 0 10px 20px 10px;}
	.pt2 { padding: 20px 10px 0 10px;}
	.pt2-2 table tr td { padding: 8px 10px; font-size: 1.4em;}
	.pt2-2 table tr td:nth-child(2) {padding-left: 15px;}
	
}
@media screen and (max-width: 600px) {
	.pn .product-txt { margin:0px 20px 20px 20px;width: calc(100% - 40px);  padding:0;}
	.banner .warp>.txt>h3{ font-size:3.2em;}
	.banner .warp>.txt { top: 27%;}
}
/*news*/
@media screen and (max-width: 1200px) {
	.news-box .left { width: 37%;}
	.news-box .right { width: 63%;}
	.news { padding: 80px 0 20px 0;}
}
@media screen and (max-width: 800px) {
	.news-box .left { width: 47%;}
	.news-box .right { width: 53%;}
}
@media screen and (max-width: 600px) {
	.news { padding: 20px 0 20px 0;}
	.news-box { margin-bottom: 25px;}
	.news-box .left { width: 100%; margin-bottom:20px;}
	.news-box .left img{ width:100%;}
	.news-box .right { width: 100%;}
	.news-box .right h3 { font-size: 2em;}
	.news-box .right h4 { width: 100%; font-size: 1.4em;}
	.newsshow{ padding:40px 0 0 0;}
	.ns-tit h3 {font-size: 1.6em;}
}