@charset "utf-8";
/* 默认样式重置 */
@import url(./reset.css);

/* 0.全站通用样式 */
:root {
    --web-width: 1400px; /*前端页面统一宽度*/
    --left-width: 1060px; /*前端左侧统一宽度*/
    --right-width: 320px; /*前端右侧统一宽度*/
}
a:hover{
    color: #f40;
}
.red{
    color: #f00;
}
/* 表单元素 */
textarea,input,select,.btn{
    border-radius: 3px;
    padding: 3px;
    font-size: 16px;
}
/* input文本框 */
input{
    height: 30px;
}
/* btn按钮 */
.btn{
    width: 75px;
    height: 30px;
    cursor: pointer;
}
/* select */
select{
    height: 30px;
}

/* 1.0.顶部通栏样式 */
/* 1.1.0.top样式 */
/* 1.1.1.顶部通栏 */
.top {
    width: 100%;
    height: 35px;
    background: rgba(0, 153, 255, .3);
}

.top .topBar {
    width: var(--web-width);
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top .topBar i{
    font-style: normal;
    color: #f00;
    font-size: 16px;
}

/* 1.1.2.产品搜索框 */
.topBar .search {
    width: 330px;
}

.topBar .search form {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.topBar .search input {
    width: 240px;
    height: 25px;
}

.topBar .search #sort_id {
    width: 140px;
    height: 25px;
    padding: 0;
    background: #fff;
}

.topBar .search .btn {
    width: 80px;
    font-size: 15px;
    padding: 0;
    background: #fff;
}

/* 1.2.Banner大图 */
/* .banner {
    width: var(--web-width);
    height: 240px;
    margin: 5px auto;
}

.banner .logo {
    width: 100%;
    height: 100%;
}

.banner .logo img {
    width: 100%;
    height: 100%;
} */

/* 1.3.Nav导航栏 */
.nav {
    width: var(--web-width);
    height: 45px;
    margin: 0 auto;
    background: #1ba358;
    position: relative;
    z-index: 9;
    transition: .3s;
}
/* 页面滚动时触发固定定位样式 */
.nav.current{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 99;
}

.nav .navBar {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
.nav .navBar>ul{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;    
}
.nav .navBar>ul>li{
    position: relative;
    width: 120px;
    height: 100%;
}
.nav .navBar a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    line-height: 45px;
}
/* 一级菜单 */
.nav .navBar a.current,
.nav .navBar a:hover,
.nav .navBar ul>li:hover {
    background: #006a30;
}
/* 二级菜单 */
.nav .navBar ul>li ul{
    width: 100%;
    height: auto;
    background: #1ba358;
    display: none;
}
.nav .navBar ul>li ul li{
    height: 45px;
}

/* 1.4.roll轮播图 */
.roll {
    width: var(--web-width);
    height: 600px;
    margin: 0 auto;
    position: relative;
}
/* 网站logo悬浮与轮播图之上 */
.roll .logo{
    position: absolute;
    top: 30px;
    left: 40px;
    z-index: 9;
}
.roll #focus {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.roll #focus ul,
.roll #focus ol {
    position: absolute;
}

.roll #focus ol {
    width: auto;
    height: 25px;
    display: flex;
    left: 20px;
    bottom: 20px;
}

.roll #focus ol li {
    width: 25px;
    height: 25px;
    margin: 0 5px;
    border-radius: 5px;
    text-align: center;
    line-height: 25px;
    background: #555;
    color: #fff;
    cursor: pointer;
}

.roll #focus ol li.active {
    background: #f40;
}

.roll #focus ul {
    width: 100%;
}

.roll #focus ul li {
    width: 100%;
    height: 600px;
}

.roll #focus ul img {
    display: block;
    width: 100%;
    height: 100%;
}

