@charset "utf-8";

/*==========================banner===========================*/
/*.banner{ width: 100%; min-width: 1200px; height: 100%;  background: url(../images/banner-product.png); background-position: center; background-size: cover; overflow: hidden; }*/
.banner {
    height: 400px;
    background: url(../images/commodity/markets.png);
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.banner .cont {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */

    -webkit-box-pack: center;
    /* 12版 */
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;

    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;

    -webkit-box-align: center;
    /* 12版 */
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
}

.banner .cont .tit {
    margin-top: -20px;
    width: 100%;
    padding-left: 26px;
    font-size: 48px;
    color: #fff;
    letter-spacing: 50px;
    text-align: center;
}

.banner .cont .tit-en {
    margin-top: 20px;
    font-size: 35px;
    font-family: Arail, Tabhoma;
    color: #fff;
    text-align: center;
}

/*==========================京麒源商品===========================*/
.product a {
    align-items: center;
    text-decoration: none;
    color: black;
    display: flex;
}

.product-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 20px;
}

.product {
    background: white;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
}

.product img {
    width: 200px;
    height: 200px;
    margin-right: 15px;
    border-radius: 5px;
}

.product .info {
    flex-direction: column;
    flex: 1;
}

.product .info h4 {
    margin: 0 0 5px 0;
}

.product .info .price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.product .info p {
    margin: 5px 0 0 0;
    font-size: 16px;
    /*color: gray;*/
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++手机端++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++手机端++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


@media only screen and (min-width: 300px) and (max-width: 768px) {
    /*==========================banner===========================*/
    .banner {
        width: 100%;
        min-width: 300px;
        height: 100vh;
        background: url(../images/05-min.png);
        background-position: center;
        background-size: cover;
        overflow: hidden;
    }

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

    .banner .cont .cont-in {
        margin-top: -100px;
    }

    .banner .cont .tit {
        margin-top: -20px;
        width: 100%;
        padding: 0 0 0 8px;
        font-size: 2.2rem;
        color: #fff;
        letter-spacing: 15px;
        text-align: center;
    }

    .banner .cont .tit-en {
        margin-top: 2px;
        font-size: 1.2rem;
        font-family: Arail, Tabhoma;
        color: #fff;
        text-align: center;
    }

    /*==========================京麒源商品===========================*/
    /*.slide{ position: relative; width: 100%; height:auto; margin: 0 auto;}*/
    /*.slide .hd{ display: none; height:15px; overflow:hidden; position:absolute; right:80px; bottom:30px; z-index:1; }*/
    /*.slide .hd ul{ overflow:hidden; zoom:1; float:left;  -webkit-padding-start: 0px;}*/
    /*.slide .hd ul li{ float:left; margin-right:4px;  width:15px; height:15px; border-radius: 50%; line-height:14px; text-align:center; background:#e5dcdc; cursor:pointer; }*/
    /*.slide .hd ul li.on{ background:#2293DC; color:#fff; }*/
    /*.slide .bd{ position:relative; height:100%; z-index:0; }*/
    /*.slide .bd li{ width: 100%; height:auto; zoom:1; }*/
    /*.slide .bd li .title{ padding-top: 20px; font-size: 1.8rem; color: #000; text-align: center; cursor: pointer;}*/
    /*.slide .bd li .content{ margin-top: 10px; padding: 0 24px; font-size: 1.2rem; color: #333; line-height: 24px; text-align: center; cursor: pointer;}*/
    /*.slide .bd .more{ display: block; margin: 10px auto 10px; width: 90px; height: 24px; font-size: 1.2rem; color: #2293DC; line-height: 26px; letter-spacing: 3px; text-align: center; border: 1px solid #2293DC; border-radius: 25px; }*/
    /*.slide .bd .more:hover{ font-size: 1.3rem;}*/
    /*.slide .bd li .picture{ width: 100%; height: auto;}*/
    /*.slide .bd li .picture img{ display:block; width: 100%; height: auto;}*/
    /*.slide .prev,*/
    /*.slide .next{ position:absolute; left:5px; top:50%; margin-top:-30px; display:block;  width:20px; height:36px; background:url(../images/icon-left.png) no-repeat; background-size: 100% 100%; filter:alpha(opacity=30);opacity:0.3;   }*/
    /*.slide .next{ left:auto; right: 5px; background: url(../images/icon-right.png); background-size: 100% 100%; }*/
    /*.slide .prev:hover,*/
    /*.slide .next:hover{ filter:alpha(opacity=100);opacity:1;  }*/
    .product a {
        align-items: center;
        text-decoration: none;
        color: black;
        display: flex;
    }

    .product-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 20px;
    }

    .product {
        background: white;
        padding: 15px;
        border-radius: 5px;
        border: 1px solid #ddd;
        display: flex;
        align-items: center;
    }

    .product img {
        width: 80px;
        height: 80px;
        margin-right: 15px;
        border-radius: 5px;
    }

    .product .info {
        flex: 1;
    }

    .product .info h4 {
        margin: 0 0 5px 0;
    }

    .product .info p {
        margin: 5px 0 0 0;
        color: gray;
    }
}