body {
	overflow-x: hidden;
}

/* header
-------------------------------------------------- */
.header-wrap{ padding:20px;}
#homeBanner {
	background: url(../images/bg.jpg) center top no-repeat;
	background-size: auto;
	display: block;
	width: 100%;
	height: 479px;
	background-color: #FFF7F1;
	position: relative;
}

#bannerText {
	height: 100%;
}

#homeBanner .container {
	width: 100%;
  min-height: 100%;
  position: relative;
  margin: auto;
  max-width: 1024px;
}

.dog, .product, .blackS, .title {
	display: none;
}

@media only screen and (max-width: 1023px) {
	#homeBanner {
		background: url(../images/bg-tablet.jpg) center top no-repeat;
		height: 479px;
		padding: 0;
    overflow: hidden;
	}

	.dog, .product, .blackS, .title {
		display: block;
		position: absolute;
		bottom: 0;
	}

	.title {
		top: 110px;
		bottom: auto;
		left: 0;
		right: 0;
		margin: auto;
		max-width: 300px;
		text-align: center;
		z-index: 1;
	}

	.title p {
		color: #FFF !important;
		font-weight: bold;
		line-height: 30px !important;
	}

	.social_b {
    position: relative;
    z-index: 1;
	}

	.dog {
		right:31%;
		z-index: 1;
		bottom: -10px;
		max-width: 260px;
		width: 100%;
	}

	.product {
		right: 3%;
		max-width: 300px;
	}

	.blackS {
    min-width: 768px;
    left: 0;
    right: 0;
    margin: auto;
	}
}

@media only screen and (max-width: 520px) {
	#homeBanner {
		background: url(../images/bg-mobile.jpg) center top no-repeat;
		height: 510px;
	}

	.dog, .product, .blackS, .title {
		display: none;
	}

	.download {
		bottom: 43px !important;
		left: 67% !important;
	}
}

.container.content {
	margin: 0 auto;
	padding: 30px 15px;
}

.download {
	margin: auto;
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
}

.downapp {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 43%;
}

.downapp-footer {
	display: none;
}

a.green-btn {
  background: #559328;
  color: #FFF;
  padding: 20px 80px;
  border-radius: 10px;
  display: inline-block;
  font-size: 20px;
}

a.green-btn:hover {
	color: #FFF !important;
}

.website {
	position: absolute;
	bottom: 13px;
	right: 25px;
}

.website a, .website p {
	color:#FFF !important;
	font-size: 12px !important;
	line-height: 6px !important
}

.notice {
	color: red;
	font-size: 18px !important;
}

@media only screen and (max-width: 1023px) {
	.download {
    bottom: 21px;
    left: 77%;
    right: auto;
    text-align: right;
	}

	.bg-blue.gone2 {
		display: block;
	}

	.container.content {
	  padding: 30px 0 0;
	}

	.website {
		display: none;
	}

	.downapp {
		display: none;
	}
	.downapp-footer {
		display: block;
		width: 100%;
    max-width: 280px;
    margin: auto;
	}

	.green-btn {
		padding: 15px 65px;
    font-size: 25px;
	}
}

.col-md-12.center {
	text-align: center;
	float: none;
}

.logo-app {
  width: 100px;
}

.social-icons {
	width: 50%;
	float: right;
}

.qrcode {
	float: left;
}

.margin-r5 img{
	width: 220px;
}

#bannerText h2 {
	color: #fff;
	font-size: 50px;
	display: block;
	text-shadow: 0 0 8px rgba(0,0,0,.3);
	position: relative;
	margin: 0 auto;
	padding: 0 0px;
}
#homeBanner p {
	color: #333;
	font-size: 1.8em;
	display: block;
	line-height:1.5em;
	font-family:Verdana, Geneva, sans-serif, "微軟正黑體";
}
#bannerText .banner-img{
	margin-top:30px;
}
.social { position:relative; top: 7%; width: 100px; left: 83%;}
.social_b {display:none;}
.fb_icon { display:inline-block; background: url(../images/fb_icon.svg) no-repeat left; text-indent:-9999px; width:42px; height:67px; margin-right:5px;}
/*.line_icon { display: none;}*/
.fb_icon:hover, .line_icon:hover { background-position:right;}
a {transition:none;}

@media only screen and (min-width: 1024px) {
	.download {
		position: static;
	}

	.social_b {
    display: block;
    position: absolute;
		right: 0;
    bottom: 2px;
	}
}

/* Featurettes
------------------------- */
/*.featur-center h3{ font-size:2.2em; font-family:"微軟正黑體"; color: #4498a7;}*/
.featur-center p{ font-size: 1.5em; font-family: '微軟正黑體', 'Open Sans', arial, helvetica, sans-serif}
.featur-center ul li { font-size: 1.5em; font-family:'微軟正黑體', 'Open Sans', arial, helvetica, sans-serif; list-style: disc; margin-left: 20px;}

