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

/*index*/
@media screen and (max-width: 2250px){
	.warp{ max-width:1740px;}	
}
@media screen and (max-width: 1920px){
	.header .mu1 a, .header .mu2 a{ padding: 40px 20px;}
}
@media screen and (max-width: 1800px){
	.warp{ max-width:1440px;}
	.iline h3{ font-size:2.8em; margin-bottom:10px;}
	.iline a{ margin-top:30px;}
	.ip .tit{ margin-bottom:20px;}
	.iv2 .txt .warp>*{ padding-left:5%;}
	.iv2 .txt h4{ font-size:4em;}
}
@media screen and (max-width: 1600px){
	.warp{ max-width:1240px;}
	.ip .boxs .box .txt{ padding:30px 20px 20px 20px;}
	.ip .boxs .box { width: calc(33.33% - 20px); margin: 0 10px;}
	.header .mu1,.header .mu2{ padding:0; width:500px;}
	.header .mu1 a, .header .mu2 a{ padding:30px 20px; font-size:1.4em;}
	.header .logo{ padding:10px 0;}
	.iline h3{ font-size:2.4em;}
	.iv2 .txt h4{ font-size:3.2em;}
	.iv2 .txt p{ font-size:1.6em;}
	.iab .box .txt h4,.iab .box .txt h3{ font-size:2em; line-height:28px;}
	.iab .box .txt{ padding:0 0 0 40px;}
	.ishop .txt h4{ font-size:2.4em;}
}
@media screen and (max-width: 1200px){
	.iline h3{ font-size:2em;}
	.iline{ padding:40px 0;}
	.ip .boxs .box .txt{ padding:20px;}
	.ip .boxs .box .txt span{ margin-top:15px;}
	.iv2 .txt h4{ font-size:2.8em;}
	.ishop .txt h4{ margin:10px 0 20px 0;}
}
@media screen and (max-width: 640px){
	body,.header.h-showdown{ min-width:0px;}
	.h-showdown #hamburger{ position:fixed;}
	.h-showdown #hamburger:before,.h-showdown #hamburger:after,.h-showdown #hamburger span{ background-color:#dfa419;}
	.h-showdown2 #hamburger{ top:-100%;}
	.header .mu1, .header .mu2{ display:none;}
	.iab .box>*{ display:block; width:100%;}
	.ip .boxs .box { width: calc(100%); margin:10px 0;}
	.header .logo img{ width:60px;}
	.iline h3,.iline p{ line-height:24px;}
	.footer{ padding:12px 0;}
	.footer .shares,.footer .img,.footer .mune{ display:none;}
	.ishop,.ishop:hover{ background-size:cover !important;}
	.banner .img img{ max-width:80%;}
	.ip,.iab{ padding:40px 0;}
	.ip .tit{ margin:0 0 20px 0;}
	.iab .box .txt{ padding:20px 0 0 0;}
	.iab .box .txt img{ max-width:160px;}
}
@media screen and (max-width: 450px){
	.bottomlist ul li img{ width:25px; height:25px;}
	.footer{ margin-bottom:37px;}
	.iline h3{ font-size:1.6em;}
	.iline a{ padding:6px 18px; margin-top:20px;}
	.ip .boxs .box .txt h3{ margin-bottom:0;}
	.ip .boxs .box .txt{ padding:16px 12px;}
	.ip .tit h3{ font-size:1.4em;}
	.ip .tit{ margin-bottom:10px;}
	.iab .box .txt h4, .iab .box .txt h3{ font-size:1.6em;}
	.iab .box .txt h4{ margin-bottom:10px;}
	.iab .box .txt a{ font-size:1.4em; margin:10px 0;}
	.ishop .txt a{ padding:8px 20px;}
	.ishop .txt h4{ font-size:2em; margin:0px 0 20px 0;}
	.ishop .txt h3{ font-size:1.4em; line-height:24px;}
	.footer p{ line-height:18px;}
}

