/*!

__/\\\\\\\\\\\\\\\_______/\\\\\_________/\\\\\\\\\______/\\\________/\\\______/\\\\\\\\\____
 _\/\\\///////////______/\\\///\\\_____/\\\///////\\\___\/\\\_____/\\\//_____/\\\///////\\\__
  _\/\\\_______________/\\\/__\///\\\__\/\\\_____\/\\\___\/\\\__/\\\//_______/\\\______\//\\\_
   _\/\\\\\\\\\\\______/\\\______\//\\\_\/\\\\\\\\\\\/____\/\\\\\\//\\\______\//\\\_____/\\\\\_
    _\/\\\///////______\/\\\_______\/\\\_\/\\\//////\\\____\/\\\//_\//\\\______\///\\\\\\\\/\\\_
     _\/\\\_____________\//\\\______/\\\__\/\\\____\//\\\___\/\\\____\//\\\_______\////////\/\\\_
      _\/\\\______________\///\\\__/\\\____\/\\\_____\//\\\__\/\\\_____\//\\\____/\\________/\\\__
       _\/\\\________________\///\\\\\/_____\/\\\______\//\\\_\/\\\______\//\\\__\//\\\\\\\\\\\/___
        _\///___________________\/////_______\///________\///__\///________\///____\///////////_____

*/

/*
-----------------------------------------------------------------------
contents

01. variables
02. reset
03. header
04. GNB
05. body options
06. title
07. layout
08. footer
09. screen reader
10. captcha
11. html editor
12. table
13. form
14. list
15. pagination
16. modal
17. text
18. background
19. search
20. aside
21. badge
22. card
23. timeline
24. accordion
25. page menu / tab menu
-----------------------------------------------------------------------
*/

/*
-----------------------------------------------------------------------
00. test
-----------------------------------------------------------------------
*/

/*section { border: 1px solid red !important; }*/

/*
-----------------------------------------------------------------------
01. variables
-----------------------------------------------------------------------
*/

:root {
    /* text color */
    --color-brand: #474baa;
    --color-primary: #474baa;
    --color-primary-hover: #3a2c81;
    --color-secondary: #343b4d; /* 464960 */
    --color-secondary-hover: #111;
    /*--color-body: #666;*/
    --color-body: #767676;
    --color-dark: #333;
    --color-black: #101820;
    --color-lavender: #e6eeff;
    /*--color-blue: #305bca;*/
    /*--color-blue: #0064d1;*/
    --color-blue: #0571e3;
    --color-sky: #00c0e9;
    --color-red: #e9443b;
    --color-red-hover: #de1018;
    --color-orange: #ff9f40;
    --color-copper: #d79075;
    --color-gray: #888;
    --color-lightgray: #ccc;
    --color-green: #3c9a17;
    --color-purple: #615cd8;
    --color-border: #ccc;
    --color-border-hover: #aaa;
    --color-lightborder: #e8e8e8;
    --color-darkborder: #6e737f;
    --color-input: #333;
    --color-line: #ddd;
    --color-darkline: #44465c;
    --color-btn: #343b4d;
    --color-btn-hover: #111;
    --color-help: #777;
    --color-link-hover: #000;
    /*--border-radius: 6px;*/
    --border-radius: 10px;
    --form-radius: 6px;
    --bg-main: #ffff;
    --bg-sky: #f3f8fa;
    /*--bg-sky: #d7e1e5;*/
    --bg-gray: #f7f7f7;
    /*--bg-gray: #eee;*/
    --bg-lightgray: #fcfcfc;
    --bg-darkgray: #585e6a;
    --bg-green: #02b402;
    --bg-white: #fff;
    --bg-default: #fff;
    --line-height: 1.47;
    --color-price: #000;
    --color-cust-price: #888;
    --color-discount-rate: #e9443b;
    --color-price-unit: #888;
}

/*
-----------------------------------------------------------------------
02. reset
-----------------------------------------------------------------------
*/

html {
    overflow-y: scroll;
    font-size: 16px;
    font-weight: 400;
    word-break: normal;
    scroll-padding-top: 150px;
}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {
    margin: 0;
    padding: 0;
    border: 0
}
h1, h2, h3, h4, h5, h6 {
    color: var(--color-black);
}
h5, h6, .card-title {
    font-size: 1.125rem /* 18/16 */;
    color: #8b4336;
}
body {
    background-color: var(--bg-default);
    font-weight: 400;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}
ul, dl, dt, dd {
    margin: 0;
    padding: 0;
    list-style: none;
}
legend {
    position: absolute;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -9999em;
    overflow: hidden
}
label, input, button, select, img, .label {
    vertical-align: middle;
    font-size: 1rem;
}
input, button {
    margin: 0;
    padding: 0;
    font-size: 1rem /* 15/16 */;
}

input[type="radio"], span {
    /*vertical-align: middle;*/
}
input[type="radio"] {
    appearance: none;
    border: max(2px, 0.1em) solid gray;
    border-radius: 50%;
    width: 1.25em;
    height: 1.25em;
    /*transition: border 0.5s ease-in-out;*/
}
input[type="radio"]:checked {
    /*border: 0.4em solid tomato;*/
    border: 0.4em solid var(--color-primary);
}
input[type="radio"]:focus-visible {
    outline-offset: max(2px, 0.1em);
    outline: max(2px, 0.1em) dotted var(--color-primary);
}
input[type="radio"]:hover {
    /*box-shadow: 0 0 0 max(4px, 0.2em) lightgray;*/
    cursor: pointer;
}
input[type="radio"]:hover + span {
    cursor: pointer;
}
input[type="radio"]:disabled {
    background-color: lightgray;
    box-shadow: none;
    opacity: 0.7;
    cursor: not-allowed;
}
input[type="radio"]:disabled + span {
    opacity: 0.7;
    cursor: not-allowed;
}

input[type="checkbox"] {
    display: none;
}
input[type="checkbox"] + label {
    display: inline;
    position: relative;
    padding-left: 26px;
    font-size: 0.9375rem  /* 15/16 */;
    color: var(--color-body);
}
input[type="checkbox"] + label::before {
    display: block;
    content: '\e92d';
    font-family: "inspiro-icons", serif;
    font-size: 0.875rem /* 14/16 */;
    width: 20px;
    height: 20px;
    line-height: 1.3;
    text-align: center;
    position: absolute;
    left: 0;
    top: -1px;
    border: 1px solid var(--color-border);
    /*border: 2px solid gray;*/

    border-radius: 50%;
    color: var(--color-lightgray);
    cursor: pointer;
}
input[type="checkbox"]:checked + label::before {
    content: '\e92d';
    font-family: "inspiro-icons", serif !important;
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
input[type="submit"] {
    cursor: pointer;
}
button {
    cursor: pointer;
}

textarea, select {
    font-family: 'Pretendard', dotum, sans-serif;
    font-size: 1rem;
}
select {
    margin: 0;
    background: #fff;
    padding: 7px;
    outline: none;
    border: 1px solid var(--color-border);
    border-radius: var(--form-radius);
    height: 42px;
}
select[disabled], input[disabled], input[readonly] {
    background-color: #f7f7f7;
    color: #767676;
    cursor: not-allowed;
    opacity: 0.7;                  /* 흐리게 보여줌 */
    pointer-events: none;         /* 클릭 이벤트 차단 */
    touch-action: none;           /* 모바일에서의 터치 방지 */
}
p {
    margin: 0;
    padding: 0;
    word-break: break-all;
    color: var(--color-body);
    line-height: var(--line-height);
}
hr {
    display: none
}
pre {
    overflow-x: scroll;
    font-size: 1.1em
}
strong, b {
    font-weight: 500;
}
a {
    text-decoration: none;
    color: currentColor;
    cursor: pointer;
}
a:visited, a:active {
}
a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}
*, :after, :before {
    box-sizing: border-box;
}
section {
    background-color: transparent;
}
input[type=text], input[type=password], textarea, select {
    -webkit-transition: all 0.50s ease-in-out;
    -moz-transition: all 0.50s ease-in-out;
    -ms-transition: all 0.50s ease-in-out;
    -o-transition: all 0.50s ease-in-out;
    outline: none;
    color: var(--color-input);
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, textarea:focus, select:focus, button:focus {
    border-color: var(--color-input);
    outline: 0 !important;
}
.placeholdersjs {
    color: #aaa !important
}
figure {
    padding: 0;
    margin: 0;
}
figure figcaption {
    padding-top: 10px;
    font-size: 0.875rem /* 14/16 */;
    text-align: left;
}
em {
    font-style: normal;
}
.hide {
    display: none;
}
.box-shadow {
    box-shadow: 0 0 35px 0 rgba(154, 161, 171, .2);
}
.inline {
    display: inline;
}
::placeholder {
    color: #aaa;
    font-size: 0.9375rem  /* 15/16 */;
    font-weight: 300;
    opacity: 1; /* Firefox */
}
::-ms-input-placeholder { /* Edge 12 -18 */
    color: #999;
    font-weight: 300;
    font-size: 0.9375rem  /* 15/16 */;
}
.no-result-msg {
    text-align: center;
    font-size: 0.9375rem  /* 15/16 */;
    color: #999;
    padding: 10px 0;
}
.tooltip .tooltip-inner {
    font-size: 0.8125rem  /* 13/16 */;
    padding: 0.4375rem  /* 7/16 */;
    text-align: left;
    word-break: break-all;
}

i[data-toggle="popover"] {
    cursor: pointer;
}
.popover {
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    box-shadow: 0 6px 38px rgba(0, 0, 0, .2);
    z-index: 1000;
}
.popover-header {
    padding: 10px 10px;
    background-color: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin-bottom: 0 !important;
    font-family: "Pretendard", "Helvetica", "Arial", sans-serif;
    font-size: 0.875rem  /* 14/16 */;
    font-weight: 500;
}
.popover-body {
    padding: 10px 10px;
    color: #484848;
    font-family: "Pretendard", "Helvetica", "Arial", sans-serif;
    font-size: 0.875rem  /* 14/16 */;
}

#topBtn:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: #fff;
}
#topBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    line-height: 46px;
    border: 2px solid #444;
    color: #444;
    text-align: center;
    font-size: 15px;
    z-index: 90;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

