@import url('../../libs/bootstrap-icons/bootstrap-icons.css');

:root{
	--color-default: #444050;
	--color-primary: #0E6EFD;
	--color-primary-bordered: #0d6efd;
	--color-primary-bg: #edf2fa;
	--color-secondary: #6C747E;
	--color-secondary-bordered: #6C747E;
	--color-tertiary: #F4F6F8;
	--color-tertiary-bordered: #e3ddcc;
	--color-warning: orange;
	--color-success: #1A8A60;
	--color-success-bordered: #148057;
	--color-success-bg: #e0f4ec;
	--color-danger: #D53444;
	--color-danger-bg:#FFDDE0;
	--color-danger-bordered: #CA3444;
	--color-muted: #ccc;
	--color-muted-bg: #f4f4f4;
	--color-muted-bg2: #f8f8f8;
	--color-guide: #9c9c9c;
	--color-content: #5f5f5f;
	--color-rating: #F6B927;
	
	--color-black:#121212;
	
	--color-lightblack:#777;
	
	--color-disabled:#f1f1f1;
	
	--color-bordered: #dedede;
	--color-bordered2: #efefef;
	
	--site-width:980px;
	
	--element-height:56px;
	--element-height-small:35px;
	--element-height-mini:27px;
	--element-height-large:66px;
	--element-radius:6px;
	--element-radius-small:3px;
	
	--font-size-default: 16px;
	--font-size-4xlarge: 50px;
	--font-size-3xlarge: 40px;
	--font-size-2xlarge: 30px;
	--font-size-xlarge: 25px;
	--font-size-large: 20px;
	--font-size-small: 13px;
	--font-size-mini: 11px;
	
	--primary-box-shadow:0px 4px 12px 0px rgba(40,132,239,0.35);
	--muted-box-shadow:0px 4px 12px 0px rgba(0,0,0,0.09);
	
	--layout-header-height:80px;
	
	
}
*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}

