@import "reset.css";

@import "fonts.css";



header {

    background: #fff;

    box-shadow: 0px 6px 10px 0 rgba(20, 20, 19, 0.06);

    padding: 7px 0;

}

/*.header {

    background: #fff;

    box-shadow: 0px 6px 10px 0 rgba(20, 20, 19, 0.06);

    padding: 7px 0;

}*/

.header-left {

    display: flex;

    align-items: center;
}

.logo {

    flex: 0 0 75px;

    -webkit-flex: 0 0 75px;

    max-width: 75px;

    margin-right: 50px;

}

.search {

    background-color: #f1f1f1;

    display: flex;

    align-items: center;

    width: 100%;

}

.search input,
.search button {

    background: transparent;

    border: none;

    height: 50px;

}

.search input {

    border-radius: 0 3px 3px 0;

    width: 100%;

    padding-right: 15px;

}

.search button {

    background: url("../images/icon-search.png") no-repeat center center;

    border-radius: 3px 0 0 3px;

    flex: 0 0 60px;

    max-width: 60px;

    font-size: 24px;

}

.header-nav {

    position: relative;

    padding-right: 80px;

    overflow: hidden;

}

.header-nav,
.main-nav {

    height: 100%;

}

.main-nav {

    /*position: relative;*/

}

.main-nav {

    display: flex;

    align-items: center;

}

.main-nav>li {

    margin-right: 30px;

}

.main-nav li a {

    color: #212121;

    font-size: 17px;

    font-weight: 600;

}



.main-nav>li>a.active {

    color: #853738;

}



.main-nav li a:hover {

    color: #853738;

}



.main-nav .subs-menu>ul>li>a.active {

    color: #853738;

}

.main-nav>li a {

    white-space: nowrap;

}

.subs-menu {

    background: #f1f1f1;

    border-radius: 50%;

    cursor: pointer;

    position: absolute;

    z-index: 2;

    bottom: 13px;

    right: 0;

    padding: 0 10px;

    height: 50px;

    width: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.subs-menu>span {

    cursor: pointer;

    position: relative;

    display: inline-block;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #9e9e9e;

    border: 0;

    padding: 0;

}

.subs-menu>span:before,
.subs-menu>span:after {

    position: absolute;

    content: '';

    display: block;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #9e9e9e;

}

.subs-menu>span:before {

    top: -10px;

}

.subs-menu>span:after {

    bottom: -10px;

}

.subsContent {

    box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.2);

    display: none;

    list-style: none;

    width: 240px;

    position: absolute;

    z-index: 99;

    right: 0;

    top: calc(100% + 20px);

}

.subsContent a {

    text-decoration: none;

    display: block;

    float: none;

    border-top: solid 1px #eee;

    text-align: right;

    box-shadow: none;

    padding: 10px 15px;

    background: #fff;

    color: #232B35;

    font-size: 14px;

}

.subsContent.show {
    display: block
}

.banner {

    margin-top: 30px;

}

.card-columns {

    webkit-column-count: 6;

    -moz-column-count: 6;

    column-count: 6;

    -webkit-column-gap: 20px;

    -moz-column-gap: 20px;

    column-gap: 20px;

    orphans: 1;

    widows: 1;

}

.card {

    background: transparent;

    border: none;

    border-radius: 0;

    display: block;

    margin-bottom: 17px !important;

}

.card-image {

    margin-bottom: 10px;

}

.card-image a {

    display: block;

}

.card-image a img {

    border-radius: 15px;

    width: 100%;

}

.card h4 {

    line-height: 1;

    margin-bottom: 0;

}

.card h4 a {

    font-size: 15px;

    font-weight: bold;

    line-height: 1.5;

}

.icon-play {

    background: #873a3b;

    border-radius: 50%;

    color: #fff;

    height: 32px;

    width: 32px;

    position: absolute;

    left: 15px;

    bottom: 15px;

    z-index: 2;

    pointer-events: none;

}

.gallery {

    padding: 30px 0;

}

.title-box {

    padding: 30px 0;

}

.title {
    margin-bottom: 20px
}

.list-link li a {

    color: #999999;

    font-size: 18px;

    padding: 0;

}

.list-link li a.active {

    color: #333;

}

.list-link li {

    padding-right: 50px;

    position: relative;

}

.list-link li:after {

    content: url("../images/rectag.png");

    position: absolute;

    right: 20px;

    top: 0;

}

