@charset "utf-8";

/* RESET */
html {font-size:10px; color:var(--txt-color-def); background:#fff;}
body {margin:0 auto;padding:0 5rem;font-size:10px; color:var(--txt-color-def); font-family: Pretendard, 'Apple SD Gothic Neo','Noto Sans KR', 'Malgun Gothic', sans-serif;background:#fff; box-sizing:border-box;
		transition:all 0.3s; }
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:Pretendard, 'Apple SD Gothic Neo',  '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:Pretendard, 'Apple SD Gothic Neo',  '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}
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;
}
code {
	-webkit-appearance: none; /*브라우저 스타일 초기화*/
    -moz-appearance: none; /*브라우저 스타일 초기화*/
    appearance: none; /*브라우저 스타일 초기화*/
	font-family:Pretendard, 'Apple SD Gothic Neo',  'Noto Sans KR', 'Malgun Gothic', sans-serif;
	font-weight: var(--txt-regular);
	color:var(--color-gray-900);
}
pre {
	overflow-x:auto;
	white-space: pre-line;
	-webkit-appearance: none; /*브라우저 스타일 초기화*/
    -moz-appearance: none; /*브라우저 스타일 초기화*/
    appearance: none; /*브라우저 스타일 초기화*/
	font-family:Pretendard, 'Apple SD Gothic Neo',  'Noto Sans KR', 'Malgun Gothic', sans-serif;
	color:var(--color-gray-900);
}
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:Pretendard, 'Apple SD Gothic Neo',  'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
input[type=text]:focus,
input[type=password]:focus, 
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,select:focus {
	-webkit-appearance: none; /*브라우저 스타일 초기화*/
    -moz-appearance: none; /*브라우저 스타일 초기화*/
    appearance: none; /*브라우저 스타일 초기화*/
		box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2)
}
input::placeholder,
textarea::placeholder {
	font-size:1.6rem;
	color:var(--color-gray-500);
}
textarea, select, button {
	-webkit-appearance: none; /*브라우저 스타일 초기화*/
    -moz-appearance: none; /*브라우저 스타일 초기화*/
    appearance: none; /*브라우저 스타일 초기화*/
	font-family:Pretendard, 'Apple SD Gothic Neo',  '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 (max-width:1500px) {
	html,body {
		font-size:0.6vw;
	}
	body {
		padding:0 3rem;
	}
}
@media screen and (max-width:960px) {
	html,body {
		font-size:0.75vw
	}
}
@media screen and (max-width:767px) {
	html,body {
		font-size:2vw
	}
	body {
		padding:0 1rem calc(8.5rem + env(safe-area-inset-bottom)) 1rem;
	}
}

/* BASIS */
html {
  scroll-behavior: smooth;
}
body.no_scroll_body {
    position: relative;
    overflow: hidden;
}

/*HIDE&SHOW*/
@media screen and (min-width:768px) {
	.m_item {
		display:none !important;
	}
}
@media screen and (max-width:767px) {
	.pc_item {
		display:none !important;
	}
}

/*COLOR*/
.color_main {
	color:var(--color-main);
}
.color_point {
  color:var(--color-point);
}
.color_sub_point {
  color:var(--color-sub-point);
}
.color_red {
	color:var(--color-red);
}


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

/*FLEX*/
.flex_nml {
	display:-ms-flexbox;
	display:-webkit-flexbox;
	display:flex;
}
.flex_inline {
	display:inline-flex;
}
.flex_btw {
	display:-ms-flexbox;
	display:-webkit-flexbox;
	display:flex;
	justify-content:space-between;
}
.flex_cnt {
	display:-ms-flexbox;
	display:-webkit-flexbox;
	display:flex;
	justify-content:center;
}
.flex_ard {
	display:-ms-flexbox;
	display:-webkit-flexbox;
	display:flex;
	justify-content:space-around;
}
.flex_end {
	display:-ms-flexbox;
	display:-webkit-flexbox;
	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;
}

/*INPUT CUSTOM*/
input.input_cst {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 1.25em 1em;
	font-size: 1.5rem;
	font-weight: var(--txt-medium);
	border:1px solid transparent;
	background:#fff;
	border-radius: 0.5rem;
}
input.input_cst:focus {
	/*브라우저 스타일 초기화*/
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-color: var(--color-main);
	outline: none;
}
input.input_cst.readonly,
input.input_cst.readonly:focus,	
input.input_cst:read-only:focus {	
	border-color: transparent;
	box-shadow:none;
	cursor:default;
}
input.input_cst:disabled {
	border:1px solid var(--color-gray-300);
	background-color:transparent;
}
@media screen and (max-width:767px) {
	input.input_cst {
		padding:1.5ex 1ex;
	}
}

