* {
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
}

.wrap {
    width: 1340px;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    font-size: 0;
    line-height: 0;
}

    .wrap div {
        width: 860px;
        max-width: 100%;
        margin: 0 auto;
    }


    .wrap img {
        position: relative;
        max-width: 100%;
    }

    .wrap .bg {
        position: relative;
    }

        .wrap .bg:before {
            display: block;
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            background-position: center top;
            transform: translateX(-50%);
        }

        .wrap .bg.n1:before {
            width: 1340px;
            height: 898px;
            background-image: url('/images/main/bg01.jpg');
            background-repeat: no-repeat;
        }

        .wrap .bg.n2:before {
            width: 100vw;
            height: 500px;
            background-image: url('/images/main/bg02.jpg');
            background-repeat: repeat-x;
        }

        .wrap .bg.n2 div {
        }

            .wrap .bg.n2 div a {
                display: inline-block;
                width: 50%;
                vertical-align: top;
            }

            .wrap .bg.n2 div > img {
                width: 50%;
                max-width: 50%;
                vertical-align: top;
            }

        .wrap .bg.n3:before {
            width: 100vw;
            height: 100%;
            background-color: #daf1dd;
        }


            .wrap .bg.n3 div a {
                display: inline-block;
                width: 50%;
                vertical-align: top;
            }

            .wrap .bg.n3 div > img {
                width: 50%;
                max-width: 50%;
                vertical-align: top;
            }


        .wrap .bg.category_phonics:before {
            width: 100vw;
            height: 500px;
            background-image: url('/images/main/phonicsTitleBg.png');
            background-repeat: repeat-x;
        }

        .wrap .bg.category_phonics div {
        }

            .wrap .bg.category_phonics div a {
                display: inline-block;
                width: 50%;
                vertical-align: top;
            }

            .wrap .bg.category_phonics div > img {
                width: 50%;
                max-width: 50%;
                vertical-align: top;
            }


        .wrap .bg.box_yellow:before {
            width: 100vw;
            height: 100%;
            background-color: #fcfae5;
        }



        .wrap .bg.category_pronunciation:before {
            width: 100vw;
            height: 500px;
            background-image: url('/images/main/pronunciationTitleBg.png');
            background-repeat: repeat-x;
        }
        .wrap .bg.box_pink:before {
            width: 100vw;
            height: 100%;
            background-color: #ffeef4;
        }


    .wrap .btn {
        text-align: left;
    }

        .wrap .btn a {
            display: inline-block;
            margin-left: 4.5%;
        }

        .wrap .btn.n1 a {
            width: 22.094%;
        }

        .wrap .btn.n2 a {
            width: 31.396%;
        }

        .wrap .btn a img {
        }

@media all and (max-width:860px) {
    .wrap .bg.n1:before {
        max-width:100%;
        height: 100%;
        background-size: auto 100%;
    }

    .wrap .bg.n2:before {
        height: 100%;
        background-size: auto 31%;
    }
}