@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Tangerine:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oooh+Baby&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=DM+Serif+Text:ital@0;1&display=swap');


/* 사전 설정 */
:root {
    --pre: 'Pretendard', 'Noto Sans KR', Sans-serif;
    --cont: clamp(.9rem, 1.1vw, 1.2rem);
    --title: clamp(1.4rem, 2.5vw, 2.7rem);
    --s_title: clamp(1.1rem, 1.5vw, 2rem);
    --s_cont: clamp(.9rem, 1.1vw, 1.1rem);

    --max-width: 1400px;
    --blue: #1F3099;
    --black: #4D5358;

}

#viewport {
    background: #fff;
}

#header {
    transition: all .3s;
}

#header.on {
    background: #fff;
}

.gnb_p {
    display: none;
}

.lnb_p {
    max-width: calc(100% - 600px);
    /*max-width: calc(100% - 220px);*/
}

.lnb_p .dep1>li>a>span:hover {
    color: var(--blue);
}

.lnb_p .dep1>li>a {
    color: #fff;
    transition: all .3s;
}

#header.on .lnb_p .dep1>li>a {
    color: #000;
}

.lnb_p .dep1>li>div:before,
.lnb_p .dep1>li:before {
    background: #fff;
}

.lnb_p .dep2>li>a {
    color: #111;
}

.lnb_p .dep1>li:hover>a {
    color: var(--blue);
}

.lnb_p .dep2>li.on>a,
.lnb_p .dep2>li:hover>a {
    color: var(--blue);
}

#header.on #lnb_p_all_wrap .btn_lnb_all_p>span,
#header.on #lnb_p_all_wrap .btn_lnb_all_p>span:before,
#header.on #lnb_p_all_wrap .btn_lnb_all_p>span:after {
    background: #111;
}

#header #lnb_p_all_wrap .btn_lnb_all_p>span,
#header #lnb_p_all_wrap .btn_lnb_all_p>span:before,
#header #lnb_p_all_wrap .btn_lnb_all_p>span:after {
    transition: all .3s;
}


#header .logo h1 span a .on {
    display: block;
}

#header .logo h1 span a .off {
    display: none;
}

#header.on .logo h1 span a .on {
    display: none;
}

#header.on .logo h1 span a .off {
    display: block;
}

#sub_view .lnb_p .dep1>li>a>span {
    color: #fff;
}

#sub_view .lnb_p .dep1>li>a:hover>span {
    color: var(--blue);
}

#sub_view .lnb_p .dep1>li:hover>a>span {
    color: var(--blue);
}

#sub_view #header.on .lnb_p .dep1>li>a>span {
    color: #111;
}


.shgroup .sub_top_text .top_text_inner>p,
.lnb_p .dep2>li>a {
    font-family: var(--pre);
}


#footer>.inner,
.sub_location,
.shgroup .sub_top_text .top_text_inner,
.contents_wrap .sub_location,
.contents_wrap .sub_top_title {
    font-family: var(--pre);
}

@media (min-width: 1024px) {
    #header>.inner {
        max-width: 2560px;
        width: 100%;
        padding: 0 60px;
        box-sizing: border-box;
    }

    #footer>.inner,
    .sub_location,
    .shgroup .sub_top_text .top_text_inner,
    .contents_wrap .sub_location,
    .contents_wrap .sub_top_title {
        max-width: 1400px;
        width: 100%;
        margin: 0 auto;
    }

    .contents_wrap .sub_top_title {
        margin-bottom: clamp(2rem, 5vw, 5rem);
    }

    .lnb_p .dep1>li>a>span {
        font-size: 20px;
        font-family: var(--pre);
    }

    #lnb_p_all_wrap .btn_lnb_all_p>span:before,
    #lnb_p_all_wrap .btn_lnb_all_p>span:after {
        width: 25px;
        height: 2px;
    }

    #lnb_p_all_wrap .btn_lnb_all_p>span {
        height: 2px;
    }

    #header .logo .right-phone{display: none;}

}

@media (max-width: 1439px) {
   .lnb_p{max-width: calc(100% - 220px);}
}