/*
-----------------------------------------------------------------------
03. header
-----------------------------------------------------------------------
*/

#header .header-inner {
    background-color: #fff;
}

/* header sticky */
#header.header-sticky.sticky-active .header-inner, #header.header-sticky.sticky-active #header-wrap {
    transition: top .5s ease-in-out;
}
#header.header-sticky.sticky-active #mainMenu {
    display: none;
}

/* header util */
#headerUtil {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}
#headerUtil #logo {
    float: none !important;
    flex: 1;
}
#headerUtil .header-search {
    flex: 3;
}
#headerUtil .header-mypage {
    flex: 1;
}
#headerUtil .header-mypage.mobile {
    display: none;
}

/* header mypage */
#headerUtil .header-mypage {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0 40px;
}
#headerUtil .header-mypage .item {
    position: relative;
}
#headerUtil .header-mypage .item a {
    display: flex;
    flex-direction: column;
    line-height: 1;
    align-items: center;
    gap: 5px 0;
    text-align: center;
}
#headerUtil .header-mypage .item .icon {
    line-height: 1;
    margin-bottom: 5px;
    /*width: 44px;*/
    width: 32px;
    max-width: 100%;
}
#headerUtil .header-mypage .item span {
    font-size: 0.8125rem /* 13/16 */;
    font-weight: 600;
    color: #555;
}
#headerUtil .header-mypage .item .count {
    position: absolute;
    width: 20px;
    height: 20px;
    top: -2px;
    right: -2px;
    display: inline-block;
    padding: 5px;
    border-radius: 50%;
    background-color: var(--color-red);
    color: #fff;
    font-family: Roboto, "Helvetica", "Arial", sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 12px;
}

/* header logo */
#logo img {
    width: auto;
    height: 40px;
    max-height: 40px;
}
#logo span, #logo_shop span {
    font-size: 1.6rem /* 24/16 */ !important;
}
#logo.logo_shop img {
    width: auto;
    height: 34px;
    max-height: 34px;
}

/* header search box */
#hd_sch {
    padding: 30px 0;
    width: 445px;
    margin-left: 65px;
}
#hd_sch form {
    display: flex;
    align-items: center;
}
#hd_sch #sch_str,  #hd_sch #sch_stx {
    width: 385px;
    height: 45px;
    padding: 7px 8px 8px;
    border-radius: 24px 0 0 24px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-right: 0;
    font-size: 1rem;
    color: var(--color-black);
    outline: none;
    text-indent: 16px;
    box-sizing: border-box;
}
#hd_sch #sch_submit {
    color: var(--color-black);
    width: 45px;
    height: 45px;
    border-radius: 0 24px 24px 0;
    cursor: pointer;
    font-size: 1.375rem /* 22/16 */;
    border: 1px solid #ddd;
    border-left: 0;
    vertical-align: middle;
    line-height: 1;
    background-color: #fff;
    box-sizing: border-box;
    text-align: left;
    padding: 0 20px 0 0;
}

/*
-----------------------------------------------------------------------
04. GNB
-----------------------------------------------------------------------
*/

/* GNB */
#mainMenu {
    border-top: 1px solid var(--color-lightborder);
    border-bottom: 1px solid var(--color-lightborder);
    /*background: var(--color-primary);*/
    /*box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);*/
    box-sizing: border-box;
}
#mainMenu.main-menu-shop {
    /*background-color: #fff;*/
}
#mainMenu nav {
    display: flex;
    padding: 5px 0 0 0;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
#mainMenu .nav-gnb {
    flex: 1;
    /*background-color: #fff;*/
    display: flex;
    align-items: center;
}
#mainMenu .nav-gnb > li:not(:first-child) {
    /*margin-left: -6px;*/
}
#mainMenu .nav-gnb > li > a {
    font-size: 1rem;
    transition: all .3s ease;
    line-height: 1;
    color: #000;
    font-weight: 500;
    letter-spacing: -1px;
    position: relative;
    padding: 0 18px;
    text-decoration: none;
    min-height: 53px;
    display: flex;
    align-items: center;
}
#mainMenu.main-menu-shop .nav-gnb > li > a {
    /*color: #000;*/
}
#mainMenu .nav-gnb > li:first-child > a {
    padding: 10px 10px 10px 0;
}
#mainMenu .nav-gnb > li > a.em::before {
    content: '';
    top: 10px;
    right: 12px;
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: var(--color-red);
    border-radius: 50%;
}
#mainMenu.menu-lines .nav-gnb > li.current > a::after, #mainMenu.menu-lines .nav-gnb > li:focus:hover > a::after, #mainMenu.menu-lines .nav-gnb > li:focus > a::after {
    width: 100%;
    left: 0;
    background-color: #2250fc;
}

#mainMenu .nav-gnb > li .dropdown-menu {
    top: 61px;
    /*border: 1px solid var(--color-primary) !important;*/
    /*border-radius: 8px;*/
    /*box-shadow: 0 12px 6px rgba(0, 0, 0, .06);*/
    border: 1px solid #ccc;
    padding: 10px 20px;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 3px 24px 0 rgba(0, 0, 0, .2);
    background-color: #fff;
    z-index: 100;
    box-sizing: border-box;
}
#mainMenu .nav-gnb > li .dropdown-menu > li > a, #mainMenu .nav-gnb > li .dropdown-menu > li > span, #mainMenu .nav-gnb > li .dropdown-menu > li [class*=col-] > ul > li > a {
    font-size: 0.9375rem  /* 15/16 */
}
#mainMenu .nav-gnb > li .dropdown-menu a:hover {
    background-color: var(--color-primary) !important;
    color: #fff !important;
    font-weight: 400;
}
#mainMenu .nav-gnb > li .dropdown-menu  a.current {
    color: var(--color-blue);
}

