.wrap{width: 100%; position: relative;}

/* section01 */
.sec01{width: 100%; }
.sec01img{ width: 100%; height: 460px;  background-image: url(/img/brand/brandsec01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.sec01Wrap{max-width: 1200px; margin: 0 auto;}
.sec01Wrap>h1{position: absolute; top: 400px; font-size: 80px; font-weight: 900;}


/* section02 */

.sec02{max-width: 1200px;  margin: 125px auto;}
.brandWrap{width: 100%; display: grid; grid-template-columns: 30.83% 30.83% 30.83%; grid-template-rows: 265px 265PX 265PX; column-gap: 3.755%; row-gap: 60px;}


.brandWrap li>a>p{font-size: 18px; margin-bottom: 10px;}
.rec{display: flex; align-items: center; justify-content: center;
    width: 100%; height: 230px; border: 1px solid #666; box-sizing: border-box; 
    position: relative;}

.rec>.hover{opacity: 0; box-sizing: border-box; width: 100%; height: 230px; position: absolute; background-color: #000;}
.hover span{font-size: 18px; margin-bottom: 10px; color: #fff; }
.hover p{font-size: 30px; color: #fff; letter-spacing: -1.5px;} 
.text{position: absolute; top: 30%; left: 0; padding: 0 30px;}

.brandWrap li img{height: 40px;}
.brandWrap li:is(:nth-last-of-type(1), :nth-last-of-type(2), :nth-last-of-type(3)) img {height: 80px;}

@media only screen and (min-width: 1245px) {
    .hover:hover{opacity: 1; transition-duration: 0.4s;}
}


/* mobile */
@media screen and (max-width: 1024px) {
    /* section01 */
    .sec01{width: 100%; }
    .sec01img{ width: 100%; height: 328px; ;
        background-repeat: no-repeat;
    }

    .sec01Wrap{padding: 0 15px; box-sizing: border-box;}
    .sec01Wrap>h1{position: absolute; top: 300px; font-size: 45px; font-weight: 900;}


    /* section02 */

    .sec02{padding: 0 15px; box-sizing: border-box; margin: 65px 0;}
    .brandWrap{width: 100%; display: grid; grid-template-columns: 48.48% 48.48%; grid-template-rows: 155px 155px 155px 155px 155px; column-gap: 10px; row-gap: 10px;}

    
    .brandWrap li p{font-size: 13px; margin-bottom: 10px;}
    .rec{display: flex; align-items: center; justify-content: center;
        width: 100%; height: 132px; border: 1px solid #666; box-sizing: border-box; position: relative;}

    .hover{display: none;}
    .brandWrap li img{height: 30px;}
.brandWrap li:is(:nth-last-of-type(1), :nth-last-of-type(2), :nth-last-of-type(3)) img {height: 60px;}


}