/*-----------------------------------------------
   go-more
-----------------------------------------------*/

.go-more{
    color: #fff;
    max-width: 200px;
    height: 50px;
    position: relative;
    width: 15%;
    margin: 5px 0 0 82%;
}
.go-more a{
    color: #fff;
    display: block;
    width: 100%;
    height: 100%;
    height: 50px;
    line-height: 43px;
    padding: 0 0 0 70px;
    letter-spacing: 0.1rem;
}


@media screen and (max-width:768px)
{
.go-more{

    margin: 0px 0 0 65%;
}
}



/*-----------------------------------------------
    point
-----------------------------------------------*/

.go-more .point{
    position: absolute;
    width: 5px;
    height: 5px;
        background: #cdcdcd;
        top: 40%;
        left: -8%;
        z-index: 10;
}





.go-more .point:before{
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 9px;
    height: 9px;
    border:#cdcdcd solid 1px;
    z-index: 10;
}
.go-more .point:after{
    content: '';
    position: absolute;
    top: 3px;
    left: 12px;
    width: 0px;
    height: 1px;
    background:#cdcdcd;
    z-index: 10;
        animation: point_ 5s ease-out .5s infinite both;

}


@keyframes point_ {

    0%{ width: 0;}

    15%,100%{width: 60px;}
}



/*-----------------------------------------------
    news
-----------------------------------------------*/
.sl-news{
    margin: 0% 0 -10% -10%;

    width: 100%;
    max-width: 610px;
}
.news-group {
    width: 50%;
    /*! max-width: 750px; */

    position: relative;
    /*! top: 10vh; */
    /*! left: 4%; */
    margin: 5% 0 0 4%;
    z-index: 10;
    /*! padding: 0 0 2% 0; */
}

@media screen and (min-width:1921px) {
.news-group {

    top: 20vh;

}
}


@media screen and (max-width:1800px)
{
.news-group {
    width: 60%;
    /*! max-width: 750px; */

    /*! top: 5%; */
    /*! left: 0%; */
    transform: scale(0.85) translate(-4%,4%);
    margin: 3% 0 0 4%;
}

}
@media screen and (max-width:1440px)
{
.news-group {
    width: 60%;

    /*! top: -5%; */
    /*! left: 0%; */
    transform: scale(0.8) translate(-6%,-6%);
    /*! margin: -1% 0 0 3%; */
}

}

@media screen and (max-width:1280px)
{
    .sl-news{
    margin: 0% 0 -13% -10%;

}
.news-group {
    width: 70%;

    /*! top: -25%; */
    /*! left: 0%; */
    transform: scale(0.7) translate(-18%,-25%);
    /*! margin: -15% 0 0 -4%; */
}

}

@media screen and (max-width:768px)
{
.news-group {
    width: 106%;

    transform: scale(0.85) translate3d(-5%,0,0);
    margin: 65% auto -20%;
    padding: 0;
}
.sl-news{
    margin: 0% 0 -20% -8%;

    width: 110%;
    max-width: 700px;
}
}
@media screen and (max-width:480px)
{
.news-group {
    width: 106%;

    transform: scale(0.85) translate3d(-5%,0,0);
    padding: 0;
    margin: 55% auto 0;
}
}



/*-----------------------------------------------
    tag
-----------------------------------------------*/
.news-group .news-tag{
    width: 100%;
    height: 70px;
    border-bottom: 2px solid #b40000;

    margin: 0 0 2% 0;
}

.news-group .news-tag ul{
    display: flex;
    height: 100%;
    width: 55%;
    margin: 0px 0 0 -0.03rem;
}

.news-group .news-tag ul li{
    color: #fff;
    margin: 0px 0 0 0;
    width: 20%;
    height: 100%;
    text-indent: -100%;
    overflow: hidden;
    cursor: pointer;


}
.news-group .news-tag ul li.tag01.active{
    background: url(../images/news/tag01-h.png) 0 100% / 400% no-repeat;

}
.news-group .news-tag ul li.tag02.active{
    background: url(../images/news/tag02-h.png) 33.2% 100% / 400% no-repeat;

}
.news-group .news-tag ul li.tag03.active{
    background: url(../images/news/tag03-h.png) 67% 100% / 400% no-repeat;

}
.news-group .news-tag ul li.tag04.active{
    background: url(../images/news/tag04-h.png) 100% 100% / 400% no-repeat;

}
.news-group .news-tag ul li.tag01{
    background: url(../images/news/tag01.png) 0 100% / 400% no-repeat;

}
.news-group .news-tag ul li.tag02{
    background: url(../images/news/tag02.png) 33.2% 100% / 400% no-repeat;

}
.news-group .news-tag ul li.tag03{
    background: url(../images/news/tag03.png) 67% 100% / 400% no-repeat;

}
.news-group .news-tag ul li.tag04{
    background: url(../images/news/tag04.png) 100% 100% / 400% no-repeat;

}