/*RADIO CUSTOM**/
.radio_cst input[type="radio"]{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: absolute;
	left: 0;
	opacity: 0;
	height: 0;
	width: 0;
	font-size: 0;
}
.radio_cst label {
	cursor:pointer;
}

/*CHECKBOX CUSTOM**/
.check_cst input[type="checkbox"]{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: absolute;
	left: 0;
	opacity: 0;
}
.check_cst label {
	cursor:pointer;
}


/*SELECT CUSTOM**/
.select_cst {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}


/*WIDTH & HEIGHT SIZE*/
.w10 {
  width:10%;
}
.w20 {
  width:20%;
}
.w30 {
  width:30%;
}
.w40 {
  width:40%;
}
.w50 {
  width:50%
}
.w60 {
  width:60%;
}
.w70 {
  width:70%;
}
.w80 {
  width:80%;
}
.w90 {
  width:90%;
}
.w100 {
	width:100%;
}
.h100 {
	height:100%;
}


/*BTN*/
.btn {
	display:inline-block;
	padding: 1em 0;
	text-align:center;
	font-size: 1.8rem;
	font-weight:var(--txt-medium);
	border-radius: 0.5rem;
	border:1px solid transparent;
}
.btn_small {
	width:26rem;
	font-size: 1.6rem;
}
.btn_main {
	color: #fff;
	background: var(--color-main);
	border:1px solid transparent;
}
.btn_point {
	color: #fff;
	background: var(--color-point);
	border:1px solid transparent;
}
.btn_point_line {
	color: var(--color-point);
	background: #fff;
	border:1px solid var(--color-point);
}
	.btn_point_line:hover {		
		color: #fff;
		background: var(--color-point);
	}
.btn_gray_line {
	color: var(--color-gray-900);
	background: #fff;
	border:1px solid var(--color-gray-300);
}
.btn_red {
	color: #fff;
	background: var(--color-red);
	border:1px solid transparent;
}
.btn_ani {
	position:relative;
	z-index:1;
	overflow:hidden;
}
	.btn_ani:after {	
		content: "";
		position: absolute;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 0;
		background-color: var(--color-main);
		transition: all 0.5s ease;
		z-index: -1;
	}
		.btn_ani.btn_black:after {
			background-color:#fff;
		}
    .btn_ani.btn_main:after {
      background-color: var(--color-point);
    } 
	.btn_ani:hover {
		color:#fff !important;
		border-color: var(--color-main);
	}
		.btn_ani.btn_black:hover {
			color:var(--txt-color-def);;
		}
    .btn_ani.btn_main:hover {
      border-color: var(--color-point);
    } 
	.btn_ani:hover:after {
		left: 0;
		height: 100%;	
	}

/*SCROLL CUSTOM*/

::-webkit-scrollbar {
	width:10px;		
}
::-webkit-scrollbar-thumb {
	border-radius:0;
    background-clip: padding-box;
	background-color:var(--color-point);
}
::-webkit-scrollbar-track {
	background-color:var(--color-gray-300);		
	border:none;
} 


/*MODAL*/
.modal {
	display:none;
	position:fixed;
	top:0;
	left:0;
	right:0;
	width:100%;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	margin:0 auto;
	background:rgba(0,0,0,0.8);
	z-index:999999;
}
.modal_inner {
	position:relative;
	width:calc(100% - 4rem);
	margin:0 auto;
	padding:0;
	text-align:center;
	background:#fff;
	border-radius:1rem;
	overflow: hidden;
}
.modal_inner > .btn_modalClose {
	position:absolute;
	top:1.5rem;
	right:1.5rem;
	font-size:2.4rem;
	color:#fff;
}
.modal_hd {
	padding:1.5ex;
	color:#fff;
	font-size:3rem;
	background-color: var(--color-main);
}
.modal_hd img {
	margin-bottom:1rem;
}
.modal_hd h2 {
	font-size:3rem;
	font-weight:var(--txt-semibold);
}
.modal_main {
	padding:2em 3em;
	font-size:1.6rem;
}
.modal_main p {
	line-height:1.6;
	font-size:1.6rem;
	font-weight:var(--txt-regular);
}
.main_btns {
	gap:1rem;
}

