/*general*/

body, html{
	margin: 0px;
	padding: 0px;
	max-width: 100%;
	overflow-x: hidden;
	font-family: Microsoft JhengHei;
}

img{
	width: 100%;
	max-width: 100%;
}

section{
	margin-bottom: 50px;
}

a:hover{
	text-decoration: none;
	color: #fff;
}
/*bootstrap*/
.d-flex{
	display: flex;
}

.float-left{
	float: left;
}

.float-right{
	float: right;
}	

.float-none{
	float: none;
}

.pr-0{
	padding-right: 0px;
}

.pl-0{
	padding-left: 0px;
}

.m-auto{
	margin: auto !important;
}

.mt-auto{
	margin-top: auto !important;
}

.mr-auto{
	margin-right: auto !important;
}

.ml-auto{
	margin-left: auto !important;
}

.mb-auto{
	margin-bottom: auto !important;
}

.border-right-white{
	border-right: 2px solid #fff;
}

@media(max-width: 768px){
	.d-sm-block{
		display: block;
	}
}

/*bubble*/
.bubble{
	position: fixed;
	background-image: url('../images/bubble.svg');
	background-size: cover;
	width: 200px;
	height: 133.333px;
	bottom: 50px;
	right: 50px;
	color: #fff;
	font-size: 18px;
	z-index: 1001;
	cursor: pointer;
}

.bubble p{
	text-align: center;
	margin-top: 40px;
}

.bubble .text-red{
	color: #FD7979;
}

.bubble-close{
	padding-right: 10px;
	padding-top: 5px;
	color: #4a4a4a;
	text-align: center;
	font-size: 12px;
}

@media(max-width: 768px){
	.bubble{
		width: 100%;
		height: auto;
		bottom: 0px;	
		right: 0px;	
		font-size: 18px;
		background-image: none;
		background-color: #FFC655;
		text-align: center;
		padding: 10px 5px 30px 5px;
		transition: 0.2s linear;
	}
	.bubble p{
		text-align: center;
		margin-top: 30px;
	}
}

/*nav*/
.navbar{
	background: linear-gradient(90deg, rgba(202,237,115,1) -50%, rgba(58,210,91,1) 100%);
	border: none;
	border-radius: 0px;
	position: fixed;
	top: 0;
	z-index: 1040;
	width: 100%;
	font-size: 18px;
	box-shadow: 0px -5px 10px #000;
}

.navbar-default .navbar-toggle{
	border-color: #fff;
}

.navbar-default .navbar-nav > li > a{
	color: #fff;
	transition: 0.2s linear;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{
	color: #3AD25B;
	background-color: #fff;
}

.navbar-default .navbar-toggle .icon-bar{
	background-color:#fff;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
	background-color: #3AD25B;
}

/*fade in*/
.hideme{
    opacity:0;
}

/*banner*/
section.banner{
	position: relative;
}

.banner{
	margin-top: 50px;
	margin-bottom: 100px;
}

.banner #banner-01 .banner-pic{
	margin-top: 200px;
}

.program-02 .banner #banner-01 .banner-pic{
	margin-top: 100px;
}

.banner h1{
	padding-left: 30px;
	font-size: 6em;
	font-weight: 700;
	line-height: 100px;
	margin-top: 50px;
	margin-bottom: 20px;
	background: -webkit-linear-gradient(30deg, rgba(202,237,115,1) -50%, rgba(58,210,91,1) 150%);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}

.banner span{
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: black;
}

.banner p{
	padding-left: 30px;
	font-size: 24px;
	line-height: 50px;
	margin-bottom: 20px;
}

.btnGreen, .btnGreen:focus{
	display: block;
	float: left; 
    clear: left; 
	background-color: #fff;
	border: 1px solid #3AD25B;
	color: #3AD25B;
	border-radius: 100px;
	padding: 15px 40px;
	margin-left: 30px;
	font-size: 24px;
	cursor: pointer;
	transition: 0.2s linear;
}

