/*!
    Important comments included in minified output.
    http://www.bocweb.cn/
    2018-01-16
    ©2018 博采网络 ALL RIGHTS RESERVED. 博采网络
*/
button
{
    outline: none!important;
}
input:-moz-placeholder, textarea:-moz-placeholder
{
    color: #ccc;
}
input::-moz-placeholder, textarea::-moz-placeholder
{
    color: #ccc;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder
{
    color: #ccc;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder
{
    color: #ccc;
}
html
{
    font-size: 10px;
    -webkit-tap-highlight-color: transparent;
}
body
{
    font-size: 14px;
    line-height: 1.42857143;
}/*使用内边距*/
*
{
    box-sizing: border-box;
}
:after, :before
{
    box-sizing: border-box;
}
.text-left
{
    text-align: left;
}
.text-right
{
    text-align: right;
}
.text-center
{
    text-align: center;
}
.text-justif
{
    text-align: justify;
}
.text-nowrap
{
    white-space: nowrap;
}
.text-lowercase
{
    text-transform: lowercase;
}
.text-uppercase
{
    text-transform: uppercase;
}
.text-capitalize
{
    text-transform: capitalize;
}
.text-bold
{
    font-weight: bold;
}/*使用内边距*/
.container
{
    margin-right: auto;
    margin-left: auto;
}
@media(max-width: 991px)
{
    .container
    {
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media(min-width: 992px)
{
    .container
    {
        width: 970px;
    }
}
@media(min-width: 1200px)
{
    .container
    {
        width: 1170px;
    }
}
@media(min-width: 1440px)
{
    .container
    {
        width: 1400px;
    }
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9
{
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9
{
    float: left;
}
.col-xs-12
{
    width: 100%;
}
.col-xs-11
{
    width: 91.66666667%;
}
.col-xs-10
{
    width: 83.33333333%;
}
.col-xs-9
{
    width: 75%;
}
.col-xs-8
{
    width: 66.66666667%;
}
.col-xs-7
{
    width: 58.33333333%;
}
.col-xs-6
{
    width: 50%;
}
.col-xs-5
{
    width: 41.66666667%;
}
.col-xs-4
{
    width: 33.33333333%;
}
.col-xs-3
{
    width: 25%;
}
.col-xs-2
{
    width: 16.66666667%;
}
.col-xs-1
{
    width: 8.33333333%;
}
.col-xs-pull-12
{
    right: 100%;
}
.col-xs-pull-11
{
    right: 91.66666667%;
}
.col-xs-pull-10
{
    right: 83.33333333%;
}
.col-xs-pull-9
{
    right: 75%;
}
.col-xs-pull-8
{
    right: 66.66666667%;
}
.col-xs-pull-7
{
    right: 58.33333333%;
}
.col-xs-pull-6
{
    right: 50%;
}
.col-xs-pull-5
{
    right: 41.66666667%;
}
.col-xs-pull-4
{
    right: 33.33333333%;
}
.col-xs-pull-3
{
    right: 25%;
}
.col-xs-pull-2
{
    right: 16.66666667%;
}
.col-xs-pull-1
{
    right: 8.33333333%;
}
.col-xs-pull-0
{
    right: auto;
}
.col-xs-push-12
{
    left: 100%;
}
.col-xs-push-11
{
    left: 91.66666667%;
}
.col-xs-push-10
{
    left: 83.33333333%;
}
.col-xs-push-9
{
    left: 75%;
}
.col-xs-push-8
{
    left: 66.66666667%;
}
.col-xs-push-7
{
    left: 58.33333333%;
}
.col-xs-push-6
{
    left: 50%;
}
.col-xs-push-5
{
    left: 41.66666667%;
}
.col-xs-push-4
{
    left: 33.33333333%;
}
.col-xs-push-3
{
    left: 25%;
}
.col-xs-push-2
{
    left: 16.66666667%;
}
.col-xs-push-1
{
    left: 8.33333333%;
}
.col-xs-push-0
{
    left: auto;
}
.col-xs-offset-12
{
    margin-left: 100%;
}
.col-xs-offset-11
{
    margin-left: 91.66666667%;
}
.col-xs-offset-10
{
    margin-left: 83.33333333%;
}
.col-xs-offset-9
{
    margin-left: 75%;
}
.col-xs-offset-8
{
    margin-left: 66.66666667%;
}
.col-xs-offset-7
{
    margin-left: 58.33333333%;
}
.col-xs-offset-6
{
    margin-left: 50%;
}
.col-xs-offset-5
{
    margin-left: 41.66666667%;
}
.col-xs-offset-4
{
    margin-left: 33.33333333%;
}
.col-xs-offset-3
{
    margin-left: 25%;
}
.col-xs-offset-2
{
    margin-left: 16.66666667%;
}
.col-xs-offset-1
{
    margin-left: 8.33333333%;
}
.col-xs-offset-0
{
    margin-left: 0;
}
@media(min-width: 768px)
{
    .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9
    {
        float: left;
    }
    .col-sm-12
    {
        width: 100%;
    }
    .col-sm-11
    {
        width: 91.66666667%;
    }
    .col-sm-10
    {
        width: 83.33333333%;
    }
    .col-sm-9
    {
        width: 75%;
    }
    .col-sm-8
    {
        width: 66.66666667%;
    }
    .col-sm-7
    {
        width: 58.33333333%;
    }
    .col-sm-6
    {
        width: 50%;
    }
    .col-sm-5
    {
        width: 41.66666667%;
    }
    .col-sm-4
    {
        width: 33.33333333%;
    }
    .col-sm-3
    {
        width: 25%;
    }
    .col-sm-2
    {
        width: 16.66666667%;
    }
    .col-sm-1
    {
        width: 8.33333333%;
    }
    .col-sm-pull-12
    {
        right: 100%;
    }
    .col-sm-pull-11
    {
        right: 91.66666667%;
    }
    .col-sm-pull-10
    {
        right: 83.33333333%;
    }
    .col-sm-pull-9
    {
        right: 75%;
    }
    .col-sm-pull-8
    {
        right: 66.66666667%;
    }
    .col-sm-pull-7
    {
        right: 58.33333333%;
    }
    .col-sm-pull-6
    {
        right: 50%;
    }
    .col-sm-pull-5
    {
        right: 41.66666667%;
    }
    .col-sm-pull-4
    {
        right: 33.33333333%;
    }
    .col-sm-pull-3
    {
        right: 25%;
    }
    .col-sm-pull-2
    {
        right: 16.66666667%;
    }
    .col-sm-pull-1
    {
        right: 8.33333333%;
    }
    .col-sm-pull-0
    {
        right: auto;
    }
    .col-sm-push-12
    {
        left: 100%;
    }
    .col-sm-push-11
    {
        left: 91.66666667%;
    }
    .col-sm-push-10
    {
        left: 83.33333333%;
    }
    .col-sm-push-9
    {
        left: 75%;
    }
    .col-sm-push-8
    {
        left: 66.66666667%;
    }
    .col-sm-push-7
    {
        left: 58.33333333%;
    }
    .col-sm-push-6
    {
        left: 50%;
    }
    .col-sm-push-5
    {
        left: 41.66666667%;
    }
    .col-sm-push-4
    {
        left: 33.33333333%;
    }
    .col-sm-push-3
    {
        left: 25%;
    }
    .col-sm-push-2
    {
        left: 16.66666667%;
    }
    .col-sm-push-1
    {
        left: 8.33333333%;
    }
    .col-sm-push-0
    {
        left: auto;
    }
    .col-sm-offset-12
    {
        margin-left: 100%;
    }
    .col-sm-offset-11
    {
        margin-left: 91.66666667%;
    }
    .col-sm-offset-10
    {
        margin-left: 83.33333333%;
    }
    .col-sm-offset-9
    {
        margin-left: 75%;
    }
    .col-sm-offset-8
    {
        margin-left: 66.66666667%;
    }
    .col-sm-offset-7
    {
        margin-left: 58.33333333%;
    }
    .col-sm-offset-6
    {
        margin-left: 50%;
    }
    .col-sm-offset-5
    {
        margin-left: 41.66666667%;
    }
    .col-sm-offset-4
    {
        margin-left: 33.33333333%;
    }
    .col-sm-offset-3
    {
        margin-left: 25%;
    }
    .col-sm-offset-2
    {
        margin-left: 16.66666667%;
    }
    .col-sm-offset-1
    {
        margin-left: 8.33333333%;
    }
    .col-sm-offset-0
    {
        margin-left: 0;
    }
}
@media(min-width: 992px)
{
    .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9
    {
        float: left;
    }
    .col-md-12
    {
        width: 100%;
    }
    .col-md-11
    {
        width: 91.66666667%;
    }
    .col-md-10
    {
        width: 83.33333333%;
    }
    .col-md-9
    {
        width: 75%;
    }
    .col-md-8
    {
        width: 66.66666667%;
    }
    .col-md-7
    {
        width: 58.33333333%;
    }
    .col-md-6
    {
        width: 50%;
    }
    .col-md-5
    {
        width: 41.66666667%;
    }
    .col-md-4
    {
        width: 33.33333333%;
    }
    .col-md-3
    {
        width: 25%;
    }
    .col-md-2
    {
        width: 16.66666667%;
    }
    .col-md-1
    {
        width: 8.33333333%;
    }
    .col-md-pull-12
    {
        right: 100%;
    }
    .col-md-pull-11
    {
        right: 91.66666667%;
    }
    .col-md-pull-10
    {
        right: 83.33333333%;
    }
    .col-md-pull-9
    {
        right: 75%;
    }
    .col-md-pull-8
    {
        right: 66.66666667%;
    }
    .col-md-pull-7
    {
        right: 58.33333333%;
    }
    .col-md-pull-6
    {
        right: 50%;
    }
    .col-md-pull-5
    {
        right: 41.66666667%;
    }
    .col-md-pull-4
    {
        right: 33.33333333%;
    }
    .col-md-pull-3
    {
        right: 25%;
    }
    .col-md-pull-2
    {
        right: 16.66666667%;
    }
    .col-md-pull-1
    {
        right: 8.33333333%;
    }
    .col-md-pull-0
    {
        right: auto;
    }
    .col-md-push-12
    {
        left: 100%;
    }
    .col-md-push-11
    {
        left: 91.66666667%;
    }
    .col-md-push-10
    {
        left: 83.33333333%;
    }
    .col-md-push-9
    {
        left: 75%;
    }
    .col-md-push-8
    {
        left: 66.66666667%;
    }
    .col-md-push-7
    {
        left: 58.33333333%;
    }
    .col-md-push-6
    {
        left: 50%;
    }
    .col-md-push-5
    {
        left: 41.66666667%;
    }
    .col-md-push-4
    {
        left: 33.33333333%;
    }
    .col-md-push-3
    {
        left: 25%;
    }
    .col-md-push-2
    {
        left: 16.66666667%;
    }
    .col-md-push-1
    {
        left: 8.33333333%;
    }
    .col-md-push-0
    {
        left: auto;
    }
    .col-md-offset-12
    {
        margin-left: 100%;
    }
    .col-md-offset-11
    {
        margin-left: 91.66666667%;
    }
    .col-md-offset-10
    {
        margin-left: 83.33333333%;
    }
    .col-md-offset-9
    {
        margin-left: 75%;
    }
    .col-md-offset-8
    {
        margin-left: 66.66666667%;
    }
    .col-md-offset-7
    {
        margin-left: 58.33333333%;
    }
    .col-md-offset-6
    {
        margin-left: 50%;
    }
    .col-md-offset-5
    {
        margin-left: 41.66666667%;
    }
    .col-md-offset-4
    {
        margin-left: 33.33333333%;
    }
    .col-md-offset-3
    {
        margin-left: 25%;
    }
    .col-md-offset-2
    {
        margin-left: 16.66666667%;
    }
    .col-md-offset-1
    {
        margin-left: 8.33333333%;
    }
    .col-md-offset-0
    {
        margin-left: 0;
    }
}
@media(min-width: 1200px)
{
    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9
    {
        float: left;
    }
    .col-lg-12
    {
        width: 100%;
    }
    .col-lg-11
    {
        width: 91.66666667%;
    }
    .col-lg-10
    {
        width: 83.33333333%;
    }
    .col-lg-9
    {
        width: 75%;
    }
    .col-lg-8
    {
        width: 66.66666667%;
    }
    .col-lg-7
    {
        width: 58.33333333%;
    }
    .col-lg-6
    {
        width: 50%;
    }
    .col-lg-5
    {
        width: 41.66666667%;
    }
    .col-lg-4
    {
        width: 33.33333333%;
    }
    .col-lg-3
    {
        width: 25%;
    }
    .col-lg-2
    {
        width: 16.66666667%;
    }
    .col-lg-1
    {
        width: 8.33333333%;
    }
    .col-lg-pull-12
    {
        right: 100%;
    }
    .col-lg-pull-11
    {
        right: 91.66666667%;
    }
    .col-lg-pull-10
    {
        right: 83.33333333%;
    }
    .col-lg-pull-9
    {
        right: 75%;
    }
    .col-lg-pull-8
    {
        right: 66.66666667%;
    }
    .col-lg-pull-7
    {
        right: 58.33333333%;
    }
    .col-lg-pull-6
    {
        right: 50%;
    }
    .col-lg-pull-5
    {
        right: 41.66666667%;
    }
    .col-lg-pull-4
    {
        right: 33.33333333%;
    }
    .col-lg-pull-3
    {
        right: 25%;
    }
    .col-lg-pull-2
    {
        right: 16.66666667%;
    }
    .col-lg-pull-1
    {
        right: 8.33333333%;
    }
    .col-lg-pull-0
    {
        right: auto;
    }
    .col-lg-push-12
    {
        left: 100%;
    }
    .col-lg-push-11
    {
        left: 91.66666667%;
    }
    .col-lg-push-10
    {
        left: 83.33333333%;
    }
    .col-lg-push-9
    {
        left: 75%;
    }
    .col-lg-push-8
    {
        left: 66.66666667%;
    }
    .col-lg-push-7
    {
        left: 58.33333333%;
    }
    .col-lg-push-6
    {
        left: 50%;
    }
    .col-lg-push-5
    {
        left: 41.66666667%;
    }
    .col-lg-push-4
    {
        left: 33.33333333%;
    }
    .col-lg-push-3
    {
        left: 25%;
    }
    .col-lg-push-2
    {
        left: 16.66666667%;
    }
    .col-lg-push-1
    {
        left: 8.33333333%;
    }
    .col-lg-push-0
    {
        left: auto;
    }
    .col-lg-offset-12
    {
        margin-left: 100%;
    }
    .col-lg-offset-11
    {
        margin-left: 91.66666667%;
    }
    .col-lg-offset-10
    {
        margin-left: 83.33333333%;
    }
    .col-lg-offset-9
    {
        margin-left: 75%;
    }
    .col-lg-offset-8
    {
        margin-left: 66.66666667%;
    }
    .col-lg-offset-7
    {
        margin-left: 58.33333333%;
    }
    .col-lg-offset-6
    {
        margin-left: 50%;
    }
    .col-lg-offset-5
    {
        margin-left: 41.66666667%;
    }
    .col-lg-offset-4
    {
        margin-left: 33.33333333%;
    }
    .col-lg-offset-3
    {
        margin-left: 25%;
    }
    .col-lg-offset-2
    {
        margin-left: 16.66666667%;
    }
    .col-lg-offset-1
    {
        margin-left: 8.33333333%;
    }
    .col-lg-offset-0
    {
        margin-left: 0;
    }
}
.visible-lg, .visible-md, .visible-sm, .visible-xs
{
    display: none!important;
}
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block
{
    display: none!important;
}
@media(max-width: 767px)
{
    .visible-xs
    {
        display: block!important;
    }
    table.visible-xs
    {
        display: table!important;
    }
    tr.visible-xs
    {
        display: table-row!important;
    }
    td.visible-xs, th.visible-xs
    {
        display: table-cell!important;
    }
}
@media(max-width: 767px)
{
    .visible-xs-block
    {
        display: block!important;
    }
}
@media(max-width: 767px)
{
    .visible-xs-inline
    {
        display: inline!important;
    }
}
@media(max-width: 767px)
{
    .visible-xs-inline-block
    {
        display: inline-block!important;
    }
}
@media(min-width: 768px) and (max-width: 991px)
{
    .visible-sm
    {
        display: block!important;
    }
    table.visible-sm
    {
        display: table!important;
    }
    tr.visible-sm
    {
        display: table-row!important;
    }
    td.visible-sm, th.visible-sm
    {
        display: table-cell!important;
    }
}
@media(min-width: 768px) and (max-width: 991px)
{
    .visible-sm-block
    {
        display: block!important;
    }
}
@media(min-width: 768px) and (max-width: 991px)
{
    .visible-sm-inline
    {
        display: inline!important;
    }
}
@media(min-width: 768px) and (max-width: 991px)
{
    .visible-sm-inline-block
    {
        display: inline-block!important;
    }
}
@media(min-width: 992px) and (max-width: 1199px)
{
    .visible-md
    {
        display: block!important;
    }
    table.visible-md
    {
        display: table!important;
    }
    tr.visible-md
    {
        display: table-row!important;
    }
    td.visible-md, th.visible-md
    {
        display: table-cell!important;
    }
}
@media(min-width: 992px) and (max-width: 1199px)
{
    .visible-md-block
    {
        display: block!important;
    }
}
@media(min-width: 992px) and (max-width: 1199px)
{
    .visible-md-inline
    {
        display: inline!important;
    }
}
@media(min-width: 992px) and (max-width: 1199px)
{
    .visible-md-inline-block
    {
        display: inline-block!important;
    }
}
@media(min-width: 1200px)
{
    .visible-lg
    {
        display: block!important;
    }
    table.visible-lg
    {
        display: table!important;
    }
    tr.visible-lg
    {
        display: table-row!important;
    }
    td.visible-lg, th.visible-lg
    {
        display: table-cell!important;
    }
}
@media(min-width: 1200px)
{
    .visible-lg-block
    {
        display: block!important;
    }
}
@media(min-width: 1200px)
{
    .visible-lg-inline
    {
        display: inline!important;
    }
}
@media(min-width: 1200px)
{
    .visible-lg-inline-block
    {
        display: inline-block!important;
    }
}
@media(max-width: 767px)
{
    .hidden-xs
    {
        display: none!important;
    }
}
@media(min-width: 768px) and (max-width: 991px)
{
    .hidden-sm
    {
        display: none!important;
    }
}
@media(min-width: 992px) and (max-width: 1199px)
{
    .hidden-md
    {
        display: none!important;
    }
}
@media(min-width: 1200px)
{
    .hidden-lg
    {
        display: none!important;
    }
}/*手机上a链接有黑色透明底怎么去掉
给a加这个样式*/
a
{
    -webkit-tap-highlight-color: rgba(255,0,0,0);
}
select, input
{
    outline: none;
}/*ie 去掉自带关闭*/
.n-order input::-ms-clear
{
    display: none;
}/*loading 4个小点加载引用*/
#loading1
{
    position: fixed;
    left: 0;
    top: 0;
    background: #000;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#loading .dot
{
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 20px;
    top: 50%;
    background-color: #0097fb;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
    -webkit-animation: 3s linear loader infinite;
    animation: 3s linear loader infinite;
}
#loading .dot:nth-of-type(1)
{
    left: 0;
}
#loading .dot:nth-of-type(2)
{
    left: -10px;
    -webkit-animation-delay: .15s;
    animation-delay: .15s;
}
#loading .dot:nth-of-type(3)
{
    left: -20px;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}
#loading .dot:nth-of-type(4)
{
    left: -30px;
    -webkit-animation-delay: .45s;
    animation-delay: .45s;
}
#loading .dot:nth-of-type(5)
{
    left: -40px;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}
#loading1.closed
{/*opacity: 0;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;*/
    display: none;
}
@-webkit-keyframes loader
{
    0%, 20%
    {
        -webkit-transform: translate(0,-50%);
        transform: translate(0,-50%);
        opacity: 0;
    }
    35%
    {
        -webkit-transform: translate(45vw,-50%);
        transform: translate(45vw,-50%);
        opacity: 1;
    }
    65%
    {
        -webkit-transform: translate(55vw,-50%);
        transform: translate(55vw,-50%);
        opacity: 1;
    }
    80%, 100%
    {
        -webkit-transform: translate(100vw,-50%);
        transform: translate(100vw,-50%);
        opacity: 0;
    }
}
@keyframes loader
{
    0%, 20%
    {
        -webkit-transform: translate(0,-50%);
        transform: translate(0,-50%);
        opacity: 0;
    }
    35%
    {
        -webkit-transform: translate(45vw,-50%);
        transform: translate(45vw,-50%);
        opacity: 1;
    }
    65%
    {
        -webkit-transform: translate(55vw,-50%);
        transform: translate(55vw,-50%);
        opacity: 1;
    }
    80%, 100%
    {
        -webkit-transform: translate(100vw,-50%);
        transform: translate(100vw,-50%);
        opacity: 0;
    }
}/*@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}*//*一行省略
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行省略
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

垂直居中
div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}
span{display:inline-block; font-size:0.1em; vertical-align:middle;}*//*$color:green;//全局变量
$width:200px;//全局变量
$height:200px;//全局变量
body {
    background-color:$color;//调用全局变量
}
div {
    $color:yellow;//定义局部变量，全局变量$color的影子
    .div {
    background-color:$color;//调用局部变量
    width:$width;//调用全局变量
    height:$height;//调用全局变量
    }
}*//*第二种：.triangle-up {    
width:0;    
height:0;   
border:30px solid transparent;    
border-bottom-color:#fff;
}
接下来写向下的三角形，继续在css文件中输入以下代码：
.triangle-down {   
width:0;   
height:0;   
border-left:20px solid transparent;   
border-right:20px solid transparent;   
border-top:20px solid #0066cc;
}
然后是向左的三角形，代码为：
.triangle-left {   
width:0;   
height:0;   
border-top:30px solid transparent;   
border-bottom:30px solid transparent;   
border-right:30px solid yellow;
}
6
最后是向右的三角形，代码为：
.triangle-right {   
width:0;   
height:0;   
border-top:50px solid transparent;   
border-bottom: 50px solid transparent;   
border-left: 50px solid green;
}*/
.backtop
{
    position: fixed;
    bottom: 30px;
    right: 3%;
    background-color: rgba(255,255,255,.9);
    fill: #222;
    cursor: pointer;
    -webkit-transition: all .7s cubic-bezier(.23,1,.32,1);
    transition: all .7s cubic-bezier(.23,1,.32,1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 46px;
    padding: 0;
    margin: 0;
    width: 46px;
    border-radius: 50%;
    z-index: 9;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
    -webkit-transform: scale(0,0);
    -ms-transform: scale(0,0);
    transform: scale(0,0);
    opacity: 0;
    -webkit-transform: translate(0,50px);
    -ms-transform: translate(0,50px);
    transform: translate(0,50px);
    -webkit-transition: all .6s ease;
    transition: all .6s ease;
}
.backtop svg
{
    height: 20px;
    width: 20px;
    position: relative;
    display: block;
    margin: 0 auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.backtop.active
{
    -webkit-transform: scale(1,1);
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
    opacity: 1;
}/*网站单位设置*//*@media (max-width: 767px) {
  html {
    font-size: 26px !important;
  }
}
@media (max-width: 479px) {
  html {
    font-size: 24px !important;
  }
}
@media screen and (max-width: 320px) {
  html {
    font-size: 20px !important;
  }
}*/
@media(min-width: 768px)
{
    html
    {
        font-size: 28px!important;
    }
}
@media(min-width: 1200px)
{
    html
    {
        font-size: 30px!important;
    }
}
@media(min-width: 1440px)
{
    html
    {
        font-size: 34px!important;
    }
}
@media(min-width: 1680px)
{
    html
    {
        font-size: 40px!important;
    }
}/*# sourceMappingURL=rem_reset.css.map */