@charset "utf-8";

/**************************
INDEX
**************************/
/*index - common*/
#index section {
}
#index section h2 {
	margin-bottom:1em;;
	font-weight:var(--txt-medium);
}
#index section h2 small {
	display:block;
	margin-bottom:0.5ex;
	font-size:1.8rem;
	line-height:1.6;
	font-weight:var(--txt-regular);
	color:var(--color-main)
}
#index .box_inshadw {
	padding:5rem 3rem;
	border-radius: 1.5rem;
	background:var(--color-gray-100);
	box-shadow: inset 0 0 1.5rem rgba(0,0,0,0.11);
}
	#index .box_inshadw h2 {
		font-size:3rem;
	}
	#index .box_inshadw h2 small {
		font-size:1.6rem;
	}
#index .btns_box {
	padding-top:7.5rem;
}
/*index - main banner*/
#index .bnrs {
  position: relative;
}
#index .mainBnr {
	width: 66.78%;
	height: auto;
	aspect-ratio: 788 / 504;
	border-radius: 2rem;
	overflow:hidden;
	/* box-shadow: 1rem 0.2rem 6rem 0 rgb(0 0 0 / 7%); */
}
#index .mainBnr .swiper {
	height:100%;
}
#index .mainBnr a {
	display:block;
	width:100%;
	height:100%;
}
#index .mainBnr img {
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}
#index .mainBnr .mainBnr__controls {
	position:absolute;
	left: var(--sep-double);
	bottom: var(--sep-double);
	gap: var(--sep-half);
	padding:0.1rem  var(--sep-min);
	color:#fff;
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(10px);
	z-index:9;
	font-size: 1.6rem;
	border-radius: 50em;
}
#index .mainBnr .controls_prev,
#index .mainBnr .controls_next {
	margin-top:0.3rem;
	padding: 0;
	font-size: 2em;
	opacity: 0.5;
  cursor: pointer;
  transition: all 0.5s;
}
#index .mainBnr .controls_prev:hover,
#index .mainBnr .controls_next:hover {
  opacity: 1;
}

#index .mainBnr .controls_pager_wrap {
  color:rgba(255,255,255,0.5)
}
#index .mainBnr .controls_pager_wrap .swiper-pagination-current {
  font-weight: var(--txt-semibold);
  color:rgba(255,255,255,1)
}




#index .subBnr {
    width: 66.78%;
    height: auto;
    aspect-ratio: 788 / 110;
    border-radius: 2rem;
    overflow: hidden;
}
#index .subBnr .swiper {
    width: 100%;
    height: 100%;
}
#index .subBnr .swiper ul {}
#index .subBnr .swiper ul {}
#index .subBnr .swiper ul li {}
#index .subBnr .swiper ul li a {
    width: 100%;
    height: 100%;
    background-color: var(--bg-color-sky);
}
#index .subBnr .swiper ul li a .txt {}
#index .subBnr .swiper ul li a .txt b {}
#index .subBnr .swiper ul li a .txt p{}
#index .subBnr .swiper ul li a .img {
	border-radius: 1.5rem;
	transition:all .5s;
}
#index .subBnr .swiper ul li a .img img {
    width: 6.4rem;
    height: 6.4rem;
}
#index .subBnr .swiper ul li a:hover .img  {	
	box-shadow: 0 0 2rem rgb(43 76 241);
}
#index .mainItem {
    position: absolute;
    width: calc(100% - 66.78% - 5.8rem);
    right: 0;
    top: 0;
}
#index .mainItem dl {}
#index .mainItem dl dt {
  line-height: 1.3;
}
#index .mainItem dl dt b {
	display:inline-block;
  animation: hithere 1.5s ease infinite;	
}
@keyframes hithere {
  30% { transform: scale(1.2); }
  40%, 60% { transform: rotate(-20deg) scale(1.2); }
  50% { transform: rotate(20deg) scale(1.2); }
  70% { transform: rotate(0deg) scale(1.2); }
  100% { transform: scale(1); }
}
#index .mainItem dl dd {}
#index .mainItem dl dd ul {}
#index .mainItem dl dd ul li {
    width: calc(50% - 0.5rem);
}
#index .mainItem dl dd ul li a {
  align-items: end;
  height: 100%;
  background: var(--bg-color-gray);
  border-radius: 2rem;
  min-height:100px;
}
#index .mainItem dl dd ul li a:not(:hover) {
  border:1px solid transparent!important;
}
#index .mainItem dl dd ul li a:hover {
  border:1px solid;
}
#index .mainItem dl dd ul li a .name {
    height: 100%;
	position:relative;
	flex:2;
}
#index .mainItem dl dd ul li a .name small {
	position:absolute;
	bottom:0;
}
#index .mainItem dl dd ul li a .thumb {
  width:5rem;
  height: 5rem;
  border-radius: 50em;
  background: #fff;
  align-content: center;
  text-align: center;
  /* height: 100%; */
  /* align-content: end; */
}
#index .mainItem dl dd ul li a .thumb img {
    width: 70%;
    height: auto;
}

@media (min-width: 577px) and (max-width: 1024px)
{
	#index .mainItem dl dd ul li a {
		min-height:10rem;
	}
}


/*index - products*/
#index .products #prdtCate li {}
#index .products #prdtCate li a {
  display: block;
  padding: var(--sep-half) var(--sep-comm);
  background: transparent;
  border-radius: 50em;
  color: var(--txt-color-light);
}
#index .products #prdtCate li.on a {
  color:#fff;
  font-weight: var(--txt-medium);
  background-color: var(--color-main);
}
#index .products #prdtCate li a:hover {}
#index .products #prdtCate li a span {}
#index .products #prdtItem ul {
  gap:1.6rem;
}
#index .products #prdtItem li {
	width: calc((100% -  (1.6rem * 4)) / 5);
}
#index .products #prdtItem li.hide {
  display:none;
}
#index .products #prdtItem li a {
  height:100%;
  padding:2rem;
  align-items: end;
	background:#fff;
	border-radius: 2rem;
	border: 1px solid var(--line-color-gray);
}
#index .products #prdtItem li a:hover {
  border-color: var(--color-main);
}
#index .products #prdtItem li a .name {
  height:100%;
  position:relative;
  flex:2;
}
#index .products #prdtItem li a small {
  position:absolute;
  bottom:0;
}
#index .products #prdtItem li a .thumb {	
  width: 5rem;
  height: 5rem;;
}
#index .products #prdtItem li a .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}



#index .guide #guideCate li {}
#index .guide #guideCate li a {
  display: block;
  padding: var(--sep-half) var(--sep-comm);
  background: transparent;
  border-radius: 50em;
  color: var(--txt-color-light);
}
#index .guide #guideCate li.on a {
  color:#fff;
  font-weight: var(--txt-medium);
  background-color: var(--color-main);
}
#index .guide #guideCate li a span {}
#index .guide #guideItem ul {
  gap:1.6rem;
}
#index .guide #guideItem li {
	width: calc((100% -  (1.6rem * 3)) / 4);
}
#index .guide #guideItem li.hide {
  display:none;
}
#index .guide #guideItem li a {
  color:#fff;
  border-radius: 2rem;
}
#index .guide #guideItem li a .name {
}
#index .guide #guideItem li a .thumb {	
  width: 5rem;
  height: 5rem;
  border-radius: 50em;
  background: #fff;
  align-content: center;
  text-align: center;
}
#index .guide #guideItem li a .thumb img {
  width: 70%;
  height: auto;
}
#index .guide #guideItem li a i.ri-arrow-down-s-line {}
#index .guide #guideItem li dl {
  position:relative;
  padding:2rem 2rem 7rem 2rem;
  height:100%;
  border-radius: 2rem;
  border:1px solid;
}
#index .guide #guideItem li dl a {
	color: var(--color-main);
	text-decoration: underline;
}
#index .guide #guideItem li dl dt {
  border-bottom:1px solid;
}
#index .guide #guideItem li dl dt span {
  display:inline-block;
  background-color: #fff;
  border:1px solid;
  border-radius: 50em;
}
#index .guide #guideItem li dl dt strong {}
#index .guide #guideItem li dl dt .thumb2 {	
  position:absolute;
  right:var(--sep-comm);
  bottom:var(--sep-comm);
  width: 6rem;
  height: 6rem;
  border-radius: 50em;
  background: #fff;
  align-content: center;
  text-align: center;
}
#index .guide #guideItem li dl dt .thumb2 img {
  width: 70%;
  height: auto;
}
#index .guide #guideItem li dl dd {
  color:var(--txt-color-gray);
  line-height: 1.6;;
}

#index .cscenter {}
#index .cscenter dl {
  padding:2rem;
  background-color: var(--bg-color-sky);
  border-radius: 2rem;
}
#index .cscenter dl dt {
  color:var(--txt-color-dark)
}
#index .cscenter dl dt i {
  color:var(--txt-color-light)
}
#index .cscenter dl dt span {}
#index .cscenter dl dd {}
#index .cscenter dl dd a {}
#index .cscenter dl dd a:hover {
  color:var(--color-main)
}
#index .cscenter .cs_faq {
  color:#fff;
  background-color: var(--color-main);
  border-radius: 2rem;
}
#index .cscenter .cs_faq:hover {
  background-color: var(--txt-color-def);
}

#index .reqread {}
#index .reqread dl {
  align-content: center;
  background-color: #FFF5F5;
  border-radius: 2rem;
}
#index .reqread dl dt {}
#index .reqread dl dt i {}
#index .reqread dl dd {}

#index .latest .lt__notice {}
#index .latest .lt__notice ul {}
#index .latest .lt__notice ul li {}
#index .latest .lt__notice ul li a {
	border:1px solid var(--line-color-gray);
	border-radius: 2rem;
}
#index .latest .lt__notice ul li a:hover {
	border-color: var(--color-main);
}
#index .latest .lt__notice ul li a dl {}
#index .latest .lt__notice ul li a dl dt {}
#index .latest .lt__notice ul li a dl dd {
	color:var(--txt-color-light)
}
#index .latest .lt__notice ul li a i {}
#index .latest .lt__faq {}
#index .latest .lt__faq ul {}
#index .latest .lt__faq ul li {
	width:calc((100% - var(--sep-comm)) / 2)
}
#index .latest .lt__faq ul li a {
	display: block;
	width:100%;
	padding:2rem;
	background-color: var(--bg-color-sky);
	border-radius: 2rem;
	border: 1px solid transparent;
}
#index .latest .lt__faq ul li a:hover {
	border: 1px solid var(--color-main);
}
#index .latest .lt__faq ul li a dl {}
#index .latest .lt__faq ul li a dl dt {}
#index .latest .lt__faq ul li a dl dd {
	color:var(--txt-color-dark);
	line-height: 1.4;
}
#index .latest .lt__faq ul li a span {
	color: var(--txt-color-light);
}

#index .app {
	background-color: var(--bg-color-sky);
} 
#index .app > div {} 
#index .app > div .txt {} 
#index .app > div .txt small {} 
#index .app > div .txt h2 {} 
#index .app > div .txt .btns {} 
#index .app > div .txt .btns a {
	width: 18rem;
	background-color: #fff;
	border: 1px solid var(--line-color-gray);
	border-radius: 1rem;
} 
#index .app > div .txt .btns a:hover {
	border-color: var(--color-main);
} 
#index .app > div .txt .btns a img {} 
#index .app > div .img {} 
#index .app > div .img img {
	width: 14rem;
	height: 14rem;
	box-shadow: 0 0 2rem 0 #1B36BF;
	border-radius: 3rem;
} 

