#contentwrap {
    width: 100%;
}

.br_box {
    width: 100%;
    height: 78px;
    display: none;
}

.main_banner {
    background: url(../img/m_1_banner.PNG) center no-repeat;
    width: 100%;
    height: 500px;
    background-size: cover;
}

.title {
    width: 100%;
    height: 80px;
    background-color: #000000;
    
    color: #fff;
    text-align: center;
    font: 21px/75px '';
        margin: 0;
        padding: 0;
}

#contentwrap > p {
    text-align: center;
    color: #000000;
    font: 16px/40px '';
    margin: 100px 20px;
}

.shop_banner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.shop_banner li {
    max-width: 300px;
    height: 550px;
    border: 1px solid #ddd;
    margin-bottom: 80px;
}

.shop_banner li:last-child {
    margin-bottom: 0;
}

.shop_banner li:hover {
    box-shadow: 0px 0px 15px #ddd;
}

.shop_banner li:first-child .shop_bg {
    width: 100%;
    height: 350px;
    background: url(../img/headset/black.jpg) center no-repeat;
    background-size: cover;
    
    border-bottom: 1px solid #000;
}

.shop_banner li:first-child:hover .shop_bg {
    background: url(../img/headset/black_hover.jpg) center no-repeat;
    background-size: cover;
}

.shop_banner li:nth-child(2) .shop_bg {
    width: 100%;
    height: 350px;
    background: url(../img/headset/mode.jpg) center no-repeat;
    background-size: cover;
    
    border-bottom: 1px solid #000;
}

.shop_banner li:nth-child(2):hover .shop_bg {
    background: url(../img/headset/mode_hover.jpg) center no-repeat;
    background-size: cover;
}

.shop_banner li:last-child .shop_bg {
    width: 100%;
    height: 350px;
    background: url(../img/headset/ear.jpg) center no-repeat;
    background-size: cover;
    
    border-bottom: 1px solid #000;
}

.shop_banner li:last-child:hover .shop_bg {
    background: url(../img/headset/ear_hover.jpg) center no-repeat;
    background-size: cover;
}

.shop_text {
    width: 300px;
    height: 200px;
    position: relative;
}

.shop_text h5 {
    font: 600 18px/24px '';
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 10px;
}

.shop_text p {
    padding-left: 20px;
    font:14px/24px '';
}

.shop_text span {
    font:14px/24px '';
    font-style: oblique;
    text-decoration: line-through;
    color: #777;
    padding-left: 10px;
}

.shop_text .price {
    padding-left: 20px;
    font:bold 24px/24px '';
    padding-top: 10px;
    color: #8b2626;
}

.coin_box {
    width: 170px;
    height: 30px;
    
    border: 1px solid #ddd;

    
    margin-top: 30px;
    margin-left: 20px;
    background-color: #fff;
}

.coin_circle {
    width: 23px;
    height: 23px;
    
    border-radius: 100%;
    background-color: #000000;
    
    color: #fff;
    font: 14px/22px '';
    text-align: center;
    
    margin-top: 3px;
    margin-left: 5px;
    float: left;
}

.coin_box p {
    margin-left: 20px;
    margin-top: 4px;
}





/**********************************/


@media all and (max-width:1023px) {
    .main_banner {
    background: url(../img/m_1_banner.PNG) center no-repeat;
    width: 100%;
    height: 300px;
    background-size: cover;
    }
    
}

@media all and (max-width:767px) {
    .br_box {
    width: 100%;
    height: 78px;
    display: block;
    }
}

@media all and (max-width:414px) {
    .shop_text {
    width: 250px;
    height: 200px;
    position: relative;
}
    
    .shop_banner li {
    max-width: 250px;
    height: 550px;
    border: 1px solid #ddd;
    margin-bottom: 80px;
}
}