div:after,
fieldset:after{
	content:'';
	display:block;
	clear:both;
}
select{
	appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
button{
	cursor:pointer;
}
button[disabled="disabled"],
button:disabled{
	/*background-color:var(--color-disabled)!important;*/
	border-color:var(--color-disabled);
	cursor:not-allowed;
	color:var(--color-guide);
}

/*
	Default
*/
html{
	font-size:var(--font-size-default);
}
body{
	font-family:'Pretendard',sans-serif;
	color:var(--color-default);
	line-height:1.6;
	letter-spacing:-0.5%;
}
a{
	text-decoration:none;
	color:var(--color-primary);
}
a.link{
	font-weight:600;
	position:relative;
	color:var(--color-primary)!important;
}
a.link::before{
	content:'';
	width:100%;
	height:1.5px;
	background-color:var(--color-primary);
	position:absolute;
	bottom:0px;
}
strong{
	font-weight:600;
}
ul,
ol{
	list-style:none;
}

.radius{
	border-radius:1rem;
}

.underline{
	position:relative;
}
.underline::before{
	content:'';
	width:100%;
	height:1.5px;
	background-color:var(--color-default);
	position:absolute;
	bottom:-2px;
}

.hidden,
.hide{
	display:none;
}
.show{
	display:block;
}
.btn.show{
	display:inline-flex;
}

hr{
	display:block;
	clear:both;
	border:0;
	margin:2rem 0;
	position:relative;
	width:100%;
	height:1px;
	background-color:var(--color-bordered);
}

.fluid{
	width:100%;
}
.max-fluid{
	max-width:100%;
}

/*
	Image
*/
img.frame{
	border:1px solid var(--color-bordered);
	padding:.2rem;
	background-color:#fff;
	border-radius:var(--element-radius);
}
img.bordered{
	border:1px solid var(--color-bordered);
	border-radius:var(--element-radius);
}

/*
	Dev
*/
.dev-danger{
	color:var(--color-danger);
}
.dev-status{
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	border-top:1px solid var(--color-bordered);
	padding:1rem;
	z-index:9999;
	display:flex;
	justify-content:space-between;
	background-color:#fff;
}
.dev-status-danger{
	border-top-color:var(--color-danger);
}
.dev-status-warning{
	border-top-color:var(--color-warning);
}

.dev-alert::before{
	content:'Warning';
	background-color:var(--color-warning);
	color:#fff;
	border-radius:100px;
	padding:.25rem .5rem;
	text-align:center;
	margin-right:1rem;
	font-size:var(--font-size-small);
}
.dev-alert.dev-alert-danger::before{
	background-color:var(--color-danger);
}
.dev-alert.dev-alert-warning::before{
	background-color:var(--color-warning);
}

.dev-status .dev__col{
	flex:1 1 auto;
}
.dev-status .dev__col:last-child{
	text-align:right;
	color:var(--color-muted);
}

/*
	Align
*/
.align-left{
	text-align:left;
	justify-content:flex-start;
}
.align-right{
	text-align:right;
	justify-content:flex-end;
}
.align-center{
	text-align:center!important;
	justify-content:center!important;
}

.container{
	width:100%;
	min-width:var(--site-width);
	max-width:var(--site-width);
	margin:0 auto;
	padding-left:1rem;
	padding-right:1rem
}
.container.large{
	width:100%;
	min-width:var(--site-width);
	max-width:var(--site-width);
	margin:0 auto;
	padding-left:1rem;
	padding-right:1rem
}
.container-fluid{
	min-width:var(--site-width);
	max-width:100%;
	padding-left:1rem;
	padding-right:1rem;
}

/* Action */
.action{
	margin-top:2rem;
}

/*
	Margin && Padding
*/
.mt{
	margin-top:1rem;
}
.mt0{
	margin-top:0rem;
}
.mb,
.mb1{
	margin-bottom:1rem;
}
.ml{
	margin-left:1rem;
}
.ml05{
	margin-left:.5rem;
}
.mt2,
.mt-x2{
	margin-top:2rem;
}
.p0{
	padding:0!important;
}
.pl{
	padding-left:1rem;
}
.pl2{
	padding-left:2rem;
}
.pr{
	padding-right:1rem;
}
.pr05{
	padding-right:.5rem;
}

/*
	Headline
*/
h1,h2,h3,h4,h5,h6{
	display:block;
	margin-bottom:1rem;
}
h1{
	font-size:2.5rem;
	font-weight:700;
	margin-bottom:2rem;
}
h2{
	font-size:1.35rem;
	font-weight:600;
	margin-top:1rem;
}
h3{
	font-size:1.3rem;
	font-weight:600;
}
h4{
	font-size:1.2rem;
	font-weight:500;
}
p{
	margin-bottom:1rem;
}

h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{
	font-size:.8em;
	color:var(--color-guide);
	font-weight:normal;
	padding-left:.5rem;
	line-height:1;
	display:inline-block;
	margin-top:-1px;
}

h1 i,h2 i, h3 i, h4 i, h5 i, h6 i{
	padding-right:.25rem;
}

h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p{
	margin-top:-1rem;
	color:var(--color-secondary);
}

h1.underline,
h2.underline,
h3.underline,
h4.underline,
h5.underline,
h5.underline{
	padding-bottom:1rem;
	display:block;
}

h1.underline + table,
h2.underline + table,
h3.underline + table,
h4.underline + table,
h5.underline + table,
h6.underline + table{
	margin-top:-1rem;
}

h1 + section,
h2 + section,
h3 + section,
h4 + section,
h5 + section,
h6 + section{
	margin-top:2rem;
}

.attention{
	font-size:5rem;
	font-weight:bold;
}
.attention + p{
	font-size:2rem;
}

.text-mini{
	font-size:var(--font-size-mini);
}
.text-small{
	font-size:var(--font-size-small);
}
.text-large{
	font-size:var(--font-size-large);
}
.text-xlarge{
	font-size:var(--font-size-xlarge);
}
.text-2xlarge{
	font-size:var(--font-size-2xlarge);
}
.text-3xlarge{
	font-size:var(--font-size-3xlarge);
}
.text-4xlarge{
	font-size:var(--font-size-4xlarge);
}

h1.text-large,
h2.text-large,
h3.text-large,
h4.text-large,
h5.text-large,
h6.text-large{
	font-size:calc(var(--font-size-large) * 2.4);
}
h1.text-large + p,
h2.text-large + p,
h3.text-large + p,
h4.text-large + p,
h5.text-large + p,
h6.text-large + p{
	font-size:calc(var(--font-size-large) * 1.2);
}
.text-strike{
	text-decoration:line-through;
}

.fwB{
	font-weight:bold;
}
.fwN{
	font-weight:normal!important;
}
.dpB{
	display:block;
}

/*
	Text Color
*/
.color-primary{
	color:var(--color-primary)!important;
}
.color-secondary{
	color:var(--color-secondary)!important;
}
.color-danger{
	color:var(--color-danger)!important;
}
.color-warning{
	color:var(--color-warning)!important;
}
.color-success{
	color:var(--color-success)!important;
}
.color-guide{
	color:var(--color-guide)!important;
}
.color-muted{
	color:var(--color-muted)!important;
}
.color-black,
.color-dark{
	color:var(--color-black)!important;
}
.color-white,
.color-light{
	color:#fff!important;
}

/*
	Overlay
*/
[class*=overlay]{
	position:relative;
	z-index:10;
}
[class*=overlay]::before{
	content:'';
	opacity:.94;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:-1;
	background-color:rgba(0,0,0,.9);
}
.overlay-primary::before{
	background-color:var(--color-primary);
}

/*
	Alert
*/
.alert{
	background-color:#f8f8f8;
	padding:1rem;
	text-align:center;
	border:1px solid #dfdfdf;
	display:none;	
}

/*
	Button
*/
.btn{
	display:inline-flex;
	height:var(--element-height);
	border-radius:var(--element-radius);
	padding-left:1rem;
	padding-right:1rem;
	text-align:center;
	font-weight:500;
	align-items:center;
	justify-content:center;
	background-color:#fff;
	color:var(--color-default);
	border:1px solid var(--color-bordered);
	font-size:1rem;
	white-space:nowrap;
	transition:.3s;
}
.btn:hover{
	box-shadow:var(--color-muted-box-shadow);
	filter: brightness(96%);
}
.btn.btn-primary{
	border:1px solid var(--color-primary-bordered);
	background-color:var(--color-primary);
	color:#fff;
}
.btn.btn-primary:hover{
	box-shadow:var(--primary-box-shadow);
}
.btn.btn-secondary{
	border:1px solid var(--color-secondary-bordered);
	background-color:var(--color-secondary);
	color:#fff;
}
.btn.btn-tertiary{
	border:1px solid var(--color-tertiary-bordered);
	background-color:var(--color-tertiary);
	color:var(--color-default);
}
.btn.btn-success{
	border:1px solid var(--color-success-bordered);
	background-color:var(--color-success);
	color:#fff;
}
.btn.btn-danger{
	border:1px solid var(--color-danger-bordered);
	background-color:var(--color-danger);
	color:#fff;
}
.btn.btn-dark{
	border:1px solid var(--color-black);
	background-color:var(--color-black);
	color:#fff;
}
.btn.btn-danger.btn-outlined{
	background-color:#fff;
	color:var(--color-danger);
}
.btn.btn-danger.btn-outlined:hover{
	background-color:var(--color-danger);
	color:#fff;
}
.btn.btn-none{
	background-color:transparent;
	border-color:transparent;
}
.btn.btn-none:hover{
	background-color:var(--color-primary-bg);
}
.btn.btn-fluid{
	width:100%;
}
.btn.btn-small{
	height:var(--element-height-small);
	padding-left:.75rem;
	padding-right:.75rem;
	font-size:.95rem;
}
.btn.btn-mini{
	height:var(--element-height-mini);
	padding-left:.55rem;
	padding-right:.55rem;
	font-size:.85rem;
}
.btn.btn-large{
	height:var(--element-height-large);
	padding-left:2rem;
	padding-right:2rem;
	font-size:1.3rem;
	font-weight:bold;
}
.btn:not(.btn-icon) > i{
	padding-right:.25rem;
}
.btn.btn-large i{
	padding-right:.5rem;
}
.btn.btn-icon{
	border-radius:50%;
	aspect-ratio: 1 / 1;
	width:2.5rem;
	height:auto;
}
	.btn.btn-icon > i{
		font-size:1rem;
	}
.btn.btn-icon:hover{
	background-color:var(--color-primary-bg);
	color:var(--color-primary);
}
.btn.btn-icon.btn-none{
	border-color:transparent;
}
.btn.btn-oval{
	border-radius:100px;
	padding-left:1.5rem;
	padding-right:1.5rem;
}
.btn ~ .btn{
	margin-left:.5rem;
}
.btn > i{
	font-size:1em;
}
.btn > i + span{
	margin-left:.25rem;
}
.btn > span + i{
	margin-left:.75rem;
}
.btn[disabled="disabled"],
.btn[disabled]{
	opacity:.6;
	cursor:not-allowed;
}


/*
	Bg
*/
.bg{
	background-color:var(--color-muted-bg);
}

/*
	Box
*/
.box{
	padding:2rem;
	border-radius:var(--element-radius);
}
.box-title{
	margin:0;
	margin-bottom:1rem;
}

/* List Column */
[class*=list-column-]{
    display:flex;
    flex-wrap:wrap;
    margin-left:-2rem;
}
[class*=list-column-] > li{
    padding-left:2rem;
    padding-bottom:2rem;
}
[class*=list-column-] > li img{
	width:100%;
	object-fit:cover;
}
.list-column-10 > li{
    width:10%;
}
.list-column-7 > li{
	width:14.285714%;
}
.list-column-6 > li{
	width:16.6666667%;
}
.list-column-5 > li{
    width:20%;
}
.list-column-3 > li{
    width:33.333%;
}
.list-column-4 > li{
    width:25%;
}
.list-column-2 > li{
    width:50%;
}
.list-column-4 > li:nth-last-child(1),
.list-column-4 > li:nth-last-child(2),
.list-column-4 > li:nth-last-child(3),
.list-column-4 > li:nth-last-child(4){
    padding-bottom:0;
}


/* Item */
.item{
	position:relative;
	line-height:1;
	font-size:0;
}
.item .item__head{
    line-height:1;
    font-size:0;
    position:relative;
}
.item .item__head a{
	display:block;
	position:relative;
	z-index:10;
}
.item .item__head .btn{
	border-color:transparent;
}
.item .item__head img{
    width:100%;
}
.item .item__head img + img{
	opacity:0;
	visibility:hidden;
	z-index:-1;
	position:absolute;
	width:100%;
	height:100%;
}
.item .item__body{
	padding:1rem 0;
	font-size:1rem;
}
.item .item-title{
	font-weight:600;
	text-decoration:none;
	color:var(--color-dark);
	font-size:var(--font-size-large);
	margin:0;
}
.item .item-desc{
	margin:0;
	margin-top:1rem;
	color:var(--color-lightblack);
}
.item .item-info{
	margin-top:2rem;
}
.item .item__body .btn{
	margin-top:1rem;
}

.item-badge{
	display:inline-block;
	padding:1rem;
	background-color:var(--color-primary);
	color:#fff;
	position:absolute;
	right:0;
	top:0;
	font-size:1rem;
	z-index:30;
}
.item-badge.danger{
	background-color:var(--color-danger);
}

/* Item with Card */
.item.card .item__head,
.item.card .item__body{
	padding:1rem;
}
.item.card .item__body{
	padding-top:0;
	padding-bottom:2rem;
}

/* Item :: Link */
.item.item-link:hover{
	cursor:pointer;
}

/* Item :: Actions */
.item-actions{
	position:absolute;
	left:1rem;
	top:1rem;
	opacity:0;
	z-index:-1;
	visibility:hidden;
	transition:opacity .3s;
}
.item-actions button{
	border-radius:50%;
	padding:.5rem;
	background-color:#fff;
	border:none;
	line-height:1;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	position:relative;
	z-index:2;
	transition:.3s;
}
.item-actions button span{
	font-size:1.3rem;
}
/*
.item-actions ._like:hover{
	background-color:var(--color-black);
	color:#fff;
}*/

@media(min-width:768px){
.item:hover .item-actions{
	opacity:1;
	visibility:visible;
	z-index:11;
}
}

.item .item-actions::before{
	transition:.5s;
}
.item .item-actions::before{
	transition:.5s;
}
/*
.item:hover .item-actions::before{
	content:'';
	background-color:rgba(0,0,0,.2);
	position:absolute;
	left:-1rem;
	top:-1rem;
	width:100%;
	height:100%;
	z-index:1;
	transition:.7s;
}
*/

/* Item :: Overlay */
.item.item-overlay{
	position:relative;
}
.item.item-overlay .item__body{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:10;
	background-color:rgba(0,0,0,.1);
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
}
.item.item-overlay .item__body a{
	text-decoration:none;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:9999;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
}
.item.item-overlay .item-title,
.item.item-overlay .item-desc{
	position:relative;
	z-index:2;
}
.item.item-overlay .item-title{
	color:rgba(255,255,255,1);
	font-size:2rem;
}
.item.item-overlay .item-desc{
	color:rgba(255,255,255,.8);
}


/* Item Hover Zoom */
.item.item-hover--zoom,
.item.item-hover--zoom .item__head{
	overflow:hidden;
}
.item.item-hover--zoom img{
	transition: transform 2s;
	transform:scale(1);
}
.item.item-hover--zoom:hover img{
	transform:scale(1.15);
}


/* Item :: hover change */
.item.item-hover--change,
.item.item-hover--change .item__head{
	overflow:hidden;
}
.item.item-hover--change img{
	transition: transform 2s;
	transform:scale(1);
}
.item.item-hover--change:hover img{
	transform:scale(1.15);
}
.item.item-hover--change:hover img:first-child{
/*	position:absolute;*/
}
.item.item-hover--change:hover img + img{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:1;
	visibility:visible;
	opacity:1;
}

/* Item :: Hover Effect */
.item.item-hover--diamond,
.item.item-hover--diamond .item__head{
	position:relative;
	overflow:hidden;
}
.item.item-hover--diamond::before{
	position: absolute;
    content: "";
    width: 100%;
    padding-top: 100%;
    top: 50%;
    left: 50%;
    opacity: 1;
    z-index:10;
    background: rgba(255,255,255,.4);
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    /* -webkit-transform: translate(-50%,-50%) rotate(45deg) scale(0); */
    -moz-transform: translate(-50%, -50%) rotate(45deg) scale(0);
    -o-transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transition: all 600ms ease-in-out;
    -webkit-transition: all 600ms ease-in-out;
    -moz-transition: all 600ms ease-in-out;
    -o-transition: all 600ms ease-in-out;
}
.item.item-hover--diamond img{
	transform:scale(1);
	transition:.8s;
}
.item.item-hover--diamond:hover::before{
	opacity: 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1);
    -moz-transform: translate(-50%, -50%) rotate(45deg) scale(1);
    -o-transform:translate(-50%, -50%) rotate(45deg) scale(1)
}
.item.item-hover--diamond:hover img{
	transform:scale(1.15);	
}