/*index  - responsive*/
@media screen and (max-width:767px) {
	#index .bnrs {
    /*flex-flow: column-reverse;*/
    gap: var(--sep-max);
	}
	#index .bnrs .mainBnr {
    width: 100%;
		aspect-ratio:332 / 192;
	}
	#index .bnrs .mainBnr .swiper .mainBnr__controls {
    left:inherit;
		right: var(--sep-comm);
    bottom: var(--sep-comm);
    gap: var(--sep-min);
    padding: var(--sep-min) var(--sep-half);
		font-size:1.4rem;
	}
	#index .mainBnr .controls_prev, 
	#index .mainBnr .controls_next {
		display:none;
	}
	#index .bnrs .subBnr {
		width: 100%;
		aspect-ratio: auto;
	}
	#index .bnrs .subBnr .swiper ul li a {
    padding: var(--sep-double);
    height: auto;
	}
	#index .bnrs .mainItem {
    position: relative;
    width: 100%;
	}
	#index .mainItem dl dd ul li a
	{
		min-height:90px;
	}
	#index .products #prdtItem ul {
		gap: var(--sep-half);
	}
	#index .products #prdtItem ul li {
		width:calc((100% -  (var(--sep-half) * 1)) / 2);
	}
	#index .products #prdtItem li a {
		min-height: 100px;
	}
	#index .products #prdtItem li a .name {
		padding-bottom: var(--sep-half);
	}
	#index .guide #guideItem ul {
		gap:var(--sep-half)
	}
	#index .guide #guideItem li {
		width:100%;
	}
	#index .guide #guideItem li a.on {
		border-radius: 2rem 2rem 0 0;
	}
	#index .guide #guideItem li a.on i {
		transform: rotate(180deg);
	}
	#index .guide #guideItem li dl {
		display:none;
		height:auto;
		padding:2rem;
		border-radius: 0 0 2rem 2rem;
	} 
	#index .guide #guideItem li dl dt span {
    display: inline;
    padding: 0;
    color: var(--txt-color-dark) !important;
    background: none;
    border: none;
		border-radius: 0;
	}
	#index .guide #guideItem li dl dt .thumb2 {		
    position: relative;
    right: auto;
    bottom: auto;
	}
	#index .cscenter > div {
		flex-flow: column;
		padding: var(--sep-double);
		gap:var(--sep-comm);
		background-color: var(--bg-color-sky);
		border-radius: 2rem;
	}
	#index .cscenter dl {
		display: flex;
		justify-content: space-between;
		align-items:center;
		padding:0;
	}
	
	#index .cscenter dl dt {
		display: flex;
		align-items: center;
		gap:var(--sep-min);
		padding-bottom:0;
	}
	#index .cscenter dl dd {
		font-size:1.6rem;
	}
	#index .cscenter .cs_faq {
		padding: var(--sep-double);
	}
	#index .reqread > div {
		flex-wrap: wrap;
	}
	#index .reqread dl {
		padding:var(--sep-comm);
		text-align: left;
		align-content: start;
	}
	#index .reqread dl:not(.m_w100) {
		width:calc(50% - (var(--sep-comm) / 2));
	}
	#index .reqread dl small {
		display: block;
		margin-top:var(--sep-min);
		text-align:right;
	}
	#index .latest {
		flex-flow:column;
	}
	#index .latest .lt__notice ul li a {
		padding:var(--sep-comm)
	}
	#index .latest .lt__faq ul {
		flex-wrap: nowrap;
		white-space: nowrap;
		overflow-x: auto;
	}
  #index .latest .lt__faq ul::-webkit-scrollbar {
    height:0;
  }
  #index .latest .lt__faq ul::-webkit-scrollbar-thumb {
    border-radius:50em;
    background-color: var(--line-color-gray200);    
  }
	#index .latest .lt__faq ul li a dl {
			white-space: normal;
	}
	#index .latest .lt__faq ul li a dl {
		padding-bottom:var(--sep-comm)
	}
	#index .app > div {
		flex-flow: column-reverse;
		gap:vaR(--sep-double)
	}

	#index .app > div .txt {
		text-align: center;
	}
	#index .app > div .txt .btns {
		justify-content:center;
	}
  #index .app > div .txt h2 {
    font-size:3.2rem
  } 
	#index .app > div .img img {
		width:10rem;
		height:10rem;
		border-radius:2rem;
	}

	#index .guide #guideItem li a
	{
		color:black;
		/*background-color:white;*/
	}

	#index .guide #guideItem li dl {
		border: 2px solid;
		background:white !important
	}
}



/**************************
LOGIN 
**************************/
#login {
	
}
#login .titleBox span
{
	font-size: 1.6rem;
}

#login .boundary{
	margin-top:5rem;
}

#login .contents {
	width:43rem;
	max-width:100%;
	margin:0 auto;
	/*padding: var(--sep-max) var(--sep-double);
	background: #fff;
	border-radius: 2rem;*/
}
#login .login__sns p {
	font-size:1.6rem;
	font-weight: var(--txt-medium);
	color:var(--txt-color-dark);	
}
#login .login__sns .sns__btns {
	padding: 3rem;
	gap:1rem;
}
#login .login__sns .sns__btns button {
	width:6rem;
	height: 6rem;
	border-radius: 50em;
	font-size:3rem;
}
 #login .login__sns .sns__btns button.naver_btn {
	color:#fff; 
	background-color: #23C411;
 }
 #login .login__sns .sns__btns button.kakao_btn {
	color:#2A2323; 
	background-color: #FFEB00;
 }
#login .login__sep {
	position: relative;
	font-size: 1.6rem;
	color: var(--txt-color-light);
	z-index:1;
}
	#login .login__sep::before {
		content: "";
		position: absolute;
		top:50%;
		left: 0;
		right: 0;
		display: block;
		width:100%;
		height: 1px;
		background-color: var(--color-gray-300);
		z-index: -1;
	}
#login .login__sep span {
	position:static;
	display:block;
	width:3em;
	margin:0 auto;
	z-index: 2;
	background: #fff;
}
#login .login__form {
	padding: 3rem 1.5rem;
}
#login .login__form .form__input {
	margin-bottom:1rem;
}
	
#login .login__form .form__input {
	position: relative;
}
#login .login__form .form__input label {
	position: absolute;
	left: 0.5em;
	height: 100%;
	color: var(--color-main);
	font-size:2rem;
	align-content: center;
}
#login .login__form .form__input .input_cst {
	padding:1em 1em 1em 3em;
	background: var(--bg-color-gray););
}
#login .login__tail {
	margin-top:2rem;
}
#login .login__tail a {
	font-size:1.6rem;
	font-weight: var(--txt-medium);
	color:var(--txt-color-dark)
}
#login .login__tail a.color_main {
	color:var(--color-main)
}
.g-recaptcha div {
	margin: 0 auto;
}


/**************************
FORGOT PASSWORD 
**************************/

#forgotPW {
	background-color: var(--bg-color-sky);
}
#forgotPW .contents {
	width:43rem;
	max-width:100%;
	margin:0 auto;
	padding: var(--sep-max) var(--sep-double);
	background: #fff;
	border-radius: 2rem;
}
#forgotPW .forgotpw__form {
	padding: var(--sep-comm) 0 0;
}
#forgotPW .forgotpw__form .form__input {
	margin-bottom:1rem;
}
	
#forgotPW .forgotpw__form .form__input {
	position: relative;
}
#forgotPW .forgotpw__form .form__input label {
	position: absolute;
	left: 0.5em;
	height: 100%;
	color: var(--color-main);
	font-size:2rem;
	align-content: center;
}
#forgotPW .forgotpw__form .form__input .input_cst {
	padding:1em 1em 1em 3em;
	background: var(--bg-color-gray););
}
#forgotPW .forgotpw__tail {
	margin-top:2rem;
}
#forgotPW .forgotpw__tail a {
	font-size:1.6rem;
	font-weight: var(--txt-medium);
	color:var(--txt-color-dark)
}
#forgotPW .login__tail a.color_main {
	color:var(--color-main)
} 

/**************************
REGISTER 
**************************/
#register {
	margin-top: 5rem;
}
#register .contents {
	width:56.6rem;
	max-width:100%;
	margin:0 auto;
}
#register article {
	padding-bottom:3rem;
	background: #fff;
	border-radius: 2rem;	
}
#register .step__chk dl {
	margin-bottom:0.8em;
	padding:1em;
	font-size:1.4rem;	
	text-align:left;
	background:var(--color-gray-100);
	border-radius:0.5em;
}
#register .step__chk .check_cst input[type="checkbox"] + label {
	position: relative;
	width: 100%;
	padding: 1em;
	border-radius: 0.5rem;
	color: var(--txt-color-light);
	font-size: 1.6rem;
	background: #fff;
	border: 1px solid transparent;
	cursor: pointer;
}
#register .step__chk dt .check_cst input[type="checkbox"]:checked + label {
	color:var(--color-point);
	border: 1px solid var(--color-point);
}
#register .regist__step01 dd {
	height:7em;
	margin-top:0.5em;
	padding:0 1em;
	overflow-y:overlay;
}
#register .regist__step01 dd::-webkit-scrollbar {
	width:5px;		
	background-color:transparent;
}
#register .regist__step01 dd::-webkit-scrollbar-thumb {
	width:3px;		
	border-radius:5em;
	background-color:#DBE0E9;
}
#register .regist__step01 dd::-webkit-scrollbar-track {
	width:3px;		
	background-color:transparent;		
} 
#register .regist__step02 .input_cst {
	background-color: var(--color-gray-100);
}
#register .regist__step03 dd {
}

#register .regist__step03 dd input{
background-color: var(--color-gray-100);
}


/**************************
MYPAGE 
**************************/
#mypage .contents {
	max-width: 100%;
	margin: 0 auto;
}
#mypage .contents h3 b img {
	height:1.4em;
    vertical-align: top;
}
#mypage #tabLink {
	position:sticky;
	top:10rem;
	width: 25rem;
	background: #fff;
	border-radius: 2rem;
	z-index: 999;
	box-shadow: 0 0 1.5rem 0 rgba(0,0,0,.1);
	overflow:hidden;
}
#mypage #tabLink li:not(:last-child) {
	border-bottom:1px solid var(--line-color-gray);
}
#mypage #tabLink a {
  display:block;
	padding:2rem;
}
#mypage #tabLink a:hover {
  color:var(--color-main);
	background-color:var(--bg-color-sky);
}
#mypage #tabLink a span {
	
	display: flex;
	align-items: center;
	gap: 1ex;
}
#mypage #tabLink a img {
	height:1.6em;
}
#mypage article {
	padding-top:4rem;
	margin:0;
}
#mypage article:first-child {
	padding-top:0;
}
#mypage .mypage__password .input_cst {
	background-color: var(--color-gray-100);
}
#mypage .mypage__sns button {
	width:49%;
	padding:1em 1.5em;
	text-align: left;
	font-size:1.6rem;
	background-color: var(--bg-color-sky);
	border:1px solid transparent;
	border-radius: 1rem;
}
#mypage .mypage__sns button:hover {
	border-color: var(--color-main);
	box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2)
}
#mypage .mypage__sns button i {
	font-size:2em;
	vertical-align: middle;
	transform: translateY(-1px);
}
	#mypage .mypage__sns button i.xi-kakaotalk {color:#fac000}
	#mypage .mypage__sns button i.xi-naver {color:#23C411}