/* Footer
-------------------------------------------------- */
footer{ background-color: #333; padding: 30px 0; }
.footer p {line-height: 1.5em;font-family:"微軟正黑體";}
.mail a {color:#ff8a00;}
.mail a:hover {color:#ffe115;}
.coinfo {text-align: right;}



/* 排版 Layout
----------------------------------------------------------------------------- */
.large-text {font-size: 2.2em !important;}
.extra-text { font-size: 2.5em !important;}
.margin-10  { margin:10px          !important;}
.margin-0   {margin:           0   !important;}
.margin-t0  {margin-top:     0px   !important;}
.margin-t5  {margin-top:     5px   !important;}
.margin-t10 {margin-top:    20px   !important;}
.margin-l5  {margin-left:    5px   !important;}
.margin-l10 {margin-left:   10px   !important;}
.margin-l15 {margin-left:   15px   !important;}
.downapp .margin-r5  {margin-right:   5px   !important; margin-left: 10px; position: relative; top: 10px;}
.downapp-footer .margin-r5  {position: relative; top: 10px;}
.margin-r10 {margin-right:  10px   !important;}
.red        {color: #BF3019 !important;}
.white      {color: #fff !important;}
.bg-gray {background-color:#e8e8e8;}

/* RESPONSIVE CSS
-------------------------------------------------- */


/* iPad 橫式 1024x768 --------------------------------------------------------------------------- */
@media only screen and (max-width: 1023px) and (min-width: 970px) { 
	.row {margin:0 1px;}
	.qrcode {display:none;}
	.extra-text {font-size: 2.1em !important;}
	.social { position:relative; top: 7%; width: 100px;left: 70%;}
	.social_b {display: block; margin-bottom: -25px;}
	.coinfo, .mail, .footer p, .tel {text-align: center;}
	.line_icon { display:inline-block; background: url(../images/line_icon.svg) no-repeat left; text-indent:-9999px; width:42px; height:67px;}
	
}


/* iPad 直式 size800x600--------------------------------------------------------------------------- */
@media only screen and (max-width: 969px) and (min-width: 768px) { 
	.row {margin:0 1px;}
	.header-wrap{padding: 10px;}
	.qrcode {display:none;}
	.extra-text {font-size: 1.5em !important;}
	.social { position:relative; top: 7%; width: 100px;left: 70%;}
	.social_b {display: block; margin-bottom: -25px;}
  .coinfo, .mail, .footer p, .tel {text-align: center;}
  .line_icon { display:inline-block; background: url(../images/line_icon.svg) no-repeat left; text-indent:-9999px; width:42px; height:67px;}
}

@media only screen and (max-width: 767px) and (min-width: 481px) { 
	.row {margin:0 1px;}
	.header-wrap{padding: 10px;}
	.qrcode {display:none;}
	.extra-text {font-size: 2.8em !important;}
	.social {display: none;}
    .coinfo, .mail, .footer p, .tel {text-align: center;}
	.social_b {display: block; margin-bottom: -30px;}
	.line_icon { display:inline-block; background: url(../images/line_icon.svg) no-repeat left; text-indent:-9999px; width:42px; height:67px;}
}
/* 480px and mobile --------------------------------------------------------------------------- */

@media only screen and (max-width: 480px) and (min-width: 320px) {
	.row {margin:0 1px;}
	.header-wrap{padding: 10px;}
	.container { padding-left:0; padding-right: 0;}
	.container.content {
		margin: 0 auto;
		padding: 30px 0 0;
	}
	.qrcode {display:none;}
	.extra-text {font-size: 1.5em !important;}
	.social {display: none;}
    .coinfo, .mail, .footer p, .tel {text-align: center;}
	.social_b {display: block; margin-bottom: -30px;}
	.line_icon { display:inline-block; background: url(../images/line_icon.svg) no-repeat left; text-indent:-9999px; width:42px; height:67px;}
}
/* 319px and mobile --------------------------------------------------------------------------- */

@media only screen and (max-width: 319px) and (min-width: 280px) {
	.row {margin:0 1px;}
	.header-wrap{padding: 5px;}
	.container { padding-left:0; padding-right: 0;}
	.container.content {
		margin: 0 auto;
		padding: 30px 0 0;
	}
	.qrcode {display:none;}
	.extra-text {font-size: 1.5em !important;}
	.social {display: none;}
    .coinfo, .mail, .footer p, .tel {text-align: center;}
	.social_b {display: block; margin-bottom: -30px;}
	.line_icon { display:inline-block; background: url(../images/line_icon.svg) no-repeat left; text-indent:-9999px; width:42px; height:67px;}

}