* {
    font-family: \5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4;
    box-sizing: border-box;
}

input:focus {
    outline: 0
}

button:focus {
    outline: 0
}

a {
    transition: all 0.5s
}

.app-index {
    background-image: url(../images/index-bg.jpg);
    background-repeat: no-repeat;
    background-position: center top
}

/*--------------2025.11 新增修改-------------*/
.title-tip {
    text-align: center;
    font-size: 26px;
    color: red;
    border-bottom: 3px solid #cccccc;
    padding-bottom: 2rem;
    margin-bottom: 7rem;
}
.container_applist{
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 6rem 0;
    overflow: hidden;
}
.container_applist h2{
    margin-bottom: 2.5rem;
    padding: 1.6rem .6rem;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #D4004D;
    background-color: #fce8ef;
    border-radius: 9px 9px 2px 2px;
    border-bottom: 4px solid #ffb2d0;
    min-height: 5em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.container_applist h2 p{
    margin: .7rem auto 0;
    line-height: 2.5rem;
    font-size: .85em;
    font-weight: normal;
}
.container_applist h2.blue{
    color: #0e6bb7;
    background-color: #eaf5fa;
    border-bottom: 4px solid #7fbbeb;
}

h2 span::before{
    content: "★";
    margin-right: 3px;
}
    
.row.hipass{
    display: flex;
    margin: 0 auto;
    justify-content: center;
}

.row.hipass .col{
    width: 100%;
    flex: 1;
    max-width: 800px;
    margin: 0 6rem 5rem 0;
}

.row.hipass .col:last-of-type{
    margin-right: 0;
}

.row.hipass .screen{
    width: 100%;
    margin: 1.5rem auto 0 auto;
}
.row.hipass .screen img{
    width: 100%;
    border-radius: 8px;
}
.downloadArea{ 
    display: flex; 
    flex-direction: column;
    justify-content: center;
}
.downloadArea .app_logo{
    margin: 0 auto 1.8rem;
    width: 200px;
    height: auto;
}
.app_logo img{
    width: 100%;
}
.codeBox{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}
.codeBox a{
    flex: 1;
    display: block;
    max-width: 130px;
}
img.qr_pc_img {
    width: 100%;
}
.hipass-tip {
    min-height: 2em; 
    font-size: 16px;
    color: #ff0000;
    margin-top: 1.5rem;
    margin-left: 2rem;
    text-align: center;
}
.hipass-tip ul{
    padding-left: 0;
    list-style-position: inside;
    display: inline-block;
    text-align: left;
}

.hipass-tip ul li:last-of-type{
    padding-bottom: 0;
}


    @media (max-width: 1400px) {
        .title-tip{
            margin-bottom: 5rem;
        }

        .container_applist h2{
            font-size: 22px;
            padding: 1.3rem .5rem;
            min-height: auto;
        }
        .container_applist{
            padding: 3rem 0;
        }
        .row.hipass{
            max-width: 500px;
            margin: 0 auto;
            flex-direction: column;
            align-items: center;
        }
        .row.hipass .col{
            flex: none;
            margin-right: 0;
            margin-bottom: 7rem;
        }

        .downloadArea .app_logo{
            width: 170px;
            height: auto;
        }
        .app_logo img, img.qr_pc_img{
            width: 100%;
            height: auto;
        }

        .hipass-tip {
            min-height: auto; 
            margin-left: 0;
        }
        .hipass-tip ul {
            padding-left: 3rem;
        }
        .hipass-tip ul li{
            text-align: left;
            padding-left: 2.4rem;
            margin-left: -2.4rem;
            text-indent: -2.4rem;
        }

    }

    @media (max-width: 992px) {
        .title-tip {
            border-bottom: none;
            margin-bottom: 3rem;
        }
        .row.hipass{
            max-width: 500px;
        }
        .downloadArea{ 
            flex-direction: row;
        }
        .downloadArea .app_logo{
            width: 230px;
            margin: 0 3rem 0 0;
            flex-shrink: 0;
        }
        .codeBox{
            flex-direction: column;
        }
        .codeBox a{
            width: 100%;
            max-width: none;
            flex: none;
        }
        .row.hipass .screen{
            max-width: 500px;
            margin: 0 auto;
        }


    }

    @media (max-width: 576px) {
        .title-tip {
            margin-bottom: 2rem;
        }

        .container_applist h2{
            font-size: 20px;
            line-height: 2.2rem;
        }
        .container_applist h2 p{
            line-height: 2.2rem;
        }
        .container_applist{
            width: 90%;
        }
        .downloadArea .app_logo{
            max-width: 140px;
            margin-right: 1rem;
        }
        .row.hipass .screen{
            margin-top: 1rem;
        }

        .row.hipass .screen{
            width: 100%;
        }
    }


/*--------------2022.06.22 Hipass Beta-------------*/
.stepBox{ margin: 0 auto 10%; text-align: center; font-size: 26px; font-weight: bold;}
ul.steps li{ text-align: left;}
ul.steps li::marker{ color: #ff0f47;}
.stepBox img{ width: 80%; margin: 2% auto 3%; border-radius: 2rem; border: 2px solid #ccc; box-shadow: 4px 3px 3px rgba(0,0,0,.3);}
.stepBox i{ 
    width: 0; height: 0; margin: 0 auto; display: block; 
    border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #ff0f47;
}
.downloadBN{ 
    width: 100%; margin: 0 auto; text-align: center;
    position: fixed; bottom: 0; left: 0; right: 0; opacity: .95;
}
.downloadBN a{ padding: 1%; box-sizing: border-box; display: block; text-decoration: none; color: #fff; font-size: 30px; font-weight: bold; background: #3981ec; }
.downloadBN a::after{ 
    content: ""; display: inline-block; margin-left: 8px; position: relative; top:5px; 
    width: 30px; height: 33px; background-color: #fff;
    -webkit-mask-image: url(../images/icon_dw.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
    mask-image: url(../images/icon_dw.svg); mask-repeat: no-repeat; mask-position: center;    
}
.downloadBN:hover a{ color: #fff; text-decoration: none; background: #12a13d; }
.footer.beta{ padding-bottom: 6%;}



@media (max-width: 420px) {
    .app-index {
        background-image:url(../images/index-bg2.jpg)
    }
}

.body-applist {
    background-image: url(../images/bg-applist.jpg);
    background-repeat: no-repeat;
    background-position: center 46px
}

@media (max-width: 1179px) {
    .body-applist {
        background-image:none
    }
}

.body-fliplearn {
    background-image: url(../images/bg-fliplearn.jpg);
    background-repeat: no-repeat;
    background-position: center 46px
}

@media (max-width: 1179px) {
    .body-fliplearn {
        background-image:none
    }
}

.body-hipass {
    background-image: url(../images/bg-hipass.jpg);
    background-repeat: no-repeat;
    background-position: center 46px
}

@media (max-width: 1179px) {
    .body-hipass {
        background-image:none
    }
}

.body-teacher123 {
    background-image: url(../images/bg-teacher123.jpg);
    background-repeat: no-repeat;
    background-position: center 46px
}

@media (max-width: 1179px) {
    .body-teacher123 {
        background-image:none
    }
}

.body-contactbook {
    background-image: url(../images/bg-contactbook.jpg);
    background-repeat: no-repeat;
    background-position: center 46px
}

@media (max-width: 1179px) {
    .body-contactbook {
        background-image:none
    }
}

.top-banner {
    height: 480px;
}

.mar-h {
    margin-top: 60px
}

@media (max-width: 1179px) {
    .top-banner {
        height:auto
    }

    .mar-h {
        margin-top: -30px
    }
}

@media (min-width: 1180px) {
    .top-banner img {
        display:none
    }
}

@media (max-width: 700px) {
    .top-banner {
        display:none
    }
}

@media (min-width: 701px) {
    .top-banner3 {
        display:none
    }
}

.top-banner3 {
    height: auto
}

.topline {
    width: 100%;
    height: 46px;
    background-color: #000000;
    background-repeat: repeat;
    background-position: center top;
    letter-spacing: 1px;
    font-size: 16px;
    border-bottom: 2px solid #000000
}

.top-text1 {
    width: 50%;
    float: left;
    color: #ffffff;
    text-align: left
}

.top-text2 {
    width: 50%;
    float: left;
    color: #ffffff;
    text-align: right
}

#productlist {
    margin-top: 60px;
    margin-bottom: 50px
}

#productlist .row {
    border-top: 0px solid #d9d9d9
}

#productlist ul {
    width: 100%;
    margin-top: -40px;
    text-align: center
}

@media (max-width: 1179px) {
    #productlist ul {
        margin-top:-20px
    }
}

#productlist ul li a {
    display: inline-block;
    padding: 6px 20px;
    margin: 0 8px;
    border: 2px solid #c8c8c8;
    background-image: url(../images/list-topbg2.jpg);
    border-radius: 5px;
    font-size: 26px;
    color: #593f15;
    color: #878787;
    font-weight: bold
}

#productlist ul li {
    position: relative
}

