/* CSS 리셋 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    word-break: keep-all;
    text-decoration: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, hgroup, menu, nav, section {
    display: block;
}
html {font-size:16px;}
body {line-height: 1; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; color:#222;}
input, textarea, select, button {font-family: 'Pretendard', 'Noto Sans KR', sans-serif; margin: 0;}
button {cursor: pointer; background: none; border: 0; padding:0; margin:0;}

ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a {color:#222;}


/* 공통 CSS */

:root {
    --main-color :#122462;
    --indigo_light : #6775CE;
    --orange : #FFB100;
    --red_orange : #FF6446;
    --light_blue : #3080E2;
    --red : #CC1E39;
    --mint : #36BBC4;
    --gray_blue : #48698A;
    --midnight_blue : #848DB9;
    --tomato : #D64242;

    /* weight */
    --weight_extra_bold: 900;
    --weight_bold: 800;
    --weight_semi_bold: 700;
    --weight_medium: 600;
    --weight_regular: 500;
    --weight_normal: 400;
    --weight_light: 300;
    --weight_extra_light: 200;
    --weight_ultra_thin: 100;
}

.container {width:1280px; margin:0 auto;}
.small_container {width:630px; margin:0 auto;}
.ui-icon {display: none;}
.orange {color:var(--orange);}
.main_footer_content {display: none !important;}

/* 정렬 */

.text_left {text-align: left !important;}
.text_center {text-align: center;}


/* 폰트 웨이트 */

.medium {font-weight:var(--weight_medium);}
.bold {font-weight:var(--weight_bold);}
.semi_bold {font-weight: var(--weight_semi_bold);}


/* 페이지 로케이션 */

.page_location_box {display: flex; justify-content: flex-end;}
.page_location {display: flex; align-items: center;}
.page_location span {font-size:20px; margin-right:10px;}
.page_location span img {height:15px;}
.page_location p {font-size:20px; font-weight:var(--weight_bold);}


/* 공통 타이틀 */

