/* Variables */
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

html { padding: 0 0 0 0; }

body { margin: 0; padding: 0; font-size: 14px; color: #333; -webkit-text-size-adjust: none; }

body, p, div, button, li, th, td, h1, h2, h3, h4, h5, h6, input { font-family: 'Apple SD Gothic Neo', 'NanumGothic', 'MalgulGothic', sans-serif; }

a { color: #b31e37; }

img { border: 0 none; }

@media all and (max-width: 640px) { html { padding-top: 0; }
  main { padding: 0; } }

/* attributes */
.blind { overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0; visibility: hidden; position: absolute; }


/* sprite image */
/* Headding */
h1.headding { margin: 0 5px 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 22px; color: #111; }

h1.headding > a { display: inline-block; color: #111; text-decoration: none; }

/* main */
main { display: block; padding: 0 0; }

/* header */
#header { position: relative; z-index: 9999; left: 0; right: 0; top: 0; }
#header > h1 { position: absolute; margin: 0; z-index: 2; left: 30px; top: 0; }
#header > h1 a {
	display: block; padding: 0; text-decoration: none;
	font-size: 0;
}
#header > h1 a {display: block;}
#header > h1 a img {display: block;}
#header .lnb { position: relative; background: #000; background: #222; }
#header .lnb ul { margin: 0; padding: 0; list-style: none; }

#header .lnb .dep1 { margin: 0 0 0 180px; }
#header .lnb .dep1:after { content: ''; display: block; clear: both; }
#header .lnb .dep1 > li { float: left; }
#header .lnb .dep1 > li .title {
	display: block; padding: 0 30px; height: 50px; line-height: 50px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #eee; font-size: 14px; font-weight: bold; text-decoration: none;
}
#header .lnb .dep1 > li > div { display: none; }
.no-touch #header .lnb .dep1 > li:hover > div, #header .lnb .dep1 > li.on > div { display: block; position: relative; }
.no-touch #header .lnb .dep1 > li:hover > strong, #header .lnb .dep1 > li.on > strong { color: #aaa; }
#header .lnb .dep1 > li.active .title { text-decoration: underline; }

#header .lnb .dep2, #header .lnb .dep3 {
	position: absolute; left: 0; top: 0; z-index: 1000;
	min-width: 150px; padding: 0 0 15px 0;
	background: #222;
}
#header .lnb .dep2 > li {position: relative;}
#header .lnb .dep2 > li > a, #header .lnb .dep3 > li > a {
	display: block; padding: 8px 30px 8px 30px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px; color: #fff; text-decoration: none; white-space: nowrap;
}
#header .lnb .dep2 > li:hover > a, #header .lnb .dep3 > li:hover > a { color: #aaa; }
#header .lnb .dep2 > li.active > a, #header .lnb .dep3 > li.active > a { color: #aaa; text-decoration: underline; }
#header .lnb .dep2 > li > div { display: none; }
.no-touch #header .lnb .dep2 > li:hover > div {
	display: block; position: absolute;
	right: 0; top: 1px;
}
#header .lnb .dep2 > li.on > div { display: block; position: relative; }
.no-touch #header .lnb .dep2 > li:hover > strong, #header .lnb .dep2 > li.on > strong,
.no-touch #header .lnb .dep3 > li:hover > strong, #header .lnb .dep3 > li.on > strong { color: #aaa; }
#header .lnb .dep2 > li.active .title,
#header .lnb .dep3 > li.active .title { text-decoration: underline; }
#header .lnb .dep3 {padding-top: 10px;}

