body{
    overflow-x: auto
}
/*  */
.giscontainer {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.giscontainer .giscontainer-inner { 
    margin-left: -15px; 
    margin-right: -15px;
}
.giscontainer .giscontainer-inner .content {
    min-height: 80vh;
}
main, aside { 
    float: left;
}
main {
    width: 796px;
}
aside {
    width: 404px;
}
.box{ margin-bottom: 20px;}
.section {padding:30px 0;}
.giscontainer-inner::before,
.giscontainer-inner::after,
.content::before,
.content::after,
.banners::before,
.banners::after,
.card .footer::before,
.card .footer::after {
    display: table; 
    content: "";
}
.giscontainer-inner::after,
.content::after,
.banners::after,
.card .footer::after{
    clear: both;
}
/* common */
.card {
    box-shadow: none;
    margin-bottom: 0;
}
.card .card-image img { box-shadow: none;}
.card-profile .card-avatar { box-shadow: none;}
.card-plain .card-image,
.card-plain .card-image img {border-radius: 0;}
.card .card-image .colored-shadow {display: none;}
.card .card-description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-weight: 400;
    line-height: 1.4;
}
.box-title {position: relative; margin:8px 0 14px; padding-left:14px; line-height: 1.2; font-size: 1.8rem; font-weight: 400;}
.box-title::before {position: absolute; content: ""; left: 0; width: 6px; height: 100%; border-radius: 3px; background: #2196f3}
.tabs-navigation {margin-bottom:14px; border-bottom: 1px solid #ddd;}
.tabs-navigation .nav-tabs li a{font-size: 1.6rem;}
.nav-tabs.nav-tabs-unstyled > li.active > a:after {height: 3px;}

/* Index Banner */
.banners { 
    margin-bottom: 20px;
}
.banners > main,
.banners > aside {
    height: 392px;
}
.banners > aside { 
    padding-left:12px; 
    padding-right: 0;
    font-size: 0;
}
.banners > aside .card {
    width: 190px; 
    height: 190px;
    vertical-align: top;
}
.banners > aside .card:nth-child(1),
.banners > aside .card:nth-child(2) {
    margin-bottom: 12px;
}
.banners > aside .card:nth-child(2),
.banners > aside .card:nth-child(4) {
    margin-left: 12px;
}
.banners > aside .card > .card-image,
.banners > aside .card > .card-image img {
    display: block;
    width: 100%; 
    height: 100%;
}
.banners > aside .card > .card-image .card-title {
    left: 0;
    bottom: 0;
    padding: 10px;
    width: 100%;
    height: 60px;
    font-size: 1.4rem; 
    font-weight: 400;
    background-color: rgba(0,0,0,0.3);
}
.banners > aside .card > .card-image .card-title > span {
    
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

}
.banners .carousel .carousel-indicators {
    left: 0;
    bottom: 0;
    margin-left: 16px;
    margin-bottom: 0;
    text-align: left;
}
.banners .carousel .carousel-indicators li, 
.banners .carousel .carousel-indicators .active {
    margin: 11px 10px 11px 0;
    width: 40px; 
    height: 3px;
    opacity: 0.5;
}
.banners .carousel .carousel-indicators li.active {
    box-shadow: unset;
    transform: none;
    opacity: 1;
}
.banners .carousel > .carousel-inner > .item {
    height: 392px;
}
.banners .carousel > .carousel-inner > .item > .carousel-caption { 
    text-align: left; 
    padding-bottom: 20px;
    left: 16px;
    right: 16px;
}
.banners .carousel > .carousel-inner > .item > .carousel-caption > h4 { 
    margin:0;
    font-size: 21px;
    font-weight: 600;
}
.banners .carousel-inner > .item > a > img, 
.banners .carousel-inner > .item > img {
    height: 100%;
}
.banners .carousel .carousel-control {
    display: none;
}
/* Index Banner END */
/* Content Main */
.content > main > .box > .box-content {
    margin-right: 50px;
}
.content > main > .box > .box-content .tab-space {
    padding: 0
}
.content > main .card .card-image {
    float: left;
    width: 216px;
    height: 143px;
    margin-right: 20px;
    overflow: hidden;
}
.content > main .posts .card .card-content {
    position: relative;
    height: 143px;
    padding: 10px 0 0 0;
    overflow: hidden;
}
.content > main .card .card-title {
    font-size: 1.8rem;
    font-weight: 400;
}
.content > aside {
    padding-left: 12px;
}

.content > aside > .box > .box-content {
    padding: 0 6px;
}
.content > aside > .adbox > .box-content { padding: 0;}
.content main .box .box-content  {
    margin-right: 0;
}
.content > main .posts .card {
    padding: 14px;
    margin-top: 0;
    margin-bottom: 0;
}
.content > main .card .card-image img {
    width: 100%;
    height: 100%;
}
.content > main .card .footer { 
    position: absolute; 
    width: 100%;
    bottom: 0; 
    margin-top: 0; 
    font-size: 13px; 
    font-weight: 300;
}
.content > main .card .footer .stats {float: left;}
.content .card .footer .stats .material-icons {font-size: 16px; vertical-align: baseline;}
/* Content Main END */
/* Content Aside */
.content > aside .card {
    padding: 6px 0;
    margin-top: 0;
    margin-bottom: 0;
}
.content > aside .card .card-image {
    float: left;
    margin-right: 10px;
}
.content > aside .card .card-image,
.content > aside .card .card-image img {
    width: 120px;
    height: 80px;
}
.content > aside .card .card-title {
    font-size: 14px;
    font-weight: 400;
    margin-top: 0;
}
.content > aside .card .card-content {
    height: 80px;
    padding:0;
    overflow: hidden;
}
.content > aside .card .footer { 
    position: absolute; 
    bottom: 5px; 
    margin-top: 0; 
    font-size: 12px; 
    font-weight: 300;
}
.qrcbox {
    width: 120px;
    padding-bottom: 6px;
    text-align: center;
    background: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.3)
}
.adbox {margin-top: 14px;}
.adbox::before { display: table; clear: both;}
.adbox img,.qrcbox img {width: 100%;}
/* Content Aside END */
/* Navbar */
.gisvision .navbar .navbar-brand { 
    padding-left: 0;
    font-size: 24px;
}
.gisvision .navbar .navbar-nav.head-font > li > a {font-size: 1.4rem;}
.gisvision .navbar #usernologin1 > a, 
.gisvision .navbar #usernologin2 > a {
    margin-top:15px;
    height: unset;
    line-height: unset;
}
.gisvision .navbar .navbar-nav.navbar-left > li > a {
    padding-top: 25px;
    padding-bottom: 25px;
    margin-top: -10px;
    margin-bottom: -10px;
}
.gisvision .navbar .navbar-nav.navbar-right > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
}
.gisvision .navbar .navbar-nav > li {position: relative;}
.gisvision .navbar .navbar-nav > li.active a{color: #2196f3}
.gisvision .navbar .navbar-nav > li.active a::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #2196f3;
}
.navbar .navbar-nav > li#awish3dearth > a {
    border-color: rgba(0,0,0,0.6)
}
/* Navbar END */
/* Join QQClub */
.joinclub ul > li {
    white-space: nowrap;
}
.joinclub ul > li > a.btn,
.joinclub ul > li > a.btn:hover,
.joinclub ul > li > a.btn:focus,
.joinclub ul > li > a.btn:active {
    margin: 4px 0 4px 10px; 
    color: #2196f3; 
    border:1px solid #2196f3!important; 
    background-color: transparent; 
    padding:2px 6px!important;
}

