@charset "UTF-8";

@import url(https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900|Noto+Sans:400,700);
@font-face { 
  font-family:'Pretandard';
  font-style:normal;
  font-weight: 200; 
  src:
  url(../fonts/Pretendard-ExtraLight.woff2) format('woff2'), 
  url(../fonts/Pretendard-ExtraLight.woff) format('woff')
}


@font-face { 
  font-family:'Pretandard';
  font-style:normal;
  font-weight: 300; 
  src:
  url(../fonts/Pretendard-Light.woff2) format('woff2'), 
  url(../fonts/Pretendard-Light.woff) format('woff')
}

@font-face { 
  font-family:'Pretandard';
  font-style:normal;
  font-weight: 400; 
  src:
  url(../fonts/Pretendard-Medium.woff2) format('woff2'), 
  url(../fonts/Pretendard-Medium.woff) format('woff')
}

@font-face { 
  font-family:'Pretandard';
  font-style:normal;
  font-weight: 500; 
  src:
  url(../fonts/Pretendard-Regular.woff2) format('woff2'), 
  url(../fonts/Pretendard-Regular.woff) format('woff')
}

@font-face { 
  font-family:'Pretandard';
  font-style:normal;
  font-weight: 600; 
  src:
  url(../fonts/Pretendard-SemiBold.woff2) format('woff2'), 
  url(../fonts/Pretendard-SemiBold.woff) format('woff')
}


@font-face { 
  font-family:'Pretandard';
  font-style:normal;
  font-weight: 700; 
  src:
  url(../fonts/Pretendard-Bold.woff2) format('woff2'), 
  url(../fonts/Pretendard-Bold.woff) format('woff')
}

@font-face { 
  font-family:'Pretandard';
  font-style:normal;
  font-weight: 900; 
  src:
  url(../fonts/Pretendard-ExtraBold.woff2) format('woff2'), 
  url(../fonts/Pretendard-ExtraBold.woff) format('woff')
}




/*단위환산*/

:root {
   

  --body-font-family: "Pretandard", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --body-font-size: 1rem; /*16px*/
  --body-font-weight: 500;
  --body-line-height: 1.5;
  --body-bg: #ffffff;
  --body-color:#000;
  --body-letter-spacing:-0.02em;

  --ts-ease:all 0.5s linear;

  --body-text-align:left;

  --font-size-10: 0.625rem;
  --font-size-12: 0.75rem;
  --font-size-13: 0.813rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-21: 1.313rem;
  --font-size-22: 1.375rem;
  --font-size-24: 1.5rem;
  --font-size-25: 1.563rem;
  --font-size-28: 1.75rem;
  --font-size-30: 1.875rem;
  --font-size-32: 2rem;
  --font-size-34: 2.125rem;
  --font-size-40: 2.5rem;
  --font-size-50: 3.125rem;
  --font-size-60: 3.75rem;

  --font-family-noto: 'Noto Sans KR', 'Noto Sans', sans-serif;


  --white     :#ffffff;
  --black     :#000000;
  --black-0c0 :#0C0C0C;

  --gray-989  :#989898;
  --gray-d4d  :#D4D4D4;
  --gray-e2e  :#E2E2E2;
  --gray-e4e  :#E4E4E4;
  --gray-e5e  :#E5E5E5;
  --gray-f8f  :#F8F9FA;
  --gray-f8f8 :#F8F8FA;
  --gray-707  :#707070;
  --gray-dbd  :#DBDBDB;
  --gray-888  :#888888;
  --gray-ded  :#DEDEDE;
  --gray-666  :#666666;


  
  --blue--002 :#00205B;
  --blue--002b:#002BFF;
  --blue--00b :#00B1FF;
  --blue--00d :#00D3FF;
  --blue--012 :#0123B4;
  --blue--003 :#00318B;
  --blue--0dc :#0DC3F4;
  --blue--21c :#21C6FF;

  --blue--075 :#0754F8;
  --blue--0758:#0758F8;
  --blue--1e3 :#1E336C;
  --blue--309 :#309EEC;
  --blue--30e :#30ECE6;
  --blue--3a4 :#3A4862;
  --blue--446 :#446FE0;
  
  --blue--005 :#005B9B;
  --blue--11b :#11B6FF;
  --blue--5bf :#5BFFFF;
  
  
  
  --yellow-fae:#FAE100;

  --red       :#FF0000;
  

  --box-shadow:0 3px 20px rgba(0,0,0,0.06);
  --box-shadow:0 0px 10px rgba(0,0,0,0.1);

  --dimd--50:rgba(0,0,0,.5);


  --font-weight-extralight:200;
  --font-weight-light:300;
  --font-weight-medium:400;
  --font-weight-regular:500;
  --font-weight-semibold:600;  
  --font-weight-bold:700;  

}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizign:border-box;
  
}

