/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

button {
	color:unset;
}
	iframe,
embed,
object {
	max-width: 100%
}

html,
body {
	margin: 0;
	padding: 0;
	overflow-x:hidden;
}

img {
	border: 0
}

button,
input,
textarea,
select {
	font: inherit;
	margin: 0;
	line-height: inherit
}

button,
input[type="button"] {
	-webkit-appearance: button;
	cursor: pointer
}

a:hover,
a:focus {
	color: silver;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0
}

kbd {
	padding: 4px;
	font-size: 80%;
	border-radius: 4px;
	margin: 0 2px
}

figure {
	margin: 0
}

ul,
ol,
li {
	margin: 0;
	padding: 0;
	list-style-type: none
}

button {
	border: 0;
	background: transparent;
	outline: 0
}

.s-none {
	display: none !important
}

.entry-content p>span:not(.tool):not(.sb2):not(.sb3):not(.sb4):not(.swimBlock),
.entry-content li>span,
.entry-content p>span:not(.tool):not(.sb2):not(.sb3):not(.sb4)>span:not(.tool):not(.sb2):not(.sb3):not(.sb4):not(.swimBlock) {
	color: var(--font-color) !important
}

.entry-content table {
	height: unset !important;
	display: block;
}

.menu_toolbar {
	display: none
}

a {
	background: transparent;
	text-decoration: none;
	color: var(--font-color)
}

.darkmode img {
	filter: brightness(.8) contrast(1.2)
}

:focus {
	outline: 3px solid #aaa
}

:focus:not(:focus-visible) {
	outline: 0
}


@font-face {
    font-family: fontello;
    src: url(./images/icomoon.eot?inv9z6);
    src: url(./images/icomoon.woff?inv9z6) format('woff'), url(./images/icomoon.svg?inv9z6#iconfont) format('svg');
font-display: block;

}

body {
	font-family:  fontello, Arial, "NanumBarunGothic", sans-serif;
	font-size: 14px;
	font-weight: normal;
	word-wrap: break-word;
	Letter-spacing: .5px;
	text-shadow: 0 0 .1px rgba(0, 0, 0, 0.3);
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
	color: var(--font-color);
	background: var(--bg-color);
}

/*nav*/
#swim-nav {
	position:absolute;
	width:100%;
	 display:grid;
	grid-template-columns: 50px 1fr 50px;	
	grid-template-rows: 60px;
	align-items: center;
	background: var(--nav-color);
	z-index:60;
	backdrop-filter: blur(10px) contrast(200%);
}


@keyframes fixedd {
	0% {
		transform: translateY(-80px)
	}
	100% {
		transform: translateY(0)
	}
}

#swim-nav .link_item {
	margin-right: 15px;
	height: 65px;
	line-height: 60px;
		display:block;
}
.swim-header {
	padding-top:60px;
	    display: flex;
    justify-content: center;
}

.swimsearch {
	-webkit-box-sizing: border-box;
border: 4px solid silver;
	box-sizing: border-box;
	position: relative;
	background: transparent;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	margin-bottom:15px;
}

.swimsearch:after {
	-webkit-box-sizing: border-box;
 background:silver;
	box-sizing: border-box;
	margin-top: 10px;
	margin-left: 12px;
	position: absolute;
	display: block;
	content: "";
	height: 15px;
	width: 4px;
	border-radius: 8px;
	transform: rotate(-45deg)
}

.swimsearch:hover {
	border: 4px solid var(--hover-color)
}

.swimsearch:hover:after {
	background: var(--hover-color)
}
.fixedd {
	position: fixed!important;
	animation: fixedd .5s 0s 1 ease-in-out forwards
}
.menuh {
	position: relative;
	padding: 100px;	
}
.menuh:hover span,
.menuh:hover span:before,
.menuh:hover span:after {
	background: var(--hover-color);
			
}
.menuh span:before,.menuh span, .menuh span:after{
			transition: all .3s;
}
.dividivi:nth-of-type(1):hover span,.dividivi:nth-of-type(1):hover span:after,.dividivi:nth-of-type(1):hover span:before {
	transition: all .3s;
	transform: rotate(180deg);
}

.menuh span {
	position: relative;
	top: 50%;
	transform: translateY(-50%)
}

.menuh span:before,
.menuh span:after {
	position: absolute;
	content: ''
}

.menuh span,
.menuh span:before,
.menuh span:after {
	width: 27px;
	height: 5.4px;
	border-radius: 5px;
	display: block
}

.menuh span:before {
	margin-top: -8px
}

.menuh span:after {
	margin-top: 8px
}

.menuh2 {
	position: relative;
	display: none;
	width: 30px;
	height: 30px;
	padding: 10px;
	margin-top: 15px;
	margin-left: -1px
}

.menuh2 span {
	position: fixed
}

.menuh2 span:before,
.menuh2 span:after {
	position: absolute;
	content: '';
	width: 27px;
	height: 5.4px;
	background: #fff;
	display: block
}
.menuh2:hover span:before, .menuh2:hover span:after {
	background:var(--hover-color);
}
@keyframes turnturn {
	0% {
		transform: rotate(0)
	}
	100% {
		transform: rotate(405deg)
	}
}

@keyframes turnturn2 {
	0% {
		transform: rotate(0)
	}
	100% {
		transform: rotate(-405deg)
	}
}

.menuh2 span:before {
	animation: turnturn .5s 0s 1 ease-in-out forwards
}

.menuh2 span:after {
	animation: turnturn2 .5s 0s 1 ease-in-out forwards
}
.menuh span, .menuh span:before, .menuh span:after {
    background: silver;
}

#subtoggle>div {
	position: relative;
	height: auto
}

#subtoggle .category_list,
#subtoggle .link_tit {
	width: 300px;
	background: #333
}

#subtoggle .sub_category_list {
	background: #383838;
	text-indent: 5px
}

#subtoggle .link_sub_item,
#subtoggle .link_item,
#subtoggle .link_tit,
.grak a,
.list_toolbar li,
.grak span{
	display: block;
	padding: 16px 26px;
	color: #fff;
	font-size: 14px;
	margin: 4px 0;
	position: relative
}

#subtoggle .link_tit {
	margin: 0;
	margin-bottom:-4px;
}

#subtoggle .link_sub_item:before {
	content: "\2794";
	margin-right: 5px
}

#subtoggle .link_sub_item:hover,
.grak a:hover,.grak span:hover {
	background: var(--hover-color)
}

#subtoggle .link_item,#subtoggle .link_tit {
	border-left: 5px solid #3498db
}
.grak span {
	cursor:pointer;
}

.grak a,.grak span {
	border-left: 5px solid var(--hover-color)
}

.list_toolbar li {
	border-left: 5px solid red
}

#subtoggle .link_item:hover {
	background: #3498db
}



#subtoggle {
	position: fixed;
	z-index: 1916;
	transition: all .7s ease;
	display: none;
	top: 0;
	left: 0;
	width: 300px;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	animation: openright .2s 0s 1 ease-in-out forwards;
	background: #383838;
}

@keyframes openright {
	0% {
		transform: translateX(-80px)
	}
	100% {
		transform: translateY(0)
	}
}

.grak {
	display: flex;
	flex-flow: column wrap;
	margin-bottom: 20px;
	background:#333;
}

#subtoggle:target {
	display: block
}

#subtoggle:target .menuh2 {
	display: inline-block
}

.dividivi {
	overflow:hidden;
}
.dividivi:nth-of-type(1){
	margin-left:15px;
}
.dividivi:nth-of-type(2) {
	justify-self: center;
}

.wow2 {
	font-size: 32px;
	cursor: pointer;
	transition: all 0s;
	margin: 20px auto;
	display: block
}

.wow2:hover {
	color: var(--hover-color);
	transition: all 0s
}
#menu-expanded:target {
	display: flex;
flex-direction: column;
align-items: center;
z-index:9000;
}
@media (min-width:1400px) {
	#menu-expanded:target {
		justify-content:center;
	}
}
#menu-expanded h2 {
	margin: 20px auto;
	color: #fff
}

#menu-expanded .wow2{
	display: block;
	width: 70px;
}
#menu-expanded .wow2:hover span:before,#menu-expanded .wow2:hover span:after {
	background:var(--hover-color);
}
#menu-expanded a {
	margin: 15px 5px;
	border-radius: 15px;
	padding: 10px;
	transition: all .15s;
	display: inline-block;
		color:#000;
}



#menu-expanded {
	display: none;
	position: fixed;
	transition: all .25s;
	text-align: center;
	height: 100%;
	width: 100%;
	overflow: auto;
	border-radius: 0;
	top: 0;
	left: 0;
	z-index: 50;
	    background: rgba(0,0,0,.8);
}

#menu-expanded #drad2 {
	display: block;
	position: relative;
	flex: auto;

	font-size: 20px
}

#menu-expanded input {
	display: inline-block;
	width: 60px;
	line-height: 8rem;
	height:8rem;
	color: var(--font-color)
}
@supports (-webkit-touch-callout: none) {
	#menu-expanded input {
  height:unset;
	}
}
#menu-expanded input[type="button"] {
	background: #fff;
	border: 0;
	box-shadow: 0 0 25px 0 #fff, 0 20px 25px 0 rgba(0,0,0,0.2);
	color:#000;
	border-radius: 0 30px 30px 0;
z-index: 2;
	margin-left:-30px;
}

#drad2 {
	display: none;
	outline: 0;
	border: 0;
	transition: all 0s;
	position: fixed;
	border-radius: 30px;
	box-shadow: 0 0 25px 0 crimson, 0 20px 25px 0 rgb(0,0,0,0.2);
    background: crimson;
}
.oneThing {
	margin-top:50px;
    width: 70%;
    display: inline-flex;
}

.wow2 span:before {
    transform: rotate(
-45deg
);
}
.wow2 span:after, .wow2 span:before {
    position: absolute;
    content: '';
    width: 54px;
    height: 10.8px;
    display: block;
    margin-top: 15px;
    margin-left: 7px;
	background: #fff;
}
.wow2 span:after {
    transform: rotate(
45deg
);
}
a.cloud1{background:#d0acff}a.cloud2{background:#c6b8ff}a.cloud3{background:#b7b7ff}a.cloud4{background:#b7c2ff}a.cloud5{background:#afd3fa}
.taags {
	margin: 5px 0
}

.taags a {
	margin: 10px 5px;
	border-radius: 10px;
	position: relative;
	display: inline-block;
	height: 30px;
	line-height: 30px;
	padding: 0 15px;
	font-size: 13px;
	-webkit-transition: .2s;
	transition: .2s;
}
.entry-tags .taags a {
		background: var(--black-color);
}
.taags2 a {
	margin: 5px;
	color:#000;
}

.taags a:before {
	content: '\e81d';
	text-align: center;
	color: black;
	transform-origin: center center;
	display: inline-block;
	margin-right: 5px
}

.taags a:after {
	position: absolute;
	display: block;
	content: "";
	background: #fff;
	background: var(--bg-color);
	right: -15px;
	top: 10px;
	width: 15px;
	height: 15px
}

.taags a:hover {
	background: var(--hover-color);
		color:var(--font-color);	
}

/*layout*/
#swim-wrap {
	position:relative;
display: grid;
grid-template-columns: 1fr minmax(50px,350px) minmax(10px,50px) minmax(100px, 400px) minmax(100px, 400px) minmax(10px,50px) minmax(50px,350px) 1fr;
grid-template-rows: auto auto auto;	
		align-items: start;
}
.myhome2 #swim-wrap {
	grid-template-columns: 1fr minmax(50px,350px) minmax(10px,50px) minmax(100px, 600px) minmax(100px, 600px) minmax(10px,50px) minmax(50px,350px) 1fr;
}
.swim-header,
.swim-footer {
			border:0;
	width:100%;
		grid-column: 1 / span 8;
	overflow: hidden;
}
.swim-header {

	grid-row: 1 / span 1;
}
.swim-footer {
	grid-row: 3 / span 1;
	position: relative;
}
.swim-content, .swim-side {
	grid-row: 2 / span 1;
}