/* Join QQClub END*/
/* video */

.curriculum .content main .posts .card .card-image,
.curriculum .content main .posts .card .card-image img {
    width: 314px;
    height: 208px;;
}
.curriculum .content > main .posts .card .card-content {
    height: 208px;
    padding-right: 0;
}
.curriculum .content > main .card .footer .author {
    display: block;
    margin-bottom: 10px;
}
.curriculum .content > main .card .footer .stats {
    float: right;
}
.curriculum .content > main .card .footer .btn {
    margin:0;
    height: 35px;
    padding: 0 30px;
    line-height: 35px;
    font-size: 1.4rem;
}
article.video-detail {
    margin: 0;
}
.video-detail .nav-tabs-unstyled {
    background-color: #f2f2f2;
}
.video-detail .nav-tabs-unstyled > li a {
    font-size: 14px;

}
.curriculum .card .footer .btn { min-width: 140px;}
.livevideo::before {
    position: absolute;
    content: "直播中";
    z-index: 100;
    top: 25px;
    right: -60px;
    width: 200px;
    line-height: 1.8;
    font-size: 1.6rem;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 191, 191, 1);
    transform: rotate(45deg);
    box-shadow: 0 0 12px rgba(0,0,0,0.5)
}
.livevideo.ready::before {
    position: absolute;
    content: "即将开讲";
    background-color: rgba(255, 153, 0, 1);
}
/* 初始化图片 */
.vjs-poster {
    background-size: cover;
}
.video-js,
.vjs-poster {
    width: 796px;
    height: 447px;
}
.video-js .vjs-big-play-button {
    height: 3em;
    line-height: 3em;
    border-radius: 50%;
}
.vjs-big-play-button .vjs-icon-placeholder {
    font-size: 1.5em;
}
.video-info {
    margin-bottom: 10px;
    padding: 15px 20px;
    height: 92px;
    color: #fff;
    background-color: #232323;
    -webkit-box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.349019607843137);
    box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.34901960784)
}
.video-info h4 {
    margin-top: 0;
    font-size: 2.2rem;
    font-weight: 400;
    padding-left: 5px;
}
.video-info ul {
    display: inline-block;
    margin: 0;
}
.video-info ul li {
    padding-right: 15px;
    opacity: 0.7;
    line-height: 18px;
}
.video-info ul li .material-icons {
    font-style: normal;
    font-size: 15px;
    vertical-align: middle;
}
.video-info ul li i {
    padding: 0 6px;
}
.video-info ul li a {
    color: #fff;
}
/* video end */
/* post */
article {
    margin-left: 20px;
    margin-right: 20px;
}
article .title {
    font-size: 32px;
    font-weight: 600;
    padding-left: 0;
}
article .title::before {
    display: none;
}

