@charset "utf-8";
/* CSS Document */

@charset 'utf-8';

/* CSS Document */

//SCSS全局变量
// 默认移动端设计稿宽度
$baseDevice: 640;
// 前端切图移动端默认正常显示尺寸320
$device: 320;
// 默认html font-size
$baseFontSize: 100px;
// scss function
@function calc-percent($target, $context) {
    @return $target/$context * 100%;
}

@function px2rem($px, $base-font-size: $baseDevice / $device * $baseFontSize) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2rem($px + 0px); // That may fail.
    }
    @else if (unit($px)==rem) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1rem;
}

//透明
@mixin touming($o: 70) {
    opacity: $o/100;
    -webkit-opacity: $o/100;
    filter: alpha(opacity=$o);
}

@mixin transition($time: .2s) {
    -webkit-transition: $time ease all;
    -moz-transition: $time ease all;
    transition: $time ease all;
}

@mixin textEllipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin zoomImg($width, $height) {
    position: relative;
    padding-bottom: $height / $width * 100%;
    img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .6s;
        left: 0;
        top: 0;
    }
}

@mixin articleReset($fontsize: 14px) {
    font-size: $fontsize;
    p {
        margin-bottom: $fontsize;
    }
    img {
        max-width: 100%;
        height: auto !important;
    }
    ul {
        list-style: disc;
        li {
            list-style: disc;
        }
    }
    ol {
        list-style: decimal;
        li {
            list-style: decimal;
        }
    }
}

// 多行省略
@mixin multiEllipsis($line: 2) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
}


/* reset.css V1.6  Start*/

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ul,
ol,
li,
form,
button,
input,
textarea,
th,
td {
    font-weight: normal;
    margin: 0;
    padding: 0;
}



ul,
ol,
li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #333;
}

a:hover {
    text-decoration: none;
}

img {
    vertical-align: top;
    border: 0;
}

button,
input,
textarea {
    font-size: 100%;
    vertical-align: middle;
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;


}

table {
    border-spacing: 0;
    border-collapse: collapse;
}

div,
a {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

html {
    font-size: $baseFontSize;
}

@media screen and (min-width: 360px) {
    html {
        font-size: (360/320)*$baseFontSize;
    }
}

@media screen and (min-width: 375px) {
    html {
        font-size: (375/320)*$baseFontSize;
    }
}

@media screen and (min-width: 414px) {
    html {
        font-size: (414/320)*$baseFontSize;
    }
}

@media screen and (min-width: 480px) {
    html {
        font-size: (480/320)*$baseFontSize;
    }
}

@media screen and (min-width: 640px) {
    html {
        font-size: (640/320)*$baseFontSize;
    }
}

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after { clear: both; }
.clearfix {
    *zoom: 1; /*IE/7/6*/
}
.clearfloat:after {
    font-size: 0;
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    content: ' ';
}
.clearfloat {
    *zoom: 1;
}
.clearboth {
    clear: both;
}

.wp {
    width: 1000px;
    margin: 0 auto;
}

.checkBrowser {
    font-size: 14px;
    line-height: 40px;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 50%;
    width: 700px;
    height: 40px;
    margin-left: -360px;
    padding: 0 10px;
    color: #FFF;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    background-color: #E6212A;
    a {
        font-size: 16px;
        line-height: 20px;
        position: absolute;
        top: 10px;
        right: 5px;
        display: block;
        width: 20px;
        height: 20px;
        cursor: pointer;
        text-align: center;
        color: #333;
        border-radius: 50%;
        background-color: #FFF;
    }
}


// 弹窗
.tips-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    &.init {
        display: flex;
    }
    &.show {
        .tips-popup-mask {
            opacity: 1;
        }
        .tips-popup-box {
            opacity: 1;
            transform: scale(1);
        }
    }
    &-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
        transition: all .3s;
    }
    &-box {
        position: relative;
        padding: 18px 24px 8px;
        width: 320px;
        background-color: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
        border-radius: 8px;
        z-index: 9;
        opacity: 0;
        transform: scale(.8);
        transition: all .3s;
        @media screen and (max-width: 414px) {
            max-width: calc(100% - .4rem);
            box-sizing: border-box;
        }
    }
    &-head {
        display: flex;
        padding-bottom: 10px;
        .title {
            flex: 1;
            min-width: 0;
            padding-top: 1px;
            line-height: 22px;
            font-size: 16px;
            color: #000;
        }
    }
    &-close {
        margin: 5px 0 0 10px;
        width: 14px;
        height: 14px;
        background: url(../images/tips_icon.png) top -130px left no-repeat;
        opacity: .7;
        z-index: 2;
        cursor: pointer;
        transition: all .3s;
        &:hover {
            opacity: 1;
        }
    }
    &-content {
        padding-bottom: 10px;
        font-size: 14px;
        line-height: 24px;
        color: #666;
    }
    &-footer {
        padding: 4px 0;
        text-align: right;
        font-size: 0;
        li {
            display: inline-block;
            vertical-align: top;
            margin-left: 10px;
            padding: 8px 15px;
            line-height: 1;
            font-size: 12px;
            white-space: nowrap;
            border-radius: 3px;
            border-width: 1px;
            border-style: solid;
            box-sizing: border-box;
            cursor: pointer;
            transition: all .3s;
            &:hover {
                opacity: .8;
            }
        }
        .cancel-btn {
            color: #666;
            background-color: #fff;
            border-color: #dcdfe6;
        }
        .submit-btn {
            color: #fff;
        }
    }
    .tips-icon {
        margin-right: 10px;
        width: 24px;
        height: 24px;
        background-image: url(../images/tips_icon.png);
        background-repeat: no-repeat;
        &-success {
            background-position: 0 -104px;
        }
        &-question {
            background-position: 0 -78px;
        }
        &-info {
            background-position: 0 -52px;
        }
        &-error {
            background-position: 0 -26px;
        }
        &-alert {
            background-position: 0 0;
        }
    }
    &-icon {
        padding-left: 20px;
        padding-right: 20px;
        .tips-popup-content {
            padding-left: 34px;
        }
    }
}

/* reset.css V1.6  End */

// page结构以及CSS样式
// *******************
// ********************
// ********************
// HTML结构
// <div class="paged">
//  <a href="#">首页</a>
//  <a class="">上一页</a>
//  <span class="current">1</span>
//  <a href="#">2</a>
//  <a class="" href="#">下一页</a>
//  <a href="#">尾页</a>
// </div>
// ********************
// ********************
// ********************
// CSS样式
// .paged { padding-top: 30px; text-align: center; }
// .paged a, .paged .p_info, .paged .current { display: inline-block; zoom: 1; *display:inline;
// margin: 0px 3px; padding: 5px 10px; font-size: 12px; text-align: center; border: 1px solid #cfcfcf; background: #ffffff; color: #333; }
// .paged .current, .paged a:hover { border: 1px solid #076da8; background: #147ab5; color: #fff; }