@charset "UTF-8";
@font-face {
  font-family: 'KoreanHNBRA';
  src: url('/css/font/KoreanHNBRA.ttf');
}
@font-face{
  font-family: 'numder_font';
  src: url('/css/font/SF-Pro-Rounded-Bold.otf');
}
/* common style */
html, body {
  position: relative;
  height: 100%;
}

body {
  font-family: 'Noto Sans KR', 'KoreanHNBRA', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}
.clear {clear: both;}
.bold{font-weight: bold;}
.medium {font-weight: 600;}
.normal {font-weight: 400;}
.light {font-weight: 200;}
.pointer{cursor: pointer;}
.nonecursor{cursor: none;}
.opacity0{opacity: 0;}
.right{text-align: right;}
.left{text-align: left;}
.center{text-align: center;}
.roboto { font-family: 'roboto', sans-serif;}
.KoreanHNBRA{ font-family: 'KoreanHNBRA', sans-serif;}
.numder_font{font-family: 'numder_font', sans-serif;}

/* 하단 설명 텍스트  */
.explain_text { /* 하단 설명 텍스트 : 왼쪽 영역부터 보임 */
  font-size: 12px;
  color: #696969;
  line-height: 18px;
  text-align: left;
}
.explain_text_center { /* 하단 설명 텍스트 :가운데 영역부터 보임 */
  font-size: 12px;
  color: #696969;
  line-height: 18px;
  text-align: left;
  margin-left: 100px;
}

