@charset "utf-8";

/**************************************************
*
*   common.css
*
***************************************************/
.blind {display: none !important;}

/* 공통 길이 */
.com-inner-1500 {width: 100%; max-width: 1500px; margin: 0 auto;}

/* 공통제목 */
.com-title-01 {font-size: 35px; font-weight: 800; color: #000; margin-bottom: 30px;}

@media screen and (max-width: 1080px) {
    .com-title-01 {font-size: 30px; margin-bottom: 20px;}
}

@media screen and (max-width: 768px) {
    .com-title-01 {font-size: 26px; margin-bottom: 15px;}
}


/* 공통 select box */
.com-select-01 {--pdlr: 10px; width: 100%; height: 50px; border: 3px solid #ddd; appearance: none; background: url("/resources/img/2024/icon_select_arrow_01.png") no-repeat center right var(--pdlr); padding-left: var(--pdlr); padding-right: calc(var(--pdlr) + 20px); font-size: 14px;}

/* 공통 탭박스 */
.com-tab-01 {display: flex; border-left: 1px solid #ddd; border-top: 1px solid #ddd; margin-bottom: 20px;}
.com-tab-01 li {width: 100%;}
.com-tab-01 a {height: 100%; min-height: 50px; padding: 10px; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; color: #767676; font-weight: 600; background-color: #fff;}
.com-tab-01 a:not(.active):where(:hover,:focus) {filter: brightness(0.95);}
.com-tab-01 a.active {color: #222; border-bottom: 2px solid #000;}

.com-tab-01.item-7 {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));}
.com-tab-01.item-7 li:where(:nth-of-type(7n + 1),:nth-of-type(7n + 2),:nth-of-type(7n + 3),:nth-of-type(7n + 4)) {grid-column: span 3;}
.com-tab-01.item-7 li:where(:nth-of-type(7n + 5),:nth-of-type(7n + 6),:nth-of-type(7n + 7)) {grid-column: span 4;}

.com-tab-01.item-8 {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));}

.com-tab-02 {display: flex; justify-content: center; align-items: center; gap: 25px; border-bottom: 1px solid #ddd; margin-bottom: 50px; text-align: center;}
.com-tab-02 li {}
.com-tab-02 a {display: block; font-size: 18px; color: #767676; padding-bottom: 10px; position: relative; font-weight: 600;}
.com-tab-02 a.active {color: #000;}
.com-tab-02 a.active::before {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background-color: #000;}

@media screen and (max-width: 1080px) { 
    .com-tab-01 {display: none !important;}
}

@media screen and (max-width: 768px) { 
    .com-tab-02 {gap: 0; margin-bottom: 30px;}
    .com-tab-02 li {width: 100%;}
    .com-tab-02 a {font-size: 14px; padding-left: 10px; padding-right: 10px;}
    .com-tab-02 a.active::before {height: 2px;}
}

/***** 기본 테이블 *****/
.com-tbl-wrap {background-color: #fff;}
.com-tbl-wrap table {border-top: 2px solid #000;}
.com-tbl-wrap tr {border-bottom: 1px solid #ddd;}
.com-tbl-wrap :where(th,td) {padding: 14px 10px;}
.com-tbl-wrap th {background-color: #f9f9f9;}
.com-tbl-wrap td {}

@media screen and (max-width: 1080px) {
    .com-tbl-wrap {font-size: 14px;}
    .com-tbl-wrap th, .com-tbl-wrap td {padding: 12px 8px;}
}

@media screen and (max-width: 768px) {
    /* 모바일 일때 가로 스크롤 */
    .com-tbl-wrap.type-01 {overflow-x: auto;}
    .com-tbl-wrap.type-01 table {width: 800px;}
    
    /* 모바일 일때 세로로 변형 */
    .com-tbl-wrap.type-02 {}
    .com-tbl-wrap.type-02 colgroup {display: none;}
    .com-tbl-wrap.type-02 :where(th,td) {width: 100%; display: block;}
    .com-tbl-wrap.type-02 th {border-bottom: 1px solid #ddd;}
}





@media screen and (max-width: 1560px) {
    
}
@media screen and (max-width: 1400px) {
    
}
@media screen and (max-width: 1240px) {
    
}
@media screen and (max-width: 1080px) { 
    
}
@media screen and (max-width: 768px) {  
    
}
@media screen and (max-width: 480px) {
    
}