/* common */
*{margin: 0; padding: 0; list-style: none;  box-sizing: border-box;}
.flex{display: flex;}
.flex-center{justify-content: center; align-items: center;}
iframe{opacity:0; width: 1px; height: 1px;}

body {
    min-height: 100vh;
    background-color: #efedee; height: 100vh;
    @supports (-webkit-touch-callout: none) {
        min-height: -webkit-fill-available;
    }
}

/* login */
.login{width: 90%; max-width: 500px; height: auto; background-color: #2c2f35; border-radius: 8px; padding: 2%5%; box-sizing: border-box; box-shadow: 5px 5px 5px rgba(0,0,0,0.7);}
.login h1{color: white; font-size: 40px; text-align: center; padding-top: 50px;}
.login form{flex-wrap: wrap; gap: 20px; margin-top: 50px; margin-bottom: 80px;}
.login form input{width: 100%; height: 50px; border-radius: 50px; padding: 0 30px; outline: none;}
.login .submit{width: 100%; height: 50px; border-radius: 50px; outline: none; background-color: #2db656; line-height: 50px; text-align: center; color: white; font-size: 20px; font-weight: bold; cursor: pointer; box-shadow: 1px 5px 5px rgba(0,0,0,0.7);}

/* board */
.main{width: 100%; height: 100vh; overflow: hidden;}

.main .side{width: 10%; height: 100vh; background-color: #2c2f35; }
.main .con{width: 90%; height: 100vh; margin: auto;}

.main .side p{color: white; padding: 20px;}
.main .side li{height: 30px; line-height: 30px; text-indent: 20px; cursor: pointer; color: white;}
.main .side li.active{background-color: #efedee; color:#2c2f35;}

.main .con h1{padding: 10px 20px 20px 3%;}
.main .con .table{width: 95%; height: 90%; background-color: white; border-top: 3px solid #2db656;  margin: auto;}
.main .con .table .searchlist{height: 100px; padding-top: 30px; padding-left: 1%;}
.main .con .table .searchlist span{line-height: 22px; display: inline-block; margin-right:  10px;}
.main .con .table .searchlist button{line-height: 30px; height: 30px; background-color: #2db656; color: white; text-align: center; display: inline-block; width: 50px; border-radius: 2px; outline: none; border: 0; cursor: pointer;}
.main .con .table .searchlist input{width: 151px; height: 22px; border-radius: 8px; outline: none; border: 1px solid #d9d9d9; margin-right: 50px; color: #3c3d3f; padding:  4px 11px;}
.main .con .t table{width: 98%; margin: auto; }
.main .con .t table tr{display: flex; justify-content: space-between;}
.main .con .t table th{display: block; height: 30px; line-height: 30px; padding: 0 10px;}
.main .con .t table th:nth-child(1){width: 10%; border: 1px solid #2c2f35; border-right: 0; text-align: left;}
.main .con .t table th:nth-child(2){width: 20%; border: 1px solid #2c2f35; border-right: 0; text-align: left;}
.main .con .t table th:nth-child(3){width: 20%; border: 1px solid #2c2f35; border-right: 0; text-align: right;}
.main .con .t table th:nth-child(4){width: 20%; border: 1px solid #2c2f35; border-right: 0; text-align: right;}
.main .con .t table th:nth-child(5){width: 30%; border: 1px solid #2c2f35; text-align: right;}
.main .con .t table td{display: block; height: 30px; line-height: 30px; padding: 0 10px;}
.main .con .t table td:nth-child(1){width: 10%; border: 1px solid #2c2f35; border-top:0; border-right: 0; text-align: left;}
.main .con .t table td:nth-child(2){width: 20%; border: 1px solid #2c2f35; border-top:0; border-right: 0; text-align: left;}
.main .con .t table td:nth-child(3){width: 20%; border: 1px solid #2c2f35; border-top:0; border-right: 0; text-align: right;}
.main .con .t table td:nth-child(4){width: 20%; border: 1px solid #2c2f35; border-top:0; border-right: 0; text-align: right;}
.main .con .t table td:nth-child(5){width: 30%; border: 1px solid #2c2f35; border-top:0; text-align: right;}

.main .con .tm table{width: 98%; margin: auto; }
.main .con .tm table tr{display: flex; justify-content: space-between;}
.main .con .tm table th{display: block; height: 30px; line-height: 30px; padding: 0 10px;}
.main .con .tm table th:nth-child(1){width: 10%; border: 1px solid #2c2f35; border-right: 0; text-align: left;}
.main .con .tm table th:nth-child(2){width: 20%; border: 1px solid #2c2f35; border-right: 0; text-align: left;}
.main .con .tm table th:nth-child(3){width: 20%; border: 1px solid #2c2f35; border-right: 0; text-align: right;}
.main .con .tm table th:nth-child(4){width: 10%; border: 1px solid #2c2f35; border-right: 0; text-align: right;}
.main .con .tm table th:nth-child(5){width: 10%; border: 1px solid #2c2f35; border-right: 0; text-align: right;}
.main .con .tm table th:nth-child(6){width: 10%; border: 1px solid #2c2f35; border-right: 0; text-align: right;}
.main .con .tm table th:nth-child(7){width: 10%; border: 1px solid #2c2f35; border-right: 0; text-align: right;}
.main .con .tm table th:nth-child(8){width: 10%; border: 1px solid #2c2f35; text-align: right;}
.main .con .tm table td{display: block; height: 30px; line-height: 30px; padding: 0 10px;}
.main .con .tm table td:nth-child(1){width: 10%; border: 1px solid #2c2f35; border-top:0; border-right: 0; text-align: left;}
.main .con .tm table td:nth-child(2){width: 20%; border: 1px solid #2c2f35; border-top:0; border-right: 0; text-align: left;}
.main .con .tm table td:nth-child(3){width: 20%; border: 1px solid #2c2f35; border-top:0; border-right: 0; text-align: right;}
.main .con .tm table td:nth-child(4){width: 10%; border: 1px solid #2c2f35; border-top:0; border-right: 0; text-align: right;}
.main .con .tm table td:nth-child(5){width: 10%; border: 1px solid #2c2f35; border-top:0; border-right: 0; text-align: right;}
.main .con .tm table td:nth-child(6){width: 10%; border: 1px solid #2c2f35; border-top:0; border-right: 0; text-align: right;}
.main .con .tm table td:nth-child(7){width: 10%; border: 1px solid #2c2f35; border-top:0; border-right: 0; text-align: right;}
.main .con .tm table td:nth-child(8){width: 10%; border: 1px solid #2c2f35; border-top:0; text-align: right;}


.main .con .table .userlist{height: 100px; padding-top: 30px; padding-left: 1%;}
.main .con .table .userlist button{line-height: 30px; height: 30px; background-color: #2db656; color: white; text-align: center; display: inline-block; width: auto; border-radius: 2px; outline: none; border: 0; cursor: pointer; padding: 0 5px;}
.main .con .u table{width: 98%; margin: auto; }
.main .con .u table tr{display: flex; justify-content: space-between;}
.main .con .u table th{display: block; height: 30px; line-height: 30px; padding: 0 10px;}
.main .con .u table th:nth-child(1){width: 10%; border: 1px solid #2c2f35; border-right: 0; text-align: left;}
.main .con .u table th:nth-child(2){width: 20%; border: 1px solid #2c2f35; border-right: 0; text-align: left;}
.main .con .u table th:nth-child(3){width: 20%; border: 1px solid #2c2f35; border-right: 0; text-align: left;}
.main .con .u table th:nth-child(4){width: 10%; border: 1px solid #2c2f35; border-right: 0; text-align: center;}
.main .con .u table th:nth-child(5){width: 20%; border: 1px solid #2c2f35; border-right: 0; text-align: right;}
.main .con .u table th:nth-child(6){width: 10%; border: 1px solid #2c2f35; border-right: 0; text-align: center;}
.main .con .u table th:nth-child(7){width: 10%; border: 1px solid #2c2f35; text-align: center;}
.main .con .u table td{display: block; height: 30px; line-height: 30px; padding: 0 10px;}
.main .con .u table td:nth-child(1){width: 10%; border: 1px solid #2c2f35; border-top:0; border-right: 0; text-align: left;}
.main .con .u table td:nth-child(2){width: 20%; border: 1px solid #2c2f35; border-top:0; border-right: 0; text-align: left;}
.main .con .u table td:nth-child(3){width: 20%; border: 1px solid #2c2f35; border-top:0; border-right: 0; text-align: left;}
.main .con .u table td:nth-child(4){width: 10%; border: 1px solid #2c2f35; border-top:0; border-right: 0; text-align: center;}
.main .con .u table td:nth-child(5){width: 20%; border: 1px solid #2c2f35; border-top:0; border-right: 0; text-align: right;}
.main .con .u table td:nth-child(6){width: 10%; border: 1px solid #2c2f35; border-top:0; border-right: 0; text-align: center; cursor: pointer;}
.main .con .u table td:nth-child(7){width: 10%; border: 1px solid #2c2f35; border-top:0; text-align: center; cursor: pointer;}

.main .con .table form{height: 500px;}
.main .con .table form table{width: 100%; max-width: 700px;}
.main .con .table form table tr{height: 50px;}
.main .con .table form table td{text-align: center;}
.main .con .table form table input{border: 1px solid #d9d9d9; outline: none; width: 100%; height: 50px; line-height: 50px; margin-top: 10px; padding: 20px;}
.main .con .table form table div{width: 45%; padding: 0 5px; height:50px; line-height: 50px; border:0; margin: auto; margin-top: 50px; cursor: pointer; display: inline-block;}
.main .con .table form table div:nth-child(1){color:black; margin-right: 50px; background-color: #d9d9d9;}
.main .con .table form table div:nth-child(2){color:white; background-color: #2db656;}

.m_menu {display: none; }
.notice{padding: 2% 1%;}
/* 반응형 */
@media screen and (max-width: 768px) {
    .main{flex-wrap: wrap;}
    .main .side{width: 100%; height: auto;}
    .main .con, .main .con .table{width: 100%;}
    .main .con table{width: 95%;}

    .m_menu {display: block; cursor: pointer;}
    .nav {display: none;}


    /* 계정 등록 */
    .main .con .u table th:nth-child(1){width: 10%;}
    .main .con .u table th:nth-child(2){width: 30%;}
    .main .con .u table th:nth-child(3){width: 20%; display: none;}
    .main .con .u table th:nth-child(4){width: 30%; }
    .main .con .u table th:nth-child(5){width: 20%; display: none;}
    .main .con .u table th:nth-child(6){width: 10%; display: none;}
    .main .con .u table th:nth-child(7){width: 30%;}
    .main .con .u table td:nth-child(1){width: 10%;}
    .main .con .u table td:nth-child(2){width: 30%;}
    .main .con .u table td:nth-child(3){width: 20%; display: none;}
    .main .con .u table td:nth-child(4){width: 30%; }
    .main .con .u table td:nth-child(5){width: 20%; display: none;}
    .main .con .u table td:nth-child(6){width: 10%; display: none;}
    .main .con .u table td:nth-child(7){width: 30%;}

    .main .con .table form table div{width: 30%;}

    .main .con .table .searchlist{display: flex; justify-content: space-around; flex-wrap: wrap;}

    /* 실적 */
    .main .con .tm table th:nth-child(1){width: 10%; }
    .main .con .tm table th:nth-child(2){width: 20%; }
    .main .con .tm table th:nth-child(3){width: 20%; }
    .main .con .tm table th:nth-child(4){width: 15%; display: none;}
    .main .con .tm table th:nth-child(5){width: 20%; }
    .main .con .tm table th:nth-child(6){width: 10%; display: none;}
    .main .con .tm table th:nth-child(7){width: 10%; display: none;}
    .main .con .tm table th:nth-child(8){width: 30%; }
    .main .con .tm table td:nth-child(1){width: 10%; }
    .main .con .tm table td:nth-child(2){width: 20%; }
    .main .con .tm table td:nth-child(3){width: 20%; }
    .main .con .tm table td:nth-child(4){width: 15%; display: none;}
    .main .con .tm table td:nth-child(5){width: 20%; }
    .main .con .tm table td:nth-child(6){width: 10%; display: none;}
    .main .con .tm table td:nth-child(7){width: 10%; display: none;}
    .main .con .tm table td:nth-child(8){width: 30%; }
    .main .con .table .searchlist input{margin: 0; }
    .main .con .table .searchlist span{font-size: 12px;}

    .main .con .t table{font-size: 12px;}
    .main .con .t table td{padding: 0 5px;}
}