/* Item :: Media */
.item.item-media{
	display:flex;
	font-size:1rem;
}
.item.item-media .item__head img{
	width:auto;
}
.item.item-media .item__body{
	padding-left:5%;
	width:100%;
}
.item.item-media .item__foot{
	padding-left:5%;
	width:100px;
}

.item.item-media.vcenter{
	align-items:center;
}

.item .overlay{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:4;
	background-color:rgba(0,0,0,.2);
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	text-align:center;
	opacity:0;
	transition:.3s;
}
.item:hover .overlay{
	opacity:1;
}
.item .overlay h3,
.item .overlay p{
	position:relative;
	z-index:5;
	color:#fff;
}
.item .overlay h3{
	font-size:4rem;
}
.item .overlay p{
	font-size:1.4rem;
}

/* Accordion */
.list-accordion li{
	display:block;
}
.list-accordion li .q,
.list-accordion li .a{
	display:block;
}
.list-accordion li .q{
	padding:1rem 0;
	border-bottom:1px solid var(--color-bordered);
	cursor:pointer;
	position:relative;
}
.list-accordion li .q::before{
	content:'';
	background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 stroke%3D%22black%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E%3Cpolyline points%3D%228 4 16 12 8 20%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E');
	background-size:100%;
	width:.95rem;
	height:.95rem;
	position:absolute;
	right:1rem;
	top:50%;
	transform:translateY(-50%);
}
.list-accordion li .a{
	display:none;
	border-bottom:1px solid var(--color-bordered);
	background-color:var(--color-muted-bg2);
	padding:2rem;
}
.list-accordion li .q.active{
	font-weight:bold;
}
.list-accordion li .q.active::before{
	background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 stroke%3D%22black%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E%3Cpolyline points%3D%224 8 12 16 20 8%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E');
}
.list-accordion li .q.active + .a{
	display:block;
}

	/* with Card */
	.list-accordion.card  .q{
		padding:1rem;
		display:flex;
		align-items:center;
	}
	.list-accordion.card li:last-child > .q{
		border:0;
	}
	.list-accordion.card li:last-child > .a{
		border-top:1px solid var(--color-bordered);
	}
	.list-accordion.card .q .input-group{
		min-height:0;
	}
	.list-accordion.card .q .input-group input[type="radio"]{
		width:1.25rem;
		height:1.25rem;
		
	}
	.list-accordion.card .q .input-group input[type="radio"]:checked{
		background-color:var(--color-primary);
	}
	.list-accordion.card .q .input-group input[type="radio"]:checked::before{
		width:.5rem;
		height:.5rem;
		background-color:#fff;
	}
	.list-accordion.card .q.active{
		position:relative;
		background-color:var(--color-primary-bg);
	}
	.list-accordion.card .q.active::after{
		content:'';
		position:absolute;
		left:-1px;
		top:-1px;
		width:calc(100% + 1px);
		height:calc(100% + 1px);
		z-index:2;
		border:1px double var(--color-primary);
	}
	.list-accordion.card li:first-child .q.active::after{
		border-top-left-radius:var(--element-radius);
		border-top-right-radius:var(--element-radius);
	}

/*
	Fieldset
*/
fieldset{
	
}

/*
	Field
*/
fieldset .fieldset-title{
	margin-top:0;
	font-size:var(--font-size-default);
	margin-bottom:2rem;
	position:relative;
	font-size:1rem;
	border:1px solid var(--color-bordered);
	background-color:#fff;
	position:absolute;
	left:1rem;
	top:-1.25rem;
	border-radius:var(--element-radius);
	padding:.5rem 1.5rem;
	box-shadow:var(--muted-box-shadow);
	
}
fieldset .fieldset-title::before{
	content:'';
	width:5px;
	height:1.05rem;
	border-radius:var(--element-radius);
	background-color:var(--color-primary);
	display:inline-block;
	position:absolute;
	top:50%;
	left:0;
	transform:translateY(-50%);
	display:none;
}
fieldset input,
fieldset select,
fieldset textarea,
fieldset [class*=input-group] :not(.btn) span{
	background-color:#f9f9f9!important;	
}
fieldset [class*=input-group] [disabled],
fieldset [class*=input-group] [disabled="disabled"],
fieldset [class*=input-group] [readonly],
fieldset [class*=input-group] [readonly="readonly"]{
	background-color:#f1f1f1!important;
}
fieldset [class*=input-group] [disabled] + span,
fieldset [class*=input-group] [disabled="disabled"],
fieldset [class*=input-group] [disabled="disabled"] + :not(.btn) span,
fieldset [class*=input-group] [readonly],
fieldset [class*=input-group] [readonly] + :not(.btn) span,
fieldset [class*=input-group] [readonly="readonly"],
fieldset [class*=input-group] [readonly="readonly"] + :not(.btn) span{
	background-color:#f1f1f1!important;
}


.card .card__body fieldset{
	padding:var(--layout-padding);
	border:1px solid var(--color-bordered);
	border-radius:var(--element-radius);
	position:relative;
	padding-top:4rem;
	margin-top:4rem;

}

.card .card__body > fieldset:first-child{
	margin-top:2rem!important;
}

/* Filedset Basic */
fieldset.fieldset-basic{
	border:0;
}
fieldset.fieldset-basic .field + .field{
	margin-top:.5rem!important;
}
fieldset.fieldset-basic input[type="text"], 
fieldset.fieldset-basic input[type="number"], 
fieldset.fieldset-basic input[type="password"], 
fieldset.fieldset-basic input[type="file"], 
fieldset.fieldset-basic select, 
fieldset.fieldset-basic textarea{
	background-color:#fff!important;
}

/*
	Input
*/
/* 공통 스타일 */
input[type="number"]{
    -moz-appearance: textfield; /* Firefox */
    -webkit-appearance: none; /* Safari, Chrome */
    appearance: none; /* 표준 지원 */
}

/* 화살표 제거 (Chrome, Safari) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 화살표 제거 (Firefox) */
input[type="number"] {
    -moz-appearance: textfield;
}
input[type="text"],
input[type="number"],
input[type="password"],
input[type="file"],
select,
textarea{
	border:1px solid #dfdfdf;
	height:var(--element-height);
	border-radius:var(--element-radius);
	display:flex;
	align-items:center;
	padding:.5rem 1rem;
	width:100%;
	font-size:1rem;
	position:relative;
	background-color:#fff;
	transition:.3s;
}
textarea{
	height:auto;
	min-height:100px;
	line-height:1.6;
}