/* mega menu */
#mainMenu .nav-gnb > li.mega-menu-item {
    position: relative;
    margin-right: 40px;
}
#mainMenu .nav-gnb > li.mega-menu-item:after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 22%;
    background: rgba(0, 0, 0, .4);
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
}
#mainMenu .nav-gnb > li.mega-menu-item i {
    font-size: 20px;
    font-family: "inspiro-icons", serif;
    margin-right: 10px;
    border: 1px solid #aaa;
    border-radius: 50%;
    padding: 8px;
    color: #000;
}
#mainMenu .nav-gnb > li.mega-menu-item > .dropdown-menu {
    top: 64px;
    left: 0;
    right: 0;
    overflow: hidden;
    width: calc(90vw);
    max-width: 1240px;
    transition-duration: .3s !important;
}
#mainMenu .nav-gnb > li.mega-menu-item .mega-menu-content {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}
#mainMenu .nav-gnb > li.mega-menu-item .mega-menu-content .item {
    width: calc(16.666% - 20px);
    margin: 10px;
}
#mainMenu .nav-gnb > li.mega-menu-item .mega-menu-content .mega-menu-depth1 a {
    font-size: 0.875rem  /* 14/16 */;
    color: #fff;
    font-weight: 400;
    line-height: 1;
    padding: 13px 13px;
    background-color: var(--color-primary);
    display: block;
}
#mainMenu .nav-gnb > li.mega-menu-item .mega-menu-content .mega-menu-depth2 a {
    font-size: 0.875rem  /* 14/16 */;
    color: #333;
    padding: 5px 0 5px 10px;
    font-weight: 400;
    display: block;
}

/* 우측 유틸리티 */
#mainMenu .nav-user  {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0 12px;
}
#mainMenu .nav-user > li > a {
    padding: 10px 8px;
    font-size: 0.9375rem;
}
#mainMenu .nav-user > li:last-child > a {
    padding: 10px 0 10px 8px;
}
#mainMenu .nav-user .admin-link {
    color: var(--color-red);
}

/* 모바일 메뉴 */
#mainMenuMobile {
    display: none;
}
#mainSideMenu {
    display: none;
}

/*
-----------------------------------------------------------------------
05. body options
-----------------------------------------------------------------------
*/

.body-inner #header[data-transparent="false"] .header-inner {
    border-bottom: 1px solid #bbb;
    box-shadow: 0 12px 6px rgba(0, 0, 0, .06);
}

/*
-----------------------------------------------------------------------
06. title
-----------------------------------------------------------------------
*/

/* 페이지 별 하위 메뉴 */
.page-menu {
    position: relative;
    border-bottom: 1px solid #e0e0e0;
    border-top: 0;
    height: 50px;
    line-height: 48px;
    margin: 20px 0;
    /*margin: 0 0 20px 0;*/
}
.page-menu nav > ul > li {
    transition: all .3s ease;
    position: relative;
    border: 0;
    display: inline-block;
    float: none;
    padding: 0 2px;
}
.page-menu nav > ul > li > a {
    position: relative;
    font-size: 0.875rem  /* 14/16 */;
    color: #333 !important;
    font-weight: 500;
    border-radius: 0;
    padding: 16px 16px;
    letter-spacing: 0;
    line-height: 12px;
    transition: all 0.3s ease;
}
.page-menu nav > ul > li.active > a, .page-menu nav > ul > li:hover > a {
    color: var(--color-blue) !important;
}
.page-menu.menu-solid nav > ul > li.active > a, .page-menu.menu-solid nav > ul > li:hover > a {
    background-color: #eee !important;
}
.page-menu.menu-creative nav > ul > li > a:after {
    background: var(--color-blue);
    height: 2px;
}

/* 페이지 상단 제목 */
#page-title {
    padding: 30px 0 0 0;
    background: transparent;
}
#page-title .page-title {
    text-align: left;
    /*padding: 20px 0 0 0;*/
    padding: 5px 0 0 0;
}
#page-title .page-title .title {
    color: #000;
    font-size: 1.5rem /* 24/16 */;
    font-weight: 600;
    letter-spacing: -1px;
    margin-bottom: 1rem;
}
#page-title .page-title .slogan {
    text-align: left;
    font-size: 0.9375rem /* 15/16 */;
    color: #595959;
}
#page-title .breadcrumb {
    text-align: left;
    padding: 0;
}
#page-title .breadcrumb ul li a {
    font-size: 0.875rem /* 14/16 */;
    color: rgb(0, 0, 0, .5) !important;
    font-weight: 500;
}
#page-title .breadcrumb ul li:before {
    font-size: 0.875rem /* 14/16 */;
}

/* 컨텐츠 제목 */
.heading {
    margin-bottom: 1.333rem  /* 20/15 */;
}
.heading .more-text {
    font-size: 1rem;
    color: #777;
}
.heading .desc {
    font-size: 0.875rem  /* 14/16 */;
    font-weight: 400;
    color: var(--color-gray);
    line-height: var(--line-height);
    padding-left: 8px;
    letter-spacing: 0;
}
.heading-subtitle {
    font-size: 0.8125rem /* 13/16 */;
    font-weight: 600;
    display: inline-block;
    color: #333;
    background-color: #e6eeff;
    border-radius: 50px;
    padding: 2px 15px;
    margin-bottom: 10px;
}
.heading.center {
    text-align: center;
}
.heading-1 {
    color: #000;
    position: relative;
    font-size: 1.5rem  /* 24/16 */;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: -1px;
}
.heading-1 i, .heading-2 i {
    color: var(--color-lightgray);
}
.heading-2, .heading-text h2, .heading-text .h2 {
    position: relative;
    color: #111;
    font-size: 1.375rem /* 22/16 */;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: -1px;
}
.heading-3, .heading-text h3, .heading-text .h3 {
    position: relative;
    color: #333;
    font-size: 1.25rem /* 20/16 */;
    font-weight: 600;
    letter-spacing: -1px;
    margin-bottom: 1rem;
}
.heading-4 {
    position: relative;
    color: #333;
    font-size: 1.125rem  /* 18/16 */;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: -1px;

}
.heading-4.head-bar {
    padding-left: 14px;
}

.heading-4.head-bar::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    display: inline-block;
    width: 4px;
    height: 18px;
    background-color: var(--color-red);
    line-height: 1;
}
.heading-4 i {
    padding-right: 5px;
}
.heading-text .emphasis {
    text-emphasis-style: dot;
    text-emphasis-color: var(--color-red);
}
.heading-text .lb {
    display: block;
}
.heading-line {
    border-bottom: 1px solid #dfefef;
    padding-bottom: 10px;
    margin: 50px 0 30px 0 !important;
    display: flex;
    align-items: center;
    gap: 0 10px;
    line-height: 1.4;
}
.heading-line i {
    color: var(--color-gray);
}
.heading-line .emphasis {
    color: #8b4336;
}
.heading-line:first-child {
    margin: 0 0 30px 0 !important;
}

/* breadcrumb */
.breadcrumb {
    margin-bottom: 10px;
    display: block;
    padding: 0 0 10px 0;
}
.breadcrumb li, .breadcrumb a {
    font-size: 0.9375rem /* 15/16 */;
    font-weight: 400;
}
.breadcrumb li:last-child a {
    color: var(--color-black);
}
.breadcrumb ul .breadcrumb-item + li:before, .breadcrumb ul li + li:before, .breadcrumb ol .breadcrumb-item + li:before, .breadcrumb ol li + li:before {
    display: inline-block;
    content: "\e930";
    font-family: inspiro-icons, serif;
    margin: 0 1px;
    width: 14px;
    height: 14px;
}

/*
-----------------------------------------------------------------------
07. layout
-----------------------------------------------------------------------
*/

