@use postcss-clearfix ;

.clearfix {
    clear: fix;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html,
body {
    width: 100%;
    font-size: 24px;
    font-family: helvetica, Arial, "黑体", sans-serif;
    line-height: 1.4;
}

.width750 {
    font-size: 28px;

    .main-wrap {
        max-width: 750px;
    }

    .good-failure {
        background-size: 155px !important;
    }
}

.iphonex-bottom-tab {
    &:after {
        content: "";
        display: block;
        height: 35PX;
        position: absolute;
        right: 0;
        left: 0;
        bottom: -35PX;
        background-color: #fff;
        z-index: 999;
    }
}

.iphonex-series {
    .yoho-footer {
        margin-bottom: 93PX;
    }

    .iphonex-bottom-tab {
        bottom: 34PX !important;
    }
}

button,
input,
select,
textarea {
    margin: 0;
    font-size: 100%;
}

img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    border: 0;
}

a {
    outline: none;
    color: #000;
    text-decoration: none;
}

button {
    border: 0;
    outline: 0;
}

*:focus {
    outline: none;
}

.main-wrap {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    max-width: 640px;
    width: 100%;

    &.full-screen {
        max-width: initial !important;

        .mobile-container {
            max-width: initial !important;
        }
    }
}

/* 字体名称勿改的，APP做IP直连有使用到 */
@font-face {
    font-family: "iconfont";
    src: url("font/iconfont.eot"); /* IE9 */
    src: url("font/iconfont.eot?#iefix") format("embedded-opentype"), url("font/iconfont.woff") format("woff"), url("font/iconfont.ttf") format("truetype"), url("font/iconfont.svg#iconfont") format("svg"); /* iOS 4.1- */
}

.iconfont {
    text-decoration: none;
    font-style: normal;
    font-size: 24px;
    font-family: "iconfont", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.4px;
    -moz-osx-font-smoothing: grayscale;
}

.yoho-tip {
    position: fixed;
    display: none;
    text-align: center;
    width: 50%;
    padding: 15PX;
    top: 50%;
    left: 50%;
    margin-left: -25%;
    margin-top: -45PX;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 24px;
    border: none;
    z-index: 1000;
    box-sizing: border-box;
    border-radius: 10PX;
}

.order-failure {
    background-image: url("img/common/order-good.jpg");
    background-size: 100%;
}

.good-failure {
    background-image: url("img/common/order-good.jpg");
    background-position-x: 40%;
    background-size: 132px !important;
}

img[src=""],
img:not([src]) {
    opacity: 0;
}

/* rich-tip */
.yoho-order-bg {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 4;
    display: none;

    .order-tip-box {
        background-color: #fff;
        margin-left: auto;
        margin-right: auto;
        border-radius: 10px;
        width: 420px;
        margin-top: 400px;
        vertical-align: center;
        position: relative;

        .order-tip-msg {
            font-size: 1.1em;
            padding: 40px 20px;
            text-align: center;

            p:last-child {
                margin-bottom: 50px;
            }
        }

        .order-tip-btn-group {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 60px;
            line-height: 60px;

            a {
                width: 209px;
                box-shadow: none;
                background-color: #fff;
                font-size: 1.2em;
                text-align: center;
                float: left;
                display: inline-block;

                span {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }

            a:first-child {
                border-top: 1px solid #ccc;
                border-right: 1px solid #ccc;
                border-radius: 0 0 0 8px;
            }

            a:last-child {
                border-top: 1px solid #ccc;
                border-radius: 0 0 8px;
            }

            .order-tip-btnred {
                color: #d0021b;
            }

            .order-tip-btn1 {
                width: 418px;
                border-right: none;
                border-radius: 0 0 8px 8px !important;
            }
        }
    }
}

.icon-checkbox:before {
    content: "\e61c";
}

.icon-cb-checked:before {
    content: "\e61d";
}

.icon-radio:before {
    content: "\e647";
}

.icon-cb-radio:before {
    content: "\e646";
}

.icon-up:before {
    content: "\e608";
}

.icon-down:before {
    content: "\e609";
}

.icon-wenhao:before {
    content: "\e699";
}

.icon-point1:before {
    content: "\e60c";
}

.icon-tan:before {
    content: "\e73b";
}

.wx-footer-c {
    margin-top: 30px;
}

.wx-footer {
    padding: 20px 0;
    border-top: 1px solid #e0e0e0;
    background-color: #fff;

    .wx-pic {
        width: 15%;
        float: left;
        padding: 15px 25px 0;

        img {
            width: 100%;
            height: auto;
        }
    }

    .wx-text {
        float: left;
        width: 73%;

        .wx-title {
            font-size: 28px;
            color: #444;
        }

        .wx-tip {
            font-size: 24px;
            color: #b0b0b0;
        }
    }

    .wx-btn {
        margin-top: 10px;
        width: 10%;
        text-align: center;
        line-height: 35px;
        height: 35px;
        display: block;
        background-color: #444;
        color: #fff;
        font-size: 24px;
        border-radius: 3px;
        float: left;
    }
}