@charset "UTF-8"; 
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css");
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500&display=swap'); */

b, strong {font-weight: 500;}

a {color: inherit; text-decoration: none;}
a:active, a:focus, a:hover {color: rgba(0, 0, 0, .75); text-decoration: none;}


/* container */
@media (min-width: 1400px) {
    .container-xxl {max-width: 1320px;}
}


/* font family */
.Poppins {font-family: 'Poppins', sans-serif;}
.Noto-serif {font-family: 'Noto Serif KR', serif;}


/* font size */
/* h1, .h1 {font-size: calc(2.5rem + 1.5vw);}  /* 40px */
/* h2, .h2 {font-size: calc(2rem + 1.25vw);}   /* 32px */
/* h3, .h3 {font-size: calc(1.75rem + 1vw);}   /* 28px */
/* h4, .h4 {font-size: calc(1.5rem + 0.75vw);} /* 24px */
/* h5, .h5 {font-size: calc(1.25rem + 0.5vw);} /* 20px */
/* h6, .h6 {font-size: calc(1rem + 0.25vw);}   /* 16px */

.h1-display {font-size: clamp(2.5rem, 10vw, 6rem);}  /* 최소40px, 고정, 최대96px */
.h2-display {font-size: clamp(2rem, 9vw, 5rem);}     /* 최소32px, 고정, 최대80px */
.h3-display {font-size: clamp(1.75rem, 8vw, 4rem);}  /* 최소28px, 고정, 최대64px */
.h4-display {font-size: clamp(1.5rem, 7vw, 3rem);}   /* 최소24px, 고정, 최대48px */
.h5-display {font-size: clamp(1.25rem, 6vw, 2rem);}  /* 최소20px, 고정, 최대32px */
.h6-display {font-size: clamp(1rem, 5vw, 1.5rem);}   /* 최소16px, 고정, 최대24px */

.fs-1  {font-size: 2.5rem!important;}
.fs-2  {font-size: 2rem!important;}
.fs-3  {font-size: 1.75rem!important;}
.fs-4  {font-size: 1.5rem!important;}
.fs-5  {font-size: 1.25rem!important;}
.fs-6  {font-size: 1rem!important;}
.fs-7  {font-size: .9375rem!important;}
.fs-8  {font-size: .875rem!important;}
.fs-9  {font-size: .8125rem!important;}
.fs-10 {font-size: .75rem!important;}

.fw-100 {font-weight: 100!important;}  /* Thin */
.fw-200 {font-weight: 200!important;}  /* ExtraLight */
.fw-300 {font-weight: 300!important;}  /* Light */
.fw-400 {font-weight: 400!important;}  /* Regular */
.fw-500 {font-weight: 500!important;}  /* Medium */
.fw-600 {font-weight: 600!important;}  /* SemiBold */
.fw-700 {font-weight: 700!important;}  /* Bold */
.fw-800 {font-weight: 800!important;}  /* ExtraBold */
.fw-900 {font-weight: 900!important;}  /* Black */

.letter-spacing-1 {letter-spacing: .1em!important;}
.letter-spacing-2 {letter-spacing: .2em!important;}
.letter-spacing-3 {letter-spacing: .3em!important;}
.letter-spacing-4 {letter-spacing: .4em!important;}
.letter-spacing-5 {letter-spacing: .5em!important;}
.letter-spacing-less-1 {letter-spacing: -.1rem!important;}
.letter-spacing-less-2 {letter-spacing: -.2rem!important;}


/* round */
.rounded-1 {border-radius: 0.25rem;}
.rounded-2 {border-radius: 0.375rem;}
.rounded-3 {border-radius: 0.5rem;}
.rounded-4 {border-radius: 0.75rem;}
.rounded-5 {border-radius: 1rem;}
.rounded-6 {border-radius: 1.5rem;}


