@charset "utf-8";
:root {
    --main_color : #109fe6;
    --main_dark_color : #30328E;
    --col_white : #FFFFFF;
    --col_black : #333333;
    --col_gray : #999999;
    --box-color : #dddddd;
    --col-bg-gray : #F5F6F7;
    --col-bg-sky-blue : #F0F5FF;
    --col-border-2 : #DDDDDD;
    --col-border-3 : #E2E5EA;
}

* {
    margin: 0;
    padding: 0;
}

body, div, dl, dt, dd, ul, ol, li, p, td, input, textarea, button, a, option {
    font-weight: normal;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button,a,option  {
    font-family: "Pretendard Variable";
}

/* 공통정의 */
body {
    direction: 0.5s;
    min-width: 1200px;
}

a:hover {
    text-decoration: none;
}

#loading {
    display: none;
}

.c_gray {
    color: var(--col_gray);
}

.c_blue {
    color: var(--main_color);
}

/* header */
header.wrap-header {
    width: 100%;
    height: 86px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--col-border-3);
    position: sticky;
    left: 0;
    top: 0;
    background-color: var(--col_white);
    z-index: 100;
}

header.wrap-header .wrap-header-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 24px;
    align-items: center;
    height: 100%;
}

header.wrap-header .inner-header-menu {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-left: auto;
}

header.wrap-header .wrap-header-logo {
    width: auto;
    display: flex;
    align-items: center;
    flex-direction: row;
}

header.wrap-header .wrap-header-logo img {
    width: 237px;
}

header.wrap-header .wrap-top-menu {
    display: flex;
    flex-direction: row;
    flex: 1 1 0%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

header.wrap-header .nav-item-link {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.125rem;
    padding: 12px 16px;
    color: var(--col_black);
    height: 86px;
    box-sizing: border-box;
    font-family: "Pretendard Variable";
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

header.wrap-header .nav-item-icon {
    height: 24px;
    width: 24px;
}

header.wrap-header .nav-item-link:hover,
header.wrap-header .wrap-top-menu-item.on button.nav-item-link {
    color: var(--main_color) !important;
}

header.wrap-header .wrap-top-icons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-left: 12px;
}

header.wrap-header .wrap-top-icons img {
    width: 24px;
}

header.wrap-header .nav-children {
    display: none;
}

header.wrap-header .nav-children .nav-children-container {
    display: flex;
    flex-direction: row;
    width: 1176px;
    margin: 0 auto;
    padding: 40px 24px 64px;
    box-sizing: border-box;
    gap: 24px;
}

header.wrap-header .nav-children .nav-children-container .nav-children-banner {
    width: 40%;
    display: flex;
    flex-direction: column;
}

header.wrap-header .nav-children .nav-children-container .nav-children-content {
    display: flex;
    flex-direction: row;
    width: 60%;
    box-sizing: border-box;
    gap: 24px;
}

header.wrap-header .nav-children .nav-children-container .nav-children-content .nav-children-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    width: 142px;
}

header.wrap-header .nav-children .nav-children-container .nav-children-content .nav-children-items .nav-children-title {
    font-weight: 700;
    color: var(--col_black);
}

header.wrap-header .nav-children .nav-children-container .nav-children-content .nav-children-items .nav-item-link {
    font-size: 14px;
    height: auto;
    padding: 0;
    font-weight: 500;
    justify-content: start;
}

header.wrap-header .wrap-top-menu-item:hover .nav-children {
    display: block;
    position: absolute;
    left: 0;
    top: 73px;
    height: auto;
    background-color: var(--col_white);
    border-bottom: 1px solid var(--col-bg-sky-blue);
    width: 100%;
}

/* myinfo style */
#wrap-myinfo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--col-bg-sky-blue);
}

#wrap-myinfo .wrap-myinfo-container {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 0 12px;
    box-sizing: border-box;
    max-width: 1176px;
    width: 100%;
    margin: 0 auto;
    align-items: center;
}