.btnGreen:hover{
	background-color: #3AD25B;
	border: 1px solid #3AD25B;
	color: #fff;
}

.scroll-mouse{
	position: absolute;
	right: 0px;
	left: 0px;
	bottom: -50px;
	margin: auto;
	border-radius: 100px;	
	height: 100px;
	width: 60px;
	background-color: #fff;
	border: 1px solid #3AD25B;
	z-index: 1001;
}

.scroll{
	position: absolute;
	border-radius: 100px;
	left: 0px;
	right: 0px;
	margin: 0px auto;
	width: 8px;
	height: 15px;
	background-color:#3AD25B;
	animation: scrollDownUp;
    animation-duration: 2s;
    animation-iteration-count:infinite;
}

.program #banner h1{
	margin-top: 20px;
}

@media(max-width: 768px){
	.banner{
		margin-bottom: 50px;
	}

	.banner #banner-01 .banner-pic{
		display: none;
	}
	.banner .banner-text{
		background-image: url('../images/banner-bg.jpg');
		background-size: cover;
	}
	.banner img{
		display: block;
		margin-bottom: 10px;
		padding-top: 10px;
		padding-left: 15px;
		padding-right: 15px;
	}
	.banner p{
		height: 100px;
		font-size: 12px;
		padding-left: 15px;
		color: #fff;
		line-height: 20px;
		margin-bottom: 50px;
	}
	.banner .btnGreen{		
		position: absolute;
		width: 40%;
		text-align: center;
		font-size: 18px;
		padding: 10px 30px;
		bottom: -25px;
		left: 0px;
		right: 0px;
		margin: 0px auto;
	}
}

/*feature*/

section.feature, section.program{
	position: relative;
	overflow: hidden;
}

.feature-pic.col-md-6{
	padding-left: 0px;
	padding-right: 0px;
}

.feature-title-right{
	background: linear-gradient(90deg, rgba(202,237,115,1) 0%, rgba(58,210,91,1) 100%);
	padding: 10px;
	padding-right: 50px;
	padding-left: 50px;
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;
	font-size: 48px;
	font-weight: 700;
	color: #fff;
	margin-left: -15px;
	margin-bottom: 10px;
}

.feature-title-left{
	background: linear-gradient(90deg, rgba(202,237,115,1) 0%, rgba(58,210,91,1) 100%);
	padding: 10px;
	padding-right: 50px;
	padding-left: 50px;
	border-top-left-radius: 100px;
	border-bottom-left-radius: 100px;
	font-size: 48px;
	font-weight: 700;
	color: #fff;
	margin-right: -15px;
	margin-bottom: 10px;
}

.feature-text h1{
	font-size: 36px;
	font-weight: 400;
	color: #FFC655;
	width: 100%;	
	margin-bottom: 30px;
}

.feature-content{
	width: 80%;
	font-size: 18px;
	letter-spacing: 3.33px;
	line-height: 45px;
}

[class*=feature-0]{
	margin-bottom: 80px;
}

@media(max-width: 768px){

	.feature{
		padding-left: 15px;
		padding-right: 15px;
	}

	.feature-title-right{
		font-size: 36px;
		position: absolute;
		top: -25px;
		padding: 5px 30px 5px 20px;
	}
	.feature-text h1{
		font-size: 24px;
	}

	.feature-content{
		width: 100%;
		font-size: 14px;
		line-height: 30px;
	}
}

/*program*/

.program h1{
	margin-top: 100px;
}

#program-item{
	width: 250px;
	margin: 0px auto;
}

@media(max-width: 768px){
	.program .banner p{
		height: 120px;		
	}
	.program h1{
		margin-top: 20px;
		padding-left: 15px;
		padding-right: 15px;
		float: none;
		text-align: left;
	}

	.program .modals .title-white{
		margin: 0px auto;
	}

	.program .modals .tab-container{
		margin: 10px 0px 20px 0px;
	}

	.program .feature-content{
		padding-left: 15px;
		padding-right: 15px;
		float: none;
	}
}

