/* 初始化样式 */

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-size: 16px;

    color: #111;

}

li,a{

    list-style: none;

    text-decoration: none;

}

body{

    background-color: #F5F5F5;

}

.container{

    width: 100%;

    max-width: 500px;

    height: 100%;

    margin: 0 auto;

    padding: 0 10px;

    margin-bottom: 70px;

}

.hdy img{

    width: 100%;

    max-width: 500px;

    



}

/* 主体开始 */

.nav{

    width: 100%;

    max-width: 500px;

    margin: 0 auto;

    height: 50px;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: #009966;

}

.logo{

    width: 100px;

    margin-left: 20px;

}

.logo p{

    color: #fff;

    font-size: 20px;

    font-weight: 700;

}

.search{

    flex: 1;

    width: 100%;

    height: 40px;

    border-radius: 20px;

    background-color: #fff;

    margin-right: 20px;

    position: relative;

}

.search i{

    position: absolute;

    top: 5px;

    left: 10px;

    font-size: 30px;

    color: #BDBDBD;

}

.search input{

    width: 100%;

    max-width: 100%;

    height: 40px;

    border-radius: 20px;

    border: none;

    outline: none;

    padding-left: 50px;

}

/* 轮播图 */



.slider{

    width: 100%;

    height: 300px;

    overflow: hidden;

    position: relative;

    border-radius: 10px;

    margin-top: 5px;

}

.slider a {

    width: 100%;

    height: 300px;

    float: left;

    max-width: 100%;

    display: block;

    position: absolute;

    border-radius: 10px;

   

}

.slider img{

    width: 100%;

    max-width: 100%;

    height: 300px;

    border-radius: 10px;

}



/* 详情页轮播图 */

.content-slider{

    width: 100%;

    height: 300px;

    overflow: hidden;

    position: relative;

    max-width: 500px;

    margin: 0 auto;

}

.content-slider a{

    width: 100%;

    height: 300px;

    float: left;

    max-width: 100%;

    display: block;

    position: absolute;

    

}

.content-slider img{

    width: 100%;

    max-width: 100%;

    height: 300px;

   

}

/* 栏目 */

.column{

    width: 100%;

    height: 180px;

    margin: 10px auto;

    max-width: 100%;

    display: flex;

    justify-content: left;

    align-items: center;

    background-color: #fff;

    border-radius: 10px;

    flex-wrap: wrap;

    padding: 20px auto;

}

