@charset "UTF-8";
:root {
  --color-black: #000;
  --color-white: #fff;
  --color-white2: #f5f5f5;
  --color-red: #f11f24;
  --color-pink: #e83288;
  --color-orange: #f1491c;
  --color-darkyellow: #c99d05;
  --color-green: #509618;
  --color-bluegreen: #0f967e;
  --color-violet: #4a2ad8;
  --color-darkblue: #1041cc;
  --color-greyblue: #1033b4;
  --color-grey-light: #f0f0f0;
  --color-grey-light2: #aaaaaa;
  --color-grey1: #111;
  --color-grey2: #222;
  --color-grey3: #333;
  --color-grey4: #444;
  --color-grey5: #555;
  --color-grey6: #666;
  --color-grey7: #777;
  --color-grey8: #888;
  --color-grey9: #999;
  --bg-grey1: #f3f6f8;
  --bg-light-blue: #f0f3fb;
  --bg-light-grey: #f6f6f6;
  --color-default: #1b4ded;
  --brand-color-main: #1b4ded;
  --brand-color-sub: #11a7f4;
  --brand-color-sub2: #132e83;
  --border-color: #dddddd;
  --color-red: #fa2828;
  --color-kb : #cf9453;
  --spacing: 1rem;
  --header-hei: 5.5rem;
  --sub-visual-hei: 30em;
  --loc-hei: 3.75rem;
  --h-wrap: 111.5rem;
  --wrap: 101.5rem;
  --f-wrap: 111.5rem;
  --dep2-hei: 18.5rem; /* gnb height */
  --vh: 12.89px;
  --radius-basic:.3rem;
  --radius-default:1.125rem;
  --radius-round:10rem;


}
@media screen and (max-width: 1300px) {
  :root {    --spacing: 1.2rem;
    --header-hei: 5.25rem;
    --sub-visual-hei: 28.5rem;
  }
}

@media screen and (max-width: 800px) {
  :root {
    --spacing: 1rem;
    --header-hei: 4.4375rem;
    --sub-visual-hei: 23.75rem;
    --loc-hei: 3.5em;
	--radius-default:.65rem;
  }
}


@media screen and (max-width: 400px) {
  :root { font-size: 4vw; }
}

