// Hero Banner 1
.hero_banner_1{
    height: 970px;
    background:url('../media/hero/1/bg-img.png');
    background-size: cover;
    margin-top: -100px;
    @include media-query(767px) {
        height: 800px;
    }
    @include media-query(492px) {
        height: 700px;
    }
    
    .content{
        padding-top: 220px;
        @include media-query(767px) {
            padding-top: 170px;

        }
        .narrow-letter{
            margin-left: 45px;
            @include media-query(492px) {
                margin-left: 25px;
            }
            @include media-query(380px) {
                margin-left: 12px;
            }
            span{
                color: $white-1;
                font-weight: 700;
                font-size: 181px;
                margin-left: -45px;
                line-height: 110%;
                text-shadow: $text-shadow;
                @include media-query(767px) {
                    font-size: 150px;
                    margin-left: -35px;
                }
                @include media-query(492px) {
                    font-size: 120px;
                    margin-left: -25px;
                }
                @include media-query(380px) {
                    font-size: 100px;
                    margin-left: -20px;
                }
            }
        }
        p{
            br{
                @include media-query(492px) {
                    display: none;
                }
            }
        }
    }
}

// Hero Banner 2
.hero_banner_2{
    height: 1018px;
    background:url('../media/hero/2/banner-bg.png') no-repeat;
    background-size: cover;
    margin-top: -100px;
    @include media-query(992px) {
        height: 800px;
    }
    @include media-query(767px) {
        height: 700px;
    }
    @include media-query(492px) {
        height: 700px;
    }
    
    .content{
        z-index: 2;
        padding-top: 263px;
        @include media-query(767px) {
            padding-top: 170px;
        }
        .hero-title{
            position: relative;
            padding-left: 96.7px;
            @include media-query(767px) {
                padding-left: 60.7px;
            }
            @include media-query(492px) {
                padding-left: 30.7px;
            }
            .vertical-text{
                position: absolute;
                left: -72px;
                bottom: 84px;
                transform: rotate(-90deg);
                font-weight: 700;
                font-size: 80px;
                line-height: 120%;
                letter-spacing: -0.02em;
                color: $white-1;
                @include media-query(1199px) {
                    left: -37px;
                    bottom: 67px;
                    font-size: 66px;
                }
                @include media-query(992px) {
                    left: -32px;
                    bottom: 61px;
                    font-size: 60px;
                }
                @include media-query(767px) {
                    left: -35px;
                    bottom: 40px;
                    font-size: 47px;
                }
                @include media-query(550px) {
                    left: -40px;
                    bottom: 30px;
                    font-size: 37px;
                }
                @include media-query(450px) {
                    left: -30px;
                    bottom: 18px;
                    font-size: 30px;
                }
                @include media-query(350px) {
                    left: -23px;
                    bottom: 15px;
                    font-size: 26px;
                }
            }
            .upper{
                font-weight: 700;
                font-size: 217.228px;
                line-height: 110%;
                letter-spacing: -0.02em;
                color: $white-1;
                margin-bottom: 0;
                @include media-query(1199px) {
                    font-size: 190.228px;
                }
                @include media-query(992px) {
                    font-size: 170.228px;
                }
                @include media-query(767px) {
                    font-size: 130.228px;
                }
                @include media-query(550px) {
                    font-size: 100.228px;
                }
                @include media-query(450px) {
                    font-size: 81.228px;
                }
                @include media-query(350px) {
                    font-size: 70.228px
                }
            }
            .lower{
                font-weight: 700;
                font-size: 155.163px;
                line-height: 110%;
                letter-spacing: -0.02em;
                margin: -91px 0px 24px 14px;
                -webkit-text-stroke:1px $white-1;
                -webkit-text-fill-color:transparent;
                @include media-query(1199px) {
                    font-size: 135.163px;
                }
                @include media-query(992px) {
                    font-size: 120.163px;
                    margin: -73px 0px 24px 14px
                }
                @include media-query(767px) {
                    font-size: 90.163px;
                    margin: -56px 0px 24px 14px;
                }
                @include media-query(550px) {
                    font-size: 75.163px;
                    margin: -43px 0px 24px 14px;
                }
                @include media-query(450px) {
                    font-size: 56.163px;
                    margin: -33px 0px 24px 7px;
                }
                @include media-query(350px) {
                    font-size: 51.163px;
                    margin: -29px 0px 24px 7px;
                }
                
            }
        }
        
        .text{
            padding-left: 528px;
            margin-bottom: 48px;
            @include media-query(1199px) {
                padding-left: 350px;
            }
            @include media-query(992px) {
                padding-left: 240px;
            }
            @include media-query(767px) {
                padding-left: 150px;
            }
            @include media-query(550px) {
                padding-left: 140px;
            }
            @include media-query(450px) {
                padding-left: 60px;
            }
            br{
                @include media-query(767px) {
                    display: none;
                }
            }
        }
    }
}

