@charset "utf-8";
/* CSS Document */
html, body {
width: 100%;
height: 100%;
}
body {
font-family: "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.15;
color: #333;
background-color: #fff;
overflow-x: hidden;
}
a {
text-decoration: none;
color: #333;
-webkit-tap-highlight-color: transparent;
}
* {
list-style: none;
margin: 0;
outline: none;
padding: 0;
border: none;
}
.fl {
float: left;
}
.fr {
float: right;
}
.ov {
overflow: hidden;
}
.dis {
display: block !important;
}
.dn {
display: none;
}
.clear {
clear: both;
}
.clear:after {
content: "";
display: block;
clear: both;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #999;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #999;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #999;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #999;
}
input, select, textarea {
-webkit-appearance: none;
color: #333;
}
input[type=radio] {
-webkit-appearance: radio;
}
input[type=checkbox] {
-webkit-appearance: checkbox;
}
select {
-webkit-appearance: none; /* 清除iOS默认样式 */
-moz-appearance: none; /* 清除Firefox默认样式 */
appearance: none; /* 标准语法 */
background-color: transparent; /* 透明背景 */
}
table {
border-collapse: collapse;
width: 100%;
max-width:100%;
font-family: sans-serif;
}
th, td {
padding: 0.75em;
text-align: left;
border: 1px solid #ddd;
}
/*header*/
@media screen and (min-width:1600px) {
.hbg {
width: 100%;
height: 100px;
}
.header {
width: 100%;
height: 100px;
position: fixed;
left: 0;
top: 0;
z-index: 999;
background-color: #2d3246;
}
.header .head {
width: 84%;
height: 100%;
margin: auto;
}
.header .head .hamburger {
display: none;
}
.header .head .logo {
height: 70px;
padding: 15px 0;
float: left;
}
.header .head .logo img {
display: block;
height: 70px;
}
.header .head .logo img.img02, .header .head .logo img.img03 {
display: none;
}
.header .head .yu {
height: 100px;
display: block;
position: relative;
z-index: 9;
float: right;
}
.header .head .yu dt {
width: 40px;
height: 40px;
padding: 30px 0;
display: block;
position: relative;
float: left;
margin-right: 1.04vw;
z-index: 1;
}
.header .head .yu dt span {
width: 100%;
height: 40px;
display: block;
border-radius: 40px;
background-color: #fff;
overflow: hidden;
cursor: pointer;
}
.header .head .yu dt span img {
display: block;
height: 18px;
margin: 11px auto;
}
.header .head .yu dt p {
display: none;
position: absolute;
left: 50%;
margin-left: -60px;
top: 100%;
width: 120px;
background-color: #2d3246;
padding: 15px 20px;
text-align: center;
box-sizing: border-box;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.header .head .yu dt p a {
display: block;
font-size: 16px;
line-height: 30px;
height: 30px;
overflow: hidden;
color: #fff;
}
.header .head .yu dt p a:hover {
color: #ffc700;
}
.header .head .yu dd {
width: 40px;
height: 40px;
display: block;
position: relative;
float: left;
z-index: 3;
margin: 30px 0;
}
.header .head .yu dd span {
width: 40px;
height: 40px;
display: block;
position: absolute;
right: 0;
top: 0;
overflow: hidden;
border-radius: 40px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
background-color: #ffc700;
}
.header .head .yu dd b {
width: 40px;
height: 40px;
display: block;
border-radius: 100%;
overflow: hidden;
}
.header .head .yu dd b img {
display: block;
height: 18px;
margin: 11px auto;
}
.header .head .yu dd p {
display: block;
position: absolute;
left: 40px;
top: 0;
width: 150px;
font-size: 18px;
line-height: 40px;
height: 40px;
color: #fff;
font-weight: bold;
}
.header .head .yu dd span:hover {
width: 190px;
}
.header .head .yu dd a {
display: none;
}
.header .head .nav {
display: block;
float: right;
height: 100px;
position: relative;
z-index: 1;
margin-right: 2.5vw;
}
.header .head .nav dd {
display: flex;
align-items: center;
float: left;
margin-right: 3.64vw;
height: 100%;
position: relative;
z-index: 1;
}
.header .head .nav dd > a {
display: block;
font-size: 18px;
color: #fff;
}
.header .head .nav dd.on:before, .header .head .nav dd:hover:before {
width: 100%;
height: 4px;
display: block;
position: absolute;
left: 0;
bottom: 0;
background: #ffc700;
overflow: hidden;
content: '';
}
.header .head .nav dd.on > a, .header .head .nav dd:hover > a {
color: #ffc700;
}
.header .head .nav dd p {
width: 150px;
position: absolute;
left: 50%;
margin-left: -95px;
top: 80px;
background-color: #2d3246;
display: block;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
opacity: 0;
height: 0;
overflow: hidden;
padding: 15px 20px;
text-align: center;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.header .head .nav dd p a {
display: block;
font-size: 16px;
line-height: 30px;
height: 30px;
overflow: hidden;
color: #fff;
}
.header .head .nav dd p a:hover {
color: #ffc700;
}
.header .head .nav dd:hover {
z-index: 9;
}
.header .head .nav dd:hover p {
top: 100%;
opacity: 1;
height: auto;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.hbg {
width: 100%;
height: 80px;
}
.header {
width: 100%;
height: 80px;
position: fixed;
left: 0;
top: 0;
z-index: 999;
background-color: #2d3246;
}
.header .head {
width: 90%;
height: 100%;
margin: auto;
}
.header .head .hamburger {
display: none;
}
.header .head .logo {
height: 50px;
padding: 15px 0;
float: left;
}
.header .head .logo img {
display: block;
height: 50px;
}
.header .head .logo img.img01, .header .head .logo img.img03 {
display: none;
}
.header .head .yu {
height: 80px;
display: block;
position: relative;
z-index: 9;
float: right;
}
.header .head .yu dt {
width: 38px;
height: 38px;
padding: 21px 0;
display: block;
position: relative;
float: left;
margin-right: 1.04vw;
z-index: 1;
}
.header .head .yu dt span {
width: 100%;
height: 38px;
display: block;
border-radius: 40px;
background-color: #fff;
overflow: hidden;
cursor: pointer;
}
.header .head .yu dt span img {
display: block;
height: 18px;
margin: 10px auto;
}
.header .head .yu dt p {
display: none;
position: absolute;
left: 50%;
margin-left: -55px;
top: 100%;
width: 110px;
background-color: #2d3246;
padding: 15px 20px;
text-align: center;
box-sizing: border-box;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.header .head .yu dt p a {
display: block;
font-size: 15px;
line-height: 29px;
height: 29px;
overflow: hidden;
color: #fff;
}
.header .head .yu dt p a:hover {
color: #ffc700;
}
.header .head .yu dd {
width: 38px;
height: 38px;
display: block;
position: relative;
float: left;
z-index: 3;
margin: 21px 0;
}
.header .head .yu dd span {
width: 38px;
height: 38px;
display: block;
position: absolute;
right: 0;
top: 0;
overflow: hidden;
border-radius: 40px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
background-color: #ffc700;
}
.header .head .yu dd b {
width: 38px;
height: 38px;
display: block;
border-radius: 100%;
overflow: hidden;
}
.header .head .yu dd b img {
display: block;
height: 18px;
margin: 10px auto;
}
.header .head .yu dd p {
display: block;
position: absolute;
left: 38px;
top: 0;
width: 150px;
font-size: 16px;
line-height: 38px;
height: 38px;
color: #fff;
font-weight: bold;
}
.header .head .yu dd span:hover {
width: 170px;
}
.header .head .yu dd a {
display: none;
}
.header .head .nav {
display: block;
float: right;
height: 80px;
position: relative;
z-index: 1;
margin-right: 2.5vw;
}
.header .head .nav dd {
display: flex;
align-items: center;
float: left;
margin-right: 3.64vw;
height: 100%;
position: relative;
z-index: 1;
}
.header .head .nav dd > a {
display: block;
font-size: 16px;
color: #fff;
}
.header .head .nav dd.on:before, .header .head .nav dd:hover:before {
width: 100%;
height: 4px;
display: block;
position: absolute;
left: 0;
bottom: 0;
background: #ffc700;
overflow: hidden;
content: '';
}
.header .head .nav dd.on > a, .header .head .nav dd:hover > a {
color: #ffc700;
}
.header .head .nav dd p {
width: 130px;
position: absolute;
left: 50%;
margin-left: -85px;
top: 80px;
background-color: #2d3246;
display: block;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
opacity: 0;
height: 0;
overflow: hidden;
padding: 15px 20px;
text-align: center;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.header .head .nav dd p a {
display: block;
font-size: 15px;
line-height: 29px;
height: 29px;
overflow: hidden;
color: #fff;
}
.header .head .nav dd p a:hover {
color: #ffc700;
}
.header .head .nav dd:hover {
z-index: 9;
}
.header .head .nav dd:hover p {
top: 100%;
opacity: 1;
height: auto;
}
}
@media screen and (min-width:1024px) and (max-width:1100px) {
.header .head .nav {
margin-right: 2vw;
}
.header .head .nav dd {
margin-right: 3vw;
}
}
@media only screen and (max-width:1023px) {
.hbg {
width: 100%;
height: 60px;
}
.header {
width: 100%;
height: 60px;
position: fixed;
left: 0;
top: 0;
z-index: 999;
background-color: #2d3246;
}
.header .head {
width: 100%;
height: 60px;
}
.header .head .hamburger {
height: 30px;
width: 24px;
padding: 15px 18px;
float: right;
transition: left 0.3s ease-out 0s, opacity 0.3s linear 0s;
background-color: #ffc700;
}
.header .head .hamburger .h-bar {
display: block;
width: 24px;
height: 2px;
background-color: #fff;
margin: 6px auto;
transform: rotate(0deg);
opacity: 1;
transition: all 0.4s ease-out 0s;
}
.header .head .hamburger.open-menu .h-bar {
margin-left: 8px;
}
.header .head .hamburger.open-menu .h-bar:nth-of-type(1) {
transform: rotate(45deg) translateY(11px);
}
.header .head .hamburger.open-menu .h-bar:nth-of-type(2) {
opacity: 0;
}
.header .head .hamburger.open-menu .h-bar:nth-of-type(3) {
transform: rotate(-45deg) translateY(-11px);
}
.header .head .hamburger.open-menu .h-bar {
margin-bottom: 0px;
}
.header .head .logo {
display: block;
padding: 10px 3%;
float: left;
}
.header .head .logo img {
display: block;
height: 40px;
}
.header .head .logo img.img01, .header .head .logo img.img02 {
display: none;
}
.header .head .yu {
height: 60px;
display: block;
position: relative;
z-index: 9;
float: right;
}
.header .head .yu dt {
width: 36px;
height: 36px;
padding: 12px 0;
display: block;
position: relative;
float: left;
z-index: 1;
}
.header .head .yu dt span {
width: 100%;
height: 36px;
display: block;
border-radius: 40px;
background-color: #fff;
overflow: hidden;
cursor: pointer;
}
.header .head .yu dt span img {
display: block;
height: 18px;
margin: 9px auto;
}
.header .head .yu dt p {
display: none;
position: absolute;
left: 50%;
margin-left: -50px;
top: 100%;
width: 100px;
background-color: #2d3246;
padding: 10px 15px;
text-align: center;
box-sizing: border-box;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.header .head .yu dt p a {
display: block;
font-size: 14px;
line-height: 28px;
height: 28px;
overflow: hidden;
color: #fff;
}
.header .head .yu dt p a:hover {
color: #ffc700;
}
.header .head .yu dd {
width: 36px;
height: 36px;
display: block;
position: relative;
float: left;
z-index: 3;
margin: 12px 3vw;
}
.header .head .yu dd a {
width: 36px;
height: 36px;
display: block;
overflow: hidden;
border-radius: 40px;
background-color: #ffc700;
}
.header .head .yu dd a img {
display: block;
height: 18px;
margin: 9px auto;
}
.header .head .yu dd span {
display: none;
}
.header .head .nav {
background-color: #1a1e2f;
display: block;
opacity: 0;
position: absolute;
overflow-y: scroll;
width: 100%;
height: calc(100vh - 60px);
top: 60px;
left: -100vw;
transition: left 0.3s ease-out 0s, opacity 0.3s linear 0s;
z-index: 222;
padding: 30px 3%;
box-sizing: border-box;
}
.header .head .nav.open-menu {
opacity: 1;
left: 0px;
transition: left 0.3s ease-out 0s;
}
.header .head .nav dd {
width: 100%;
display: block;
overflow: hidden;
border-top: 1px solid #2d3246;
position: relative;
}
.header .head .nav dd:first-child {
border-top: none;
}
.header .head .nav a {
display: block;
font-size: 16px;
color: #fff;
padding-left: 20px;
height: 50px;
line-height: 50px;
}
.header .head .nav dd b {
display: inline-flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
height: 50px;
width: 50px;
position: absolute;
right: 0;
top: 0px;
text-align: center;
}
.header .head .nav dd b::after {
content: "+";
background-color: transparent;
font-size: 24px;
color: #333;
transform: rotateZ(0deg);
transition: transform 0.2s ease-out 0s, -webkit-transform 0.2s ease-out 0s;
color: #fff;
}
.header .head .nav dd.active b::after {
transform: rotateZ(135deg);
}
.header .head .nav dd.active > a, .header .head .nav dd.on > a {
color: #ffc700;
}
.header .head .nav dd p {
display: none;
width: 100%;
overflow: hidden;
box-sizing: border-box;
padding: 10px 20px;
margin-top: -20px;
}
.header .head .nav dd p a {
display: block;
font-size: 14px;
line-height: 30px;
height: 30px;
color: #fff;
overflow: hidden;
}
.header .head .nav dd p a:hover {
color: #ffc700;
}
}
/*banner*/
@media screen and (min-width:1600px) {
.banner {
width: 100%;
height: 54.6875vw;
max-height: calc(100% - 100px);
position: relative;
z-index: 1;
}
.banner .swiper-container {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
.banner .swiper-wrapper {
width: 100%;
height: 100%;
}
.banner .swiper-slide {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
.banner .swiper-slide a {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
display: block;
overflow: hidden;
}
.banner .swiper-slide a img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.banner .swiper-slide a img.mobile {
display: none;
}
.banner .swiper-pagination {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 2.08vw;
z-index: 3;
}
.banner .swiper-pagination span {
width: 14px;
height: 14px;
border-radius: 100%;
display: block;
float: left;
margin: 0 8px;
cursor: pointer;
background-color: rgba(255, 255, 255, .7);
overflow: hidden;
}
.banner .swiper-pagination span.swiper-pagination-bullet-active {
background-color: #fff;
}
.banner .swiper-button {
width: 44px;
height: 44px;
border-radius: 100%;
position: absolute;
top: 50%;
margin-top: -23px;
z-index: 3;
border: 1px solid #fff;
background-position: center;
background-repeat: no-repeat;
}
.banner .swiper-button-prev {
background-image: url(../images/prev01.png);
left: 3%;
}
.banner .swiper-button-next {
background-image: url(../images/next01.png);
right: 3%;
}
.banner .swiper-button:hover {
background-color: #ffc700;
border: 1px solid #ffc700;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.banner {
width: 100%;
height: 54.6875vw;
max-height: calc(100% - 80px);
position: relative;
z-index: 1;
}
.banner .swiper-container {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
.banner .swiper-wrapper {
width: 100%;
height: 100%;
}
.banner .swiper-slide {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
.banner .swiper-slide a {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
display: block;
overflow: hidden;
}
.banner .swiper-slide a img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.banner .swiper-slide a img.mobile {
display: none;
}
.banner .swiper-pagination {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 2.08vw;
z-index: 3;
}
.banner .swiper-pagination span {
width: 12px;
height: 12px;
border-radius: 100%;
display: block;
float: left;
margin: 0 6px;
cursor: pointer;
background-color: rgba(255, 255, 255, .7);
overflow: hidden;
}
.banner .swiper-pagination span.swiper-pagination-bullet-active {
background-color: #fff;
}
.banner .swiper-button {
width: 40px;
height: 40px;
border-radius: 100%;
position: absolute;
top: 50%;
margin-top: -21px;
z-index: 3;
border: 1px solid #fff;
background-position: center;
background-repeat: no-repeat;
background-size: auto 8px;
}
.banner .swiper-button-prev {
background-image: url(../images/prev01.png);
left: 3%;
}
.banner .swiper-button-next {
background-image: url(../images/next01.png);
right: 3%;
}
.banner .swiper-button:hover {
background-color: #ffc700;
border: 1px solid #ffc700;
}
}
@media only screen and (max-width:1023px) {
.banner {
width: 100%;
position: relative;
z-index: 1;
}
.banner .swiper-container {
width: 100%;
position: relative;
z-index: 1;
}
.banner .swiper-wrapper {
width: 100%;
}
.banner .swiper-slide {
width: 100%;
position: relative;
z-index: 1;
}
.banner .swiper-slide a {
width: 100%;
position: relative;
z-index: 1;
display: block;
overflow: hidden;
}
.banner .swiper-slide a img {
width: 100%;
display: block;
}
.banner .swiper-slide a img.pc {
display: none;
}
.banner .swiper-pagination {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 15px;
z-index: 3;
}
.banner .swiper-pagination span {
width: 10px;
height: 10px;
border-radius: 100%;
display: block;
float: left;
margin: 0 4px;
cursor: pointer;
background-color: rgba(255, 255, 255, .7);
overflow: hidden;
}
.banner .swiper-pagination span.swiper-pagination-bullet-active {
background-color: #fff;
}
.banner .swiper-button {
width: 40px;
height: 40px;
border-radius: 100%;
position: absolute;
top: 50%;
margin-top: -19px;
z-index: 3;
border: 1px solid #fff;
background-position: center;
background-repeat: no-repeat;
background-size: auto 6px;
}
.banner .swiper-button-prev {
background-image: url(../images/prev01.png);
left: 3%;
}
.banner .swiper-button-next {
background-image: url(../images/next01.png);
right: 3%;
}
.banner .swiper-button:hover {
background-color: #ffc700;
border: 1px solid #ffc700;
}
}
/*產品中心*/
@media screen and (min-width:1600px) {
.title {
width: 100%;
position: relative;
z-index: 3;
display: flex;
}
.title .left {
flex: 1;
margin-top: -5px;
}
.title .left .t01 {
font-size: 36px;
line-height: 46px;
font-weight: bold;
}
.title .left .t02 {
font-size: 16px;
line-height: 26px;
color: #666;
margin-top: 0.26vw;
}
.title .left .t03 {
margin-top: 0.677vw;
}
.title .left .t03 b {
display: block;
width: 60px;
height: 6px;
border-radius: 6px;
float: left;
overflow: hidden;
background-color: #ffc700;
}
.title .left .t03 a {
display: block;
width: 10px;
height: 6px;
border-radius: 6px;
float: left;
overflow: hidden;
background-color: #333;
margin-left: 10px;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.title {
width: 100%;
position: relative;
z-index: 3;
display: flex;
}
.title .left {
flex: 1;
margin-top: -5px;
}
.title .left .t01 {
font-size: 30px;
line-height: 40px;
font-weight: bold;
}
.title .left .t02 {
font-size: 15px;
line-height: 25px;
color: #666;
margin-top: 0.26vw;
}
.title .left .t03 {
margin-top: 0.677vw;
}
.title .left .t03 b {
display: block;
width: 50px;
height: 5px;
border-radius: 6px;
float: left;
overflow: hidden;
background-color: #ffc700;
}
.title .left .t03 a {
display: block;
width: 8px;
height: 5px;
border-radius: 6px;
float: left;
overflow: hidden;
background-color: #333;
margin-left: 8px;
}
}
@media only screen and (max-width:1023px) {
.title {
width: 100%;
position: relative;
z-index: 3;
}
.title .left {
width: 100%;
margin-top: -5px;
}
.title .left .t01 {
font-size: 24px;
line-height: 34px;
font-weight: bold;
}
.title .left .t02 {
font-size: 14px;
line-height: 24px;
color: #666;
margin-top: 2px;
}
.title .left .t03 {
margin-top: 5px;
}
.title .left .t03 b {
display: block;
width: 40px;
height: 4px;
border-radius: 6px;
float: left;
overflow: hidden;
background-color: #ffc700;
}
.title .left .t03 a {
display: block;
width: 6px;
height: 4px;
border-radius: 6px;
float: left;
overflow: hidden;
background-color: #333;
margin-left: 6px;
}
}
@media screen and (min-width:1600px) {
.pbox {
width: 84%;
padding: 5.2vw 8%;
padding-bottom: 3.12vw;
position: relative;
z-index: 1;
}
.pbox .title {
align-items: center;
}
.pbox .title .right {
width: 53.75%;
margin: -7px 5%;
margin-right: 0;
font-size: 16px;
line-height: 30px;
color: #666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.pbox .swi {
width: 100%;
position: relative;
z-index: 3;
margin-top: 2.08vw;
}
.pbox .swi .left {
float: left;
}
.pbox .swi .left .swiper-button {
width: 44px;
height: 44px;
border-radius: 100%;
float: left;
border: 1px solid #eee;
background-position: center;
background-repeat: no-repeat;
}
.pbox .swi .left .swiper-button-prev {
background-image: url(../images/prev.png);
}
.pbox .swi .left .swiper-button-next {
background-image: url(../images/next.png);
}
.pbox .swi .left .swiper-button:hover {
background-color: #ffc700;
border: 1px solid #ffc700;
}
.pbox .swi .left .swiper-button-prev:hover {
background-image: url(../images/prev01.png);
}
.pbox .swi .left .swiper-button-next:hover {
background-image: url(../images/next01.png);
}
.pbox .swi .left .swiper-pagination {
float: left;
padding: 0 2.08vw;
height: 46px;
font-size: 20px;
line-height: 50px;
}
.pbox .swi .left .swiper-pagination .swiper-pagination-current {
font-size: 30px;
font-weight: bold;
line-height: 46px;
color: #ffc700;
height: 46px;
}
.pbox .swi .right {
float: right;
}
.pbox .swi .right form {
float: left;
}
.pbox .swi .right .ss {
width: 23.96vw;
height: 46px;
border: 1px solid #eee;
border-radius: 46px;
float: left;
box-sizing: border-box;
display: flex;
}
.pbox .swi .right .ss .text {
padding-left: 19px;
flex: 1;
height: 44px;
line-height: 44px;
font-size: 16px;
overflow: hidden;
}
.pbox .swi .right .ss .sub {
width: 56px;
height: 44px;
display: block;
background-image: url(../images/ser.svg);
background-size: 18px 18px;
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
cursor: pointer;
overflow: hidden;
}
.pbox .swi .right .more {
display: block;
float: left;
margin-left: 1.5625vw;
}
.pbox .swi .right .more a {
min-width: 140px;
height: 46px;
line-height: 46px;
font-size: 16px;
padding: 0 1.04vw;
border-radius: 46px;
background-color: #ffc700;
color: #fff;
text-align: center;
display: block;
float: left;
}
.pbox .swi .right .more a:hover {
background-color: #2d3246;
}
.pbox .swiper-container {
width: 100%;
padding: 2.08vw 1.04vw;
margin-left: -1.04vw;
margin-right: 1.04vw;
}
.pbox .swiper-container .swiper-slide {
width: 23.125%;
position: relative;
padding-bottom: 20px;
}
.pbox .swiper-container .swiper-slide .nei {
background-color: #fff;
padding: 15px;
padding-bottom: 30px;
box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}
.pbox .swiper-container .swiper-slide .nei .w01 {
width: 100%;
position: relative;
background-color: #f5f5f5;
}
.pbox .swiper-container .swiper-slide .nei .w01:after {
content: '';
display: block;
padding-top: 100%;
}
.pbox .swiper-container .swiper-slide .nei .w01 a {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
.pbox .swiper-container .swiper-slide .nei .w01 a img {
max-width: 100%;
max-height: 100%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.pbox .swiper-container .swiper-slide .nei .w02 {
padding: 0 5px;
margin-top: 15px;
font-weight: bold;
}
.pbox .swiper-container .swiper-slide .nei .w02 a {
display: block;
font-size: 20px;
line-height: 30px;
height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pbox .swiper-container .swiper-slide:hover .nei .w02 a {
color: #ffc700;
}
.pbox .swiper-container .swiper-slide .nei .w03 {
padding: 0 5px;
display: block;
font-size: 16px;
line-height: 26px;
height: 26px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #666;
}
.pbox .swiper-container .swiper-slide .duo {
width: 40px;
position: absolute;
right: 20px;
bottom: 0;
background-color: #ffc700;
border-radius: 40px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.pbox .swiper-container .swiper-slide .duo b {
display: block;
width: 34px;
height: 34px;
border-radius: 100%;
overflow: hidden;
background-color: #fff;
float: right;
position: relative;
z-index: 3;
border: 3px solid #ffc700;
}
.pbox .swiper-container .swiper-slide .duo b img {
display: block;
height: 12px;
margin: 11px auto;
}
.pbox .swiper-container .swiper-slide .duo a {
display: block;
width: 112px;
text-align: center;
font-size: 14px;
height: 40px;
line-height: 40px;
color: #fff;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.pbox .swiper-container .swiper-slide .duo:hover {
width: 150px;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.pbox {
width: 90%;
padding: 5.2vw 5%;
padding-bottom: 3.12vw;
position: relative;
z-index: 1;
}
.pbox .title {
align-items: center;
}
.pbox .title .right {
width: 53.75%;
margin: -6px 5%;
margin-right: 0;
font-size: 15px;
line-height: 27px;
color: #666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.pbox .swi {
width: 100%;
position: relative;
z-index: 3;
margin-top: 2.08vw;
}
.pbox .swi .left {
float: left;
}
.pbox .swi .left .swiper-button {
width: 40px;
height: 40px;
border-radius: 100%;
float: left;
border: 1px solid #eee;
background-position: center;
background-repeat: no-repeat;
background-size: auto 8px;
}
.pbox .swi .left .swiper-button-prev {
background-image: url(../images/prev.png);
}
.pbox .swi .left .swiper-button-next {
background-image: url(../images/next.png);
}
.pbox .swi .left .swiper-button:hover {
background-color: #ffc700;
border: 1px solid #ffc700;
}
.pbox .swi .left .swiper-button-prev:hover {
background-image: url(../images/prev01.png);
}
.pbox .swi .left .swiper-button-next:hover {
background-image: url(../images/next01.png);
}
.pbox .swi .left .swiper-pagination {
float: left;
padding: 0 2.08vw;
height: 42px;
font-size: 18px;
line-height: 44px;
}
.pbox .swi .left .swiper-pagination .swiper-pagination-current {
font-size: 26px;
font-weight: bold;
line-height: 42px;
color: #ffc700;
height: 42px;
}
.pbox .swi .right {
float: right;
}
.pbox .swi .right form {
float: left;
}
.pbox .swi .right .ss {
width: 23.96vw;
height: 42px;
border: 1px solid #eee;
border-radius: 46px;
float: left;
box-sizing: border-box;
display: flex;
}
.pbox .swi .right .ss .text {
padding-left: 17px;
flex: 1;
height: 40px;
line-height: 40px;
font-size: 15px;
overflow: hidden;
}
.pbox .swi .right .ss .sub {
width: 50px;
height: 40px;
display: block;
background-image: url(../images/ser.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
cursor: pointer;
overflow: hidden;
}
.pbox .swi .right .more {
display: block;
float: left;
margin-left: 1.5625vw;
}
.pbox .swi .right .more a {
min-width: 130px;
height: 42px;
line-height: 42px;
font-size: 15px;
padding: 0 1.04vw;
border-radius: 46px;
background-color: #ffc700;
color: #fff;
text-align: center;
display: block;
float: left;
}
.pbox .swi .right .more a:hover {
background-color: #2d3246;
}
.pbox .swiper-container {
width: 100%;
padding: 2.08vw 1.04vw;
margin-left: -1.04vw;
margin-right: 1.04vw;
}
.pbox .swiper-container .swiper-slide {
width: 23.125%;
position: relative;
padding-bottom: 20px;
}
.pbox .swiper-container .swiper-slide .nei {
background-color: #fff;
padding: 10px;
padding-bottom: 25px;
box-shadow: 0 0 15px rgba(0, 0, 0, .1);
}
.pbox .swiper-container .swiper-slide .nei .w01 {
width: 100%;
position: relative;
background-color: #f5f5f5;
}
.pbox .swiper-container .swiper-slide .nei .w01:after {
content: '';
display: block;
padding-top: 100%;
}
.pbox .swiper-container .swiper-slide .nei .w01 a {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
.pbox .swiper-container .swiper-slide .nei .w01 a img {
max-width: 100%;
max-height: 100%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.pbox .swiper-container .swiper-slide .nei .w02 {
padding: 0 5px;
margin-top: 10px;
font-weight: bold;
}
.pbox .swiper-container .swiper-slide .nei .w02 a {
display: block;
font-size: 18px;
line-height: 28px;
height: 28px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pbox .swiper-container .swiper-slide:hover .nei .w02 a {
color: #ffc700;
}
.pbox .swiper-container .swiper-slide .nei .w03 {
padding: 0 5px;
display: block;
font-size: 15px;
line-height: 25px;
height: 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #666;
}
.pbox .swiper-container .swiper-slide .duo {
width: 38px;
position: absolute;
right: 15px;
bottom: 0;
background-color: #ffc700;
border-radius: 40px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.pbox .swiper-container .swiper-slide .duo b {
display: block;
width: 34px;
height: 34px;
border-radius: 100%;
overflow: hidden;
background-color: #fff;
float: right;
position: relative;
z-index: 3;
border: 2px solid #ffc700;
}
.pbox .swiper-container .swiper-slide .duo b img {
display: block;
height: 12px;
margin: 11px auto;
}
.pbox .swiper-container .swiper-slide .duo a {
display: block;
width: 104px;
text-align: center;
font-size: 14px;
height: 38px;
line-height: 38px;
color: #fff;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.pbox .swiper-container .swiper-slide .duo:hover {
width: 140px;
}
}
@media only screen and (max-width:1023px) {
.pbox {
width: 94%;
padding: 40px 3%;
padding-bottom: 20px;
position: relative;
z-index: 1;
}
.pbox .title {
flex-wrap: wrap;
}
.pbox .title .right {
width: 100%;
font-size: 14px;
line-height: 24px;
margin-top: 10px;
color: #666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.pbox .swi {
width: 100%;
position: relative;
z-index: 3;
margin-top: 2.08vw;
}
.pbox .swi .left {
float: left;
margin-top: 15px;
}
.pbox .swi .left .swiper-button {
width: 36px;
height: 36px;
border-radius: 100%;
float: left;
border: 1px solid #eee;
background-position: center;
background-repeat: no-repeat;
background-size: auto 6px;
}
.pbox .swi .left .swiper-button-prev {
background-image: url(../images/prev.png);
}
.pbox .swi .left .swiper-button-next {
background-image: url(../images/next.png);
}
.pbox .swi .left .swiper-button:hover {
background-color: #ffc700;
border: 1px solid #ffc700;
}
.pbox .swi .left .swiper-button-prev:hover {
background-image: url(../images/prev01.png);
}
.pbox .swi .left .swiper-button-next:hover {
background-image: url(../images/next01.png);
}
.pbox .swi .left .swiper-pagination {
float: left;
padding: 0 10px;
height: 38px;
font-size: 16px;
line-height: 38px;
}
.pbox .swi .left .swiper-pagination .swiper-pagination-current {
font-size: 22px;
font-weight: bold;
line-height: 42px;
color: #ffc700;
height: 38px;
}
.pbox .swi .right {
display: flex;
}
.pbox .swi .right form {
flex: 1;
}
.pbox .swi .right .ss {
width: 100%;
height: 38px;
border: 1px solid #eee;
border-radius: 46px;
float: left;
box-sizing: border-box;
display: flex;
}
.pbox .swi .right .ss .text {
padding-left: 14px;
flex: 1;
height: 36px;
line-height: 36px;
font-size: 14px;
overflow: hidden;
}
.pbox .swi .right .ss .sub {
width: 42px;
height: 36px;
display: block;
background-image: url(../images/ser.svg);
background-size: 14px 14px;
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
cursor: pointer;
overflow: hidden;
}
.pbox .swi .right .more {
display: block;
float: left;
margin-left: 10px;
}
.pbox .swi .right .more a {
height: 38px;
line-height: 38px;
font-size: 14px;
padding: 0 15px;
border-radius: 46px;
background-color: #ffc700;
color: #fff;
text-align: center;
display: block;
float: left;
}
.pbox .swi .right .more a:hover {
background-color: #2d3246;
}
.pbox .swiper-container {
width: 100%;
padding: 20px 10px;
margin-left: -10px;
margin-right: -10px;
}
.pbox .swiper-container .swiper-slide {
width: 48.75%;
position: relative;
padding-bottom: 15px;
}
.pbox .swiper-container .swiper-slide .nei {
background-color: #fff;
padding: 5px;
padding-bottom: 25px;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}
.pbox .swiper-container .swiper-slide .nei .w01 {
width: 100%;
position: relative;
background-color: #f5f5f5;
}
.pbox .swiper-container .swiper-slide .nei .w01:after {
content: '';
display: block;
padding-top: 100%;
}
.pbox .swiper-container .swiper-slide .nei .w01 a {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
.pbox .swiper-container .swiper-slide .nei .w01 a img {
max-width: 100%;
max-height: 100%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.pbox .swiper-container .swiper-slide .nei .w02 {
padding: 0 5px;
margin-top: 5px;
font-weight: bold;
}
.pbox .swiper-container .swiper-slide .nei .w02 a {
display: block;
font-size: 16px;
line-height: 26px;
height: 26px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pbox .swiper-container .swiper-slide:hover .nei .w02 a {
color: #ffc700;
}
.pbox .swiper-container .swiper-slide .nei .w03 {
padding: 0 5px;
display: block;
font-size: 14px;
line-height: 24px;
height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #666;
}
.pbox .swiper-container .swiper-slide .duo {
width: 34px;
position: absolute;
right: 10px;
bottom: 0;
background-color: #ffc700;
border-radius: 40px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.pbox .swiper-container .swiper-slide .duo b {
display: block;
width: 30px;
height: 30px;
border-radius: 100%;
overflow: hidden;
background-color: #fff;
float: right;
position: relative;
z-index: 3;
border: 2px solid #ffc700;
}
.pbox .swiper-container .swiper-slide .duo b img {
display: block;
height: 12px;
margin: 9px auto;
}
.pbox .swiper-container .swiper-slide .duo a {
display: block;
width: 98px;
text-align: center;
font-size: 14px;
height: 34px;
line-height: 34px;
color: #fff;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.pbox .swiper-container .swiper-slide .duo:hover {
width: 130px;
}
}
/*代理品牌*/
@media screen and (min-width:1600px) {
.dbox {
width: 84%;
padding: 5.2vw 8%;
position: relative;
z-index: 1;
background-color: #f5f5f5;
}
.dbox .title {
align-items: flex-start;
}
.dbox .title .right {
width: 53.75%;
margin: -7px 5%;
margin-right: 0;
font-size: 16px;
line-height: 30px;
color: #666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.dbox .swiper-container {
width: 100%;
margin: 2.08vw 0;
}
.dbox .swiper-container .swiper-slide {
width: 48.125%;
position: relative;
min-height: 20.83vw;
padding: 2.08vw 2.6vw;
box-sizing: border-box;
border-radius: 30px;
background-color: #fff;
display: flex;
align-items: center;
}
.dbox .swiper-container .swiper-slide .wen {
flex: 1;
margin-right: 2.6vw;
}
.dbox .swiper-container .swiper-slide .wen .w01 {
font-size: 26px;
line-height: 36px;
font-weight: bold;
}
.dbox .swiper-container .swiper-slide .wen .w01 a:hover {
color: #ffc700;
}
.dbox .swiper-container .swiper-slide .wen .w02 {
width: 60px;
height: 2px;
background-color: #333;
margin-top: 0.78125vw;
}
.dbox .swiper-container .swiper-slide .wen .w03 {
font-size: 16px;
line-height: 30px;
max-height: 90px;
color: #666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
margin-top: 1.2vw;
}
.dbox .swiper-container .swiper-slide .wen .w04 {
padding-bottom: 5px;
margin-top: 1.2vw;
}
.dbox .swiper-container .swiper-slide .wen .w04 a {
display: block;
font-size: 16px;
line-height: 24px;
height: 24px;
font-weight: bold;
color: #ffc700;
float: left;
overflow: hidden;
}
.dbox .swiper-container .swiper-slide .wen .w04 a b {
display: block;
width: 24px;
height: 24px;
border-radius: 100%;
overflow: hidden;
background-color: #ffc700;
float: right;
margin-left: 1.04vw;
}
.dbox .swiper-container .swiper-slide .wen .w04 a b img {
display: block;
height: 10px;
margin: 7px auto;
}
.dbox .swiper-container .swiper-slide .wen .w04 a:hover {
color: #2d3246;
}
.dbox .swiper-container .swiper-slide .wen .w04 a:hover b {
background-color: #2d3246;
}
.dbox .swiper-container .swiper-slide .tu {
width: 37.31%;
}
.dbox .swiper-container .swiper-slide .tu img {
max-width: 100%;
display: block;
margin: auto;
}
.dbox .swi {
display: flex;
align-items: center;
}
.dbox .swi .swiper-pagination {
flex: 1;
height: 2px;
background-color: #eee;
position: relative;
}
.dbox .swi .swiper-pagination .swiper-pagination-progressbar-fill {
background-color: #ffc700;
}
.dbox .swi .swiper-button {
width: 46px;
height: 46px;
border-radius: 100%;
background-color: #fff;
background-position: center;
background-repeat: no-repeat;
background-size: auto 10px;
}
.dbox .swi .swiper-button-prev {
background-image: url(../images/prev.png);
margin-left: 3.6458vw;
}
.dbox .swi .swiper-button-next {
background-image: url(../images/next.png);
margin-left: 1.5625vw;
}
.dbox .swi .swiper-button:hover {
background-color: #ffc700;
}
.dbox .swi .swiper-button-prev:hover {
background-image: url(../images/prev01.png);
}
.dbox .swi .swiper-button-next:hover {
background-image: url(../images/next01.png);
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.dbox {
width: 90%;
padding: 5.2vw 5%;
position: relative;
z-index: 1;
background-color: #f5f5f5;
}
.dbox .title {
align-items: flex-start;
}
.dbox .title .right {
width: 53.75%;
margin: -6px 5%;
margin-right: 0;
font-size: 15px;
line-height: 27px;
color: #666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.dbox .swiper-container {
width: 100%;
margin: 2.08vw 0;
}
.dbox .swiper-container .swiper-slide {
width: 48.125%;
position: relative;
min-height: 20.83vw;
padding: 2.08vw 2.6vw;
box-sizing: border-box;
border-radius: 20px;
background-color: #fff;
display: flex;
align-items: center;
}
.dbox .swiper-container .swiper-slide .wen {
flex: 1;
margin-right: 2.6vw;
}
.dbox .swiper-container .swiper-slide .wen .w01 {
font-size: 22px;
line-height: 32px;
font-weight: bold;
}
.dbox .swiper-container .swiper-slide .wen .w01 a:hover {
color: #ffc700;
}
.dbox .swiper-container .swiper-slide .wen .w02 {
width: 50px;
height: 2px;
background-color: #333;
margin-top: 0.78125vw;
}
.dbox .swiper-container .swiper-slide .wen .w03 {
font-size: 15px;
line-height: 27px;
max-height: 81px;
color: #666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
margin-top: 1.2vw;
}
.dbox .swiper-container .swiper-slide .wen .w04 {
padding-bottom: 5px;
margin-top: 1.2vw;
}
.dbox .swiper-container .swiper-slide .wen .w04 a {
display: block;
font-size: 15px;
line-height: 22px;
height: 22px;
font-weight: bold;
color: #ffc700;
float: left;
overflow: hidden;
}
.dbox .swiper-container .swiper-slide .wen .w04 a b {
display: block;
width: 22px;
height: 22px;
border-radius: 100%;
overflow: hidden;
background-color: #ffc700;
float: right;
margin-left: 1.04vw;
}
.dbox .swiper-container .swiper-slide .wen .w04 a b img {
display: block;
height: 8px;
margin: 7px auto;
}
.dbox .swiper-container .swiper-slide .wen .w04 a:hover {
color: #2d3246;
}
.dbox .swiper-container .swiper-slide .wen .w04 a:hover b {
background-color: #2d3246;
}
.dbox .swiper-container .swiper-slide .tu {
width: 37.31%;
}
.dbox .swiper-container .swiper-slide .tu img {
max-width: 100%;
display: block;
margin: auto;
}
.dbox .swi {
display: flex;
align-items: center;
}
.dbox .swi .swiper-pagination {
flex: 1;
height: 2px;
background-color: #eee;
position: relative;
}
.dbox .swi .swiper-pagination .swiper-pagination-progressbar-fill {
background-color: #ffc700;
}
.dbox .swi .swiper-button {
width: 42px;
height: 42px;
border-radius: 100%;
background-color: #fff;
background-position: center;
background-repeat: no-repeat;
background-size: auto 8px;
}
.dbox .swi .swiper-button-prev {
background-image: url(../images/prev.png);
margin-left: 3.6458vw;
}
.dbox .swi .swiper-button-next {
background-image: url(../images/next.png);
margin-left: 1.5625vw;
}
.dbox .swi .swiper-button:hover {
background-color: #ffc700;
}
.dbox .swi .swiper-button-prev:hover {
background-image: url(../images/prev01.png);
}
.dbox .swi .swiper-button-next:hover {
background-image: url(../images/next01.png);
}
}
@media only screen and (max-width:1023px) {
.dbox {
width: 94%;
padding: 40px 3%;
position: relative;
z-index: 1;
background-color: #f5f5f5;
}
.dbox .title {
flex-wrap: wrap;
}
.dbox .title .right {
width: 100%;
font-size: 14px;
line-height: 24px;
margin-top: 10px;
color: #666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.dbox .swiper-container {
width: 100%;
margin-top: 15px;
margin-bottom: 20px;
}
.dbox .swiper-container .swiper-slide {
width: 100%;
position: relative;
padding: 20px 15px;
box-sizing: border-box;
border-radius: 10px;
background-color: #fff;
display: flex;
align-items: center;
}
.dbox .swiper-container .swiper-slide .wen {
flex: 1;
margin-right: 15px;
}
.dbox .swiper-container .swiper-slide .wen .w01 {
font-size: 18px;
line-height: 28px;
font-weight: bold;
}
.dbox .swiper-container .swiper-slide .wen .w01 a:hover {
color: #ffc700;
}
.dbox .swiper-container .swiper-slide .wen .w02 {
width: 40px;
height: 2px;
background-color: #333;
margin-top: 5px;
}
.dbox .swiper-container .swiper-slide .wen .w03 {
font-size: 14px;
line-height: 24px;
max-height: 96px;
color: #666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
margin-top: 10px;
}
.dbox .swiper-container .swiper-slide .wen .w04 {
padding-bottom: 5px;
margin-top: 10px;
}
.dbox .swiper-container .swiper-slide .wen .w04 a {
display: block;
font-size: 14px;
line-height: 20px;
height: 20px;
font-weight: bold;
color: #ffc700;
float: left;
overflow: hidden;
}
.dbox .swiper-container .swiper-slide .wen .w04 a b {
display: block;
width: 20px;
height: 20px;
border-radius: 100%;
overflow: hidden;
background-color: #ffc700;
float: right;
margin-left: 10px;
}
.dbox .swiper-container .swiper-slide .wen .w04 a b img {
display: block;
height: 6px;
margin: 7px auto;
}
.dbox .swiper-container .swiper-slide .wen .w04 a:hover {
color: #2d3246;
}
.dbox .swiper-container .swiper-slide .wen .w04 a:hover b {
background-color: #2d3246;
}
.dbox .swiper-container .swiper-slide .tu {
width: 37.31%;
}
.dbox .swiper-container .swiper-slide .tu img {
max-width: 100%;
display: block;
margin: auto;
}
.dbox .swi {
display: flex;
align-items: center;
}
.dbox .swi .swiper-pagination {
flex: 1;
height: 2px;
background-color: #eee;
position: relative;
}
.dbox .swi .swiper-pagination .swiper-pagination-progressbar-fill {
background-color: #ffc700;
}
.dbox .swi .swiper-button {
width: 36px;
height: 36px;
border-radius: 100%;
background-color: #fff;
background-position: center;
background-repeat: no-repeat;
background-size: auto 6px;
}
.dbox .swi .swiper-button-prev {
background-image: url(../images/prev.png);
margin-left: 15px;
}
.dbox .swi .swiper-button-next {
background-image: url(../images/next.png);
margin-left: 10px;
}
.dbox .swi .swiper-button:hover {
background-color: #ffc700;
}
.dbox .swi .swiper-button-prev:hover {
background-image: url(../images/prev01.png);
}
.dbox .swi .swiper-button-next:hover {
background-image: url(../images/next01.png);
}
}
/*新聞中心*/
@media screen and (min-width:1600px) {
.nbox {
width: 84%;
padding: 5.2vw 8%;
padding-top: 0;
position: relative;
z-index: 1;
background-color: #fff;
}
.nbox .title {
align-items: flex-start;
}
.nbox .title .more {
margin-top: -20px;
margin-left: calc(5% - 1.04vw);
}
.nbox .title .more a {
display: block;
margin-left: 1.04vw;
margin-top: 20px;
min-width: 140px;
padding: 0 1.04vw;
height: 46px;
line-height: 46px;
font-size: 16px;
border-radius: 46px;
overflow: hidden;
text-align: center;
float: left;
cursor: pointer;
background-color: #ffc700;
color: #fff;
}
.nbox .title .more a:hover {
background-color: #2d3246;
}
.nbox .list {
width: 100%;
display: block;
}
.nbox .list li {
display: flex;
align-items: center;
border-bottom: 1px solid #ddd;
}
.nbox .list li .left {
padding: 1.82vw 2.6vw;
text-align: center;
}
.nbox .list li .left span {
display: block;
font-size: 16px;
height: 24px;
line-height: 24px;
color: #666;
}
.nbox .list li .left p {
display: block;
font-size: 40px;
height: 42px;
line-height: 42px;
color: #333;
}
.nbox .list li .line {
width: 1px;
height: 60px;
background-color: #ddd;
margin: 2.08vw 0;
}
.nbox .list li .right {
padding: 1.82vw 2.6vw;
padding-top: 0;
flex: 1;
overflow: hidden;
}
.nbox .list li .right span {
width: calc(100% + 41px);
display: flex;
justify-content: flex-start;
align-items: flex-start;
height: 30px;
position: relative;
padding-top: 1.82vw;
overflow: hidden;
}
.nbox .list li .right span a {
font-size: 20px;
line-height: 30px;
height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.nbox .list li .right span a:hover {
color: #ffc700;
}
.nbox .list li .right span img {
position: relative;
margin-top: -0.78125vw;
width: 31px;
margin-left: 10px;
display: block;
}
.nbox .list li .right p {
width: 100%;
display: block;
font-size: 16px;
line-height: 26px;
height: 26px;
color: #666;
margin-top: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.nbox {
width: 90%;
padding: 5.2vw 5%;
padding-top: 0;
position: relative;
z-index: 1;
background-color: #fff;
}
.nbox .title {
align-items: flex-start;
}
.nbox .title .more {
margin-top: -15px;
margin-left: calc(5% - 1.04vw);
}
.nbox .title .more a {
display: block;
margin-left: 1.04vw;
margin-top: 15px;
min-width: 130px;
padding: 0 1.04vw;
height: 42px;
line-height: 42px;
font-size: 15px;
border-radius: 46px;
overflow: hidden;
text-align: center;
float: left;
cursor: pointer;
background-color: #ffc700;
color: #fff;
}
.nbox .title .more a:hover {
background-color: #2d3246;
}
.nbox .list {
width: 100%;
display: block;
}
.nbox .list li {
display: flex;
align-items: center;
border-bottom: 1px solid #ddd;
}
.nbox .list li .left {
padding: 1.82vw 2.6vw;
text-align: center;
}
.nbox .list li .left span {
display: block;
font-size: 14px;
height: 22px;
line-height: 22px;
color: #666;
}
.nbox .list li .left p {
display: block;
font-size: 36px;
height: 38px;
line-height: 38px;
color: #333;
}
.nbox .list li .line {
width: 1px;
height: 60px;
background-color: #ddd;
margin: 2.08vw 0;
}
.nbox .list li .right {
padding: 1.82vw 2.6vw;
padding-top: 0;
flex: 1;
overflow: hidden;
}
.nbox .list li .right span {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
height: 28px;
position: relative;
padding-top: 1.82vw;
overflow: hidden;
}
.nbox .list li .right span a {
font-size: 18px;
line-height: 28px;
height: 28px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.nbox .list li .right span a:hover {
color: #ffc700;
}
.nbox .list li .right span img {
position: relative;
margin-top: -0.78125vw;
width: 31px;
margin-left: 5px;
display: block;
}
.nbox .list li .right p {
width: 100%;
display: block;
font-size: 16px;
line-height: 26px;
height: 26px;
color: #666;
margin-top: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media only screen and (max-width:1023px) {
.nbox {
width: 94%;
padding: 40px 3%;
padding-top: 0;
position: relative;
z-index: 1;
background-color: #fff;
}
.nbox .title {
flex-wrap: wrap;
}
.nbox .title .more {
padding-top: 5px;
margin-left: -10px;
}
.nbox .title .more a {
display: block;
margin-left: 10px;
margin-top: 10px;
padding: 0 15px;
height: 38px;
line-height: 38px;
font-size: 14px;
border-radius: 46px;
overflow: hidden;
text-align: center;
float: left;
cursor: pointer;
background-color: #ffc700;
color: #fff;
}
.nbox .title .more a:hover {
background-color: #2d3246;
}
.nbox .list {
width: 100%;
display: block;
}
.nbox .list li {
display: flex;
align-items: center;
border-bottom: 1px solid #ddd;
}
.nbox .list li .left {
padding: 15px 0;
text-align: center;
}
.nbox .list li .left span {
display: block;
font-size: 12px;
height: 20px;
line-height: 20px;
color: #666;
}
.nbox .list li .left p {
display: block;
font-size: 30px;
height: 32px;
line-height: 32px;
color: #333;
}
.nbox .list li .line {
width: 1px;
height: 54px;
background-color: #ddd;
margin: 20px 10px;
}
.nbox .list li .right {
padding-bottom: 15px;
flex: 1;
overflow: hidden;
}
.nbox .list li .right span {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
height: 26px;
position: relative;
padding-top: 15px;
overflow: hidden;
}
.nbox .list li .right span a {
font-size: 16px;
line-height: 26px;
height: 26px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.nbox .list li .right span a:hover {
color: #ffc700;
}
.nbox .list li .right span img {
position: relative;
margin-top: -5px;
width: 31px;
margin-left: 5px;
display: block;
}
.nbox .list li .right p {
width: 100%;
display: block;
font-size: 14px;
line-height: 24px;
height: 24px;
color: #666;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 36px;
box-sizing: border-box;
}
}
/*專欄分享*/
@media screen and (min-width:1600px) {
.zbox {
width: 100%;
position: relative;
z-index: 1;
background-color: #f5f5f5;
display: flex;
}
.zbox .zc {
width: 46.875%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.zbox .yc {
width: 53.125%;
padding: 5.2vw 8%;
padding-left: 5.2%;
box-sizing: border-box;
}
.zbox .yc .wen {
font-size: 16px;
line-height: 30px;
margin-top: 1.71875vw;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.zbox .yc .list {
margin-top: 1.71875vw;
margin-left: -3.6458vw;
margin-bottom: -5px;
}
.zbox .yc .list a {
display: block;
float: left;
text-align: center;
margin-left: 3.6458vw;
}
.zbox .yc .list a strong {
display: block;
height: 50px;
}
.zbox .yc .list a strong img {
display: block;
height: 50px;
margin: auto;
-webkit-transition: -webkit-transform 1s, height 1s, width 1s;
}
.zbox .yc .list a:hover strong img {
-webkit-transform: rotateY(-360deg);
}
.zbox .yc .list a p {
display: block;
font-size: 18px;
line-height: 28px;
margin-top: .52vw;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.zbox {
width: 100%;
position: relative;
z-index: 1;
background-color: #f5f5f5;
display: flex;
}
.zbox .zc {
width: 46.875%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.zbox .yc {
width: 53.125%;
padding: 5.2vw 5%;
box-sizing: border-box;
}
.zbox .yc .wen {
font-size: 15px;
line-height: 27px;
margin-top: 1.71875vw;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.zbox .yc .list {
margin-top: 1.71875vw;
margin-left: -3.6458vw;
margin-bottom: -5px;
}
.zbox .yc .list a {
display: block;
float: left;
text-align: center;
margin-left: 3.6458vw;
}
.zbox .yc .list a strong {
display: block;
height: 50px;
}
.zbox .yc .list a strong img {
display: block;
height: 50px;
margin: auto;
-webkit-transition: -webkit-transform 1s, height 1s, width 1s;
}
.zbox .yc .list a:hover strong img {
-webkit-transform: rotateY(-360deg);
}
.zbox .yc .list a p {
display: block;
font-size: 16px;
line-height: 26px;
margin-top: .52vw;
}
}
@media only screen and (max-width:1023px) {
.zbox {
width: 100%;
position: relative;
z-index: 1;
background-color: #f5f5f5;
}
.zbox .zc {
width: 100%;
height: 58.88vw;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.zbox .yc {
width: 94%;
padding: 40px 3%;
padding-bottom: 35px;
}
.zbox .yc .wen {
font-size: 14px;
line-height: 24px;
margin-top: 15px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.zbox .yc .list {
margin-left: -15px;
}
.zbox .yc .list a {
display: block;
float: left;
text-align: center;
margin-left: 15px;
margin-top: 15px;
}
.zbox .yc .list a strong {
display: block;
height: 50px;
}
.zbox .yc .list a strong img {
display: block;
height: 50px;
margin: auto;
-webkit-transition: -webkit-transform 1s, height 1s, width 1s;
}
.zbox .yc .list a:hover strong img {
-webkit-transform: rotateY(-360deg);
}
.zbox .yc .list a p {
display: block;
font-size: 14px;
line-height: 24px;
margin-top: 5px;
}
}
/*資料下載*/
@media screen and (min-width:1600px) {
.xbox {
width: 84%;
padding: 5.2vw 8%;
position: relative;
z-index: 1;
background-color: #fff;
}
.xbox .title {
align-items: flex-start;
}
.xbox .title .more {
margin-top: -20px;
margin-left: calc(5% - 1.04vw);
}
.xbox .title .more a {
display: block;
margin-left: 1.04vw;
margin-top: 20px;
min-width: 140px;
padding: 0 1.04vw;
height: 46px;
line-height: 46px;
font-size: 16px;
border-radius: 46px;
overflow: hidden;
text-align: center;
float: left;
cursor: pointer;
background-color: #f5f5f5;
color: #333;
}
.xbox .title .more a.on {
background-color: #ffc700;
color: #fff;
}
.xbox .tab {
width: 100%;
}
.xbox .tab .list {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.xbox .tab .list li {
width: 31.25%;
display: block;
backgrou\nd-color: #f5f5f5;
margin-top: 2.08vw;
margin-left: 3.125%;
padding: 2.08vw;
box-sizing: border-box;
}
.xbox .tab .list li:nth-child(3n+1) {
margin-left: 0;
}
.xbox .tab .list li .left {
width: 26.19%;
float: left;
}
.xbox .tab .list li .left img {
width: 100%;
display: block;
}
.xbox .tab .list li .right {
width: calc(73.81% - 1.5625vw);
float: right;
margin-top: 0.36vw;
}
.xbox .tab .list li .right .w01 {
padding-left: 28px;
background-image: url(../images/down.png);
background-position: left 4px;
background-repeat: no-repeat;
font-size: 18px;
line-height: 28px;
}
.xbox .tab .list li:hover .right .w01 {
color: #ffc700;
}
.xbox .tab .list li .right .w02 {
font-size: 16px;
line-height: 26px;
color: #666;
margin: 0.52vw 0;
}
.xbox .tab .list li .right .w03 {
display: flex;
}
.xbox .tab .list li .right .w03 a {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
height: 40px;
line-height: 20px;
background-color: #fff;
overflow: hidden;
overflow: hidden;
margin-right: 1.04vw;
padding: 0 .52vw;
}
.xbox .tab .list li .right .w03 a:last-child {
margin-right: 0;
}
.xbox .tab .list li .right .w03 a img {
display: block;
margin-left: .52vw;
}
.xbox .tab .list li .right .w03 a img.img02 {
display: none;
}
.xbox .tab .list li .right .w03 a:hover {
background-color: #ffc700;
color: #fff;
}
.xbox .tab .list li .right .w03 a:hover img.img01 {
display: none;
}
.xbox .tab .list li .right .w03 a:hover img.img02 {
display: block;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.xbox {
width: 90%;
padding: 5.2vw 5%;
position: relative;
z-index: 1;
background-color: #fff;
}
.xbox .title {
align-items: flex-start;
}
.xbox .title .more {
margin-top: -15px;
margin-left: calc(5% - 1.04vw);
}
.xbox .title .more a {
display: block;
margin-left: 1.04vw;
margin-top: 15px;
min-width: 130px;
padding: 0 1.04vw;
height: 42px;
line-height: 42px;
font-size: 15px;
border-radius: 46px;
overflow: hidden;
text-align: center;
float: left;
cursor: pointer;
background-color: #f5f5f5;
color: #333;
}
.xbox .title .more a.on {
background-color: #ffc700;
color: #fff;
}
.xbox .tab {
width: 100%;
}
.xbox .tab .list {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.xbox .tab .list li {
width: 31.25%;
display: block;
backgrou\nd-color: #f5f5f5;
margin-top: 2.08vw;
margin-left: 3.125%;
padding: 2.08vw;
box-sizing: border-box;
}
.xbox .tab .list li:nth-child(3n+1) {
margin-left: 0;
}
.xbox .tab .list li .left {
width: 26.19%;
float: left;
}
.xbox .tab .list li .left img {
width: 100%;
display: block;
}
.xbox .tab .list li .right {
width: calc(73.81% - 1.5625vw);
float: right;
margin-top: 0.36vw;
}
.xbox .tab .list li .right .w01 {
padding-left: 26px;
background-image: url(../images/down.png);
background-position: left 5px;
background-repeat: no-repeat;
font-size: 17px;
line-height: 27px;
background-size: 17px auto;
}
.xbox .tab .list li:hover .right .w01 {
color: #ffc700;
}
.xbox .tab .list li .right .w02 {
font-size: 15px;
line-height: 25px;
color: #666;
margin: 0.52vw 0;
}
.xbox .tab .list li .right .w03 {
display: flex;
}
.xbox .tab .list li .right .w03 a {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
height: 38px;
line-height: 19px;
background-color: #fff;
overflow: hidden;
overflow: hidden;
margin-right: 1.04vw;
padding: 0 .52vw;
}
.xbox .tab .list li .right .w03 a:last-child {
margin-right: 0;
}
.xbox .tab .list li .right .w03 a img {
display: block;
margin-left: .52vw;
}
.xbox .tab .list li .right .w03 a img.img02 {
display: none;
}
.xbox .tab .list li .right .w03 a:hover {
background-color: #ffc700;
color: #fff;
}
.xbox .tab .list li .right .w03 a:hover img.img01 {
display: none;
}
.xbox .tab .list li .right .w03 a:hover img.img02 {
display: block;
}
}
@media only screen and (max-width:1023px) {
.xbox {
width: 94%;
padding: 40px 3%;
position: relative;
z-index: 1;
background-color: #fff;
}
.xbox .title {
flex-wrap: wrap;
}
.xbox .title .more {
padding-top: 5px;
margin-left: -10px;
}
.xbox .title .more a {
display: block;
margin-left: 10px;
margin-top: 10px;
padding: 0 15px;
height: 38px;
line-height: 38px;
font-size: 14px;
border-radius: 46px;
overflow: hidden;
text-align: center;
float: left;
cursor: pointer;
background-color: #f5f5f5;
color: #333;
}
.xbox .title .more a.on {
background-color: #ffc700;
color: #fff;
}
.xbox .tab {
width: 100%;
}
.xbox .tab .list {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.xbox .tab .list li {
width: 100%;
display: block;
backgrou\nd-color: #f5f5f5;
margin-top: 20px;
padding: 15px;
box-sizing: border-box;
}
.xbox .tab .list li .left {
width: 26.19%;
float: left;
}
.xbox .tab .list li .left img {
width: 100%;
display: block;
}
.xbox .tab .list li .right {
width: calc(73.81% - 15px);
float: right;
}
.xbox .tab .list li .right .w01 {
padding-left: 24px;
background-image: url(../images/down.png);
background-position: left 5px;
background-repeat: no-repeat;
font-size: 16px;
line-height: 26px;
background-size: 14px auto;
}
.xbox .tab .list li:hover .right .w01 {
color: #ffc700;
}
.xbox .tab .list li .right .w02 {
font-size: 14px;
line-height: 24px;
color: #666;
margin: 5px 0;
}
.xbox .tab .list li .right .w03 {
display: flex;
}
.xbox .tab .list li .right .w03 a {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
height: 36px;
line-height: 18px;
background-color: #fff;
overflow: hidden;
overflow: hidden;
margin-right: 10px;
padding: 0 5px;
}
.xbox .tab .list li .right .w03 a:last-child {
margin-right: 0;
}
.xbox .tab .list li .right .w03 a img {
display: block;
margin-left: 5px;
}
.xbox .tab .list li .right .w03 a img.img02 {
display: none;
}
.xbox .tab .list li .right .w03 a:hover {
background-color: #ffc700;
color: #fff;
}
.xbox .tab .list li .right .w03 a:hover img.img01 {
display: none;
}
.xbox .tab .list li .right .w03 a:hover img.img02 {
display: block;
}
}
/*footer*/
@media screen and (min-width:1600px) {
.footer {
width: 84%;
padding: 3.3854vw 8%;
position: relative;
z-index: 1;
background-color: #2d3246;
}
.footer .foot {
width: 100%;
margin-top: 5px;
display: flex;
}
.footer .foot .f01 {
width: 20%;
float: left;
}
.footer .foot .f01 > strong {
height: 50px;
display: block;
}
.footer .foot .f01 > strong img {
height: 50px;
display: block;
}
.footer .foot .f01 > strong img.img02, .footer .foot .f01 strong img.img03 {
display: none;
}
.footer .foot .f01 > div {
display: block;
font-size: 14px;
line-height: 30px;
margin-top: 0.8854vw;
color: #aaa;
}
.footer .foot .f02 {
flex:1;
float: left;
margin-left: 3%;
}
.footer .foot .f02 > span {
display: block;
height: 28px;
line-height: 28px;
color: #fff;
font-size: 18px;
}
.footer .foot .f02 > div {
display: block;
padding-top: 0.52vw;
overflow: hidden;
}
.footer .foot .f02 > div p {
display: block;
font-size: 14px;
line-height: 24px;
margin-top: 6px;
color: #aaa;
}
.footer .foot .f03 {
width: 15%;
float: left;
margin-left: 3%;
}
.footer .foot .f03 span {
display: block;
height: 28px;
line-height: 28px;
color: #fff;
font-size: 18px;
}
.footer .foot .f03 p {
display: block;
padding-top: 0.52vw;
}
.footer .foot .f03 p a {
width: 100%;
display: block;
font-size: 14px;
line-height: 24px;
margin-top: 6px;
color: #aaa;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.footer .foot .f03 p a:hover {
color: #ffc700;
}
.footer .foot .f04 {
width: 30%;
float: left;
margin-left: 3%;
}
.footer .foot .f04 span {
display: block;
height: 28px;
line-height: 28px;
color: #fff;
font-size: 18px;
}
.footer .foot .f04 p {
display: block;
padding-top: 0.52vw;
}
.footer .foot .f04 p a {
width: 48.5%;
display: block;
font-size: 14px;
line-height: 24px;
margin-top: 6px;
color: #aaa;
float: left;
margin-left: 3%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.footer .foot .f04 p a:nth-child(2n+1) {
clear: left;
float: left;
margin-left: 0;
}
.footer .foot .f04 p a:hover {
color: #ffc700;
}
.footer .bq {
margin-top: 2.1875vw;
}
.footer .bq .left {
float: left;
}
.footer .bq .left p {
display: block;
float: left;
font-size: 14px;
line-height: 20px;
height: 20px;
color: #aaa;
margin-right: 1.5625vw;
}
.footer .bq .left p a {
color: #aaa;
}
.footer .bq .right {
float: right;
}
.footer .bq .right a {
display: block;
height: 20px;
opacity: .7;
float: left;
margin-left: 1.04vw;
}
.footer .bq .right a img {
display: block;
height: 20px;
}
.footer .bq .right a:hover {
opacity: 1;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.footer {
width: 90%;
padding: 3.3854vw 5%;
position: relative;
z-index: 1;
background-color: #2d3246;
}
.footer .foot {
width: 100%;
margin-top: 5px;
display: flex;
}
.footer .foot .f01 {
width: 20%;
float: left;
}
.footer .foot .f01 > strong {
height: 46px;
display: block;
}
.footer .foot .f01 > strong img {
height: 46px;
display: block;
}
.footer .foot .f01 > strong img.img01, .footer .foot .f01 strong img.img03 {
display: none;
}
.footer .foot .f01 > div {
display: block;
font-size: 14px;
line-height: 24px;
margin-top: 4px;
margin-top: 0.8854vw;
color: #aaa;
}
.footer .foot .f02 {
flex:1;
float: left;
margin-left: 3%;
}
.footer .foot .f02 > span {
display: block;
height: 27px;
line-height: 27px;
color: #fff;
font-size: 17px;
}
.footer .foot .f02 > div {
display: block;
padding-top: 0.52vw;
overflow: hidden;
}
.footer .foot .f02 > div p {
display: block;
font-size: 14px;
line-height: 24px;
margin-top: 4px;
color: #aaa;
}
.footer .foot .f03 {
width: 15%;
margin-left: 3%;
float: left;
}
.footer .foot .f03 span {
display: block;
height: 27px;
line-height: 27px;
color: #fff;
font-size: 17px;
}
.footer .foot .f03 p {
display: block;
padding-top: 0.52vw;
}
.footer .foot .f03 p a {
width: 100%;
display: block;
font-size: 14px;
line-height: 24px;
margin-top: 4px;
color: #aaa;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.footer .foot .f03 p a:hover {
color: #ffc700;
}
.footer .foot .f04 {
width: 30%;
margin-left: 3%;
float: left;
}
.footer .foot .f04 span {
display: block;
height: 27px;
line-height: 27px;
color: #fff;
font-size: 17px;
}
.footer .foot .f04 p {
display: block;
padding-top: 0.52vw;
}
.footer .foot .f04 p a {
width: 48.5%;
display: block;
font-size: 14px;
line-height: 28px;
color: #aaa;
float: left;
margin-left: 3%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.footer .foot .f04 p a:nth-child(2n+1) {
clear: left;
float: left;
margin-left: 0;
}
.footer .foot .f04 p a:hover {
color: #ffc700;
}
.footer .bq {
margin-top: 2.1875vw;
}
.footer .bq .left {
float: left;
}
.footer .bq .left p {
display: block;
float: left;
font-size: 14px;
line-height: 20px;
height: 20px;
color: #aaa;
margin-right: 1.5625vw;
}
.footer .bq .left p a {
color: #aaa;
}
.footer .bq .right {
float: right;
}
.footer .bq .right a {
display: block;
height: 20px;
opacity: .7;
float: left;
margin-left: 1.04vw;
}
.footer .bq .right a img {
display: block;
height: 20px;
}
.footer .bq .right a:hover {
opacity: 1;
}
}
@media only screen and (max-width:1023px) {
.footer {
width: 94%;
padding: 30px 3%;
position: relative;
z-index: 1;
background-color: #2d3246;
}
.footer .foot {
width: 100%;
}
.footer .foot .f01 {
width: 100%;
float: left;
}
.footer .foot .f01 > strong {
height: 40px;
display: block;
}
.footer .foot .f01 > strong img {
height: 40px;
display: block;
}
.footer .foot .f01 > strong img.img01, .footer .foot .f01 strong img.img02 {
display: none;
}
.footer .foot .f01 > div {
display: block;
font-size: 14px;
line-height: 24px;
margin-top: 7px;
color: #aaa;
}
.footer .foot .f02 {
width: 100%;
float: left;
margin: 10px 0;
}
.footer .foot .f02 > span {
display: block;
height: 26px;
line-height: 26px;
color: #fff;
font-size: 16px;
}
.footer .foot .f02 > div {
display: block;
margin-top: 2px;
overflow: hidden;
}
.footer .foot .f02 > div p {
display: block;
font-size: 14px;
line-height: 24px;
color: #aaa;
}
.footer .foot .f03 {
width: 100%;
float: left;
display: none;
}
.footer .foot .f03 span {
display: block;
height: 26px;
line-height: 26px;
color: #fff;
font-size: 16px;
}
.footer .foot .f03 p {
display: block;
margin-top: 2px;
margin-left: -10px;
}
.footer .foot .f03 p a {
display: block;
font-size: 14px;
line-height: 24px;
color: #aaa;
float: left;
margin-left: 10px;
}
.footer .foot .f03 p a:hover {
color: #ffc700;
}
.footer .foot .f04 {
width: 100%;
float: left;
display: none;
}
.footer .foot .f04 span {
display: block;
height: 26px;
line-height: 26px;
color: #fff;
font-size: 16px;
}
.footer .foot .f04 p {
display: block;
margin-top: 2px;
margin-left: -10px;
}
.footer .foot .f04 p a {
display: block;
font-size: 14px;
line-height: 24px;
color: #aaa;
float: left;
margin-left: 10px;
}
.footer .foot .f04 p a:hover {
color: #ffc700;
}
.footer .bq {
margin-top: 10px;
}
.footer .bq .left {
width: 100%;
text-align: center;
}
.footer .bq .left p {
display: inline-block;
font-size: 14px;
line-height: 20px;
color: #aaa;
margin: 0 3px;
}
.footer .bq .left p a {
color: #aaa;
}
.footer .bq .right {
width: 100%;
text-align: center;
padding-top: 5px;
}
.footer .bq .right a {
display: inline-block;
height: 20px;
opacity: .7;
margin: 5px 3px;
margin-bottom: 0;
}
.footer .bq .right a img {
display: block;
height: 20px;
}
.footer .bq .right a:hover {
opacity: 1;
}
}
/*右侧客服*/
@media screen and (min-width:1600px) {
.kefu {
position: fixed;
z-index: 99999;
bottom: 14%;
right: 1%;
width: 48px;
display: none;
}
.kefu ul li {
position: relative;
margin-bottom: 12px;
}
.kefu ul li a.kf-gy {
width: 48px;
height: 48px;
background: #fff;
border: 1px solid #eee;
display: block;
text-align: center;
line-height: 48px;
color: #333;
border-radius: 50px;
box-shadow: 0 4px 16px rgba(28, 67, 125, .08);
transition: all 0.5s ease-out 0s;
cursor: pointer;
}
.kefu ul li:hover a.kf-gy {
background: #2d3246;
color: #fff;
border: 1px solid #2d3246;
}
.kefu ul li a.kf-a1 {
background: url(../images/kf-a1.png) center no-repeat #fff;
background-size: 20px;
}
.kefu ul li:hover a.kf-a1 {
background: url(../images/kf-a2.png) center no-repeat #2d3246;
background-size: 30px;
}
.kefu ul li a.kf-b1 {
background: url(../images/kf-b1.png) center no-repeat #fff;
background-size: 20px;
}
.kefu ul li:hover a.kf-b1 {
background: url(../images/kf-b2.png) center no-repeat #2d3246;
background-size: 30px;
}
.kefu ul li a.kf-c1 {
background: url(../images/kf-c1.png) center no-repeat #fff;
background-size: 20px;
}
.kefu ul li:hover a.kf-c1 {
background: url(../images/kf-c2.png) center no-repeat #2d3246;
background-size: 30px;
}
.kefu ul li a.kf-d1 {
background: url(../images/kf-d1.png) center no-repeat #fff;
background-size: 20px;
}
.kefu ul li:hover a.kf-d1 {
background: url(../images/kf-d2.png) center no-repeat #2d3246;
background-size: 30px;
}
.kefu ul li a.kf-e1 {
background: url(../images/kf-e1.png) center no-repeat #fff;
background-size: 24px;
margin-top: 20px;
}
.kefu ul li:hover a.kf-e1 {
background: url(../images/kf-e2.png) center no-repeat #2d3246;
border: 1px solid #2d3246;
background-size: 24px;
}
.kefu ul li span {
position: absolute;
box-shadow: 0 4px 16px rgba(28, 67, 125, .08);
padding: 9px 20px;
color: #ffc700;
font-size: 14px;
line-height: 22px;
white-space: nowrap;
bottom: 5px;
text-align: center;
background: #2d3246;
border: 1px solid hsla(226, 9%, 73%, .12);
border-radius: 4px;
transition: all .3s ease;
opacity: 0;
visibility: hidden;
right: 100px;
}
.kefu ul li span a {
color: #ffc700;
}
.kefu ul li span a.kf-tel {
font-size: 16px;
color: #ffc700;
}
.kefu ul li:hover span {
visibility: visible;
opacity: 1;
right: 60px;
}
.kefu ul li span:after {
position: absolute;
box-sizing: border-box;
background-color: inherit;
width: 12px;
height: 12px;
bottom: 15px;
transition: all 250ms ease-in-out 0s;
right: -4.25px;
transform: rotate(315deg);
border-right: 1px solid hsla(226, 9%, 73%, .12);
border-bottom: 1px solid hsla(226, 9%, 73%, .12);
content: "";
}
.kefu ul li span dl {
width: 100px;
}
.kefu ul li span dl dt {
padding: 5px;
}
.kefu ul li span dl dt img {
display: block;
width: 100%;
}
.kefu ul li span dl dd {
width: 100%;
font-size: 14px;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.kefu {
position: fixed;
z-index: 99999;
bottom: 14%;
right: 1%;
width: 48px;
display: none;
}
.kefu ul li {
position: relative;
margin-bottom: 12px;
}
.kefu ul li a.kf-gy {
width: 44px;
height: 44px;
background: #fff;
border: 1px solid #eee;
display: block;
text-align: center;
line-height: 44px;
color: #333;
border-radius: 50px;
box-shadow: 0 4px 16px rgba(28, 67, 125, .08);
transition: all 0.5s ease-out 0s;
cursor: pointer;
}
.kefu ul li:hover a.kf-gy {
background: #2d3246;
color: #fff;
border: 1px solid #2d3246;
}
.kefu ul li a.kf-a1 {
background: url(../images/kf-a1.png) center no-repeat #fff;
background-size: 20px;
}
.kefu ul li:hover a.kf-a1 {
background: url(../images/kf-a2.png) center no-repeat #2d3246;
background-size: 20px;
}
.kefu ul li a.kf-b1 {
background: url(../images/kf-b1.png) center no-repeat #fff;
background-size: 20px;
}
.kefu ul li:hover a.kf-b1 {
background: url(../images/kf-b2.png) center no-repeat #2d3246;
background-size: 20px;
}
.kefu ul li a.kf-c1 {
background: url(../images/kf-c1.png) center no-repeat #fff;
background-size: 20px;
}
.kefu ul li:hover a.kf-c1 {
background: url(../images/kf-c2.png) center no-repeat #2d3246;
background-size: 20px;
}
.kefu ul li a.kf-d1 {
background: url(../images/kf-d1.png) center no-repeat #fff;
background-size: 20px;
}
.kefu ul li:hover a.kf-d1 {
background: url(../images/kf-d2.png) center no-repeat #2d3246;
background-size: 20px;
}
.kefu ul li a.kf-e1 {
background: url(../images/kf-e1.png) center no-repeat #fff;
background-size: 22px;
margin-top: 20px;
}
.kefu ul li:hover a.kf-e1 {
background: url(../images/kf-e2.png) center no-repeat #2d3246;
border: 1px solid #2d3246;
background-size: 22px;
}
.kefu ul li span {
position: absolute;
box-shadow: 0 4px 16px rgba(28, 67, 125, .08);
padding: 7px 20px;
color: #ffc700;
font-size: 14px;
line-height: 22px;
white-space: nowrap;
bottom: 5px;
text-align: center;
background: #2d3246;
border: 1px solid hsla(226, 9%, 73%, .12);
border-radius: 4px;
transition: all .3s ease;
opacity: 0;
visibility: hidden;
right: 100px;
}
.kefu ul li span a {
color: #ffc700;
}
.kefu ul li span a.kf-tel {
font-size: 16px;
color: #ffc700;
}
.kefu ul li:hover span {
visibility: visible;
opacity: 1;
right: 60px;
}
.kefu ul li span:after {
position: absolute;
box-sizing: border-box;
background-color: inherit;
width: 12px;
height: 12px;
bottom: 15px;
transition: all 250ms ease-in-out 0s;
right: -4.25px;
transform: rotate(315deg);
border-right: 1px solid hsla(226, 9%, 73%, .12);
border-bottom: 1px solid hsla(226, 9%, 73%, .12);
content: "";
}
.kefu ul li span dl {
width: 100px;
}
.kefu ul li span dl dt {
padding: 5px;
}
.kefu ul li span dl dt img {
display: block;
width: 100%;
}
.kefu ul li span dl dd {
width: 100%;
font-size: 14px;
}
}
@media only screen and (max-width:1023px) {
.kefu {
position: fixed;
z-index: 99999;
bottom: 14%;
right: 1%;
width: 40px;
display: none;
}
.kefu ul li {
display: none;
position: relative;
}
.kefu ul li.kf-top {
display: block;
}
.kefu ul li a.kf-gy {
width: 38px;
height: 38px;
background: #fff;
border: 1px solid #eee;
display: block;
text-align: center;
line-height: 38px;
color: #333;
border-radius: 50px;
box-shadow: 0 4px 16px rgba(28, 67, 125, .08);
transition: all 0.5s ease-out 0s;
cursor: pointer;
}
.kefu ul li:hover a.kf-gy {
background: #2d3246;
color: #fff;
border: 1px solid #2d3246;
}
.kefu ul li a.kf-e1 {
background: url(../images/kf-e1.png) center no-repeat #fff;
background-size: 20px;
margin-top: 20px;
}
.kefu ul li:hover a.kf-e1 {
background: url(../images/kf-e2.png) center no-repeat #2d3246;
border: 1px solid #2d3246;
background-size: 20px;
}
}
/*内页*/
@media screen and (min-width:1600px) {
.wei {
width: 84%;
padding: 0 8%;
position: relative;
z-index: 1;
background-color: #f5f5f5;
}
.wei .left {
float: left;
font-size: 16px;
height: 70px;
line-height: 70px;
}
.wei .left img {
display: block;
height: 20px;
margin-top: 25px;
margin-right: 15px;
float: left;
}
.wei .right {
float: right;
height: 70px;
}
.wei .right a {
display: block;
float: left;
position: relative;
font-size: 16px;
line-height: 70px;
}
.wei .right a.on, .wei .right a:hover {
color: #ffc700;
}
.wei .right a.on b {
width: 100%;
height: 2px;
display: block;
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
background-color: #ffc700;
}
.wei .right span {
display: block;
float: left;
width: 1px;
height: 14px;
background-color: #aaa;
margin: 28px 1.5625vw;
overflow: hidden;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.wei {
width: 90%;
padding: 0 5%;
position: relative;
z-index: 1;
background-color: #f5f5f5;
}
.wei .left {
float: left;
font-size: 15px;
height: 60px;
line-height: 60px;
}
.wei .left img {
display: block;
height: 18px;
margin-top: 21px;
margin-right: 10px;
float: left;
}
.wei .right {
float: right;
height: 60px;
}
.wei .right a {
display: block;
float: left;
position: relative;
font-size: 15px;
line-height: 60px;
}
.wei .right a.on, .wei .right a:hover {
color: #ffc700;
}
.wei .right a.on b {
width: 100%;
height: 2px;
display: block;
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
background-color: #ffc700;
}
.wei .right span {
display: block;
float: left;
width: 1px;
height: 14px;
background-color: #aaa;
margin: 23px 1.5625vw;
overflow: hidden;
}
}
@media only screen and (max-width:1023px) {
.wei {
width: 94%;
padding: 0 3%;
position: relative;
z-index: 1;
background-color: #f5f5f5;
}
.wei .left {
display: none;
float: left;
font-size: 15px;
height: 60px;
line-height: 60px;
}
.wei .left img {
display: block;
height: 18px;
margin-top: 21px;
margin-right: 10px;
float: left;
}
.wei .right {
width: 100%;
padding: 5px 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.wei .right a {
display: block;
float: left;
position: relative;
font-size: 14px;
line-height: 40px;
}
.wei .right a.on, .wei .right a:hover {
color: #ffc700;
}
.wei .right a.on b {
width: 100%;
height: 2px;
display: block;
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
background-color: #ffc700;
}
.wei .right span {
display: block;
float: left;
width: 1px;
height: 12px;
background-color: #aaa;
margin: 14px 10px;
overflow: hidden;
}
}
/*代理品牌*/
@media screen and (min-width:1600px) {
.ab01 {
position: relative;
z-index: 1;
background-color: #fff;
display: flex;
}
.ab01 .zc {
width: 50%;
padding: 5.2vw 8%;
padding-right: 5%;
box-sizing: border-box;
}
.ab01 .zc .title .t04 {
font-size: 16px;
line-height: 26px;
color: #666;
display: none;
}
.ab01 .zc .title .t04 b {
width: 8px;
height: 8px;
display: block;
border-radius: 100%;
background-color: #ffc700;
overflow: hidden;
float: left;
margin-right: .52vw;
margin-top: 9px;
}
.ab01 .zc .bt {
font-size: 24px;
line-height: 34px;
margin-top: 1.82vw;
font-weight: bold;
}
.ab01 .zc .wen {
font-size: 16px;
line-height: 26px;
margin-top: 1.04vw;
margin-bottom: -5px;
}
.ab01 .yc {
width: 50%;
position: relative;
}
.ab01 .yc img {
width: 100%;
display: block;
}
.ab01 .yc iframe {
width: 100%;
height: 100%;
display: block;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.ab01 {
position: relative;
z-index: 1;
background-color: #fff;
display: flex;
}
.ab01 .zc {
width: 50%;
padding: 5.2vw 5%;
box-sizing: border-box;
}
.ab01 .zc .title .t04 {
font-size: 15px;
line-height: 25px;
color: #666;
display: none;
}
.ab01 .zc .title .t04 b {
width: 7px;
height: 7px;
display: block;
border-radius: 100%;
background-color: #ffc700;
overflow: hidden;
float: left;
margin-right: .52vw;
margin-top: 9px;
}
.ab01 .zc .bt {
font-size: 20px;
line-height: 30px;
margin-top: 1.82vw;
font-weight: bold;
}
.ab01 .zc .wen {
font-size: 15px;
line-height: 25px;
margin-top: 1.04vw;
margin-bottom: -5px;
}
.ab01 .yc {
width: 50%;
position: relative;
}
.ab01 .yc img {
width: 100%;
display: block;
}
.ab01 .yc iframe {
width: 100%;
height: 100%;
display: block;
}
}
@media only screen and (max-width:1023px) {
.ab01 {
width: 100%;
position: relative;
z-index: 1;
background-color: #fff;
}
.ab01 .zc {
width: 100%;
padding: 40px 3%;
padding-bottom: 35px;
box-sizing: border-box;
}
.ab01 .zc .title .t04 {
font-size: 14px;
line-height: 24px;
color: #666;
display: none;
}
.ab01 .zc .title .t04 b {
width: 6px;
height: 6px;
display: block;
border-radius: 100%;
background-color: #ffc700;
overflow: hidden;
float: left;
margin-right: 5px;
margin-top: 9px;
}
.ab01 .zc .bt {
font-size: 16px;
line-height: 26px;
margin-top: 15px;
font-weight: bold;
}
.ab01 .zc .wen {
font-size: 14px;
line-height: 24px;
margin-top: 5px;
}
.ab01 .yc {
width: 100%;
position: relative;
}
.ab01 .yc img {
width: 100%;
display: block;
}
.ab01 .yc iframe {
width: 100%;
height: 64.58vw;
display: block;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}
@media screen and (min-width:1600px) {
.ab02 {
width: 100%;
position: relative;
z-index: 1;
background-color: #fff;
display: flex;
flex-direction: row-reverse;
}
.ab02 .zc {
width: 50%;
padding: 5.2vw 8%;
padding-left: 5.2%;
box-sizing: border-box;
}
.ab02 .zc .wen {
font-size: 16px;
line-height: 26px;
margin-top: 1.82vw;
margin-bottom: -5px;
}
.ab02 .yc {
width: 50%;
position: relative;
}
.ab02 .yc img {
width: 100%;
display: block;
}
.ab02 .yc iframe {
width: 100%;
height: 32.29vw;
display: block;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.ab02 {
width: 100%;
position: relative;
z-index: 1;
background-color: #fff;
display: flex;
flex-direction: row-reverse;
}
.ab02 .zc {
width: 50%;
padding: 5.2vw 5%;
box-sizing: border-box;
}
.ab02 .zc .wen {
font-size: 15px;
line-height: 25px;
margin-top: 1.82vw;
margin-bottom: -5px;
}
.ab02 .yc {
width: 50%;
position: relative;
}
.ab02 .yc img {
width: 100%;
display: block;
}
.ab02 .yc iframe {
width: 100%;
height: 32.29vw;
display: block;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}
@media only screen and (max-width:1023px) {
.ab02 {
width: 100%;
position: relative;
z-index: 1;
background-color: #fff;
}
.ab02 .zc {
width: 100%;
padding: 40px 3%;
padding-bottom: 35px;
box-sizing: border-box;
}
.ab02 .zc .wen {
font-size: 14px;
line-height: 24px;
margin-top: 5px;
}
.ab02 .yc {
width: 100%;
position: relative;
}
.ab02 .yc img {
width: 100%;
display: block;
}
.ab02 .yc iframe {
width: 100%;
height: 64.58vw;
display: block;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}
@media screen and (min-width:1600px) {
.titles {
width: 100%;
position: relative;
z-index: 3;
margin-top: -5px;
text-align: center;
}
.titles .t01 {
font-size: 36px;
line-height: 46px;
font-weight: bold;
}
.titles .t02 {
font-size: 16px;
line-height: 26px;
color: #666;
margin-top: 0.26vw;
}
.titles .t03 {
width: 80px;
margin: auto;
margin-top: 0.677vw;
}
.titles .t03 b {
display: block;
width: 60px;
height: 6px;
border-radius: 6px;
float: left;
overflow: hidden;
background-color: #ffc700;
}
.titles .t03 a {
display: block;
width: 10px;
height: 6px;
border-radius: 6px;
float: left;
overflow: hidden;
background-color: #333;
margin-left: 10px;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.titles {
width: 100%;
position: relative;
z-index: 3;
margin-top: -5px;
text-align: center;
}
.titles .t01 {
font-size: 30px;
line-height: 40px;
font-weight: bold;
}
.titles .t02 {
font-size: 15px;
line-height: 25px;
color: #666;
margin-top: 0.26vw;
}
.titles .t03 {
width: 66px;
margin: auto;
margin-top: 0.677vw;
}
.titles .t03 b {
display: block;
width: 50px;
height: 5px;
border-radius: 6px;
float: left;
overflow: hidden;
background-color: #ffc700;
}
.titles .t03 a {
display: block;
width: 8px;
height: 5px;
border-radius: 6px;
float: left;
overflow: hidden;
background-color: #333;
margin-left: 8px;
}
}
@media only screen and (max-width:1023px) {
.titles {
width: 100%;
position: relative;
z-index: 3;
margin-top: -5px;
text-align: center;
}
.titles .t01 {
font-size: 24px;
line-height: 34px;
font-weight: bold;
}
.titles .t02 {
font-size: 14px;
line-height: 24px;
color: #666;
margin-top: 2px;
}
.titles .t03 {
width: 52px;
margin: auto;
margin-top: 5px;
}
.titles .t03 b {
display: block;
width: 40px;
height: 4px;
border-radius: 6px;
float: left;
overflow: hidden;
background-color: #ffc700;
}
.titles .t03 a {
display: block;
width: 6px;
height: 4px;
border-radius: 6px;
float: left;
overflow: hidden;
background-color: #333;
margin-left: 6px;
}
}
@media screen and (min-width:1600px) {
.ab03 {
width: 84%;
padding: 5.2vw 8%;
position: relative;
z-index: 1;
background-color: #f5f5f5;
}
.ab03 .box {
width: 100%;
display: block;
margin-top: 2.08vw;
position: relative;
z-index: 3;
}
.ab03 .box li {
width: 26.14%;
height: 510px;
display: block;
float: left;
margin-left: 2.61%;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.ab03 .box li:first-child {
margin-left: 0;
}
.ab03 .box li.active {
width: 42.5%;
}
.ab03 .box li .bg {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
position: relative;
z-index: 1;
}
.ab03 .box li .tu {
position: absolute;
left: 10%;
bottom: 50px;
z-index: 2;
height: 60px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.ab03 .box li .tu img {
height: 60px;
display: block;
}
.ab03 .box li.active .tu {
left: 6.15%;
}
.ab03 .box li .wen {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 3;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
padding-bottom: 110px;
}
.ab03 .box li.active .wen {
width: 87.7%;
}
.ab03 .box li .wen .en {
font-size: 16px;
line-height: 26px;
height: 26px;
color: #fff;
opacity: .7;
text-transform: uppercase;
}
.ab03 .box li .wen .cn {
font-size: 24px;
line-height: 34px;
height: 34px;
color: #fff;
margin-top: 5px;
font-weight: bold;
}
.ab03 .box li .wen .wz {
display: none;
padding-top: 18px;
font-size: 16px;
line-height: 30px;
color: #fff;
}
.ab03 .box li.active .wen .wz {
display: block;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.ab03 {
width: 90%;
padding: 5.2vw 5%;
position: relative;
z-index: 1;
background-color: #f5f5f5;
}
.ab03 .box {
width: 100%;
display: block;
margin-top: 2.08vw;
position: relative;
z-index: 3;
}
.ab03 .box li {
width: 26.14%;
height: 450px;
display: block;
float: left;
margin-left: 2.61%;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.ab03 .box li:first-child {
margin-left: 0;
}
.ab03 .box li.active {
width: 42.5%;
}
.ab03 .box li .bg {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
position: relative;
z-index: 1;
}
.ab03 .box li .tu {
position: absolute;
left: 10%;
bottom: 35px;
z-index: 2;
height: 60px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.ab03 .box li .tu img {
height: 60px;
display: block;
}
.ab03 .box li.active .tu {
left: 6.15%;
}
.ab03 .box li .wen {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 3;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
padding-bottom: 95px;
}
.ab03 .box li.active .wen {
width: 87.7%;
}
.ab03 .box li .wen .en {
font-size: 15px;
line-height: 25px;
height: 25px;
color: #fff;
opacity: .7;
text-transform: uppercase;
}
.ab03 .box li .wen .cn {
font-size: 20px;
line-height: 30px;
height: 30px;
color: #fff;
margin-top: 5px;
font-weight: bold;
}
.ab03 .box li .wen .wz {
display: none;
padding-top: 15px;
font-size: 15px;
line-height: 25px;
color: #fff;
}
.ab03 .box li.active .wen .wz {
display: block;
}
}
@media only screen and (max-width:1023px) {
.ab03 {
width: 94%;
padding: 40px 3%;
position: relative;
z-index: 1;
background-color: #f5f5f5;
}
.ab03 .box {
width: 100%;
display: block;
padidng-top: 5px;
position: relative;
z-index: 3;
}
.ab03 .box li {
width: 100%;
height: 200px;
display: block;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
margin-top: 15px;
}
.ab03 .box li .bg {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
position: relative;
z-index: 1;
}
.ab03 .box li .tu {
position: absolute;
right: 15px;
bottom: 20px;
z-index: 2;
height: 30px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.ab03 .box li .tu img {
height: 30px;
display: block;
}
.ab03 .box li.active .tu {
bottom: calc(100% - 50px);
}
.ab03 .box li .wen {
width: calc(100% - 30px);
max-height: calc(100% - 30px);
overflow: auto;
padding: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 3;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.ab03 .box li .wen .en {
font-size: 14px;
line-height: 22px;
height: 22px;
color: #fff;
opacity: .7;
text-transform: uppercase;
}
.ab03 .box li .wen .cn {
font-size: 16px;
line-height: 26px;
color: #fff;
font-weight: bold;
}
.ab03 .box li .wen .wz {
display: none;
font-size: 14px;
line-height: 24px;
color: #fff;
}
.ab03 .box li.active .wen .wz {
display: block;
}
}
@media screen and (min-width:1600px) {
.ab04 {
width: 84%;
padding: 5.2vw 8%;
padding-bottom: 3.12vw;
position: relative;
z-index: 1;
}
.ab04 .box {
width: 100%;
position: relative;
z-index: 3;
}
.ab04 .swiper-button {
width: 44px;
height: 44px;
border-radius: 100%;
position: absolute;
top: 50%;
margin-top: -23px;
z-index: 3;
border: 1px solid #eee;
background-position: center;
background-repeat: no-repeat;
background-color: #fff;
}
.ab04 .swiper-button-prev {
background-image: url(../images/prev.png);
left: -23px;
}
.ab04 .swiper-button-next {
background-image: url(../images/next.png);
right: -23px;
}
.ab04 .swiper-button:hover {
background-color: #ffc700;
border: 1px solid #ffc700;
}
.ab04 .swiper-button-prev:hover {
background-image: url(../images/prev01.png);
}
.ab04 .swiper-button-next:hover {
background-image: url(../images/next01.png);
}
.ab04 .swiper-container {
width: 100%;
padding: 2.08vw 1.04vw;
margin-left: -1.04vw;
margin-right: 1.04vw;
}
.ab04 .swiper-container .swiper-slide {
width: 23.125%;
position: relative;
padding-bottom: 20px;
}
.ab04 .swiper-container .swiper-slide .nei {
background-color: #fff;
padding: 15px;
padding-bottom: 30px;
box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}
.ab04 .swiper-container .swiper-slide .nei .w01 {
width: 100%;
position: relative;
background-color: #f5f5f5;
}
.ab04 .swiper-container .swiper-slide .nei .w01:after {
content: '';
display: block;
padding-top: 100%;
}
.ab04 .swiper-container .swiper-slide .nei .w01 a {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
.ab04 .swiper-container .swiper-slide .nei .w01 a img {
max-width: 100%;
max-height: 100%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.ab04 .swiper-container .swiper-slide .nei .w02 {
padding: 0 5px;
margin-top: 15px;
font-weight: bold;
}
.ab04 .swiper-container .swiper-slide .nei .w02 a {
display: block;
font-size: 20px;
line-height: 30px;
height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ab04 .swiper-container .swiper-slide:hover .nei .w02 a {
color: #ffc700;
}
.ab04 .swiper-container .swiper-slide .nei .w03 {
padding: 0 5px;
display: block;
font-size: 16px;
line-height: 26px;
height: 26px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #666;
}
.ab04 .swiper-container .swiper-slide .duo {
width: 40px;
position: absolute;
right: 20px;
bottom: 0;
background-color: #ffc700;
border-radius: 40px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.ab04 .swiper-container .swiper-slide .duo b {
display: block;
width: 34px;
height: 34px;
border-radius: 100%;
overflow: hidden;
background-color: #fff;
float: right;
position: relative;
z-index: 3;
border: 3px solid #ffc700;
}
.ab04 .swiper-container .swiper-slide .duo b img {
display: block;
height: 12px;
margin: 11px auto;
}
.ab04 .swiper-container .swiper-slide .duo a {
display: block;
width: 112px;
text-align: center;
font-size: 14px;
height: 40px;
line-height: 40px;
color: #fff;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.ab04 .swiper-container .swiper-slide .duo:hover {
width: 150px;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.ab04 {
width: 90%;
padding: 5.2vw 5%;
padding-bottom: 3.12vw;
position: relative;
z-index: 1;
}
.ab04 .box {
width: 100%;
position: relative;
z-index: 3;
}
.ab04 .swiper-button {
width: 40px;
height: 40px;
border-radius: 100%;
position: absolute;
top: 50%;
margin-top: -21px;
z-index: 3;
border: 1px solid #eee;
background-position: center;
background-repeat: no-repeat;
background-color: #fff;
background-size: auto 8px;
}
.ab04 .swiper-button-prev {
background-image: url(../images/prev.png);
left: -21px;
}
.ab04 .swiper-button-next {
background-image: url(../images/next.png);
right: -21px;
}
.ab04 .swiper-button:hover {
background-color: #ffc700;
border: 1px solid #ffc700;
}
.ab04 .swiper-button-prev:hover {
background-image: url(../images/prev01.png);
}
.ab04 .swiper-button-next:hover {
background-image: url(../images/next01.png);
}
.ab04 .swiper-container {
width: 100%;
padding: 2.08vw 1.04vw;
margin-left: -1.04vw;
margin-right: 1.04vw;
}
.ab04 .swiper-container .swiper-slide {
width: 23.125%;
position: relative;
padding-bottom: 20px;
}
.ab04 .swiper-container .swiper-slide .nei {
background-color: #fff;
padding: 10px;
padding-bottom: 25px;
box-shadow: 0 0 15px rgba(0, 0, 0, .1);
}
.ab04 .swiper-container .swiper-slide .nei .w01 {
width: 100%;
position: relative;
background-color: #f5f5f5;
}
.ab04 .swiper-container .swiper-slide .nei .w01:after {
content: '';
display: block;
padding-top: 100%;
}
.ab04 .swiper-container .swiper-slide .nei .w01 a {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
.ab04 .swiper-container .swiper-slide .nei .w01 a img {
max-width: 100%;
max-height: 100%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.ab04 .swiper-container .swiper-slide .nei .w02 {
padding: 0 5px;
margin-top: 10px;
font-weight: bold;
}
.ab04 .swiper-container .swiper-slide .nei .w02 a {
display: block;
font-size: 18px;
line-height: 28px;
height: 28px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ab04 .swiper-container .swiper-slide:hover .nei .w02 a {
color: #ffc700;
}
.ab04 .swiper-container .swiper-slide .nei .w03 {
padding: 0 5px;
display: block;
font-size: 15px;
line-height: 25px;
height: 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #666;
}
.ab04 .swiper-container .swiper-slide .duo {
width: 38px;
position: absolute;
right: 15px;
bottom: 0;
background-color: #ffc700;
border-radius: 40px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.ab04 .swiper-container .swiper-slide .duo b {
display: block;
width: 34px;
height: 34px;
border-radius: 100%;
overflow: hidden;
background-color: #fff;
float: right;
position: relative;
z-index: 3;
border: 2px solid #ffc700;
}
.ab04 .swiper-container .swiper-slide .duo b img {
display: block;
height: 12px;
margin: 11px auto;
}
.ab04 .swiper-container .swiper-slide .duo a {
display: block;
width: 104px;
text-align: center;
font-size: 14px;
height: 38px;
line-height: 38px;
color: #fff;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.ab04 .swiper-container .swiper-slide .duo:hover {
width: 140px;
}
}
@media only screen and (max-width:1023px) {
.ab04 {
width: 94%;
padding: 40px 3%;
padding-bottom: 20px;
position: relative;
z-index: 1;
}
.ab04 .box {
width: 100%;
position: relative;
z-index: 3;
}
.ab04 .swiper-button {
width: 36px;
height: 36px;
border-radius: 100%;
position: absolute;
top: 50%;
margin-top: -19px;
z-index: 3;
border: 1px solid #eee;
background-position: center;
background-repeat: no-repeat;
background-color: #fff;
background-size: auto 6px;
}
.ab04 .swiper-button-prev {
background-image: url(../images/prev.png);
left: -19px;
}
.ab04 .swiper-button-next {
background-image: url(../images/next.png);
right: -19px;
}
.ab04 .swiper-button:hover {
background-color: #ffc700;
border: 1px solid #ffc700;
}
.ab04 .swiper-button-prev:hover {
background-image: url(../images/prev01.png);
}
.ab04 .swiper-button-next:hover {
background-image: url(../images/next01.png);
}
.ab04 .swiper-container {
width: 100%;
padding: 20px 10px;
margin-left: -10px;
margin-right: -10px;
}
.ab04 .swiper-container .swiper-slide {
width: 48.75%;
position: relative;
padding-bottom: 15px;
}
.ab04 .swiper-container .swiper-slide .nei {
background-color: #fff;
padding: 5px;
padding-bottom: 25px;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}
.ab04 .swiper-container .swiper-slide .nei .w01 {
width: 100%;
position: relative;
background-color: #f5f5f5;
}
.ab04 .swiper-container .swiper-slide .nei .w01:after {
content: '';
display: block;
padding-top: 100%;
}
.ab04 .swiper-container .swiper-slide .nei .w01 a {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
.ab04 .swiper-container .swiper-slide .nei .w01 a img {
max-width: 100%;
max-height: 100%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.ab04 .swiper-container .swiper-slide .nei .w02 {
padding: 0 5px;
margin-top: 5px;
font-weight: bold;
}
.ab04 .swiper-container .swiper-slide .nei .w02 a {
display: block;
font-size: 16px;
line-height: 26px;
height: 26px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ab04 .swiper-container .swiper-slide:hover .nei .w02 a {
color: #ffc700;
}
.ab04 .swiper-container .swiper-slide .nei .w03 {
padding: 0 5px;
display: block;
font-size: 14px;
line-height: 24px;
height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #666;
}
.ab04 .swiper-container .swiper-slide .duo {
width: 34px;
position: absolute;
right: 10px;
bottom: 0;
background-color: #ffc700;
border-radius: 40px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.ab04 .swiper-container .swiper-slide .duo b {
display: block;
width: 30px;
height: 30px;
border-radius: 100%;
overflow: hidden;
background-color: #fff;
float: right;
position: relative;
z-index: 3;
border: 2px solid #ffc700;
}
.ab04 .swiper-container .swiper-slide .duo b img {
display: block;
height: 12px;
margin: 9px auto;
}
.ab04 .swiper-container .swiper-slide .duo a {
display: block;
width: 98px;
text-align: center;
font-size: 14px;
height: 34px;
line-height: 34px;
color: #fff;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.ab04 .swiper-container .swiper-slide .duo:hover {
width: 130px;
}
}
/*產品中心*/
/*左侧筛选*/
.clickable-span input[type="checkbox"] {
pointer-events: none;
}
@media screen and (min-width:1600px) {
.pro {
width: 84%;
padding: 5.2vw 8%;
display: flex;
}
.pro .lbar {
width: 290px;
padding-right: 3%;
box-sizing: border-box;
margin-top: -5px;
}
.pro .lbar .bt {
width: 100%;
font-size: 24px;
line-height: 34px;
font-weight: bold;
text-transform: uppercase;
}
.pro .lbar .list {
width: 100%;
display: block;
}
.pro .lbar .list > li {
display: block;
margin-top: 0.52vw;
}
.pro .lbar .list > li > a {
font-size: 18px;
line-height: 28px;
text-transform: uppercase;
display: block;
font-weight: bold;
padding-left: 20px;
background-image: url(../images/add01.png);
background-position: left 9px;
background-repeat: no-repeat;
cursor: pointer;
}
.pro .lbar .list > li > a.inactives {
background-image: url(../images/add.png);
}
.pro .lbar .list > li > a.cur {
color: #ffc700;
}
.pro .lbar .list > li > ul {
padding-left: 20px;
display: none;
padding-top: 0.3125vw;
padding-bottom: .52vw;
}
.pro .lbar .list > li > ul ul {
padding-left: 20px;
display: none;
padding-bottom: .26vw;
}
.pro .lbar .list > li > ul li {
display: block;
margin-top: 0.208vw;
}
.pro .lbar .list > li > ul li > a {
display: block;
font-size: 16px;
line-height: 26px;
color: #666;
cursor: pointer;
}
.pro .lbar .list > li > ul > li > ul > li > a {
color: #999;
}
.pro .lbar .list > li > ul li > a.cur {
color: #ffc700;
}
.pro .lbar .line {
width: 80px;
height: 1px;
background-color: #ddd;
margin: 1.82vw 0;
}
.pro .lbar .list > li > ul > div > span {
display: block;
margin-top: 0.208vw;
font-size: 16px;
line-height: 26px;
color: #666;
cursor: pointer;
overflow: hidden;
}
.pro .lbar .list > li > ul > div > span input {
margin-right: 10px;
}
.pro .lbar .list > li > ul > div > span.on {
color: #ffc700;
}
.pro .lbar .list.p02 > li > a {
font-size: 20px;
line-height: 30px;
background-position: left 10px;
}
.pro .lbar .bt01 {
margin-top: 0.52vw;
font-size: 20px;
line-height: 30px;
text-transform: uppercase;
display: block;
font-weight: bold;
padding-left: 20px;
background-image: url(../images/add01.png);
background-position: left 10px;
background-repeat: no-repeat;
cursor: pointer;
}
}
.pro .lbar .list.p03 {
padding-left: 20px;
box-sizing: border-box;
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.pro {
width: 90%;
padding: 5.2vw 5%;
display: flex;
}
.pro .lbar {
width: 250px;
padding-right: 3%;
box-sizing: border-box;
margin-top: -5px;
}
.pro .lbar .bt {
width: 100%;
font-size: 21px;
line-height: 31px;
font-weight: bold;
text-transform: uppercase;
}
.pro .lbar .list {
width: 100%;
display: block;
}
.pro .lbar .list > li {
display: block;
margin-top: 0.52vw;
}
.pro .lbar .list > li > a {
font-size: 17px;
line-height: 27px;
text-transform: uppercase;
display: block;
font-weight: bold;
padding-left: 15px;
background-image: url(../images/add01.png);
background-position: left 8px;
background-repeat: no-repeat;
cursor: pointer;
}
.pro .lbar .list > li > a.inactives {
background-image: url(../images/add.png);
}
.pro .lbar .list > li > a.cur {
color: #ffc700;
}
.pro .lbar .list > li > ul {
padding-left: 15px;
display: none;
padding-top: 0.3125vw;
padding-bottom: .52vw;
}
.pro .lbar .list > li > ul ul {
padding-left: 20px;
display: none;
padding-bottom: .26vw;
}
.pro .lbar .list > li > ul li {
display: block;
margin-top: 0.208vw;
}
.pro .lbar .list > li > ul li > a {
display: block;
font-size: 15px;
line-height: 25px;
color: #666;
cursor: pointer;
}
.pro .lbar .list > li > ul > li > ul > li > a {
color: #999;
}
.pro .lbar .list > li > ul li > a.cur {
color: #ffc700;
}
.pro .lbar .line {
width: 60px;
height: 1px;
background-color: #ddd;
margin: 1.82vw 0;
}
.pro .lbar .list > li > ul > div > span {
display: block;
margin-top: 0.208vw;
font-size: 15px;
line-height: 25px;
color: #666;
cursor: pointer;
overflow: hidden;
}
.pro .lbar .list > li > ul > div > span input {
margin-right: 7px;
}
.pro .lbar .list > li > ul > div > span.on {
color: #ffc700;
}
.pro .lbar .list.p02 > li > a {
font-size: 19px;
line-height: 29px;
background-position: left 9px;
}
.pro .lbar .bt01 {
margin-top: 0.52vw;
font-size: 19px;
line-height: 29px;
text-transform: uppercase;
display: block;
font-weight: bold;
padding-left: 15px;
background-image: url(../images/add01.png);
background-position: left 9px;
background-repeat: no-repeat;
cursor: pointer;
}
}
@media only screen and (max-width:1023px) {
.pro {
width: 100%;
padding-bottom: 40px;
padding-top: 15px;
position: relative;
z-index: 3;
overflow: visible;
}
.pro .lbar {
width: 100%;
position: relative;
position: relative;
z-index: 3;
}
.pro .lbar:after {
content: '';
width: 100%;
clear: both;
display: block;
}
.pro .lbar .bt {
width: 45.5%;
font-size: 16px;
line-height: 40px;
height: 40px;
overflow: hidden;
font-weight: bold;
text-transform: uppercase;
float: left;
text-align: center;
position: relative;
z-index: 1;
background-color: #f1f1f1;
float: left;
margin-left: 3%;
margin-top: 15px;
border-radius: 5px;
}
.pro .lbar .pp {
width: 100%;
padding: 10px 3%;
box-sizing: border-box;
padding-bottom: 20px;
display: none;
position: absolute;
left: 0;
top: 55px;
background-color: #fff;
box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
z-index: 3;
max-height: 60vh;
overflow: auto;
}
.pro .lbar .pp.open {
display: block;
}
.pro .lbar .list > li {
display: block;
margin-top: 10px;
}
.pro .lbar .list > li > a {
font-size: 16px;
line-height: 26px;
text-transform: uppercase;
display: block;
font-weight: bold;
padding-left: 15px;
background-image: url(../images/add01.png);
background-position: left center;
background-repeat: no-repeat;
cursor: pointer;
}
.pro .lbar .list > li > a.inactives {
background-image: url(../images/add.png);
}
.pro .lbar .list > li > a.cur {
color: #ffc700;
}
.pro .lbar .list > li > ul {
padding-left: 15px;
display: none;
}
.pro .lbar .list > li > ul ul {
padding-left: 15px;
display: none;
margin-top: -5px;
}
.pro .lbar .list > li > ul li {
display: block;
margin-top: 5px;
}
.pro .lbar .list > li > ul li > a {
display: block;
font-size: 14px;
line-height: 24px;
font-weight: bold;
color: #666;
cursor: pointer;
}
.pro .lbar .list > li > ul > li > ul > li > a {
color: #999;
}
.pro .lbar .list > li > ul li > a.cur {
color: #ffc700;
}
.pro .lbar .line {
display: none;
}
.pro .lbar .list > li > ul > div > span {
display: block;
margin-top: 5px;
font-size: 14px;
line-height: 24px;
color: #666;
cursor: pointer;
overflow: hidden;
}
.pro .lbar .list > li > ul > div > span input {
margin-right: 5px;
}
.pro .lbar .list > li > ul > div > span.on {
color: #ffc700;
}
.pro .lbar .list.p02 > li > a {
font-size: 16px;
line-height: 26px;
}
.pro .lbar .bt01 {
margin-top: 10px;
font-size: 16px;
line-height: 26px;
text-transform: uppercase;
display: block;
font-weight: bold;
padding-left: 15px;
background-image: url(../images/add01.png);
background-repeat: no-repeat;
cursor: pointer;
background-position: left center;
}
}
/*右侧列表*/
@media screen and (min-width:1600px) {
.pro .rbar {
flex: 1;
}
.pro .rbar .bt {
width: 100%;
}
.pro .rbar .bt .left {
float: left;
font-size: 20px;
line-height: 30px;
padding: 5px 0;
font-weight: bold;
}
.pro .rbar .bt .left a {
color: #ffc700;
}
.pro .rbar .bt .right {
float: right;
}
.pro .rbar .bt .right .ser {
border: 1px solid #eee;
height: 38px;
border-radius: 10px;
float: left;
width: 15.625vw;
margin-left: 1.04vw;
}
.pro .rbar .bt .right .ser p {
width: calc(100% - 38px);
height: 38px;
display: block;
float: left;
padding-left: 0.99vw;
overflow: hidden;
box-sizing: border-box;
}
.pro .rbar .bt .right .ser p input {
width: 100%;
font-size: 16px;
height: 38px;
line-height: 38px;
display: block;
overflow: hidden;
}
.pro .rbar .bt .right .ser a {
width: 38px;
height: 38px;
display: block;
float: left;
overflow: hidden;
}
.pro .rbar .bt .right .ser a input {
width: 100%;
height: 38px;
display: block;
overflow: hidden;
background-color: #fff;
cursor: pointer;
background-image: url(../images/ser.svg);
background-position: center;
background-repeat: no-repeat;
background-size: 16px auto;
}
.pro .rbar .list {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-top: 0.52vw;
}
.pro .rbar .list li {
width: 24.0475%;
margin-top: 1.04vw;
margin-left: 1.27%;
display: block;
background-color: #fff;
position: relative;
overflow: hidden;
}
.pro .rbar .list li:hover {
overflow: visible;
}
.pro .rbar .list li:nth-child(4n+1) {
margin-left: 0;
}
.pro .rbar .list li .tu {
width: 100%;
position: relative;
z-index: 1;
background-color: #f1f1f1;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.pro .rbar .list li .tu a {
width: 100%;
display: block;
overflow: hidden;
position: relative;
padding-top: 100%;
}
.pro .rbar .list li .tu a img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.pro .rbar .list li .tu a span {
position: absolute;
right: 0;
top: 0;
z-index: 3;
display: block;
padding: 0 .52vw;
font-size: 16px;
height: 36px;
line-height: 36px;
border-bottom-left-radius: 10px;
background-color: #ffc700;
color: #fff;
overflow: hidden;
text-transform: uppercase;
}
.pro .rbar .list li .wen {
padding: 1.3vw 1.04vw;
border: 1px solid #eee;
border-top: none;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
position: relative;
z-index: 1;
flex: 1;
}
.pro .rbar .list li .wen > a {
display: block;
overflow: hidden;
width: 100%;
font-size: 20px;
line-height: 30px;
height: 30px;
font-weight: bold;
}
.pro .rbar .list li .wen > a:hover {
color: #ffc700;
}
.pro .rbar .list li .wen span {
display: block;
width: 100%;
font-size: 16px;
line-height: 26px;
height: 52px;
overflow: hidden;
margin-top: .26vw;
color: #666;
}
.pro .rbar .list li .wen p {
display: block;
width: 100%;
overflow: hidden;
margin-top: .26vw;
}
.pro .rbar .list li .wen p a {
display: block;
float: right;
font-size: 16px;
line-height: 26px;
color: #999;
}
.pro .rbar .list li .mask {
width: 21.35vw;
height: 13.02vw;
position: absolute;
left: 11.46vw;
top: -2.08vw;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, .1);
overflow: auto;
padding: 1.3vw 1.5625vw;
box-sizing: border-box;
opacity: 0;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
z-index: 3;
}
.pro .rbar .list li:nth-child(4n) .mask {
left: auto;
right: 11.46vw;
}
.pro .rbar .list li:hover .mask {
opacity: 1;
}
.pro .rbar .list li .mask::-webkit-scrollbar {
width: 5px;
height: 1px;
}
.pro .rbar .list li .mask::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #ffc700;
}
.pro .rbar .list li .mask::-webkit-scrollbar-track {
border-radius: 10px;
background: rgba(0, 0, 0, 0);
}
.pro .rbar .list li .mask .w01 {
font-size: 20px;
line-height: 30px;
font-weight: bold;
}
.pro .rbar .list li .mask .w02 {
font-size: 14px;
line-height: 24px;
color: #666;
margin-top: .26vw;
}
.pro .rbar .list li .mask .w03 {
padding-top: 0.78125vw;
margin-top: 0.78125vw;
border-top: 1px solid #ddd;
}
.pro .rbar .list li .mask .w03 p {
padding-left: 15px;
position: relative;
display: block;
font-size: 14px;
line-height: 24px;
}
.pro .rbar .list li .mask .w03 p span {
display: block;
position: absolute;
left: 0;
top: 0;
color: #ffc700;
}
.fanye {
width: 100%;
margin-top: 2.08vw;
text-align: center;
}
.fanye li {
display: inline-block;
margin: 0 3px;
vertical-align: middle;
}
.fanye li a {
display: block;
width: 34px;
height: 34px;
line-height: 34px;
font-size: 16px;
border-radius: 5px;
overflow: hidden;
text-align: center;
cursor: pointer;
border: 1px solid #eee;
}
.fanye li a:hover {
border: 1px solid #ffc700;
color: #ffc700;
}
.fanye li span {
display: block;
width: 34px;
height: 34px;
line-height: 34px;
font-size: 16px;
border-radius: 5px;
overflow: hidden;
text-align: center;
cursor: pointer;
border: 1px solid #eee;
}
.fanye li span.active {
background-color: #ffc700;
border: 1px solid #ffc700;
color: #fff;
}
.fanye li b {
width: 6px;
height: 6px;
display: inline-block;
vertical-align: middle;
background-color: #333;
margin: 0 2px;
overflow: hidden;
border-radius: 100%;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.pro .rbar {
flex: 1;
}
.pro .rbar .bt {
width: 100%;
}
.pro .rbar .bt .left {
float: left;
font-size: 18px;
line-height: 28px;
padding: 5px 0;
font-weight: bold;
}
.pro .rbar .bt .left a {
color: #ffc700;
}
.pro .rbar .bt .right {
float: right;
}
.pro .rbar .bt .right .ser {
border: 1px solid #eee;
height: 36px;
border-radius: 10px;
float: left;
width: 15.625vw;
margin-left: 1.04vw;
}
.pro .rbar .bt .right .ser p {
width: calc(100% - 36px);
height: 36px;
display: block;
float: left;
padding-left: .99vw;
overflow: hidden;
box-sizing: border-box;
}
.pro .rbar .bt .right .ser p input {
width: 100%;
font-size: 15px;
height: 36px;
line-height: 36px;
display: block;
overflow: hidden;
}
.pro .rbar .bt .right .ser a {
width: 36px;
height: 36px;
display: block;
float: left;
overflow: hidden;
}
.pro .rbar .bt .right .ser a input {
width: 100%;
height: 36px;
display: block;
overflow: hidden;
background-color: #fff;
cursor: pointer;
background-image: url(../images/ser.svg);
background-position: center;
background-repeat: no-repeat;
background-size: 16px auto;
}
.pro .rbar .list {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-top: 0.52vw;
}
.pro .rbar .list li {
width: 24.0475%;
margin-top: 1.04vw;
margin-left: 1.27%;
display: block;
background-color: #fff;
position: relative;
overflow: hidden;
}
.pro .rbar .list li:hover {
overflow: visible;
}
.pro .rbar .list li:nth-child(4n+1) {
margin-left: 0;
}
.pro .rbar .list li .tu {
width: 100%;
position: relative;
z-index: 1;
background-color: #f1f1f1;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.pro .rbar .list li .tu a {
width: 100%;
display: block;
overflow: hidden;
position: relative;
padding-top: 100%;
}
.pro .rbar .list li .tu a img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.pro .rbar .list li .tu a span {
position: absolute;
right: 0;
top: 0;
z-index: 3;
display: block;
padding: 0 .52vw;
font-size: 15px;
height: 33px;
line-height: 33px;
border-bottom-left-radius: 10px;
background-color: #ffc700;
color: #fff;
overflow: hidden;
text-transform: uppercase;
}
.pro .rbar .list li .wen {
padding: 1.3vw 1.04vw;
border: 1px solid #eee;
border-top: none;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
position: relative;
z-index: 1;
flex: 1;
}
.pro .rbar .list li .wen > a {
display: block;
overflow: hidden;
width: 100%;
font-size: 18px;
line-height: 28px;
height: 28px;
font-weight: bold;
}
.pro .rbar .list li .wen > a:hover {
color: #ffc700;
}
.pro .rbar .list li .wen span {
display: block;
width: 100%;
font-size: 15px;
line-height: 25px;
height: 50px;
overflow: hidden;
margin-top: .26vw;
color: #666;
}
.pro .rbar .list li .wen p {
display: block;
width: 100%;
overflow: hidden;
margin-top: .26vw;
}
.pro .rbar .list li .wen p a {
display: block;
float: right;
font-size: 15px;
line-height: 25px;
color: #999;
}
.pro .rbar .list li .mask {
width: 21.35vw;
height: 13.02vw;
position: absolute;
z-index: 3;
left: 11.46vw;
top: -2.08vw;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, .1);
overflow: auto;
padding: 1.3vw 1.5625vw;
box-sizing: border-box;
opacity: 0;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
z-index: 3;
}
.pro .rbar .list li:nth-child(4n) .mask {
left: auto;
right: 11.46vw;
}
.pro .rbar .list li:hover .mask {
z-index: 3;
opacity: 1;
}
.pro .rbar .list li .mask::-webkit-scrollbar {
width: 5px;
height: 1px;
}
.pro .rbar .list li .mask::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #ffc700;
}
.pro .rbar .list li .mask::-webkit-scrollbar-track {
border-radius: 10px;
background: rgba(0, 0, 0, 0);
}
.pro .rbar .list li .mask .w01 {
font-size: 18px;
line-height: 28px;
font-weight: bold;
}
.pro .rbar .list li .mask .w02 {
font-size: 14px;
line-height: 24px;
color: #666;
margin-top: .26vw;
}
.pro .rbar .list li .mask .w03 {
padding-top: 0.78125vw;
margin-top: 0.78125vw;
border-top: 1px solid #ddd;
}
.pro .rbar .list li .mask .w03 p {
padding-left: 15px;
position: relative;
display: block;
font-size: 14px;
line-height: 24px;
}
.pro .rbar .list li .mask .w03 p span {
display: block;
position: absolute;
left: 0;
top: 0;
color: #ffc700;
}
.fanye {
width: 100%;
margin-top: 2.08vw;
text-align: center;
}
.fanye li {
display: inline-block;
margin: 0 3px;
vertical-align: middle;
}
.fanye li a {
display: block;
width: 31px;
height: 31px;
line-height: 31px;
font-size: 15px;
border-radius: 5px;
overflow: hidden;
text-align: center;
cursor: pointer;
border: 1px solid #eee;
}
.fanye li a:hover {
border: 1px solid #ffc700;
color: #ffc700;
}
.fanye li span {
display: block;
width: 31px;
height: 31px;
line-height: 31px;
font-size: 15px;
border-radius: 5px;
overflow: hidden;
text-align: center;
cursor: pointer;
border: 1px solid #eee;
}
.fanye li span.active {
background-color: #ffc700;
border: 1px solid #ffc700;
color: #fff;
}
.fanye li b {
width: 5px;
height: 5px;
display: inline-block;
vertical-align: middle;
background-color: #333;
margin: 0 2px;
overflow: hidden;
border-radius: 100%;
}
}
@media only screen and (max-width:1023px) {
.pro .rbar {
width: 94%;
margin: 0 3%;
position: relative;
z-index: 1;
}
.pro .rbar .bt {
width: 100%;
}
.pro .rbar .bt .left {
font-size: 16px;
line-height: 26px;
padding-top: 15px;
font-weight: bold;
}
.pro .rbar .bt .left a {
color: #ffc700;
}
.pro .rbar .bt .right {
width: 100%;
}
.pro .rbar .bt .right .ser {
border: 1px solid #eee;
height: 36px;
border-radius: 5px;
float: left;
width: calc(100% - 2px);
margin-top: 10px;
}
.pro .rbar .bt .right .ser p {
width: calc(100% - 36px);
height: 36px;
display: block;
float: left;
padding-left: 15px;
overflow: hidden;
box-sizing: border-box;
}
.pro .rbar .bt .right .ser p input {
width: 100%;
font-size: 15px;
height: 36px;
line-height: 36px;
display: block;
overflow: hidden;
}
.pro .rbar .bt .right .ser a {
width: 36px;
height: 36px;
display: block;
float: left;
overflow: hidden;
}
.pro .rbar .bt .right .ser a input {
width: 100%;
height: 36px;
display: block;
overflow: hidden;
background-color: #fff;
cursor: pointer;
background-image: url(../images/ser.svg);
background-position: center;
background-repeat: no-repeat;
background-size: 16px auto;
}
.pro .rbar .list {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-top: 5px;
}
.pro .rbar .list li {
width: 48.5%;
margin-top: 15px;
margin-left: 3%;
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: 5px;
overflow: hidden;
}
.pro .rbar .list li:nth-child(2n+1) {
margin-left: 0;
}
.pro .rbar .list li .tu {
width: 100%;
position: relative;
z-index: 1;
background-color: #f1f1f1;
}
.pro .rbar .list li .tu a {
width: 100%;
display: block;
overflow: hidden;
position: relative;
padding-top: 100%;
}
.pro .rbar .list li .tu a img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.pro .rbar .list li .tu a span {
position: absolute;
right: 0;
top: 0;
z-index: 3;
display: block;
padding: 0 5px;
font-size: 14px;
height: 30px;
line-height: 30px;
border-bottom-left-radius: 5px;
background-color: #ffab17;
color: #fff;
overflow: hidden;
text-transform: uppercase;
}
.pro .rbar .list li .wen {
padding: 7px 10px;
border: 1px solid #eee;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
position: relative;
z-index: 1;
flex: 1;
}
.pro .rbar .list li .wen > a {
display: block;
overflow: hidden;
width: 100%;
font-size: 16px;
line-height: 26px;
height: 26px;
font-weight: bold;
}
.pro .rbar .list li .wen > a:hover {
color: #ffc700;
}
.pro .rbar .list li .wen span {
display: block;
width: 100%;
font-size: 14px;
line-height: 24px;
height: 48px;
overflow: hidden;
margin-top: 2px;
color: #666;
}
.pro .rbar .list li .wen p {
display: block;
width: 100%;
overflow: hidden;
margin-top: 2px;
}
.pro .rbar .list li .wen p a {
display: block;
float: right;
font-size: 14px;
line-height: 24px;
color: #999;
}
.pro .rbar .list li .mask {
display: none;
}
.fanye {
width: 100%;
margin-top: 20px;
text-align: center;
}
.fanye li {
display: inline-block;
margin: 0 2px;
vertical-align: middle;
}
.fanye li a {
display: block;
width: 28px;
height: 28px;
line-height: 28px;
font-size: 14px;
border-radius: 5px;
overflow: hidden;
text-align: center;
cursor: pointer;
border: 1px solid #eee;
}
.fanye li a:hover {
border: 1px solid #ffc700;
color: #ffc700;
}
.fanye li span {
display: block;
width: 28px;
height: 28px;
line-height: 28px;
font-size: 14px;
border-radius: 5px;
overflow: hidden;
text-align: center;
cursor: pointer;
border: 1px solid #eee;
}
.fanye li span.active {
background-color: #ffc700;
border: 1px solid #ffc700;
color: #fff;
}
.fanye li b {
width: 4px;
height: 4px;
display: inline-block;
vertical-align: middle;
background-color: #333;
margin: 0 1px;
overflow: hidden;
border-radius: 100%;
}
}
/*產品中心内页*/
@media screen and (min-width:1600px) {
.pro01 {
width: 84%;
padding: 5.2vw 8%;
position: relative;
z-index: 1;
}
.pro01 .left {
width: 51.875%;
float: left;
display: flex;
align-items: center;
justify-content: space-between;
}
.pro01 .left .thumbs {
width: 4.6875vw;
}
.pro01 .left .thumbs .swiper-button-white {
width: 24px;
height: 13px;
margin: auto;
cursor: pointer;
}
.pro01 .left .thumbs .swiper-button-prev {
background-image: url(../images/top.png);
}
.pro01 .left .thumbs .swiper-button-next {
background-image: url(../images/bot.png);
}
.pro01 .left .thumbs .gallery-thumbs {
width: 100%;
height: calc(14.0625vw + 30px);
overflow: hidden;
margin: 1.04vw 0;
}
.pro01 .left .thumbs .gallery-thumbs .swiper-slide {
width: 4.6875vw;
height: 4.6875vw;
border-radius: 5px;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
cursor: pointer;
}
.pro01 .left .thumbs .gallery-thumbs .swiper-slide img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
.pro01 .left .thumbs .gallery-thumbs .swiper-slide b {
width: 100%;
height: 100%;
border: 1px solid #ddd;
box-sizing: border-box;
overflow: hidden;
display: block;
position: absolute;
left: 0;
top: 0;
border-radius: 10px;
}
.pro01 .left .thumbs .gallery-thumbs .swiper-slide.swiper-slide-thumb-active b {
border: 2px solid #ffc700;
}
.pro01 .left .gallery-top {
width: 86.75%;
border: 1px solid #ddd;
border-radius: 20px;
box-sizing: border-box;
}
.pro01 .left .gallery-top .swiper-slide {
width: 100%;
border-radius: 20px;
position: relative;
display: block;
overflow: hidden;
}
.pro01 .left .gallery-top .swiper-slide:before {
width: 100%;
padding-top: 69.44%;
display: block;
content: '';
}
.pro01 .left .gallery-top .swiper-slide img {
max-width: 100%;
max-height: 100%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.pro01 .right {
width: 43.75%;
float: right;
margin-top: -5px;
}
.pro01 .right .w01 {
font-size: 30px;
line-height: 40px;
font-weight: bold;
}
.pro01 .right .w02 {
font-size: 20px;
line-height: 30px;
margin-top: .52vw;
}
.pro01 .right .w03 {
padding-top: 0.26vw;
}
.pro01 .right .w03 p {
padding-left: 18px;
position: relative;
display: block;
font-size: 16px;
line-height: 26px;
}
.pro01 .right .w03 p span {
display: block;
position: absolute;
left: 0;
top: 0;
color: #ffc700;
font-size: 14px;
}
.pro01 .right .w04 {
padding-top: 1.3vw;
margin-top: 1.3vw;
border-top: 1px solid #ddd;
font-size: 18px;
line-height: 28px;
}
.pro01 .right .w05 {
padding-top: .26vw;
}
.pro01 .right .w05 a {
width: 47.14%;
margin-left: 5.72%;
font-size: 16px;
line-height: 30px;
height: 30px;
overflow: hidden;
box-sizing: border-box;
padding-left: 30px;
background-image: url(../images/down.png);
background-position: left center;
background-repeat: no-repeat;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.pro01 .right .w05 a:hover {
color: #ffc700;
}
.pro01 .right .w05 a:nth-child(2n+1) {
clear: left;
float: left;
margin-left: 0;
}
.pro01 .right .w06 {
padding-top: 1.3vw;
}
.pro01 .right .w06 a {
display: block;
min-width: 120px;
text-align: center;
padding: 0 1.04vw;
font-size: 16px;
height: 46px;
line-height: 46px;
border-radius: 10px;
float: left;
background-color: #2d3246;
color: #fff;
}
.pro01 .right .w06 a:hover {
background-color: #ffc700;
}
.pro01 .right .w06 a:hover {
background-color: #ffc700;
}
.pro01 .right .w06 b {
display: block;
float: left;
height: 46px;
margin-left: 1.5625vw;
}
.pro01 .right .w06 b img {
display: block;
height: 46px;
float: left;
}
.pro01 .right .w06 b span {
display: block;
text-decoration: underline;
font-size: 16px;
line-height: 46px;
height: 46px;
margin-left: .52vw;
color: #ffc700;
float: left;
cursor: pointer;
}
.pro01 .right .w06 b:hover span {
color: #2d3246;
}
.zx {
cursor: pointer;
}
.tkuang {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
position: fixed;
left: 0;
top: 0;
z-index: 102;
display: none;
}
.tkuang .box {
width: 1100px;
background-color: #fff;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
display: flex;
}
.tkuang .box .close {
position: absolute;
right: 20px;
top: 20px;
-webkit-transition: 1s linear;
transition: 1s ease-in;
}
.tkuang .box .close img {
display: block;
cursor: pointer;
width: 16px;
}
.tkuang .box .close:hover {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
.tkuang .box .left {
width: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #2d3246;
}
.tkuang .box .left span {
display: block;
text-align: center;
font-size: 18px;
line-height: 26px;
text-transform: uppercase;
color: #fff;
}
.tkuang .box .left p {
display: block;
text-align: center;
font-size: 24px;
line-height: 34px;
color: #fff;
}
.tkuang .box .left strong {
display: block;
width: 160px;
margin: 5px auto;
margin-top: 15px;
overflow: hidden;
}
.tkuang .box .left strong img {
width: 100%;
display: block;
}
.tkuang .box .left a {
display: block;
text-align: center;
font-size: 14px;
line-height: 24px;
color: #fff;
}
.tkuang .box .right {
flex: 1;
padding: 50px;
box-sizing: border-box;
padding-top: 45px;
}
.tkuang .box .right .bt {
text-align: center;
font-size: 24px;
line-height: 34px;
font-weight: bold;
}
.tkuang .box .right .bt01 {
text-align: center;
font-size: 14px;
line-height: 24px;
color: #666;
margin-top: 2px;
}
.tkuang .box .right .inp {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.tkuang .box .right .inp p {
display: block;
height: 36px;
width: calc((100% - 46px)/3);
float: left;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
margin-left: 20px;
margin-top: 20px;
}
.tkuang .box .right .inp p:nth-child(3n+1) {
margin-left: 0;
}
.tkuang .box .right .inp p input {
width: 100%;
padding: 0 10px;
box-sizing: border-box;
height: 36px;
line-height: 36px;
overflow: hidden;
}
.tkuang .box .right .inp p select {
width: 100%;
text-indent: 10px;
height: 36px;
line-height: 36px;
overflow: hidden;
background-image: url(../images/sel.png);
background-position: right center;
background-repeat: no-repeat;
}
.tkuang .box .right .inp span {
display: block;
height: 36px;
flex: 1;
float: left;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
margin-left: 20px;
margin-top: 20px;
}
.tkuang .box .right .inp span input {
width: 100%;
padding: 0 10px;
box-sizing: border-box;
height: 36px;
line-height: 36px;
overflow: hidden;
}
.tkuang .box .right .inp01 {
width: 100%;
margin-top: 20px;
}
.tkuang .box .right .inp01 textarea {
display: block;
width: 100%;
padding: 10px;
box-sizing: border-box;
height: 116px;
font-size: 14px;
line-height: 24px;
border: 1px solid #ddd;
border-radius: 5px;
overflow: auto;
font-family: inherit;
}
.tkuang .box .right .btn {
width: 100%;
margin-top: 30px;
}
.tkuang .box .right .btn button {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 5px;
margin: auto;
background-color: #2d3246;
color: #fff;
font-size: 16px;
overflow: hidden;
cursor: pointer;
}
.tkuang .box .right .btn button:hover {
background-color: #ffc700;
}
.shipin {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
position: fixed;
top: 0;
left: 0;
z-index: 999999;
display: none;
}
.shipin .box {
padding: 10px;
padding-bottom: 0;
background-color: #fff;
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 94%;
max-width: 870px;
box-sizing: border-box;
}
.shipin .video {
width: 100%;
position: relative;
padding-top: 60%;
background-color: #000;
}
.shipin .video video {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: block;
overflow: hidden;
background-color: #000;
}
.shipin .video iframe {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: block;
overflow: hidden;
background-color: #000;
}
.shipin .wen {
margin: 15px auto;
}
.shipin .wen b {
font-size: 16px;
line-height: 20px;
display: block;
float: left;
margin: 0 10px;
width: calc(100% - 80px);
overflow: hidden;
}
.shipin .wen a {
cursor: pointer;
display: block;
float: right;
height: 20px;
margin: 0 10px;
}
.shipin .wen a img {
display: block;
height: 20px;
-webkit-transition: 1s linear;
transition: 1s ease-in;
}
.shipin .wen a img:hover {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.pro01 {
width: 90%;
padding: 5.2vw 5%;
position: relative;
z-index: 1;
}
.pro01 .left {
width: 51.875%;
float: left;
display: flex;
align-items: center;
justify-content: space-between;
}
.pro01 .left .thumbs {
width: 4.6875vw;
}
.pro01 .left .thumbs .swiper-button-white {
width: 24px;
height: 13px;
margin: auto;
cursor: pointer;
}
.pro01 .left .thumbs .swiper-button-prev {
background-image: url(../images/top.png);
}
.pro01 .left .thumbs .swiper-button-next {
background-image: url(../images/bot.png);
}
.pro01 .left .thumbs .gallery-thumbs {
width: 100%;
height: calc(14.0625vw + 30px);
overflow: hidden;
margin: 1.04vw 0;
}
.pro01 .left .thumbs .gallery-thumbs .swiper-slide {
width: 4.6875vw;
height: 4.6875vw;
border-radius: 5px;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
cursor: pointer;
}
.pro01 .left .thumbs .gallery-thumbs .swiper-slide img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
.pro01 .left .thumbs .gallery-thumbs .swiper-slide b {
width: 100%;
height: 100%;
border: 1px solid #ddd;
box-sizing: border-box;
overflow: hidden;
display: block;
position: absolute;
left: 0;
top: 0;
border-radius: 10px;
}
.pro01 .left .thumbs .gallery-thumbs .swiper-slide.swiper-slide-thumb-active b {
border: 2px solid #ffc700;
}
.pro01 .left .gallery-top {
width: 86.75%;
border: 1px solid #ddd;
border-radius: 15px;
box-sizing: border-box;
}
.pro01 .left .gallery-top .swiper-slide {
width: 100%;
border-radius: 15px;
position: relative;
display: block;
overflow: hidden;
}
.pro01 .left .gallery-top .swiper-slide:before {
width: 100%;
padding-top: 69.44%;
display: block;
content: '';
}
.pro01 .left .gallery-top .swiper-slide img {
max-width: 100%;
max-height: 100%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.pro01 .right {
width: 43.75%;
float: right;
margin-top: -5px;
}
.pro01 .right .w01 {
font-size: 26px;
line-height: 36px;
font-weight: bold;
}
.pro01 .right .w02 {
font-size: 18px;
line-height: 28px;
margin-top: .52vw;
}
.pro01 .right .w03 {
padding-top: 0.26vw;
}
.pro01 .right .w03 p {
padding-left: 17px;
position: relative;
display: block;
font-size: 15px;
line-height: 25px;
}
.pro01 .right .w03 p span {
display: block;
position: absolute;
left: 0;
top: 0;
color: #ffc700;
font-size: 13px;
}
.pro01 .right .w04 {
padding-top: 1.3vw;
margin-top: 1.3vw;
border-top: 1px solid #ddd;
font-size: 17px;
line-height: 27px;
}
.pro01 .right .w05 {
padding-top: .26vw;
}
.pro01 .right .w05 a {
width: 47.14%;
margin-left: 5.72%;
font-size: 15px;
line-height: 28px;
height: 28px;
overflow: hidden;
box-sizing: border-box;
padding-left: 25px;
background-image: url(../images/down.png);
background-position: left center;
background-repeat: no-repeat;
background-size: auto 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.pro01 .right .w05 a:hover {
color: #ffc700;
}
.pro01 .right .w05 a:nth-child(2n+1) {
clear: left;
float: left;
margin-left: 0;
}
.pro01 .right .w06 {
padding-top: 1.3vw;
}
.pro01 .right .w06 a {
display: block;
min-width: 110px;
text-align: center;
padding: 0 1.04vw;
font-size: 15px;
height: 42px;
line-height: 42px;
border-radius: 10px;
float: left;
background-color: #2d3246;
color: #fff;
}
.pro01 .right .w06 a:hover {
background-color: #ffc700;
}
.pro01 .right .w06 b {
display: block;
float: left;
height: 42px;
margin-left: 1.5625vw;
}
.pro01 .right .w06 b img {
display: block;
height: 42px;
float: left;
}
.pro01 .right .w06 b span {
display: block;
text-decoration: underline;
font-size: 15px;
line-height: 42px;
height: 42px;
margin-left: .52vw;
color: #ffc700;
float: left;
cursor: pointer;
}
.pro01 .right .w06 b:hover span {
color: #2d3246;
}
.zx {
cursor: pointer;
}
.tkuang {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
position: fixed;
left: 0;
top: 0;
z-index: 102;
display: none;
}
.tkuang .box {
max-width: 1100px;
width: 94%;
background-color: #fff;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
display: flex;
}
.tkuang .box .close {
position: absolute;
right: 20px;
top: 20px;
-webkit-transition: 1s linear;
transition: 1s ease-in;
}
.tkuang .box .close img {
display: block;
cursor: pointer;
width: 16px;
}
.tkuang .box .close:hover {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
.tkuang .box .left {
width: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #2d3246;
}
.tkuang .box .left span {
display: block;
text-align: center;
font-size: 18px;
line-height: 26px;
text-transform: uppercase;
color: #fff;
}
.tkuang .box .left p {
display: block;
text-align: center;
font-size: 24px;
line-height: 34px;
color: #fff;
}
.tkuang .box .left strong {
display: block;
width: 160px;
margin: 5px auto;
margin-top: 15px;
overflow: hidden;
}
.tkuang .box .left strong img {
width: 100%;
display: block;
}
.tkuang .box .left a {
display: block;
text-align: center;
font-size: 14px;
line-height: 24px;
color: #fff;
}
.tkuang .box .right {
flex: 1;
padding: 50px;
box-sizing: border-box;
padding-top: 45px;
}
.tkuang .box .right .bt {
text-align: center;
font-size: 24px;
line-height: 34px;
font-weight: bold;
}
.tkuang .box .right .bt01 {
text-align: center;
font-size: 14px;
line-height: 24px;
color: #666;
margin-top: 2px;
}
.tkuang .box .right .inp {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.tkuang .box .right .inp p {
display: block;
height: 36px;
width: calc((100% - 46px)/3);
float: left;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
margin-left: 20px;
margin-top: 20px;
}
.tkuang .box .right .inp p:nth-child(3n+1) {
margin-left: 0;
}
.tkuang .box .right .inp p input {
width: 100%;
padding: 0 10px;
box-sizing: border-box;
height: 36px;
line-height: 36px;
overflow: hidden;
}
.tkuang .box .right .inp p select {
width: 100%;
text-indent: 10px;
height: 36px;
line-height: 36px;
overflow: hidden;
background-image: url(../images/sel.png);
background-position: right center;
background-repeat: no-repeat;
}
.tkuang .box .right .inp span {
display: block;
height: 36px;
flex: 1;
float: left;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
margin-left: 20px;
margin-top: 20px;
}
.tkuang .box .right .inp span input {
width: 100%;
padding: 0 10px;
box-sizing: border-box;
height: 36px;
line-height: 36px;
overflow: hidden;
}
.tkuang .box .right .inp01 {
width: 100%;
margin-top: 20px;
}
.tkuang .box .right .inp01 textarea {
display: block;
width: 100%;
padding: 10px;
box-sizing: border-box;
height: 116px;
font-size: 14px;
line-height: 24px;
border: 1px solid #ddd;
border-radius: 5px;
overflow: auto;
font-family: inherit;
}
.tkuang .box .right .btn {
width: 100%;
margin-top: 30px;
}
.tkuang .box .right .btn button {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 5px;
margin: auto;
background-color: #2d3246;
color: #fff;
font-size: 16px;
overflow: hidden;
cursor: pointer;
}
.tkuang .box .right .btn button:hover {
background-color: #ffc700;
}
.shipin {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
position: fixed;
top: 0;
left: 0;
z-index: 999999;
display: none;
}
.shipin .box {
padding: 10px;
padding-bottom: 0;
background-color: #fff;
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 94%;
max-width: 870px;
box-sizing: border-box;
}
.shipin .video {
width: 100%;
position: relative;
padding-top: 60%;
background-color: #000;
}
.shipin .video video {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: block;
overflow: hidden;
background-color: #000;
}
.shipin .video iframe {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: block;
overflow: hidden;
background-color: #000;
}
.shipin .wen {
margin: 15px auto;
}
.shipin .wen b {
font-size: 16px;
line-height: 20px;
display: block;
float: left;
margin: 0 10px;
width: calc(100% - 80px);
overflow: hidden;
}
.shipin .wen a {
cursor: pointer;
display: block;
float: right;
height: 20px;
margin: 0 10px;
}
.shipin .wen a img {
display: block;
height: 20px;
-webkit-transition: 1s linear;
transition: 1s ease-in;
}
.shipin .wen a img:hover {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
@media only screen and (max-width:1023px) {
.pro01 {
width: 94%;
padding: 40px 3%;
position: relative;
z-index: 1;
}
.pro01 .left {
width: 100%;
float: left;
display: flex;
align-items: center;
justify-content: space-between;
}
.pro01 .left .thumbs {
width: 50px;
}
.pro01 .left .thumbs .swiper-button-white {
width: 20px;
height: 10px;
margin: auto;
cursor: pointer;
background-size: 100% 100%;
}
.pro01 .left .thumbs .swiper-button-prev {
background-image: url(../images/top.png);
}
.pro01 .left .thumbs .swiper-button-next {
background-image: url(../images/bot.png);
}
.pro01 .left .thumbs .gallery-thumbs {
width: 100%;
height: 180px;
overflow: hidden;
margin: 10px 0;
}
.pro01 .left .thumbs .gallery-thumbs .swiper-slide {
width: 50px;
height: 50px;
border-radius: 5px;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
cursor: pointer;
}
.pro01 .left .thumbs .gallery-thumbs .swiper-slide img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
.pro01 .left .thumbs .gallery-thumbs .swiper-slide b {
width: 100%;
height: 100%;
border: 1px solid #ddd;
box-sizing: border-box;
overflow: hidden;
display: block;
position: absolute;
left: 0;
top: 0;
border-radius: 10px;
}
.pro01 .left .thumbs .gallery-thumbs .swiper-slide.swiper-slide-thumb-active b {
border: 2px solid #ffc700;
}
.pro01 .left .gallery-top {
width: calc(100% - 60px);
border: 1px solid #ddd;
border-radius: 10px;
box-sizing: border-box;
}
.pro01 .left .gallery-top .swiper-slide {
width: 100%;
border-radius: 10px;
position: relative;
display: block;
overflow: hidden;
}
.pro01 .left .gallery-top .swiper-slide:before {
width: 100%;
padding-top: 69.44%;
display: block;
content: '';
}
.pro01 .left .gallery-top .swiper-slide img {
max-width: 100%;
max-height: 100%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.pro01 .right {
width: 100%;
float: right;
margin-top: 10px;
}
.pro01 .right .w01 {
font-size: 20px;
line-height: 30px;
font-weight: bold;
}
.pro01 .right .w02 {
font-size: 16px;
line-height: 26px;
}
.pro01 .right .w03 {
width: 100%;
}
.pro01 .right .w03 p {
padding-left: 14px;
position: relative;
display: block;
font-size: 14px;
line-height: 24px;
}
.pro01 .right .w03 p span {
display: block;
position: absolute;
left: 0;
top: 0;
color: #ffc700;
font-size: 12px;
}
.pro01 .right .w04 {
padding-top: 10px;
margin-top: 10px;
border-top: 1px solid #ddd;
font-size: 16px;
line-height: 26px;
}
.pro01 .right .w05 {
padding-top: .26vw;
}
.pro01 .right .w05 a {
width: 48.5%;
margin-left: 3%;
font-size: 14px;
line-height: 26px;
height: 26px;
overflow: hidden;
box-sizing: border-box;
padding-left: 20px;
background-image: url(../images/down.png);
background-position: left center;
background-repeat: no-repeat;
background-size: auto 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.pro01 .right .w05 a:hover {
color: #ffc700;
}
.pro01 .right .w05 a:nth-child(2n+1) {
clear: left;
float: left;
margin-left: 0;
}
.pro01 .right .w06 {
padding-top: 10px;
}
.pro01 .right .w06 a {
display: block;
min-width: 100px;
text-align: center;
padding: 0 10px;
font-size: 14px;
height: 38px;
line-height: 38px;
border-radius: 5px;
float: left;
background-color: #2d3246;
color: #fff;
}
.pro01 .right .w06 a:hover {
background-color: #ffc700;
}
.pro01 .right .w06 b {
display: block;
float: left;
height: 38px;
margin-left: 15px;
}
.pro01 .right .w06 b img {
display: block;
height: 38px;
float: left;
}
.pro01 .right .w06 b span {
display: block;
text-decoration: underline;
font-size: 14px;
line-height: 38px;
height: 38px;
margin-left: 10px;
color: #ffc700;
float: left;
cursor: pointer;
}
.pro01 .right .w06 b:hover span {
color: #2d3246;
}
.zx {
cursor: pointer;
}
.tkuang {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
position: fixed;
left: 0;
top: 0;
z-index: 102;
display: none;
}
.tkuang .box {
max-width: 1100px;
width: 94%;
background-color: #fff;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
display: flex;
}
.tkuang .box .close {
position: absolute;
right: 20px;
top: 20px;
-webkit-transition: 1s linear;
transition: 1s ease-in;
}
.tkuang .box .close img {
display: block;
cursor: pointer;
width: 16px;
}
.tkuang .box .close:hover {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
.tkuang .box .left {
display: none;
}
.tkuang .box .right {
flex: 1;
padding: 35px 20px;
box-sizing: border-box;
padding-top: 25px;
}
.tkuang .box .right .bt {
text-align: center;
font-size: 20px;
line-height: 30px;
font-weight: bold;
}
.tkuang .box .right .bt01 {
text-align: center;
font-size: 14px;
line-height: 24px;
color: #666;
margin-top: 2px;
}
.tkuang .box .right .inp {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.tkuang .box .right .inp p {
display: block;
height: 38px;
box-sizing: border-box;
width: 48.5%;
float: left;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
margin-left: 3%;
margin-top: 15px;
}
.tkuang .box .right .inp p:nth-child(2n+1) {
margin-left: 0;
}
.tkuang .box .right .inp p input {
width: 100%;
padding: 0 10px;
box-sizing: border-box;
height: 36px;
line-height: 36px;
overflow: hidden;
}
.tkuang .box .right .inp p select {
width: 100%;
text-indent: 10px;
height: 36px;
line-height: 36px;
overflow: hidden;
background-image: url(../images/sel.png);
background-position: right center;
background-repeat: no-repeat;
}
.tkuang .box .right .inp span {
display: block;
height: 38px;
width: 100%;
box-sizing: border-box;
float: left;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
margin-top: 15px;
}
.tkuang .box .right .inp span input {
width: 100%;
padding: 0 10px;
box-sizing: border-box;
height: 36px;
line-height: 36px;
overflow: hidden;
}
.tkuang .box .right .inp01 {
width: 100%;
margin-top: 15px;
}
.tkuang .box .right .inp01 textarea {
display: block;
width: 100%;
padding: 10px;
box-sizing: border-box;
height: 116px;
font-size: 14px;
line-height: 24px;
border: 1px solid #ddd;
border-radius: 5px;
overflow: auto;
font-family: inherit;
}
.tkuang .box .right .btn {
width: 100%;
margin-top: 20px;
}
.tkuang .box .right .btn button {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 5px;
margin: auto;
background-color: #2d3246;
color: #fff;
font-size: 14px;
overflow: hidden;
cursor: pointer;
}
.tkuang .box .right .btn button:hover {
background-color: #ffc700;
}
.shipin {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
position: fixed;
top: 0;
left: 0;
z-index: 999999;
display: none;
}
.shipin .box {
padding: 5px;
padding-bottom: 0;
background-color: #fff;
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 94%;
max-width: 870px;
box-sizing: border-box;
}
.shipin .video {
width: 100%;
position: relative;
padding-top: 60%;
background-color: #000;
}
.shipin .video video {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: block;
overflow: hidden;
background-color: #000;
}
.shipin .video iframe {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: block;
overflow: hidden;
background-color: #000;
}
.shipin .wen {
margin: 10px auto;
}
.shipin .wen b {
font-size: 14px;
line-height: 20px;
display: block;
float: left;
margin: 0 10px;
width: calc(100% - 80px);
overflow: hidden;
}
.shipin .wen a {
cursor: pointer;
display: block;
float: right;
height: 20px;
margin: 0 10px;
}
.shipin .wen a img {
display: block;
height: 20px;
-webkit-transition: 1s linear;
transition: 1s ease-in;
}
.shipin .wen a img:hover {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
@media screen and (min-width:1600px) {
.pro02 {
width: 84%;
padding: 0 8%;
position: relative;
z-index: 1;
background-color: #fff;
}
.pro02 .wen {
margin-top: 1.82vw;
font-size: 16px;
line-height: 26px;
}
.pro02 .wen img {
max-width: 100%;
height: auto !important;
}
.pro02 .wen table {
width: 100% !important;
border-collapse: collapse;
}
.pro02 .wen table, .pro02 .wen th, .pro02 .wen td {
border: 1px solid #ddd;
}
.pro02 .wen th, .pro02 .wen td {
padding: 10px 15px;
font-size:16px !important;
}
.pro02 .wen th:first-child, .pro02 .wen td:first-child {
background: #f7f7f7;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.pro02 {
width: 90%;
padding: 0 5%;
position: relative;
z-index: 1;
background-color: #fff;
}
.pro02 .wen {
margin-top: 1.82vw;
font-size: 15px;
line-height: 25px;
}
.pro02 .wen img {
max-width: 100%;
height: auto !important;
}
.pro02 .wen table {
width: 100% !important;
border-collapse: collapse;
}
.pro02 .wen table, .pro02 .wen th, .pro02 .wen td {
border: 1px solid #ddd;
}
.pro02 .wen th, .pro02 .wen td {
padding: 10px;
font-size:15px !important;
}
.pro02 .wen th:first-child, .pro02 .wen td:first-child {
background: #f7f7f7;
}
}
@media only screen and (max-width:1023px) {
.pro02 {
width: 94%;
padding: 0 3%;
position: relative;
z-index: 1;
background-color: #fff;
}
.pro02 .wen {
margin-top: 15px;
font-size: 14px;
line-height: 24px;
}
.pro02 .wen img {
max-width: 100%;
height: auto !important;
}
.pro02 .wen table {
width: 100% !important;
border-collapse: collapse;
}
.pro02 .wen table, .pro02 .wen th, .pro02 .wen td {
border: 1px solid #ddd;
}
.pro02 .wen th, .pro02 .wen td {
padding: 5px;
font-size:14px !important;
}
.pro02 .wen th:first-child, .pro02 .wen td:first-child {
background: #f7f7f7;
}
}
@media screen and (min-width:1600px) {
.pro03 {
width: 84%;
padding: 0 8%;
margin-bottom: 5.2vw;
position: relative;
z-index: 1;
background-color: #fff;
}
.pro03 .title {
align-items: flex-end;
}
.pro03 .title .swi {
overflow: hidden;
}
.pro03 .title .swi .swiper-button {
width: 44px;
height: 44px;
border-radius: 100%;
float: left;
border: 1px solid #eee;
background-position: center;
background-repeat: no-repeat;
margin-left: 1.5625vw;
}
.pro03 .title .swi .swiper-button-prev {
background-image: url(../images/prev.png);
}
.pro03 .title .swi .swiper-button-next {
background-image: url(../images/next.png);
}
.pro03 .title .swi .swiper-button:hover {
background-color: #ffc700;
border: 1px solid #ffc700;
}
.pro03 .title .swi .swiper-button-prev:hover {
background-image: url(../images/prev01.png);
}
.pro03 .title .swi .swiper-button-next:hover {
background-image: url(../images/next01.png);
}
.pro03 .swiper-container {
width: 100%;
position: relative;
margin-top: 2.08vw;
margin-bottom: -7px;
}
.pro03 .swiper-container .swiper-slide {
width: 31.25%;
}
.pro03 .swiper-container .swiper-slide .w01 {
width: 100%;
}
.pro03 .swiper-container .swiper-slide .w01 a {
width: 100%;
display: block;
padding-top: 69%;
position: relative;
overflow: hidden;
}
.pro03 .swiper-container .swiper-slide .w01 img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
}
.pro03 .swiper-container .swiper-slide .w02 {
width: 100%;
font-size: 18px;
line-height: 26px;
height: 26px;
color: #666;
font-weight: bold;
margin-top: 0.78125vw;
}
.pro03 .swiper-container .swiper-slide .w03 {
width: 100%;
font-weight: bold;
margin-top: .52vw;
}
.pro03 .swiper-container .swiper-slide .w03 a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
width: 100%;
font-size: 20px;
line-height: 30px;
height: 60px;
overflow: hidden;
}
.pro03 .swiper-container .swiper-slide .w03 a:hover {
color: #ffc700;
}
.pro03 .swiper-container .swiper-slide .w04 {
width: 100%;
font-size: 16px;
line-height: 30px;
height: 90px;
color: #666;
margin-top: 0.42vw;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.pro03 {
width: 90%;
padding: 0 5%;
margin-bottom: 5.2vw;
position: relative;
z-index: 1;
background-color: #fff;
}
.pro03 .title {
align-items: flex-end;
}
.pro03 .title .swi {
overflow: hidden;
}
.pro03 .title .swi .swiper-button {
width: 40px;
height: 40px;
border-radius: 100%;
float: left;
border: 1px solid #eee;
background-position: center;
background-repeat: no-repeat;
margin-left: 1.5625vw;
background-size: auto 8px;
}
.pro03 .title .swi .swiper-button-prev {
background-image: url(../images/prev.png);
}
.pro03 .title .swi .swiper-button-next {
background-image: url(../images/next.png);
}
.pro03 .title .swi .swiper-button:hover {
background-color: #ffc700;
border: 1px solid #ffc700;
}
.pro03 .title .swi .swiper-button-prev:hover {
background-image: url(../images/prev01.png);
}
.pro03 .title .swi .swiper-button-next:hover {
background-image: url(../images/next01.png);
}
.pro03 .swiper-container {
width: 100%;
position: relative;
margin-top: 2.08vw;
margin-bottom: -6px;
}
.pro03 .swiper-container .swiper-slide {
width: 31.25%;
}
.pro03 .swiper-container .swiper-slide .w01 {
width: 100%;
}
.pro03 .swiper-container .swiper-slide .w01 a {
width: 100%;
display: block;
padding-top: 69%;
position: relative;
overflow: hidden;
}
.pro03 .swiper-container .swiper-slide .w01 img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
}
.pro03 .swiper-container .swiper-slide .w02 {
width: 100%;
font-size: 16px;
line-height: 24px;
height: 24px;
color: #666;
font-weight: bold;
margin-top: 0.78125vw;
}
.pro03 .swiper-container .swiper-slide .w03 {
width: 100%;
font-weight: bold;
margin-top: .52vw;
}
.pro03 .swiper-container .swiper-slide .w03 a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
width: 100%;
font-size: 18px;
line-height: 28px;
height: 56px;
overflow: hidden;
}
.pro03 .swiper-container .swiper-slide .w03 a:hover {
color: #ffc700;
}
.pro03 .swiper-container .swiper-slide .w04 {
width: 100%;
font-size: 15px;
line-height: 27px;
height: 81px;
color: #666;
margin-top: 0.42vw;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
}
@media only screen and (max-width:1023px) {
.pro03 {
width: 94%;
padding: 0 3%;
margin-bottom: 35px;
position: relative;
z-index: 1;
background-color: #fff;
}
.pro03 .title {
display: flex;
align-items: flex-end;
}
.pro03 .title .left {
flex: 1;
}
.pro03 .title .swi {
overflow: hidden;
}
.pro03 .title .swi .swiper-button {
width: 36px;
height: 36px;
border-radius: 100%;
float: left;
border: 1px solid #eee;
background-position: center;
background-repeat: no-repeat;
margin-left: 10px;
background-size: auto 6px;
}
.pro03 .title .swi .swiper-button-prev {
background-image: url(../images/prev.png);
}
.pro03 .title .swi .swiper-button-next {
background-image: url(../images/next.png);
}
.pro03 .title .swi .swiper-button:hover {
background-color: #ffc700;
border: 1px solid #ffc700;
}
.pro03 .title .swi .swiper-button-prev:hover {
background-image: url(../images/prev01.png);
}
.pro03 .title .swi .swiper-button-next:hover {
background-image: url(../images/next01.png);
}
.pro03 .swiper-container {
width: 100%;
position: relative;
margin-top: 20px;
}
.pro03 .swiper-container .swiper-slide {
width: 48.4375%;
}
.pro03 .swiper-container .swiper-slide .w01 {
width: 100%;
}
.pro03 .swiper-container .swiper-slide .w01 a {
width: 100%;
display: block;
padding-top: 69%;
position: relative;
overflow: hidden;
}
.pro03 .swiper-container .swiper-slide .w01 img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
}
.pro03 .swiper-container .swiper-slide .w02 {
width: 100%;
font-size: 14px;
line-height: 22px;
height: 22px;
color: #666;
font-weight: bold;
margin-top: 5px;
}
.pro03 .swiper-container .swiper-slide .w03 {
width: 100%;
font-weight: bold;
}
.pro03 .swiper-container .swiper-slide .w03 a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
width: 100%;
font-size: 16px;
line-height: 26px;
height: 52px;
overflow: hidden;
}
.pro03 .swiper-container .swiper-slide .w03 a:hover {
color: #ffc700;
}
.pro03 .swiper-container .swiper-slide .w04 {
width: 100%;
font-size: 14px;
line-height: 24px;
height: 72px;
color: #666;
margin-top: 2px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
}
/*案例中心*/
@media screen and (min-width:1600px) {
.main {
width: 84%;
padding: 5.2vw 8%;
position: relative;
z-index: 1;
background-color: #fff;
}
.main .case {
width: 100%;
position: relative;
display: block;
}
.main .case li {
width: 31.25%;
margin-left: 3.125%;
margin-top: 2.08vw;
float: left;
display: block;
}
.main .case li:nth-child(3n+1) {
clear: left;
float: left;
margin-left: 0;
}
.main .case li .w01 {
width: 100%;
}
.main .case li .w01 a {
width: 100%;
display: block;
padding-top: 69%;
position: relative;
overflow: hidden;
}
.main .case li .w01 img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
}
.main .case li .w02 {
width: 100%;
font-size: 18px;
line-height: 28px;
height: 28px;
color: #666;
font-weight: bold;
margin-top: 0.78125vw;
}
.main .case li .w02 a {
display: block;
float: left;
margin-right: .52vw;
color: #ffc700;
}
.main .case li .w03 {
width: 100%;
font-weight: bold;
margin-top: .52vw;
}
.main .case li .w03 a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
width: 100%;
font-size: 20px;
line-height: 30px;
height: 60px;
overflow: hidden;
}
.main .case li .w03 a:hover {
color: #ffc700;
}
.main .case li .w04 {
margin-top: 1.04vw;
font-weight: bold;
}
.main .case li .w04 a {
display: block;
font-size: 16px;
line-height: 24px;
height: 24px;
font-weight: bold;
color: #666;
float: left;
overflow: hidden;
}
.main .case li .w04 a b {
display: block;
width: 24px;
height: 24px;
border-radius: 100%;
overflow: hidden;
background-color: #ffc700;
float: right;
margin-left: 1.04vw;
}
.main .case li .w04 a b img {
display: block;
height: 10px;
margin: 7px auto;
}
.main .case li .w04 a:hover {
color: #ffc700;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.main {
width: 90%;
padding: 5.2vw 5%;
position: relative;
z-index: 1;
background-color: #fff;
}
.main .case {
width: 100%;
position: relative;
display: block;
}
.main .case li {
width: 31.25%;
margin-left: 3.125%;
margin-top: 2.08vw;
float: left;
display: block;
}
.main .case li:nth-child(3n+1) {
clear: left;
float: left;
margin-left: 0;
}
.main .case li .w01 {
width: 100%;
}
.main .case li .w01 a {
width: 100%;
display: block;
padding-top: 69%;
position: relative;
overflow: hidden;
}
.main .case li .w01 img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
}
.main .case li .w02 {
width: 100%;
font-size: 16px;
line-height: 26px;
height: 26px;
color: #666;
font-weight: bold;
margin-top: 0.78125vw;
}
.main .case li .w02 a {
display: block;
float: left;
margin-right: .52vw;
color: #ffc700;
}
.main .case li .w03 {
width: 100%;
font-weight: bold;
margin-top: .52vw;
}
.main .case li .w03 a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
width: 100%;
font-size: 18px;
line-height: 28px;
height: 56px;
overflow: hidden;
}
.main .case li .w03 a:hover {
color: #ffc700;
}
.main .case li .w04 {
margin-top: 1.04vw;
font-weight: bold;
}
.main .case li .w04 a {
display: block;
font-size: 15px;
line-height: 22px;
height: 22px;
font-weight: bold;
color: #666;
float: left;
overflow: hidden;
}
.main .case li .w04 a b {
display: block;
width: 22px;
height: 22px;
border-radius: 100%;
overflow: hidden;
background-color: #ffc700;
float: right;
margin-left: 1.04vw;
}
.main .case li .w04 a b img {
display: block;
height: 8px;
margin: 7px auto;
}
.main .case li .w04 a:hover {
color: #ffc700;
}
}
@media only screen and (max-width:1023px) {
.main {
width: 94%;
padding: 40px 3%;
position: relative;
z-index: 1;
background-color: #fff;
}
.main .case {
width: 100%;
position: relative;
display: block;
}
.main .case li {
width: 48.4375%;
margin-left: 3.125%;
margin-top: 20px;
float: left;
display: block;
}
.main .case li:nth-child(2n+1) {
clear: left;
float: left;
margin-left: 0;
}
.main .case li .w01 {
width: 100%;
}
.main .case li .w01 a {
width: 100%;
display: block;
padding-top: 69%;
position: relative;
overflow: hidden;
}
.main .case li .w01 img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
}
.main .case li .w02 {
width: 100%;
font-size: 14px;
line-height: 24px;
height: 24px;
color: #666;
font-weight: bold;
margin-top: 5px;
}
.main .case li .w02 a {
display: block;
float: left;
margin-right: 5px;
color: #ffc700;
}
.main .case li .w03 {
width: 100%;
font-weight: bold;
}
.main .case li .w03 a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
width: 100%;
font-size: 16px;
line-height: 26px;
height: 52px;
overflow: hidden;
}
.main .case li .w03 a:hover {
color: #ffc700;
}
.main .case li .w04 {
margin-top: 5px;
font-weight: bold;
}
.main .case li .w04 a {
display: block;
font-size: 14px;
line-height: 20px;
height: 20px;
font-weight: bold;
color: #666;
float: left;
overflow: hidden;
}
.main .case li .w04 a b {
display: block;
width: 20px;
height: 20px;
border-radius: 100%;
overflow: hidden;
background-color: #ffc700;
float: right;
margin-left: 10px;
}
.main .case li .w04 a b img {
display: block;
height: 6px;
margin: 7px auto;
}
.main .case li .w04 a:hover {
color: #ffc700;
}
}
/*文章页*/
@media screen and (min-width:1600px) {
.ny {
width: 84%;
margin: 4.9479vw auto;
position: relative;
z-index: 1;
}
.ny .bt {
width: 100%;
}
.ny .bt b {
display: block;
font-size: 24px;
line-height: 34px;
color: #333;
}
.ny .bt span {
display: block;
font-size: 14px;
line-height: 24px;
color: #333;
margin-top: 10px;
}
.ny .bt p {
display: block;
margin-top: 10px;
width: 100px;
height: 2px;
background-color: #333;
}
.ny .wen {
margin-top: 25px;
font-size: 14px;
line-height: 24px;
}
.ny .wen img {
max-width: 100%;
height: auto;
margin-top: 5px;
margin-bottom: 5px;
}
#portfolio-nav {
width: 100%;
height: 40px;
padding: 30px 0;
margin: 25px auto;
margin-bottom: -30px;
position: relative;
vertical-align: middle;
text-align: center;
border-top: 1px solid #cacaca;
}
#portfolio-nav .fh {
display: block;
width: 40px;
height: 40px;
position: absolute;
left: 50%;
margin-left: -20px;
top: 50%;
margin-top: -20px;
}
#portfolio-nav .fh p {
cursor: pointer;
display: block;
margin: auto;
float: left;
margin-left: 17px;
margin-top: 17px;
position: relative;
background-position: 11px center;
background-repeat: no-repeat;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
font-size: 20px;
width: 40px;
height: 40px;
}
#portfolio-nav .fh i {
width: 6px;
height: 6px;
display: block;
border-radius: 0;
transition: all 0.25s cubic-bezier(0.12, 0.75, 0.4, 1);
-webkit-transition: all 0.25s cubic-bezier(0.12, 0.75, 0.4, 1);
font-size: 20px;
left: 18px;
top: 22px;
color: #888;
background-color: #888;
box-shadow: -0.5em 0 #888, -0.5em 0.5em #888, 0.5em 0 #888, 0.5em -0.5em #888, 0 -0.5em #888, -0.5em -0.5em #888, 0 0.5em #888, 0.5em 0.5em #888;
}
#portfolio-nav .fh:hover p i {
background-color: #333;
color: #333;
box-shadow: -0.6em 0 #333, -0.6em 0.6em #333, 0.6em 0 #333, 0.6em -0.6em #333, 0 -0.6em #333, -0.6em -0.6em #333, 0 0.6em #333, 0.6em 0.6em #333;
}
#portfolio-nav .prev {
float: left;
cursor: pointer;
display: block;
font-size: 14px;
line-height: 40px;
max-width: calc(50% - 40px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#portfolio-nav .prev p {
display: block;
float: left;
width: 30px;
transition: all 0.5s cubic-bezier(0.4, 0.5, 0.2, 1.2);
position: relative;
height: 40px;
margin-right: 10px;
}
#portfolio-nav .prev .ico {
display: block;
float: left;
width: 30px;
height: 40px;
background: url(../images/zz.png) no-repeat left center;
background-size: 10px 16px;
}
#portfolio-nav .prev .line {
width: 0px;
height: 2px;
position: absolute;
left: 0;
top: 50%;
transition: all 0.5s cubic-bezier(0.4, 0.5, 0.2, 1.2);
margin-top: -1px;
background: #000;
}
#portfolio-nav .prev:hover p {
width: 40px;
}
#portfolio-nav .prev:hover .line {
width: 30px;
}
#portfolio-nav .next {
float: right;
cursor: pointer;
display: block;
font-size: 14px;
line-height: 40px;
max-width: calc(50% - 40px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#portfolio-nav .next p {
display: block;
float: right;
width: 30px;
transition: all 0.5s cubic-bezier(0.4, 0.5, 0.2, 1.2);
position: relative;
height: 40px;
margin-left: 10px;
}
#portfolio-nav .next .ico {
display: block;
float: right;
width: 30px;
height: 40px;
background: url(../images/yy.png) no-repeat right center;
background-size: 10px 16px;
}
#portfolio-nav .next .line {
width: 0px;
height: 2px;
position: absolute;
right: 0;
top: 50%;
transition: all 0.5s cubic-bezier(0.4, 0.5, 0.2, 1.2);
margin-top: -1px;
background: #000;
}
#portfolio-nav .next:hover p {
width: 40px;
}
#portfolio-nav .next:hover .line {
width: 30px;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.ny {
width: 90%;
margin: 4.9479vw auto;
position: relative;
z-index: 1;
}
.ny .bt {
width: 100%;
}
.ny .bt b {
display: block;
font-size: 20px;
line-height: 30px;
color: #333;
}
.ny .bt span {
display: block;
font-size: 14px;
line-height: 24px;
color: #333;
margin-top: 5px;
}
.ny .bt p {
display: block;
margin-top: 5px;
width: 80px;
height: 2px;
background-color: #333;
}
.ny .wen {
margin-top: 20px;
font-size: 14px;
line-height: 24px;
}
.ny .wen img {
max-width: 100%;
height: auto;
margin-top: 5px;
margin-bottom: 5px;
}
#portfolio-nav {
width: 100%;
height: 40px;
padding: 20px 0;
margin: 20px auto;
margin-bottom: -20px;
position: relative;
vertical-align: middle;
text-align: center;
border-top: 1px solid #cacaca;
}
#portfolio-nav .fh {
display: block;
width: 40px;
height: 40px;
position: absolute;
left: 50%;
margin-left: -20px;
top: 50%;
margin-top: -20px;
}
#portfolio-nav .fh p {
cursor: pointer;
display: block;
margin: auto;
float: left;
margin-left: 17px;
margin-top: 17px;
position: relative;
background-position: 11px center;
background-repeat: no-repeat;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
font-size: 20px;
width: 40px;
height: 40px;
}
#portfolio-nav .fh i {
width: 6px;
height: 6px;
display: block;
border-radius: 0;
transition: all 0.25s cubic-bezier(0.12, 0.75, 0.4, 1);
-webkit-transition: all 0.25s cubic-bezier(0.12, 0.75, 0.4, 1);
font-size: 20px;
left: 18px;
top: 22px;
color: #888;
background-color: #888;
box-shadow: -0.5em 0 #888, -0.5em 0.5em #888, 0.5em 0 #888, 0.5em -0.5em #888, 0 -0.5em #888, -0.5em -0.5em #888, 0 0.5em #888, 0.5em 0.5em #888;
}
#portfolio-nav .fh:hover p i {
background-color: #333;
color: #333;
box-shadow: -0.6em 0 #333, -0.6em 0.6em #333, 0.6em 0 #333, 0.6em -0.6em #333, 0 -0.6em #333, -0.6em -0.6em #333, 0 0.6em #333, 0.6em 0.6em #333;
}
#portfolio-nav .prev {
float: left;
cursor: pointer;
display: block;
font-size: 14px;
line-height: 40px;
max-width: calc(50% - 40px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#portfolio-nav .prev p {
display: block;
float: left;
width: 30px;
transition: all 0.5s cubic-bezier(0.4, 0.5, 0.2, 1.2);
position: relative;
height: 40px;
margin-right: 10px;
}
#portfolio-nav .prev .ico {
display: block;
float: left;
width: 30px;
height: 40px;
background: url(../images/zz.png) no-repeat left center;
background-size: 10px 16px;
}
#portfolio-nav .prev .line {
width: 0px;
height: 2px;
position: absolute;
left: 0;
top: 50%;
transition: all 0.5s cubic-bezier(0.4, 0.5, 0.2, 1.2);
margin-top: -1px;
background: #000;
}
#portfolio-nav .prev:hover p {
width: 40px;
}
#portfolio-nav .prev:hover .line {
width: 30px;
}
#portfolio-nav .next {
float: right;
cursor: pointer;
display: block;
font-size: 14px;
line-height: 40px;
max-width: calc(50% - 40px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#portfolio-nav .next p {
display: block;
float: right;
width: 30px;
transition: all 0.5s cubic-bezier(0.4, 0.5, 0.2, 1.2);
position: relative;
height: 40px;
margin-left: 10px;
}
#portfolio-nav .next .ico {
display: block;
float: right;
width: 30px;
height: 40px;
background: url(../images/yy.png) no-repeat right center;
background-size: 10px 16px;
}
#portfolio-nav .next .line {
width: 0px;
height: 2px;
position: absolute;
right: 0;
top: 50%;
transition: all 0.5s cubic-bezier(0.4, 0.5, 0.2, 1.2);
margin-top: -1px;
background: #000;
}
#portfolio-nav .next:hover p {
width: 40px;
}
#portfolio-nav .next:hover .line {
width: 30px;
}
}
@media only screen and (max-width:1023px) {
.ny {
width: 94%;
margin: 35px auto;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.ny .bt {
width: 100%;
}
.ny .bt b {
display: block;
font-size: 16px;
line-height: 26px;
color: #333;
}
.ny .bt span {
display: block;
font-size: 14px;
line-height: 24px;
color: #333;
}
.ny .bt p {
display: block;
margin-top: 5px;
width: 60px;
height: 2px;
background-color: #333;
}
.ny .wen {
margin-top: 10px;
font-size: 14px;
line-height: 24px;
}
.ny .wen img {
max-width: 100%;
height: auto;
margin-top: 5px;
margin-bottom: 5px;
}
#portfolio-nav {
width: 100%;
overflow: hidden;
padding: 15px 0;
margin: auto;
margin-top: 10px;
position: relative;
vertical-align: middle;
text-align: center;
border-top: 1px solid #cacaca;
}
#portfolio-nav .fh {
display: none;
}
#portfolio-nav .prev {
float: left;
cursor: pointer;
display: block;
font-size: 14px;
line-height: 30px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
#portfolio-nav .prev p {
display: block;
float: left;
width: 10px;
transition: all 0.5s cubic-bezier(0.4, 0.5, 0.2, 1.2);
position: relative;
height: 30px;
margin-right: 10px;
}
#portfolio-nav .prev .ico {
display: block;
float: left;
width: 30px;
height: 30px;
background: url(../images/zz.png) no-repeat left center;
background-size: 10px 16px;
}
#portfolio-nav .next {
float: right;
cursor: pointer;
display: block;
font-size: 14px;
line-height: 30px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: right;
}
#portfolio-nav .next p {
display: block;
float: right;
width: 10px;
transition: all 0.5s cubic-bezier(0.4, 0.5, 0.2, 1.2);
position: relative;
height: 30px;
margin-left: 10px;
}
#portfolio-nav .next .ico {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/yy.png) no-repeat right center;
background-size: 10px 16px;
}
}
/*專欄分享-技術文章*/
@media screen and (min-width:1600px) {
.main .news {
width: 100%;
position: relative;
display: block;
}
.main .news li {
width: 100%;
margin-top: 2.08vw;
display: flex;
align-items: center;
overflow: hidden;
}
.main .news li .tu {
width: 400px;
}
.main .news li .tu a {
width: 100%;
padding-top: 280px;
display: block;
position: relative;
overflow: hidden;
}
.main .news li .tu a img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.main .news li:hover .tu a img {
transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
}
.main .news li .wen {
width: calc(96.875% - 400px);
margin-left: 5%;
}
.main .news li .wen .w01 {
margin-top: -5px;
}
.main .news li .wen .w01 a {
width: 100%;
font-size: 20px;
line-height: 30px;
height: 30px;
font-weight: bold;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.main .news li .wen .w01 a:hover {
color: #ffc700;
}
.main .news li .wen .w02 {
margin-top: 5px;
font-size: 16px;
line-height: 26px;
color: #666;
}
.main .news li .wen .w03 {
margin-top: 15px;
border-top: 1px solid #eee;
padding-top: 18px;
font-size: 16px;
line-height: 30px;
height: 90px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.main .news li .wen .w04 {
margin-top: 18px;
}
.main .news li .wen .w04 a {
display: flex;
align-items: center;
padding: 0 1.25vw;
font-size: 16px;
height: 40px;
line-height: 40px;
border-radius: 10px;
background-color: #2d3246;
color: #fff;
float: left;
overflow: hidden;
}
.main .news li .wen .w04 a img {
display: block;
margin-left: .52vw;
}
.main .news li .wen .w04 a:hover {
background-color: #ffc700;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.main .news {
width: 100%;
position: relative;
display: block;
}
.main .news li {
width: 100%;
margin-top: 2.08vw;
display: flex;
align-items: center;
overflow: hidden;
}
.main .news li .tu {
width: 350px;
}
.main .news li .tu a {
width: 100%;
padding-top: 245px;
display: block;
position: relative;
overflow: hidden;
}
.main .news li .tu a img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.main .news li:hover .tu a img {
transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
}
.main .news li .wen {
width: calc(96.875% - 350px);
margin-left: 5%;
}
.main .news li .wen .w01 {
margin-top: -5px;
}
.main .news li .wen .w01 a {
width: 100%;
font-size: 18px;
line-height: 28px;
height: 28px;
font-weight: bold;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.main .news li .wen .w01 a:hover {
color: #ffc700;
}
.main .news li .wen .w02 {
margin-top: 5px;
font-size: 15px;
line-height: 25px;
color: #666;
}
.main .news li .wen .w03 {
margin-top: 10px;
border-top: 1px solid #eee;
padding-top: 14px;
font-size: 15px;
line-height: 27px;
height: 81px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.main .news li .wen .w04 {
margin-top: 14px;
}
.main .news li .wen .w04 a {
display: flex;
align-items: center;
padding: 0 1.25vw;
font-size: 15px;
height: 37px;
line-height: 37px;
border-radius: 10px;
background-color: #2d3246;
color: #fff;
float: left;
overflow: hidden;
}
.main .news li .wen .w04 a img {
display: block;
margin-left: .52vw;
}
.main .news li .wen .w04 a:hover {
background-color: #ffc700;
}
}
@media only screen and (max-width:1023px) {
.main .news {
width: 100%;
position: relative;
display: block;
}
.main .news li {
width: 100%;
margin-top: 20px;
overflow: hidden;
}
.main .news li .tu {
width: 100%;
}
.main .news li .tu a {
width: 100%;
padding-top: 70%;
display: block;
position: relative;
overflow: hidden;
}
.main .news li .tu a img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.main .news li:hover .tu a img {
transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
}
.main .news li .wen {
width: 100%;
}
.main .news li .wen .w01 {
margin-top: 10px;
}
.main .news li .wen .w01 a {
width: 100%;
font-size: 16px;
line-height: 26px;
height: 26px;
font-weight: bold;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.main .news li .wen .w01 a:hover {
color: #ffc700;
}
.main .news li .wen .w02 {
font-size: 14px;
line-height: 24px;
color: #666;
}
.main .news li .wen .w03 {
margin-top: 5px;
border-top: 1px solid #eee;
padding-top: 10px;
font-size: 14px;
line-height: 24px;
height: 72px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.main .news li .wen .w04 {
margin-top: 10px;
}
.main .news li .wen .w04 a {
display: flex;
align-items: center;
padding: 0 10px;
font-size: 14px;
height: 34px;
line-height: 34px;
border-radius: 5px;
background-color: #2d3246;
color: #fff;
float: left;
overflow: hidden;
}
.main .news li .wen .w04 a img {
display: block;
margin-left: 5px;
}
.main .news li .wen .w04 a:hover {
background-color: #ffc700;
}
}
/*專欄分享-資料下載*/
@media screen and (min-width:1600px) {
.main .fen {
width: 100%;
position: relative;
display: flex;
justify-content: center;
flex-wrap: wrap;
padding-top: 1.04vw;
}
.main .fen a {
display: block;
padding: 0 1.04vw;
min-width: 140px;
font-size: 16px;
height: 46px;
line-height: 46px;
border-radius: 46px;
overflow: hidden;
background-color: #f5f5f5;
text-align: center;
margin: 1.04vw .52vw;
margin-bottom: 0;
}
.main .fen a:hover, .main .fen a.on {
background-color: #ffc700;
color: #fff;
}
.main .down {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.main .down li {
width: 31.25%;
display: block;
backgrou\nd-color: #f5f5f5;
margin-top: 2.08vw;
margin-left: 3.125%;
padding: 2.08vw;
box-sizing: border-box;
}
.main .down li:nth-child(3n+1) {
margin-left: 0;
}
.main .down li .left {
width: 26.19%;
float: left;
}
.main .down li .left img {
width: 100%;
display: block;
}
.main .down li .right {
width: calc(73.81% - 1.5625vw);
float: right;
margin-top: 0.36vw;
}
.main .down li .right .w01 {
padding-left: 28px;
background-image: url(../images/down.png);
background-position: left 4px;
background-repeat: no-repeat;
font-size: 18px;
line-height: 28px;
}
.main .down li:hover .right .w01 {
color: #ffc700;
}
.main .down li .right .w02 {
font-size: 16px;
line-height: 26px;
color: #666;
margin: 0.52vw 0;
}
.main .down li .right .w03 {
display: flex;
}
.main .down li .right .w03 a {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
height: 40px;
line-height: 20px;
background-color: #fff;
overflow: hidden;
overflow: hidden;
margin-right: 1.04vw;
padding: 0 .52vw;
}
.main .down li .right .w03 a:last-child {
margin-right: 0;
}
.main .down li .right .w03 a img {
display: block;
margin-left: .52vw;
}
.main .down li .right .w03 a img.img02 {
display: none;
}
.main .down li .right .w03 a:hover {
background-color: #ffc700;
color: #fff;
}
.main .down li .right .w03 a:hover img.img01 {
display: none;
}
.main .down li .right .w03 a:hover img.img02 {
display: block;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.main .fen {
width: 100%;
position: relative;
display: flex;
justify-content: center;
flex-wrap: wrap;
padding-top: 1.04vw;
}
.main .fen a {
display: block;
padding: 0 1.04vw;
min-width: 130px;
font-size: 15px;
height: 42px;
line-height: 42px;
border-radius: 46px;
overflow: hidden;
background-color: #f5f5f5;
text-align: center;
margin: 1.04vw .52vw;
margin-bottom: 0;
}
.main .fen a:hover, .main .fen a.on {
background-color: #ffc700;
color: #fff;
}
.main .down {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.main .down li {
width: 31.25%;
display: block;
backgrou\nd-color: #f5f5f5;
margin-top: 2.08vw;
margin-left: 3.125%;
padding: 2.08vw;
box-sizing: border-box;
}
.main .down li:nth-child(3n+1) {
margin-left: 0;
}
.main .down li .left {
width: 26.19%;
float: left;
}
.main .down li .left img {
width: 100%;
display: block;
}
.main .down li .right {
width: calc(73.81% - 1.5625vw);
float: right;
margin-top: 0.36vw;
}
.main .down li .right .w01 {
padding-left: 26px;
background-image: url(../images/down.png);
background-position: left 5px;
background-repeat: no-repeat;
font-size: 17px;
line-height: 27px;
background-size: 17px auto;
}
.main .down li:hover .right .w01 {
color: #ffc700;
}
.main .down li .right .w02 {
font-size: 15px;
line-height: 25px;
color: #666;
margin: 0.52vw 0;
}
.main .down li .right .w03 {
display: flex;
}
.main .down li .right .w03 a {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
height: 38px;
line-height: 19px;
background-color: #fff;
overflow: hidden;
overflow: hidden;
margin-right: 1.04vw;
padding: 0 .52vw;
}
.main .down li .right .w03 a:last-child {
margin-right: 0;
}
.main .down li .right .w03 a img {
display: block;
margin-left: .52vw;
}
.main .down li .right .w03 a img.img02 {
display: none;
}
.main .down li .right .w03 a:hover {
background-color: #ffc700;
color: #fff;
}
.main .down li .right .w03 a:hover img.img01 {
display: none;
}
.main .down li .right .w03 a:hover img.img02 {
display: block;
}
}
@media only screen and (max-width:1023px) {
.main .fen {
width: 100%;
position: relative;
display: flex;
justify-content: center;
flex-wrap: wrap;
padding-top: 10px;
}
.main .fen a {
display: block;
padding: 0 10px;
min-width: 120px;
font-size: 14px;
height: 38px;
line-height: 38px;
border-radius: 46px;
overflow: hidden;
background-color: #f5f5f5;
text-align: center;
margin: 10px 5px;
margin-bottom: 0;
}
.main .fen a:hover, .main .fen a.on {
background-color: #ffc700;
color: #fff;
}
.main .down {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.main .down li {
width: 100%;
display: block;
backgrou\nd-color: #f5f5f5;
margin-top: 20px;
padding: 15px;
box-sizing: border-box;
}
.main .down li .left {
width: 26.19%;
float: left;
}
.main .down li .left img {
width: 100%;
display: block;
}
.main .down li .right {
width: calc(73.81% - 15px);
float: right;
}
.main .down li .right .w01 {
padding-left: 24px;
background-image: url(../images/down.png);
background-position: left 5px;
background-repeat: no-repeat;
font-size: 16px;
line-height: 26px;
background-size: 14px auto;
}
.main .down li:hover .right .w01 {
color: #ffc700;
}
.main .down li .right .w02 {
font-size: 14px;
line-height: 24px;
color: #666;
margin: 5px 0;
}
.main .down li .right .w03 {
display: flex;
}
.main .down li .right .w03 a {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
height: 36px;
line-height: 18px;
background-color: #fff;
overflow: hidden;
overflow: hidden;
margin-right: 10px;
padding: 0 5px;
}
.main .down li .right .w03 a:last-child {
margin-right: 0;
}
.main .down li .right .w03 a img {
display: block;
margin-left: 5px;
}
.main .down li .right .w03 a img.img02 {
display: none;
}
.main .down li .right .w03 a:hover {
background-color: #ffc700;
color: #fff;
}
.main .down li .right .w03 a:hover img.img01 {
display: none;
}
.main .down li .right .w03 a:hover img.img02 {
display: block;
}
}
/*專欄分享-常見問題*/
@media screen and (min-width:1600px) {
.main .news01 {
width: 100%;
display: block;
}
.main .news01 li {
display: flex;
align-items: center;
border-bottom: 1px solid #ddd;
}
.main .news01 li .left {
padding: 1.82vw 2.6vw;
text-align: center;
}
.main .news01 li .left span {
display: block;
font-size: 16px;
height: 24px;
line-height: 24px;
color: #666;
}
.main .news01 li .left p {
display: block;
font-size: 40px;
height: 42px;
line-height: 42px;
color: #333;
}
.main .news01 li .line {
width: 1px;
height: 60px;
background-color: #ddd;
margin: 2.08vw 0;
}
.main .news01 li .right {
padding: 1.82vw 2.6vw;
padding-top: 0;
flex: 1;
overflow: hidden;
}
.main .news01 li .right span {
width: calc(100% + 41px);
display: flex;
justify-content: flex-start;
align-items: flex-start;
height: 30px;
position: relative;
padding-top: 1.82vw;
overflow: hidden;
}
.main .news01 li .right span a {
font-size: 20px;
line-height: 30px;
height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.main .news01 li .right span a:hover {
color: #ffc700;
}
.main .news01 li .right span img {
position: relative;
margin-top: -0.78125vw;
width: 31px;
margin-left: 10px;
display: block;
}
.main .news01 li .right p {
width: 100%;
display: block;
font-size: 16px;
line-height: 26px;
height: 26px;
color: #666;
margin-top: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.main .news01 {
width: 100%;
display: block;
}
.main .news01 li {
display: flex;
align-items: center;
border-bottom: 1px solid #ddd;
}
.main .news01 li .left {
padding: 1.82vw 2.6vw;
text-align: center;
}
.main .news01 li .left span {
display: block;
font-size: 14px;
height: 22px;
line-height: 22px;
color: #666;
}
.main .news01 li .left p {
display: block;
font-size: 36px;
height: 38px;
line-height: 38px;
color: #333;
}
.main .news01 li .line {
width: 1px;
height: 60px;
background-color: #ddd;
margin: 2.08vw 0;
}
.main .news01 li .right {
padding: 1.82vw 2.6vw;
padding-top: 0;
flex: 1;
overflow: hidden;
}
.main .news01 li .right span {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
height: 28px;
position: relative;
padding-top: 1.82vw;
overflow: hidden;
}
.main .news01 li .right span a {
font-size: 18px;
line-height: 28px;
height: 28px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.main .news01 li .right span a:hover {
color: #ffc700;
}
.main .news01 li .right span img {
position: relative;
margin-top: -0.78125vw;
width: 31px;
margin-left: 5px;
display: block;
}
.main .news01 li .right p {
width: 100%;
display: block;
font-size: 16px;
line-height: 26px;
height: 26px;
color: #666;
margin-top: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media only screen and (max-width:1023px) {
.main .news01 {
width: 100%;
display: block;
}
.main .news01 li {
display: flex;
align-items: center;
border-bottom: 1px solid #ddd;
}
.main .news01 li .left {
padding: 15px 0;
text-align: center;
}
.main .news01 li .left span {
display: block;
font-size: 12px;
height: 20px;
line-height: 20px;
color: #666;
}
.main .news01 li .left p {
display: block;
font-size: 30px;
height: 32px;
line-height: 32px;
color: #333;
}
.main .news01 li .line {
width: 1px;
height: 54px;
background-color: #ddd;
margin: 20px 10px;
}
.main .news01 li .right {
padding-bottom: 15px;
flex: 1;
overflow: hidden;
}
.main .news01 li .right span {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
height: 26px;
position: relative;
padding-top: 15px;
overflow: hidden;
}
.main .news01 li .right span a {
font-size: 16px;
line-height: 26px;
height: 26px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.main .news01 li .right span a:hover {
color: #ffc700;
}
.main .news01 li .right span img {
position: relative;
margin-top: -5px;
width: 31px;
margin-left: 5px;
display: block;
}
.main .news01 li .right p {
width: 100%;
display: block;
font-size: 14px;
line-height: 24px;
height: 24px;
color: #666;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 36px;
box-sizing: border-box;
}
}
/*联系我们*/
@media screen and (min-width:1600px) {
.main {
background-position: 8% bottom;
background-repeat: no-repeat;
background-size: 28.64583% auto;
}
.main .lx {
width: 100%;
}
.main .lx .left {
width: 34.375%;
float: left;
margin-top: 1.82vw;
}
.main .lx .left .w01 {
font-size: 24px;
line-height: 34px;
font-weight: bold;
}
.main .lx .left .w02 {
width: 60px;
height: 2px;
background-color: #ffc700;
margin-top: .26vw;
}
.main .lx .left .w03 {
font-size: 16px;
line-height: 26px;
margin-top: 0.78125vw;
margin-bottom: 1.5625vw;
}
.main .lx .left .w04 {
width: 100%;
padding-top: 0.21vw;
}
.main .lx .left .w04 p {
display: block;
font-size: 16px;
line-height: 26px;
margin-top: 0.73vw;
}
.main .lx .left .w04 p img {
display: block;
height: 20px;
float: left;
margin-top: 3px;
margin-right: .52vw;
}
.main .lx .right {
width: 59.375%;
float: right;
}
.main .lx .right .inp {
width: 47.37%;
margin-top: 1.5625vw;
float: left;
margin-left: 5.26%;
display: flex;
border-bottom: 1px solid #ddd;
padding-bottom: 0.42vw;
}
.main .lx .right .inp:nth-child(2n+1) {
clear: left;
float: left;
margin-left: 0;
}
.main .lx .right .inp .zc {
font-size: 16px;
line-height: 36px;
height: 36px;
}
.main .lx .right .inp .yc {
flex: 1;
margin-left: 0.78125vw;
}
.main .lx .right .inp .yc input {
width: 100%;
display: block;
font-size: 16px;
line-height: 36px;
height: 36px;
overflow: hidden;
}
.main .lx .right .inp .yc01 {
flex: 1;
margin-left: 0.78125vw;
display: flex;
align-items: center;
position: relative;
}
.main .lx .right .inp .yc01 .number {
width: calc(100% - 40px);
display: block;
font-size: 16px;
line-height: 36px;
height: 36px;
overflow: hidden;
padding-left: .78125vw;
position: relative;
box-sizing: border-box;
z-index: 3;
background-color: #fff;
}
#mobile-number {
display: none
}
#number {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 90px;
display: block;
padding-left: 25px;
box-sizing: border-box;
font-size: 16px;
line-height: 36px;
height: 36px;
}
.main .lx .right .inp01 {
width: 100%;
margin-top: 1.5625vw;
float: left;
border-bottom: 1px solid #ddd;
padding-bottom: 0.42vw;
}
.main .lx .right .inp01 .zc {
font-size: 16px;
line-height: 36px;
height: 36px;
}
.main .lx .right .inp01 .yc {
width: 100%;
}
.main .lx .right .inp01 .yc textarea {
width: 100%;
font-size: 16px;
line-height: 26px;
height: 100px;
display: block;
font-family: inherit;
}
.main .lx .right .inp02 {
margin-top: 2.6vw;
width: 100%;
float: left;
}
.main .lx .right .inp02 input {
width: 180px;
height: 46px;
line-height: 46px;
font-size: 16px;
text-align: center;
display: block;
cursor: pointer;
border-radius: 46px;
overflow: hidden;
background-color: #ffc700;
color: #fff;
}
.main .lx .right .inp02 input:hover {
background-color: #2d3246;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.main {
background-position: 5% bottom;
background-repeat: no-repeat;
background-size: 28.64583% auto;
}
.main .lx {
width: 100%;
}
.main .lx .left {
width: 34.375%;
float: left;
margin-top: 1.82vw;
}
.main .lx .left .w01 {
font-size: 20px;
line-height: 30px;
font-weight: bold;
}
.main .lx .left .w02 {
width: 50px;
height: 2px;
background-color: #ffc700;
margin-top: .26vw;
}
.main .lx .left .w03 {
font-size: 15px;
line-height: 25px;
margin-top: 0.78125vw;
margin-bottom: 1.5625vw;
}
.main .lx .left .w04 {
width: 100%;
padding-top: 0.21vw;
}
.main .lx .left .w04 p {
display: block;
font-size: 15px;
line-height: 25px;
margin-top: 0.73vw;
}
.main .lx .left .w04 p img {
display: block;
height: 18px;
float: left;
margin-top: 3.5px;
margin-right: .52vw;
}
.main .lx .right {
width: 59.375%;
float: right;
}
.main .lx .right .inp {
width: 47.37%;
margin-top: 1.5625vw;
float: left;
margin-left: 5.26%;
display: flex;
border-bottom: 1px solid #ddd;
padding-bottom: 0.42vw;
}
.main .lx .right .inp:nth-child(2n+1) {
clear: left;
float: left;
margin-left: 0;
}
.main .lx .right .inp .zc {
font-size: 15px;
line-height: 31px;
height: 31px;
}
.main .lx .right .inp .yc {
flex: 1;
margin-left: 0.78125vw;
}
.main .lx .right .inp .yc input {
width: 100%;
display: block;
font-size: 15px;
line-height: 31px;
height: 31px;
overflow: hidden;
}
.main .lx .right .inp .yc01 {
flex: 1;
margin-left: 0.78125vw;
display: flex;
align-items: center;
position: relative;
}
.main .lx .right .inp .yc01 .number {
width: calc(100% - 40px);
display: block;
font-size: 15px;
line-height: 31px;
height: 31px;
overflow: hidden;
padding-left: .78125vw;
position: relative;
box-sizing: border-box;
z-index: 3;
background-color: #fff;
}
#mobile-number {
display: none
}
#number {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 90px;
display: block;
padding-left: 25px;
box-sizing: border-box;
font-size: 15px;
line-height: 31px;
height: 31px;
}
.main .lx .right .inp01 {
width: 100%;
margin-top: 1.5625vw;
float: left;
border-bottom: 1px solid #ddd;
padding-bottom: 0.42vw;
}
.main .lx .right .inp01 .zc {
font-size: 15px;
line-height: 31px;
height: 31px;
}
.main .lx .right .inp01 .yc {
width: 100%;
}
.main .lx .right .inp01 .yc textarea {
width: 100%;
font-size: 15px;
line-height: 25px;
height: 100px;
display: block;
font-family: inherit;
}
.main .lx .right .inp02 {
margin-top: 2.6vw;
width: 100%;
float: left;
}
.main .lx .right .inp02 input {
width: 160px;
height: 42px;
line-height: 42px;
font-size: 15px;
text-align: center;
display: block;
cursor: pointer;
border-radius: 46px;
overflow: hidden;
background-color: #ffc700;
color: #fff;
}
.main .lx .right .inp02 input:hover {
background-color: #2d3246;
}
}
@media only screen and (max-width:1023px) {
.main {
background-position: 3% bottom;
background-repeat: no-repeat;
background-size: 28.64583% auto;
}
.main .lx {
width: 100%;
}
.main .lx .left {
width: 100%;
float: left;
margin-top: 15px;
}
.main .lx .left .w01 {
font-size: 16px;
line-height: 26px;
font-weight: bold;
}
.main .lx .left .w02 {
width: 40px;
height: 2px;
background-color: #ffc700;
margin-top: 5px;
}
.main .lx .left .w03 {
font-size: 14px;
line-height: 24px;
margin-top: 10px;
margin-bottom: 10px;
}
.main .lx .left .w04 {
width: 100%;
padding-top: 5px;
}
.main .lx .left .w04 p {
display: block;
font-size: 14px;
line-height: 24px;
margin-top: 0.73vw;
}
.main .lx .left .w04 p img {
display: block;
height: 16px;
float: left;
margin-top: 4px;
margin-right: 5px;
}
.main .lx .right {
width: 100%;
float: right;
}
.main .lx .right .inp {
width: 100%;
margin-top: 10px;
float: left;
display: flex;
border-bottom: 1px solid #ddd;
}
.main .lx .right .inp .zc {
font-size: 14px;
line-height: 34px;
height: 34px;
}
.main .lx .right .inp .yc {
flex: 1;
margin-left: 10px;
}
.main .lx .right .inp .yc input {
width: 100%;
display: block;
font-size: 14px;
line-height: 34px;
height: 34px;
overflow: hidden;
}
.main .lx .right .inp .yc01 {
flex: 1;
margin-left: 10px;
display: flex;
align-items: center;
position: relative;
}
.main .lx .right .inp .yc01 .number {
width: calc(100% - 40px);
display: block;
font-size: 14px;
line-height: 34px;
height: 34px;
overflow: hidden;
padding-left: .78125vw;
position: relative;
box-sizing: border-box;
z-index: 3;
background-color: #fff;
}
#mobile-number {
display: none
}
#number {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 90px;
display: block;
padding-left: 25px;
box-sizing: border-box;
font-size: 14px;
line-height: 34px;
height: 34px;
}
.main .lx .right .inp01 {
width: 100%;
margin-top: 10px;
float: left;
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
}
.main .lx .right .inp01 .zc {
font-size: 14px;
line-height: 34px;
height: 34px;
}
.main .lx .right .inp01 .yc {
width: 100%;
}
.main .lx .right .inp01 .yc textarea {
width: 100%;
font-size: 14px;
line-height: 24px;
height: 100px;
display: block;
font-family: inherit;
}
.main .lx .right .inp02 {
margin-top: 20px;
width: 100%;
float: left;
}
.main .lx .right .inp02 input {
width: 140px;
height: 38px;
line-height: 38px;
font-size: 14px;
text-align: center;
display: block;
cursor: pointer;
border-radius: 46px;
overflow: hidden;
background-color: #ffc700;
color: #fff;
}
.main .lx .right .inp02 input:hover {
background-color: #2d3246;
}
}
/*隐私政策*/
@media screen and (min-width:1600px) {
.main .ys {
width: 100%;
margin-top: 2.34375vw;
}
.main .ys .left {
width: 46.875%;
float: left;
}
.main .ys .right {
width: 46.875%;
float: right;
}
.main .ys .w01 {
font-size: 26px;
line-height: 36px;
font-weight: bold;
}
.main .ys .w02 {
font-size: 16px;
line-height: 30px;
margin-top: 1.458vw;
}
}
@media screen and (min-width:1024px) and (max-width:1599px) {
.main .ys {
width: 100%;
margin-top: 2.34375vw;
}
.main .ys .left {
width: 46.875%;
float: left;
}
.main .ys .right {
width: 46.875%;
float: right;
}
.main .ys .w01 {
font-size: 22px;
line-height: 32px;
font-weight: bold;
}
.main .ys .w02 {
font-size: 15px;
line-height: 27px;
margin-top: 1.458vw;
}
}
@media only screen and (max-width:1023px) {
.main .ys {
width: 100%;
}
.main .ys .left {
width: 100%;
float: left;
margin-top: 25px;
}
.main .ys .right {
width: 100%;
float: right;
margin-top: 20px;
}
.main .ys .w01 {
font-size: 18px;
line-height: 28px;
font-weight: bold;
}
.main .ys .w02 {
font-size: 14px;
line-height: 24px;
margin-top: 5px;
}
}
.cky-notice {
background: #fff;
border: 1px solid;
padding: 20px 26px;
box-shadow: 0 -1px 10px 0 #acabab4d;
border-radius: 6px;
border-color: #f4f4f4;
position: fixed;
width: 440px;
box-sizing: border-box;
z-index: 9999999;
border-radius: 6px;
left: 40px;
bottom: 40px;
}
.cky-notice .cky-title {
color: #212121;
font-weight: 700;
font-size: 18px;
line-height: 24px;
margin: 0 0 12px 0;
word-break: break-word;
}
.cky-notice-group {
font-size: 14px;
line-height: 24px;
font-weight: 400;
color: #212121;
}
.cky-notice-des {
color: #212121;
font-size: 14px;
line-height: 24px;
font-weight: 400;
}
.cky-notice-btn-wrapper {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.cky-btn {
flex: auto;
max-width: 100%;
font-size: 14px;
font-family: inherit;
line-height: 24px;
padding: 8px;
font-weight: 500;
border-radius: 2px;
cursor: pointer;
text-align: center;
text-transform: none;
min-height: 0;
overflow-wrap: break-word;
}
.cky-btn-reject {
color: #f9c532;
border: 2px solid #f9c532;
color: #f9c532;
background-color: transparent;
}
.cky-btn-accept {
background: #f9c532;
color: #fff;
border: 2px solid #f9c532;
}
.cky-btn:last-child {
margin-right: 0;
}
@media only screen and (max-width:1023px) {
.cky-notice {
max-width: calc(100% - 30px);
left: 15px;
bottom: 15px;
}
}