@charset "utf-8";

#news{
    padding:100px 0;
}

.news-content{
    max-width:1080px;
    width:90%;
    margin:0 auto;
}

@media screen and (max-width:930px){
    #news{
        padding:70px 0;
    }
}

@media screen and (max-width:930px){
    #news{
        padding:50px 0;
    }
}

.news-wrap{
    max-width:1080px;
    margin:0 auto;
}

.a-news-head{
    display:flex;
    align-items: center;
    padding-bottom:15px;
    border-bottom:1px solid #17DD9F;
}

.a-news-head-left{
    display:flex;
    align-items: center;
    gap:10px;
    width:200px;
}

.a-news-head-right{
    width:calc(100% - 200px);
}
.a-news-date{
    font-size:22px;
    color:#00BC95;
    font-family: 'Jost', sans-serif;
}

.a-news-cat{
    font-size:16px;
    background-color:#00BC95;
    color:#fff;
    line-height:1;
    padding:3px 10px; 
}

.a-news-title{
    font-size:22px;
    letter-spacing:0.06em;
}

@media screen and (max-width:930px){
    .a-news-head{
        display:block;
    }

    .a-news-head-right{
        width:100%;
        margin-top:5px;
    }
    .a-news-date{
        font-size:20px;
    }
    .a-news-title{
        font-size:20px;
    }
}

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

    .a-news-head{
        padding-bottom:10px;
    }

    .a-news-date{
        font-size:18px;
    }
    .a-news-title{
        font-size:18px;
    }

    .a-news-cat{
        font-size:14px;
        padding:2px 7px; 
    }
    
}


.a-news-content{
    padding:30px 0;
}

@media screen and (max-width:550px){
    .a-news-content{
        padding:20px 0;
    }  
}

.a-news-content-flex{
    display:flex;
    gap:3%;
    align-items: flex-start;;
}

.a-news-img{
    width:35%;
}

.a-news-right{
    width:62%;
}

@media screen and (max-width:930px){
    .a-news-content-flex{
        display:block;
    }
    
    .a-news-img{
        width:100%;
    }
    
    .a-news-right{
        width:100%;
        margin-top:20px;
    }
}

@media screen and (max-width:550px){
    .a-news-right{
        margin-top:10px;
    }
}


.a-news-intro{
    font-size:16px;
    line-height:2;
    text-align: justify;
}

.a-news-btn a{
    background-color:#00BC95;
    color:#fff;
    font-size:18px;
    padding:15px 20px;
    padding-right:70px;
    border-radius:100px;
    display:flex;
    align-items: center;
    width:fit-content;
    position:relative;
    transition:.5s;
    border:1px solid #00BC95;
    letter-spacing:0.1em;
}

.a-news-btn .btn-maru{
    display:block;
    font-size:10px;
    margin-right:15px;
    transition:.5s;
}

.a-news-btn a::after{
    content:"";
    width:25px;
    height:7px;
    background-image:url(../img/arrow-white.png);
    background-size: contain;
    background-repeat: no-repeat;
    position:absolute;
    right:20px;
    top:50%;
    transform: translateY(-50%);
}

.a-news-btn a:hover:after{
    background-image:url(../img/read-more-arrow.png);
}

.a-news-btn a:hover{
    background-color:#fff;
    color:#000;
}

.a-news-btn a:hover .btn-maru{
    color:#00BC95;
}

.a-news-btn{
    margin-top:30px;
}

.a-news + .a-news{
    margin-top:50px;
}

@media screen and (max-width:930px){
    .a-news-btn{
        scale:0.9;
        transform-origin: right top;
        display:block;
        margin-left:auto;
        width:fit-content;
       }

       .a-news + .a-news{
        margin-top:30px;
    }
}

@media screen and (max-width:550px){
    .a-news-intro{
        font-size:15px;
        line-height:1.8;
    }
    
   .a-news-btn{
    scale:0.8;
   }
    
    .a-news-btn{
        margin-top:20px;
    }

    .a-news + .a-news{
        margin-top:20px;
    }

}

.a-news-intro a{
    color:#000;
}

.news-page-nav{
    display:flex;
    gap:1%;
    align-items: center;
    justify-content: center;
    margin-top:70px;
}

.news-page-nav span,
.news-page-nav a{
    display:block;
    font-size:11px;
    font-family: 'Jost', sans-serif;
    letter-spacing:0.06em;
    width:40px;
    height:40px;
    line-height:40px;
    border:1px solid #00BC95;
    text-align: center;
    border-radius:50%;
    color:#00BC95;
    transition:.5s;
}

.news-page-nav span.current{
    background-color:#00BC95;
    color:#fff;
}

.news-page-nav a:hover{
    background-color:#00BC95;
    color:#fff;
}

@media screen and (max-width:930px){
    .news-page-nav{
        margin-top:50px;
    }
}

@media screen and (max-width:550px){
    .news-page-nav{
        margin-top:30px;
        gap:2%;
    }

    .news-page-nav span,
.news-page-nav a{
    font-size:10px;
    width:35px;
    height:35px;
    line-height:35px;
}
}