main {
    padding: 30px 0 60px 0;
    min-height: 400px;
}
.main.main-index {
    padding: 0 0 60px 0;
}
.main.single {
    padding: 50px 0 80px 0;
    background-color: #f3f1ef;
}
.main .page-inner {
    margin-bottom: 60px;
}
.main .page-inner:last-child {
    margin-bottom: 0;
}
.main.main-line {
    border-top: 1px solid var(--color-border);
}
section {
    margin: 0;
    padding: 0;
}
.page-wrap {
    width: 100%;
    display: flex;
    gap: 0 30px;
    align-items: flex-start;
    justify-content: space-between;
    height: auto;
    padding: 0;
    margin: 0;
}
.page-wrap.center {
    justify-content: center;
    gap: 0 0;
}
.container {
    position: relative;
    margin: 0 auto;
    height: auto;
    /*width: 1270px;*/
}
.container-box {
    width: 100%;
    flex: 1;
    min-width: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-sizing: border-box;
    box-shadow: none;
    background-color: #fff;
}
.container-box-tp {
    background-color: transparent;
}
.container-line {
    border: 1px solid #e1e1e1;
    padding: 30px 30px;
    border-radius: var(--border-radius);
    box-shadow: 0 0 10px 0 rgba(154, 161, 171, .2);
}
.container-medium {
    margin: 0 auto;
    width: 80%;
    max-width: 80%;
}
.container-small {
    margin: 0 auto;
    width: 50%;
    max-width: 50%;
}
.container-mini {
    margin: 0 auto;
    width: 40%;
    max-width: 40%;
}
.order-inner-box {
    background-color: #fff;
    padding: 20px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}
.inner-box {
    border: 1px solid var(--color-border);
    border-radius: var(--form-radius);
    background-color: #fff;
    padding: 20px;
    overflow: auto;
}
/* Chrome, Edge and Safari */
.inner-box::-webkit-scrollbar {
    height: 20px;
    width: 13px;
}
.inner-box::-webkit-scrollbar-track {
    border-radius: 0;
    background-color: #eee;
}
.inner-box::-webkit-scrollbar-track:hover {
    background-color: #ddd;
}
.inner-box::-webkit-scrollbar-track:active {
    background-color: #ddd;
}
.inner-box::-webkit-scrollbar-thumb {
    border-radius: var(--border-radius);
    background-color: var(--color-primary);
}
.inner-box *::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primary-hover);
}
.inner-box *::-webkit-scrollbar-thumb:active {
    background-color: var(--color-primary);
}
.margin_top_0 {
    margin-top: 0 !important;
}
.padding_top_0 {
    padding-top: 0 !important;
}
.border-top {
    border-top: 1px solid var(--color-border) !important;
}

.vseparator {
    display: inline-block;
    width: 1px;
    height: 8px;
    line-height: 1;
    background-color: var(--color-lightgray);
    margin: 0 3px;
}
/*.vseparator:before {*/
/*    content: "";*/
/*    display: inline-block;*/
/*    width: 1px;*/
/*    height: 10px;*/
/*    line-height: 1;*/
/*    background-color: var(--color-lightgray);*/
/*    margin: 0 5px;*/
/*}*/
.separator {
    position: relative;
    padding: 0 5px;
}
.separator:after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    content: "|";
    width: 10px;
    height: auto;
    text-align: center;
    font-size: 0.875rem /* 14/16 */;
    color: var(--color-border);
    transform: translate(-50%, -50%);
}

/*
-----------------------------------------------------------------------
08. footer
-----------------------------------------------------------------------
*/

#footer {
    background-color: #fff;
    font-size: 1rem;
    font-weight: 400;
}
#footer .widget .footer-title {
    /*color: #000;*/
    color: var(--color-brand);
    display: block;
    font-size: 1.25rem  /* 20/16 */;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -.18px;
}
#footer .widget .footer-title .brand {
    color: var(--color-brand);
}
#footer .widget .footer-title .slogan {
    color: #121212;
    font-size: 0.9375rem  /* 15/16 */;
    font-weight: 400;
    letter-spacing: -1px;
}
#footer .footer-content {
    padding: 3.125rem  /* 50/16 */ 0;
}
#footer .footer-content li, #footer .footer-content a {
    font-size: 0.875rem /* 14/16 */;
    color: #666;
    line-height: 1.6;
}
#footer a:hover {
    text-decoration: underline;
    color: #000;
}
#footer .top-nav {
    padding: 8px 0;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    background-color: var(--bg-lightgray);
}
#footer .top-nav li {
    line-height: 1;
    padding: 0 15px;
}
#footer .top-nav li:first-child {
    padding-left: 0;
}
#footer .top-nav .menu b {
    color: var(--color-primary);
    font-weight: 700;
}
#footer .top-nav .menu > .list-inline-item {
    position: relative;
    margin-right: 0;
}
#footer .top-nav .menu > .list-inline-item:not(:last-child):after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 50%;
    background: rgba(0, 0, 0, .3);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
#footer a:not(.btn):not(:hover) {
    color: #000;
}
#footer .top-nav li a {
    font-size: 0.875rem /* 14/16 */;
    text-decoration: none;
}
#footer .top-nav li a:before {
    position: absolute;
    display: block;
    content: "";
    left: 50%;
    bottom: -8px;
    background-color: currentColor;
    width: 0;
    height: 1px;
    transition: 0.2s;
    opacity: 0;
}
#footer .top-nav li a:hover:before {
    width: 100%;
    left: 0;
    opacity: 0.6;
}
#footer .top-nav li a:hover {
    color: var(--color-primary);
}
#footer .top-nav .social-icons a {
    color: #fff !important;
}
#footer .widget-address .list li {
    padding: 3px 0;
}
#footer .widget {
    margin-bottom: 0;
}
#footer .widget .btn-mini {
    display: inline-block;
    font-size: 0.75rem /* 12/16 */;
    letter-spacing: -1px;
    color: #333 !important;
    background-color: #fff;
    border: 1px solid #d4d4d4;
    padding: 5px 8px;
    line-height: 1;
    text-decoration: none;
    transition: all 0.4s ease;
}
#footer .widget .btn-mini:hover {
    background-color: var(--bg-gray);
    border: 1px solid #888;
    color: #000;
}
#footer .widget .btn-list {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 0 10px;
}
#footer .widget .sns-list {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 0 10px;
    margin-bottom: 0.9375rem  /* 15/16 */;
}
#footer .widget .sns {
    font-size: 11px;
    display: inline-block;
    width: 35px;
    height: 35px;
    padding-top: 38px;
    text-align: center;
}
#footer .widget .sns-youtube {
    background: url(../images/sns-youtube.png) no-repeat center 0;
}
#footer .widget .sns-blog {
    background: url(../images/sns-blog.png) no-repeat center 0;
}
#footer .widget .sns-kakao {
    background: url(../images/sns-kakao.png) no-repeat center 0;
}
#footer .widget .phone {
    font-family: Roboto, "Helvetica", "Arial", sans-serif;
    display: inline-block;
    color: #000;
    font-size: 1.875rem /* 30/16 */;
    font-weight: 700;
    line-height: 1;
    padding-bottom: 10px;
}
#footer .widget .phone:hover {
    text-decoration: none;
}
#footer .footer-copyright {
    /*border-top: 1px solid var(--color-line);*/
    padding: 20px 0;
    background-color: #f7f7f7;
}
#footer .footer-copyright .copyright-text {
    font-size: 0.875rem /* 14/16 */;
    color: #888;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 30px;
    line-height: 1;
}

#footer .footer-menu {

}
#footer .footer-menu-inner {
    display: flex;
    gap: 0 10px;
    justify-content: space-between;
}
#footer .footer-menu-item {
    display: flex;
    flex-direction: column;
}
#footer .footer-menu-link1 {
    color: #000 !important;
    font-size: 0.9375rem  /* 15/16 */;
    font-weight: 500;
    padding:  0 0 10px 0;
    transition: all .3s ease-out;
}
#footer .footer-menu-link2 {
    color: #666 !important;
    font-size: 0.875rem  /* 14/16 */;
    line-height: 2.0;
    transition: all .3s ease-out;
    padding: 3px 0;
}

/*
-----------------------------------------------------------------------
09. screen reader
-----------------------------------------------------------------------
*/

.msg_sound_only, .sound_only {
    display: inline-block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0;
    line-height: 0;
    border: 0 !important;
    overflow: hidden !important
}

/* 본문 바로가기 */
#skip_to_container a {
    z-index: 100000;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height: 0;
    overflow: hidden
}
#skip_to_container a:focus, #skip_to_container a:active {
    width: 100%;
    height: 75px;
    background: #21272e;
    color: #fff;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    line-height: 3.3em
}

/*
-----------------------------------------------------------------------
10. captcha
-----------------------------------------------------------------------
*/

