@charset "UTF-8";
html,
body,
.wrapper {
height: 100% !important;
}
a {
font-weight: 400;
color: #333333;
}
a:hover,
a:active,
a:focus {
color: #e14d57;
}
.theme-bg {
background-color: #191515;
}
.navcontentfixed {
width: 1380px;
margin: 0 auto;
}
.pt50.tc {
font-weight: 400;
color: rgba(255, 255, 255, 1);
font-size: 35px;
margin-top: 0px;
margin-bottom: 0px;
}
.screen {
width: 1380px;
margin: 0 auto;
padding: 0;
}
.header-home {
width: 100%;
height: 435px;
position: relative;
}
.bgc-image {
position: absolute;
top: 0;
width: 100%;
height: 435px;
background: url('../img/banner.jpg') no-repeat;
background-size: cover;
background-position: center center;
}
.phonestyle {
display: none;
}
#header2-text {
padding: 150px 0px 42px 0px;
text-align: left;
}
.leadtitle {
text-align: center;
font-size: 30px;
font-weight: 400;
color: #ffffff;
}
.lead {
font-size: 16px;
text-align: center;
color: rgba(255, 255, 255, 0.6);
margin-top: 30px;
line-height: 32px;
font-weight: 400;
margin-bottom: 54px;
padding: 0 35px;
}
/* 重写首页导航部分样式 */
.main-header {
width: 100%;
height: 60px;
position: fixed;
top: 0;
}
.skin-blue .main-header .navbar {
background-color: rgba(0, 0, 0, 0);
}
/* 重写首页导航部分样式 end*/
.row {
margin: 0;
padding: 0;
}
.contentfixed {
width: 1380px;
margin: 43px auto 80px auto;
}
/* 产品技术描述样式 */
.product-technology {
margin-top: 20px;
}
#pctab-title {
padding: 0 35px;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
#pctab-title > li {
padding: 0;
text-align: center;
}
#pctab-title > li a {
font-size: 20px;
}
#pctab-title::after {
content: '';
display: block;
clear: both;
visibility: hidden;
}
#pctab-title > li > a {
padding: 10px 0 16px;
line-height: 1;
border: none;
color: #ffffff;
background: transparent;
}
#pctab-title > li > a:active,
#pctab-title > li > a:focus {
color: #e14d57;
border: transparent;
background: transparent;
}
#pctab-title > li:hover,
#pctab-title > li.active {
border-bottom: 2px solid #e14d57;
}
.product-technology > li {
margin: 0px 57px;
}
.productTab {
display: flex;
justify-content: center;
border-bottom: 1px solid transparent;
}
.productTab::after {
content: '';
visibility: hidden;
clear: both;
display: block;
}
.productTab > li {
text-align: center;
font-size: 16px;
background-color: #383030;
border-radius: 4px;
margin: 12px 0;
margin-right: 24px;
padding: 0;
}
.productTab > li > a {
color: #fff;
}
.productTab > li.active > a,
.productTab > li.active > a:focus,
.productTab > li.active > a:hover {
color: #ffffff;
background-color: #e14d57;
border-radius: 4px;
border: transparent;
padding: 11px 24px;
margin: 0;
width: 100%;
}
.productTab > li:hover a {
color: #e14d57;
border: transparent;
background: transparent;
}
.move-tabs {
justify-content: flex-start;
}
.move-tabs > li {
float: none;
}
.secondtabs {
margin: 20px 0 32px 0;
display: flex;
justify-content: space-between;
}
.secondTabsContent {
width: 88%;
overflow: hidden;
margin: 0;
float: left;
}
.PCTab > li > a {
cursor: pointer;
display: inline-block;
width: 8px;
height: 8px;
margin-left: 32px;
background: rgba(178, 178, 178, 1);
border-radius: 50%;
}
.PCTab > li.active > a,
.PCTab > li.active > a:focus,
.PCTab > li.active > a:hover {
background-color: #e14d57;
border: transparent;
}
.PCTab {
width: 120px;
margin: 0 auto;
border: transparent;
}
.PCTab li {
margin: 0 8px;
}
.PCTab > li > a {
width: 8px;
height: 8px;
padding: 0;
margin: 0;
}
.openSC {
margin: 20px 0 32px 0;
display: flex;
justify-content: center;
}
.phonefontsize {
font-weight: 400;
font-size: 20px;
color: rgba(255, 255, 255, 0.6);
}
.product-pic {
width: 68%;
height: 521px;
}
.product-image {
width: 100%;
height: 100%;
}
.product-introduction,
.product-pic {
padding: 0;
}
.product-pic,
.product-introduction {
float: left;
}
.product-pic-div {
width: 100%;
height: 218px;
background-color: #f5f5f5;
}
.product-heading {
font-size: 28px;
margin-top: 79px;
font-weight: 400;
color: #ffffff;
}
.feature-heading {
color: #fff;
}
.feature-text {
color: rgba(255, 255, 255, 0.6);
}
.product-introduction {
width: 32%;
height: 521px;
padding-left: 34px;
background-color: #211c1c;
}
.product-span {
display: block;
width: 100%;
height: 1px;
background: rgba(225, 77, 87, 1);
margin-top: 23px;
}
.product-text {
font-size: 20px;
margin: 24px 0 0 0;
color: rgba(255, 255, 255, 0.6);
}
#span-svg {
display: inline-block;
width: 18px;
height: 24px;
background: url('../img/svg/APIFile.svg') repeat;
}
.intro-href {
width: 100%;
margin-top: 143px;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.intro-href > li {
list-style: none;
width: 150px;
height: 36px;
line-height: 36px;
border-radius: 17px;
border: 1px solid rgba(255, 255, 255, 0.5);
text-align: center;
font-size: 14px;
font-weight: 400;
margin-bottom: 22px;
margin-right: 24px;
}
.intro-href > li:hover {
border: 1px solid #e14d57;
background-color: #e14d57;
}
.intro-href > li > a {
display: block;
color: rgba(255, 255, 255);
}
.intro-href > li > a img {
margin-bottom: 5px;
display: none;
}
.product-hreftext {
margin-top: 70px;
text-align: left;
}
.product-hreftext b {
font-size: 14px;
font-weight: 400;
width: 150px;
height: 36px;
line-height: 36px;
border-radius: 17px;
border: 1px solid rgba(255, 255, 255, 0.85);
text-align: center;
display: block;
color: rgba(255, 255, 255);
margin-bottom: 8px;
}
.product-hreftext b:hover {
border: 1px solid #e14d57;
background-color: #e14d57;
}
.product-hreftext p {
color: rgba(255, 255, 255, 0.6);
margin-top: 8px;
}
.product-hreftext b > img {
margin-bottom: 5px;
display: none;
}
.feature {
margin-top: 50px;
}
.feature .pic1 {
padding: 13.5px;
}
.feature-text {
font-size: 17px;
}
/* 产品技术描述样式结束 */
.iclient-copyright {
color: #7d7d7d;
font-size: 13px !important;
text-align: center;
height: 54px;
line-height: 54px;
}
.iclient-footer {
border-top: 1px solid #ddd;
}
.html .tag,
.css .tag,
.javascript .keyword {
color: #3182bd;
}
.html .attr,
.css .attr,
.javascript .class,
.javascript .special {
color: #e6550d;
}
.banner-img-contaienr {
width: 438px;
height: 357px;
display: inline-block;
}
.radiusBtn {
display: block;
width: 124px;
height: 34px;
border-radius: 17px;
font-size: 14px;
font-weight: 400;
}
.radiusBtn.download {
background: rgba(225, 77, 87, 1);
color: rgba(255, 255, 255, 1);
}
.radiusBtn.download:hover {
background: rgba(244, 66, 78, 1);
}
.radiusBtn.code {
border: 1px solid rgba(255, 255, 255, 1);
color: rgba(255, 255, 255, 1);
box-sizing: content-box;
}
.radiusBtn.code:hover {
border: 1px solid rgba(225, 77, 87, 1);
color: rgba(225, 77, 87, 1);
}
.radiusBtn.code:hover svg path {
fill: rgba(225, 77, 87, 1);
}
.radiusBtn > div {
display: inline-block;
text-align: center;
line-height: 34px;
}
.radiusBtnimg {
height: 13px;
width: 13px;
margin-left: 8px;
margin-bottom: 4px;
}
#button_zip,
#button_sourceCode {
text-align: center;
padding-right: 10px;
}
.header-home .buttons .button-zip,
.header-home .buttons .button-sourceCode,
.header-home .buttons .button-examples {
display: inline-block;
}
.javascript {
border: 1px solid #e0e0e0;
}
#button_examples {
text-align: center;
}
.new-attributes {
width: 1380px;
margin: 0 auto 0;
text-align: left;
}
.new-attributes .box {
margin-bottom: 0;
}
.new-attributes .box .box-title {
color: #337ab7;
font-size: 16px;
}
.header-description {
padding: 0;
padding-left: 10px;
}
/* 产品,技术描述手机端内容滚动 */
.swiper-container {
--swiper-pagination-color: #e14d57;
}
.swiper-pagination-bullet {
background-color: #b2b2b2;
}
.swiper-pagination-bullet-active {
background-color: #e14d57;
}
.swiper-wrapper {
height: auto;
}
.swiper-pagination {
position: static !important;
margin-bottom: 26px;
}
.image-class {
text-align: center;
}
@media (max-width: 1460px) {
.screen,
.new-attributes,
.contentfixed {
width: 96%;
}
}
@media screen and (max-width: 992px) {
#pctab-title {
padding: 0;
}
#header2-text {
padding-top: 135px;
padding-bottom: 20px;
}
.banner-img-contaienr {
width: 100%;
margin-top: 30px;
}
.header-description {
margin-left: 0;
}
}
/*what's new里用到的样式*/
.new-attributes-start {
width: 100%;
padding-bottom: 132px;
background-color: #211c1c;
position: relative;
}
.first_title {
color: #fff;
margin: 0;
padding: 90px 0 27px;
}
.first_title > b {
font-size: 28px;
font-weight: 400;
}
.new-attributes .attributes-button {
width: 38px;
height: 34px;
cursor: pointer;
margin: 0;
padding: 0;
border: 0 solid transparent;
float: right;
margin-left: 6px;
}
.attributes-button > span {
display: inline-block;
width: 32px;
height: 30px;
}
.btn {
width: 32px;
height: 32px;
border: 0px solid transparent;
background-color: #383030 !important;
float: right;
margin-right: 2px;
}
.btn:focus,
.btn:active {
outline: none !important;
}
.btn:active {
box-shadow: none;
}
/*
.btn>span {
color: #E14D57;
} */
.btn:not(.swiper-button-disabled):hover {
background: #e14d57 !important;
}
.btn:not(.swiper-button-disabled):hover > span {
color: #fff;
}
.swiper-button-disabled:hover {
cursor: not-allowed;
}
.swiper-button-disabled > span {
color: rgba(201, 201, 201, 0.38);
}
.btn-tabs {
width: 44px;
height: 44px;
background-color: #383030 !important;
color: #fff;
float: none;
margin: 13px 0px;
}
.btn1000 {
display: none;
}
.glyphicon {
top: 2px;
right: 3px;
color: #c9c9c9;
}
.right {
color: #e14d57;
}
.new-attributes .panel-body {
border: 0;
padding: 0;
margin-top: 46px;
margin-bottom: 34px;
}
.new-attributes .new-attributes_content {
color: inherit;
font-size: 14px;
font-weight: 400;
padding: 20px 0;
margin: 0;
}
.new-attributes .news-list {
display: table;
table-layout: fixed;
width: 100%;
overflow: hidden;
font-size: 1.2rem;
line-height: 1.5;
}
.new-attributes .news-list::after {
content: '';
display: block;
clear: both;
visibility: hidden;
}
.new-attributes .news-item {
display: table-row;
width: 100%;
}
.new-attributes .news-item:first-child .new-attributes_content {
padding-top: 0;
}
.new-attributes .news-item-img {
width: 100%;
padding: 0;
margin: 0 0 61px 0;
}
.news-item-img::after {
content: '';
display: block;
clear: both;
visibility: hidden;
}
.div-hr {
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.new-attributes .decoration:before,
.new-attributes .decoration:after {
content: '';
display: block;
width: 1px;
height: 41%;
background: rgba(255, 255, 255, 0.18);
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.new-attributes .news-item:nth-child(1) .decoration:before {
display: none;
}
.new-attributes .news-item:nth-last-child(1) .decoration:after {
display: none;
}
.new-attributes .decoration:before {
top: 2px;
}
.new-attributes .decoration:after {
bottom: -2px;
}
.new-attributes .decoration {
display: table-cell;
width: 5%;
position: relative;
vertical-align: middle;
text-align: center;
}
.new-attributes .news-item:hover .news-box {
background-color: #302929;
color: #e14d57;
border: none;
}
.new-attributes .news-item:hover .news-box a {
color: #e14d57;
}
.new-attributes .news-item:hover .news-box:before {
content: '';
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid #302929;
border-bottom: 10px solid transparent;
position: absolute;
left: -9px;
top: 0;
bottom: 0;
margin: auto;
}
.new-attributes .news-item:hover .solid-circle {
background: #e14d57;
}
.new-attributes .news-item .news-title,
.new-attributes .news-item-img .news-title {
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.new-attributes .news-item:hover .news-title {
color: #fff;
text-decoration: underline;
}
.new-attributes .news-item:hover .news-time {
color: #fff;
}
/* what new 含图片 start */
.new-attributes .news-box-img {
width: 354px;
height: 298px;
box-sizing: border-box;
color: #000;
border-radius: 2px;
list-style: none;
background-color: #383030;
}
.new-attributes .news-box-img:not(.swiper-slide) {
float: left;
margin-right: 38px;
line-height: 3rem;
position: relative;
}
.news-img {
width: 352px;
height: 218px;
position: relative;
overflow: hidden;
}
.news-img > a {
position: absolute;
width: 100%;
height: 100%;
}
.news-title-href,
.news-title-forbidden {
font-size: 16px;
color: #333333;
font-weight: 400;
text-align: justify;
}
.news-title-href > a {
display: block;
color: #fff;
}
.news-info-title {
width: 352px;
height: 80px;
padding: 16px;
overflow: hidden;
background-color: #383030;
}
.news-box-img:hover .news-info-title {
background-color: #423939;
}
.news-box-img:hover {
background: rgba(66, 57, 57, 1);
border: 1px solid rgba(104, 88, 88, 1);
box-shadow: 0px 4px 18px 0px rgba(6, 1, 0, 0.35);
}
.detail-introduce {
width: 352px;
height: 218px;
display: none;
background: rgba(0, 0, 0, 0.6);
position: absolute;
left: 0px;
top: 0px;
border-bottom: transparent;
}
.detail-introduce > span,
.detail-introduce > a {
display: inline-block;
margin: 15px;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 20px;
}
.detail-introduce a {
color: #e14d57;
}
.detail-introduce a:hover {
color: rgb(224, 22, 36);
}
.news-box-img:hover .detail-introduce {
display: block;
}
.news-info-title:hover .de .news-info-container {
width: 100%;
}
/* what new 含图片 end */
.new-attributes .news-box {
display: table-cell;
line-height: 3rem;
width: 80%;
vertical-align: middle;
color: #fff;
padding-left: 15px;
position: relative;
border-radius: 2px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.new-attributes .news-box a {
color: #fff;
}
.new-attributes .panel-body:last-child .news-item:last-child .news-box {
border-bottom: none;
}
.new-attributes .news-circle {
display: inline-block;
border-radius: 50%;
border: 1px solid #383030;
background-color: #383030;
vertical-align: middle;
}
.new-attributes .solid-circle {
background: #8a7f7f;
border-radius: 50%;
width: 0.6rem;
height: 0.6rem;
overflow: hidden;
margin: 0.3rem;
}
.new-attributes .news-time {
color: #999999;
font-size: 1rem;
line-height: 2rem;
position: absolute;
}
/*what's new 样式结束*/
@media screen and (max-width: 1200px) {
.btn1000 {
display: block;
}
}
/*what's new 适应手机端*/
@media screen and (max-width: 768px) {
.main-header {
position: absolute;
}
.swiper-pagination-bullet-active {
outline: none;
}
.icl-nav-menu-box > li {
width: 110px !important;
}
/* 手机端巨幕布局 */
.bgc-image {
width: 100%;
height: 668px;
background: url('../img/move-banner.png') no-repeat;
background-size: cover;
background-position: center center;
}
/* .header-home {
background: url("../img/move-banner.png") no-repeat;
background-size: contain;
} */
.header-home {
height: 668px;
}
.screen {
width: auto;
margin: 0;
}
.pt50.tc {
font-size: 35px;
line-height: 50px;
text-align: center;
}
#header2-text {
width: 100%;
margin: 0 auto;
padding-top: 185px;
}
#header2-text p {
text-align: center;
}
.icon {
width: 18px !important;
height: 18px !important;
}
.buttons {
width: 100%;
margin: 34px auto;
}
.buttons::after {
content: '';
display: block;
clear: both;
visibility: hidden;
}
.button-sourceCode,
.button-examples,
.button-zip {
width: 134px;
}
.radiusBtn {
font-size: 14px;
width: 100%;
border-radius: 34px;
}
.radiusBtnimg {
height: 16px;
width: 16px;
margin-left: 8px;
margin-bottom: 4px;
}
.buttonsdiv {
margin: 0 auto;
text-align: center;
}
#button_zip {
margin-right: 14px;
margin-bottom: 15px;
padding: 0;
}
.contentfixed {
margin: 15px auto;
}
.phonestyle {
display: block !important;
padding-top: 4px;
}
.PCstyle {
display: none !important;
}
.contentfixed {
width: 93.33%;
margin: 0 auto;
}
.phonestyle > p {
font-size: 26px;
margin-top: 5px;
margin-bottom: 0;
line-height: 36px;
text-align: justify;
padding: 0;
}
/* 产品内容tab标签布局 */
.productTab {
display: none;
}
.product-technology {
margin-top: 32px;
position: relative;
}
.phone-nav-tabs {
width: 100%;
overflow: hidden;
margin: 0;
border-bottom: 2px solid rgb(119, 119, 119, 0.18);
}
.nav-btn-tabs {
width: 24px;
height: 34px;
margin: 0;
background-color: #e6e6e6 !important;
position: absolute;
top: 0;
right: -20px;
}
.glyphicon {
right: 8px;
}
.leadtitle {
text-align: left;
font-size: 32px;
font-weight: 400;
margin-bottom: 0;
line-height: 50px;
}
ul::-webkit-scrollbar {
display: none;
}
#pctab-title {
border: transparent;
}
#pctab-title > li {
width: auto;
height: auto;
float: none;
}
.feature-heading,
.product-heading,
#pctab-title > li a {
font-size: 24px;
}
#pctab-title > li a {
margin: 0;
padding: 0;
padding-bottom: 11px;
}
/* 中间大图样式 */
.product-image {
height: 427px;
}
.product-introduction,
.product-pic {
width: 100%;
}
.product-pic {
height: 218px;
}
.product {
padding-top: 24px;
margin-top: 0;
margin-bottom: 0;
background: #fff;
}
.product .product-pic-div .product-pic {
background-size: 100% 100% !important;
}
.product-introduction {
height: auto;
padding: 0 12px;
}
.intro-href > li > a,
.product-hreftext {
color: #fff;
padding: 0;
height: 39px;
line-height: 39px;
text-align: center;
}
.product-hreftext b {
width: 100%;
}
.intro-href li {
list-style: none;
margin-right: 0;
width: calc(50% - 8px);
height: auto;
}
.intro-href {
margin-top: 30px;
margin-bottom: 15px;
justify-content: space-between;
}
.product-hreftext {
width: calc(50% - 8px);
margin: 30px auto 0;
}
.product-hreftext:active,
.intro-href > li > a:active {
background-color: #e6e6e6;
}
.banner-img-contaienr {
width: 100%;
margin-top: 39px;
}
.product-heading {
margin-bottom: 0;
margin-top: 16px;
}
.product-span {
height: 2px;
}
.product-text {
margin-top: 8px;
}
#edgeP {
text-align: center;
margin-bottom: 20px;
}
/* .header-home .buttons .button-zip, .header-home .buttons .button-sourceCode{
display: block;
} */
.quick-service .second_title .navbar-nav li {
padding-left: 15px;
}
.productsLink .productsBox .productsTitleBox {
font-size: 14px;
}
/* .news-info-container,
.news-img {
display: table-row !important;
} */
.news-img > a {
width: 100% !important;
height: inherit !important;
}
.image-class {
width: 90%;
height: 100%;
margin: 0 auto;
padding: 0;
}
.new-attributes {
width: 93.33%;
}
.new-attributes button {
display: none;
}
.first_title {
padding: 43px 0 20px;
margin-bottom: 0;
}
.new-attributes .news-item-img {
width: 100%;
height: auto;
margin-bottom: 36px;
}
.new-attributes .news-item-img.swiper-wrapper {
flex-direction: column;
}
.new-attributes .news-box-img {
width: 100%;
line-height: 24px;
}
.new-attributes .news-box-img > div {
float: left;
}
.new-attributes .news-item-img > li {
height: auto;
margin-bottom: 16.5px;
margin-right: 0 !important;
float: none;
overflow: auto;
}
.new-attributes .panel-body {
margin: 16px 0 0;
padding: 0;
}
.detail-introduce {
width: 50%;
}
.news-img {
width: 55%;
}
.news-info-title {
width: 45%;
height: 190px;
display: flex;
align-items: center;
}
.news-title-href,
.news-title-forbidden {
margin-left: 7px;
}
.new-attributes .new-attributes_content {
font-size: 16px;
}
.first_title > b {
font-size: 24px;
}
.div-hr {
display: none;
}
.news-img {
height: 190px;
background-size: contain !important;
}
.new-attributes .news-item-img > li {
background-color: #ffffff !important;
}
.detail-introduce {
position: static;
width: 100%;
height: auto;
font-size: 12px;
display: block;
background: #e6e6e6;
border: transparent;
}
.detail-introduce > span,
.detail-introduce > a {
font-weight: 400;
color: #666666;
margin: 15px 13px 0;
}
.detail-introduce > a {
margin: 0px 0 8px 13px;
}
.productTab > li.active > a,
.productTab > li.active > a:focus,
.productTab > li.active > a:hover {
color: #ffffff;
}
/* 删除新特性中的hove效果 */
.news-box-img:hover .news-info-title {
background-color: #ffffff;
}
.news-box-img:hover .news-title-href > a {
color: #000;
}
.news-title-href > a {
pointer-events: none;
}
.home-link a {
padding: 0 5px;
}
/* 清楚背景图片 */
.new-attributes-start:before {
display: none;
}
.new-attributes-start::after {
display: none;
}
}
/*what's new 适应手机端end*/
@media screen and (max-width: 768px) {
.new-attributes-start {
margin-top: 43px;
}
ul.icl-nav-menu-box {
overflow: hidden;
}
.menu-box .icl-nav-menu-box > li {
margin: 0 !important;
width: 48% !important;
float: left;
}
.menu-box .icl-nav-menu-item:not(.icl-nav-menu-overivew) > li:last-child {
width: 48% !important;
}
.leadtitle {
font-size: 16px;
line-height: 30px;
}
.phonestyle > p {
font-size: 14px;
line-height: 22px;
}
#pctab-title > li a {
font-size: 20px;
}
.detail-introduce > span,
.detail-introduce > a {
font-size: 12px;
}
.feature-text,
.product-hreftext > b,
.product-text,
.intro-href > li > a {
font-size: 14px;
}
.phonefontsize {
font-size: 14px;
}
.new-attributes .new-attributes_content {
font-size: 14px;
}
.news-title-href,
.news-title-forbidden {
font-size: 14px;
}
.radiusBtn {
margin-right: auto;
margin-left: auto;
}
}
@media screen and (max-width: 420px) {
#header2-text {
width: 78%;
}
.image-class > img {
width: 310px;
}
}
@media screen and (max-width: 350px) {
.buttonsdiv {
width: 160px;
}
}