article .meta {
    font-weight: 400;
    color: #999;
}
article .meta span{
    color: #2196f3
}
article .detailstyle {
    font-weight: 400;
}
/* post end */
/* yellow pages */
.yellowpages .yelcontent {
    display: flex;
    align-items: stretch;
    height: 100vh;
    flex:1;
}
.yellowpages aside {
    position: relative;
    margin: 0;
    padding: 0;
    width: 270px;
    z-index: 10;
    box-shadow: 
    1px 0px 2px 0 rgba(0, 0, 0, 0.3), 
    1px 0px 2px -2px rgba(0, 0, 0, 0.2), 
    1px 0px 2px 0 rgba(0, 0, 0, 0.12);
}
.yellowpages aside .navbar { 
    border-radius: 0;
    box-shadow: unset;
}
.yellowpages aside .navbar-header {
    float: none;
    width: 100%;
    border-bottom:1px solid rgba(224, 224, 224, 1);
    clear: both;
}
.yellowpages aside .navbar .navbar-brand {
    display: block;
    min-width: 270px;
    height: auto;
    padding: 0 15px 0 60px;
    background: url('../img/gisvision/logo.png') no-repeat 20px center;
    background-size: 32px 32px;
}
.yellowpages aside .navbar-collapse {
    padding: 0;
    text-align: left;

} 
.yellowpages aside .navbar-brand h4{ margin:0; font-weight: 600;}
.yellowpages aside .navbar-brand p{ margin:0; font-weight: 400; font-size: 12px;}

