.f4{
    font-size: 1.5rem;
}

.logo{
    width: 150px;
    height: 35px;
}
.logo img{
    height: 100%;
}
.btn-close{
    opacity: 1;
}
.section-py{
    margin: 7em 0;
}
@media (max-width: 767px) {
    .section-py{
        margin:4em 0;
    }
}
.normal{
    font-family: var(--bs-font-family);
}
.semi-bold{
    font-family: "Hankook Semibold";
}
.keep-all{
    word-break: keep-all;
}
.blackout{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.blackout h4{
    transform: translateY(150%);
    transition: transform 0.3s;
}

.blackout:after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.4);
    z-index: 0;
    transition: all 0.3s;
    opacity: 0;
}
.blackout:hover h4{
    transform: translateY(0%);
}
.blackout:hover:after{
    opacity: 1;
}
.fit-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.primary-hover{
    transition: color 0.3s;
}
.primary-hover:hover{
    color: var(--bs-primary);
}
#footer{
    background: #1c1c1c;
    color: #fff;

    text-align: center;

    padding: 3em 1em 1em 1em;
}
#footer .container{
    padding-bottom: 2em;
}
.m-nav-link{
    font-weight: 600;
}
/*main*/
/*메인페이지*/
.main {
    width: 100%;
    height: auto;
}


.main .section1 {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 90vh
}

.main .section1 .main_slide {
    width: 100%;
    height: 100%;

}

.main .section1 .swiper-slide {
    height: 100%;
    overflow: hidden;
    position: relative;
}
.main .section1 .swiper-slide:nth-child(1) .main_bg{
    background-image: url("../img/tna/main_1.png");
}
.main .section1 .swiper-slide:nth-child(2) .main_bg{
    background-image: url("../img/tna/main_2.png");
}
.main .section1 .swiper-slide:nth-child(3) .main_bg{
    background-image: url("../img/tna/main_3.png");
}
.main .section1 .swiper-slide:nth-child(4) .main_bg{
    background-image: url("../img/tna/main_4.png");
}
@media (max-width: 767px) {
    .main .section1 .swiper-slide:nth-child(1) .main_bg{
        background-image: url("../img/tna/m_main_1.png");
    }
    .main .section1 .swiper-slide:nth-child(2) .main_bg{
        background-image: url("../img/tna/m_main_2.png");
    }
    .main .section1 .swiper-slide:nth-child(3) .main_bg{
        background-image: url("../img/tna/m_main_3.png");
    }
    .main .section1 .swiper-slide:nth-child(4) .main_bg{
        background-image: url("../img/tna/m_main_4.png");
    }
}
@keyframes shrinkBackground {
    from {
        background-size: 150% 150%; /* 시작 크기 */
    }
    to {
        background-size: 100% 100%; /* 최종 크기 */
    }
}

.main_bg {
    opacity: 1;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-repeat:no-repeat;
    background-size: 100% 100%;
    /*background-size: 150% 150%;*/
    background-position: center ;
}
/* 활성 슬라이드 상태에서 애니메이션 적용 */
.swiper-slide.swiper-slide-active .main_bg {
    animation: shrinkBackground 3s ease ; /* 배경 축소 애니메이션 */
}
.main  .swiper-pagination-bullet{
    width: 0.7em !important;
    height: 0.7em !important;
    margin: 0 0.7em !important;
    background: var(--bs-light) !important;
}
.main   .swiper-pagination-bullet-active{
    background:var(--bs-primary) !important;
}
.main-title{
    position: absolute;
    bottom: 10%;
    left: 5vw;
    z-index: 10;

}


.square{
    width: 100%;

    overflow: hidden;

}
.section3-content{
    height: 70vh;
}
@keyframes bg {
    from {
        left: 0; /* 시작 크기 */
    }
    to {
        left: -100%; /* 시작 크기 */
    }
}

