* { margin: 0; border: 0; padding: 0; }
body { font-size: 12px; font-family: "微软雅黑", Microsoft YaHei; color: #000; }
a { color: inherit; outline: none; text-decoration: none; transition: 0.3s linear 0s; }
ul, li { list-style-type: none; }
.dis { display: inline-block; }
.dis-t { display: inline-block; vertical-align: top; }
.dis-m, .content3-text>div { display: inline-block; vertical-align: middle; }
.div-b { display: inline-block; vertical-align: bottom; }
.img { display: block; width: 100%; }
.float-l { float: left; }
.float-r { float: right; }
.content1, .content2, .content3 { margin-top: 85px; width: 100%; overflow: hidden; }
.content2-text:before, .content3-text:before /*,.page-title:before*/ { display: inline-block; content: ''; vertical-align: middle; height: 100%; }
#BannerShow_b1 img { display: block; width: 100%; }
.Product_Title { margin-bottom: 30px; text-align: center; color: #fba51a; font-size: 36px; }
.ProductDetail_b1 img { width: 100%; display: block; }
.caseback { display: block; margin-top: 30px; opacity: 0.8; }
.caseback { transition: 0.3s ease 0s; color: #fff; margin: 0 auto; width: 140px; float: none; background: #fba51a; clear: both; text-align: center; border-radius: 5px; font-size: 16px !important; line-height: 32px !important; }
/*content1*/
.content1, .index-title { text-align: center; }
.index-title p:first-child { color: #fba51a; text-transform: uppercase; font-size: 24px; }
.index-title p:last-child{ color: #202c2f; font-size: 26px; }
.index-title .last-p { color: #202c2f; font-size: 26px; }
.content1>p { color: #555; margin: 50px auto 40px; width: 46.35%; text-align: left; font-size: 14px; line-height: 26px; }
.content1>a { margin-bottom: 10px; border-radius: 34px; padding: 0 40px; border: 1px solid #ccc; color: #999; font-size: 16px; line-height: 34px; display: inline-block; }
.content1>a:hover { color: #fba51a; border-color: #fba51a; }
/*content2*/
.content2-detail ul { width: 100%; display: inline-block; }
.content2-detail li { height:680px; height: 35.417vw; float: left; width: 25%; }
.content2-detail li:nth-child(1) .content2-text{background:#deebf1;}
.content2-detail li:nth-child(2) .content2-text{background:#fffbe5;}
.content2-detail li:nth-child(3) .content2-text{background:#fbfcf2;}
.content2-detail li:nth-child(4) .content2-text{background:#ffead8;}
.content2-detail li:nth-child(1) .content2-text:after{border-color: transparent transparent #deebf1;}
.content2-detail li.n2_2:nth-child(2) .content2-text:after{border-color: #fffbe5 transparent transparent transparent;}
.content2-detail li:nth-child(3) .content2-text:after{border-color: transparent transparent #fbfcf2;}
.content2-detail li.n2_2:nth-child(4) .content2-text:after{border-color: #ffead8 transparent transparent transparent;}
.content2-detail li:hover img { transform: scale(1.1); }
.content2-text p { text-transform: capitalize; font-size: 16px; color: #8a8a8a; }
.content2-text p:first-child { color: #000; font-size: 24px; margin-bottom: 5px; }
.content2-img img { transition: 0.5s linear 0s; height: 100%; }
.content2-img { overflow: hidden; width: 100%; height: 50%; }
.content2-text { position: relative; background: #fffbe5; height: 50%; }
.content2-text>div { display: inline-block; vertical-align: middle; margin-left: 12.5%; }
.content2-text .icon {margin-top: 50%; display: inline-block; background: url(../images/index-img6.png) no-repeat top center; background-size: 100%; width: 32px; height: 32px; margin-top: 5.21vw; }
.content2-text .icon:hover { }
.content2-text:after { z-index: 2; margin-left: -13px; left: 50%; content: ''; width: 0; position: absolute; border-style: solid; border-color: transparent transparent #fffbe5; border-width: 0 13px 15px; top: -15px; }
.content2-detail li:nth-child(2n+2) .content2-text:after { border-color: #eee transparent transparent transparent; border-width: 15px 13px 0px; top: auto; bottom: -15px; }
.content2-detail li.n2_2 .content2-text:after { border-color: #fffbe5 transparent transparent transparent; border-width: 15px 13px 0px; top: auto; bottom: -15px; }

.content2-detail { margin-top: 50px; }
/*content3*/
.content3-detail { margin-top: 50px; display: flex; }
.content3-detail li { float: left; width: 33.333333%; }
.content3-detail ul { display: inline-block; }
.content3-detail a { position: relative; width: 100%; display: block; height: 100%; overflow: hidden; }
.content3-detail a:after { z-index: 1; background:url(/images/pro-bg.png) repeat top left; background: rgba(0,0,0,0.5); width: 100%; content: ''; position: absolute; height: 100%; top: 100%; opacity: 0; left: 0; transition: 0.5s linear 0s; }
.content3-detail li:hover a:after, .content3-detail li:hover .content3-text { top: 0; opacity: 1; }
.content3-text { font-size:40px; opacity: 0; top: -60%; left: 0; height: 100%; width: 100%; text-align: center; font-size: 2.1vw; z-index: 2; position: absolute; color: #fff; transition: 0.5s ease 0s; }
.content3-detail li:hover .content3-text span { width:140px; width: 6.93vw; opacity: 1; }
.content3-text span { width: 0; opacity: 0; transition: 0.3s linear 0.2s; display: block; height: 4px; background: #fff; margin: 15px auto 0; }
.content3-detail li:hover a:after, .content3-detail li:hover .content3-text { top: auto; bottom: 0; }
}
@media only screen and (max-width: 1150px) {
.content1>p { width: 85%; }
}
@media only screen and (max-width: 1024px) {
.contact>ul li { float: none; width: 100%; margin: 15px 0 15px 0; }
.content2-detail li { height: 70.8vw; width: 50%; }
.content3-text, .content3-detail a:after { bottom: 0; opacity: 1; top: auto; height: 20%; }
.content3-text span { display: none; }
}
@media only screen and (max-width: 770px) {
.content3-text { font-size: 4vw; }
.content1>p { width: 90%; }
.content3-detail, .content3-detail ul { display: block; }
.content3-detail li { display: block; float: none; width: 100%; margin-top: 10px; transition-delay: 0s !important; }
}
@media only screen and (max-width:500px) {
.content1 .img { width: initial; }
.content2-detail li { position: relative; float: none; height: 70.8vw; width: 100%; margin-top: 10px; }
.content2-img { overflow: hidden; width: 100%; height: 100%; }
.content2-text { bottom: 0; width: 100%; position: absolute; background: rgba(0,0,0,0.8); height: 25%; }
.content2-text>div { width: 75%; position: relative; }
.content2-text .icon { top: 50%; right: 0; position: absolute; background: url(../images/index-img6.png) no-repeat top center; background-size: 100%; width: 32px; height: 32px; margin-top: -16px; }
.content2-text:after { display: none; }
.content2-text p:first-child, .content2-text p { }
}
@media only screen and (max-width:450px) {
.content2-text p:first-child { font-size: 18px; margin-bottom: 0px; }
.content2-text p { font-size: 14px; }
.content2-text .icon { width: 25px; height: 25px; margin-top: -12.5px; }
}