/*modal - load*/
#modal__loading {
	font-size:2.6rem;
	color:#fff;
}
#modal__loading .loading_spinner {
	margin:0 auto 1ex;
	padding:1ex;
	width:14rem;
	height:14rem;
	border-radius:50em;
	border:1rem solid #fff;
    -webkit-animation: xi-spin 2s infinite linear;
    animation: xi-spin 2s infinite linear;
}
#modal__loading .loading_spinner span {
	display:inline-block;
	height:5rem;
	width:1rem;
	background:var(--color-main);
	border-radius:50em;
}

/* modal messege */
.modal__msg .modal_inner {
	width:50rem;
	max-width:90vw;
}
.modal__msg .modal_inner > .btn_modalClose {
	color:var(--color-gray-500);
}
.modal__msg .modal_main i {
	width:2em;
	height:2em;
	font-size:3rem;
	color:var(--color-main);
	background:var(--color-main-light-100);
	border-radius:50em;
}
.modal__msg .modal_main h2 {
	margin:1em 0 1ex;
	font-size:1.8rem;
}
.modal__msg .modal_main .main_cont {
	margin:0 0 1.5em 0;
	font-size:1.6rem;
	line-height:1.6;
}
.modal__msg.warning .modal_main i.xi-error-o {
	color:var(--color-red);
	background:rgba(248,52,70,0.1);
}

/*popup*/
.popup {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  /* bottom: 0; */
  transform: translateY(-50%);
  max-width: 50rem;
  margin: 0 auto;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0rem 0rem 4rem 0 rgb(0 0 0 / 30%);
  z-index: 999999;
}
.popup .popup_inner {
	position:relative;
	margin:0 auto;
	text-align:center;
}
.popup .swiper img {
	width:100%;
}
.popup .popup_footer {
	padding:1rem;
	font-size:1.6rem;
	color:var(--color-gray-500);
	background:#fff;
}
.popup .popup_footer i {
	font-size: 1.8rem;
	transform: translateY(0.12em);
}
.popup .popup_footer .mainPop__controls {
	gap:0.5rem;
}
.popup .popup_footer .mainPop__controls .swiper-pagination-current {
	color:var(--color-main);
	font-weight: var(--txt-semibold);
}
.popup .popup_footer button {
	color:var(--color-gray-900);
}
@media screen and (max-width:767px) {
  .popup {
    width:90%;
    margin:0 auto;
  }
  .popup .popup_footer {
    padding-bottom:calc(1em + env(safe-area-inset-bottom));
  }
}


/*TOP BNR*/
#topBnr {
	position:fixed;
	top:0;
	left:0;
	right:0;
	width:100%;
	height:5rem;
	z-index: 99999;
}
#topBnr a {
	display:block;
	width:100%;
	height:100%;
}
#topBnr img {
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;;
}
#topBnr .topBnr__close {
	position:absolute;
	top: 1rem;
	right: 1rem;
	font-size:3.5rem;
	color:rgba(255,255,255,0.35);
	z-index:9;
}
@media screen and (max-width: 960px) {
	#topBnr img.pc_item {
		display:block;
	}
}
@media screen and (max-width: 767px) {
	#topBnr {
		height:8.4rem;;
	}
	#topBnr .topBnr__close {
		top:0.5rem;
		right:0.5rem;
	}
}

/*HEADER*/
header {
	position:fixed;
	top:0;
	left:0;
	right:0;
	width:100%; 
	z-index:100;
	transition: all 0.5s;
}
	#topBnr ~ header {
		top:5rem;
	}
	#topBnr.hidden ~ header {
		top:0;
	}
header .hd__inner {
	height:10rem;
	padding:0 5rem;
}
header h1 a {
	display:block;
	padding:0 3rem;
	line-height: 10rem;
}
header h1 img {
	max-height:5.6rem;
}
header nav {
	padding:0 5rem;
	background:rgba(255,255,255,0.8);
	border-radius:0 0 1.5rem 1.5rem;
	box-shadow:0 0 0.6rem 0 rgba(0,0,0,0.07);
	gap:3rem;
}
header nav > ul {
	gap:3rem;
}
header nav > ul > li {
	position:relative;	
}
header  nav > ul > li > a, header  nav > ul > li > form > a {
	display:block;
	line-height:8.2rem;
	font-size:1.8rem;
}
	header  nav > ul > li > a:hover span {
		color:var(--color-main);
		transition:all 0.5s;
	}
header nav .hd__btns a {
	padding:0 4rem;
	line-height:4.6rem;
	color:var(--color-main);
	font-weight:var(--txt-medium);
	font-size:2rem;	
	border:1px solid var(--color-main);
	border-radius:50em;
	gap:0.5rem;
}
	header nav .hd__btns a:after {
		background:var(--color-main);
	}