/*designer*/
@media screen and (max-width: 2250px){
	.banners,.banners .txts,#container{ height:800px;}
}
@media screen and (max-width: 1920px){
	.banners,.banners .txts,#container{ height:700px;}
}
@media screen and (max-width: 1800px){
	.banners,.banners .txts,#container{ height:600px;}
	.banners .txts .txt h3{ font-size:4em;}
}
@media screen and (max-width: 1600px){
	.banners,.banners .txts,#container{ height:500px;}
}
@media screen and (max-width: 1400px){
	.banners .txts .txt h3{ font-size:3.2em;}
	.banners .txts .txt h4{ font-size:2em;}
	.designer-t .txt1 h3{ font-size:2.4em; margin-bottom:20px;}
	.designer-t .txt1, .designer-t .txt2, .designer-t .txt3{ padding:20px 0;}
	.designer-t .txt2 h3,.designer-t .txt3 h3{ font-size:2em; margin-bottom:10px;}
	.designer-t .imgs .dot h4{ margin-top:10px;}
	.designer-t .txt3 .imgs{ margin-top:30px;}
}
@media screen and (max-width: 640px){
	.banners,.banners .txts,#container{ height:350px;}
	.designer-t{ padding:20px 0;}
	.banners .txts .txt h3{ font-size:2.4em; margin-bottom:6px;}
	.banners .txts .txt h4{ font-size:1.6em;}
	.designer-t .txt1 h3{ line-height:24px; font-size:2em; margin-bottom:15px;}
	.designer-t .txt1 p,.designer-t .txt3 p{ line-height:24px; display:inline;}
	.designer-t .txt1 .img{ margin-top:20px;}
	.designer-t .imgs{ width: 100%; margin:0;}
	.designer-t .imgs .dot{ width:100%; margin: 20px 0px 0 0; float: none;}
	.designer-t .txt3 .imgs{ margin-top:0;}
}
@media screen and (max-width: 450px){
	.banners,.banners .txts,#container{ height:240px;}
	.banners .txts .txt{ padding:60px 0 0 0;}
	.banners .txts .txt h3{ font-size:2em;}
	.banners .txts .txt h4{ font-size:1.4em;}
	.designer-t .txt1 h3{ font-size:1.6em;}
	.designer-t .imgs .dot h4{ font-size:1.4em;}
}

/*about*/
@media screen and (max-width: 1400px){
	.about-t2 .txt h3{ font-size:2.4em; margin-bottom:20px; line-height:28px;}
	.about-t2 .txt{ padding:60px 0;}
	.about-t2 .txt .img{ margin:30px 0 20px 0;}
	.about-t .txt1 h4{ font-size:2em; margin-top:30px;}
	.about-t .txt1 p{ margin-bottom:0;}
}
@media screen and (max-width: 640px){
	.about-t2 .txt h3{ font-size:2em; margin-bottom:10px;}
	.about-t2 .txt{ padding:40px 0;}
	.about-t2 .txt p{ line-height:24px;}
}
@media screen and (max-width: 450px){
	.designer-t .txt1 h3,.about-t2 .txt h3{ font-size:1.6em;}
	.about-t .txt1 h4{ font-size:1.8em;}
	.about-t2 .txt h4{ font-size:1.4em;}
}