#productlist ul li.select a,#productlist ul li:hover a,#productlist ul li.active>a {
    text-decoration: none;
    border: 2px solid #ffa02f;
    background-image: url(../images/list-topbg.jpg);
    border-radius: 5px;
    font-size: 26px;
    color: #593f15;
    font-weight: bold
}

#productlist ul li.select:after {
    display: inline-block;
    margin-left: 10px;
    content: '';
    border-width: 8px;
    border-color: transparent;
    border-style: solid;
    border-bottom-width: 0;
    border-top-color: #feb528;
    position: absolute;
    width: 0px;
    height: 0px;
    bottom: -8px;
    left: 0;
    right: 0;
    margin: auto
}

@media (max-width: 510px) {
    #productlist ul li a {
        display:inline-block;
        padding: 6px
    }

    #productlist ul li.select:after {
        bottom: -3px
    }
}

ul.rows,ol.rows,dl.rows {
    margin: 0;
    padding: 0;
    list-style: none
}

ul.rows>li,ol.rows>li,dl.rows>dt,dl.rows>dd {
    margin: 0;
    padding: 0;
    display: block;
    clear: both
}

ul.columns,ol.columns,dl.columns {
    margin: 0;
    padding: 0;
    list-style: none
}

ul.columns:after,ol.columns:after,dl.columns:after {
    content: "";
    clear: both;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
    visibility: hidden
}