header nav .btn_cart {
  position: relative;
	display: block;
	width: 5rem;
	height: 5rem;
	line-height: 5.5rem;
	font-size: 3.3rem;
	text-align: center;
	color: #fff;
	background-color: var(--color-main);
	border-radius: 50em;
}
header nav .btn_cart .cart_count {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1rem;
  background: var(--color-point);
  width: 2rem;
  height: 2rem;
  border-radius: 50em;
}
@media screen and (max-width:1500px) {
	header .hd__inner {
		padding: 0 3rem;
	}
}
@media screen and (min-width:961px) {
	#btn_asideOpen,
	.btn_cart {
		display:none;
	}
}
@media screen and (max-width:960px) {
	header {
		top:0;
	}
		#topBnr ~ header {
			top:5rem;
		}
		#topBnr.hidden ~ header {
			top:0;
		}
	header .pc_item {
		display:none;
	}
	header .hd__inner {
		height:8.5rem;
		padding: 0 1.5rem;
		background:#fff;
	}
	header > .items_str {
		align-items: center;
	}
	header h1 a {
		line-height: 7rem;
	}
	header h1 img {
		max-height:4.8rem;
	}
	header button#btn_asideOpen {
		width:4.5rem;
		height:4.5rem;
		gap:1rem;
	}
	header button#btn_asideOpen span {
		display:block;
		width: 90%;
		height: 3px;
		background-color: var(--color-main);
		transition: all 0.3s;
	}
		header button#btn_asideOpen span:nth-child(1) {
			background-color: var(--color-point);
		}
		header button#btn_asideOpen span:nth-child(2) {
			width:70%;
		}
		/*close*/
		header button#btn_asideOpen.close {

		}
		header button#btn_asideOpen.close span:nth-child(1) {
			transform: rotate(45deg);
			background-color: var(--color-main);
		}
		header button#btn_asideOpen.close span:nth-child(2) {
			width:0%;
		}
		header button#btn_asideOpen.close span:nth-child(3) {
			margin-top: -2.6rem;
			transform: rotate(-45deg) translateY(-50%);
			background-color: var(--color-main);
		}
	header a.btn_cart {
    position: relative;
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    line-height: 5rem;
    font-size: 2.8rem;
    text-align: center;
    color: #fff;
    background-color: var(--color-main);
    border-radius: 50em;
	}
  header a.btn_cart .cart_count {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.8rem;
    background: var(--color-point);
    width: 2rem;
    height: 2rem;
    border-radius: 50em;
  }
	header .modal_mobileMenu__Inner {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
	}
	header .modal_mobileMenu__bg {
		width: 90%;
		height: 90vh;
		border-radius: 1.5rem;
		background:#fff;
		overflow:hidden;
	}
	header .modal_mobileMenu__btns button {
		padding: 0 3rem;
		line-height: 5.2rem;
		color: #fff;
		font-weight: var(--txt-medium);
		font-size: 2.2rem;
		background: var(--color-point);
		border-radius: 50em;
		gap: 0.5rem;
	}
	header .btn_modalClose  {
		position: absolute;
		bottom:5rem;
		width:5rem;
		height:5rem;
		line-height:5rem;
		text-align:center;
		font-size:3rem;
		background:#fff;
		border-radius:100em;
		box-shadow:0 0 1rem 0 rgba(0,0,0,0.1);
	}
	header .btn_modalClose i {
		line-height:inherit;
	}
}
@media screen and (max-width:767px) {	
	header {
		top:0;
	}
		#topBnr ~ header {
			top:8.4rem;
		}
		#topBnr.hidden ~ header {
			top:0;
		}
}



/*ASIDE*/
aside {
	position:fixed;
	bottom:3rem;
	left:5rem;
	width:32rem;
	height:calc((var(--vh, 1vh) * 100) - 10rem - 3rem);
	padding:1rem;
	background:#fff;
	border-radius:1.5rem;
	box-shadow:1rem 0.2rem 6rem 0 rgba(0,0,0,0.07);
	z-index: 100;
	transition: all 0.5s;
}
	#topBnr ~ header aside {
		height:calc((var(--vh, 1vh) * 100) - 10rem - 5rem - 3rem);
	}
	#topBnr.hidden ~ header aside {
		height:calc((var(--vh, 1vh) * 100) - 10rem - 3rem);
	}
