@charset "utf-8";

/* ===========================
   PAGE TITLE
=========================== */
.page-title-area {
    padding: 60px 0 40px;
}

.page-eng-title {
    letter-spacing: 0.05em;
    color: #222;
    margin-bottom: 8px;
}

.page-kor-title {
    color: #666;
}

/* ===========================
   VISUAL BANNER
=========================== */
.sub-visual {
	margin-bottom: 45px;
    width: 100%;
    height: 400px;
    overflow: hidden;
    background: #e8d5d5;
}

.sub-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ===========================
   TAB MENU
=========================== */
.tab-wrap {
    margin-bottom: 55px;
}

.tab-list {
    display: flex;
    list-style: none;
}

.tab-list li {
    flex: 1;
}

.tab-list li a {
    display: block;
    padding: 18px 0;
    text-align: center;
    color: #707070;
    text-decoration: none;
    background: rgba(153, 153, 153, 0.1);
    border: 1px solid #CCCCCC;
    transition: all 0.2s;
}

.tab-list li:last-child a {
    border-right: none;
}



.tab-list li.active a {
    background: #fff;
    color: #4D3621;
    border-top: none;
    border-left: none;
    border-bottom: 2px solid #333;
    font-weight: 600;
}

.tab-list li a:hover {
    color: #333;
    background: #fff;
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 767px) {
    .page-title-area { padding: 40px 0 24px; }
    .sub-visual      { height: 160px; }
    .tab-list        { width: 100%; }
    .tab-list li a   { font-size: 13px; padding: 14px 0; }
    .tab-wrap        { margin-bottom: 40px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .sub-visual { height: 280px; }
    .tab-list   { width: 100%; }
}