@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 1002px) and (min-width: 768px) {
/************************************************
	GNB
************************************************/
#util-nav, 	
#main-nav, 
#main-nav ul {width:748px;}
#main-nav ul li a {width:105px;}
#main-nav > div > ul > li:last-child > a {
	background:none;
	padding-left:0;
	width:105px;
	text-align:center;
}
#nav.hover {
	min-width:748px;
	background:url(../images/navsub-bg-768.png) repeat-y center bottom, url(../images/dropdown-bg.png) repeat left top;
}
#nav.hover #main-nav ul.sub-menu,
#nav.hover #main-nav ul.sub-menu li a {width:105px;}
#nav.hover #main-nav ul.sub-menu li:hover ul {
	left:0;
	width:105px;
}
/************************************************
	Header
************************************************/
#inner-wrapper,
#content {width:748px;}
body.error404 #content {background:none;}
/************************************************
	Content
************************************************/
#content-top {width:746px;}
#ticker {width:426px;}
ul.ticker-list {width:366px;}
ul.ticker-list li {width:348px;}
/************************************************
	Homepage
************************************************/
#main {width:400px;}
/************************************************
	Posts
************************************************/
#post-area,
.post-wrap {width:400px;}
.post-tags {
	width:90%;
	padding:0 0 20px 10%;
}
/************************************************
	Comments
************************************************/
#respond {width:358px;}
#respond p.comment-form-comment {width:278px;}
#respond textarea {width:261px;}
/************************************************
	Archives
************************************************/
ul.archive .main-headline, 
ul.archive .sub-headline,
.archive-text {width:295px;}
/************************************************
	Sidebar
************************************************/
#sidebar-wrapper {width:348px;}
.side {
	float:right;
	margin-right:1px;
	padding-bottom:30px;
	border-left:0;
}
/************************************************
	Footer
************************************************/
#footer-bottom {
	width:728px;
	padding:6px 10px;
}
#footer-bottom li {background-position:right 6px;}
#footer-nav1 ul li {
	margin:0 3px 2px 0;
	padding:3px 5px 0 0;
}
#copyright p i {display:block;}
/************************************************
	post area tab
************************************************/
.page-tab ul.tabs {width:399px;}
.page-tab ul.tabs li {width:130px;}
.page-tab ul.tabs li:first-child {width:136px;}
/************************************************
	article view
************************************************/
article.view-bbs div.header {
	width:378px;
	padding:10px;
}
#post-area article.view-bbs header h1 {
	width:100%;
	font-weight:600;
	font-size:12px;
	line-height:18px;
}
#post-area article.view-bbs.has-icon header h1 {width:378px;}
#post-area article.view-bbs header h1 em {
	font-size:12px;
	margin-right:10px;
}
article.view-bbs header h1 span {width:326px;}
article.view-bbs div.article-view {padding:30px 10px;}
article.view-bbs header > span {
	float:none;
	display:block;
	width:100%;
	text-align:right;
}
#post-area article.view-bbs > div p {
	width:100%;
	margin:0;
}
article.view-bbs > div.answer em {margin-left:10px;}
#post-area article.view-bbs > div.answer p {width:335px;}
.wp-caption, .gallery-caption {
	max-width:94%;
	padding:10px 3% 5px;
}
/************************************************
	page contents
************************************************/
ul.bu-info strong {width:30%;}
ul.bu-info div {width:60%;}
/*introduce*/
.overview div {
	float:none;
	width:398px;
	margin:0 0 20px 0;
}
#post-area .overview p {
	float:none;
	width:100%;
}
div.introduce > dl > dt,
div.introduce > dl > dd {
	float:none;
	width:100%;
	margin-bottom:10px;
}
div.introduce > dl > dt span {display:inline-block;}

/*button*/
.btn-group.page-line {
	position:static;
	height:auto;
	margin-top:20px;
}
.btn-group.page-line:after {content:'';display:block;clear:both;height:0px;visibility:hidden;}
.btn-group.page-line .fr,
.btn-group.page-line .fl {position:static;top:auto;}
.btn-group.page-line .fr {
	right:auto;
	float:right;
}
.btn-group.page-line .fl {
	left:auto;
	float:left;
}
#post-404 {width:75%;}
}