/*brand*/
@media screen and (max-width: 1920px){
	.brand-t .brand2 .boxs .box{ margin:100px 0;}
}
@media screen and (max-width: 1600px){
	.brand-t .brand2 .boxs .box{ margin:80px 0;}
	.brand-t .brand2{ padding:0;}
	.brand-t .brand2 .boxs .box .txt{ padding:40px 40px 0 40px}
	.brand-t .brand2 .boxs .box .txt h3{ font-size:2em; margin-bottom:10px;}
	.brand-t .brand2 .boxs .box .txt p{ line-height:24px; margin-bottom:0;}
	.brand-t .brand1 h3{ font-size:2.4em; margin-bottom:10px;}
	.brand-t .brand1{ padding:50px 0;}
}
@media screen and (max-width: 640px){
	.brand-t .brand1 h3{ font-size:2em; line-height:28px;}
	.brand-t .brand1 p{ line-height:24px;}
	.brand-t .brand2 .boxs .box>*,.brand-t .brand2 .boxs .box:nth-child(2n) .img{ width:100%; float:left;}
	.brand-t .brand2 .boxs .box{ margin:60px 0;}
	.brand-t .brand2 .boxs .box .txt{ padding:20px 20px 0 20px;}
	.brand-t .brand2 .boxs .box .txt h3{ font-size:1.8em; margin-bottom:0;}
}
@media screen and (max-width: 450px){
	.brand-t .brand1 h3{ font-size:1.6em; line-height:24px;}
	.brand-t .brand1{ padding:40px 0;}
	.brand-t .brand2 .boxs .box{ margin:40px 0;}
	.brand-t .brand2 .boxs .box .txt{ padding:20px 0 0 0;}
}

/*work*/
@media screen and (max-width: 1800px){
	.work-t .work1 h3{ margin-bottom:20px;}
	.work-t .work1{ padding:60px 0;}
	.work-t .work2 .dots .dot{ margin:100px 0;}
	.work-t .work2 .dots .dot .txt{ padding:6% 6% 0 6%;}
	.work-t .work3 h3{ font-size:4.2em; }
	.work-t .work4 .txt{ padding:30px 0;}
}
@media screen and (max-width: 1600px){
	.work-t .work4 .txt p{ margin-bottom:15px;}
	.work-t .work1 h3{ font-size:2.8em; line-height:32px;}
	.work-t .work4{ padding:60px 0 40px 0;}
}
@media screen and (max-width: 1400px){
	.work-t .work1 h3{ font-size:2.4em; line-height:28px; margin-bottom:10px;}
	.work-t .work1 p{ line-height:24px;}
	.work-t .work2{ padding:30px 0;}
	.work-t .work2 .dots .dot{ margin:60px 0;}
	.work-t .work4{ padding:40px 0 20px 0;}
	.work-t .work2 .dots .dot .txt p{ margin-bottom:0px;}
	.work-t .work2 .dots .dot .txt h3{ margin-bottom:5px;}
	.work-t .work2 .dots .dot .txt{ padding:40px 40px 0 40px;}
	.work-t .work2 .dots .dot .txt h3{ font-size:2em; line-height:24px;}
	.work-t .work3 h3{ font-size:3.2em;}
	.work-t .work3{ height:60vh;}
}
@media screen and (max-width: 640px){
	.work-t .work1{ padding:40px 0;}
	.work-t .work1 h3{ font-size:2em; }
	.work-t .work2 .dots .dot{ margin:20px 0;}
	.work-t .work2 .dots .dot>*,.work-t .work2 .dots .dot:nth-child(2n) .img{ width:100%; float:none;}
	.work-t .work2 .dots .dot .txt{ padding:30px 0 20px 0;}
	.work-t .work3{ height:400px;}
	.work-t .work3 h3{ font-size:2.4em;}
	.work-t .work4 .txt{ padding:20px 0;}
	.work-t .work4 .txt p{ line-height:24px;}
	.work-t .work4 .imgs { width: calc(100%); margin-left: 0px;}
	.work-t .work4 .imgs img { width: calc(100%); margin: 10px 0px; float:none;}
	.work-t .work4 .txt p{ margin-bottom:0;}
	.work-t .work4 .imgs, .work-t .work4 .img{ margin:10px 0;}
	.work-t .work4 .txt h3{ margin-bottom:15px;}
}
@media screen and (max-width: 450px){
	.work-t .work1 h3,.work-t .work2 .dots .dot .txt h3{ font-size:1.6em; line-height:24px;}
	.work-t .work2 .dots .dot .txt p{ line-height:24px;}
	.work-t .work2{ padding:30px 0 0 0;}
	.work-t .work4{ padding:20px 0 30px 0;}
	.work-t .work4 .txt{ padding:20px 0 0 0;}
	.work-t .work4 .txt h3{ font-size:1.6em; line-height:24px;}
}