@media screen and (max-width:767px) {
	#mypage .contents {
		flex-flow: column;
	}
	#mypage #tabLink {
		width: 100%;
		flex-flow: row;
		padding: 0;
		gap: 1px;
		overflow: hidden;
	}
	#mypage #tabLink li {
		width:100%;
		align-content: center;
		background-color: rgba(239, 242, 255, 0.3);
		backdrop-filter: blur(10px);
	}
	#mypage #tabLink li a {
    padding: var(--sep-comm);
	}
	#mypage #tabLink li a span {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		line-height: 1.2;
	}
	#mypage #tabLink li a span .ri-arrow-right-s-line {
		display: none;
	}

  #mypage .mypage__point .container {
    padding: 1em 1.5em;
    font-size: 1.4rem;
    border-radius: 0.5rem;
    background-color: #F4F9FD;
  }
  #mypage .mypage__sns .flex_btw {
    
    gap:1ex;
  }
  #mypage .mypage__sns button {
    width:100%;
  }
}


/**************************
POINT 
**************************/
#point {
	/*background-color: var(--bg-color-sky);*/
}
#point .container {
	background-color: var(--color-gray-100);
	border-radius: 0.5rem;
}
#point .contents {
	width:87.2rem;
	max-width:100%;
	margin:0 auto;
}
#point .board__list {
}
#point .board__list .list_head, 
#point .board__list li,
#point .board__list .list_head > .flex_btw,
#point .board__list li > .flex_btw {
  gap: var(--sep-comm);
  border-radius: 1rem;
}
.board__list .list_head span {
	color: var(--txt-color-light) !important;
	font-weight: var(--txt-regular) !important;
}
#point .board__list .point {
	width:8em;
	font-weight: var(--txt-semibold);
}
#point .board__list li.plus {
	border-radius:unset
}
#point .board__list li.plus .point {
	color:var(--color-main)
}
#point .board__list li.minus {
	background-color: #fdf2f3;
}
#point .board__list li.minus .point {
	color:var(--color-red)
}
#point .board__list .cate {
	width:5em;
}
#point .board__list .detail {
	width:20em;
	color:var(--txt-color-dark);
}
#point .board__list .time {
	width:11em;
}
@media screen and (max-width:767px) {
  #point .board__list .list_head{
    display:none;
  }
	#point .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;
		padding: 2rem 1rem;
	}
  #point .board__list {
    border: none;
  }
	#point .board__list ul {
		background-color: #fff;
		padding: 0;
		font-size: 1.4rem;
		background-color: #fff;
		border-radius: 0.5rem;
	}
  #point .board__list li {
    align-items: baseline;
  }
	#point .board__list li > .flex_btw {
		flex-flow: column;
		gap: 1ex;
	}
  #point .board__list li > .flex_btw {
    flex-flow: column;
    gap: 3px;
  }
    
    #point .board__list li > .flex_btw:last-child {
      /* text-align: right; */
      align-items: start;
    }
  #point .board__list span {
    width:auto !important;
  }
    #point .board__list li > .flex_btw:first-child span {
      text-align: left;
      /* font-size: 2rem; */
    }
    #point .board__list li > .flex_btw:last-child span {
      text-align: left;
    }
		#point .board__list .point {
			font-size: 1.3em;
		}
		#point .board__list li > .flex_btw:last-child span.time {
			display: block;
			text-align: right;
			color: var(--txt-color-light);
		}

	#point .board__list li > .flex_btw:first-child {
		text-align: left;
		align-items: start;
		word-break: keep-all;
		white-space: nowrap;
	}

		#point .board__list li > .flex_btw:first-child span {
			text-align: left;
		}

	#point .board__list li > .flex_btw:last-child {
		text-align: right;
		align-items: end;
	}
		#point .board__list li > .flex_btw:last-child span {
			text-align: right;
		}
}


/**************************
ORDER LIST 
**************************/
#order_list .board__list .num {
	width:14em;
}
#order_list .board__list .price {
	width:10em;
}
#order_list .board__list .status {
	width:6em;
}
#order_list .board__list .paytype {
	width:6em;
}
#order_list .board__list .time {
	width:12em;
}
#order_list .board__list .detail {
	width:6em;
}
#order_list .list__login {
	width:49%;
}
#order_list .list__login dl {
	gap:1em;
	padding: 1rem;
}
#order_list .list__login dd {
	color:var(--txt-color-dark)
}
#order_list .list__info {
	width:49%;
}
@media screen and (max-width:767px) {
	#order_list .board__list ul li {
		position: relative;
		flex-wrap: wrap;
		padding: 2.5rem 2rem;
		gap: 0.5ex 0;
		/*border-radius: 2rem;*/
		margin-bottom: 5px;
		/*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
		transition: box-shadow 0.3s ease;*/
	}
	
  #order_list .board__list .item_tit {
    color: var(--txt-color-light);
  }
  #order_list .board__list .num {
    width:100%;
    padding-bottom: 1em;
    text-align: left;
    font-size: 1em;
    font-weight: var(--txt-semibold);
    border-bottom: 1px solid #cad9e5;
    margin-bottom: 1ex;
  }
  #order_list .board__list .price {
    width:50%;
    text-align: left;
  }
  #order_list .board__list .paytype {
    width:50%;
    text-align: left;
  }
  #order_list .board__list .status {
    width:50%;
    text-align: left;
  }
  #order_list .board__list .time {
    width:50%;
    text-align: left;
    white-space: nowrap;
  }
  #order_list .board__list .detail {
    position: absolute;
    top:2rem;
    right:2rem;
    width:auto;
  }
  #order_list .list__login {
    width:100%;
    margin-bottom:2.4rem;
  }
  #order_list .list__info {
    width:100%;
  }
  #order_list .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;
    padding: 2rem 1rem;
  }
}

/**************************
CART
**************************/
#cart .board__list li {
  position:relative;
  background: #fff;
}
.board__list ul li.empty {
	text-align: center;
	padding: 10rem 0 !important;
	background: #fff;
	color: black;
	opacity: 0.6;
}
#cart .board__list .name {
	width:calc(100% - 10em - 20em - 12em - 3em);
	padding-left: var(--sep-comm);
	gap:1ex;
}
#cart .board__list .name .thumb {
  position:absolute;
  left: var(--sep-comm);
  display:inline-block;
  width:4rem;
  height:4rem;
  overflow:hidden;
}
#cart .board__list .price {
	width:10em;
} 
#cart .board__list .amount {
	width:20em;
	gap:0.5ex;
} 
#cart .board__list .amount i {
	color:var(--color-main);
	font-size:1.2em;
}
#cart .board__list .amount .amount_val {
    width: 2.5em;
    text-align: center;
}
#cart .board__list .val_wrap {
	background-color:#fff;
	border-radius: 0.5rem;
	border:1px solid var(--line-color-gray);
}
#cart .board__list .amount button {
	width: 3.6rem;
	height: 3.6rem;
	background-color: #fff;
	border-radius: 0.5rem;
	border: 1px solid var(--color-gray-200);
}
#cart .board__list .amount button.count_10 {
	width: 3.6rem;
	height: 3.6rem;
	aspect-ratio: 1 / 1;
	font-size: .9em;
	color: #fff;
	background-color: var(--color-main);
	border-color: transparent;
	border-radius: 0.5rem;
	box-shadow: none;
}
#cart .board__list .amount button.count_10.minus {  
	color: #fff;
	background-color: var(--txt-color-light);
}
#cart .board__list .total {
	width:12em;
} 
#cart .board__list .delete {
	width:3em;
} 
#cart .board__list .delete button {
	color:var(--txt-color-light);
	font-size:1.5em;
} 
#cart .cart__data {
	width:49%;
}
#cart .cart__payment {
	width:49%;
}

#cart .cart__payment .payment_methods .paym_def {
	padding:2rem 1.8rem;
	border:1px solid var(--line-color-blue);
  background-color: var(--bg-color-sky);
	border-radius: 2rem;
}
#cart .cart__payment .payment_methods .paym_etc a {
  display: block;
  width: calc((100% - var(--sep-half)) / 2);););););
  padding:1.6rem;
  border-radius: 2rem;
  border:1px solid var(--line-color-gray);
  background-color: #ffffffc2;
  cursor:pointer;
}
#cart .cart__payment .payment_methods .paym_etc a:hover {
  background-color: var(--bg-color-sky);
}
#cart .cart__payment .payment_methods .paym_etc dl dt {
  color:var(--color-main)
}
#cart .cart__payment .payment_methods .paym_etc dl dt small {
  color:var(--txt-color-gray)
}
#cart .cart__payment .payment_methods .paym_etc a.naver {
  border-color: rgba(5, 198, 86, 0.5);
}
#cart .cart__payment .payment_methods .paym_etc a.naver:hover {
  background-color: rgba(5, 198, 86, 0.05);;
}
#cart .cart__payment .payment_methods .paym_etc a.naver dt {
  color:#05C656 
}
#cart .payment_detail {
	gap: 1.5rem;
	font-size: 1.7rem;
}
#cart .cart__payment .items_cnt {
    flex-wrap: wrap;
    gap: 0.5rem;
}
#cart .payment_detail dl:not(:last-of-type) {
	padding-bottom: 1.5rem;
	border-bottom: 1px dashed var(--color-gray-300);
}
#cart .cart__payment .payment_methods .paym_etc a.active {
	background-color: white;
	border-color: var(--txt-color-light);
	border: 2px solid var(--txt-color-light);
}

