@charset "utf-8";
:root { 
	--bs-highlight-color:var(--bs-black);
	--bs-highlight-bg:yellow;
	--bs-link-color: var(--bs-body-color);
	--bs-link-color-rgb:var(--bs-body-color);/*5.3*/

	--bs-facebook-color:#1877F2;
	--bs-youtube-color:#FF0000;
	--bs-Instagram-color:#E1306C;
	--bs-Instagram-bg:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
a {text-decoration: none;}

/*table*/
.table-responsive {margin-bottom: 1rem;}
.table {margin-bottom: .35rem; }
.table > :not(caption) > * > * {   vertical-align:middle }
.table-nowrap {white-space: nowrap !important;}
.table-layout-fixed {table-layout: fixed;}
.sticky-left { position: -webkit-sticky; position: sticky !important; left:0;  z-index:1020}/*sticky on table*/

/*nav-custom*/
.tabs-scroller { height: 2.75rem; min-height: 2.75rem; overflow-y: hidden; border-bottom:1px solid var(--bs-secondary-bg)}
.tabs-scroller .nav-custom { -ms-flex-wrap: nowrap; flex-wrap: nowrap; white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-x: auto; padding-bottom: 1rem; }
.nav-custom .nav-link {/*padding-left: 0; padding-right:0; */font-size: 1.1rem;}
.nav-custom .nav-link span {position:relative; padding-bottom:.355rem; display:inline-block}
.nav-custom .nav-link.active, .nav-custom .nav-link:hover, .nav-custom .nav-link:focus { border-color: transparent; /*color:inherit;*/background-color: transparent; }
.nav-custom .nav-link.active span {  color:var(--bs-primary); font-weight: 700;}
.nav-custom .nav-link.active span:after {content:''; position:absolute; bottom:-2px; left:0; background:var(--bs-primary); width:100%;height:2px;}

/*form*/
.form-text {line-height:1.2}
.form-text::before { font-family: bootstrap-icons; content: "\f270"; display: inline-block;vertical-align: middle; padding-right: 5px;color: var(--bs-red);}
.form-check-label {-webkit-user-select: none; -moz-user-select: none; user-select: none }
.input-group-sm .input-group-text .form-check {margin-bottom:0; min-height: auto }
.input-group .invalid-tooltip { border-radius: 0.375rem !important }
.invalid-tooltip { margin-top: 5px;}
.invalid-tooltip::before { content: ''; position: absolute; display: block; left: 7px;margin-top: -10px;width: 0;height: 0;border-bottom: 7px dashed rgba(220, 53, 69, 0.9);border-right: 7px solid transparent; border-left: 7px solid transparent;}
.form-check > .invalid-tooltip {margin-left: -1.75em;}

.input-group > .btn-check:first-child + label { border-bottom-left-radius: 0.25rem !important;border-top-left-radius:0.25rem !important; }
.input-group-text > .form-check { margin-bottom: -.2rem }
.form-select { background-position-x: right 0.5rem; padding-right: 1.75rem !important; }
input[type="date"] {min-width: 8rem !important;}
.form-check.d-inline-block .form-check-input {  margin-left: -1.25em; }
.form-check-input[type="checkbox"] {--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23fff' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");}
.btn-check[type="checkbox"] + .btn:not(.btn-link), .btn-check[type="radio"] + .btn:not(.btn-link) { border:1px solid var(--bs-border-color-translucent); transition: box-shadow 0.15s ease-in-out; }
.btn-check[type="radio"] + .btn { border-radius: var(--bs-border-radius-pill) !important;padding-right: .75rem !important;padding-left: .75rem !important;transition: box-shadow 0.15s ease-in-out;}
.btn-check:checked + .btn { border-color:var(--bs-btn-active-border-color); }
.btn-check:focus + .btn {box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);}
[for="selectall"]:not(.btn-check:checked + .btn), [for="selectall"]:hover, [for="selectall2"]:not(.btn-check:checked + .btn), [for="selectall2"]:hover { color: var(--bs-body-color) }
/*form-floating-sm*/
.form-floating-sm {margin-top:1rem; margin-bottom:1rem}
.input-group .form-floating-sm {margin-top:0; margin-bottom:0 }
.form-floating-sm > .form-control, .form-floating-sm > .form-control-plaintext, .form-floating-sm> .form-select { height: calc(2.5rem + calc(var(--bs-border-width) * 2)); min-height: calc(2.5rem + calc(var(--bs-border-width) * 2)); line-height: 1;	}
.form-floating-sm > .form-control, .form-floating-sm > .form-control-plaintext, .form-floating-sm > label { padding: 0.5rem 0.75rem;	}
.form-floating-sm > label { font-size: .95rem; }
.form-floating-sm > .form-control:focus ~ label, .form-floating-sm > .form-control:not(:placeholder-shown) ~ label, .form-floating-sm > .form-control-plaintext ~ label, .form-floating-sm > .form-select ~ label { 
background: linear-gradient(to bottom, var(--bs-body-bg) calc(50% + var(--bs-border-width)*2), transparent calc(50% - var(--bs-border-width)*2)); 

transform: scale(0.85) translateY(-1rem) translateX(0.15rem); padding: 0.25rem; margin-left:0.5rem; height:auto; }
.form-floating-sm > .form-control:focus ~ label { color: var(--bs-primary); font-weight:700; border:0 }
.form-floating-sm > .form-control:focus, .form-floating-sm > .form-control:not(:placeholder-shown), .form-floating-sm > .form-control-plaintext:focus,	.form-floating-sm > .form-control-plaintext:not(:placeholder-shown), .form-floating-sm > .form-select { padding-top: 0.625rem; padding-bottom: 0.625rem; }

/*popover mb-info*/
.mb_info, .mb_info:hover {text-decoration: underline dotted; text-underline-position: under; cursor:help; user-select: none;}
.mb-info { --bs-popover-zindex: 1050; border-radius:0;  }
.mb-info .popover-body { padding-top:2.5rem; }
.mb-info a {display:block;padding:.1rem 1rem; font-size:.85rem;}
.mb-info a:hover { background-color:var(--bs-border-color); color:inherit  }

/*sns icon*/
.sns > *:not(.nav-link):not(.btn) { display:inline-block; margin:0 1% 1.5rem;text-align: center; -webkit-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;text-decoration: none }
.sns a:hover i, .sns a:focus i { -webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2) }
.sns a i { -webkit-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s }
.sns i, .sns a i, .sns-login a i, .sns span i, .sns-icon i{ width:48px; height:48px;display:block; margin-bottom:.25rem; box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;}
.sns a i, .sns-login a i, .sns span i, .sns-icon i{ background:url('../images/snsSet.png') no-repeat }
.sns a i, .sns span i, .sns .fa-share-alt { margin:0 auto 5px;box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset }
.sns .fa-share-alt {width:48px; height:48px;display:block;padding:15px;margin-left:15px; margin-right:15px;font-size:20px}
.sns-login {padding-bottom:1rem; text-align:center }
.sns-login a, .sns-login a:hover, .sns-login a:focus {display: inline-block; margin:0 .25rem; border-radius:0;padding:0;background-color:transparent;border-color:transparent;text-decoration: none  }
.sns a span, .sns-login a span, .sns i + span { font-size:.75rem; letter-spacing:-1px;  }