/*service*/
@media screen and (max-width: 1920px){
	.service-t .txts p{ margin-bottom:20px; line-height:32px;}
}
@media screen and (max-width: 1800px){
	.warp3{ max-width:1240px;}
	.service-t .txts p{ margin-bottom:10px;}
}
@media screen and (max-width: 1600px){
	.service-t .tit h3{ font-size:2.8em; margin-bottom:20px;}
	.service-t .tit,.service-t .txts{ padding:40px 0;}
}
@media screen and (max-width: 1400px){
	.service-t .txts p{ font-size:1.4em; line-height:24px;}
	.service-t .tit h3{ font-size:2.4em;}
}
@media screen and (max-width: 640px){
	.service-t .tit h3{ font-size:2em; margin-bottom:5px;}
}
@media screen and (max-width: 450px){
	.service-t .tit h3{ font-size:1.6em;}
}



/*contact*/
@media screen and (max-width: 2250px){
	.contact-t .left{ padding:7% 4%;}
	.contact-t .left h3{ font-size:3.2em; margin-bottom:30px;}
	.contact-t .right .txts .btn .fc-btn{ margin:40px 0;}
	c{ padding:4%;}
}
@media screen and (max-width: 1800px){
	.contact-t .right .txts h3{ margin-bottom:20px;}
}
@media screen and (max-width: 1600px){
	.contact-t .left h3{ font-size:2.4em; margin-bottom:20px;}
	.contact-t .left p,.contact-t .right .txts input, .contact-t .right .txts textarea{ font-size:1.4em; line-height:24px;}
	.contact-t .right .txts .btn .fc-btn{ margin:20px 0;}
	.contact-t .right .txts input, .contact-t .right .txts textarea{ padding:10px 0;}
}
@media screen and (max-width: 640px){
	.contact-t>*{ display:block;}
	.contact-t .left{ width:100%;}
	.contact-t .left h3{ font-size:2em; margin-bottom:10px;}
	.contact-t .right .txts input, .contact-t .right .txts textarea{ margin-bottom:5px;}
	.contact-t .right .txts .btn .fc-btn{ padding:6px 40px; font-size:1.4em;}
	.contact-t .right .txts .btn{ text-align:center;}
	.contact-t .left,.contact-t .right{ padding:40px 20px;}
}
@media screen and (max-width: 450px){
	.contact-t .left h3{ font-size:1.8em;}
	.contact-t .right .txts h3{ margin-bottom:10px;}
}

/*shop*/
@media screen and (max-width: 1800px){
	#container-shop{ height: 700px;}
	.shop-t .maps .scrollbar-inner{ height:680px;}
	.shop-t .maps .demo .dot{ padding:25px 0;}
	.shop-t .maps .demo h2 {  font-size: 2.4em; line-height: 28px; margin: 0px 0 20px 0;}
}
@media screen and (max-width: 1600px){
	.shop-t .keys{ padding:40px 20px;}
	.shop-t .keys form select{ padding:6px  40px  6px 20px; font-size:1.4em;}
	.shop-t .keys form .sreach>*{ padding:6px 20px;}
	.shop-t .keys form .sreach .fc-input{ font-size:1.4em;}
}
@media screen and (max-width: 1400px){
	#container-shop{ height: 600px;}
	.shop-t .maps .scrollbar-inner{ height:520px;}
	.shop-t .maps .demo{ padding:40px;}
	.shop-t .maps .demo h2{ font-size:2em;}
}
@media screen and (max-width: 1200px){
	.shop-t .keys form{ max-width:100%;}
	.shop-t .maps .demo .dot{ padding:15px 0;}
}
@media screen and (max-width: 640px){
	.shop-t .keys form select{ width:100%; margin:5px 0; float:none;}
	.shop-t .keys form>*{ float:none;}
	.shop-t .keys{ padding:20px;}
	.shop-t .keys form .form-inline{ width:100%;}
	.shop-t .keys form .sreach{ width:100%; margin:5px 0; float:none;}
	.shop-t .maps>*{ display:block; }
	#container-shop{ height: 400px;}
	.shop-t .maps .demo{ width:100%;}
	.shop-t .maps .demo{ padding:40px 20px;}
}	
@media screen and (max-width:450px){
	.shop-t .store_name_sx div p{ line-height:24px;}
	.shop-t .maps .demo h2{ font-size:1.6em; margin-bottom:10px;}
	.shop-t .maps .demo .dot{ padding:10px 0;}
	.shop-t .maps .demo h3{ font-size:1.4em; font-weight:bold; line-height:24px; margin-bottom:6px;}
	.shop-t .maps .demo p{ line-height:20px;}
}