ul.columns>li,ol.columns>li,dl.columns>dt,dl.columns>dd {
    margin: 0;
    padding: 0;
    float: left
}

ul.columns.inline,ol.columns.inline,dl.columns.inline {
    letter-spacing: -0.31em
}

opera-hack:-o-prefocus,ul.columns.inline,ol.columns.inline,dl.columns.inline {
    word-spacing: -0.43em
}

ul.columns.inline>li,ol.columns.inline>li,dl.columns.inline>dt,dl.columns.inline>dd {
    float: none;
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal
}

opera-hack:-o-prefocus,ul.columns.inline>li,ol.columns.inline>li,dl.columns.inline>dtdl.columns.inline>dd {
    word-spacing: normal
}

.hide1 {
    text-align: center;
    font-size: 18px;
    margin-top: -10px;
    color: #737373
}

.hide2 {
    text-align: center;
    font-size: 18px;
    margin-top: -10px;
    color: #737373;
    line-height: 28px
}

@media (max-width: 700px) {
    .hide1 {
        margin-top:15px
    }
}

@media (max-width: 380px) {
    .hide2 {
        margin-top:15px
    }
}

@media (max-width: 500px) {
    .hide1 {
        font-size:17px
    }
}

@media (max-width: 480px) {
    .hide1 {
        display:none
    }
}

@media (min-width: 481px) {
    .hide2 {
        display:none
    }
}

.footer {
    background-color: #000000;
    background-repeat: repeat-x;
    background-position: center top;
    width: 100%;
    color: #737373;
    text-align: center;
    padding: 20px 10px;
    font-size: 16px;
    line-height: 30px
}

@media (max-width: 768px) {
    .footer {
        font-size:14px;
        line-height: 28px
    }
    /*--------------2022.06.22 Hipass Beta-------------*/
    .stepBox{ margin: 0 auto 14%; font-size: 22px; }
    ul.steps{ width: 96%; margin-bottom: 0;}
    .stepBox img{ width: 90%; margin: 4% auto; }
    .downloadBN a{ padding: 3.5%; font-size: 26px;}
    .downloadBN a::after{ width: 25px; height: 28px;}
    .footer.beta{ padding-bottom: 17%;}

}

.inline img {
    width: 500px;
    height: auto
}

@media (max-width: 600px) {
    .inline img {
        width:360px;
        height: auto
    }
}

@media (max-width: 500px) {
    .inline img {
        width:320px;
        height: auto
    }
}

@media (max-width: 450px) {
    .inline img {
        width:300px;
        height: auto
    }
}

@media (max-width: 380px) {
    .inline img {
        width:260px;
        height: auto
    }
}

.down-bu img {
    width: 300px;
    height: auto
}

@media (max-width: 500px) {
    .down-bu img {
        width:220px;
        height: auto
    }
}

@media (max-width: 1280px) {
    .hide3 {
        display:none
    }
}

@media (min-width: 1281px) {
    .hide4 {
        display:none
    }
}



@media (max-width: 768px) {
    .title-tip {
        font-size: 20px
    }
}

@media (max-width: 510px) {
    .hide5 {
        display:none
    }
}

@media (min-width: 511px) {
    .hide6 {
        display:none
    }
}

@media (max-width: 750px) {
    .hide7 {
        display:none
    }
}

@media (min-width: 751px) {
    .hide8 {
        display:none
    }
}

@media (max-width: 420px) {
    .title-tip {
        font-size: 18px;
    }
}

.step1 {
    width: 25%;
    float: left
}

.step2 {
    width: 25%;
    float: left
}

@media (max-width: 1120px) {
    .step1 {
        width:50%;
        margin-top: 10px;
        text-align: right;
        padding-right: 10px
    }

    .step2 {
        width: 50%;
        margin-top: 10px;
        text-align: left;
        padding-left: 10px
    }
}

