@charset "utf-8"; 

/* ALL STYLE */
* {	-webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none;text-size-adjust: none; }
html { overflow:-moz-scrollbars-vertical;overflow-y:scroll;font-size: 62.5%;}
html, body{ position: relative; height: 100%; font-size:10px; }
body { font-size:var(--ks-fs-16);font-weight:400;letter-spacing:-1px; line-height:1.2;color: var(--ks-gray-80); background: #fff; font-family: var(--font-main);}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,th,td,input,select,textarea,button{margin:0;padding:0;line-height:1.4em;color:var(--ks-gray-70);font-size:var(--ks-fs-18);font-family: var(--font-main);box-sizing:border-box;}
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block;margin:0;padding:0}
ul,ol{list-style:none}
p{margin:0}
img{border:none;vertical-align:top}
a{text-decoration:none}
fieldset,button{border:none}
button{overflow:visible;position:relative;vertical-align:top;white-space:nowrap;cursor:pointer}
button::-moz-focus-inner{border:0;padding:0}
hr,legend{display:none}
table{width:100%;table-layout:auto;border-collapse:separate;border-spacing:0;}
table caption{visibility:hidden;position:relative;height:0;font-size:0;line-height:0}

/* FOCUS */
input:focus, select:focus, textarea:focus {outline: none !important; border: #3e61d7 solid 1px; box-shadow: none !important;}


@media (max-width: 768px) {

	html {font-size:9px;}

}

/* COLOR VARIABLES */
:root {

  --font-main: 'Pretendard', 'Inter', sans-serif;
  --focus-outline-color: #0060bb;
  --footer-outline-color: #ced3de;

  --ks-white: #fff;
  --ks-black: #000;
  --ks-primary: #3e61d7;
  --ks-secondary: #003675;
  --ks-point: #E71825;
  --ks-danger: #EB003B;
  --ks-warning: #FFB724;
  --ks-success: #008A1E;
  --ks-information: #2768FF;
  --ks-primary-5: #EFF5FF;
  --ks-primary-10: #D3E1FB;
  --ks-primary-20: #A7C4F7;
  --ks-primary-30: #7CA6F3;
  --ks-primary-40: #5089EF;
  --ks-primary-60: #1D56BC;
  --ks-primary-70: #16408D;
  --ks-primary-80: #0E2B5E;
  --ks-primary-90: #07152F;
  --ks-secondary-5: #EDF1F5;
  --ks-secondary-10: #CDD7E4;
  --ks-secondary-20: #B4C4D6;
  --ks-secondary-30: #99B0CB;
  --ks-secondary-40: #2A5C96;
  --ks-secondary-60: #002B5E;
  --ks-secondary-70: #002046;
  --ks-secondary-80: #00162F;
  --ks-secondary-90: #000B17;
  --ks-point-5: #FDF2F3;
  --ks-point-10: #FAD1D3;
  --ks-point-20: #F5A3A8;
  --ks-point-30: #F1747C;
  --ks-point-40: #EC4651;
  --ks-point-60: #B9131E;
  --ks-point-70: #8B0E16;
  --ks-point-80: #5C0A0F;
  --ks-point-90: #2E0507;
  --ks-gray-5: #F8F8F8;
  --ks-gray-10: #F0F0F0;
  --ks-gray-20: #E4E4E4;
  --ks-gray-30: #D8D8D8;
  --ks-gray-40: #C6C6C6;
  --ks-gray-50: #8E8E8E;
  --ks-gray-60: #717171;
  --ks-gray-70: #555555;
  --ks-gray-80: #2D2D2D;
  --ks-gray-90: #1D1D1D;
  --ks-grade-0: #7c889f;
  --ks-grade-1: #16aafa;
  --ks-grade-2: #3967f7;
  --ks-grade-3: #3dbe26;
  --ks-grade-4: #f88010;
  --ks-grade-5: #ee2929;
  --ks-danger-1: #e8f6ff;
  --ks-danger-2: #eef6ff;
  --ks-danger-3: #d7fad1;
  --ks-danger-4: #ffe3c9;
  --ks-danger-5: #ffe1e1;

  --ks-fs-display-sm: 4rem;
  --ks-fs-display-md: 5rem;
  --ks-fs-display-lg: 6.6rem;
  --ks-fs-heading-sm: 3.2rem;
  --ks-fs-heading-md: 4rem;
  --ks-fs-heading-lg: 5rem;
  --ks-fs-title-xsm: 1.5rem;
  --ks-fs-title-sm: 1.7rem;
  --ks-fs-title-m: 1.8rem;
  --ks-fs-title-md: 2rem;
  --ks-fs-title-lg: 2.2rem;
  --ks-fs-title-xlg: 2.4rem;
  --ks-fs-title-xxlg: 3.2rem;
  --ks-fs-12: 1.2rem;
  --ks-fs-13: 1.3rem;
  --ks-fs-14: 1.4rem;
  --ks-fs-15: 1.5rem;
  --ks-fs-16: 1.6rem;
  --ks-fs-17: 1.7rem;
  --ks-fs-18: 1.8rem;
  --ks-fs-19: 1.9rem;
  --ks-fs-20: 2rem;
  --ks-fs-22: 2.2rem;
  --ks-fs-24: 2.4rem;
  --ks-fs-26: 2.6rem;
  --ks-fs-28: 2.8rem;
  --ks-fs-30: 3rem;
  --ks-fs-32: 3.2rem;
  --ks-fs-34: 3.4rem;
  --ks-fs-36: 3.6rem;
  --ks-fs-38: 3.8rem;
  --ks-fs-40: 4rem;
  --ks-display1-ls: -.12rem;
  --ks-display2-ls: -.112rem;
  --ks-ls-body1: -.048rem;
  --ks-ls-body2: -.044rem;
  --ks-ls-body3: -.036rem;
  --ks-ls-body4: -.032rem;
  --ks-ls-body5: -.028rem;
  --ks-ls-body6: -.026rem;
  --ks-ls-body7: -.022rem;
  
  --box-shadow: 0 .2rem .4rem 0 rgba(0, 134, 201, .1)




}



/*FORMS */
input,
select,
textarea { display: block; width: 100%; padding: 1rem 1.2rem; font-size: 1.6rem; line-height: 1.5; color: var(--color-text); background-color: #fff; border:1px solid #dfdfdf; border-radius:1rem; transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;}
  
input:focus,
select:focus,
textarea:focus { border-color: var(--color-primary); outline: 0; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);}
 
select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff url(../img/ico_btn_select.png) no-repeat;background-position: calc(100% - 7px) 50%; display: block; width: 100%; padding: 1rem 1.2rem; font-size: 1.6rem; line-height: 1.5; color: var(--color-text); background-color: #fff; border:1px solid #dfdfdf; border-radius:1rem;padding-right: 25px;}
select::-ms-expand { display: none;}
select:disabled { color: #888; cursor: not-allowed; opacity: 0.5;  background-color: #e0dfdf; border-color: #c1bfbf;}


input[type="checkbox"],
input[type="radio"] { display: inline-block; width: auto; margin-right: 0.8rem;}

input[readonly] { background-color: #f0f0f0; color: #bbb; cursor: not-allowed; border-color: #e0e0e0;}
input[readonly]:focus { outline:0 !important; border-color: #e0e0e0 !important; }

  
label { display: inline-block; margin-bottom: 0.4rem; font-weight: 500;}

/* HIDDEN */
.hidden {position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:polygon(0 0, 0 0, 0 0);}
.hide {display:none !important;}
.IR, .blind, legend{font:0px/0 Arial; height:0; left:-9999px !important; position:absolute !important; top:-9999px !important}
.none{display:none;margin:0; padding:0;}

/*link*/
a:link{color:#555; text-decoration:none;}
a:visited{color:#555; text-decoration:none;}
a:hover{color:#555; text-decoration:none;}
a:focus{text-decoration:none;}
a:active{color:#555; text-decoration:none;}

/*줄바꿈*/
.br{display:block !important}
.wbr {display:block}
.mbr {display:inline-block}

/* align */
.tc {text-align:center !important;}
.tl {text-align:left !important;}
.tr {text-align:right !important;}
  
/* UTILITIES - FONT */
.fw-normal  { font-weight: 400 !important; }
.fw-medium  { font-weight: 600 !important; }
.fw-bold    { font-weight: 800 !important; }
  
.fs-12 { font-size: 1.2rem !important; }
.fs-14 { font-size: 1.4rem !important; }
.fs-16 { font-size: 1.6rem !important; }
.fs-18 { font-size: 1.8rem !important; }
.fs-20 { font-size: 2rem !important; }
.fs-24 { font-size: 2.4rem !important; }
.fs-32 { font-size: 3.2rem !important; }
.fs-40 { font-size: 4rem !important; }

.textunder { text-decoration:underline;}
.text-ellipsis { white-space: nowrap;overflow: hidden; text-overflow: ellipsis; max-width: 100%; }


/** align style **/
.fl_wrap{overflow:hidden !important}
.fl_r{float:right !important}
.fl_l{float:left !important}

/** display style **/
.dis_i{display:inline !important}
.dis_ib{display:inline-block !important}
.dis_b{display:block !important}
.dis_n{display:none !important}
.dis_f{display:flex !important}
.dis_f_yc{align-items:center !important}

/** border style **/
.no_ba{border:none !important}
.no_bl{border-left:none !important}
.no_bt{border-top:none !important}
.no_br{border-right:none !important}
.no_bb{border-bottom:none !important}


/** display flex style **/
.flex_align_c{align-items: center !important}
.flex_align_s{align-items: flex-start !important}
.flex_align_e{align-items: flex-end !important}
.flex_justify_c{justify-content: center !important}
.flex_justify_s{justify-content: flex-start !important}
.flex_justify_e{justify-content: flex-end !important}
.flex_justify_b{justify-content: space-between !important}
.flex_justify_a{justify-content: space-around !important}
.flex_justify_ev{justify-content: space-evenly !important}
.flex_wrap_w{flex-wrap: wrap !important}
.flex_dir_r { flex-direction: row !important;}
.flex_dir_r { flex-direction: column !important;}

  
/* GRID SYSTEM (기본 12컬럼) */
.row { display: flex; flex-wrap: wrap; margin: -0.8rem;}
.col { flex: 1; padding: 0.8rem;}
.col-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
.col-2  { flex: 0 0 16.666%; max-width: 16.666%; }
.col-3  { flex: 0 0 25%;     max-width: 25%; }
.col-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.col-5  { flex: 0 0 41.666%; max-width: 41.666%; }
.col-6  { flex: 0 0 50%;     max-width: 50%; }
.col-7  { flex: 0 0 58.333%; max-width: 58.333%; }
.col-8  { flex: 0 0 66.666%; max-width: 66.666%; }
.col-9  { flex: 0 0 75%;     max-width: 75%; }
.col-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-12 { flex: 0 0 100%;    max-width: 100%; }


/* box */
[class^="box_"] {position:relative; padding:2rem 2.4rem;  border-radius:1.5rem;}
.box_line {border:1px solid #ddd;}
.box_line_dark {border:1px solid #404b57;}
.box_gray {background:#f5f5f5;}
.box_white {background:#fff;}
.box_guide {background:#ecf1f9;}
.box_guide .bg_btn {position:absolute; right:32px; top:28px;}
.box_line_bold {border: #ececf1 solid 6px;}


/*width*/
.wid5r{width:5rem !important}
.wid8r{width:8rem !important}
.wid10r{width:10rem !important}
.wid15r{width:15rem !important}

/*margin*/
.m-0   { margin: 0 !important; }
/*top */
.mt0r{margin-top:0rem !important}
.mt0_5r{margin-top:0.5rem !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}
.mt8r{margin-top:8rem !important}
.mt10r{margin-top:10rem !important}
.mt15r{margin-top:15rem !important}
.mt20r{margin-top:20rem !important}
.mt25r{margin-top:25rem !important}
.mt30r{margin-top:30rem !important}


/*Bottom */
.mb0r{margin-bottom:0rem !important}
.mb0_5r{margin-bottom:0.5rem !important}
.mb1r{margin-bottom:1rem !important}
.mb2r{margin-bottom:2rem !important}
.mb3r{margin-bottom:3rem !important}
.mb5r{margin-bottom:5rem !important}
.mb8r{margin-bottom:8rem !important}
.mb10r{margin-bottom:10rem !important}
.mb15r{margin-bottom:15rem !important}
.mb20r{margin-bottom:20rem !important}
.mb25r{margin-bottom:25rem !important}
.mb30r{margin-bottom:30rem !important}

/*right */
.mr0r{margin-right:0rem !important}
.mr0_5r{margin-right:0.5rem !important}
.mr1r{margin-right:1rem !important}
.mr2r{margin-right:2rem !important}
.mr3r{margin-right:3rem !important}
.mr4r{margin-right:4rem !important}
.mr5r{margin-right:5rem !important}
.mr8r{margin-right:8rem !important}
.mr10r{margin-right:10rem !important}
.mr15r{margin-right:15rem !important}
.mr20r{margin-right:20rem !important}
.mr25r{margin-right:25rem !important}
.mr30r{margin-right:30rem !important}

/*left */
.ml0r{margin-left:0rem !important}
.ml0_5r{margin-left:0.5rem !important}
.ml1r{margin-left:1rem !important}
.ml2r{margin-left:2rem !important}
.ml3r{margin-left:3rem !important}
.ml4r{margin-left:4rem !important}
.ml5r{margin-left:5rem !important}
.ml8r{margin-left:8rem !important}
.ml10r{margin-left:10rem !important}
.ml15r{margin-left:15rem !important}
.ml20r{margin-left:20rem !important}
.ml25r{margin-left:25rem !important}
.ml30r{margin-left:30rem !important}



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

.pt0r{padding-top:0rem !important}
.pt0_5r{padding-top:0.5rem !important}
.pt1r{padding-top:1rem !important}
.pt2r{padding-top:2rem !important}
.pt3r{padding-top:3rem !important}
.pt4r{padding-top:4rem !important}
.pt5r{padding-top:5rem !important}
.pt10r{padding-top:10rem !important}
.pt15r{padding-top:15rem !important}
.pt20r{padding-top:20rem !important}
.pt25r{padding-top:25rem !important}
.pt30r{padding-top:30rem !important}

.pb0r{padding-bottom:0rem !important}
.pb0_5r{padding-bottom:0.5rem !important}
.pb1r{padding-bottom:1rem !important}
.pb2r{padding-bottom:2rem !important}
.pb3r{padding-bottom:3rem !important}
.pb4r{padding-bottom:4rem !important}
.pb5r{padding-bottom:5rem !important}
.pb10r{padding-bottom:10rem !important}
.pb15r{padding-bottom:15rem !important}
.pb20r{padding-bottom:20rem !important}
.pb25r{padding-bottom:25rem !important}
.pb30r{padding-bottom:30rem !important}

.pl0r{padding-left:0rem !important}
.pl0_5r{padding-left:0.5rem !important}
.pl1r{padding-left:1rem !important}
.pl2r{padding-left:2rem !important}
.pl3r{padding-left:3rem !important}
.pl4r{padding-left:4rem !important}
.pl5r{padding-left:5rem !important}
.pl10r{padding-left:10rem !important}
.pl15r{padding-left:15rem !important}
.pl20r{padding-left:20rem !important}
.pl25r{padding-left:25rem !important}
.pl30r{padding-left:30rem !important}

.pr0r{padding-right:0rem !important}
.pr0_5r{padding-right:0.5rem !important}
.pr1r{padding-right:1rem !important}
.pr2r{padding-right:2rem !important}
.pr3r{padding-right:3rem !important}
.pr4r{padding-right:4rem !important}
.pr5r{padding-right:5rem !important}
.pr10r{padding-right:10rem !important}
.pr15r{padding-right:15rem !important}
.pr20r{padding-right:20rem !important}
.pr25r{padding-right:25rem !important}
.pr30r{padding-right:30rem !important}




/* color */
.c_blue {color:var(--ks-primary) !important;}
.c_red {color:#CD3700 !important;}
.c_point {color:#3a58a8 !important;}
.c_bl {color:#000 !important;}


/** div_width % **/
[class*='div_per']{position:relative;}
.div_per100{width:100% !important}
.div_per95{width:calc(95% - 10px) !important}
.div_per90{width:calc(90% - 10px) !important}
.div_per85{width:calc(85% - 10px) !important}
.div_per80{width:calc(80% - 10px) !important}
.div_per75{width:calc(75% - 10px) !important}
.div_per70{width:calc(70% - 10px) !important}
.div_per65{width:calc(65% - 10px) !important}
.div_per60{width:calc(60% - 10px) !important}
.div_per55{width:calc(55% - 10px) !important}
.div_per50{width:calc(50% - 10px) !important}
.div_per45{width:calc(45% - 10px) !important}
.div_per40{width:calc(40% - 10px) !important}
.div_per35{width:calc(35% - 10px) !important}
.div_per33{width:calc(100%/3 - 10px) !important}
.div_per30{width:calc(30% - 10px) !important}
.div_per25{width:calc(25% - 10px) !important}
.div_per20{width:calc(20% - 10px) !important}
.div_per15{width:calc(15% - 10px) !important}
.div_per10{width:calc(10% - 10px) !important}
.div_per5{width:calc(5% - 10px) !important}


/* btn */
.btn {display:inline-block; line-height:0; letter-spacing:-0.048em; border:1px solid transparent; vertical-align:middle;}
.btn > span {display:inline-block;}
.btn * {vertical-align:middle;}
.btn > span.ico-window { background:url(../img/bg_ico05.png) no-repeat right 1px; padding-right:2rem; }



.btn_xl { padding:1.4rem 4.6rem; border-radius:1rem; font-size:1.8rem; line-height:1.6rem; }
.btn_xl span { font-size:1.8rem; font-weight: 600;}
.btn_lg { padding:1.4rem 3.2rem; border-radius:1rem; font-size:1.8rem; line-height:1.8rem; }
.btn_lg span { font-size:1.8rem; font-weight: 600;}
.btn_md { padding:1.3rem 2.4rem; border-radius:1rem;font-size:1.6rem; line-height:1.6rem; }
.btn_md span { font-size:1.6rem; font-weight: 600;}
.btn_m { padding:1rem 1rem; border-radius:0.8rem; font-size:1.6rem; line-height:1.6rem; }
.btn_m span { font-size:1.6rem; }
.btn_xm { padding:0.7rem 1rem; border-radius:0.8rem; font-size:1.5rem; line-height:1.5rem; }
.btn_xm span { font-size:1.5rem; }
.btn_x { padding:0.4rem 1rem; border-radius:0.5rem; font-size:1.4rem; line-height:1.4rem;  border-radius: 3rem;}
.btn_x span { font-size:1.4rem; }
.btn_xs { padding:0.3rem 1rem; border-radius:0.5rem; font-size:1.3rem; line-height:1.3rem; }
.btn_xs span { font-size:1.3rem; }




  /*  BUTTONS*/
.btn_green {background:#1da9b1; color:var(--ks-white) !important;}
.btn_skyblue {background:#11aee3; color:var(--ks-white) !important; }
.btn_blue {background:var(--ks-primary); color:var(--ks-white) !important;}
.btn_blue:hover { background: var(--ks-secondary); box-shadow: 0 4px 8px rgba(0,68,204,0.3);}
.btn_navy {background:#383da3; color:var(--ks-white) !important;}/*mint[background]*/
.btn_purple {background:#7672f5; color:var(--ks-white) !important;}

.btn_black {background:#111; color:var(--ks-white) !important;}
.btn_gray {background:#939ca6; color:#fff !important;}
.btn_lgray {background:#8b96b4; color:var(--ks-white) !important; }
.btn_white {background:#fbfbfb; color:var(--ks-primary) !important; border:1px solid var(--ks-primary);}
.btn_white:hover {background-color: #F1F4FD;}
.btn_gray_line{background-color:var(--ks-white);border:1px solid #444444; }
.btn_gray_line span { color:#353535;}
.btn_blue_line{background-color:var(--ks-white);border:1px solid var(--ks-primary); }
.btn_blue_line span { color:var(--ks-primary);}

.btn_primary { background: var(--ks-primary); color: var(--ks-white) !important;}
.btn_primary:hover { background-color: var(--ks-secondary); box-shadow: 0 4px 8px rgba(0,68,204,0.3);}
.btn_danger { background-color: #ff6379; color: var(--ks-white) !important;}
.btn_warning {  background-color: var(--ks-warning); color:var(--ks-white)!important;}

.btn:disabled {  opacity: 0.65; pointer-events: none;}
.curs_auto { cursor:auto;}
.btn_square { border-radius: 0.8rem;}



#loading { position: fixed;top: 0; left: 0; width: 100%; height: 100%;background-color: rgba(0, 0, 0, 0.5); z-index: 9000; }

.loader {position: fixed; left: 50%;  top: 50%;  width: 48px; height: 48px; margin: -24px 0 0 -24px;
   background: 
      radial-gradient(farthest-side, #725bed 90%, transparent) 0 0 no-repeat,
      radial-gradient(farthest-side, #f99f5e 90%, transparent) 100% 0 no-repeat,
      radial-gradient(farthest-side, #3e61d7 90%, transparent) 100% 100% no-repeat,
      radial-gradient(farthest-side, #b6dbf4 90%, transparent) 0 100% no-repeat;
  background-size: 40% 40%;  animation: loading 0.6s infinite both;  z-index: 90001;
}

@keyframes loading {
  100% {
      background-position: 100% 0, 100% 100%, 0 100%, 0 0;
  }
}