@charset "UTF-8";
/* font */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 300;
	src: url('../font/NotoSansKR-Light.woff') format('woff');
}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 400;
	src: url('../font/NotoSansKR-Regular.woff') format('woff');
}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 500;
	src: url('../font/NotoSansKR-Medium.woff') format('woff');
}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 700;
	src: url('../font/NotoSansKR-Bold.woff') format('woff');
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	src: url('../font/Roboto-Light.woff') format('woff');
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url('../font/Roboto-Regular.woff') format('woff');
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	src: url('../font/Roboto-Medium.woff') format('woff');
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	src: url('../font/Roboto-Bold.woff') format('woff');
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 800;
	src: url('../font/Roboto-Black.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	src: url('../font/Pretendard-Thin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'Pretendard';
	src: url('../font/Pretendard-ExtraLight.woff') format('woff');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'Pretendard';
	src: url('../font/Pretendard-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Pretendard';
	src: url('../font/Pretendard-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Pretendard';
	src: url('../font/Pretendard-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Pretendard';
	src: url('../font/Pretendard-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Pretendard';
	src: url('../font/Pretendard-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Pretendard';
	src: url('../font/Pretendard-ExtraBold.woff') format('woff');
	font-weight: 800;
	font-style: normal;
}

@font-face {
	font-family: 'Pretendard';
	src: url('../font/Pretendard-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
}

.Roboto {
	font-family: 'Roboto', sans-serif;
}

/* color */
:root {
	--gray-50: #F3F3F3;
	--gray-100: #DDD;
	--gray-200: #C6C6C6;
	--gray-300: #B0B0B0;
	--gray-400: #9B9B9B;
	--gray-500: #868686;
	--gray-600: #727272;
	--gray-700: #5E5E5E;
	--gray-800: #4B4B4B;
	--gray-900: #393939;
	--white-0: #FFF;
	--white-100: #F8F8F8;
	--white-200: #F6F6F6;
	--white-300: #F4F4F4;
	--win-purple-50: #F5F5FF;
	--win-purple-100: #D3D0FF;
	--win-purple-200: #B8B0FF;
	--win-purple-300: #9F90FF;
	--win-purple-400: #8871FE;
	--win-purple-500: #7252EB;
	--win-purple-600: #5E34D1;
	--win-purple-700: #4A17B0;
	--win-purple-800: #36008A;
	--win-purple-900: #220061;
	--win-yellow-50: #FFF9EB;
	--win-yellow-100: #FFEEC2;
	--win-yellow-200: #FFE399;
	--win-yellow-300: #FFD770;
	--win-yellow-400: #FFCC47;
	--win-yellow-500: #FFC11F;
	--win-yellow-600: #FFB800;
	--win-yellow-700: #CC9300;
	--win-yellow-800: #A37600;
	--win-yellow-900: #7A5800;
	--alert-red-50: #FFEBE7;
	--alert-red-100: #FFC2B8;
	--alert-red-200: #FF988B;
	--alert-red-300: #FF6E62;
	--alert-red-400: #FF2F2F;
	--alert-red-500: #DD000E;
	--alert-red-600: #C10000;
	--alert-red-700: #A00000;
	--alert-red-800: #7C0000;
	--alert-red-900: #500;
	--alert-blue-50: #E7F2FF;
	--alert-blue-100: #B9D7FF;
	--alert-blue-200: #8EBAFF;
	--alert-blue-300: #679CFF;
	--alert-blue-400: #457CFF;
	--alert-blue-500: #2A5DFF;
	--alert-blue-600: #163EEC;
	--alert-blue-700: #0E27DA;
	--alert-blue-800: #07009F;
	--alert-blue-900: #040071;
}

/* common */
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	overflow-x: scroll;
}

html,
body,
th,
td,
input,
select,
textarea,
button {
	font-family: "Pretendard", sans-serif;
	font-weight: 400;
	font-size: 15px;
	color: var(--gray-900, #393939);
	line-height: 1.4;
	letter-spacing: normal;
	word-break: keep-all;
}

html,
body {
	-webkit-touch-callout: none;
}

fieldset,
img {
	border: 0;
}

dl,
ul,
ol,
menu,
li {
	list-style: none;
}

input,
select,
textarea,
button {
	vertical-align: middle;
	outline: none;
}

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

a {
	color: var(--gray-900, #393939);
	text-decoration: none;
}

address,
caption,
cite,
code,
dfn,
em,
var {
	font-style: normal;
	font-weight: normal;
}

input[type='button'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}

select::-ms-expand {
	display: none;
}

::-webkit-scrollbar {
	display: none;
}

textarea {
	resize: none;
}

body {
	position: relative;
}

table {
	padding: 0;
	border: 0;
	border-spacing: 0px;
	border-collapse: collapse;
}

body.dim {
	overflow: hidden !important;
	-ms-touch-action: none;
	touch-action: none;
	overscroll-behavior-y: contain;
}

body.dim::after {
	content: '';
	width: 100vw;
	height: 100%;
	position: fixed;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	z-index: 100;
	max-width: 768px;
	background: rgba(0, 0, 0, 0.5);
}

/*ios에서 인풋들 모서리 라운딩과 상단 그림자 제거*/
input,
textarea,
select {
	border-radius: 0;
	-webkit-appearance: none;
}

* {
	-webkit-tap-highlight-color: transparent;
}

/* ios font-size 16px 미만일때 포커스시 줌되는 현상 수정 */
/* 텍스트 선택, 드래그, 더블클릭 막기 :not()은 예외처리 */
*:not(input, textarea) {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.user_select_text {
	user-select: all;
	-webkit-user-select: text;
	-webkit-user-select: all;
	-moz-user-select: all;
	-ms-user-select: all;
}

/* global */
.show {
	display: block !important;
}

.hide {
	display: none !important;
}

.scrollX {
	overflow: hidden !important;
	-ms-touch-action: none;
	touch-action: none;
	overscroll-behavior-y: contain;
}

/* select box custom */
select {
	background: #f0f0f0 url('../img/select_down.png') no-repeat right 6.4vw center;
	width: 100%;
	height: 13.33vmin;
	max-height: 50px;
	padding: 0 24px;
	font-weight: 400;
	border: none;
	border-radius: 25px;
	background-size: 14px;
}

select.type01 {
	background-color: #e6e6e6;
}

/* check box custom */
.chk input[type='checkbox'] {
	display: none !important;
}

.chk input[type='checkbox'] + label {
	display: block;
	padding-left: 28px;
	line-height: 18px;
	background: url('../img/chk_off.png') no-repeat;
	background-size: 18px;
	background-position: left center;
	color: #000;
}

.chk input[type='checkbox']:checked + label {
	background: url('../img/chk_on.png') no-repeat;
	background-size: 18px;
	background-position: left center;
}

/* radio box custom */
.radio input[type='radio'] {
	display: none !important;
}

.radio input[type='radio'] + label {
	display: block;
	width: 100%;
	background: url('../img/radio_off.png') no-repeat center right;
	background-size: 18px;
}

.radio input[type='radio']:checked + label {
	background: url('../img/radio_on.png') no-repeat center right;
	background-size: 18px;
}

input[type='radio'].radio_btn + label {
	display: block;
	padding: 17px 0 15px 48px;
	width: 100%;
	background: url('../img/radio_sm_off.png') no-repeat left center / 16px;
}

input[type='radio']:checked.radio_btn + label {
	background: url('../img/radio_sm_on.png') no-repeat left center / 16px;
}

input[type='radio']:disabled.radio_btn + label {
	background: url('../img/radio_sm_disable.png') no-repeat left center / 16px;
}

input[type='checkbox'].check_fill_lg + label {
	display: block;
	padding-left: 36px;
	line-height: 24px;
	background: url('../img/check_fill_off.png') no-repeat left 8px / 24px;
	color: var(--gray-900);
}

input[type='checkbox']:checked.check_fill_lg + label {
	background: url('../img/check_fill_on.png') no-repeat left 8px / 24px 24px;
}

input[type='checkbox'].check_line_md + label,
input[type='radio'].check_line_md + label {
	display: block;
	padding-left: 28px;
	background: url('../img/check_line_off.png') no-repeat left 4px / 20px 20px;
	color: var(--gray-500);
}

input[type='checkbox']:checked.check_line_md + label,
input[type='radio']:checked.check_line_md + label {
	background: url('../img/check_line_on.png') no-repeat left 4px / 20px 20px;
}

input[type='checkbox']:disabled.check_line_md + label,
input[type='radio']:disabled.check_line_md + label {
	background: url('../img/check_line_disabled.png') no-repeat left 4px / 20px 20px;
}

label:has(input[type='radio'].radio_btn_text) {
	display: block;
	height: 44px;
	line-height: 44px;
	text-align: center;
	border-radius: 12px;
	background: var(--white-200);
	border: 1.5px solid transparent;
}

label:has(input[type='radio'].radio_btn_text:checked) {
	background: var(--win-purple-50);
	border: 1.5px solid var(--win-purple-300);
}

label:has(input[type='radio'].radio_btn_text) span {
	font-size: 15px;
	font-weight: 500;
	color: var(--gray-900);
}

label:has(input[type='radio'].radio_btn_text:checked) span {
	font-weight: 600;
	color: var(--win-purple-600);
}

.loading-wrapper {
	display: none;
	height: calc(100vh);
	width: 100vw;
	z-index: 998;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 1);
}

.loading-circle {
	z-index: 999;
}

.loading_module {
	position: fixed;
	top: 50%;
	left: 0;
	width: 100%;
}
.loading_module .graph {
	position: relative;
	width: 120px;
	height: 7px;
	margin: 0 auto;
	background: #ebebeb;
	border-radius: 7px;
	overflow: hidden;
	margin-bottom: 18px;
}
.loading_module .graph span {
	position: absolute;
	top: 0;
	display: block;
	width: 0;
	left: 0;
	height: 100%;
	background: #6c06c4;
	border-radius: 7px;
}
.loading_module .loading_txt {
	text-align: center;
	line-height: 17px;
	font-size: 14px;
	color: #3f3f3f;
	font-weight: 400;
	letter-spacing: -0.05em;
}
.loading_module .loading_txt em {
	display: block;
	color: #6c06c4;
}

.loading_module2 {
	position: fixed;
	top: 50%;
	left: 0;
	width: 100%;
	text-align: center;
	margin-top: -106px;
}
.loading_module2 .circle {
	position: relative;
	width: 162px;
	height: 162px;
	margin: 0 auto;
	display: none;
}
.loading_module2 canvas {
	border-radius: 81px;
	overflow: hidden;
}
.loading_module2 dl {
	position: absolute;
	top: 162px;
	left: 0;
	width: 100%;
}
.loading_module2 dl dt {
	font-size: 14px;
	color: #a9a9a9;
	padding: 10px 0 6px;
}
.loading_module2 dl dd {
	font-size: 14px;
	color: #262626;
	font-weight: 600;
}

/* Firefox에 대한 스탬퍼 숨김 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox 이외의 브라우저에 대한 스탬퍼 숨김 */
input[type="number"] {
	-moz-appearance: textfield;
}
/*
*   last update
*   2022.05.12(prettier)
*/

/*toast*/
p.toast_normal {
	z-index: 5;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 72px;
	padding: 16px;
	text-align: left;
	line-height: 20px;
	font-size: 14px;
	font-weight: 500;
	word-break: break-all;
	color: #fff;
	border-radius: 12px;
	background: var(--gray-500);
	width: calc(100% - 32px);
	max-width: calc(768px - 32px);
}

p.toast_icon {
	padding: 18px 16px 18px 52px;
}

p.toast_btn {
	min-height: 48px;
	padding-right: 92px;
}

p.toast_red_alert {
	color: var(--alert-red-400);
	background: var(--alert-red-50);
}

p.toast_blue_alert {
	color: var(--alert-blue-600, #163EEC);
	background: var(--alert-blue-50, #E7F2FF);
}

span.icon {
	background: url('../img/ico/check_circle_w.png') no-repeat;
	background-size: 24px 24px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 16px;
	display: inline-block;
	margin-right: 12px;
	width: 24px;
	height: 24px;
}
span.icon.notice {
	background: url('../img/ico/notice_circle_w.png') no-repeat;
	background-size: 24px 24px;
}

p.toast_red_alert span.icon {
	background: url('../img/ico/check_circle_r.png') no-repeat;
	background-size: 24px 24px;
}

p.toast_blue_alert span.icon {
	background: url('../img/ico/check_circle_b.png') no-repeat;
	background-size: 24px 24px;
}

button.read_btn {
	display: block;
	position: absolute;
	z-index: 4;
	top: 50%;
	transform: translateY(-50%);
	right: 16px;
	width: 64px;
	height: 32px;
	line-height: 32px;
	font-size: 12px;
	text-align: center;
	border-radius: 6px;
	background-color: var(--gray-300);
	color: #fff;
}

/* 애니메이션 check icon */

.check_icon_box {
	display: block;
	margin-bottom: 16px;
}

.check_icon_box .icon {
	position: relative;
	margin: 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	animation: wrap 0.3s ease-in-out forwards;
	animation-delay: 0.3s;
	transform: scale(0);
}

.check_icon_box .icon::before,
.check_icon_box .icon::after {
	content: "";
	position: absolute;
	background-color: var(--white-0);
	width: 0;
	height: 3px;
	border-radius: 2px;
	transform-origin: left;
	animation-duration: 0.2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.check_icon_box .icon::before {
	top: 31px;
	left: 21px;
	transform: rotate(42deg);
	animation-name: left;
	animation-delay: 0.6s;
}

.check_icon_box .icon::after {
	top: 40px;
	left: 29.2px;
	transform: rotate(-45deg);
	animation-name: right;
	animation-delay: 0.7s;
}

.form_control {
	display: block;
	padding: 0 16px;
	width: 100%;
	height: 56px;
	border-radius: 12px;
	border: 2px solid var(--gray-50);
	font-size: 15px;
	font-weight: 600;
}

@keyframes wrap {
	0% {
		background-color: transparent;
		transform: scale(0);
	} 100% {
		  background-color: var(--win-purple-600);
		  transform: scale(1);
	  }
}

@keyframes left {
	0% {
		width: 0;
	} 100% {
		  width: 13px;
	  }
}

@keyframes right {
	0% {
		width: 0;
	} 100% {
		  width: 23px;
	  }
}

/* swiper 공용 */
.swiper-container {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	list-style: none;
	padding: 0;
	z-index: 1;
}
.swiper-container .swiper-wrapper,
.swiper .swiper-wrapper {
	height: auto;
}