aside ul.aside__products {
	width:100%;
	height:100%;
	padding:1rem;
	gap:0.75rem;
	overflow-y: scroll;	
}
	aside ul.aside__products::-webkit-scrollbar {
		width:5px;		
	}
	aside ul.aside__products::-webkit-scrollbar-thumb {
		border-radius:50em;
		background-clip: padding-box;
		background-color:var(--color-gray-200);
	}
	aside ul.aside__products::-webkit-scrollbar-track {
		background-color:transparent;		
		border:none;
	} 
aside ul.aside__products a {
	padding:1rem;
	gap:1.4rem;
}
	aside ul.aside__products a:hover {
		color:#fff;
		background:var(--color-main);
		border-radius: 5rem;
	}
aside ul.aside__products .products__thumb {
	width:5.4rem;
	height: 5.4rem;
	background:#fff;
	border-radius: 50em;
	box-shadow:0rem 0rem 1.5rem 0 rgba(0,0,0,0.1);
	overflow: hidden;
}
	aside ul.aside__products a:hover .products__thumb {
		transform: scale(1.4);
    transition: all 0.5s;
		box-shadow:0rem 0rem 2rem 0 rgba(0,0,0,0.3);
	}
aside ul.aside__products .products__name {
	font-size:1.6rem;
	font-weight: var(--txt-regular);
}
aside ul.aside__gnb,
aside ul.aside__sns {
	display:none;
}
@media screen and (max-width:960px) {
	aside {
		transform: translateX(-500%);
		transition: all 0.5s;
	}
	aside.open {
		position: relative;
		display:block;
		width:100%;	
		height: calc(calc(var(--vh, 1vh) * 100) - 8.5rem);
		left: 0;
		right:0;
		bottom:0;
		padding:0;
		overflow-y: auto;
		box-shadow:none;
		transform: translateX(0);
		transition: all 0.5s;
	}
		#topBnr ~ header aside.open {
			height: calc(calc(var(--vh, 1vh) * 100) - 8.4rem - 8.5rem);
		} 
		#topBnr.hidden ~ header aside.open {
			height: calc(calc(var(--vh, 1vh) * 100) - 8.5rem);
		}
		aside.open::-webkit-scrollbar {
			width:inherit
		}
	aside ul.aside__products {
		height: auto;
		padding:2rem;
		flex-flow: row;
		flex-wrap: wrap;
		place-content: flex-start;
		gap:1rem calc(4% / 3);
		background:var(--color-gray-200);
	}
		aside ul.aside__products::-webkit-scrollbar {
			width:inherit
		}
	aside ul.aside__products li {
		width:24%;
		background:#fff;
		border-radius:1.5rem;
		box-shadow:0rem 0rem 2rem 0 rgba(0,0,0,0.1);
	}
	aside ul.aside__products li a {
    height: 100%;
		padding:2rem 1rem;
		flex-flow: column;
    justify-content: center;
    align-items: center;
		text-align:center;
	}
		aside ul.aside__products li a:hover {
			border-radius:1.5rem;
		}
	aside ul.aside__products .products__name {
    height: 2.2em;
    display: flex;
    align-items: center;
		word-break: keep-all;
	}
	aside ul.aside__gnb {
		display:block;
		border-top:1px solid var(--color-gray-300)
	}
	aside ul.aside__gnb li {
		width:100%;
		border-bottom:1px solid var(--color-gray-300)
	}
	
	aside ul.aside__gnb li a {
		display:block;
		width: 100%;
		padding:1em;
		text-align: center;
		font-size:2.2rem;
	}
	aside ul.aside__sns {
		display:flex;
	}
	aside ul.aside__sns li a {
		display:block;
		padding:1.5em;
		font-size:2rem;
		text-align:center
	}
	aside ul.aside__sns li a img {
		margin-bottom:1ex;
		height:3.5rem;
	}
	aside ul.aside__sns li a i {
		margin-bottom:0.5ex;
		font-size:4rem;
    line-height: 3.5rem;
	}
		aside ul.aside__sns li a i.xi-naver {
			color:#27CF21;	
		}
		aside ul.aside__sns li a i.xi-kakaotalk {
			color:#fac000;	
		}
	aside ul.aside__sns li a b {
		display:block;
	}
}


/*MAIN*/
main {
	width:100%;
	padding-left:calc(32rem + 5rem);
	padding-top:10rem;
	transition: all 0.5s;
}
	#topBnr ~ main {
		padding-top:calc(5rem + 10rem);
	}
	#topBnr.hidden ~ main {
		padding-top:10rem;
	}
	main.full {
		width:100%;
		padding-left:0;
	} 