/*주문 안내사항 modal*/
#modal__orderInfo .modal_inner {
	width:48rem;
	max-width: calc(100% - 2rem);
}
#modal__orderInfo .modal_main > .flex_nml {
	gap:1.5ex;
}
#modal__orderInfo .modal_main .container {
	padding:1ex;
	line-height: 1.6em;;
	background-color:Var(--bg-color-sky);
}
@media screen and (max-width:768px) {
	#cart .container {
		width: 100%;
		padding: 2rem 1rem;
		margin-bottom: 1.5rem;
		font-size: 1.6rem;
		background-color: var(--color-gray-100);
		border-radius: 0.5rem;
		border: 1px solid transparent;
	}

	#cart .container.container_line {
		padding:1.5rem;
	}

	#cart .container.container_redColor {
		padding:1.5rem;
		color: #fff;
		font-size: 1.8rem;
		background-color: var(--color-red);
	}

	#cart .board__list ul {
		gap: unset;
		border-radius: unset;
		background-color: #fff;
		border-radius: 0.5rem;
		font-size:1.45rem;
	}

	
	#cart .board__list li {
		position: relative;
		padding: 2.4rem;
		flex-flow: column;
		justify-content: flex-start;
		gap: 0.5ex;
		position: relative;
		padding: 1.5rem 1.5rem 1.5rem 7.5rem;
		flex-flow: column;
		justify-content: flex-start;
	}

	#cart .board__list .name {
		width: 100%;
		padding-left: 0;
		justify-content: flex-start;
		font-size: 1.15em;
		font-weight: var(--txt-medium);
		width: 100%;
		padding-left: 0;
		justify-content: flex-start;
		font-size: 1.1em;
		font-weight: var(--txt-semibold);
	}

		#cart .board__list .name .thumb {
			position: absolute;
			left: 2rem;
			top: 2rem;
			width: 30px;
			height: 30px;
		}



	#cart .board__list .price {
		width: 100%;
		text-align: left;
	}

	#cart .board__list .amount {
		width: 100%;
		margin-top: 1.5ex;
		margin-left: -11rem;
		text-align: left;
		justify-content: flex-start;
	}

		#cart .board__list .amount i {
			color: var(--color-main);
			font-size: 1.2em;
		}

	#cart .board__list .total {
		position: absolute;
		bottom: 2rem;
		right: 2rem;
		width: auto;
		font-size: 1.1em;
	}

	#cart .board__list .delete {
		position: absolute;
		top: 2rem;
		right: 2rem;
		width: auto;
	}

	#cart .cart__data {
		width: 100%;
		margin-bottom: 1.5rem;
	}

	#cart .cart__payment {
		width: 100%;
	}


  #cart .cart__data {
    width:100%;
    margin-bottom:1.5rem;
  } 
  #cart .cart__payment {
    width:100%;
  }
  #cart .cart__payment .payment_methods .paym_def {
    flex-flow: column;
    align-items: normal;
    gap: 0;
    background: #F4F9FD;
  }
  #cart .cart__payment .payment_methods .paym_def small {
    display: block;
    text-align: right;
  }
}




/**************************
ORDER  
**************************/
#order article {
  position: relative;
}
#order .order__left {
  width:calc(100% - 34rem - var(--sep-max));
}

#order .order__summ .info_product {
	position:relative;
	width:100%;
}
#order .order__summ .summ_wrap {
  width:100%;
}
#order .order__summ .summ_wrap .name {
	margin-bottom: 1ex;
	padding-bottom: 1ex;
	font-size:2.4rem;
	font-weight: var(--txt-semibold);
	border-bottom: 1px solid var(--line-color-gray200);
}
#order .order__summ .summ_wrap dl {
	gap:1em;
  color:var(--txt-color-dark)
}
	#order .order__summ .summ_wrap dl:not(last-type-of){
		margin-bottom:1ex;
	}

#order .order__kakao {
  color:#fff;
  border-radius:2rem;  
  background: #1734C6 url(../img/bg__talk.svg) no-repeat right 70%;
  background-size: auto 65%;
}
#order .order__kakao a {
  background-color: #F8D00D;
  border-radius: 1rem;
}
#order .order__kakao a:hover {
  box-shadow:0 0 1.5rem 0 #040b2d;
}
#order .order__payment .sheet_payment .paym_def {
	padding:2rem 1.8rem;
  border:1px solid var(--line-color-blue);
  background-color: #F4F9FD;
  border-radius: 2rem;
}
#order .order__payment .sheet_payment .paym_etc a {
  display: block;
  width:25%;
  padding:1.6rem;
  border-radius: 2rem;
  border:1px solid var(--line-color-gray)
}
#order .order__payment .sheet_payment .paym_etc a:hover {
  background-color: var(--bg-color-sky);
}
#order .order__payment .sheet_payment .paym_etc dl dt {
  color:var(--color-main)
}
#order .order__payment .sheet_payment .paym_etc dl dt small {
  color:var(--txt-color-gray)
}
#order .order__payment .sheet_payment .paym_etc a.naver {
  border-color: rgba(5, 198, 86, 0.5);
}
#order .order__payment .sheet_payment .paym_etc a.naver:hover {
  background-color: rgba(5, 198, 86, 0.05);;
}
#order .order__payment .sheet_payment .paym_etc a.naver dt {
  color:#05C656 
}

#order .order__option .sheet_option dl {
  position: relative;
  width:calc((100% - var(--sep-half)) / 2);
	padding:2rem;
  background-color: #fff;
  border-radius: 2rem;
  border:1px solid var(--line-color-gray);
  cursor:pointer;
  transition: all 0.5s;
}
#order .order__option .sheet_option dl:hover {
  border:1px solid var(--color-main);
}
#order .order__option .sheet_option dt .flex_nml {
  gap:0.5ex;
}
#order .order__option .sheet_option dt s {
	color:var(--txt-color-light)
}
#order .order__option .sheet_option dd {
  color:var(--txt-color-light);
}
#order .order__option .sheet_option dd span {
  position: absolute;
  top:0;
  right:0;
  padding: var(--sep-min) var(--sep-half);
  color: #fff;
  background: var(--color-main);
  border-radius: 0 2rem;
  transform: translateY(50%);
  transition: all .5s;
  /* display: none; */
  height: 0;
  opacity: 0;
}
#order .order__option .sheet_option dl.added {
  border:1px solid var(--color-main)
}
#order .order__option .sheet_option dl.added dd .ri-add-circle-line {
  display: none;;
}
#order .order__option .sheet_option dl.added dd span {
  display: block;
  height: auto;
  transform: translateY(0);
  transition: all .5s;
  opacity: 1;
}

#order .order__info .info_tab .tab_list {
  border-radius: 2rem 2rem 0 0;
  background-color: var(--bg-color-gray);
}
#order .order__info .info_tab .tab_list li {
	width:33.33%;
  border-radius: 2rem 2rem 0 0;
	background: var(--bg-color-gray);
}
#order .order__info .info_tab .tab_btn {
	width:100%;
	padding: 1em 0;
	color:var(--color-main);
	font-size:1.6rem;
	color:var(--txt-color-dark);
	background-color: var(--color-gray-200);
	border-radius: 2rem 2rem 0 0;
}
	#order .order__info .info_tab .tab_btn.on {
		color:#fff;
		background:var(--color-main);
	}
#order .order__info .info_tab .tab_cont {
	display:none;
	font-size:1.5rem;
	line-height: 1.6em;;
	border-radius:0 0 0.5rem 0.5rem;	
}
	#order .order__info .info_tab .tab_cont.on {
		display:block;
	}

#order .order__info .info_tab .tab_detail dl {
	margin-bottom:1.5em;	
}
#order .order__info .info_tab .tab_detail dt {
	font-weight: var(--txt-semibold);
}
#order .order__info .info_tab .tab_detail dd a {
	text-decoration: underline;
}
#order .order__info .info_tab .tab_detail dd .dot_list li {
	padding-left: 1em;
	margin-left: -0.5em;
	margin-top:0.5ex;
	text-indent: -0.5em;
}
#order .order__info .info_tab .tab_detail dd .num_list li {
	padding-left: 1.65em;
	margin-top: 0.5ex;
	text-indent: -1.65em;
}
#order .order__info .info_tab .tab_detail .inner_list {
	color:var(--txt-color-dark)
}
#order .order__info .info_tab .tab_review ul li {
	padding: 2rem;
	font-size:1.4rem;
	border: 1px solid var(--line-color-gray);
	background: #fff;
	border-radius: 2rem;
}
#order .order__info .info_tab .tab_review ul li .hd_star {
	font-size:1.8rem;
}
#order .order__info .info_tab .tab_review ul li .reivew_main {
	margin-top: 1ex;
	font-size: 1.6rem;
	line-height: 1.5em;
}
#order .order__info .info_tab .tab_review ul li .review_user {

}
#order .order__info .info_tab .tab_review ul li .user_id {
	font-size: 1.4rem;
  font-weight: var(--txt-regular);
	color:var(--txt-color-dark);
}
#order .order__info .info_tab .tab_review ul li .user_notify {
	font-size: 1.2rem;
	color:var(--txt-color-light);
}
#order .order__info .info_tab .tab_review ul li .user_notify button {
	color:var(--txt-color-light);
}
#order .order__info .info_tab .tab_review ul li .time {
	margin-right: 1em;;
	font-size:1.4rem;
	color:var(--txt-color-light);
}



#order .order__sheet {
  position: sticky;
  top: 10rem;
  width:34rem;
  /*height: calc((var(--vh, 1vh) * 100) - 10rem - 3rem);*/
  border-radius: 2rem;
  background-color:#fff;
  flex-shrink: 1;
  box-shadow: 0 0 3rem 0 rgba(0, 0, 0, 0.07);
  overflow: hidden;
}
#order .order__sheet .sheet_top {
  padding:2rem 2rem 0rem 2rem;
}  
#order .order__sheet .sheet__naver {  
  width:100%;
  padding:1.5rem;
  background-color: rgba(5, 198, 86, 0.05);
  border: 1px solid rgba(5, 198, 86, 0.5);
  border-radius: 1.5rem;
}
#order .order__sheet .sheet__naver .naver_icon {
	width:4rem;
}
#order .order__sheet .sheet__naver small {
  color:var(--txt-color-gray)
}
#order .order__sheet .sheet__naver p {
  margin-top:0.25rem;
}
#order .order__sheet .sheet__naver p b {
  color:#05C656
}
#order .order__sheet .sheet_noti {
}
#order .order__sheet .sheet_noti dd {
  color:var(--txt-color-dark)
}
#order .order__sheet .sheet__bottom {
}  
#order .order__sheet .sheet_detail {
  padding:2rem;
}
#order .order__sheet .sheet_detail .detail_list {
  height: calc((var(--vh, 1vh) * 50) - 10rem - 3rem);
  overflow-y: auto;
}
#order .order__sheet .sheet_detail .detail_list dl {
  position: relative;
  border-radius: 2rem;
  background-color: #F4F9FD;
  border:1px solid transparent;
  transition: all 0.5s;
}
#order .order__sheet .sheet_detail .detail_list dl:hover {
  border:1px solid var(--line-color-blue)
}
#order .order__sheet .sheet_detail .detail_list dt {
}
#order .order__sheet .sheet_detail .detail_list dt s {
  color:var(--txt-color-light);
}
#order .order__sheet .sheet_detail .detail_list dd {}
#order .order__sheet .sheet_detail .detail_list dd .amount {
	width:20em;
	gap:0.5ex;
} 
#order .order__sheet .sheet_detail .detail_list dd .amount i {
	color:var(--color-main);
	font-size:1.2em;
}
#order .order__sheet .sheet_detail .detail_list dd .amount .val_wrap {
  height: calc(100% + 2px);
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0 3px 0 rgb(44 76 241 / 16%);
  overflow: hidden;
}
#order .order__sheet .sheet_detail .detail_list dd .amount .amount_val {
  width:2.5em;
  text-align: center;
}
#order .order__sheet .sheet_detail .detail_list dd .amount button {
  width: 3rem;
  height: 3rem;
  background-color: #fff;
  border:1px solid var(--color-gray-200)
}
#order .order__sheet .sheet_detail .detail_list dd .amount button.count_10 {
  width:auto;
  height:100%;
  aspect-ratio: 1 / 1;
  font-size:.9em;
  color:#fff;
  background-color: var(--color-main);
  border-color: transparent;
  border-radius: 0.5rem;
  box-shadow: none;
}
#order .order__sheet .sheet_detail .detail_list dd .amount button.count_10.minus {  
  color: #fff;
  background-color: var(--txt-color-light);
}
#order .order__sheet .sheet_detail .detail_list dd.del_list {
  position:absolute;
  top:var(--sep-half);
  right:var(--sep-half);
}
#order .order__sheet .sheet_detail .detail_total {
  padding:var(--sep-comm) 0;
  font-size:1.5rem;
  border-bottom: 1px solid var(--line-color-gray);
}
#order .order__sheet .sheet_detail .detail_total dt {
  color:var(--txt-color-dark);
  font-weight: var(--txt-light);
}
#order .order__sheet .sheet_detail .all_total dt {
  font-weight: var(--txt-light);;
}
#order .order__sheet .sheet_detail .all_total dd {
  line-height:1.4;
}
#order .order__sheet .sheet_detail .all_total dd span {
  padding:.5ex 1ex;
  border:1px solid var(--line-color-blue);
  border-radius: 3px;
}
#order .order__sheet .sheet_btns {
  border-top:1px solid var(--line-color-gray)
}
#order .order__sheet .sheet_btns .buy {
  color:#fff;
  background-color: var(--color-main);
}
#order .order__sheet .sheet_btns .buy:hover {
  background-color: var(--txt-color-def)
}