.swim-content {
	grid-column: 3 / span 3;
}
.swim-side {
	grid-column: 7 / span 1;
}

.myhome .swim-content {
		grid-column: 2 / span 4;
}
.myhome .swim-side {
	grid-column: 7 / span 1;
}
.myhome2 .swim-content {
		grid-column: 2 / span 4;
}
.myhome2 .swim-side {
	grid-column: 7 / span 1;
}

.swim-content {
	position:relative;	
	box-shadow: 0 20px 75px 0 var(--boxshadow-color);
  border-radius: 20px;
  padding: 20px;
	border:0;
}


.swim-side {
	display:flex;
	flex-flow:column wrap;
	max-width: 300px;
	padding:0 10px;
	align-self: flex-start;
}

@media (max-width:1360px) {
	#swim-wrap {
		display:flex;
		justify-content:center;
		flex-flow:row wrap;
	}
	.swim-content {
		    min-width: 260px;
		width:100%;
	}
		.swim-side {
		display:none;
	}
	.swim-footer,.swim-header {
		flex: 1 1 100%;
	}
	.swim-footer {
		margin-top:auto;
	}
}


.notice .container_postbtn {
	display:none;
}

.swim-footer {
	width:100%;
	text-align:center;
	border:0;
}
.entry-content {
	position: relative;
	line-height: 2;
	padding-bottom: 0;
	font-size:16px;
	counter-reset: section;
}

.entry-content h2,
.entry-content h3 {
	position: relative;
	display: inline;
	color: var(--font-bold);
	display: block
}

.entry-content h2:hover:before,
.entry-content h3:hover:before {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transition: all .2s ease-in-out
}
#menu-expanded,#B_Box,#subtoggle,#urladress,#dn2,#dn,#expand-toggle,label[for="dn2"],.another_category,.postbtn_ccl,#swim-nav .link_tit,#swim-nav .sub_category_list,.tistorySnsLayer,#editEntry,.BonMun .pagination,#upload  {
	display:none;
}

img {
	max-width:100%;
}
.bread {
	background: var(--black-color);
	display: inline-block;
	border-radius: 20px;
	padding: 10px;
	line-height: 14px
}



.bread li {
	display: inline-block;
	white-space: nowrap;
	overflow:hidden;
		text-overflow: ellipsis;
}


.bread li:nth-child(2):before,
.bread li:nth-child(3):before {
	content: "\00BB"
}

.bread li:nth-child(2) {
	max-width: 200px
}


.bread li:last-child {

	max-width: 180px
}
.entry-header {
	position: relative;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #ebebeb;
	line-height: 2em;
	text-align: center
}
.toggle2 {
	cursor: pointer;
	display: inline-block;
	position: relative;
	margin-left: 71px;
	width: 56px;
	height: 32px;
	background: #83d8ff;
	border-radius: 84px;
	transition: background 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95)
}

.toggle2:before {
	content: "라이트모드";
	position: absolute;
	left: -75px;
	color: #749ed7
}

.toggle2:after {
	content: "다크모드";
	position: absolute;
	right: -62px
}

.toggle__handler {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: inline-block;
	position: relative;
	z-index: 2;
	background: #ffde7b;
	box-shadow: none;
	background-size: 0;
	transition: transform .5s;
	border: .188em solid #caba94
}

#dn:checked+.toggle2 {
	background: #749dd6
}

#dn:checked+.toggle2:before {
	color: #fff
}

#dn:checked+.toggle2:after {
	color: #749ed7
}

#dn:checked+.toggle2 .toggle__handler {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: inline-block;
	transform: translate3d(28px, 0, 0) rotate(0);
	border: .188em solid #caba94;
	background: #ffefb5;
	box-shadow: inset -0.15em -0.15em #ffe096;
	background-image: radial-gradient(circle at 60% 10%, #e6cea5 15%, transparent 0), radial-gradient(circle at 30% 50%, #e6cea5 10%, transparent 0), radial-gradient(circle at 60% 70%, #e6cea5 13%, transparent 0);
	transition: transform .2s ease-in-out, background .3s, border-color .3s
}

.urlurl {
	background: var(--black-color);
	display: inline-block;
	border-radius: 5px;
		padding: 1px 3px;
}

.urlurl:hover {
	background: silver;
}


.line6 {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	height: 32px;
	line-height: 32px;
	margin: 20px 0 50px 0;
}

/*sidebar*/
::-webkit-scrollbar {
    width: 16px;
    height: 12px;
}
::-webkit-scrollbar-thumb {
    background: #adadad73;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
}
::selection {
    background: #adadad;
    text-shadow: none;
}
.widget {
	max-width: 100%;
	margin-bottom: 40px;
	padding: 10px;
	border-radius: 10px;
}

.widget-inner .link_tit:before,
.widget-inner .link_item:before {
	content: '★';
	text-align: center;
	width: 21.6px;
	height: 21.6px;
	color: gold;
	transform-origin: center center;
	display: inline-block;

}



.widget-inner a {
	display: flex;
	padding: 10px 5px;
	border-bottom: 1px dashed #ebebeb;
	color: var(--font-color);
	-webkit-transition: background 1s;
	transition: background 1s;
	margin: 10px 0;
}

.widget-inner a:last-child {
	border: none;
}

.widget-inner a:hover {
	color: #fff;
	text-decoration: none;
	background: silver;
}

.widget-inner .link_sub_item {
	text-indent: 10px
}

.widget-inner .link_sub_item:before {
	content: "\2794";
	padding-right: 5px;
	color: #ebebeb
}


#tab_first,
#tab_second {
	display: none;
	-webkit-user-select: none;

	-ms-user-select: none;
	user-select: none
}

.tt1,
.tt2 {
	display: block;
	width: 50%;
	height: 40px;
	float: left;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	-webkit-box-sizing: border-box;

	box-sizing: border-box;
	border: 1px dashed var(--black-color);
}

.tt1:hover,
.tt2:hover {
	background: silver;
	color: #fff;
	border: 1px solid transparent
}

#tab_first:checked~label.tt1,
#tab_second:checked~label.tt2 {
	background: var(--black-color);
}


.tab_first_content {

	display: none
}

.tab_second_content {

	display: none
}

.tab_contents {
	clear: both;

	overflow:hidden;
	border-top: 0
}

#tab_first:checked~.tab_contents .tab_first_content {
	display: block
}

#tab_second:checked~.tab_contents .tab_second_content {
	display: flex;
	flex-flow: column wrap

}

.tt_more_preview_comments_text {
	padding: 5px;
	background: #000;
	color: #fff;
	margin: 10px;
	border-radius: 5px
}

.tt_more_preview_comments_text:hover {
	background: silver;
}
p br {
	display: block;
	height: 1em;
	content: "";
	width: auto
}
.r-title {
	display: block;
	margin: 0;
	height: 80px;
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight:normal;
	font-size: 0.9em;
}
.r-title, .r-cnt {
	line-height: 80px;
}
.r-cnt {
	margin-left: auto;
	flex-shrink: 0;
}

.boro {
	font-size: 16px;
    background: var(--black-color);
    padding: 10px;
    display: block;
    border-radius: 10px;
}
.taags .boro {
	margin-bottom:10px;
}
.swim-side .boro {
	margin-left: -10px;
    margin-top: -10px;
    width: 100%;
    border-radius: 10px 10px 0 0;
}
/*search-list*/
.widget {
	box-shadow: 0 20px 75px 0 var(--boxshadow-color);
}
.search-list .infi2,.long-cover .infi2 {
	display: flex;
	/* display: grid;
	display: -ms-grid;
	grid-template-columns: repeat(5, 1fr);
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr; 
		overflow:hidden;*/
	margin: 15px 0;
	transition: transform .39s;
}

.thumb11 {
	width:80px;
	height:80px;
	position: relative;
	margin-right:10px;
	flex-shrink: 0;
}

.thumb7 img {
	transition: all .5s ease-in-out
}
.thumb11:before {
	padding-top:100%;
}

.thumb5:before,
.thumb8:before,
.thumb4:before,
.thumb11:before{
	content: "";
	display: block
}

.thumb4,
.thumb5,
.thumb7,
.thumb8 {
	display: inline-block;
	width: 100%;
	position: relative;
}
.thumb7 {
	width: 20%;
	height: 0;
	padding-bottom: 20%;
	align-self: center;
	flex-shrink: 0;
	overflow: hidden
}
.thumb4,.thumb5,.thumb7,.thumb8,.thumb11 {
	background:#ebebeb;
}

.thumb8:before {
	padding-top: 100%
}

.thumb4:before {
	padding-top: 72.5%
}

.thumb4 img,
.thumb5 img,
.thumb7 img,
.thumb8 img,
.thumb11 img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.search-list .title,.long-cover .title {
	font-size: 1.3rem;
	margin: 0 0 5px 0;
	font-weight: bold;
	overflow: hidden;
	display: block;
	max-height: 5.2rem;
	line-height: 2.6rem;
	color: var(--font-bold);
		word-break: break-all;
}
@media (max-width:768px) {
	.search-list .title,.long-cover .title{
		font-size: 1rem;
		line-height: 1.7rem;
		max-height:3.4rem;
	}
}


.search-list2 {
	width: 100%;
	/*grid-column: 2/ 7;
	-ms-grid-column: 2;
	-ms-grid-column-span: 2;*/
	margin-left: 20px;
	padding: 20px 0;
}
.search-list2 .category,
.search-list2 .timetime{
	display: inline-block;
	margin-bottom: 5px;
	font-size: 0.7rem;
}

.search-list .excerpt,.long-cover .excerpt {
	color: var(--font-color);
	position: relative;
	margin: 0;
	line-height: 1.7rem;
	overflow: hidden;
	display: block;
	max-height: 5.1rem;
	word-break: break-all;
}

@media screen and (max-width: 960px) {
	.search-list .excerpt,.long-cover .excerpt {
		max-height: 3.4rem;
	}
}

@media screen and (max-width: 768px) {
	.search-list .excerpt,.long-cover.excerpt {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	.search-list2 .category {
		display: none;
	}
}

.ccnt {
	font-size: 9px
}

.infi>article:hover .title {
	color: var(--hover-color)
}

.infi>article:hover .thumb7 img {
	-ms-transform: scale(1.2);

	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	transition: all .5s ease-in-out
}

.infi .category {
	color: var(--font-bold)
}


/*entry*/
figure figcaption {
    font-size: 16px;
    text-align: center;
}

#toast {
	position: fixed;
	bottom: 90px;
	left: 50%;
	padding: 15px 20px;
	transform: translate(-50%, 10px);
	border-radius: 30px;
	overflow: hidden;
	font-size: .8rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s, visibility .5s, transform .5s;
	z-index: 10000;
	background: rgba(0,0,0,0.4);
	color:#fff;
}

