.word{
    font-size:0.9rem;
    height: 3rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 8% 0;
}

.more-news a{
    color: #fff;

    letter-spacing: 0.1rem;
    /*! border: 1px solid #fff; */
    padding: 2px 23px;
    border-radius: 30px;
    font-size: 0.9rem;
    background: rgb(249, 47, 88);
}
@media screen and (max-width:1600px)
{

.word{
    font-size:0.9rem;
    line-height: 1.5rem;
    margin: 0 0 10% 0;
}
}
@media screen and (max-width:1440px)
{

.word{
    font-size:0.7rem;
    line-height: 1.1rem;
    height: 2.4rem;
}
}
@media screen and (max-width:1280px)
{

.word{
    font-size:0.65rem;
    line-height: 1rem;
    height: 2.1rem;
}
}
@media screen and (max-width:768px)
{

.word{
    font-size:0.8rem;
    line-height: 1.1rem;
    height: 2.2rem;
    letter-spacing: 0.01rem;
}
.more-news a{
    color: #fff;

    letter-spacing: 0.1rem;
    border: 1px solid #fff;
    padding: 4px 23px;
    border-radius: 30px;
    font-size: 0.9rem;
}
}
/*-----------------------------------------------
    news
-----------------------------------------------*/
.news {
    padding: 0 0 61% 0;
    background: url(../images/news/bg.jpg) center 0 /100% no-repeat;
}

.news-pos{
    position: absolute;
    width: 50px;
    height: 50px;
        /*! background: rgba(203, 152, 152, 0.6); */
        z-index: 100;
        top: 14%;
        left: 0;

}

.news-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: url(../images/news/news-frame.png) center 0 /100% no-repeat;

    top: 0;
    left: 0;
    z-index: 14;
    pointer-events: none;
}

@media screen and (max-width:768px)
{
.news {
    padding: 0 0 221% 0;
    background: url(../images/news/bg-m.jpg) center 0 /100% no-repeat;
}
.news-frame {

    background: url(../images/news/news-frame-m.png) center 0 /100% no-repeat;


}
}


/*-----------------------------------------------
    list
-----------------------------------------------*/
.date{
    position: absolute;
    right: 20px;
    top: 11px;

    color: #827a88;
    font-size:0.7rem;

    font-weight: 500;
    letter-spacing: 0.05rem;
}

.news-class{
    font-size:0.85rem;
    position: relative;

    color: rgb(249, 47, 88);
    width: 47px;
    height: 21px;
    display: block;
    margin: 2% 0 5%;
    font-weight: 500;
    letter-spacing: 0.05rem;
}
.news-class:before{
    content: '';
    font-size:1rem;
    position: absolute;
    width: 35%;
    height: 3px;
    bottom: -3px;
    left: 0;
        background: rgb(249, 47, 88);


}

.news-more{
    width: 30%;
    height: 1.1rem;
        background: rgb(249, 47, 88);
        color: #fff;
        padding: 0 10px;

    display: block;
    text-align: center;
    min-width: 60px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.1rem;
    margin: 0 0 0 65%;
    letter-spacing: 0.05rem;
}


@media screen and (max-width:1600px)
{
.date{

    transform: scale(0.7) translate(27%,-43%);
}
.news-more{
    /*width: 30%;
    height: 1.2rem;
        padding: 0 10px;

    display: block;
    text-align: center;
    min-width: 60px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2rem;
    margin: 0 0 0 65%;*/
    transform: scale(0.85) translate(0%,-87%);
}
.news-class:before{
    content: '';

    bottom: -1px;}


.news-class{
    font-size:0.7rem;

    width: 47px;
    height: 21px;
    display: block;
    margin: 2% 0 5%;
    font-weight: 500;
    letter-spacing: 0.05rem;
}
}
@media screen and (max-width:1440px)
{
.date{

    transform: scale(0.7) translate(27%,0%);
}
.news-more{
    /*! width: 32%; */
    /*! height: 1rem; */
        /*! padding: 0px 5px; */

    /*! min-width: 40px; */
    /*! font-size: 0.5rem; */
    /*! line-height: 1rem; */
    /*! margin: 0 0 0 63%; */
    transform: scale(0.65) translate(0%,-130%);
}
}

@media screen and (max-width:1280px)
{
.news-more{

    margin: 0 0 0 63%;
}
.news-class{
    font-size:0.6rem;

    width: 47px;
    height: 18px;
    display: block;
    margin: 0% 0 4%;
    font-weight: 500;
    letter-spacing: 0.05rem;
}
}

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

    transform: scale(0.7) translate(27%,100%);
}
}
/*-----------------------------------------------
    title
-----------------------------------------------*/
.news-title{
    top:50%;
    position: absolute;
    width: 70%;
}



