body div.mobile_bg {
	background:unset;
	background-color:#fff;
}
.h35 { height:35px; }
.h105 { height:105px; }

section.hero_banner .hero_content h1,
section.hero_banner .hero_content h2,
section.hero_banner .hero_content button,
section.hero_banner .hero_content p,
section.mobile h1,
section.mobile p,
section.mobile button {
	font-family:"Open Sans",helvetica,arial,Simsun,"Songti TC","Microsoft Jhenghei",Simhei;
	font-weight:normal;
}
section {
	margin:0 auto;
	display:block;
	font-size:14px;
	margin-bottom:45px;
	/*border-bottom:1px solid #eee;*/
}
div.grad {
	width:100%;
	background:linear-gradient(#f9f9f9,#fff);
}

/* 1. HERO BANNER SECTION */
section.hero_banner {
	position:relative;
	background:url(/images/app/banner.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	height:50vw;
	max-height:600px;
}
section.hero_banner .hero_content {
	position:relative;
	margin:0px auto;
	text-align:center;
	padding-top:135px;
	transition-duration: 500ms;
}
section.hero_banner .hero_content h1 {
	color:#fafafa;
	font-size:5.5em;
	/*left:3.5vw;*/
	letter-spacing:2px;
	transition-duration: 500ms;
}
section.hero_banner .hero_content p {
	color:#fafafa;
	font-size:1.4em;
	letter-spacing:12px;
	margin-bottom:1.2em;
}
span.tag {
	position:absolute;
	color:#fafafa;
	font-size:14px;
	background-color:#00a190;
	padding:1px 15px;
	border-radius:1em;
	vertical-align:text-top;
	top:24px;
}
section.hero_banner .hero_content div.btn-popover-wrapper {
	display:inline-block;
	vertical-align: text-top;
	width:230px;
	/*border:1px solid #300;*/
}
section.hero_banner .hero_content button {
	background-color: transparent;
	border:1px solid #fafafa;
	border-radius:10px;
	padding:12px;
	font-size:1.2em;
	font-weight:normal;
	text-shadow:unset;
	box-shadow: unset;
	margin:10px;
	width:200px;
}
section.hero_banner .hero_content button:hover {
	background-color: #fff;
	border:1px solid #fafafa;
	color:#333;
	transition-duration: 300ms;
}

section.hero_banner .hero_content button .fab{
	font-size: 1.3em;
	margin-right: 8px;
}
section.hero_banner .hero_content div.btn-popover-wrapper div.qrcode-wrapper {
	position: relative;
    border: 7px solid #fff;
    border-radius: 7px;
    margin-top: 5px;
    top: 0;
    margin-left: 50%;
	left: -83px;
	width:150px;
	z-index:1;
	box-shadow: 0 0 15px 0px rgba(0,0,0,1);
	display:none;
}

section.hero_banner .hero_content div.btn-popover-wrapper div.qrcode-wrapper:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 65px;
	top: -30px;
	border: 12px solid;
	border-color:  transparent transparent #fff transparent;
}

/* 0. COMMON */
.app_text {
	vertical-align:middle;
	width:45vw;
	max-width:460px;
}
.app_visual {
	vertical-align:middle;
	width:35vw;
	max-width:405px;
}


/* 1. 深度 SECTION */
section.app_s1 {
	background:url(/images/app/01_bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	height:50vw;
	max-height:450px;
	text-align:center;
	/*border-bottom:1px solid #eee;*/
}


/* 2. 電播 SECTION */
section.app_s2 {
	background:url(/images/app/02_bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	height:50vw;
	max-height:450px;
	text-align:center;
	/*border-bottom:1px solid #eee;*/
}


/* 3. 深度 SECTION */
section.app_s3 {
	background:url(/images/app/01_bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	height:50vw;
	max-height:450px;
	text-align:center;
	/*border-bottom:1px solid #eee;*/
}


/* 4. 特色 SECTION */
section.app_s4 {
	background:url(/images/app/02_bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	height:50vw;
	max-height:450px;
	text-align:center;
	/*border-bottom:1px solid #eee;*/
}


@media only screen and (max-width:1099px) {
	section.hero_banner .hero_content {
		padding-top:6vw;
	}
	section.hero_banner .hero_content h1 {
		font-size:4em;
	}
}

/* MOBILE */
section.mobile {
	display:none;
}

@media only screen and (max-width:680px) {
	.hidden-xs {
		display:none;
	}
	section.mobile {
		display:block;
		text-align: center;
		padding:35px 15px 15px 15px;
	}
	section.mobile h1 {
		font-size:2em;
	}
	section.mobile p {
		color:#333;
		font-size:1.2em;
		letter-spacing:8px;
		margin-bottom:4em;
	}

	section.mobile button {
		display:block;
		margin: 25px auto;
		color:#fafafa;
		font-size:1.2em;
		background-color:#006662;
		padding:10px 15px;
		border-radius:1.2em;
		width:250px;
		box-shadow: unset;
	}
	section.mobile button .fab{
		font-size: 1.3em;
		margin-right: 8px;
	}
}