#fixBarOrder {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 3rem 0 rgba(0, 0, 0, 0.15);
  z-index: 99999;
  backdrop-filter: blur(10px);
}

#modal__order_naverstore .modal_inner {
	width:55rem;
	max-width:94%;
	border-radius:3rem;
}
#modal__order_naverstore .modal_inner > .btn_modalClose {
	color:var(--txt-color-light);
}
#modal__order_naverstore .modal_main {
	padding:var(--sep-max);
}
#modal__order_naverstore .modal_main h2 {
	border-bottom:2px dashed var(--line-color-gray); 
}
#modal__order_naverstore .modal_main h2 b {
	color:#05C656;
}
#modal__order_naverstore .modal_main h3 img {
	width:4.6rem;
	height:4.6rem;
	object-fit:contain;
}
#modal__order_naverstore .modal_main ul.item_list li {
	width:calc(50% - (var(--sep-half) / 2));
}
#modal__order_naverstore .modal_main ul.item_list li a {
	width:100%;
	border:1px solid var(--line-color-gray);
	border-radius:1.5rem;
}
#modal__order_naverstore .modal_main .inform {
	width:100%;
	padding:2rem;
	background:#F3F4F5;
	border-radius:1.5rem;
}
#modal__order_naverstore .modal_main .inform .dot_list {
	color:var(--txt-color-gray);
	}
#modal__order_naverstore .modal_main .inform  .dot_list li {
	padding-left: 1em;
	margin-left: -0.5em;
	margin-top:0.5ex;
	text-indent: -0.5em;
	line-height:1.4;
}
#modal__order_naverstore .modal_main .otherpay a {	
	display:block;
  width: calc(50% - (var(--sep-half) / 2));
	border:1px solid var(--line-color-gray);
	border-radius:1.5rem;
}
#modal__order_naverstore .modal_main .otherpay small {
	color:var(--txt-color-light);
}
#modal__order_naverstore .modal_main .cslink {
	border:1px dashed var(--line-color-gray);
	border-radius:1.5rem;
}

#order article {
  position: relative;
}
#order .order__left {
  width:calc(100% - 34rem - var(--sep-max));
}

#order .order__summ .info_product {
	position:relative;
	width:100%;
}
#order .order__summ .info_product .thumb {
	position: relative;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	align-items: normal;
	width: 100%;
	aspect-ratio: 367 / 226;
	margin:0 auto;
	font-size: 2rem;
	padding: 3rem 2rem 1.5rem 3rem;
	align-content: center;
	border-radius: 2rem;
	border: 3px solid transparent;
	background: linear-gradient(white, white) padding-box, var(--border-gradient) border-box;
	overflow: hidden;
	background: #fff;
	z-index:1;
}
#order .order__summ .info_product .thumb img.icon {
  width: 8rem;
  height: 8rem;
  object-fit: contain;
  margin: 0 auto 0 0;
  border-radius: 0;
}
#order .order__summ .info_product .thumb img.bg {
	position:absolute;
	top: 50%;
	right: -50%;
	opacity: 0.035;
	width: 27rem;
	height: 25rem;
  object-fit: contain;
	margin: 0 auto;
  border-radius: 0;
	transform: translateY(-50%) translateX(-50%);
	z-index:-1;
}
#order .order__summ .info_product .thumb .logo {
	position:absolute;
	top: 0.5rem;
	right: 1.8rem;
	width: 6rem;
}

#order .afreeca .info_product .logo strong {
	position: absolute;
	top: 0%;
	right: 0;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 4em;
	height: 3em;
	font-size: 1.8em;
	color: #fff;
	background: var(--color-red);
	border-radius: 0 0 0 1.5rem;
	width: 4em;
	height: 3em;
	font-size: 0.9em;
}

#order .afreeca .info_product .logo strong small {
	animation: move_down 1s ease-in-out infinite;
}

#order .afreeca .info_product .logo {
	top: 0 !important;
	right: 0 !important;
}

#order .order__summ .summ_wrap {
  width:100%;
}
#order .order__summ .summ_wrap .name {
	margin-bottom: 1ex;
	padding-bottom: 1ex;
	font-size:2.4rem;
	font-weight: var(--txt-semibold);
	border-bottom: 1px solid var(--line-color-gray200);
}
#order .order__summ .summ_wrap dl {
	gap:1em;
  color:var(--txt-color-dark)
}
	#order .order__summ .summ_wrap dl:not(last-type-of){
		margin-bottom:1ex;
	}




#order .order__kakao {
  color:#fff;
  border-radius:2rem;  
  background: #2B4CF1 url(../img/bg__talk.svg) no-repeat right 70%;
  background-size: auto 65%;
}
#order .order__kakao a {
  background-color: #F8D00D;
  border-radius: 1rem;
}
#order .order__kakao a:hover {
  box-shadow:0 0 1.5rem 0 #040b2d;
}
#order .order__payment .sheet_payment .paym_def {
	padding: 2rem 1.8rem;
	border: 1px solid var(--line-color-blue);
	background-color: #2b4cf129;
	border-radius: 2rem;
}
#order .order__payment .sheet_payment .paym_etc a,
#order .order__payment .sheet_payment .paym_etc button {
  display: block;
  /*width:25%;*/
  width:33.333%;
  padding:1.6rem;
  text-align:left;
  border-radius: 2rem;
  border:1px solid var(--line-color-gray);
  cursor:pointer;
}
#order .order__payment .sheet_payment .paym_etc a.active {
	background-color: var(--bg-color-sky);
	border-color: var(--txt-color-light);
}
#order .order__payment .sheet_payment .paym_etc a:hover,
#order .order__payment .sheet_payment .paym_etc button:hover {
  background-color: var(--bg-color-sky);
}
#order .order__payment .sheet_payment .paym_etc dl dt {
  color:var(--color-main)
}
#order .order__payment .sheet_payment .paym_etc dl dt small {
  color:var(--txt-color-gray)
}
#order .order__payment .sheet_payment .paym_etc button.naver {
  border-color: rgba(5, 198, 86, 0.5);
}
#order .order__payment .sheet_payment .paym_etc button.naver:hover {
  background-color: rgba(5, 198, 86, 0.05);;
}
#order .order__payment .sheet_payment .paym_etc button.naver dt {
  color:#05C656 
}

#order .order__option .sheet_option dl {
  position: relative;
  width:calc((100% - var(--sep-half)) / 2);
	padding:2rem;
  background-color: #fff;
  border-radius: 2rem;
  border:1px solid var(--line-color-gray);
  cursor:pointer;
  transition: all 0.5s;
}
#order .order__option .sheet_option dl:hover {
  border:1px solid var(--color-main);
}
#order .order__option .sheet_option dt .flex_nml {
  gap:0.5ex;
}
#order .order__option .sheet_option dt s {
	color:var(--txt-color-light)
}
#order .order__option .sheet_option dd {
  color:var(--txt-color-light);
}
#order .order__option .sheet_option dd span {
  position: absolute;
  top:0;
  right:0;
  padding: var(--sep-min) var(--sep-half);
  color: #fff;
  background: var(--color-main);
  border-radius: 0 2rem;
  transform: translateY(50%);
  transition: all .5s;
  /* display: none; */
  height: 0;
  opacity: 0;
}
#order .order__option .sheet_option dl.added {
  border:1px solid var(--color-main)
}
#order .order__option .sheet_option dl.added dd .ri-add-circle-line {
  display: none;;
}
#order .order__option .sheet_option dl.added dd span {
  display: block;
  height: auto;
  transform: translateY(0);
  transition: all .5s;
  opacity: 1;
}

#order .order__info .info_tab .tab_list {
  border-radius: 2rem 2rem 0 0;
  background-color: var(--bg-color-gray);
}
#order .order__info .info_tab .tab_list li {
	width:33.33%;
  border-radius: 2rem 2rem 0 0;
	background: var(--bg-color-gray);
}
#order .order__info .info_tab .tab_btn {
	width:100%;
	padding: 1em 0;
	color:var(--color-main);
	font-size:1.6rem;
	color:var(--txt-color-dark);
	background-color: var(--color-gray-200);
	border-radius: 2rem 2rem 0 0;
}
	#order .order__info .info_tab .tab_btn.on {
		color:#fff;
		background:var(--color-main);
	}
#order .order__info .info_tab .tab_cont {
	display:none;
	font-size:1.5rem;
	line-height: 1.6em;;
	border-radius:0 0 0.5rem 0.5rem;	
}
	#order .order__info .info_tab .tab_cont.on {
		display:block;
	}

#order .order__info .info_tab .tab_detail dl {
	margin-bottom:1.5em;	
}
#order .order__info .info_tab .tab_detail dt {
	font-weight: var(--txt-semibold);
}
#order .order__info .info_tab .tab_detail dd a {
	text-decoration: underline;
}
#order .order__info .info_tab .tab_detail dd .dot_list li {
	padding-left: 1em;
	margin-left: -0.5em;
	margin-top:0.5ex;
	text-indent: -0.5em;
}
#order .order__info .info_tab .tab_detail dd .num_list li {
	padding-left: 1.65em;
	margin-top: 0.5ex;
	text-indent: -1.65em;
}
#order .order__info .info_tab .tab_detail .inner_list {
	color:var(--txt-color-dark)
}
#order .order__info .info_tab .tab_review ul li {
	padding: 2rem;
	font-size:1.4rem;
	border: 1px solid var(--line-color-gray);
	background: #fff;
	border-radius: 2rem;
}
#order .order__info .info_tab .tab_review ul li .hd_star {
	font-size:1.8rem;
}
#order .order__info .info_tab .tab_review ul li .reivew_main {
	margin-top: 1ex;
	font-size: 1.6rem;
	line-height: 1.5em;
}
#order .order__info .info_tab .tab_review ul li .review_user {

}
#order .order__info .info_tab .tab_review ul li .user_id {
	font-size: 1.4rem;
  font-weight: var(--txt-regular);
	color:var(--txt-color-dark);
}
#order .order__info .info_tab .tab_review ul li .user_notify {
	font-size: 1.2rem;
	color:var(--txt-color-light);
}
#order .order__info .info_tab .tab_review ul li .user_notify button {
	color:var(--txt-color-light);
}
#order .order__info .info_tab .tab_review ul li .time {
	margin-right: 1em;;
	font-size:1.4rem;
	color:var(--txt-color-light);
}