/*modals*/
section.modals{
	background: url(../images/modal-bg.jpg);
	background-size: cover;
	padding: 30px 0px;
}

.modals .title-white{
	border-radius: 100px;
	background-color: #fff;
	padding: 5px 10px;
	width: 30%;
	font-size: 36px;
	color: #3AD25B;
	text-align: center;
	margin: 0px auto 30px auto;
}

.modals .tab-container{
	margin: 0px auto;
	float: none;
}

.modals #tab{
	margin: 0px auto;
}

.modals .tab-item{
	width: 100%;
	float:left;	
	cursor: pointer;
	margin-left: 1%;
}

.modals .tab-item span{
	display: block;
	width: 100%;
	font-size: 1em;
	text-align: center;
	color: #fff;
	padding: 5px 0px;
}

.modals .tab-item.active span{
	color: #fff;
	background-color: #3AD25B;
	border-radius: 50px;

}

.modals .tab-item:hover span{
	display: block;
	width: 100%;
	font-size: 1em;
	text-align: center;
	color: #fff;
	background-color: #3AD25B;
	border-radius: 50px;
}

.modals .tab-item span:hover{
	color: #fff;
	
}

.modals .tab-content{
	margin: 30px auto 0px auto;
}

.modals .owl-dots{
	display: none;
}

.modals .col-md-5{
	margin-top: 80px;
	margin-left: 15px;
	background-color: #fff;	
	box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
}

.modals h2{
	color: #3AD25B;
	font-size: 24px;
}

.modals p{
	font-size: 18px;
	letter-spacing: 3.33px;
	line-height: 40px;
}

.modals span{
	display:block;
}

.phone-screen{
	background-color: #f8f8f8;
	position: absolute;
	width: 75%;
	height: 73.5%;
	top: 12.5%;
	left: 15%;
	overflow: hidden;
}

#phone-pic{
	position: absolute;
	top: 0px;
	transition: 0.7s ease;
}

.tab-content-text{
	display: none;
}

.tab-content-text.active{
	display: block;
}

#tab .owl-prev span{
	position: absolute;
	left: -15px;
	top: 20px;
	font-size: 48px;
}

#tab .owl-next span{
	position: absolute;
	right: -14px;
	top: 20px;
	font-size: 48px;
}

.program .modals .tab-container{
	display: flex;
	justify-content: center;
}

@media(max-width: 768px){
	.modals .title-white{
		width: calc(100% - 30px);
		font-size: 24px;
	}

	.owl-theme .owl-nav{
		height: 0px;
		margin-top: 0px;
	}

	.tab-content .col-md-5.col-xs-6{
		z-index: 1000;
		padding-right: 5px;	
		margin-top: 40px;
		margin-left: 0px;
	}

	.phone-screen{
		padding-right: 10px;
		left: 16.5%;
	}

	.modals .tab-content{
		padding-right: 30px;
	}
	.modals h2{
		font-size: 18px;
	}

	.modals p{
		font-size: 14px;
		line-height: 25px;
	}
	.owl-stage{
		display: flex;
	}
	.modals .tab-item span, .modals .tab-item.active span, .modals .tab-item:hover span{
		display: none;
	}
	.modals .tab-item{
		float: none;
		width: 70%;
		margin: 20px auto 0px auto;
	}
	.owl-item.active.center .tab-item{
		width:100%;
		margin-top: 0px;
	}
}

/*contact*/
.title-green{
	background: linear-gradient(90deg, rgba(202,237,115,1) 0%, rgba(58,210,91,1) 100%);
	border-radius: 100px;	
	padding: 5px 10px;
	width: 30%;
	font-size: 36px;
	color: #fff;
	text-align: center;
	margin: 0px auto 30px auto;
}

.contact label{
	font-size: 16px;
	float: left;
	width: 100%;
	color: #4a4a4a;
}

