@charset "utf-8";
/* CSS Document */
/* 메인 */
#main {
    transition: all 0.5s ease-in-out;
    min-height: 720px;
    background-image: url("../images/main_bg.png"), linear-gradient(to bottom, var(--point) 0%,#0089df 100%);
    background-position: 35% bottom;
    background-repeat: no-repeat;
    background-size: 90%, 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    /* 헤더 - 로고 */
    #main .top_logo_pack {
        align-items: center;
        margin-top: 3rem;
    }

        #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_logo_pack .top_call {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: var(--br_l);
            background-color: var(--darknavy);
            border: 1px solid var(--darknavy);
            padding: 0.5rem 1.5rem;
            transition: background var(--q_trans); /*큐빅*/
        }

    #main .top_call:hover {
        background-color: transparent;
        background-color: var(--navy);
    }

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

        #main .main_cont .sect_tit {
            padding-top: 1rem;
        }

        #main .main_cont ul li {
            background-image: url(../images/polygon.png);
            background-repeat: no-repeat;
            background-position: left center;
            padding-left: 1.5rem;
            background-size: 13px 14px;
        }

            #main .main_cont ul li:not(:last-child) {
                margin-bottom: 0.8em;
            }

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

            #main .main_cont .main_btn_pack a {
                display: flex;
                flex-direction: column;
                width: 169px;
                border: 1px solid rgba(255,255,255,0.5);
                border-radius: var(--br_s);
                box-sizing: border-box;
                overflow: hidden
            }

            #main .main_cont .main_btn_pack .main_btn_top,
            #main .main_cont .main_btn_pack .main_btn_bottom {
                display: flex;
                align-items: center;
                padding: 0.5rem 1rem;
                height: 50px;
            }

            #main .main_cont .main_btn_pack .main_btn_top {
                justify-content: space-between;
                background-color: rgba(255,255,255,0.25);
            }

            #main .main_cont .main_btn_pack .main_btn_bottom {
                justify-content: center;
            }

            #main .main_cont .main_btn_pack a:hover {
                box-shadow: 0 0.3rem 0.5rem 0rem rgba(40,60,69,0.45);
                border-color: rgba(255,255,255,1);
                /*width: 176px;*/
                transition: all var(--q_trans); /*큐빅*/
                transform-origin: left center;
            }

                #main .main_cont .main_btn_pack a:hover .main_btn_top {
                    background-color: var(--darknavy);
                    transition: background-color var(--q_trans);
                }

        #main .main_cont .main_img {
            margin-right: 100px
        }

.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: 200px !important;
        height: inherit;
    }

    #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:400px ) {
    #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;
    }
    /***** 가로모드 *****/
    @media screen and (orientation:landscape) and ( max-width:900px ) {
    }
    /* ========================================================================== */