.df-width-news {
    height: 100%;
    max-width: 1200px;
    /*! overflow: hidden; */
    /*background: #c93d3d63;*/
    margin: 0 0 0 19%;
    width: 60%;
    position: absolute;
}
@media screen and (max-width:1600px)
{

}


@media screen and (max-width:768px)
{
.df-width-news
{
    position: relative;
    margin: auto;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
    max-width: 768px; }


.news-title{
    top:84vw;
    position: absolute;
    width: 80%;
    min-height: 39px;
    z-index: 20;
    left: 5%;
}

}




/*-----------------------------------------------
    tag
-----------------------------------------------*/
.tag{
    position: absolute;
    /*! width: 25%; */
    /*! height: 30px; */
    left: 95%;
    top: 75%;
    z-index: 10;
    min-width: 100px;
}

.tag ul{
    display: flex;
}

.tag ul li{
    cursor: pointer;
    border-radius: 16px;
    /*! border:1px solid #fff; */
        /*! background: rgb(42, 154, 239); */

    flex: 1;
    margin: 1%;
    text-align: center;
    color: #fff;
    font-weight: 500;
    line-height: 2;
    min-width: 75px;
    font-size: 0.8rem;
    background: rgba(32, 31, 33, 0.7);
}

@media screen and (max-width:1440px)
{
.tag{
    transform:scale(0.9);
}
}

@media screen and (max-width:768px)
{
.tag{
    transform:scale(0.8);
    top: 92%;
    left: -8%;
}
}

/*-----------------------------------------------
   list
-----------------------------------------------*/
.list{
    width: 130%;
    height: 19%;
    position: absolute;
    top: 72%;
}
.list ul{
    display: flex;
}
.list ul li{
    flex:1;
    background: url(../images/news/list-bg.png) center top / 100% no-repeat ;

    padding: 1.5% 2% 2% 2%;
    transition: all .5s ease;
    max-width: 260px;
}



.list ul li.news01{
    margin: 25px 0 0 0;
}

.list ul li.news02{
    margin: 25px 0 0 0;
}
.list ul li.news03{
    margin: -4px 0 0 0;
}
.list ul li.news04{
    margin: 4px 0 0 0;
}
.list ul li.news05{
    margin: 15px 0 0 0;
}
.list ul li:hover{
     margin: -20px 0 0 0;
     transition: all .3s ease;
}
@keyframes slideDown
{
0%{opacity:0;transform:translateY(150px);}
100%{opacity:1;transform:translateY(0);}
}


.slideDown1{animation:slideDown .8s ease-out 0s 1 both;}
.slideDown2{animation:slideDown .8s ease-out 0.2s 1 both;}
.slideDown3{animation:slideDown .8s ease-out 0.3s 1 both;}
.slideDown4{animation:slideDown .8s ease-out 0.4s 1 both;}
.slideDown5{animation:slideDown .8s ease-out 0.5s 1 both;}

@media screen and (max-width:1600px)
{
    .list{
        width: 130%;
        height: 21%;
        top: 71%;
    }

}

@media screen and (max-width:1280px)
{
    .list{
        height: 21%;
        top: 74%;
    }
    .list ul li{

        max-width: 190px;
    }
}


@media screen and (max-width:768px)
{
.list{
    height: 21vw;
    top: 118vw;
    width: 126%;
}
.list ul{
    flex-wrap: wrap;
}

.list ul li{
    flex:initial;
    width: 36%;

    padding: 3% 3% 0 3%;
    min-height: 28vw;
}

.list ul li a
{
    height: 76%;

}

.list ul li.news01{
    margin: 13px 0 0 0;
}

.list ul li.news02{
    margin: 25px 0 0 0;
}
.list ul li.news03{
    margin: -13px 0 0 13px;
}
.list ul li.news04{
    margin: 9px 0 0 3px;
}
.list ul li.news05{
    margin: -26px 0 0 9px;
}
}

/*-----------------------------------------------
    point
-----------------------------------------------*/
.point{
    position: absolute;
    left: 114%;
    top: 9px;
    width: 100%;
    height: 200px;
        /*! background: rgba(203, 152, 152, 0.6); */
    pointer-events: none;
}
.point span{
    position: absolute;
    width: 7px;
    height: 7px;
        background: #fff;
        border-radius: 50%;
}