/**:hover{cursor: pointer;}*/

html,body {
  margin: 0 auto;
  padding: 0;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  color: var(--body-color);
  text-align: var(--body-text-align);
  letter-spacing:var(--body-letter-spacing);
  background:var(--body-bg);
  -webkit-text-size-adjust: 100%;
  position:relative;
  scroll-behavior: smooth;
  width:100%;
  height:100%;
  
}

h1,h2,h3,h4,h5,h6
{
  margin: 0;
  padding: 0;
  font-family: var(--body-font-family);
  font-weight: 700;
  line-height: 1.2;

}

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

div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
{ margin: 0; padding: 0; border: 0; font-size: var(--body-font-size); font-family: var(--body-font-family); vertical-align: baseline; }

ol, ul, dl { list-style: none; margin:0; padding:0; }

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

a { color: var(--body-color); text-decoration: none; outline: none;  object-fit: contain; }
a:hover, a:active { text-decoration: none; color: inherit; background-color: transparent; }

button{border:0; background:none; cursor:pointer; color:inherit; font:inherit; margin:0; padding:0; }
button:hover{border:0;background:none; padding:0; margin:0}

.blind,iframe{overflow:hidden}
.blind{position:absolute;clip:rect(0 0 0 0);margin:-1px;width:1px;height:1px}

.d-flex{display:flex}
.fd-r{flex-direction:row}
.fd-c{flex-direction:column}
.fw-w{flex-wrap:wrap}
.fw-nw{flex-wrap:nowrap}
.jc-fs{justify-content:flex-start}
.jc-fe{justify-content:flex-end}
.jc-c{justify-content:center}
.jc-sb{justify-content:space-between}
.ai-c{align-items:center}
.ai-fs{align-items:flex-start}
.ai-sb{justify-content:space-between}

.modal_not_scroll{position:fixed;overflow:hidden;width:100%;height:100%;}
.dimd{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--dimd--50);z-index:1;font-size:0}

.pc{display:flex !important}
.mobile{display:none !important}

@media all and (max-width:1199px){

  .pc{display:none !important}
  .mobile{display:flex !important}


}