@media screen and (max-width: 782px) {
html #wpadminbar {
	height:32px;
	z-index:9999 !important;
}
#wpadminbar .quicklinks>ul>li>a, #wpadminbar .quicklinks .ab-empty-item {
	height:32px;
	line-height:32px;
}
#wpadminbar #wp-admin-bar-user-actions>li {line-height:18px;}
#wpadminbar .quicklinks .menupop ul li .ab-item, #wpadminbar .quicklinks .menupop ul li a strong, #wpadminbar .quicklinks .menupop.hover ul li .ab-item, #wpadminbar.nojs .quicklinks .menupop:hover ul li .ab-item, #wpadminbar .shortlink-input {line-height:18px;}
#wpadminbar #wp-admin-bar-user-info {margin-bottom:5px;}
#wpadminbar .ab-top-menu>.menupop>.ab-sub-wrapper .ab-item {padding-bottom:5px;}
}

@media screen and (max-width: 767px) and (min-width: 600px) {
/************************************************
	GNB
************************************************/
#util-nav, 	
#main-nav, 
#main-nav ul {width:580px;}
#main-nav ul li a {
	width:82px;height:40px;
	font-size:12px;
	line-height:40px;
}
#main-nav-wrapper {background-position:0 -10px;}
#main-nav,
#main-nav > div > ul {height:40px;}
#main-nav > div > ul > li:last-child > a {
	background:none;
	padding-left:0;
	width:81px;
	text-align:center;
}
#nav.hover {
	min-width:580px;height:215px;
	background:url(../images/navsub-bg-600.png) repeat-y center bottom, url(../images/dropdown-bg.png) repeat left top;
}
#nav.hover #main-nav ul.sub-menu {height:auto;}
#nav.hover #main-nav ul.sub-menu,
#nav.hover #main-nav ul.sub-menu li a {width:82px;}
#nav.hover #main-nav ul.sub-menu {top:40px;}
#nav.hover #main-nav ul.sub-menu li:hover ul {
	left:0;
	width:82px;
}
#util-nav div.link {display:none;}
#util-nav div#util-mobi {display:block;}
div#util-mobi select {
	height:24px;
	padding:0 5px !important;
}
/************************************************
	Header
************************************************/
#inner-wrapper,
#content {width:580px;background-image:none;}
/************************************************
	Content
************************************************/
#content-top {width:578px;}
.ticker-heading {display:none;}
#ticker,
ul.ticker-list {width:288px;}
ul.ticker-list li {width:270px;}
#content-social {width:290px;}
.fb-but, 
.twitter-but, 
.rss-but {width:29px;}
.fb-but {background-position:-5px 0;}
.fb-but:hover {background-position:-5px -37px;}
.twitter-but {background-position:-44px 0;}
.twitter-but:hover {background-position:-44px -37px;}
.rss-but {background-position:-83px 0;}
.rss-but:hover {background-position:-83px -37px;}
#searchform input {width:157px;}
/************************************************
	Homepage
************************************************/
#main {width:580px;}
/************************************************
	Posts
************************************************/
#post-area,
.post-wrap {width:580px;}
/************************************************
	Comments
************************************************/
#respond {width:538px;}
#respond p.comment-form-comment {width:458px;}
#respond textarea {width:441px;}
/************************************************
	Archives
************************************************/
ul.archive .main-headline, 
ul.archive .sub-headline,
.archive-text {width:475px;}
/************************************************
	Sidebar
************************************************/
#sidebar-wrapper {display:none;}
/************************************************
	Footer
************************************************/
#footer-bottom {
	width:580px;
	padding:10px 0;
}
#footer-nav1 {width:82%;}
#footer-nav1 ul li {
	font-size:11px;
	margin:0 3px 5px 0;
	padding:3px 4px 3px 0;
}
#footer-nav2,
#footer-nav2 ul {width:98px;}
#footer-nav2 a {padding:0 4px;}
#copyright {
	clear:both;
	background:none;
	padding:10px 0;
}
#copyright p {padding:0 0 5px 0;}
#copyright p i {display:block;}
/************************************************
	post area tab
************************************************/
.page-tab ul.tabs {width:579px;}
.page-tab ul.tabs li {width:190px;}
.page-tab ul.tabs li:first-child {width:196px;}
/************************************************
	article view
************************************************/
article.view-bbs div.header,
#post-area article.view-bbs.has-icon header h1 {width:538px;}
article.view-bbs header h1 span {width:476px;}
#post-area article.view-bbs > div p {
	width:473px;
	margin-right:27px;
}
/************************************************
	page contents
************************************************/
/*introduce*/
.overview div {
	width:240px;
	padding:20px 0;
}
#post-area .overview p {width:318px;}