@media screen and (max-width:960px) {
	main {
		width:100%;
		padding-left:0;
	} 	
}
@media screen and (max-width:767px) {
	main {
		padding-top:8.5rem;
	}
		#topBnr ~ main {
			padding-top:calc(8.4rem + 8.5rem)
		}
		#topBnr.hidden ~ main {
			padding-top:8.5rem;
		}
}

/*SUB*/
.boundary {
	width:100%;
	padding:6rem 3rem;
	margin-left:auto;
	margin-right:auto;
	background:#fff;
	border-radius: 1.5rem;
	box-shadow:1rem 0.2rem 6rem  0 rgba(0,0,0,0.08);
}
@media screen and (max-width:1500px) {
	.boundary {
	}
}
@media screen and (max-width:960px) {
	.boundary {
		margin-top:1rem;
	}
}
@media screen and (max-width:767px) {
	.boundary {
		padding:4rem 1rem;
	}
}
.titleBox {
	margin-bottom: 4rem;
}
.titleBox span {
	display:block;
	margin-bottom:0.5ex;
	font-size:1.6rem;
	font-weight: var(--txt-semibold);
	color:var(--color-main);
}
.titleBox h2 {
	font-size:3rem;
	font-weight: var(--txt-semibold);
}
.contents {
  word-break: keep-all;
  line-height: 1.6;
}
.contents h3 {
	margin-bottom:1.5ex;
	font-size:1.8rem;
	font-weight: var(--txt-semibold);
}
.contents h3 b {
	color:var(--color-main);
}
.contents h3 button {
	float: right;
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
}
.contents h3 button i{
	margin-right: 0.5rem;
    position: relative;
    top: 1px;
}
.contents h3 b i {
	font-size: 1.2em;
	transform: translateY(0.1em);
}
.contents h3 small {
	font-size:0.8em;
	font-weight: var(--txt-regular);
	color:var(--color-gray-900);
}
.contents h4 {
	font-sizE:1.6rem;
	margin-bottom:1.5ex;
}
.contents article {
	padding-bottom:3rem;
	margin-bottom:3rem;
	border-bottom:1px solid var(--color-gray-300)
}
	.contents article:last-of-type {
		margin-bottom:0;
		border-bottom: none;
	}
.container {
	width:100%;
	padding:2.4rem;
	margin-bottom:1.5rem;
	font-size:1.6rem;
	background-color: var(--color-gray-100);
	border-radius: 0.5rem;
	border:1px solid transparent;
}
	article .container:last-of-type {
		margin-bottom:0;
	}
	.container_line {
		border-color: var(--color-main);
	}
	.container_mainColor {
		color:#fff;
		font-size:2rem;
		background-color: var(--color-main);
	}
	.container_pointColor {
		color:#fff;
		font-size:2rem;
		background-color: var(--color-point);
	}
	.container_redColor {
		color:#fff;
		font-size:2rem;
		background-color: var(--color-red);
	}
.whiteBox {
	padding:1em 1.5em;
	font-size:1.4rem;
	border-radius: 0.5rem;
	background-color: #fff;
}
	.container .whiteBox:not(last-of-type) {
		margin-bottom:1rem;
	}
.btnBox {
	margin-top:1.5rem;
	gap:1rem;
}
.check_list li {
	margin-bottom: 1.5ex;
  margin-left: 0.65em;
	padding-left: 0.6em;
	line-height: 1.4em;;
	font-size: 1.4rem;
	text-align: left;
	text-indent: -0.65em;
}
	.check_list li:last-of-type {
		margin-bottom:0;
	}
.check_list li i.xi-check {
	font-size:1.2em;
	color:var(--color-main);
	transform: translateY(0.1em);
}
.check_list li small {
	color:var(--color-gray-900);
}
.check_list .check_detail {
	margin-top:1ex;
	padding:1em ;
	font-size:1.4rem;
	border-radius: 0.5rem;
	border:1px dashed var(--color-gray-500)
}
.check_list .check_detail p {
	margin-bottom:1ex;
	padding-left:1em;
	text-indent: -0.7em;
}	
	.check_list .check_detail p:last-of-type {
		margin-bottom:0;
	}
