@CHARSET "UTF-8";
/**
 * jquery mobile override
 */
/* 텍스트 출력 길이 조정 */
.ui-header .ui-title {
	margin-left: 2.7em; margin-right: 2.8em;
}


* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;	
}
body {
	margin: 0; padding: 0;
}
a, a:link, a:visited {
	text-decoration: none; color: #000;
}

h1 { font-size: 120%; }
h2 { font-size: 115%; }
h3 { font-size: 110%; }
h4 { font-size: 105%; }


/**
 * UI
 */
.init-hidden {
	display: none;
}

.exten-menus-wrap {
	position: absolute; left: 0; top: 75px; width: 0; height: 100%; background: #FFF;
	z-index: 5;
	-webkit-box-shadow: 3px 0px 4px 0px rgba(91, 95, 93, 0.75);
	-moz-box-shadow:    3px 0px 4px 0px rgba(91, 95, 93, 0.75);
	box-shadow:         3px 0px 4px 0px rgba(91, 95, 93, 0.75);	
}
.exten-menus-wrap h3 {
	background: #999; color: #FFF; padding: 3px; border-radius: 5px; margin: 20px 10px 10px; text-align: center;
	text-shadow: 0 0 0;
}
.exten-menus-wrap ul {
	list-style: none; font-size: 15px;
}

.sub-categories {
	position: absolute; left: 0; top: 65px; width: 0; height: 100%; background: #FFF; z-index: 100;
	overflow: scroll;
}
.sub-categories > .category-contents {
	padding: 0 5px;
}
.sub-categories > .category-contents > ul {
	width: 100%; margin: 10px auto; padding: 0; list-style: none; 
}
.sub-categories > .category-contents > ul > li {
	display: inline-block; width: 47%; margin: 3px 1px; padding: 2px 4px; background-color: #EAEAEA; border-radius: 5px;
}
.sub-categories > .category-contents h4 {
	margin: 7px; border-bottom: 2px solid #CCC; padding-bottom: 3px;
}


/**
 * 레이아웃
 */
