/**********样式重置**********/
html{font-size: var(--size);}
html,body{
    -ms-overflow-style: scrollbar;/*解决ie浏览器右侧滚动条遮挡内容问题*/
    -webkit-overflow-scrolling: touch;/*解决iOS滚动条被卡住的问题*/
    scroll-behavior: smooth;/*滚动到指定位置*/
    margin:0 auto;
}
body{ font-family: var(--fontfamily); background-color:#fff; overflow-x:hidden; color: #2a1f1c; box-sizing: border-box; margin: 0 auto;}
a{ color:#333333; text-decoration:none; outline: medium none;}
a:link,a:visited{text-decoration: none;}
a:hover{text-decoration:none;color:var(--main-color);}
.keylink{ color: var(--main-color); font-weight:bold;}
img,li{ vertical-align:top; border:0px; list-style-type: none; box-sizing: border-box;}
img{ max-width:100%; height: auto; transition: linear 0.35s;}
.clear{clear: both;}
.container{ margin: 0px auto; clear: both; padding: 0; box-sizing: border-box;}
*{margin:0px;padding:0px;}
ul{ list-style-type:none;}
b{ font-weight: normal; }
ul,li,h5,dt,dd,img{margin:0px;padding:0px;}
html,body,b,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,img,pre,form,p,input,td {margin:0px auto;padding:0; font-weight: normal; box-sizing: border-box;}
body,td,th{ font-family: var(--fontfamily); font-size:12px; box-sizing: border-box;}
input,textarea{ font-family: var(--fontfamily); border:0; outline:medium; box-sizing: border-box;}

@media (min-width:1px) and (max-width:1081px){
	.container{ margin-left: 15px; margin-right: 15px;}
}
@media (min-width:1082px){
	.container{ width: 100%; padding: 0 0.6rem; box-sizing: border-box; margin: 0 auto;}
}
@media (min-width:1480px){
	.container{ width: 100%; max-width: 1200px; padding: 0;}
}
@media (min-width:1530px){
	.container{ width: 100%; max-width: 1400px; padding: 0;}
}

/**********样式重置**********/

/**********头部**********/
.header{ position: fixed; left: 0; top: 0; width: 100%; z-index: 999; background: #fff; box-shadow: 0 0 0.15rem rgba(0,0,0,0.15);}
@media (min-width:1082px){
    .header .container{ max-width: inherit; padding: 0 0.9rem; }
}
@media (min-width: 1px) and (max-width: 1081px) {
}

.header menu{ display: flex; justify-content: space-between; align-items: center;}
.header menu .logo{ margin: 0; display: inline-block;}
.header menu .logo>a{ display: block; padding: 45px 0;}
.header menu .logo>a>img{ height: 48px; width: auto;}

.header menu nav{ margin: 0; display: inline-block;}
.header menu nav>ul{ display: flex; align-items: center; justify-content: space-between;}
.header menu nav>ul>li{ margin: 0; font-size: 18px;}
.header menu nav>ul>li>a{ display: block; padding: 0 0.19rem; color: #000;}
.header menu nav>ul>li:hover>a{ color: var(--main-color);}

.header menu .nav_r{ margin: 0; display: inline-flex; align-items: center;}
.header menu .nav_r a{ display: inline-block; margin-left: 0.4rem;}
@media (min-width:1082px){
    .header menu{ flex-wrap: nowrap; align-items: center;}
}
@media (min-width: 1px) and (max-width: 1081px) {
    .header menu .logo>a{ display: block; padding: 15px 0;}
    .header menu .logo>a>img{ height: 30px; width: auto;}
    .header menu nav{ display: none;}
}
/**********头部**********/



/**********大图**********/
.bframe{ background: url("/dist/images/banner.jpg") no-repeat center center / 100% 100%; position: relative; }
.bframe .swiper{}
.bframe .swiper-wrapper{ align-items: stretch;}
.bframe .swiper-slide{ padding-bottom: 0.8rem;}
.bframe .itembox{ width: 100%; align-items: center; padding: 0.55rem 0;}
.bframe .itembox .img{ margin: 0; width: calc(100% - 63%); display: flex; align-items: center; justify-content: center;}
.bframe .itembox .txt{ margin: 0; width: 52%;}
.bframe .itembox .txt .line{ width: 1.47rem; height: 3px; background: var(--main-color); display: block; margin: 0; margin-bottom: 0.15rem;}
.bframe .itembox .txt .z1{ font-size: 0.75rem; color: #373737; text-transform: uppercase;}
.bframe .itembox .txt .z1 span{ display: block; font-size: 0.48rem; text-transform: capitalize;}
.bframe .itembox .txt .context{ font-size: 16px; line-height: 1.8; color: #373737; margin-top: 0.4rem;}
.bframe .item{ background: #fff; padding: 0.4rem; box-shadow: 0 5px 0.2rem #b7b7b7,0 5px 0.2rem rgba(255,255,255,0); border-radius: 0.1rem;}
.bframe .item .img{ margin: 0; width: calc(50% - 1.3rem);}
.bframe .item .txt{ margin: 0; width: 50%;}
.bframe .item .txt .z1{ font-size: 0.48rem; text-transform: uppercase; margin-bottom: 0.2rem; color: #373737;}
.bframe .item .txt .p1{ font-size: 14px; color: #373737; line-height: 1.5; margin-bottom: 0.1rem;}
.bframe .item .txt .z2{ font-size: 24px; margin-bottom: 0.2rem;}
.bframe .item .txt .context{ font-size: 14px; color: #373737; line-height: 1.5;}
.bframe .btn{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; cursor: pointer; outline: none; color: #bfbfbf;}
.bframe .btn i{ font-size: 0.8rem;}
.bframe .btn:hover{ color: var(--main-color);}
.bframe .btn-prev{ left: 0.55rem; }
.bframe .btn-next{ right: 0.55rem; }
@media (min-width:1082px){
    .bframe{ margin-top: 138px;}
    .bframe .itembox{ flex-direction: row-reverse;}
    .bframe .item{ flex-direction: row-reverse;}
}
@media (min-width: 1px) and (max-width: 1081px) {
    .bframe{ margin-top: 60px;}
    .bframe .itembox .img{ width: 100%;}
    .bframe .itembox .txt{ width: 100%; margin-top: 0.3rem;}
    .bframe .item .img{ width: 100%;}
    .bframe .item .txt{ width: 100%; margin-top: 0.3rem;}
}
/**********大图**********/

/**********整体**********/
.iframe{ padding: 20px 0 1.1rem; background: url("/dist/images/1_05.png") no-repeat left 20px / calc(50% + 20px) auto;}
.iframe .fr{ margin: 0; width: calc(50% - 0.65rem); margin-left: auto; padding-top: 0.45rem;}
.iframe .fr .z1{ text-transform: uppercase; display: inline-block; line-height: 1; padding: 5px 10px; color: #333; border: 1px solid #333; border-radius: 5px;}
.iframe .fr .z2{ font-size: 0.4rem; font-weight: 700; margin: 0.15rem 0;}
.iframe .fr .context{ font-size: 16px; line-height: 1.875; color: #666;}
.iframe .fr .z3{ font-size: 17px; margin-bottom: 0.2rem; margin-top: 0.55rem;}
.iframe .fr img{ display: block; margin: 0;}
.iframe .fr a{ display: inline-flex;align-items: center; line-height: 1; padding: .15rem; box-sizing: border-box; border: 1px solid var(--main-color); margin-top: 0.4rem; color: var(--main-color); font-size: 14px;}
.iframe .fr a i{ margin-left: 0.4rem;}
@media (min-width:1082px){
    .iframe .fr a:hover{ background: var(--main-color); color: #fff;}
}
@media (min-width: 1px) and (max-width: 1081px) {
    .iframe{  background: url("/dist/images/1_05.png") no-repeat left top / 100% auto; padding: 60%  0 1.1rem 0;}
    .iframe .fr{ width: 100%;}
}

.indextit{ position: relative;}
.indextit .z1{ font-size: 0.4rem; font-weight: 700; text-transform: uppercase;}
.indextit .p1{ font-size: 16px; line-height: 1.56; color: #666;}
.indextit a{ display: inline-flex;align-items: center; line-height: 1; padding: .15rem; box-sizing: border-box; border: 1px solid var(--main-color); color: var(--main-color); font-size: 14px;}
.indextit a i{ margin-left: 0.4rem;}
@media (min-width:1082px){
    .indextit a{ position: absolute; right: 0; top: 0; z-index: 1;}
}
@media (min-width: 1px) and (max-width: 1081px) {
}

.iframe1{ padding: 0.9rem 0 1.05rem; background: #f8f8f9;}
.iframe1 .list{ margin-top: 0.6rem;}
.iframe1 .list .item{ margin: 0; width: calc((100% - 0.72rem)/4); margin-right: 0.24rem; box-sizing: border-box; border: 1px solid #eaeaea; background: #fff; border-radius: 5px; padding: 0.45rem 0.25rem; cursor: pointer;}
.iframe1 .list .item .img{ display: flex; justify-content: space-between; align-items: center;}
.iframe1 .list .item .img span{ color: #f1f1f1; font-weight: 700; font-size: 1rem;}
.iframe1 .list .item .img img{ margin: 0;}
.iframe1 .list .item .txt{}
.iframe1 .list .item .txt .z1{ font-weight: 700; font-size: 20px;}
.iframe1 .list .item .txt .p1{ font-size: 16px; line-height: 1.56; color: #666; margin-top: 0.15rem;}
@media (min-width:1082px){
    .iframe1 .list .item:nth-child(4){ margin-right: 0;}
    .iframe1 .list .item:hover{ box-shadow: 0 0 0.15rem rgba(0,0,0,0.15);}
}
@media (min-width: 1px) and (max-width: 1081px) {
    .iframe1 .list .item{ width: 100%; margin-right: 0; margin-bottom: 0.2rem;}
}

.iframe2{ padding: 1.1rem 0 0.85rem; background: url("/dist/images/1_11.jpg") no-repeat center center / 100% 100%;}
.iframe2 .indextit{}
.iframe2 .indextit .z1{ color: #fff; font-size: 0.45rem; font-weight: normal; margin-bottom: 0.25rem;}
.iframe2 .indextit .p1{ color: #fff;}
.iframe2 .list{ margin-top: 0.7rem;}
.iframe2 .list .item{ overflow: hidden; border: 5px solid #fff; border-radius: 5px; box-sizing: border-box; transition: border-color 0.4s ease-in-out; cursor: pointer;}
.iframe2 .list .item img{ width: 100%; height: auto;}
.iframe2 .list .swiper-pt{ display: flex; margin-top: 0.75rem; justify-content: center; align-items: center; width: 100%;}
.iframe2 .list .swiper-pt span{ width: 0.5rem; height: 0.15rem; background: #ccc; opacity: 1; border-radius: 0;}
.iframe2 .list .swiper-pt .swiper-pagination-bullet-active{ background: var(--main-color);}
@media (min-width:1082px){
     .iframe2 .list .item:hover{ border-color: var(--main-color);}
}
@media (min-width: 1px) and (max-width: 1081px) {
}

.iframe3{ padding: 1rem 0 ;}
.iframe3 .flex_between{ align-items: center;}
.iframe3 .lt{ margin: 0; width: calc(100% - 63% - 0.5rem);}
.iframe3 .lt .z1{ font-size: 0.35rem;}
.iframe3 .lt dl{ margin-top: 0.45rem;}
.iframe3 .lt dl dd{ font-size: 16px; color: #4e4e4e; margin-bottom: 0.2rem; display: flex; align-items: center; line-height: 1;}
.iframe3 .lt dl dd:before{ content: ""; display: inline-block; width: 13px; height: 23px; background: url("/dist/images/1_13.png") no-repeat; margin-right: 5px}
.iframe3 .lt dl dd:after{ content: ""; display: inline-block; width: 13px; height: 23px; background: url("/dist/images/1_14.png") no-repeat; margin-left: 5px;}
.iframe3 .lt a{ margin: 0; display: inline-flex;align-items: center; line-height: 1; padding: .15rem; box-sizing: border-box; border: 1px solid var(--main-color); margin-top: 0.4rem; color: var(--main-color); font-size: 14px;}
.iframe3 .lt a i{ margin-left: 0.4rem;}
.iframe3 .fr{ margin: 0; width: 63%;}
@media (min-width:1082px){
}
@media (min-width: 1px) and (max-width: 1081px) {
    .iframe3 .lt{ width: 100%;}
    .iframe3 .fr{ width: 100%; margin-top: 0.3rem;}
}


.iframe4{ padding: 0.9rem 0 1.05rem; background: #f8f8f9;}
.iframe4 .indextit{}
.iframe4 .indextit .z1{ font-size: 0.45rem; font-weight: normal; margin-bottom: 0.25rem;}
.iframe4 .list{ margin-top: 0.6rem;}
.iframe4 .list .item{ margin: 0; box-sizing: border-box; border: 0.2rem solid #e2e2e2; border-radius: 5px; cursor: pointer; transition: border-color 0.4s ease-in-out;}
@media (min-width:1082px){
    .iframe4 .list .item:hover{ border-color: var(--main-color);}
}
@media (min-width: 1px) and (max-width: 1081px) {
    .iframe4 .list .item{ width: calc((100% - 0.2rem)/2); margin-bottom: 0.2rem;}
    .iframe4 .list .item:nth-child(2n){ margin-right: 0;}
}

.iframe5{ padding: 1.1rem 0; background: url("/dist/images/1_15.jpg") no-repeat center center / cover;}
.iframe5 .list{ background: #fbfbfb;}
.iframe5 .list .lt{ margin: 0; width: 50%; box-sizing: border-box; padding: 0.7rem 0.65rem;}
.iframe5 .list .lt .z1{ font-size: 0.35rem; color: #000;}
.iframe5 .list .lt .p1{ font-size: 16px; line-height: 1.625; color: #666; margin-top: 0.2rem;}
.iframe5 .list .lt .z2{ font-size: 0.25rem; color: #000; margin-top: 0.5rem; margin-bottom: 0.3rem;}
.iframe5 .list .lt dl{ margin: 0; width: calc((100%)/2);}
.iframe5 .list .lt dl dd{ display: flex; align-items: center; font-size: 16px; color: #666; margin-bottom: 0.2rem;}
.iframe5 .list .lt dl dd i{ color: var(--main-color); font-size: 20px;}
.iframe5 .list .fr{ margin: 0; width: 50%; box-sizing: border-box; padding: 0.7rem 0.65rem 0.7rem 0}
.iframe5 .list .fr .z1{ font-size: 0.3443rem; color: #000;}
.iframe5 .list .fr .p1{ font-size: 13.77px; color: #818180; margin-top: 0.15rem; margin-bottom: 0.3rem;}
.iframe5 .list .fr .feedbackbox{}
.iframe5 .list .fr .feedbackbox input{ width: 100%; height: 46px; box-sizing: border-box; background: #fff; padding: 0 0.15rem; margin-bottom: 15px; color: #818180;}
.iframe5 .list .fr .feedbackbox textarea{ width: 100%; height: 76px; box-sizing: border-box; background: #fff; padding: 0.15rem; margin-bottom: 15px; color: #818180; resize: none;}
.iframe5 .list .fr .feedbackbox button{ width: 100%; height: 46px; background: #000; border-radius: 0.1rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15.5px; cursor: pointer; outline: none; border: 0;}
.iframe5 .list .fr .feedbackbox button span{ display: inline-block; margin-right: 0.1rem;}
.iframe5 .list .fr .feedbackbox button i{ font-size: 20px;}
@media (min-width:1082px){
    .iframe5 .list .fr .feedbackbox button:hover{ background: var(--main-color); color: #fff;}
}
@media (min-width: 1px) and (max-width: 1081px) {
    .iframe5 .list .lt{ width: 100%;}
    .iframe5 .list .fr{ width: 100%; padding: 0.7rem 0.65rem;}
}
/**********整体**********/


/**********底部**********/
.footer{ background: url("/dist/images/footer.jpg") no-repeat center center / cover;}
.footer .foot{ padding: 0.5rem 0 0.9rem;}
.footer .foot .item{ margin: 0; padding-right: 0.8rem; display: inline-flex; align-items: center; justify-content: space-between;}
.footer .foot .item .tag{ width: 52px; height: 52px; margin: 0; background: #000; display: flex; justify-content: center; align-items: center; color: #fff; white-space: nowrap; text-overflow: ellipsis;}
.footer .foot .item .tag i{ font-size: 25px;}
.footer .foot .item .txt{ margin: 0; flex: 1; margin-left: 0.25rem;}
.footer .foot .item .txt .z1{ font-size: 17px; color: #fff; margin-bottom: 0.1rem;}
.footer .foot .item .txt .p1{ font-size: 19px; color: #fff; white-space: nowrap;text-overflow: ellipsis;}
.footer .foot .item .txt .p1 a{ color: #fff;}
.footer .foot .item .txt .p1 a:hover{ color: var(--main-color);}
.footer .copyright{ padding: 20px 0; border-top: 1px solid #333; color: #fff; text-align: center; font-size: 14px;}
@media (min-width:1082px){
    .footer .foot .item:nth-child(4){ padding-right: 0;}
}
@media (min-width: 1px) and (max-width: 1081px) {
    .footer .foot{ padding: 0.6rem 0;}
    .footer .foot .item{ width: 100%; margin-bottom: 0.2rem;}
}
/**********底部**********/

/**********右侧浮动**********/
#float{position:fixed;right:15px;top:50%;margin-top:-80px;z-index:9; background: #666; border-radius: .5rem;}
#float .ico{ width: 0.5rem; height: 0.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; cursor: pointer; position: relative;}
#float .ico i{ font-size: 0.25rem;}
#float .ico span{ display: none; position: absolute; right: 100%; top: 0; width: 2.4rem; transition: all 0.5s;}
#float .ico.btninquiry span{ position: absolute; background: var(--main-color); width: 1.4rem; padding: 0.14rem; box-sizing: border-box; border-radius: 0.1rem; right: 50%; text-align: center; font-size: 16px; line-height: 1.5; color: #fff; top: -0.8rem;}
#float .ico.btninquiry span em{ width: 18px; height: 18px; background: var(--main-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; right: -5px; top: -7px; color: #fff; font-size: 10px; font-style: normal; }
#float .ico.btninquiry span:before{ content: ""; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; background: var(--main-color); border-radius: 50%;}
#float .ico.btninquiry span:after{ content: ""; position: absolute; left: 65%; bottom: -0.2rem; width: 9px; height: 9px; background: var(--main-color); border-radius: 50%;}
#float .ico.btninquiry.visible span{ display: block;}
#float .whatsapp{ background: #3acb3e;}
#float .wechat{ background: #3acb3e;}
#float .qq{ background: #68A5E1;}
#float .onhover:hover span{ display: block;}

@media (min-width:1px) and (max-width:1081px){
	
}

.floatForm{position:fixed;right:0;bottom:-200%;z-index:10; transition: linear 0.35s; overflow: hidden;}
.floatForm[typeof='close']{ bottom:-200%;}
.floatForm[typeof='open']{ bottom: 0;}
.floatForm .contactTop{ overflow: hidden; display: flex; justify-content: space-between; margin-left: -20px; margin-top: -30px; position: relative; height: 75px; margin-bottom: 0.2rem; align-items: center;}
.floatForm .contactTop:before{position:absolute;top:0;left:0;width:0;height:0;border-color:var(--main-color) transparent transparent transparent;border-style:solid;border-width:75px 98px 0 0;content:"";}
.floatForm .contactTop .contactLogo{ margin-left: 20px; margin-top: 5px; position: relative; z-index: 3; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 10px #333; background: #fff; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 5px;}
.floatForm .contactTop .contactLogo img{ max-width: inherit; width: 100%; height: auto;}
.floatForm .contactForm{width:90%;max-width:380px;z-index:1; padding:30px 20px;background-color:#f3f3f3;border:1px solid #d5d5d5; overflow: hidden; border-radius: 10px;}
.floatForm .contactForm .btnclose{display:inline-flex;width:30px;height:30px;background-color:#000;border:3px solid #fff;border-radius:50%;z-index:1;align-items: center;justify-content: center;cursor:pointer; margin: 0;}
.floatForm .contactForm .btnclose>i{font-size:12px;line-height:24px;color:#fff;font-weight:bold;}
.floatForm .contactForm .quickQuoteTitle{font-size:22px;line-height:24px;color:#171717;font-weight:600;margin-bottom:20px;}
.floatForm .contactForm input,.contactForm textarea{padding:12px;width:100%;border:1px solid #dadada;margin-bottom:10px;background-color:#fff;color:#000;resize:none; box-sizing: border-box;}
.floatForm .contactForm .submit{padding:0.1rem 0.2rem;min-width:100%;font-size:16px;border:1px solid var(--main-color);background-color:var(--main-color);text-align:center;color:#fff;display:inline-block; height: auto; box-sizing: border-box; border-radius: 0; cursor: pointer; outline: none;}
.floatForm .contactForm .submit:hover{color:#fff;}
@media (min-width:1px) and (max-width:1081px){
	.floatForm[typeof='open']{ bottom: 50px;}
}
/**********右侧浮动**********/