.step__input dl {
	margin-bottom:1.5rem;
}
.step__input dt {
	width:8em;
	font-size:1.6rem;
	font-weight: var(--txt-medium);
}
.step__input dd {
	width:calc(100% - 8em);
	font-size:1.6rem;
}
.step__input dd .input_ref {
	margin-top:1ex;
	font-size:1.2rem;
	color:var(--color-gray-900)
}
@media screen and (max-width:767px) {
	.contents h3 {
		margin-bottom:1.5ex;
    flex-flow: column;
    align-items: flex-start;
    gap:1ex;
		font-size:2rem;
		font-weight: var(--txt-semibold);
	}
  article.flex_btw {
    flex-flow: column;
  }
  .container {
    padding:2rem 1rem;
  }
    .container_redColor {
      padding:2rem;
    }
	.step__input dl {
		flex-flow: column;
    gap:1ex;
	}
	.step__input dt {
		width:100%;
		font-size:1.6rem;
	}
	.step__input dd {
		width:100%;
		font-size:1.6rem;
	}
}

/*BOARD*/
.borad__tab {
	border-bottom:1px solid var(--color-gray-300);
	font-size:1.6rem;
	color:var(--color-gray-500);
}
.borad__tab a {
    display: block;
    width: 18rem;
    line-height: 3em;
    text-align: center;
}
	.borad__tab a.on {
		color: var(--color-main);
		font-weight: var(--txt-semibold);
		box-shadow: 0 -0.2em 0 var(--color-main) inset;
	}
.board__list .list_head {
	padding:0 3.2rem 1ex;
	margin-bottom:1ex;
	font-size:1.6rem;
	color:var(--color-gray-900);
}
.board__list ul {
	padding:0 ;
	font-size:1.6rem;
	background-color: #fff;
	border-radius: 0.5rem;;
}
.board__list ul li {
	padding:2rem 3.2rem;
}
.board__list ul li:not(:last-child) {
	border-bottom:1px solid var(--color-gray-200);
}
.board__list ul li:hover {
	background:#fffdef;
	transition: all 0.5s;;
}
.board__list ul li span {
	word-break: keep-all;
}
.board__list ul li.empty{
	text-align: center;
    padding: 10rem 0 !important;
    background: #fff;
    color: black;
    opacity: 0.6;
}

.board__accord {
}
.board__accord li {
	position: relative;
	width: 100%;
	padding: 2rem 0;
	font-size: 1.6rem;
	border-bottom: 1px solid var(--color-gray-300)
}
.board__accord li.open .accord_tit {
	color:var(--color-main)
}
.board__accord li .accord_tit .flex_nml {
	gap:1em;
}
.board__accord li .accord_tit small {
	font-size:1em; 
	color:var(--color-gray-500)
}
.board__accord li .accord_tit b {
	color: var(--color-main);
	font-size: 2rem;
}
 .board__accord li .accord_tit i.xi-angle-down {
	font-size: 2rem;
	color: var(--color-main)
}

 .board__accord li.open .accord_tit i {
	transform: rotate(180deg)
}

 .board__accord li .accord_cont {
	display: none;
	margin-top:2rem;
	padding: 2rem;
	line-height: 1.6em;
	font-size: 1.4rem;
	background: var(--color-gray-100)
}
.board__accord li .accord_cont .cont_tit {
	display:block;
	font-size:2rem;
	margin-bottom:1em;
}
.board__pager {
	padding-top:2rem;
	gap:1.2em;
}
.board__pager a {
	font-size:1.6rem;
	color:var(--color-gray-500);
}
	.board__pager .arrow a {
		font-size:1.2em;
	}
	.board__pager .selected a {
		font-weight: var(--txt-semibold);
		color:var(--color-main);
	}
@media screen and (max-width:767px) {
  .borad__tab a {
    width:50%;
  }
  .board__list .list_head {
    display:none;
  }
}


/*FOOTER*/
footer {
	width:100%;
	padding:7rem 0;
	padding-left:calc(32rem + 5rem);
}	
	footer.full {
		padding-left:0;
	}
