section {padding: 2rem;padding-top: 1rem;}
section .title {font-size: 2.2rem;font-weight: 800;padding-bottom: 2rem;}

.section1 {margin-top: 7rem;}
.section1 .random {position:relative;border-radius: 1rem;width: 100%;padding: 1.5rem 2rem;min-height: 13rem;background: url('../sub/menu1_today.png') no-repeat 100% /cover;}
.section1 .random a {display: flex; justify-content: space-between; align-items: start; flex-direction: column;height: calc(13rem - 3rem); width: 100%;}
.section1 .random .one_title {color: #fff;font-size: 2.2rem;font-weight: 500;margin-bottom: .5rem;height: 4.5rem;text-overflow: ellipsis;overflow: hidden;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.section1 .random p {color: #fff;font-size: 1.6rem;opacity: .8;}

.section2 {margin-bottom: 3rem;}
.section2 ul {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.section2 ul li {width: 49%; margin-bottom: .5rem;}
.section2 ul li a img {width: 100%;}
.section2 ul li:nth-child(1) a img {animation: fadeIn 0.3s;}
.section2 ul li:nth-child(2) a img {animation: fadeIn 0.6s;}
.section2 ul li:nth-child(3) a img {animation: fadeIn 0.9s;}
.section2 ul li:nth-child(4) a img {animation: fadeIn 1.1s;}
.section2 ul li:nth-child(5) a img {animation: fadeIn 1.5s;}
.section2 ul li:nth-child(6) a img {animation: fadeIn 1.8s;}
.section2 ul li:nth-child(7) a img {animation: fadeIn 2.1s;}
.section2 ul li:nth-child(8) a img {animation: fadeIn 2.4s;}
.section2 ul li a img:hover {filter: brightness(.7);}


/* @media(min-width:768px){
    .section2 ul li {width: 24%;}
} */


@keyframes fadeIn {
    from {
        transform: translateY(100%);
        opacity:0
    }
    
    to {
        transform: translateY( 0 );
        opacity:1
    }
}