@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

body, header, nav, aside, section, article, ul, li, h1, h2, h3, h4, img, dd, dt, dl {margin:0;padding:0}
ul {list-style:none}
a {color:#000;text-decoration:none}
img {border:0}

body {font-family:"나눔고딕", NanumGothic, Nanum Gothic, "맑은 고딕", Malgun Gothic, dotum, sans-serif;color:#222;/*background:#fb0;*/}

/* layout */
header {background:#09c;height:25px;-webkit-transition:height 0.2s ease;transition:height 0.2s ease;position:fixed;width:100%;z-index:999}
section.wrap {width:1050px;padding:25px 60px 0 0;overflow:hidden;/*background:#fff;*/}
section.content {width:700px;position:relative;margin:30px auto 40px;float:right}
aside.article {width:250px;border-right:5px solid #e1e1e1;padding:5px 20px 15px 20px;background:#555;position:absolute;left:-350px;top:0px;color:#fff;}
aside.sidebar {margin:232px 25px 0 0;width:200px;padding:0 46px 30px;float:left;border-right:1px solid #ddd}
footer {clear:both;border-top:2px solid #bbb;padding:15px 0 30px;margin:30px 0 0;width:100%;overflow:hidden}

/* header */
header .head {position:absolute;width:350px}
header .head strong {position:absolute;top:8px;right:55px}
header .head strong a {color:#09c;font-size:10px}
header .head span {position:absolute;top:9px;right:55px;font-size:10px;color:#fff}
nav {font-size:14px;font-weight:bold;margin-left:350px;width:700px}
nav ul.nav {width:100%;overflow:hidden}
nav ul.nav li {float:left;margin:3px 50px 0 0}
nav ul.nav li a {color:#09c}
header.scroll,
header:hover {height:40px}
header.scroll .head strong a,
header:hover .head strong a {color:#fff;font-size:20px}
header.scroll .head span,
header:hover .head span {color:#09c;z-index:-1}
header.scroll nav ul.nav li,
header:hover nav ul.nav li {float:left;margin:12px 50px 0 0}
header.scroll nav ul.nav li a,
header:hover nav ul.nav li a {color:#fff}

/* article */
.content h1 {font-size:35px;line-height:35px;letter-spacing:-3px;margin:0 0 20px}
.content article {font-size:18px;line-height:34px;text-align:justify}
.content article a {border-bottom:3px solid #333;padding-bottom:3px}
.content article a:hover {border-color:#fb0;color:#111}
.content article a img {border:0}

/* aside.article */
aside.article {text-align:right;color:#eee;font-size:14px;line-height:22px}
aside.article .thumb {width:100px;height:100px;border-radius:50px;overflow:hidden;margin:0 0 10px 150px}
aside.article .thumb img {opacity:0.85;width:auto;height:auto}
aside.article:hover .thumb img {opacity:1}
aside.article span {display:block}
aside.article .tag {margin:20px 0 0;font-size:12px;line-height:16px}
aside.article .tag a {border:0;padding:3px;border-radius:3px;margin:1px;background:#fb0;white-space:nowrap;display:inline-block}

/* article .response */
.content .response {position:relative;min-height:332px}
.content .response .rsp {display:none}
.content .response .tab {position:absolute;left:-188px;top:0px}
.content .response .tab li a {display:block;color:#09c;border:solid #e1e1e1;border-width:0 1px 1px 0;background:#fff;width:110px;padding:5px 10px;min-height:100px;cursor:pointer;text-align:center;-webkit-transition:background 0.3s ease;transition:background 0.3s ease}
.content .response .tab li a:hover,
.content .response .tab li.current a {width:108px;background:#555;color:#fff;border-right:5px solid #e1e1e1}
.content .response .tab li a:hover {background:#fb0}
.content .response .tab li:last-child a {border-width:0 1px 0 0} 
.content .response .tab li.current:last-child a,
.content .response .tab li:last-child a:hover {border-width:0 5px 0 0}
.content .response .tab .cnt {font-size:66px}
.content .response .tab.min {left:-58px}
.content .response .tab.min li a {border-width:0 0 1px 1px;width:30px;font-size:11px;word-break:break-all}
.content .response .tab.min li a:hover,
.content .response .tab.min li.current a {width:28px;border-left:5px solid #e1e1e1;position:relative;left:-2px}
.content .response .tab.min li:last-child a {border-width:0 0 0 1px} 
.content .response .tab.min li.current:last-child a,
.content .response .tab.min li:last-child a:hover {border-width:0 0 0 5px}
.content .response .tab.min .cnt {font-size:32px;letter-spacing:-1px}

.content .comment .write li {margin:0 0 2px}
.content .comment .write input {border:1px solid #bbb;padding:10px;width:205px;border-radius:5px}
.content .comment .write input[type=password] {margin:0 5px}
.content .comment .write input.iCheck {width:auto;border:0} 
.content .comment .write label {font-size:12px}
.content .comment .write textarea {margin:2px 0 0;border:1px solid #bbb;padding:10px;border-radius:5px;width:677px;height:60px}
.content .comment .write button {width:200px;border:0;background:#999;margin-left:297px;padding:10px 0;color:#fff;font-size:14px;border-radius:5px;cursor:pointer;-webkit-transition:background 0.3s ease;transition:background 0.3s ease}
.content .comment .write button:hover {background:#09c}
.content .comment .list {margin:15px 0 0;width:100%;overflow:hidden}
.content .comment .list .name {color:#366ca3}
.content .comment .list .rp_admin .name {color:#36a34b}
.content .comment .list .date {color:#555;font-size:11px;padding:0 3px;float:right}
.content .comment .list .util {text-align:right}
.content .comment .list .util a {padding:0 5px}
.content .comment .list p {line-height:20px}
.content .comment .list .rp_secret p {color:#f30}
.content .comment .list li {padding:20px 20px 10px;background:#eee;border-radius:5px;margin:0 0 20px}
.content .comment .list li ul {margin:15px 0 0}
.content .comment .list li ul li {background:#fff;border:1px solid #ddd}

.content .response .trackback {margin:0 0 25px}
.content .response .trackback .list {list-style-type:square;margin:0 0 0 20px}
.content .response .trackback p.tit img {border:0}
.content .response .trackback p.tit {font-style:italic;font-size:14px;color:#555}

/* list */
.content .list {margin:30px 0 0;font-size:13px}
.content .list li {margin:0 0 10px}
.content .list .date {font-size:11px;color:#333;padding:0 10px 0 0}
.content .list .cnt {font-size:11px}
.content .cnt {color:#fb0}

/* aside.sidebar */
aside.sidebar {color:#444;;font-size:12px}
aside.sidebar h3 {margin:30px 0 10px;font-size:12px;color:#444;text-align:center;font-style:italic;font-family:helvetica;background:#ddd;padding:3px 0;position:relative}
aside.sidebar h3:after {border-top:1px solid #ddd;width:291px;content:"";position:absolute;top:10px;left:-44px;z-index:-1}
aside.sidebar a {color:#444;}
aside.sidebar .recent ul {}
aside.sidebar .recent ul li {padding:8px 0;overflow:hidden;text-overflow:hidden;white-space:nowrap}
aside.sidebar #category ul {}
aside.sidebar #category ul li {padding:8px 10px}
aside.sidebar #category ul li ul li {padding:8px 0}
aside.sidebar #category ul li ul li ul li {border-left:2px solid #ddd;padding:8px 10px;margin:0 0 0 5px}
aside.sidebar #category ul:hover li ul li ul li {border-color:#ccc} 

/* footer */
footer .copyright {color:#aaa;letter-spacing:0;float:left;padding-left:50px}
footer .copyright a {color:#09c;font-weight:bold}
footer .copyright span {display:block;padding:5px 0;font-size:11px}
footer .paging {float:left;margin-left:100px}
footer .paging a {color:#444;padding:0 5px}
footer .paging a.num span {border:1px solid #aaa;padding:0 5px}
footer .paging a.num span.selected {color:#09c;border-color:#09c}
footer .paging a.num:hover span {color:#fb0;font-weight:bold;border-color:#fb0}

.gotop {width:20px;text-align:center;position:fixed;left:1080px;bottom:120px;font-size:12px;background:#fb0;border-radius:3px;line-height:10px;padding-bottom:3px;display:none}
.gotop a {color:#fff}