select{
	background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 9l6 6 6-6"%3E%3C/path%3E%3C/svg%3E');
	background-size:1rem;
	background-position:calc(100% - 1rem) center;
	background-repeat:no-repeat;
}



input[type="checkbox"],
input[type="radio"] {
	-webkit-appearance: none; /* 웹킷 기반 브라우저 초기화 */
	-moz-appearance: none; /* 파이어폭스 초기화 */
	appearance: none; /* 기본 스타일 초기화 */
	margin: 0;
	padding: 0;
	outline: none;
	background: none;
	border: none;
	cursor: pointer;
	background-color:#fff;
}
input[type="checkbox"]{
	border:1px solid var(--color-bordered);
	border-radius:4px;
	width:24px;
	height:24px;
}
input[type="checkbox"]:checked{
	background-color:var(--color-primary);
	border-color:var(--color-primary);
	position:relative;
}
input[type="checkbox"]:checked::before{
	content: '';
	display: inline-block;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width: 18px;
	height: 18px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
}
input[type="radio"]{
	border:1px solid var(--color-bordered);
	border-radius:50%;
	width:24px;
	height:24px;
	position:relative;
}
input[type="radio"]:checked{
	border-color:var(--color-primary);
}
input[type="radio"]:checked::before{
	content:'';
	width:14px;
	height:14px;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	background-color:var(--color-primary);
	border-radius:50%;
}

input[type="radio"].input-danger:checked{
	border-color:var(--color-danger);
}
input[type="radio"].input-danger:checked::before{
	background-color:var(--color-danger);
}
input[type="radio"].input-warning:checked{
	border-color:var(--color-warning);
}
input[type="radio"].input-warning:checked::before{
	background-color:var(--color-warning);
}

input[disabled],
input[disabled="disabled"],
input[readonly="readonly"],
input[readonly],
select[disabled],
select[disabled="disabled"],
select[readonly="readonly"],
select[readonly]{
	background-color:var(--color-disabled);
	color:var(--color-secondary);
	cursor:not-allowed;
}
input[disabled] + span,
input[disabled="disabled"] + span,
input[readonly="readonly"] + span,
input[readonly] + span{
	background-color:var(--color-disabled);
	/*height:var(--element-height);*/
	display:flex;
	align-items:center;
}

input[type="text"]:not([disabled="disabled"]):focus,
input[type="password"]:not([disabled="disabled"]):focus,
textarea:focus,
select:focus,
.input-group-side:focus,
.input-group-inside:focus,

input:not([disabled="disabled"]):hover:focus,
textarea:hover:focus,
select:hover:focus,
.input-group-side:hover:focus,
.input-group-inside:hover:focus{
	outline:0;
	border-color:var(--color-primary);
}
input[type="text"]:not([disabled="disabled"]):hover:not(:focus),
input[type="password"]:not([disabled="disabled"]):hover:not(:focus),
textarea:hover:not(:focus),
select:hover:not(:focus),
.input-group-side:hover:not(:focus),
.input-group-inside:hover:not(:focus){
	border-color:var(--color-muted);
	opacity:.9;
}

/*
	input에 타겟이 걸렸을때
*/
[class*=target-]{

}

/*
	Selectbox
*/
.selectbox{
	background-color:#fff;
	position:relative;
	z-index:1000;
}
.selectbox .selectbox-option input{
	display:none;
}
.selectbox .selectbox-option label{
	display:flex;
	align-items:center;
	cursor:pointer;
	padding:.5rem 1rem;
	min-height:var(--element-height);	
	border:1px solid #dfdfdf;
	margin:0;
}
.selectbox .selectbox-option img{
	height:calc(var(--element-height) / 1.6);
	border-radius:var(--element-radius-small);
	flex:0;
}
.selectbox .selectbox-option *{
	flex:1;
	width:100%;
}
.selectbox .selectbox-option label * + *{
	margin-left:.5rem;
}
.selectbox .selectbox-option.selected label{
	display:flex;
	border-radius:var(--element-radius);
	border:1px solid var(--color-bordered);
	position:relative;
}
.selectbox .selectbox-option.selected label::before{
	content:'';
	position:absolute;
	right:1rem;
	background:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 9l6 6 6-6"%3E%3C/path%3E%3C/svg%3E') no-repeat center center;
	background-size:cover;
	width:1rem;
	height:1rem;
}
.selectbox .selectbox__options{
	position:absolute;
	width:100%;
	background-color:#fff;
	top:calc(var(--element-height) + 4px);
	border:1px solid #ddd;
	border-radius:var(--element-radius);
	box-shadow:var(--muted-box-shadow);
	display:none;
}
.selectbox .selectbox__options .selectbox-option label{
	border:0;
	border-bottom:1px solid #efefef;
	transition:.3s;
}
.selectbox .selectbox__options .selectbox-option label:hover{
	background-color:#f4f4f4;
}


/*
	Section
*/
.section{
	margin-bottom:2rem;
}

