/*====================================================
 ----------------------------------------------------
 * Responsive
 ----------------------------------------------------
====================================================*/

/*============ 640 OneColumn ===========*/
@media screen and (max-width : 640px){

	.Container {
		width: 100%;
		padding: 0;
	}
	#Login .parts {
		width: auto;
	}
	#Login .logo {
		display: none;
	}
	#Header {
		position: relative;
		margin-bottom: 0px;
		padding: 3px 0;

	}
	#Header .Container {
		padding: 0 10px;
	}
	#Logo {
		width: 160px;
		background: url('image/logo_mobile.png') no-repeat left top;
		background-size: contain;
	}
	#Logo a {
		height: 40px;
	}
	#Logo a img {
		display: none;
	}
	#btnGlobalNav {
		display: block;

	}
	#GlobalNav {
		position: absolute;
		z-index: 100;
		display: none;
		padding: 0 10px;
		border: none;
		background: none;

	}
	#GlobalNav ul {

	    margin: 0;
	}
	
	
	#GlobalNav ul li {
	    width: 50%;
	    border-width: 0 1px 1px 0;
	    border-color: #777;
	    border-style: solid;
	    
	}
	#GlobalNav ul li a {
		margin: 0;
		color: #eee;
		background: #555;
		border: none;
		font-weight: normal;
	}
	
	#GlobalNav ul li.active a {
		background: #333;
		color: #fa0;
	}
	#Contents {
		padding-top: 10px;
		padding-bottom: 0;
	}




	#Center {
		float: none;
		width: 100%;
		margin-bottom: 15px;
		padding: 0 10px 10px;
	}
	#Right,
	#SideBanner {
		float: none;
		width: 100%;
		margin-top: 20px;
		padding: 20px 10px;
		border-top: 5px solid #F8A547;
		background: #F8e5c7;
		clear: both;
	}


	table.listTable {
		padding: 0;
	}
	.listTable th,
	.listTable.th-narrow th,
	.listTable.th-wide th,
	.listTable td {
		display: block;
		width: 100%;
	}
	.listTable th {
		
		padding: 7px 12px 0;
		
		text-align: left;
		font-weight: bold;
		color: #974;
	}
	.listTable th .label {
		margin-right: 5px;
	}
	.listTable th br {
		display: none;
	}
	.listTable  td {
		border: none;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	.listTable td select,
	.listTable td input {
		margin: 2px 0;
	}
	.overflow {
		height: 200px;
	}
	
	#Footer {
		padding: 10px;
	}
	#Footer2 {
		padding: 0 10px 20px;
	}
	#Footer2 .pull-left,
	#Footer2 .pull-right {
		width: 100%;
		text-align: center;
	}
	#FooterLogo {
		display: block;
		width: 250px;
		margin: 0 auto 10px;
	}
	#RapidSSL {
		float: none;
	}
	.one-column-show {
		display: block;
	}
	.one-column-show-inline {
		display: inline;
	}
	.one-column-hide {
		display: none;
	}
	
}

/*============ under 480 ===========*/

@media screen and (max-width : 480px){

	input.upfile {
		width: 220px;
	}
	
	#Logo a {
		line-height: inherit;
		font-size: inherit;
	}
	
	#Center {
		padding: 0;
	}
	#Center .parts {
		margin: 0 10px 15px;
	}
	.memberHeader {
		margin-top: -10px;
		border: none;
	}
	.coverArea { 
		height: 45%;
	}
	.memberAction {
		top: 5px;
		right: 5px;
	}
	.memberAction .btn {
		margin-bottom: 2px;
		padding: 1px 6px;
	}
	
	.form-control.auto.inline {
		display: block !important;
		float: none !important;
		width: 100%;
		margin: 2px 0;
	}
	
	

	.balloon {
		max-width: 85%;
	}


	.memberNameArea {
		padding: 7px;
	}
	.memberName {
		margin: 0;
	}
	.memberName a {
		font-size: 16px;
	}

	.memberInfo {
		display: inline;
		padding-right: 5px;
	}
	.memberHeader .icon-76 {
		width: 48px;
		height: 48px;
	}
	.memberHeader .itemRight.middle {
		padding-left: 55px;
	}
	.headerMenu li a {
		padding: 2px 0;
		font-size: 10px;
	}
	.headerMenu li a span {
		display: none;
	}
	.headerMenu li a .fa {
		font-size: 16px;
		
	}
	.inlineList.inline3 li {
		width: 50%;
		
	}
	.inlineList.inline4 li {
		width: 50%;
		
	}
		.calendar th {
		display: none;
	}
	.calendar td {
		display: block;
		width: 100%;
		height: auto;
		padding: 8px;
		min-height: 40px;
	}
	.calendar td.noday {
		display: none;
	}
	.calendar td.sun {
		color: red;
	}
	.calendar td.sat {
		color: blue;
	}
	.mobile-show {
		display: block;
	}
	.mobile-show-inline {
		display: inline;
	}
	.mobile-hide {
		display: none !important;
	}
	.mobile-block {
		float: none !important;
		display: block;
		width: 100%;
		margin: 3px 0;
		
	}
}