#toast.comeout {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0)
}
.wrap_btn:hover .ico_etc:before,.wrap_btn:hover .ico_statistics:before {
	color:var(--hover-color);
}
.Please {
 font-size:14px;
	width: 145px;
	height: 100px;
	background: #333232;
	color:#fff;
 text-align:center;
	line-height:40px;
}

.Please2 {
	width: 326px;
	height: 100px
}

.txt_state:before {
	content: "\e817";
	display: inline-block;
	width: 18px;
	height: 18px;
	color:#f99514;
}

.btn_subscription {
	padding: 0
}

.urlurl2,
.navereu {
	height: 98px;
	background: #333232;
	border: 1px dashed rgba(255, 255, 255, 0.3);
	color: #fff;
	font-size: 13px;
	text-align: center;
	line-height: 98px;
	cursor: pointer;
	position: relative
}

.urlurl2>div,
.navereu>div {
	transform: translateY(40%);
	height: 52px
}

.urlurl2>div:before,
.navereu>div:before {
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 10px
}

.urlurl2>div:before,.navereu>div:before {
	content: "\e817";
  margin-top: -25px;
	
}
.urlurl2>div:before {
			color:#00a8ff;
}
.navereu>div:before {
	color:#2d550f;
}

.urlurl2:hover,
.navereu:hover {
	background: var(--hover-color)
}

.url2 {
	position: absolute;
	margin-left: 270px;
	margin-top: -66px;
	padding: 6px
}
#toc>span {
	display: block;
    margin: 10px 0;
}
#toc::before {
	width: 100%;
	height: 30px;
	padding: 5px;
	font-size: 15px;
	content: "목차";
	position: relative;
	display: block;
	font-weight: bold;
	color: var(--font-bold);
	background: var(--black-color);
}

#toc {
	margin: 20px auto;
	width: 100%;
	min-height: 50px;
	overflow-y: auto;
	overflow-x: hidden;
	font-size: 14px;
	display: none;
	top: 30%;
	z-index: 15;
	box-shadow: 0 20px 75px 0 var(--boxshadow-color);
	will-change: transform;
	transform: translateZ(0);
	max-height:800px;
}



#toc p {
	text-align: center
}

@media (min-width: 1920px){
#toc {
    position: fixed;
    max-width: 230px;
    margin-left: -310px;
}
}
.container_postbtn .postbtn_like .wrap_btn_share {
	display: none
}

.container_postbtn .postbtn_like .uoc-icon {
	background: #333232;
	color: #fff;
	width: 100%;
	height: 98px
}

.container_postbtn .postbtn_like .wrap_btn:hover .uoc-icon {
	background: var(--hover-color)
}

.container_postbtn .postbtn_like+.btn_menu_toolbar:hover {
	background: var(--hover-color)
}

.container_postbtn .postbtn_like {
	border-style: none
}

.container_postbtn {
	display: flex;
	flex-flow: row wrap;
		-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin-top:30px;
	border: 5px solid gray;
}

.container_postbtn .btn_post {
	padding: 5px;
	height: 100%;
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}

.container_postbtn .btn_post .txt_like {
	line-height: 100px
}

.container_postbtn.follwing .ico_check {
	display: inline-block
}

.container_postbtn .btn_post .empathy_up_without_ani .ico_like {


			cursor:not-allowed;
}
.container_postbtn .btn_post .empathy_up_without_ani .ico_like:before {
    content: "\e800";
    font-size: 45px;
	color:red;
		animation: none
		
}
.container_postbtn .txt_tool_id {
	display: none
	
}


.container_postbtn .btn_post .ico_like:before {
    content: "\e809";
    display: block;
    height: 100%;
    width: 100%;
    font-size: 45px;
    margin-top: -20px;
	color:red;
	animation: gelatine 1s infinite
}




.container_postbtn .btn_post .ico_statistics:before{
	content: "\e99c";
    display: block;
    font-size: 14px;
    color: #fff;
}



.container_postbtn .btn_post .ico_etc:before {
    content: "\f1d8";
    font-size: 14px;
    position: absolute;
    color: #fff;
	margin-top:-11px;
	margin-left:-7px;
}
.container_postbtn .btn_menu_toolbar {
	color: #fff;
	background: #333232;
	border: 1px dashed rgba(255,255,255,0.3);
}

.container_postbtn .btn_menu_toolbar .txt_state {
	font-size: 13px;
	font-style: normal
}

.container_postbtn .postbtn_like {
	font-size: 0;
	display: flex
}

.container_postbtn .postbtn_like .wrap_btn {
	background: #333232;
	height: 98px
}

.layer_tooltip {
	overflow: hidden;
	position: fixed;
	bottom: 20px;
	border-radius: 3px;
	background: rgba(0, 0, 0, .7);
	display: none;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 10000
}

.layer_tooltip .inner_layer_tooltip {
	padding: 12px 0 14px
}

.layer_tooltip .inner_layer_tooltip .desc_g {
	padding: 0 24px;
	font-size: 14px;
	line-height: 14px;
	color: #fff
}

.layer_tooltip .inner_layer_tooltip .btn_close {
	position: absolute;
	top: 10px;
	right: 20px;
	width: 20px;
	height: 20px;
	padding: 5px;
	box-sizing: border-box
}

.layer_tooltip .inner_layer_tooltip .ico_close {
	width: 10px;
	height: 10px;
	background-position: -100px -40px
}

.screen_out {
	display: none
}

.container_postbtn:before,
.container_postbtn:after {
	text-align: center;
	background: #333232;
	width: 100%;
	color: #fff;
	font-size: 11px
}

.container_postbtn .ico_postbtn,
.ico_postbtn {
	display: inline-block;

	vertical-align: middle;

}

.uoc-count {
	font-size: 16px
}


#Parse_Area a {
	color: #fff;
	background: rgba(0, 0, 0, 0.35);
	word-break: break-all
}

.prevv2,
.nextt2 {
	color: #fff;
	font-size: 13px;
	z-index: 2;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: center;
	overflow: hidden;
	transition: all .5s ease-in-out;
	border: 1px dashed rgba(255, 255, 255, 0.3)
}

.prevv2:before,
.nextt2:before {
	font-weight: bold;
	color: gold;
	display: block;
	font-size: 11px
}



.prevv2:before {
	content: '❮다음글';
	text-align: left
}

.nextt2:before {
	content: '이전글❯';
	text-align: right
}

.totalprev,
.totalnext {
	position: relative;
	height: 100px;
	width: 50%;
	overflow: hidden
}

.totalprev {
	float: left
}

.totalnext {
	float: right
}

.totalprev:hover .pnimg,
.totalprev:hover .prevv2,
.totalnext:hover .pnimg,
.totalnext:hover .nextt2 {
	transform: scale(1.2);
	-webkit-transform: scale(1.2);

	-ms-transform: scale(1.2);

	transition: all .3s ease-in-out
}

.thumb5 {
	height: 100px;
	background: #333232;
}

.thumb5:before {
	padding-top: 22.5%
}

.pnimg {
	transition: all .5s ease-in-out
}
.container_postbtn div {
	flex:auto;
}
	.container_postbtn div.Please2 {
		width: unset;
		flex: 0 1 160px
	}
.underBlue,.underRed {
	font-size:16px;
	font-weight:bold;
}
.underBlue {
	color:#259af3;
}
.underRed {
	color:red;
}
.wrap_btn {
	border: 1px dashed rgba(255, 255, 255, 0.3)
}


.fileblock:hover {
	background: var(--hover-color)
}

.fileblock:before {
	content: "\f265다운로드";
	letter-spacing: 2px;
	background: #1f2739;
	color: #fff;
	text-align: center;
	display: block;
	margin-top: -30px;
	height: 30px;
	width: 100%;
	border-top-right-radius:20px;
	border-top-left-radius:20px;
}


.fileblock .name {
	overflow: visible
}

.fileblock {
	background:#000;
	border: 0;
	position: relative;
	text-align: center;
	width: 70%;
	border-radius: 5px;
	position: relative;
	border-radius:20px;	
	margin: 50px auto 20px auto;
}

.fileblock .name:before {
	content: "\f13a";
	text-align: center;
	position: absolute;
	color: #fff;
	font-size: 32px;
	margin-top: 10px;
	margin-left: -37px;
	-webkit-animation: bounce 1200ms ease infinite;
	animation: bounce 1200ms ease infinite
}


@keyframes bounce {
	0% {
		transform: translateY(0)
	}
	25% {
		transform: translateY(60%)
	}
	50% {
		transform: translateY(0)
	}
	75% {
		transform: translateY(30%)
	}
	100% {
		transform: translateY(0)
	}
}

.fileblock a {
	background: #000;
	border-radius: 5px
}

.fileblock a:hover {
	background: var(--hover-color)
}

.fileblock .name,
.fileblock .size {
	color: #fff;
	text-align: center
}

div[data-ke-type='moreLess'] .moreless-content,
#tt-body-page div[data-ke-type='moreLess'] .moreless-content {
	display: none
}

div[data-ke-type='moreLess'].open .moreless-content,
#tt-body-page div[data-ke-type='moreLess'].open .moreless-content {
	display: block
}

div[data-ke-type='moreLess'] .btn-toggle-moreless,
#tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless {
	line-height: 26px;
	cursor: pointer;
	text-decoration: none;
	background: #000;
}

figure[data-ke-type='map'],
iframe[data-ke-type='map'] {
	display: block;
	margin: 30px auto
}
.over2:after{
	z-index: 99;
	background: rgba(0, 0, 0, 0.5);
	content: "";
	left: 0;
	top: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	
}

figure.imageblock,
#tt-body-page figure.imageblock {
	display: table;
	position: relative
}

figure.imageblock.alignLeft {
	text-align: left
}

figure.imageblock.widthContent,
#tt-body-page figure.imageblock.widthContent {
	display: block
}

figure.imageblock.widthContent img {
	width: 100%
}

figure.imageblock.floatLeft figcaption,
figure.imageblock.floatRight figcaption {
	text-align: left
}

.alignLeft {
	text-align: left
}

.alignCenter {
	margin: 0 auto;
	text-align: center
}

.alignRight {
	text-align: right;
	margin-left: auto
}

.floatLeft {
	float: left;
	margin-right: 20px
}

.floatRight {
	float: right;
	margin-left: 20px
}

.widthContent {
	display: block;
	width: 100%
}


figure.imagegridblock, #tt-body-page figure.imagegridblock {
    position: relative;
    margin: 20px 0;
    background: transparent;
}
figure.imagegridblock .image-container {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
	flex-flow:row;
}
.ico-next:before,.ico-prev:before {
		font-size:40px;
	color:#fff;
	    top: 0;
    position: absolute;

}
.ico-next:before{
	content:"\f138";
right:0;

}

.ico-prev:before{
	content:"\f137";
	left:0;
}
.imageslideblock .hover15:after {
	display:none;
}

.imageslideblock .mark {
	display:none;
}
.imageslideblock {
	margin: 20px 0;
}

.imageslideblock.ready .btn {
	display: inline-block
}