#captcha {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0 5px;
}
#captcha legend {
    position: absolute;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -9999em;
    overflow: hidden
}
#captcha #captcha_img {
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--form-radius);
    vertical-align: top;
    padding: 0;
    margin: 0
}
#captcha #captcha_mp3 {
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
    background: url('/img/captcha2.png') no-repeat;
    text-indent: -999px;
    border-radius: 3px
}
#captcha #captcha_reload {
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
    background: url('/img/captcha2.png') no-repeat 0 -40px;
    text-indent: -999px;
    border-radius: 3px
}
#captcha #captcha_key {
    margin: 0 0 0 3px;
    padding: 0 5px;
    width: 90px;
    height: 40px;
    min-height: 40px;
    border: 1px solid var(--color-border);
    background: #fff;
    border-radius: var(--form-radius);
    vertical-align: top;
}
#captcha #captcha_key:focus {
    border-color: #000;
}
#captcha #captcha_info {
    display: block;
    margin: 10px 0 10px 10px;
    font-size: 0.875rem /* 14/16 */;
}
#captcha.m_captcha {
    display: flex;
    align-items: center;
}
#captcha.m_captcha audio {
    display: block;
    margin: 0 0 5px;
    width: 187px;
}
#captcha.m_captcha #captcha_img {
    width: 140px;
    height: 40px;
    border: 1px solid #e9e9e9;
    margin-bottom: 0;
    margin-top: 0;
    display: inline-block;
}
#captcha.m_captcha #captcha_reload {
    position: static;
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
    background: url('../../../img/captcha2.png') no-repeat 0 -40px;
    text-indent: -999px
}
#captcha.m_captcha #captcha_reload span {
    display: none
}
#captcha.m_captcha #captcha_key {
    padding: 0 5px;
    width: 115px;
    height: 29px;
    border: 1px solid #b8c9c2;
    /*background: #f7f7f7;*/
    background: #ffff;
    font-size: 1.333em;
    font-weight: bold;
    text-align: center;
    line-height: 29px;
    margin: 0 0 0 3px;
}
#captcha.m_captcha #captcha_info {
    display: inline-block;
    margin: 5px 0 0;
    font-size: 0.95em;
    letter-spacing: -0.1em
}
#captcha.m_captcha #captcha_mp3 {
    width: 31px;
    height: 31px;
    background: url('../../../img/captcha2.png') no-repeat 0 0;
    vertical-align: top;
    overflow: hidden;
    cursor: pointer;
    text-indent: -9999px;
    border: none
}

/*
-----------------------------------------------------------------------
11. html editor
-----------------------------------------------------------------------
*/

.cke_sc {
    margin: 0 0 5px;
    text-align: right
}
.btn_cke_sc {
    display: inline-block;
    border: 1px solid var(--color-border);
    background-color: #fff;
    text-decoration: none;
    cursor: pointer;
    padding: 2px 8px;
    font-size: 0.8125rem /* 13/16 */;
    border-radius: var(--form-radius);
}
.btn_cke_sc:hover {
    background: #f2f2f2;
    border-color: var(--color-black);
    text-decoration: none;
    color: var(--color-black);
}
.cke_sc_def {
    margin: 5px 0 5px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--form-radius);
    background-color: #fefefe;
    text-align: center;
}
.cke_sc_def dl {
    margin: 0 0 5px;
    text-align: left;
    zoom: 1
}
.cke_sc_def dl:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}
.cke_sc_def dt, .cke_sc_def dd {
    float: left;
    margin: 0;
    padding: 5px 0;
    border-bottom: 1px solid #e9e9e9;
    font-size: 0.8125rem /* 13/16 */;
}
.cke_sc_def dt {
    width: 20%;
    font-weight: 500;
}
.cke_sc_def dd {
    width: 30%
}

/* cheditor 이슈 */
.cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before {
    box-sizing: content-box;
}

/*
-----------------------------------------------------------------------
12. table
-----------------------------------------------------------------------
*/

/* bootstrap table */
.table {
    margin-bottom: 0;
    border-bottom: 0;
}
.table thead th {
    vertical-align: middle;
    text-align: center;
    font-size: 0.9375rem  /* 15/16 */;
    border-top: none;
    border-bottom: 1px solid #dee2e6;
}
.table td {
    vertical-align: middle;
    font-size: 0.9375rem  /* 15/16 */;
    border-top: none;
    border-bottom: 1px solid #dee2e6;
}
.table.table-hline {
    /*border-top: 2px solid rgba(74, 80, 90, 1) !important;*/
    border-top: 2px solid var(--color-darkline);
    border-bottom: none;
    text-align: center;
}
.table.table-condensed th, .table.table-condensed td {
    padding: .4rem .8rem !important;
}
.table.table-borderless th, .table.table-borderless td {
    padding: .4rem 0 !important;
}
.table.table-hover tbody > tr:hover {
    cursor: pointer !important;
    background-color: var(--bg-lightgray) !important;
}
.table .td-md {
}
.table .td-sm, .div-sm {
    display: none;
}
.table tbody > tr:last-child td {
    /*border-bottom: 0;*/
}

/* 기본 테이블 */
.table.table-type-default {
    border-top: 2px solid #3D4045;
    /*border-bottom: 1px solid #bec2c8 !important;*/
}
.table.table-type-default th {
    background-color: #f6f6f6;
    color: #44465c;
    font-weight: 400;
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
}

.table.table-type-default td, .table.table-type-default th {
    padding: .4rem .8rem !important;
}
.table.table-type-default.table-borderless > body {
    border-top: 0;
    border-bottom: 0;
}
.table.table-type-default.table-borderless tr:first-child th,  .table.table-type-default.table-borderless tr:first-child td {
    border-top: 0;
}
.table.table-type-default.table-borderless > tbody {
    border-top: 0;
}

/* 공지사항형 테이블 */
.table.table-type-notice {
    border-top: 2px solid #44465c;
    border-bottom: 1px solid #bec2c8;
}
.table.table-type-notice th {
    background-color: #f6f6f6;
    color: #44465c;
    font-weight: 400;
    vertical-align: middle;
}

.tbl_wrap table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0 5px;
    border-top: 2px solid #44465c;
    /*border-bottom: 1px solid #bec2c8;*/
    border-bottom: 1px solid #999;
}
.tbl_wrap caption {
    padding: 10px 0;
    font-weight: bold;
    text-align: left;
}
.tbl_head01 {
    margin: 0 0 10px;
    width: 100%;
}
.tbl_head01 caption {
    padding: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden
}
.tbl_head01 thead th {
    padding: 5px 0;
    font-weight: 500;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}
.tbl_head01 thead th input {
    vertical-align: top
}
.tbl_head01 tfoot th, .tbl_head01 tfoot td {
    padding: 10px 0;
    border-top: 1px solid #c1d1d5;
    border-bottom: 1px solid #c1d1d5;
    background: #d7e0e2;
    text-align: center;
}
.tbl_head01 tbody th {
    padding: 8px 0;
    border-bottom: 1px solid #e8e8e8
}
.tbl_head01 td {
    color: #666;
    padding: 10px 5px;
    border-top: 1px solid #ecf0f1;
    border-bottom: 1px solid #ecf0f1;
    line-height: 1.4em;
    word-break: break-all;
    /*white-space: nowrap;*/
}
.tbl_head01 tbody tr:hover td {
    background: #fafafa
}

.tbl_head02 {
    margin: 0 0 10px;
}
.tbl_head02 caption {
    padding: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden
}
.tbl_head02 thead th {
    padding: 5px 0;
    border-top: 1px solid #d1dee2;
    border-bottom: 1px solid #d1dee2;
    background: #e5ecef;
    color: #383838;
    font-size: 0.95em;
    text-align: center;
    letter-spacing: -0.1em
}
.tbl_head02 thead a {
    color: #383838
}
.tbl_head02 thead th input {
    vertical-align: top
}
.tbl_head02 tfoot th, .tbl_head02 tfoot td {
    padding: 10px 0;
    border-top: 1px solid #c1d1d5;
    border-bottom: 1px solid #c1d1d5;
    background: #d7e0e2;
    text-align: center
}
.tbl_head02 tbody th {
    padding: 5px 0;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    background: #fff
}
.tbl_head02 td {
    padding: 5px 3px;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    background: #fff;
    line-height: 1.4em;
    word-break: break-all
}
.tbl_head02 a {
}