/*
	flex
*/
.flex{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.flex .flex__col{
	flex:1 1 auto;
}
.flex .flex__col:last-child{
	display:flex;
	justify-content:flex-end;
}
.flex > .flex__col:only-child{
	display:inherit;
	justify-content:flex-start;
}

/*
	Field
*/
.field + .field,
.field + fieldset,
.field + div[data-table]{
	margin-top:2rem!important;
}
.field + fieldset{
	margin-top:3rem!important;
}
fieldset + fieldset{
	/*margin-top:2rem;*/
}
fieldset + .field{
	margin-top:2rem;
}

label{
	position:relative;
}
label i{
	padding-right:.5rem;
}
label span + .badge{
	margin-left:.25rem;
}

.field label,
[class*=input-group] label{
	display:block;
	font-weight:600;
	margin-bottom:.75rem;
}
.field label .field-message{
	margin-bottom:0;
	margin-left:1rem;
	display:inline-block;
	float:right;
	margin-top:.1rem;
}
.field label .field-message.float-left{
	float:none;
}

.field-title{
	font-size:1.25rem;
	font-weight:bold;
	margin-bottom:2rem;
}

.field + .field-title{
	margin-top:2rem;
}


.field .flex{
	/*margin-bottom:.35rem;*/
}
.field .flex .flex__col label{
	/*margin-bottom:0;*/
}
.field .flex .flex__col:last-child{
	text-align:right;
}
.field .flex .flex__col .btn{
	height:auto;
	padding:.15rem .5rem;
	font-size:.8em;
	margin-top:-.3rem;
}

/* Field Message */
.field-message{
	color:var(--color-guide);
	margin-top:.5rem;
	margin-bottom:0rem;
	font-size:var(--font-size-small);
	display:inline-block;
	align-items:center;
	font-weight:normal;
}
.field-message::before{
	content:'*';
	padding-right:.25rem;
	margin-top:.1rem;
}

/*
	input group
*/
.input-group{
	display:inline-flex;
	align-items:center;
	min-height:var(--element-height);
	flex-wrap:wrap;
	width:100%;
}
.input-group label{
	margin:0;
	white-space:nowrap;
	display:inline-flex;
	align-items:center;
}
.input-group input[type="text"],
.input-group input[type="password"],
.input-group input[type="file"],
.input-group select,
.input-group textarea{
	display:block;
	margin-top:.7rem;
	width:100%;
}
.input-group input[type="radio"],
.input-group input[type="checkbox"]{
	margin-right:0rem;
}
.input-group input[type="radio"] + label,
.input-group input[type="checkbox"] + label{
	padding-left:.5rem;
}
.input-group input[type="radio"] + label + input[type="radio"],
.input-group input[type="checkbox"] + label + input[type="checkbox"]{
	margin-left:1rem;
}
.input-group input[type="checkbox"] + label{
	cursor:pointer;
}
.input-group .field-message{
}
.input-group .btn{
	white-space:nowrap;
	margin-left:.5rem;
}
	[class*=input-group] [class*=input-group]{
		width:100%;
	}




/*
	input group :: column
*/
.input-group-column{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.input-group-column span{
	padding:0 1rem;
	text-align:center;
}

.input-group-inside{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	position:relative;
}
.input-group-inside label{
	width:100%;
}
.input-group-inside input,
.input-group-inside span,
.input-group-inside .btn,
.input-group-inside select{
	display:inline-flex;
	align-items:center;
}
.input-group-inside select + .btn::before,
.input-group-inside select + span::before{
	content:'';
	position:absolute;
	left:-2rem;
	background:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 9l6 6 6-6"%3E%3C/path%3E%3C/svg%3E') no-repeat center center;
	background-size:cover;
	width:1rem;
	height:1rem;
}
.input-group-inside input{
	padding-right:2rem;
}
.input-group-inside input:focus + span{
	color:var(--color-primary);
}


.input-group-inside.-suffix input,
.input-group-inside span + input{
	padding-left:2.5rem;
}
.input-group-inside label + input + span,
.input-group-inside label + input + .btn{
	position:absolute;
	right:1rem;
	top:2.5rem;
}
.input-group-inside span,
.input-group-inside .btn{
	position:absolute;
	left:1rem;
	top:2.55rem;
}

.input-group-inside input{
	padding-left:2rem;
}
.input-group-inside.-suffix input + span,
.input-group-inside.-suffix input + .btn{
	position:absolute;
	right:1rem;
	top:2.55rem;
}

.input-group-inside.-suffix span,
.input-group-inside.-suffix .btn,
.input-group-inside > span:first-child,
.input-group-inside > .btn:first-child{
	position:absolute;
	left:1rem;
	top:.15rem;
	z-index:1;
	width:1rem;
}
.input-group-inside input + span{
	top:.15rem!important;
}

.input-group-inside span{
	height:calc(var(--element-height) - 4px);
}
.input-group-inside .btn{
	height:calc(var(--element-height) / 1.5);
	right:.75rem;
	top:2.85rem;
	font-size:.9em;
}

.input-group-inside.-suffix input{
	padding-left:1rem;
	text-align:right;
	padding-right:2.5rem;
}
.input-group-inside.-suffix span{
	left:auto;
	right:1rem;
}

/* Input group side */
.input-group-side{
	display:flex;
	flex-wrap:wrap;
}
.input-group-side label{
	width:100%;
}
.input-group-side input{
	flex:1; /* 가변 너비 설정 */
    min-width: 0; /* 줄 바꿈 방지 */
    width:100%;
}
.input-group-side .btn {
    white-space: nowrap;
    margin-left: 0.5rem;
    display: inline-flex;
    align-items: center;
}
.input-group-side > *:last-child{
	white-space:nowrap;
	margin-left:.5rem;
	align-items:center;
	display:inline-flex;
}
.input-group-side > .input-group-btn label{
	margin-left:0;
}

/*
	Input Group Btn
*/
.input-group-btn{
	display:inline-flex;
	align-items:center;
	margin-left:-1rem;
}
.input-group-btn input[type="radio"],
.input-group-btn input[type="checkbox"]{
	display:none;
}
.input-group-btn label{
	margin:0;
	height:var(--element-height);
	border-radius:var(--element-radius);
	text-align:center;
	align-items:center;
	justify-content:center;
	display:inline-flex;
	border:1px solid var(--color-bordered);
	background-color:#fff;
	padding-left:2rem;
	padding-right:2rem;
	margin-left:1rem;
	white-space:nowrap;
}
.input-group-btn input:checked + label{
	background-color:var(--color-primary-bg);
	border-color:var(--color-primary);
	position:relative;
	z-index:1;
}
.input-group-btn input:checked + label::before{
	content: "";
    position: absolute;
    top: -1.5px;
    left: -1.5px;
    right: -1.5px;
    bottom: -1.5px;
    border: 1.5px solid var(--color-primary);
    pointer-events: none;
    border-radius:var(--element-radius);
	box-shadow: inset 0 0 0 1.5px #fff;
}
.input-group-btn input:checked + label::after{
	content:'\F272';
	font-family:'bootstrap-icons';
	background-color:var(--color-primary);
	color:#fff;
	border-radius:50%;
	font-size:.85em;
	border:1.5px solid #fff;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:1.5rem;
	height:1.5rem;
	position:absolute;
	right:-.5rem;
	top:-.5rem;
	z-index:2;
	animation: scaleEffect 0.3s ease-out;
}
@keyframes scaleEffect {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    80% {
        transform: scale(1.25);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

.input-group-btn input[disabled="disabled"] + label,
.input-group-btn input[disabled] + label{
	background-color:var(--color-disabled);
	color:var(--color-muted);
}

/* 라벨 위에 걸쳐있는 뱃지 */
.input-group-btn label.badge-line-overlap .badge{
	position:absolute;
	top:-.55rem;
	left:50%;
	transform:translateX(-50%);
}

/* Input Group btn On Off */
.input-group-btn-onoff{
	display:flex;
}
.input-group-btn-onoff input{
	display:none;
}
.input-group-btn-onoff input + label{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:var(--element-radius);
	height:var(--element-height);
	cursor:pointer;
	background-color:var(--color-secondary);
	color:#fff;
	width:100%;
	font-size:0;
	text-indent:-1000em;
}
.input-group-btn-onoff input:checked + label{
	background-color:var(--color-primary);
}
.input-group-btn-onoff input + label::before{
	 content: attr(data-off);
	 font-size:1rem; 
	 text-indent:0;
}
.input-group-btn-onoff input:checked + label::before{
	 content: attr(data-on);
	 font-size:1rem; 
	 text-indent:0;
}

/* Input Group Btn + full */
.input-group-btn.full{
	display:flex;
	justify-content:space-between;
}
.input-group-btn.full label{
	width:100%;
	flex:1 1 auto;
	padding-left:0;
	padding-right:0;
}

/* Input Group Img */
.input-group-img input{
	display:none;
}
.input-group-img label{
	display:inline-flex;
	flex-direction:column;
	justify-content:center;
}
.input-group-img label{
	text-align:center;
}
.input-group-img label img{
	border-radius:var(--element-radius);
	overflow:hidden;
	border:1px solid var(--color-bordered);
	display:block;
	padding:.5rem;
	width:100px;
	min-width:50px;
	max-width:100px;
}
.input-group-img label span{
	display:block;
	padding-top:.5rem;
}
.input-group-img input:checked + label{
	color:var(--color-primary);
}
.input-group-img input:checked + label img{
	border-color:var(--color-primary);
}
.input-group-img label ~ label{
	margin-left:1rem;
}

/* Input Group :: error */
.input-group.error input,
.input-group.error input:not([disabled="disabled"]):hover:not(:focus),
.input-group.error input:focus,
.input-group.error select{
	border-color:var(--color-danger);
}
.input-group.error label{
	color:var(--color-danger);
}
.input-group.error label::before{
	content:'\F33A';
	font-family: 'bootstrap-icons';
	color:var(--color-danger);
	padding-right:.25rem;
	font-size:1rem;
	display:none;
}

/* Input Group :: Hidden Label */
.hidden-label{
	position:relative;
}
.hidden-label label{
	opacity:0;
	visibility:hidden;
	position:absolute;
	width:auto;
	margin:0;
	font-weight:500;
	display:inline-block;
	transform: translateY(10px); 
	transition: transform 0.3s ease-in-out;
}
.hidden-label label.active{
	left:1rem;
	background-color:#fff;
	display:inline-block;
	z-index:2;
	font-size:.8em;
	padding:.25rem .25rem;
	border-radius:1px;
	opacity:1;
	visibility:visible;
	color:var(--color-primary);
	transform: translateY(-1px); 
	transition: transform 0.3s ease-in-out;
}
.hidden-label input:focus::placeholder{
	color:transparent;
	transition:.3s;
}
.hidden-label label.complete{
	color:var(--color-guide);
}

.input-group.hidden-label label{
	top:-.15rem;
}
.input-group-inside.hidden-label input{
	position:relative;
	z-index:1;
	padding-left:3rem;
}

.input-group-inside.hidden-label label{
	top:-.8rem;
}
.input-group-inside.hidden-label span{
	top:.15rem;
	width:2rem;
	z-index:2;
}
.input-group-inside.hidden-label.-suffix span{
	top:.25rem;
}




	
/* Field Message Error type */
[class*=input-group].error .field-message{
	color:var(--color-danger);
}
[class*=input-group].error .field-message::before{
	content:'\F33A';
	font-family:'bootstrap-icons';
}
[class*=input-group].complete .field-message{
	color:var(--color-primary);
	display:none; /* test */
}

[class*=input-group].complete .field-message::before{
	content:'\F26B';
	font-family:'bootstrap-icons';
}

/* Input Group :: Validate */
[data-type="only_en"] label::after{
	content:'* 영문,_ 만 입력가능 ';
	color:var(--color-guide);
	padding-left:.5rem;
	font-size:var(--font-size-small);
	font-weight:normal;
}
[data-auto-complete] label{
}
[data-auto-complete] label::after{
	content:'* 숫자만 입력하세요';
	color:var(--color-guide);
	padding-left:.5rem;
	font-size:var(--font-size-small);
	font-weight:normal;
}
[data-auto-complete="price"] input{
	text-align:right;
}
[data-type="price"] input{
	text-align:right;
}

/* Input Group :: Required */
[class*=input-group].required label::after{
	content:'*';
	color:var(--color-primary);
	padding-left:.5rem;
}
[class*=input-group].error.required label::after{
	color:var(--color-danger);
}

/* datepicker span */
[class*=input-group] .datepicker + span{
	font-size:0;
}

[class*=input-group] .datepicker + span::before{
	content:'\F1E2';
	font-family:'bootstrap-icons';
	font-size:1rem;
}

/* 숫자입력하면 한글로 나타내는 부분 */
[data-option="number_to_kr"] + span{
	display:block;
	font-size:var(--font-size-small);
	margin-top:.5rem;
	text-align:right;
	padding-right:1rem;
}

.row + .row,
section + section{
	margin-top:2rem;
}



/*
	Layout
*/
#header .row{
	height:80px;
}
	#header .nav > ul > li{
	}
	#header .nav > ul > li > a{
		color:var(--color-default);
		font-weight:600;
	}
	#header nav > ul > li{
	}
	
	#header .row,
	#header .grid,
	#header [class*=container],
	#header .grid > [class*=grid__]{
		height:inherit;
	}
	#header .grid > [class*=grid__]{
		display:flex;
		align-items:center;
		white-space:nowrap;
		flex:1 1 auto;
	}
	#header .grid > [class*=grid__]:last-child{
		text-align:right;
		justify-content:flex-end;
	}
	#header .btn:not(.btn-icon){
		
	}
	
	/* Header Brand */
	#header__brand a{
		color:var(--color-default);
		font-weight:bold;
		font-size:var(--font-size-large);
		position:relative;
		display:inline-block;
	}
	
	#header.fixed{
		position:fixed;
		left:0;
		top:0;
		width:100%;
		z-index:9990;
	}