.imageslideblock .image-container {
	position: relative;
	min-width: 480px;
	max-width: 100%;
	min-height: 300px;
	max-height: 860px;
	background: rgba(0,0,0,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin: 0 auto
}

.imageslideblock .image-container .image-wrap {
	display: none
}

.imageslideblock .image-container .image-wrap.selected {
	display: inline
}

.imageslideblock .image-container img {
	max-width: 100%;
	max-height: 100%
}

.imageslideblock .image-container .btn {
	position: absolute;
	border: 0;
	background: transparent;
	width: 60px;
	height: 60px;
	top: 50%;
	margin-top: -40px
}

.imageslideblock .image-container .btn-prev {
	left: 0
}

.imageslideblock .image-container .btn-next {
	right: 0
}



.imageslideblock .image-container .btn span {
 font-size:0;
	display: inline-block
}






.imageslideblock .mark span:first-child {
	background: rgba(0,0,0,0.7);
	margin-left: 0
}

.imageslideblock .mark span:last-child {
	margin-right: 0
}

.imageslideblock figcaption {
	text-align: center;
	color: #666;
	font-size: 14px
}

.imageslideblock .alignLeft {
	text-align: left
}




@media(max-width:600px) {
	.imageslideblock .image-container {
		min-width: 100%;
		width: 100%;
		max-height: 100%
	}
	.imageslideblock .image-container .btn span {
		opacity: .3
	}
	
}

.btn-toggle-moreless:before,
.btn_more:before {
	content: '\f13a';
		margin-right:5px;
}

div[data-ke-type='moreLess']::before {
	content: '';
	position: absolute;
	width: 100%;
	border-bottom: 1px dashed #ebebeb;
	margin-top: 22.5px
}

.moreless-content {
	padding: 15px 5px;
	border-bottom: 1px dashed #ebebeb
}

.open .btn-toggle-moreless:before,
.btn_less:before {
	content: '\f139';
	margin-right:5px;
}

.btn-toggle-moreless,
.btn_more,
.btn_less {
	z-index: 1;
	position: relative;
	display: inline-block;
	padding: 5px 7px;
	border-radius: 8px;
	margin-top: 5px;
	color: #fff;
	font-size: 14px;
	cursor: pointer
}

.btn-toggle-moreless:hover,
.btn_more:hover,
.btn_less:hover {
	background: var(--hover-color);
	color: #fff
}


#fullsns {
	display: flex;
	justify-content: center;
	margin-top: 15px;
		-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.ttwitter,.facebook,.iinstargram,.yyoutube,.ktalk,.nnaver,.kstory,.b-band {
background: #000;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-size: 30px;
    text-align: center;
    color: #fff;
    line-height: 44px;
}

.badge:hover .ttwitter,.nav2:hover .ttwitter {
	color:#259af3;
}
.badge:hover .facebook,
.nav1:hover .facebook {
	color:#1c68c5;
}
.nav5:hover .iinstargram {
	color:rgba(255,255,255,0.7);
}

.nav4:hover .yyoutube {
	color:red;
}

.badge:hover .ktalk,.nav3:hover .ktalk {
	color:#ffb300;
}

.badge:hover .nnaver {
	color:#00944a;
}

.badge:hover .kstory {
	color:#f68401;
}


.badge:hover .b-band {
 color:#7cb342;
}

.badge {
	cursor: pointer;
	position: relative;
	width: 44.8px;
	height: 66.8px;
	border-radius: 10px;
	display: inline-block;
	top: 0;
	transition: all .2s ease;
	-webkit-box-sizing: border-box;

	box-sizing: border-box
}

.badge:before,
.badge:after {
	position: absolute;
	width: inherit;
	height: inherit;
	border-radius: inherit;
	background: inherit;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto
}

.badge:before {
	-webkit-transform: rotate(60deg);
	transform: rotate(60deg)
}

.badge:after {
	-webkit-transform: rotate(-60deg);
	transform: rotate(-60deg)
}

.badge:hover {
	transform: translateY(-4px)
}

.badge:hover .ribbon {
	color: var(--hover-color)
}

.badge .circle {
	width: 60px;
	height: 60px;
	position: absolute;
	background: #fff;
	z-index: 10;
	border-radius: 50%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto
}

.badge .ribbon {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	border-radius: 4px;
	padding: 3px;
	text-align: center;
	width: 80px;
	z-index: 11;
	color: #fff;
	bottom: 3px;
	left: 50%;
	margin-left: -40px;
	height: 18px;
	line-height: 10px;
	font-size: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.27);
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
	text-transform: uppercase;
	background: linear-gradient(to bottom right, #555 0, #333 100%);
	cursor: pointer
}

.yellow {
	background: linear-gradient(to bottom right, #ffeb3b 0, #fbc02d 100%);
	color: #ffb300
}

.orange {
	background: linear-gradient(to bottom right, #ffc107 0, #f57c00 100%);
	color: #f68401
}

.pink {
	background: linear-gradient(to bottom right, #f48fb1 0, #d81b60 100%);
	color: #dc306f
}

.red {
	background: linear-gradient(to bottom right, #f4511e 0, #b71c1c 100%);
	color: #c62828
}

.purple {
	background: linear-gradient(to bottom right, #ab47bc 0, #4527a0 100%);
	color: #7127a8
}

.teal {
	background: linear-gradient(to bottom right, #4db6ac 0, #00796b 100%);
	color: #34a297
}

.blue {
	background: linear-gradient(to bottom right, #4fc3f7 0, #2196f3 100%);
	color: #259af3
}

.blue-dark {
	background: linear-gradient(to bottom right, #1976d2 0, #283593 100%);
	color: #1c68c5
}

.green {
	background: linear-gradient(to bottom right, #cddc39 0, #8bc34a 100%);
	color: #7cb342
}

.green-dark {
	background: linear-gradient(to bottom right, #4caf50 0, #1b5e20 100%);
	color: #00944a
}

.silver {
	background: linear-gradient(to bottom right, #e0e0e0 0, #bdbdbd 100%);
	color: #9e9e9e
}

.gold {
	background: linear-gradient(to bottom right, #e6ce6a 0, #b7892b 100%);
	color: #b7892b
}

.badge {
	margin-left: 35px
}


.talk-bubble {
	display: flex;
    padding: 10px 0 10px 50px;
    flex-wrap: wrap;
}

.talk-bubble--reply {
	padding: 10px 50px 10px 0;
    flex-direction: row-reverse;
}

.talk-bubble .avatar-wrap {
	position: absolute;
	display: block;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
    transform: translate(-50px,0);
}

.talk-bubble--reply .avatar-wrap {
	right: auto;
    transform: translate(50px,0);
}

.talk-bubble .avatar {
	border-radius: 50%;
}

.talk-bubble .c-head {
	width: 100%;
	font-size: 12px;
	line-height: 15px;
}

.talk-bubble--reply .c-head {
	text-align: right;
}
.talk-bubble .c-bottom {
	width: 100%;
	margin-top: 10px;
	font-size:12px;
}
.talk-bubble--reply .c-bottom {
	text-align: right;
}
.talk-bubble .c-bubble {
    position: relative;
    border-radius: 5px;
    max-width: calc(100% - 2.6rem);
    margin-top: 5px;
    background: var(--cbubble-color);
    transform-origin: top left;
}

.talk-bubble .c-bubble::after {
    content: "";
    box-sizing: content-box;
    position: absolute;
    width: 17.5px;
    height: 25px;
    border: 0 solid var(--cbubble-color);
    border-width: 0 20px;
    border-radius: 50%;
    clip: rect(0,41px,15px,28px);
    display: block;
    z-index: 1;
    left: -37.4px;
    top: 5px;
}

.talk-bubble--reply .c-bubble {
	background: var(--cbubble-color);
	transform-origin: top right;
}

.talk-bubble--reply .c-bubble::after {
	left: auto;
    right: -37.3px;
    clip: rect(0,28px,10px,19px);
    border-color: var(--cbubble-color);
}

.talk-bubble .comment-text {
	margin: 0;
	padding: 5px 10px;
    line-height: 1.7;
}

.talk-bubble .timeblock {
    display: inline-flex;
    align-items: flex-end;
    flex-shrink: 0;
    padding-left: 3px;
    font-size: .55rem;
}

.talk-bubble--reply .timeblock {
	padding: 0 3px 0 0;
}



.talk-bubble .timeblock time {
	margin: 0;
}
.c-layout {
    border-bottom: 1px dashed silver;
	padding: 10px 0;
}
#comment-list .c-layout:last-child {
	border:none;
}
#dgdown {
	text-align: left;
	margin: 10px 0;
	background: var(--black-color);
	padding: 12px;
	border-radius: 6px
}

.rp_admin .name::before,
.guest_admin .name::before {
	content: '★';
	color: gold;
}

.checkboxx {
	display: inline-block;
	margin: 0 0 0 3px;
	transform: translateY(3px);
}

.form-control {
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	width: 48%;
	margin: 10px 0;
	height: 50px;
	display: inline-block;
	padding: 0
}

.form-control:focus {
	border-color: #66afe9;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6)
}

.form-control:-moz-placeholder {
	color: #999
}

.form-control::-moz-placeholder {
	color: #999;
	opacity: 1
}

.form-control:-ms-input-placeholder {
	color: #999
}

.form-control::-webkit-input-placeholder {
	color: #999
}


	.form-control {
	 width: calc(50% - 4px);
	}

.comment-form {
	display: block;
	width: 100%
}

form[method*=post] {
	margin-top: 55px !important;
	padding: 10px;
	border-radius: 10px
}

#txtForm {
	width: 100%;
	margin-top: 5px;
	height: 100px;
	padding: 0;
	color: #000
}

.checkboxx input {
	display: none
}

.checkboxx input+label span {
	font-size:25px;
	cursor:pointer;
}
.checkboxx input+label span:before {
	content:"\f13e";
}
.checkboxx input+label span:hover{
	color:var(--hover-color);
}

.darkmode .checkboxx input+label span {
	color:#fff;
}

.checkboxx input:checked+label span:before {
content:"\e81b";
	color:var(--hover-color);
}

.guest_admin>a,
.guest_secret>a,
.guest_general>a,
.rp_secret>a,
.rp_general>a,
.rp_admin>a {
	font-size: 12px;
	margin-left: 3px
}

.name {
	color: var(--font-color);
	font-size: 15px;
	margin-left: 5px;
	margin-right: 3px;
	font-weight: 500;
	line-height: 15px
}



.rp_admin .name {
	margin-left: unset
}

.totalimo {
	display: flex;
	justify-content: center;
	margin-top: -50px
}


.sbtn:after{background:#78c7d2}.ybtn:after{background:red}.ibtn:after{background:#ffa800}


.sbtn,.ybtn,.ibtn{background:#222;border-radius:5px}

.sbtn,
.ybtn,
.ibtn {
	color:#fff;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	text-transform: uppercase;
	outline: 0;
	overflow: hidden;
	position: relative
}

.sbtn {
	padding: 8px 30px;
	font-weight: 700;
	margin: 10px 0
}

.ybtn {
	margin: 10px 0
}

.ibtn {
	margin-bottom: -7px
}

.ybtn,
.ibtn {
	padding: 4px 15px;
	font-size: 12px
}

.sbtn span,
.ybtn span,
.ibtn span {
	position: relative;
	z-index: 1
}

.sbtn:after,
.ybtn:after,
.ibtn:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 490%;
	width: 140%;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
	transform: translateX(-98%) translateY(-25%) rotate(45deg)
}

.sbtn:hover:after,
.ybtn:hover:after,
.ibtn:hover:after {
	-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
	transform: translateX(-9%) translateY(-25%) rotate(45deg)
}

.timeblock {
	display: block
}

.timeblock time {
	margin-left: 10px;
	margin-right: 5px
}

form[method*=post] {
	 background: var(--black-color);
    margin-top: 55px !important;
    padding: 10px;
    border-radius: 10px;
}

.button-up {
    display: none;
    position: fixed;
    content: '';
    bottom: 5px;
    right: 5px;
    color: silver;
    transition: all .2s linear;
    z-index: 30;
    cursor: pointer;
    font-size: 45px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.button-up:hover {
	transform: translate3d(0, -10px, 0);
	-ms-transform: translate3d(0, -10px, 0);
	-webkit-transform: translate3d(0, -10px, 0);
	color:var(--hover-color);

}
.active4 {
    display: block;
    animation: scaleup .5s 0s 1 ease-in-out;
}

@keyframes scaleup {
	0% {
		transform: scale(0.1);
		opacity: 0
	}
	20% {
		opacity: 1
	}
	72% {
		transform: scale(1.1)
	}
	84% {
		transform: scale(0.95)
	}
	98% {
		transform: scale(1)
	}
	99% {
		transform: scale(1)
	}
	100% {
		transform: scale(1)
	}
}

@keyframes scaledown {
	0% {
		transform: scale(1);
		opacity: 1
	}
	15% {
		transform: scale(1.2)
	}
	60% {
		opacity: 1
	}
	99%,
	100% {
		transform: scale(0.1);
		opacity: 0
	}
}
div.yesToc{display:block !important}
.pagination {
	padding-left: 0;
	margin: 30px 0;
	border-radius: 4px;
	display: flex;
    justify-content: center;
}

.pagination li {
	display: inline
}

.pagination li>a {
	position: relative;
	padding: 6px 12px;
	text-decoration: none;
	margin-left: -1px
}

.pagination>li:first-child>a {
	margin-left: 0;
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px
}

.pagination>li:last-child>a {
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px
}

.pagination>li>a:hover,
.pagination>li>a:focus {
	background: #eee;
	border-color: #ddd
}

.pagination>.active>a,
.pagination>.active>a:hover,
.pagination>.active>a:focus {
	z-index: 2;
	color: #fff;
	background: #428bca;
	border-color: #428bca;
	cursor: default
}
.selected:before {
	content:"";
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
		background: rgba(221,221,221,0.3);
	border-radius:5px;
}
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
	color: #999;
	background: #fff;
	border-color: #ddd;
	cursor: not-allowed
}
.sb2,
.sb3,
.sb4,
.entry-content blockquote,
.entry-content table,
.entry-content h2,
.entry-content h3,
.entry-content h4,
div[data-ke-type='moreLess'] {
	margin: 30px 0;
	
}


/*cover*/

.timetime,
.ccnt {
	color: var(--font-color)
}
.grid-item * {
		will-change:transform;
		transform: translateZ(-2em)
}

.grid-item a {
	display: flex;
	    justify-content: center;
    align-items: center;
    flex-flow: column;
}
.grid-content {
position: absolute;
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    width: 100%;
	opacity:1;
		background: rgba(255,255,255,0.3);
}
.grid-content h2 {
	word-break: break-all;
	line-height:2rem;
	max-height:4rem;
	overflow:hidden;
}
@media(max-width:768px) {
	.grid-content h2,	.grid-content .timetime {
		font-size:12px;
	}
	.grid-content h2 {
		margin-top:22px;
		line-height:1.5em;
		max-height:3em;
		z-index:5;
	}
	.grid-content {
		min-height:150px;
	}
	.grid-item {
		min-height:100px;
	}
}
.grid-item .timetime {
	display: block;
	line-height:1em;
	height:1em;
}


.cover-thumbnail-list-2 .catetime {
	font-size: 0.7rem;
}
.cover-thumbnail-list-2 .catetime,
.cover-thumbnail-list-2 .timetime{
	color: var(--font-bold);
}

.swim-article-subhead .timetime {
	color: gray;
	margin: 0 5px
}



.cover-thumbnail-list-1 p {
	overflow: hidden;
	padding: 20px
}

.cate1,.cate2 {
		line-height: 14px;
	border: 1px solid rgba(0,0,0,0.1);
	padding: 9px;
	border-radius: 5px;
		color: #000;
}
.darkmode .cate1, .darkmode .cate2 {
	border: 1px solid rgba(255,255,255,0.1);
	color:#fff;
}
.cate1 {
    max-width: 150px;
    word-break: break-all;
	float: left;
}

.cate2 {
	float: right;
}

.cover-thumbnail-list-2 header {
	padding: 10px;
}

.cover-thumbnail-list-2 .title {
	display: block;
	overflow: hidden;
	margin-bottom: 2px;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 700;
	color: var(--font-color);
	-webkit-transition: color .2s;
	transition: color .2s;
	margin: 6px 0;
}

.cover-thumbnail-list-2 .cate1--alt {
	font-size: 0.7rem;
}

.cover-thumbnail-list-2 .excerpt {
	position: relative;
	overflow: hidden;
	display: block;
	height: 4.5rem;
	margin-bottom: 5px;
	line-height: 1.5rem;
	font-size: .9rem;
	-webkit-transition: color .2s;
	transition: color .2s
}

.excerpt:after {
	bottom: 0;
	right: 0;
	position: absolute;
	display: block;
	content: "";
	height: 25px;
	width: 180px;
	background: linear-gradient(to right, var(--gra-color1)10%, var(--gra-color5) 100%)
}
.cate1,
.cate2 {
	margin-top: 15px
}
.cover-thumbnail-list-1, .cover-thumbnail-list-2 {
		display: flex;
	display: -webkit-box;

	display: -ms-flexbox;
	display: -webkit-flex;
	flex-flow: row wrap;
	-webkit-box-sizing: border-box;

	box-sizing: border-box
}

.hmm5 {
	display: block;
	margin: 0;
	text-align: center;
	background: var(--black-color);
	border-radius: 10px;
	margin-bottom:20px;
		line-height:3rem;
}
.cover-thumbnail-list-1 .hmm5, .cover-thumbnail-list-2 .hmm5 {
	flex: 1 0 100%;
	margin-bottom:30px;
}
.cover-thumbnail-list-1 .jgjg, .cover-thumbnail-list-2 .jgjg {
	flex: 0 1 33%;
	transition: all .39s;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
	padding:20px;
}
.cover-thumbnail-list-2 .jgjg a {
	display: block;
	border-radius:10px;
	transform: translateZ(0);
	box-shadow: 0 0 3rem -2rem rgb(0 0 0 / 50%);
	overflow: hidden;
}
.cover-thumbnail-list-2 .jgjg:hover, .cover-thumbnail-list-2 .jgjg:hover {
	transform: translateY(-15px);
	transition: all .39s
}
.jgjg h2 {
	line-height: 2rem;
	max-height: 4rem;
	overflow: hidden;
	display: block;
 
	color: rgba(0, 0, 0, .89);

}
.jgjg h2 {
		margin: 20px 0;
		font-size: 1.3rem;
		color: var(--font-bold)
}

.cover-thumbnail-list-2 .jgjg a:hover h2,
.cover-thumbnail-list-2 .jgjg a:hover .excerpt {
	color: var(--hover-color)
}

.cover-thumbnail-list-2 a:hover .gotoright:after,
.cover-thumbnail-list-2 a:hover .gotoright:before,
.cover-thumbnail-list-2 a:hover figcaption:after,
.cover-thumbnail-list-2 a:hover figcaption:before {
	top: 0;
	opacity: .8
}

.cover-thumbnail-list-2 a:hover figcaption p,
.cover-thumbnail-list-2 a:hover figcaption p {
	-webkit-transition-delay: .4s;
	transition-delay: .4s
}

.cover-thumbnail-list-2 a:hover figcaption p,
.cover-thumbnail-list-2 a:hover figcaption p {
	opacity: .7
}


.upanddown {
	color: rgba(0,0,0,.89);
}


.upanddown header {
		-webkit-transition: all .35s ease-in-out;
	transition: all .35s ease-in-out;
	will-change: transform;
			-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	width: 100%;
	height: 100%;
	padding: 10px;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	color: #f1f1f1;
	background-color: rgba(0, 0, 0, .5);
	
}
.upanddown:hover header {
	background-color: rgba(0, 0, 0, .7);
		-webkit-transition: all .35s ease-in-out;
	transition: all .35s ease-in-out;
}
.cover-thumbnail-list-1 .jgjg a {
	    border-radius: 10px;
  overflow:hidden;
			will-change:transform;
	transform: translateZ(0);
		box-shadow: 0 0 3rem -2rem rgba(0 0 0 / 50%);
	display:block;
}
.upanddown,.thumb8 {
	transform: translateZ(-2em);
}

.upanddown figcaption {
	text-align: left;
}

.upanddown h3 {
	margin: 0 0 5px 0;
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1.5;
}

.upanddown span {
	display: block;
	display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
	margin: 0 0 5px 0;
	max-height: 4.8rem;
	font-size: 0.8rem;
	line-height: 1.2rem;
	font-weight: 200;
	overflow: hidden;
}

.upanddown .timetime {
	color: #f1f1f1;
	font-size: 0.8rem;
}

.related-articles {
	display: flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	flex-flow: row wrap;
	margin-top: 5px
}


.related-articles a {
	flex: 0 0 25%;
	flex-flow: row wrap;
	overflow: hidden;
	margin-bottom: 5px
}

.related-articles h2 {
	background:var(--black-color);
	font-size: 1.125em;
	font-weight: 500;
	padding: 12px;
	border-radius: 6px;
	line-height: 1.125em;
	flex: 1 1 100%;
	height: 1.125em
}
.related-articles .title {
	background:none;
}

.related-articles a:hover .gotoright:after,
.related-articles a:hover .gotoright:before,
.related-articles a:hover figcaption:after,
.related-articles a:hover figcaption:before {
	top: 0;
	opacity: .8
}

.related-articles a:hover figcaption p {
	-webkit-transition-delay: .4s;
	transition-delay: .4s
}

.related-articles a:hover figcaption p {
	opacity: .7
}
.related-articles strong,.gotoright p {
	line-height:1.4;
	font-size:1.2rem;
	    overflow: hidden;
    height: 2.8rem;
}
.related-articles .title {
	display: block;
	text-align: center;
	font-size: 0.9rem;
	height: 3.4rem;
	line-height: 1.7rem;
	padding: 0 10px;
	margin: 10px 0;
		overflow:hidden;
	font-weight:bold;
}
@media (max-width:768px) {
	.related-articles strong,.gotoright p {
	font-size:.8rem;
}
	.related-articles h2 {
		font-size:.8rem;
	}
}

.gotoright {
	position: relative;
	overflow: hidden;
	color: #fff;
	margin:0 3px;	
}


.gotoright:after,
.gotoright:before,
.gotoright figcaption:after,
.gotoright figcaption:before {
	background: #837c7c;
	width: 25%;
	position: absolute;
	content: '';
	opacity: 0;
	-webkit-transition: all .3s steps(4);
	transition: all .3s steps(4);
	z-index: 1;
	top: 100%;
	bottom: 0
}

.gotoright:after {
	left: 25%;
	-webkit-transition-delay: .1s;
	transition-delay: .1s
}

.gotoright figcaption:before {
	left: 50%;
	-webkit-transition-delay: .2s;
	transition-delay: .2s;
	z-index: -1
}

.gotoright figcaption:after {
	left: 75%;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	z-index: -1
}

.gotoright figcaption {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 10px
}

.gotoright p {
	width: 100%;
	opacity: 0
}
.tlist {
	margin-left: 5px;
	cursor: pointer
}
#toc, .resetlist  {
	counter-reset: section5
}

.resetlist em {
	margin-left: 5px
}

.tlist em {
	font-size: 14px;
	font-style: normal;
		color:var(--font-color);
}
.resetlist em {
	font-size: 14px;
	margin-left: 5px
}

span:not(.resetlist)>.tlist em:before {
	counter-increment: section5;
	content: counter(section5) ". ";
}
.tlist2 em:before {
	content: "\2794";
	margin-right:3px;
	color:silver;
}
#toc>span:after {
	content: "";
	display: block;

}
.over2 {
	overflow:hidden;
}
.tt-share-entry-with-sns {
	display:none;
}

figure[data-ke-type='opengraph'] div.og-image {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 200px;
	border-right: 1px solid #d9d9d9;
	background-size: cover;
	background-position: center
}

figure[data-ke-type='opengraph'] a,
#tt-body-page figure[data-ke-type='opengraph'] a {
	position: relative;
	box-sizing: border-box;
	display: block;
	height: 200px;
	border: 1px solid #d9d9d9;
	color: #999;
	z-index: 1;
	overflow:hidden;
}

figure[data-ke-type='opengraph'] div.og-text {
	position: absolute;
	left: 201px;
	right: 0;
	top: 0;
	bottom: 0;
	box-sizing: border-box;
	padding: 33px 46px 0 39px
}

.wrap_btn_etc:hover .btn_post .ico_etc:before,.wrap_btn:hover .ico_statistics:before {
color:var(--hover-color);
}


/*footer*/
.footer-section1 {
	display:flex;
	justify-content: center;
	margin: 10px 0;
	padding:3px;
}
.footer-section1 a[target="_blank"] {
	font-weight:bold;
	margin-top:-1px;
}

#expand-toggle {
	display: none
}

#expand-btn {
	position: absolute;
	display: block;
	right: 5px;
	top: 0;
	cursor: pointer;
	font-size:25px;
	color:#000;
}

.darkmode #expand-btn {
	color:#fff;
}
#expand-btn:hover {
	color:var(--hover-color);
}
#expand-toggle:checked~#B_Box {
	display: none !important
}

#subtoggle .widget {
	box-shadow: unset;
}
.lazyload {
	opacity: 0;
	position: relative
}

.lazyloading {
	opacity: 1;
	transition: opacity 300ms;
	background: #f7f7f7 url(./images/swimloader.gif) no-repeat center
}

.lazyloaded {
	opacity: 1;
	transition: opacity 300ms
}

.no-js img.lazyload {
	display: none
}
.active2 {
	font-weight: bold
}


[id^=tistoryFootnote],
.txc-textbox {
	color: black
}
.myhome2 .listempty {
	display: none
}
.empty-header a {
	padding: 10px;
	background: #333;
	color:#fff;
	border-radius:10px;
}
.comment-text a,
.entry-content :not(div):not(li):not(figure)>a:not([id^=footnote]) {
	word-break: break-all;
	color: #3e5898;
	transition: color .25s ease-in;
	color: var(--link-color);
	background-repeat: no-repeat;
	background-size: 100% .2em;
	background-position: 0 100%;
	transition: all .25s ease-in;
	padding: 2px 0;	
	background-image: linear-gradient(to right, #00BCD4, #5C6BC0);
}

.comment-text a:hover,
.entry-content :not(div):not(li):not(figure)>a:hover {
	background-size: 100% 100%;
	color: #fff;
	border-radius: 10px
}

figure.imagegridblock img {
	width: 100%;
    height: auto;
}
a[href*='twitch.tv/'] {
	display:none;
}

.comment-text a[alt*=link]:after,
.entry-content :not(div):not(li):not(figure)>a[target="_blank"]:not(a[href*=facebook]):not(a[href*=instagram]):not(a[href*=youtube]):not(a[href*=youtu\.be]):not(a[href*=twitter]):not(a[href*=twitch]):not([id^=footnote]):not(a[href*=tv\.naver]):after {
	content: "\f14c";
	margin-left:1px;
	margin-right:1px;
}

span[style*="color: #333333"] {
	color: unset !important
}
div[data-filename=null]:after{
	display:none;
}

img[src*="new_ico_"] {
    padding-left: 0;
    margin-left: 6px;
    width: 10px;
    height: 10px;
    margin: auto 0;
}
.widget-inner .c_cnt {
    text-indent: 0;
    margin-left: 2px;
    align-self: center;
}
.dvd {
	float: right;
	cursor: pointer
}

.dvd:hover {
	color: var(--hover-color)
}

.dvd:before {
	content: '\e815';
	margin-right:3px;
}

.related-articles .dvd:before {
	content: '\e817';
}
.rp_admin p,
.guest_admin p {
	color: #000;
}

		li span.swimBlock {
		color:#fff!important;
	}
span[style*=\#000000] {
  color:var(--font-color)!important;
}
	a[style*=\#000000] {
		color:#3e5898!important;
  color:var(--link-color)!important;
}
pre code .string {
	color: #A1E46D;
}

pre code .special {
	color: #fe7f9c;
}

pre code .special-js {
	color: #6DE4D1;
}

pre code .special-js-glob {
	color: #A1E46D;
	font-weight: bold
}

pre code .special-comment {
	color: #aaa;
}

pre code .special-js-meth {
	color: #E46D8A;
}

pre code .special-html {
	color: #E4D95F;
}

pre code .special-sql {
	color: #1D968C;
}

pre code .special-php {
	color: #597EA7;
}

p[data-ke-size=size18] {
	font-size: 18px;
}



p[data-ke-size=size14] {
	font-size: 14px;
}

.entry-content :not(div):not(li):not(figure)>a:not([id^=footnote])[href*=facebook],
.entry-content :not(div):not(li):not(figure)>a:not([id^=footnote])[href*=twitter],
.entry-content :not(div):not(li):not(figure)>a:not([id^=footnote])[href*=instagram] {
	background-image: unset !important;
	display: flex;
	justify-content: center
}

pre code {
	color: #fff;
	word-break: break-all;
	width: 100%;
	padding: 7px;
	line-height: 43px;
	overflow-x: auto;
	position: relative
}

.precopy {
	z-index: 6;
	position: absolute;
	top: -30px;
	right: 0;
	background: #000;
	color: #fff;
	cursor: pointer
}

.precopy:hover {
	background: var(--hover-color)
}


pre:before {
		z-index: 5;
	top: -30px;
	position: absolute;
	content: '　\f1c9　'attr(data-ke-language);
	background: #000;
	height: 30px;
	color: #fff;
	width: 100%
}

pre {	
	position: relative;
	min-height: 56px;
	color: #fff;
	display: flex;
	display: -webkit-flex;
	display: -ms-flexbox;
	width: 100%;
	background: #272822;
 font-family:  fontello,'SpoqHanSans', Arial, "NanumBarunGothic", sans-serif;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	    margin: 50px 0 20px 0;
}

.adwrap5 {
	background: #000;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	margin: -20px 0 30px 0;
}

.adwrap5 a {
	color: #fff
}


ul[data-ke-list-type='disc'],
ul[data-ke-list-type='square'],
ol[data-ke-list-type='decimal'],
ul[data-ke-list-type='circle'] {
	margin: 20px 0
}



.category {
	display: inline-block;
	padding: 7px;
	border-radius: 10px;
	background: var(--black-color);
	line-height: 14px;
	word-break: break-all;
	white-space: nowrap;
  overflow: hidden;
	margin-bottom:-7px;
}
.category2{
	overflow:hidden;
	max-width:170px;
	display:inline-block;
	height:20px;
	margin-bottom:-4px;
	line-height:20px;
}

.gjj2 {
	position: fixed;
	top: 60px;
		width:360px;
}
kbd {
    color: crimson;
    border: 1px solid crimson;
    background: #fff;
	    padding: 4px;
    font-size: 80%;
    border-radius: 4px;
    margin: 0 2px;
}
.entry-content blockquote {
    display: block;
    padding: 15px 20px 35px 45px;
    position: relative;
    text-align: justify;
    -webkit-box-shadow: 2px 2px 15px #ccc;
    box-shadow: 2px 2px 15px #ccc;
}
.entry-content blockquote::before {
    content: "\201C";
    font-size: 60px;
    font-weight: bold;
    color: #999;
    position: absolute;
    left: 10px;
    top: 5px;
}
blockquote[data-ke-style="style2"] {
    border-left: 15px solid #c76c0c;
    border-right: 2px solid #c76c0c;
}
blockquote[data-ke-style="style3"] {
    border-left: 15px solid gold;
    border-right: 2px solid gold;
}

ul[data-ke-list-type='disc'] li, ul[data-ke-list-type='square'] li, ol[data-ke-list-type='decimal'] li, ul[data-ke-list-type='circle'] li {
    line-height: 2.5;
}
ul[data-ke-list-type='disc'] li:before {
    content: "\e814";
    margin-right: 5px;
}
ul[data-ke-list-type='circle'] li:before {
    content: "\e812";
}
ul[data-ke-list-type='disc'] li:before, ul[data-ke-list-type='square'] li:before, ol[data-ke-list-type='decimal'] li:before, ul[data-ke-list-type='circle'] li:before {
    margin-right: 5px;
}
ol[data-ke-list-type='decimal'] {
    counter-reset: decimalSection;
}
ol[data-ke-list-type='decimal'] li:before {
    counter-increment: decimalSection;
    content: counter(decimalSection);
    border-radius: 50%;
    padding: 3px;
    width: 15px;
    height: 15px;
    display: inline-block;
    text-align: center;
    line-height: 15px;
    border: 2px solid silver;
}
.underline {
	  background-image: linear-gradient(to left, rgba(168,237,234,0.8) 0%, rgba(254,214,227,0.8) 100%);
    background-repeat: no-repeat;
    background-position: left 0 bottom -1px;
    background-size: 100% 30%;
}
small {
    text-shadow: 0px 1px 0px #dadada, 0px 1px 0px #dadada;
}
span.swimBlock {
    box-shadow: 0 5px 25px -10px rgb(0 0 0 / 40%);
    border-radius: 30px;
    background: #2c3147;
    padding: 5px 10px;
    color: #fff;
}
mark {
	    background: #bfff00;
    border-radius: 2px;
    margin: 0 2px;
    color: #888;
}
.layer_post {
    display: none;
    position: absolute;
    z-index: 1000;
    padding: 9px 0;
    border-radius: 1px;
    background: #fff;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 10%), 0 2px 5px rgb(0 0 0 / 10%);
    white-space: nowrap;
    color: #000;
}
.grim {
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    box-shadow: 0 2px 7px 0 rgb(0 0 0 / 40%);
    text-align: center;
    padding: 20px;
}

.grim:before {
  transform:translateY(-20px);
	    content: "";
    display: block;
    width: 100%;
    height: 8px;
    background: linear-gradient(to right, silver, pink, silver);
}
.darkmode .grim {
		box-shadow: 0 2px 7px 0 rgba(255 255 255 / 40%);
}

.tt_article_useless_p_margin pre:first-child,.tt_article_useless_p_margin p:first-child{
		will-change: transform;
	transform: translateZ(0);
}
.entry-content table {
	width: 100%;
	overflow: auto;
	background: #323045;
	color: #fff;
	border-radius: 5px
}
.entry-content tbody {
	width: calc(100% - 1px);
	display: table
}

.entry-content td,
.entry-content th {
	padding-bottom: 2%;
	padding-top: 2%;
	padding-left: 2%;
	text-align: left
}

.entry-content tr:nth-of-type(2n+1) {
background: #47455d;
    color: #fff;
}

.entry-content tr:nth-of-type(1) {
    color: #2196f3;
    background: #1F2739;
}

.entry-content tr:first-child>td:first-child {
	color: #2196f3;
}

.entry-content tr>td:first-child {
	color:#FE7F9C;
}



.entry-content th {
	background: silver;
	font-weight: bold
}

.entry-content tr:hover td {
	background: #4E5066;
	color: #fff;
	border-top: 1px solid #22262e
}

.entry-content tr:nth-child(odd):hover td {
	background: #4E5066
}
.entry-content img,.entry-content iframe,.entry-content video,.entry-content embed {
	  box-shadow: 0 0 3rem -2rem rgba(0 0 0 / 50%);
}

.darkmode .entry-content img,.darkmode .entry-content iframe,.darkmode .entry-content video,.darkmode .entry-content embed {
	  box-shadow: 0 0 3rem -2rem rgba(255 255 255 / 50%);
}

.tool:focus {
	outline: 0
}

.tool {
	cursor: help;
	position: relative;
	white-space: nowrap;
	font-size: 12px;
	color:crimson;
}

.tool::before,
.tool::after {
	left: 50%;
	opacity: 0;
	position: absolute;
	z-index: -100;
	text-align: left;
	white-space: normal
}

.tool:hover::before,
.tool:focus::before,
.tool:hover::after,
.tool:focus::after {
	opacity: 1;
	transform: scale(1) translateY(0);
	z-index: 100;
	font-size: 15px
}

.tool::before {
	border-style: solid;
	border-width: 1em .75em 0 .75em;
	border-color: #3e474f transparent transparent transparent;
	bottom: 110%;
	content: "";
	margin-left: -0.5em;
	transition: all .15s cubic-bezier(.84, -0.18, .31, 1.26), opacity .1s;
	transform: scale(.6) translateY(-90%)
}

.tool:hover::before,
.tool:focus::before {
	transition: all .1s cubic-bezier(.84, -0.18, .31, 1.26) .1s
}

.tool::after {
	background: #3e474f;
	border-radius: .25em;
	bottom: 170%;
	color: #edeff0;
	content: attr(data-tip);
	margin-left: -8.75em;
	padding: 1em;
	transition: all .15s cubic-bezier(.84, -0.18, .31, 1.26) .1s;
	transform: scale(.6) translateY(50%);
	width: 17.5em
}

hr[data-ke-style], #tt-body-page hr[data-ke-style] {
border: none;
    font-size: 0;
    line-height: 0;
    height: 20px;
    margin: 20px auto;
    background: url(https://t1.daumcdn.net/keditor/dist/0.4.0/image/divider-line.svg);
    background-size: 200px 200px;

}

hr[data-ke-style='style1'], #tt-body-page hr[data-ke-style='style1'] {
    background-position: 0 0;
    width: 64px;
    background-repeat: no-repeat;
}

hr[data-ke-style='style2'], #tt-body-page hr[data-ke-style='style2'] {
    background-position: 0 -20px;
    width: 64px;
    background-repeat: no-repeat;
}

hr[data-ke-style='style3'], #tt-body-page hr[data-ke-style='style3'] {
    background-position: 0 -40px;
    width: 64px;
    background-repeat: no-repeat;
}