/* form table */
.tbl_frm01 {
    margin: 0 0 20px
}
.tbl_frm01 table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0
}
.tbl_frm01 th {
    width: 70px;
    padding: 7px 13px;
    border: 1px solid #e9e9e9;
    border-left: 0;
    background: #f5f8f9;
    text-align: left
}
.tbl_frm01 td {
    padding: 7px 10px;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    background: transparent;
}
.wr_content textarea, .tbl_frm01 textarea, .form_01 textarea, .frm_input, .frm_file, .textarea {
    border: 1px solid var(--color-border);
    border-radius: var(--form-radius);
    background-color: #fff;
    padding: 8px 10px;
}
.tbl_frm01 textarea {
    padding: 8px;
}
.frm_input {
    height: 44px;
}
.full_input {
    width: 100%;
}
.half_input {
    display: inline-block;
    width: 48.3%;
}
.twopart_input {
    width: 385px;
    margin-right: 10px
}
.tbl_frm01 textarea, .write_div textarea {
    width: 100%;
    height: 100px
}
.tbl_frm01 a {
    text-decoration: none
}
.tbl_frm01 .frm_file {
    display: block;
    margin-bottom: 5px
}
.tbl_frm01 .frm_info {
    display: block;
    padding: 0 0 5px;
    line-height: 1.4em
}

.td_board {
    /*width: 80px;*/
    /*text-align: center*/
}
.td_category {
    /*width: 80px;*/
    /*text-align: center*/
}
.td_chk {
    /*width: 30px;*/
    /*text-align: center*/
}
.td_date {
    /*width: 60px;*/
    /*text-align: center*/
}
.td_datetime {
    /*width: 110px;*/
    /*text-align: center*/
}
.td_group {
    /*width: 80px;*/
    /*text-align: center*/
}
.td_mb_id {
    /*width: 100px;*/
    /*text-align: center*/
}
.td_mng {
    /*width: 80px;*/
    /*text-align: center*/
}
.td_name {
    /*width: 100px;*/
    /*text-align: left*/
}
.td_nick {
    /*width: 100px;*/
    /*text-align: center*/
}
.td_num {
    /*width: 50px;*/
    /*text-align: center*/
}
.td_numbig {
    /*width: 80px;*/
    /*text-align: center*/
}
.td_stat {
    /*width: 60px;*/
    /*text-align: center*/
}

/*
-----------------------------------------------------------------------
13. form
-----------------------------------------------------------------------
*/

/* button */
.btn_admin i {
    /*color: var(--color-primary);*/
    color: var(--color-red);
}
.btn-confirm {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-line);
}
.btn {
    display: inline-block;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    padding: 10px 20px;
    border-radius: var(--form-radius);
    line-height: var(--line-height);
    box-sizing: border-box;
    transition: all .4s ease-out;
}
.btn:focus {
    outline: none;
}
.btn i {
    padding-right: 0.25rem  /* 4/16 */;
}
.btn.btn-block {
    display: block;
    width: 100%;
}
.btn.btn-primary, .btn.btn-submit {
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
}
.btn.btn-primary:hover, .btn.btn-submit:hover, .btn.btn-primary:focus, .btn.btn-submit:focus, .btn.btn-primary:active, .btn.btn-submit:active {
    text-decoration: none;
    color: #fff;
    border: 1px solid var(--color-primary-hover);
    background-color: var(--color-primary-hover);
}
.btn.btn-primary.no-line {
    padding-top: 0;
    border-top: 0;
}
.btn.btn-secondary {
    border: 1px solid var(--color-border);
    color: var(--color-black);
    background-color: #fff;
}
.btn.btn-secondary:hover, .btn.btn-secondary:focus, .btn.btn-secondary:active {
    text-decoration: none;
    background-color: #eee;
    color: var(--color-black);
}
.btn.btn-action {
    border: 1px solid var(--color-red);
    color: #fff;
    background-color: var(--color-red);
}
.btn.btn-action:hover, .btn.btn-action:focus, .btn.btn-action:active {
    text-decoration: none;
    border-color: var(--color-red-hover);
    background-color: var(--color-red-hover);
    color: #fff;
}
.btn.btn-frmline {
    font-size: 0.875rem  /* 14/16 */;
    font-weight: 300;
    line-height: 1;
    padding: 13px 13px;
    border: 1px solid #555;
    background-color: #555;
    border-radius: var(--form-radius);
    color: #fff;
    text-decoration: none;
    transition: all .3s ease-out;
    box-sizing: border-box;
}
.btn.btn-frmline:hover, .btn.btn-frmline:focus, .btn.btn-frmline:active {
    background-color: #333;
    border: 1px solid #333;
}
.btn.btn-autosave {
    display: inline-block;
    color: #fff;
    background-color: #434a54;
    border: 1px solid #434a54;
    padding: 5px 9px;
    border-radius: var(--form-radius);
    font-size: 0.8125rem  /* 13/16 */;
    line-height: 1;
    font-weight: 300;
    transition: all .3s ease-out;
    text-decoration: none;
    margin-right: 10px;
}
button.btn-frmline {
    font-size: 0.875rem /* 14/16 */;
    font-weight: 400;
}
.btn-full {
    width: 100%;
    display: block;
}
.btn-outline {
    display: inline-block;
    color: var(--color-black);
    background: #fff;
    border: 1px solid var(--color-border);
    padding: 5px 9px;
    border-radius: var(--form-radius) !important;
    font-size: 0.875rem /* 14/16 */;
    line-height: 18px;
    /*letter-spacing: -0.01em;*/
    font-weight: 400;
    transition: all .3s ease-out;
    text-decoration: none;
}
.btn-outline:hover {
    background: #f2f2f2;
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-black);
}
.call-to-action .btn-cta {
    display: inline-block;
    font-size: 1rem;
    background-color: transparent;
    color: #fff;
    border: 2px solid currentColor;
    border-radius: var(--form-radius);
    /*position: relative;*/
    transition: background-color .3s;
    margin-bottom: 0.4rem  /* 6/15 */;
    outline: none;
    line-height: 1px;
    cursor: pointer;
    padding: 13px 20px;
    margin-top: 1.333rem  /* 20/15 */;
}
.call-to-action .btn-cta:hover {
    background-color: #fff;
    border: 2px solid #fff !important;
    color: #000;
}

/* 필수입력 */
.required, textarea.required {
    background-image: url('../img/require.png') !important;
    background-repeat: no-repeat !important;
    background-position: right top !important
}
.required-asterisk {
    position: relative;
}
.required-asterisk:after {
    position: absolute;
    content: "\f00c";
    display: inline-block;
    font-family: "Font Awesome 5 Free", serif;
    font-size: 0.5625rem /* 9/16 */;
    font-weight: bold;
    color: var(--color-red);
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
}
.form-control {
    border: 1px solid #ccc;
}
input:not([type=checkbox]):not([type=radio]), select {
    padding: 10px 16px;
    min-height: 44px;
    font-size: 0.9375rem  /* 15/16 */;
}
.custom-file-input:lang(ko) ~ .custom-file-label::after {
    content: "파일찾기";
}
.custom-file-label {
    line-height: 1.6;
    overflow: hidden;
}
.form-check-inline .form-check-input {
    margin-top: -4px;
}

.form-group label:not(.error) {
    font-size: 0.9375rem /* 15/16 */;
    font-weight: 500;
    color: var(--color-black);
}
.form-text {
    color: #777;
}

/*
-----------------------------------------------------------------------
14. list
-----------------------------------------------------------------------
*/

.list_01 ul {
    border-top: 1px solid #ececec
}
.list_01 li {
    border-bottom: 1px solid #ececec;
    background: #fff;
    padding: 10px 15px;
    list-style: none;
    position: relative
}
.list_01 li:nth-child(odd) {
    background: #f6f6f6
}
.list_01 li:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}
.list_01 li:hover {
    background: #f9f9f9
}
.list_01 li.empty_li {
    text-align: center;
    padding: 20px 0;
    color: #666
}