/*button*/
.btn-group.page-line {
	position:static;
	height:auto;
	margin-top:20px;
}
.btn-group.page-line:after {content:'';display:block;clear:both;height:0px;visibility:hidden;}
.btn-group.page-line .fr,
.btn-group.page-line .fl {position:static;top:auto;}
.btn-group.page-line .fr {
	right:auto;
	float:right;
}
.btn-group.page-line .fl {
	left:auto;
	float:left;
}
#post-404 {width:100%;}
}
@media screen and (max-width: 599px) and (min-width: 480px) {	
body.admin-bar #nav {position:absolute !important;}
/************************************************
	GNB
************************************************/
#nav-mobi,
#util-nav {
	float:none;
	width:460px;height:35px;
	margin:0 auto;
	padding:0;
	overflow:hidden;
}
#util-nav a {padding:0 1px 0 3px;}
#util-nav div.link,
#main-nav {display:none;}
#util-mobi,
#nav-mobi {display:block;}
#nav-mobi {text-align:center;}
#nav-mobi select {
	width:460px;height:27px;
	margin:3px auto;
}
#util-mobi {float:left;}
#util-mobi select {
	height:22px;
	padding:0 5px !important;
}
#util-nav div.mymenu {
	float:right;
	margin-right:5px;
}
#main-nav-wrapper {background-position:0 0;}
/************************************************
	Header
************************************************/
#inner-wrapper,
#content {width:460px;background-image:none;}
/************************************************
	Content
************************************************/
#content-top {width:458px;}
#ticker {display:none;}
#content-social {width:458px;}
#content-social ul {float:none;}
#content-social ul li:first-child {border-left:0;}
#searchform input {width:300px;}
/************************************************
	Homepage
************************************************/
#main {width:460px;}
/************************************************
	Posts
************************************************/
#post-area,
.post-wrap {width:460px;}
.post-tags {
	width:90%;
	padding:0 0 20px 10%;
}
/************************************************
	Comments
************************************************/
#respond {width:418px;}
#respond p.comment-form-comment {width:338px;}
#respond textarea {width:323px;}
.comment-btn {
	float:none;
	margin-top:5px;
	text-align:right;
}
/************************************************
	Archives
************************************************/
ul.archive .main-headline, 
ul.archive .sub-headline,
.archive-text {width:355px;}

/************************************************
	Sidebar
************************************************/
#sidebar-wrapper {display:none;}
/************************************************
	Footer
************************************************/
#footer-bottom {
	width:460px;
	padding:10px 0;
}
#copyright {
	clear:both;
	background:none;
	padding:15px 0 10px;
}
#copyright p {padding:0 0 5px 0;}
#footer-nav1,
#footer-nav2 {display:none;}
div#footer-mobi,
div#util-mobi {display:block;}
div#util-mobi {float:right;}
div#footer-mobi select,
div#util-mobi select {
	height:22px;
	padding:0 5px !important;
}
#copyright p i {display:block;}
/************************************************
	post area tab
************************************************/
.page-tab ul.tabs {width:459px;}
.page-tab ul.tabs li {width:150px;}
.page-tab ul.tabs li:first-child {width:156px;}
/************************************************
	list
************************************************/
.list-top.two-column p,
.list-top.two-column .option {
	float:none;
	width:100%;
}
.list-top.two-column .option {margin-top:10px;}
/************************************************
	article view
************************************************/
article.view-bbs div.header,
#post-area article.view-bbs.has-icon header h1 {width:418px;}
article.view-bbs header h1 span {width:356px;}
#post-area article.view-bbs.has-icon header h1,
article.view-bbs header > span {
	float:none;
	width:100%;
}
article.view-bbs header > span {text-align:right;}
#post-area article.view-bbs > div p {
	width:365px;
	margin-right:17px;
}
.bbs-preview li strong {width:15%;}
.bbs-preview li a {width:85%;}
/************************************************
	page contents
************************************************/
ul.bu-info strong {width:30%;}
ul.bu-info div {width:60%;}
.sitemap section h2,
.sitemap section > ul {width:80%;}
/*introduce*/
.overview div {
	float:none;
	width:458px;
	margin:0 0 20px 0;
}
#post-area .overview p {
	float:none;
	width:100%;
}
div.introduce > dl > dt,
div.introduce > dl > dd {
	float:none;
	width:100%;
	margin-bottom:10px;
}
div.introduce > dl > dt span {display:inline-block;}
/************************************************
	popup
************************************************/
.layerPop h1.title {
	min-height:18px;
	font-size:16px;
	line-height:18px;
}
/************************************************
	fancybox
************************************************/
.fancybox-close {top:5px;right:10px;}

