@charset "UTF-8";

:root {
    --color1: #3258A6;
    --color2: #3264A6;
    --color3: #3F8EBF;
    --color4: #50A0BF;
    --color5: #E8F8FF;
    --color6: #3F3F3F;
    --color7: #FFFFFF;
}

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: var(--color7);
}

/********** index **********/


.main_container {
    padding-top: 80px;
    padding-bottom: 80px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    min-height: 700px;
}

.main_small_container {
    margin: 0 10px;
}

.bbs_write {
    text-align: right;
    margin-bottom: 20px;
}

.bbs_write a {
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    padding: 5px 10px;
    color: var(--color6);
    background-color: var(--color7);
    border: solid 1px var(--color2);
    border-radius: 5px;
    margin: 0 1px;
    transition-property: background, color;
    transition-duration: 0.1s;
    transition-timing-function: linear;
}

.bbs_write a:hover {
    color: var(--color7) !important;
    background-color: var(--color2);
}

.bbs_table {
    width: 100%;
    border-collapse: collapse;
    border-top: solid 1px var(--color1);
    border-bottom: solid 1px var(--color1);
}

.bbs_table th {
    padding: 10px 5px;
    text-align: center;
    font-size: 20px;
    background-color: var(--color2);
    color: var(--color5);
}

.bbs_table td {
    text-align: center;
    font-size: 18px;
    border-top: solid 1px var(--color3);
    background-color: var(--color7);
    color: var(--color6);
}

.bbs_table th:nth-child(1),
.bbs_table td:nth-child(1) {
    width: 8%;
}

.bbs_table th:nth-child(2),
.bbs_table td:nth-child(2) {
    width: 52%;
}

.bbs_table th:nth-child(3),
.bbs_table td:nth-child(3) {
    width: 12%;
}

.bbs_table th:nth-child(4),
.bbs_table td:nth-child(4) {
    width: 18%;
}

.bbs_table td:nth-child(2) {
    text-align: left;
}

.bbs_table a {
    padding: 5px;
    margin: 5px 0;
    text-decoration: none;
    color: var(--color6);
    display: block;
    transition-property: color;
    transition-duration: 0.1s;
    transition-timing-function: linear;
}

.bbs_table a:hover {
    color: var(--color4);
}

.page_container {
    margin-top: 20px;
    padding: 0 10px;
    display: flex;
    justify-content: center;
}

.page_container a {
    text-decoration: none;
    color: var(--color6);
    font-size: 15px;
    padding: 5px 10px;
    margin: 0 2px;
    background-color: var(--color7);
    transition-property: background, color;
    transition-duration: 0.1s;
    transition-timing-function: linear;
}

.page_container a:hover {
    background-color: var(--color3);
    color: var(--color5);
}

.disable {
    pointer-events: none;
}

.now {
    background-color: var(--color1) !important;
    color: var(--color5) !important;
    pointer-events: none;
}

.block {
    display: none;
}

footer {
    background-color: var(--color6);
}

.footA {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 20px;
    color: var(--color7);
    font-size: 15px;
}


/********** User **********/


.user_container {
    padding-top: 100px;
    padding-bottom: 200px;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

.user_small_container {
    margin: 0 10px;
    border: solid 1px var(--color6);
    border-radius: 10px;
    padding: 40px 10px 30px 10px;
    box-shadow: 2px 2px 2px 1px var(--color6);
}

.user_small_container h1 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 80px;
    color: var(--color6);
}

.user_small_container h2 {
    text-align: left;
    font-size: 25px;
    margin-top: 50px;
    margin-bottom: 10px;
    color: var(--color6);
}

.userID,
.userPW,
.userName {
    margin: 0 20px;
}

.input {
    width: 100%;
    padding: 5px 0;
    border: none;
    border-bottom: solid 1px var(--color6);
    font-size: 20px;
    color: var(--color6);
}

.bt_user {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    color: var(--color7);
    font-size: 20px;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    padding: 10px 15px;
    background-color: var(--color2);
    transition-property: background;
    transition-duration: 0.1s;
    transition-timing-function: linear;
}

.bt_user:hover {
    cursor: pointer;
    background-color: var(--color4);
}


/********** view **********/


.view_container {
    padding-top: 100px;
    padding-bottom: 100px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    min-height: 700px;
}

.view_small_container {
    margin: 0 10px;
    padding: 30px;
    border: solid 1px var(--color6);
    border-radius: 5px;
}

.view_header {
    display: flex;
    margin-bottom: 30px;
}

.view_id,
.view_date {
    font-size: 15px;
    margin-right: 20px;
    color: var(--color6);
}

.view_title {
    font-size: 30px;
    margin-bottom: 50px;
    color: var(--color6);
}

.view_menu {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.view_menu a {
    text-decoration: none;
    font-size: 18px;
    margin: 0 5px;
    padding: 5px 10px;
    border: solid 1px var(--color2);
    color: var(--color6);
    background-color: var(--color7);
    border-radius: 5px;
    transition-property: background, color;
    transition-duration: 0.1s;
    transition-timing-function: linear;
}

.view_menu a:hover {
    color: var(--color7);
    background-color: var(--color2);
}

.view_files {
    border-top: solid 1px #3F3F3F;
    margin-top: 30px;
    padding-top: 20px;
}

.view_file {
    display: flex;
}

.view_file p {
    font-size: 15px;
    margin-right: 10px;
    padding: 5px 0;
    color: var(--color6);
}

.view_file a {
    font-size: 15px;
    color: var(--color6);
    text-decoration: none;
    padding: 5px 0;
    transition-property: color;
    transition-duration: 0.1s;
    transition-timing-function: linear;
}

.view_file a:hover {
    color: var(--color4);
}


/********** Write **********/


.write_container {
    padding-top: 80px;
    padding-bottom: 80px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    min-height: 700px;
}

.write_small_container {
    margin: 0 10px;
}

.write_small_container h1 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 30px;
    color: var(--color6);
}

.write_title {
    border: none;
    border-bottom: solid 1px var(--color6);
    color: var(--color6);
    padding: 5px 0px;
    font-size: 25px;
    width: 100%;
    margin-bottom: 20px;
}

#write_content {
    width: 100%;
    min-height: 500px;
}

.ConC {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    padding-top: 10px;
    border-top: solid 1px var(--color6);
}

.ConC .bbs_file {
    margin: 5px 0;
    color: var(--color6);
}

.ConD {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.ConD .BT {
    color: var(--color6);
    font-size: 18px;
    font-weight: bold;
    border: solid 1px var(--color2);
    border-radius: 5px;
    padding: 5px 10px;
    margin: 0 10px;
    background-color: var(--color7);
    transition-property: background, color;
    transition-duration: 0.1s;
    transition-timing-function: linear;
}

.ConD .BT:hover {
    cursor: pointer;
    color: var(--color7);
    background-color: var(--color2);
}