.contact #field{
	-webkit-appearance:none;
}

.contact .required{
	color: #FD7979;
	font-size: 12px;
}

#address select[name*='county']{
	width: 25%;
	height: 34px;
	float: left;
	margin-right: 2%;
	padding-left: 10px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

#address select[name*='district']{
	width: 30%;
	height: 34px;
	float: left;
	margin-right: 2%;
	padding-left: 10px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}


#address input{
	width: 41%;
	float: left;
	padding-left: 15px;
}

.btnSubmit{
	display: block;
	color: #3AD25B;
	border-radius: 100px;
	padding: 5px 25px;
	font-size: 18px;
	border: 1px solid #3AD25B;
	background: #fff;
	margin: 0px auto;
	transition: 0.2s linear;
}

.btnSubmit:hover{
	background-color: #3AD25B;
	color: #fff;
}

#twzipcode input{
	display: none;
}

@media(max-width: 768px){
	.title-green{
		width: calc(100% - 30px);
		font-size: 24px;
	}
	.contact #other{
		margin-top: 120px;
	}
	#address select{
		width: 47.5%;
		margin: 0px;
	}
	#address select:first-child{
		margin-right: 5%;
	}

	#address input{
		width: 100%;
		margin-top: 10px;
	}
}

/*footer*/
footer{
	background-image:url('../images/footer-bg.svg');
	background-size: cover;
	padding-top: 20px;
}

footer .sitemap{
	justify-content: center;
}

footer a{
	color: #fff;
	padding: 0px 10px;
	font-size: 16px;
	cursor: pointer;
	transition: 0.2s linear;
}

footer .sitemap a:hover{
	color: #3AD25B;
	background-color: #fff;
}

footer .logo{
	margin: 50px auto 20px auto;
	float: none;
}

footer .white-circle{
	width: 20px;
	height: 20px;
	border-radius: 100%;
	background-color: #fff;
	margin-top: 3%;
}

footer .links{
	justify-content: center;
	margin-bottom: 10px;
	position: relative;
}

footer .links a.col-md-1 img{
	border-radius: 100%;
	transition: 0.2s linear;
}

footer .links a.col-md-1 img:hover{
	margin-top: -5px;
	box-shadow: 0px 5px 10px #007700;
}

footer .copyright{
	color: #fff;
	text-align: center;
	font-size: 16px;
}

@media(max-width:768px){
	footer{
	background-image:url('../images/footer-bg-small.svg');
	background-size: cover;
	margin-bottom: 65px;
	transition: 0.2s linear;
	}
	
	footer .logo{
		margin: 20px auto;
	}
	footer .logo img{
		width: 50%;
		display: block;
		margin: 0px auto;
		padding-left: 15px;
		padding-right: 15px;
	}		
}

/*modal*/

.modal-dialog{
	margin-top: 150px;
}

@media(max-width:768px){
	.modal-dialog{
		margin-top: 150px;
	}
}

/*validate*/
.parsley-errors-list{
	list-style-type: none;
	padding-left: 0px;
	margin-top: 5px;
	font-size: 12px;
	color:#ff0000;
}

input.parsley-error::placeholder, input.parsley-error, select.parsley-error{
	background-color: #F2DEDE !important;
	border-color: #F2DEDE !important;
	color: #B94A48;
}

#twzipcode ul.parsley-errors-list{
	display: none;
}

/*Recaptcha*/
#g-recaptcha{
	display: flex;
	width: 100%;
	justify-content: center;
	margin-bottom: 10px;
}

