@baseColor: #e92322;

/* 头部块 */
.wjs-header {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
    .row {
        height: 100%;
        text-align: center;
        > div:nth-of-type(-n+3) {
            border-right: 1px solid #ccc;
        }
        .code {
            display: block;
            position: relative;
            > img {
                display: none;
                position: absolute;
                border: 1px solid #ccc;
                border-top: none;
                left: 50%;
                transform: translateX(-50%);
                top: 49px;
            }
            &:hover {
                > img {
                    display: block;
                }
            }
        }
        > div:nth-last-of-type(1) {
            > .btn-danger {
                background-color: @baseColor;
                border-color: @baseColor;
            }
            > .btn {
                padding: 3px 15px;
            }
            > .btn-link {
                text-decoration: none;
                color: #aaa;
            }
            
        }
    }
}

/*导航条*/ 
.wjs-nav {
    &.navbar {
        margin-bottom: 0;
    }
    .navbar-brand {
        height: 80px;
        line-height: 50px;
        font-size: 40px;

        > span:nth-of-type(1) {
            color: @baseColor;
        }

        > span:nth-of-type(2) {
            color: #333;
        }
    }
    .navbar-toggle {
        margin-top: 23px;;
    }
    .navbar-nav {
        > li {
            height: 80px;
            > a {
                height: 80px;
                line-height: 50px;
                font-size: 16px;
                
                &:hover, &:active {
                    color: #777;
                    border-bottom: 3px solid @baseColor;
                }
            }
        }
        .active {
            a,a:hover,a:active {
                background-color: transparent;
                border-bottom: 3px solid @baseColor;
            }
        }
    }
}

/*轮播图*/
/*
w<768px-移动端：图片会随着屏幕的缩小自动适应--缩小
	img的宽度为100%,通过img标签来实现

w>=768px：
	图片做为背景，当屏幕宽度变宽的时候，会显示更多的图片的两边区域
	1.background-image添加图片
	2.添加background-position:center center
	3.background-size:cover
*/
.wjs-banner {
    .bigImg {
        width: 100%;
        height: 410px;
        /*去除图片基线*/ 
        display: block;
        background-position:center center;
        background-size: cover;
    }

    .smallImg {
        // width: 100%;
        // display: block;
        img {
            width: 100%;
            /*去除图片基线*/ 
            display: block;
        }
    }
}

/*信息块*/
.wjs-info {
    padding: 20px;
    .wjs_icon {
        font-size: 26px;
    }
    .row {
        > div {
            margin: 10px 0;
            > a:hover {
                color: @baseColor;
            }
        }
    }
} 

/*预约块*/
.wjs-reverse {
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;

    .wjs_icon {
        font-size: 18px;
    }

    a:hover {
        color: @baseColor;
    }

    .col-sm-9 {
        > a:last-of-type {
            color: @baseColor;
            border-bottom: 1px dashed @baseColor;
        }
    }
}

/*产品块*/ 
.wjs-product{
    clear: both;
    background-color: #eee;
    

    li {
        height: 100px;
        line-height: 100px;
        padding: 0 10px;
        > a {
            margin: 0;
            border: none;
            line-height: 50px;
        }

        a:hover {
            border: none;
            border-bottom: 3px solid @baseColor;
        }

        &.active {
            > a,a:hover,a:focus{
                background-color: transparent;
                border: none;
                border-bottom: 3px solid @baseColor;
            }
            
            
        }
    }
}

/*产品块*/ 
.wjs-product {
    .tabs-parent {
        width: 100%;
        overflow: hidden;
    }
    .wjs-pBox {
        height: 100%;
        background-color: #fff;
        margin-top: 20px;
        position: relative;
        box-shadow: 1px 1px 5px #ccc;

        > .wjs-pLeft {
            height: 100%;
            margin-right: 100px;
            padding: 10px 0;
            font-size: 12px;
            position: relative;

            > p {
                font-size: 16px;
                text-align: center;
            }
            .row {
                margin-left: 0;
                margin-right: 0;
                > div:nth-of-type(even) {
                    text-align: right;
                }
            }
        }

        > .wjs-pRight {
            width: 100px;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            border-left: 1px dashed #ccc;
            text-align: center;
            padding-top: 40px;

            > .wjs-pRight-tip {
                width: 100%;
                span {
                    font-size: 12px;
                    border-radius: 3px;
                    cursor: pointer;
                }
                span:first-of-type {
                    border: 1px solid @baseColor;
                    color: @baseColor;
                }
                span:last-of-type {
                    border: 1px solid blue;
                    color: blue;
                }
            }

            > b {
                font-size: 40px;
                color: @baseColor;
            }
            > sub {
                bottom: 0;
                color: @baseColor;
            }
            &::before, &::after {
                content: "";
                width: 10%;
                height: 10px;
                border-radius: 5px;
                background-color: #eee;
                position: absolute;
                left: -5px;
            }
            &::before {
                top: -5px;
            }
            &::after {
                bottom: -5px;
            }
        }

        &.active {
            background-color: @baseColor;
            .wjs-pLeft {
                color: #fff;
                &::before {
                    content: "\e915";
                    font-family: "wjs";
                    position: absolute;
                    left: 0;
                    top: -4px;
                    font-size: 26px;
                }
            }
            .wjs-pRight {
                b,sub,p {
                    color: #fff;
                }
            }   
        }
    }
}

/*新闻块*/
.wjs-news {
    padding: 20px;
    .wjs_nTitle{
        line-height:50px;
        font-size: 25px;
        border-bottom: 1px solid #ccc;
        text-align: center;
        position: relative;
        &::before{
          content: "";
          width: 8px;
          height: 8px;
          border-radius: 4px;
          border: 1px solid #ccc;
          position: absolute;
          bottom: -4px;
          right: -8px;
        }
    }
    /*设置li元素间的虚线*/ 
    .wjs_newsLine {
        width: 1px;
        height: 100%;
        position: absolute;
        border-left: 1px dashed @baseColor;
        left:45px;
        top:0;
    }
    .nav-tabs {
        border-bottom: none;
        > li {
            margin-bottom:60px;
            > a {
                background-color: #ccc;
                width: 60px;
                height: 60px;
                border: none;
                border-radius: 50%;

            }
            > a:hover {
                border: none;
                background-color: @baseColor;
            }
            &.active {
                > a {
                    border: none;
                    background-color: @baseColor;
                }
                
            }
            .wjs_icon{
                font-size: 30px;
                color: #fff;
              }
        }
        > li:last-of-type {
            margin-bottom: 0;
        }
        /*媒体查询设置li元素的样式*/
        @media screen and (min-width: 768px) and (max-width: 992px) {
            li {
                margin: 20px 30px;
            }
        } 
        @media screen and (max-width: 768px) {
            li {
                margin: 20px 0;
                width: 25%;
            }
        } 
    }

    .tab-content {
        .wjs_newslist {
            list-style: none;
            > li {
            line-height:60px;
            }
        }
    }
} 

/*合作块*/ 
.wjs-partner {
    background-color: #eee;
    padding: 20px;
    text-align: center;
    h3 {
        width: 100%;
    }
    ul {
        list-style: none;
        display: inline-block;
        > li {
            float: left;
            margin: 0 15px;
        }
        .wjs_icon {
            font-size: 80px;
        }
    }
}