@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"); 
:root {
  --breakpoint-pc: 1024px;

  --z-0: 0;
  --z-1: 10;
  --z-2: 50;
  --z-3: 100;
  --z-4: 500;
  --z-5: 1000;

  --dark : #000;
  --primary : #1889CA;
  --secondary : #FED206;
  --third : #FFF200;
  --alert : #ff0000;

  --gray-50  : #fafafa;
  --gray-100 : #f5f5f5;
  --gray-200 : #e5e5e5;
  --gray-300 : #d4d4d4;
  --gray-400 : #a3a3a3;
  --gray-500 : #737373;
  --gray-600 : #525252;
  --gray-700 : #404040;
  --gray-800 : #666;
  --gray-900 : #333;  

	--text-3xs: clamp(0.625rem, 0.45vw, 0.75rem);
	--text-2xs: clamp(0.6875rem, 0.5vw, 0.8125rem);
	--text-xs:  clamp(0.75rem, 0.7292vw, 0.875rem);
	--text-sm:  clamp(0.8125rem, 0.78125vw, 0.9375rem);
	--text-base: clamp(0.875rem, 0.85vw, 1rem);
	--text-lg:   clamp(0.9375rem, 0.95vw, 1.0625rem);
	--text-xl:   clamp(1rem, 1.1vw, 1.125rem);

	--text-2xl: clamp(1.0625rem, 1.0417vw, 1.25rem);
	--text-3xl: clamp(1.25rem, 1.25vw, 1.5rem);
	--text-4xl: clamp(1.5rem, 1.667vw, 2rem);
	--text-5xl: clamp(1.75rem, 2.0834vw, 2.5rem);
	--text-6xl: clamp(2.25rem, 2.5vw, 3rem);
	--text-7xl: clamp(2.5rem, 3.125vw, 3.75rem);
	--text-8xl: clamp(3rem, 4.375vw, 5.25rem);

  --rounded: 0.25rem;;
  --rounded-md: 0.5rem;;
  --rounded-lg: 0.75rem;
  --rounded-xl: 1rem;
  --rounded-2xl: 1.25rem;
  --rounded-full: 50%;

  --shadow-1 : 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-2 : 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-3 :  0 1px 3px 0 rgba(0, 0, 0, 0.1),
                0 1px 2px 0 rgba(0, 0, 0, 0.06);  
  --shadow-4 : 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-5 : 0 1px 3px 0 rgba(0, 0, 0, 0.1),
                0 1px 2px 0 rgba(0, 0, 0, 0.06);

  --shadow-6 : 0 0px 10px 0 rgba(0, 0, 0, 0.25);

  --hd-gap : 7.5rem;

  --max-w : 1600px;
  --row : 1rem;
  --inner : calc(var(--max-w) + calc(var(--row) * 2));
  --inner-px0 : var(--max-w);
  --gap-x : calc((100% - var(--inner)) / 2 + var(--row));

  --font-kr : 'Pretendard', '맑은고딕', sans-serif;
  --font-en : 'Dela Gothic One', sans-serif;

  --trans: .3s;
}

@media(max-width:1024px){
  :root {
    --hd-gap : 5.5rem;
  }
}

*, *::before, *::after {margin: 0; padding: 0; border: 0; box-sizing: border-box;}

html::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

html::-webkit-scrollbar-track {
    background-color: transparent;
}

html::-webkit-scrollbar-thumb {
    background-color: var(--gray-500);
    border-radius: 10px;
    background-clip: padding-box;
    border: 1px solid transparent;
}

html::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-700); 
}

html::-webkit-scrollbar-corner {
    background-color: transparent;
}

body {font-size: var(--text-base); color: var(--dark); font-weight: 400; line-height: 1.4; font-family: 'Pretendard', '맑은고딕', sans-serif; word-break: keep-all; -webkit-text-size-adjust: none;}
html, body {scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar {display: none;}

h1, h2, h3, h4, h5, h6 {font-weight: normal; font-size: inherit;}

:where(a, a:link, a:visited, a:hover, a:active, a:focus) {color: inherit; text-decoration: none;}

abbr, abbr[title] {text-decoration: none; border: none; border-bottom: none; cursor: inherit; font-style: inherit;}

hr {display: none;}

li, ol, dd {list-style: none;}

img, iframe {display:inline-block; max-width:100%; vertical-align: middle;}

table { border-spacing: 0;border-collapse: collapse;}

address, caption, cite, code, dfn, em, strong, th, var {font-style: normal;}

legend, caption {visibility: hidden;display: none;width: 0;height: 0;font-size: 0;}

button {text-align:left;}

button, input, textarea, select {padding: 0; font-family: inherit; font-size: inherit; vertical-align: middle; background: none; border: none; border-radius: 0; outline: none; color:inherit; line-height: inherit;}

button, input[type="submit"], input[type="button"] {transition:.3s ease-in-out all;}

button, input[type="submit"], input[type="button"], select {cursor: pointer;}

input {-webkit-border-radius: 0;}

input[type="text"], input[type="password"] {-webkit-appearance: none;}

input[type="checkbox"], input[type="radio"] {margin: 0; vertical-align: middle;}

select {appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url("/img/select_arrow.png") no-repeat right center;}

select::-ms-expand {display: none;}

.clear {display: block; clear: both; width: 100%; visibility: hidden; content: "";}

.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

#wrapper {display: flex; flex-direction:column; min-height: 100svh;}

#main {flex:1;}



/* 캡챠 자동등록(입력)방지 기본 -pc */
/* #captcha {display:inline-block;position:relative}
#captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
#captcha #captcha_img {height:40px;border:1px solid #898989;vertical-align:top;padding:0;margin:0}
#captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha2.png') no-repeat;text-indent:-999px;border-radius:3px}
#captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;border-radius:3px}
#captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:3px;vertical-align:top}
#captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em} */


/* 캡챠 자동등록(입력)방지 기본 - mobile */
#captcha.m_captcha audio {display:block;margin:5px 0 10px;}
#captcha.m_captcha #captcha_img {width:160px;height:60px;border:1px solid #e9e9e9;margin: 5px 0 3px;display:block}
#captcha.m_captcha #captcha_reload span{display:none; background:none;display:inline}
#captcha.m_captcha #captcha_key {margin:0;width:115px;border:1px solid #b8c9c2;background:#f7f7f7;}
#captcha.m_captcha #captcha_mp3 {width:31px;height:31px;background:url('../../../img/captcha2.png') no-repeat 0 0;vertical-align:top;text-indent:-9999px;border:none}


/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}
.frm_input {height:40px;}
.frm_select {height:40px;}
.frm_select_tel	{width:60px; height:40px;}
.frm_input_tel1	{width:60px; height:40px;}
.frm_input_tel	{width:80px; height:40px;}
.frm_add1 {width:70px;height:40px;}
.frm_add2,.frm_add3 {width:340px;margin-top:4px; height:40px;}
.full_input {width:100%;}
.wr_content textarea,.tbl_frm01 textarea,.form_01 textarea, .frm_input , .frm_select ,.frm_select_tel,.frm_input_tel1,.frm_input_tel,.frm_add1,.frm_add2,.frm_add3 {border:1px solid #dfdfdf;color:#000;vertical-align:middle;padding:5px;}
.frm_btn_add	{display:inline-block;padding:0 20px;height:40px;border:0;background:#3c3c3c;color:#fff;text-decoration:none;vertical-align:top}