/* 2.0.底部通用样式 */
/* 2.1.footer样式 */
.foot{
    width: var(--web-width);
    height: 130px;
    margin: 0 auto 5px;
    padding: 10px;
    text-align: center;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.foot p{
    width: 100%;
    height: 30px;
    color: #555;
}

/* 2.2.在线客服 */
.service{
    width: 170px;
    height: auto;
    box-sizing: border-box;
    position: fixed;
    top: 150px;
    left: -124px;
    z-index: 99;
    transition: .5s;
}
.service.switch{
    left: 0;
}
.service .right span.switch{
    transform: rotateZ(-90deg) scale(0.9);
}
.service .left{    
    width: 130px;
    height: 342px;
    background: #fff;
    border: 6px solid #fff;
    border-left: 0;
    border-radius: 0 0 6px 0;
    box-shadow: 4px 1px 5px rgba(0,0,0,.5);
    position: absolute;
}
.service .right{
    width: 34px;
    height: auto;
    background: #fff;
    border: 6px solid #fff;
    border-left: 0;
    border-radius: 0 6px 6px 0;
    box-shadow: 4px 1px 5px rgba(0,0,0,.5);
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
}
.service .right::after{
    content: "";
    display: block;
    position: absolute;
    width: 6px;
    height: 16px;
    left: 0;
    bottom: -16px;
    background: #fff;
}
.service .left .main,
.service .right .main{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 6px solid #004d13;
}
/* 左边 */
.service .left .main{
    border-radius: 0 0 6px 0;
}
.left .main .title{
    margin: 5px;
    border-radius: 4px;
    background: #004d13;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 25px;
}
.left .main .content{
    text-align: center;
    font-size: 15px;
    line-height: 22px;
}
/* 右边 */
.service .right .main{
    border-left: 0;
    background: #004d13;
    border-radius: 0 6px 6px 0;
}
.service .right .main .text{
    width: 100%;
    height: 100%;
    color: #fff;
    padding: 0 6px;
}
.service .right span{
    display: inline-block;
    font-size: 16px;
    transform: translateX(2px) rotateZ(90deg) scale(0.9);
}

/* 3.0.main主体部分通用样式 */
#main{
    width: var(--web-width);
    height: auto;
    margin: 5px auto;
    display: flex;
    justify-content: space-between;
}
/* 3.1.0.左边 */
#main .left{
    width: var(--left-width);
    height: auto;
    border: 1px solid #004d13;
}
/* 3.1.1.面包屑导航 */
#main .left .nav_title{
    width: 100%;
    height: 40px;
    background: linear-gradient(to top, #c0effd, #f8fcff);
    line-height: 40px;
    text-indent: 20px;
    border-bottom: 1px solid #b3c7c2;
}
/* 3.1.2.左边主体部分：内容容器 */
#main .left .container{
    width: 95%;
    height: auto;
    margin: 15px auto;
}
/* 3.2.0.右边 */
#main .right{
    width: var(--right-width);
    height: auto;
    border: 1px solid #7ab4b4;
}
/* 3.2.1.右侧分类导航条 */
.appBar{
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #7ab4b4;
    margin-bottom: 15px;
    background: linear-gradient(to top, #c0effd, #f8fcff);
    position: relative;
}
.appBar>span{
    width: 100px;
    height: 32px;
    display: block;
    background: #fff;
    color: #006a30;
    font-weight: 600;
    border: 1px solid #7ab4b4;
    border-bottom: 1px solid #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    text-indent: 25px;
    line-height: 32px;
    position: absolute;
    top: 7px;
    left: 15px;
}
.appBar>span::before{
    content: "";
    display: block;
    position: absolute;
    width: 5px;
    height: 18px;
    left: 10px;
    top: 7px;
    background: linear-gradient(to top, #006a30, #ade7c7); 
}
/* 3.2.2.0.右侧内容通用容器 */
.rightBox{
    width: 100%;
    height: auto;
    padding: 0 20px 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #7ab4b4;
}
.rightBox:last-child{
    border-bottom: none;
}
/* 3.2.2.1.右侧热点新闻模块 */
.newsHot{
    font-size: 18px;
    line-height: 2;
    border-bottom:1px dotted #555;
}
.newsHot>span{
    color: #555;
}

/* AA--index首页模块 */
/* AA-1.右侧关于我们模块 */
.about{
    font-size: 18px;
    line-height: 1.8;
}

/* AA-2.友情链接模块 */
.link{
    width: var(--web-width);
    height: auto;
    margin: 0 auto 5px;
    box-sizing: border-box;
    border: 1px solid #7ab4b4;
}
.link a{
    font-size: 18px;
}

/* BB--about企业信息模块：没有独立样式 */

/* CC--news新闻模块 */
/* CC-1.新闻搜索 */
.newsTitle{
    position: relative;
}
.newsTitle .newsSearch{
    position: absolute;
    width: 320px;
    height: 100%;
    right: 20px;
}
.newsTitle .newsSearch form{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.newsTitle .newsSearch #keyword{
    width: 260px;
    height: 26px;
    border: 1px solid #888;
}
.newsTitle .newsSearch #searchBtn{
    width: 55px;
    height: 26px;
    font-size: 15px;
    padding: 0;
    border: 1px solid #888;
    cursor: pointer;
}

/* CC-2.新闻列表 */
.newsList{
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #ccc;
}
.newsImg{
    width: 175px;
    height: 125px;
}
.newsImg img{
    display: block;
    width: 100%;
    height: 100%;
    transition: .5s;
}
.newsImg img:hover {
    transform: scale(1.10);
    border-radius: 5%;
}
.newsContent{
    width: 810px;
    height: 145px;
}
.newsContent .newsTitle{
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.newsContent .newsTitle p:first-child{
    font-size: 21px;
    font-weight: 600;
    color: #09F;
}
.newsContent .newsTitle p:last-child{
    width: 240px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.newsContent .newsTitle p:last-child span:last-child{
    width: 100px;
    text-align: center;
}
.newsContent .newsText{
    width: 100%;
    height: auto;
    line-height: 1.8;
    font-size: 17px;
    color: #111;
}

/* CC-3.新闻详情页 */
/* EE-kk-2.产品详情页 */
/* BB-about企业信息 */
.infoTitle{
    text-align: center;
    font-size: 28px;
    line-height: 50px;
    color: #f40;
}
.infoDetail,
.infoErr{
    line-height: 50px;
    text-align: center;
    color: #555;
}
.infoImg{
    text-align: center;
}
.infoImg img{
    max-width: 98%;
}
.infoContent{
    line-height: 2;
    font-size: 18px;
    text-indent: 2em;
    padding: 20px 0;
}
.infoLabel{
    text-align: right;
    line-height: 45px;
}

/* DD--客户留言模块 */
/* DD-1：留言列表 */
.msgList{
    width: 100%;
    height: auto;
    margin-top: 25px;
    margin-bottom: 15px;
}
.msgList .notice{
    width: 100%;
    height: 40px;
    border: 1px solid #bbb;
    background: #eee;
    font-size: 18px;
    line-height: 40px;
    text-indent: 20px;
}
.msgList .msgItem{
    width: 100%;
    height: auto;
    margin-top: 15px;
    font-size: 18px;
    border: 1px solid #b3c7c2;
}
.msgList .msgItem .userName{
    width: 100%;
    height: 35px;
    text-indent: 20px;
    line-height: 35px;
    border-bottom: 1px dashed #ade7c7;
    position: relative;
}
.msgList .msgItem .userName span:first-child{
    color: #09F;
}
.msgList .msgItem .userName span:last-child{
    position: absolute;
    top: 0;
    right: 25px;
    color: #09F;
}
.msgList .msgItem .infoText,
.msgList .msgItem .reply{
    width: 100%;
    height: auto;
    padding: 10px 20px;
    box-sizing: border-box;
    line-height: 1.8;
}
.msgList .msgItem .reply{
    padding-bottom: 15px;
    border-top: 1px dashed #ade7c7;
}
.msgList .msgItem .reply span{
    color: #006a30;
}
/* DD-2：留言发送 */
.msgSend{
    border: 1px solid #7ab4b4;
    margin-bottom: 25px;
}
/* 我要留言：另类导航栏：提升至通用格式 */
/* 留言模块 */
.msgSend form>p{
    width: 92%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
}
.msgSend .areaText{
    width: 100%;
    height: 120px;
}

/* EE->kk--product产品模块 */
/* EE->kk-1.产品图片列表 */
.productList{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0 22px;
}
.productList .productItem{
    width: 235px;
    height: 280px;
    margin: 12px 0 0;
}
.productList .productItem img{
    display: block;
    width: 235px;
    height: 235px;
    transition: .5s;
}
.productList .productItem img:hover {
    transform: scale(1.08);
    border-radius: 5%;
}
.productList .productItem .productTitle{
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 18px;
}
/* EE->kk-2.产品详情页：相同部分，见：CC-3.新闻详情页 */

/* EE->kk-3.产品页面右侧热门推荐产品模块 */
.productHot{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.productHot div p:last-child{
    height: 35px;
    line-height: 25px;
    text-align: center;
}
.productHot img{
    width: 130px;
    height: 130px;
    transition: .5s;
}
.productHot img:hover{
    transform: scale(1.08);
    border-radius: 5%;
}

/* OO--order订单系统模块 */
.orderList{
    width: 85%;
    margin: 0 auto;
    position: relative;
}
.orderList p{
    height: 40px;
    line-height: 40px;
    font-size: 18px;
}
.orderList div{
    line-height: 40px;
    font-size: 18px;
}
.orderList p span{
    color: #f00;
}
.orderList .orderBtn{
    margin-left: 90px;
    margin-right: 20px;
}
.orderList textarea{
    vertical-align: top;
    margin-top: 8px;
    margin-bottom: 5px;
}
.orderList .pay{
    position: absolute;
    top: 50px;
    right: 15px;
    text-align: center;
}
.orderList .pay span{
    line-height: 3;
}

/* UU-用户中心样式 */
/* UU-1.用户注册/登录 */
.userReg,
.userLogin{
    width: 85%;
    margin: 20px auto;
    font-size: 18px;
}
.userReg p,
.userLogin p{
    display: flex;
    align-items: center;
    height: 40px;
    line-height: 30px;
}
.userReg p span:nth-of-type(1),
.userLogin p span:nth-of-type(1){
    width: 140px;
    text-align: right;
}
.userReg p span:nth-of-type(2),
.userLogin p span:nth-of-type(2){
    color: #f00;
    margin: 0 10px;
}
.userReg p img,
.userLogin p img{
    width: 60px;
    height: 15px;
}
.userReg p .regBtn,
.userLogin p .loginBtn{
    margin-left: 140px;
    margin-right: 20px;
}
/* UU-2.用户中心 */
.userIndex{
    font-size: 16px;
}
.userIndex p{
	padding:10px 20px;
    font-size: 18px;
}