/*product*/
@media screen and (max-width: 640px){
	.pro-three .box1 .txt{ float:none; width:100%; padding:60px 0 0 0;}
	.pro-three .box1 .img{ float:none;  width:100%;}
	.pro-three .txt h3{ font-size:3.2em; margin-bottom:10px;}
	.pro-three .box{ width:100%; margin:15px 0;}
	.pro-three .box2,.pro-three .box1{ width:100%; margin-left:0;}
	.pro-three .box2 .txt{ padding:60px 0 20px 0;}
}
@media screen and (max-width: 450px){
	.pro-three .box1 .txt{ padding:40px 0 0 0;}
	.pro-three .box1,.pro-three .box{ margin:5px 0;}
	.pro-three .txt h3{ font-size:2.4em; margin-bottom:0;}
	.pro-three .txt p{ font-size:1.4em; margin-bottom:10px;}
	.pro-three .box2 .txt{ padding:40px 0 20px 0;}
}

/*product-n*/
@media screen and (max-width: 1800px){
	.product-n .pro-list h3{ line-height:32px; padding:8px 6px;}
	.product-n .pro-list p a,.product-n .pro-list .pm{ padding:8px 6px;}
}
@media screen and (max-width: 1600px){
	.product-n{ padding:60px 0;}
	.product-n .pro-list{ width:200px;}
	.product-n .pro-list .psr input{ font-size:1.4em;}
	.product-n .pro-list h3{ font-size:1.6em; line-height:24px; padding:8px 6px;}
	.product-n .pro-list p a,.product-n .pro-list .pm a{ font-size:1.4em; line-height:24px;}
	.product-n .pro-list .psr input{ padding:4px 12px;}
	.product-n .pro-boxs { width: calc(100% - 200px);}
	.product-n .pro-boxs .box .txt{ padding:12px 20px;}
	.product-n .pro-boxs .box:hover .txt{ padding: 12px 0;}
}
@media screen and (max-width: 640px){
	.product-n .pro-list .lists{ display:none;}
	.product-n .pro-list{ width:100%; float:none;}
	.product-n .pro-list .psr{ margin-top:0;}
	.product-n{ padding:20px 0 40px 0;}
	.product-n .pro-boxs { width: calc(100%); padding-left:0; margin-top:20px;}
	.product-n .pro-boxs .box { width: calc(50% - 20px);  margin: 10px 10px;}
	.product-n .pro-boxs .box .txt{ padding:12px 0;}
	.product-n .pro-boxs .box .txt h3,.product-n .pro-boxs .box .txt p{ font-size:1.4em; line-height:20px; height:20px;}
	div.fy a ,div.fy span.current,div.fy span.disabled{ padding:4px 8px;}
}
@media screen and (max-width: 450px){
	.product-n .pro-boxs .box { width: calc(100% - 20px);  margin: 10px 10px;}
}