.facebook i, #facebook i {background-position:0 0px !important }
.twitter i, #twitter i {background-position:0 -48px !important }
.google i {background-position:0 -96px !important}
.naver i {background-position:0 -144px !important}
.daum i, #daum i {background-position:0 -192px !important }
.kakao i, .kakaotalk i, #kakaotalk i {background-position:0 -240px !important }
#kakaostory i {background-position:0 -288px !important }
#band i {background-position:0 -336px !important }
#line i {background-position:0 -384px !important }
.mail i, #mail i {background-position:0 -432px !important }
.happybean i, #happybean i {background-position:0 -480px !important }
.youtube i, #youtube i {background-position:0 -528px !important }
.telegram i, #telegram i {background-position:0 -576px !important }
.instagram i, #instagram i {background-position:0 -624px !important }
@media screen and (max-width:767px){ul.sns a {padding:0; }}

/*sns 구분선*/
.hrtit { display: block; margin: 1rem 0; overflow: hidden; text-align: center; white-space: nowrap;  width: 100% }
.hrtit > span { display: inline-block; position: relative; color:var(--bs-secondary); padding:0 .5rem;font-size:.875rem }
.hrtit > span::before { margin-right: 5px; right: 100% }
.hrtit > span::after { left: 100%; margin-left: 5px }
.hrtit > span::before, .hrtit > span::after { background: var(--bs-border-color); content: ""; height: 1px; position: absolute; top: 50%; width: 9999px }