#order .order__sheet {
  position: sticky;
  top: 10rem;
  width:34rem;
  /*height: calc((var(--vh, 1vh) * 100) - 10rem - 3rem + 24px);*/
  border-radius: 2rem;
  background-color:#fff;
  flex-shrink: 1;
  box-shadow: 0 0 3rem 0 rgba(0, 0, 0, 0.07);
  overflow: hidden;

  /*min-height:600px*/
}
#order .order__sheet .sheet_top {
  padding:2rem 2rem 0rem 2rem;
}  
#order .order__sheet .sheet__naver {  
  width:100%;
  padding:1.5rem;
  background-color: rgba(5, 198, 86, 0.05);
  border: 1px solid rgba(5, 198, 86, 0.5);
  border-radius: 1.5rem;
}
#order .order__sheet .sheet__naver .naver_icon {
	width:4rem;
}
#order .order__sheet .sheet__naver small {
  color:var(--txt-color-gray)
}
#order .order__sheet .sheet__naver p {
  margin-top:0.25rem;
}
#order .order__sheet .sheet__naver p b {
  color:#05C656
}
#order .order__sheet .sheet_noti {
}
#order .order__sheet .sheet_noti dd {
  color:var(--txt-color-dark)
}
#order .order__sheet .sheet__bottom {
}  
#order .order__sheet .sheet_detail {
  padding:2rem;
}
#order .order__sheet .sheet_detail .detail_list {
  height: calc((var(--vh, 1vh) * 55) - 10rem - 3rem);
  overflow-y: auto;
	/*border: 1px solid #00000030;*/
	padding: 1rem;
	border-radius: 2rem;
}

	#order .order__sheet .sheet_detail .detail_list.direct {
		height: calc((var(--vh, 1vh) * 55) - 10rem - 15rem);
		overflow-y: auto;
		/*border: 1px solid #00000030;*/
		padding: 1rem;
		border-radius: 2rem;
	}

#order .order__sheet .sheet_detail .detail_list.items {
  display:none;
}
#order .order__sheet .sheet_detail .detail_list.empty {
  display: flex;
  justify-content:center;
  align-items: center;
}
#order .order__sheet .sheet_detail .detail_list.empty div {
	width: 200px;
	text-align: center;
	font-size: 1.5rem
}
#order .order__sheet .sheet_detail .detail_list dl {
  position: relative;
  border-radius: 2rem;
  background-color: #F4F9FD;
  border:1px solid transparent;
  transition: all 0.5s;
}
#order .order__sheet .sheet_detail .detail_list dl:hover {
  border:1px solid var(--line-color-blue)
}
#order .order__sheet .sheet_detail .detail_list dt {
}
#order .order__sheet .sheet_detail .detail_list dt s {
  color:var(--txt-color-light);
}
#order .order__sheet .sheet_detail .detail_list dd {}
#order .order__sheet .sheet_detail .detail_list dd .amount {
	width:20em;
	gap:0.5ex;
} 
#order .order__sheet .sheet_detail .detail_list dd .amount i {
	color:var(--color-main);
	font-size:1.2em;
}
#order .order__sheet .sheet_detail .detail_list dd .amount .val_wrap {
  height: calc(100% + 2px);
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0 3px 0 rgb(44 76 241 / 16%);
  overflow: hidden;
}
#order .order__sheet .sheet_detail .detail_list dd .amount .amount_val {
  width:2.5em;
  text-align: center;
}
#order .order__sheet .sheet_detail .detail_list dd .amount button {
  width: 3rem;
  height: 3rem;
  background-color: #fff;
  border:1px solid var(--color-gray-200)
}
#order .order__sheet .sheet_detail .detail_list dd .amount button.count_10 {
  width:auto;
  height:100%;
  aspect-ratio: 1 / 1;
  font-size:.9em;
  color:#fff;
  background-color: var(--color-main);
  border-color: transparent;
  border-radius: 0.5rem;
  box-shadow: none;
}
#order .order__sheet .sheet_detail .detail_list dd .amount button.count_10.minus {  
  color: #fff;
  background-color: var(--txt-color-light);
}
#order .order__sheet .sheet_detail .detail_list dd.del_list {
  position:absolute;
  top:var(--sep-half);
  right:var(--sep-half);
}

#order .order__sheet .sheet_detail .detail_list dd.del_list button i::before{
	pointer-events:none;
}


#order .order__sheet .sheet_detail .detail_total {
  padding:2rem 0;
  font-size:1.5rem;
  border-bottom: 1px solid var(--line-color-gray);
}
#order .order__sheet .sheet_detail .detail_total dt {
  color:var(--txt-color-dark);
  font-weight: var(--txt-light);
}
#order .order__sheet .sheet_detail .all_total dt {
  font-weight: var(--txt-light);;
}
#order .order__sheet .sheet_detail .all_total dd {
  line-height:1.4;
}
#order .order__sheet .sheet_detail .all_total dd span {
  padding:.5ex 1ex;
  border:1px solid var(--line-color-blue);
  border-radius: 3px;
}

.detail_point .clear-input {
	position: absolute;
	right: 0.5em;
	height: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	color: var(--txt-color-light);
	width: auto;
	height: 100%;
	font-size: 2rem;
	align-content: center;
	display: none;
}

.order__sheet b {
	font-weight: bold !important;
}

#order .order__sheet .sheet_btns {
	border-top: 1px solid var(--line-color-gray)
}
#order .order__sheet .sheet_btns .buy {
  color:#fff;
  background-color: var(--color-main);
}
#order .order__sheet .sheet_btns .buy:hover {
  background-color: var(--txt-color-def)
}


#fixBarOrder {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 3rem 0 rgba(0, 0, 0, 0.15);
  z-index: 99999;
  backdrop-filter: blur(10px);
}

#modal__order_naverstore .modal_inner {
	width:63rem;
	max-width:94%;
	border-radius:3rem;
}
#modal__order_naverstore .modal_inner > .btn_modalClose {
	color:var(--txt-color-light);
}
#modal__order_naverstore .modal_main {
	padding:var(--sep-max);
}
#modal__order_naverstore .modal_main h2 {
	border-bottom:2px dashed var(--line-color-gray); 
}
#modal__order_naverstore .modal_main h2 b {
	color:#05C656;
}
#modal__order_naverstore .modal_main h3 img {
	width:4.6rem;
	height:4.6rem;
	object-fit:contain;
}
#modal__order_naverstore .modal_main ul.item_list li {
	width:calc(50% - (var(--sep-half) / 2));
}
#modal__order_naverstore .modal_main ul.item_list li a {
	width:100%;
	border:1px solid var(--line-color-gray);
	border-radius:1.5rem;
}
#modal__order_naverstore .modal_main .inform {
	width:100%;
	padding:2rem;
	background:#F3F4F5;
	border-radius:1.5rem;
}
#modal__order_naverstore .modal_main .inform .dot_list {
	color:var(--txt-color-gray);
	}
#modal__order_naverstore .modal_main .inform  .dot_list li {
	padding-left: 1em;
	margin-left: -0.5em;
	margin-top:0.5ex;
	text-indent: -0.5em;
	line-height:1.4;
}
#modal__order_naverstore .modal_main .otherpay a {	
	display:block;
  width: calc(50% - (var(--sep-half) / 2));
	border:1px solid var(--line-color-gray);
	border-radius:1.5rem;
}
#modal__order_naverstore .modal_main .otherpay small {
	color:var(--txt-color-light);
}
#modal__order_naverstore .modal_main .cslink {
	border:1px dashed var(--line-color-gray);
	border-radius:1.5rem;
}