/*button*/
.btn-group.page-line {
	position:static;
	height:auto;
	margin-top:20px;
}
.btn-group.page-line:after {content:'';display:block;clear:both;height:0px;visibility:hidden;}
.btn-group.page-line .fr,
.btn-group.page-line .fl {position:static;top:auto;}
.btn-group.page-line .fr {
	right:auto;
	float:right;
}
.btn-group.page-line .fl {
	left:auto;
	float:left;
}
body.error404 #post-area {padding-bottom:50px;}
#post-404 {
	width:100%;
	background-size:80px auto;
	padding:60px 0;
}
#post-404 h1, #post-404 p, #post-404 .btn-group {
	max-width:370px;
	padding-left:90px;
}
#post-404 h1 {font-size:20px;}
}
@media screen and (max-width: 479px) {
body.admin-bar #nav {position:absolute !important;}
/************************************************
	GNB
************************************************/
#util-nav,
#nav-mobi {
	float:none;
	width:300px;height:35px;
	margin:0 auto;
	padding:0;
	overflow:hidden;
}
#util-nav div.link,
#util-nav div.mymenu,
#main-nav {display:none;}
#util-mobi,
#my-mobi,
#nav-mobi {display:block;}
#util-nav div#util-mobi {float:left;}
#util-nav div#my-mobi {float:right;}
div#util-mobi select,
div#my-mobi select {
	height:22px;
	padding:0 5px !important;
}
#nav-mobi select {
	width:300px;height:27px;
	margin:3px auto;
}
#main-nav-wrapper {background-position:0 0;}
/************************************************
	Header
************************************************/
#inner-wrapper,
#content {width:300px;background-image:none;}
/************************************************
	Content
************************************************/
#content-top {width:298px;}
#ticker {display:none;}
#content-social {width:298px;}
#content-social ul {float:none;}
#content-social ul li:first-child {border-left:0;}
#content-social {width:298px;}
.fb-but, 
.twitter-but, 
.rss-but {width:29px;}
.fb-but {background-position:-5px 0;}
.fb-but:hover {background-position:-5px -37px;}
.twitter-but {background-position:-44px 0;}
.twitter-but:hover {background-position:-44px -37px;}
.rss-but {background-position:-83px 0;}
.rss-but:hover {background-position:-83px -37px;}
#searchform input {width:166px;}
/************************************************
	Homepage
************************************************/
#main {width:300px;}
/************************************************
	Posts
************************************************/
#post-area,
.post-wrap {width:300px;}
#post-area h1.headline {
	font-weight:600;
	font-size:18px;
	line-height:22px;
}
.social-box {
	width:300px;
	overflow:hidden;
}
.wp-caption.alignleft,
.wp-caption.alignright {
	width:300px !important;
	float:none;
}
.wp-caption, .gallery-caption {
	max-width:94%;
	padding:10px 3% 5px;
}
.post-tags {
	width:88%;
	padding:0 0 20px 12%;
}
/************************************************
	Comments
************************************************/
#respond {
	width:278px;
	padding:10px 10px 8px;
}
#respond p.comment-form-comment {width:198px;}
#respond textarea {width:180px;}
.comment-btn {
	float:none;
	margin-top:5px;
	text-align:right;
}
/************************************************
	Archives
************************************************/
ul.archive .main-headline, 
ul.archive .sub-headline,
.archive-text {width:195px;}
ul.archive ul.headlines-info li {width:75% !important;}
ul.archive ul.headlines-info li.comments-icon {width:25% !important;}
/************************************************
	Sidebar
************************************************/
#sidebar-wrapper {display:none;}
/************************************************
	Footer
************************************************/
#footer-bottom-wrapper {background-position:left 40px;}
#footer-bottom {
	width:300px;
	padding:10px 0;
}
#copyright {
	clear:both;
	background:none;
	padding:10px 0;
}
#copyright p {padding:0 0 5px 0;}
#footer-nav1,
#footer-nav2 {display:none;}
div#footer-mobi select,
div#util-mobi select {
	width:100%;height:22px;
	padding:0 5px !important;
}
div#footer-mobi,
div#util-mobi {
	display:block;
	height:30px;
}
div#util-mobi {float:right;}