/* Colors */
.back-f39c12 {background-color: #f39c12;} 
.back-e74c3c {background-color: #e74c3c;} 
.back-c0392b {background-color: #c0392b;} 
.back-5a6773 {background-color: #5a6773;} 
.back-f6b436 {background-color: #f6b436;} 
.back-ece0d1 {background-color: #ece0d1;}
.back-ededed {background-color: #ededed;}
.back-f8f8ff {background-color: #f8f8ff;} /* GhostWhite color */
.back-1a2421 {background-color: #1a2421;} /* Dark Jungle Green color */
.back-3b5998 {background-color: #3b5998;} /* Facebook Color */

/* SteelBlue color */
.text-steelblue {color: #4682b4;} 
.back-steelblue {background-color: #4682b4!important;} 
.border-steelblue {border-color: #4682b4!important;}

/* Denim color */
.text-denim {color: #1560bd;} 
.back-denim {background-color: #1560bd!important;} 
.border-denim {border-color: #1560bd!important;}

/* Saffron color */
.text-saffron {color: #f4c430;} 
.back-saffron {background-color: #f4c430!important;} 
.border-saffron {border-color: #f4c430!important;}

/* Orange color */
.text-orange {color: #ffa500;} 
.back-orange {background-color: #ffa500!important;} 
.border-orange {border-color: #ffa500!important;}

/* Tomato color */
.text-tomato {color: #ff6347;} 
.back-tomato {background-color: #ff6347!important;} 
.border-tomato {border-color: #ff6347!important;}

/* Crimson color */
.text-crimson {color: #dc143c;} 
.back-crimson {background-color: #dc143c!important;} 
.border-crimson {border-color: #dc143c!important;}

/* Firebrick color */
.text-firebrick {color: #b22222;} 
.back-firebrick {background-color: #b22222!important;} 
.border-firebrick {border-color: #b22222!important;}

/* Forest Green */
.text-forestgreen {color: #228b22;} 
.back-forestgreen {background-color: #228b22!important;} 
.border-forestgreen {border-color: #228b22!important;}

/* Dark Green */
.text-DarkGreen {color: #006400;}
.back-DarkGreen {background-color: #006400!important;}
.border-DarkGreen {border-color: #006400!important;}


/*----------------------------------------
main-content
----------------------------------------*/
/* sitelink */
.sitelink a {font-size: .85rem; color: #818181;}
.sitelink a:hover {color: #357bbb;}
.sitelink a img {max-height: 40px;}

.sitelink.type1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    padding: 0.5rem;
    border: solid 1px #e0e0e0;
    background-color: #ffffff;
}

.sitelink.type1 a {
    display: flex;
    justify-content: center;
    margin: .25rem;
}

.sitelink.type2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.sitelink.type2 a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    border: solid 1px #e0e0e0;
    background-color: #ffffff;
    width: calc(100% / 6 - 10px);
    margin: .25rem 0;
}

@media (max-width: 991.98px) {
    /* sitelink */
    .sitelink.type2 a {width: calc(100% / 3 - 10px);}
}

@media (max-width: 575.98px) {
    /* sitelink */
    .sitelink.type2 a {width: calc(100% / 2 - 10px);}
}


/*----------------------------------------
page-content
----------------------------------------*/
/* page-text */
.page-text {word-break: keep-all;}
.page-text div {margin-top: 1.5rem; margin-bottom: 1.5rem;}
.page-text p   {margin: .5rem 0;}
.page-text b, .page-text strong  {font-weight: 500!important;}
.page-text ul, .page-wrap ol {padding-left: 1.25rem;}
.page-text blockquote {margin-left: 1.25rem;}


/* button */
.button {
    display: inline-block; 
    zoom: 1; 
    /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline; 
    vertical-align: baseline; 
    margin: 0; 
    outline: none; 
    cursor: pointer; 
    text-align: center; 
    text-decoration: none; 
}

.button:hover  {text-decoration: none;}
.button:active {position: relative; top: 1px;}

.button.size-lg {padding: 1rem 2rem; font-weight: 500;}
.button.size-md {padding: .75rem 1.5rem; font-weight: 500;}
.button.size-sm {padding: .5rem 1rem; font-weight: 500; font-size: .85rem;}
.button.size-xs {padding: .25rem .75rem; font-weight: 500; font-size: .75rem;}

.button.white {color: #555; border: solid 1px #CCC; background: #FFF;}
.button.white:hover  {color: #555; background: #F2F2F2;}
.button.white:active {color: #555;}

.button.gray {color: #555; border: solid 1px #CCC; background: #F2F2F2;}
.button.gray:hover  {color: #555; background: #FFF;}
.button.gray:active {color: #555;}

.button.blue {color: #FFF; border: solid 1px #009EDB; background: #009EDB;}
.button.blue:hover  {color: #FFF; background: #2EB3E6;}
.button.blue:active {color: #FFF;}

.button.rosy {color: #FFF; border: solid 1px #DA4B58; background: #DA4B58;}
.button.rosy:hover  {color: #FFF; background: #DC5867;}
.button.rosy:active {color: #FFF;}


/* panel */
.panel {margin: 1rem 0; padding: .1rem 1rem;}
.panel.left-bar {border-left: 6px solid #ccc;}


/* tab open */
.tab {overflow: hidden;}
.tab button {
    background-color: #f1f1f1; 
    float: left; 
    cursor: pointer; 
    padding: 1rem 1.5rem; 
    transition: 0.3s; 
    font-size: 1rem; 
    margin-bottom: -1px; 
    border: 1px solid #ccc; 
    min-height: 60px; 
}
.tab button:focus  {outline: none;}
.tab button:hover  {background-color: #ddd;}
.tab button:active {background-color: #fff; font-weight: 500; border-top: 3px solid;}

.tabcontent {margin: 1.5rem 0;}
.tabcontent:nth-child(n+3) {display: none;}


/* tab - 3depth */
.tab-3depth   {display: contents;}
.tab-3depth a {margin-bottom: .25rem;}


/* list style */
.list-none>li    {list-style: none;}
.list-disc>li    {list-style: disc;}
.list-circle>li  {list-style: circle;}
.list-decimal>li {list-style: decimal;}
.list-lower-roman>li {list-style: lower-roman;}

.list-bracket1>li {counter-increment: section; position: relative; list-style-type: none;}
.list-bracket1>li::before {
    display: inline-block; 
    content: counter(section) ')'; 
    position: absolute; 
    left: -20px; 
}

.list-bracket2>li {counter-increment: inst; position: relative; list-style-type: none;}
.list-bracket2>li::before {
    display: inline-block; 
    content: '(' counter(inst) ')'; 
    position: absolute; 
    left: -20px; 
}

.list-bullet>li {position: relative; list-style: none;}
.list-bullet>li:before {
    display: block; 
    content: ""; 
    width: 5px; 
    height: 5px; 
    background: #737373; 
    position: absolute; 
    top: 10px; 
    left: -15px; 
    border-radius: 50%; 
}


/* table */
.table-type1 {border-collapse: collapse; border: 1px solid #E1E2E4; margin-top: 10px; font-size: .85rem; text-align: center;}
.table-type1 th {padding: 5px; background-color: #F8F9FD; color: #517AB8; border-top: 2px solid #C6D1E3; border-right: 1px solid #E1E2E4; font-size: 1rem; font-weight: 500;}
.table-type1 td {padding: 5px; border-top: 1px solid #E1E2E4; border-right: 1px solid #E1E2E4;}
.table-type1 td.point {background-color: #fafafa;}


/* table reponsive */
.re-table div {display: flex; flex-direction: row; flex-wrap: wrap; margin: 0.25rem 0;}
.re-table div.f-left {display: grid; justify-content: center; align-items: center;}
.re-table .f-left  {border: 1px solid #dee2e6; background-color: #f8f9fa; padding: 1rem 0; margin: 0;}
.re-table .f-right {left: -1px; border: 1px solid #dee2e6; padding: 1rem 1.5rem; margin: 0;}

.re-table li {position: relative; display: block; margin: .25rem 1.25rem;}
.re-table li:before {
    display: block; 
    content: ""; 
    width: 5px; 
    height: 5px; 
    background: #737373; 
    position: absolute; 
    top: 10px; 
    left: -15px; 
    border-radius: .5rem; 
}

.re-table .w-half li {position: relative; display: inline-flex; margin: .25rem 1.25rem; width: calc(100%/2 - 42px);}

@media (max-width: 767.98px) {
    .re-table .f-right {left: 0; top: -1px;}
}

@media (max-width: 575.98px) {
    .re-table .w-half li {width: calc(100%/1 - 40px);}
}


/*----------------------------------------
page-content / Related Sites
----------------------------------------*/
.related {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.related li {
    border: 1px solid #dee2e6;
    padding: .75rem 1rem;
    margin: .125rem;
    width: calc(100% / 3 - 4px);
}

.related li:hover {background-color: rgba(247, 195, 46, 0.15);}

@media (max-width: 991.98px) {
    .related li {width: calc(100% / 2 - 8px);}
}

@media (max-width: 575.98px) {
    .related li {width: calc(100% / 1 - 4px);}
}


/*----------------------------------------
page-content / history
----------------------------------------*/
.tab .tab-history {width: auto;}

.history {display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin: 0!important;}
.history:first-child {margin-top: 1rem!important;}
.history>div {margin: 0!important; padding: 0 1.5rem;}

.years_wrap {
    -ms-flex: 0 0 auto; 
    flex: 0 0 auto; 
    width: auto; 
    max-width: 100%; 
    position: relative; 
    border-right: 1px solid #ccc; 
}

.years h4 {padding-right: 1rem; font-weight: 500; font-size: 1.5rem; margin-top: 20px;}
.years h4:after {
    display: block; 
    content: ""; 
    width: 15px; 
    height: 15px; 
    border: 1px solid #606060; 
    background-color: #606060; 
    box-shadow: inset 3px 0 0 0 #fff, inset 0 3px 0 0 #fff, inset 0 0 0 3px #fff; 
    position: absolute; 
    top: 28px; 
    right: -8px; 
    border-radius: 100%; 
    box-sizing: border-box; 
}

.history-list ul {
    margin: 1.25rem 0; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: nowrap; 
    justify-content: flex-start; 
    align-items: flex-start; 
}

.history-list li {display: flex; flex-direction: row; align-items: flex-start; margin: .25rem 0;}
.history-list li p {margin: 0;}
.history-list li .txt_month {display: inline-block; font-weight: 500; margin-right: 1rem;}
.history-list li .txt_day   {display: inline-block; font-weight: 500; margin-right: 1rem; min-width: 6rem;}
.history-list li .txt_info  {display: inline-block; margin: 0;}
.history-list li .txt_info span {display: block;}
.history-list li .txt_info span:first-child {margin-bottom: .25rem; font-weight: 500;}

@media (max-width: 991.98px) {
    .history-list ul {display: grid;}
}

@media (max-width: 767.98px) {
    .history {display: block;}
    .history>div {padding: 0;}
    .years_wrap {border-right: none;}
    .years h4 {border-bottom: 1px solid #ccc; padding-top: 1.5rem; padding-bottom: 1rem;}
    .years h4:after {top: 62px; right: 0;}
    .history-list ul {padding-left: 0rem !important;}
}


/*----------------------------------------
page-content / rule
----------------------------------------*/
.rule ul, .rule ol {margin: .5rem 0; padding-left: 1.25rem;}
.rule li {margin: .25rem 0;}
.rule div>strong, .rule li>strong {display: block; margin-bottom: .25rem; font-weight: 500;}
.rule .ex {background-color: #e2e3e5; font-size: .85rem; color: #464646; padding: 8px 16px; margin: 0.25rem 0;}

.rule dt {font-weight: 500; float: left;}

.rull-amendment ul {display: flex; flex-wrap: wrap; justify-content: flex-end;}
.rull-amendment li {display: none;}
.rull-amendment li:last-child {display: block;}

@media (min-width: 992px) {
    .rull-amendment li {display: block; width: 140px; text-align: right;}
}