@font-face { font-family: 'yg-jalnan'; src: url('/css/noonfonts/JalnanOTF00.woff') format('woff'); font-weight: normal; font-style: normal; }


a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}[hidden]{display:none}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

img {
	pointer-events : none;
	-webkit-user-select: none !important;
	-moz-user-select: -moz-none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}
a, button {
    all: unset;
	cursor:pointer;
	color:#424242;
	font-size:16px;
	display:block;
	text-decoration:none;
	background: transparent;
	border:none;
}

select { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: 'Pretendard';}
select:focus,
select:active{outline:0;}
select::-ms-expand { display: none; }

input{font-family: 'Pretendard';}
input::placeholder{font-family: 'Pretendard'; font-weight:900; color:#d4d4d4; font-size:14px;}
input[type="text"],
input[type="tel"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea{border-style:none; -webkit-border-radius:0; -webkit-appearance:none; font-family: 'Pretendard';}
input:focus,
textarea:focus {outline:none;}


.ft-color01{color:#083b8e}
.ft-color02{color:#1169f5}
.ft-color03{color:var(--point_color)}

.bg-color01{background-color:#083b8e}
.bg-color02{background-color:#1169f5}
.bg-color03{background-color:var(--point_color)}


/*  체크박스 */
	.cbx {     
		margin: auto;
		-webkit-user-select: none;
		user-select: none;
		cursor: pointer;

		width:auto!important;
		margin: 0 10px 0 0!important;
		display: inline-block!important;
	}
	.cbx span {
		display: inline-block;
		vertical-align: middle;
		transform: translate3d(0, 0, 0);
	}
	.cbx span:first-child {
		position: relative;
		width: 18px;
		height: 18px;
		border-radius: 3px;
		transform: scale(.8);
		vertical-align: middle;
		border: 1px solid #9098A9;
		transition: all 0.2s ease;
	}
	.cbx span:first-child svg {
		position: absolute;
		top: 3px;
		left: 2px;
		fill: none;
		stroke: #FFFFFF;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-dasharray: 16px;
		stroke-dashoffset: 16px;
		transition: all 0.3s ease;
		transition-delay: 0.1s;
		transform: translate3d(0, 0, 0);
	}
	.cbx span:first-child:before {
		content: "";
		width: 100%;
		height: 100%;
		background: var(--primary-color);
		display: block;
		transform: scale(0);
		opacity: 1;
		border-radius: 50%;
	}
	/* .cbx span:last-child {
		padding-left: 2px;
	} */
	.cbx:hover span:first-child {
		border-color: var(--primary-color);
	}

	.privacy-agree-popup:checked + .cbx span:first-child {
		background: var(--primary-color);
		border-color: var(--primary-color);
		animation: wave 0.4s ease;
	}
	.privacy-agree-popup:checked + .cbx span:first-child svg {
		stroke-dashoffset: 0;
	}
	.privacy-agree-popup:checked + .cbx span:first-child:before {
		transform: scale(3.5);
		opacity: 0;
		transition: all 0.6s ease;
	}

	@keyframes wave {
		50% {
			transform: scale(0.9);
		}
	}
				

/* toggle-control */
	.toggle_btn_wrap{display:flex; margin-bottom:20px;}
	.toggle-control {
		display: block;
		width:auto;
		padding-right: 40px;
		margin-right: 40px;
		position: relative;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.toggle-control input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}
	.toggle-control input:checked ~ .control {
		background-color: var(--point_color);;
	}
	.toggle-control input:checked ~ .control:after {
		left: 55px;
	}
	.toggle-control .control {
		position: absolute;
		top: -17px;
		right:-40px;
		height: 50px;
		width: 100px;
		border-radius: 25px;
		background-color: darkgray;
		transition: background-color 0.15s ease-in;
		transform: scale(.4);
	}
	.toggle-control .control:after {
		content: "";
		position: absolute;
		left: 5px;
		top: 5px;
		width: 40px;
		height: 40px;
		border-radius: 25px;
		background: white;
		transition: left 0.15s ease-in;
	}    


/* 라디오버튼 */
	.type_radio {
		margin: 16px 0;
		display: block;
		cursor: pointer;
    }
    .type_radio input {
    	display: none;
    }
    .type_radio input + span {
		line-height: 16px;
		height: 16px;
		padding-left: 16px;
		display: block;
		position: relative;
    }
    .type_radio input + span:not(:empty) {
    	padding-left: 20px;
    }
    .type_radio input + span:before, .type_radio input + span:after {
		content: "";
		width: 16px;
		height: 16px;
		display: block;
		border-radius: 50%;
		left: 0;
		top: 0;
		position: absolute;
    }
    .type_radio input + span:before {
		background: #e3d8d1;
		transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2);
    }
    .type_radio input + span:after {
		background: #fff;
		transform: scale(0.78);
		transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4);
    }
    .type_radio input:checked + span:before {
		transform: scale(1.04);
		background: #ff8d61;
    }
    .type_radio input:checked + span:after {
		transform: scale(0.4);
		transition: transform 0.3s ease;
    }
    .type_radio:hover input + span:before {
    	transform: scale(0.92);
    }
    .type_radio:hover input + span:after {
    	transform: scale(0.74);
    }
    .type_radio:hover input:checked + span:after {
    	transform: scale(0.4);
    }

@media all and (max-width:650px) {
	.toggle_btn_wrap{display:block; width: 65%;}
	.toggle-control{margin-bottom: 10px;}
	.toggle-control .control{right:initial; left:40px; top:-20px;}
}