.list-icon {
    position: relative;
    margin-bottom: 0;
}
.list-icon i {
    margin-right: 5px;
    margin-left: 0;
}
.list-icon li {
    padding-left: 30px;
    margin-left: 0;
    margin-bottom: 0;
}
/*.list-icon.list-icon-arrow li {*/
/*    padding-left: 26px;*/
/*}*/
.list-icon li:before {
    left: 30px;
    line-height: 2.2;
}
.list-icon-m0 li {
    margin-bottom: 0;
    margin-left: 0;
}
/*.list-icon.list-icon-arrow li:before {*/
/*    !*font-family: "font awesome 5 free", serif !important;*!*/
/*    content: "\f054" !important;*/
/*    !*line-height: 2.9;*!*/
/*}*/
.list-icon.list-condensed li {
    margin-bottom: 5px;
}
.list-icon.list-icon-white li:before, .list-icon.icon-list-white i {
    color: #fff;
}
.list-icon li:last-child {
    margin-bottom: 0;
}

/* 폼 목록 */
.form_01 h2 {
    /*font-size: 1.167em*/
}
.form_01 li {
    margin-bottom: 10px
}
.form_01 .left_input {
    /*float: left*/
}
.form_01 .margin_input {
    margin-right: 1%
}
.form_01 textarea {
    height: 100px;
    width: 100%
}
.form_01 .frm_label {
    display: inline-block;
    /*width: 130px;*/
    width: auto;
}

/* 자료 없는 목록 */
.empty_table, .no-data {
    padding: 50px 0 !important;
    text-align: center;
    font-size: 0.875rem /* 14/16 */;
}
.empty_table .title {
    color: var(--color-black);
}
.empty_table .help-block {
    font-size: 0.875rem /* 14/16 */;
    color: var(--color-gray);
}
.empty_list {
    padding: 30px 0 !important;
    color: var(--color-body);
    text-align: center;
    font-size: 0.9375rem  /* 15/16 */;
}

/*
-----------------------------------------------------------------------
15. pagination
-----------------------------------------------------------------------
*/

.pg_wrap {
    margin-top: 10px;
    padding: 20px;
    /*border-top: 1px solid var(--color-line);*/
}
.pg {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 12px;
}
.pg_page, .pg_current {
    display: inline-block;
    vertical-align: middle;
    background-color: transparent;
    border: 1px solid var(--color-border);
    text-align: center;
    min-width: 35px;
    height: 35px;
    border-radius: 50%;
    line-height: 35px;
    font-size: 0.875rem /* 14/16 */;
    text-decoration: none;
    /*color: var(--color-black);*/
}
.pg a {
    font-family: Roboto, "Helvetica", "Arial", sans-serif;
}
.pg a:focus, .pg a:hover {
    text-decoration: none;
}
.pg_current {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: #fff;
}
.pg_page:hover, .pg_start:hover, .pg_prev:hover, .pg_end:hover, .pg_next:hover {
    border: 1px solid var(--color-border-hover);
    color: #000;
}
.pg_start {
    text-indent: -999px;
    overflow: hidden;
    background: url('../img/btn_first.gif') no-repeat 50% 50% #eee;
    padding: 0;
    border: 1px solid var(--color-border);
}
.pg_prev {
    text-indent: -999px;
    overflow: hidden;
    background: url('../img/btn_prev.gif') no-repeat 50% 50% #eee;
    padding: 0;
    border: 1px solid var(--color-border);
}
.pg_end {
    text-indent: -999px;
    overflow: hidden;
    background: url('../img/btn_end.gif') no-repeat 50% 50% #eee;
    padding: 0;
    border: 1px solid var(--color-border);
}
.pg_next {
    text-indent: -999px;
    overflow: hidden;
    background: url('../img/btn_next.gif') no-repeat 50% 50% #eee;
    padding: 0;
    border: 1px solid var(--color-border);
}

/*
-----------------------------------------------------------------------
16. modal
-----------------------------------------------------------------------
*/

/* 팝업 창 */
#popupTitle {
    font-size: 1rem;
    font-weight: 600;
    line-height: var(--line-height);
    padding: 10px 20px;
    color: var(--color-dark);
    border-bottom: 1px solid var(--color-line);
}
#popupTitle .sv {
    font-size: 0.75em;
    line-height: 1.2em
}
#popupTitle .desc {
    color: var(--color-help);
    font-size: 0.875rem  /* 14/16 */;
    font-weight: 400;
    padding-left: 0.3125rem  /* 5/16 */;
}
.new_win {
    position: relative
}
.new_win .tbl_wrap {
    margin: 0 20px
}
.new_win .win_ul {
    margin-bottom: 15px;
    padding: 0 20px
}
.new_win .win_ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}
.new_win .win_ul li {
    float: left;
    background: #fff;
    text-align: center;
    padding: 0 10px;
    border: 1px solid #d6e9ff;
    border-radius: 30px;
    margin-left: 5px
}
.new_win .win_ul li:first-child {
    margin-left: 0
}
.new_win .win_ul li a {
    display: block;
    padding: 8px 0;
    color: #6794d3
}
.new_win .win_ul .selected {
    background: #3a8afd;
    border-color: #3a8afd;
    position: relative;
    z-index: 5
}
.new_win .win_ul .selected a {
    color: #fff;
    font-weight: bold
}
.new_win .win_desc {
    position: relative;
    margin: 10px;
    border-radius: 5px;
    font-size: 1em;
    background: #f2838f;
    color: #fff;
    line-height: 50px;
    text-align: left;
    padding: 0 20px
}
.new_win .win_desc i {
    font-size: 1.2em;
    vertical-align: baseline
}
.new_win .win_desc:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 50px;
    background: #da4453;
    border-radius: 3px 0 0 3px
}
.new_win .frm_info {
    display: block;
    font-size: 0.875rem  /* 14/16 */;
    color: var(--color-help);
    padding: 5px 0;
}
.new_win .win_total {
    float: right;
    display: inline-block;
    line-height: 30px;
    font-weight: normal;
    font-size: 0.75em;
    color: #3a8afd;
    background: #f6f6f6;
    padding: 0 10px;
    border-radius: 5px
}
.new_win .new_win_con {
    /*border: 1px solid red;*/
}
.new_win .new_win_con .new_win_con_wrap {
    padding: 0 20px 20px 20px;
}
.new_win .new_win_con:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}
.new_win .new_win_con2 {
    margin: 20px 0
}
.new_win .win_btn {
    border-top: 1px solid var(--color-border);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 20px;
    margin-top: 20px;
    padding-top: 20px;
}
.new_win .cert_btn {
    margin-bottom: 30px;
    text-align: center
}
.new_win .btn_close {
    /*padding: 0 20px;*/
    /*height: 45px;*/
    overflow: hidden;
    cursor: pointer
}
.new_win .btn_submit {
    /*width: 100%;*/
}

/* 팝업레이어 */
#hd_pop {
    z-index: 1000;
    position: relative;
    margin: 0 auto;
    height: 0
}
#hd_pop h2 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden
}
.hd_pops {
    position: absolute;
    border: 1px solid #e9e9e9;
    background: #fff
}
.hd_pops img {
    max-width: 100%
}
.hd_pops_con {
}
.hd_pops_footer {
    padding: 0;
    background: #000;
    color: #fff;
    text-align: left;
    position: relative
}
.hd_pops_footer:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: ""
}
.hd_pops_footer button {
    padding: 10px;
    border: 0;
    color: #fff
}
.hd_pops_footer .hd_pops_reject {
    background: #000;
    text-align: left
}
.hd_pops_footer .hd_pops_close {
    background: #393939;
    position: absolute;
    top: 0;
    right: 0
}

/* 자바스크립트 alert 대안 */
#validation_check {
    margin: 100px auto;
    width: 500px
}
#validation_check h1 {
    margin-bottom: 20px;
    font-size: 1.3em
}
#validation_check p {
    margin-bottom: 20px;
    padding: 30px 20px;
    border: 1px solid #e9e9e9;
    background: #fff
}

/*
-----------------------------------------------------------------------
17. text
-----------------------------------------------------------------------
*/

.highlight.highlight-colored {
    background-color: transparent;
    box-shadow: 0 -14px 0 -2px rgba(255, 171, 144, 0.4) inset;
    padding: 0 3px 3px 3px !important;
    color: #000;
    /*font-weight: 600 !important;*/
}

