main {
    position: relative;
    display: flex;
    margin-top: 75px;

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

.hero {
    height: 450px;
    position: relative;
    z-index: 1;

    & img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

.intro {
    width: 100%;
    height: fit-content;

    .intro_content {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;

        & img {
            grid-column: 1/2;
            grid-row: 1/3;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
        }

        .intro_brief {
            grid-column: 2/3;
            grid-row: 1/3;
            padding: 2rem .5rem 1rem .5rem;

            display: flex;
            flex-direction: column;
            justify-content: center;
            /* border: 1px solid red; */

            & hr {
                display: none;
                padding: 0;
                width: 175px;
                height: 1px;
                border: 1px solid rgb(255, 111, 0);
                background-color: rgb(255, 111, 0);
            }

            & h2 {
                color: #111;
                font-size: clamp(1.1rem, 3vw, 1.6rem);
            }

            & p {
                margin: 0;
                font-size: clamp(1rem, 3vw, 1rem);
                /* border: 1px solid red; */
            }

            & ul {
                display: none;
                list-style: none;
            }
        }
    }
}

.sim-cont {
    padding: 3rem 0 3rem 0;

    .sim {
        .lgView {
            display: none;
        }
        #sim-shirt {
            width: fit-content;
            list-style: none;
            display: flex;
            margin: 0 auto;

            & li img {
                height: 175px;
                width: 80%;
            }
        }
        #sim-short {
            width: fit-content;
            list-style: none;
            display: flex;
            margin: 0 auto;

            & li img {
                height: 225px;
                width: 80%;
            }
        }
    }
}

.banner-shoe {
    background-color: #e1d169;
    .banner-shoe_cont {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    .banner-shoe_cont img {
        grid-column: 1/2;
        width: 100%;
        height: 350px;
    }

    .banner-shoe_cont .shoe_cont-slogan {
        height: fit-content;

        & h2, & p {
            color: white;
            font-size: clamp(1rem, 3vw, 1rem);
        }

        & h2 {
            font-size: clamp(1.1rem, 3vw, 1.6rem);
        }

        & hr {
            display: none;
            padding: 0;
            width: 175px;
            height: 1px;
            border: 1px solid rgb(0, 0, 0);
            background-color: rgb(0, 0, 0);
        }
    }
}

@media(min-width: 425px){

    .intro {
        .intro_content {
            .intro_brief {
                & hr {
                    display: block;
                }
            }
        }
    }

    .sim-cont {
        padding: 3rem 0 3rem 0;

        .sim {
            .lgView {
                display: block;
            }
        }
    }

    .banner-shoe {
        .banner-shoe_cont .shoe_cont-slogan {
            & hr {
                display: block;
            }
        }
    }
}

@media(min-width: 768px){

    .intro {
        .intro_content {
            .intro_brief {
                & ul {
                    width: 100%;
                    display: flex;
                    gap: 20px;
                    padding: 1rem 0 0 0;

                    & li img {
                        width: 65px;
                    }
                }
            }
        }
    }

    .sim-cont {
        padding: 3rem 0 3rem 0;

        .sim {
            width: 90%;
            margin: 0 auto;

            #sim-shirt {
                width: fit-content;
                list-style: none;
                display: flex;
                padding: 0;
                margin: 0 auto;

                & li img {
                    height: 200px;
                    width: 90%;
                }
            }
            #sim-short {
                width: fit-content;
                list-style: none;
                display: flex;
                padding: 0;
                margin: 0 auto;

                & li img {
                    height: 325px;
                    width: 90%;
                }
            }
        }
    }

    .banner-shoe {
        .banner-shoe_cont {
            width: 95%;
        }

        .banner-shoe_cont .shoe_cont-slogan {
            height: fit-content;

            & p {
                font-size: clamp(1rem, 3vw, 1.2rem);
            }
        }
    }
}

@media(min-width: 1024px){
    .hero {
        height: clamp(25.625rem, -6.606rem + 45vw, 45rem);
    }

    .intro {
        .intro_content {
            .intro_content_img {
                height: clamp(550px, 35vw, 750px);
            }
        }
    }

    .sim-cont {
        padding: 3rem 0 3rem 0;

        .sim {
            #sim-shirt {
                & li img {
                    height: 220px;
                }
            }
            #sim-short {
                & li img {
                    height: 355px;
                }
            }
        }
    }
}

@media(min-width: 1440px){
    .hero {
        height: clamp(30.625rem, -4.606rem + 45vw, 55rem);
    }

    .intro {
        .intro_content {
            grid-template-rows: 300px auto;
            width: 95%;

            .intro_brief {
                /* border: 1px solid red; */
                padding: 5rem 2rem 5rem 2rem;

                & h2 {
                    color:  black;
                    font-size: 2.4rem;
                }

                & p {
                    padding: 0;
                    font-size: 1.2rem;
                    /* border: 1px solid red; */
                }
            }
        }
    }

    .sim-cont {
        padding: 5rem 0 5rem 0;

        .sim {
            #sim-shirt {
                gap:2rem;
                & li img {
                    height: 250px;
                    width: 200px;
                }
            }
            #sim-short {
                gap:2rem;

                & li img {
                    height: 355px;
                    width: 200px;
                }
            }
        }
    }

    .banner-shoe {
        .banner-shoe_cont {
            width: 95%;
        }

        .banner-shoe_cont .shoe_cont-slogan {
            height: fit-content;

            & h2 {
                font-size: 2.4rem;
            }

            & p {
                font-size: 1.2rem;
            }
        }
    }
}