hr[data-ke-style='style4'], #tt-body-page hr[data-ke-style='style4'] {
    background-position: 0 -60px;
    width: 2px;
    height: 60px;
    background-repeat: no-repeat;
}

hr[data-ke-style='style5'], #tt-body-page hr[data-ke-style='style5'] {
    background-position: 0 -120px;
}
hr[data-ke-style='style6'], #tt-body-page hr[data-ke-style='style6'] {
    background-position: 0 -140px;
}

hr[data-ke-style='style7'], #tt-body-page hr[data-ke-style='style7'] {
    background-position: 0 -160px;
    background-repeat: no-repeat;
    width: 200px;
}
hr[data-ke-style='style8'], #tt-body-page hr[data-ke-style='style8'] {
    background-position: 0 -180px;
    background-repeat: no-repeat;
    width: 200px;
}

.marginb .tool:after {
	bottom: 160%
}

.tool:hover::after,
.tool:focus::after {
	transition: all .15s cubic-bezier(.84, -0.18, .31, 1.26)
}

@media(max-width:768px) {
	.tool {
		position: unset
	}
	.taags a {
		margin:5px;
	}
	.tool::before {
		display: none
	}
	.tool::after {
		bottom: unset;
		height: 10em
	}
	.tool:hover::before,
	.tool:focus::before {
		margin-left: unset
	}
	.tool:hover::before,
	.tool:focus::before,
	.tool:hover::after,
	.tool:focus::after {
		opacity: .9
	}
		.totalimo {
		margin-top: unset
	}
}