footer .ft__inner {
	padding:0 2rem;
}
footer .ft__info {
	max-width:50%;
	line-height:1.8;
	font-size:1.4rem;
	color:var(--color-gray-900);
	word-break:keep-all;
	gap:1.5em;
}
footer .ft__info h1 img {
	max-height:3.6rem;
}
footer .ft__info .ft__mailto {
	padding:1ex;
	font-size:1.6rem;
}
footer .ft__info small {
	font-size:1.2rem;
	color:var(--color-gray-500);
}
footer .ft__cs {
	font-size:1.8rem;
	line-height: 1.6em;;
}
footer .ft__cs h2 {
	margin-bottom: 1ex;;
}
footer .ft__cs h2 p {
	margin:0 0 0 auto;
	width:4rem;
	height: 4rem;
	border-radius: 50em;
	font-size:2.4rem;
	color: #fff;
	background-color: var(--color-main);
}
footer .ft__cs h2 span {
	font-size: 1.6rem;
	font-weight: var(--txt-medium);
}
footer .ft__cs a {
	font-size: 3.2rem;
	color:var(--color-main);
	font-weight: var(--txt-medium);
}
footer .ft__policy {
	font-size:1.6rem;
	gap:2rem;
}
footer .ft__coop {
	gap:3rem;
}
@media screen and (max-width:960px) {
	footer {
		width:100%;
		padding-left:0;
	}
}
@media screen and (max-width:767px) {
	footer {
		padding:0;
	}
	footer .ft__inner > .flex_btw {
		flex-flow: column-reverse;
		justify-content: center;
		align-items: center;
	}
	footer .ft__customer {
		width:100%;
		padding:5rem 0;
		gap:3rem;
		align-items: center;
		text-align:center;
		border-bottom:1px solid var(--color-gray-300);
	}
	footer .ft__cs {
		font-size:2rem;
	}
	footer .ft__cs h2 p {
		margin:0 auto;
		font-size:2.2rem;
	}
	footer .ft__cs a {
		font-size:3.5rem;
    font-weight: var(--txt-semibold);
	}
	footer .ft__info {
		width:100%;
		max-width: 100%;
		margin:5rem auto;
		font-size:1.6rem;
		text-align:center;
	}
	footer .ft__info .ft__mailto {
		font-size:1.8rem;
	}
	footer ul.ft__sns {
		display:flex;
		margin-top:3rem;
	}
	footer ul.ft__sns li a {
		display:block;
		padding:0 1.5em;
		font-size:1.8rem;
		line-height: 1.4em;
		text-align:center
	}
	footer ul.ft__sns li a img {
		margin-bottom:1ex;
		height:3.5rem;
	}
	footer ul.ft__sns li a i {
		margin-bottom:0.5ex;
		font-size:4rem;
    line-height: 3.5rem;
	}
		footer ul.ft__sns li a i.xi-naver {
			color:#27CF21;	
		}
		footer ul.ft__sns li a i.xi-kakaotalk {
			color:#fac000;	
		}
	footer ul.ft__sns li a b {
		display:block;
	}
}


/*FIX BAE*/
#fixBar {
  position: fixed;
  left:0;
  right: 0;
  bottom: 0;
  width:100%;
  padding-bottom:env(safe-area-inset-bottom);
  background:#fff;
  border-radius: 1.5em 1.5em 0 0;
  box-shadow:0 0 3rem 0 rgba(0,0,0,0.15);
  z-index:100;
}
#fixBar ul {
  height: 8.5rem;
}
#fixBar li {
  width: 20%;
  height: 100%;
}
#fixBar li form{
  align-items: center;
    flex-flow: column;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}
#fixBar li a {
  width: 100%;
  height: 100%;
  color:var(--color-gray-900);
  font-size:1.4rem;
}
#fixBar li a i {
  font-size:3rem;
}
#fixBar li.home a {
  width:7rem;
  height: 7rem;
  margin:-1.5rem auto 0;
  color:#fff;
  background-color: var(--color-main);
  border-radius: 50em;;
}
#fixBar li.home a i {
  font-size:4rem;
}


/*QUICK MENU*/
#quick {
	position:fixed;
	right:0;
	bottom:0;;
	background:#fff;
	border-radius:1.5rem 0 0 0;
	box-shadow:-0.5rem -0.5rem 1rem 0 rgba(0,0,0,0.1);
	z-index:9;
}
#quick a {
	width:6.5rem;
	height: 8rem;
	margin-top:0.5rem;
	margin-right: 0;
	margin-left: auto;
	font-size:1.6rem;
	gap:1rem;
	border-bottom:1px solid var(--color-gray-300);
	white-space:nowrap;
	overflow:hidden;
}
#quick:hover a {
	width:auto;
	padding:0rem 2rem;
	justify-content:flex-start;
}
	#quick a:hover b {		
		color:var(--color-main);
	}
#quick a img {
	height:3.2rem;
}
#quick a i {
	font-size:3.6rem;
}
	#quick a.aside__kakao i {
		color:#fac000;
	}
	#quick a.aside__naver i {
		color:#23C411;
	}
#quick a span {
	display:none;
}
	#quick:hover span {
		display:block;
	}
#quick a span b {
	display:block;
	font-size:1.8rem;
}
@media screen and (max-width:767px) {
	#quick {
		display:none
	}
}