@font-face { font-family: "IBM Plex Sans KR"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Light.woff") format("woff"); font-weight: 300; font-display: swap; }
@font-face { font-family: "IBM Plex Sans KR"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans KR"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans KR"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans KR"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
:after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
:root {
--inner: 1600;
 
    /* color */
    --color-primary: #0033cc;  
    --color-secondary: #0a1020;  
 
    /* font style */
    --font-size-12 : clamp(10px, calc(12 / var(--inner) * 100vw), 12px);
    --font-size-13 : clamp(11px, calc(13 / var(--inner) * 100vw), 13px);
    --font-size-14 : clamp(12px, calc(14 / var(--inner) * 100vw), 14px);
    --font-size-15 : clamp(13px, calc(15 / var(--inner) * 100vw), 15px);
    --font-size-16 : clamp(14px, calc(16 / var(--inner) * 100vw), 16px);
    --font-size-17 : clamp(15px, calc(17 / var(--inner) * 100vw), 17px);
    --font-size-18 : clamp(15px, calc(18 / var(--inner) * 100vw), 18px);
    --font-size-19 : clamp(16px, calc(19 / var(--inner) * 100vw), 19px);
    --font-size-20 : clamp(17px, calc(20 / var(--inner) * 100vw), 20px);
    --font-size-22 : clamp(17px, calc(22 / var(--inner) * 100vw), 22px);
    --font-size-23 : clamp(18px, calc(23 / var(--inner) * 100vw), 23px);
    --font-size-24 : clamp(18px, calc(24 / var(--inner) * 100vw), 24px);
    --font-size-25 : clamp(19px, calc(25 / var(--inner) * 100vw), 25px);
    --font-size-26 : clamp(20px, calc(26 / var(--inner) * 100vw), 26px);
    --font-size-28 : clamp(21px, calc(28 / var(--inner) * 100vw), 28px);
    --font-size-30 : clamp(22px, calc(30 / var(--inner) * 100vw), 30px);
    --font-size-32 : clamp(23px, calc(32 / var(--inner) * 100vw), 32px);
    --font-size-34 : clamp(24px, calc(34 / var(--inner) * 100vw), 34px);
    --font-size-35 : clamp(25px, calc(35 / var(--inner) * 100vw), 35px);
    --font-size-36 : clamp(25px, calc(36 / var(--inner) * 100vw), 36px);
    --font-size-40 : clamp(26px, calc(40 / var(--inner) * 100vw), 40px);
    --font-size-42 : clamp(26px, calc(42 / var(--inner) * 100vw), 42px);
    --font-size-44 : clamp(26px, calc(44 / var(--inner) * 100vw), 44px);
    --font-size-45 : clamp(27px, calc(45 / var(--inner) * 100vw), 45px);
    --font-size-48 : clamp(28px, calc(48 / var(--inner) * 100vw), 48px);
    --font-size-50 : clamp(30px, calc(50 / var(--inner) * 100vw), 50px);

    /* space */
    --container-space: clamp(15px, 2vw, 30px);

    --space-6 : clamp(3px, calc(6 / var(--inner) * 100vw), 6px);
    --space-8 : clamp(4px, calc(8 / var(--inner) * 100vw), 8px);
    --space-10 : clamp(5px, calc(10 / var(--inner) * 100vw), 10px);
    --space-12 : clamp(6px, calc(12 / var(--inner) * 100vw), 12px);
    --space-14 : clamp(7px, calc(14 / var(--inner) * 100vw), 14px);
    --space-15 : clamp(7.5px, calc(15 / var(--inner) * 100vw), 15px);
    --space-16 : clamp(8px, calc(16 / var(--inner) * 100vw), 16px);
    --space-18 : clamp(9px, calc(18 / var(--inner) * 100vw), 18px);
    --space-20 : clamp(10px, calc(20 / var(--inner) * 100vw), 20px);
    --space-22 : clamp(11px, calc(22 / var(--inner) * 100vw), 22px);
    --space-24 : clamp(12px, calc(24 / var(--inner) * 100vw), 24px);
    --space-25 : clamp(12.5px, calc(25 / var(--inner) * 100vw), 25px);
    --space-26 : clamp(13px, calc(26 / var(--inner) * 100vw), 26px);
    --space-28 : clamp(14px, calc(28 / var(--inner) * 100vw), 28px);
    --space-30 : clamp(15px, calc(30 / var(--inner) * 100vw), 30px);
    --space-32 : clamp(16px, calc(32 / var(--inner) * 100vw), 32px);
    --space-35 : clamp(17.5px, calc(35 / var(--inner) * 100vw), 35px);
    --space-36 : clamp(18px, calc(36 / var(--inner) * 100vw), 36px);
    --space-40 : clamp(20px, calc(40 / var(--inner) * 100vw), 40px);
    --space-48 : clamp(24px, calc(48 / var(--inner) * 100vw), 48px);
    --space-50 : clamp(25px, calc(50 / var(--inner) * 100vw), 50px);
    --space-55 : clamp(27.5px, calc(55 / var(--inner) * 100vw), 55px);
    --space-56 : clamp(28px, calc(56 / var(--inner) * 100vw), 56px);
    --space-60 : clamp(30px, calc(60 / var(--inner) * 100vw), 60px);
    --space-66 : clamp(33px, calc(66 / var(--inner) * 100vw), 66px);
    --space-70 : clamp(35px, calc(70 / var(--inner) * 100vw), 70px);
    --space-80 : clamp(40px, calc(80 / var(--inner) * 100vw), 80px);
    --space-90 : clamp(45px, calc(90 / var(--inner) * 100vw), 90px);
    --space-100 : clamp(50px, calc(100 / var(--inner) * 100vw), 100px);
    --space-110 : clamp(50px, calc(110 / var(--inner) * 100vw), 110px);
    --space-120 : clamp(50px, calc(120 / var(--inner) * 100vw), 120px);
    --space-130 : clamp(50px, calc(130 / var(--inner) * 100vw), 130px);
    --space-140 : clamp(50px, calc(140 / var(--inner) * 100vw), 140px);
    --space-150 : clamp(50px, calc(150 / var(--inner) * 100vw), 150px);
    --space-160 : clamp(50px, calc(160 / var(--inner) * 100vw), 160px);
    --space-170 : clamp(50px, calc(170 / var(--inner) * 100vw), 170px);
    --space-180 : clamp(50px, calc(180 / var(--inner) * 100vw), 180px);
    --space-200 : clamp(50px, calc(200 / var(--inner) * 100vw), 200px);
 
    /* radius */
    --radius-2 : 2px;
    --radius-4 : 4px;
    --radius-6 : 6px;
    --radius-8 : 8px;
    --radius-10 : 10px;
    --radius-15 : 15px;
    --radius-16 : 16px;
    --radius-18 : 18px;
    --radius-20 : 20px;
    --radius-24 : 24px;
    --radius-30 : 30px;
    --radius-32 : 32px;
    --radius-40 : 40px;
    --radius-50 : 50px;

    /* shadow */ 
    --shadow : 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
 
    /* etc */
    --header-height: 88px;
    --lnb-height: 64px;
	--font: "IBM Plex Sans KR", sans-serif;
	--tracking: -0.03em;
	--title: #121212;
	--body: #505050;
	--line: #dddddd;
	--paper: #ffffff;
	--mist: #f3f5f9;
	--ink: #0a1020;
	--ink-2: #0f172b;
	--ink-line: rgba(255, 255, 255, 0.14);
	--snow: #f4f6fa;
	--snow-dim: rgba(244, 246, 250, 0.72);
	--ice: #9db6ff;
	--wide: 1680px;
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--font-size-11 : clamp(5.5px, calc(11 / var(--inner) * 100vw), 11px);
	--font-size-21 : clamp(10.5px, calc(21 / var(--inner) * 100vw), 21px);
	--font-size-33 : clamp(16.5px, calc(33 / var(--inner) * 100vw), 33px);
	--font-size-46 : clamp(23px, calc(46 / var(--inner) * 100vw), 46px);
	--font-size-64 : clamp(32px, calc(64 / var(--inner) * 100vw), 64px);
	--font-size-70 : clamp(35px, calc(70 / var(--inner) * 100vw), 70px);
	--font-size-72 : clamp(36px, calc(72 / var(--inner) * 100vw), 72px);
	--font-size-116 : clamp(58px, calc(116 / var(--inner) * 100vw), 116px);
	--font-size-150 : clamp(75px, calc(150 / var(--inner) * 100vw), 150px);
	--space-1 : clamp(0.5px, calc(1 / var(--inner) * 100vw), 1px);
	--space-2 : clamp(1px, calc(2 / var(--inner) * 100vw), 2px);
	--space-3 : clamp(1.5px, calc(3 / var(--inner) * 100vw), 3px);
	--space-4 : clamp(2px, calc(4 / var(--inner) * 100vw), 4px);
	--space-5 : clamp(2.5px, calc(5 / var(--inner) * 100vw), 5px);
	--space-7 : clamp(3.5px, calc(7 / var(--inner) * 100vw), 7px);
	--space-9 : clamp(4.5px, calc(9 / var(--inner) * 100vw), 9px);
	--space-11 : clamp(5.5px, calc(11 / var(--inner) * 100vw), 11px);
	--space-13 : clamp(6.5px, calc(13 / var(--inner) * 100vw), 13px);
	--space-23 : clamp(11.5px, calc(23 / var(--inner) * 100vw), 23px);
	--space-27 : clamp(13.5px, calc(27 / var(--inner) * 100vw), 27px);
	--space-29 : clamp(14.5px, calc(29 / var(--inner) * 100vw), 29px);
	--space-34 : clamp(17px, calc(34 / var(--inner) * 100vw), 34px);
	--space-38 : clamp(19px, calc(38 / var(--inner) * 100vw), 38px);
	--space-42 : clamp(21px, calc(42 / var(--inner) * 100vw), 42px);
	--space-43 : clamp(21.5px, calc(43 / var(--inner) * 100vw), 43px);
	--space-44 : clamp(22px, calc(44 / var(--inner) * 100vw), 44px);
	--space-45 : clamp(22.5px, calc(45 / var(--inner) * 100vw), 45px);
	--space-54 : clamp(27px, calc(54 / var(--inner) * 100vw), 54px);
	--space-63 : clamp(31.5px, calc(63 / var(--inner) * 100vw), 63px);
	--space-64 : clamp(32px, calc(64 / var(--inner) * 100vw), 64px);
	--space-72 : clamp(36px, calc(72 / var(--inner) * 100vw), 72px);
	--space-82 : clamp(41px, calc(82 / var(--inner) * 100vw), 82px);
	--space-96 : clamp(48px, calc(96 / var(--inner) * 100vw), 96px);
	--space-210 : clamp(105px, calc(210 / var(--inner) * 100vw), 210px);
}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,figure,figcaption { margin: 0; padding: 0; }
body { font-family: var(--font); font-size: var(--font-size-16); font-weight: 400; line-height: 1.75em; letter-spacing: var(--tracking); color: #121212; background: var(--paper); word-break: keep-all; -webkit-text-size-adjust: none; }
input,textarea,select,button,table { font-family: inherit; font-size: inherit; line-height: inherit; }
img { border: 0; max-width: 100%; vertical-align: top; }
ul,ol { list-style: none; }
fieldset { border: none; }
fieldset legend { overflow: hidden; width: 0; height: 0; margin: 0; padding: 0; font-size: 0; line-height: 0; text-indent: -999em; }
button { cursor: pointer; }
header,hgroup,article,nav,footer,figure,figcaption,canvas,section,time { display: block; }
hr { clear: both; display: none; }
img[usemap] { border: none; height: auto; max-width: 100%; width: auto; }
a { color: inherit; text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
a:hover, a:active { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
::-webkit-input-placeholder { color: #9F9F9F; }
:-moz-placeholder { color: #9F9F9F; }
::-moz-placeholder { color: #9F9F9F; }
:-ms-input-placeholder { color: #9F9F9F; }
:placeholder-shown { color: #9F9F9F; }
table caption { overflow: hidden; width: 0; height: 0; margin: 0; padding: 0; font-size: 0; line-height: 0; text-indent: -999em; }
input[type="radio"], input[type="checkbox"] { vertical-align: middle !important; margin: -.2em var(--space-3) 0 0 !important; }
input,select { vertical-align: middle; background: #fff; }
input,textarea,button { -webkit-appearance: none; -webkit-border-radius: 0; }
input[type='checkbox'] { -webkit-appearance: checkbox; }
input[type='radio'] { -webkit-appearance: radio; }
h1,h2,h3,h4,h5,h6,strong,th,.bold { font-weight: 700; }
.semibold { font-weight: 500; }
.clear { clear: both; }
.clearfix:after { content: " "; display: block; clear: both; }
.blind { position: absolute; overflow: hidden; width: 0; height: 0; margin: 0; padding: 0; font-size: 0; line-height: 0; }
.pointer { cursor: pointer; }
.input { height: 44px; padding: var(--space-6) var(--space-16); color: #505050; font-size: var(--font-size-15); line-height: 1.5em; border: 1px solid #ddd; border-radius: 4px; }
.input[readonly] { background-color: #e8e8e8; color: #aaaaaa; }
.input.datepicker { padding-right: var(--space-40); background: #fff url('../images/bbs/datepicker_icon.png') right 10px center no-repeat; }
textarea.input { height: auto; padding: var(--space-13) var(--space-16); overflow: auto; resize: none; }
select.input { padding-right: var(--space-40); background: #fff url('../images/bbs/select.svg') right 14px center no-repeat; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select.input::-ms-expand { display: none; }
input[type=file].input { padding: 0; }
input[type=password] { font-family: var(--font); }
.mgb2 { margin-bottom: var(--space-2) !important; }
.mgb3 { margin-bottom: var(--space-3) !important; }
.mgb4 { margin-bottom: var(--space-4) !important; }
.mgb5 { margin-bottom: var(--space-5) !important; }
.mgb6 { margin-bottom: var(--space-6) !important; }
.mgb7 { margin-bottom: var(--space-7) !important; }
.mgb8 { margin-bottom: var(--space-8) !important; }
.mgb9 { margin-bottom: var(--space-9) !important; }
.mgb10 { margin-bottom: var(--space-10) !important; }
.mgb15 { margin-bottom: var(--space-15) !important; }
.mgb20 { margin-bottom: var(--space-20) !important; }
.mgb30 { margin-bottom: var(--space-30) !important; }
.mgb40 { margin-bottom: var(--space-40) !important; }
.mgb50 { margin-bottom: var(--space-50) !important; }
.mgb60 { margin-bottom: var(--space-60) !important; }
.fl { float: left; }
.fr { float: right; }
.space-center { text-align: center !important; }
.space-right { text-align: right !important; }
.space-left { text-align: left !important; }
.inline-block { display: inline-block; }
.video-container { position: relative; padding-bottom: 56.25%; overflow: hidden; }
.video-container video, .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.radiobox { display: inline-block; position: relative; vertical-align: middle; margin-top: -.2em; }
.radiobox input { position: absolute; top: 0; left: 0; width: 0; height: 0; border: 0; opacity: 0; z-index: -1; }
.radiobox label { display: inline-block; }
.radiobox label:before { content: ""; display: inline-block; vertical-align: middle; margin: -.2em var(--space-8) 0 0; width: 20px; height: 20px; background-color: #fff; border: 1px solid #ccc; border-radius: 100%; }
.radiobox input:checked + label:before { background: #fff url("../images/bbs/radiobox.svg") 50% 50% no-repeat; background-size: 10px; border-color: var(--color-primary); }
.radiobox input:focus + label:before { outline: 2px solid highlight; }
.checkbox { display: inline-block; position: relative; vertical-align: middle; margin-top: -.2em; }
.checkbox input { position: absolute; top: 0; left: 0; width: 0; height: 0; border: 0; opacity: 0; z-index: -1; }
.checkbox label { display: inline-block; }
.checkbox label:before { content: ""; display: inline-block; vertical-align: middle; margin: -.2em var(--space-8) 0 0; width: 20px; height: 20px; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; }
.checkbox input:checked + label:before { background: var(--color-primary) url("../images/bbs/checkbox.svg") 50% 50% no-repeat; border-color: var(--color-primary); }
.checkbox input:focus + label:before { outline: 2px solid highlight; }
.table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-danger { color: #ff3838; }
.text-gradient { display: inline-block; background: linear-gradient(to right, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-dark { color: #242424; }
.ui-datepicker { z-index: 2 !important; display: none; background: #fff; margin-top: var(--space-2); border-radius: 10px; padding: 0 var(--space-8) var(--space-8); width: 250px; box-shadow: 0 0 3px rgba(0,0,0,.3); }
.ui-datepicker-header { position: relative; margin: 0 calc(var(--space-8) * -1) var(--space-6); padding: var(--space-5) 0; background: var(--color-primary); border-radius: 10px 10px 0 0; }
.ui-datepicker-prev, .ui-datepicker-next { position: absolute; width: 32px; height: 32px; top: 50%; cursor: pointer; margin-top: calc(var(--space-16) * -1); border-radius: 100%; overflow: hidden; text-indent: -999em; background-position: 50% 50%; background-repeat: no-repeat; }
.ui-datepicker-prev { left: 0; background-image: url("../images/bbs/datepicker_prev.png"); }
.ui-datepicker-next { right: 0; background-image: url("../images/bbs/datepicker_next.png"); }
.ui-datepicker-title { text-align: center; color: #fff; font-size: var(--font-size-18); line-height: 30px; font-weight: 500; }
.ui-datepicker-title select { border: 0; margin: -.2em var(--space-2) 0; width: 70px; height: 30px; color: #000; font-size: var(--font-size-15); padding: 0 var(--space-10) 0 var(--space-6); vertical-align: middle; }
.ui-datepicker-calendar { width: 100%; border-collapse: collapse; border-spacing: 0px; }
.ui-datepicker-calendar th { padding: var(--space-2) 0; text-align: center; font-size: var(--font-size-14); font-weight: 500; line-height: 30px; color: #222; }
.ui-datepicker-calendar td { padding: 0; text-align: center; font-size: var(--font-size-13); font-weight: 400; line-height: 30px; color: #666; }
.ui-datepicker-calendar .ui-state-default { display: inline-block; width: 30px; border-radius: 4px; }
.ui-datepicker-calendar .ui-state-hover { background-color: #eee; color: #222; }
.ui-datepicker-calendar .ui-state-active { background-color: var(--color-primary); color: #fff; }
.ui-datepicker-other-month .ui-state-default { color: #ccc; }
.ui-datepicker-last { margin-left: calc(var(--space-43) * -1); }
.ui-datepicker-trigger { width: 44px; height: 44px; margin-left: calc(var(--space-1) * -1); background: url('../images/bbs/datepicker_icon.png') 50% 50% no-repeat; border: 1px solid #aaa; vertical-align: middle; overflow: hidden; text-indent: -999em; }
.fr-box [data-aos] { opacity: 1 !important; transform: none !important; }