html { height: 100%; }
body {height: 100%; margin:0px; padding:0px; background:#f9f9f9; }
body,table	
	{font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	line-height: 18px;
	color:#000;
	}
a {color:#164275; text-decoration:none;}
a:hover, a:active {text-decoration:underline; cursor:pointer;}
img{ border:0;}
input[type="submit"], input[type="button"], input[type="reset"]
	{background:#3594ff; text-decoration:none; font-size:15px;
	border-radius: 15px; border:#298cfc 1px solid; border-bottom:#2283f0 2px solid; 
	padding:1px 8px 2px 8px; 
	color:#ffffff; cursor:pointer; -webkit-appearance: none !important;}
input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover{text-decoration:none!important;}

.dotted {border-top:#cfcfcf 2px dotted;}

@media only screen and (min-width : 100px) and (max-width : 667px) {
/* iPhone */
body,table	{font-size: 14px;}
.main {width:100%; text-align:center; margin:0px auto; background:#ffffff; padding:5px; }
.header {vertical-align:top;}
.header div{ display:inline-block; vertical-align: bottom;}
.header .column1{ width:100%; margin-left:0; text-align:left }
.header .column2{ width:100%; margin-bottom:10px; margin-top:20px;}
.header .column2 li{list-style:none; display:inline-block; }
.header .column2 button{font-size:18px;  z-index: 5; }
.header .column3{ width:100%; }
.header .column4{ width:45%; position: absolute; margin-right:0; margin-top:-200px; text-align:right; }
.content table{width:95%; background:#eeeeee; border-radius:10px; text-align:left; margin:0 auto; padding:5px; vertical-align:top;}
.app {text-align:left;}
.app td{vertical-align:top; padding:5px;}
.applogo{width:70px;}
.app table{border:#e0e0e0 2px solid; border-radius:20px; padding:5px; margin:8px; width:98%;}
.appname{font-weight:bold; margin-bottom:10px;}
.apptitle { width:310px; word-wrap:break-word; display:block;}
.apptitle td{padding: 0 3px 0 3px; text-align:left; word-wrap: break-word; white-space: initial;}
.apptitle span{font-weight:bold; font-size: 16px;}
.title {color:#0f79f0; font-weight:bold; font-size: 18px;}
.link {text-align:right; margin-top:3px;}
.ipad_p img{text-align:center; width:90%;}
.ipad_l img{text-align:center; width:90%;}
.footer {background:#eeeeee; width:100%;}
.copyright {width:100%; padding:5px; text-align:center; margin:0px auto;}
.ribbon { position:absolute; z-index:10; margin-left:-10px; margin-top:-10px;}
.ribbon img{ width:60px;}
.feed { width:310px; height:850px;}
.pc { display:none;}

.btn {
	border: none;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: #c3e490;
	cursor: pointer;
	display: inline-block;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	padding:4px 10px; margin:2px 10px; 
	-webkit-border-radius:5px;
	  -moz-border-radius:5px;
	  border-radius:5px;
}
}


@media only screen and (min-width : 668px) and (max-width : 1248px) {
/* iPad */
body,table	{font-size: 16px;}
.main {width:100%; text-align:center; margin:0px auto; background:#ffffff; padding:10px;}
.header {vertical-align:top;}
.header div{ display:inline-block; vertical-align: bottom;}
.header .column1{ width:20%; margin-left:0; }
.header .column2{ width:45%; margin-bottom:10px;}
.header .column2 li{list-style:none; display:inline-block; }
.header .column2 button{font-size:18px;  z-index: 5; }
.header .column3{ width:25%; margin-bottom:5px;}
.header .column3 img{ height:39px; }
.header .column4{ width:8%; margin-bottom:9px;}
.header .column4 img{ height:33px; }
.main td{padding:3px;}
.content table{ width:95%; background:#eeeeee; border-radius:20px; text-align:left; margin:0 auto; vertical-align:top; padding:8px;}
.app {text-align:left;}
.app td{vertical-align:top; padding:5px;}
.app table{border:#e0e0e0 2px solid; border-radius:20px; padding:10px; margin:10px; width:98%;}
.appname{font-weight:bold; margin-bottom:10px;}
.apptitle td{padding: 0 5px 0 5px; text-align:left;}
.apptitle span{font-weight:bold; font-size: 22px;}
.title {color:#0f79f0; font-weight:bold; font-size: 20px; border-top:#cfcfcf 2px dotted; padding:20px 0 0 0;}
.link {text-align:right; margin-top:5px;}
.ipad_p{ background:url(ipad_p.png) no-repeat center; height:630px; text-align:center;}
.ipad_l{ background:url(ipad_l.png) no-repeat center; height:450px; text-align:center;}
.footer {background:#eeeeee; width:100%;}
.copyright {width:100%; padding:10px; text-align:center; margin:0px auto;}
.copyright .left{text-align:left; float:left;}
.copyright .right{text-align:right;}
.ribbon { position:absolute; z-index:10; margin-left:-15px; margin-top:-15px;}
.feed { width:870px; height:850px;}
.phone { display:none;}

.btn {
	border: none;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: #c3e490;
	cursor: pointer;
	display: inline-block;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	padding:4px 10px; margin:2px 10px; 
	-webkit-border-radius:5px;
	  -moz-border-radius:5px;
	  border-radius:5px;
}
}


@media only screen and (min-width : 1249px) and (max-width : 9000px) {
/* PC */

.main {width:1004px; text-align:center; margin:0px auto; background:#ffffff; border-left:#eeeeee 2px solid; border-right:#eeeeee 2px solid; padding:5px 10px;}
.header {vertical-align:top;}
.header div{ display:inline-block; vertical-align: bottom;}
.header .column1{ width:20%; margin-left:0; }
.header .column2{ width:45%; margin-bottom:10px;}
.header .column2 li{list-style:none; display:inline-block; border-right:#cccccc 2px dotted; }
.header .column2 button{font-size:18px;  z-index: 5; }
.header .column2 li.end{ border:none; }
.header .column3{ width:25%; }
.header .column4{ width:8%;  margin-bottom:5px;}
.main td{padding:2px;}
.content table{ width:95%; background:#eeeeee; border-radius:20px; text-align:left; vertical-align:top; margin:0 auto; padding:15px;}
.app {text-align:left;}
.app td{vertical-align:top; padding:5px;}
.app table{border:#e0e0e0 2px solid; border-radius:20px; padding:10px; margin:15px 20px 5px 5px;}
.appname{font-weight:bold; margin-bottom:10px;}
.apptitle { margin-top:10px; padding-top:10px;}
.apptitle td{padding: 0 8px 0 8px; text-align:left; }
.apptitle span{font-weight:bold; font-size: 20px;}
.title {color:#0f79f0; font-weight:bold; font-size: 24px; border-top:#cfcfcf 2px dotted; padding:20px 0 0 0;}
.link {text-align:right; margin-top:8px;}
.ipad_p{ background:url(ipad_p.png) no-repeat center; height:630px; text-align:center;}
.ipad_l{ background:url(ipad_l.png) no-repeat center; height:450px; text-align:center;}
.footer {background:#eeeeee; width:100%; }
.copyright {width:1004px; padding:10px; text-align:center; margin:0px auto;}
.copyright .left{text-align:left; float:left;}
.copyright .right{text-align:right;}
.group { width:49%; display:inline-block; vertical-align:top;}
.ribbon { position:absolute; z-index:10; margin-left:-15px; margin-top:-15px;}
.feed { width:970px; height:850px;}
.phone { display:none;}


.btn {
	border: none;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
	display: inline-block;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	padding:4px 10px; margin:2px 10px; 
	/* border:1px solid #84ccff; 
	-webkit-border-radius: 40px;
	  -moz-border-radius: 40px;
	  border-radius:40px;*/
	 
}
.btn-1f:after {
	width: 100%;
	height: 0;
	top: 50%;
	left: 50%;
	background: #c3e490;
	opacity: 0;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	-webkit-border-radius: 5px;
	  -moz-border-radius: 5px;
	  border-radius:5px;
}

.btn-1f:hover:after {
	height: 100%;
	opacity: 1;
}

.btn-1f:active:after {
	height: 100%;
	opacity: 1;
}
}

.inside div{ display:inline-block; margin:7px; width:90px; vertical-align:top;}
.inside li{ list-style:none; margin-top:-5px; font-size:12px; color:#666;}
.inside img{ width:57px;}


.header .column2 a{ color:#000000;}

.btn:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;

}

.btn-1f {
	overflow: hidden;
}