@charset "utf-8";

[v-cloak] { display: none; }


@font-face {
    font-family: 'Pretendard-Light';
    src: url('/resources/css/fonts/Pretendard-Light.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('/resources/css/fonts/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'KyoboHand';
    src: url('/resources/css/fonts/KyoboHand.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'KyoboHand';
    font-size: small !important;
}

.container{
    /*padding-left : 5px !important;*/
    padding-right : 5px !important;
    overflow: auto !important;
}

input::placeholder,
textarea::placeholder {
    color: gray !important;
    font-size: smaller !important;
    /*font-style: italic;*/
}

/* 이미지 선택, 드래그 막기 */
img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/* fullcalendar */
.fc-day-sat { color:#0000FF !important; }
.fc-day-sun { color:#FF0000 !important; }
.fc-event { cursor: pointer !important; }
.fc-daygrid-day-top:hover { font-weight: bold !important; text-decoration : underline !important; }
/*.fc-today-button { background-color :#ffffff !important; color: black !important; }*/
/*.fc-prev-button { background-color :#ffffff !important; color: red !important; }*/
/*.fc-next-button { background-color :#ffffff !important; color: red !important; }*/


.air-datepicker-global-container{ z-index: 200000; }

.swal2-container { z-index: 200000; }



/* ArcoVue */
.arco-alert-content,
.arco-layout-content,
.arco-tabs-tab-title,
.arco-checkbox-label,
.arco-select-option,
.arco-select-view-input,
.arco-select-option-content,
.arco-dropdown-optio-content {
    font-size: small !important;
}

.arco-select-dropdown-footer {
    font-size: smaller !important;
}

.arco-input-word-limit,
.arco-textarea-word-limit {
    color: gray !important;
    font-size: xx-small !important;
    /*font-style: italic;*/
}

/*.arco-layout {*/
/*    margin-top : 3px !important;*/
/*}*/

.arco-modal-title { font-size: small; }
.arco-modal-footer{ text-align: center; }

.arco-select-option-content { font-size: smaller !important; }

.arco-layout-sider-light { box-shadow: 0 0 0 0  !important; }
.arco-layout-sider-children { margin-top : 12px !important; }

.acro-table-row-pointer-cursor { cursor: pointer; }
.acro-table-row-pointer-cursor:hover { font-weight: bold; }
.acro-table-row-pointer-cursor:hover > td { color : #3fc3ee; }

.arco-upload {
    width:100% !important;
    text-align: center;
    align-content: center;
    background-color: var(--color-fill-2);
    color: var(--color-text-1);
    border: 1px dashed var(--color-fill-4);
    height: 48px;
}
/* 파일 업로드 프로그래스 : 숨김 */
.arco-upload-progress { display: none !important; }
.arco-upload-list-item { margin-top : 10px !important; }







.pswp__caption {
    /*background: rgba(75, 150, 75, 0.75);*/
    font-size: 12px;
    color: #fff;
    width: calc(100% - 32px);
    max-width: 400px;
    padding: 2px 8px;
    border-radius: 4px;
    position: absolute;
    left: 50%;
    bottom: 13px;
    transform: translateX(-50%);
    text-align: center;
}
.hidden-caption-content {
    display: none;
}



.lockScreenDiv {
    width: 100%;
    height: 100vh;
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
}


#imgStrListArea {
    width:100%;
    display : flex;
    flex-direction: row;
    flex-wrap : wrap;
    justify-content: center;
    /*overflow:auto;*/
}

.imgStrBox {
    position: relative;
    width:90px;
    height:135px;
    margin: 2px;


    /* 필름 효과
    --s: 4px; // control the size
    --c: #222;
    width: calc(20*var(--s));
    aspect-ratio: 1.25;
    background:
            conic-gradient(at 50% var(--s),var(--c) 75%,#0000 0)
            0 0/calc(2*var(--s)) calc(100% - var(--s)) padding-box;
    border: var(--s) solid var(--c);
    padding: calc(var(--s)*2.5) calc(var(--s)*1.5);
    box-sizing: content-box;
    */
}
.imgStr {
    width : 100%;
    height : 100%;
    border-radius: 2px;
    -webkit-filter: grayscale(100%);
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    -webkit-animation: fadein 2s;
    -o-animation: fadein 2s;
    object-fit:cover;

    transform: rotate(6deg);
    -o-transform:rotate(6deg);
    -ms-transform:rotate(6deg);
    -moz-transform:rotate(6deg);
    -webkit-transform: rotate(6deg);
}


.imgStr:hover {

    border: 1px solid #fff033;

    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    border-radius: 2px;

    transform: rotate(-6deg);
    -o-transform:rotate(-6deg);
    -ms-transform:rotate(-6deg);
    -moz-transform:rotate(-6deg);
    -webkit-transform: rotate(-6deg);
}
.imgStrBlock {
    filter: blur(50px);
    -webkit-filter: blur(50px);
}

@keyframes fadein { from { opacity: 0; blur(3px); transform: rotateY(180deg); } to { opacity: 1; blur(0); transform: rotateY(360deg); } }
/* Firefox */
@-moz-keyframes fadein { from { opacity: 0; blur(3px); transform: rotateY(180deg); } to { opacity: 1; blur(0); transform: rotateY(360deg); } }
/* Safari and Chrome */
@-webkit-keyframes fadein { from { opacity: 0; blur(3px); transform: rotateY(180deg); } to { opacity: 1; blur(0); transform: rotateY(360deg); } }
/* Opera */
@-o-keyframes fadein { from { opacity: 0; blur(3px); transform: rotateY(180deg); } to { opacity: 1; blur(0); transform: rotateY(360deg); } }



.imgBtn {
    background-color:transparent;
    border-width: 0px;
    width : 20px;
    margin: 0px;
    align-self: center;
    font-weight: bolder;
}

.imgBtnBlue { color : #0b2dea; }
.imgBtnRed { color : #fe0000; }
.imgBtnYellow { color : #feeb00; }
.imgBtnOrange { color : #fe8300; }

.imgStrBox > .imgStrBtnsBottom {
    display: none;
    position: absolute;
    bottom: 0;
    width:100%;
    text-align: center;
}


.imgStrBox:hover > .imgStrBtnsBottom {
    display: block;
}

/* 눈내리는 효과 */
.snow {
    position: absolute;
    width: 5px;
    height: 5px;
    /*background: white;*/
    background: white;
    border-radius: 50%;
    /*box-shadow: 0 0 3px 3px white;*/
    box-shadow: 0 0 3px 3px lightgray;
    z-index: 999999;
}