.list-link li:last-child:after {
    display: none
}

.detail {

    background: #f1f1f1;

    padding: 60px 0 0;

}

.detail-box {

    background: #fff;

    border-radius: 10px;

    margin-bottom: 60px;

    padding: 30px;



}

.detail-content {

    margin-top: 20px;

}

.title-md {

    font-size: 24px;

}

.time {

    color: #999999;

    margin-top: 5px;

}

.time i {

    margin-right: 10px;

}

.desc {

    font-size: 16px;

    line-height: 1.5;

    margin: 20px 0;

}

.short-desc {

    font-style: italic;

    font-size: 16px;

    font-weight: 500;

}

.detail-article p {

    font-size: 16px;

    line-height: 1.5;

    margin-bottom: 20px;

}

.mgt-0 {
    margin-top: 0 !important;
}

.single-item {
    margin-bottom: 0
}

.action-mb {
    display: none
}

@media screen and (min-width: 1900px) {

    .card-columns {

        webkit-column-count: 7;

        -moz-column-count: 7;

        column-count: 7;

    }

}

@media (min-width: 768px) and (max-width: 1300px) {

    .card-columns {

        webkit-column-count: 4;

        -moz-column-count: 4;

        column-count: 4;

    }

}

@media screen and (min-width: 768px) {

    .main-nav-mb {
        display: none
    }

}

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

    .card-columns {

        webkit-column-count: 2;

        -moz-column-count: 2;

        column-count: 2;

    }

    .container {
        padding: 0 15px
    }

    .header {
        position: relative
    }

    .header-left .logo img {

        height: 60px;

    }

    .header .col-md-7 {
        position: static
    }

    .search {

        display: none;

        box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.2);

        position: absolute;

        top: 76px;

        left: 0;

        right: 0;

        z-index: 2;

    }

    .search.show {
        display: flex
    }

    .action-mb {

        display: flex;

        align-items: center;

        justify-content: flex-end;

        width: 100%;

    }

    .show-menu-mb {

        background: #f1f1f1;

        border-radius: 50%;

        cursor: pointer;

        padding: 0 10px;

        height: 40px;

        width: 40px;

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .show-menu-mb>span {

        cursor: pointer;

        position: relative;

        display: inline-block;

        width: 4px;

        height: 4px;

        border-radius: 50%;

        background: #9e9e9e;

        border: 0;

        padding: 0;

    }

    .show-menu-mb>span:before,
    .show-menu-mb>span:after {

        position: absolute;

        content: '';

        display: block;

        width: 4px;

        height: 4px;

        border-radius: 50%;

        background: #9e9e9e;

    }

    .show-menu-mb>span:before {

        top: -8px;

    }

    .show-menu-mb>span:after {

        bottom: -8px;

    }

    .show-search {

        background: #f1f1f1;

        border: none;

        border-radius: 50%;

        font-size: 16px;

        height: 40px;

        width: 40px;

        margin-right: 20px;

    }

    .main-nav-mb {

        display: none;

        position: absolute;

        top: 69px;

        left: 0;

        right: 0;

        z-index: 3;

        text-align: right;

    }

    .main-nav-mb li a {

        background: #8b4041;

        border-bottom: 1px solid #fff;

        color: #fff;

        font-size: 16px;

        display: block;

        padding: 10px 15px;

    }

    .main-nav-mb li:last-child a {
        border: none
    }

    .title {
        font-size: 24px
    }

    .list-link li {
        padding-right: 20px
    }

    .list-link li:after {
        right: 6px
    }

    .detail {
        padding: 30px 0 0
    }

    .video-view iframe {
        height: auto
    }

    .detail-box {
        padding: 10px
    }

    .detail-imageBox {
        margin-bottom: 20px
    }

}



.box-comment {

    margin: 0 -8px;

}

.box-comment iframe {

    width: 100% !important;

}



.detail-content .content-list li {

    position: relative;

    padding-left: 15px;

}

.detail-content .content-list li:before {

    content: '';

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background-color: #333333;

    display: block;

    position: absolute;

    top: 8px;

    left: 0;

}







/*customs css*/

img {
    max-width: 100%;
}

.main-nav {
    flex-wrap: wrap;
}


@media (max-width: 1199.98px) {}

@media (max-width: 991.98px) {}

@media (max-width: 767.98px) {}

@media (max-width: 575.98px) {}