#wrap-myinfo .wrap-myinfo-container h5 {
    margin: 0;
    padding: 0;
}

#wrap-myinfo .wrap-myinfo-container .wrap-myinfo-btns {
    display: flex;
    flex-direction: row;
    gap: 6px;
    margin-left: auto;
    font-size: 11px;
}

/* footer style */
footer {
    width: 100%;
    height: auto;
    padding: 30px 0;
    border-top: 1px solid var(--Grey-400, #848893);
}

footer .innerbox {
    display: flex;
    justify-content: space-between;
    width: 1200px;
    margin: 0 auto;
}

footer .innerbox img {
    height: fit-content;
    object-fit: scale-down;
}

footer .innerbox .address_box {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

footer .innerbox .footer_menu {
    display: flex;
    gap: 8px;
}

footer .innerbox .footer_menu li,
footer .innerbox .footer_menu li a {
    color: #000;
    text-align: center;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: var(--typo-letter-spacing-0, 0);
}

footer .innerbox .select_box select {
    color: #fff;
    padding: 5px;
    width: 150px;
    border-radius: 6px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

footer .innerbox .select_box button {
    width: 30px;
    aspect-ratio: 1;
    margin-left: 5px;
}

#wrap {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 24px 0;
}

/* left menu */
#wrap_left_menu {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 0;
    box-sizing: border-box;
}

#wrap_left_menu .inner-left-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#wrap_left_menu .inner-left-menu .left_menu_title {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--col-border-3);
    background-color: var(--main_dark_color);
    border-radius: 12px;
    padding: 24px 16px;
    box-sizing: border-box;
}

#wrap_left_menu .inner-left-menu .left_menu_title span {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--col_white);
}

#wrap_left_menu .inner-left-menu .left_sub_menu {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    margin: 12px 0;
    overflow: hidden;
    padding: 0;
}

#wrap_left_menu .inner-left-menu .left_sub_menu li {
    display: flex;
    flex-direction: row;
    list-style: none;
    box-sizing: border-box;
    align-items: center;
    padding: 12px 16px;
    background-color: var(--col-bg-gray);
    border-bottom: 1px solid var(--col-border-3);
}

#wrap_left_menu .inner-left-menu .left_sub_menu li:last-child {
    border: none;
}

#wrap_left_menu .inner-left-menu .left_sub_menu li a {
    color: var(--col_black);
    font-weight: 500;
    font-size: 14px;
    width: 100%;
    height: 100%;
    display: flex;
    box-sizing: border-box;
}

#wrap_left_menu .inner-left-menu .left_sub_menu li:hover {
    background-color: var(--main_color);
}

#wrap_left_menu .inner-left-menu .left_sub_menu li:hover a {
    color: var(--col_white);
}

/* right quick menu */
#quickmenu {
    position: sticky;
    top: 80px;
    box-sizing: border-box;
    border: 1px solid var(--col-border-3);
}

/* center css */
.box_body_center {
    padding: 48px 0;
    box-sizing: border-box;
}

.box_body_center .sub-title {
    padding: 16px 12px;
    height: auto;
    margin: 0;
    box-sizing: border-box;
    border-bottom: 1px solid var(--col-border-3);
}

#btn_top {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 10;
}

/* table style */
.tbl_normal {
    width: 100%;
    font-size: 12px;
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--main_color);
    border-left: 1px solid var(--col-border-3);
}

.tbl_normal th {
    font-size: 12px;
    text-align: center;
    padding: 8px 12px;
    background-color: var(--col-bg-sky-blue);
    color: var(--col_black);
    font-weight: 600;
    border-bottom: 1px solid var(--col-border-3);
    border-right: 1px solid var(--col-border-3);
}

