@charset "utf-8";
/* CSS Document */
/* 헤더 - 로고 */
    #header .top_logo_pack {
        height: 100px;
        align-items: center;
    }
        #header .top_logo_pack .logo {
            display: inline;
            transition: all 0.3s ease-in-out;
        }
            #header .top_logo_pack .logo img {
                width: inherit;
                height: inherit;
            }

        /* 헤더 - 콜버튼 */
        #header .top_logo_pack .top_call {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.65rem 1.2rem;
        }
/* 메인 */
#main {
    height: auto;
    min-height: 800px;    
    transition: all 0.5s ease-in-out;
    position: relative;

    background-image: url("../images/main_bg.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;

    padding-bottom: calc( var(--sec_pd) * 2 );
    margin-bottom:  var(--sec_pd);

    display: flex; 
    flex-direction: column; 
    justify-content: space-between;
}

    #main .main_cont {
        display: flex;
        justify-content: space-between
    }
    
    .main_icon_box{ /* 글라스 */ 
        width: 100%; 
        max-width: 1260px; 
        position: absolute; 
        flex-wrap: wrap;
        bottom: 0; transform: translateY(50%);
        margin-bottom: unset;
        background: rgba(255, 255, 255, 0.09);
        box-shadow: 0 3px 20px rgba(0, 0, 0, 0.11);
        backdrop-filter: blur(8.3px);
        -webkit-backdrop-filter: blur(8.3px);
        border: 1px solid rgba(255, 255, 255, 0.38);
        transition: 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    }
        .main_icon_box .m_icon { display: flex; flex-direction: column; align-items: center;}
        .main_icon_box .m_icon:hover p{color: var(--point);}
		

/* ==================== 모바일 레이아웃 ==================== */
@media ( max-width:1380px ) {
#main{margin-bottom: 0;}
    .main_icon_box{ padding: 3rem; width: auto; display: inline-flex; flex-wrap: wrap; justify-content: space-around; transform: translateY(-40%); margin: 0 2rem;   }
        .main_icon_box .m_icon{margin: 0.5rem 0;}
            .main_icon_box .m_icon .m_icon_img {width:80%}
#main .main_cont { display: flex; justify-content: center; align-items: center; gap: 20px; }
    #main .main_cont .sect_tit {
        text-align: center;
        filter: drop-shadow(0 0 5px rgb(255, 228, 227));
    }
        #main .main_cont .sect_tit .mt_30 {margin-top: 2rem;}
}

@media ( max-width:1280px ) {
/* 메인 */
#main {  
    background-position: 82% top;
    justify-content: space-between;
}

    #main .main_cont {
        margin-bottom: 3rem
    }
        .main_icon_box{ padding: 1.5rem; gap: 1rem;}
        .main_icon_box .m_icon .m_icon_img {width:70%}            
}

@media ( max-width:900px ) {
#main{
    background-image: url("../images/main_bg_m.png");
    background-position: center;
    min-height: 70vh;
    padding-bottom: 3rem;
}
	.wrap:has(.main_icon_box){margin-top: 10.5rem;}
    .main_icon_box{ border-radius: var(--br_xl); position: relative; transform: translateY(0);}
    .main_icon_box .m_icon {width: 25%;}
}
@media (max-width: 600px) {
    /* 메인 */
    #header .top_logo_pack {
        height: 70px;
    }
	.main_txt {width: 250px;margin-bottom: 3rem;}
        #header .top_logo_pack .logo img {
            width: auto;
            height: 40px;
        }
}