@use '../../utils' as *;

/*----------------------------------------*/
/*  3.1.3 banner style 3
/*----------------------------------------*/


.rs-banner {
    &-three {
        position: relative;
        z-index: 1;
        overflow-x: clip;
        .rs-banner-bg-thumb {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
            &::before {
                position: absolute;
                content: "";
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background: linear-gradient(176.07deg, rgba(0, 0, 0, 0) 14%, #000000 129.41%);
                z-index: -1;
            }
        }
        .rs-banner-wrapper {
            position: relative;
            z-index: 1;
            padding-top: 150px;
            padding-inline-start: 135px;
            padding-inline-end: 135px;
            padding-bottom: 150px;
            display: grid;
            grid-template-columns: 700px 415px;
            gap: 30px;
            justify-content: space-between;
            align-items: end;
            @media #{$laptop}{
                padding-inline-start: 0px;
                padding-inline-end: 0px;
                padding-bottom: 130px;
                padding-top: 130px;
            }
            @media #{$lg}{
                grid-template-columns: auto 415px;
                padding-bottom: 100px;
                padding-top: 100px;
            }
            @media #{$md}{
                grid-template-columns: auto;
                padding-bottom: 80px;
                padding-top: 80px;
            }
        }
        .rs-banner-subtitle {
            font-size: 17px;
            font-weight: 500;
            color: var(--rs-white);
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-top: 50px;
            margin-bottom: 15px;
            @media #{$md}{
                margin-top: 35px;
            }
            @media #{$mobile}{
                font-size: 16px;
                gap: 15px;
            }
            img{
                width: 24px;
            }
        }
        .rs-banner-title{
            color: var(--rs-white);
            line-height: 1.15;
            @media #{$mobile}{
                font-size: 35px;
            }
        }
        .rs-banner-btn {
	        margin-top: 40px;
        }
        .rs-notice-wrapper {
            background-color: var(--rs-theme-cyan);
            padding-top: 25px;
            padding-bottom: 30px;
            padding-inline-start: 35px;
            padding-inline-end: 35px;
            border-radius: 16px;
            @media #{$lg}{
                padding-inline-start: 30px;
                padding-inline-end: 30px;
            }
            .popup-circle {
                width: 8px;
                height: 8px;
                position: relative;
                &::before {
                    background: var(--rs-theme-yellow);
                }
                &::after {
                    background: var(--rs-theme-yellow);
                }
            }
            .rs-notice-sec-title {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                border-bottom: 1px solid var(--rs-border-tertiary);
                margin-bottom: 12px;
                padding-bottom: 10px;
                color: var(--rs-white);
            }
            .rs-notice-item {
                &:not(:last-child){
                    border-bottom: 1px solid var(--rs-border-tertiary);
                    padding-bottom: 15px;
                    margin-bottom: 15px;
                }
            }
            .rs-notice-title {
                font-size: 17px;
                margin-bottom: 10px;
                color: var(--rs-white);
                @media #{$xs}{
                    font-size: 15px;
                }
            }
            .rs-notice-content {
                display: flex;
                align-items: end;
                justify-content: space-between;
                gap: 20px;
            }
            .rs-notice-meta {
                display: flex;
                flex-direction: column;
                gap: 5px;
            }
            .rs-notice-date {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 14px;
                margin-bottom: 5px;
                color: rgba(255, 255, 255, 0.8);
                svg {
                    width: 14px;
                    height: 14px;
                    path{
                        fill: rgba(255, 255, 255, 0.8);
                    }
                }
            }
            .rs-notice-id {
                font-size: 13px;
                 color: rgba(255, 255, 255, 0.8);
            }
            .rs-notice-link {
                svg {
                    width: 20px;
                    height: 20px;
                    path{
                        transition: .3s;
                        fill: var(--rs-white);
                    }
                }
                a{
                    &:hover{
                        svg{
                            path{
                                fill: var(--rs-theme-light-cyan);
                            }
                        }
                    }
                }
            }
        }
        .rs-notice-btn{
            margin-top: 30px;
            .rs-btn{
                font-size: 22px;
                font-family: var(--rs-ff-title);
                gap: 10px;
                font-weight: 600;
                border-radius: 12px;
                background: var(--rs-theme-cyan);
                &:hover{
                    background: var(--rs-theme-light-cyan);
                    color: var(--rs-white);
                    svg{
                        path{
                            fill: var(--rs-white);
                        }
                    }
                }
                svg{
                    width: 28px;
                    height: 28px;
                    path{
                        fill: var(--rs-theme-light-cyan);
                    }
                }
            }
        }
    }
}