#header .btns { position: absolute; right: 30px; top: 5px; margin: 0; height: 40px; white-space: nowrap; }
#header .btns button { margin: 0 0 0 12px; padding: 0; float: left; width: 40px; height: 40px; background-color: transparent; border: none; cursor: pointer; color: #fff; }
#header .btns .toggle { display: none; }
#header .btns .toggle i { font-size: 28px; }
#header .keyword-search {
	position: absolute;	right: 30px; top: 11px; width: 180px;
	margin: 0; padding: 0;
}
#header .keyword-search fieldset {margin: 0; padding: 0; border: none; position: relative;}
#header .keyword-search input {
	margin: 0; padding: 7px 40px 7px 15px; width: 100%;
	background: #555;
	border-radius: 15px; border: none;
	color: #eee; font-size: 13px;
	outline: 0;
}
#header .keyword-search button {
	position: absolute; right: 10px; top: 50%;
	border: none; margin: -12px 0 0; padding: 4px; background: transparent;
	cursor: pointer;
}
#header .keyword-search button i {
	text-indent: -9999px;
	color: #fff; font-size: 16px;
}

@media all and (max-width: 640px) {
	#header > h1 { left: 5px; }
	#header .lnb { padding-top: 50px; }
	#header .lnb .dep1 { display: none; margin: 0 0 0 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
	#header .lnb .dep1 > li { float: none; }
	#header .lnb .dep1 > li > strong { padding: 8px 15px 10px; height: auto; line-height: normal; }
	#header .lnb .dep1 > li > div { display: block; }
	#header .lnb .dep1 > li:hover > div { display: block; position: relative; }
	#header .lnb .dep1 > li:hover > strong { color: #eee; }
	#header .lnb .dep1 > li:first-child .title { border-top: none; }
	#header .lnb .dep1 > li .title {padding: 0 15px; border-top: 1px solid #333;}
	#header .lnb .dep2 { position: static; min-width: 0; background: none; padding-top: 10px; border-top: 1px solid #333; background: #111;}
	#header .lnb .dep2 > li { width: 50%; float: left; }
	#header .lnb .dep2 > li > a { padding-right: 5px; padding-left: 15px; }
	#header .lnb .dep2:after { content: ''; display: block; clear: both; }
	#header .lnb.on .dep1 { display: block; }
	#header .btns { right: 15px; }
	#header .btns .toggle { display: block; }

	#header .keyword-search {
		position: relative; top: 0; right: 0;
		display: none; width: auto;
		background: #111;
		padding: 8px 10px;
	}
	#header .keyword-search input {
		padding-top: 10px; padding-bottom: 10px;
		border-radius: 36px;
	}
	#header .keyword-search.on {display: block;}
	#header .keyword-search button {
		z-index: 10;
		top: 0; height: 100%; margin-top: 0; padding: 0 10px;
	}
}

/* container */
#container { position: relative; margin: 40px 0 0 0; }

@media all and (max-width: 640px) {
	#container { margin-top: 30px; padding: 0 5px; }
}

/* footer */
#footer { clear: both; padding: 50px 12px 0; }

#footer > p { margin: 0; padding: 0 0 15px 0; text-align: right; font-style: italic; font-size: 11px; color: #666; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