// Hero Banner 2
.hero_banner_3{
    height: 918px;
    background:url('../media/hero/3/banner-bg.png') no-repeat;
    background-size: cover;
    background-position: center;
    @include media-query(992px) {
        height: 800px;
    }
    @include media-query(767px) {
        height: 700px;
    }
    @include media-query(492px) {
        height: 700px;
    }
    
    .content{
        z-index: 2;
        padding-top: 165px;
        @include media-query(767px) {
            padding-top: 170px;
        }
        .hero-title{
            position: relative;
            .sub-title{
                font-weight: 700;
                font-size: 36px;
                line-height: 120%;
                letter-spacing: -0.02em;
                color: $black-1;   
                margin-bottom: 0;
                @include media-query(1199px) {
                    font-size: 32px;
                }
                @include media-query(992px) {
                    font-size: 27px;
                }
                @include media-query(767px) {
                    font-size: 24px;
                }
                @include media-query(550px) {
                    font-size: 22px;
                }
                @include media-query(450px) {
                    font-size: 20px;
                }
            }
            .title{
                font-weight: 700;
                font-size: 138px;
                line-height: 110%;
                letter-spacing: -0.02em;
                color: $black-1;   
                margin-bottom: 32px;
                @include media-query(1199px) {
                    font-size: 108px;
                }
                @include media-query(992px) {
                    font-size: 90px;
                }
                @include media-query(767px) {
                    font-size: 70px;
                }
                @include media-query(550px) {
                    font-size: 60px;
                }
                @include media-query(450px) {
                    font-size: 60px;
                }
            }
            
        }
        
        .text{
            padding-left: 528px;
            margin-bottom: 48px;
            @include media-query(1199px) {
                padding-left: 350px;
            }
            @include media-query(992px) {
                padding-left: 240px;
            }
            @include media-query(767px) {
                padding-left: 150px;
            }
            @include media-query(550px) {
                padding-left: 140px;
            }
            @include media-query(450px) {
                padding-left: 60px;
            }
            br{
                @include media-query(767px) {
                    display: none;
                }
            }
        }
    }
}
.dark{
    .hero_banner_1{
        .cus-btn{
            
            &.btn-light{
                
                color: $gray-3;
                &:hover{
                    color: $accent-1;
                }
                &::before {
                    border-color: $gray-3;
                }
                &::after {
                    border-color: $gray-3;
                }
            }
            &.btn-dark{
                color: $black-1;
                &:hover{
                    color: $accent-1;
                }
                &::before {
                    border-color: $black-1;
                }
                &::after {
                    border-color: $black-1;
                }
            }
            &:hover::before{
                border-color: $accent-1;
                
            }
            &:hover::after{
                border-color: $accent-1;
            }
        }
    }
    .hero_banner_2{
        .cus-btn{
            
            &.btn-light{
                
                color: $gray-3;
                &:hover{
                    color: $accent-1;
                }
                &::before {
                    border-color: $gray-3;
                }
                &::after {
                    border-color: $gray-3;
                }
            }
            &.btn-dark{
                color: $black-1;
                &:hover{
                    color: $accent-1;
                }
                &::before {
                    border-color: $black-1;
                }
                &::after {
                    border-color: $black-1;
                }
            }
            &:hover::before{
                border-color: $accent-1;
                
            }
            &:hover::after{
                border-color: $accent-1;
            }
        }
    }
    .hero_banner_3{
        background:url('../media/hero/3/banner-bg-dark.png') no-repeat;
        
        .content{
            .hero-title{
                .sub-title{
                    color: $gray-2;   
                }
                .title{
                    color: $gray-3;   
                }
            }
        }
    }
}