.fc_red {color:#f11f24 !important}
.fc_blue {color:#1e49d4 !important}

:root { --font-family: "Pretendard", "Inter", "MalgunGothic", "Helvetica Neue","Helvetica","Arial","apple color emoji", "segoe ui emoji", "noto color emoji", "android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla", "segoe ui symbol", sans-serif;}


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {margin:0; padding:0; border:0;outline:0; font-size:100%;vertical-align:baseline;background:transparent;font-family: "Pretendard", "Inter", "MalgunGothic", "Helvetica Neue","Helvetica" !important;}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {display:block;}
blockquote, q { quotes:none;}

body, html {  font-family: "Pretendard", "Inter", "MalgunGothic", "Helvetica Neue", "Helvetica", "Arial", "apple color emoji", "segoe ui emoji", "noto color emoji", "android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla", "segoe ui symbol", sans-serif;}
h1,h2,h3,h4,h5,h6,p,span,i,em,dl,dt,dd {font-family: "Pretendard" !important; }
a { cursor: pointer;}
p,span,em,i,b {font-style:normal; }
.font_ptd {  font-family: "Pretendard", sans-serif;}

img, fieldset, button{border:0;}
textarea{overflow:auto;}
input[type=submit],
input[type=button],
button{cursor:pointer; }
address, em{font-style:normal;}
pre{white-space:pre-wrap;}
table{border-spacing:0; border-collapse:collapse;table-layout:fixed;}
table,th,td{border:none;}
caption{overflow:hidden; line-height:0; text-indent:-2000em;}
legend, .hidden{overflow:hidden; position:absolute; top:0; left:-2000em; line-height:0;}
strong {font-weight:bold;}
.bold {font-weight:700 !important;}

blockquote:before, blockquote:after,
q:before, q:after {content:'';  content:none;}

a { margin:0;  padding:0; font-size:100%; vertical-align:baseline; background:transparent; color:#222;}
/*a:hover {color:var(--brand-color-main);}*/

/* change colours to suit your needs */
ins { background-color:transparent;  color:#000; text-decoration:none;}

/* change colours to suit your needs */
mark {    font-style:italic;    line-height: initial;}
del { text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help;}
table {  border-collapse:collapse;  border-spacing:0;}
td, th{  background-clip:padding-box;}

/* change border colour to suit your needs */
hr {    display:block;    height:1px;    border:0;    border-top:1px solid #cccccc; margin:0;padding:0;}
input, textarea {  appearance: none;  -webkit-appearance: none;  -webkit-border-radius: 0;}
input, select {    vertical-align:middle;}

select {  font-family: inherit;  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;  
&::-ms-expand {    display: none;  }
}

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

input {  font-family: inherit; color:inherit;  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;}

textarea{  font-family: inherit;}
input[type=button],
input[type=submit],
button {  font-family: inherit;  background: transparent ;  border:none;  box-shadow:none;  border-radius:0;  padding:0;  overflow:visible;  cursor:pointer;  color: inherit;  font-size: 1em;}
button:active,
button:focus {  outline: none;}

img {  -ms-interpolation-mode: bicubic !important;}

html {  font-size: 100%;  -webkit-text-size-adjust: none;  -ms-text-size-adjust: none;}

a{  text-decoration: none;  color: inherit;}
img {  max-width: 100%; vertical-align: top;}

/* input disabled readonly */
input[type="checkbox"]:disabled + label {color:#bfc0c2; cursor:default}
input[type="checkbox"]:disabled:checked + label {color:#7e848f; cursor:default}
input[type="checkbox"]:disabled + label:before {  border-color: #dddfe3; background-color:#eeeff1 !important}
input[type="checkbox"]:disabled:checked + label:before { box-shadow:none;  border-color: #c0c5d0;background-color:#d1d5dd !important }
input[type="checkbox"]:disabled:checked + label:after { }

input[type="radio"]:disabled + label {color:#bfc0c2; cursor:default}
input[type="radio"]:disabled:checked + label {color:#7e848f; cursor:default}
input[type="radio"]:disabled + label:after {  border-color: #dee0e2;background-color:#f4f5f6; }
input[type="radio"]:disabled:checked + label:after { border-color: #b3b8bd !important; background-color: #fff !important;  box-shadow:none;}

input[type="text"]:disabled, textarea:disabled, select:disabled {border-color:#dee0e2; background-color:#f6f6f7;opacity:.2;}
button:disabled {border-color:#dee0e2; background-color:#f6f6f7;cursor:default; }

input[readonly][type=text] {border-color: #fff; background-color:#fafafa; color:var(--color-grey3); }
input[readonly][type=text]:focus {border-color:#fff; background-color:#fafafa; color:var(--color-grey3);}
textarea[readonly] {border-color:#fff; background-color:#fafafa; color:var(--color-grey3);}
textarea[readonly]:focus {border-color:#fff; background-color:#fafafa; color:var(--color-grey3);}
select[readonly] {border-color:#fff; background-color:#fafafa; color:var(--color-grey3);  }
select[readonly]:focus {border-color:#fff; background-color:#fafafa;color:var(--color-grey3);  }
button[readonly] {border-color:#ddd; background-color:#ddd;color:var(--color-white);   }
select[readonly] { pointer-events: none; background-image:none;}
*,
*:after,
*:before {	margin: 0;	padding: 0;	-webkit-box-sizing: border-box;  -moz-box-sizing: border-box;	box-sizing: border-box; }



/* 스크롤바 */
::-webkit-scrollbar { background: transparent;width: 6px;height:6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background:var(--brand-color-main); opacity:1 !important;  border-radius:9px; }
::-webkit-scrollbar-button { display: none; }

::selection { background: #4c94ff; color: #fff; text-shadow: none; }

input,select,textarea,button {outline:0;vertical-align: middle;transition: all 0.2s ease-in;background-color:transparent; border:0; -webkit-appearance:none;-moz-appearance:none;appearance:none;outline-width:0; }
input[type=text], input[type=number], input[type=password] {width:100%; padding:0 10px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
input[type=submit] {-webkit-border-radius:0;border:0;border-radius:0;}
textarea {width:100%;resize:none; background-color:#fff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#222; }
input,
select,
button {height:2.375rem; line-height:100%;}
select {  word-wrap: normal; appearance: none; -webkit-appearance: none;}
select{ padding-right:1.2rem; position:relative;cursor:pointer; padding-left:10px; letter-spacing: -.04em;appearance: none;box-sizing: border-box;
	background-image:url('/images/icon_select.png'); background-size:15px 15px; background-repeat:no-repeat; background-position:calc(100% - 10px)  ; 
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

}

input,
select,
textarea { font-size:.985rem; font-weight:500; background-color:var(--color-white);  border:1px solid #ccc;  font-family: inherit; color:inherit; color:var(--color-grey3); }
input,
select {padding:0 .5rem;}
input:focus,
select:focus,
textarea:focus {border-color:var(--brand-color-main); background-color:var(--color-white); }



@media screen and (max-width:767px){
  button {font-size:.9rem;}
}



select::-ms-expand{display: none;}
select::placeholder {color:var(--color-grey9);}
input::placeholder {color:var(--color-grey9);}
textarea::placeholder {color:var(--color-grey9);}

input:-webkit-autofill { -webkit-text-fill-color: #000; } 
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s;}

input:-ms-input-placeholder {color:var(--color-grey9); font-size:.9rem; }
input::-webkit-input-placeholder {color:var(--color-grey9);font-size:.9rem; }
input::-moz-placeholder {color:var(--color-grey9); font-size:.9rem;}

textarea:-ms-input-placeholder {color:var(--color-grey9); font-size:.9rem;}
textarea::-webkit-input-placeholder {color:var(--color-grey9);font-size:.9rem;}
textarea::-moz-placeholder {color:var(--color-grey9);font-size:.9rem; }


input[type=checkbox], input[type=radio] {position:absolute;	opacity:0;-webkit-opacity:0;-moz-opacity:0;	z-index:0;}
input[type=checkbox] + label {position:relative;display:inline-block;margin:0;  padding:0 1rem 0 1.55rem;box-sizing:border-box;background:none;border:0;letter-spacing:-1px;font-size:15px; font-weight:500; line-height:28px;color:#333;font-style:normal;word-break:keep-all;vertical-align:middle;cursor:pointer;}
input[type=checkbox] + label:before {display: block;content: "";position: absolute;left: 0;top:50%;width:20px;height:20px;background-color:#fff;border:1px solid #bbb;border-radius:0px;transform:translateY(-50%);box-sizing:border-box;-webkit-box-sizing:border-box;;-moz-box-sizing:border-box; transition: all 0.2s ease-in; }
input[type=checkbox] + label:after {content:'';display:none;position:absolute;top:50%;left:6.5px;width:7px;height:11px;margin:-7.5px 0 0 0;border-color:#fff;border-style:solid;border-width:0 2px 2px 0 !important;transform:rotate(45deg);}
input[type=checkbox]:checked + label {background:none;}
input[type=checkbox]:checked + label:before {border:1px solid var(--brand-color-main);background-color:var(--brand-color-main);transform:translateY(-50%);/* box-shadow:0 3px 8px -3px var(--brand-color-main); */}
input[type=checkbox]:checked + label:after {display:block;}

input[type=radio] + label {position:relative;display:inline-block;margin:0;padding:0 1rem 0 1.35rem;box-sizing:border-box;border:0;background:none;letter-spacing:-1px; font-size:inherit; font-weight:500; line-height:28px;color:#111;vertical-align:middle;cursor:pointer;}
input[type=radio] + label:after {display: block;content: "";position: absolute;left: 0;top:50%;width:18px;height:18px;background-color:#fff;border:1px solid #ced5e0;border-radius:50%;transform:translateY(-50%);transition: border 0.2s ease-in;box-sizing:border-box;-webkit-box-sizing:border-box;;-moz-box-sizing:border-box;}
input[type=radio]:checked + label {background:none;}
input[type=radio]:checked + label:after {border:5px solid var(--brand-color-main);/*box-shadow:0 3px 8px -3px var(--brand-color-main);*/}

.checkreadonly {position:relative;display:inline-block;}
.checkreadonly:before {content:'';position:absolute;left:0;right:0;top:0;bottom:0;background-color:rgba(255,255,255,.001);z-index:2;}

@media screen and (max-width:677px){
    input[type=checkbox] + label {padding:0 1rem 0 1.65rem;}
	input[type=checkbox] + label:before {width:22px;height:22px;}
	input[type=checkbox] + label:after {left:7px;width:8px;height:12px;margin:-8px 0 0 0;}

}

@keyframes blink-effect {
  50% {
    opacity: 0;
  }
}

.blink {
  animation: blink-effect 1s step-end infinite;

  /*
  animation-name: blink-effect;
  animation-duration: 1s;
  animation-iteration-count:infinite;
  animation-timing-function:step-end;
  */
}


/*text*/
.wb_ka {  word-break: keep-all;}
.wb_ba {  word-break: break-all;}
.wh_nw {  white-space: nowrap;}

/*display*/
.text_hide {  position: absolute;  z-index: -1;  line-height: 1 !important;  font-size: 1px !important;  width: 1px !important;  height: 1px !important;  color: transparent !important;  background: transparent !important;  overflow: hidden !important;  font-size: 1px;  text-indent: -99999px;  opacity: 0.05 !important;}
.text_hide:before, .text_hide:after {  display: none !important;}

/* necessary plugin styles */
[class^=ellip_]:not(.ellip_1), [class*=ellip_]:not(.ellip_1) {
  display: block;  display: -webkit-box;  word-break: break-all;  word-wrap: break-word;  -webkit-box-orient: vertical;  text-overflow: ellipsis;  overflow: hidden;  line-height: 1.5;}

.ellip_1 {  display: block;  max-height: 1.5em;  line-height: 1.5;  overflow: hidden;  max-width: 100%;  white-space: nowrap;  text-overflow: ellipsis;}
.ellip_2 {  -webkit-line-clamp: 2;  max-height: 3em;}
.ellip_3 {  -webkit-line-clamp: 3;  max-height: 4.5em;}
.ellip_4 {  -webkit-line-clamp: 4;  max-height: 6em;}
.ellip_5 {  -webkit-line-clamp: 5;  max-height: 7.5em;}

.fl-left {float:left !important;}
.fl-right {float:right !important;}

.text-center {text-align:center !important }
.text-left{text-align:left !important }
.text-right{text-align:right !important }

.w10pc {width:10% !important;}
.w20pc {width:20% !important;}
.w30pc {width:30% !important;}
.w40pc {width:40% !important;}
.w50pc {width:50% !important;}
.w60pc {width:60% !important;}
.w70pc {width:70% !important;}
.w80pc {width:80% !important;}
.w90pc {width:90% !important;}
.w100pc {width:100% !important;}
.w20 {width:20px !important;}
.w30 {width:30px !important;}
.w40 {width:40px !important;}
.w50 {width:50px !important;}
.w60 {width:60px !important;}
.w70 {width:70px !important;}
.w80 {width:80px !important;}
.w90 {width:90px !important;}
.w100 {width:100px !important;}
.w110 {width:110px !important;}
.w120 {width:120px !important;}
.w130 {width:130px !important;}
.w140 {width:140px !important;}
.w150 {width:150px !important;}
.w160 {width:160px !important;}
.w170 {width:170px !important;}
.w180 {width:180px !important;}
.w190 {width:190px !important;}
.w200 {width:200px !important;}
.w210 {width:210px !important;}
.w220 {width:220px !important;}
.w230 {width:230px !important;}
.w240 {width:240px !important;}
.w250 {width:250px !important;}
.w260 {width:260px !important;}
.w270 {width:270px !important;}
.w280 {width:280px !important;}
.w290 {width:290px !important;}
.w300 {width:300px !important;}

.mt0 {margin-top:0 !important; }
.mb0 {margin-bottom:0 !important; }
.ml0 {margin-left:0 !important; }
.ml5 {margin-left:5px !important; }
.ml10 {margin-left:10px !important; }
.mr0 {margin-right:0 !important; }
.mt1r {margin-top:1rem !important; }
.mt2r {margin-top:2rem !important; }
.mt3r {margin-top:3rem !important; }
.mt4r {margin-top:4rem !important; }
.mt5r {margin-top:5rem !important; }
.mt6r {margin-top:6rem !important; }
.mt7r {margin-top:7rem !important; }
.mt8r {margin-top:8rem !important; }
.mt9r {margin-top:9rem !important; }
.mt10r {margin-top:10rem !important; }

.mt5 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt15 {margin-top:15px !important;}
.mt20 {margin-top:20px !important;}
.mt25 {margin-top:25px !important;}
.mt30 {margin-top:30px !important;}

.pl5 {padding-left:5px !important;}
.pl10 {padding-left:10px !important;}
.pl15 {padding-left:15px !important;}
.pl20 {padding-left:20px !important;}

.pr5 {padding-right:5px !important;}
.pr10 {padding-right:10px !important;}
.pr15 {padding-right:15px !important;}
.pr20 {padding-right:20px !important;}