@charset "utf-8";
/************************************
 COMMON.css __&. - 2024.04 
************************************/

/*ROOT*/
:root {
	/*color*/
	--color-main: #08055E;
	--color-sub: #2C85FF;
	--color-red: #FF2332;
	--color-gray100: #F4F4F4;
	--color-gray200: #dddddd;
	--color-gray300: #959595;
	--txt-color-def:#333;
	--bg-color:#F6F9FF;
	--bg-color200:#dae0ed;
	--shadow-color:rgba(31,94,178,0.14);
	/*font-weight*/
	--txt-thin: 100;
	--txt-light: 300;
	--txt-regular: 400;
	--txt-medium: 500;
	--txt-bold: 700;
	--txt-extrabold: 800;
}

/* 초기화 */
html {font-size:2.66667vw; color:var(--txt-color-def); background:#fff;}
body {max-width:720px; min-width:280px;margin:0 auto;padding:0;font-size:2.66667vw; color:var(--txt-color-def); font-family: 'Apple SD Gothic Neo', Pretendard,'Noto Sans KR', 'Malgun Gothic', sans-serif;color:var(--txt-color-def); background:var(--bg-color); box-sizing:border-box; font-weight:var(--txt-medium);}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family: 'Apple SD Gothic Neo', Pretendard,'Noto Sans KR', 'Malgun Gothic', sans-serif;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, ol, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family: 'Apple SD Gothic Neo', Pretendard,'Noto Sans KR', 'Malgun Gothic', sans-serif;font-size:1em; border:0;}
input[type="submit"] {cursor:pointer}
button {cursor:pointer;transition:all 0.3s}

p {margin:0;padding:0;word-break:break-all}
hr  {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:var(--txt-color-def);text-decoration:none; transition:all 0.3s}
br {font-size:0;}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="submit"]  { 
	-webkit-appearance: none; /*브라우저 스타일 초기화*/
    -moz-appearance: none; /*브라우저 스타일 초기화*/
    appearance: none; /*브라우저 스타일 초기화*/
	font-family:'Apple SD Gothic Neo', Pretendard,'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
	-webkit-appearance: none; /*브라우저 스타일 초기화*/
    -moz-appearance: none; /*브라우저 스타일 초기화*/
    appearance: none; /*브라우저 스타일 초기화*/
}
input::placeholder,
textarea::placeholder {
	color:var(--color-gray600);
	font-size:1.2rem;
}
textarea, select, button {
	-webkit-appearance: none; /*브라우저 스타일 초기화*/
    -moz-appearance: none; /*브라우저 스타일 초기화*/
    appearance: none; /*브라우저 스타일 초기화*/
	font-family:'Apple SD Gothic Neo', Pretendard,'Noto Sans KR', 'Malgun Gothic', sans-serif;
	background:none;
	color:var(--txt-color-def);
}
img {
	max-width:100%;
	height:auto;
}
.sound_only {
	display: inline-block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0;
    line-height: 0;
    border: 0 !important;
    overflow: hidden !important;
}
@media screen and (min-width:400px) {
	html, body {
		font-size:11px;
	}
}


/* COMMON */
html {
  scroll-behavior: smooth;
}


/*TEXT-ALIGN*/
.align_cnt {
	text-align:center;
}
.align_left {
	text-align:left;
}
.align_right {
	text-align:right;
}

/*FLEX*/
.flex_nml {
	display:flex;
}
.flex_btw {
	display:flex;
	justify-content:space-between;
}
.flex_cnt {
	display:flex;
	justify-content:center;
}
.flex_ard {
	display:flex;
	justify-content:space-around;
}
.flex_end {
	display:flex;
	justify-content:flex-end;
}
.flex_col {
	flex-flow:column;
}
.flex_wrap {
	flex-wrap:wrap;
}
.items_base {
	align-items:baseline;
}
.items_str {
	align-items:start;
}
.items_cnt {
	align-items:center;
}
.items_end {
	align-items:end;
}


/*HEADER*/
header {
	position:fixed;
	top:0;
	left:0;
	right:0;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	max-width:720px;
	height:5rem;
	padding:0 1.6rem;
	margin:0 auto;
	background:#fff;
	gap:1rem;
	z-index:99999;
}


/*SCROLL CUSTOM*/

::-webkit-scrollbar {
	width:1rem;		
	height:1rem;
	background-color:transparent;
}
::-webkit-scrollbar-thumb {
	width:1rem;		
	border-radius:5em;
    background-clip: padding-box;
    border:2px solid transparent;
	background-color:var(--color-gray200);
}
::-webkit-scrollbar-track {
	width:1rem;		
	background-color:transparent;		
} 

/*MAIN*/
main {
	max-width:100%;
	min-width:260px;
	min-height:100vh;
	min-height: calc(var(--vh, 1vh) * 100);
	padding-top:5rem;
	padding-left:1.6rem;
	padding-right:1.6rem;
} 
.comm_wrap {
	padding:3rem 1.4rem 0;
}
.comm_wrap article {
	margin:0 0 3rem 0;
	gap:1rem;
}
.comm_wrap article h2 {
	font-size:1.6rem;
}
@media screen and (max-width:400px) {
	.comm_wrap {
		padding-left:0;
		padding-right:0;
	}
}

/*FOOTER*/
footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width:100%;
	max-width:720px;
	margin:0 auto;
	padding:0 3rem;
	background:#fff;
	z-index: 9999;
}
footer nav {
	display: flex;
	justify-content: space-between;
  align-items: center;
	height:6.6rem;
}
footer nav a {
	display:flex;
	flex-flow:column;
	align-items:center;
  justify-content: center;
	width:25%;
	height:100%;
	text-align:center;
}
footer nav a span {
	display:block;
	margin-top:0.5em;
	font-size:1.2rem;
	color:var(--color-gray300);
}
footer nav a.on span {
	color:var(--color-main);
}