.yellowpages .navbar-nav {
    float: none;
}
.yellowpages .navbar-nav > li {
    float: none;
    padding: 30px 20px;
    border-bottom: 1px solid rgba(224, 224, 224, 1);
}
.yellowpages .navbar-nav > li > a {
    display: block;
    padding-left: 0;
    padding-right: 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: #3c4858;
}
.yellowpages .navbar-nav > li > ul {
    padding: 10px 0;
}
.yellowpages .navbar-nav > li > ul > li {
    padding: 10px 0;
}
.yellowpages .navbar-nav > li > ul > li > a {
    font-weight: 400;
    color: #999;
}
.yellowpages .yelcontent main {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-y: auto;
}
.yellowpages main .section {
    width: 882px;
    margin: auto;
}
.yellowpages main .toplinks {
    font-size: 0;
}
.yellowpages main .toplinks .card {
    width: 100%;
    height: auto;
    margin-left: 15px;
    margin-bottom: 10px;
}
.yellowpages main .toplinks .card .card-title {
    -webkit-line-clamp: 1;
}
.yellowpages main .toplinks .card:first-child {
    margin-left: 0;
}
.yellowpages main .toplinks .card .card-content {
    padding: 42px 10px;
    min-height: 100%;
}
.yellowpages main .toplinks .card .card-content .card-title {
    font-size: 1.8rem;
    font-weight: 300;
}
.yellowpages main .toplinks .card .card-content .category {
    color: #fff
}
.yellowpages main .panel {
    margin-bottom:30px;
    border-top: 3px solid rgba(0, 166, 90, 1);
    background: #fff;
    box-shadow:0px 1px 8px rgba(0, 0, 0, 0.3);
}
.yellowpages main .panel .panel-heading {
    padding: 12px 20px;
    font-size: 1.8rem;
    color: #518193;
}
.yellowpages main .panel .panel-body {
    padding: 12px 20px;
    font-size: 1.8rem;
}
.yellowpages main .panel .panel-body h5 {
    margin: 0;
    padding: 20px;
    color: #999;
}
.yellowpages .social-feed {
    /* display: -webkit-flex;
    display: flex;
    flex-wrap: wrap; */
}
.yellowpages .social-feed .feed-line {
    display: block;
    /* width: 25%; */
    padding: 20px 20px;
    margin-bottom: 20px;
    font-size: 1.6rem;
    color: rgb(0, 166, 90);
    font-weight: 400;
    line-height: 1;
}
.yellowpages .social-feed .feed-line:hover,
.yellowpages .social-feed .feed-line:hover small {
    color: rgb(0, 101, 169)
}
.yellowpages .social-feed .feed-line:hover {
    background-color: #edf5fa;
}
.yellowpages .social-feed .feed-line small {
    font-size: 1.2rem;
    color: #999;
}
.yellowpages .social-feed .feed-line i,
.yellowpages .social-feed .feed-line p {
    display: table-cell;
    vertical-align: middle;
}
.yellowpages .social-feed .feed-line i {
    width: 20px;
    height: 20px;
    padding-right: 15px;
    box-sizing: content-box;
}
.yellowpages .social-feed .feed-line i img {
    width: 100%;
    height: 100%;
}
.yellowpages .giscontainer {
    width: 1360px;
}
.yellowpages .yelcontent main {
    /* width: 1090px; */
} 
@media screen and (max-width:992px){
    .gisvision .navbar .navbar-nav > li.active a::before{
        content: unset;
    }
    .card .card-description {
        display: none;
    }
    main, aside, .banners > main, .banners > aside {
        width: 100%;
        height: auto;
    }
    .banners > main { 
        margin-bottom: 20px;
    }
    .banners > aside { 
        padding-right: 12px;
    }    
    .banners > aside .card {
        width: calc(50% - 6px);
        height: 190px;
        /* height: auto; */
        margin-bottom: 0;
    }
    .content > main .card .card-image {
        width: 120px;
        height: 80px;
        margin-right: 10px;
    }
    .content > main .posts .card .card-content {
        height: 80px;
        padding: 0;
    }    
    .content > main .card .card-title {
        font-size: 1.6rem;
        margin-top: 0;
    }
    .box .box-title {
        font-size: 1.6rem;
        margin-left: 14px;
    }    
    .content > aside { padding-left: 0;}
    .content > aside .box > .box-content {
        padding: 0 14px;
    }    
    .curriculum .content main .posts .card .card-image,
    .curriculum .content main .posts .card .card-image img {
        width: 120px;
        height: 80px;;
    }
    .curriculum .content > main .posts .card .card-content {
        height: 80px;
    }  
    .curriculum .content > main .posts .card .footer .author {
        display: none;
        margin-bottom: 10px;
    }
    .curriculum .tab-content {
        margin-bottom: 70px;
    }    
    .video-js,
    .vjs-poster {
        width: 100%;
        min-height: 422px;
        height: 100%;
    }
    .livevideo::before {
        top: 10px;
        right: -30px;
        width: 100px;
        font-size: 1.2rem;
    }
    .video-info {
        padding: 5px 10px;
    }
    .video-info h4 {
        font-size: 1.6rem
    }
    .yellowpages .section {
        padding-top: 100px;
    }
    .yellowpages .navbar .navbar-brand {
        line-height: 1.5;
    }
    .yellowpages .yelcontent main {
        padding: 15px;
    }
    .yellowpages aside {
        position: fixed;
        width: 100%;
        height: 70px;
        box-shadow: none;
    }    
    .yellowpages aside .navbar {
        box-shadow: 0 4px 18px 0px rgba(0, 0, 0, 0.12), 0 7px 10px -5px rgba(0, 0, 0, 0.15);
    }
    
    .yellowpages  aside .navbar-header {
        border-bottom:0;
    }
    .yellowpages main .section {
        width: 100%;
    }
    .yellowpages .navbar-nav > li {
        border-bottom: 0;   
    }
    .yellowpages .navbar-nav > li > ul {
        padding: 0 15px;
    }
    .yellowpages .navbar .navbar-brand {
    line-height: auto;
    }
    
.copyright .pull-left,.copyright .pull-right { float: unset!important; clear: both}
}
@media (max-width:416px){ 
    .banners > aside .card {
        height: 190px;
    }
    .curriculum .content > main .card .footer .stats {
        display: none;
    }
}
@media (max-width:377px){ 
    .banners > aside .card {
        height: 170px;
    }
}
@media (max-width:322px){
    .banners > aside .card {
        height: 142px;
    }
    .qrcbox  {
        width: 110px;
    }
    .joinclub ul > li > a {
        margin-left: 0;
        padding: 2px 3px!important;
    }
}
@media (min-width: 992px) {
    .giscontainer {
        width: 1200px;
    }
    .yellowpages .navbar .navbar-collapse {
        text-align: left;
        padding: 0
    }
}

.detailstyle img {
    max-width: 100%;
    height: auto;
}