/* COMMON SCSS */
@charset "UTF-8";

/* 
main color : #1D46B5
sub color : #9AC4E9
pc margin min size : 1140px
min width size : 800px
*/
/*Pretendard*/
@font-face {
  font-family: 'Pretendard';
  src: url('./font/Pretendard-Thin.woff') format('woff');
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./font/Pretendard-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./font/Pretendard-Light.woff') format('woff');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./font/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./font/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./font/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./font/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./font/Pretendard-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./font/Pretendard-Black.woff') format('woff');
  font-weight: 900;
  font-display: swap;
}
/*GmarketSans*/
@font-face {
  font-family: "GmarketSans";
  src: url("./font/GmarketSansTTFLight.ttf") format("truetype");
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "GmarketSans";
  src: url("./font/GmarketSansTTFMedium.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "GmarketSans";
  src: url("./font/GmarketSansTTFBold.ttf") format("truetype");
  font-weight: 600;font-display: swap;
}
body {
  min-width: 1400px;
}
:root {
  font-size: 62.5%;
  font-family: 'Pretendard', sans-serif;
}
#root {
  min-width: 1140px;
}
.sans {
  font-size: 62.5%;
  font-family: 'GmarketSans', sans-serif;
}
*:focus {
  outline: none;
}
* {
  margin: 0;
  padding: 0;
}
a,
a:hover,
a:link,
a:visited,
a:active {
  text-decoration: none;
}

b {
  color: #1D46B5;
}

section {
  height: auto;
  min-height: 500px;
}

dl,
ul,
li,
ol,
menu {
  list-style: none; /* 번호 안보이게 스타일 */
  padding: 0;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #1D46B5;
  opacity: 0.25;
  border: 2px solid transparent;
  border-radius: 10px;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #1D46B5;
  opacity: 0.5;
}

::selection {
  background-color: #1D46B5;
  color: white;
  text-shadow: none;
}

::-moz-selection {
  background: #1D46B5;
  color: white;
  text-shadow: none;
}

.container {
  width: 1140px;
  height: 100%;
  margin: auto;
  position: relative;
}

.btn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
  text-align: center;
  user-select: none;
  padding: 10px 0;
  border-radius: 20px;
  align-self: center;
  font-size: 1.7rem;
}

.btn-bg-blue-small {
  background-color: #1D46B5;
  color: white;
  width: 120px;
}

.btn-bg-gray-small {
  color: #1D46B5;
  background-color: #f2f2f2;
  width: 120px;
}

.btn-bg-darkgray-small {
  color: #1D46B5;
  background-color: #D3D4D4;
  width: 120px;
}

.square {
  border-radius: 10px;
}

.btn-bg-blue-normal {
  background-color: #1D46B5;
  color: white;
  width: 160px;
}

.os-select {
  width: 100%;
}
.os-select  > div {
    width: 50%;
}
.btn-bg-blue-qrcode {
  margin-top: 15px;
  background-color: #3A4CAE;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  width: 100%;
  height: 40px;
  /*padding: 22px;*/
  font-size: 25px;
  font-weight: bold;

}
.btn-bg-blue-qrcode-title {
  margin-top: 15px;
  background-color: #037CE0;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  width: 100%;
  height: 40px;
  /*padding: 22px;*/
  font-size: 25px;
  font-weight: bold;
}

.btn-bg-white-qrcode {
  margin-top: 15px;
  background-color: white;
  display: flex;
  color: black;
  border: 3px solid #037CE0;
  /*padding: 22px;*/
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  width: 100%;
  height: 54px;
  font-size: 25px;
  font-weight: bold;
}
.btn-bg-white-small {
  color: #1D46B5;
  background-color: white;
  width: 120px;
}
.btn-bg-white-normal {
  color: #1D46B5;
  background-color: white;
  width: 160px;
}

.btn-bg-white-big {
  color: #1D46B5;
  background-color: white;
  width: 380px;
}

.btn-bg-blue-big {
  background-color: #1D46B5;
  color: white;
  width: 380px;
}

.btn-bg-gray-normal {
  color: #1D46B5;
  background-color: #f2f2f2;
  width: 160px;
}

.btn-bd-blue-normal {
  color: #1D46B5;
  border: 2px solid #1D46B5;
  background-color: white;
  width: 160px;
}

.btn-bd-white-normal {
  color: white;
  border: 2px solid white;
  background-color: #1D46B5;
  width: 160px;
}

.highlight {
  font-weight: bold;
  background-color: #9AC4E9;
  color: #1D46B5;
  display: inline;
}

img,
fieldset {
  border: 0 none;
}