.tbl_normal td {
    font-size: 12px;
    text-align: left;
    padding: 8px 12px;
    background-color: var(--col_white);
    color: var(--col_black);
    font-weight: 500;
    border-bottom: 1px solid var(--col-border-3);
    border-right: 1px solid var(--col-border-3);
}

.tbl_normal tr:hover td {
    background-color: var(--col-bg-gray);
}

/* button style */
.sky_btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--col-border-3);
    border-radius: 12px;
    background-color: var(--col-bg-sky-blue);
}

.sky_btn:hover {
    color: var(--col_white);
    background-color: var(--main_dark_color);
}

.list_btn {
    width: auto;
    display: inline-block;
    padding: 8px 21px;
    background-color: var(--col-bg-sky-blue);
    border-radius: 6px;
    font-weight: 600;
}

.list_btn:visited {
    color: var(--col_black);
}

.list_btn:hover {
    background-color: var(--main_color);
    color: var(--col_white);
    cursor: pointer;
}

/* tabbar style */
.tabbar_bid {
    display: flex;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    border-bottom: 1px solid #ddd;
}

.tabbar_bid ul {
    list-style: none;
    box-sizing: border-box;
    width: auto;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    border-left: 1px solid var(--main_color);
    border-right: 1px solid var(--main_color);
    border-top: 1px solid var(--main_color);
}

.tabbar_bid ul li {
    padding: 12px 24px;
    display: flex;
    flex-direction: row;
    font-weight: 600;
    font-size: 14px;
    border-right: 1px solid #ddd;
    background-color: var(--col-bg-gray);
}

.tabbar_bid ul li a {
    color: var(--col_gray);
}

.tabbar_bid ul li:last-child {
    border-right: none;
}

.tabbar_bid ul li:hover,
.tabbar_bid ul li.tc-selected {
    background-color: var(--main_color);
}

.tabbar_bid ul li:hover a,
.tabbar_bid ul li.tc-selected a {
    color: var(--col_white);
}

/* paging style */
#box_paging_new {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

#box_paging_new a {
    padding: 4px 12px;
    border: 1px solid var(--col-bg-sky-blue);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    box-sizing: border-box;
}

#box_paging_new a:hover {
    background-color: var(--main_dark_color);
    color: var(--col_white);
}

#box_paging_new strong {
    padding: 4px 12px;
    border: 1px solid var(--col-bg-sky-blue);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: var(--main_dark_color);
    color: var(--col_white);
    box-sizing: border-box;
}

/* search style */
.input_small {
    width: 60px;
}

.input_normal {
    width: 120px;
}

.input_medium {
    width: 150px;
}

.input_large {
    width: 200px;
}

/* etc style */
.wrap-dim {
    position: absolute;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.5);
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.panel {
    box-sizing: border-box;
    padding: 16px 26px;
    margin: 0;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
}

.panel h4 {
    font-size: 1.25rem;
    color: var(--col_black);
    font-weight: 600;
}

.wrap-count {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 0;
    align-items: center;
    height: auto;
}

.wrap-count span {
    font-weight: 600;
    font-size: 13px;
}

.box_body_content {
    box-sizing: border-box;
}

.box_list_btns {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 30px;
    line-height: 30px;
    gap: 12px;
    box-sizing: border-box;
}
.box_list_btns a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px 16px;
    border-radius: 6px;
    gap: 4px;
}

.box-page-count {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
}

.wrap-list-header {
    padding: 12px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.button {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px 16px;
    border-radius: 6px;
    gap: 4px;
    width: auto;
    height: auto;
    font-size: 12px;
    border: 1px solid var(--col-border-3);
    background-color: var(--col-bg-sky-blue);
    color: var(--col_black);
    cursor: pointer;
}

.button:hover, .button:hover a {
    background-color: var(--main_color);
    color: var(--col_white);
}

.button:active, .button:active a {
    background-color: var(--main_dark_color);
    color: var(--col_white);
}

.button.blue, .button.blue a {
    background-color: var(--main_color);
    color: var(--col_white);
}