/*footer *{font-family:var(--font-family-noto)}*/
/* 레이어 팝업 */
.pop-layer {display:none; position: fixed; top: 50%; left: 50%; width:1000px; height:700px; background-color:#fff; z-index:1000000}
.pop-layer .pop-container { width:100%; padding: 20px 0 20px 25px; box-sizing:border-box}
.pop-layer .xBtn { display:block; position:absolute; top:10px; right:10px}
.pop-layer .xBtn img{ width:20px}
.pop-layer .pop-conts .title{ text-align:center; margin:20px 0;}
.pop-layer .pop-conts .title span{ display:inline-block; font-size:24px; font-weight:bold; color:#333; text-align:center; padding-bottom:5px; border-bottom:2px solid #333;}
.pop-layer .pop-conts .subTitle{ font-size:16px; font-weight:bold; color:#333; margin-top:30px; margin-bottom:10px; line-height:1.4}
.pop-layer .pop-conts .textBox{ width:100%; height:558px; overflow-y:scroll;}
.pop-layer .pop-conts .text01{ font-size:14px; color:#333; line-height:1.6;}
.pop-layer .pop-conts .text02{ font-size:14px; color:#333; line-height:1.6;}
.pop-layer .pop-conts .text02 div{ line-height:1.6}
.pop-layer .pop-conts .text02 table{ width:100%; border-collapse:collapse; margin:20px 0;}
.pop-layer .pop-conts .text02 table th{ font-size:14px; font-weight:bold; color:#333; border:1px dotted #ddd; background-color:#f4f4f4; text-align:center; padding:10px 5px;}
.pop-layer .pop-conts .text02 table td{ font-size:14px; color:#333; border:1px dotted #ddd; text-align:center; padding:10px 5px;}

/*component*/
input, select, textarea {
  border:1px solid var(--gray-e00);
  margin:0; padding:0;
  color:var(--gray-300); font-size:var(--font-size-14);
  font-family:var(--body-font-family);
  vertical-align:middle; background:var(--white);
  outline:none
}

.wd100{width:100% !important}
.wd10{width:10% !important}
.wd20{width:20% !important}
.wd80{width:80% !important}
.wd75{width:75% !important}
.wd35{width:35% !important}
.wd40{width:40% !important}
.wd50{width:50% !important}
.wdCal{width:calc(100% - 2rem)}
.wdCal01{width:calc(100% - 3.95rem)}
.wd5r{width:5.5rem}
.wd6r{width:6.25rem}


input[type="checkbox"].chk-box{display: none;}
input[type="checkbox"].chk-box + label{position:relative;display:flex;justify-content: flex-start; align-items: center;cursor:pointer}
input[type="checkbox"].chk-box + label .check-box{width:1.25rem;height:1.25rem;border:1px solid var(--gray-e00);border-radius:0.188rem ; background:#fff;margin-right:0.313rem;display:inline-block}
input[type="checkbox"].chk-box + label .check-txt{color:var(--gray-300);font-size:var(--font-size-14);display:inline-block}
input[type="checkbox"]:checked.chk-box + label{position:relative}
input[type="checkbox"]:checked.chk-box + label .check-box{background:url(../images/ic-check.svg) no-repeat center center; width:1.25rem;height:1.25rem; border-radius:0.188rem ;margin-right:0.313rem;}
input[type="checkbox"]:checked.chk-box + label .check-txt{}
@charset "UTF-8";

@import url(https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900|Noto+Sans:400,700);

@font-face {
  font-family:'Pretandard';
  font-style:normal;
  font-weight: 200;
  src:
          url(../fonts/Pretendard-ExtraLight.woff2) format('woff2'),
          url(../fonts/Pretendard-ExtraLight.woff) format('woff')
}


@font-face {
  font-family:'Pretandard';
  font-style:normal;
  font-weight: 300;
  src:
          url(../fonts/Pretendard-Light.woff2) format('woff2'),
          url(../fonts/Pretendard-Light.woff) format('woff')
}

@font-face {
  font-family:'Pretandard';
  font-style:normal;
  font-weight: 400;
  src:
          url(../fonts/Pretendard-Medium.woff2) format('woff2'),
          url(../fonts/Pretendard-Medium.woff) format('woff')
}

@font-face {
  font-family:'Pretandard';
  font-style:normal;
  font-weight: 500;
  src:
          url(../fonts/Pretendard-Regular.woff2) format('woff2'),
          url(../fonts/Pretendard-Regular.woff) format('woff')
}

@font-face {
  font-family:'Pretandard';
  font-style:normal;
  font-weight: 600;
  src:
          url(../fonts/Pretendard-SemiBold.woff2) format('woff2'),
          url(../fonts/Pretendard-SemiBold.woff) format('woff')
}


@font-face {
  font-family:'Pretandard';
  font-style:normal;
  font-weight: 700;
  src:
          url(../fonts/Pretendard-Bold.woff2) format('woff2'),
          url(../fonts/Pretendard-Bold.woff) format('woff')
}

@font-face {
  font-family:'Pretandard';
  font-style:normal;
  font-weight: 900;
  src:
          url(../fonts/Pretendard-ExtraBold.woff2) format('woff2'),
          url(../fonts/Pretendard-ExtraBold.woff) format('woff')
}




/*단위환산*/

:root {


  --body-font-family: "Pretandard", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --body-font-size: 1rem; /*16px*/
  --body-font-weight: 500;
  --body-line-height: 1.5;
  --body-bg: #ffffff;
  --body-color:#000;
  --body-letter-spacing:-0.02em;

  --ts-ease:all 0.5s linear;

  --body-text-align:left;

  --font-size-10: 0.625rem;
  --font-size-12: 0.75rem;
  --font-size-13: 0.813rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-21: 1.313rem;
  --font-size-22: 1.375rem;
  --font-size-24: 1.5rem;
  --font-size-25: 1.563rem;
  --font-size-28: 1.75rem;
  --font-size-30: 1.875rem;
  --font-size-32: 2rem;
  --font-size-34: 2.125rem;
  --font-size-40: 2.5rem;
  --font-size-50: 3.125rem;
  --font-size-60: 3.75rem;

  --font-family-noto: 'Noto Sans KR', 'Noto Sans', sans-serif;


  --white     :#ffffff;
  --black     :#000000;
  --black-0c0 :#0C0C0C;

  --gray-989  :#989898;
  --gray-d4d  :#D4D4D4;
  --gray-e2e  :#E2E2E2;
  --gray-e4e  :#E4E4E4;
  --gray-e5e  :#E5E5E5;
  --gray-f8f  :#F8F9FA;
  --gray-f8f8 :#F8F8FA;
  --gray-707  :#707070;
  --gray-dbd  :#DBDBDB;
  --gray-888  :#888888;
  --gray-ded  :#DEDEDE;
  --gray-666  :#666666;



  --blue--002 :#00205B;
  --blue--002b:#002BFF;
  --blue--00b :#00B1FF;
  --blue--00d :#00D3FF;
  --blue--012 :#0123B4;
  --blue--003 :#00318B;
  --blue--0dc :#0DC3F4;
  --blue--21c :#21C6FF;

  --blue--075 :#0754F8;
  --blue--0758:#0758F8;
  --blue--1e3 :#1E336C;
  --blue--309 :#309EEC;
  --blue--30e :#30ECE6;
  --blue--3a4 :#3A4862;
  --blue--446 :#446FE0;

  --blue--005 :#005B9B;
  --blue--11b :#11B6FF;
  --blue--5bf :#5BFFFF;



  --yellow-fae:#FAE100;

  --red       :#FF0000;


  --box-shadow:0 3px 20px rgba(0,0,0,0.06);
  --box-shadow:0 0px 10px rgba(0,0,0,0.1);

  --dimd--50:rgba(0,0,0,.5);


  --font-weight-extralight:200;
  --font-weight-light:300;
  --font-weight-medium:400;
  --font-weight-regular:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;

}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizign:border-box;

}

/**:hover{cursor: pointer;}*/

html,body {
  margin: 0 auto;
  padding: 0;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  color: var(--body-color);
  text-align: var(--body-text-align);
  letter-spacing:var(--body-letter-spacing);
  background:var(--body-bg);
  -webkit-text-size-adjust: 100%;
  position:relative;
  scroll-behavior: smooth;
  width:100%;
  height:100%;

}

h1,h2,h3,h4,h5,h6
{
  margin: 0;
  padding: 0;
  font-family: var(--body-font-family);
  font-weight: 700;
  line-height: 1.2;

}

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

div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{ margin: 0; padding: 0; border: 0; font-size: var(--body-font-size); font-family: var(--body-font-family); vertical-align: baseline; }

ol, ul, dl { list-style: none; margin:0; padding:0; }

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

a { color: var(--body-color); text-decoration: none; outline: none;  object-fit: contain; }
a:hover, a:active { text-decoration: none; color: inherit; background-color: transparent; }

button{border:0; background:none; cursor:pointer; color:inherit; font:inherit; margin:0; padding:0; }
button:hover{border:0;background:none; padding:0; margin:0}

.blind,iframe{overflow:hidden}
.blind{position:absolute;clip:rect(0 0 0 0);margin:-1px;width:1px;height:1px}

.d-flex{display:flex}
.fd-r{flex-direction:row}
.fd-c{flex-direction:column}
.fw-w{flex-wrap:wrap}
.fw-nw{flex-wrap:nowrap}
.jc-fs{justify-content:flex-start}
.jc-fe{justify-content:flex-end}
.jc-c{justify-content:center}
.jc-sb{justify-content:space-between}
.ai-c{align-items:center}
.ai-fs{align-items:flex-start}
.ai-sb{justify-content:space-between}

.modal_not_scroll{position:fixed;overflow:hidden;width:100%;height:100%;}
.dimd{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--dimd--50);z-index:1;font-size:0}

.pc{display:flex !important}
.mobile{display:none !important}

@media all and (max-width:1199px){

  .pc{display:none !important}
  .mobile{display:flex !important}


}


/*footer *{font-family:var(--font-family-noto)}*/


/*component*/
input, select, textarea {
  border:1px solid var(--gray-e00);
  margin:0; padding:0;
  color:var(--gray-300); font-size:var(--font-size-14);
  font-family:var(--body-font-family);
  vertical-align:middle; background:var(--white);
  outline:none
}

.wd100{width:100% !important}
.wd10{width:10% !important}
.wd20{width:20% !important}
.wd80{width:80% !important}
.wd75{width:75% !important}
.wd35{width:35% !important}
.wd40{width:40% !important}
.wd50{width:50% !important}
.wdCal{width:calc(100% - 2rem)}
.wdCal01{width:calc(100% - 3.95rem)}
.wd5r{width:5.5rem}
.wd6r{width:6.25rem}


input[type="checkbox"].chk-box{display: none;}
input[type="checkbox"].chk-box + label{position:relative;display:flex;justify-content: flex-start; align-items: center;cursor:pointer}
input[type="checkbox"].chk-box + label .check-box{width:1.25rem;height:1.25rem;border:1px solid var(--gray-e00);border-radius:0.188rem ; background:#fff;margin-right:0.313rem;display:inline-block}
input[type="checkbox"].chk-box + label .check-txt{color:var(--gray-300);font-size:var(--font-size-14);display:inline-block}
input[type="checkbox"]:checked.chk-box + label{position:relative}
input[type="checkbox"]:checked.chk-box + label .check-box{background:url(../images/ic-check.svg) no-repeat center center; width:1.25rem;height:1.25rem; border-radius:0.188rem ;margin-right:0.313rem;}
input[type="checkbox"]:checked.chk-box + label .check-txt{}



input[type="text"].input-n{border-radius:0.313rem ; height:1.75rem; padding:0 0.75rem; font-size:var(--font-size-14);color:var(--gray-300);margin-right:0.25rem}
input[type="text"].input-n::placeholder{color:var(--gray-700);opacity: 1}
input[type="text"].input-n::-webkit-input-placeholder{color:var(--gray-700)}
input[type="text"].input-n::-ms-input-placeholder{color:var(--gray-700)}


select{
  border-radius:0.313rem;
  height:1.75rem;
  padding:0 1.875rem 0 0.75rem; margin-right:0;
  font-size:var(--font-size-14); color:var(--gray-300);
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background:url("../images/common/select-arrow.svg") no-repeat calc(100% - 1.25rem ) center;
}

select::-ms-expand{display:none}
select option{color:var(--gray-300)}


@media (max-width:1199px){}



input[type="text"].input-n{border-radius:0.313rem ; height:1.75rem; padding:0 0.75rem; font-size:var(--font-size-14);color:var(--gray-300);margin-right:0.25rem}
input[type="text"].input-n::placeholder{color:var(--gray-700);opacity: 1}
input[type="text"].input-n::-webkit-input-placeholder{color:var(--gray-700)}
input[type="text"].input-n::-ms-input-placeholder{color:var(--gray-700)}


select{
  border-radius:0.313rem;
  height:1.75rem;
  padding:0 1.875rem 0 0.75rem; margin-right:0;
  font-size:var(--font-size-14); color:var(--gray-300);
       -o-appearance: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background:url("../images/common/select-arrow.svg") no-repeat calc(100% - 1.25rem ) center;
  }

select::-ms-expand{display:none}
select option{color:var(--gray-300)}
#coverBG,
#gnb_bg {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 101;
}

@media (max-width:1199px){}