body {
    padding-top: 50px;
    padding-bottom: 20px;}

a {
    text-decoration: none;
    color: #666;}

    a:hover {
        color: #000;}

textarea {
    width: 100%;}


.articlePic {
    text-align: center;}

    .articlePic img {
        margin-bottom: 8px;
        margin-top: 8px;}

article {
    overflow: hidden;
    letter-spacing: 0.1em;
    line-height: 1.8em;
    text-align: justify;}

    article img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: auto;}

    article figure {
        text-align: center;}

figure {
    padding-bottom: 40px;}

.tab-pan figure {
    margin-top: 5px;
    background-color: aliceblue;}

figcaption {
    padding: 0.5em 0 0 0;
    font-size: 1.1em;}

.topbutton {
    float: right;
    text-align: center;
    padding:0.2em 1em;
    background: #1e90ff;
    margin-bottom:0.5em;}
    .topbutton a {
        font-size: 0.9em;
        display: inline-block;
        color: white;
        transition: 0.3s;
        text-decoration:none;}
        .topbutton a:hover {
            transform: scale(1.05) translateY(-3px);}

article h1 {
    text-align: center;
    font-size: 2em;}

article h2 {
    text-align: center;
    font-size: 1.5em;}

article .byline {
    text-align: center;
    color: darkgrey;}

article p {
    text-indent: 2em;}

h2, h3, h4, h5 {
    color: #2f2f2f;
    font-weight: 300;}


.base-line {
    padding-bottom: 5px;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: #cbcaca;
    margin-bottom: 10px;}

    .bannerWrap .bannerInfo {
        font-size: 1.2em;
        line-height: 1.5em;
        margin: 10px 0;}

.noticeWrap {
    overflow: hidden;
    white-space: nowrap;
    background-color: aliceblue;
    text-overflow: ellipsis;
    margin-top: 10px;
    padding: 5px;
    font-size: 1.05em;
    font-weight: bold;
    color: red;}

    .noticeWrap a {
        color: darkred;}

.topArticleWrap {
    position: relative;
    min-height: 250px;}

    .topArticleWrap span {
        position: absolute;
        overflow: hidden;
        bottom: -5px;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 5px;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 99%;
        font-size: 1.2em;
        font-weight: bold;}

    .topArticleWrap img {
        overflow: hidden;
        width: 100%;}

.container {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;}

.row {
    margin-top: 10px;}

.columnbar {
    font-size: 1.2em;
    font-weight: bolder;
    border-bottom: solid 2px cornflowerblue;
    margin-bottom: 5px;}

    .columnbar .left {
        background-color: cornflowerblue;
        padding-top: 3px;
        width: 120px;
        line-height: 1.2em;
        text-align: center;
        color: white;}

    .columnbar .right {
        float: right;
        font-size: 0.8em;}

        .columnbar .right a {
            color: darkcyan;}

.columnbar1 {
    font-size: 1.2em;
    font-weight: bolder;
    margin-left: 10px;
    background-image: url(../images/columnbar.png);
    line-height: 2em;
    padding-left: 1em;}

.titlebar {
    padding: 6px 0 6px 10px;
    font-weight: bold;
    background: rgb(240, 240, 240);
    box-shadow: 3px 3px 1px rgb(200, 200, 200);
    margin: 5px 0;}
/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
    opacity: 0.8;}

.more {
    font-size: 0.8em;
    padding-right: 10px;
    float: right;}


.mainColumn {
    margin: 10px 10px;}

.sideColumn {
    margin: 10px 10px;}

.widget_search {
    width: 210px;
    position: relative;}

    .widget_search button[type=submit] {
        background-color: transparent;
        background-position: -44px 7px;
        border: 0 none;
        cursor: pointer;
        height: 27px;
        padding: 5px;
        padding-right: 10px;
        padding-bottom: 8px;
        position: absolute;
        right: 0;
        top: 0;
        width: 26px;
        opacity: .4;}

input.span3, textarea.span3, .uneditable-input.span3 {
    width: 210px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px;}

.widget_search button[type=submit] {
    background-color: transparent;
    border: 0 none;
    opacity: 0.4;}

.widget_contact p {}

.widget_contact span {
    float: left;
    margin-right: 6px;
    margin-top: 0.2em;}

.widget_search button[type=submit]:hover {
    opacity: .7
;}

[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    vertical-align: text-top;
    background-image: url(../images/glyphicons-halflings.png);
    background-position: 14px 14px;
    background-repeat: no-repeat;
    opacity: .5;}

.productBrief {
    height: 40px;
    overflow: hidden;
    text-indent: 2em;}



.icon-map-marker {
    background-position: -24px -72px;}

.icon-envelope {
    background-position: -72px 0;}

.icon-info-sign {
    background-position: -120px -96px;}

.icon-user {
    background-position: -168px 0;}

table.custom th {
    color: white;
    background-color: rgb(80, 124, 209);
    padding: 2px 5px 2px 5px;}

