/* * { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); } */

body {
    padding:0;
    margin:0;
    font-size:16px;
    /* background: url(../img/blue.png) no-repeat center/cover; */
}
/* h1,h2,h3,h4,h5,h6 {
    font-family: 'NanumSquareRound', sans-serif;
    font-weight: 600;
} */
input.btn, button.btn {
    height:auto !important
}
table {
    font-size:16px
}
.btn {
    background-image:none !important;
    line-height:auto;
    height:auto !important;
    text-shadow:0px 0px 0px !important;
    box-shadow:0px 0px 0px !important
}
.grid{
    display:-ms-grid;
}
.layout-spacer {
	flex-grow:1;
}
.flex-1 {
    flex:1;
}
/* .sideNavBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 62px;
    width:48px;
} */

/* .sideSection {
    background:-webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255,255,255,0.89);
}
.sideSection a:hover {
    background:-webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(232,237,242,0.39) !important;
}
.sideSection ul ul {
    background:-webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(232,237,242,0.39) !important;
}
.backdrop-white {
    background:-webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255,255,255,0.59);
}
.backdrop-white:hover {
    background:-webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255,255,255,0.79) !important;
} */

header {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background: rgba(255,255,255, 0.7);
    /* background: #fff; */
    /* border-bottom:1px solid #eee; */
}

.my_menu ul{
    display: flex;
    padding:0 0 0 20px;
    margin:0;
}
.my_menu li {
    list-style: none;
    padding-top:10px;
}
.my_menu li a {
    display: block;
    text-decoration: none;
    padding:8px 12px;
    border:1px solid #ff0000;
    color:#f36;
    margin:0 3px;
    font-size:14px;
    border-radius: 4px;
}
.my_menu li a:hover, .my_menu li a:focus {
    background-color: #ff0000;
    color:#fff
}
.bodyContent {
    margin-right:400px;
}
.bodySideArea {
    position: absolute;
    right:0;
    bottom:0;
    top:63px;
    width:400px;
    background: #fff;
    border-left:1px solid #ddd;
}

.fillp-book {
    color:#a9a9a9;
}
.fillp-book:hover, .fillp-book:focus {
    text-decoration: none;
    /* color:#ff0000; */
    color:#000;
    border-color:#ff0000
}
.fpage {
    background:#ddd;
}

/**/
.overlay-on {
	overflow: hidden;
}
#off-canvas-overlay {
	visibility: hidden;
	opacity: 0;
	transition: left 0s 0.3s, visibility 0s 0.3s, opacity 0.3s;
	background:rgba(0,0,0, .731);
	/* -webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px); */
	position: fixed;
	left:0;
	right:0;
	bottom:0;
	top:0;
	overflow: hidden;
	z-index: 1;
}
.overlay-on #off-canvas-overlay {
	visibility: visible;
    opacity: 1;
    transition: left 0s 0.3s, visibility 0s, opacity 0.3s;
	z-index: 99;
}
.overlay-on #off-canvas{
	left:0px;
	transition: all 0.3s ease;
}
#off-canvas {
	width:300px;
	height:100%;
	position: fixed;
	z-index:100;
	top:0;
	left:-300px;
	bottom:0;
	background-color: rgba(250,250,250, 1);
	border-bottom: 1px solid rgba(0,0,0,.05);
	transition: all 0.3s ease;
}
.off-canvas-nav {
	padding:0;
	margin:0;
}
.off-canvas-nav li {
	list-style: none;
	text-align: center;
}

.stoggle input[type=checkbox] {
	display: none;
  }
  .slide-toggle {
	display: block;
	position: relative;
	flex: none;
	width: 46px;
	height: 24px;
	border-radius: 30px;
	background-color: rgb(207, 207, 207);
	cursor: pointer;
	transition: all 0.1s ease-in-out;
	z-index: 1;
  }
  .slide-toggle::before,
  .slide-toggle::after {
	content: ' ';
	display: block;
	position: absolute;
	top: 1px;
	border-radius: 30px;
	height: 22px;
	background-color: #dadada;
	-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
	transition: 0.2s cubic-bezier(0, 1.1, 1, 1.1);
  }
  .slide-toggle::before {
	z-index: -1;
	width: 44px;
	right: 1px;
	-webkit-transform: scale(1);
			transform: scale(1);
  }
  .slide-toggle::after {
	z-index: 1;
	width: 24px;
	left: 1px;
	background:rgba(250,250,250, 1);
	box-shadow: 0 1px 4px 0.5px rgba(0, 0, 0, 0.25);
  }
  .stoggle input:checked + .slide-toggle {
	background-color: rgb(225, 29, 72);
  }
  .stoggle input:checked + .slide-toggle::before {
	-webkit-transform: scale(0);
			transform: scale(0);
  }
  .stoggle input:checked + .slide-toggle::after {
	-webkit-transform: translate3d(20px, 0, 0);
			transform: translate3d(20px, 0, 0);
  }

@media (max-width: 1200px) {  
    .gnb {
        position: relative;
        width:100%;
        white-space: nowrap;
        overflow-y: hidden;
        overflow-x: auto;
    }
    .gnb li a.active, .gnb li a:hover, .gnb li a:focus{
        border-bottom:2px solid #ff0000
    }
}
.ellipsis-multi{
	display: -webkit-box; /* -webkit- 접두사는 크로스브라우징을 위해 추가 */
	-webkit-line-clamp: 3; /* 보여질 줄 수 (여기서는 3줄로 설정) */
	-webkit-box-orient: vertical; /* 세로 방향으로 정렬 */
	overflow: hidden; /* 넘치는 부분 숨김 */
	text-overflow: ellipsis; /* 넘친 텍스트를 ...으로 표시 */
}