@charset "utf-8";
:root {
    /* color */
    --black : #141414;
    --white : #fff;
    --green : #1f9716;
    --green2 : #2faf26;
    --green3 : #1ca013;
    --green4 : #50bd4a;
    --yellow : #f6e53f;
    --blue : #1679c5;
    --blue2 : #3584c9;
    --blue3 : #1678c4;
    --blue4 : #0079c8;
    --pink : #f6317d;
    --pink2 : #e62e74;
    --pink3 : #f7317d;
    --pink4 : #f73d84;
    --purple : #9433e6;
    --red : #e42525;

    /* font */
    --CoreDream : 'CoreDream';
    --Vitro : 'VITRO';
    --NotoSans : 'Noto Sans KR';
    --Roboto : 'Roboto';
    --Jalnan : 'Jalnan'
}

/* font-family */
.cd {font-family: var(--CoreDream);}
.vt {font-family: var(--Vitro);}
.nt {font-family: var(--NotoSans);}
.rb {font-family: var(--Roboto);}
.jn {font-family: var(--Jalnan);}

/* color */
.black {color: var(--black);}
.white {color: var(--white);}
.green {color: var(--green);}
.blue {color: var(--blue);}
.blue2 {color: var(--blue2);}
.blue4 {color: var(--blue4);}
.green4 {color: var(--green4);}
.pink3 {color: var(--pink3);}
.pink4 {color: var(--pink4);}
.red {color: var(--red);}

/* display */
.hidden {position: absolute !important; left: -9999px !important;}

