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


/*index*/
@media screen and (max-width: 1750px) {
	.warp{ width:1500px;}
	.iac2 {padding: 20px;}
	.iac-t h4 {margin-bottom: 10%;}
}
@media (min-width: 1350px) and (max-width: 1550px) {
	.warp{ width:1150px;}
	.iac2 { width: calc(90% - 40px); margin-bottom: 10px;}
	.iac-b:nth-child(5) h3{ display:inline-block !important;}
	.iac-t h3 { font-size: 3.5em;}
	.iac2-b { padding: 10px 0;}
	.iac-b:nth-child(2) h4 { margin-bottom: 10%;}
	.iac-b:nth-child(1) h4 { width: 50%;}
}
@media screen and (max-width: 1350px) {
	.warp{ width:960px;}
	.share { padding: 36px 20px 0 0;}
	.mune a {padding: 40px 30px 0 0;}
	.banner .swiper-slide { height: 800px;}
	.ip-box { padding: 30px 0; width: calc(33.33% - 20px); margin: 0 10px;}
	.iac-b { width: 50%;}
	.iac-b:first-child { width: 100%;}
	.iac-b:nth-child(2) h4 { margin-bottom: 10%;}
	.iac-b:nth-child(2) .iac-t{ width:90%;}
	.fo1 { padding: 45px 0 50px 0;}
	.fo2 { padding: 60px 0 70px 0;}
	.f-input { width: 250px;}
}
@media screen and (max-width: 1024px) {
	.warp{ width:90%;}
	.fo2 .right,.f-mune{ display:none;}
	.fo2 {padding: 30px 0;}
	.fo2 .left p { margin-top: 0px; line-height:20px;}
	.iac .it {padding: 40px 0;}
	.i-tit { font-size: 4em;  padding: 10px 0;}
	.logo { padding: 15px 20px;}
	.ia h4 {font-size: 2.6em; line-height: 30px;  margin-bottom: 25px;}
	.ia-box { padding: 40px 0 60px 0;}
	.iac2 { width: calc(80% - 20px); margin-bottom: 10px;}
	.iac-b:nth-child(5) .iac-t {width: 85%;}
	.iac-b:nth-child(5) h3{ display:inline-block !important;}
	.iac-t h3 { font-size: 3.5em;}
	.iac2-b { padding: 10px 0;}
	.iac-b:nth-child(2) h4 { margin-bottom: 10%;}
	.iac-b:nth-child(1) h4 { width: 50%;}
	.ip-box h3 { font-size: 2.4em;}
	.ip-box p { font-size: 2em;}
	.ip { width: calc(100% - 20px); padding: 55px 10px;}
	.ia p { margin-bottom: 60px; font-size:1.6em;}
	.line-btn { font-size: 2em;}
	.banner .swiper-slide { height: 600px; background-size:auto 110% !important;}
	.iac-t span { width: 180px;  height: 50px;  line-height: 50px; padding-left: 20px; font-size: 1.8em;}
}
@media screen and (max-width: 800px) {
	.banner .swiper-slide { height: 500px;}
	.banner .swiper-slide h3 { font-size: 12em;}
	.banner .swiper-slide p { font-size: 2em;  line-height: 24px; max-width: 450px;}
	.ia h4 { font-size: 2em; margin-bottom: 15px;}
	.ia p { margin-bottom: 30px;  font-size: 1.4em;}
	.ia .it { margin-bottom: 20px;}
	.iac-t h3 { font-size: 3em;}
}
@media screen and (max-width: 720px) {
	.iac-b { width: 100%;}
	.iac-t span{width:265px; height:100px; line-height:100px; padding-left:35px; font-size:2em;}
	.iac-t h3{ font-size:4em;  margin-bottom:30px;}
	.iac-t h4{  margin-bottom:30%; width:70%;}
	.iac-b:nth-child(1) h3{ width:80%;}
	.iac-b:nth-child(1) h4{ margin-bottom:30%; width:60%;}
	.iac-b:nth-child(1) a>img{ width:200%}
	.iac-b:nth-child(1) .iac-t{ width:90%;}
	.iac-b:nth-child(2) h4{ margin-bottom:30%; width:70%;}
	.iac1 h3{ margin-bottom:14px;}
	.iaci{ left:84%;}
	.iac-b:nth-child(5) .iac-t{ width:80%;}
	.iac2{ text-align:center; width:calc(80% - 80px); height:50%; margin-bottom:20px; padding:40px;}
	.iac2 h3{ line-height:50px; margin:0;}
	.iac2-b{ padding:18px 0;}
	.iac-b:nth-child(5) h3 { display: block !important;}
	.ip-box { width: calc(100% - 60px); margin:10px 30px;}
	.iac-t img{ width:60px;}
}
@media screen and (max-width: 650px) {
	.fs { margin-left: 10%;}
	.banner .swiper-slide h3{ padding-top:180px;}
	.iac-b:nth-child(1) h3 { width: 60%;}
	.iaci{ left:64%;}
	.iac-b h4{ margin-bottom:20% !important;}
	.iac2 { width: calc(85% - 40px);  padding: 20px;}
}
@media screen and (max-width: 500px) {
	.iac-t span { width: 180px;  height: 50px;  line-height: 50px; padding-left: 20px; font-size: 1.8em;}
	.fs {margin-left: 0%; margin-top:20px;}
	.iac-b:nth-child(5) .iac-t {width: 85%;}
	.banner .swiper-slide h3 { font-size: 8em;}
	.banner .swiper-slide p { max-width: 350px; font-size:1.4em;}
	.ia p{ line-height:24px;}
}
@media screen and (max-width: 400px) {
	.banner .swiper-slide { height: 360px;}
	.banner .swiper-slide h3{ padding-top:140px;}
	.ip { padding: 30px 10px;}
	.line-btn{ opacity: 1 !important;}
	.ip-box .line-btn:after {left: 25px;}
	.iac-b:nth-child(1) h3 { width: 60%;}
	.iaci{ left:64%;}
	.iac-b h4{ margin-bottom:10% !important;}
	.iac2 { width: calc(95% - 20px);  padding: 10px;}
	.iac-b h3{ font-size:3.2em;}
	.iac-b:nth-child(5) .iac-t { width: 95%;}
	.fo1 { padding: 30px 0;}
	.banner .swiper-slide { background-size: auto 100% !important;}
}