#body{
	padding:1rem 0;
}
#footer{
	clear:both;
}
	#footer-copyright{
		font-size:var(--font-size-small);
	}

/*
	Page
*/
.page .page__head{
	height:80px;
	border-bottom:1px solid var(--color-bordered);
	background-color:var(--color-muted-bg);
	display:flex;
	align-items:center;
}
.page .page__head .container{
	height:inherit;
	display:flex;
	align-items:center;
}
.page .page__head .page-title{
	margin:0;
	font-size:1.7rem;
}
.page .page__body{
	padding:5rem 0;
	min-height:500px;
}
.page .page__head .grid{
	width:100%;
}

/*
	Grid
*/
.grid{
	margin-left:-1rem;
	display:flex;
	flex-wrap:wrap;
}
.grid + .grid{
	margin-top:1rem;
}
.grid > [class*=grid__]{
	padding-left:1rem;
	/*padding-bottom:1rem;*/
}
.grid > .grid__12{
	width:100%;
}
.grid > .grid__11{
	width:calc(8.333% * 11);
}
.grid > .grid__10{
	width:calc(8.333% * 10);
}
.grid > .grid__9{
	width:calc(8.333% * 9);
}
.grid > .grid__8{
	width:calc(8.333% * 8);
}
.grid > .grid__7{
	width:calc(8.333% * 7);
}
.grid > .grid__6{
	width:calc(8.333% * 6);
}
.grid > .grid__5{
	width:calc(8.333% * 5);
}
.grid > .grid__4{
	width:calc(8.333% * 4);
}
.grid > .grid__3{
	width:calc(8.333% * 3);
}
.grid > .grid__2{
	width:calc(8.333% * 2);
}
.grid > .grid__1{
	width:calc(8.333% * 1);
}

.grid.grid-large{
	margin-left:-2rem;
}
.grid.grid-large > [class*=grid__]{
	padding-left:2rem;
}

.grid.grid-vcenter > [class*=grid__]{
	display:flex;
	align-items:center;
}

/*
	List
*/
.list-qa{
	display:table;
	width:100%;
}
.list-qa > li{
	display:table-row;
}
.list-qa > li .q,
.list-qa > li .a{
	display:table-cell;
	padding-bottom:1rem;
	vertical-align:middle;
}
.list-qa > li .q{
	max-width:100px;
	white-space:nowrap;
}
.list-qa > li .q i{
	padding-right:.25rem;
}
.list-qa > li .a{
	padding-left:2rem;
	font-weight:bold;
}
.list-qa > li:last-child > .q,
.list-qa > li:last-child > .a{
	padding-bottom:0;
}

	/* with Space between */
	.list-qa.space-between .a{
		text-align:right;
	}

/* list-block */
.list-block > li{
	padding-bottom:1rem;
}
.list-block > li:last-child{
	padding-bottom:0;
}


/* list-block bullet */
.list-block-bullet > li::before{
	content:'';
	margin-right:.5rem;
	width:3px;
	height:3px;
	background-color:var(--color-default);
	display:inline-block;
	vertical-align:middle;
	border-radius:50%;
	margin-top:-3px;
}

/* list step */
.list-step{
	display:flex;
	align-items:center;
	justify-content:center;
}
.list-step > li{
	color:var(--color-secondary);
	padding:1rem 3rem;
	text-align:center;
	position:relative;
	white-space:nowrap;
}
.list-step > li i{
	font-size:2rem;
	border-radius:50%;
	background-color:var(--color-muted-bg);
	padding:1rem 1.7rem;
	display:inline-block;
	margin-bottom:1rem;
	position:relative;
}
.list-step > li.active{
	color:var(--color-primary);
	font-weight:bold;
}
.list-step > li.active i::after{
	content:'';
	width:calc(100% + .9rem);
	height:calc(100% + .9rem);
	border:1px solid var(--color-primary);
	position:absolute;
	left:-.5rem;
	top:-.5rem;
	border-radius:50%;
	line-height:1;
}
.list-step > li.active i{
	background-color:var(--color-primary);
	color:#fff;
}
.list-step > li small{
	display:block;
	font-size:var(--font-size-mini);
	color:var(--color-guide);
	font-weight:normal;
}
.list-step > li::before{
	content:'';
	background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 stroke%3D%22%23efefef%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E%3Cpolyline points%3D%228 4 16 12 8 20%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	width:2rem;
	height:2rem;
	position:absolute;
	right:-1rem;
	top:25%;
}
.list-step > li:last-child::before{
	display:none;
}

/*
	Badge
*/
.badge{
	font-size:.8em;
	font-weight:500;
	text-align:center;
	justify-content:center;
	display:inline-flex;
	align-items:center;
	padding:.25rem .5rem;
	line-height:1;
	border-radius:var(--element-radius);
	background-color:var(--color-primary);
	color:#fff;
	border-radius:100px;
	vertical-align:middle;
	line-height:1;
	margin-right:.5rem;
}
.badge.badge-secondary{
	background-color:var(--color-secondary);
}
.badge.badge-success{
	background-color:var(--color-success);
}
.badge.badge-warning{
	background-color:var(--color-warning);
}
.badge.badge-danger{
	background-color:var(--color-danger);
}
.badge.badge-muted{
	background-color:var(--color-muted);
}
.badge.badge-none{
	background-color:transparent;
	color:var(--color-primary);
}

.badge.badge-oval{
	padding-left:.75rem;
	padding-right:.75rem;
}

.n{
	background-color:var(--color-danger);
	color:#fff;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:2px;
	font-size:.6em;
	line-height:1;
	position:relative;
	top:-1px;
	margin-left:.5rem;
	padding:.25rem .35rem;
	border-radius:50%;
	vertical-align:middle;
}

/*
	Nav
*/
nav > ul{
	display:inline-flex;
	margin-left:-2rem;
}
	nav > ul > li{
		margin-left:2rem;
	}
		nav > ul > li > a{
			color:var(--color-default);
		}
			nav > ul > li > a > *{
			}
		nav > ul > li.active > a{
			background-color:var(--color-primary);
			color:#fff;
		}