.ir_pm {
  display: block;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */
.ir_wa {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: -1;
  width: 100%;
  height: 100%;
} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 */
.ir_su {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */ /*# sourceMappingURL=reset.css.map */

/*@media (max-width: 1140px) {*/
/*  .container {*/
/*    width: 80%;*/
/*  }*/
/*} !*# sourceMappingURL=common.css.map *!*/

/* Button Hover */
.btn-bg-blue-small:hover,
.btn-bg-blue-normal:hover,
.btn-bg-blue-big:hover,
.btn-bd-white-normal:hover {
  background-color: white;
  color: #1D46B5;
}
.btn-bg-white-small:hover,
.btn-bg-gray-small:hover,
.btn-bg-darkgray-small:hover,
.btn-bg-white-normal:hover,
.btn-bg-white-big:hover,
.btn-bd-blue-normal:hover,
.btn-bg-gray-normal:hover {
  background-color: #1D46B5;
  color: white;
}
.btn-apply-sa {
  background-color: #1d4ba8;
  color: #ffffff;
  font-size: 2.5rem !important;
  padding: 10px;
  margin: 20px 0;
}
.view {
  display: block !important;
}
.qr-container {
  display: flex;
  justify-content: center;
  gap: 150px;
}

.qr-box {
  text-align: center;
  height: 325px;
}

.qr-title {
  font-weight: bold;
  font-size: 35px;
  margin-bottom: 20px;
}

.qr-image {
  width: 200px;
  height: 200px;
}

.qr-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px; /* QR과 오른쪽 영역 간격 */
}

.qr-left img.qr-code {
  width: 180px;
  height: 180px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
}

.qr-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px; /* 아이콘과 다운로드 버튼 간 간격 */
}

.qr-right img.qr-icon {
  width: 70px;
  height: auto;
}

.qr-right img.qr-download {
  width: 190px;
  height: auto;
  cursor: pointer;
  transition: 0.2s;
}

