body { background-color: #fff; } .visible-hide{ visibility: hidden; } img{ display: block; width: 100%; } footer { position: fixed; width: 100%; margin: 0 auto; text-align: center; bottom: 0; background: #0061a8; color: #FFFFFF; font-size: 0.37rem; z-index: 999; padding: 0.33rem 0; } footer p { line-height: 1.5; } footer p a{ color: #fff; } .sy-wechat{ width: 3.86rem; height: 3.86rem; margin: auto; text-align: center; } .r-w { display: inline-block; width: 1.58rem; text-align: justify; vertical-align: middle; height: 0.5rem; line-height: 0.5rem; } .r-w:after { content: ""; display: inline-block; width: 100%; } .wrap { padding-bottom: 15%; } em, font { color: #0a4e99; } .color { color: #0061a8; } .marginbtm { margin-bottom: 0.25rem; } .header .logo a { position: absolute; left: 0.2rem; top: 0.46rem; width: 0.6rem; height: 0.6rem; background: url(../code/back.png) top center no-repeat; background-size: cover; margin-right: 0.5rem; } /*防伪溯源*/ .header { width: 10rem; margin: 0 auto; text-align: center; background: #0061a8; } /************************轮播banner样式部分**********************/ #banner { position: relative; width: 10rem; height: 4.22rem; overflow: hidden; } #banner .swiper-slide { position: relative; text-align: center; } #banner img { max-width: 100%; height: 5.86rem; } .pagination { position: absolute; z-index: 20; bottom: 6px; width: 66px; text-align: center; right: 0; margin: 0; } .swiper-container-horizontal>.swiper-pagination-bullets { bottom: 0.08rem !important; } .swiper-pagination-bullet { display: inline-block; width: 12px; height: 6px; border-radius: 10px; /* border: solid 2px #fff; */ background: #fff; margin: 0 1px; opacity: 0.8; cursor: pointer; transition: all 0.5s; } .swiper-pagination-bullet-active { background: #29529b; } .header .logo { width: 10rem; margin: auto; text-align: center; height:1.65rem; line-height: 1.65rem; padding-top: 0.21rem; } .header .logo img{ width: 7.84rem; height: 1.22rem; line-height: 1.22rem; margin: auto; text-align: center; vertical-align: middle; } .head-h3 { width: 3.54rem; margin: 0.5rem auto 0; height: 0.96rem; line-height: 0.96rem; font-size: 0.4rem; background: #0061a8; color: #fff; text-align: center; border-radius: 50px; } .head-h3 img { vertical-align: middle; } .head-title { width: 4.72rem; height: 0.96rem; margin: 0.5rem auto; } .sycont { width: 9.42rem; margin: 0 auto 0.33rem; padding: 0.33rem 0; /*border: solid 1px #0061a8;*/ border-radius: 8px; position: relative; overflow: hidden; background:#f6f6f6; } .qwrz { position: absolute; top: 0; right: 0; width: 1.42rem; height: 1.42rem; } .click-btn{ display: inline-block; background: #0061a8; color: #fff !important; border-radius: 5px; padding: 0.05rem; font-size: 0.34rem; float: right; } .click-btn:active{ opacity: 0.8; } .sydetail p, .sycont p { font-size: 0.37rem; line-height: 1.5; padding: 0 0.33rem; } .sydetail p{ margin-bottom: 0.2rem; } .sycont .cxbtn { float: right; color: #fff; background: #0061a8; border-radius: 5px; width: 1.73rem; height: 0.5rem; line-height: 0.5rem; font-size: 0.34rem; text-align: center; } .sycont .cxbtn:active { opacity: 0.8; } .sydetail { width: 10rem; margin: 0 auto 0.2rem; padding: 0.33rem 0; position: relative; } .sydetail .sydetail-h3 { width: 10rem; height: 1.08rem; line-height: 1.08rem; margin: 0 auto 0.5rem; text-align: center; background: #0061a8; color: #fff; font-size: 0.4rem; position: relative; } /*产品系列*/ .procont { width: 100%; } .syright { display: inline-table; width: 6.9rem; vertical-align: top; } .syright1 { display: inline-table; width: 3.2rem; vertical-align: top; } .syright2 { display: inline-table; width: 6.15rem; vertical-align: top; } .nav { width: 10rem; margin: 0.5rem auto; display: flex; align-items: center; justify-items: center; padding: 0 0.25rem; } .nav a { flex: 1; display: block; text-align: center; color: #fff; margin: 0 0.5rem; background: #0061a8; padding: 0.35rem; border-radius: 15px; box-shadow:2px 2px 5px #333; transition: all 0.2s inline; } .nav a .nav-img{ width: 0.68rem; height: 0.68rem; text-align: center; margin: auto; } .nav a .nav-img img{ display: block; width: 100%; } .nav a p { line-height: 1.8; font-size: 0.34rem; } .nav a:active { opacity: 0.8; } /*tab*/ .tab-content { width: 9.44rem; margin: 0 auto; } .tab-menu { width: 100%; margin: 0 auto; height: 0.88rem; line-height: 0.88rem; border: 1px solid #d2d2d2; color: #333; transform: skew(-20deg); display: table; } .tab-menu a { display: table-cell; width: 1%; transform: skew(20deg); position: relative; text-align: center; color: #7c7c7c; font-size: 0.48rem; } .tab-menu a i { display: inline-block; margin-right: 0.2rem; } .tab-menu a:after { content: "/"; position: absolute; right: 0; } .tab-menu a:last-child:after { display: none; } .tab-item { height: 3.94rem; display: none; } .active { color: #0061a8 !important; } /*公司介绍*/ .gs-cont { width: 9.44rem; margin: 0 auto; font-size: 0.36rem; } .gs-cont h3 { width: 6.61rem; height: 0.73rem; margin: 0.5rem auto; } .gs-cont p { line-height: 1.5; } .gs-cont p a { color: #961212; } .cont { width: 100%; margin: 0 auto; } .cont p { padding: 0 0.33rem; margin-bottom: 0.2rem; } .sydetail p a { color: #0061a8; } /************ 合格证书 承诺 **************/ .hgzs-box{ width: 98%; margin: auto; padding: 0.33rem; border-radius: 5px; box-shadow: 1px 1px 1px #ddd, -1px -1px 1px #ddd; font-size: 0.37rem; } .cn-title{width: 100%; margin-bottom: 0.2rem;font-size: 0.4rem;color: #0061a8;text-align: center;} .hgzs-box p{margin-bottom: 0.2rem;} .hgzs-box ul li{font-size: 0.34rem;} .hgzs-box ul li:last-child{margin: 0.26rem 0.66rem;} .checkedBox{margin: 0 4px;} /****BEGIN checkbox 样式****/ /* Checkmark style starts */ @-moz-keyframes dothabottomcheck { 0% { height: 0; } 100% { height: 8px; } } @-webkit-keyframes dothabottomcheck { 0% { height: 0; } 100% { height: 8px; } } @keyframes dothabottomcheck { 0% { height: 0; } 100% { height: 8px; } } @keyframes dothatopcheck { 0% { height: 0; } 50% { height: 0; } 100% { height: 15px; } } @-webkit-keyframes dothatopcheck { 0% { height: 0; } 50% { height: 0; } 100% { height: 15px; } } @-moz-keyframes dothatopcheck { 0% { height: 0; } 50% { height: 0; } 100% { height: 15px; } } input[type=checkbox] { display: none; } .check-box { height: 14px; width: 14px; background-color: transparent; border: 1px solid black; border-radius: 3px; position: relative; display: inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: border-color ease 0.2s; -o-transition: border-color ease 0.2s; -webkit-transition: border-color ease 0.2s; transition: border-color ease 0.2s; cursor: pointer; vertical-align: middle; } .check-box::before, .check-box::after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; height: 0; width: 2px; background-color: #0061a8; display: inline-block; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; -webkit-transform-origin: left top; transform-origin: left top; border-radius: 5px; content: ' '; -webkit-transition: opacity ease .5; -moz-transition: opacity ease .5; transition: opacity ease .5; } .check-box::before { top: 10px; left: 8px; /* box-shadow: 0 0 0 5px #667788; */ -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .check-box::after { top: 4px; left: 2px; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } input[type=checkbox]:checked + .check-box, .check-box.checked { border-color: #0061a8; } input[type=checkbox]:checked + .check-box::after, .check-box.checked::after { height: 14px; -moz-animation: dothabottomcheck 0.2s ease 0s forwards; -o-animation: dothabottomcheck 0.2s ease 0s forwards; -webkit-animation: dothabottomcheck 0.2s ease 0s forwards; animation: dothabottomcheck 0.2s ease 0s forwards; } input[type=checkbox]:checked + .check-box::before, .check-box.checked::before { height: 0.8rem; -moz-animation: dothatopcheck 0.4s ease 0s forwards; -o-animation: dothatopcheck 0.4s ease 0s forwards; -webkit-animation: dothatopcheck 0.4s ease 0s forwards; animation: dothatopcheck 0.4s ease 0s forwards; }