:root {
    --white: #feebeb;
    --black: #000000;
    --green: #eef9e0;
    --font-color: #646464;
    --line-color:#9cd078;
}


*{
    margin: 0 ;
    padding: 0 ;
}

html,
body {
    position: relative;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: var(--font-color);
    text-decoration: none;
    overflow-x: hidden;
}

a,a:active,a:focus,a:visited{
    text-decoration: none;
}

.header-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--green);
}

.header-topbar-logo{
    display: flex;
    justify-content: center;
    width: 100% ;
    padding: 20px 0 ;
    border-bottom: 1px solid var(--line-color);
}

.header-topbar-logo img{
    display: block;
    max-width: 100% ;
}

.header-topbar-menu{
    display: flex;
    justify-content: center;
    padding: 10px 0 ;
}

.header-topbar-menu a{
    display: block;
    color: #123B00;
    font-weight: 600;
    padding: 10px 30px ;
}

.header-topbar-menu a:hover{
    color: #ff0000;
}

.header-topbar-menu a:not(:last-child){
    border-right: 1px solid var(--line-color);
}

.section-empty-space{
    background: url(../images/bline.jpg) no-repeat left center ;
    background-size: 100% ;
    width: 100% ;
    height: 30px ;
}

.banner img{
    display: block;
    width: 100% ;
}

.container{
    margin: 0 auto;
}

.main-wrapper{
    /* width: 1440px; */
    margin: 10px auto 0;
}

.search-wrapper{
    display: flex;
    align-items: center;
    width: 100% ;
    background: url(../images/stock_bg.jpg) repeat-x;
}

.form-elements,
.form-line{
    display: flex;
    align-items: center;
}

.form-title{
    display: none;
}

.form-line{
    padding: 0 30px ;
}

.form-line:last-child{
    padding: 0 ;
}

.form-label{
    font-size: 14px;
    color:#656565;
    margin-right: 10px ;
}

.form-input input,.form-input select{
    min-width: 150px ;
    min-height: 30px ;
    padding: 5px 10px ;
    outline: none;
    box-sizing: border-box;
}

.form-line button{
    height: 30px ;
    padding: 0 10px ;
    outline: none;
}

.main-container{
    display: grid;
    grid-template-columns: 15% 85%;
    background-color: var(--green);
    /* margin-top: 10px ; */
}

.aside-left{
    padding: 0 10px ;
    border-left:1px solid #9cd078;
    border-right:1px solid #9cd078;
}

.aside-left .market-brands .topic-thumb img{
    width: 100% ;
}

.aside-left .market-brands .scroll-brands-swiper{
    width:100%;
    height: 400px ;
    margin: 10px 0 ;
}

.aside-left .market-brands .scroll-brands-swiper .swiper-wrapper{
    transition-timing-function: linear;
}

.aside-left .market-brands .scroll-brands-swiper .swiper-slide{
    display: flex;
    justify-content: center;
    align-items: center;
}

.aside-left .market-brands .shipping-brands{
    padding: 20px 10px;
}

.aside-left .market-brands .shipping-brands a{
    display: block;
    margin-bottom: 20px ;
}

.aside-left .market-brands .shipping-brands img{
    display: block;
    width: 100% ;
    margin: 0 auto;
}

.aside-right{
    position: relative;
    background: url(../images/aside_right_bg.jpg) repeat-x left top;
}

.aside-right::before{
    content: '';
    position: absolute;
    left: 0 ;
    top: 0 ;
    width: 100%;
    height: 30px ;
    background: url(../images/aside_right_mark.jpg) no-repeat left top;
}

.main-content{
    padding: 50px 30px ;
}

.main-content .title{
    background: linear-gradient(to right,transparent,#daedba 20%,#eef9e0);
    display: flex;
    align-items: center;
    font-size: 20px ;
    font-weight: 500 ;
    color:#699e33
}

.main-content .title::before{
    content:"";
    background: linear-gradient(to bottom,#4b7e23 0 30% ,#6eb536 30% 70%, #4b7e23 70% 100%);
    width: 10px;
    height: 40px;
    border-radius: 10px;
    margin-right: 20px ;
}

.main-content .content{
    font-size: 14px;
    color:#656565;
    line-height: 30px ;
    padding: 20px 0 ;
}

.main-content .scroll-about-swiper{
    width:100% ;
}

.main-content .scroll-about-swiper .swiper-wrapper{
    transition-timing-function: linear;
}

.main-content .scroll-about-swiper img{
    display: block;
    width:100% ;
}

footer{
    background:#eef9e0;
    padding-bottom: 20px;
}

.footer-empty-space{
    background:#eef9e0 url(../images/end_bg.jpg) repeat-x left top;
    height: 40px;
}

.footer-wrapper{
    display: flex;
    align-content: center;
    border-bottom: 1px solid #9cd078;
}

.footer-bottom-logo a{
    display: block;
    padding: 20px 40px 20px 0 ;
    margin-right: 40px ;
    border-right:1px solid #9cd078;
}

.footer-bottom-menu .bottom-menu-group{
    display: flex;
    padding: 10px 0 ;
}

.footer-bottom-menu .bottom-menu-group a{
    display: block;
    font-size: 12px ;
    color: #123b00;
    padding: 0 15px ;
}

.footer-bottom-menu .bottom-menu-group a:first-of-type{
    padding-left: 0 ;
}

.footer-bottom-menu .bottom-menu-group a:not(:last-child){
    border-right: 1px solid #123b00;
}

.footer-bottom-menu .bottom-copyright-msg{
    font-size: 12px ;
    color: #656565;
}

.footer-remark-msg{
    font-size: 12px ;
    color: #656565;
    margin-top: 10px ;
}