@charset "UTF-8";
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;outline:none}
fieldset,img{border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {vertical-align:middle}
input::-ms-clear {display:none}
button {border:0 none;background-color:transparent;cursor:pointer}


body,th,td,input,select,textarea,button {font-size:14px;line-height:1.5;font-family:'Noto Sans', sans-serif;color:#666} /* color값은 디자인가이드에 맞게사용 */
a {color:#333;text-decoration:none}
a:active, a:hover {text-decoration:underline}
a:active {background-color:transparent}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}

#tistorytoolbarid { display:none }
@font-face{
	font-family:'IropkeBatangM';
	src:url('./images/IropkeBatangM.eot');
	src:url('./images/IropkeBatangM.eot?#iefix') format('embedded-opentype'),
	url('./images/IropkeBatangM.woff') format('woff'),
	url('./images/IropkeBatangM.ttf') format('truetype');
	src:local(※), url('./images/IropkeBatangM.woff') format('woff');
}

@import url('https://fonts.googleapis.com/css2?family=Poor+Story&display=swap');

.tt_category *, .blog_title > a, .tit_related,
.list_description, .title a{
		font-family: 'Poor Story', cursive !important;
}

a{
	overflow:hidden;
	word-break:break-all;
}
a:hover{
	text-decoration: none;
}

.inline_block {
	display: inline-block !important;
}

.inline {
	display : inline !important;
}

img {
	border-radius: 20px;
}

html {
	height:100%; 
	overflow:hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
	
	-webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.1);
}


body {
	
	width:90%;
	
	height: 93%;
	max-height: 93%;

	margin-left: 5%;
	margin-right: 5%;

	background:rgba(255,255,255,0); 

}


header {
	max-width:650px;
	width:90%;
	height: 12%;
	margin:auto;
}

header h2 a:hover {
	text-decoration:none;
}

.blog_title {
	position:relative;
}

.title {
	height:100%;
	display:inline-block;
}

.title div {
	vertical-align:bottom;
	height:100%;
}

.category-left a, .category-right a{
	font-weight:600;
	text-decoration:none;
	color:#666;
	vertical-align:bottom;
}

.container {
	margin: auto !important;
	height: 95%;
	padding: 10px 15px;
	overflow-y:scroll;
}

.main_menu {
	max-width:1600px;
	width:90%;
	max-height:100%; 
	height: 100%;
	padding: 0% 2%;
	margin-left:auto;
	margin-right:auto;
	background-color:rgba(255,255,255,0);
	border-radius:15px 5px 5px 15px;
	
/*	box-shadow: 3px 3px 9px 0.9px rgba(0,0,0,0.2);*/
}


.article-div {
	max-width:900px;
	margin:auto;
	padding: 5%;
}


.article_title {
	display: none;
}


.article {
	padding:7%;
	background-color:rgba(255,255,255,0.85);
	border-radius:15px;
	
	max-width:700px;
	margin:auto;
}

.article_title {
	padding: 5px;
}

.titleWrap {
	width:100%;
	margin:auto;
	padding : 0px 3%;
}
.titleWrap .admin {
	padding: 1% 0px 0px 3%;
}

/* 비밀글 */
.entryProtected {
	text-align:center;
}

.entryProtected h2 {
	
}

.entryProtected p{
	padding:10px;
}

.entryProtected .submit {
	background-color:rgba(255, 227, 150,0.3) !important;
		border-radius:5px !important;
		border-width:0px !important;
	padding:5px;
	font-size:10px;
}

.entryProtected input[type="password"] {
	border-top:0px;
	border-left:0px;
	border-right:0px;
	border-bottom: 1px dotted;
	width:65px;
	
	font-size:12px;
}

.area_related {
	padding : 30px;
	text-align:center;
}

.area_related a {
	color:#888;
}

/* 페이징 css */

.paging-div {
	width:200px;
	margin:auto;
}

.paging {
	font-size:12px;
	padding : 2%;
	text-align:center;
}
.paging span {
	color:#666;
}



/* 유튜브 반응형 */
.resvid {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.resvid iframe {
  position: absolute;
  width: 100%;
  height: 100%;
	border-radius:10px;
}

.resvid.alt {
  width: 35%;
  padding-bottom: 62.22%
}

.resvid.square {
  width: 70%;
  padding-bottom: 70%
}

.resvid.old {
  width:80%;
  padding-bottom:60%
}

@media screen and (max-width:1000px) {
  .resvid.alt {
    width: 50%;
    padding-bottom: 88.89%
  }
  
  .resvid.old {
    padding-bottom:75%
  }
}

@media screen and (max-width:600px) {
  .resvid.alt {
    width: 100%;
    padding-bottom: 177.78%
  }

  .resvid.square {
    width: 100%;
    padding-bottom: 100%
  }
}
/* 유튜브 반응형 여기까지*/


@media only screen and (min-width:739px){
	.container {
		width:100%;
	}
	
	.main_menu {
		float:none;
	}

}


@media only screen and (max-width:738px){
	
	header{
		height:70px;
	}
	
	html{
		overflow:hidden !important;
	}

	header {
		width:100%;
	}

	
	body {
		width:98% ;
		margin-left: 1%;
		margin-right: 1%;
		
		border-radius: 20px 20px 0px 0px;
	}
	
	.container {
		padding: 0px !important;

	}
	.main_menu {
		width:100% !important;
		max-width:100% !important;
	}

	.article {
	padding: 3% !important;
	}	
}



.main_menu{
    animation: fadein 2000ms ease-out;
    -moz-animation: fadein 2000ms ease-out; /* Firefox */
    -webkit-animation: fadein 2000ms ease-out; /* Safari and  Chrome */
    -o-animation: fadein 2000ms ease-out; /* Opera */
}
@keyframes fadein {
    from {opacity:0;}
    to {opacity:1;}
}
@-moz-keyframes fadein { /* Firefox */
    from {opacity:0;}
    to {opacity:1;}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {opacity:0;}
    to {opacity:1;}
}
@-o-keyframes fadein { /* Opera */
    from {opacity:0;}
    to {opacity: 1;}
}



/* 공유 등 안보이게 */
.container_postbtn{
	display: none;
}