@charset "utf-8";
/* CSS Document */
/* 공통 */
/* 메인 */
#main {
    transition: all 0.5s ease-in-out;  
    background-image: url("../images/main/main_bg.png");
    background-position:left bottom;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: calc(var(--sec_pd) / 2.25 );
}

    /* 헤더 - 로고 */
    #main .top_logo_pack {
        padding: 2rem 1rem;
    }

        #main .top_logo_pack .logo {
            display: inline;
            transition: all 0.3s ease-in-out;
        }

            #main .top_logo_pack .logo img {
                width: inherit;
                height: inherit;
            }

        /* 헤더 - 콜버튼 */
        #main .top_call {
            align-items: center;
            justify-content: space-between;
            gap:1rem;
            border-radius: var(--br_s);
            color: var(--point);
            background-color: var(--bg_sky);
            transition:all var(--q_trans); /*큐빅*/
            border: 1px solid transparent;
        }
        .pc_call{ display: inline-flex;}
        .m_call{display: none;}

        #main .top_call:hover {
            box-shadow:  0 0.15rem 0.35rem 0.15rem rgba(25,158,217,0.5);
            border: 1px solid var(--light_point);
        }

    #main .main_cont {
        padding-top: calc( var(--sec_pd) / 2);
        display: flex;
        justify-content: space-between
    }

    .side_bar{ /* 좌우 하얀바 장식 */
        position: relative; display: inline-block; line-height: 1; padding-left: .6em; padding-right: .6em;}
        .side_bar::before,.side_bar::after{ content:""; position: absolute; top: 50%; transform: translateY(-50%); height: .8em; width: 1px; background-color: var(--white);}
        .side_bar::before{left: 0;}
        .side_bar::after{right: 0;}

/* 메인슬라이드  */
.main_slide{overflow: hidden; width: 100%; margin: 0 auto; height: 570px; }
.main_slide_wrapper{gap: 3.5rem; }
.main_slide .slide_item {/* 슬라이드 아이템 */
    width: 335px;
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    aspect-ratio: 225 / 262;

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

    transition: width 0.75s cubic-bezier(0.25, 0, 0.25, 1);
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: -1px;
}
.main_slide .slide_item.active{
     width: 450px; 
}
.main_slide .slide_item.active p { font-weight: 500; font-size: 1.25rem;}
.main_slide .slide_item .square {margin-top: 2rem; max-width: 90%;}
.main_slide .slide_item .square img{margin: auto; display: block; }

.gradient_border {
    width: 100%;
    height: 100%;
    padding: 1.7rem 2.2rem;
    border: 2px solid transparent;
    background-image: linear-gradient(#fff,#fff),linear-gradient(to bottom right,#bc5df3,#564be4,#332182);
    background-origin: border-box;
    background-clip: padding-box,border-box;
}

/* ==================== 모바일 레이아웃 ==================== */
@media ( max-width:1280px ) {
    #main .top_logo_pack .logo_img {
        width: 70% !important;
        margin-left: 1rem;
        margin-top: 2rem;
        height: inherit;
    }
    #main .top_call{width: fit-content; justify-content: center; margin-left:auto ; margin-right: auto; border-radius: var(--br_r);}
        .pc_call{display: none; }
        .m_call{display: inline-flex;}
          

#main .top_call.m_ver img{margin: auto auto;}
    #main .main_cont {
        display: flex;
        flex-direction: column;
    }

        #main .main_cont .sect_tit {
            padding-top: 3rem;
            text-align: center;
        }

            #main .main_cont .sect_tit p.fs_64 {
                font-size: 2.5rem
            }

            #main .main_cont .sect_tit p.fs_36 {
                font-size: 2rem
            }

        #main .main_cont ul {
            width: fit-content;
            margin: 0 auto;
            text-align: left
        }

            #main .main_cont ul li {
                background-size: 10px 11px;
                padding-left: 1.35rem;
            }

                #main .main_cont ul li span.fs_12.mt1 {
                    font-size: 9px;
                    margin-top: 1px;
                }

        #main .main_cont .main_btn_pack {
            display: flex;
            gap: 10px;
        }

            #main .main_cont .main_btn_pack a {
                flex: 1;
                height: fit-content;
                margin: 0;
            }

            #main .main_cont .main_btn_pack .main_btn_top,
            #main .main_cont .main_btn_pack .main_btn_bottom {
                padding: 0.25rem 1rem;
                height: 30px;
            }

            #main .main_cont .main_btn_pack a p {
                font-size: 110% !important;
            }

            #main .main_cont .main_btn_pack a img {
                height: 10px;
            }

        #main .main_cont .main_img {
            width: 65%;
            margin: 0 auto
        }
}


@media (max-width: 768px) {
    #main{
        background-position:10% bottom;
    }
    .main_slide{ height: fit-content; min-height: 500px; }

    .main_slide_wrapper{
        gap: 1.5rem;             
    }

    .main_slide .slide_item {
        width: 60vw;          
    }

    .main_slide .slide_item.active{
        width: 72vw;          
    }
}

@media (max-width: 600px) {

    .main_slide{ height: fit-content; min-height: 470px; }

   
}
@media ( max-width:400px ) {
    .main_slide{ height: fit-content; min-height:420px; }

    #main .main_cont .sect_tit p.fs_64 {
        font-size: 2rem;
    }

    #main .main_cont .sect_tit p.fs_36 {
        font-size: 1.75rem;
    }

    #main .main_cont ul li {
        background-size: 8px 9px;
        padding-left: 1.2rem;
    }

}
    /* ========================================================================== */