@media screen and (max-width:767px) {
	#order .order__left {
		width:100%;
		gap:var(--sep-comm);
	}
	#order .order__left .order__summ  {
		flex-flow:column;
		gap:var(--sep-comm);
		margin-bottom:0;
		padding:2.4rem;
		background-color:#F4F9FD;
		border-radius: 2rem;
	}
	#order .order__summ .summ_wrap {
		text-align:center;
	}
	#order .order__summ .summ_wrap .detail {
		width:fit-content;
		margin:0 auto;
	}
	#order .order__left .order__naver {  
		width:100%;
		padding:1.5rem;
		background-color: rgba(5, 198, 86, 0.05);
		border: 1px solid rgba(5, 198, 86, 0.5);
		border-radius: 1.5rem;
	}
	#order .order__left .order__naver .naver_icon {
		width:4rem;
	}
	#order .order__left .order__naver small {
		color:var(--txt-color-gray)
	}
	#order .order__left .order__naver p {
		margin-top:0.25rem;
	}
	#order .order__left .order__naver p b {
		color:#05C656
	}
	#order .order__kakao {
		flex-flow:column;
		gap:var(--sep-double);
	}
	#order .order__kakao .txt_size_lv24 {
		font-size:2rem;
	}
	#order .order__kakao a {
		margin: 0 0 0 auto
	}
	#order .order__payment {
		margin-top:var(--sep-double);
	}
	#order .order__payment .sheet_payment .paym_def {
		flex-flow:column;
		align-items:normal;
		gap:0;
	}
	#order .order__payment .sheet_payment .paym_def small {
		display:block;
		text-align:right;
	}
	#order .order__payment .sheet_payment .paym_etc {
		flex-wrap:wrap;
	}
	#order .order__payment .sheet_payment .paym_etc a,
	#order .order__payment .sheet_payment .paym_etc button {
		width:calc((100% - var(--sep-half)) / 2);
	}
	#order .order__payment .sheet_payment .paym_etc dl {
		gap:0;
	}
	#order .order__option {
		margin-top:var(--sep-double);
	}
	#order .order__option .sheet_option dl {
		width:100%;
	}
	#order .order__info  {
		margin-top:var(--sep-double);
	}
	#order .order__left .order_noti {
		background:var(--bg-color-gray);
    border-radius: 2rem;
	}
	#order .order__left .order_noti dl {
		padding:2rem;
	}
	#order .order__left .order_noti dd {
		color:var(--txt-color-dark)
	}
	
	#order .order__info .info_tab .tab_cont { 
		padding:2.4rem;
		background-color:#F4F9FD;
		border-radius:0  0 2rem 2rem;
	}

	#order .order__sheet {
		position:fixed;
		top:inherit;
		bottom:0;
		left:0;
		right:0;
		width:100%;
		height:auto;
		padding: 2rem 2rem 3rem;
		border-radius:2rem 2rem 0 0;
		box-shadow: 0 -6px 3rem 0 rgba(0, 0, 0, 0.07);
		z-index:999999;
		overflow:visible;
	}
	#order .order__sheet .sheet_detail {
		padding:0;
	}
	#order .order__sheet .sheet_btns {
		border:none;
		gap:1rem; 
	}
	#order .order__sheet .sheet_btns button {
		border-radius:1rem;
	}
	#order .order__sheet .sheet_btns button.cart {
		border:1px solid var(--line-color-gray);
	}
	#order .order__sheet .def_hide:not(.on) {
		display:none;
	}
	#order .order__sheet .sheet_btns:has(.btn_showDetail.on) {
		display:none;
	}
	#order .order__sheet #btnTgle {
		position:absolute;
		top:0.5rem;
		left:0; right:0;
		transition:all 0s;
	}
	#order .order__sheet #btnTgle.on {
		transform:rotate(180deg);
		transition:all 0s;
	}
	
	#order .order__sheet .msg_box {
		position:absolute;
		top:-1rem; 
		left:0; right:0;
		transform:translateY(-100%);
	}
	#order .order__sheet .msg_item {
		width:fit-content;
		padding:1ex 1em;
		margin:1rem auto 0;
		color:#fff;
		font-size:1.6rem;
		border-radius:50em;
		background:rgba(0,0,0,.65);
    backdrop-filter: blur(5px);
	}

	#order .order__sheet.on {
		padding-top:4rem;
		background:#fff;
		z-index:999999999;
	}
 #order:after  {
		display:none;
		content:"";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100dvh;
    height: calc(var(--vh, 1vh)* 100);
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999999;
	}
	#order:has(.order__sheet.on):after {
		display:block;
	}
	#order ~ footer {
		padding-bottom:16rem
	}
	#order .order__left {
		width:100%;
		gap:var(--sep-comm);
	}
	#order .order__left .order__summ  {
		flex-flow:column;
		gap:var(--sep-comm);
		margin-bottom:0;
		padding:2.4rem;
		background-color:#F4F9FD;
		border-radius: 2rem;
	}
	#order .order__summ .summ_wrap {
		text-align:center;
	}
	#order .order__summ .summ_wrap .detail {
		width:fit-content;
		margin:0 auto;
	}
	#order .order__summ .info_product .thumb img.icon {
		width:7rem;
		height:7rem;
	}
	#order .order__left .order__naver {  
		width:100%;
		padding:1.5rem;
		background-color: rgba(5, 198, 86, 0.05);
		border: 1px solid rgba(5, 198, 86, 0.5);
		border-radius: 1.5rem;
	}
	#order .order__left .order__naver .naver_icon {
		width:4rem;
	}
	#order .order__left .order__naver small {
		color:var(--txt-color-gray)
	}
	#order .order__left .order__naver p {
		margin-top:0.25rem;
	}
	#order .order__left .order__naver p b {
		color:#05C656
	}
	#order .order__kakao {
		flex-flow:column;
		gap:var(--sep-double);
	}
	#order .order__kakao .txt_size_lv24 {
		font-size:2rem;
	}
	#order .order__kakao a {
		margin: 0 0 0 auto
	}
	#order .order__payment {
		margin-top:var(--sep-double);
	}
	#order .order__payment .sheet_payment .paym_def {
		flex-flow:column;
		align-items:normal;
		gap:0;
	}
	#order .order__payment .sheet_payment .paym_def small {
		display:block;
		text-align:right;
	}
	#order .order__payment .sheet_payment .paym_etc {
		flex-wrap:wrap;
	}
	#order .order__payment .sheet_payment .paym_etc a {
		width:calc((100% - var(--sep-half)) / 2);
	}
	#order .order__payment .sheet_payment .paym_etc dl {
		gap:0;
	}
	#order .order__payment .sheet_payment .paym_etc dl b{
		font-size:1.5rem;
	}
	#order .order__payment .sheet_payment .paym_etc dt{
		position:relative;
	}
	#order .order__payment .sheet_payment .paym_etc dt .m_item{
		/*position:absolute;
		right:0;*/
	}
	#order .order__option {
		margin-top: var(--sep-comm);
	}
	#order .order__option .sheet_option dl {
		width:100%;
		padding:1rem 2rem;
		font-size:1.8rem !important;
	}
	#order .order__option .sheet_option dl b{
		font-size:1.7rem;
		font-weight:bold;
	}
	#order .order__option .sheet_option dl span{
		font-size:1.7rem;
	}


	#order .order__option .sheet_option dl .amount {
		gap:0.5ex;
	} 
	#order .order__option .sheet_option dl .amount i {
		color:var(--color-main);
		font-size:1.5em;
	}
	#order .order__option .sheet_option dl .amount .val_wrap {
	  height: 4rem;
	  background-color: #fff;
	  overflow: hidden;
	}
	#order .order__option .sheet_option dl .amount .amount_val {
	  width:2.5em;
	  text-align: center;
	  color:black;
	  font-size:1.5rem;
	}
	#order .order__option .sheet_option dl .amount button {
	  width: 3.5rem;
	  height: 3.5rem;
	  background-color: #fff;
	  border:1px solid var(--color-gray-300)
	}

	#order .order__option .sheet_option dl .amount button .left{
		border-right:none;
	}

	#order .order__option .sheet_option dl .amount button .right{
		border-left:none;
	}

	#order .order__option .sheet_option dl .amount button b{
		font-size:1.2rem;
	}
	#order .order__option .sheet_option dl .amount button.count_10 {
	  width:auto;
	  height:3.5rem;
	  aspect-ratio: 1 / 1;
	  font-size:.9em;
	  color:#fff;
	  background-color: var(--color-main);
	  border-color: transparent;
	  border-radius: 0.5rem;
	  box-shadow: none;
	}
	#order .order__option .sheet_option dl .amount button.count_10.minus {  
	  color: #fff;
	  background-color: var(--txt-color-light);
	}
	#order .order__option .sheet_option dl.del_list {
	  position:absolute;
	  top:var(--sep-half);
	  right:var(--sep-half);
	}

	#order .order__option .sheet_option dl.del_list button i::before{
		pointer-events:none;
	}


	#order .order__info  {
		margin-top:var(--sep-double);
	}
	#order .order__left .order_noti {
		background:var(--bg-color-gray);
    border-radius: 2rem;
	}
	#order .order__left .order_noti dl {
		padding:2rem;
	}
	#order .order__left .order_noti dd {
		color:var(--txt-color-dark)
	}
	
	#order .order__info .info_tab .tab_cont { 
		padding:2.4rem;
		background-color:#F4F9FD;
		border-radius:0  0 2rem 2rem;
	}

	#order .order__sheet {
		position: fixed;
		top: inherit;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: auto;
		padding: 1.5rem 2rem 1.5rem;
		border-radius: 2rem 2rem 0 0;
		box-shadow: 0 -6px 3rem 0 rgba(0, 0, 0, 20%);
		z-index: 999;
		overflow: visible;
	}
	#order .order__sheet .sheet_detail {
		padding:0;
	}
	#order .order__sheet .sheet_btns {
		border:none;
		gap:1rem; 
	}
	#order .order__sheet .sheet_btns button {
		border-radius:1rem;
	}
	#order .order__sheet .sheet_btns button.cart {
		border:1px solid var(--line-color-gray);
	}
	#order .order__sheet .def_hide:not(.on) {
		display: none !important;
	}
	#order .order__sheet .sheet_btns:has(.btn_showDetail.on) {
		display:none;
	}
	#order .order__sheet #btnTgle {
		position:absolute;
		top:0.5rem;
		left:0; right:0;
		transition:all 0s;
	}
	#order .order__sheet #btnTgle.on {
		transform:rotate(180deg);
		transition:all 0s;
	}
	
	#order .order__sheet .msg_box {
		position:absolute;
		top:-1rem; 
		left:0; right:0;
		transform:translateY(-100%);
	}
	#order .order__sheet .msg_item {
		width:fit-content;
		padding:1ex 1em;
		margin:1rem auto 0;
		color:#fff;
		font-size:1.6rem;
		border-radius:50em;
		background:rgba(0,0,0,.65);
    backdrop-filter: blur(5px);
	}

	#order .order__sheet.on {
		padding-top:4rem;
		background:#fff;
		z-index:999999999;
	}
 #order:after  {
		display:none;
		content:"";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100dvh;
    height: calc(var(--vh, 1vh)* 100);
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999999;
	}
	#order:has(.order__sheet.on):after {
		display:block;
	}
	#order ~ footer {
		padding-bottom:16rem
	}
}



/**************************
ORDER DETAIL 
**************************/

#order_detail .board__list .list_head {
	padding: 0 3.2rem;
	padding-bottom: 1rem;
}
#order_detail .board__list li {
	position: relative;
	padding: var(--sep-comm);
	background: #fff;
	position: relative;
	padding: 2rem 3.2rem;
	border-bottom: 1px solid var(--color-gray-200);
}
#order_detail .board__list .name {
	width:calc(100% - 10em - 25em);
	padding-left:3.2rem;
	gap:1ex;
}
	#order_detail .board__list .name .thumb {
		position: absolute;
		left: 3.2rem;
		display: inline-block;
		width: 35px;
		height: 35px;;
		overflow: hidden;
	}
#order_detail .board__list .status {
	width:10em;
  color:var(--txt-color-light)
}
#order_detail .board__list .status1 {
  color:var(--txt-color-def)
}
#order_detail .board__list .status2 {
  color:var(--color-red);
}
#order_detail .board__list .pin {
	width:30em;
	gap: 2px;
}
#order_detail .board__list .pin span.pin-num {
  width:100%;
  padding: var(--sep-min) var(--sep-min) var(--sep-min) var(--sep-half);
  font-size: 1.3rem;
  background-color: var(--bg-color-gray);
  border-radius: 3px;
}
#order_detail .board__list .pin i {
	font-size:1.5em;
}
#order_detail .board__list .pin i:hover {
	color:var(--color-point);
	transition: all 0.5s;
}
#order_detail .detail__data {
	width:49%;
}
#order_detail .detail__payment {
	width:49%;
}
#order_detail .detail__payment .payment_bank {
	gap:1rem;
}
#order_detail .detail__payment .payment_bank dd {
	padding:1.5ex 1.5rem;
	font-size:1.6rem;
	border-radius: 0.5rem;
	background-color: #fff;
}
#order_detail .detail__payment .payment_bank dd img {
	height:3rem;
}
#order_detail .detail__payment .payment_bank dd i {
	font-size:1.5em;
}
#order_detail .btn_copy
{
	font-size:1.5rem;
}
@media screen and (max-width:767px) {
	#order_detail .container {
		padding: 2rem 1rem;
		width: 100%;
		padding: 1rem;
		margin-bottom: 1.5rem;
		font-size: 1.6rem;
		background-color: var(--color-gray-100);
		border-radius: 0.5rem;
		border: 1px solid transparent;
	}
  #order_detail .board__list ul
  {
	  gap:unset;
	  border-radius:unset;
	  background-color:#fff;
	  border-radius: 0.5rem;
  }

	#order_detail .board__list li {
		position: relative;
		padding: 2.4rem;
		flex-flow: column;
		justify-content: flex-start;
		gap: 1ex;
		position: relative;
		padding: 1.5rem 1.5rem 1.5rem 7.5rem;
		flex-flow: column;
		justify-content: flex-start;
		gap: 1ex;
	}
  #order_detail .board__list .name {
    width:100%;
    padding-left:0;
    justify-content: flex-start;
    font-size: 1.15em;
    font-weight: var(--txt-medium);

	        width: 100%;
        padding-left: 0;
        justify-content: flex-start;
        font-size: 1.1em;
        font-weight: var(--txt-semibold);
  }
	#order_detail .board__list .name .thumb {
		position: absolute;
		left: 2rem;
		top: 2rem;
		width: 30px;
		height: 30px;
	}
	#order_detail .board__list .status {
		position: absolute;
		right: 1.5rem;
		top: 1.5rem;
		width: auto;
		font-size:1.4rem;
	}
  #order_detail .board__list .status1 {
    color:#fff;
    background:var(--txt-color-def)
  }
  #order_detail .board__list .status2 {
    color:#fff;
    background:var(--color-red);
  }
  #order_detail .board__list .pin {
    /*display:flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: column;*/
    /* gap:1ex; */
    /*width:100%;
    padding: var(--sep-comm);
    text-align: left;
    border-radius: 1rem;
    background-color: #fff;*/

	font-size:1.4rem;
	display: flex