/*floating item*/
.float-animation-slow{
	animation-name: floatItem;
	animation-duration: 40s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.float-animation-medium{
	animation-name: floatItem;
	animation-duration: 30s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.float-animation-fast{
	animation-name: floatItem;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes floatItem{
    0%{
        left: -10%;
        top: 0px;
    }
    100%{
        left: 110%;
        top: 200px;
    }
}

.float-01{
	position: absolute;
	margin-top: 100px;
	background-color: #FAE2B1;
	width: 100px;
	height: 50px;
}

.float-02{
	position: absolute;
	margin-top: 400px;
	margin-left: -200px;
	background-color: #ADF3E5;
	width: 100px;
	height: 100px;
	border-radius: 100%;
}

.float-03{
	position: absolute;
	margin-top: 700px;
	background-color: #a6b3ff;
	width: 100px;
	height: 100px;
	border-radius: 100%;

}

.float-04{
	position: absolute;
	margin-top: 1000px;
	margin-left: -100px;
	border-style: solid;
	border-width: 0 50px 86.6px 50px;
	border-color: transparent transparent #FAE2B1 transparent;
}

.float-05{
	position: absolute;
	margin-top: 1500px;
	margin-left: 100px;
	background-color: #a6b3ff;
	width: 100px;
	height: 30px;
}

.float-06{
	position: absolute;
	margin-top: 1800px;
	margin-left: 100px;
	border-style: solid;
	border-width: 0 50px 86.6px 50px;
	border-color: transparent transparent #ADF3E5 transparent;
}

/* stores */
.stores{
	background: linear-gradient(120deg, rgba(223,223,223,1) 0%, rgba(144,144,144,1) 150%);
	padding: 10px 50px;
	
}

.store-card{
	position: relative;
	padding: 15px;
}

.store-card-item{
	background-color: #fff;
	padding: 10px;
	border-radius: 8px;
	transition: all .2s ease-in-out;
}

.store-card-item:hover{
	box-shadow: 0px 0px 10px #4a4a4a;
	transform:scale(1.03);
}

.store-card-item > img{
	width: 50%;
	display: block;
	margin: 0px auto 10px auto;
}

.store-qr img{
	padding: 0px;
}

.store-card .store-text{
	display: inline-block;
	width: 100%;
	margin-top: 10px;
}

.store-card .store-text label{
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 0px;
}

.store-card .store-text span{
	display: block;
	font-size: 10px;
}

.program-02 .modals .col-md-5{
	margin-left: 0px;
}

.store-card-item .col-md-4:first-child img{
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
	margin: auto;
}

.name label{
	display: block;
	height: 50px;
}

.address span{
	height: 40px;
}

.time span{
	height: 70px;
}

.time{
	text-align: center;
}

.program-02 .tab-content .col-md-7{
	display: none;	
}

.program-02 .tab-content .col-md-7.active{
	display: block;
}

@media(max-width:768px){
	.store-card{
		padding-bottom: 7.5px;
		padding-top: 7.5px;
	}

	.store-card:nth-child(odd){		
		padding-right: 7.5px;
	}

	.store-card:nth-child(even){		
		padding-left: 7.5px;
	}

	.store-qr img{
		display: block;
		margin: auto;
	}

	.store-text{
		text-align: center;
	}	
	.time span{
		height: 60px;
	}	
	.store-card-item .col-md-4 img{
		display: block;
		position: relative;
		left: inherit;
		top: inherit;
		bottom: inherit;
		margin: inherit;
	}

	.program-02 .modals .col-md-5{
		margin-top: 20px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.modals .tab-content{
		padding-right: 30px;
		padding-left: 30px;
	}
	.program-02 .modals .tab-content{
		margin: 0px;
	}
}

/* store carousel and tab */

#stores ul.nav{
	padding-left: 65px;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
	background-color: #3AD25B;
	color: #fff !important;
	border: none;
	border-radius: 4px;
	margin-bottom: 15px;	
}

#stores .nav-tabs>li>a{
	color: #3AD25B;
	transition: 0.2s linear;
}

#stores .nav>li>a:focus, #stores .nav>li>a:hover{
	background-color: #3AD25B;
	color: #fff;
	border: none;
	border-radius: 4px;
}

.carousel-control.left, .carousel-control.right{
	background-image: none;
}

.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next{
	right: 10%;
}

.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev{
	left: 10%;
}