/* Nav With Badge */
nav li{
	position:relative;
}
nav li i{
	margin-right:.5rem;
	font-size:1.05em;
}

	/* Nav :: Dropdown */
	.nav.nav-dropdown > ul > li{
		position:relative;
	}
	.nav.nav-dropdown > ul > li:hover > a,
	.nav.nav-dropdown > ul > li:hover > button{
		color:var(--color-primary);
	}
	.nav.nav-dropdown > ul > li > ul{
		position:absolute;
		min-width:180px;
		left:-2rem;
		margin-top:1rem;
		background-color:rgba(255,255,255,.99);
		box-shadow: 0px 15px 50px 0px rgba(27,32,50,0.1);
		padding:1rem;
		text-align:left;
		display:none;
	}
	.nav.nav-dropdown > ul > li > ul::before{
		content:'';
		display:block;
		height:1rem;
		position:absolute;
		top:-1rem;
		width:100%;
	}
		.nav.nav-dropdown > ul > li > ul > li > a,
		.nav.nav-dropdown > ul > li > ul > li > button{
			display:block;
			padding:.75rem 1rem;
			white-space:nowrap;
			font-weight:600;
		}
		.nav.nav-dropdown > ul > li > ul > li > a:hover,
		.nav.nav-dropdown > ul > li > ul > li > button:hover{
			background-color:var(--color-muted-bg);
		}
	.nav.nav-dropdown > ul > li:hover > ul{
		display:block;
	}
	
	/*
		Nav :: Block
	*/
	.nav.nav-block li .badge{
		position:absolute;
		right:1rem;
		top:50%;
		transform:translateY(-50%);
		margin-right:0;
	}
	.nav.nav-block > .nav-title{
		font-size:var(--font-size-small);
		color:var(--color-secondary);
		padding-left:1rem;
		margin:0;
		margin-top:1rem;
		font-weight:500;
	}
	.nav.nav-block > .nav-title + ul{
		margin-top:.5rem;
		padding:0 .75rem;
	}
	
	.nav.nav-block > ul{
		display:block;
	}
		.nav.nav-block > ul > li{
			display:block;
			position:relative;
		}
		.nav.nav-block > ul > li:has(> ul)::before{
			content:'';
			background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 stroke%3D%22black%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E%3Cpolyline points%3D%228 4 16 12 8 20%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E');
			background-size:100%;
			width:.95rem;
			height:.95rem;
			position:absolute;
			right:1rem;
			top:1.15rem;
		}
		.nav.nav-block > ul > li.active::before,
		.nav.nav-block > ul > li.force-open::before{
			background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 stroke%3D%22black%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E%3Cpolyline points%3D%224 8 12 16 20 8%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E');
		}
		.nav.nav-block > ul > li.active > a{
			background-color:var(--color-primary-bg);
			color:var(--color-primary);
			background-color:transparent;
		}
			.nav.nav-block > ul > li > a{
				display:block;
				padding:.75rem 1rem;
				border-radius:var(--element-radius);
				font-weight:500;
			}
			.nav.nav-block > ul > li:not(.active) > a:hover{
				background-color:var(--color-muted-bg);
			}
			
			.nav.nav-block > ul > li > ul{ /* 2depth */
				padding:0rem;
				max-height:0;
				overflow:hidden;
				transition: max-height 0.5s ease;
			}
				.nav.nav-block > ul > li > ul > li > a{
					padding:.5rem;
					display:flex;
					color:var(--color-secondary);
					align-items:center;
					border-radius:var(--element-radius);
					padding-left:1.55rem;
					padding-right:1.55rem;
				}
				.nav.nav-block > ul > li > ul > li > a::before{
					content: '\F28A';
					font-family: 'bootstrap-icons';
					font-size:.5em;
					margin-right:.5rem;
					transition:.3s;
				}
				.nav.nav-block > ul > li > ul > li > a:hover{
					
					color:var(--color-primary);
				}
				.nav.nav-block > ul > li > ul > li > a:hover::before{
					content: '\F287';
					transition:.3s;
				}
				.nav.nav-block > ul > li > ul > li.active > a{
					color:var(--color-primary);
				}
				.nav.nav-block > ul > li > ul > li.active > a::before{
					content: '\F287';
					color:var(--color-primary);
				}
			.nav.nav-block > ul > li.active > ul,
			.nav.nav-block > ul > li.force-open > ul{
				max-height:500px;
				transition: max-height 1.3s ease;
			}
			
				.nav.nav-block > ul > li > ul > li > ul{ /* 3 depth */
					
				}
				.nav.nav-block > ul > li > ul > li > ul > li > a{
					padding:.5rem 2.5rem;
					display:block;
					color:var(--color-default);
					opacity:.8;
					font-size:.9em;
				}
				.nav.nav-block > ul > li > ul > li > ul > li > a::before{
					content:'-';
					display:inline-flex;
					align-items:center;
					margin-right:.5rem;
				}
				.nav.nav-block > ul > li > ul > li > ul > li > a:hover{
					color:var(--color-default);
				}
	
	/*
		Nav :: Pill
	*/
	.nav.nav-pill > ul{
		margin-left:0;
	}
	.nav.nav-pill > ul > li{
		margin-left:0;
	}
	.nav.nav-pill > ul > li > a{
		display:block;
		text-align:center;
		padding:.75rem 1.5rem;
		border-radius:var(--element-radius);
		border-radius:100px;
	}
	.nav.nav-pill > ul > li.active > a{
		background-color:var(--color-primary);
		color:#fff;
		font-weight:500;
	}
	
	/*
		Nav :: Underline
	*/
	.nav.nav-underline{
		height:inherit;
		display:block;
	}
	.nav.nav-underline > ul > li > a{
		display:block;	
		padding:1rem 0;
	}
	.nav.nav-underline > ul > li.active > a{
		position:relative;
		background-color:transparent;
		color:var(--color-primary);
		font-weight:500;
	}
	.nav.nav-underline > ul > li.active > a::before{
		content:'';
		width:100%;
		height:2px;
		background-color:var(--color-primary);
		position:absolute;
		bottom:-1px;
		left:0;
		z-index:1;
	}
	
/* Nav Tab */
.nav-tab .nav-tab-content{
	padding:2rem 0;
	display:none;
}
.nav-tab .nav-tab-content.active{
	display:block;
}

/*
	Dropdown
*/
[class*=dropdown]{
	position:relative;
}
[class*=dropdown] > *{
	position:relative;
}
[class*=dropdown] .dropdown-content{
	background-color:rgba(255,255,255,.96);
	border-radius:var(--element-radius);
	box-shadow:var(--muted-box-shadow);
	position:absolute;
	min-width:150px;
	top:100%;
	right:0;
	padding:1rem .5rem;
	margin-top:.5rem;
	visibility:hidden;
	opacity:0;
	z-index:-1;
	transform: translateY(30px); 
	transition: transform 0.3s ease-in-out;
}
[class*=dropdown] .dropdown-content > button,
[class*=dropdown] .dropdown-content > a{
	display:block;
	padding:.5rem 1rem;
	color:var(--color-default);
	text-align:left;
	border-radius:var(--element-radius);
	border:0;
	background-color:transparent;
	font-size:1rem;
	line-height:2;
	width:100%;
	margin-bottom:.25rem;
	transition:.3s;
}
[class*=dropdown] .dropdown-content > button:disabled,
[class*=dropdown] .dropdown-content > button[disabled="disabled"]{
	background-color:var(--color-disabled);
	color:var(--color-muted);
}
[class*=dropdown] .dropdown-content > *:hover{
	background-color:var(--color-muted-bg);
}

[class*=dropdown] > *:hover::before{
	content:'';
	height:2rem;
	width:100%;
	position:absolute;
	top:100%;
}
[class*=dropdown]:not(.dropdown-click):hover .dropdown-content,
[class*=dropdown] .dropdown-content.active{
	transform: translateY(0px);
	visibility:visible;
	opacity:1;
	z-index:9998;
}
.dropdown-click:hover .dropdown-content{
	display:none;
}
.dropdown-click .dropdown-content.active {
    display: block;
}


/*
	Table
*/
caption{
	display:none;
}
.table{
	border-collapse:collapse;
	width:100%;
}
.table a{
	font-weight:600;
}
.table th,
.table td{
	padding:1rem;
	text-align:left;
}
.table th{
	font-weight:bold;
	white-space:nowrap;
}
.table th i{
	font-size:1.2em;
	padding-right:.25rem;
}
.table td label{
	margin-bottom:0;
}
.table thead tr{
	border-bottom:1px solid var(--color-bordered);
}
.table tbody tr{
	border-bottom:1px solid var(--color-bordered);
}