@media all and (max-width: 640px) { #footer > p { text-align: center; } }

/* index */
#Index { margin: 0 auto; }

@media all and (min-width: 320px) { #Index { max-width: 303px; } }
@media all and (min-width: 510px) { #Index { max-width: 501px; } }
@media all and (min-width: 640px) { #Index { max-width: 460px; } }
@media all and (min-width: 768px) { #Index { max-width: 690px; } }
@media all and (min-width: 1024px) { #Index { max-width: 920px; } }
@media all and (min-width: 1280px) { #Index { max-width: 1150px; } }
@media all and (min-width: 1460px) { #Index { max-width: 1380px; } }
@media all and (min-width: 1920px) { #Index { max-width: 1840px; } }
@media all and (min-width: 2350px) { #Index { max-width: 2310px; } }

@media all and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1000px), all and (min-resolution: 192dpi) and (min-width: 1000px), all and (min-resolution: 2dppx) and (min-width: 1000px) { #Index { max-width: 920px; } }

@media all and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1230px), all and (min-resolution: 192dpi) and (min-width: 1230px), all and (min-resolution: 2dppx) and (min-width: 1230px) { #Index { max-width: 1150px; } }

@-webkit-keyframes roty { from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); } }

@-moz-keyframes roty { from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); } }

@-ms-keyframes roty { from { -ms-transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); } }

@keyframes roty { from { transform: rotate(0deg); }
  to { transform: rotate(360deg); } }

.scroll > body { overflow-y: scroll; }


/* items */
#items { /* Retina display */ }
#items:after { content: ''; display: block; clear: both; }
#items .grid-sizer { width: 230px; height: 230px; }
#items .item { float: left; overflow: hidden; width: 230px; }
#items .item.wx2 { width: 460px; }
#items .item.hx2 { height: 460px; }
#items a { position: relative; display: block; padding: 5px; outline: none; }
#items a img { display: block; width: 100%; height: 100%; }
#items a:focus:after { content: ''; position: absolute; z-index: 2; left: 5px; right: 5px; top: 5px; bottom: 5px; border: 5px solid #b31e37; }
#items a .caption {
	position: absolute;	left: 5px; right: 5px; bottom: 5px;
	margin: 0; padding: 12px 10px 12px;
	background: #222; background: rgba(0,0,0,.5);
    font-size: 13px;
}
#items a .caption strong {
	display: block;
	color: #f1f1f1;
	white-space: nowrap; overflow: hidden;
	text-overflow: ellipsis; text-overflow: ellipsis;
}
#items .more { display: block; text-decoration: none; height: 230px; overflow: hidden; cursor: pointer; padding: 0; }
#items .more span { position: relative; height: 100%; display: block; padding: 5px; }
#items .more em { display: block; height: 100%; background: #b31e37; }
#items .more i { position: absolute; left: 50%; top: 50%; display: block; width: 40%; height: 40%; margin: -20% 0 0 -20%; text-indent: -9999px; -webkit-transition: .08s ease-out; }
#items .more i:before, #items .more i:after { content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; background: white; }
#items .more i:before { width: 4px; top: 0; margin-left: -2px; }
#items .more i:after { height: 4px; left: 0; margin-top: -2px; }
#items .more:focus:after { border-color: #111; }
#items .more.loading i { -webkit-animation: 2s roty infinite linear; -moz-animation: 2s roty infinite linear; -ms-animation: 2s roty infinite linear; animation: 2s roty infinite linear; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { #items .grid-sizer { width: 115px; height: 115px; }
  #items .item { width: 115px; height: 115px; }
  #items .item.wx2 { width: 230px; }
  #items .item.hx2 { height: 230px; }
  #items a { padding: 3px; }
  #items a:focus:after { left: 3px; right: 3px; top: 3px; bottom: 3px; }
  #items .more { height: 115px; }
  #items .more span { padding: 3px; } }

@media all and (max-width: 640px) {
	#items { margin: 0 3px; }
	#items .item { width: 99px; height: 99px; overflow: hidden; }
	#items .item.wx2 { width: 198px; }
	#items .item.hx2 { height: 198px; }
	#items .grid-sizer { width: 99px; height: 99px; }
	#items .more { height: 99px; }
	#items .more span { padding: 2px; }
	#items .more i { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
	#items a { padding: 2px; }
	#items a:focus:after { left: 2px; right: 2px; top: 2px; bottom: 2px; }
	#items a .caption {left: 2px; right: 2px; bottom: 2px;}
}

/* article */
#Article { max-width: 1200px; margin: 0 auto; background: white; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); }

#Article .headline { background-repeat: no-repeat; background-position: center top; background-size: auto; background-attachment: fixed; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { #Article .headline { background-attachment: inherit; background-size: cover; } }

@media all and (max-width: 640px) { #Article .headline { display: none; } }

#Article .hgroup { padding: 50px 50px 5px; }

#Article .hgroup .loc { margin: 0 0 15px; color: #999; font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align:center; }

#Article .hgroup .loc span { padding: 0 5px 0 0; }

#Article .hgroup .loc span:before { content: '-'; padding-right: 5px; }

#Article .hgroup .loc span:first-child:before { display: none; }

#Article .hgroup h1 { margin: 0 0 15px; font-size: 32px; color: #111; font-weight: normal; text-align:center; }

#Article .body { padding: 0 50px 50px 50px; font-size: 14px; line-height: 1.42857143; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; word-break: break-all; }

#Article .body img, #Article .body iframe { max-width: 100%; }

#Article .body h1, #Article .body h2, #Article .body h3, #Article .body h4, #Article .body h5, #Article .body h6 { margin-top: 20px; margin-bottom: 10px; font-family: inherit; font-weight: 500; line-height: 1.1; }

#Article .body h1, #Article .body h2, #Article .body h3 { font-weight: 600; }

#Article .body h1 { font-size: 36px; }

#Article .body h2 { font-size: 30px; }

#Article .body h3 { font-size: 24px; }

#Article .body h4 { font-size: 18px; }

#Article .body h5 { font-size: 14px; }

#Article .body h6 { font-size: 12px; }

#Article .body ul, #Article .body ol { margin: 15px 0; padding-left: 20px; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { #Article .body img { zoom: .5; } }

#Article .bbs a { color: #0d69c0; }

#Article .about section { margin: 30px 0; }

#Article .about section.first { margin-top: 0; }

#Article .about h1 { margin: 0; font-size: 20px; font-weight: normal; }

#Article .about ul { list-style: circle; margin: 10px 0 0; padding: 0 0 0 30px; }

#Article .about ul li { margin: 3px 0; font-size: 13px; }

#Article .nav-bottom { text-align: center; padding: 10px 50px 50px; }

#Article .nav-bottom button { display: inline-block; vertical-align: middle; margin: 0 2px; padding: 0; width: 50px; height: 50px; border: none; cursor: pointer; color: #fff; background: #b31e37; border-radius: 50px; transition: background .2s ease-out; }

#Article .nav-bottom button i, #Article .nav-bottom button em { vertical-align: middle; }

#Article .nav-bottom button i { font-size: 14px; line-height: 50px; }

#Article .nav-bottom button:hover { background: #333; }

#Article .nav-bottom button.likeArticle { min-width: 50px; width: auto; padding: 0 20px; background: #2a6ebb; }

#Article .nav-bottom button.likeArticle em { padding-left: 3px; font-style: normal; font-size: 14px; font-family: Helvetica, Arial, sans-serif; }

#Article .nav-bottom button.likeArticle.disabled { background: #333; cursor: default; }

#Article .nav-bottom button.likeArticle:hover { background: #333; }

#Article .nav-bottom button.prevView, #Article .nav-bottom button.nextView { display: none; }

#Article .facebook-comments {
	border-top: 1px solid #ddd;
	padding: 15px 30px 30px;
}

@media all and (max-width: 640px) { #Article .hgroup { padding: 30px 20px 5px; }
  #Article .hgroup h1 { font-size: 20px; }
  #Article .body { padding: 0 20px; }
  #Article .about {padding-bottom: 40px;}
  #Article .about h1 { font-size: 16px; }
  #Article .nav-bottom { margin-top: 30px; padding: 10px 20px 50px; }
  #Article .nav-bottom button.prevView, #Article .nav-bottom button.nextView { display: inline-block; background: transparent; color: #333; border-radius: 0; }
  #Article .nav-bottom button.disabled { color: #ccc; }
  }


/* view */
#View_bg { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 9000; background: #eee; display: none; }

#View { position: absolute; z-index: 9001; display: none; left: 0; right: 0; top: 0; padding: 0 25px; }

#View > #Article { margin-top: 90px; margin-bottom: 50px; }

@media all and (max-width: 640px) { #View { padding: 0 5px; } }

/* article page */
.articlePage #View_bg { display: block; z-index: -1; }

.articlePage #View { display: block; position: relative; }

.articlePage #View > #Article { margin-top: 0; margin-bottom: 0; }

@media all and (max-width: 640px) { .articlePage #View { padding: 0; } }

/* category list */
.categoryList { padding: 0 5px 5px; }

.categoryList nav button { display: none; margin: 0; padding: 12px 0; width: 100%; text-align: center; color: #fff; font-size: 14px; background: #888; border: none; cursor: pointer; }

.categoryList ul { margin: 0 -8px; padding: 0; list-style: none; }

.categoryList ul:after { content: ''; display: block; clear: both; }

.categoryList li { float: left; }

.categoryList a { display: block; padding: 4px 8px; font-size: 13px; color: #555; text-decoration: none; }

.categoryList a em { font-style: normal; }

.categoryList li.on a { color: #aaa; }

@media all and (max-width: 640px) { .categoryList nav button { display: block; }
  .categoryList nav button.on { background: #555; }
  .categoryList ul { display: none; margin: 1px 0 0 0; padding: 8px 0; background: #f2f2f2; }
  .categoryList ul.on { display: block; }
  .categoryList li { float: left; width: 50%; }
  .categoryList a { padding: 9px 10px 9px 15px; } }

/* view top bar */
#topNav { position: fixed; height: 50px; z-index: 10000; right: 0; top: 0; padding: 0; display: none; background: #000; background: #222; }
#topNav.on { display: block; }
.mini #topNav.on { display: none; }
#topNav button { position: relative; width: 50px; height: 100%; display: block; float: left; text-align: left; margin: 0; padding: 0; border: none; background-color: transparent; overflow: hidden; cursor: pointer; }
#topNav button i { position: absolute; display: block; width: 30px; height: 30px; left: 50%; top: 50%; margin: -15px 0 0 -15px; text-align: center; line-height: 28px; color: #fff; font-size: 14px; }
#topNav button.disabled { cursor: default; }
#topNav button.disabled i { color: #666; }


/* Contact */
.Contact {
    padding: 0 50px 50px 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px; line-height: 1.42857143; word-break: break-all;
}
.Contact fieldset { border: none; margin: 0; padding: 0; }
.Contact dl { margin: 0; display: table; width: 100%; border-bottom: 1px solid #ddd; }
.Contact dl.first {border-top: 1px solid #ddd;}
.Contact dl dt, .Contact dl dd {display: table-cell; vertical-align: middle; padding: 8px 5px;}
.Contact dl dt { width: 120px; font-size: 13px; color: #333; padding-left: 10px; font-weight: bold;}
.Contact dl dd { margin: 4px 0 0 0; }
.Contact dl dd p {
    margin: 5px 0 0;
    font-size: 13px; color: #666;
}
.Contact dl dd .pay-guide {
    margin: 8px 0 0; padding: 10px 10px 10px 30px;
    font-size: 12px;
    background: #f5f5f5;
    border: 1px solid #eee;
    border-radius: 4px;
    line-height: 1.6;
}
.Contact input[type='text'],
.Contact input[type='tel'],
.Contact input[type='email'],
.Contact input[type='number'],
.Contact textarea {
	margin: 0; padding: 8px 8px;
	font-size: 13px;
	border: 1px solid #bbb;
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
}
.Contact input.error, .Contact textarea.error {border-color: red;}
.Contact textarea { line-height: 1.48; }
.Contact textarea.block, .Contact input.block { width: 100%; }
.Contact select {
    padding: 8px; border: 1px solid #bbb;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
}
.Contact .error { display: block; margin: 3px 0 0 0; font-size: 12px; color: #ff0000; }
.Contact .guide {margin: 30px 0;}
.Contact .guide h1 {margin: 0; font-size: 16px; color: #333;}
.Contact .guide table {
    margin: 10px 0 0; width: 100%; border-collapse: collapse;
    font-size: 13px;
}
.Contact .guide table th, .Contact .guide table td {
    padding: 8px 5px;
    border: 1px solid #ddd;
    text-align: center;
}
.Contact .guide table thead th {background: #f1f1f1;}
.Contact .guide > p {font-size: 13px; color: #666;}
.Contact nav { margin: 40px 0 15px; text-align: center; }
.Contact nav button {
	margin: 0; padding: 14px 50px;
	border: none; border-radius: 3px;
	cursor: pointer; background: #0082c4;
	color: #fff; font-size: 14px; font-weight: bold;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
@media all and (max-width: 640px) {
    .Contact {padding: 0 20px 50px;}
    .Contact dl, .Contact dl dt, .Contact dl dd {
        display: block; padding: 0;
    }
    .Contact dl {padding: 8px 0;}
}