.modal-qrAndroid {
  position: fixed ;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1025px;
  height: 500px;
  z-index: 9100 ;
  background: #ffffff ;
  box-sizing: border-box;
  display: none;
  border-radius: 20px;
  border: 3px solid #037CE0;
  height: 550px;
}
.modal-footer {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-footer.padding-top-10 {
    padding-top: 10px;
}
.modal-fit {
    color: #707070;
    margin: 0 10px;
}
.modal-num {
    color: #707070;
}
.modal-footer div{
  margin: 20px;
}
.modal-background {
  display: none;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;height: 100%;
}
.modal-background.is-open {
  display: block;
}
.modal-background.is-open .modal {
  display: none;
}
.modal-background.is-open .modal.view {
  display: block;
}
.modal-background.is-open .modal.login.id-pw {
  display: block;
}
.btn-modal-close {
  background: url("/img/baseline-clear-24px.svg");
  position: absolute;
  right: 20px;
  top: 20px;
  width: 24px;
  height: 24px;
  border: 0;
  cursor: pointer;
}
.btn-qr-modal-close {
  background: url("/img/main/qr-clear.png");
  position: absolute;
  right: 25px;
  top: 25px;
  width: 50px;
  height: 50px;
  border: 0;
  cursor: pointer;
}
.modal {
  position: fixed ;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9100 ;
  background: #ffffff ;
  border: thin solid #D8D8D8;
  box-sizing: border-box;
  display: none;
}
.input-w30 {
  width: 30%;
}
.input-w40 {
  width: 40%;
}
.input-w50 {
  width: 50%;
}
.input-w100 {
  width: 100%;
}
.required {
  font-size: 1.4rem !important;
}
.h4-title {
  margin: 20px 0;
  color: #333333;
  font-size: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hasDatepicker {
  cursor: pointer;
}

.table-black {
  margin-top: 10px;
  font-size: 2rem;
}
.table-black tr {
  height: 76px;
}
.table-black th {
  font-size: 2rem;
  font-weight: 600;
}
.table-black thead th {
  border-bottom: 1px solid #111;
  padding: 15px 15px;
  color: #1d46b5;
  background: #f2f2f2;
}
.table-black tbody th {
  border-bottom: 1px solid #ddd;
  padding: 15px 15px;
  color: #1d46b5;
  background: #f3f4f5;
  text-align: left;
}
.table-black tbody th i {
  margin-right: 5px;
  color: #fc4747;
  padding-top: 5px;
}
.table-black td {
  border-bottom: 1px solid #ddd;
  padding: 15px 15px;
  text-align: center;
}
.table-black.left td {
  text-align: left;
}
.table-black td.td-left {
  text-align: left;
}
.table-black td.td-left a {
  color: #111;
  display: inline;
}

.table-black td .radio-arry {
  display: inline-block;
  margin-left: 15px;
}
.table-black td .radio-arry:first-child {
  margin-left: 0;
}
.table-black td .radio-arry input[type="radio"] {
  margin-right: 5px;
}

.qna-required-circle {
  background-color: #F06969;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
}
.input100 {
  width: 100%;
  font-size: 1.5rem;
}
select {
  font-size: 1.5rem;
}
.scrollbox {
  padding: 30px;
  color: #333333;
  overflow-y: auto;
  height: 200px;
  margin-top: 10px;
  font-size: 16px;
  background: #f2f2f2;
  line-height: 2;
}
.app_install_link {
  text-align: center;
  font-size: 2.5rem;
  color: #3A4CAE;
  font-weight: bold;
  padding: 10px
}
.qr_link {
  text-decoration: none;
  color: inherit;
}

.width_per_6 {
  width: 6%;
}
.width_per_7 {
  width: 7%;
}
.width_per_8 {
  width: 8%;
}
.width_per_15 {
  width: 15%;
}
.width_per_18 {
  width: 18%;
}
.width_per_20 {
  width: 20%;
}
.width_per_40 {
  width: 40%;
}
.width_per_45 {
  width: 45%;
}
.width_per_99 {
  width: 99%;
}
.width_per_100 {
  width: 100% !important;
}
.width_px_1 {
  width: 1px;
}
.width_px_50 {
  width: 50px;
}
.width_px_60 {
  width: 60px;
}
.width_px_80 {
  width: 80px;
}
.width_px_110 {
  width: 110px;
}
.width_px_150 {
  width: 150px;
}
.width_px_200 {
  width: 200px;
}
.width_px_220 {
  width: 220px;
}

.height_per_100 {
  height: 100%;
}
.height_px_60 {
  height: 60px;
}
.height_px_70 {
  height: 70px;
}
.height_px_80 {
  height: 80px;
}
.height_px_150 {
  height: 150px;
}
.height_px_180 {
  height: 180px;
}
.height_px_250 {
  height: 250px;
}

.margin_px_20 {
  margin: 20px;
}
.margin_l_px_25 {
  margin-left: 25px;
}
.margin_r_px_30 {
  margin-right: 30px;
}
.margin_t_px_5 {
  margin-top: 5px;
}
.margin_t_px_20 {
  margin-top: 20px;
}
.margin_t_px_30 {
  margin-top: 30px;
}
.margin_t_px_50 {
  margin-top: 50px;
}
.margin_b_px_0 {
  margin-bottom: 0;
}
.margin_b_px_70 {
  margin-bottom: 70px;
}

.padding_px_10 {
  padding: 10px;
}

.gap_px_5 {
  gap: 5px;
}
.gap_px_10 {
  gap: 10px;
}
.gap_px_15 {
  gap: 15px;
}
.gap_px_20 {
  gap: 20px;
}
.gap_px_30 {
  gap: 30px;
}

.inline {
  display: inline;
}
.pointer {
  cursor: pointer;
}

.font_center {
  text-align: center;
}
.font_size_30 {
  font-size: 30px;
}
.font_introduce {
  font-size: 1.5rem !important;
}
.font_qrtitle {
  font-size: 2.4rem !important;
}
.font_size_tuto_1 {
  font-size: 1.2rem;
}
.font_size_tuto_2 {
  font-size: 1.4rem;
}
.font_size_tuto_3 {
  font-size: 1.6rem;
}
.font_size_tuto_4 {
  font-size: 4rem;
}
.font_bold {
  font-weight: bold;
}
.font_color_0e3baa {
  color: #0e3baa !important;
}
.font_color_027cdf {
  color: #027cdf !important;
}
.font_color_grey {
  color: grey !important;
}
.font_color_black {
  color: black !important;
}

.absolute {
  position: absolute;
}
.top_back {
  top: -9999px;
}
.block {
  display: block;
}
.none {
  display: none;
}
.flex {
  display: flex;
}
.flex_col {
  flex-direction: column;
}
.flex_start {
  justify-content: flex-start;
}
.flex_center {
  justify-content: center; align-items: center;
}
.align_center {
  align-items: center;
}
.space_between {
  justify-content: space-between;
}

.background_color_white {
  background-color: white;
}
.background_color_custom_1 {
  background-color: rgb(255 148 76);
}
.border_rad_px_2 {
  border-radius: 2px;
}
.border_rad_px_15 {
  border-radius: 15px;
}
.border_color_white {
  border: white;
}
.border_color_e2e2e2 {
  border: 1px solid #e2e2e2;
}
.border_color_custom_1 {
  border: 1px solid rgb(255 148 76);
}