.point span:before{
    content: '';
    position: absolute;
    width: 75px;
    height: 1px;
    background: #ffffffde;
    top: 3px;
    left: 15px;
}
.point span:after{
    content: '';
    position: absolute;
    width: 72px;
    height: 1px;
    background: #fffffff2;
    top: 28px;
    left: 80px;
    transform: rotate(44deg);
}

@media screen and (max-width:1800px)
{
.point{

    transform: scale(0.8) translate(-8%,-12%);
}

}
/*-----------------------------------------------
    pagination
-----------------------------------------------*/
.cms_pagination .ripple-b{

    top: -62%;
    left: -14%;
}

.cms_pagination:before{
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    top: 32%;
    left: -5%;
        background: #fff;
        border-radius: 50%;

}
.cms_pagination {
    color: #fff;
     width: 20%;
    max-width: 300px;
    position: relative;
}



.cms_pagination select {
    display: initial;
    font-size: 0.8rem;
    margin: 0 5px;
        border-radius: 7px;
    font-size: 14px;
    padding: 1px 6px;

    border: none;
    background: #fff;
    color: #000;
    min-width: 20px;
    max-width: 84px;
    height: 22px;
    width: 50px;
    border-radius: 11px;
    padding: 0 10px;
    line-height: 22px;
}


@media screen and (max-width:1440px)
{
.cms_pagination {

    transform: scale(0.8) translate(0%,-50%);
}

}

@media screen and (max-width:768px)
{
.cms_pagination {
    color: #000;
     width: 25%;
    max-width: 300px;
    position: absolute;
    right: 25%;
    top: 73VW;
}
.cms_pagination select {

    background: #000;
    color: #fff;

}

}




/*-----------------------------------------------
    ripple
-----------------------------------------------*/

.ripple,
.ripple-r,
.ripple-b {
    pointer-events: none;
    width: 50px;
    height: 50px;
    background: transparent;
    border-radius: 50%;
    position: absolute;
    right: -22px;
    top: -18px;
    border: 1px solid #fff;
    animation: ripple 2.5s ease-out 0s infinite both;
}

.ripple-r {
    animation: ripple 2.5s ease-out 0.1s infinite both;
}

.ripple-b {
    animation: ripple 2.5s ease-out 0.4s infinite both;
}

.ripple-r {
    right: initial;
    left: -10px;
    animation: ripple 2.2s ease-out 0.2s infinite both;
}

.ripple-b {
    right: initial;
    left: -20px;
    animation: ripple 2.2s ease-out 0.2s infinite both;
    top: -23px;
}

.ripple:before,
.ripple-r:before,
.ripple-b :before {
    content: '';
    width: 50px;
    height: 50px;
    background: transparent;
    border-radius: 50%;
    position: absolute;
    right: 0px;
    top: 0px;
    border: 1px solid #000;
    animation: ripple2 5.5s ease-out 0.3s infinite both;
}


.ripple-r:before,
.ripple-b :before {
    content: '';

    animation: ripple2 4s ease-out 0.4s infinite both;
}

@keyframes ripple {

    0% {
        opacity: 1;
        transform: scale(0);
    }

    60%,
    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}

@keyframes ripple2 {

    0% {
        opacity: 1;
        transform: scale(0);
    }

    60%,
    100% {
        opacity: 0;
        transform: scale(2);
    }
}


@keyframes ripple_m {

    0% {
        opacity: 1;
        transform: scale(0);
    }

    60%,
    100% {
        opacity: 0;
        transform: scale(1.1);
    }
}

@keyframes ripple_m2 {

    0% {
        opacity: 1;
        transform: scale(0);
    }

    60%,
    100% {
        opacity: 0;
        transform: scale(1.4);
    }
}




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

    .ripple,
    .ripple-r,
    .ripple-b {
        width: 30px;
        height: 30px;
        right: -13px;
        top: -13px;
        animation: ripple_m 2.5s ease-out 0s infinite both;
    }

    .ripple-r {
        right: initial;
        left: -10px;
        animation: ripple_m 2.2s ease-out 0.2s infinite both;
    }

    .ripple-b {
          right: initial;
        left: -10px;
        animation: ripple_m 2.2s ease-out 0.2s infinite both;
        top: -12px;
        bottom: initial;
        z-index: 30;
    }


.cms_pagination.cms_pagination:before{
    content: '';
    top: 34%;
    left: -13%;
        background: #fff;

}
    .cms_pagination .ripple-b{

    border:1px solid #fff;
    top: -26%;
    left: -25%;
}

    .ripple:before,
    .ripple-r:before,
    .ripple-b :before {
        content: '';
        width: 30px;
        height: 30px;
        animation: ripple_m2 3s ease-out 0.3s infinite both;
    }
}