@charset "utf-8";
@import "//cdn.jsdelivr.net/npm/font-kopubworld@1.0";
 

 @font-face {
    font-family: 'NeoDunggeunmoPro-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/NeoDunggeunmoPro-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'SUITE-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}


@font-face {
    font-family: 'Freesentation-4Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-4Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: Regular;
}

@font-face {
    font-family: 'Freesentation-7Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-7Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: Regular;
}

@font-face {
    font-family: 'Freesentation-9Black';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-9Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}


/*****************************************************************
						편집 영역
*****************************************************************/
.main-write{ color:black; width:560px; display:none; position:fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index:999;}
.main-write .frm_input {border:1px solid #ccc; max-width:80px; background:white; color:black;}
.main-write .frm_input.full {width:100%; max-width:80%;}
.main-write textarea {border:1px solid #ccc; background:white; color:black;}

.main-write, .main-write input, .main-write textarea, .main-write select,
#contents_list_view,
#main-setting #fsetting, #main-setting #fsetting input, #main-setting #fsetting textarea, #main-setting #fsetting select
{font-family:'Freesentation-4Regular'; font-size:13px;}
#main-setting #fsetting input[type="text"], #main-setting #fsetting textarea, #main-setting #fsetting select {background:white; border:1px solid #ccc; color:black;}
#main-setting #fsetting textarea {scrollbar-width: thin;}
.main-write h2 {font-family:'Freesentation-9Black';}

#main-write-form #main-contents-option-in .frm_input {max-width:initial;}

#main-write-form {padding: 28px 20px; overflow-y: auto; max-height: 80vh; background:white; position: relative; z-index:1;}
#main-write-form .main_contents_edit {display:none;}
#main-write-form #main-contents-default {}
#main-write-form #main-contents-style {padding:12px; display:none;}
#main-write-form #main-contents-style.open {display:block;}
#main-write-form #main-contents-style #main-div-ex {border:1px solid #ccc; display:inline-flex; background:#f9cc9d; margin:0 16px;}
#main-write-form #main-contents-style #main-div-ex-in  {border:1px solid #aaa; width:160px; height:120px; background:#c4dfb8; overflow:hidden;}
#main-write-form #main-contents-style #main-div-ex-content {height:calc(100% - 2px); margin:0 auto; text-align:center; border:1px solid #333; display:inline-flex; width:calc(100% - 2px); align-items:center; justify-content:center; background:white;}

#new_write .menu-btn-outer { position: absolute; left: 0; height:100%;}
#new_write .menu-btn-outer .menu-btn {transform: translateX(-100%); display:block; background:#111; color:#fff; margin:4px 0; padding:4px 8px;box-sizing: border-box;}
#new_write .menu-btn-outer .menu-btn:hover, #new_write .menu-btn-outer .menu-btn.open {background:var(--main-color);}

#main-contents-default > div {margin:12px 0;}
#top_border_in, #bottom_border_in {padding:0 36px;}

.border-ex {display:flex; gap:16px;     margin-bottom: 20px;}
#middle-border_ex {position:relative; margin-bottom:20px;}
#middle-border_ex .border-ex{display:inline-block;}
#border-class > div {margin-bottom:4px;}

#open_back {width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:99; display:none; position:fixed; top:0; left:0; backdrop-filter:blur(1px);}

#font_ex {text-align:center;}
#bullets-ex {min-height:200px;}

.main-write .div-content {margin:4px 0;}
.sp-original-input-container {vertical-align:middle;}

.edit_contents.toy-button > button {pointer-events: none;}
.material-icons.list-icon {cursor:pointer; background:#fff; color:#000; padding:4px; font-size:16px; border:1px solid #000;}

#main-write-form .help {color:#d66552; font-family:'Dotum'; margin:4px 0; display:none;}
#main-write-form .ui-btn.small.tooltip {padding: 0 4px; height: 20px; line-height: 18px; margin: 0 2px; font-weight:bold; display:none;}
#main-write-form .ui-btn.small.tooltip:after {font-weight:normal;}
#main-write-form.hint-on .help{display:block;}
#main-write-form.hint-on .ui-btn.small.tooltip {display:inline-block;}

.color-input {display:inline-flex; vertical-align:bottom;}
.color-input input[type="color"] {border: 0; background-color: transparent; min-width: 26px;}
.color-input input[type="text"] {width:54px; border:0; padding:0 4px;}

.ui-datepicker { z-index: 10000 !important; }


/*****************************************************************
						리스트 편집
*****************************************************************/
#contents_list_view {position: fixed; z-index: 20; right: 20px;  top: 20px; display:none; max-height:80vh; background:white; color:#111; max-width: fit-content; padding: 20px 32px; overflow-y: auto;}
#contents_list_view.on {display:block;}
.content_list {width: fit-content;}
.content_list li { padding: 4px 0; display: grid; grid-template-columns: 120px auto; gap: 4px; align-items: center;}
.content_list ul.comment {padding: 0 8px; background: rgba(0,0,0,.1);}
.content_list li {border-bottom: 2px solid rgba(0,0,0,.1);}
.content_list li > span {font-weight:bold;}
.content_list li:hover {border: 2px solid yellow; background:#aaa;}


.sort-placeholder{border: 2px dotted rgb(255, 0, 0); background:rgba(255,0,0,.3);}

/*****************************************************************
						구분선 영역
*****************************************************************/

hr.main {display:block; border:0; position:relative; width:100%; color:var(--main-color);}
hr.main:before {content:''; position:absolute; display:block; width:100%;}
hr.main:after {content:''; display:block; width:100%;}

hr.thick {background-image:linear-gradient(to right, CurrentColor, CurrentColor);}
hr.dotted {background-image:radial-gradient(currentColor 20%,transparent 0); background-position:-4px -4px,0 0; background-size:10px 100%;}
hr.dashed {background-image:linear-gradient(to right, CurrentColor, CurrentColor 50%, transparent 50%,transparent); background-size:10px 10px;}
hr.striped {background-image:linear-gradient(-45deg,transparent,transparent 20%,currentColor 20%,currentColor 30%,transparent 30%,transparent 45%,currentColor 45%,currentColor 55%,transparent 55%,transparent 70%,currentColor 70%,currentColor 80%,transparent 80%,transparent); background-size:8px 8px;}
hr.saw {background-image:linear-gradient(-45deg,transparent,transparent 47%,currentColor 47%,currentColor 53%,transparent 53%,transparent); background-position:top left; background-size:12px 12px;}
hr.saw:before {height: 100%; background-image: linear-gradient(45deg, transparent, transparent 47%, currentColor 47%, currentColor 53%, transparent 53%, transparent); background-position: -6px -6px; background-size: 12px 12px;}
hr.double {background-image:linear-gradient(to right, CurrentColor, CurrentColor); background-position:top; background-size:100% 33%; background-repeat:repeat-x;}
hr.double:before {height:100%; background-image:linear-gradient(to right, CurrentColor, CurrentColor); background-position:bottom; background-size: 100% 33%; background-repeat: repeat-x;}
hr.double-white {background-image:linear-gradient(to right, CurrentColor, CurrentColor); background-position:top; background-size:100% 33%; background-repeat:repeat-x;}
hr.double-white:before {height:100%; background-image:linear-gradient(to right, white, white); background-position: calc(33% + 1px); background-size: 100% 1px; background-repeat: repeat-x;}
hr.round {background-image: radial-gradient(currentColor 10%,transparent 0); background-position: -11px -11px,22px 0; background-size: 26px 26px;}
hr.gradient {background:linear-gradient(to right, transparent, CurrentColor, transparent); -webkit-background-clip: none;  -webkit-text-fill-color: none;}


/*****************************************************************
						달력
*****************************************************************/
.main-contents .ui-widget.ui-widget-content {border:unset;}
.main-contents .ui-corner-all, .main-contents .ui-corner-bottom, .main-contents .ui-corner-right, .main-contents .ui-corner-br {border-radius:unset;}
.main-contents .ui-widget-content {border:unset; background:unset; color:unset;}
.main-contents .ui-widget {font-family:unset; width:unset; padding:unset;}
.main-contents .ui-datepicker {padding:unset;}
.main-contents .ui-widget-header {border:unset; background:unset; color:unset;}
.main-contents .ui-datepicker .ui-datepicker-prev, .main-contents .ui-datepicker .ui-datepicker-next {position:unset; width:unset; height:unset; overflow:unset; display:unset;}
.main-contents .ui-datepicker .ui-datepicker-prev span, .main-contents .ui-datepicker .ui-datepicker-next span {position:unset; margin-left:unset; margin-top:unset; text-indent:unset; overflow:unset; display:unset;}
.main-contents .ui-widget-header .ui-icon, .main-contents .ui-widget-header .ui-state-hover {border:unset; background:unset; color:unset;}
.main-contents .ui-state-default, .main-contents .ui-widget-content .ui-state-default, .main-contents .ui-widget-header .ui-state-default, .main-contents .ui-button, html .main-contents .ui-button.ui-state-disabled:hover, html .main-contents .ui-button.ui-state-disabled:active{border:unset; background:unset; color:unset;}
.main-contents .ui-datepicker .ui-datepicker-title {line-height:unset;}
.main-contents .ui-datepicker table {font-size:12px; margin:unset;}
.main-contents .ui-datepicker th {padding:unset;}
.main-contents .ui-datepicker td {border:unset; padding:2px 0;}
.main-contents .ui-datepicker td span, .main-contents .ui-datepicker td a {display:unset; text-align:unset;}

/*****************************************************************
						TEXT-FILTER
*****************************************************************/

.shadow {text-shadow:2px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;}
.shadow-point { text-shadow:2px 0 var(--main-color), 0 1px var(--main-color), 1px 0 var(--main-color), 0 -1px var(--main-color);}
.main-highlight {background:linear-gradient(to right, var(--main-color) 0%, var(--main-color2) 100%); background-size:100% 40%; background-position: center 65%; background-repeat:no-repeat;}
.gradient {background:linear-gradient(to right, var(--main-color) 0%, var(--main-color2) 100%); -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}
.hologram {background-image:url('https://img.freepik.com/free-photo/_40163-61.jpg?size=626&ext=jpg'); -webkit-background-clip: text;  -webkit-text-fill-color: transparent; background-size: 500%; animation:flow linear alternate infinite 30s;}

/*****************************************************************
						IMAGE-FILTER
*****************************************************************/
.i-black-outline img {-webkit-filter: drop-shadow(2px 0px 0px #000) drop-shadow(0px 2px 0px #000) drop-shadow(-2px 0px 0px #000) drop-shadow(0px -2px 0px #000); filter: drop-shadow(2px 0px 0px #000) drop-shadow(0px 2px 0px #000) drop-shadow(-2px 0px 0px #000) drop-shadow(0px -2px 0px #000);}
.i-white-outline img {-webkit-filter: drop-shadow(2px 0px 0px #fff) drop-shadow(0px 2px 0px #fff) drop-shadow(-2px 0px 0px #fff) drop-shadow(0px -2px 0px #fff); filter: drop-shadow(2px 0px 0px #fff) drop-shadow(0px 2px 0px #fff) drop-shadow(-2px 0px 0px #fff) drop-shadow(0px -2px 0px #fff);}
.i-point-outline img {-webkit-filter: drop-shadow(2px 0px 0px var(--main-color)) drop-shadow(0px 2px 0px var(--main-color)) drop-shadow(-2px 0px 0px var(--main-color)) drop-shadow(0px -2px 0px var(--main-color)); filter: drop-shadow(2px 0px 0px var(--main-color)) drop-shadow(0px 2px 0px var(--main-color)) drop-shadow(-2px 0px 0px var(--main-color)) drop-shadow(0px -2px 0px var(--main-color));}
.i-black-shadow img {filter: drop-shadow(6px 6px 0 #000); -webkit-filter: drop-shadow(6px 6px 0 #000);}
.i-white-shadow img {filter: drop-shadow(6px 6px 0 #fff); -webkit-filter: drop-shadow(6px 6px 0 #fff);}
.i-point-shadow img {filter: drop-shadow(6px 6px 0 var(--main-color)); -webkit-filter: drop-shadow(6px 6px 0 var(--main-color));}
.i-blur:hover img {-webkit-filter:blur(4px); filter:blur(4px);}
.i-sepia:hover img {-webkit-filter:sepia(40%); filter:sepia(40%);}
.i-gray:hover img {-webkit-filter:gray(1); filter:gray(1);}

/*****************************************************************
						ANIMATION
	ANIMATION 일부는 https://animate.style/에서 발췌했습니다(MIT License를 지킵니다.)
*****************************************************************/

.crush_x_javascript {animation:crush_x linear 0.5s;}
.crush_y_javascript {animation:crush_y linear 0.5s;}
.buzz_javascript {animation: buzz linear 0.2s;}
.expand_javascript {animation:expand linear 0.2s;}
.shrink_javascript {animation:shrink linear 0.2s;}
.swing_javascript {animation:swing linear 1s;}
.flash_javascript {animation:flash linear 0.5s;}
.gray_javascript {animation:gray linear 1s;}
.pop_javascript {animation:pop linear 0.2s;}
.float_javascript {animation:float linear 0.3s;}
.sink_javascript {animation:sink linear 0.3s;}
.flip-x_javascript {animation:flip_x linear 1s;}
.flip-y_javascript {animation:flip_y linear 1s;}
.shiny_javascript {}
.shiny_javascript:before {content: "";  background-color: rgba(255, 255, 255, 0.7);  height: 100%;  width: 3em;  display: block;  position: absolute;  top: 0;  left: -4.5em;  transform: skewX(-45deg) translateX(0);  transition: none; animation:shiny linear forwards 0.7s; }
.heart_javascript {}
.heart {background:url('../../main/img/heart.png'); position:absolute; animation: moveup 1s ease-out forwards; width:32px; height:32px; display:block; background-size:cover; opacity:0;}
.confetti_javascript canvas {position:absolute; top:0; left:0; z-index:1;}
.jello_javascript {animation:jello linear 0.5s;}

.animated-element.crush_x {animation-name: crush_x;}
.animated-element.crush_x_reverse {animation-name: crush_x_reverse;}
.animated-element.crush_y {animation-name: crush_y;}
.animated-element.crush_y_reverse {animation-name: crush_y_reverse;}
.animated-element.buzz {animation-name: buzz;}
.animated-element.buzz_reverse {animation-name: buzz_reverse;}
.animated-element.expand {animation-name: expand;}
.animated-element.expand_reverse {animation-name: expand_reverse;}
.animated-element.shrink {animation-name: shrink;}
.animated-element.shrink_reverse {animation-name: shrink_reverse;}
.animated-element.swing {animation-name: swing;}
.animated-element.swing_reverse {animation-name: swing_reverse;}
.animated-element.flash {animation-name: flash;}
.animated-element.flash_reverse {animation-name: flash_reverse;}
.animated-element.gray {animation-name: gray;}
.animated-element.gray_reverse {animation-name: gray_reverse;}
.animated-element.bob {animation-name: bob;}
.animated-element.bob_reverse {animation-name: bob_reverse;}
.animated-element.hange {animation-name: hange;}
.animated-element.hange_reverse {animation-name: hange_reverse;}
.animated-element.float {animation-name: float;}
.animated-element.float_reverse {animation-name: float_reverse;}
.animated-element.sink {animation-name: sink;}
.animated-element.sink_reverse {animation-name: sink_reverse;}
.animated-element.flip-x {animation-name: flip_x;}
.animated-element.flip-x_reverse {animation-name: flip_x_reverse;}
.animated-element.flip-y {animation-name: flip_y;}
.animated-element.flip-y_reverse {animation-name: flip_y_reverse;}
.animated-element.fadeIn {animation-name: fadeIn;}
.animated-element.fadeIn_reverse {animation-name: fadeIn_reverse;}
.animated-element.slideInDown {animation-name: slideInDown;}
.animated-element.slideInDown_reverse {animation-name: slideInDown_reverse;}
.animated-element.slideInUp {animation-name: slideInUp;}
.animated-element.slideInUp_reverse {animation-name: slideInUp_reverse;}
.animated-element.slideInLeft {animation-name: slideInLeft;}
.animated-element.slideInLeft_reverse {animation-name: slideInLeft_reverse;}
.animated-element.slideInRight {animation-name: slideInRight;}
.animated-element.slideInRight_reverse {animation-name: slideInRight_reverse;}
.animated-element.shiny {}
.animated-element.shiny_reverse {}
.animated-element.shiny:before {content: "";  background-color: rgba(255, 255, 255, 0.7);  height: 100%;  width: 3em;  display: block;  position: absolute;  top: 0;  left: -50%;  transform: skewX(-45deg) translateX(0);  transition: none; animation-fill-mode: forwards;}
.animated-element.shiny_reverse:before {content: "";  background-color: rgba(255, 255, 255, 0.7);  height: 100%;  width: 3em;  display: block;  position: absolute;  top: 0;  left: -50%;  transform: skewX(-45deg) translateX(0);  transition: none; animation-fill-mode: forwards;}
.animated-element.jello {animation-name: jello;}
.animated-element.jello_reverse {animation-name: jello_reverse;}
.animated-element.windvane {animation-name: windvane;}
.animated-element.windvane_reverse {animation-name: windvane_reverse;}
.animated-element.bak_flow {animation-name: flow;}
.animated-element.bak_flow_reverse {animation-name: flow_reverse;}

@keyframes flow {from {background-position: top;} to {background-position: bottom;}}
@keyframes flow_reverse {from {background-position: bottom;} to {background-position: top;}}
@keyframes crush_x {35% {transform: scale(1.2,0.5);} 50% {transform: scale(1.2,0.5);}}
@keyframes crush_x_reverse {35% {transform: scale(1.2,0.5);} 50% {transform: scale(1.2,0.5);}}
@keyframes crush_y {35% {transform: scale(0.5,1.2);} 50% {transform: scale(0.5,1.2);}}
@keyframes crush_y_reverse {35% {transform: scale(1.2,0.5);} 50% {transform: scale(1.2,0.5);}}
@keyframes buzz {25% {transform: translateX(4px) rotate(3deg);} 50% {transform: translateX(-4px) rotate(-3deg);} 75% {transform: translateX(4px) rotate(3deg);}}
@keyframes buzz_reverse {25% {transform: translateX(-4px) rotate(-3deg);} 50% {transform: translateX(4px) rotate(3deg);} 75% {transform: translateX(-4px) rotate(-3deg);}}
@keyframes expand {50% {transform: scale(2,2);} 75% {transform: scale(2.2,2.2);}}
@keyframes expand_reverse {50% {transform: scale(0.5,0.5);} 75% {transform: scale(0.3,0.3);}}
@keyframes shrink {50% {transform: scale(0.6,0.6);} 75% {transform: scale(0.4,0.4);}}
@keyframes shrink_reverse {50% {transform: scale(1.5,1.5);} 75% {transform: scale(2,2);}}
@keyframes swing {20% {transform: rotate3d(0, 0, 1, 15deg);} 40% {transform: rotate3d(0, 0, 1, -10deg);} 60% {transform: rotate3d(0, 0, 1, 5deg);} 80% {transform: rotate3d(0, 0, 1, -5deg);}}
@keyframes swing_reverse {20% {transform: rotate3d(0, 0, 1, -15deg);} 40% {transform: rotate3d(0, 0, 1, 10deg);} 60% {transform: rotate3d(0, 0, 1, -5deg);} 80% {transform: rotate3d(0, 0, 1, 5deg);}}
@keyframes flash {25% {opacity:0;} 50% {opacity:0.8;} 75% {opacity:0.2;}}
@keyframes flash_reverse {25% {opacity:0.2;} 50% {opacity:0.8;} 75% {opacity:0;}}
@keyframes gray {25% {filter:grayscale(1);} 50% {filter:grayscale(1);}}
@keyframes gray_reverse {25% {filter:grayscale(0);} 50% {filter:grayscale(0);}}
@keyframes float {50% {transform:translateY(-10%);} 75% {transform:translateY(-10%);}}
@keyframes float_reverse {50% {transform:translateY(10%);} 75% {transform:translateY(10%);}}
@keyframes sink {50% {transform:translateY(10%);} 75% {transform:translateY(10%);}}
@keyframes sink_reverse {50% {transform:translateY(-10%);} 75% {transform:translateY(-10%);}}
@keyframes flip_x {from {transform:rotateY(90deg);} 40% {transform:rotateY(-20deg);} 60% {transform:rotateY(10deg);} 80% {transform:rotateY(-5deg);}}
@keyframes flip_x_reverse {from {transform:rotateY(-90deg);} 40% {transform:rotateY(20deg);} 60% {transform:rotateY(-10deg);} 80% {transform:rotateY(5deg);}}
@keyframes flip_y {from {transform:rotateX(90deg);} 40% {transform:rotateX(-20deg);} 60% {transform:rotateX(10deg);} 80% {transform:rotateX(-5deg);} to {transform:rotateX(-5deg);}}
@keyframes flip_y_reverse {from {transform:rotateX(-90deg);} 40% {transform:rotateX(20deg);} 60% {transform:rotateX(-10deg);} 80% {transform:rotateX(5deg);} to {transform:rotateX(5deg);}}
@keyframes windvane {0% {transform: rotateY(0deg);} 25% {transform: rotateY(80deg);} 50% {transform: rotateY(-80deg);} 75% {transform: rotateY(40deg);} 100% {transform: rotateY(0deg);}}
@keyframes windvane_reverse {0% {transform: rotateY(0deg);} 25% {transform: rotateY(-80deg);} 50% {transform: rotateY(80deg);} 75% {transform: rotateY(-40deg);} 100% {transform: rotateY(0deg);}}
@keyframes chiring {15% {transform: rotate3d(0, 0, 1, 15deg);} 30% {transform: rotate3d(0, 0, 1, -10deg);} 45% {transform: rotate3d(0, 0, 1, 5deg);} 60% {transform: rotate3d(0, 0, 1, -5deg);} 75% {transform: rotate3d(0, 0, 1, 2deg);} 90% {transform: rotate3d(0, 0, 1, -2deg);} to {transform: rotate3d(0, 0, 1, 0deg);}}
@keyframes chiring_reverse {15% {transform: rotate3d(0, 0, 1, -15deg);} 30% {transform: rotate3d(0, 0, 1, 10deg);} 45% {transform: rotate3d(0, 0, 1, -5deg);} 60% {transform: rotate3d(0, 0, 1, 5deg);} 75% {transform: rotate3d(0, 0, 1, -2deg);} 90% {transform: rotate3d(0, 0, 1, 2deg);} to {transform: rotate3d(0, 0, 1, 0deg);}}
@keyframes shiny {from {transform: skewX(-45deg) translateX(0); opacity:0;} 10% {opacity:1;} 99% {transform: skewX(-45deg) translateX(13.5em); opacity:1;} to {transform: skewX(-45deg); left:100%; opacity:0;}}
@keyframes shiny_reverse {from {transform: skewX(-45deg) translateX(13.5em); left:100%; opacity:1;} 10% {opacity:1;} 99% {transform: skewX(-45deg) translateX(0); opacity:0;} to {transform: skewX(-45deg); left:0%; opacity:0;}}
@keyframes moveup {0% {top: 50%; opacity: 0.9;} 100% {top: 0%; opacity: 0;}}
@keyframes moveup_reverse {0% {top: 100%; left: 50%; opacity: 0;} 100% {top: 50%; left: 50%; opacity: 0.9;}}
@keyframes jello {from, 11.1%, to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} 22.2% {-webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg);} 33.3% {-webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg);} 44.4% {-webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg);} 55.5% {-webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg);} 66.6% {-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg);} 77.7% {-webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg);} 88.8% {-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}}
@keyframes jello_reverse {from, 11.1%, to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} 22.2% {-webkit-transform: skewX(12.5deg) skewY(12.5deg); transform: skewX(12.5deg) skewY(12.5deg);} 33.3% {-webkit-transform: skewX(-6.25deg) skewY(-6.25deg); transform: skewX(-6.25deg) skewY(-6.25deg);} 44.4% {-webkit-transform: skewX(3.125deg) skewY(3.125deg); transform: skewX(3.125deg) skewY(3.125deg);} 55.5% {-webkit-transform: skewX(-1.5625deg) skewY(-1.5625deg); transform: skewX(-1.5625deg) skewY(-1.5625deg);} 66.6% {-webkit-transform: skewX(0.78125deg) skewY(0.78125deg); transform: skewX(0.78125deg) skewY(0.78125deg);} 77.7% {-webkit-transform: skewX(-0.390625deg) skewY(-0.390625deg); transform: skewX(-0.390625deg) skewY(-0.390625deg);} 88.8% {-webkit-transform: skewX(0.1953125deg) skewY(0.1953125deg); transform: skewX(0.1953125deg) skewY(0.1953125deg);}}
@keyframes fadeIn {from {opacity:0;} to {opacity:1;}}
@keyframes fadeIn_reverse {from {opacity:1;} to {opacity:0;}}
@keyframes slideInDown {from {opacity:0; transform:translateY(-25%);} to {opacity:1; transform:translateY(0);}}
@keyframes slideInDown_reverse {from {opacity:1; transform:translateY(0);} to {opacity:0; transform:translateY(25%);}}
@keyframes slideInUp {from {opacity:0; transform:translateY(25%);} to {opacity:1; transform:translateY(0);}}
@keyframes slideInUp_reverse {from {opacity:1; transform:translateY(0);} to {opacity:0; transform:translateY(-25%);}}
@keyframes slideInLeft {from {opacity:0; transform:translateX(-25%);} to {opacity:1; transform:translateX(0);}}
@keyframes slideInLeft_reverse {from {opacity:1; transform:translateX(0);} to {opacity:0; transform:translateX(25%);}}
@keyframes slideInRight {from {opacity:0; transform:translateX(25%);} to {opacity:1; transform:translateX(0);}}
@keyframes slideInRight_reverse {from {opacity:1; transform:translateX(0);} to {opacity:0; transform:translateX(-25%);}}
@keyframes bob {0% {transform: translateY(0);} 50% {transform: translateY(-8px);} 75% {transform: translateY(-4px);}  100% {transform: translateY(-8px);}}
@keyframes bob_reverse {0% {transform: translateY(-8px);} 50% {transform: translateY(0);} 100% {transform: translateY(0);}}
@keyframes hange {0% {transform: translateY(0);} 50% {transform: translateY(8px);} 75% {transform: translateY(4px);}  100% {transform: translateY(8px);}}
@keyframes hange_reverse {0% {transform: translateY(8px);} 50% {transform: translateY(0);} 100% {transform: translateY(0);}}




/*****************************************************************
						FRAME
*****************************************************************/
.simple-line {--s:10px; background:conic-gradient(from 90deg at 1px 1px, transparent 25%, var(--frame-color) 0); border:calc(2*var(--s)) solid transparent; outline:1px solid var(--frame-color); outline-offset:calc(-1*var(--s));}
.photo {border:5px solid #f8f8f8; box-shadow:-6px 16px 27px -9px rgba(0, 0, 0, 0.23); -webkit-box-shadow:-6px 16px 27px -9px rgba(0, 0, 0, 0.23); -moz-box-shadow:-6px 16px 27px -9px rgba(0, 0, 0, 0.23); background:black;}
.reel {background:none; border:8px dashed var(--frame-color); border-left:10px solid var(--frame-color); border-right:10px solid var(--frame-color); text-align:center;}
.reel::before {display:block; content:''; padding:4px; border-top:8px solid var(--frame-color); border-bottom:8px solid var(--frame-color); position:absolute; width:100%; top:-16px;}
.reel::after {display:block; content:''; padding:4px; border-bottom:8px solid var(--frame-color); border-top:8px solid var(--frame-color); position:absolute; width:calc(100% - 8px); bottom:-16px;}
.recipt {-webkit-mask-image:linear-gradient(0deg, transparent 10px, white 10px), linear-gradient(-135deg, white 5px, transparent 5px), linear-gradient(135deg, white 5px, transparent 5px); -webkit-mask-position:left bottom; -webkit-mask-repeat:repeat-x; -webkit-mask-size:100% 100%, 10px 10px, 10px 10px; background:white;}
.ticket {-webkit-mask-image:radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px); -webkit-mask-position:top left, top right, bottom left, bottom right; -webkit-mask-repeat:no-repeat; -webkit-mask-size:51% 51%; mask-image:radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px), radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px); mask-position:top left, top right, bottom left, bottom right; mask-repeat:no-repeat; mask-size:51% 51%; background:white;}
.stamp:after {content:''; display:block; position:absolute; width:calc(100% + var(--r)*4); height:calc(100% + var(--r)*4); --r:6px; mask:radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5*var(--r)) calc(-1.5*var(--r))/calc(3*var(--r)) calc(3*var(--r)), linear-gradient(#000 0 0) no-repeat 50%/calc(100% - 3*var(--r)) calc(100% - 3*var(--r)); background:white; top:calc(var(--r)*-2); left:calc(var(--r)*-2); z-index:-1;}
.ex-window {position:relative; box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; border-top:22px solid transparent;}
.ex-window:before {content:''; display:block; position:absolute; width:100%; height:24px; background:var(--frame-color); top:-22px; left:0px; box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;}
.ex-window:after {content:''; background:url('../../main/img/ex-window.png') no-repeat; width:52px; height:14px; display:block; position:absolute; right:4px; top:-16px;}
.bit4 {box-shadow:4px 0 white, -4px 0 white, 0 -4px white, 0 4px white, 8px 0 var(--frame-color), -8px 0 var(--frame-color), 0 -8px var(--frame-color), 0 8px var(--frame-color), 0 0 0 4px var(--frame-color);}
.bit-window {border:4px solid #c5cfcf; border-top:32px solid transparent;}
.bit-window:before {content:''; display:block; width:100%; height:24px; background:var(--frame-color); border:4px solid #c5cfcf; border-bottom:4px solid #c5cfcf; position:absolute; top:-32px; left:-4px;}
.bit-window:after {content:''; background:url('../../main/img/bit-window.png'); width:72px; height:20px; display:block; position:absolute; right:4px; top:-26px;}
.new-window {border:1px solid #b4b4b4; border-radius:0 0 6px 6px; border-top:30px solid transparent;}
.new-window:before {content:''; display:block; position:absolute; width:100%; height:28px; border-radius:6px 6px 0 0; background:var(--frame-color); top:-30px; left:-1px; border:1px solid var(--frame-color); border-bottom:1px solid #b4b4b4;}
.new-window:after {content:''; display:block; position:absolute; background:url('../../main/img/new-window.png') no-repeat 95% 8px; width:100%; height:32px; top:-26px; right:0;}
.picture {border:solid 24px #eee; border-bottom-color:#fff; border-left-color:#eee; border-radius:2px; border-right-color:#eee; border-top-color:#ddd; box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.25) inset, 0 5px 10px 5px rgba(0, 0, 0, 0.25); box-sizing:border-box; position:relative; text-align:center;}
.picture:before {border-radius:2px; bottom:-8px; box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.25) inset; content:""; left:-8px; position:absolute; right:-8px; top:-8px; pointer-events: none;}
.picture:after {border-radius:2px; bottom:-10px; box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.25); content:""; left:-10px; position:absolute; right:-10px; top:-10px; pointer-events: none;}
.instagram {box-shadow:inset 0px 0px 50px 4px rgba(0, 0, 0, 0.3);}
.instagram:before {content:''; font-weight:bold; display:block; background:var(--frame-color); box-shadow:1px 3px 4px 1px rgba(0,0,0,0.12); -webkit-box-shadow:1px 3px 4px 1px rgba(0,0,0,0.12); -moz-box-shadow:1px 3px 4px 1px rgba(0,0,0,0.12); width:100%; height:40px;}
.instagram:after {content:''; display:block; background:url('../../main/img/instagram.png') no-repeat 10px 4px; width:100%; height:60px; box-shadow:1px 3px 4px 1px rgba(0,0,0,0.12); -webkit-box-shadow:1px 3px 4px 1px rgba(0,0,0,0.12); -moz-box-shadow:1px 3px 4px 1px rgba(0,0,0,0.12); background-color:var(--frame-color);}
.mac-window {border:1px solid #b4b4b4; border-radius:0 0 6px 6px; border-top:34px solid transparent;}
.mac-window:before {content:''; display:block; position:absolute; width:100%; height:32px; border-radius:6px 6px 0 0; background:var(--frame-color); top:-34px; left:-1px; border:1px solid var(--frame-color); border-bottom:1px solid #b4b4b4;}
.mac-window:after {content:''; display:block; position:absolute; background:url('../../main/img/mac-window.png') no-repeat 10px 4px; width:100%; height:32px; top:-26px; left:0;}
.folder {border-top:36px solid transparent;}
.folder:before {content:''; display:block; position:absolute; width:100%; height:36px; background:var(--frame-color); top:-36px; left:0px; clip-path:polygon(0 0, 35% 0, 38% 42%, 100% 42%, 100% 100%, 0 100%);}
.folder:after {content:''; display:block; position:absolute; background:var(--frame-color); width:100%; height:32px; bottom:-32px; right:0;}
.polaroid {border:10px solid var(--frame-color);}
.polaroid:before {content:''; display:block; position:absolute; width:100%; height:40px; left:-10px; bottom:-70px; border:10px solid var(--frame-color); background:var(--frame-color);}


/*****************************************************************
						리스트 영역
*****************************************************************/
#main-box {position:relative; min-height: 40vh; margin: 24px 0;}
#main-box * {transition:all 0.3s;}
#main-box img {max-width:100%; }
#main-box input::placeholder {color:#111;}

#main-box.one {}
#main-box.two {display: grid; grid-template-columns: repeat(2, auto); justify-items: center;}
#main-box.three {display: grid; grid-template-columns: repeat(3, auto); justify-items: center;}

.main-contents {display:flex; min-height:0; flex-wrap:wrap;}
.main-contents.ma-grid {display:grid;}
.main-contents p {line-height:initial;}
.ma-relative {position:relative;}
.ma-absolute {position:absolute !important;}
.ma-fixed {position:fixed !important;}
.ma-column {flex-direction:column;}
.ma-row {flex-direction:row;}
.ma-left{justify-content:flex-start;}
.ma-center{justify-content:center;}
.ma-right{justify-content:flex-end;}
.ma-start{align-items:flex-start;}
.ma-vcenter{align-items:center;}
.ma-end{align-items:flex-end;}


.ma-ox{overflow: auto hidden;}
.ma-oy{overflow: hidden auto;}
.ma-auto {overflow:auto;}
.ma-hidden {overflow:hidden;}
.ma-full2 {grid-column:1 / 3;}
.ma-full3 {grid-column:1 / 4;}
.ma-block {display:block;}
.ma-fold.ma-block {display:none;}
.ma-fold-open {display:block;}
.ma-fold-open:before {content:'▶';}
.ma-fold-open.open:before {content:'▼';}

iframe.ifcontent{border:none; width:100%; height: fit-content; max-height:100%;}

.sort-button {display:none; cursor:move;}
.edit_contents .sort-button{display:block;position:absolute; left: 10px;  top: 10px; z-index:99;}
.edit_contents {animation:none !important;}

.main-contents {max-width:1000px;}

.icon {display:none; position:absolute; top:4px; right:4px; z-index:99;}
.edit_contents .icon {display:block;}
.fchildren .icon {bottom:4px; top:unset;}
.schildren .icon {bottom:4px; top:unset; left:4px; right:upset;}
.tchildren .icon {top:36px; bottom:initial; left:initial; right:12px;}
a.weatherwidget-io {width:100%;}
span.main-notice {line-height:100%;}

a{cursor:pointer;}

/* 배너 */
/*.ma_banner { display: flex; align-items: center; gap: 0 20px;}*/

/*MENU BUTTON*/
.main-menu-icon {display:block; padding:4px 0;}

/*TIME*/
#time_is_link ~ span {pointer-events:none;}


/*****************************************************************
						버튼 영역
*****************************************************************/
.button-fx {padding:12px 0; position:relative; z-index:9;}
.ui-draggable-handle {cursor:grab;}
.ui-draggable-handle:active {cursor:grabbing;}

/*****************************************************************
						갤러리
*****************************************************************/
#gallery_view {display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.7); z-index:99; color:#fff; height:100vh; align-items:center;     backdrop-filter: blur(1px);}
#gallery_view.on {display:grid;}
#gallery_view #view_in {max-width:1000px; margin:0 auto; text-align:center; padding:20px;}
#gallery_view #view_in img {max-height: 80vh;}
#gallery_view #view_in h1 {padding:20px 0 0;}
#gallery_view #view_in span {opacity:0.7;}



/*****************************************************************
						세팅 영역
*****************************************************************/
#main-setting {display:none;}
#main-setting.on {display:block; position:fixed; max-height:none; top:0; left:0; right:0; bottom:0; z-index:99999; overflow:auto; backdrop-filter:blur(2px); opacity:1; background:rgba(0,0,0,.7); color:black;}
#main-setting > div {margin:0 auto; height:100%; text-align:center; align-items:center; display:grid;}
#main-setting #fsetting {margin: 0 auto; background: white; max-width: 480px; border-radius: 4px; position:relative;}
#main-setting #fsetting .menu-btn-outer { position: absolute; left: 0;}
#main-setting #fsetting .menu-btn-outer .menu-btn{transform: translateX(-100%); display:block; background:#111; color:#fff; margin:4px 0; padding:4px 8px;box-sizing: border-box;}
#main-setting #fsetting .menu-btn-outer .menu-btn:hover, #main-setting #fsetting .menu-btn-outer .menu-btn.open {background:var(--main-color);}
#main-setting .help {color:#d66552; font-family:'Dotum'; display:block; margin:4px 0; text-align:left;}
#main-setting #fsetting form {padding: 40px;}
#main-setting .setting_main_table {display:none; position:relative; z-index:1;}
#main-setting input::placeholder, textarea::placeholder {color:#777;}

/*****************************************************************
						레이아웃류
*****************************************************************/
#main-box {display:grid;}
div.select-grid-container {display:grid; grid-template-columns:repeat(4,auto); gap:12px 8px; width:100%;}
.select-grid-container > label {background:#d5d5d5; width:76px; height:48px; display:inline-grid; border-radius:8px; border:1px solid #111; gap:4px; padding:8px; cursor:pointer;}
.select-grid-container > input[type="radio"] {display:none;}
.select-grid-container > input[type="radio"]:checked + label {background:#f9e085;}
.select-grid-container label > div {background:#ececec; border-radius:2px;}
.select-grid-container > input[type="radio"]:checked + label > div {background:#eb734d;}
.half-half, .two-three, .three-two, .two, .head-two, .two-heades, .head-footer-two {grid-template-columns:repeat(2, auto);}
.three, .head-three, .three-heades {grid-template-columns:repeat(3, auto);}
.two-three > .flex-box, .three-two > .flex-box {display:grid; gap:4px; background:transparent;}
.select-grid-container > input[type="radio"]:checked + label.two-three > .flex-box, .select-grid-container > input[type="radio"]:checked + label.three-two > .flex-box {background:transparent;}
.select-grid-container > input[type="radio"]:checked + label.two-three > .flex-box div, .select-grid-container > input[type="radio"]:checked + label.three-two > .flex-box div {background:#eb734d;}
.two-three > .flex-box:nth-of-type(1) {grid-template-rows:repeat(2, auto);}
.two-three > .flex-box:nth-of-type(2) {grid-template-rows:repeat(3, auto);}
.two-three > .flex-box div, .three-two > .flex-box div {background:#ececec; border-radius:2px;}
.three-two > .flex-box:nth-of-type(1) {grid-template-rows:repeat(3, auto);}
.three-two > .flex-box:nth-of-type(2) {grid-template-rows:repeat(2, auto);}
.head-two > div:nth-of-type(1), .two-heades > div:nth-of-type(3), .head-footer-two > div:nth-of-type(1), .head-footer-two > div:nth-of-type(4) {grid-column:1 / 3;}
.head-three > div:nth-of-type(1), .three-heades > div:nth-of-type(4) {grid-column:1 / 4;}
.both-side-two {grid-template-columns:repeat(3,auto); grid-template-rows:repeat(2, auto);}
.both-side-two > div:nth-of-type(1) {grid-column:1 / 2; grid-row:1 / 3;}
.both-side-two > div:nth-of-type(4) {grid-column:3 / 4; grid-row:1 / 3;}
.left-side-two, .right-side-two {grid-template-columns:repeat(2,auto); grid-template-rows:repeat(2,auto);}
.left-side-two > div:nth-of-type(1) {grid-row:1 / 3;}
.right-side-two > div:nth-of-type(3) {grid-row:1 / 3; grid-column:2 / 3;}
.left-side-three, .right-side-three {grid-template-columns:repeat(2,auto); grid-template-rows:repeat(3, auto);}
.left-side-three > div:nth-of-type(1) {grid-row:1 / 4;}
.right-side-three > div:nth-of-type(4) {grid-row:1 / 4; grid-column:2 / 3;}
.both-two-lsides, .both-two-rsides {grid-template-columns:repeat(3,auto); grid-template-rows:repeat(2, auto);}
.both-two-lsides > div:nth-of-type(1) {grid-row:1;}
.both-two-lsides > div:nth-of-type(3) {grid-row:1 / 3;}
.both-two-lsides > div:nth-of-type(4) {grid-row:1 / 3;}
.both-two-rsides > div:nth-of-type(3) {grid-row:1 / 3;}
.both-two-rsides > div:nth-of-type(4) {grid-row:1 / 3;}
.both-side-2lsides, .both-side-2rsides {grid-template-columns:repeat(3,auto); grid-template-rows:repeat(2, auto);}
.both-side-2lsides > div:nth-of-type(1), .both-side-2lsides > div:nth-of-type(3) {grid-row:1;}
.both-side-2lsides > div:nth-of-type(1) {grid-column:1; grid-row:1 / 3;}
.both-side-2rsides > div:nth-of-type(5) {grid-column:3; grid-row:1 / 3;}
.left-side-2footers, .right-side-2footers {grid-template-columns:repeat(3,auto); grid-template-rows:repeat(2, auto);}
.left-side-2footers > div:nth-of-type(1) {grid-column:1; grid-row:1 / 3;}
.left-side-2footers > div:nth-of-type(2) {grid-column:2 / 4; grid-row:1;}
.right-side-2footers > div:nth-of-type(4) {grid-row:1 / 3;}
.right-side-2footers > div:nth-of-type(1) {grid-column:1 / 3; grid-row:1;}
.head-lside-2footers, .head-rside-2footers {grid-template-columns:repeat(3,auto); grid-template-rows:repeat(3,auto);}
.head-lside-2footers > div:nth-of-type(1), .head-rside-2footers > div:nth-of-type(1) {grid-column:1 / 4;}
.head-lside-2footers > div:nth-of-type(2), .head-rside-2footers > div:nth-of-type(4) {grid-row:2 / 4;}
.head-lside-2footers > div:nth-of-type(3) {grid-column:2 / 4;}
.head-rside-2footers > div:nth-of-type(4) {grid-column:3;}
.head-rside-2footers > div:nth-of-type(2) {grid-column:1 / 3;}


.two-three > .flex-boxes, .three-two > .flex-boxes {display:grid; gap:4px;}
.two-three > .flex-boxes:nth-of-type(1) {grid-template-rows:repeat(2, auto);}
.two-three > .flex-boxes:nth-of-type(2) {grid-template-rows:repeat(3, auto);}


@media all and (min-width: 1001px) { 
#main-box.two {display: grid; grid-template-columns: repeat(2, minmax(100px, auto)); justify-items: center;}
#main-box.three {display: grid; grid-template-columns: repeat(3, minmax(100px, auto)); justify-items: center;}

}

@media all and (max-width: 1000px) {
#main-box .main-contents[mob-on="off"],#main-box .main-contents[mob-out="on"] {display:none !important;}
}