/*write*/
.note-toolbar > .btn-group { margin-right: 1px !important }

/*list*//*view*/
.page-switch .custom-control-label:before { width: 4.75rem;height: 2rem; border-radius:5rem; top:0;  box-shadow: inset 0 1px 2px rgba(0,0,0,.3),inset 1px 0 2px rgba(0,0,0,.1); }
.page-switch .custom-control-label:after { width: calc(2rem - 4px); height: calc(2rem - 4px); border-radius: 5rem;top: calc(0rem + 2px);border: 1px solid #fff; }
.page-switch .custom-control-input:checked ~ .custom-control-label::after { -webkit-transform: translateX(2.75rem); transform: translateX(2.75rem);}
.page-switch .custom-control-input ~ .custom-control-label::before { content:'크게'; position: absolute;  text-align: right; padding: .4rem .85rem; font-size: .8rem;}
.page-switch .custom-control-input:checked ~ .custom-control-label::before { content:'작게'; text-align: left}

.page-btn .btn{ width:2rem; height: 2rem; padding: 0; text-align: center; line-height: 2rem; font-size: .85rem;}
.page-btn .btn + .tooltip, .page-addon .btn + .tooltip  {text-overflow: ellipsis;white-space: nowrap; }
.page-btn .btn + .tooltip .tooltip-inner, .page-addon .btn + .tooltip .tooltip-inner{ max-width:none }

.page-header a {color:inherit}
.page-content a.link:hover:after {content: "\f144";font-family: 'Font Awesome 5 Free';font-size:12px; margin:0 2px}

.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6, .page-content .h1, .page-content .h2, .page-content .h3, .page-content .h4, .page-content .h5, .page-content .h6 {
	line-height: 1.7;
}

.page-content .img-fluid {cursor:pointer}
.page-content, #comment_view .media-body p  {word-wrap: break-word} 
/*.page-content, #mb_signature {margin:2rem 0 6rem 0}*/
@media screen and (min-width:767px){
	.page-content .table td.content { white-space: normal }
}
.page-toolbar, .page-favorite {margin-top:10px; margin-bottom:40px }
.page-add .label { margin-right:15px }
.page-add .label, .page-add a {font-size:12px }
.page-add small {margin-right:10px}
.page-favorite .btn[disabled] { font-weight:600 }
.btn-group .add{ list-style:none; min-width:140px}
.btn-group .add li {display:block; cursor:pointer; font-size:12px; overflow:hidden }
.btn-group .add li:hover {background-color:inherit }


.figure { display: table; margin: 2rem auto;max-width:100%}
.figure img {margin-bottom: 1rem; line-height: 1 }
.figure-caption { display:table-caption; caption-side: bottom; word-wrap: break-word; font-size: 90%;  color: #636c72 }


/*카테고리 tab*/
.nav-category {margin-bottom:20px; border-bottom: 1px solid #999; white-space: nowrap; width:100% }
.nav-category > li > a {margin-right:0 }
.nav-category > li.active a{font-size:15px; padding-left:20px }
.nav-category > li.active:before {content: "\f0dd"; font-family:'Font Awesome 5 Free'; color:#ccc;position:absolute; top:9px; left:8px }
.nav-category > li.active > a, .nav-category > li.active > a:hover, .nav-category > li.active > a:focus { color: inherit; background-color:inherit ; border:1px solid #999; border-bottom:1px solid #fff !important; z-index:19 }
.nav-category > li > a, .nav-category > li > a:hover, .nav-category > li> a:focus { color: inherit; background-color: transparent; border:none; border-radius: 0px; }

/*STYLE*/
.page-content { text-align: justify; text-justify: inter-word }
h4.title {/* border-bottom: 1px solid #DDD;*/ padding-bottom:5px; position:relative;padding-left:20px;  font-weight:600; font-size: 18px; line-height:34px;margin-top: 20px; margin-bottom: 10px; }
h4.title:before,  h4.title:after { font-family:'Font Awesome 5 Free'; color:#999;  font-size:14px; position:absolute }
h4.title:before  { content: "\f10d"; padding-right:3px;top:4px;left:0  }
h4.title:after {  content: "\f10e"; padding-left:8px; bottom:9px}

.page-content .table ul, .page-content .table ol {padding-left:20px}
.page-content ol:not(.rounded-list) li { padding-top:2px }

/*절차*/
.process {text-align:center }
.process > div:after { content: "\f063";  display:block; font-family:'Font Awesome 5 Free'; color:#31b0d5;; font-size:2rem;line-height:.8em; text-align:center; font-weight:600;margin: 2% 0; }
.process > div:nth-child(odd):after {margin-left:50%}
.process > div:nth-child(even):after {margin-right:50%}
.process .row > div:after {  content: "\f061"; font-family:'Font Awesome 5 Free'; color:#31b0d5; font-size:2rem;line-height:.8em; text-align:center; font-weight:600;position:absolute; right:-14px; top: 50%; margin-top: -25px; }
.process  > div:nth-child(even) .row > div:after  { content: "\f060"; }
.process > div:last-child:after,.process .row > div:last-child:after, .process  > div:nth-child(even) .row > div:last-child:after { content: ""; }
.process > div h5 { font-size:1.2rem;font-weight:600; padding-top: 15px; margin-bottom:0 }


.grade {margin-top:10px; margin-bottom:30px; text-align:center }
.grade > div:after {  content: "\f054"; font-family:'Font Awesome 5 Free'; color:#ccc; font-size:3rem;line-height:.8em; text-align:center; font-weight:600 }
.grade > div:last-child:after, .grade > div.last:after {  content: "" }
.grade > div h5 { font-size:1.2rem;font-weight:600; padding: 10px 5px; }
.grade > div > .img-fluid { margin:0 auto }

@media screen and (min-width:576px){
	.grade > div:after { position:absolute; right:-15px; top: 50%; margin-top: -45px;}
	.grade > div:last-child:after, .grade > div.last { padding-right: 0 }
}
@media screen and (max-width:576px){/*col-sm*/
	.grade > div:after { content: "\f107";  display:block; font-size:5rem }
	.grade img { min-width:50% }
}

.vgrade > div:after { content: "\f107";  display:block; font-family:'Font Awesome 5 Free'; color:#ccc;; font-size:3rem;line-height:.8em; text-align:center; font-weight:600 }
.vgrade > div:last-child:after, .vgrade > div.last:after { content: "" }


.circle img { border-radius: 50%; padding: 15px;   margin: 0 auto 10px;background-color: #f5f5f5; border: 1px solid #e3e3e3; box-shadow: inset 0 1px 1px rgba(0,0,0,.05);transition: color 0.2s linear 0s, background 0.2s linear 0s }
.circle img:hover { background-color: #bce8f1; border: 1px solid #31708f; }

/*cafe*/
.preview-thumbnail.nav-tabs { border: none; margin-top: 15px; }
.preview-thumbnail.nav-tabs li { width: 18%; margin-right: 2.5%; }
.preview-thumbnail.nav-tabs li img { max-width: 100%; display: block;border: 1px solid#ddd }
.preview-thumbnail.nav-tabs li a { padding: 0; margin: 0; box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);}
.preview-thumbnail.nav-tabs li:last-of-type {  margin-right: 0; }
.preview-thumbnail.nav-tabs li.active img { border: 1px solid red; }
.tab-content { overflow: hidden; }
.tab-content img { width: 100%; -webkit-animation-name: opacity; animation-name: opacity; -webkit-animation-duration: .3s; animation-duration: .3s; border: 1px solid#ddd}
@-webkit-keyframes opacity {
  0% { opacity: 0; -webkit-transform: scale(3); transform: scale(3); }
  100% { opacity: 1; -webkit-transform: scale(1);  transform: scale(1); } 
 }

@keyframes opacity {
  0% { opacity: 0; -webkit-transform: scale(3); transform: scale(3); }
  100% { opacity: 1;-webkit-transform: scale(1); transform: scale(1); } 
 }

.btn-lg.btn-circle { width: 140px;  height: 140px; line-height: 140px; font-size:20px;padding: 0px;margin-bottom: 10px; }
.btn-lg.btn-circle small { color: inherit; display: block; margin-top: -120px;font-weight: normal;font-size: 65%; }
#bbs-content .label {padding: 1px 15px; border-radius: 5em; }

/*biz*/
.biz .card .card-img-overlay  { transition: background 0.2s linear 0s;}
.biz .card:hover .card-img-overlay {background: rgba(0,0,0,.9); }

/*table*/
.table-bordered th, .table-bordered td { border-color: #cecece !important; }
.table-bordered th:first-child, .table-bordered td:first-child {	border-left:none	!important;}
.table-bordered th:last-child, .table-bordered td:last-child {	border-right:none !important;}

/*flip table*/
.table-flip { display: inline-block; vertical-align: top; max-width: 100%; overflow-x: auto; white-space: nowrap; border-collapse: collapse; border-spacing: 0; display: -webkit-box; display: flex; overflow: hidden; background: none; line-height: 20px; }
.table-flip thead { display: -webkit-box; display: flex; flex-shrink: 0; min-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content;}
.table-flip tbody { display: -webkit-box; display: flex; position: relative; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; background: radial-gradient(left, ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(right, ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;  background-size: 10px 100%, 10px 100%; background-attachment: scroll, scroll; background-repeat: no-repeat;}
.table-flip tr { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; min-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content; flex-shrink: 0; }
.table-flip td, .table-flip th {  display: block; }
.table-flip th { text-align: left }
.table-flip td {  background-image: none !important;  border-left: 0 !important;}
.table-flip th:not(:last-child), .table-flip td:not(:last-child) {  border-bottom: 0 !important;}

/*emphasis*/
.em-dot, .em-underline {position:relative; font-weight:600}
.em-dot:after{ content: ''; width: .6rem; height: .6rem; border-radius: 50%; background:orange; position: absolute; top: -.6rem;left: 50%; margin-left: -.3rem;animation: wave 1.3s linear infinite;box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;}
.em-dot:nth-child(2):after { animation-delay: -1.1s;}
.em-dot:nth-child(3):after {	animation-delay: -0.9s; }
.em-dot:nth-child(4):after {	animation-delay: -0.7s; }
.em-dot:nth-child(5):after {	animation-delay: -0.5s; }
.em-dot:nth-child(6):after {	animation-delay: -0.3s; }
@keyframes wave {	0%, 60%, 100% { transform: initial;	}	30% { transform: translateY(-5px);	} }
.em-underline:after{ content: ''; border-radius: 3px; background: orange; position: absolute; bottom: -.5rem; left: 0;right: 0;height: .25rem;  }