@charset "utf-8";
:root {
    --c-danger: #F56C6C;
    --c-success: #67C23A;
    --c-info: #909399;
    --c-warning: #E6A23C;
    --c-primary: #409EFF;
    --c-black: #303133;
    --c-gray: #606266;
}
* {word-wrap:break-word;word-break:normal;box-sizing:border-box;outline: none;}
html{
    font-family:system-ui,-apple-system,BlinkMacSystemFont,'Microsoft YaHei', 'segoe ui',Roboto, Helvetica,Arial,sans-serif,'apple color emoji','segoe ui emoji','segoe ui symbol';
    -webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;
    /*font-size:1vw;*/
    /*1rem = 0.520px*/
    font-size: 16px;
    min-height: 100vh;
}
@media screen and (max-width:1200px) {
}
body {
    background: #f8f8f9;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,'Microsoft YaHei', 'segoe ui',Roboto, Helvetica,Arial,sans-serif,'apple color emoji','segoe ui emoji','segoe ui symbol';
    color: var(--c-black);
    margin: 0;
    padding: 0;
    font-size:16px;
    min-height: 100vh;
}

[v-cloak]{display:none !important;}
header, section, footer, aside, nav, main, article, figure {
    display: block;margin:0;padding:0;border:0;
}
img,p,form {margin:0;padding:0;border:0;}
ul,li{list-style:none;padding:0;margin:0;}
h1,h2,h3 {margin:0;padding:0;}
input,textarea,button,label {font-family:system-ui,-apple-system,BlinkMacSystemFont,'Microsoft YaHei', 'segoe ui',Roboto, Helvetica,Arial,sans-serif,'apple color emoji','segoe ui emoji','segoe ui symbol';}

.float-l {float:left;}
.float-r {float:right;}
.display-hidden{display: none;}
.display-block{display: block;}
.clear {clear:both;font-size:0; line-height:0; height:0; visibility:hidden;}
.pointer{cursor: pointer;}

