@import "../../../../public/scss/reset.scss";
@import "../../../../public/scss/unicom.scss";

@font-face {
    font-family: "SourceHanSansSC-Regular";
    src: url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Regular.woff2") format("woff2"),
    url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Regular.woff") format("woff"),
    url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Regular.ttf") format("truetype"),
    url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Regular.eot") format("embedded-opentype"),
    url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Regular.svg") format("svg");
}

@font-face {
    font-family: "SourceHanSansSC-Medium";
    src: url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Medium.woff2") format("woff2"),
    url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Medium.woff") format("woff"),
    url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Medium.ttf") format("truetype"),
    url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Medium.eot") format("embedded-opentype"),
    url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Medium.svg") format("svg");
}

@font-face {
    font-family: "SourceHanSansSC-Light";
    src: url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Light.woff2") format("woff2"),
    url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Light.woff") format("woff"),
    url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Light.ttf") format("truetype"),
    url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Light.eot") format("embedded-opentype"),
    url("../../../../public/fonts/SourceHanSansSC/SourceHanSansSC-Light.svg") format("svg");
}

html, body {
    height: 100%;
}

body {
    background: url(../images/bg-big.png) no-repeat #ffeee0;
    font-family: "SourceHanSansSC-Regular", sans-serif, "Microsoft YaHei", "微软雅黑", STXihei, SimHei, "华文细黑";
    background-size: 100%;
    min-height: 11.97rem;
    font-size: 0.3rem;
}

.banner {
    padding-top: 0.6rem;

    .banner-text {
        width: 4.94rem;
        height: 4.42rem;
        margin: 0 auto;
        background: url(../images/banner.png) no-repeat;
        background-size: 100% 100%;
    }
}

.products {
    display: flex;
    justify-content: center;
    margin-top: 0.7rem;

    .item {
        width: 3.34rem;
        height: 1.88rem;
        background-color: #95C1FF;
        margin-top: 0.07rem;
        margin-right: 0.12rem;
        border-radius: 0.2rem;

        .box {
            width: 2.41rem;
            height: 1.4rem;
            margin: 0.24rem auto;

            &.baidu {
                background: url(../images/product-baidu.png) no-repeat;
                background-size: 100% 100%;

            }

            &.douyin {
                background: url(../images/product-douyin.png) no-repeat;
                background-size: 100% 100%;
            }
        }

        &.active {
            width: 3.53rem;
            height: 2.20rem;
            margin-top: 0;
            background: url(../images/bg-item-active.png) no-repeat;
            background-size: 100% 100%;

            .box {
                margin: 0.33rem auto;

                &.baidu {
                    background: url(../images/product-baidu-de.png) no-repeat;
                    background-size: 100% 100%;
                }

                &.douyin {
                    background: url(../images/product-douyin-de.png) no-repeat;
                    background-size: 100% 100%;
                }
            }
        }

        &:last-child {
            margin-right: 0;
        }
    }
}

.order {
    width: 6.33rem;
    height: 0.97rem;
    margin: 0.14rem auto 0;
    background: url(../images/bg-btn-order-9.png) no-repeat;
    background-size: 100% 100%;
}

.more {
    height: 0.5rem;
    color: #FFF;
    font-size: 0.26rem;
    font-weight: 400;
    text-align: center;
    margin-top: 0.25rem;
    
    .text {
        border-bottom: 0.02rem solid #FFF;
        padding-bottom: 0.1rem;
    }
}

.change {
    display: flex;
    margin-top: 0.5rem;
    justify-content: center;
    
    .item {
        width: 3.83rem;
        height: 1.8rem;
    }

    .modify {
        background: url("../images/bg-btn-modify.png") no-repeat;
        background-size: 100%;
    }

    .cancel {
        background: url("../images/bg-btn-cancel.png") no-repeat;
        background-size: 100%;
    }
}

