@charset "utf-8";

/* 서브 비주얼 */
.sub-visual {
    position:relative;
    min-height:300px;
    display:flex;
    align-items:center;
    background:url("../img/sub_visual.jpg") center center / cover no-repeat;
    overflow:hidden;
}

.sub-visual:before {
    position:absolute;
    inset:0;
    content:"";
    background:linear-gradient(
        90deg,
        rgba(55,50,40,.62) 0%,
        rgba(55,50,40,.35) 48%,
        rgba(55,50,40,.12) 100%
    );
}

.sub-visual-inner {
    position:relative;
    z-index:2;
    width:calc(100% - 80px);
    max-width:1440px;
    margin:0 auto;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
}

.sub-title-group {
    display:block;
    margin-bottom:10px;
    color:#eadfbe;
    font-size:16px;
    font-weight:700;
    letter-spacing:-.02em;
}

.sub-title h2 {
    margin:0;
    color:#fff;
    font-size:44px;
    line-height:1.2;
    font-weight:700;
    letter-spacing:-.05em;
}

/* breadcrumb */
.breadcrumb ol {
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    list-style:none;
}

.breadcrumb li {
    position:relative;
    color:rgba(255,255,255,.86);
    font-size:16px;
}

.breadcrumb li+li {
    margin-left:30px;
}

.breadcrumb li+li:before {
    position:absolute;
    top:50%;
    left:-17px;
    width:7px;
    height:7px;
    border-top:1px solid rgba(255,255,255,.65);
    border-right:1px solid rgba(255,255,255,.65);
    content:"";
    transform:translateY(-50%) rotate(45deg);
}

.breadcrumb a {
    display:flex;
    align-items:center;
    color:#fff;
    text-decoration:none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    text-decoration:underline;
}

.breadcrumb svg {
    width:18px;
    height:18px;
}

/* 서브 컨텐츠 영역 */
.sub-container {
    width:calc(100% - 80px);
    max-width:var(--geumo-container);
    margin:0 auto;
}

#con,
#detail_con {
    min-width:0;
}

@media (max-width:1200px) {
    .sub-visual-inner,
    .sub-container {
        width:calc(100% - 48px);
    }
}

@media (max-width:1024px) {
    .sub-visual {
        min-height:240px;
    }

    .sub-visual-inner {
        width:calc(100% - 40px);
    }

    .sub-title h2 {
        font-size:36px;
    }

    .breadcrumb {
        display:none;
    }

    .sub-container {
        width:calc(100% - 40px);
    }
}

@media (max-width:640px) {
    .sub-visual {
        min-height:200px;
    }

    .sub-visual-inner,
    .sub-container {
        width:calc(100% - 32px);
    }

    .sub-title-group {
        font-size:15px;
    }

    .sub-title h2 {
        font-size:30px;
    }
}

/* Sub Navigation */
.sub-snb {
    position:relative;
    z-index:20;
    width:100%;
    background:#fff;
    border-bottom:1px solid #e8e4da;
}

.sub-snb-inner {
    width:calc(100% - 80px);
    max-width:1440px;
    margin:0 auto;
}

.sub-snb ul {
    display:flex;
    align-items:stretch;
    margin:0;
    padding:0;
    list-style:none;
}

.sub-snb li {
    position:relative;
    flex:1;
    min-width:0;
}

.sub-snb a {
    position:relative;
    min-height:74px;
    padding:0 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#444;
    font-size:17px;
    font-weight:500;
    line-height:1.4;
    letter-spacing:-.035em;
    text-align:center;
    text-decoration:none;
    word-break:keep-all;
    transition:color .2s ease,background .2s ease;
}

.sub-snb a:after {
    position:absolute;
    left:50%;
    bottom:0;
    width:0;
    height:3px;
    background:#b39f6c;
    content:"";
    transform:translateX(-50%);
    transition:width .25s ease;
}

.sub-snb a:hover,
.sub-snb a:focus-visible {
    color:#8e7a4b;
    background:#faf8f2;
}

.sub-snb a:hover:after,
.sub-snb a:focus-visible:after {
    width:100%;
}

.sub-snb li.on a {
    color:#8e7a4b;
    font-weight:700;
}

.sub-snb li.on a:after {
    width:100%;
}

@media (max-width:1024px) {
    .sub-snb {
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .sub-snb::-webkit-scrollbar {
        display:none;
    }

    .sub-snb-inner {
        width:auto;
        max-width:none;
    }

    .sub-snb ul {
        width:max-content;
        min-width:100%;
    }

    .sub-snb li {
        flex:0 0 auto;
    }

    .sub-snb a {
        min-height:64px;
        padding:0 24px;
        font-size:16px;
    }
}

@media (max-width:640px) {
    .sub-snb a {
        min-height:58px;
        padding:0 20px;
        font-size:16px;
    }
}

.sub_board {
	margin-bottom:40px;
}