.column-item{

    width: 25%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.column-item i{

    font-size: 35px;

    

}

.icon-shangjia{

    color: #009966;

}

.icon-zaixianxuexi{

    color: #FFCC33;

}

.icon-jiaoyou{

    color: #E91E63;

   

}

.icon-jingxiaoshang1{

    color: #F57F17;

}

.icon-fapiao1{

    color: #f00;

}

.icon-fenhongqingkuang{

    color: #FFD600;

}



/* 产品 */

.product{

    width: 100%;

    background-color: #fff;

    border-radius: 10px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    margin: 10px auto;

}



.product-title{

    width: 100%;

    border-bottom: 1px solid #E0E0E0;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 8px 10px;

    flex-wrap: wrap;

 

}



.product-title i{

    font-size: 25px;

    margin-right: 10px;

    

}

.product-title span{

    font-size: 18px;

    vertical-align: middle;

}

.product-title>div{

    display: flex;

    justify-content: left;

    align-items: center;

    width: 50%;

}



.product-title a{

    width: 60px;

    height: 30px;

}

.product-info{

    width: 100%;

    margin: 10px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    flex-flow: row wrap;

    align-content: center;

    

}

.product-info a{

    width: 46%;

    border-radius: 10px 10px 0 0;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    

}

.product-info img{

    width: 100%;

    max-width: 100%;

    border-radius: 10px 10px 0 0;

    height: 160px;

}

.product-info>a>p{

    width: 100%;

    height: 40px;

    text-align: center;

    line-height: 40px;

    background-color: #E0E0E0;

    border-radius: 0 0 10px 10px;

}

.product-info>a>div{

    width: 100%;

    background-color: #f2f2f2;

    display: flex;

    flex-direction: column;

    padding: 10px;

    border-radius: 0 0 10px 10px;

}

.product-info>a>div>p{

    width: 100%;

    height: 30px;

    line-height: 30px;

    font-size: 18px;

    

}

.product-info>a>div>span{

    font-size: 14px;

    color: #888;

}

.product-info>a>div del{

    font-size: 14px;

    color: #888;

}

.product-info>a>div b{

    color: #f00;

    font-size: 30px;

    font-weight: 700;

}

.product-info>a>div li{

    color: #888;

}

/* 产品列表 */

.product-list{

    width: 100%;

    margin: 10px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    flex-direction: column;

    align-content: center;

    padding: 10px;

}

.product-list a{

    width: 100%;

    border-radius: 10px;

    background-color: #f8f8f8;

    display: flex;

    justify-content: space-around;

    align-items: center;

    

}

.product-list img{

    width: 100px;

    height: 100px;

    display: block;

    border-radius: 10px;

    margin: 10px auto;

}

.product-list>a>div{

    flex: 1;

    padding: 0 20px;

}

.product-list p{

    width: 100%;

    height: 30px;

    font-size: 18px;

    

}

.product-list small{

    font-size: 14px;

    color: #888;

    display: flex;

    height: 25px;

}



.product-list>a>div mark{

    display: block;

    margin-right: 5px;

    font-size: 14px;

    text-align: center;

    line-height: 20px;

    height: 20px;

    width: fit-content;

    border-radius: 3px;

    background-color: #FFCC33;

    color: #555;

}

/* 分红池 */

.product-fh{

    width: 100%;

    margin: 10px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    flex-direction: column;

    align-content: center;

    padding: 10px;

}

.product-fh>a{

    width: 100%;

    border-radius: 10px;

    background-color: #f8f8f8;

    display: flex;

    justify-content: space-around;

    align-items: center;

    flex-direction: column;

    border-radius: 10px;

}

.product-fh>a>img{

    width: 100%;

    max-width: 100%;

    border-radius: 10px 10px 0 0;

}



.product-fh>a>p{

    width: 100%;

    height: 40px;

    line-height: 40px;

    text-align: center;

    background-color: #f2f2f2;

    border-radius: 0 0 10px 10px;

}



/* 首页页脚 */

.foot{

    width: 100%;

    height: 80px;

    background-color: #f2f2f2;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px;

    margin: 0 auto 60px auto;

    max-width: 500px;

 

}

.contact{

    text-align: center;

    color: #888;

}



/* 下方导航条 */

.aside{

    background-color: #009966;

    width: 100%;

    max-width: 500px;

    margin: 0 auto;

    height: 60px;

    position: fixed;

    bottom: 0;

    left: 0;

    

    right: 0;

    display: flex;

    justify-content: space-around;

    align-items: center;

}

.aside>a{

    width: 25%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;

}



.aside>a i{

    font-size: 27px;

    color: #fff;

}

.aside>a span{

    font-size: 13px;

    color: #fff;

}



.on{

    color: #FFCC33!important;



}



/* 详情页样式 */



.content{

    width: 100%;

    height: 100%;

    background-color: #fff;

    border-radius: 10px;

    margin: 10px auto;

}

.content-title{

    width: 100%;

    row-gap: 10px;

    padding: 10px;

    display: flex;

    justify-content: space-between;

    flex-direction: column;

}

.content-title>p img{

    width: 100px;

    height: 100px;

    display: block;

}

.content-title small{

    color: #888;

    font-size: 12px;

    display: flex;

    justify-content: left;

    align-items: center;

}

.content-title b{

    color: #f00;

    font-size: 20px;

    font-weight: 700;

}

.content-title small i{

    font-size: 16px;

}

.icon-icon-15{

    color: #FFCC33;

}

.content-title p{

    color: #888;

    font-size: 14px;

}





.content-ul{

    width: 100%;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: left;

    text-align: center;

    

}

.content-ul a{

    width: 25%;

    height: 40px;

    line-height: 40px;

}



.quan-list{

    padding: 10px;

}

.quan-list li{

    width: 100%;

    height: 90px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 20px;

    background-color: #f2f2f2;

    border-radius: 10px;

    margin: 10px auto;

}

.quan-tit{

    display: flex;

    flex-direction: column;

    row-gap: 5px;

}

.quan-tit small{

    font-size: 12px;

    color: #888;

    

}

.quan-tit>span{

    color: #f00;

}

.quan-tit>span>b{

    font-size: 18px;

    color: #f00;

    font-weight: 700;

}

.quan-tit>span>mark{

    padding: 3px 8px;

    font-size: 13px;

    background-color: #FFCC33;

}

.quan-btn button{

    border: none;

    background-color: #f00;

    width: 80px;

    height: 40px;

    color: #fff;

    border-radius: 5px;

}



/* 推荐菜品 */

.cptop{

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    column-gap: 5px;

}

.cptop a{

    width: 33%;

    border-radius: 10px;

    padding: 10px;

}

.cptop>a img{

    width: 100%;

    height: 100px;

    border-radius: 10px;

}

.cptop a span{

    display: block;

}



.cplist{

   

  padding: 10px;

}

.cplist ul{

    width: 100%;

    line-height: 30px;

    background-color: #f2f2f2;

    border-radius: 10px;

    display: flex;

    flex-wrap: wrap;

    padding: 10px;

    row-gap: 3px;

}

.cplist ul li{

    display: block;

    width: 25%;

}



.jchj{

    width: 100%;

    padding: 10px;

    border-radius: 10px;

   margin-bottom: 50px;

}

.jchj img{

    width: 100%;

    height: 100%;

    border-radius: 10px;

}



.kefu{

    width: 100%;

    padding: 10px;

    border-radius: 10px;

    display: flex;

    justify-content: left;

    align-items: center;

}

.kefu img{

    width: 170px;

    height: 170px;

    margin-right: 20px;

}





/* 账户页面 */

.account{

    width: 100%;

    height: 100%;

    background-color: #009966;

    max-width: 500px;

    margin: 0 auto;

}

.account-ico{

    display: flex;

    align-items: center;

    justify-content: left;

    height: 150px;

}

.account-ico img{

    width: 80px;

    height: 80px;

    border-radius: 50%;

    display: block;

    margin-left: 30px;

    margin-right: 20px;

}

.account-name{

    display: flex;

    flex-direction: column;

    gap: 10px;

    

}



.account-name h2{

    font-size: 20px;

    color: #fff;

}

.account-name p{ 

   border-radius: 20px;

}

.account-name span{

    color: #F57F17;

    font-size: 14px;

    font-weight: 400;

    vertical-align: middle;

}

.account-name i{

    color: #F57F17;

    vertical-align: middle;

    font-size: 18px;

}



.account-info{

    width: 100%;

    height: calc(100vh - 150px);

    background-color: #fff;

    border-radius: 15px 15px 0 0;

    padding: 20px;

}

.account-info>ul{

    display: flex;

    align-items: center;

    flex-direction: column;

}

.account-info>ul a{

    display: flex;

    width: 100%;

    height: 40px;

    border-bottom: 1px solid #f2f2f2;

    align-items: center;

    column-gap: 8px;

}

.account-info>ul i{

    font-size: 20px;

}



.account-info ol{

    display: flex;

    align-items: center;

    gap: 10px;

}

.account-info>ol li{

    width: 50%;

    background-color: #F44336;

    padding: 10px;

    border-radius: 10px;

    display: flex;

    flex-direction: column;

    gap: 5px;

}

.account-info>ol i{

    font-size: 40px;

    color: #fff;

}

.account-info>ol p{

    width: 100%;

    height: 25px;

    color: #fff;

}

.account-info>ol h2{

    font-size: 18px;

    color: #fff;

}

.account-info>ol b{

    background-color: #009966;

    padding: 3px 10px;

    color: #fff;

    font-size: 14px;

    border-radius: 3px;

}

.gray li{

    background-color: #888!important;

}

.gray b{

    background-color: #888!important;

}



/* 联系我们 */

.contact{

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    

}

.contact img{

    width: 150px;

    height: 150px;

}

.contact p{

    color: #555!important;

}