#B_Box {
	position: fixed;
	width: 240px;
	height: 85px;
	background: #fff;
	background: var(--bg-color);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
	padding: 25px 10px 10px 10px;
	display: none;
	z-index: 16;
	right: 25px;
	bottom: 14%;
	animation: rightleft .5s 0s 1 ease-in-out forwards, leftright .5s 4s 1 ease-in-out forwards;
	overflow: hidden
}
.darkmode #B_Box {
	box-shadow: 0 1px 5px rgba(255,255,255,0.25), 0 0 50px rgba(255,255,255,0.1) inset;
}
#B_Box a {
	display:flex;
	align-items:center;
	height:100%;
}

@keyframes rightleft {
	0% {
		right: 5px
	}
	100% {
		right: 25px;
	}
}

@keyframes leftright {
	0% {
		opacity:1;
	}
	100% {
		opacity: 0
	}
}

#B_Box img {
	width: 120px;
	height: 80px;
	margin-right: 5px;
}

#B_Box span {
    margin-left: 10px;
    line-height: 1.8;
    overflow: hidden;
    height: 80px;
}
.gelatine {
	animation: gelatine 1s ease-in-out
}
.imo1,.imo2,.imo3,.imo4,.imo5,.imo6 {
	cursor:pointer;
}
.moreContent1-container {
	width: 100%;
}
.moreContent1 {
	display: block;
	margin: 15px auto;
	background: var(--black-color);
	padding: 10px;
	height: 40px;
	border-radius:10px;
}
.moreContent1:hover{
	color:var(--hover-color);
}