hr.hr-text { position: relative; border: none; height: 1px;  background: var(--bs-border-color); color:var(--bs-secondary); overflow:visible; opacity:1; font-size: .85rem;  margin-bottom: 2rem;}
hr.hr-text::before {  content: attr(data-content); display: inline-block; white-space: nowrap; background: var(--bs-body-bg); padding: .2rem .5rem;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%); }

/* 1.41 Avatar  Thanks to Spectre.css */
.avatar {background: var(--bs-purple);border-radius: 50%;color: var(--bs-white); display: inline-block;font-size: 16px;font-weight: 300;margin: 0; position: relative; vertical-align: middle;white-space: nowrap; height: 45px;width: 45px;min-width: 45px; box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset; background-position: center center;background-repeat: no-repeat;background-size: cover;}
.avatar-responsive {/*height: 0;*/padding-bottom: 100%;position: relative;width: 100%}
.avatar.avatar-sm, .avatar-sm .avatar {font-size: 13px; height: 26px; width: 26px; min-width: 26px}
.avatar.avatar-lg, .avatar-lg .avatar {font-size: 23px; height: 60px; width: 60px; min-width: 60px; }
.avatar.avatar-xl, .avatar-xl .avatar {font-size: 30px; height: 75px; width: 75px; min-width: 75px}
.avatar img {border-radius: 50%; height: 100%; position: relative; width: 100%; z-index: 1; }
.avatar .avatar-icon {--bs-bg-opacity:1; background: rgba(var(--bs-light-rgb),var(--bs-bg-opacity)); color:#343a40; position: absolute; right: 14.64%;bottom: 14.64%;width: 1.5rem; height: 1.5rem; padding: 0;transform: translate(50%, 50%);z-index: 2;box-shadow: 0 0 0 .5px rgba(0,0,0,.2) inset;border-radius: 50%;font-size:.75rem; border:0 }
.avatar .avatar-icon:hover {background-color: #d9d9d9}
.avatar .avatar-presence {background: #fff; bottom: 14.64%; right: 14.64%;width: 20%;height: 20%;padding: .1rem; position: absolute;  transform: translate(50%, 50%);  z-index: 2;  border-radius: 50%;box-shadow: 0 0 0 .125rem #fff; max-width: 20px; max-height: 20px; }
.avatar .avatar-presence.online { background: var(--bs-teal); }
.avatar .avatar-presence.busy { background: var(--bs-pink); }
.avatar .avatar-presence.away { background: var(--bs-dark-border-subtle); }

.avatar[data-initial]::before { content: attr(data-initial);font-size: .75rem; text-transform: capitalize; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);/*z-index: 1;*/ }
.avatar-responsive[data-initial]::before { font-size: 85%;}
.avatar-lg[data-initial]::before, .avatar-xl[data-initial]::before { font-size: 1rem;}
.avatar-sm[data-initial]::before { font-size: .75rem;}

.chip { position:relative; display: inline-block; padding: 0 20px 0 52px; /*  margin-bottom:.25rem; color: var(--bs-secondary);*/ background-color: var(--bs-secondary-bg); height: 47px; line-height: 47px; border-radius: 23px;border:1px solid transparent;transition: all .3s linear; }
.chip:hover {border:1px solid var(--bs-tertiary-color); color: var(--bs-secondary-text-emphasis); text-decoration: unset;}
.chip.active {background-color:var(--bs-primary); color:var(--bs-white) }
.chip .avatar {position:absolute; left:0; top:0; display:flex; justify-content: center; align-items: center;}
@media screen and (max-width:767px){ .chip { padding: 0 12px 0 50px; }}
.chip.chip-sm {height: 27px; line-height: 27px;padding-left:35px;padding-right:15px; font-size:.85rem}


/**/
.no-caret::after {border:none; display:none !important }
/*@media (max-width: 575.98px) { 
	nav[aria-label] { display:flex; overflow-x:auto; }
	nav[aria-label] .pagination {justify-content:start !important; flex-wrap: nowrap !important;} 
}*/
.px-pagination .page-item {padding-right: 0.25rem; padding-left: 0.25rem}
.px-pagination .page-link { width:32px; height:32px; line-height:30px; padding:0 !important; text-align:center; font-size: .85rem; }

.text-multitruncate { overflow: hidden; text-overflow: ellipsis;display: -webkit-box !important; display: -moz-box !important;display: box !important; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; word-break: break-all; word-wrap: break-word; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; }
.text-shadow { text-shadow: 2px 2px 2px rgba(var(--bs-body-color-rgb),.75); }
.bg-ratio {background-position: center;background-repeat: no-repeat;background-size: cover;--bs-aspect-ratio: 100%;}
.bg-ratio.bg-ratio-sm {background-size: contain}
sup.badge {font-size:.6rem} 
/*blink*/
blink, .blink { -webkit-animation: 1s linear infinite condemned_blink_effect; animation: 1s linear infinite condemned_blink_effect;}
@-webkit-keyframes condemned_blink_effect { 0% { visibility: hidden; } 20% { visibility: hidden; } 100% { visibility: visible; }}
@keyframes condemned_blink_effect {  0% { visibility: hidden; } 20% { visibility: hidden; } 100% { visibility: visible; }}

@media (max-width: 575.98px) {
	.rounded-sm-end { border-top-right-radius: var(--bs-btn-border-radius) !important; border-bottom-right-radius: var(--bs-btn-border-radius) !important} 
	.input-group-sm > .btn.rounded-sm-end { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }
}

/*bullet style*/
.bullet:before { content: ' '; border-radius: var(--bs-border-radius);height:20px; width: 5px; background-color: var(--bs-indigo); display: inline-block;/*vertical-align: text-top;*/ margin-right: .5rem }

/*ul ol*/
.list-unstyled-dot > li {margin-left:10px; line-height: 1rem;}
.list-unstyled-dot > li:before {content:'·'; color:var(--bs-gray-600); opacity: .7;margin-left:-10px;margin-right:5px; font-weight:700; font-size: 120%; line-height: 120% }
.list-inline-divide {margin-bottom:.5rem}
.list-inline-divide li { font-size:.85rem; position: relative; padding-right:7px }
.list-inline-divide li:not(:first-child) { padding-left:7px }
.list-inline-divide li:not(:last-child):after {content:'|'; color:var(--bs-dark-border-subtle); position:absolute; bottom:0; right:-7px; line-height:var(--bs-body-line-height) }

ol.order-list { counter-reset: li; list-style: none; padding-left: 0 }
ol.order-list > li {position:relative; padding-left:25px; /*padding-bottom:2px;*/ text-align: left; line-height:var(--bs-body-line-height); }
ol.order-list > li:before{ content: counter(li); counter-increment: li; position: absolute; left:0; /*top:5px;*/ background-color: var(--bs-info); width: 1.125rem;height: 1.125rem; line-height: var(--bs-body-line-height); text-align: center;  border-radius: 4px; color: #fff; font-size: .75rem; padding: 0; letter-spacing: -1px;}

/*custom tooltip, popover*/
.tooltip.py-0 {  --bs-tooltip-bg: var(--bs-yellow);  --bs-tooltip-color: var(--bs-emphasis-color);}
.popover.py-0 { --bs-popover-border-color: var(--bs-secondary); --bs-popover-body-padding-y: .3rem; --bs-popover-body-padding-x: .3rem;}


/*carousel*/
.carousel-indicators .active { background-color:var(--bs-link-hover-color) !important }
#modal-img + .modal-backdrop.show {--bs-backdrop-opacity:.75}
#mbr-gallery .carousel-item { transition:transform 0.2s ease-in-out;  }
#mbr-gallery .carousel-indicators [data-bs-target] { margin:0; background-color:var(--bs-danger) !important; opacity:1; flex: 1 1 auto; }
#mbr-gallery .carousel-indicators .active ~ [data-bs-target]  { background-color:#fff !important; opacity: .5 }

.no-person, .no-image  {overflow:hidden}
.no-person:before {font-family: bootstrap-icons !important;content: "\f4da"; font-size:2.65rem }
.no-image:before {font-family: bootstrap-icons !important;content: "\f428"; font-size:2.65rem }
.bg-ratio.no-image:before { margin:-4rem auto 0; color:#6c757d !important; text-align:center;z-index: -1; position: relative; }

@media screen and (max-width:767px){
	.mx-md-n15 {
		margin-left: calc(var(--bs-gutter-x) * -0.5);
		margin-right: calc(var(--bs-gutter-x) * -0.5);
		width:calc(100% + var(--bs-gutter-x));
	}
}
.alert {border-left-width: 10px;}
u, .btn-link {text-underline-position: under;}
.pre-scrollable { background-color: var(--bs-body-bg); white-space: break-spaces; padding: 1rem; line-height: 1.6; height:100px; border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
.figure {margin-bottom:2rem}
.figure-caption {margin-top: 1rem;}