.top-wrap {
	padding: 0; overflow: hidden; width: 100%;
	margin: auto; position: absolute; left: 0; top: 0;
	position: fixed; left: 0; top: 0; z-index: 10;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.55);
	-moz-box-shadow:    0px 5px 5px 0px rgba(50, 50, 50, 0.55);
	box-shadow:         0px 5px 5px 0px rgba(50, 50, 50, 0.55);	
	
}
.top-upper {
	width: 100%; height: 70px; margin: 0 auto; padding: 5px; text-align: center;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4f5fc+0,bfe8f9+50,9fd8ef+51,2ab0ed+100;Blue+Gloss+%235 */
	background: rgb(228,245,252); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(228,245,252,1) 0%, rgba(191,232,249,1) 50%, rgba(159,216,239,1) 51%, rgba(42,176,237,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(228,245,252,1)), color-stop(50%,rgba(191,232,249,1)), color-stop(51%,rgba(159,216,239,1)), color-stop(100%,rgba(42,176,237,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */
}
.top-logo {
	float: left; width: 150px; height: 46px; padding-top: 20px;
}
.top-logo img {

}
.top-menus {
	float: right; margin-right: 10px;
}
.top-search {
}
.top-search input[type=text] {
	float: left; padding: 4px; font-size: 12px; width: 80px; border-radius: 3px;
}
.top-user {
	text-align: right; height: 28px; padding-right: 5px;
}
.top-user a {
	font-size: 14px; line-height: 28px;
}

.top-bottom {
	width: 100%; margin: 0 auto; padding: 3px 0; text-align: center;
	background-color: #FFF;
}

.top-gnb-left {
	float: left; margin: 5px; padding: 0; list-style: none;
	border-right: 1px solid #8d8d8d; text-align: left;
}
.top-gnb-left > li {
	margin: 0 10px 0 2px; line-height: 20px;
}
.top-gnb-left > li > a {
	font-size: 0.8em; text-shadow: 0 0 0;
}

.top-gnb-right {
	margin: 5px; padding: 0; list-style: none; overflow: hidden;
	text-align: left;
}
.top-gnb-right li {
	display: inline-block; margin: 0 2px; line-height: 20px;
}
.top-gnb-right > li > a {
	display: inline-block; font-size: 0.8em; text-decoration: none; color: #000 !important;
	text-shadow: 0 0 0; padding: 0 2px;
}


.body {
	margin-top: 150px;
}
.clear {
	clear: both;
}

/*
 * 페이지
 */
.header-wrap {
	padding: 0 10px; text-align: center; background-color: #FFF;
}

.header-summary {
	margin: 10px auto; height: 100px; overflow: hidden; text-align: left; color: #000; font-weight: normal;
	position: relative;
}
.header-summary .overlap {
	position: absolute; top: 0; left: 0; width: 100%; height: 100px; z-index: 2; background-color: #CCC;
	padding-top: 70px; text-align: right;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+79 */
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 79%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(79%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 79%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 79%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 79%,rgba(255,255,255,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 79%,rgba(255,255,255,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.header-summary .overlap a {
	padding: 4px 10px; background-color: #FFF; border-radius: 5px; border: 1px solid #CCC;
}


.header-status {
	margin: 10px; padding: 4px 7px; list-style: none; line-height: 25px; text-align: center;
	background-color: #faee9e; border-radius: 10px; display: inline-block;
}
.header-status > li {
	margin: 0 2px; padding: 0; display: inline-block; font-size: 17px; font-weight: bold; text-shadow: 0 0 0;
}
.header-status > li:before {
	content: ""; display: inline-block; width: 10px; height: 10px; background-color: #CCC; margin-right: 5px;
}
.header-status > li > span.label {
	color: #666; margin-right: 10px; font-weight: normal;
}
.header-status > li > span.field {
	color: #000; font-weight: bold;
}
.header-status > li > span.cost {
	color: #fc0d29; font-weight: bold;
}

/*
 * 목록 관련
 */
.loop-seq {
	margin: 0; padding: 0; font-size: 100%;
}
.table-caption {
	background-color: #999; color: #FFF; font-weight: bold; text-shadow: 0 0 0;
	text-align: left; padding: 5px;
}
.table-head th {
	font-weight: normal;
}
table.grid {
	width: 100%; margin-top: 0 !important;
}
.grid thead th {
	background-color: #666; text-shadow: 0 0 0; padding: 2px; color: #FFF;
}
.grid tbody tr {
	background-color: #EAEAEA;
}
.grid tbody td {
	padding: 0 5px;
}
.grid tbody td.subject {
	word-break: break-all;
}

.grid-card-wrap {
	width: 100%; overflow: hidden; margin: 20px auto;
}
ul.grid-card {
	margin: 0 auto; padding: 0; list-style: none; text-align: left; display: inline-block; overflow: hidden;
}
ul.grid-card li {
	margin: 4px 2px; padding: 1px; display: inline-block; background-color: #CCC; border-radius: 3px; text-align: center;
}
ul.grid-card li h4 {
	margin: 5px;
}

/**
 * 메인
 */
.begining {
	padding: 0 10px 10px 10px;
}
.iphone .begining {
	padding: 0 5px 10px 5px;
}
.begining > h3 {
	margin: 0 5px 5px 5px;
}
.begining > p {
	margin: 5px; font-size: 14px; line-height: 20px;
}
.begining > p > .emphasis {
	color: #0689d5; font-weight: bold;
}
.begining-menus {
	width: 100%; margin: 0 auto; text-align: left; padding: 0; list-style: none;
}
.begining-menus li {
	display: inline-block; margin: 2px; text-align: center; width: 160px; border: 1px solid #CCC;
	
}
.begining-menus li h4 {
	margin: 3px; color: #000;
}
.begining-menus li p {
	color: #666; margin: 2px; text-shadow: 0 0 0;
}
.iphone .begining-menus li h4 {
	font-size: 105%;
}
.iphone .begining-menus li {
	width: 150px; margin: 1px;
}



/*
 * 프로젝트
 */
.project-loop-title {
	margin: 10px 0;
}
.project-loop-wrap {
	
}
.project-loop-items {
	float: left; margin: 0; padding: 0; list-style: none;
}
.project-loop-items li {
	display: inline-block;
}
.project-loop-items li span.label {
	padding: 3px 3px; background-color: #c4c4c4; color: #FFF; border-radius: 5px; text-shadow: 0 0 0;
	margin-right: 5px; font-weight: normal; font-size: 13px;
}
.project-loop-items li span.field {
	margin-right: 5px; font-weight: normal; text-shadow: 0 0 0;
}

.project-loop-status-linker {
	float: right;
}
.project-loop-status-linker a {
	display: inline-block; background-color: #ff8400; padding: 1px 5px; color: #FFF; text-shadow: 0 0 0;
	text-decoration: none; border-radius: 10px;
}


.project-loop-appli-wrap {
	margin: 5px 0; padding: 3px 0; border-top: 1px dotted #CCC;
	text-align: center;
}
.project-loop-appli-status li span.label {
	background-color: #c4c4c4; font-size: 13px;
}
.project-loop-appli-status li span.field {
	color: #000; font-weight: bold;
}
.project-loop-appli-linker {
	float: right;
}
.project-loop-appli-linker a {
	display: inline-block; padding: 1px 5px; text-align: center; background-color: #999; color: #FFF;
	text-decoration: none; border-radius: 10px; text-shadow: 0 0 0;
}

/*
 * 패키지
 */
.btn-more-load {
	width: 100%; padding: 3px; text-align: center; border: 1px solid #CCC; border-radius: 10px;
	margin: 5px 0;
}


/**
 * 하단
 */
.copyright {
	width: 100%; margin: 0 auto; text-align: center; padding-top: 30px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cecece+0,eeeeee+11 */
	background: rgb(206,206,206); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(206,206,206,1) 0%, rgba(238,238,238,1) 11%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,206,206,1)), color-stop(11%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(206,206,206,1) 0%,rgba(238,238,238,1) 11%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(206,206,206,1) 0%,rgba(238,238,238,1) 11%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(206,206,206,1) 0%,rgba(238,238,238,1) 11%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(206,206,206,1) 0%,rgba(238,238,238,1) 11%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}
.copyright h2 {
	color: #014878; text-shadow: 0 0 0; margin: 10px 0;
}
.copyright ul {
	margin: 0 10px; padding: 0; line-height: 20px; font-size: 0.9em; list-style: none; text-align: left;
}
.copyright > ul > li {
	margin: 0; padding: 0; text-shadow: 0 0 0; color: #666;
}
.copyright > ul > li > span.label {
	color: #999; margin-right: 5px;
}
.copyright > ul > li:before {
	content: " "; width: 10px; height: 10px; display: inline-block; background-color: #CCC; margin-right: 5px;
}
.copyright > p.inline-block:last-child {
	margin-top: 2px;
}
@media only screen and (orientation: landscape) {
	.copyright > ul > li {
		display: inline-block;
	}
	.copyright > p.inline-block {
		display: inline-block; margin: 7px 0;
	}
}


/*
 * Main
 */
.banner-wrap {
	background: url(/inclusion/images/premium-bg.png?0) no-repeat top right;
}
.banner {
	width: 100%; margin: 0 auto; padding: 20px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#258dc8+0,258dc8+100;Blue+Flat+%231 */
	background: rgb(37,141,200); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(37,141,200,1) 0%, rgba(37,141,200,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(37,141,200,1)), color-stop(100%,rgba(37,141,200,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(37,141,200,0.5) 0%,rgba(37,141,200,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */
}
.banner h2 {
	color: #000; text-shadow: 3px 3px 1px #10698F; margin: 10px 0;
}
.banner ul {
	margin: 0; padding: 0; line-height: 20px; font-size: 0.9em; list-style: none;
}
.banner > ul > li {
	margin: 0; padding: 0; text-shadow: 0 0 0; color: #FFF;
}
.banner > ul > li:before {
	content: " "; width: 10px; height: 10px; display: inline-block; background-color: #014878; margin-right: 5px;
}
@media only screen and (orientation: landscape) {
	.banner > ul > li {
		display: inline-block;
	}
}

.banner-inner {
	border-radius: 5px; padding: 10px 20px; color: #FFF; text-shadow: 0 0 0; margin: 7px 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ebe9f9+0,d8d0ef+50,cec7ec+51,c1bfea+100;Purple+3D+%231 */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0f3fa+0,d8f0fc+50,b8e2f6+51,b6dffd+100;Shape+2+Style */
background: rgb(224,243,250); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(224,243,250,1) 0%, rgba(216,240,252,1) 50%, rgba(184,226,246,1) 51%, rgba(182,223,253,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,243,250,1)), color-stop(50%,rgba(216,240,252,1)), color-stop(51%,rgba(184,226,246,1)), color-stop(100%,rgba(182,223,253,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(224,243,250,1) 0%,rgba(216,240,252,1) 50%,rgba(184,226,246,1) 51%,rgba(182,223,253,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(224,243,250,1) 0%,rgba(216,240,252,1) 50%,rgba(184,226,246,1) 51%,rgba(182,223,253,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(224,243,250,1) 0%,rgba(216,240,252,1) 50%,rgba(184,226,246,1) 51%,rgba(182,223,253,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(224,243,250,1) 0%,rgba(216,240,252,1) 50%,rgba(184,226,246,1) 51%,rgba(182,223,253,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0f3fa', endColorstr='#b6dffd',GradientType=0 ); /* IE6-9 */
}
.banner h3 {
	color: #000; margin: 0 0 5px; padding-bottom: 1px; border-bottom: 1px dotted #FFF;
}
.banner-inner ul {
	margin: 0; padding: 0; line-height: 20px; font-size: 0.9em; list-style: none;
}
.banner-inner > ul > li {
	margin: 0; padding: 0; text-shadow: 0 0 0; color: #c74702; display: inline-block;
}
.banner-inner > ul > li:before {
	content: " "; width: 10px; height: 10px; border-radius: 5px; display: inline-block; background-color: #e2f601; margin-right: 5px;
}
.banner-inner > ul > li > span.label {
	color: #666; margin-right: 3px;
}
.banner-inner > ul > li > span.original-price {
	text-decoration: line-through;
}
.banner-inner > ul > li > span.apply-price {
	font-weight: bold;
}
@media only screen and (orientation: landscape) {
	.banner-inner > ul > li {
		display: inline-block;
	}
}

/**
 * 회원 가입
 */
.agreements-fields h3 {
	margin: 20px 0 5px 0;
}
.agreements-fields h3:first-child {
	margin-top: 0;
}
.agreements-fields h4 {
	margin: 5px 0;
}

.scrollbox {
	width: 100%; height: 100px; overflow: auto;
}
.next-step {
	display: none;
}

.register-fields input {
	font-size: 17px; padding: 2px;
}
input.medium {
	width: 150px;
}
input.small {
	width: 50px;
}
.passwd-fields span {
	display: inline-block;
}


/**
 * 로그인
 */
#fLogin {
	width: 100%; margin: 0 auto; text-align: center;
}
#fLogin input[type=text], #fLogin input[type=password] {
	width: 150px; font-size: 18px; padding: 3px
}

/**
 * 마이페이지
 */
.listview .label {
	color: #999; margin-right: 5px;
}
.listview .field {
	color: #000; margin-right: 10px;
}
.listview .field:last-child {
	margin-right: 0;
}
.ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-mini .ui-btn-inner {
	padding: .55em 5px .5em;
}

/**
 * 개인정보
 */
.private-fields .passwd-fields span {
	display: inline-block; width: 100px;
}

/**
 * Help
 */
.help-content h2 {
	display: inline-block; padding: 3px 10px; color: #FFF; background-color: #348fff; border-radius: 10px; text-shadow: 0 0 0;
}
.help-content h3 {
	margin: 5px 0; padding-bottom: 3px; border-bottom: 1px solid #CCC;
}
.help-content {
	background-color: #FFF; padding: 10px; border-radius: 5px;	
}
.help-content figcaption {
	color: #FFF; background-color: #8c2608; font-style: italic; border-radius: 10px; padding: 5px; text-shadow: 0 0 0;
}


/**
 * 공통
 */
.clear-both {
	clear: both;
}
.events-premium {
	padding: 5px; color: #FFF; text-shadow: 0 0 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#feccb1+0,f17432+50,ea5507+51,fb955e+100;Red+Gloss+%232 */
	background: rgb(254,204,177); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(254,204,177,1) 0%, rgba(241,116,50,1) 50%, rgba(234,85,7,1) 51%, rgba(251,149,94,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,204,177,1)), color-stop(50%,rgba(241,116,50,1)), color-stop(51%,rgba(234,85,7,1)), color-stop(100%,rgba(251,149,94,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=0 ); /* IE6-9 */
}
.events-premium a, .events-premium a:link {
	text-decoration: none; color: #FFF !important; font-weight: bold;
}


/**
 * jquery mobile override
 */
.ui-li-aside {
	width: 30% !important;
}