/* hero section */
.herosection {
    background-image: url('../images/herogaming.jpg');
}

/* mice section */
.mice-section {
    margin: 100px 54px;
}

.mice-title {
    text-align: center;
    margin: 0 0 100px 0;
}

.mice {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.mice-cardborder {
    flex: 0 0 calc(33.333% - 70px);
}

.mice-card {
    min-height: 500px;
    text-align: center;
    display: flex;
    align-items: center;
}

.miceimg-box {
    min-height: 250px;
    display: flex;
    align-items: center;
}

.miceimg-box img {
    width: 100%;
}

.miceprice {
    margin: 0;
}

.miceinfo-title {
    margin: 0;
    min-height: 220px;
    display: flex;
    align-items: center;
    text-align: center;
}

.micetitle {
    margin: 0;
}

.miceinfo-price {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* button */
.button {
    margin: 0;
    width: 120px;
    padding: 3px;
}

.button a {
    padding: 15px 20px;
}

/* mice banner section */

.micebanner {
    background-image: url('../images/bannermice.jpg');
}

.micebanner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1/0.4;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
}

.micebanner-title {
    line-height: 2;
    width: 75%;
}

.micebanner-title h2 {
    margin: 0 54px;
}

.micebanner-title h5 {
    margin: 0 54px;
}

/* keyboard section */
.keyboard-section {
    margin: 100px 54px;
}

.keyboard-title {
    text-align: center;
    margin: 0 0 60px 0;
}

.keyboard {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.keyboard-cardborder {
    flex: 0 0 calc(50% - 40px)
}

.keyboard-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.keyboard-card img {
    width: 100%;
}

.keyboardimg-box {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.keyboardinfo-title {
    margin: 0;
    min-height: 120px;
}

.keyboard-price h5 {
    margin: 0;
    margin-bottom: 15px;
}

/* keyboard banner section */

.keyboardbanner {
    background-image: url('../images/bannerkeyboard.jpg');
}

.keyboardbanner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1/0.4;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
}

.keyboardbanner-title {
    margin: 0 0 0 300px;
}

.keyboardbanner-title h2 {
    margin: 0 54px;
}

.keyboardbanner-title h5 {
    margin: 0 54px;
}

/* controller section */
.controller-section {
    margin: 100px 54px;
}

.controller-title {
    text-align: center;
    margin: 100px 0 60px 0;
}

/* controller card short */
.controller-card.card-short {
    display: flex;
    align-items: center;
}

.card-short .controllerimg-box {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 240px;
}

.card-short .controllerimg-box img {
    width: 100%;
}

.card-short .controllerinfo-box {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.controllertitle {
    align-items: center;
}

.controller-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* card long */
.controller-card.card-long {
    display: flex;
    flex-direction: row;
}

/* 左边：大图 */
.card-long .controllerimg-box {
    max-width: 240px;
    display: flex;
}

.card-long .controllerimg-box img {
    width: 100%;
}

/* 右边：文字区 */
.card-long .controllerinfo-box {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.card-long .controller-bottom {
    display: flex;
    align-items: center;
}

.controllerprice {
    margin: 0;
}

.controller-row1,
.controller-row2,
.controller-row3 {
    margin: 54px;
    display: flex;
    justify-content: center;
    gap: 50px;
}

/* controller banner section */

.controllerbanner {
    background-image: url('../images/bannercontroller.jpg');
}

.controllerbanner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1/0.4;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
}

.controllerbanner-title {
    width: 75%;
}

.controllerbanner-title h2 {
    margin: 0 54px;
}

.controllerbanner-title h5 {
    margin: 0 54px;
}

/* Headset section */
.headset-section {
    margin: 100px 54px;
}

.headset-title {
    text-align: center;
    margin: 100px 0 60px 0;
}

.headset {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

.headset-cardborder {
    flex: 0 0 calc(50% - 60px);
}

.headset-card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.headsetimg-box {
    max-width: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.headsetimg-box img {
    width: 100%;
}

.headsetinfo-box {
    display: flex;
    flex-direction: column;
}

.headset-bottom {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* headset banner section */

.headsetbanner {
    background-image: url('../images/bannerheadset.jpg');
}

.headsetbanner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1/0.4;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
}

.headsetbanner-title {
    width: 75%;
}

.headsetbanner-title h2 {
    margin: 0 54px;
}

.headsetbanner-title h5 {
    margin: 0 54px;
}

/* buyguide section */
.buyguide-section {
    margin: 100px 54px;
}

.buyguide-title {
    text-align: center;
    margin: 100px 0 60px 0;
}

.buyguide {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.buyguide-cardborder {
    flex: 0 0 calc(33.333% - 30px);
}

.buyguide-card {
    justify-content: flex-start;
}

.buyguidecard-title {
    text-align: left;
    margin-left: 20px;
}

.buyguidecard-content li {
    margin-bottom: 15px;
}

.whitecard {
    background-color: white;
}

.whitecard h5,
.whitecard ul li {
    color: black;
}

.blackcard {
    background-color: black;
}


@media screen and (max-width:1174px) {
    .headset-card {
        min-height: 400px;
    }
}

@media screen and (max-width:1108px) {
    .mice-cardborder {
        flex: 0 0 calc(50% - 60px);
    }

    .headset-card {
        min-height: 430px;
    }
}

@media screen and (max-width:1080px) {

    .mice-cardborder {
        flex: 0 0 calc(50% - 60px);
    }

    .miceimg-box {
        max-height: 140px;
    }

    .miceimg-box img {
        width: 100%;
    }

    .miceinfo-title {
        min-height: 100px;
    }

    .keyboard-price h5 {
        margin-bottom: 20px;
    }

    .keyboardbanner-title {
        margin: 0 0 0 200px;
    }

    .headset-cardborder {
        flex: 0 0 100%;
        max-width: 750px;
    }

    .headset-card {
        flex-direction: column;
        min-height: 0px;
        gap: 20px;
    }

    .headsetimg-box {
        max-width: unset;
    }

    .headsetinfo-box {
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .headsettitle {
        min-height: 80px;
    }

    .headset-bottom {
        flex-direction: column;
        gap: 10px;
    }

    .headsetprice h5 {
        margin: 0;
    }

    .headsettitle,
    .headsetprice,
    .button {
        margin: 0;
    }

    .buyguide-cardborder {
        flex: 0 0 calc(50% - 25px);
    }

    .controller-cardborder {
        flex: 0 0 calc(50% - 25px);
    }

    .controller-card.card-short {
        display: flex;
        align-items: center;
    }

    .controllertitle {
        min-height: 80px;
    }

    .controllerinfo-box {
        text-align: center;
    }

    .card-short .controllerimg-box {
        min-width: 200px;
    }

    /* card long */
    .controller-card.card-long {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 左边：大图 */
    .card-long .controllerimg-box {
        max-width: 240px;
        display: flex;
    }

    /* 右边：文字区 */
    .card-long .controllerinfo-box {
        display: flex;
        flex-direction: column;
    }

    .card-long .controller-bottom {
        display: flex;
        align-items: center;
    }

    .controllerprice {
        margin: 0;
    }


}

@media screen and (max-width:720px) {

    .mice-section,
    .keyboard-section,
    .controller-section,
    .headset-section,
    .buyguide-section {
        margin: 30px 30px;
    }

    .mice-title,
    .keyboard-title,
    .controller-title,
    .headset-title,
    .buyguide-title {
        margin: 0 0 30px 0;
    }

    .mice,
    .keyboard,
    .controller,
    .headset {
        gap: 30px;
    }

    .micebanner-title,
    .keyboardbanner-title,
    .controllerbanner-title,
    .headsetbanner-title {
        line-height: 1.5;
        width: 90%;
    }

    .keyboard {
        display: flex;
        flex-direction: column;
    }

    .miceimg-box {
        max-height: 120px;
    }

    .miceinfo-title {
        min-height: 60px;
    }

    .mice-cardborder {
        flex: 0 0 100%;
    }

    .keyboardimg-box {
        min-height: 140px;
    }

    .keyboardinfo-title {
        margin: 0;
        min-height: 60px;
    }

    .keyboard-price h5 {
        margin-bottom: 15px;
    }

    .keyboardbanner-title {
        margin: 0 0 0 0;
    }

    .headsettitle {
        min-height: 60px;
    }

    .buyguide-cardborder {
        flex: 0 0 100%;
    }

    .controller {
        display: flex;
        flex-direction: column;
        gap: 30px;

    }

    .controller-cardborder {
        flex: 0 0 100%;
    }

    .controller-row1,
    .controller-row2,
    .controller-row3 {
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .controller-card.card-short {
        display: flex;
        align-items: center;
    }

    .controllertitle {
        min-height: 80px;
    }

    .controllerinfo-box {
        text-align: center;
    }

    .card-short .controllerimg-box {
        min-width: 150px;
    }

    .controller-bottom {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        justify-content: space-between;
    }

    /* card long */
    .controller-card.card-long {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 左边：大图 */
    .card-long .controllerimg-box {
        max-width: 180px;
        display: flex;
    }

    /* 右边：文字区 */
    .card-long .controllerinfo-box {
        display: flex;
        flex-direction: column;
    }

    .card-long .controller-bottom {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .controllerprice {
        margin: 0;
    }
}

@media screen and (max-width:600px) {

    .mice-card {
        height: 400px;
    }

    .miceimg-box {
        max-width: 100%;
        height: 120px;
    }

    .micetitle-box {
        height: auto;
    }

    .miceinfo-box {
        justify-content: flex-start;
        height: 140px;
    }

    .keyboardimg-box {
        height: 180px;
    }

    .mice-section,
    .keyboard-section,
    .controller-section,
    .headset-section,
    .buyguide-section {
        margin: 50px 30px;
    }

    .buyguide-title {
        text-align: center;
        margin: 50px 0 50px 0;
    }

    .micebanner-title h5,
    .controllerbanner-title h5,
    .headsetbanner-title h5 {
        margin: 0 30px;
        width: 100%;
    }

    .micebanner-title h2,
    .controllerbanner-title h2,
    .headsetbanner-title h2 {
        margin: 0 30px;
        width: 100%;
    }

    .keyboardbanner-title {
        margin: 0 0 0 0;
    }

    .keyboardbanner-title h2,
    .keyboardbanner-title h5 {
        margin: 0 30px;
    }

    .controller-row1,
    .controller-row2,
    .controller-row3 {
        margin: 0px;
    }
}