.login {
    width: 7.19rem;
    height: 4.71rem;
    margin: 0 auto;
    background: url(../images/bg-login-border.png) no-repeat;
    background-size: 100% 100%;

    
    input::-webkit-input-placeholder {
        color: #b1b1b1;
        font-size: 0.28rem;
    }
    input::-moz-placeholder {   /* Mozilla Firefox 19+ */
        color: #b1b1b1;
        font-size: 0.28rem;
    }
    input:-moz-placeholder {    /* Mozilla Firefox 4 to 18 */
        color: #b1b1b1;
        font-size: 0.28rem;
    }
    input:-ms-input-placeholder {  /* Internet Explorer 10-11 */
        color: #b1b1b1;
        font-size: 0.28rem;
    }

    .sms-form {
        padding: 0.3rem 0.4rem 0;
    }

    .form-group {
        border-radius: 0.2rem;
        padding: 0.4rem 0.2rem 0.35rem;

        .input-row {
            display: flex;
            align-content: space-between;
            justify-content: center;
            margin-bottom: 0.4rem;

            .smscode {
                width: 100%;
                margin-right: 0.15rem;
            }

            .sendcode {
                color: white;
                font-size: 0.32rem;
                font-weight: bold;
                height: .86rem;
                line-height: 0.86rem;
                padding: 0 0.2rem;
                word-break: keep-all;
                white-space: nowrap;
                border-radius: 0.1rem;
                background: url('../images/bg-btn-send-smscode.png') no-repeat;
                background-size: 100% 100%;
            }

            .sendcode-wait {
                font-weight: unset;
            }
        }

        .mb0 {
            margin-bottom: 0;
        }
        

        input {
            font-size: 0.36rem;
            width: 100%;
            height: 0.88rem;
            outline: none;
            -webkit-appearance: none;
            min-width: 2.4rem;
            border: 0.01rem solid rgb(204,204,204);
            border-radius: 0.1rem;
            padding-left: 0.3rem;
        }

        .actions {
            width: 2.58rem;
            height: 0.89rem;
            margin: 0.31rem auto 0;
            background: url(../images/btn-cancel.png) no-repeat;
            background-size: 100% 100%;

            .btn {
                width: 2.2rem;
                height: 0.8rem;
                background: none;
            }
        }
    }
}

.section-agr {
    .title {
        width: 2.47rem;
        height: 0.95rem;
        background: url(../images/tips-title.png) no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
    }

    ul {
        color: white;
        font-size: 0.26rem;
        margin: 0.3rem 0.45rem;

        li {
            margin-bottom: 0.1rem;
        }
    }
}

.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9990;
    background-color: rgba(0, 0, 0, 0.4);
    min-height: 6.5rem;
}

.dialog-meesage {
    width: 4.93rem;
    min-height: 2.8rem;
    background: url(../images/bg-dialog.png) no-repeat;
    background-size: 100% 100%;
    z-index: 9991;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

    .content {
        color: #2A2A2A;
        font-size: 0.36rem;
        padding: 0.6rem;
        text-align: center;
    }

    .actions {
        display: flex;
        margin: 0 0.2rem 0.24rem;

        .btn {
            width: 3.05rem;
            height: 0.83rem;
            margin: 0 auto;
            background: url(../images/bg-btn-okay.png) no-repeat;
            background-size: 100% 100%;
        }

        .btn-okay {
            width: 1.99rem;
            height: 0.89rem;
            background: url(../images/btn-okay.png) no-repeat;
            background-size: 100% 100%;
        }

        .btn-no {
            width: 1.99rem;
            height: 0.89rem;
            background: url(../images/btn-no.png) no-repeat;
            background-size: 100% 100%;
        }
    }
}

.dialog-agr {
    width: 6.6rem;
    height: 10.11rem;
    background: url(../images/bg-agr.png) no-repeat;
    background-size: 100% 100%;
    z-index: 9991;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

    .head {
        position: relative;
        padding-top: 0.3rem;

        .title {
            width: 2.47rem;
            height: 0.95rem;
            background: url(../images/tips-title.png) no-repeat;
            background-size: 100% 100%;
            margin: 0 auto;
        }
    
        .close {
            position: absolute;
            top: 0.2rem;
            right: 0.18rem;
            width: 0.16rem;
            height: 0.16rem;
            background: url(../images/btn-close.png) no-repeat;
            background-size: 100% 100%;
        }
    }

    ul {
        color: #333333;
        font-size: 0.26rem;
        margin: 0.3rem;
        height: 8.18rem;
        overflow: scroll;
        text-align: justify;

        li {
            margin-bottom: 0.1rem;
        }
    }
}

.dialog-alert .actions .btn {
    color: white;
    font-size: 0.34rem;
    background: linear-gradient(-90deg, #4e52ef, #10b1fd);
    height: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    border-radius: 0.4rem;
}