/* line */
.line1 {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;}
.line2 {white-space: normal !important; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.line4 {white-space: normal !important; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}

/* text-align */
.tc {text-align: center !important;}
.tl {text-align: left !important;}
.tr {text-align: right !important;}

/* flex */
.flex {display: flex;}
.jstS {justify-content: flex-start !important;}
.jstE {justify-content: flex-end !important;}
.jstC {justify-content: center !important;}
.jstB {justify-content: space-between !important;}

/* margin */
.m0at {margin: 0 auto !important;}
.mb0 {margin-bottom: 0 !important;}
.mb50 {margin-bottom: 5rem !important;}
.mb70 {margin-bottom: 7rem !important;}
.mr10 {margin-right: 1rem !important;}

/* width */
.w50p {width: 50% !important;}
.w100p {width: 100% !important; max-width: 100% !important;}

/* br */
.pc_br {display: inline-block;}

/* tabList */
.tabList {width: max-content; max-width: 84%; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; margin: 0 auto 4rem auto; border-radius: 36px; background: #f2f2f2;}
.tabList li {width: 28.7rem; text-align: center;}
.tabList li a {display: flex; align-items: center; justify-content: center; height: 100%; padding: 2.5rem 1rem ; box-sizing: border-box; border-radius: 36px; font-size: 2.1rem; transition: all 0.3s;}
.tabList li a.active {color: var(--white); background: var(--green2); font-weight: 600;}
.tabList2 {width: max-content; max-width: 84%; position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; margin: 0 auto 9rem auto; gap: 3rem;}
.tabList2 li {width: max-content;}
.tabList2 li a {position: relative; border-radius: 0; font-size: 1.8rem; padding: 0 0.6rem 1.4rem 0.6rem; color: #444444;}
.tabList2 li a.active {color: var(--green2); font-weight: 600; background: transparent;}
.tabList2 li a.active::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.4rem; background: var(--green2);}

/* userBigImg */
img.userBigImg {height: 140% !important;}

/* basicBtn */
.basicBtn {display: inline-block;}

/* basicText */
p.basicText {font-size: 1.8rem; color: #212020; line-height: 3.3rem; font-weight: 500; word-break: keep-all;}
p.basicText span.under {text-decoration: underline;}

/* basicTabel */
.basicTable table {border-bottom: 1px solid #373e36; width: 100%; text-align: center;}
.basicTable table caption {display: none;}
.basicTable table thead th, .basicTable table tbody th {background: #373e36; color: #fff; font-size: 1.8rem; font-weight: 500; padding: 1.7rem 0; box-sizing: border-box; line-height: 3rem;}
.basicTable table tbody th {border-top: 1px solid #fff;}
.basicTable table tbody tr:first-child th {border-top-color: #373e36;}
.basicTable table thead th:not(:last-of-type) {border-right: 1px solid #fff;}
.basicTable table tbody td {font-size: 1.8rem; font-weight: 500; color: #282828; padding: 2.3rem 0;}
.basicTable table tbody td:not(:last-of-type) {border-right: 1px solid #373e36;}
.basicTable table.mobTable .thead-hidden {position: absolute; width: 0; height: 0; overflow: hidden;}
.basicTable table.mobTable tbody td {border-top: 1px solid #373e36;}
.basicTable.type2 table {border-color: #dbdbdb;}
.basicTable table tbody tr:not(:last-of-type) {border-bottom: 1px solid #dbdbdb;}
.basicTable.type2 table thead th {background: #ededed; color: #000000; border-top: 2px solid #000;}
.basicTable.type2 table thead th:not(:last-of-type) {border-right: 1px solid #dbdbdb;}
.basicTable.type2 table tbody td:not(:last-of-type) {border-color: #dbdbdb;}
.basicTable.type2 table tbody td.tl {padding-left: 5.5rem; box-sizing: border-box;}
.basicTable.type2 table tbody td span.state {display: inline-block; padding: 0.8rem 2rem; box-sizing: border-box; border-radius: 5px; color: var(--white); font-size: 1.5rem; font-weight: 500;}
.basicTable.type2 table tbody td span.state.up {background: var(--blue);}
.basicTable.type2 table tbody td span.state.down {background: var(--pink2);}

/* btnFlex */
.btnFlex {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3.5rem; row-gap: 2.8rem;}
.btnFlex .manager {display: flex; align-items: center; gap: 2.8rem; row-gap: 2.8rem; flex-wrap: wrap;}

/* 반응형 */
@media screen and (max-width: 1400px) {
    /* tabList */
    .tabList, .tabList2 {max-width: calc(100% - 10rem);}
}

@media screen and (max-width: 1280px) {
    /* tabList */
    .tabList {justify-content: flex-start;}
    .tabList, .tabList2 {width: calc(100% - 6rem); max-width: 100%;}
    .tabList {flex-wrap: wrap; gap: 1rem; background: transparent;}
    .tabList li {width: calc(33.333% - 0.7rem);}
    .tabList li a {background: #f1f5f1;}
}

@media screen and (max-width: 1025px) {
    /* br */
    .pc_br {display: none;}

    /* tabList */
    .tabList, .tabList2 {width: calc(100% - 5rem);}

    /* basicTable */
    .basicTable table thead th, .basicTable table tbody th, .basicTable table tbody td {font-size: 1.6rem;}
    .basicTable.type2 table tbody td.tl {padding-left: 3rem;}
}

@media screen and (max-width: 768px) {
    /* tabList */
    .tabList {margin-bottom: 4rem;}
    .tabList.type2 {margin-bottom: 4rem;}
    .tabList li {width: calc(50% - 0.5rem);}
    .tabList li a {padding: 2rem 1rem; font-size: 1.8rem;}
    .tabList2 {width: 100%; flex-wrap: wrap; gap: 0; margin-bottom: 4rem;}
    .tabList2 li {width: 50%; border-bottom: 1px solid #dbdbdb;}
    .tabList2 li a {display: block; text-align: center;}
    .tabList2 li a.active::before {bottom: -0.2rem;}

    /* basicText */
    p.basicText {font-size: 1.6rem; line-height: 2.8rem;}

    /* btnFlex */
    .btnFlex {row-gap: 1rem;}
    .btnFlex .manager {gap: 1rem; row-gap: 1rem;}

    /* table */
    .basicTable.scroll {overflow-x: scroll; padding-bottom: 1rem;}
    .basicTable.scroll table {width: 75rem;}
    .basicTable.scroll::-webkit-scrollbar {height: 5px;}
    .basicTable.scroll::-webkit-scrollbar-track {background: #e5e5e5;}
    .basicTable.scroll::-webkit-scrollbar-thumb {background: #303030;}
}

@media screen and (max-width: 480px) {
    /* tabList */
    .tabList {margin-bottom: 2rem;}
    .tabList2 {margin-bottom: 3.4rem;}
    .tabList li a {font-size: 1.6rem;}
    .tabList2 li a {padding-top: 1.4rem; font-size: 1.5rem;}

    /* table */
    .basicTable.scroll table {width: 65rem;}
    .basicTable.scroll table tbody td {font-size: 1.4rem; padding: 1.8rem 0;}
    .basicTable.type2 table tbody td.tl {padding-left: 2rem;}
}