@font-face {
    font-family: 'iconfont';
    src: url(../font/iconfont.ttf);
}
.iconfont {
    font-family: iconfont;
}
body,*{ margin:0; padding:0;}
body{
    background:#f5f5f5;
    --border-color:rgba(22,20,22,.12);
    color:#212322;
    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.2;
}
a{ color:#212322; }
a:hover{ text-decoration: none; color:#007bee; transition: all .3s ease; }

.page{ width: 1200px; max-width: 1200px; margin:0 auto;}
header{ background:#00a3ee; height:60px; }
.top-nav{ width: 1200px; margin:0 auto; display: flex; flex-direction: row; align-items: center; position: relative;}
.nav-item{ display: flex;height:60px; align-items: center; margin-right:20px; }
.nav-item a{font-size: 16px;  color:#ffffff;}
.logo{font-size: 18px;  height:60px;display: flex; align-items: center;color:#ffffff; margin-right: 30px; }
.logo a{ color:#ffffff; }
.logo a:hover{ color:#ffffff;  }
.top-control{ display: none; position: absolute; right:10px; top:20px; font-size: 18px; color:#ffffff; cursor: pointer;}

.main{ display: flex; flex-direction: row; }
.left-col{ flex:1; }
.right-col{ width: 356px; margin-left:20px;}
.info-container{ background:#ffffff; display: flex; flex-direction: column; margin-top:20px; border:1px solid var(--border-color); }
.info-title{ height: 40px; background:rgba(37, 36, 40, 0.05);padding-left:20px; display: flex; align-items: center; border-bottom:1px solid var(--border-color);}
.info-box{ padding:20px;}
.info-first-title{ border:0;}

.p-article-title{ font-size: 28px; display: flex; justify-content: center; align-items: center;}
.p-article-sub-info{ margin:20px 0; display: flex; flex-direction: row; justify-content: center; align-items: center; color: #777777; }
.p-article-sub-info .sub-info-point{ margin:0 20px; display: flex; justify-content: center; align-items: center; }
.bread-ic{ margin:0 10px;}

.p-article-line{ width: 100%; height:0px; border-top:1px solid #f1f1f1; margin:0 auto;}
.p-article-content{ margin-top:20px; font-size: 14px;}
.p-article-content img{ width: 100%; max-width: 800px; margin:0 auto;}
.top-banner-list .banner-img{ width: 100%; height: auto; background-size: 100% 100%; background-repeat: no-repeat;}

.info-container .article-item{ border-top:1px solid var(--border-color);}
.info-container .article-item:first-child{ border-top:0;}
.article-item{ display: flex; flex-direction: row; }
.article-img{ width: 170px; height: 111px; border-radius: 8px; }
.article-info{ flex:1; margin-left:16px; display: flex; flex-direction: column; }
.article-title{ font-size: 16px; font-weight: bold; }
.article-desc{
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp:2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    margin-top:10px; font-size:14px; color:#999999; line-height: 28px; }
.article-date{ flex:1; display: flex; align-items: flex-end;  }

.page-list{ display: flex; justify-content: center; align-items: center;}
.page-list ul{ display: flex; flex-direction: row; }
.page-list ul li{ display: flex; align-items: center; justify-content: center; height: 30px; padding:0 10px; border:1px solid var(--border-color);}
.page-list ul li:first-child{ border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
.page-list ul li{ border-right:0;}
.page-list ul li:last-child{ border-right:1px solid var(--border-color); border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
.page-list ul li.active{ background:#0d6efd; display: flex; color:#ffffff;}




.info-list{ display: flex; flex-direction: column; }
.info-list li{ padding-left:20px; border-bottom: 1px solid var(--border-color); height: 40px; display: flex; align-items: center; }
.info-list li:last-child{ border-bottom: 0; }
.info-list li a{ }
.info-full-box{ padding:0; }

.tag-list{ padding: 0 20px 20px 20px;}
.tag-list-min{ padding:0;}
.tag-list a{
    border-radius: 6px;
    height: 24px; line-height: 24px; padding:0 16px; background: #00a3ee; color:#ffffff;
    display: inline-block; margin:20px 0 0 0;}
.tag-list a:hover{ background: #00a3ee;}

.p-pn ul{ display: flex; flex-direction: column; margin:20px 0 0 20px;}
.p-pn ul li{ margin-bottom: 20px;}
.p-pn ul li a{ display: flex; flex-direction: row; }

footer{ background:#333; color:#CCCCCC; padding:10px 0 100px 0; margin-top:20px;}
footer a{ text-decoration: none; color:#CCCCCC;}
.copy-box{ display: flex; flex-direction: column; }
.copy-item{ padding:5px 0 0 0;}
.friend-link{ margin-top:5px; display: flex; flex-direction: row; }
.friend-list{ display: flex; flex-direction: row;  flex-wrap: wrap; }
.friend-list a{ margin-left:20px;}

.icon-top {background: url(../images/istop.png) no-repeat center #fff;background-size: 22px;width: 40px;height: 40px;position: fixed;right: 20px;bottom: 15%;opacity: 0;transition: all 0.3s;z-index: 9999999;border: #ccc 1px solid;border-radius: 100%;}
.icon-top.cd-is-visible { visibility: visible; opacity: 1; }




/*产品*/
.env-list p{ line-height: 28px; color:#555555; }
.info-line{ height: 0; display: flex; border-top:1px solid #f1f1f1;width: 100%;}
.product-title{ height: 40px; display: flex; align-items: center; margin-left:20px; font-size: 16px;}
.price-items{ display: flex; flex-direction: row; justify-content: space-between; padding:0 20px 20px 20px;}
.price-item{ width:80%; border:1px solid var(--border-color);
    border-radius: 5px;
    color:#d63242;
    display: flex;
    flex-direction: column;
    justify-content: center; align-items: center; height: 80px;}
.price-right-item{ margin-left:20px;}
.price-info{ display: flex; flex-direction: row; justify-content: center; align-items: flex-end;}
.price-txt{ font-size: 18px;}
.price-unit{ font-size: 14px; margin-left: 4px; color: #222222;}
.product-name{ font-size: 14px; color: #222222; margin-top:10px;}
.buy-info{ font-size: 14px; color:#999999; padding:0 20px; line-height: 1.5; }
.control-btn-box{ display: flex; margin-top: 20px; padding:0 20px 20px 20px; flex-direction: row; justify-content: space-between; align-items: center;}
.help-info{ font-size: 16px;  color:#999999; }
.control-btn{
    cursor: pointer; display: flex; justify-content: center;
    align-items: center; background:#007bee; color:#ffffff; height: 30px; width: 80px; border-radius: 5px;}
a.control-btn:hover{ color:#ffffff; }
.service-list{ padding:0 20px 20px 20px;}
.service-list ul{ display:flex; flex-direction:column;}
.service-list ul li{ list-style: disc inside; color:#999999; line-height: 24px;}
.service-more{ margin:0 0 10px 20px; display: flex; font-size: 16px; }

.activity-more{ display: flex; flex-direction: column; padding:10px 20px; }
.activity-more p{ line-height: 24px; }
.activity-more a{ color:#666666; }
@media screen and (max-width: 1200px) {
    .page{ width: 992px;}
    .top-nav{ width: 992px;}
    .right-col{ width: 296px;}
}
@media screen and (max-width: 992px) {
    .page{ width: 768px;}
    .top-nav{ width: 768px;}
    .article-item{ display: flex; flex-direction: column;}
    .article-img{ width: 100%; height: auto; border-radius: 8px; }
    .article-info{ margin:20px 0 0 0; }
}

@media screen and (max-width: 768px) {
    .page{ width:100%;}
    header{ height: 60px; transition: all .2s ease-in; position: fixed; width: 100%;top:0px; z-index: 10;}
    .top-nav{ width: 90%;  display: flex; flex-direction: column; align-items: flex-start;}
    .logo{ display: flex; justify-content: flex-start;}
    .nav-item{ transition: all .2s ease-in; overflow: hidden; width: 100%; height: 0px; margin-right:0;  margin-bottom: 10px; justify-content: flex-start;}
    .top-control{ display: flex; position: absolute; right:10px; top:20px;}
    .top-nav-active{ height: 220px;}
    .top-nav-active .nav-item{ height: 30px;}
    .main{ margin-top:60px; flex-direction: column;}
    .info-container{ width:calc(100% - 40px); margin:20px auto 0 auto;}
    .left-col{ width: 100%;}
    .right-col{ width: 100%; margin-left:auto;}
    .footer-info{ padding: 0 20px;}
}