.surrounding-info-box{
    width: 100%;
    display: block;
    margin-top: 30px;
    font-size: 0;
}
.surrounding-info{
    width: calc(50% - 20px);
    height: 400px;
    display: inline-block;
    vertical-align: top;
    margin-right: 40px;
    position: relative;
}
.surrounding-info:nth-child(2n){
    margin-right: 0;
}
.surrounding-info:nth-child(n + 3){
    margin-top: 40px;
}
.surrounding-info p {
    width: initial;
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    flex-direction: row;
    box-sizing: border-box;
    font-family: 'Noto Sans TC';
    font-size: 1.25rem;
    line-height: 30px;
    letter-spacing: 0.06em;
    background-color: #ffea00;
    color: #000;
    padding: 10px 20px;
}
.surrounding-info p>i{
    margin-right: 10px;
}



@media only screen and (max-width: 1200px){
    .news-all-box{
        width: 1000px;
    }
    .surrounding-info{
        height: calc((400 / 580) * (500px - 20px));
    }
}
@media only screen and (max-width: 1000px){
    .news-all-box{
        width: 750px;
    }
    .surrounding-info{
        height: calc((400 / 580) * (375px - 20px));
    }
}
@media only screen and (max-width: 768px){
    .news-all-box{
        width: 550px;
    }
    .surrounding-info{
        width: calc(50% - 10px);
        height: calc((400 / 580) * (275px - 10px));
        margin-right: 20px;
    }
    .surrounding-info:nth-child(n + 3) {
        margin-top: 20px;
    }
    .surrounding-info p{
        font-size: 0.875rem;
        padding: 5px 10px;
    }
}
@media only screen and (max-width: 550px){
    .news-all-box{
        width: 95%;
    }
    .surrounding-info{
        width: calc(50% - 5px);
        height: calc((400 / 580) * ((95vw / 2) - 5px));
        margin-right: 10px;
    }
    .surrounding-info:nth-child(n + 3) {
        margin-top: 10px;
    }
}
@media only screen and (max-width: 400px){
    .news-all-box{
        width: 95%;
    }
    .surrounding-info{
        width: 100%;
        height: calc((400 / 580) * 95vw);
        margin-right: 0;
    }
    .surrounding-info:nth-child(n + 2) {
        margin-top: 10px;
    }
}