@charset "utf-8";
@import "reset.css"; /* 초기화 스타일 */
@import "fonts.css"; /* 폰트 스타일 */

/* 공통 */

/*화면 겹쳐보이는거 삭제*/
#clinicItem [id^="clinicItem"] {
    display: none;
}



* {box-sizing: border-box;}
*::-webkit-scrollbar { width: 7px; height: 7px;}
*::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.1); border-radius: 10px;}
*::-webkit-scrollbar-track { background: transparent;}
body, h1, h2, h3, h4, h5, h6, input, textarea, select, a, button { font-family: 'Noto Sans KR', sans-serif;	color: #333333; font-size: 14px;}
button{background: none; border: none; border-radius: 0; cursor: pointer; padding: 0; margin: 0; line-height: 1;}
caption, .hidden{ overflow: hidden; border: 0; width: 1px; height: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); display: inline-block;}
input, select { border: solid 1px #cdcdcd; border-radius: 5px; height: 28px; padding: 0 10px;font-size: 13px;}
select { -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image: url('../images/icon/angle-small-down.svg'); background-repeat: no-repeat; background-position: calc(100% - 5px) center; background-size: 15px; padding-right: 30px;}
input[type="checkbox"] {position: absolute; clip: rect(0 0 0 0); width:1px !important; height: 1px !important; overflow: hidden;}
input[type="checkbox"] + label {    position: relative;
    cursor: pointer;
    padding-left: 23px;
    gap: 5px;}

input[type="checkbox"] + label::before {content: ''; position: absolute; top: 10px; left: 10px; transform: translate(-50%, -50%); display: inline-block; width: 18px; height: 18px; border: 1px solid #adadad; border-radius: 3px; background-color: #ffffff;}
input[type="checkbox"]:checked + label::before { background-color: #395ad4;}
input[type="checkbox"]:checked + label::after {content: ''; position: absolute; top: 10px; left: 10px; transform: translate(-50%, -50%); width: 18px; height: 18px; background-color: #ffffff; border-radius: 100%; box-shadow: none; mask-position: 45% 35%; -webkit-mask-position: 45% 35%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 60% auto; -webkit-mask-size: 60% auto; mask-image: url('../images/icon/check.svg'); -webkit-mask-image: url('../images/icon/check.svg');}
.check-wrap {display: flex; gap: 5px; align-items: center; flex-wrap: wrap;}
.check-wrap .text span{line-height: 20px;}
.check-wrap.vertical { align-items: flex-start;}
input[type="radio"] {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; overflow: hidden;}
input[type="radio"] + label {position: relative; cursor: pointer;padding-left: 23px;}
input[type="radio"] + label.text {padding-left: 30px;}
input[type="radio"] + label::before {content: ''; position: absolute; top: 50%; left: 10px; transform: translate(-50%, -50%); display: inline-block; width: 18px; height: 18px; border: 1px solid #adadad; border-radius: 100%; background-color: #ffffff;}
input[type="radio"]:checked + label::after {content: ''; position: absolute; top: 50%; left: 10px; transform: translate(-50%, -50%); width: 12px; height: 12px; background-color: #132058; border-radius: 100%; box-shadow: none;}
input::placeholder {font-size: 14px; color: #cccccc;}
input[disabled="disabled"]{color: #585858; background-color: #ebebeb; border-color: #cccccc;}
textarea {border: solid 1px #cdcdcd; border-radius: 5px; width: 100%; resize: none; min-height: 150px; padding: 10px 15px;height: 100%;}
.radio-wrap {display: flex; gap: 10px 15px; align-items: center; flex-wrap: wrap;    font-size: 12px;}
.radio-wrap .text span{line-height: 20px;}
.age-input {display: flex; align-items: center; gap: 5px;}
.age-input input{min-width: 62px !important; max-width: 62px; text-align: right;}

.btn-wrap { display: flex; justify-content: center; align-items: center; gap: 10px;

 }
 
 .btn-bcg{
     border-top: 1px solid #ddd;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;    
    padding: 10px;}
 
.btn-wrap.between {justify-content: space-between;}
.btn-wrap.between .group {display: flex; align-items: center; gap: 10px;}
.btn-wrap.right {justify-content: flex-end; }
.btn-wrap .btn {padding: 0 15px; font-weight: 500; height: 32px; line-height: 1; min-width: 82px; font-size: 12px;}
.btn { background-color: #132058; color: #ffffff; border-radius: 5px;}
.btn.line {background-color: #ffffff; color: #132058; border: solid 1px #132058;}
.btn.light {background-color: #dee4f8; color: #132058;}
.btn.disabled {background-color: #f3f3f3; color: #cccccc; cursor: not-allowed;}
.btn.popup {gap: 5px; justify-content: center; align-items: center;}
.btn.popup:before {display: inline-flex; width: 10px; height: 10px; vertical-align: middle; content: ''; background-color: #ffffff; mask-position: center center; -webkit-mask-position: center center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 100% auto; -webkit-mask-size: 100% auto; mask-image: url('../images/icon/clone.svg'); -webkit-mask-image: url('../images/icon/clone.svg');}
.btn.disabled.popup:before {background-color: #cccccc;}
.btn.popup.check:after {display: inline-flex; width: 10px; height: 10px; vertical-align: middle; content: ''; background-color: #ffffff; mask-position: center center; -webkit-mask-position: center center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 100% auto; -webkit-mask-size: 100% auto; mask-image: url('../images/icon/check_b.svg'); -webkit-mask-image: url('../images/icon/check_b.svg'); margin-left: 5px;}
.btn-input {display: flex; gap: 10px;}
.btn-input .btn { min-width: 72px; font-size: 12px; font-weight: 600; height: 32px;}

.section .btn-wrap.between {justify-content: space-between;padding: 10px;}
.section .btn-wrap .btn {padding: 0 15px; font-weight: 500; height: 32px; line-height: 1; min-width: 82px; font-size: 12px;}
/*.section .btn-wrap .btn.other {margin-left: -15px;}*/
.section .btn-wrap .btn.excel {background-color: #ffffff; color: #333333; display: flex; align-items: center; gap: 10px; border: solid 1px #132058;}
.section .btn-wrap .btn.excel:before {display: inline-flex; width: 15px; height: 15px; vertical-align: middle; content: ''; background-color: #206f44; mask-position: center center; -webkit-mask-position: center center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 100% auto; -webkit-mask-size: 100% auto; mask-image: url('../images/icon/file-excel.svg'); -webkit-mask-image: url('../images/icon/file-excel.svg');}
.datepicker {background-image: url('../images/icon/calendar_icon.svg'); background-repeat: no-repeat; background-position: calc(100% - 10px) center; background-size: 15px auto; padding: 0 30px 0 10px; cursor: pointer; min-width: 100px !important;}

/* 팝업 공통 */
.close-layer { position: relative; width: 24px; height: 24px; margin-top: 10px; z-index: 100;}
.close-layer:before, .close-layer:after { position: absolute; top: 3px; left: 11px; content: ''; height: 20px; width: 2px; background-color: #132058; border-radius: 20px;}
.close-layer:before { transform: rotate(45deg);}
.close-layer:after { transform: rotate(-45deg);}
.layer-overlay {width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0; display: block; z-index: 99;}

/* 레이어팝업 */
.layer-wrap {position: fixed; top: 50%; left: 50%; display: flex; flex-direction: column; padding: 20px; border-radius: 5px; background-color: #ffffff; transform: translate(-50%, -50%); box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.3); gap: 20px; border: solid 1px #ebebeb; z-index: 100; max-height: 90%;}
.layer-wrap:not(.user) {min-width: 400px; padding: 10px; gap: 10px;    max-width: 950px;}
.layer-wrap:not(.user) .layer-top {display: flex; justify-content: center; align-items: center; position: relative; padding: 0 30px;}
.layer-wrap:not(.user) .layer-top .layer-title {font-size: 16px; font-weight: 600;}
.layer-wrap:not(.user) .layer-top .close-layer {position: absolute; top: 10px; right: 10px; margin: 0; transform: translateY(-50%);}
.layer-content {display: flex; flex-direction: column; gap: 20px; max-height: 100%; overflow: hidden; overflow-y: auto; padding: 10px;}
.layer-wrap:not(.user) .btn-wrap {display: flex; justify-content: center; align-items: center; gap: 10px;}
.layer-wrap:not(.user) .btn-wrap .btn {min-width: 100px;}
.layer-wrap:not(.user) .btn-wrap.between {justify-content: space-between;}

/* 탭 */
.tab-button {display: flex;border-bottom: solid 1px #cdcdcd; align-items: flex-end;}
.tab-button button {display: flex; padding: 10px; border: solid 1px #cdcdcd; border-bottom: none; border-radius: 5px 5px 0 0; background-color: #f3f3f3; color: #898989; font-size: 12px; font-weight: 500; margin-left: 0px;}
.tab-button button.on {background-color: #ffffff; color: #333333; margin-bottom: -1px; padding-bottom: 11px;}

/* 검색조건 */
.search-wrap {display: flex; gap: 10px; flex-wrap: wrap; padding: 10px}
.search-wrap .group {display: flex; gap: 5px; align-items: center;}
.search-wrap .group > span {font-weight: 500; font-size: 12px; color: #898989; padding: 8px 0;}
.search-wrap .group input, .search-wrap .group select {min-width: 150px; max-width: 150px;font-size: 12px;}
.search-wrap .group input.wid200 {min-width: 200px; max-width: 200px;}
.search-wrap .group input.wid310 {min-width: 310px; max-width: 310px;}
.search-wrap .group .text{line-height: 32px;}
.search-wrap .group-wrap {display: flex; gap: 10px 30px; flex-wrap: wrap;}

/* 목록 */
.list-wrap {display: flex; flex-direction: column;}
.list-wrap .list-count {font-size: 12px; color: #898989; margin-bottom: 10px; font-weight: 500;}
.list-wrap .list-count span {color: #ed3e3e; font-weight: 600; font-size: 14px;}
table.list-table {table-layout: fixed; width: 100%;}
table.list-table {border-bottom: solid 1px #898989; border-top: solid 1px #898989;}
table.list-table tr.on {background-color: #e1e8fa;}
table.list-table tr.pointer {cursor: pointer;}
table.list-table th, table.list-table td {text-align: center; padding: 5px; line-height: 1.8; font-size: 12px; vertical-align: middle;}
table.list-table th.left, table.list-table td.left {text-align: left;}
table.list-table th {background-color: #f3f3f3; font-weight: 500; color: #898989; padding: 8px 3px;}
table.list-table td {border-top: solid 1px #cdcdcd;}
table.list-table td a, table.list-table td .ellipsis {font-size: 12px; width: 100%; display: block; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

/* 페이징 */
.pagination-wrap ul {display: flex; gap: 5px; align-items: center;}
.pagination-wrap.right ul {justify-content: flex-end;}
.pagination-wrap.center ul {justify-content: center;}
.pagination-wrap ul li:not(.paginationjs-ellipsis) a {display: flex; width: 32px; height: 32px; justify-content: center; align-items: center; border-radius: 5px; border: solid 1px #cdcdcd; font-size: 12px; font-weight: 500; cursor: pointer;}
.pagination-wrap ul li.active a {background-color: #132058; color: #ffffff; border-color: #395ad4;}
.pagination-wrap ul li.paginationjs-ellipsis a {padding: 0 5px;}
.pagination-wrap ul li.paginationjs-prev a, .pagination-wrap ul li.paginationjs-next a {color: transparent; background-repeat: no-repeat; background-position: center center; background-size: auto 15px;}
.pagination-wrap ul li.paginationjs-prev a {background-image: url('../images/icon/angle-small-left.svg');}
.pagination-wrap ul li.paginationjs-next a {background-image: url('../images/icon/angle-small-right.svg');} 

/* 트리메뉴 */
.tree-wrap {display: flex; flex-direction: column; gap: 5px;}
/* .tree-wrap.survey {min-height: 500px; overflow-y: auto; border: solid 1px #cccccc; padding: 20px; border-radius: 5px; max-height: 100%; width: 500px;}*/
.tree-wrap li {display: flex; flex-direction: column;}
.tree-wrap .tree-title {font-size: 14px; padding: 2px 0 2px 25px; display: block; cursor: unset;}
.tree-wrap .tree-title b {position: relative; line-height: 1.6; cursor: pointer;}
.tree-wrap .tree-title b:before {content:''; position: absolute; top: 0.5px; left: -15px; width: 15px; height: 15px; background-repeat: no-repeat; background-position: left 4.5px; background-size: 10px auto; background-image: url('../images/icon/plus.svg');}
.tree-wrap .tree-title.on b{color: #395ad4; font-weight: 600;}
.tree-wrap .tree-title i {font-weight: 400;line-height: 1.4; min-width: fit-content; font-weight: 500; background-repeat: no-repeat; background-position: left 4.5px; background-size: 10px auto; background-image: url('../images/icon/plus.svg');}
.tree-wrap .tree-title.open b:before, .tree-wrap .tree-title.open i,
.tree-wrap .tree-title.active b:before, .tree-wrap .tree-title.active i {background-image: url('../images/icon/minus.svg');}
.tree-wrap .tree-title b i {font-weight: 600; color: #395ad4; background: none; margin-right: 5px;}
.tree-wrap .tree-title span {line-height: 1.4; word-break: keep-all;}
.tree-wrap .tree-title > span:before {content: '[';}
.tree-wrap .tree-title > span:after {content: ']';}
.tree-wrap .tree-title > span > span:before {content: ' - ';}
.tree-wrap .tree-box .tree-title {padding-left: 40px;}
.tree-wrap .tree-title + .tree-box {display: none; margin-bottom: 5px;}
.tree-wrap .tree-title.active + .tree-box {display: block;}
.tree-wrap .tree:not(.depth00, .depth01) {display: none;}
.tree-wrap.survey .tree.depth01 .tree-title {padding-left: 0;}
.tree-wrap.survey .tree.depth02 .tree-title {padding-left: 15px;}
.tree-wrap .tree.depth02 .tree-title, .tree-wrap.survey .tree.depth03 .tree-title {padding-left: 35px;}
.tree-wrap .tree.depth03 .tree-title, .tree-wrap.survey .tree.depth04 .tree-title {padding-left: 50px;}
.tree-wrap .tree.depth04 .tree-title, .tree-wrap.survey .tree.depth05 .tree-title {padding-left: 65px;}
.tree-wrap .tree.depth05 .tree-title, .tree-wrap.survey .tree.depth06 .tree-title {padding-left: 80px;}
.tree-wrap .tree.depth06 .tree-title, .tree-wrap.survey .tree.depth07 .tree-title {padding-left: 95px;}
.tree-wrap .tree.depth07 .tree-title, .tree-wrap.survey .tree.depth08 .tree-title {padding-left: 120px;}
.tree-wrap .tree.depth08 .tree-title, .tree-wrap.survey .tree.depth09 .tree-title {padding-left: 135px;}
.tree-wrap .tree.depth09 .tree-title, .tree-wrap.survey .tree.depth10 .tree-title {padding-left: 150px;}
.tree-wrap .tree.depth10 .tree-title {padding-left: 165px;}
.tree-wrap .tree .tree-title.btn {padding: 5px 10px; margin: 5px 0 5px 20px; display: inline-flex;}
.tree-wrap .tree .tree-title.btn b {font-size: 12px;}
.tree-wrap .tree .tree-title.btn b:before {display: none;}
.tree-wrap .tree .tree-title.btn .tooltip span.icon {background-color: #ffffff; margin-top: 0;}

.tree-wrap.survey ul .tree-title {padding-left: 15px; font-weight: 500;}
.tree-wrap.survey ul li.last .tree-title b:before{background-image: url('../images/icon/minus.svg');}
.tree-wrap.survey ul ul {padding-left: 15px;}
.tree-wrap.survey ul ul .tree-title {font-weight: 400;}
.tree-wrap.survey .marker {background-color: #e1e8fa; padding: 3px 7px 4px 7px; border-radius: 5px;}
.tree-wrap.survey .marker:before {top: 4px;}

/* 자동완성 */
.auto-input {position: relative;}
.auto-input:after {content: ''; display: flex; width: 18px; height: 18px; background-image: url(../images/icon/search-alt.svg); background-size: 100% auto; background-repeat: no-repeat; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); opacity: 0.3;}
.auto-input:has(input:focus):after {display: none;}
.auto-input input {padding-right: 35px;}
.auto-input input:focus {padding-right: 10px;}
.ui-helper-hidden-accessible {display: none;}
.ui-autocomplete {position: absolute; display: flex; flex-direction: column; /*max-width: 500px;*/ max-height: 150px; overflow-y: auto; background-color: #ffffff; padding: 10px; border-radius: 0 0 5px 5px; line-height: 1.4; box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.3); z-index: 101;font-size: 12px;}
.ui-autocomplete li { display: flex; }
.ui-autocomplete li span {display: flex; cursor: point; padding: 5px; border-radius: 5px;}
.ui-autocomplete .ui-state-active {background-color: #e0e5f6;}

/* 서브페이지 */
.block-wrap {display: flex; gap: 20px; width: 100%; height: 100%;}
.block-wrap.column {flex-direction: column; height: fit-content;}
.block-wrap .block-title {font-size: 16px; font-weight: 500;}
.detail-table {border: solid 1px #cdcdcd; border-radius: 5px; height: 100%; overflow-y: auto;}
.detail-table table {table-layout: fixed; width: 100%;}
.detail-table table tr {border-top: solid 1px #cdcdcd;}
.detail-table table tr:first-of-type {border-top: none;}
.detail-table table th {background-color: #f3f3f3; color: #898989; font-size: 14px; font-weight: 500; padding: 15px; vertical-align: middle; line-height: 1.4; text-align: left;}
.detail-table table th.top {vertical-align: top;}
.detail-table table th .btn-title {display: flex; flex-wrap: wrap; gap: 10px 10px; align-items: center;}
.detail-table table th .btn-title .btn {padding: 5px 10px; font-size: 12px;}
.detail-table table td {padding: 15px;}
.detail-table table td input, .detail-table table td select {min-width: 300px;}
.detail-table table td input.wid100 {width: 100%;}
.detail-table table td input.datepicker {width: 100%; max-width: 190px;}

/* 텍스트 카운팅 */
.text-count {display: flex; flex-direction: column; align-items: flex-end; gap: 5px;}
.text-count .count {font-size: 12px;}
.text-count.total {padding-bottom: 20px;}
/* 검색폼 */
.search-btn {display: flex; gap: 10px; width: 100%;}
.search-btn input, .search-btn .auto-input {width: calc(50% - 31px);}
.search-btn .auto-input input{width: 100%;}
.search-btn .btn {min-width: 62px; font-size: 12px; font-weight: 600; height: 32px;}
.date-wrap {display: flex; align-items: center; gap: 10px;}
.date-wrap span {min-width: auto; padding: 0;}

/* 전체 메뉴 */

.header-top .menu-wrap a:hover {
	 color:#000;
}

.fullmenu-wrap {
	position: absolute;
	display: none; 
	top: 42px; 
	left: 0; 
	z-index: 98; 
	justify-content: center; 
	overflow: hidden;
	width: 100%;}
	    
.fullmenu-wrap.active {display: flex;}
.fullmenu-wrap .fullmenu-list {
	height: 100%; 
	display: flex; 
	gap: 20px; 
	align-items: stretch; 
	justify-content: center; 
	width: 100%;
    background-color: #fff;
    padding: 40px;
    z-index: 999;
    box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
    border-bottom: solid 1px #cccccc;
	margin-top: 10px;}
.fullmenu-wrap .fullmenu-list .list {display: flex; flex-direction: column; padding: 0 20px 30px 20px; border-left: dotted 1px #e7e7e7; min-width: 200px;}
.fullmenu-wrap .fullmenu-list .list:first-of-type {border-left: none;}
.fullmenu-wrap .fullmenu-list .list > span {font-size: 18px; font-weight: 500;}
.fullmenu-wrap .fullmenu-list .list:hover span {color: #395ad4;}
.fullmenu-wrap .fullmenu-list .list ul {display: flex; width: 100%; flex-direction: column; gap: 15px; align-items: flex-start; margin-top: 20px;  flex: 1;}
.fullmenu-wrap .fullmenu-list .list ul li {display: flex; width: 100%;}
.fullmenu-wrap .fullmenu-list .list ul li a {cursor: pointer; display: flex; width: 100%; color: #000000; opacity: 0.6;}
.fullmenu-wrap .fullmenu-list .list ul li a:hover {opacity: 1;}
.close-menu { position: absolute; top: 15px; right: 15px; width: 24px; height: 24px; z-index: 9999;}
.close-menu:before, .close-menu:after { position: absolute; top: 3px; left: 11px; content: ''; height: 20px; width: 2px; background-color: #333333; border-radius: 20px;}
.close-menu:before { transform: rotate(45deg);}
.close-menu:after { transform: rotate(-45deg);}

/* 필수 */
.essential:after {content: '(필수)'; color: #ed3e3e; font-size: 11px; margin-left: 3px; font-weight: 600;}

/* 툴팁 tooltip="Slide to the right" flow="right" */
.tooltip {display: inline-flex; margin: 0; width: 15px; height: 15px; cursor: pointer; vertical-align: middle;}
.tooltip span.icon, .recode-wrap .recode-view .tooltip span.icon {display: flex; width: 100%; height: 100%; background-color: #898989; mask-position: center center; -webkit-mask-position: center center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 100% auto; -webkit-mask-size: 100% auto; mask-image: url('../images/icon/info.svg'); -webkit-mask-image: url('../images/icon/info.svg'); margin-top: -1px;}
.tooltip span.bubble, .recode-wrap .recode-view .tooltip span.bubble {display: none; position: fixed; min-width: 80px; padding: 10px 15px; border-radius: 5px; box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.8); color: #fff; line-height: 1.4; white-space: pre-line; font-weight: 400; font-size: 12px; z-index: 99;}
[tooltip] {position: relative;}
[tooltip]::before, [tooltip]::after {text-transform: none; font-size: 12px; line-height: 1; user-select: none; pointer-events: none; position: absolute; display: none; opacity: 0; font-weight: 400;}
[tooltip]::before {content: ''; border: 5px solid transparent; z-index: 996;}
[tooltip]::after {content: attr(tooltip); min-width: 80px; padding: 10px 15px; border-radius: 5px; box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1); background: #333333; color: #fff; z-index: 997; line-height: 1.4; white-space: pre;}
[tooltip]:hover::before, [tooltip]:hover::after {display: block;}
[tooltip='']::before, [tooltip='']::after {display: none !important;}
[tooltip]:not([flow])::before, [tooltip][flow^="up"]::before {bottom: 100%; border-bottom-width: 0; border-top-color: #333333;}
[tooltip]:not([flow])::after, [tooltip][flow^="up"]::after {bottom: calc(100% + 5px);}
[tooltip]:not([flow])::before, [tooltip]:not([flow])::after, [tooltip][flow^="up"]::before, [tooltip][flow^="up"]::after {left: 50%; transform: translate(-50%, 0);}
[tooltip][flow^="down"]::before {top: 100%; border-top-width: 0; border-bottom-color: #333333;}
[tooltip][flow^="down"]::after {top: calc(100% + 5px);}
[tooltip][flow^="down"]::before, [tooltip][flow^="down"]::after {left: 50%; transform: translateX(-50%);}
[tooltip][flow^="left"]::before {top: 50%; border-right-width: 0; border-left-color: #333333; left: calc(0 - 5px); transform: translate(-5px, -50%);}
[tooltip][flow^="left"]::after {top: 50%; right: calc(100% + 5px); transform: translate(0, -50%);}
[tooltip][flow^="right"]::before {top: 50%; border-left-width: 0; border-right-color: #333333; right: 0; transform: translate(10px, -50%);}
[tooltip][flow^="right"]::after {top: 50%; left: calc(100% + 5px); transform: translate(5px, -50%);}
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}
[tooltip]:not([flow]):hover::before, [tooltip]:not([flow]):hover::after, [tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after, [tooltip][flow^="down"]:hover::before, [tooltip][flow^="down"]:hover::after {animation: tooltips-vert 300ms ease-out forwards;}
[tooltip][flow^="left"]:hover::before, [tooltip][flow^="left"]:hover::after, [tooltip][flow^="right"]:hover::before, [tooltip][flow^="right"]:hover::after {animation: tooltips-horz 300ms ease-out forwards;}

.info-text {display: flex; margin-top: 10px; font-size: 12px; color: #898989;}
.info-text:before {content: '※'; margin-right: 5px;}

/* 로딩 */
.loading-wrap, .loading-wrap2 {position: absolute; top: 50%; left: 50%; z-index: 1001; transform: translate(-50%, -50%); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.loading-wrap:before, .loading-wrap2:before {content: ''; display: flex; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); position: absolute; top: 0; left: 0;}
.loading-wrap:after, .loading-wrap2:after {content:'loading'; -moz-animation: loading-text-opacity 2s linear 0s infinite normal; -o-animation: loading-text-opacity 2s linear 0s infinite normal; -webkit-animation: loading-text-opacity 2s linear 0s infinite normal; animation: loading-text-opacity 2s linear 0s infinite normal; color: #ffffff; margin-left: -100px; opacity: 0; text-align: center; text-transform: uppercase; width: 100px;}
.loading {height: 100px; position: relative; width: 100px; border-radius: 100%; border: 2px solid transparent; border-color: transparent #fff transparent #FFF; -moz-animation: rotate-loading 1.5s linear 0s infinite normal; -moz-transform-origin: 50% 50%; -o-animation: rotate-loading 1.5s linear 0s infinite normal; -o-transform-origin: 50% 50%; -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;  -webkit-transform-origin: 50% 50%; animation: rotate-loading 1.5s linear 0s infinite normal; transform-origin: 50% 50%;}
@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@-moz-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@-webkit-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@-o-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@-moz-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@-webkit-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@-o-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}
@-moz-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}
@-webkit-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}
@-o-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}