html { font-family: 'Spoqa Han Sans', 'Sans-serif'; }
::selection{color:white;background: #07f}
pre,code{margin:0;padding:0;}

a, p, h1, li, blockquote{font-size:1em; line-height:1.8; font-weight: 400;color:#222;letter-spacing: -0.5px;word-break: keep-all;word-spacing: 1px}
a{text-decoration: none;font-weight: 700;color:#333;}
a:hover{color:blue;}
hr{border:1px solid black;}
.bold{font-weight: 700}
/*-------공통설정 끝----*/

body{background: #DDD}
header{width:40em; margin:0 auto; margin-top: 6em; position: relative}
nav{width:6em; position:fixed; top:6em; left:50px;}
nav a{width:100%;display:block;}

#mobile-menu-wrap{position: fixed;right:0; top:0px;
width:44px; height:44px;z-index: 9999}

#mobile-menu{width:8em; background: blue; padding-left: 1em; display:none; position: absolute;top:0;right:-9em; padding-top:28px;
  transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
#mobile-menu ul{margin-bottom:0.5em;padding:0;}
#mobile-menu li{color:white; font-weight:400; }
#mobile-menu label{font-weight:700; }
#mobile-menu li:first-child a{font-weight:700; }
#mobile-menu li a{color:white; font-weight:400;}

#hiddenInput { display: none}
#menuLabel{width:44px; height:44px;position:absolute;z-index: 9999; right:1em; top:18px;display: none;}
.line{width:26px; height:2px; background:#444; position:absolute; right:9px;
  transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transform: rotate(0);
}
#topLine{margin-top: 16px}
#bottomLine{margin-top:23px;}
#hiddenInput:checked + label #topLine{
-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);margin-top:21px;
background: white}    
#hiddenInput:checked + label #bottomLine{
-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);margin-top: 21px; background: white;}
#hiddenInput:checked ~ #mobile-menu{right:0em;}

.hidden{ display: none; }
.dropdown{width:100%;height:100%;user-select:none;}
.item{height:40px;display: none;line-height: 40px;padding-left: 1em;}
.hidden:checked ~ .item{ display:block;  }

header h1{ text-align:left; font-weight:100; font-size: 2em; letter-spacing: -2px;color:#555; line-height: 1.4; padding-right: 5em;}

main {width:40em; margin:0 auto; margin-top: 3em;}
article{width:100%;}
article h2{font-weight:700;color:#333;padding-top: 1em;line-height: 1.4;}
article p{margin-bottom: 1em; margin-right:5em;}
article img{width:100%;}
article figure{margin-bottom: 4em;margin-top: 2em;}
article figcaption{font-size: 0.9em; line-height: 1.5;}
article table{width:100%;}
article table tr{height: 2em;}
article ol, ul{margin-bottom: 1.5em;}
article li{margin-bottom: 0.5em; list-style: circle; list-style-position: inside;}
article ol li{list-style:decimal;list-style-position: inside}
article ul.no-bullet li{list-style-type: none;clear:both;}
article blockquote{width:80%;font-weight: 700;color:blue; padding-left: 2em;margin-bottom: 1em;}
.member-button{display:block;float:left;width:4em;height:2em;background: #444;text-align: center;color:white;font-weight: 300;font-size:0.9em;line-height: 2em;margin-bottom: 0.7em;border-top-left-radius: 3px;border-bottom-left-radius: 3px;}
.member-button-blog{margin-right:1em;display:block;float:left;width:9em;height:2em;background: #2db400;text-align: left;padding-left:1em;color:white;font-weight: 300;font-size:0.9em;line-height: 2em;margin-bottom: 0.7em;border-top-right-radius: 3px; border-bottom-right-radius: 3px}
.member-button:hover{color:#222;background: #2db400;}
.member-button-blog:hover{color:white;background: #444;}
footer{width:40em;margin:0 auto;text-align:left;height:8em;line-height: 4em;margin-top: 6em;}

strong{font-weight: 700; border-bottom: 2px solid black}

/* Mobile */
@media all
  and (max-width: 600px){

  	header{width:calc(100% - 2em);margin:1em 1em;}
  	header h1{padding-bottom:0;padding-right: 2em}
  	nav{display:none;}
    #mobile-menu{display: block;}
    #menuLabel{display: block;}
  	nav a{float:left;width:25%;font-size: 0.8em}
  	main{width:calc(100% - 2em);margin:1em 1em;float:left;}
  	article p{margin-right:0;}
  	article blockquote{width:calc(100%-2em);}
    iframe{width:100% !important; height:auto !important;}
    footer{width:calc(100% - 2em);margin:3em 1em;}
}

/* Tablet */
@media all and (min-width: 601px) and (max-width: 900px){
	header{clear:both;width:calc(100% - 6em); margin:1em 3em;}
	header h1{padding-bottom: 1em;padding-right: 3em;padding-top: 1em;}
	nav{position:static;left:inherit;top:inherit;width:calc(100% - 6em);margin:3em 3em;}
  nav a{float:left;width:25%;font-size: 0.8em;background: black;height:25px;z-index: 9999;color:#555;}
  nav a:hover{background: black}
	main{width:calc(100% - 6em); margin:1em 3em;}
	article p{margin-right:0;}
  article blockquote{width:calc(100%-2em);}
	footer{width:calc(100% - 6em); margin:3em 3em;}
}