@keyframes gelatine {
	from,
	to {
		transform: scale(1, 1)
	}
	25% {
		transform: scale(0.95, 1.05)
	}
	50% {
		transform: scale(1.05, 0.95)
	}
	75% {
		transform: scale(0.98, 1.03)
	}
}
.comment-text img {
		max-width:100%;
	}
a[alt="newwindow"] {
	background-image:none!important;
}

.resvid {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	margin: 30px 0;
}

.resvid iframe,
.resvid video,
.resvid embed,
.resvid img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.sb2,
.sb3,
.sb4 {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: 2px 2px 15px #ccc;
	box-shadow: 2px 2px 15px #ccc;
	padding-left: 100px;
	padding-top: 10px;
	padding-bottom: 10px;
	background: #f2f0ed;
	width: 100%;
	min-height: 105px;
	position: relative;
	color: rgba(0, 0, 0, .63);
	display: block
}
.darkmode .sb2,.darkmode .sb3,.darkmode .sb4 {
	background:#aaa;
}

.sb4 {
	border-left: 15px solid red;
	border-right: 2px solid red
}

.sb4:after {
	content: "주의";
	position: absolute;
	color: #fff;
	font-size: 24px;
	z-index: 1;
top: 50%;
    transform: translateY(-50%);
	left: 30px;


	font-weight: bold;

}

.sb4:before,.sb3:before,.sb2:before{
		content: "";
	position: absolute;
	width: 58px;
	height: 60px;
	border: 0;
	border-radius: 50%;
		-webkit-animation: pulsee 1.3s infinite;
	-ms-animation: pulsee 1.3s infinite;
	top: 0;
	left: 20px;
	bottom: 0;
	margin: auto;
}