table.custom {
    font-size: 0.9em;}

table {
    width: 99%;
    border-collapse: collapse;
    letter-spacing: 0;
    line-height: 1.5em;}

    table.custom td + td {
        padding: 2px 5px 2px 5px;
        border-width: 1px;
        border-color: #F3F3F3;
        border-left-style: solid;}

footer {
    background-color: #eee;
    padding-top: 20px;}

    footer li {
        display: inline;}

.date {
    font-size: 0.8em;
    color: darkgray;}

#promotion {
    position: relative;
    overflow: hidden;
    border-radius: 15px;}

.container {}


.topPart {
    font-weight: bold;}

    .topPart ul li:before {
        content: "★ ";
        color: red;}

.pager a {
    display: inline-block;
    margin-right: 5px;}

    .pager a .active {
        font-size: 1.1em;
        color: red;
        font-weight: bold;
        text-decoration: none;}

.admin {
    color: #6600FF;
    font-size: 0.85em;}

    .admin a {
        background-color: #6600CC;
        color: #FFFFFF;
        padding: 3px;}

#topArticleCarousel .item h2, #topArticleCarousel .item h3 {
    margin-top: 0;
    padding-top: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 0.5em;
    font-weight: bold;}

#topArticleCarousel .item img {}

#topArticleCarousel .carousel-indicators {
    bottom: 0;
    left: 10px;
    margin-left: 5px;
    width: 100%;}

    #topArticleCarousel .carousel-indicators li {
        border: medium none;
        border-radius: 0;
        float: left;
        height: 42px;
        margin-bottom: 5px;
        margin-left: 0;
        margin-right: 5px !important;
        margin-top: 0;
        width: 75px;}

    #topArticleCarousel .carousel-indicators img {
        border: 2px solid #FFFFFF;
        float: left;
        left: 0;
        overflow: hidden;}

    #topArticleCarousel .carousel-indicators .active img {
        border: 2px solid #39b3d7;}

a.toparticle {
    color: red;}

@media screen and (max-width: 980px) {

    .imgIndicator {
        width: 65px;
        height: 40px;}

    #topArticleCarousel .carousel-indicators li {
        width: 50px;
        height: 30px;}

    #websiteLogo {
        width: auto;}
}

.topAd {
    background: url(../images/happynewyear.jpg) center 0 no-repeat;
    background-size: 1200px auto;
    height: 120px;}

.body-content {}

video {
    max-width: 100%;
    text-align: center;}

.sciencebar {}

    .sciencebar > div {
        min-width: 100px;}

@media screen and (max-width: 767px) {
    .navbar {
        min-height: 30px;}

    .imgIndicator {
        width: 45px;
        height: 29px;}
    video {
        width: 100%;}
    ul.listpart figure.video {
        width: 100%;}
    #topArticleCarousel .carousel-indicators li {
        width: 45px;
        height: 29px;}

    #websiteLogo {
        width: auto}

    .sciencebar {
        display: block;}

    .nav > li > a {
        padding: 5px 6px;}

}
.online-button {
    display: flex;
    flex-wrap:wrap;
    width: 90%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 2em;}

    .online-button a {
        display: block;
        flex-shrink: 1;
        margin:10px;
        width:100px;
        min-height:45px;
        background-size:cover;
        background-repeat:no-repeat;}
        .online-button a:nth-child(1) {
            background-image: url(../images/ee82c34cef0e54a9da126c92fae91bfa.png);}
        .online-button a:nth-child(2) {
            background-image: url(../images/3d39da3c5d41a89ed3c6e972f7a01cbb.png);}
        .online-button a:nth-child(3) {
            background-image: url(../images/25988b95b6d021b1113c31bbe7b8ffda.png);}
        .online-button a:nth-child(4) {
            background-image: url(../images/d668956c986bedf57f9cf83aa3b33605.png);}
.listTitle {
    margin-top: 1em;
    color:red;
    display: flex;
    flex-flow: row wrap;}
    .listTitle div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height:2rem;
        line-height:2rem;}
.listpart {
    padding: 0 10px;
    z-index: 999;
    background: rgb(250, 250, 250);
	float: left;
    width: 100%;
    padding: 10px;}

    .listpart ul {
        margin: 0;
        padding: 0;}

        .listpart ul li {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 0.5em;}

            .listpart ul li:before {
                content: "● ";
                color: dodgerblue;}
ul.listData {
    margin-top: 1em;
    color: red;
    display: flex;
    flex-flow: row wrap;}

    ul.listData > li {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 2.5rem;
        width:450px;
        margin-bottom:2rem;}
ul.listData figure{
   width:400px;
    height:280px;
    align-items:flex-start;
    position:relative;
    background-color:ghostwhite;}
    ul.listData figure video {
        position: absolute;
        max-height: 250px;
        bottom: 0;
        left: 0;}
ul.listpart figure.video {
    float: left;
    margin-left: 20px;
    width:43%;}