/*sm屏幕以上*/
@media only screen and (min-width: 576px){
    .intro{
        width: 65%;
    }
    .img-width-w100 img{
        width: 100%;
    }

}

/*sm屏幕以下*/
@media only screen and (max-width: 576px){
    .intro{
        width: 100%;
    }
    .img-width-sm-w100 img, .img-width-w100{
        width: 100%;
    }
    .w-sm-40{
        width: 40% !important;
    }
}

/*md屏幕以上*/
@media only screen and (min-width: 768px){
    /*.intro{*/
    /*    width: 60%;*/
    /*}*/
}

/*lg屏幕以上*/
@media only screen and (min-width: 992px){
    /*.intro{*/
    /*    width: 60%;*/
    /*}*/
}

@media (max-width: 767px){
    .intro{
        width: 100%;
    }
}

:root {
    --main-color: #f44275;
    --border-color: #f44275;
    --bg-main-color: #ff698c;
}

.on{
    color: #f44275 !important;
}
.text-pink{
    color: #f44275;
}
.w-20 {
    width: 20% !important;
}
.w-10 {
    width: 10% !important;
}
.secondary-nav{
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,.1);
    background: #fff;
    z-index: 10;
    transition: all .5s;
    -webkit-transition: all .5s;
}
.main-bg-color{
    background: var(--bg-main-color);
}

.btn-info{
    background-color: var(--bg-main-color);
    border-color: var(--border-color);
}
.btn-info:hover{
    background-color: var(--bg-main-color);
    border-color: var(--border-color);
}

.page-link:hover,.page-link {
    z-index: 2;
    color: #0C0C0C;
}
.page-num-current{
    background-color: var(--bg-main-color);
    border-color: var(--main-color);
}