.sb4:before {
	background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(50%, #f00), color-stop(50%, #b71c1c));
	background: -webkit-linear-gradient(top left, #f00 50%, #b71c1c 50%);
	background: linear-gradient(to bottom right, #f00 50%, #b71c1c 50%);
	box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5);
	border: 5px solid #f30
}

.sb3 {
	border-left: 15px solid #ffa800;
	border-right: 2px solid #ffa800
}

.sb3:after {
	content: "참고";
	position: absolute;
	color: #f30;
	font-size: 26px;
	z-index: 1;
	top: 50%;
    transform: translateY(-50%);
	left: 30px;
}

.sb3:before {

	background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(50%, #ffa800), color-stop(50%, #ff9500));

	background: -webkit-linear-gradient(top left, #ffa800 50%, #ff9500 50%);
	background: linear-gradient(to bottom right, #ffa800 50%, #ff9500 50%);
	box-shadow: 0 0 0 0 rgba(255, 168, 0, 0.5);
	border: 5px solid #f30
}

.sb2 {
	border-left: 15px solid #000;
	border-right: 2px solid #000
}

.sb2:after {
	content: "TIP";
	position: absolute;
	color: gray;
	font-size: 32px;
	z-index: 1;
top: 50%;
    transform: translateY(-50%);
	left: 28px;

}

.sb2:before {
	background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(50%, #e0e0e0), color-stop(50%, #bdbdbd));

	background: -webkit-linear-gradient(top left, #e0e0e0 50%, #bdbdbd 50%);
	background: linear-gradient(to bottom right, #e0e0e0 50%, #bdbdbd 50%);
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
	border: 5px solid gray
}

@-webkit-keyframes pulsee {
	0% {
		transform: scale(0.9)
	}
	90% {
		transform: scale(1.1);
		box-shadow: 0 0 0 30px rgba(149, 45, 152, 0)
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(149, 45, 152, 0)
	}
}

@-ms-keyframes pulsee {
	0% {
		transform: scale(0.9)
	}
	90% {
		transform: scale(1.1);
		box-shadow: 0 0 0 30px rgba(149, 45, 152, 0)
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(149, 45, 152, 0)
	}
}

/*mobile*/
@media (min-width:1400px) {
	#subtoggle .grak .categorySubmenu {
		display:none;
	}
}
@media(max-width:1530px) {
	.cover-thumbnail-list-1 .jgjg,
	.cover-thumbnail-list-2 .jgjg {
		flex: 0 1 50%
	}
}


@media (max-width:790px) {
	#toc {
		width:70%;
	}
.related-articles a {
		flex: 0 0 calc(50% - 2px)
	}
	.swim-content {
		padding:0 10px;
	}
		.bread li:nth-child(2) {
	max-width: 120px
}
	.footer-section1 {
		font-size: 11px;
	}
		.prevv2,
	.nextt2 {
		font-size: 11px
	}
	.badge {
		margin-left: 15px
	}
}
@media(max-width:686px) {
	.navereu {
		display: none
	}
}

@media(max-width:597px) {
	.urlurl2 {
		display: none
	}
	.cover-thumbnail-list-1 .jgjg,
	.cover-thumbnail-list-2 .jgjg {
		flex: 0 1 100%
	}
}

@media(max-width:545px) {
	.Please {
		width: 140px
	}
		.Please {
		font-size:12px;
	}
	.underBlue,.underRed{
		font-size:14px;
	}
}


@media (max-width:514px) {
		.Please {
		display:none;
	}
}

@media(max-width:514px) {
	.Please {
		width: 100px
	}
}

@media(max-width:476px) {
	.Please {
		width: 70px
	}
	.s-title {
		overflow: hidden;
		zoom: .7;
		-moz-transform: scale(0.7);
		-moz-transform-origin: 0 0
	}
}



div[id^='reaction'] {
	width: 100px
}
@media (max-width: 410px){
#fullsns>div {
    transform: scale(0.8);
}
}
@media(max-width:373px) {
	div[id^='reaction'] {
		width: 50px
	}
	.container_postbtn .btn_post .ico_like {
		margin-top: 20px;
		margin-right: 5px
	}
	.container_postbtn .btn_post .txt_like {
		font-size: 20px;
		line-height: 9px
	}
	.s-title {
		zoom: .6;
		-moz-transform: scale(0.6)
	}
}

@media(max-width:324px) {
	.txt_state:before {
		display: none
	}
}


@media screen and (-ms-high-contrast:active),
	(-ms-high-contrast:none) {
		.talk-bubble .c-bubble,.talk-bubble--reply .c-bubble {
			background: rgba(240,240,240,1);
		}

#swim-nav {
	
	 display:-ms-grid;
	-ms-grid-columns: 50px 1fr 50px;	
	height:60px;
}

		.dividivi:nth-of-type(1) {
	-ms-grid-column: 1;
}
		.dividivi:nth-of-type(2) {
	-ms-grid-column-align: center;
	-ms-grid-column: 2;
}
		.dividivi:nth-of-type(3) {
-ms-grid-column: 3;
}

		
#swim-wrap {
  display:flex;
	flex-flow: row wrap;
	justify-content: center;
}
.swim-content {	
	flex: 0 1 750px;
	max-width:750px;
}

.swim-side {
	flex: 0 1 360px;
	display:flex;
	flex-flow:column wrap;
}
		figure.imageblock, #tt-body-page figure.imageblock {
			display:block;
		}
		
.entry-content p>span:not(.tool):not(.sb2):not(.sb3):not(.sb4):not(.swimBlock),.entry-content li>span,.entry-content p>span:not(.tool):not(.sb2):not(.sb3):not(.sb4)>span:not(.tool):not(.sb2):not(.sb3):not(.sb4):not(.swimBlock),a,#menu-expanded input,.widget-inner a,.search-list .excerpt,.long-cover .excerpt,.name,.timetime,.ccnt,.cover-thumbnail-list-2 .title,.tlist em,span[style*=\#000000] {
	 color:rgba(0,0,0,.6);
		}

.darkmode .entry-content p>span:not(.tool):not(.sb2):not(.sb3):not(.sb4):not(.swimBlock),.darkmode .entry-content li>span,.darkmode .entry-content p>span:not(.tool):not(.sb2):not(.sb3):not(.sb4)>span:not(.tool):not(.sb2):not(.sb3):not(.sb4):not(.swimBlock),.darkmode a,.darkmode #menu-expanded input,.darkmode .widget-inner a,.darkmode .search-list .excerpt,.darkmode .long-cover .excerpt, .darkmode .name,.darkmode .timetime,.darkmode .ccnt,.darkmode .cover-thumbnail-list-2 .title,.darkmode .tlist em,.darkmode span[style*=\#000000] {
	 color:rgba(255,255,255,.75);
		}		
		
		body,.taags a:after,#B_Box {
			background:rgba(255,255,255,1);
		}

		.darkmode body,.darkmode .taags a:after,.darkmode #B_Box,.darkmode .swim-footer {
			background:rgba(18,18,18,1);
		}
		.excerpt:after {
			background: linear-gradient(to right, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%);

		}
		.darkmode .excerpt:after {
			background: linear-gradient(to right, rgba(18, 18, 18, 0) 10%, rgba(18, 18, 18, 1) 100%);

		}
		#swim-nav {
			background:rgba(255,255,255,0.8);
		}

		.darkmode #swim-nav{
			background:rgba(18,18,18,0.8);
		}
		
		.entry-content h2,.entry-content h3,.search-list .title,.long-cover .title, #toc::before,.jgjg h2 {
			color:rgba(0,0,0,.89);
		}


.darkmode .entry-content h2,.darkmode .entry-content h3,.darkmode .search-list .title,.darkmode .long-cover .title, .darkmode #toc::before,.darkmode .jgjg h2 {
	   color:rgba(255,255,255,.89);
		}
		
.entry-tags .taags a,.bread,.urlurl,#tab_first:checked~label.tt1,#tab_second:checked~label.tt2,.boro,#toc::before,#dgdown,form[method*=post],.hmm5,.upanddown figcaption,.related-articles h2,#expand-btn,.category,.moreContent1 {
	 background:rgba(224,224,224,0.4);
		}

.tt1,
.tt2 {
border: 1px dashed rgba(224,224,224,0.4);
}




.darkmode .entry-tags .taags a,.darkmode .bread,.darkmode .urlurl,.darkmode #tab_first:checked~label.tt1,.darkmode #tab_second:checked~label.tt2,.darkmode .boro,.darkmode #toc::before,.darkmode #dgdown,.darkmode form[method*=post],.darkmode .hmm5,.darkmode .upanddown figcaption,.darkmode .related-articles h2,.darkmode #expand-btn,.darkmode .category,.darkmode .moreContent1 {
	background:#4E5066;
		}

.darkmode .tt1,.darkmode .tt2 {
border: 1px dashed #4E5066;
}
		
.darkmode .comment-text a,
.darkmode .entry-content :not(div):not(li):not(figure)>a:not([id^=footnote]), 
		.darkmode a[style*=\#000000] {
			color:#0099ff;
		}		
		
		
}
.shortthumb .centercenter{display:grid;display:-ms-grid;grid-template-columns:repeat(3,1fr);-ms-grid-columns:1fr 1fr 1fr;margin:15px 0}.shortthumb ins{grid-column:1/ 4;-ms-grid-column:3;-ms-grid-column-span:3}
/*이모티콘 대응*/
figure[data-ke-align=alignRight] {
	display: flex;
   justify-content: flex-end;
}
figure[data-ke-align=alignCenter] {
	display: flex;
   justify-content: center;
}
figure.fileblock {
	display:block;
}
figure[data-og-type] {
	display:block;
}
/*라이트박스 대응 */


.lheader span,
.lheader a {
	display: inline-block;
	padding: 8px;
	background: #fff;
	border-radius: 5px;
	margin: 0 5px;
	color: #000;
	cursor: pointer;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.lheader span:hover,
.lheader a:hover {
	background: #FE7F9C;
	background: var(--hover-color);
	color:var(--font-color);
}

.lightpre,
.lightnext {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: absolute;
	cursor: pointer;
	z-index: 17
}

.lightpre {
	top: 40%
}

.lightnext {
	top: 40%;
	right: 5px
}

.lightpre:hover:after,
.lightnext:hover:after {
	border-color: gold
}



#swimgl {
	display: none;
	flex-flow: column nowrap;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.9);
	position: fixed;
	z-index: 150;
	overflow: scroll
}

.lheader {
	display: block;
	color: #fff;
	flex: 0 1 100px;
	min-width: 300px;
	width: 100%;
	text-align: center;
	margin-top: 60px;
	padding-top: 20px;
	z-index: 2;
	background: rgba(0, 0, 0, 1)
}

.lcontent {
	display: flex;
	flex: 0 1 900px;
	min-width: 300px;
	width: 100%;
	background: rgba(255, 255, 255, 0.6);
	overflow: auto
}

.lcontent img {
	cursor: default;
	margin: auto;
	transform-origin: 0 0
}

.lfooter {
	position: relative;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	background: rgba(255, 255, 255, 0.6);
	align-items: flex-start;
	z-index: 2;
	height: 180px;
	margin-top: auto;
	overflow: scroll
}

.lfooter img:not(.current) {
	margin: 0;
	cursor: pointer;
	border: 1px dashed silver;
	display: inline-block
}

#swimgl:target {
	display: flex
}

.accordi {
	position: absolute;
	opacity: 0;
	z-index: -1
}

.tab-content p:hover {
	background: #FE7F9C;
	background: var(--hover-color)
}

.tab-content p {
	cursor: pointer;
	-webkit-user-select: none;

	-ms-user-select: none;
	user-select: none
}

.tabs5 {
	max-width: 140px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5)
}

.tab5 {
	width: 100%;
	color: #fff;
	overflow: hidden
}

.tab-label {
	display: flex;
	justify-content: space-between;
	padding: 10px;
	background: #2c3e50;
	font-weight: bold;
	cursor: pointer
}

.tab-label:hover {
	background: #1a252f
}

.tab-label::after {
	content: "❯";
	width: 1em;
	height: 1em;
	text-align: center;
	transition: all .35s
}

.tab-content {
	display: none;
	padding: 0 1em;
	color: #2c3e50;
	background: #fff
}

.tab-close {
	display: flex;
	justify-content: flex-end;
	padding: 1em;
	background: #2c3e50;
	cursor: pointer
}

.tab-close:hover {
	background: #1a252f
}

.accordi:checked+.tab-label {
	background: #1a252f
}

.accordi:checked+.tab-label::after {
	transform: rotate(90deg)
}

.accordi:checked~.tab-content {
	position: absolute;
	display: block;
	padding: 1em
}
.entry-content img {
	cursor: zoom-in;
	display: block;
	max-width: 100%;
	width: auto\9;
	height: auto;
	vertical-align: middle;	  
}

#comment-list img[data\-src*="001\.gif"],#comment-list img[data\-src*="002\.gif"],#comment-list img[data\-src*="003\.gif"],#comment-list img[data\-src*="004\.gif"],#comment-list img[data\-src*="005\.gif"],#comment-list img[data\-src*="006\.gif"] {
	width:300px;
	height:300px;
}
.hover15:after {
    white-space: pre;
    font-size: 12px;
    display: block;
    max-width: 100%;
    text-align: center;
    opacity: .6;
    margin: 15px 0;
}

.lightnext:after {
    content: '';
    display: inline-block;
    margin-left: -0.6em;
    width: 1.4em;
    height: 1.4em;
    border-top: .5em solid #FE7F9C;
    border-right: .5em solid #FE7F9C;
    -ms-transform: rotate(45deg);
    border-radius: 5px;
    -webkit-transform: rotate(
45deg
);
    transform: rotate(
45deg
);
    opacity: .7;
    z-index: 2;
}
.lightpre:after {
    content: '';
    display: inline-block;
    margin-left: .6em;
    width: 1.4em;
    height: 1.4em;
    border-top: .5em solid #FE7F9C;
    border-right: .5em solid #FE7F9C;
    -ms-transform: rotate(-135deg);
    border-radius: 5px;
    -webkit-transform: rotate(
-135deg
);
    transform: rotate(
-135deg
);
    opacity: .7;
    z-index: 2;
}
.current {
    border: 1px solid red;
    animation: flash 1.5s;
}


.myButton {
	box-shadow: 0px 10px 14px -7px #276873;
	background-color:#599bb3;
	border-radius:36px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:16px 36px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}
.myButton:hover {
	background-color:#408c99;
}
.myButton:active {
	position:relative;
	top:1px;
}