@media all and (max-width: 1440px) {
    html, body {width: 1400px;}
}

#wrap {
    display: flex;
    min-height: calc(100vh - 80px);
}

/* header */
header {width:300px; flex-shrink:0; transition: .3s;}
header .logo {display:flex; height:80px; padding-top:5px;background-color: #174596; text-align: center; color: #fff; font-family:'NEXONFootballGothicB'; font-size:3.125rem; line-height: 1; align-items: center; justify-content: center; transition: .3s;}
header #gnb {display:flex; height:100%; background-color:#F3F6FA; flex-direction: column; justify-content: space-between;}
header #gnb .depthList {display:block; position:relative; margin-top:50px; padding-left:50px; transition: .3s;}
header #gnb .depthList::before {display:block; position:absolute; top:-10px; left:0; width:5px; height:37px; border-radius:0 10px 10px 0; background-color:#1D56BC;}
header #gnb .depthList > li:not(:first-child) {padding-top: 20px;}
header #gnb .depthList > li .depth {display:inline-block; position:relative; padding-left:35px; font-size:1.25rem; font-weight: 600; color: #7A899E; transition: .3s;}
header #gnb .depthList > li .depth::before {display: block; position: absolute; top: 50%; left: 0; width: 24px; height: 24px; background-repeat:no-repeat; background-position:center center; transform: translateY(-50%); transition: .3s;}
header #gnb .depthList > li .depth.class::before {background-image:url(../images/common/i_class.svg);}
header #gnb .depthList > li .depth.essay::before {background-image:url(../images/common/i_essay.svg);}
header #gnb .depthList > li .depth.active,
header #gnb .depthList > li .depth:hover {color: #000;}
header #gnb .depthList > li .depth.class.active::before,
header #gnb .depthList > li .depth.class:hover::before {background-image:url(../images/common/i_class_on.svg);}
header #gnb .depthList > li .depth.essay.active::before,
header #gnb .depthList > li .depth.essay:hover::before {background-image:url(../images/common/i_essay_on.svg);}
header .copyright {display:block; padding:0 10px 30px; font-weight:600; font-size:0.875rem; color:#000; text-align: center;}

@media screen and (max-width: 1600px) {
    header {width:250px;}
}

/* container */
#container {width:100%; position:relative; position:relative; background-color: #fff;}
#container .user-wrap {display: flex; height:80px; align-items: center; padding: 25px 30px; background-color: #1D56BC; justify-content: end; transition: .3s;}
#container .user-wrap .user {display:block; position:relative; padding-left:30px; font-weight:500; font-size:0.9357rem; color: #fff; transition: .3s;}
#container .user-wrap .user::before {display:block; position:absolute; top:50%; left:0; width:20px; height:20px; background: url(../images/common/i_admin.svg) no-repeat center center; transform: translateY(-50%);}
#container .user-wrap .logout {display:block; margin-left:30px; display: flex; align-items: center; border-radius: 5px; padding:10px 25px; background-color: #ffff; font-weight:500; font-size:0.9357rem; color:#003863; transition: .3s;}
#container .user-wrap .logout:hover {background-color: #003863; color:#fff;} 

/* 공통 sub layout */
#con {height:100%; padding:50px; transition: .3s;}
#con .subCon:not(:first-child) {padding-top:30px; transition: .3s;}

@media screen and (max-width: 1600px) {
    #con .subCon:not(:first-child) {padding-top:20px;}
}

/* 공통 title */
#con .tit01 {display:block; position:relative; padding-left:30px; margin-bottom:20px; font-weight:600; font-size:1.25rem; color:#000; transition: .3s;}
#con .tit01::before {display:block; position:absolute; top:50%; left:0; width:23px; height:23px; background:url(../images/common/i_tit_01.svg) no-repeat center center; transform: translateY(-50%);}
#con .tit02 {display:block; position:relative; padding-left:25px; margin-bottom:20px; font-weight:600; font-size:1.125rem; color:#142241; transition: .3s;}
#con .tit02::before {display:block; position:absolute; top:calc(0.73125rem - 8px); left:0; width:16px; height:16px; background:url(../images/common/i_tit_02.svg) no-repeat center center;}

@media screen and (max-width: 1600px) {
    #con .tit02 {margin-bottom:15px;}
}

/* 공통 btn */
#con .btnCon {display:flex; height:45px; padding:0 20px; border-radius:5px; align-items: center; justify-content: center; transition: .3s;}
#con .btnCon .txt {display:block; position:relative; padding-left:25px; font-weight:500; font-size:1rem; color:#fff; line-height: 1;}
#con .btnCon .txt::before {display:block; position:absolute; top:50%; left:0; width:20px; height:20px;  transform: translateY(-50%); transition: .3s;}

/* 공통 input */
#con .inCon {display:block; height:45px; padding:10px 20px; background-color: #fff; border:1px solid #E1E4EB; border-radius: 5px; font-size:1rem; font-weight: 500; color:#757B8E; transition: .3s;}
#con .sel {display:block; width:120px; height:45px; padding:10px 40px 10px 10px; border:1px solid #E1E4EB; border-radius: 5px; box-sizing: border-box; font-size:0.875rem; font-weight: 500; color:#757B8E; transition: .3s; background: #fff url(../images/sub/i_sel_arr.svg) no-repeat center right 14px;} 
#con .itemCon {display: flex; gap:5px; align-items: center;}
#con .inCheck {position:relative; width:20px; height:20px; cursor: pointer; border:0; box-sizing: border-box;}
#con .inCheck::before {display:block; position: absolute; top:50%; left:-1px; width:22px; height:22px; background:#fff url(../images/sub/i_check_on.svg) no-repeat center center; transform: translateY(-50%); transition: .3s;}
#con .inCheck::after {display:block; position: absolute; top:50%; left:-1px; width:22px; height:22px; background:#fff url(../images/sub/i_check.svg) no-repeat center center; transform: translateY(-50%) scale(0); opacity:0; transition: .3s;}
#con .inCheck:checked::after {opacity:1; transform: translateY(-50%) scale(1);}
#con .inRadio {position:relative; width:20px; height:20px; cursor: pointer; border:0; box-sizing: border-box;}
#con .inRadio::before {display:block; position: absolute; top:50%; left:-1px; width:22px; height:22px; background:#fff url(../images/sub/i_radio.svg) no-repeat center center; transform: translateY(-50%); transition: .3s;}
#con .inRadio::after {display:block; position: absolute; top:50%; left:-1px; width:22px; height:22px; background:#fff url(../images/sub/i_radio_on.svg) no-repeat center center; transform: translateY(-50%) scale(0); opacity:0; transition: .3s;}
#con .inRadio:checked::after {opacity:1; transform: translateY(-50%) scale(1);}
#con .textarea {width:100%; height:150px; resize: none; transition: .3s;}

/* numList */
#con .numList {display: block; counter-reset:num1;}
#con .numList > li {display: table; word-break: break-all;}
#con .numList > li::before {content:''; display: table-cell; position:relative; padding-right:5px; white-space: nowrap; counter-increment:num1; content:counter(num1, decimal) ".";}

/* pagination */
#pagination {display:flex; margin-top:30px; gap:10px; align-items:center; justify-content: center; transition: .3s;}
#pagination a {display:flex; align-items:center; justify-content: center; width:35px; height:35px; border-radius: 50%; border:1px solid #D2DCED; background-color:#fff; font-size:0.875rem; font-weight:500; color:#000; transition: .3s;}
#pagination a i {display:block; font-size:1.125rem; transition: .3s; transform: scale(1);}
#pagination .paging:hover,
#pagination .paging.active {background-color:#246BEB; color:#fff;}
#pagination .btnNav:hover,
#pagination .btnNav.active {border-color:#717d92;}



/* 첨부파일 */
/* .attch {display: block;}
.attch .attchCon {display: flex; align-items: center;}
.attch .attchCon #inFile {position: absolute; overflow: hidden; width: 1px; height: 1px; border:0; padding:0; margin: -1px; clip: rect(0 0 0 0); transition: .3s;}
.attch .attchCon .inLabel {display: block; height:40px; padding:10px; margin-left:5px; border-radius:5px; background-color:#53AFBD; font-size:1rem; color:#fff; font-weight: 500; cursor: pointer; transition: .3s;}
.attch #fileList > li {margin:10px 0 0 10px;}
.attch #fileList > li:not(:first-child) {margin:2px 0 0 10px;}
.attch #fileList > li .text {position:relative; font-size:1rem; font-weight: 500; color:#757B8E;}
.attch #fileList > li .removeBtn {position: absolute; top:50%; right:-25px; transform: translateY(-50%); font-size:1.25rem;} */