@charset "UTF-8";
@import url("https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
* { 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; }

/*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; line-height: 1.2; }
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; width: 100%; max-width:768px; top:0; left:0; right:0; margin:auto; height: 50px; z-index: 6; background: #06038d; }
header > ul { display: flex; align-items: center; width: 100%; height: 100%; padding: 0 1rem; }

/* 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 .logo { height: auto; font-size: 1.8rem; font-weight: 600; color: #fff; }
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: #0805AC; background-image: linear-gradient(to bottom, #0805AC, #312ece); -webkit-box-shadow: 0px 3px 15px #0805AC; 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: #06038d; background-color: #fff; border: 1px solid #dee2e6; }
.page-link.active { background-color:#0805AC; 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: #0805AC; 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; margin: 5px 0; box-sizing: border-box; outline:none; color:#495057; resize:none; font-size:16px; border-radius: 10px; border:1px solid #eee8e8;-webkit-appearance: none; -moz-appearance: none; appearance: none; }
.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; }
.align_base {align-items: baseline;}
.align_end {align-items:end;}

.button_i { display: inline-block; padding:10px; border-radius: 10px; border:none; outline:none; background-color:#06038d; color:#fff; font-size:16px; font-weight:bold; cursor:pointer; }
.button_i:hover {background-color:#0805AC;}

.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_R10 { margin-right:10px; }
.margin_R20 { margin-right:20px; }
.margin_L10 { margin-left:10px; }
.margin_B10 { margin-bottom:10px; }
.margin_B20 { margin-bottom:20px; }
.margin_B30 { margin-bottom:30px; }
.margin_B70 { margin-bottom:70px; }

.padding_T10 { padding-top:10px; }
.padding_T20 { padding-top:20px; }
.padding_T30 { padding-top:30px; }
.padding_B10 { padding-bottom:10px; }
.padding_B20 { padding-bottom:20px; }

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

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

/* 하단 탭 버튼 */
.appBottomMenu { max-width: 768px; min-height: 56px; position: fixed; z-index: 999; width: 100%; left: 50%; bottom: 0; transform: translateX(-50%); background: #ffffff; display: flex; align-items: center; justify-content: center; border-top: 1px solid #dcdce9; padding: 10px 4px; }
.appBottomMenu .item { font-size: 9px; letter-spacing: 0; text-align: center; width: 100%; height: 56px; line-height: 1.2em; text-align: center; }
.appBottomMenu .item a {display: block;}
.appBottomMenu .item:hover strong { color: #27173e; }
.appBottomMenu img { width:30px; height:30px; }
.appBottomMenu .item strong { display: block;  font-size: 1.2rem; color: #9598ab; font-family: "Noto Sans KR", sans-serif; font-weight: 700; transition: 0.1s all; }



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

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

.light_color {background-color: #0805AC; transition:background-color 300ms ease;}
.light_color:hover {background-color: #06038d; }

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

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

/*테이블구조에서 스크롤 구조 */
.over_scroll { overflow:scroll; /*-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; }
.page_section.has_footer {padding-bottom:97px;}

.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 button { background-color:#d3806f;}
.b_active .button_i:hover { background-color: #C55944; }

.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; color: #000;font-weight: 400; }
@keyframes spin {0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
 }

 /* 22.01.11 iOS 사파리 기본스타일 제거*/
 /* input, textarea, button {-webkit-appearance:none; -webkit-border-radius:none;} */

 select.form_box {background: url('../img/icon_shevron_down.svg') no-repeat 95% 50%;}

@media screen and (min-width: 768px) {.appBottomMenu .item strong { font-size: 1.4rem; }  }
@media screen and (max-width:767px) { label { font-size: 14px; }  }
@media screen and (max-width:499px) { .form_box{padding:10px 5px;} }