.circle_title {font-size:30px; font-weight: var(--weight_bold); padding-left:30px; margin-bottom:30px; position: relative; z-index: 1;}
.circle_title:before {content: ''; display: block; width:49px; height:49px; background: #FFEDE0; border-radius: 100%; position: absolute; left:0; bottom:0; z-index: -1;}
.square_title {font-size:30px; font-weight: var(--weight_bold); padding-left:30px; margin-bottom:30px; position: relative;}
.square_title:before {content: ''; display: block; width:18px; height:18px; background: #5F70D9;  position: absolute; left:0; top:50%; transform: translateY(-50%);}
.member_title {text-align: center;}
.member_title h3 {font-size:40px; font-weight:var(--weight_bold);}
.sub_title {text-align: center;}
.sub_title h3 {font-size:62px; font-weight:var(--weight_bold);}


/* 플렉스 */

.d_flex {display:flex;}
.space_between {justify-content: space-between;}
.align_center {align-items: center;}
.justify_center {justify-content: center;}
.flex_end {justify-content: flex-end;}
.flex_start {align-items: flex-start;}


/* 공통 인풋 */

.input {padding:14px 20px; font-size:20px; border:1px solid #ddd; background: #fff; box-sizing: border-box;}
.input::placeholder {color:#999;}
.textarea {padding:20px; font-size:20px; background: #fff; border:1px solid #ddd; box-sizing: border-box;}
.textarea::placeholder {color:#999;}
.filebox .upload-name {display:inline-block; border:0; font-size:20px; cursor: default; background: none;}
.filebox label {display:inline-block;padding:14px 40px;color:#222; background: #fff; border:1px solid #000; cursor:pointer; font-size:20px; font-weight: var(--weight_medium); box-sizing: border-box; margin-right:20px;}
.filebox input[type="file"] {position:absolute;width:0;height:0;padding:0;overflow:hidden;border:0;}
.select {padding:14px 20px; font-size:20px; border:1px solid #ddd; background: #fff; box-sizing: border-box;}
.gray_input {border:0; background: #eee;}


/* 공통 버튼 */

.btn_box {display: flex; justify-content: center; align-items: center;}
.round_btn {font-size:24px; display: inline-block; font-weight:var(--weight_bold); color:#fff; background: var(--main-color); padding:14px 50px; border-radius: 50px;}
.round_btn_g {font-size:24px; display: inline-block; font-weight:var(--weight_bold); color:#222; background: #ddd; padding:14px 50px; border-radius: 50px;}
.sub_btn {font-size:20px; display: inline-block; font-weight:var(--weight_medium); color:#fff; background: var(--main-color); padding:16px 40px; border: 0;}
.white_btn {font-size:20px; display: inline-block; font-weight:var(--weight_medium); color:#222; background: #fff; padding:16px 30px; border: 1px solid #000;}
.arrow_btn {font-size:24px; color:var(--red_orange); background: url(../img/arrow_btn.png) no-repeat right bottom; padding-bottom: 15px; padding-right:40px;}
.arrow_btn b {font-weight:var(--weight_bold);}
.print_btn {font-size:16px; padding:5px 12px; border:1px solid #999; background: #f9f9f9;}


/* 게시판 css */

.board_content .top_banner {width:100%; height: 150px; display: flex; justify-content: center; align-items: center; text-align: center; margin-bottom:100px;}
.board_content .top_banner p {font-size:20px; color:#fff; line-height: 1.5; position: relative;}
.board_content .top_banner .mint_icon::before {content: ''; display: block; background: url(../img/top_banner_mint_1.png) no-repeat; position: absolute; bottom:30px; left:-100px; width: 56px; height: 50px;}
.board_content .top_banner .mint_icon::after {content: ''; display: block; background: url(../img/top_banner_mint_2.png) no-repeat; position: absolute; top:30px; right:-100px;  width: 56px; height: 50px;}
.board_content .top_banner .indigo_icon::before {content: ''; display: block; background: url(../img/top_banner_indigo_1.png) no-repeat; position: absolute; bottom:30px; left:-100px; width: 56px; height: 50px;}
.board_content .top_banner .indigo_icon::after {content: ''; display: block; background: url(../img/top_banner_indigo_2.png) no-repeat; position: absolute; top:30px; right:-100px;  width: 56px; height: 50px;}
.board_content .board_box {width:100%; border-top:1px solid #000; margin-bottom:80px;}
.board_content .board_box ul {margin-bottom:50px;}
.board_content .board_box ul li {display: flex; justify-content: space-between; align-items: center; padding:35px 50px; border-bottom: 1px solid #ddd;}
.board_content .board_box ul li .left {display: flex; align-items: center; }
.board_content .board_box ul li .left .board_category {display:block; width:110px; margin-right:50px; font-size:24px; color:var(--light_blue); text-align: center;}
.board_content .board_box ul li .left .board_subject {font-size:24px; padding-left:20px; display: block; width:640px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.board_content .board_box ul li .left .board_num {display:block; width:60px; text-align:center; font-size:20px;}
.board_content .board_box ul li .right {display: flex; align-items: center; }
.board_content .board_box ul li .right .board_date {font-size:20px; color:#666;}
.board_content .board_box ul li .right .board_status {margin-left:80px; font-size:20px; padding:8px 0px; width: 100px; text-align: center; border:1px solid #666; background: #f9f9f9; border-radius: 50px;}
.board_content .board_box ul li .right .board_status.answered {border-color:var(--red); background: #FFF5F7; color:var(--red);}
.board_content .board_box ul li .right .board_views {font-size:20px; color:#666; margin-left:30px; padding-left:30px; background: url(../img/board_views_icon.png) no-repeat left center;}
.board_content .board_box .board_pagination {display: flex; justify-content: center; align-items: center; text-align: center;}
.board_content .board_box .board_pagination a.active {font-weight:var(--weight_bold); font-size:16px; text-decoration: underline;}


/* 공통 테이블 */

.table_wrap {overflow: auto;}
.table_wrap::-webkit-scrollbar-track{background-color:#fff;}
.table_wrap::-webkit-scrollbar{height:5px; background-color:#fff;}
.table_wrap::-webkit-scrollbar-thumb{background-color:#999999; border-radius: 100px;}
.table {width:1280px; border-top:1px solid #000;}
.table thead tr th {background: #f9f9f9; color:#8E959F; font-size:18px; font-weight:var(--weight_semi_bold); text-align: center; padding:10px; border:1px solid #ddd; border-top:1px solid #000; vertical-align: middle; line-height: 1.5;}
.table tbody tr td {font-size:20px; padding:30px 20px; border: 1px solid #ddd; text-align: center; background:#fff; line-height: 1.5; vertical-align: middle;}



@media (max-width: 1280px){
    .container {width: 95%; margin:0 auto;}
    .sub_btn, .white_btn {font-size: 16px; padding:15px 10px;}
    .round_btn {font-size:16px;}
    .round_btn_g {font-size:16px;}
    .input {font-size:16px;}
    .textarea {font-size:16px;}
    .select {font-size:16px;}

    .board_content .board_box ul li {padding:35px 10px;}
    .board_content .board_box ul li .left .board_subject {width: 380px; font-size:20px;}

    .table {width: 960px; } 
    .table thead tr th {font-size:16px;}
    .table tbody tr td {font-size:16px; padding:20px 15px;}

    .circle_title {font-size: 22px;}
    .square_title {font-size:22px;}
}

@media (max-width: 768px){
    .small_container {width: 95%; margin:0 auto;}
    .round_btn {font-size:18px;}
    .round_btn_g {font-size:18px;}
    .input {font-size:12px;}
    .textarea {font-size:12px;}
    .select {font-size:12px;}
    .sub_btn, .white_btn {font-size: 14px; padding:15px 10px;}
    .sub_title h3 {font-size:40px; line-height: 1.5;}
    
    .page_location_box {justify-content: center;}
    .page_location span {font-size:16px;}
    .page_location span img {height:10px;}
    .page_location p {font-size:16px;}

    .board_content .board_box {margin-bottom:50px;}
    .board_content .top_banner {margin-bottom:30px; height: 110px;}
    .board_content .top_banner p {font-size:16px; z-index: 1;}
    .board_content .top_banner .indigo_icon::before {width: 33px; height: 30px; background: url(/img/top_banner_indigo_1.png) no-repeat center / cover; left: 20px; bottom:75%; z-index: -1;}
    .board_content .top_banner .indigo_icon::after {width: 33px; height: 30px; background: url(/img/top_banner_indigo_2.png) no-repeat center / cover; right: 20px; top: 75%; z-index: -1;}
    .board_content .top_banner .mint_icon::before {width: 33px; height: 30px; background: url(/img/top_banner_mint_1.png) no-repeat center / cover; left: -44px; bottom:75%; z-index: -1;}
    .board_content .top_banner .mint_icon::after {width: 33px; height: 30px; background: url(/img/top_banner_mint_2.png) no-repeat center / cover; right: -44px; top: 75%; z-index: -1;}

    .board_content .board_box ul li .left {flex-direction: column; align-items: flex-start; width: 60%;}
    .board_content .board_box ul li .left .board_category {width: auto; text-align: left; font-size: 16px; margin-bottom:10px;}
    .board_content .board_box ul li .left .board_subject {padding-left:0; font-size: 18px; width: 100%;}
    .board_content .board_box ul li .right {flex-direction: column; }
    .board_content .board_box ul li .right .board_date {font-size:14px; margin-bottom:10px;}
    .board_content .board_box ul li .right .board_status {font-size:12px; margin-left:0; width: 60px; padding:4px 0px;}

    .filebox label {font-size:16px; padding:10px 20px; margin-bottom:10px;}
    .filebox .upload-name {font-size:13px;}

    .table thead tr th {font-size:14px;}
    .table tbody tr td {font-size:14px;}

    .arrow_btn {font-size:18px;}
}