/*contact*/
@media screen and (max-width: 1500px) {
	.con2  h3 { padding-top: 30px;font-size: 3.2em;margin-bottom: 40px;}
	.con3 .left form { width: 600px;}
	.ic-input, .ic-text,.icb{ width: 90%;}
	.ic-text { margin-top: 60px;}
	.con2  .cd>* {display: block; text-align:center;}
	.con2  .cd img { margin-bottom: 0px; margin:0 auto 10px auto;}
	.con2  .cd {margin-bottom: 20px; }
	.con2  .cd p{margin-left: 0px; font-size: 1.8em;}	
}
@media screen and (max-width: 1300px) {
	.con2  .cd img{ width:30px;}
	.con2  h3 { margin-bottom: 20px;}
}
@media screen and (max-width: 1024px) {
	.con2 .left,.con2 ,.con3 .left{ display:block; width:100%;}
	.con3 .right{ display:none;}
	.con3 .left form{ float:none; margin:0 auto;}
	.con2 { padding:10px 0 30px 0;}
	.ic-input, .ic-text {  font-size: 1.6em;  padding: 10px 8px;}
	.ic-input{ margin-top:20px;}
	.ic-text{ margin-top:30px;}
	.contact-b{ height:500px !important; background-size:auto 100% !important;}
	.contact-b h3 { font-size: 10em; padding-top: 200px;}
	
}
@media screen and (max-width: 800px) {
	.con2  .cd{ width:calc(100% - 40px);}
	.con2 .cd h3{ padding-top:10px;}
}
@media screen and (max-width: 650px) {
	.con3 .left form { width:90%; margin:0 auto; float:none;}
	.ic-input, .ic-text, .icb { width: 100%;}
	.con3 .left h3 { font-size: 2em;}
	.con3 .left{ background:none;}
	.contact-b{ height:400px !important; }
	.contact-b h3 { font-size: 8em; padding-top: 160px}
	.con2  .cd{ width:calc(100% - 40px);}
	.con2 .cd p{ color:#f5f5f5 !important;}
	.back-all{ top:80px; left:5px;}
}

/*about*/
@media screen and (max-width: 1024px) {
	.outdoor-b{ height:500px !important; background-size:auto 100% !important;}
	.about-b h3,.outdoor-b h3{ font-size: 10em; padding-top: 150px}
	.about{ padding:60px 0;}
	.about .txt h4 {  font-size: 2.4em;  padding: 30px 0;  line-height: 28px;}
	.about .txt p{ display:inline;font-size: 1.4em; line-height: 24px;}
	.about-slider{ height:500px !important;}
	.ps-tit {  padding: 25px 0;}
}
@media screen and (max-width: 650px) {
	.about-slider,.outdoor-b{ height:400px !important; }
	.about-b h3,.outdoor-b h3{ font-size: 8em; padding-top: 90px}
	.outdoor-b h3 { margin-bottom: 10px;}
	.about .txt h4 {  font-size: 2em;}
}
/*outdoor*/
@media screen and (max-width: 1700px) {
	.outdoor-list a { line-height: 24px; font-size: 2em; padding: 14px 25px;}
}
@media screen and (max-width: 1400px) {
	.outdoor-list a { line-height: 20px; font-size: 1.6em; padding: 14px 15px;}
	.outdoor .boxs {padding-top: 45px;}
	.outdoor .boxs .txt{ padding-top:30px;}
	.outdoor .boxs .dot { margin: 0 30px 35px 30px;}
	.outdoor .boxs .dot .dt h4 { font-size: 2em;    line-height: 25px;  height: 50px;}
	.outdoor .boxs .dot{ width:calc(50% - 60px); margin:0 30px 45px 30px;}
}
@media screen and (max-width: 1100px) {
	.outdoor-list a { line-height: 20px; font-size: 1.4em; padding: 8px 10px;}
	.outdoor-list a{ margin:4px 2px 0 2px;}
	.outdoor .boxs>h3{ font-size:1.4em; display:inline; line-height:24px;}
	#m4 .outdoor-b h4{ display:none;}
	.outdoor-b h4{ font-size:1.4em; line-height:24px;}
}
@media screen and (max-width: 900px) {
	.outdoor .boxs .dot{ width:calc(100% - 60px); margin:0 30px 25px 30px;}
	.outdoor .boxs .img{ text-align:center;}
}
@media screen and (max-width: 600px) {
	.outdoor .boxs .dot {  width: calc(100% - 0px); margin:0 0 20px 0;}
	.outdoor .boxs .dot .dt { margin: -20px 10px 0 10px; padding: 10px 10px;}
	.outdoor .boxs .dot .dt h3 {font-size: 1.4em;}
	.outdoor .boxs .dot .dt h4 { font-size: 1.6em; line-height: 20px; height: 40px; border-bottom:1px solid #ccc;}
	.outdoor .boxs .dot .dt span {  padding: 4px 4px 0 4px;  font-size: 1.4em;}
	.outdoor-b h3{ font-size: 8em; padding-top: 100px}
}

/*product*/
@media screen and (max-width: 1550px) {
	#m3 .ip-box{ padding: 20px 0;  width: calc(25% - 40px);}
}
@media screen and (max-width: 1200px) {
	#m3 .ip-box{ padding: 20px 0;  width: calc(33.33% - 40px);}
}
@media screen and (max-width:1024px) {
	#m3 .ip-box{ margin:20px 10px; width:calc(50% - 20px);}
	#m3 .ip-box p{ opacity:1;}
	#m3 .line-btn:after,#m3 .line-btn:hover:after{ left:15px !important;}
	#m3 .ip { width: calc(100% - 20px);  padding: 15px 10px 15px 10px;}
	.ps-txts .ip4 .box>*{ display:block; width:100%;}
	.ps-txts .ip4 .box .txt{ text-align:left; margin-bottom:20px;}
	.ps-txts .ip1 .ip1-3 .txt p,.ps-txts .ip1 .ip1-4 p{ width:calc(100% - 40px);}
	.ps-txts .ip1 .ip1-2 img{ float:none;}
	.ps-txts .ip2 .box .txt, .ps-txts .ip2 .box .img{ width:100%; float:none;}
}
@media screen and (max-width:800px) {
	.ps-txts .ip4 .box .img{ text-align:center;}
	.ps-txts .ip4 .box>*{ float:none; width:100%;}
}
@media screen and (max-width:600px) {
	#m3 .ip-box{ margin:20px 10px; width:calc(100% - 20px);}
	.ps-tit a {font-size: 1.4em; padding: 8px 5px; margin: 5px 0px;}
	.ps-txts{ padding-top:30px;}
	.ps-txts .ip1 h3, .ps-txts .ip2 h3{ font-size:2em; line-height:24px;}
	.ps-txts .ip1 .ip1-3 #oranger{ padding-top:10px;}
}