@charset "UTF-8";

section#hero-image {
    padding: 0 10px;
    position: relative;

    .wrap_image {
        border-radius: 25px;
        overflow: hidden;
        aspect-ratio: 16 / 6.5;
        height: auto;
        max-height: 900px;

        img {
            aspect-ratio: 16 / 6.5;
            height: auto;
            max-height: 900px;
            object-fit: cover;
        }
    }

    #hero-info {
        position: absolute;
        bottom: 0;
        background: #fff;
        right: 0;
        padding: 20px 15px;
        border-radius: 25px 0 0 0;

        .wrap__top_info {
            display: initial;
            display: initial;
            display: initial;
            -webkit-box-align: initial;
            -ms-flex-align: initial;
            align-items: initial;
            position: relative;
            display: grid;
            grid-template-columns: 100px 325px;
            column-gap: 15px;
            transition: color .35s;

            &:hover {
                text-decoration: none;
                color: var(--main-color1);

                & h3.h3__top_info {
                    color: var(--main-color1);
                }

                & img {
                    opacity: .85;
                }
            }

            .wrap_top_info_image {
                border-radius: 9px;
                overflow: hidden;
                transition: opacity .35s;
            }

            .new__top_info {
                position: absolute;
                background: var(--main-color1-l1);
                color: var(--main-color1);
                padding: 4px 20px;
                border-radius: 99px;
                font-size: 12px;
                font-weight: 400;
                min-width: 26px;
                line-height: 1;
                top: -30px;
                left: 10px;
                letter-spacing: 0.5px;
            }


            .wrap_text {
                display: grid;
                gap: 7px;
                align-content: center;

                .wrap_date {
                    display: flex;
                    align-items: center;
                    color: var(--gray2);
                }

                time {
                    margin-left: 0;
                    font-size: 12px;
                }

                .ccd__top_info {
                    background: none;
                    padding: 0;
                    font-size: 11px;
                    font-weight: 600;
                    border-radius: 3px;
                    color: var(--gold);
                    margin-left: 15px;
                    margin-right: initial;
                }

                h3.h3__top_info {
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    text-overflow: ellipsis;
                    white-space: initial;
                    transition: color .35s;
                }
            }
        }
    }
}

@media screen and (max-width:1399px) {
    section#hero-image {
        & .wrap_image {
            aspect-ratio: 16 / 7.5;

            img {
                aspect-ratio: 16 / 7.5;
            }
        }
    }
}

@media screen and (max-width:1199px) {
    section#hero-image {
        & #hero-info {
            .wrap__top_info {
                grid-template-columns: 85px 300px;
            }
        }
    }
}

@media screen and (max-width:959px) {
    section#hero-image {
        & .wrap_image {
            aspect-ratio: 16 / 9;

            img {
                aspect-ratio: 16 / 9;
            }
        }
    }
}

@media screen and (max-width:767px) {
    section#hero-image {
        & .wrap_image {
            aspect-ratio: 4 / 3;
            border-radius: 20px;

            img {
                aspect-ratio: 4 / 3;
            }
        }


        & #hero-info {
            padding: 15px 15px;
            border-radius: 20px 0 0 0;

            & .wrap__top_info {
                grid-template-columns: 85px 275px;

                .new__top_info {
                    padding: 4px 15px;
                    font-size: 11px;
                    top: -25px;
                    left: 5px;
                }

                & .wrap_text {
                    h3.h3__top_info {
                        margin: 0;
                        font-size: 12px;
                        margin-left: 0;
                        line-height: 1;
                    }
                }
            }

        }
    }
}

@media screen and (max-width: 480px) {
    section#hero-image {
        & .wrap_image {
            aspect-ratio: 4 / 5;

            img {
                aspect-ratio: 4 / 5;
            }
        }

        & #hero-info {
            width: 85vw;

            & .wrap__top_info {
                grid-template-columns: 1fr 4fr;
            }
        }
    }
}