;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 1ex;
        width: 100%;
        text-align: left;
    }

	#order_detail .detail__data {
		width: 100%;
		margin-bottom: 1.5rem;
	}

	#order_detail .detail__payment {
		width: 100%;
	}
  }
  #order_detail .board__list .pin .item_tit {
    color: var(--txt-color-light);
  }
  #order_detail .board__list .pin i {
    font-size:1.2em;
    margin-top: -0.25em;
  }
  #order_detail .detail__data {
    margin-bottom:1.5rem;
  }
  #order_detail .detail__payment {
  }
	#order_detail .detail__payment .container:not(.container_redColor) {
		padding: 2rem;
		background: #F4F9FD;
		border-radius: 0.5rem;
	}
	#order_detail .detail__payment .payment_bank dd {	
		flex-flow:column;
        align-items: normal;
	}
	#order_detail .detail__payment .payment_bank dd .align_cnt {
		text-align:Right;
	}

#order_detail .container_redColor {
	padding: 2rem !important;
	background-color: var(--color-red) !important;
}



/**************************
CS 
**************************/
.cs .contents {
	width:100%;
	max-width: 64rem;
	margin:0 auto;
	padding:3rem 0 0;
}

@media screen and (max-width:767px) {
  #notice .board__accord li .accord_tit .flex_nml {
    flex-flow: column;
    gap:1ex;
  }
}

/**************************
REVIEW 
**************************/
#review .contents {
	width:100%;
	margin:0 auto;
}
#review ul li {
	display: block;
	width: calc((100% - (var(--sep-comm) * 3)) / 4);
	padding: 2rem;
	background-color: var(--bg-color-sky);
	border-radius: 2rem;
	border: 1px solid transparent;
	}
#review ul li:first-of-type {
}
#review ul li .user_id {
	margin-right: 1ex;
	font-size: 1.4rem;
	/* color:var(--color-point); */
}
#review ul li .user_notify {
	font-size: 1.2rem;
	color:var(--txt-color-light);
}
#review ul li .user_notify button {
	color:var(--txt-color-dark);
}

#review ul li .hd_time {
	margin-bottom: var(--sep-min);
	font-size: 1.4rem;
	color:var(--txt-color-light);
}
#review ul li .hd_star {
	font-size:1.8rem;
}
#review ul li .reivew_main {
	font-size: 1.6rem;
	line-height: 1.5em;
	margin: var(--sep-min) 0 var(--sep-comm);
}
@media screen and (max-width:767px) {
	#review ul {
		flex-flow: column;
	}
  #review ul li {
		width: 100%;
	}
  #review ul li .review_hd > .flex_nml {
    flex-flow:column;
    gap:1ex;
  }
    #review ul li .review_hd > .flex_nml:last-child {
      align-items: flex-end;
    }
    #review ul li .hd_time {
      margin-right: 0;;
    }
}

@keyframes subtle-shake {
	0%, 100% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(6deg);
	}

	75% {
		transform: rotate(-6deg);
	}
}

.emoji-joystick {
	font-size:25px;
	display: inline-block;
	animation: subtle-shake 1.5s infinite ease-in-out;
}

validation-summary-errors {
	text-align: center;
	font-size: 15px;
	color: red;
}


/*item_list - products*/
#item_list .products h2 {
	margin-bottom: 1em;
	font-size: 4rem;
}

#item_list .products ul {
	gap: 1rem calc(6% / 3);
}

#item_list .products li {
	position: relative;
	width: 23.5%;
	padding: 2rem;
	margin-top: 4.5rem;
	background: var(--color-gray-100);
	border: 1px solid var(--color-gray-300);
	/* box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.1); */
}

	#item_list .products li strong {
		position: absolute;
		top: 0%;
		right: 0;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 4em;
		height: 3em;
		font-size: 1.8em;
		color: #fff;
		background: var(--color-red);
		border-radius: 0 0 0 1.5rem;
	}

		#item_list .products li strong small {
			animation: move_down 1s ease-in-out infinite;
		}

@keyframes move_down {
	0% {
		transform: translate(0, -5px);
		opacity: 0.2;
	}

	50% {
		opacity: 1;
	}

	100% {
		transform: translate(0, 5px);
		opacity: 0;
	}
}

#item_list .products .prdt__thumb {
	width: 8.7rem;
	height: 8.7rem;
	margin: -4.5rem auto 0;
	border: 1px solid var(--color-gray-200);
	overflow: hidden;
}

	#item_list .products .prdt__thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover
	}

#item_list .products h3 {
	margin: 1ex 0 1.5ex 0;
	font-size: 2rem;
	font-weight: var(--txt-medium);
}


#item_list .products .prdt__btn {
	display: inline-block;
	padding: 1.5ex 8rem;
	margin-top: 0ex;
	color: #fff;
	font-size: 1.8rem;
	border-radius: 50rem;
	background: var(--color-main);
}

	#item_list .products .prdt__btn:hover {
		background-color: var(--color-point);
	}

#item_list .products.products__main ul {
	gap: 1rem calc(9% / 3);
}

	#item_list .products.products__main ul.on {
		display: flex;
	}

	#item_list .products.products__main ul li {
		width: 30.88%;
		margin-top: 10rem;
	}

		#item_list .products.products__main ul li:hover {
			box-shadow: 0 0 4rem 0 rgba(0, 0, 0, 0.3);
		}

#item_list .products.products__main .prdt__thumb {
	width: 16rem;
	height: 16rem;
	margin: -8rem auto 0;
}

#item_list .products.products__main h3 {
	margin-top: 1.5ex;
	margin-bottom: 0.5ex;
	font-size: 2.2rem;
}

#item_list .products.products__main p {
	margin-bottom: 2ex;
	font-size: 1.8rem;
	color: var(--color-gray-900);
}

#item_list .products.products__main .prdt__btn {
	background-color: var(--color-main);
}

	#item_list .products.products__main .prdt__btn:hover {
		background-color: var(--color-main);
	}

#item_list .latest li a:hover {
	border: 1px solid var(--color-main);
}

/*item_list  - responsive*/
@media screen and (max-width:767px) {
	#item_list .products h2 {
		font-size: 3rem;
	}

	#item_list .products .prdt__thumb {
		width: 6rem;
		height: 6rem;
	}

	#item_list .products li h3 {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 2.4em;
		font-size: 1.6rem;
		word-break: keep-all;
	}

	#item_list .products .prdt__btn {
		width: 100%;
		padding: 1.5ex;
		font-size: 1.8rem;
		/* border-radius: 0 0 1.5rem 1.5rem; */
	}

	#item_list .products.products__main ul {
		gap: 3%;
	}

		#item_list .products.products__main ul li {
			width: 48.5%;
			margin-top: 8rem;
		}

	#item_list .products.products__main .prdt__thumb {
		width: 15rem;
		height: 15rem;
		margin-top: -8rem;
	}

	#item_list .products.products__main li h3 {
		height: auto;
		font-size: 2rem;
	}

	#item_list .products li strong
	{
		display:none;
	}

	.sheet_bottom .isMobile, .sheet_bottom .isMobile dl {
		padding: var(--sep-min) var(--sep-half);
		font-size: 1.35rem;
		/*border-bottom: 1px dashed var(--color-gray-500);*/
	}

	.sheet_bottom dl:last-child {
		border-bottom: none;
	}

	#order .order__sheet .sheet_detail .detail_total {
		padding-top: unset;
	}

	#order .order__sheet .sheet_detail .detail_total dt{
		color: var(--txt-color-def);
	}

	.all_total
	{
		font-size:1.6rem !important;
	}

	.paytype dt {
		font-weight: var(--txt-light);
	}

	.paytype dd {
		color: var(--color-main);
	}
}



.zp-intro-v5 {
	padding: 20px 22px;
	border-radius: 20px;
	background: #F4F9FD;
	box-sizing: border-box;
}

.zp-intro-v5__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.zp-intro-v5__badge {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	background: #eef3ff;
	color: #315cff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.03em;
	box-sizing: border-box;
}

.zp-intro-v5__fast {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	background: #fff4f1;
	color: #ff5a36;
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
	box-sizing: border-box;
}

.zp-intro-v5__title {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.35;
	font-weight: 900;
	color: #111;
	letter-spacing: -0.03em;
	word-break: keep-all;
}

	.zp-intro-v5__title strong {
		color: #315cff;
		font-weight: 900;
	}

.zp-intro-v5__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.75;
	color: #5c6573;
	word-break: keep-all;
}

	.zp-intro-v5__desc strong {
		color: #111;
		font-weight: 800;
	}

/* 추가된 SEO 요약 문단 */
.zp-intro-desc {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.75;
	color: #6b7483;
	word-break: keep-all;
}

	.zp-intro-desc strong {
		color: #315cff;
		font-weight: 800;
	}

.zp-intro-v5__points {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 16px;
}

.zp-intro-v5__point {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 58px;
	padding: 12px 14px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid #e7edf8;
	box-sizing: border-box;
}

.zp-intro-v5__point-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #eef3ff;
	color: #315cff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
}

.zp-intro-v5__point-text {
	min-width: 0;
}

.zp-intro-v5__point-title {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 800;
	color: #111;
}

.zp-intro-v5__point-sub {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.45;
	color: #6b7483;
}

@media (max-width: 1024px) {
	.zp-intro-v5__points {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.zp-intro-v5 {
		margin: 12px 0 18px;
		padding: 16px;
		border-radius: 16px;
	}

	.zp-intro-v5__top {
		align-items: flex-start;
		flex-direction: row;
		gap: 8px;
		margin-bottom: 8px;
	}

	.zp-intro-v5__badge,
	.zp-intro-v5__fast {
		height: 28px;
		padding: 0 10px;
		font-size: 11px;
	}

	.zp-intro-v5__title {
		font-size: 18px;
		margin-bottom: 6px;
	}

	.zp-intro-v5__desc {
		font-size: 13px;
		line-height: 1.7;
	}

	.zp-intro-desc {
		margin-top: 6px;
		font-size: 12px;
		line-height: 1.7;
	}

	.zp-intro-v5__points {
		margin-top: 14px;
		gap: 8px;
	}

	.zp-intro-v5__point {
		min-height: auto;
		padding: 11px 12px;
		border-radius: 12px;
	}

	.zp-intro-v5__point-icon {
		width: 30px;
		height: 30px;
		border-radius: 9px;
		font-size: 14px;
	}

	.zp-intro-v5__point-title {
		font-size: 12px;
	}

	.zp-intro-v5__point-sub {
		font-size: 11px;
	}

	.refresh-btn {
		float: right;
		font-size: 1.5rem;
		padding: 0.5rem 1rem;
		color: var(--color-gray-900);
		background: #fff;
		border: 1px solid var(--color-gray-300);
		display: inline-block;
		text-align: center;
		font-weight: var(--txt-medium);
		border-radius: 0.5rem;
		margin-bottom: 1.5ex;
	}
}