@charset "UTF-8";

/* 웹폰트 */
@font-face {
  font-family: 'notosans';
  font-weight: 400;
  src: url('./font/NotoSansKR-Regular.otf');
}

@font-face {
  font-family: 'notosans';
  font-weight: 800;
  src: url('./font/NotoSansKR-Bold.otf');
}

* { box-sizing: border-box; }
html,
body { margin: 0; padding: 0; }

html { font-size: 62.5%; }

body { width: 100%; height: 100%; margin: 0 auto; font-family: "Poppins", sans-serif; font-weight: 400; font-size: 15px; line-height: 1.6rem; letter-spacing: 0.004em; color: #383838; background-color: #f5f5f5; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family:'notosans'; }

/*10px 기준으로 지정 */
header,
section,
article,
aside,
nav,
main,
footer { display: block; }
header:after,
section:after,
article:after,
aside:after,
nav:after,
main:after,
footer:after { content: ""; display: block; clear: both; }
h1,
h2,
h3,
h4,
h5,
h6,
p { margin: 0; }
ul,
ol { list-style: none; margin: 0; padding: 0; }
a { transition: 0.2s all; color: #6236ff; text-decoration: none; }
.clear { clear: both; }

button { border: none; outline: none; cursor: pointer; }
input {border:none; outline: none;}

/* 최상위 태그 */
.wrapper { height: 100vh; width: 100%; max-width: 768px; margin: 0 auto; background-color: #fff; }
.wrapper.has_header {height:calc(100vh - 50px);}

/* header관련 공통 css */
header { position:fixed; top:0; width:100%; max-width:768px; height: 50px; z-index: 10; background: #1b76bd; }
header > ul { display: flex; align-items: center; width: 100%; height: 100%; padding: 0 1rem; }
header.main { display: flex; align-items: center; justify-content: space-between; height: 60px; background-color: #fff; -webkit-box-shadow: 0px 1px 2px -1px rgba(0,0,0,.2); box-shadow: 0px 1px 2px -1px rgba(0,0,0,.2); z-index: 110;}
header.main li.logo a {display: -webkit-flex; display: -ms-flex; display: flex; justify-content: center;}
header.main li.logo img {height: 50px;}
header.main li.logo span {color:#222; font-size: 24px; font-weight:800;}
/* header.main li.logo span {margin-bottom: -5px;
  padding-bottom: 1px; background:linear-gradient(to top,#113B74,#458FC7,#83CBDD); -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,0);font-size: 16px; font-weight:800;} */
header.main li.right img,header.main li.left img {height: 24px;}

/* header>ul태그 내 자식요소 갯수에 따른 정렬 */
/* 1개(로고 & 타이틀) */
header ul.header_item { justify-content: center; }
/* 2~3개(로고 & 타이틀 + 뒤로가기 & 닫기 버튼 등) */
header ul.header_items { justify-content: space-between; }
header .logo { height: auto; font-size: 1.8rem; font-weight: 600; color: #ffffff; }
header > ul > li { height: 80%; }
header > ul > li > a { display: block; height: 100%; }
header > ul > li > a > img { height: 100%; }

/* button관련 공통 css */
.btn_box { padding:16px 0 0; text-align: center; }

.btn_box.full { width: 100%; }

.btn_box.right { text-align: right; padding-right: 0.5rem; }

.normal_btn { padding: 8px 20px; background-color: #8f94fb; background-image: linear-gradient(to bottom, #8f94fb, #4e54c8); -webkit-box-shadow: 0px 3px 15px #8f94fb; color: #ffffff; border-radius: 0.25rem; }

/* pagination 하단 페이지 내비게이션 */
.pagination { display: flex; justify-content: center; padding:3rem 0 2rem; border-radius: 0.25rem; background-color: #fff}

.page-link { position: relative; display: block; padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25; color: #00589bf; background-color: #fff; border: 1px solid #dee2e6; }
.page-link.active { background-color:#1b76bd; color:#fff; }
.page-item.disabled .page-link { color: #6c757d; pointer-events: none; cursor: auto; background-color: #fff; border-color: #dee2e6; }
.page-item.disabled .page-link { color: #6c757d; pointer-events: none; cursor: auto; background-color: #fff; border-color: #dee2e6; }
.page-item:first-child .page-link { margin-left: 0; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }
.page-link:not(:disabled):not(.disabled) { cursor: pointer; }
.page-link:hover { z-index: 2; color: #1b76bd; text-decoration: none; background-color: #e9ecef; border-color: #dee2e6; }


/* table */
.table td,
.table th { vertical-align: middle; text-align: center; }

/*211108 신규 클래스 추가 : SJW*/
.form_box { display:block; width:100%; height:auto; padding:10px; box-sizing: border-box; outline:none; color:#495057; resize:none; font-size:16px; border-radius: 10px; border:1px solid #eee8e8; }
.flex_between { display:flex; justify-content: space-between; align-items: center; width:100%; }
.flex { display: flex; align-items: center; }
.flex_end { display: flex; justify-content:end; align-items: center; }
.flex_center { display: flex; align-items: center; justify-content:center; }

.button_i { padding:10px; border-radius: 20px; background-color:#1b76bd; color:#fff; font-size:16px; font-weight:bold; transition:background-color 300ms ease;}
.button_i:hover { background-color:#0060a4;}

.w25 { width:25%; }
.w49 { width:49%; }
.w50 { width:50%; }
.w100 { width:100%; }

/* 버튼 width:100% */
.bu_100 { width:100%; }
/* //버튼 width:100% */

.margin_T6 { margin-top:6px; }
.margin_T10 { margin-top:10px; }
.margin_T20 { margin-top:20px; }
.margin_T50 { margin-top:50px; }
.margin_T100 { margin-top:100px; }
.margin_R10 { margin-right:10px; }
.margin_L10 { margin-left:10px; }
.margin_B10 { margin-bottom:10px; }
.margin_B20 { margin-bottom:20px; }
.margin_B70 { margin-bottom:70px; }

.padding_T10 { padding-top:10px; }
.padding_B10 { padding-bottom:10px; }

.text_center { text-align: center; }
.text_left { text-align: left; }
.text_right { text-align: right; }

label { font-size: 16px; color:#333; }

textarea:read-only, input:read-only { background-color:#eee8e8; }

.color_red { color:red; }
.color_green { color:green; }
.color_orange { color:orangered; }
.color_white { color:#fff; }
.color_black { color:#333; }
.color_gray { color:gray; }

.light_color {background-color: #98a7ff; transition:background-color 300ms ease;}
.light_color:hover {background-color: #5e76ff; }

/* 강조 폰트 색상 및  */
.highlight_txt {color:#3f51b5; font-weight: bold;}

.text_overflow { overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }

/*테이블구조에서 스크롤 구조 */
.over_scroll { overflow:auto; -ms-overflow-style:none; scrollbar-width:none; }
.over_scroll::-webkit-scrollbar { display: none; }
/*테이블구조에서 스크롤 구조 */

/* input type number 위아래 버튼 삭제 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* //input type number 위아래 버튼 삭제*/
.page_section { margin-top:50px; padding:30px 20px; background-color: #fff; }

.d_none { display:none; }

/* table */
table thead th { vertical-align: middle; border-bottom: 1px solid #dee2e6; text-align: center; }

table th,
table td { padding: 0.75rem; }

/*글자크기*/
.font_20 { font-size:20px; }
.font_18 { font-size:18px; }

/* //table */
/*폰트*/
.notosans_400 { color:#333; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; }
/*regular*/

.notosans_500 { color:#333; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; }
/* medium */
.notosans_700 { color:#333; font-family: 'Noto Sans KR', sans-serif; font-weight: 700; }

.popin_400 { color:#333; font-family: 'Poppins', sans-serif; font-weight: 400; }
/*regular*/

.popin_500 { color:#333; font-family: 'Poppins', sans-serif; font-weight: 500; }
/* medium */
.popin_700 { color:#333; font-family: 'Poppins', sans-serif; font-weight: 700; }
/* bold */

.b_shadow { box-shadow: 2px 2px 2px 2px #ededed; }

textarea { resize: none; }
.textover_default {
  white-space: nowrap;
  text-overflow: clip;
}
.b_active { border-radius: 10px; background-color:#1b76bd; color:#fff; }
.b_active button { background-color:transparent;  }
.loader_wrap {
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:9999;
  width:100%;
  background-color:#fff;
}


.no_sc {
  height:100%;
  overflow: hidden;
}

/*loading 페이지 */
.center_position { width:100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.loader { border: 7px solid transparent; background-image: linear-gradient( #fff , #FFF) , linear-gradient( to right ,
#767dff,#282c4a ,#282c4a , #282c4a, #282c4a );background-origin: border-box; background-clip: content-box, border-box;border-radius:50%;width:70px;height: 70px;animation: spin 1s linear infinite;margin: 0 auto; }
.pop_txt {padding-top: 30px;margin-bottom: 30px;text-align: justify;word-break: break-word;overflow-y: auto; }
.mt10 {margin-top: 10px; }
.subtit16_white {font-size: 2.4rem;height:90px;padding-bottom:
color: #000;font-weight: 400; }
@keyframes spin {0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
 }



@media screen and (max-width:767px) { label { font-size: 14px; }  }

@media screen and (max-width:499px) {
  header.main > ul {justify-content: space-between;}
  header.main li.logo img:last-child {width: 200px;}

  .btn_small {padding:8px 5px;}
}