/************************************************
	post area tab
************************************************/
.page-tab ul.tabs {width:299px;}
.page-tab ul.tabs li {width:97px;}
.page-tab ul.tabs li:first-child {width:102px;}
.page-tab .tabs h4 a {font-size:12px;}
/************************************************
	list
************************************************/
.list-top.two-column p,
.list-top.two-column .option {
	float:none;
	width:100%;
}
.list-top.two-column .option {margin-top:10px;}
/************************************************
	article view
************************************************/
article.view-bbs div.header {
	width:278px;
	padding:10px;
}
article.view-bbs div.article-view {padding:20px 10px;}
#post-area article.view-bbs header h1 {line-height:20px;}
#post-area article.view-bbs.has-icon header h1,
article.view-bbs header h1 em,
article.view-bbs header h1 span,
article.view-bbs header span {
	float:none;
	width:100%;
}
article.view-bbs header h1 em {
	width:42px;
	margin-bottom:10px;
}
article.view-bbs header > span {
	text-align:right;
}
article.view-bbs > div.answer em {
	float:none;
	margin-left:0;
}
#post-area article.view-bbs > div p {
	float:none;
	width:100%;
	margin:10px 0 0;
}
.bbs-preview li strong {width:15%;}
.bbs-preview li strong i {display:none;}
.bbs-preview li a {width:85%;}
/************************************************
	search field
************************************************/
.search-bbs input {width:140px;}
/************************************************
	page contents
************************************************/
ul.bu-info strong,
ul.bu-info div {
	display:block;
	width:100%;
}
ul.bu-info.map strong {width:100%;}
ul.bu-info.map div {width:96%;}
.sitemap {padding-bottom:0;}
.sitemap section {
	float:none;
	width:100%;
	margin-bottom:30px;
}
.sitemap section h2,
.sitemap section > ul {width:100%;}
/*introduce*/
.overview div {
	float:none;
	width:298px;
	margin:0 0 20px 0;
}
#post-area .overview p {
	float:none;
	width:100%;
}
div.introduce > dl > dt,
div.introduce > dl > dd {
	float:none;
	width:100%;
	margin-bottom:10px;
}
div.introduce > dl > dt span {display:inline-block;}
/************************************************
	popup
************************************************/
.layerPop h1.title {
	min-height:18px;
	font-size:16px;
	line-height:18px;
}
fieldset.news-app {width:240px;}
fieldset.news-app div {float:none;}
fieldset.news-app div.form {width:220px;}
fieldset.news-app input {width:150px;}
fieldset.news-app div.btn-group {margin:10px auto;}
fieldset.news-app a.bt-news {
	width:90px;height:32px;
	line-height:32px;
}
/************************************************
	fancybox
************************************************/
.fancybox-close {top:5px;right:10px;}

