@charset 'utf-8';

/* 색상 변수 설정 */
:root {
  --inactive :#B1B1B1;
  --sub :#555555;
  --line : #F2F2F2;
  --middle-gray : #BCC1CE;
  --tab_menu : #F9F9F9;
  --input :#F4F4F4;
  --dark-gray : #7E7E7E;
  --font-gray : #707070;
  --main : #1749C2;
  --null_bg : #F7FCEF;
  --fran_color : #4A9EFA;
  --fran_cm_buy : #0B4DCB;
  --fran_cm_sale : #005C57;
  /* --main : #96BC5D; */
}

/* 웹폰트 */
@font-face {
  font-family: "poppins";
  src: url("./font/Poppins-Light.ttf") format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "poppins";
  src: url("./font/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "poppins";
  src: url("./font/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
}
@font-face {
  font-family: "poppins";
  src: url("./font/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "poppins";
  src: url("./font/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
}


@font-face {
  font-family: "noto_sans";
  src: url("./font/NotoSansKR-Regular.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "noto_sans";
  src: url("./font/NotoSansKR-Medium.otf") format("opentype");
  font-weight: 500;
}
@font-face {
  font-family: "noto_sans";
  src: url("./font/NotoSansKR-Bold.otf") format("opentype");
  font-weight: 700;
}

/* 글자색상 지정 공통 클래스 */
.red {color: #E60023!important;}
.green {color: #009207!important;}
.main {color:#1749C2 !important;}
.gray {color: var(--sub);}
.black {color:#000!important;}
.darkgreen { color : #005C57 !important;}
.darkblue { color : #0B4DCB !important;}
.bg_red {background: #E60023 !important;}
.bg_white {background: #fff !important;}

.gray_regular_12 {font-size: 12px; font-weight: 400; color: var(--sub);}
.eng {font-family: "poppins";}
.cursor_not {cursor:inherit !important; }
/* 폰트 크기 공통클래스 */
.font_22 {font-size: 22px; font-weight: 800;}
.font_12 {font-size: 12px;}
.font_16 {font-size: 16px;}
/* 폰트 굵기 공통클래스 */
.light {font-weight: 300;}
.regular {font-weight: 400;}
.medium {font-weight: 500;}
.semi_bold {font-weight: 600;}
.bold {font-weight: 700;}
.w_100 {width:100% !important;}
/* 정렬 공통클래스 */
.txt_center {text-align: center;}

/* 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_start {display: flex; justify-content: space-between; align-items: flex-start;}
.flex_end {display: flex; justify-content: space-between; align-items: flex-end;}
.flex_wrap {flex-wrap:wrap;}
/* 간격 공통클래스(padding/margin) */
.p_LR_20 {padding: 0 20px;}
.p20 {padding:20px;}
.p_B10 {padding-bottom: 10px;}
.p_B20 {padding-bottom: 20px;}
.p_B30 {padding-bottom: 30px;}
.p_B40 {padding-bottom: 40px;}
.p_B65 {padding-bottom: 65px;}
.p_T10 {padding-top: 10px;}
.p_T20 {padding-top: 20px;}
.p_T30 {padding-top: 30px;}
.p_T40 {padding-top: 40px;}
.p_T50 {padding-top: 50px;}

.m_L10  {margin-left: 10px;}
.m_R20  {margin-right: 20px;}
.m_T10 {margin-top: 10px;}
.m_T20 {margin-top: 20px;}
.m_T30 {margin-top: 30px;}
.m_T60 {margin-top: 60px;}
.m_B10 {margin-bottom: 10px;}
.m_B20 {margin-bottom: 20px;}
.m_B30 {margin-bottom: 30px;}
.m_B84 {margin-bottom: 84px;}

body {background-color: var(--line); font-family: "noto_sans"; }
body.hidden {overflow: hidden;}
html.h100, body.h100 { height: 100%;}
html{height:100%;}
.h_auto {height:auto;}

/* viewport 보다 콘텐츠 길이가 작을 경우 */
.viewport {height: calc(100vh - 126px); }
.viewport_m {height: calc(100vh - 126px); }

/* wrapper 클래스 설정 */
/* 기본 양옆 padding값 22px */
.wrapper {width: 100%; max-width: 768px; margin: 60px auto 0; background-color: #fff; font-family: 'noto_sans';}
/* .viewport_web {height: calc(100vh - 70px);} */

/* header */
header {position: fixed; top:0; left: 50%; width:100%; max-width:768px; transform: translateX(-50%); height: 60px; background-color: #fff; font-size: 18px; font-weight: 800; border-bottom: 1px solid var(--line); z-index: 100;}

.header_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header_title {
  width: max-content;
  position: absolute;
  top:50%;
  left:50%;
  font-weight: 600;
  font-size:20px;
  color:#1749C2;
  transform: translate(-50%, -50%);
}
.mhead {font-size:26px;}

.text_center { text-align: center;}

/* 서브 페이지 header */
header a {display: block; padding: 0 20px;}
header p {padding: 0 20px;}
header p img {cursor:pointer; display:block;}
header.enter_left a{position: absolute; left: 0;}
header.enter_right a{position: absolute; right: 0;}


.timepicker { font-family: 'noto_sans'; font-size:14px ; padding:10.5px 8px 10.5px 22px!important;}
.ui-corner-all {font-family: 'noto_sans'; font-size:14px ; padding:10.5px 8px 10.5px 8px!important; text-align:left;}
.ui-state-hover {background-color:#FFF!important; color:#4A9EFA!important; border-color:#4A9EFA!important;}
.hash_name::before {content:"# ";}
.d_none {display: none !important;}
.d_block {display: block !important;}

/* 하단 버튼 공통클래스 */
.btn_basic button {width: 100%; height: 50px; background-color:#1749C2; border-radius: 10px; color: #fff; font-size: 16px; font-weight: 700;}
.btn_basic.fran button {background-color:#1D65B1;}
.btn_basic.inactive button {background-color: var(--inactive);}
.btn_basic.connect {padding: 0 20px 30px;}
.btn_basic.connect button:first-child {margin-bottom: 10px;}

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
@media (max-width: 567px){
  .viewport_web {height: unset;}
}
@media (max-width: 468px){
  body {background-color: rgba(255,255,255,0);}
}

/*select*/
select { -webkit-appearance:none; -moz-appearance:none; appearance:none; background:url("../img/layout/svg/icon_arrow_down.svg") no-repeat 98% 50%/20px auto; background-size: 10px; color:#212121;}
option {color:#212121;}
/*select*/

/* btn */
.btn_pad_wrap{display:flex; padding:30px 0;}
.btn_pad_wrap .btn{margin-right:20px;}
.btn_pad_wrap .btn:last-child{margin-right:0;}
.btn{width:100%; height:52px; background-color:#EAECEF; border-radius:25px; font-size:16px; font-weight:700; color:#000;}
.btn_main{background-color:var(--main); color:#fff;}
.btn_border{background-color:transparent; border:1px solid var(--line);}
.btn_small{flex:none; width:98px; height:40px; margin-left:10px; background-color:var(--main); border-radius:4px; font-size:16px; font-weight:700; color:#fff;}
.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:#fff; z-index:999;}
.bottom_fixed .btn_pad_wrap{padding-top:0;}
.bg_keypad {background-color: var(--line);}
.unset_d {display:unset;}
.loding_splash img{display:block; position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); width:70%; max-width:375px;}
.w100 {width:100% !important;}
.cursor {cursor:pointer;}

.payment_input label {font-weight: 500; width:100%;}
.input_design {width: 100%; padding: 8px 16px; border-radius: 6px; border: 1px solid #c3c3c3; font-size: 14px; font-weight: 500; height:40px;}
select {outline: none; }

.wrap_full, .content_table_full { height: 100%; }
.wrap { min-height: 100%; width: 100%; max-width: 768px; margin: 0 auto; }
.wrap_h { min-height: 100%; width: 100%; max-width: 768px; margin: 0 auto; background: #fff; height:auto;}

.content_table { display: table; height: 100%; }
.content { width: 100%; padding: 70px 20px 0; background-color: #fff; }
.content_np { width: 100%; padding: 60px 0 0 ; background-color: #fff; }
.content_mp { width: 100%;  background-color: #fff; }
.content_table_row { display: table-row; }
.content_table_cell { display: table-cell; vertical-align: top; }
.content_table_cell_middle { display: table-cell; vertical-align: middle; }
.keypad_btn button {font-family: "poppins"; font-weight: 500; font-size:20px;}
.keypad_btn {border-top:1px solid #ededed;}
.error_m { font-size: 14px;  font-weight: 400; color: #E60023; padding-top: 6px;  display: inline-block;}

input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #fff inset ; -webkit-text-fill-color: #000; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; }

.fixed_table {table-layout: fixed;}
.swal2-shown {padding-right:0 !important;}

.loading{position:fixed; left:0; top:0; width:100%; height:100vh; background-color:#fff; z-index:11000;}
.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); 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:15px; font-weight:700;
  color:var(--sub);}
@keyframes loading{100%{transform:translate(-50%,-50%) rotate(360deg);}}
.swal2-title, .swal2-popup {padding:0 !important;}
.swal2-popup {width:  calc(100% - 40px) !important;max-width: 520px !important;min-width: 350px !important;}
.title_sweet {font-size:16px; border-bottom:1px solid var(--line);  padding:15px 24px; font-weight: 700;}
.desc_sweet {font-weight: 700; font-size:20px; color:var(--black);}
.desc_sweet_500 {font-weight:500; font-size:20px; color:var(--black);}
.swal2-styled.swal2-cancel {font-size:14px !important; border: 1px solid var(--line) !important; color: var(--black) !important; background-color: var(--white) !important;}
.swal2-actions:not(.swal2-loading) .swal2-styled:hover, .swal2-actions:not(.swal2-loading) .swal2-styled:active {background-image:none !important;}
.swal2-styled.swal2-confirm {font-size:14px !important;}
.swal2-styled.swal2-default-outline:focus {box-shadow: none !important;}

.swal2-actions {margin:12px 0 20px !important; }
.swal2-file:focus, .swal2-input:focus, .swal2-textarea:focus {box-shadow:none !important; border:1px solid var(--line) !important;}
.swal2-file, .swal2-input, .swal2-textarea {height:40px;border:1px solid var(--line) !important; box-shadow: none!important;}