@charset "utf-8";
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
  --font-default: "Noto Sans KR", "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-primary: "Noto Sans KR","Inter", sans-serif;
  --font-secondary: "Noto Sans KR","Poppins", sans-serif;
}
@font-face {
    font-family: 'ONE-Mobile-Title';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #2c4964; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #1977cc; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #2c4964;  /* The default color of the main navmenu links */
  --nav-hover-color: #1977cc; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #2c4964; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #1977cc; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f1f7fc;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #060606;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

a{color: #333;}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
}


/* COMMON */
html {-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;text-size-adjust: none;}
body {font-family: 'Noto Sans KR', sans-serif; color: #333; font-weight: 400; word-break: keep-all;font-size: 16px;letter-spacing: -0.4px}
ul,ol,dl {list-style: none; margin: 0; padding: 0;}
img {max-width: 100%; height: auto;}
h1, h2, h3, h4, h5, h6, p {margin: 0;}
ul,ol,dl {list-style:none;margin-bottom:0;}
label {font-weight:normal;}
p {margin:0;}
address {margin:0;}

@media (max-width:768px) {
  body, input, select, button{font-size: 14px !important;letter-spacing: 0px;}
  input.gramInput {width: 8em;padding-right: 10px;}
}

/* LINK */
a,a:hover,a:focus,a:visited {text-decoration:none;outline:0;}

/* FORMS */
.form-control {outline: 0 !important;-webkit-box-shadow: none !important;box-shadow: none !important;border-radius: 5px;/* height: 2.625rem; */border-color:#afb8c1}
.form-control::-moz-placeholder {color: #aaa;}
.form-control:-ms-input-placeholder {color: #aaa;}
.form-control::-webkit-input-placeholder {color: #aaa;}
select.form-control {background: #fff url(../img/arr_select2.png) no-repeat 95% 50%;padding-top: 0;padding-bottom: 0;padding-right:1.75rem;background-size: .937rem; -webkit-appearance:none;-oz-appearance:none;-moz-appearance:none;appearance:none;line-height: normal; position: relative;}
select::-ms-expand {display:none;}
input.calendar {background:#fff url(../img/ico_cal.png) no-repeat 100% 50%;}
textarea {resize: none;}

.radio, .checkbox {margin: 0;}
.radio label, .checkbox label {padding-left: 2.2rem;position: relative; color: #333}
label {margin-bottom: 0;}
.checkbox input, .radio input {position: absolute;left:-9999px;opacity: 0}

input[type="radio"], input[type="checkbox"] {vertical-align: -2px;}
[class*=checkbox] {}
[class*=checkbox] label {cursor: pointer; line-height: 1.875rem;}
[class*=checkbox] label:before {content: "";color: #fff; display: block;text-align: center; position: absolute; width: 1.875rem; height: 1.875rem; left: 0; top: 0;border-radius: 50%; background: url(../img/checkbox.png) no-repeat 0 50% / 1.875rem;}
[class*=checkbox] :checked + label:before {background-image: url(../img/checkbox_on.png)}
[class*=radio] label {line-height: 1.333rem;position: relative;}
[class*=radio] label:before {content: ""; display: block; position: absolute; width: 32px; height: 32px; left: 0; top: 0;border: 2px solid #ccc;background: none; border-radius: 50%;}
[class*=radio] label:after {content: ""; position: absolute; width: 16px; height: 16px; left: 8px;top: 8px; display: none; border-radius: 50%;}
[class*=radio] :checked + label:after {background: #333;display: block}

.file-upload {position:relative;font-size: 0;}
.file-upload input[type="file"] {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;}
.file-upload .upload-name {display: inline-block;}
.file-upload .btn {}
.file-upload label {display: inline-block;vertical-align: top;}

/* BUTTON */
.btn {outline: 0 !important; border-radius: 5px;/* padding: .5rem; */}
.btn-rounded {border-radius: 2rem;}
.btn:focus, .btn:active, .btn:hover {-webkit-box-shadow: none;box-shadow: none;}
.btn.icon {padding: 0;background: none;}
.btn.icon img {margin:0;}
.btn-link, .btn-link:hover, .btn-link:active,.btn-link:focus {color:inherit;text-decoration: none;}
.btn.line.white {border-color:#fff;color:#fff}
.btn.line.red {border-color:#e10000;color:#e10000}
.btn.line.green {border-color:#09995d;color:#09995d}
.btn.line.blue {color:#00abcd;}
.btn.line.lightgray {color:#888;}
.btn.line.darkgray {color:#777;border-color: #777}
.btn.line.gray {color:#999; background:#fff !important; border-color:#e8e8e8;}
.btn.line.dark {border-color:#404040;color:#404040}
.btn.line.yellow {border-color:#f1c700;color:#f1c700}
.btn.line.brown {border-color:#6f5e5e;color:#6f5e5e}
.btn.line {background: transparent !important;border-color: #373737;color: #373737;}
.btn.red {background:#e10000;color:#fff;}
.btn.green {background:#09995d;border-color:#09995d;color:#fff}
.btn.blue {background:#0059c4;border-color:#0059c4;color:#fff}
.btn.lightblue {background: #333;border-color:#333;color:#fff;}
.btn.lightgray {background:#f7f7f7;border-color:#ddd;color:#666}
.btn.darkgray {background:#656565;border-color:#656565;color:#fff}
.btn.dark {background:#404040;border-color:#404040;color:#fff;}
.btn.gray {background:#9e9e9e;border-color:#9e9e9e;color:#fff;}
.btn.brown {background:#6f5e5e;border-color:#6f5e5e;color:#fff}
.btn.yellow {background:#f1c700;border-color:#f1c700;color:#fff}
.btn.black {background:#222;border-color:#222;color:#fff}
.btn-box {margin: 3rem 0;text-align:center;}
.btn-box .btn {min-width:9rem;/* height:2.8rem; */font-size: 1.125rem;}
.btn-box.line {border-top:1px solid #ddd;padding-top: 5%;}

@media (max-width:768px) {
    .btn-box {margin: 5% auto;}
}

/* TABLE */
.table {border-top: 1px solid #dee2e6;margin: 0;position: relative;width:100%}
.table th,
.table td {vertical-align: middle; padding: .75em 1em;border-top: 0; font-weight: normal;}
.table th, .table td {border-right:1px solid #dee2e6;border-bottom:1px solid #dee2e6; }
.table tr th:last-child, .table tr td:last-child{border-right: none;}
.table th {background:#f3f6fc; font-weight: 500;color: #222;text-align:center}
.table td.con {text-align:left; }
.table.t-hover tr:hover td{background-color: #fafafa !important;}
.table th.dark-line, .table td.dark-line{border-bottom:1px solid #222;}

.table.board{border-top: 1px solid #222;text-align:center;}
.table.board td{border-right:none; padding:1.125em .75em;}
.table.board .title{text-align:left; font-size:1.1em;font-weight:500;}
.table.board .title a{color:#222}

.table.center th, table.center td {text-align: center;}
.table.center .left{text-align: left;}
.table.left th, table.left td {text-align: left;}
.table.table-form th {border-top: 1px solid #ddd;line-height: 30px;vertical-align: top;}
.table.table-form td {padding-top: 12px;border-top: 1px solid #ddd;}
.table.center .title {text-align: left;}
.table.top th, table.top td {vertical-align: top;}
.table p {font-size:1rem;}
.table-responsive {position: relative;}

@media (max-width:768px) {
  .table th, .table td {padding: .5em;}
    .table.table-form th {display: block;}
    .table.table-form td {display: block;border-top: 0;padding-top: 0;}
    .table-responsive .table {min-width: 550px;}
    .table-responsive:after {display: none;}
    .table-responsive:after {content: "↔  좌우로 슬라이드하세요."; display: block;width: 100%;padding: 5px;text-align: center;color: #0d42ff;}

	.table.board td{padding:.75em .25em;}
}
@media (max-width:486px) {

}




/* TEXT STYLE */
small, .small {font-size: 95%}
.text-xs {font-size:80%;}
.text-sm {font-size:90%;}
.text-lg {font-size:105%;}
.text-xlg {font-size:110%;}
.text-xxlg {font-size:120%;}
.light {font-weight:300;}
.normal {font-weight:400;}
.bold {font-weight:500;}
.bolder {font-weight:700;}
.nowrap {display:block;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;}
.block {display:block;}
.inline {display:inline-block;width: auto;}
.underline {text-decoration:underline}
.text-blue {color:#005fda}
.text-red {color:#b13636}
.text-red2 {color:red}
.text-orange {color:#ff7800}
.text-black {color:#222}
.text-green {color:#2ab6ae}
.lead {margin: 0}
.help-block {margin: 0;}
.text-right{text-align: right !important;}
.text-center{text-align: center !important;}


.pagination{margin-top:3em !important}

/* ETC. */
.scrollable-container {position:relative;}
.scrollable {overflow:hidden;overflow-y:auto;height:100%;-webkit-overflow-scrolling:touch;position:relative;}
.scrollable.horizontal {overflow-y:hidden;overflow-x:auto;}
.scrollable.horizontal.vertical {overflow:auto;}
.scrollable.horizontal {width:100%;overflow-y:hidden;overflow-x:auto;position:static;padding:0;}
.scrollable.horizontal table /* {min-width:750px; width:auto */ {min-width:380px;}
.slide-control {display:none}
.divider {font-size:0;height:1px;background:#e0e0e0;margin:20px 0;}
#skippy {position:absolute;padding:10px;display:inline-block;border:2px solid #eee;background:#fff;z-index:9999;}
#mask {background:#000;opacity: 0.8;display: none;position:fixed;width:100%;top:0;right:0;left:0;bottom:0;z-index:600;}
#overlay {background:#000;opacity: 0.8;display: none;position:fixed;width:100%;top:0;right:0;left:0;bottom:0;z-index:600;}
.browser-mask {background:rgba(0, 0, 0, 0.7);position:fixed;width:100%;top:0;right:0;left:0;bottom:0;z-index:9998;}
.browser-upgrade {position:fixed;top:0;left:0;width:100%;background:#f7f7f7;border-bottom:2px solid #f5b63b;color:#000;font-family:sans-serif;margin:0 0 1em;padding:1em 0;text-align:center;z-index:9999;}
@media (max-width:991px) {
    .slide-control {display:block;}
/*     .scrollable.horizontal .btn {width:30px;height:30px;background:rgba(41, 171, 163, 0.67);border:1px solid #29aba3;position:absolute;color:#fff;top:50%;margin-top:-15px;font-size:0;}
    .scrollable.horizontal .btn:hover, .scrollable.horizontal .btn:focus {text-decoration:none }
    .scrollable.horizontal .prev {left:0;}
    .scrollable.horizontal .prev:before {content:"\f104";font-size:15px;font-family:'Fontawesome';line-height:normal;}
    .scrollable.horizontal .next {right:0;}
    .scrollable.horizontal .next:before {content:"\f105";font-size:15px;font-family:'Fontawesome';line-height:normal;} */
}

.modal {text-align: center;padding: 0!important;}
.modal:before {content: '';display: inline-block;height: 100%;vertical-align: middle;margin-right: -4px;}
.modal-dialog {display: inline-block;text-align: left;vertical-align: middle;}

/* POPUP */
.popup {position: fixed; min-width: 300px; left: 50%; top: 50%; background: #fff;width:100%;max-width: 640px; display:none; overflow: hidden; z-index:601}
.popup .popup-header {width:100%;background: #c82032; position: relative;z-index:2;}
.popup .popup-header img {margin-right:5px;}
.popup .popup-header h1 {font-size: 1.25rem;padding: 1rem;text-align:left; font-weight: normal;color: #fff;margin: 0;}
.popup .popup-header h1.text-left {text-align: left}
.popup .popup-header .btn-x { position:absolute;right:10px;top:50%;width: 25px;height: 25px;padding: 0;display: block;background: url(../img/25.close_white.png) no-repeat 50% 50%;font-size: 0;position: absolute;margin-top: -12px;}
.popup .popup-body {padding:0rem;max-height: 35rem;overflow-y: auto;}
.popup .popup-body .container {padding: 1rem;}
.popup .popup-body span.s-title {display:block; width:100%; background:#d0d2d5; font-size:.825rem; padding:.5rem; text-indent:1rem; }
.popup .popup-body .table {border-top: 1px solid #333;}
.popup .popup-body .table th {font-weight: 600; white-space: nowrap}
.popup .popup-body span:not(.s-title){display:block; margin-top:.5rem; font-size:13px; }
.popup .popup-body .terms {height:10rem; }
.popup .popup-footer {text-align: center;border-top: 1px solid rgba(180, 180, 180, 0.2);}
.popup .popup-footer .btn {font-size: 1.083rem;border-radius: 0;}
.popup .btn-box .btn {padding: .4rem 1rem;min-width: 30%; }
.indexPop {z-index: 9991;}
.indexPop .inner {padding: 20px;}
.indexPop .p-close {background: #000;color: #fff;padding: 10px;overflow: hidden;}
.indexPop .p-close .right {float: right;cursor:pointer;}

@media (max-width: 991px) {
}

@media (min-width: 770px) {
  .mb-ml-3{margin-left: 1rem !important;}
}
/* BOX STYLE */
.panel+.panel {margin-top: 15px;}
.bg-white {background: #fff}
.bg-gray {background: #141414}
.bg-red {background: #ff443a}
.bg-yellow {background: #ffd700}
.bg-orange {background: #ff8d00}
.g-box {background:#f3f3f3;}
.b-box {border:1px solid #ddd;}
.w-box {background:#fff;}
.pd {padding: 15px;}
.pdx2 {padding: 30px;}
.pdx3 {padding: 45px;}
.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.mb-6{
  margin-bottom: 5rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}

.dis-flex {
  display: -ms-flexbox !important;
  display: -webkit-box !important;
  display: flex !important;
}


.dcol-5{width: 100%;
  display: -ms-flexbox !important;
  display: -webkit-box !important;
  display: flex !important;flex-wrap:wrap;justify-content:flex-start;
}
.dcol-5>div{padding:.75em;width:20%;margin-bottom:1.25em;}
@media (max-width:991px) {
  .dcol-5>div{width:33.3333%;}
}
@media (max-width:480px) {
  .dcol-5>div{width:50%;}
}

.dcol-3{width: 100%;
  display: -ms-flexbox !important;
  display: -webkit-box !important;
  display: flex !important;flex-wrap:wrap;justify-content:flex-start;
}
.dcol-3>div{padding:.75em;width:33.33333%;margin-bottom:1.25em;}
@media (max-width:991px) {
  .dcol-3>div{width:50%;}
}
@media (max-width:480px) {
  .dcol-3>div{width:50%;}
}


.dcol-4{width: 100%;
  display: -ms-flexbox !important;
  display: -webkit-box !important;
  display: flex !important;flex-wrap:wrap;justify-content:flex-start;
}
.dcol-4>div{padding:.75em;width:25%;margin-bottom:1.25em;}
@media (max-width:991px) {
  .dcol-4>div{width:50%;}
}
@media (max-width:480px) {
  .dcol-4>div{width:50%;}
}