@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/*리셋 CSS*/
* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:62.5%; height:100%; } /*반응형 기존폰트 10px 지정 (iphone5 기준)*/

body { margin:0; padding:0; height:100%;}
ul,ol,li { list-style:none; }
a:link,a:visited { text-decoration:none; color:var(--black);}
select { outline: none; border:none; }
button { outline:none; border:none; cursor:pointer; }
/* table { border-spacing:0px; border-collapse:collapse; } */
input { border:none; outline:none; }
textarea{ border:none; outline:none;}
body{
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}


/* css 변수 설정 */
:root {

  /* color */
  --main_color : #E31D2E;
  --sub_color : #B50308;
  --black : #111111;
  --white : #ffffff;
  --green : #1F893B;
  --dark_gray : #555555;
  --gray : #B1B1B1;
  --light_gray : #F2F2F2;

  /* border */
  --border_main : #C3C3C3;
  --border_sub : #EFEFEF;

  /* font */
  --font_B : "NotoSansKR-Bold","dotum";
  --font_M : "NotoSansKR-Medium","dotum";
  --font_R : "NotoSansKR-Regular","dotum";
  --font_L : "NotoSansKR-Light","dotum";
}

/* font 설정 */

/* opensans */
@font-face { font-family:"NotoSansKR-Light"; src:url("./font/NotoSansKR-Light.otf") format("opentype"); font-weight:300; font-style:normal; }
@font-face { font-family:"NotoSansKR-Regular"; src:url("./font/NotoSansKR-Regular.otf") format("opentype"); font-weight:400; font-style:normal; }
@font-face { font-family:"NotoSansKR-Medium"; src:url("./font/NotoSansKR-Medium.otf") format("opentype"); font-weight:500; font-style:normal; }
/* @font-face { font-family:"OpenSans-SemiBold"; src:url("./font/OpenSans-SemiBold.ttf") format("opentype"); font-weight:600; font-style:normal; } */
@font-face { font-family:"NotoSansKR-Bold"; src:url("./font/NotoSansKR-Bold.otf") format("opentype"); font-weight:700; font-style:normal; }
/* // opensans */


/* #################### 공통 클래스 영역 ####################*/

/*공통*/
.d_none {display: none !important;}
.d_block {display: block;}

/* bg 공통 클래스 */
.bg_gray { background-color:var(--bg_gray); }

/* position 공통 클래스 */
.position_center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }

/* 22.10.12 보내기 내 원화 환전 표현 추가 : NBR */
.coin_change_txt { font-size: 1.4rem; font-family: var(--font_B); text-align: right;}
/* flex 공통 클래스 */
.flex { display:flex; align-items:center; }
.flex_center { display:flex; justify-content:center; align-items:center; }
.flex_between { display:flex; justify-content:space-between; align-items:center; }
.flex_around { display:flex; justify-content:space-around; align-items:center; }

/* text 정렬 */
.text_center { text-align: center; }
.text_left { text-align: left; }
.text_right { text-align: right; }

.p_Y20{padding:20px 0;}


/* width */
.w_10 { width:10%; }
.w_24 { width:24%; }
.w_33 { width:33%; }
.w_49 { width:49%; }
.w_100 { width:100%; }



/* margin 값 */
.m_B10 {margin-bottom:10px;}
.m_B20 {margin-bottom:20px;}
.m_B30 {margin-bottom:30px;}
.m_B40 {margin-bottom:40px;}

.m_T10 {margin-top:10px;}
.m_T20 {margin-top:20px;}
.m_T30 {margin-top:30px;}
.m_T40 {margin-top:40px;}

.m_L10 {margin-left:10px;}
.m_L20 {margin-left:20px;}
.m_L30 {margin-left:30px;}
.m_L40 {margin-left:40px;}

.m_R10 {margin-right:10px;}
.m_R20 {margin-right:20px;}
.m_R30 {margin-right:30px;}
.m_R40 {margin-right:40px;}

/* padding값 */
.p_B10 {padding-bottom:10px;}
.p_B20 {padding-bottom:20px;}
.p_B30 {padding-bottom:30px;}
.p_B40 {padding-bottom:40px;}

.p_T10 {padding-top:10px;}
.p_T20 {padding-top:20px;}
.p_T30 {padding-top:30px;}
.p_T40 {padding-top:40px;}

.p_L10 {padding-left:10px;}
.p_L20 {padding-left:20px;}
.p_L30 {padding-left:30px;}
.p_L40 {padding-left:40px;}

.p_R10 {padding-right:10px;}
.p_R20 {padding-right:20px;}
.p_R30 {padding-right:30px;}
.p_R40 {padding-right:40px;}

