@charset "UTF-8";
body{background: #99cbcc; font-family: "Helvetica Neue",Helvetica,"Heiti TC","微軟正黑體","Microsoft Sans Serif",Helvetica,Geneva,sans-serif;}
#container { width: 100%; margin:0 auto; text-align:center;}
#wrapper{
    text-align: center;
    width: 100%;
	min-width:320px;
    margin:0;
	padding:20px 0;
	background-color:#F6F6F6;
}

#top{
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: #fff;
    text-align: center;
    background-color: #017F7B;
    background-image: url(../images/logo.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
}
#top .right{
    height: 100%;
	float:right;
}

.top_title {
    text-align: center;
    color: #017F7B;
    font-weight: 900;
}
.top_title img{ width:18em;}

#app_area{
	width:85%;
	padding:15px;
	margin:20px auto;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-color:#FFF;
	text-align:center;
	display:table;
}
.app_icon{
	width:100%; 
	float:left;
	display:block;
}
.app_icon .pic{
	width:30%; float:left; margin-right:15px;
}
.app_icon .name{
	width:65%; float:left; text-align:left;margin-top:15px;
}
.app_icon .description{
	width:60%; 
	float:left;
	text-align:left;
	font-size:1em;
	line-height:1.25em;
}
.app_icon .pic img, .app_icon .name img{
	width:100%; max-width:300px;
}
.rq_code{
	width:30%; float:left; 
	text-align:center;
	color:#727071;
	display: inline-block;
	font-size:0.75em;
}
.rq_code img{
	width:95%; text-align:center;
}
.rq_code .version{
	font-size:9px;
	color:#000;
}
.app_btns{
	width:40%; float:left; 
	display: inline-block;
}
.go_btn{
    width: 100%;
    height: 2.5em;
    line-height: 2.5em;
    border-radius: 10px;
    background-color: #308A8A;
    color: #fff;
    box-shadow: 0 5px 0px #17585E;
	margin:0.5em 0 0 0;
    font-size: 1em;
    display: block;
    text-align: center;
    letter-spacing: 1px;
	text-decoration:none;
}
.go_btn img{
	width:30px;
	display:inline-block;
	vertical-align: middle;
}
.go_:hover{
    opacity: .8;
}
@media all and (min-width: 37.5em) {
#container { width: 600px;}
.top_title img{ width:28.125em;}
.app_icon .pic{	width:30%; margin-right:20px;}
.app_icon .name{ width:65%; margin-top:30px;}
.app_icon .description{	width:65%; font-size:1.15em;}
.rq_code{ width:25%; font-size:1em;}
.rq_code img{ width:85%;}
.go_btn{font-size: 1.25em;}
.app_btns{ width:50%;float:left;}
}