.danger{color:var(--c-danger);}
.success{color:var(--c-success);}
.warning{color:var(--c-warning);}
.primary{color:var(--c-primary);}
.info{color:var(--c-info);}
.black{color:var(--c-black);}
.gray{color:var(--c-gray);}
.white{color: #ffffff;}

.bg-danger{background-color:var(--c-danger);}
.bg-success{background-color:var(--c-success);}
.bg-warning{background-color:var(--c-warning);}
.bg-primary{background-color:var(--c-primary);}
.bg-info{background-color:var(--c-info);}
.bg-black{background-color:var(--c-black);}
.bg-gray{background-color:var(--c-gray);}
.bg-white{background-color: #ffffff;}

.w-100 {width: 100%;}
.m-b-10{margin-bottom: 10px;}
.m-r-10{margin-right: 10px;}
.m-t-10{margin-top: 10px;}
.m-l-10{margin-left: 10px;}
.w-100px{width: 100px;}

.btn{cursor: pointer;outline: none;height: 40px;padding: 0 20px;}
.btn-danger{
    background-color:var(--c-danger);
    border: 1px solid #E25D5D;
    color:#ffffff; border-radius: 4px;overflow: hidden;}
.btn-danger:hover{background-color: #E25D5D;}
.btn-success{
    background-color:var(--c-success);
    border: 1px solid #539f2e;
    color:#ffffff; border-radius: 4px;overflow: hidden;
}
.btn-success:hover{background-color: #539f2e;}
.btn-warning{
    background-color:var(--c-warning);
    border: 1px solid #bf8630;
    color:#ffffff; border-radius: 4px;overflow: hidden;
}
.btn-warning:hover{background-color: #bf8630;}
.btn-primary{
    background-color:var(--c-primary);
    border: 1px solid #327bc6;
    color:#ffffff; border-radius: 4px;overflow: hidden;
}
.btn-primary:hover{background-color: #327bc6;}
.btn-info{
    background-color:var(--c-info);
    border: 1px solid #686b70;
    color:#ffffff; border-radius: 4px;overflow: hidden;
}
.btn-info:hover{background-color: #686b70;}
.btn-black{
    background-color:var(--c-black);
    border: 1px solid #181819;
    color:#ffffff; border-radius: 4px;overflow: hidden;
}
.btn-gray{
    background-color:var(--c-gray);
    border: 1px solid #3c3d40;
    color:#ffffff; border-radius: 4px;overflow: hidden;
}
.btn-white{
    background-color: #ffffff;
    border: 1px solid #dfdede;
    color:#ffffff; border-radius: 4px;overflow: hidden;
}

.bg-danger{background-color: var(--c-danger);}
.bg-success{background-color: var(--c-success);}


/*	链接样式	*/
a {color:#2f2d53;}
a:hover {text-decoration: none;color: #a00679;}
a:link,a:visited,a:active {text-decoration: none;}

.c-notification {
    float:left;width: 100%;min-height: 100vh;
    display: flex;flex-flow: column;justify-content: center;align-items: center;
}
.c-notification .c-n-main{
    width: 80%;
    padding: 30px;
    max-width: 600px;
    background-color: #ffffff;
    border-radius: 4px;
    display: flex;flex-flow: column nowrap;
    justify-content: center;align-items: center;
    overflow: hidden;

}
.c-notification .c-n-main .icon{margin-bottom: 10px;}
.c-notification .c-n-main .icon i{margin: 0; padding: 0;font-size: 160px;}
.c-notification .c-n-main .message{font-size: 16px;margin-bottom: 20px;}
.c-notification .c-n-main .btn{}

.tip-wrap {
    float:left;width: 100%;min-height: 100vh;
    display: flex;flex-flow: column;justify-content: center;align-items: center;
}
.tip-wrap .main{
    width: 80%; max-width: 700px;
    background-color: #ffffff;
    display: flex;flex-flow: row nowrap;justify-content: space-between;align-items: stretch;
    border-radius: 4px;
    /*box-shadow: 20px 20px 10px 2px #dbdbdb;*/
    overflow: hidden;
}
.tip-wrap .main .m-l {
    padding: 50px;
    flex:none;
    display: flex;flex-flow: column nowrap;
    justify-content: center;align-items: center;
    color:#ffffff;
}
.tip-wrap .main .m-l i{font-size: 120px;}
.tip-wrap .main .m-r {
    flex: auto;
    border-left: 0;
    padding: 40px;
    display: flex;flex-flow: column nowrap;justify-content: center;align-items: stretch;
    /*
    border: 1px solid #efefef;
    */
    position: relative;
    overflow: hidden;
}
.tip-wrap .main .m-r .title {
    width: 100%;
    font-size: 26px; line-height: 30px;margin-bottom: 10px;
    overflow: hidden;
}
.tip-wrap .main .m-r .message {
    width: 100%;
    font-size: 16px; line-height: 30px;
    text-align: justify;
    padding-bottom: 20px;
    margin-bottom: 20px; overflow: hidden;
    border-bottom: 1px dashed #dbdbdb;
}
.tip-wrap .main .m-r .btn-box {
    width: 100%;
    text-align: left;
    font-size: 16px; line-height: 30px;
}

.tip-wrap .main .m-r .btn-box button {
    cursor: pointer;
    font-size: 16px;
    padding: 10px 20px; border-radius: 4px;
    border: 1px solid #dbdbdb;
    outline: none;
    overflow: hidden;
}
.tip-wrap .main .m-r .btn-box button:hover{
    background-color: var(--c-success);
    border: 1px solid var(--c-success);
    color: #ffffff;
}
@media screen and (max-width: 768px) {
    .tip-wrap .main{
        flex-flow: column nowrap;
    }
    .tip-wrap .main .m-r .title,
    .tip-wrap .main .m-r .message,
    .tip-wrap .main .m-r .btn-box{
        text-align: center;
    }
}