@charset "utf-8";

@import url('aos.css');
@import url('swiper-bundle.min.css');
@import url('slick.css');

/* 기본 */
* { -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-primary: #ff8946;
  --color-secondary: #65cbd9;

  /* Font Sizes */
  --font-size-10: clamp(10px, calc(10 / var(--inner) * 100vw), 10px);
  --font-size-11: clamp(10px, calc(11 / var(--inner) * 100vw), 11px);
  --font-size-12: clamp(11px, calc(12 / var(--inner) * 100vw), 12px);
  --font-size-13: clamp(12px, calc(13 / var(--inner) * 100vw), 13px);
  --font-size-14: clamp(13px, calc(14 / var(--inner) * 100vw), 14px);
  --font-size-15: clamp(14px, 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(16px, 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(19px, calc(26 / var(--inner) * 100vw), 26px);
  --font-size-28: clamp(20px, calc(28 / var(--inner) * 100vw), 28px);
  --font-size-30: clamp(20px, calc(30 / var(--inner) * 100vw), 30px);
  --font-size-32: clamp(21px, calc(32 / var(--inner) * 100vw), 32px);
  --font-size-33: clamp(21px, calc(33 / var(--inner) * 100vw), 33px);
  --font-size-34: clamp(22px, calc(34 / var(--inner) * 100vw), 34px);
  --font-size-35: clamp(22px, calc(35 / var(--inner) * 100vw), 35px);
  --font-size-36: clamp(22px, calc(36 / var(--inner) * 100vw), 36px);
  --font-size-40: clamp(23px, calc(40 / var(--inner) * 100vw), 40px);
  --font-size-42: clamp(23px, calc(42 / var(--inner) * 100vw), 42px);
  --font-size-44: clamp(24px, calc(44 / var(--inner) * 100vw), 44px);
  --font-size-45: clamp(24px, calc(45 / var(--inner) * 100vw), 45px);
  --font-size-48: clamp(25px, calc(48 / var(--inner) * 100vw), 48px);
  --font-size-50: clamp(25px, calc(50 / var(--inner) * 100vw), 50px);
  --font-size-56: clamp(26px, calc(56 / var(--inner) * 100vw), 56px);
  --font-size-64: clamp(28px, calc(64 / var(--inner) * 100vw), 64px);
  --font-size-72: clamp(30px, calc(72 / var(--inner) * 100vw), 72px);

  --font-hero: clamp(40px, 5vw, 80px);
  --font-sec-heading: clamp(32px, 3.5vw, 56px);
  --font-card-title: clamp(22px, 2vw, 32px);
  --font-stat: clamp(44px, 4.5vw, 72px);
  --font-size-body: 18px;
  --font-size-min: 14px;

  /* Spacing */
  --container-space: var(--space-30);

  --space-1: clamp(1px, calc(1 / var(--inner) * 100vw), 1px);
  --space-2: clamp(1px, calc(2 / var(--inner) * 100vw), 2px);
  --space-3: clamp(2px, calc(3 / var(--inner) * 100vw), 3px);
  --space-4: clamp(2px, calc(4 / var(--inner) * 100vw), 4px);
  --space-5: clamp(3px, calc(5 / var(--inner) * 100vw), 5px);
  --space-6: clamp(3px, calc(6 / var(--inner) * 100vw), 6px);
  --space-7: clamp(4px, calc(7 / var(--inner) * 100vw), 7px);
  --space-8: clamp(4px, calc(8 / var(--inner) * 100vw), 8px);
  --space-9: clamp(5px, calc(9 / var(--inner) * 100vw), 9px);
  --space-10: clamp(5px, calc(10 / var(--inner) * 100vw), 10px);
  --space-11: clamp(6px, calc(11 / var(--inner) * 100vw), 11px);
  --space-12: clamp(6px, calc(12 / var(--inner) * 100vw), 12px);
  --space-13: clamp(7px, calc(13 / var(--inner) * 100vw), 13px);
  --space-14: clamp(7px, calc(14 / var(--inner) * 100vw), 14px);
  --space-15: clamp(8px, 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-19: clamp(10px, calc(19 / var(--inner) * 100vw), 19px);
  --space-20: clamp(10px, calc(20 / var(--inner) * 100vw), 20px);
  --space-21: clamp(11px, calc(21 / var(--inner) * 100vw), 21px);
  --space-22: clamp(11px, calc(22 / var(--inner) * 100vw), 22px);
  --space-23: clamp(12px, calc(23 / var(--inner) * 100vw), 23px);
  --space-24: clamp(12px, calc(24 / var(--inner) * 100vw), 24px);
  --space-25: clamp(12px, calc(25 / var(--inner) * 100vw), 25px);
  --space-26: clamp(14px, calc(26 / var(--inner) * 100vw), 26px);
  --space-27: clamp(14px, calc(27 / var(--inner) * 100vw), 27px);
  --space-28: clamp(14px, calc(28 / var(--inner) * 100vw), 28px);
  --space-29: clamp(15px, calc(29 / var(--inner) * 100vw), 29px);
  --space-30: clamp(15px, calc(30 / var(--inner) * 100vw), 30px);
  --space-32: clamp(16px, calc(32 / var(--inner) * 100vw), 32px);
  --space-35: clamp(18px, calc(35 / var(--inner) * 100vw), 35px);
  --space-36: clamp(18px, calc(36 / var(--inner) * 100vw), 36px);
  --space-38: clamp(19px, calc(38 / var(--inner) * 100vw), 38px);
  --space-40: clamp(20px, calc(40 / var(--inner) * 100vw), 40px);
  --space-42: clamp(21px, calc(42 / var(--inner) * 100vw), 42px);
  --space-43: clamp(22px, calc(43 / var(--inner) * 100vw), 43px);
  --space-44: clamp(22px, calc(44 / var(--inner) * 100vw), 44px);
  --space-45: clamp(23px, calc(45 / var(--inner) * 100vw), 45px);
  --space-48: clamp(24px, calc(48 / var(--inner) * 100vw), 48px);
  --space-50: clamp(25px, calc(50 / var(--inner) * 100vw), 50px);
  --space-52: clamp(26px, calc(52 / var(--inner) * 100vw), 52px);
  --space-54: clamp(27px, calc(54 / var(--inner) * 100vw), 54px);
  --space-55: clamp(27px, 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-63: clamp(32px, calc(63 / var(--inner) * 100vw), 63px);
  --space-64: clamp(32px, calc(64 / var(--inner) * 100vw), 64px);
  --space-65: clamp(33px, calc(65 / var(--inner) * 100vw), 65px);
  --space-66: clamp(33px, calc(66 / var(--inner) * 100vw), 66px);
  --space-70: clamp(35px, calc(70 / var(--inner) * 100vw), 70px);
  --space-72: clamp(36px, calc(72 / var(--inner) * 100vw), 72px);
  --space-80: clamp(40px, calc(80 / var(--inner) * 100vw), 80px);
  --space-90: clamp(45px, calc(90 / var(--inner) * 100vw), 90px);
  --space-96: clamp(48px, calc(96 / var(--inner) * 100vw), 96px);
  --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);
  --space-210: clamp(50px, calc(210 / var(--inner) * 100vw), 210px);
  --space-240: clamp(50px, calc(240 / var(--inner) * 100vw), 240px);
  --space-280: clamp(50px, calc(280 / var(--inner) * 100vw), 280px);
  --space-300: clamp(50px, calc(300 / var(--inner) * 100vw), 300px);

  /* Border Radius */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-15: clamp(8px, calc(15 / var(--inner) * 100vw), 15px);
  --radius-16: clamp(8px, calc(16 / var(--inner) * 100vw), 16px);
  --radius-18: clamp(9px, calc(18 / var(--inner) * 100vw), 18px);
  --radius-20: clamp(10px, calc(20 / var(--inner) * 100vw), 20px);
  --radius-24: clamp(12px, calc(24 / var(--inner) * 100vw), 24px);
  --radius-30: clamp(15px, calc(30 / var(--inner) * 100vw), 30px);
  --radius-32: clamp(16px, calc(32 / var(--inner) * 100vw), 32px);
  --radius-40: clamp(20px, calc(40 / var(--inner) * 100vw), 40px);
  --radius-50: clamp(25px, calc(50 / var(--inner) * 100vw), 50px);

  --radius-card: 16px;
  --radius-pill: 40px;
  --radius-md: 8px;

  /* Layout */
  --header-height: clamp(60px, calc(120 / var(--inner) * 100vw), 120px);
  --lnb-height: clamp(48px, calc(60 / var(--inner) * 100vw), 60px);
  --container-wide: 1536px;

  /* Color */
  --color-primary-dark: #e67330;
  --color-primary-light: #fff1e8;
  --color-accent: #65cbd9;
  --color-bg: #ffffff;
  --color-bg-light: #f4f8fb;
  --color-surface: #f4f8fb;
  --color-canvas: #ffffff;
  --color-on-dark: #ffffff;
  --color-dark: #0d1b2a;
  --color-black: #111111;
  --color-ink: #121212;
  --color-ink-muted: #4a5568;
  --color-muted: #4a5568;
  --color-mid: #5c6b7a;
  --color-subtle: #888888;
  --color-line: #e8ecf0;
  --color-hairline: rgba(0,0,0,0.08);
  --color-hairline-light: #e8ecf0;

  /* 기타 */
  --shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 기본 요소 */
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: 'Pretendard',sans-serif; font-size: var(--font-size-16); font-weight: 400; line-height: 1.75em; letter-spacing: -.03em; color: #121212; word-break: keep-all; -webkit-text-size-adjust: none; }
html[lang="zh"] body,
html[lang="ja"] body {word-break:break-all}
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: "Noto Sans KR",sans-serif; }
.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; }
body { font-family: 'SUIT Variable', 'Pretendard Variable', Pretendard, sans-serif !important; color: var(--color-ink) !important; -webkit-font-smoothing: antialiased; }