@font-face {
    font-family : 'custom-xk';
    src         : url("/static/font/custom-xk.ttf");
}

html, body {
    width  : 100%;
    height : 100%;
}

.page-wrapper {
    position            : relative;
    width               : 100%;
    height              : 100%;
    overflow            : auto;
    background-color    : #FBB169;
    background-image    : url("/static/images/page-bg.jpg");
    background-repeat   : no-repeat;
    background-position : top center;
    background-size     : cover;
}

.page-content {
    width  : 1246px;
    margin : 56px auto 0;
}

.page-header {
    height : 99px;
}

.page-header .page-logo {
    display        : block;
    float          : left;
    width          : 486px;
    height         : 99px;
    text-align     : center;
    line-height    : 99px;
    vertical-align : middle;
}

.page-header .page-logo img {
    max-width  : 100%;
    max-height : 100%;
    display    : inline-block;
}

.page-header .top-tip {
    width       : 367px;
    height      : 99px;
    padding-top : 28px;
    margin-left : 16px;
    float       : left;
    text-align  : center;
}

.page-header .top-tip .top-tip-text {
    display             : inline-block;
    width               : 100%;
    height              : 26px;
    background-image    : url("/static/images/widgets/top-links-title.png");
    background-size     : contain;
    background-repeat   : no-repeat;
    background-position : center;
}

.page-header .top-tip .top-tip-links {
    display             : inline-block;
    margin-top          : 8px;
    width               : 242px;
    height              : 34px;
    background-image    : url("/static/images/widgets/top-links-button.png");
    background-size     : contain;
    background-repeat   : no-repeat;
    background-position : center;
    padding             : 0 16px;
    overflow            : hidden;
}

.page-header .top-tip .top-tip-links .swiper-wrapper {
    width  : 100%;
    height : 100%;
}

.page-header .top-tip .top-tip-links .top-link-item {
    text-align    : center;
    line-height   : 34px;
    height        : 34px;
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
    font-size     : 14px;
    color         : #000;
    display       : block;
    flex-shrink   : 0;
    flex-grow     : 0;
}

.page-header .top-service {
    display             : block;
    float               : right;
    width               : 319px;
    height              : 71px;
    margin-top          : 14px;
    background-image    : url("/static/images/widgets/7-24-service.png");
    background-size     : contain;
    background-repeat   : no-repeat;
    background-position : center;
    cursor              : pointer;
}

.page-body {
    margin-top : 36px;
}

.lines-wrapper {
    float               : left;
    width               : 825px;
    height              : 414px;
    background-image    : url("/static/images/line-bg.png");
    background-size     : 100%;
    background-repeat   : no-repeat;
    background-position : center;
    overflow            : hidden;
}

.line-header {
    height  : 68px;
    padding : 0 20px 0 32px;
}

.line-header-left {
    float : left;
}

.line-header-left-tip {
    width               : 127px;
    height              : 48px;
    float               : left;
    margin-top          : 10px;
    background-image    : url("/static/images/widgets/line-top-tip.png");
    background-size     : contain;
    background-repeat   : no-repeat;
    background-position : center;
}

.line-header-left-text {
    height      : 68px;
    line-height : 68px;
    float       : left;
    margin-left : 12px;
    font-size   : 16px;
    color       : #000000;
}

.line-header-right {
    float  : right;
    cursor : pointer;
}

.line-header-right-refresh-icon {
    float               : left;
    width               : 25px;
    height              : 30px;
    margin-top          : 19px;
    background-image    : url("/static/images/widgets/line-top-refresh.png");
    background-size     : contain;
    background-repeat   : no-repeat;
    background-position : center;
}

.line-header-right-refresh-text {
    float       : left;
    height      : 68px;
    line-height : 68px;
    font-size   : 16px;
    color       : #ffffff;
    margin-left : 8px;
}

.lines-body {
    width  : 783px;
    margin : 0 auto;
}

.line-group-item {
    width               : 783px;
    height              : 60px;
    margin-top          : 8px;
    background-image    : url("/static/images/widgets/line-group-item.png");
    background-size     : 100%;
    background-repeat   : no-repeat;
    background-position : center;
    position            : relative;
}

.line-group-item-speed {
    position    : absolute;
    width       : 138px;
    height      : 60px;
    line-height : 60px;
    text-align  : center;
    top         : 0;
    left        : 32px;
    color       : #ffffff;
    font-size   : 16px;
}

.line-group-item-link {
    width       : 320px;
    left        : 194px;
    top         : 0;
    height      : 60px;
    line-height : 60px;
    text-align  : center;
    position    : absolute;
    font-size   : 16px;
    color       : #ffffff;
}

.line-group-item-btn {
    position : absolute;
    width    : 180px;
    height   : 60px;
    left     : 604px;
    top      : 0;
}


.carousel-wrapper {
    float               : right;
    width               : 420px;
    height              : 414px;
    background-image    : url("/static/images/carousel-bg.png");
    background-size     : 100%;
    background-repeat   : no-repeat;
    background-position : center;
    position            : relative;
}

.carousel-wrapper-swiper {
    position : absolute;
    width    : 404px;
    height   : 398px;
    top      : 8px;
    left     : 8px;
    overflow : hidden;
}

.carousel-wrapper-swiper .carousel-pagination {
    position   : absolute;
    left       : 0;
    bottom     : 0;
    z-index    : 2;
    text-align : center;
}

.carousel-wrapper-swiper .carousel-pagination .swiper-pagination-bullet-active {
    background-color : #f65348;
}

.carousel-wrapper-swiper .swiper-wrapper {
    width   : 100%;
    height  : 100%;
    z-index : 1;
}

.carousel-item {
    display             : block;
    width               : 404px;
    height              : 398px;
    background-size     : cover;
    background-repeat   : no-repeat;
    background-position : center;
    position            : relative;
    flex-shrink         : 0;
    flex-grow           : 0;
    border-radius       : 4px;
}

.about-wrapper {
    margin-top          : 12px;
    float               : left;
    height              : 260px;
    width               : 1246px;
    background-image    : url("/static/images/about-bg.png");
    background-size     : 100%;
    background-repeat   : no-repeat;
    background-position : center;
}

.about-left {
    width   : 825px;
    height  : 260px;
    float   : left;
    padding : 16px;
}

.about-left .about-title {

}

.about-left .about-title span {
    font-family             : 'custom-xk';
    font-size               : 36px;
    background-image        : linear-gradient(to right, #f9e79b, #FFFDD1, #fbcd8b);
    -webkit-background-clip : text;
    color                   : transparent;
    text-shadow             : 1px 1px 1px rgba(251, 205, 139, 0.3);
}

.about-left .about-desc {
    font-size   : 16px;
    line-height : 2;
    color       : #fff;
}

.about-right {
    float       : right;
    height      : 260px;
    line-height : 260px;
    width       : 420px;
    padding     : 16px;
    text-align  : center;
}

.about-right a {
    vertical-align : middle;
}

.about-right a img {
    max-width  : 100%;
    max-height : 100%;
}

.page-footer {
    margin      : 98px 0;
    text-align  : center;
    font-size   : 14px;
    line-height : 2;
    color       : #c08467;
}