/* 모든 버튼은 각 공통 css class 적용 후 너비 따로지정 */
/* input 투명배경 입력창 : 너비값 따로 지정필요 */
.input_transparent{
  color:#000;
  height: 40px;
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  padding: 0 10px;
  font-size: 16px;
  text-overflow: ellipsis;
  isolation: isolate;
  -moz-border-radius: 6px;/* 파이어폭스 */
  -ms-border-radius: 6px;  /* IE */
  -o-border-radius: 6px;  /* 오페라 */
  -webkit-border-radius: 6px;  /* 사파리, 크롬 */
  border-radius: 6px;
}
/* input 그레이배경 입력창 : 너비값 따로 지정필요 */
.input_gray_20{
  height: 40px;
  background: #F9F9F9;
  border: none;
  outline: none;
  width: 100%;
  padding: 0 10px;
  font-size: 16px;
  text-overflow: ellipsis;
  isolation: isolate;
  -moz-border-radius: 6px;/* 파이어폭스 */
  -ms-border-radius: 6px;  /* IE */
  -o-border-radius: 6px;  /* 오페라 */
  -webkit-border-radius: 6px;  /* 사파리, 크롬 */
  border-radius: 6px;
}
.input_gray_20::-ms-input-placeholder { color: #B4B4B4; }
.input_gray_20::-webkit-input-placeholder { color: #B4B4B4; }
.input_gray_20::-moz-placeholder { color: #B4B4B4; }

/* input 연노랑배경 버튼 : 너비값 따로 지정필요 */
.input_paleyellow_20 {
  height: 40px;
  background: #FFF6D8;
  border: none;
  outline: none;
  width: 100%;
  font-size: 16px;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  -moz-border-radius: 6px;/* 파이어폭스 */
  -ms-border-radius: 6px;  /* IE */
  -o-border-radius: 6px;  /* 오페라 */
  -webkit-border-radius: 6px;  /* 사파리, 크롬 */
  border-radius: 6px;
  cursor: pointer;
}
/* input 그레이(#f2f2f2)배경 버튼 : 너비값 따로 지정필요 */
.input_darkgray_20{
  height: 40px;
  background: #f2f2f2;
  border: none;
  outline: none;
  width: 100%;
  font-size: 16px;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  -moz-border-radius: 6px;/* 파이어폭스 */
  -ms-border-radius: 6px;  /* IE */
  -o-border-radius: 6px;  /* 오페라 */
  -webkit-border-radius: 6px;  /* 사파리, 크롬 */
  border-radius: 6px;
  cursor: pointer;
}
/* input 화이트 배경 버튼 : 너비값 따로 지정필요 230214*/
.input_white {
  background: #fff;
  height: 40px;
  border: none;
  outline: none;
  width: 100%;
  padding: 1px 10px 0;
  font-size: 16px;
  text-overflow: ellipsis;
  isolation: isolate;
  -moz-border-radius: 6px;/* 파이어폭스 */
  -ms-border-radius: 6px;/* IE */
  -o-border-radius: 6px;/* 오페라 */
  -webkit-border-radius: 6px;/* 사파리, 크롬 */
  border-radius: 6px;
}
.input_white::-ms-input-placeholder{color: #B4B4B4;}
.input_white::-webkit-input-placeholder{color: #B4B4B4;}
.input_white::-moz-placeholder{color: #B4B4B4;}

.input_transperant_10{
  height: 58px;
  color:#fff;
  background: rgba(255,255,255,0.1);
  padding: 0 15px;
  border: none;
  outline: none;
  width: 100%;
  font-size: 26px;
  text-overflow: ellipsis;
  isolation: isolate;
  -moz-border-radius: 6px;
  /* 파이어폭스 */
  -ms-border-radius: 6px;
  /* IE */
  -o-border-radius: 6px;
  /* 오페라 */
  -webkit-border-radius: 6px;
  /* 사파리, 크롬 */
  border-radius: 6px;
  cursor: pointer;
}
.input_transperant_10::-ms-input-placeholder {
  color: #B4B4B4;
}

.input_transperant_10::-webkit-input-placeholder {
  color: #B4B4B4;
}

.input_transperant_10::-moz-placeholder {
  color: #B4B4B4;
}

select.input_transperant_10 option{
  color:#000;
}

.input_transperant_5{
  width: 340px;
  height: 100px;
  color:#000000;
  font-size: 28px;
  font-weight: bold;
  padding: 0 20px;
  background: #FFD600;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

/* color style */
.c_orange {color: #FF6200;}
.c_red {color: red;}
.c_white {color: #fff;}
.c_black {color: #000;}
.c_yellow {color: #FFD600;}
.c_darkyellow {color: #FFC400;}

.t_input {color: #B4B4B4; line-height: 1.5;}
.t_explain {color: #696969;}
.c_c4c4c4 {color: #C4C4C4;}

/* BG color style */
.bg_darkgray {background: #1E1E1E;}
.bg_mingray {background: #f9f9f9;}
.bg_paleyellow {background: #FFF6D8;}
.bg_yellow {background: #FFD600;}
.bg_darkyellow {background: #FFC400;}
.bg_white {background: #FFFFFF;}
.bg_white_t10 {background: rgba(255,255,255,0.1);}

/* 사각형 모서리라운드 */
.radius6{/*6px*/
  isolation: isolate;
  -moz-border-radius: 6px;/* 파이어폭스 */
  -ms-border-radius: 6px;  /* IE */
  -o-border-radius: 6px;  /* 오페라 */
  -webkit-border-radius: 6px;  /* 사파리, 크롬 */
  border-radius: 6px;
}
.radius16 {/*16px*/
  isolation: isolate;
  -moz-border-radius: 16px;  /* 파이어폭스 */
  -ms-border-radius: 16px;  /* IE */
  -o-border-radius: 16px;  /* 오페라 */
  -webkit-border-radius: 16px;  /* 사파리, 크롬 */
  border-radius: 16px;
}

/* font-size */
.font_12 {font-size: 12px;}
.font_14 {font-size: 14px;}
.font_16 {font-size: 16px;}
.font_18 {font-size: 18px;}
.font_20 {font-size: 20px;}
.font_22 {font-size: 22px;}
.font_24 {font-size: 24px;}
.font_26 {font-size: 26px;}
.font_32 {font-size: 32px;}
.font_34 {font-size: 34px;}
.font_46 {font-size: 46px;}
.font_51 {font-size: 51px;}
.font_54 {font-size: 54px;}
.font_74 {font-size: 74px;}
.font_90 {font-size: 90px;}
.linehight1_5{line-height: 1.5;}

 /* navbar style */
 #navbar {
   position: fixed;
   z-index: 1000;
   width: 100%;
   height: 80px;
   color: #fff;
 }
 #navbar .navbar_inner{
   max-width: 1280px;
   height: 80px;
   margin: 0 auto;
   padding: 0 40px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 #navbar .navbar_inner .nav_account {
   display: flex;
   align-items: center;
   min-width: 260px;
 }
 #navbar .navbar_inner .nav_account li {
   padding-left: 20px;
   text-align: right;
 }
 #navbar .navbar_inner .nav_account li a {
   font-size: 16px;
 }

 .margin_b_4{margin-bottom: 4px;}
 .margin_b_5{margin-bottom: 5px;}
 .margin_b_8{margin-bottom: 8px;}
 .margin_b_10{margin-bottom:10px;}
 .margin_b_18{margin-bottom: 18px;}
 .margin_b_20{margin-bottom: 20px;}
 .margin_b_30{margin-bottom: 30px;}

 .margin_r_5{margin-right: 5px;}
 .margin_r_6{margin-right: 6px;}
 .margin_r_16{margin-right:16px;}
 .margin_r_10{margin-right:10px;}
 .margin_r_20{margin-right:20px;}
 .margin_r_30{margin-right:30px;}
 .margin_r_60{margin-right:60px;}

 .margin_l_5{margin-left: 5px;}
 .margin_l_10{margin-left: 10px;}
 .margin_l_16{margin-left: 16px;}
 .margin_l_20{margin-left: 20px;}
 .margin_l_30{margin-left: 30px;}
 .margin_l_40{margin-left: 40px;}
 .margin_l_60{margin-left: 60px;}
 .margin_l_100{margin-left: 100px;}

 .margin_t_4{margin-top: 4px;}
 .margin_t_10{margin-top: 10px;}
 .margin_t_15{margin-top: 15px;}
 .margin_t_20{margin-top: 20px;}
 .margin_t_30{margin-top: 30px;}
 .margin_t_40{margin-top: 40px;}

.ative_gradation {
  /* 버튼 active 그라데이션 노랑 컬러 */
  background: linear-gradient(90deg, #FFE709, #FFD843);
}

.height36{height: 36px;}
.height48{height: 48px;}
.height58{height: 58px;}
.displaynone{display: none;}
.border_gray{border: 1px solid #C4C4C4;}

.flex_center{display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex_center_center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.scroll {
  overflow: scroll;
  -ms-overflow-style: none; /* 인터넷 익스플로러 */
  scrollbar-width: none; /* 파이어폭스 */
}
.scroll::-webkit-scrollbar {
  display: none;
}

/* START : header------------------------------------------------------ */
.header{
  height: 80px; width: 1920px; padding:34px 5.2% 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 20px; color: #fff;
  margin: 0 auto;
}
.header_left{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_left li{
  margin-right: 60px;
}
.h_logo{max-width: 145px; width: 100%;}
.h_text{padding-bottom: 6px; min-width: max-content;}
.header_right{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_right li{
  margin-left: 42px;
}
.h_menu{max-width: 42px; width: 100%;}
.h_none{ display: none;}

/* START : header------------------------------------------------------ */