@charset "utf-8"; /*! * kimsQ Rb system css * Homepage: http://www.kimsq.com * Copyright 2020 redblock inc */ /* utility */ .rb-new { display: inline-block; content: " "; width: 5px; height: 5px; background: #dc3545; -moz-border-radius: 2.5px; -webkit-border-radius: 2.5px; border-radius: 2.5px; vertical-align: middle; } .gutter-half { margin-right: -7.5px; margin-left: -7.5px; } .gutter-half>.col, .gutter-half>[class*="col-"] { padding-right: 7.5px; padding-left: 7.5px; } .gutter-small { margin-right: -2px; margin-left: -2px; } .gutter-small>.col, .gutter-half>[class*="col-"] { padding-right: 2px; padding-left: 2px; } .alert-media { background-color: rgb(241, 242, 240); border-color: rgba(149, 149, 149, 0.3); border-radius: 3px; color: rgb(149, 149, 149); padding: 10px; } .alert-media>[data-notify="icon"] { height: 50px; margin-right: 12px; } .alert-media>[data-notify="title"] { color: rgb(51, 51, 51); display: block; font-weight: bold; margin-bottom: 5px; } .alert-media>[data-notify="message"] { font-size: 80%; } .bg-white { background-color: #fff !important } .bg-black { background-color: #000 !important; } [role="button"] { cursor: pointer; } .muted-link { color: #444 !important } .muted-link:hover, .muted-link.active { color: #007bff !important; text-decoration: none; } .no-underline { text-decoration: none !important } .f48 { font-size: 48px !important } .f32 { font-size: 32px !important } .f28 { font-size: 28px !important } .f18 { font-size: 18px !important } .f17 { font-size: 17px !important } .f16 { font-size: 16px !important } .f15 { font-size: 15px !important } .f14 { font-size: 14px !important } .f13 { font-size: 13px !important } .f12 { font-size: 12px !important } strong { font-weight: bold } .font-weight-light { font-weight: 300 !important; } .font-weight-lighter { font-weight: lighter !important; } .font-weight-normal { font-weight: 400 !important; } .font-weight-bold { font-weight: 700 !important; } .font-weight-bolder { font-weight: bolder !important; } .text-white { color: #fff !important } .text-black { color: #000 !important } .text-reset { color: inherit !important; } .text-break { word-break: break-word !important; overflow-wrap: break-word !important; } .rounded-2 { border-radius: 6px !important } .bg-white { background-color: #fff !important; } .bg-transparent { background-color: transparent !important; } .border { border: 0.0625rem solid rgba(0, 0, 0, 0.075) !important; } .border-top { border-top: 0.0625rem solid rgba(0, 0, 0, 0.075) !important; } .border-right { border-right: 0.0625rem solid rgba(0, 0, 0, 0.075) !important; } .border-bottom { border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.075) !important; } .border-left { border-left: 0.0625rem solid rgba(0, 0, 0, 0.075) !important; } .border-0 { border: 0 !important; } .border-top-0 { border-top: 0 !important; } .border-right-0 { border-right: 0 !important; } .border-bottom-0 { border-bottom: 0 !important; } .border-left-0 { border-left: 0 !important; } .border-primary { border-color: #007bff !important; } .border-secondary { border-color: #6c757d !important; } .border-success { border-color: #28a745 !important; } .border-info { border-color: #17a2b8 !important; } .border-warning { border-color: #ffc107 !important; } .border-d anger { border-color: #dc3545 !important; } .border-light { border-color: #f8f9fa !important; } .border-lightgray { border-color: #eee !important; } .border-dark { border-color: #343a40 !important; } .border-white { border-color: #fff !important; } .rounded { border-radius: 0.25rem !important; } .rounded-top { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; } .rounded-right { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } .rounded-bottom { border-bottom-right-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; } .rounded-left { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; } .rounded-circle { border-radius: 50% !important; } .rounded-0 { border-radius: 0 !important; } .text-justify { text-align: justify !important; } .text-nowrap { white-space: nowrap !important; } .text-left { text-align: left !important } .text-right { text-align: right !important } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; } .shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } .shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; } .shadow-none { box-shadow: none !important; } .w-25 { width: 25% !important; } .w-50 { width: 50% !important; } .w-75 { width: 75% !important; } .w-100 { width: 100% !important; } .opacity-0 { opacity: 0 !important; } .opacity-1 { opacity: 1 !important; } .line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .line-clamp-4 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .line-clamp-5 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } /* loader 패치 */ .modal .loader-overlay .loader-wrapper { top: 50% !important; } .modal .loader-overlay .loader-wrapper.default .loader { /* top: 55px!important; */ /* left: 65px; */ } @-webkit-keyframes spinner-border { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner-border { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .spinner-border { display: inline-block; width: 2rem; height: 2rem; vertical-align: text-bottom; border: 0.25em solid currentColor; border-right-color: transparent; border-radius: 50%; -webkit-animation: spinner-border .75s linear infinite; animation: spinner-border .75s linear infinite; } .spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.1em; } @-webkit-keyframes spinner-grow { 0% { -webkit-transform: scale(0); transform: scale(0); } 50% { opacity: 1; } } @keyframes spinner-grow { 0% { -webkit-transform: scale(0); transform: scale(0); } 50% { opacity: 1; } } .spinner-grow { display: inline-block; width: 2rem; height: 2rem; vertical-align: text-bottom; background-color: currentColor; border-radius: 50%; opacity: 0; -webkit-animation: spinner-grow .75s linear infinite; animation: spinner-grow .75s linear infinite; } .spinner-grow-sm { width: 1rem; height: 1rem; } /* tree */ .rb-tree { font-family: 'NotoSans', '돋움', dotum, sans-serif, FontAwesome; } .rb-tree ul { padding-left: 0; } .rb-tree>ul { padding-left: 20px; } .rb-tree li { list-style-type: none; position: relative; } .rb-tree li::before, .rb-tree li::after { content: ''; left: -15px; position: absolute; right: auto; } .rb-tree li:before { border-left: 1px dotted #ccc; bottom: 50px; height: 100%; top: -8px; width: 1px; } .rb-tree li:last-child::before { height: 20px; } .rb-tree li:after { border-top: 1px dotted #ccc; height: 20px; top: 11px; width: 15px; } .rb-tree a.rb-branch, .rb-tree a.rb-leaf { color: #969494 } .rb-tree a { text-decoration: none; line-height: 1.8; color: #666 } .rb-tree a:active { outline: none; } .rb-tree.rb-root { padding-left: 0; } .rb-tree .panel { margin-bottom: 0; background-color: transparent; border: none; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } .rb-tree .rb-active { font-weight: bold; color: #428bca; padding: 3px 7px 2px 15px; } .rb-tree .rb-branch.collapsed:before { position: absolute; left: 0; z-index: 1; content: "\f196"; } .rb-tree .rb-branch:before { position: absolute; /*left: -7px;*/ z-index: 1; content: "\f147"; } .rb-tree .rb-leaf:before { content: ""; } .rb-tree span { padding-left: 15px; } .rb-tree a.rb-leaf+a span { padding-left: 3px; } .rb-tree small { color: #999; } .rb-tree input { position: relative; top: 1px; left: 3px; margin-right: 7px; } .rb-tree i { top: 1px; left: 4px; font-size: 11px; color: #666; } .rb-tree a u { color: #ccc; text-decoration: none; } .rb-tree .rb-active u { color: #428bca; } /*submit button loading*/ [role="button"] .not-loading, .btn .not-loading { display: block; } [role="button"].disabled .not-loading, [role="button"]:disabled .not-loading, .btn:disabled .not-loading { display: none; } [role="button"] .is-loading, .btn .is-loading { display: none; } [role="button"].disabled .is-loading, [role="button"]:disabled .is-loading, .btn:disabled .is-loading { display: block; } /*Paging*/ .bar-footer~.content.rb-bbs-list { padding-bottom: 2.95rem; } .bar-standard.bar-footer { height: 3rem } .rb-paging { position: relative; text-align: center; display: block; height: 3rem; line-height: 3rem; margin: 0; } .rb-paging .rb-count { display: inline-block; margin: 0.3125rem 2.625rem 0; padding: 0 0.5rem; font-weight: 700; font-size: 1.2em; line-height: 1.15; font-family: helvetica; color: #939393; font-style: normal; } .rb-paging .rb-count .rb-current { font-weight: 700; color: #2e2e2e; } .rb-paging .rb-count .rb-bar { padding: 0 0.125rem; font-weight: 300; font-size: 0.9em; } .rb-paging .btn { position: absolute; top: 0; width: 3.125rem; height: 100%; color: #000; font-size: 1.875rem; } .rb-paging .btn i { margin-top: -0.125rem } .rb-paging .btn.rb-disabled { color: #ccc } .rb-paging .rb-prev { left: 0; } .rb-paging .rb-next { right: 0 } /*utility*/ .hidden { display: none !important } /* color */ .bg-transparent { background-color: transparent !important } /*loader*/ .isloading-wrapper.isloading-right { margin-left: 10px } .isloading-wrapper.isloading-inside { padding: 2rem; text-align: center; font-size: 12px; color: #999 } .isloading-overlay { position: relative; text-align: center } .isloading-overlay .isloading-wrapper { background: #FFFFFF; -webkit-border-radius: 7px; -webkit-background-clip: padding-box; -moz-border-radius: 7px; -moz-background-clip: padding; border-radius: 7px; background-clip: padding-box; display: inline-block; margin: 0 auto; padding: 10px 20px; top: 10%; z-index: 9000 } /*avatar*/ .rb-avatar-default { background-color: #f5f5f5; border-radius: 0.25em; } /*loader*/ .isloading-overlay { background-color: rgba(255, 255, 255, 0.7) !important; border-radius: 4px } .loader-overlay .loader-wrapper.custom { padding: 15px; background-color: #fff; color: #444; border-radius: 3px; box-shadow: none; line-height: 40px; font-weight: 500; font-size: 1.1em; } .rb-fading-circle { margin: 0 auto 15px; width: 60px; height: 60px; position: relative; } .rb-fading-circle .rb-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .rb-fading-circle .rb-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #777; border-radius: 100%; -webkit-animation: rb-circleFadeDelay 1.2s infinite ease-in-out both; animation: rb-circleFadeDelay 1.2s infinite ease-in-out both; } .rb-fading-circle .rb-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .rb-fading-circle .rb-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .rb-fading-circle .rb-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .rb-fading-circle .rb-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .rb-fading-circle .rb-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } .rb-fading-circle .rb-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .rb-fading-circle .rb-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } .rb-fading-circle .rb-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } .rb-fading-circle .rb-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .rb-fading-circle .rb-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); } .rb-fading-circle .rb-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } .rb-fading-circle .rb-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .rb-fading-circle .rb-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; } .rb-fading-circle .rb-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .rb-fading-circle .rb-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .rb-fading-circle .rb-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .rb-fading-circle .rb-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .rb-fading-circle .rb-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .rb-fading-circle .rb-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .rb-fading-circle .rb-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .rb-fading-circle .rb-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .rb-fading-circle .rb-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes rb-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } @keyframes rb-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } .loading-spinner .rb-text { display: block; margin-top: 15px; font: 12px / 1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; } /*animation : https://daneden.github.io/animate.css/ */ .anim-fade-in { -webkit-animation-name: fade-in; animation-name: fade-in; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .animated { -webkit-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.fadeInUp, .animated.fadeInDown, .animated.fadeOutUp, .animated.fadeOutDown { -webkit-animation-duration: .5s; -o-animation-duration: .5s; animation-duration: .5s; } .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; -o-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @-o-keyframes bounce { from, 20%, 53%, 80%, to { -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0); } 40%, 43% { -o-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -30px, 0); } 70% { -o-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -15px, 0); } 90% { transform: translate3d(0, -4px, 0); } } @keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -o-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -o-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @-o-keyframes shake { from, to { transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; -o-animation-name: shake; animation-name: shake; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @-o-keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; -o-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @-o-keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; -o-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @-o-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @-o-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; -o-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @-o-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; -o-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-o-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @-o-keyframes bounceOut { 20% { transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-name: bounceOut; -o-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-o-keyframes bounceInUp { from, 60%, 75%, 90%, to { -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @-o-keyframes bounceOutDown { 20% { transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); } to { opacity: 0; transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; -o-animation-name: bounceOutDown; animation-name: bounceOutDown; } .delay-1 { -webkit-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } .delay-2 { -webkit-animation-delay: 0.25s; -o-animation-delay: 0.25s; animation-delay: 0.25s; } .delay-3 { -webkit-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; } .delay-4 { -webkit-animation-delay: 0.55s; -o-animation-delay: 0.55s; animation-delay: 0.55s; } .delay-5 { -webkit-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } .delay-6 { -webkit-animation-delay: 0.95s; -o-animation-delay: 0.95s; animation-delay: 0.95s; } .animate-bg { -moz-animation: animate-highlight 2s ease 0s 1 alternate; -webkit-animation: animate-highlight 2s ease 0s 1 alternate; animation: animate-highlight 2s ease 0s 1 alternate; } @-webkit-keyframes animate-highlight { from { background-color: #F5FFFE; } to { background-color: white; } } @-moz-keyframes animate-highlight { from { background-color: #F5FFFE; } to { background-color: white; } } @-keyframes animate-highlight { from { background-color: #F5FFFE; } to { background-color: white; } } .mirror { -moz-transform: matrix(-1, 0, 0, 1, 0, 0); -webkit-transform: matrix(-1, 0, 0, 1, 0, 0); -o-transform: matrix(-1, 0, 0, 1, 0, 0); } /* 플러그인 보정 */ .pswp { display: none; z-index: 1060 !important; } /* 데스크탑에서도 최소한은 RC 마크업이 구동되도록 */ .table-view { padding-left: 0; margin-top: 0; margin-bottom: 0.9375rem; list-style: none; background-color: transparent; border-top: 0.0625rem solid rgba(0, 0, 0, 0.075); border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.075); } .table-view-cell { position: relative; padding: 0.6875rem 4.0625rem 0.6875rem 0.9375rem; overflow: hidden; border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.075); } .table-view-sm .table-view-cell { padding: 0.3rem 4.0625rem 0.3rem 0.5375rem; } .table-view-cell:last-child { border-bottom: 0; } .table-view-cell>a:not(.btn) { position: relative; display: block; padding: inherit; margin: -0.6875rem -4.0625rem -0.6875rem -0.9375rem; overflow: hidden; color: inherit; } .table-view-sm .table-view-cell>a:not(.btn) { margin: -0.3rem -4.0625rem -0.3rem -0.5375rem; } .table-view-cell>a:not(.btn):active { background-color: #eee; } .table-view-cell p { margin-bottom: 0; font-size: .875rem; color: #818a91; } .table-view-cell .btn { padding: .375rem .5rem .4375rem; font-size: .75rem; } .table-view-divider { padding-top: 0.375rem; padding-bottom: 0.375rem; padding-left: 0.9375rem; margin-top: -.0625rem; margin-left: 0; font-weight: 500; color: #55595c; background-color: #eceeef; border-top: 0.0625rem solid rgba(0, 0, 0, 0.075); border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.075); } .table-view .media, .table-view .media-body { overflow: hidden; } .table-view .media-object.pull-left { margin-right: 0.625rem; } .table-view .media-object.pull-right { margin-left: 0.625rem; } .table-view-cell>.btn, .table-view-cell>.badge, .table-view-cell>.select, .table-view-cell>.switch, .table-view-cell>a>.btn, .table-view-cell>a>.badge, .table-view-cell>a>.select, .table-view-cell>a>.switch { position: absolute; top: 50%; right: .9375rem; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .table-view-cell .navigate-left>.btn, .table-view-cell .navigate-left>.badge, .table-view-cell .navigate-left>.select, .table-view-cell .navigate-left>.switch, .table-view-cell .navigate-right>.btn, .table-view-cell .navigate-right>.badge, .table-view-cell .navigate-right>.select, .table-view-cell .navigate-right>.switch, .table-view-cell .push-left>.btn, .table-view-cell .push-left>.badge, .table-view-cell .push-left>.select, .table-view-cell .push-left>.switch, .table-view-cell .push-right>.btn, .table-view-cell .push-right>.badge, .table-view-cell .push-right>.select, .table-view-cell .push-right>.switch, .table-view-cell>a .navigate-left>.btn, .table-view-cell>a .navigate-left>.badge, .table-view-cell>a .navigate-left>.select, .table-view-cell>a .navigate-left>.switch, .table-view-cell>a .navigate-right>.btn, .table-view-cell>a .navigate-right>.badge, .table-view-cell>a .navigate-right>.select, .table-view-cell>a .navigate-right>.switch, .table-view-cell>a .push-left>.btn, .table-view-cell>a .push-left>.badge, .table-view-cell>a .push-left>.select, .table-view-cell>a .push-left>.switch, .table-view-cell>a .push-right>.btn, .table-view-cell>a .push-right>.badge, .table-view-cell>a .push-right>.select, .table-view-cell>a .push-right>.switch { right: 2.1875rem; } .card-block { padding: 1.25rem; } .card-block::after { content: ""; display: table; clear: both; } /* 소셜미디어 버튼 */ .btn-social { position: relative; padding-left: 2.75rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .btn-social>:first-child { position: absolute; left: 0; top: 0; bottom: 0; width: 2rem; line-height: 2.4rem; font-size: 1.6em; text-align: center; border-right: 0.0625rem solid rgba(0, 0, 0, 0.2) } .btn-social.btn-lg { padding-left: 3.8125rem } .btn-social.text-center, .btn-social.text-xs-center { padding-left: 0 !important } .btn-social.btn-lg>:first-child { line-height: 3.1rem; width: 2.8125rem; font-size: 1.6em } .btn-social-icon { position: relative; padding-left: 44px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 2.125rem; width: 2.125rem; padding: 0 } .btn-social-icon>:first-child { position: absolute; left: 0; top: 0; bottom: 0; width: 2rem; line-height: 2.125rem; font-size: 1.6em; text-align: center; border-right: 0.0625rem solid rgba(0, 0, 0, 0.2) } .btn-social-icon.btn-lg { padding-left: 3.8125rem } .btn-social-icon.btn-lg>:first-child { line-height: 2.8125rem; width: 2.8125rem; font-size: 1.8em } .btn-social-icon.btn-sm { padding-left: 2.375rem } .btn-social-icon.btn-sm>:first-child { line-height: 1.75rem; width: 1.75rem; font-size: 1.4em } .btn-social-icon>:first-child { border: none; text-align: center; width: 100% !important } .btn-social-icon.btn-lg { height: 2.8125rem; width: 2.8125rem; padding-left: 0; padding-right: 0 } .btn-social-icon.btn-sm { height: 1.875rem; width: 1.875rem; padding-left: 0; padding-right: 0 } .btn-naver { background: #01c73c; color: #fff; border-color: rgba(0, 0, 0, 0.2); } .btn-naver>:first-child { background: url(../images/sns/naver-simbol-white.png) no-repeat center; background-size: 60%; background-position: 0.375rem 50%; background-repeat: no-repeat; } .btn-naver.btn-lg>:first-child { background-size: 1.5625rem; background-position: 0.5625rem 50%; background-repeat: no-repeat; } .btn-kakao { background-color: #FFEB00 !important; color: #3c1e1e !important; border-color: rgba(0, 0, 0, 0.2); } .btn-kakao>:first-child { background-image: url(../images/sns/kakao2.png); background-size: 75%; background-position: 0.25rem 50%; background-repeat: no-repeat; } .btn-kakao.btn-lg>:first-child { background-size: 1.875rem; background-position: 0.5rem 50%; } .btn-facebook { color: #fff; background-color: #3b5998; border-color: rgba(0, 0, 0, 0.2) } .btn-facebook:focus, .btn-facebook.focus { color: #fff; background-color: #2d4373; border-color: rgba(0, 0, 0, 0.2) } .btn-facebook:hover { color: #fff; background-color: #2d4373; border-color: rgba(0, 0, 0, 0.2) } .btn-facebook:active, .btn-facebook.active, .open>.dropdown-toggle.btn-facebook { color: #fff; background-color: #2d4373; border-color: rgba(0, 0, 0, 0.2) } .btn-facebook:active:hover, .btn-facebook.active:hover, .open>.dropdown-toggle.btn-facebook:hover, .btn-facebook:active:focus, .btn-facebook.active:focus, .open>.dropdown-toggle.btn-facebook:focus, .btn-facebook:active.focus, .btn-facebook.active.focus, .open>.dropdown-toggle.btn-facebook.focus { color: #fff; background-color: #23345a; border-color: rgba(0, 0, 0, 0.2) } .btn-facebook:active, .btn-facebook.active, .open>.dropdown-toggle.btn-facebook { background-image: none } .btn-facebook.disabled:hover, .btn-facebook[disabled]:hover, fieldset[disabled] .btn-facebook:hover, .btn-facebook.disabled:focus, .btn-facebook[disabled]:focus, fieldset[disabled] .btn-facebook:focus, .btn-facebook.disabled.focus, .btn-facebook[disabled].focus, fieldset[disabled] .btn-facebook.focus { background-color: #3b5998; border-color: rgba(0, 0, 0, 0.2) } .btn-facebook .badge { color: #3b5998; background-color: #fff } .btn-google { color: #fff; background-color: #dd4b39; border-color: rgba(0, 0, 0, 0.2) } .btn-google:focus, .btn-google.focus { color: #fff; background-color: #c23321; border-color: rgba(0, 0, 0, 0.2) } .btn-google:hover { color: #fff; background-color: #c23321; border-color: rgba(0, 0, 0, 0.2) } .btn-google:active, .btn-google.active, .open>.dropdown-toggle.btn-google { color: #fff; background-color: #c23321; border-color: rgba(0, 0, 0, 0.2) } .btn-google:active:hover, .btn-google.active:hover, .open>.dropdown-toggle.btn-google:hover, .btn-google:active:focus, .btn-google.active:focus, .open>.dropdown-toggle.btn-google:focus, .btn-google:active.focus, .btn-google.active.focus, .open>.dropdown-toggle.btn-google.focus { color: #fff; background-color: #a32b1c; border-color: rgba(0, 0, 0, 0.2) } .btn-google:active, .btn-google.active, .open>.dropdown-toggle.btn-google { background-image: none } .btn-google.disabled:hover, .btn-google[disabled]:hover, fieldset[disabled] .btn-google:hover, .btn-google.disabled:focus, .btn-google[disabled]:focus, fieldset[disabled] .btn-google:focus, .btn-google.disabled.focus, .btn-google[disabled].focus, fieldset[disabled] .btn-google.focus { background-color: #dd4b39; border-color: rgba(0, 0, 0, 0.2) } .btn-google .badge { color: #dd4b39; background-color: #fff } .btn-instagram { color: #fff; background-color: #3f729b; border-color: rgba(0, 0, 0, 0.2) } .btn-instagram:focus, .btn-instagram.focus { color: #fff; background-color: #305777; border-color: rgba(0, 0, 0, 0.2) } .btn-instagram:hover { color: #fff; background-color: #305777; border-color: rgba(0, 0, 0, 0.2) } .btn-instagram:active, .btn-instagram.active, .open>.dropdown-toggle.btn-instagram { color: #fff; background-color: #305777; border-color: rgba(0, 0, 0, 0.2) } .btn-instagram:active:hover, .btn-instagram.active:hover, .open>.dropdown-toggle.btn-instagram:hover, .btn-instagram:active:focus, .btn-instagram.active:focus, .open>.dropdown-toggle.btn-instagram:focus, .btn-instagram:active.focus, .btn-instagram.active.focus, .open>.dropdown-toggle.btn-instagram.focus { color: #fff; background-color: #26455d; border-color: rgba(0, 0, 0, 0.2) } .btn-instagram:active, .btn-instagram.active, .open>.dropdown-toggle.btn-instagram { background-image: none } .btn-instagram.disabled:hover, .btn-instagram[disabled]:hover, fieldset[disabled] .btn-instagram:hover, .btn-instagram.disabled:focus, .btn-instagram[disabled]:focus, fieldset[disabled] .btn-instagram:focus, .btn-instagram.disabled.focus, .btn-instagram[disabled].focus, fieldset[disabled] .btn-instagram.focus { background-color: #3f729b; border-color: rgba(0, 0, 0, 0.2) } .btn-instagram .badge { color: #3f729b; background-color: #fff } /* 라이센스 */ .badge-standard { color: #fff; background-color: #007bff; } .badge-premium { color: #fff; background-color: #563d7c; } /* 무한스크롤 */ .infinitescroll-end { /* padding-top: 1rem; padding-bottom: 1rem; */ text-align: center; font-size: .8rem; color: #999 } .infinitescroll-end::before { /* content: '더 이상 없습니다.' */ } .infinitescroll-load .btn::before { content: '더보기' } .miniplayer .infinitescroll-end { margin-top: 3rem; margin-bottom: 3rem; } /* form */ .form-text { margin-top: .5rem; } /* figure */ figure.media { display: block } .media:not(figure) { display: flex } figure.media oembed:empty { display: block; padding: 4rem 3rem; text-align: center; } figure.media oembed:empty::before { content: ""; font-size: .9rem; color: #ccc; display: inline-block; width: 2rem; height: 2rem; vertical-align: text-bottom; border: .25em solid currentColor; border-right-color: transparent; border-radius: 50%; -webkit-animation: spinner-border .75s linear infinite; animation: spinner-border .75s linear infinite; } figure.image { text-align: center; } figure.image img { max-width: 100% } /* ckeditor5 */ .ck-content.ck-editor__editable pre { overflow-x: auto; padding: 0.5em; background: #eee; } /* ck-toc */ .rb-attach-sidebar [data-toggle="toc"]:empty { padding: 2rem; text-align: center; } .rb-attach-sidebar [data-toggle="toc"]:empty::before { content: '문서에 추가한 제목이 여기 표시됩니다.'; color: #999 } .rb-attach-sidebar [data-toggle="toc"] .navbar-nav>li a.nav-link.active::before, .rb-attach-sidebar [data-toggle="toc"] .navbar-nav>li a.nav-link.active:focus::before, .rb-attach-sidebar [data-toggle="toc"] .navbar-nav>li a.nav-link.active:hover::before { position: relative; content: none; background-color: none; } .rb-attach-sidebar [data-toggle="toc"] .nav-link+ul { display: block; } nav[data-toggle="toc"] .nav .nav>li>a { padding-top: 1px !important; padding-bottom: 1px !important; padding-left: 30px !important; font-size: 13px !important; font-weight: normal; } @keyframes pulser { 0% { opacity: 0.4 } 80% { opacity: 0.9 } 100% { opacity: 0.4 } } /* backdrop */ .content-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; background-color: rgba(255, 255, 255, 0.95); } /* RC checkbox tree */ .rc-checkboxtree [data-toggle="collapse"] { position: absolute; right: 0 } .rc-checkboxtree ul [data-toggle="collapse"] { right: 3.125rem } .rc-checkboxtree ul ul [data-toggle="collapse"] { right: 6.25rem } .rc-checkboxtree .collapsed .fa-minus:before { content: "\f067"; } /* star-rating */ .star-rating, .back-stars, .front-stars { display: flex; } .star-rating { align-items: center; font-size: 1.1rem; justify-content: center; } .star-rating .fa { padding-left: 0.1875rem; padding-right: 0.1875rem } .back-stars { color: #d9d9d9; position: relative; } .front-stars { color: #737373; overflow: hidden; position: absolute; top: 0; transition: all 0.5s; } .star-rating.star-rating-sm { font-size: 0.875rem; } .star-rating.star-rating-sm .fa { padding-left: 0.0625rem; padding-right: 0.0625rem }