.main .section3:after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    bottom: 0;
    right: 0;
    background: #f0f0f0;
    z-index: -1;
}
.main .section3.active:after{
    animation: bg 3s ease;
}
.square.desc{
    background: var(--bs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;


}
.square.desc h4{
    line-height: 1.5;
}
.main .section3-content .col a{
    display: inline-block;
}
.main .section3-bg{
    width: 100%;
    height: 100%;
background: #e0e0e0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;

}
@media (max-width: 767px) {


    .main .section3-item1, .section3-item2 {
        width: 50%;
    }
    .main .section3-content{
        height: 50vh;
    }
    .main .section2 h2{
        font-size: 1.2em !important;
    }
    .main .section2 .row{
        height: 50vh;
    }
    .main .section5 .row{
        height: 60vh;
        width: 80%;
        margin: 0 auto;
    }
}
.main .section3-link{
    color: #fff;
    position: absolute;
    bottom: 0;
    z-index: 11;
    left: 1rem;
    font-weight: 500;
}


.main .section4-slider{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.main .section4-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main .section4-link{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: #fff;
}

/*Map*/

.find_stores .result-container{
    height: 400px;
    overflow: hidden;
    overflow-y: scroll;
}

.find_stores .pagination-btn:disabled .page-link{
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: var(--bs-pagination-active-bg);
    border-color: var(--bs-pagination-active-border-color);
}

#map {
    min-height: 400px;
}
/*회사소개*/
.sub-main{
    width: 100%;
    height: 70vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.company .section2{
    background: #F5F5F5;
    padding: 10em 0;
}

/*사업분야*/
.business .banner{
    width: 100%;
    height: 700px;
}
.business_floating{
    position: sticky;
    top:100px;
    width: 10em;
    display: flex;
    flex-direction: column;
    z-index: 100;
}
.business_floating a{
    background-color: #EAEAEA;
    font-weight: 500;
    display: inline-block;
    text-align: center;
}
.business_floating a.active{
    background-color: var(--bs-primary);
    color: #fff;
}

.place{
    width: 20px;
    height: 20px;
    display: inline-block;
    bottom: 10px;
    right: 10px;
    position: absolute;
}
.place img{
    width: 100%;
}
/*.business >article{*/
/*   padding: 7em 0;*/
/*}*/

.business .business-item{
    padding-top: 100px;
}
@media (max-width: 767px) {
    .business .business-item{
        padding-top: 50px;
    }
}
/*커리어 패스*/
.info_box{
    background: #eaeaea;
    border-radius: 16px;
    padding: 1em;
    height: 100%;
}
.career_pass .section2 .process{
    display: flex;
    flex-wrap: wrap;
}
.career_pass .section2 .process span{
    background: var(--bs-primary);
    color: #fff;
    border-radius: 30px;
    padding: 0.5em 1em;

}
/*투자모델*/
.invest_model .section2 .col{
    display: flex;
    align-items: center;
    justify-content: center;
}
.invest_model .section2 .item{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    position: relative;
}
.invest_model .section2 .item h4{
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
}

.company .section3 .col img{
    width: 100%;
}
@media (max-width: 767px) {

    /*.main .section1 .swiper-slide:nth-child(1) .main_bg{*/
    /*    background-image: url("../img/tna/m_main_1.png") !important;*/
    /*}*/
    /*.main .section1 .swiper-slide:nth-child(2) .main_bg{*/
    /*    background-image: url("../img/tna/m_main_2.jpg") !important;*/
    /*}*/
    /*.main .section1 .swiper-slide:nth-child(3) .main_bg{*/
    /*    background-image: url("../img/tna/m_main_3.png") !important;*/
    /*}*/
    /*.main .section1 .swiper-slide:nth-child(4) .main_bg{*/
    /*    background-image: url("../img/tna/m_main_4.png") !important;*/
    /*}*/

    .business .banner{
        height: 500px;
    }
    .business_floating{
        top: 70px;
        width: 100%;
        flex-direction: row;
    }
    .business_floating a{
        width: 25%;
    }
    .wow:nth-child(1){
        margin-top: 30px;
    }

    #map{
        min-height: 250px;
    }
    .company .section3 .col{
        display: flex;
        justify-content: center;
    }
    .company .section3 .col img{
        width:90%;
    }
    .company .section4  .banner{
       height: 120px;
        border-radius: 8px;
        overflow: hidden;

    }
    .company .section4  .banner img{
        height: 100%;
    }
    .company .section5 .banner{
        height: 80px;
        border-radius: 8px;
        overflow: hidden;
    }
    .company .section5 .banner img{
        height: 100%;
        object-fit: cover;
    }
}