/*button*/
.btn-group.page-line {
	position:static;
	height:auto;
	margin-top:20px;
}
.btn-group.page-line:after {content:'';display:block;clear:both;height:0px;visibility:hidden;}
.btn-group.page-line .fr,
.btn-group.page-line .fl {position:static;top:auto;}
.btn-group.page-line .fr {
	right:auto;
	float:right;
}
.btn-group.page-line .fl {
	left:auto;
	float:left;
}
body.error404 #post-area {padding-bottom:50px;}
#post-404 {
	width:100%;
	background:none;
	padding:30px 0;
}
#post-404 h1, #post-404 p, #post-404 .btn-group {
	max-width:300px;
	padding-left:0;
}
#post-404 h1 {
	height:auto;
	font-size:18px;
	line-height:20px;
	margin-bottom:10px;
	padding-bottom:0;
}
}
@media screen and (max-width: 1002px) and (min-width: 10px) {
/************************************************
	list
************************************************/
.list-top.two-column p,
.list-top.two-column .option {
	float:none;
	width:100%;
}
.list-top.two-column .option {margin-top:10px;}	
/************************************************
	table
************************************************/
table.list-basic, 
table.list-basic thead, 
table.list-basic tbody, 
table.list-basic tfoot, 
table.list-basic th, 
table.list-basic td, 
table.list-basic tr {display:block;}
table.list-basic thead tr { 
	position:absolute;
	top:-9999px;
	left:-9999px;
}
table.list-basic tbody tr:hover {background-color:transparent;} 
table.list-basic tr:nth-of-type(odd),
table.list-basic tr:nth-of-type(odd):hover {background-color:#fafafa;}
table.list-basic td,
table.list-basic td.title { 
	position:relative;
	text-align:left;
	padding:10px 0 10px 90px !important;
}
table.list-basic td:before { 
	position:absolute;
	top:10px;
	left:10px;
	white-space:nowrap;
	font-weight:bold;
	color:#555 !important;
}
/************************************************
	page contents
************************************************/
.rss-list li {
	float:none;
	display:block;
	width:100%;
}
.rss-list li:nth-child(2n+2) {float:none;}
}
@media all and (-webkit-min-device-pixel-ratio:1.5) {
	#logo a {
		display:block;
		widht:100%;height:47px;
		background:url(../images/logo@2x.png) no-repeat center center;
		background-size:auto 47px;
		text-indent:-9999px;
	}
	.fb-but,
	.fb-but:hover,
	.twitter-but,
	.twitter-but:hover,
	.pinterest-but,
	.pinterest-but:hover,
	.google-but,
	.google-but:hover,
	.youtube-but,
	.youtube-but:hover,
	.linkedin-but,
	.linkedin-but:hover,
	.rss-but,
	.rss-but:hover,
	.instagram-but,
	.instagram-but:hover {
		background-image: url(../images/social-buttons@2x.png);
		background-size:auto 74px;
  	}
	#searchform #search-button,	
	.footer-widget #search-keyword #keyword-button,
	.textwidget #search-keyword #keyword-button,
	#keyword-button,
	.bbs-button {
		background-image:url(../images/search-icon2@2x.png);
		background-size:28px 93px;
	}
	.bt-rss i {
		background-image:url(../images/rss-button@2x.png);
		background-size:auto 21px;
	}
	.bbs-preview li strong i {background-image:url(../images/bg_direction_list@2x.png);}
	.pagination a.prev,
	.pagination a.next,
	.pagination a.first,
	.pagination a.last {background-image:url(../images/bg_direction_page@2x.png);}
	#comments .navigation .nav-previous a,
	#comments .navigation .nav-next a {background-image:url(../images/bg_direction_page@2x.png);}
	div.font-size a {background-image:url(../images/bt-fontsize@2x.png);}
	#post-info-left li {background-image:url(../images/bu-dot2@2x.png);}
ul.bu-info li,
.sitemap section > ul > li > ul > li {background-image:url(../images/bu-dot3@2x.gif);}	
	.comments-icon a {background-image:url(../images/comments-icon@2x.png);}
	.es-nav span.es-nav-prev,
	.es-nav span.es-nav-next {background-image:url(../images/nav-arrows@2x.png);}
	.bt-scrap {background-image:url(../images/scrap-icon@2x.png);}
	.post-tags {background-image:url(../images/tag@2x.png);}
	#util-mobi select,
	#my-mobi select,
	#nav-mobi select,
	#footer-mobi select {background-image:url(../images/triangle-dark@2x.png);}
	#featured-container,
	.featured-container,
	.modal {
		background-image:url(../images/loading.gif);
		background-size:auto 33px;
	}
}