@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;  700&display=swap');  

.Poppins { font-family: 'Poppins', sans-serif; }


/* font style */
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; }
.fs-2  { font-size: 2rem; }
.fs-3  { font-size: 1.75rem; }
.fs-4  { font-size: 1.5rem; }
.fs-5  { font-size: 1.25rem; }
.fs-6  { font-size: 1rem; }
.fs-7  { font-size: .9375rem; }
.fs-8  { font-size: .875rem; }
.fs-9  { font-size: .8125rem; }
.fs-10 { font-size: .75rem; }

.fw-300 { font-weight: 300!important; }
.fw-400 { font-weight: 400!important; }
.fw-500 { font-weight: 500!important; }
.fw-700 { font-weight: 700!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; } 

/* SteelBlue color */
.text-steelblue { color: #4682B4; } 
.back-steelblue { background-color: #4682B4; } 
.border-steelblue { border-color: #4682B4!important; }

/* Orange color */
.text-orange { color: #ffa500; } 
.back-orange { background-color: #ffa500; } 
.border-orange { border-color: #ffa500!important; }

/* Tomato color */
.text-tomato { color: #ff6347; } 
.back-tomato { background-color: #ff6347; } 
.border-tomato { border-color: #ff6347!important; }

/* Crimson color */
.text-crimson { color: #dc143c; } 
.back-crimson { background-color: #dc143c; } 
.border-crimson { border-color: #dc143c!important; }

/* Firebrick color */
.text-firebrick { color: #b22222; } 
.back-firebrick { background-color: #b22222; } 
.border-firebrick { border-color: #b22222!important; }



/*----------------------------------------
page-content
----------------------------------------*/
/* page-text */
.page-text div { margin: 1.5rem 0; }
.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; }


/* history */
.tab .tab-history { width: auto; }

.history { 
    display: -ms-flexbox;  
    display: flex;  
    -ms-flex-wrap: nowrap;  
    flex-wrap: nowrap;  
    margin: 0!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: row;  
    flex-wrap: nowrap;  
    justify-content: flex-start;  
    align-items: flex-start;  
}

.history-list li.txt_month { 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>p { margin: 0; }
.history-list li.txt_info>p: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; }
    .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: 10px; }
    .history-list ul { padding-left: 0rem !important; }
}


/* 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; }


/* 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-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 .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: 0 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: 0 1.25rem;  width: calc(100%/2 - 45px); }

@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 - 30px); }
}