/* ellipsis */
.ellipsis{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.ellipsis2{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}

/* readonly */
.readonly { background-color: var(--border_sub);}

.wrap_btn {width:100%; max-width:768px; min-height:calc(100vh - 230px); height:100%; margin:70px auto 30px;}
.wrap_pagination{width:100%; max-width:768px; min-height:calc(100vh - 152px); height:100%; margin:70px auto 0px;}
.wrap_keypad {width:100%; max-width:768px; min-height:calc(100vh - 390px); height:100%; margin:70px auto 0;}


/*header*/
.header {position:fixed; left:50%; top:0; transform:translateX(-50%); width:100%; max-width:768px; height:70px; padding:0 20px; border-bottom:1px solid #E2E2E2; background-color:#fff; z-index:998;}
.header_common_layout{display:flex; justify-content:space-between; align-items:center; width:100%; height:100%;}
.header_title{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:1.8rem; font-weight:700; font-style:normal; font-family:var(--font_B); }
.header_left{margin-right:auto;}
.header_right{margin-left:auto;}
.header .close { width:14px; }
.header .back { width:10px; }

/* 111111111111111111111111111111111111111111*/
/* wrap */
.wrap {min-height:100%; width:100%; max-width:768px; margin:0 auto;}
.wrap_full{height:100%;}

/* content */
.content{width:100%; padding-top:70px;}
.content_table{display:table; height:100%;}
.content_table_row{display:table-row;}
.content_table_full{height:100%;}
.content_table_cell{display:table-cell; vertical-align:middle;}
.content_inner{padding:0 20px;}

.d_table{display:table;}
.d_row{display:table-row;}
.d_cell{display:table-cell;}

/* btn */
.btn_wrap{display:flex; padding:30px 0;}
.btn_wrap .btn{margin-right:20px;}
.btn_wrap .btn:last-child{margin-right:0;}
.btn{width:100%; height:52px; background-color:#EAECEF; border-radius:4px; font-size:1.6rem; font-family:var(--font_B); color:var(--black);}
.btn_red{background-color:var(--main_color); color:#fff;}
.btn_border{background-color:transparent; border:1px solid var(--main_color); color:var(--main_color);}
.btn_small{flex:none; width:98px; height:40px; margin-left:10px; background-color:var(--main_color); border-radius:4px; font-size:1.6rem; font-family:var(--font_B); color:var(--white);}
.bottom_wrap{padding-top:82px;}
.bottom_fixed{position:fixed; left:50%; bottom:0; transform:translateX(-50%); width:100%; max-width:768px; padding:0 20px; background-color:var(--white); z-index:999;}
.bottom_fixed .btn_wrap{padding-top:0;}

/* btn */
/* .btn_confirm{width:100%; height:52px; background-color:var(--main_color); border-radius:4px; font-size:1.6rem; font-family:var(--font_B); color:var(--white); }
.btn_cancel{width:100%; height:52px; margin-right:20px; background-color:#EAECEF; border-radius:4px; font-size:1.6rem; font-family:var(--font_B); color:var(--black);}
.btn_sign{width:100%; height:52px; background-color:transparent; border:1px solid var(--main_color); border-radius:4px; font-size:1.6rem; font-family:var(--font_B); color:var(--main_color);}
.btn_98{flex:none; width:98px; height:40px; margin-left:10px; background-color:var(--main_color); border-radius:4px; font-size:1.6rem; font-family:var(--font_B); color:var(--white);}
.keypad_btn {width:100%; max-width:768px; margin:0 auto; padding:0 20px;} */


/* gnb */
.gnb{padding-top:83px;}
.gnb_list{display:flex; justify-content:space-between; padding:16px 20px; border-top:1px solid #E2E2E2; position:fixed; left:50%; bottom:0; transform:translateX(-50%); width:100%; max-width:768px; background-color:var(--white); z-index:999;}
.gnb_list li a{color:#999;}
.gnb_list .selected a{color:#000;}
.gnb_link{display:flex; flex-direction:column; align-items:center; font-size:1.4rem; font-family:var(--font_M);}
.gnb_img{width:22px; height:22px; margin-bottom:8px;}


/* pagination */
.pagination_wrap{width:100%; max-width:768px; padding:28px 0; margin:0 auto;}
.pagination_list { display:flex; justify-content:center; width:170px; margin:0 auto;}
.pagination_list li {margin-right:4px;}
.pagination_item li:last-child {margin-right:0;}
.pagination_prev, .pagination_next{ display:flex; justify-content:center; align-items:center; width:26px; height:26px; color:var(--black); font-size:1.4rem; font-family:"OpenSans-Regular"; user-select:none; cursor:pointer; }
.pagination_item {display:flex; justify-content:center; align-items:center; width:26px; height:26px; font-size:1.4rem; font-family:"OpenSans-Regular"; color:var(--gray); user-select:none; cursor:pointer; }
.pagination_item.active { background-color:var(--main_color); border-radius:4px; font-family:"OpenSans-Medium"; color:var(--white); }
.pagination_item a{display:flex; justify-content:center; align-items:center; width:100%; height:100%;}
.pagination_item.active a{color:#fff;}


/* 강조 텍스트 */
.text_red{color:var(--sub_color);}
.text_green{color:var(--green);}
.text_purple{color:#b503ac;}
.text_blue{color:#1503b5;}
.text_skyblue{color:#03b5b5;}
.text_yellow{color:#e2e605;}
.text_orange{color:#b55f03;}
.text_main{color:#b55f03;}


/* hr 구분선 */
hr{border:none; border-top:10px solid #F8F9FB;}


/* input */
.input_basic { width:100%; height:40px; padding:10px 16px; margin-top:10px; border-radius:6px; border:1px solid var(--border_main); font-size:1.4rem; font-family:var(--font_R); }
.input_readonly{width:100%; height:40px; padding:10px 16px; margin-top:10px; border-radius:6px; background-color:var(--light_gray); font-size:1.4rem; font-family:var(--font_R);}
.textarea_basic{width:100%; height:412px; padding:10px 16px 10px; margin-top:10px; border-radius:6px; border:1px solid var(--border_main); font-size:1.4rem; font-family:var(--font_R); resize:none;}

/* input radio 버튼 디자인변경 */
input[type="radio"]{-webkit-appearance:none; width:16px; height:16px; border:2px solid var(--border_main); border-radius:50%; flex:none;}
input[type="radio"]:checked{-webkit-appearance:none; border:2px solid #f00; border-radius:50%;}
input[type='radio']:before {content:''; display:block; width:50%; height:50%;margin:25% auto; border-radius:50%;}
input[type='radio']:checked:before {background:red;}

/*placeholder 색상*/
input::placeholder {color:var(--dark_gray);}
textarea::placeholder { color:var(--dark_gray); }


label {position:relative; display:block; font-size:1.6rem; font-family:var(--font_B);}


/* 강조 텍스트 */
.text_red{color:var(--sub_color);}
.text_green{color:var(--green);}

.cursor { cursor:pointer;}

/*input label 화살표 제거*/
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/*input label 체크박스 디자인 변경 */
input[type="checkbox"] { -webkit-appearance: none; position: relative; width: 24px; height: 24px; margin-right:10px; cursor: pointer; outline: none; border: 1px solid var(--border_main); border-radius: 4px; top:2px; }
input[type="checkbox"]::before { background-image: url("../img/svg/icon_chk.svg"); width:100%; height:100%; background-position: center;  background-repeat: no-repeat;
  content: ""; position: absolute; top: 50%; left: 50%; overflow: hidden; transform: scale(0) translate(-50%, -50%); line-height: 1; }
input[type="checkbox"]:checked { background-color: var(--main_color); border:none;  }
input[type="checkbox"]:checked::before { border-radius: 4px; transform: scale(1) translate(-50%, -50%); }
.checkbox_wrap{display:flex; align-items:center; font-size:1.4rem; font-family:var(--font_M);}

/*select*/
    select { -webkit-appearance:none; -moz-appearance:none; appearance:none; background:url("../img/svg/icon_drop.svg") no-repeat 98% 50%/20px auto; background-size: 10px; color:var(--main);}
/*select*/

/* loading */
.loading{position:fixed; left:0; top:0; width:100%; height:100vh; background-color:#fff; z-index:9999;}
.loading_circle{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(0deg);width:100px; height:100px; border-radius:50%; border:2px solid var(--main_color); border-top-color:rgba(255,255,255,0); border-bottom-color:rgba(255,255,255,0); animation:loading 3s infinite;}
.loading_text{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:1.4rem; font-family:var(--font_B); color:var(--sub_color);}

.swal2-title {font-size:2.875em !important;}
.swal2-styled.swal2-confirm {font-size:1.8em !important;}




@keyframes loading{
  100%{transform:translate(-50%,-50%) rotate(360deg);}
}

/*미디어쿼리*/
@media screen and (max-width:767px) {
  select { background:url("../img/svg/icon_drop.svg") no-repeat 94% 50%/20px auto; background-size: 10px; }
 .swal2-title {font-size:2.2em !important;}
 }



 @media screen and (max-width:320px) {
  .btn_100 {font-size:1.4rem;}
 }