@media (max-width: 510px) {
    .step1 {
        width:100%;
        margin-top: 5px;
        text-align: center;
        padding-right: 0px
    }

    .step2 {
        width: 100%;
        margin-top: 10px;
        text-align: center;
        padding-left: 0px
    }
}

.login {
    margin-top: 0px;
    width: 500px;
    border: 2px solid #bababa;
    border-radius: 50px;
    height: 60px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff
}

.login-input {
    border: 0px;
    width: 90%;
    height: 45px;
    font-size: 26px;
    padding-top: 10px;
    background-color: transparent
}

@media (max-width: 560px) {
    .login {
        width:95%
    }
}

@media (max-width: 480px) {
    .login {
        height:50px
    }

    .login-input {
        height: 35px;
        font-size: 24px
    }
}

.h-line {
    width: 60%;
    margin-left: auto;
    margin-right: auto
}

@media (max-width: 1200px) {
    .h-line {
        width:80%
    }
}

@media (max-width: 800px) {
    .h-line {
        width:100%
    }
}

.index-bu {
    width: 188px;
    height: 83px
}

@media (max-width: 500px) {
    .index-bu {
        width:170px;
        height: 75px
    }
}

@media (max-width: 420px) {
    .index-bu {
        width:165px;
        height: 73px
    }
}

@media (max-width: 400px) {
    .index-bu {
        width:155px;
        height: 68px
    }
}

@media (max-width: 380px) {
    .index-bu {
        width:150px;
        height: 66px
    }
}

.tip-text {
    font-size: 20px
}

@media (max-width: 400px) {
    .tip-text {
        font-size:19px
    }
}

#reg-area {
    width: 100%;
    height: auto;
    z-index: 10;
    position: absolute;
    top: 160px
}

#reg-area2 {
    width: 100%;
    height: auto;
    z-index: 10;
    position: absolute;
    top: 160px
}

.reg-window {
    position: relative;
    top: 10px;
    width: 50%;
    height: auto;
    background-color: #ffffff;
    border: 1px solid #073e09;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    z-index: 10;
    background-image: url(../images/regwindow-bg.jpg);
    background-repeat: no-repeat;
    background-position: left top
}

.reg-window2 {
    position: relative;
    top: 10px;
    width: 50%;
    height: auto;
    background-color: #ffffff;
    border: 1px solid #073e09;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    z-index: 10;
    background-image: url(../images/regwindow-bg2.jpg);
    background-repeat: no-repeat;
    background-position: left top
}

.reg {
    margin-top: 10px;
    margin-left: 0px;
    width: 100%;
    border: 1px solid #bababa;
    border-radius: 50px;
    height: 40px
}

.reg-input {
    border: 0px;
    width: 90%;
    height: 30px;
    font-size: 20px;
    padding-top: 10px;
    background-color: transparent;
    padding-left: 20px
}

.reg-tdtitle {
    padding-bottom: 8px;
    padding-top: 5px;
    padding-left: 20px;
    width: 130px;
    margin-bottom: 10px;
    font-size: 22px
}

@media (max-width: 1100px) {
    .reg-window {
        width:80%
    }

    .reg-window2 {
        width: 80%
    }
}

@media (max-width: 640px) {
    .reg-window {
        width:95%
    }

    .reg-window2 {
        width: 95%
    }
}

@media (max-width: 600px) {
    .reg-tdtitle {
        width:112px;
        font-size: 20px;
        padding-left: 10px
    }

    #reg-area {
        top: 0px
    }

    #reg-area2 {
        top: 15px
    }
}

.infor {
    padding: 20px;
    height: 500px;
    overflow: scroll;
    margin-top: 10px
}

.infor p {
    font-size: 18px;
    line-height: 30px
}

@media (max-width: 600px) {
    .infor {
        padding:20px;
        height: 450px;
        overflow: scroll
    }
}

.col-md-12-style-1 {
    padding: 0 15px
}

.col-md-3-1-style-1 {
    height: 510px; 
}



@media (max-width: 950px) {
    /*.col-md-3-1-style-1 {
        height:480px
    }*/
}

@media (max-width: 450px) {
    .col-md-3-1-style-1 {
        height:490px; 
    }
    .col-md-3-1-style-1:nth-child(n+3){ height: 390px; }
}

@media (max-width: 375px) {
    /*.col-md-3-1-style-1 {
        height:420px
    }*/
}

#error_explanation {
    color: red
}

#error_explanation ul {
    color: red;
    margin: 0 0 30px 0
}

a.item11_white_u {
    color: #ffffff
}

a.item11_white_u:hover {
    color: #008cda;
    text-decoration: underline
}