@media screen and (max-width:768px)
{
.news-group .news-tag ul{
    display: flex;
    height: 100%;
    width: 85%;
    margin: 0px 0 0 -0.03rem;
}

}



/*-----------------------------------------------
   list
-----------------------------------------------*/



.news-list ul li a {

    color: #979696;
    font-size: 1.05rem;

    height: 50px;
    line-height: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    padding: 0 2% 0 0;
    letter-spacing: 0.05rem;
    position: relative;
    z-index: 1;
}

.news-list ul li a span {
    letter-spacing: 0.1rem;
    margin: 0;

}

.news-list ul li a span.news-class {
    color: #b40000;
    font-size: 1.2rem;


    margin: 0 0% 0 0;
    letter-spacing: -0.1rem;
    width: 12%;
    display: inline-block;
}

.news-list ul li a span.news-class:before {
    content: '▎';
    color: #b40000;
    font-size: 1.2rem;
    margin: 0 -5px 0 10px;
}

.news-list ul li span.news-year {
    font-family: "Gabarito", sans-serif;
    font-weight: 600;
    transform: rotate(90deg) translate3d(4%, 0, 0);
    position: absolute;
    font-size: 0.6rem;
    /*! left: 12%; */
    width: 3%;
}

.news-list ul li span.news-day {
    font-family: "Gabarito", sans-serif;
    font-weight: 800;
    letter-spacing: -0.01rem;
    font-size: 1.5rem;
    /*! margin: 0 10px 0 12px; */
    /*! position: absolute; */
    left: 15%;
    display: inline-block;
    width: 11%;
    margin: 0 0 0 3%;
}


.red-bar {
    position: absolute;
    z-index: 0;
    left: 0;
    /*width: 0%;*/
    height: 100%;
    background: rgb(180, 0, 0);

    top: 0;
}

@keyframes scale-up-hor-left {
    0% {
        width: 0;
        transform: scale(2);
    }

    100% {
        width: 100%;
        transform: scale(1);
    }
}


/*active*/
.news-list ul li.active a {
    background: rgb(180, 0, 0);
    color: #fff;

}

.news-list ul li.active a span.news-class {
    color: #fff;
}

.news-list ul li.active a span.news-class:before {
    content: '▎';
    color: #fff;
    font-size: 1.2rem;
    margin: 0 -5px 0 10px;
}

.news-list ul li.active a span.news-day {
    color: #000;
}

.news-list ul li.active a span.news-year {
    color: #000;
}


.news-list ul li:hover .red-bar {

    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    /*transition: all .5s ease;*/
    animation: scale-up-hor-left .5s cubic-bezier(.250, .460, .450, .940) 0s both;


}

.news-list ul li:hover a {
    color: #fff;
}

.news-list ul li:hover a span.news-class {
    color: #fff;
}

.news-list ul li:hover a span.news-class:before {
    content: '▎';
    color: #fff;
    font-size: 1.2rem;
    margin: 0 -5px 0 10px;
}

.news-list ul li:hover a span.news-day {
    color: #000;
}

.news-list ul li:hover a span.news-year {
    color: #000;
}





@media screen and (max-width:1440px)
{
    .news-list ul li a span.news-class {
    font-size: 1rem;
    margin: 0 0% 0 0;
    width: 12%;
    display: inline-block;
}


.news-list ul li a span.news-class:before {
    content: '▎';
    color: #b40000;
    font-size: 0.9rem;
    margin: 0 -5px 0 0px;
}
.news-list ul li a {

    font-size: 1rem;

    height: 43px;
    line-height: 43px;

}
.news-list ul li span.news-day {

        /*left: 15%;*/
    font-size: 1.3rem;

        width: 15%;
}

.news-list ul li span.news-year {

    /*! left: 13%; */
    font-size: 0.55rem;
}

.news-list ul li.active a span.news-class:before,.news-list ul li:hover a span.news-class:before {
    content: '▎';
    font-size: 0.9rem;
    margin: 0 -5px 0 5px;
}
}


@media screen and (max-width:768px) {
    .news-list ul li a span.news-class {
        /*! margin: 0 24% 0 0; */
        width: 20%;
    }

    .news-list ul li span.news-year {
        width: 2%;
        transform: rotate(90deg) translate3d(-56%, 0, 0);
    }

    .news-list ul li span.news-day {
        /*left: 25%;*/
        font-size: 1.2rem;
        width: 18%;
    }

.news-list ul li.active a span.news-class:before {
    content: '▎';
    color: #fff;
    font-size: 0.9rem;
    margin: 0 -5px 0 3px;
}
.news-list ul li a {

    font-size: 1rem;

    height: 42px;
    line-height: 42px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    padding: 0 2% 0 0;
    letter-spacing: 0rem;
    position: relative;
    z-index: 1;
}

}