@media (max-width: 1023px) {
    #viewport.on #header {
        background: linear-gradient(17deg, #1F3099, #6174eb);
    }

    .side_menu .dep1>li>a {
        font-family: var(--pre);
        color: #000;
    }

    .side_menu .dep2>li>a {
        font-family: var(--pre);
    }

    #header.on .logo h1 span a .off {
        display: block;
    }

    #header.on .logo h1 span a .on {
        display: none;
    }

    #viewport.toggle_left #header.on .logo h1 span a .off {
        display: none;
    }

    #viewport.toggle_left #header.on .logo h1 span a .on {
        display: block;
    }

    #header .logo #toggle_left span:after,
    #header .logo #toggle_left:before,
    #header .logo #toggle_left:after {
        background: #fff;
    }

    #header.on .logo #toggle_left span:after,
    #header.on .logo #toggle_left:before,
    #header.on .logo #toggle_left:after {
        background: var(--blue);
    }

    #header .logo #toggle_right {
        display: none;
    }

    #header .logo #toggle_left.on span:after {
        background: #fff;
    }

    #header .logo .right-phone {
        position: absolute;
        right: .5rem;
        top: 50%;
        width: 30px;
        height: 30px;
        transform: translateY(-50%);
        font-size: 20px;
        text-align: center;
        color: #fff;
    }

       #viewport.toggle_left #header .logo .right-phone{
        display: none;
       }

       #header.on .logo .right-phone{
        color: var(--blue);
       }

    .shgroup .sub_top_bg img{max-height: 200px;}

}

/* content */
#sub_view #container .contents_wrap .snb .dep1 li a>span {
    font-family: var(--pre);
}

#lnb_p_all_wrap .lnb_p_all .lnb_p_all_inner>div * {
    font-family: var(--pre);
}

.contents {
    overflow: hidden;
}

.contents * {
    word-break: keep-all;
}

@media (min-width: 1024px) {
    .row>.white-space {
        max-width: var(--max-width) !important;
        width: 100%;
        margin: 0 auto;
    }

    #lnb_p_all_wrap .lnb_p_all .lnb_p_all_top {
        background: linear-gradient(17deg, #1F3099, #6174eb);
    }

    #lnb_p_all_wrap .lnb_p_all .dep2>ul>li>a {
        font-size: 15px;
    }
}


/* footer  */
#footer {
    padding: clamp(3rem, 5vw, 5rem) 0;
    background: #202124;
}

#footer * {
    font-family: var(--pre);
}

#footer .copyright {
    color: #fff;
}

#footer>.inner {
    box-sizing: border-box;
    position: relative;
    padding: 35px 0
}

#footer>.inner:after {
    content: '';
    display: block;
    clear: both;
}

#footer .f_call_wrap {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: clamp(1rem, 3vw, 3rem);
}

#footer .f_call {
    float: none;
    width: 50%;
}

#footer .f_call>div img {
    opacity: .5;
    margin-bottom: 2rem;
}

#footer .f_call>div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#footer .f_call p {
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    font-size: clamp(1.1rem, 1.3vw, 1.3rem);
    color: #b7b7b7;
    padding: 0;
    margin: 0;
}

#footer .f_call a {
    color: #b7b7b7;
}

#footer .f_call p .icon {
    color: #aaa;
    padding-right: 0;
}

#footer .f_call p:after {
    display: none;
}

#footer .addbox {
    display: flex;
}

#footer .addbox a {
    color: #aaa !important;
    font-size: 16px;
}

#footer .fnb {
    float: none;
    width: 100%;
}

#footer .fnb ul {
    text-align: left;
    margin-bottom: 1rem;
}

#footer .fnb ul li a {
    font-size: 16px;
}

#footer .finfo {
    text-align: left;
}

#footer .finfo p {
    display: inline-block;
    font-size: 16px;
    padding: 7px 7px 7px 0;
}

#footer .copyright {
    float: left;
    width: 100%;
    font-size: 14px;
    text-align: left;
    margin-top: 1rem;
    color: #ffffff57;
}

@media (max-width: 1023px) {
    #footer>.inner {
        padding: 0;
    }

    #footer .f_call {
        width: 100%;
    }

    #footer .f_call>div {
        align-items: center;
    }

    #footer .f_call_wrap {
        align-items: center;
        flex-direction: column;
    }

    #footer .finfo p {
        display: block;
        text-align: center;
        font-size: 13px;
        padding: .3rem 0;
    }

    #footer .addbox {
        flex-direction: column;
    }

    #footer .copyright {
        text-align: center;
    }

    #footer .fnb ul {
        margin-bottom: 2rem;
        text-align: center;
    }

    #footer .f_call>div img{
        width: 100px;
    }
    #footer .fnb ul li a{
        font-size: 13px;
    }
}