.table .btn:not(.btn-ori){
	height:calc(var(--element-height-small) / 1.3);
	font-size:var(--font-size-small);
	padding-left:.5rem;
	padding-right:.5rem;
}
.table .btn.btn-mini{
	height:calc(var(--element-height-mini) / 1.3);
	font-size:var(--font-size-mini);
	padding-left:.5rem;
	padding-right:.5rem;
}
.table .btn ~ .btn{
	margin-left:.5rem;
}

	/* Table :: hover */
	.table.table-hover tbody tr:not(.empty):hover{
		background-color:var(--color-muted-bg);
	}
	
	/* Table Color */
	.table .tr-danger{
		background-color:var(--color-danger-bg);
	}
	.table .tr-danger-txt{
		color:var(--color-danger);
	}
	.table .tr-primary{
		background-color:var(--color-primary-bg);
	}
	.table .tr-primary-txt{
		color:var(--color-primary);
	}
	
	/* Table :: Striped */
	.table.table-striped tbody tr:nth-child(even){
		background-color:var(--color-muted-bg);
	}
	.table.table-striped tbody tr:hover{
		background-color:var(--color-muted-bg2);
	}
	
	/* Table :: Data */
	.table.table-data{
		/*border:1px solid var(--color-bordered);*/
	}
	.table.table-data th,
	.table.table-data td{
		border-left:1px solid var(--color-bordered2);
	}
	.table.table-data th:first-child,
	.table.table-data td:first-child{
		border-left:0;
	}
	.table.table-data th:last-child,
	.table.table-data td:last-child{
		border-right:0;
	}
	.table.table-data th{
		background-color:var(--color-muted-bg);
		border-right:1px solid var(--color-bordered);
	}
	.table.table-data th + td + th{
		border-left:1px solid var(--color-bordered);
	}
	
	/* Table Boxy */
	.table.table-boxy{
		border:1px solid var(--color-bordered);
	}
	
	/* Empty */
	.table .empty td{
		padding:5rem;
		text-align:center;
		color:var(--color-muted);
	}

/*
	Card
*/
.card{
	border:1px solid var(--color-bordered);
	border-radius:var(--element-radius);
	background-color:#fff;
}
.card .card-title{
	margin:0;
	font-weight:600;
	font-size:1rem;
}
.card .card__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:1rem var(--layout-padding);
	border-bottom:1px solid var(--color-bordered);
	position:relative;
}
	.card .card-option{
		position:absolute;
		right:var(--layout-padding);
		top:50%;
		transform:translateY(-50%);
	}
	.card .card-option select,
	.card .card-option button:not(.dropdown-content *){
		height:var(--element-height-small);
	}
.card .card__body{
	padding:2rem;
}
.card .card__foot{
	padding:1rem;
	border-top:1px solid var(--color-bordered);
}

.card + .card{
	margin-top:2rem;
}
.card .table.table-data{
	border:0;
}
.card .card__body .table.table-data{
	border:1px solid var(--color-bordered);
}

	/* element in card */
	.card .table tbody > tr:last-child{
		border-bottom:0;
	}


/* Pagination */
.pagination{
	margin-top:1rem;
	text-align:right;
}
.pagination > ol{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	margin-left:-.25rem;
	margin-right:-.25rem;
}
.pagination > ol > li{
	padding:0 .25rem;
}
.pagination > ol > li > a{
	width:var(--element-height-small);
	height:var(--element-height-small);
	border:1px solid var(--color-bordered);
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:var(--element-radius-small);
	text-align:center;
	color:var(--color-secondary);
	background-color:#fff;
}
.pagination > ol > li.active > a{
	background-color:var(--color-primary);
	color:#fff;
	border-color:var(--color-primary);
}

/*
	Modal
*/
#modal{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:-1;
	background-color:rgba(0,0,0,.6);
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:0;
	visibility:hidden;
	transition:.3s;
}
#modal.active{
	opacity:1;
	visibility:visible;
	z-index:9999;
}
#modal .modal{
	background-color:#fff;
	min-width:600px;
	max-width:600px;
	margin:0 auto;
	border-radius:var(--element-radius);
	position:relative;
	box-shadow:var(--box-shadow-muted);
	padding:2rem;
	transform: translateY(100px); 
	transition: transform 0.3s ease-in-out;
}
#modal.active .modal{
	transform: translateY(0);
}
#modal .modal-title{
	font-size:1.425rem;
	font-weight:bold;
}
#modal .modal-desc{
	margin-top:.5rem;
	color:var(--color-guide);
	font-size:1rem;
	font-weight:normal;
}
#modal .modal-close{
	position:absolute;
	right:-1rem;
	top:-1rem;
	border-radius:50%;
	background-color:var(--color-black);
	color:#fff;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border:0;
	font-size:0;
	text-indent:-1000em;
	padding:1rem;
	transition: transform 0.3s ease-in-out;
}
#modal .modal-close::before{
	content:'\F659';
	font-family:'bootstrap-icons';
	font-size:1rem;
	text-indent:0;
}
#modal .modal-close:hover{
	transform: rotate(120deg);
}
#modal .modal .modal__head,
#modal .modal .modal__body{
	max-height:80vh;
	overflow-y:auto;
}
#modal .modal .modal__body{
	margin-left:-2rem;
	margin-right:-2rem;
}
#modal .modal .modal__head{
	padding-bottom:0;
}
#modal .modal .modal__head .modal-title{
	margin:0;
}
#modal-content{
	padding:2rem;
}

#modal.large .modal{
	min-width:780px;
	max-width:780px;
}

/*
	Review
*/
.review{
	
}
.review .review-date{
	color:var(--color-guide);
	padding-left:.5rem;
}
.review .review__head{
	display:flex;
	align-items:center;
}
.review .review__body{
	padding:1rem 0;
}
.review .review-content{
	color:var(--color-content);
}

.review .review-rating::before{
	content:'\F586';
	font-family:'bootstrap-icons';
	color:var(--color-rating);
}
.review .review-rating.rating-5::before{
	content:'\F586\F586\F586\F586\F586';
}
.review .review-rating.rating-4::before{
	content:'\F586\F586\F586\F586';
}
.review .review-rating.rating-3::before{
	content:'\F586\F586\F586';
}
.review .review-rating.rating-2::before{
	content:'\F586\F586';
}
.review .review-rating.rating-1::before{
	content:'\F586';
}


/*
	Scroll Bar
*/
/* 모든 div에 스크롤이 있을 경우 스타일 적용 */
div {
    scrollbar-width: thin; /* Firefox 기본 스크롤바 크기 */
    scrollbar-color: #888 #f1f1f1; /* thumb, track 색상 */
}

/* 기본 스크롤바 (얇은 크기) */
div::-webkit-scrollbar {
    width: 8px; /* 기본 크기 */
    height: 8px;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
}

/* 트랙 (스크롤바 배경) */
div::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* 스크롤바 */
div::-webkit-scrollbar-thumb {
    background: #dedede;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
}

/* ✅ 스크롤바(`thumb`)에 마우스를 올리면 넓이 확대 */
div::-webkit-scrollbar-thumb:hover {
    background: #999;
    width: 12px; /* 스크롤바 넓이 증가 */
}

/* AJAX 로딩 화면 스타일 */
#ajax-loading span{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 9999;
    overflow:hidden;
}
#ajax-loading::after{
	content:'';
	background-color:rgba(255,255,255,.5);
	position:fixed;
	left:0;
	top:0;
	width:100vw;
	height:100vh;
	z-index:9998;
	backdrop-filter: blur(5px); /* 블러 효과 */
    -webkit-backdrop-filter: blur(5px);
}

/* 회전 애니메이션 */
@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}


/* Media Query */


@media(min-width:1441px){ /* Desk Top :: dt */
	.only-dt{
		display:block;
	}
	th.only-dt,
	td.only-dt{
		display:table-cell;
	}
}

@media(max-width:1440px){ /* Lap Top :: lt (노트북)*/
	.only-dt{
		display:none;
	}
	.list-step > li{
		padding:1rem 2.5rem;	
	}
}

/*
	Grade
*/
.gradeWrap{
	display:flex;
	margin-bottom:2rem;
	margin-top:.5rem;
	align-items:center;
}
	.gradeWrap .grade{
		display:flex;
		margin-left:-3px;
	}
	.gradeWrap .grade svg{
		width:18px;
		height:20px;
	}
	.gradeWrap .grade .material-symbols-outlined{
		width:18px;
		font-size:1.5rem;
		color:#FFAD0E;
	}
	
	.gradeWrap .grade-count{
		margin-left:.5rem;
	}
		.gradeWrap .grade-count strong{
			padding-right:.5rem;
		}
		.gradeWrap .grade-count a{
			text-decoration:none;
			color:var(--color-gray);
		}



/*
	Size
*/
.half{
	width:50%;
}