.txt_active {
    color: #5d910b
}
.txt_done {
    color: #e8180c
}
.txt_expired {
    color: #ccc
}
.txt_rdy {
    color: #8abc2a
}
.text-red {
    color: var(--color-red);
}
.text-blue {
    color: var(--color-blue);
}
.text-primary {
    color: var(--color-primary);
}
.text-secondary {
    color: var(--color-secondary);
}
.text-gray {
    color: var(--color-gray);
}
.text-green {
    color: var(--color-green);
}
.text-underline {
    color: var(--color-black);
    padding: 0 0 4px 0;
    background-image: linear-gradient(to right, currentColor 0%, currentColor 100%);
    background-repeat: repeat-x;
    background-position: bottom 0.02em center;
    background-size: 100% 0.05em;
}
.text-small {
    font-size: 0.875rem /* 14/16 */;
    line-height: 1.1;
}
.help-block {
    position: relative;
    width: 100%;
    display: block;
    padding: 10px 0 0 10px;
    color: var(--color-help);
    font-size: 0.875rem  /* 14/16 */;
    line-height: var(--line-height);
}
.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all !important;
}
.ellipsis_multi {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/*
-----------------------------------------------------------------------
18. background
-----------------------------------------------------------------------
*/

.dark #header[data-transparent="true"]:not(.sticky-active) .header-inner, .dark #header[data-transparent="true"]:not(.sticky-active) #header-wrap, #header.dark[data-transparent="true"]:not(.sticky-active) .header-inner, #header.dark[data-transparent="true"]:not(.sticky-active) #header-wrap {
    background-color: transparent !important;
}
.bg-main {
    background-color: var(--bg-main) !important;
}
.bg-sky {
    background-color: var(--bg-sky) !important;
}
.bg-lightgray {
    background-color: #fcfcfd !important;
}
.bg-white {
    background-color: var(--bg-white) !important;
}
.bg-default {
    background-color: var(--bg-default) !important;
}

/*
-----------------------------------------------------------------------
19. search
-----------------------------------------------------------------------
*/

.sch_word {
    /*color: var(--color-red);*/
}

/*
-----------------------------------------------------------------------
20. aside
-----------------------------------------------------------------------
*/

/* 사이드뷰 */
.sv_wrap {
    position: relative;
    font-weight: normal;
}
.sv_wrap .sv {
    z-index: 1000;
    display: none;
    margin: 5px 0 0;
    font-size: 0.875rem /* 14/16 */;
    background: #333;
    width: auto;
}
.sv_wrap .sv:before {
    content: "";
    position: absolute;
    top: -6px;
    left: 15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #333 transparent
}
.sv_wrap .sv a {
    text-decoration: none;
    display: inline-block;
    margin: 0;
    padding: 0 10px;
    line-height: 30px;
    width: 100px;
    font-weight: normal;
    color: #bbb;
    z-index: 10000000;
}
.sv_wrap .sv a:hover {
    background-color: #000;
    color: #fff !important;
}
.sv_member {
    font-size: 0.9375rem  /* 15/16 */;
    color: var(--color-gray)
}
.sv_on {
    display: block !important;
    position: absolute;
    top: 23px;
    left: 0;
    width: auto;
    height: auto;
}
.sv_nojs .sv {
    display: block
}

/*
-----------------------------------------------------------------------
21. badge
-----------------------------------------------------------------------
*/

.badge {
    text-align: center;
    font-size: 0.875rem  /* 14/16 */;
    font-weight: 300;
    border-radius: 0;
    line-height: 1.5;
}
.badge-new {
    color: #00b758 !important;
}
.badge-file {
    color: blue !important;
}
.badge-link {
    color: #7011ab !important;
}
.badge-hot {
    color: #be3a89 !important;
}
.badge-cmt {
    color: #3c8a63;
    background-color: #e7faf1;
}
.badge-lock {
    color: #000 !important;
}
.badge-category {
    color: #fff;
    background-color: #5c37ec;
    margin-right: 5px;
    font-family: '돋움', serif;
    padding: 5px 10px;
}

.ico-tooltip {
    color: #999;
    line-height: 1;
}

/*
-----------------------------------------------------------------------
22. card
-----------------------------------------------------------------------
*/

.card {
    border: 1px solid #dfdfdf;
    margin-bottom: 10px;
}
.card.bg-light {
    background-color: #eee !important;
}
.card .card-header {
    padding: 1rem 1.5rem;
    font-size: 1.125rem /* 18/16 */;
    color: #8b4336;
}
.card .card-header span {
    display: block;
    font-size: 0.875rem /* 14/16 */;
    font-weight: 500;
    color: var(--color-gray);
}
.card .card-body {
    padding: 2rem;
}
.card .card-body.bg-secondary {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.card .card-body.bg-secondary li {
    color: #fff !important;
}
.card .card-body .card-text {
    font-size: 1rem;
    font-weight: 400;
}
.card .card-body .card-title {
    padding-bottom: 10px;
}

/*
-----------------------------------------------------------------------
23. timeline
-----------------------------------------------------------------------
*/

.timeline .timeline-item .timeline-icon {
    margin-top: 7px;
}
.timeline .timeline-item .title {
    font-weight: 700;
    letter-spacing: -1px;
}
.timeline-item .title strong {
    font-size: 1.375rem /* 22/16 */;
    display: inline-block;
    padding-right: 10px;
    font-family: "Pretendard", "Helvetica", "Arial", sans-serif;
    font-weight: 800;
}
.timeline-item .title b {
    color: var(--color-secondary);
    font-weight: 800;
}
.timeline-item .desc {
    padding-top: 10px;
    color: var(--color-gray);
}

/*
-----------------------------------------------------------------------
24. accordion
-----------------------------------------------------------------------
*/

.accordion.accordion-shadow .ac-item {
    box-shadow: none;
}
.accordion .ac-item {
    border-color: var(--color-border);
}


/*
-----------------------------------------------------------------------
25. page sub menu / tab menu
-----------------------------------------------------------------------
*/

.page-lnb-left {
}
.page-lnb-top {
    display: none;
}

.page-sub-lnb {
    width: 100%;
}
.page-sub-lnb .page-lnb {
    position: relative;
    border-bottom: 1px solid #e0e0e0;
    /*height: 36px;*/
    line-height: 48;
    margin-bottom: 30px;
    overflow: hidden;
}
.page-sub-lnb .page-lnb .lnb-content {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}
.page-sub-lnb .page-lnb .lnb-content .swiper-slide {
    position: relative;
    width: auto;
    padding: 0;
    z-index: 1;
}
.page-sub-lnb .page-lnb .lnb-content .swiper-slide a {
    display: block;
    position: relative;
    color: #333;
    font-size: 0.9375rem  /* 15/16 */;
    font-weight: 500;
    line-height: 1;
    padding: 14px 18px;
    transition: all 0.5s;
    height: 38px;
    white-space: nowrap;
}
.page-sub-lnb .page-lnb .lnb-content .swiper-slide a:after {
    content: '';
    position: absolute;
    top: 36px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-blue);
    transition: all 0.5s;
}
.page-sub-lnb .page-lnb .lnb-content .swiper-slide:hover a,
.page-sub-lnb .page-lnb .lnb-content .swiper-slide.active a,
.page-sub-lnb .page-lnb .lnb-content .swiper-slide a.active {
    color: var(--color-blue) !important;
}
.page-sub-lnb .page-lnb .lnb-content .swiper-slide a:hover:after,
.page-sub-lnb .page-lnb .lnb-content .swiper-slide.active:after,
.page-sub-lnb .page-lnb .lnb-content .swiper-slide a.active:after {
    width: 100%;
    transition: all 0.5s;
}

/* 탭 메뉴 */
.nav-tabs {
    border-bottom: 1px solid var(--color-dark);
}
.nav-tabs .nav-item {
    margin-right: -1px;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--color-blue) !important;
    border-color: var(--color-dark) var(--color-dark) #fff;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: var(--color-dark) var(--color-dark) #fff;
    /*background-color: var(--bg-lightgray);*/
}