@charset "utf-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-family: "微軟正黑體", "Microsoft JhengHei", Verdana, Arial, 新細明體;
}
body {
	font-family: "微軟正黑體", "Microsoft JhengHei", Verdana, Arial, 新細明體;
	margin: 0;
	width: 100%;
	font-size: small;
	padding: 0px;
	float: left;
	background: #33CCCC; /* Fallback */
  	animation: bgcolor 9s infinite linear;
}
body::before{
    content: '';
    display: block;
    width: auto;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	background-repeat: no-repeat;
	background-image: url(../img/animate-bg2.gif);
	background-position: center 40px;
	background-size: 100% auto;
	z-index: -9;
    opacity: 0.6;
}
@keyframes bgcolor {
	0%   { background: #37d5e0; }
	20%  { background: #97e3fa; }
	40%  { background: #8fe7d1; }
	60%  { background: #8fe7e3; }
	80%  { background: #8fdde7; }
	100% { background: #33CCCC; }
}
ul {
	list-style: none;
}
a {
	outline: none;
    /* hlbr:expression(this.onFocus=this.blur()); */
	text-decoration: none;
	cursor: pointer;
	color: #000000;
	-webkit-transition: all 0.2s ease-out 0s;
	-moz-transition: all 0.2s ease-out 0s;
	-ms-transition: all 0.2s ease-out 0s;
	-o-transition: all 0.2s ease-out 0s;
	transition: all 0.2s ease-out 0s;
}
a,
a:visited,
a:focus,
a:hover,
a.active {
  outline: 0; }
img {
	outline: none;
}
h1, h2, h3, h4, h5, h6, p {
	margin: 0 0px;
	padding: 0px;
	font-weight: normal;
}
* {
	outline: none !important;
}
footer{
	width: 100%;
	float: left;
}
.footer-alt{
	padding: 30px 10%;
	color: #e0e0e0;
}
.footer-logo{
	max-width: 250px;
	margin-right: 15px;
}
.footerTXT{
	text-align: left;
	float: left;
	margin-top: 6px;
}
.footer .footerTXT h4 {
    font-size: .85em;
}
.footerTXT span{
	margin: 0px 8px;
}

p {
font-size: 16px;
font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif;
line-height: 28px;
padding-top: 10px; }

p.large {
font-size: 18px; }
p.lg_video {
font-size: 24px;
color:#000; 
text-shadow: -1px 0 1px #65b73d, 0 2px 1px #65b73d, 2px 0 1px #65b73d, 0 -1px 1px #65b73d; }
b, strong {
font-weight: bold; }
ol, ul, dl {
font-family: Arial, Helvetica,"微軟正黑體","Microsoft JhengHei", simhei, sans-serif; }

div > img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%; }
img {
margin: 0px;
padding: 0px;
border: 0px; }
button {
    margin: 0px;
    padding: 0px;
    border: 0px; }
button:hover {
outline: none; /* for Firefox */
}
hr{
	border-top: 1px solid #0906a30c!important;
}
.ml--2{margin-left: -21px;}
/*-----------------------------
/ navbar
/------------------------------*/

header .navbar-brand {
	background-image: url(../img/logo.png);
	background-color: transparent;
	text-indent: -9999px;
	height: 100px;
	width: 100px;
	float: left;
	background-repeat: no-repeat;
	background-position: center center;
	margin: 2px 0px 0px 20px;
    position: absolute;
	z-index: 1032;
	position: fixed;
}
.navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
	background-color: #fee71ba1;
}
.navbar-default {
	background-color: #FEE91B;
	min-height: 50px;
	box-shadow: 0px 10px 23px rgba(0,0,0,.1) !important
}
.navbar {
	border-bottom: 1px solid transparent;
}
.navbar-toggle {
	position: relative;
	float: right;
	padding: 5px 10px;
	margin-top: 8px;
	margin-right: 10px;
	margin-bottom: 8px;
	background-color: transparent;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}
.navbar-header .navbar-toggle {
	border-color: transparent;
}
.navbar-header .navbar-toggle:hover, .navbar-header .navbar-toggle:focus {
	background-color: transparent;
}
.banner {
	width: 100%;
	height: calc(100% - 1.5rem);
    background-image: url(../img/animate-bg.svg);
    margin-top: 30px;
	display: block;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.wrapper {
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.home_top{
	height: 300px;
    padding-top: 45px;
}
.title{
	display: block;
	width: 95%;
	height: auto;
	margin: 0px auto;
}
.container .title h1 {
    color: #333;
    text-align: center;
    font-size: 16px;
    line-height: 30px;
    margin-top: 20px;
    font-weight: bold;
}
.container .title-img h1, .container .title-baby span{
	position: relative;
}
.container .title-img p {
    text-align: center;
    vertical-align: bottom;
	position: relative;
}
.title-img h1::after{
	background-image: url(../img/baby.gif);
    width: calc(440px - 15%);
    height: calc(531px - 15%);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    content: "";
    top: calc(0% - 190px);
    right: calc(8% - 80px);
    margin: 0px 0px 0px 0px;
}
.title-img img{
	width: 100%;
	margin-top: -280px;
}
.title .img-h1{
	margin-left: auto;
  	margin-right: auto;
	max-width: 75%;
	height: calc(100% - 80%);
}
h3 .img-h3{
	margin-left: auto;
  	margin-right: auto;
	margin-top: -50px;
	max-width: calc(480px - 1%);
	height: calc(100% - 100px);
}
h3 .img-stage{
	margin-left: auto;
  	margin-right: auto;
	max-width: 142px;
	max-height: 39px;
}
.title-img-m h1 img{
	width: 100%;
	height: 100%;
}
.accordion h3{
	font-size: 1.5rem;
}
.accordion h3 .img-h3{
	min-width: 90%;
	height: calc(100% - 50px);
	margin-top: 0px;
}
.title .img-h1-m{
	margin-left: auto;
  	margin-right: auto;
	max-width: 50%;
	height: calc(100% - 50%);
}
.img-fans{
	max-width: 25%;
	height: calc(100% - 80%);
}

.img-responsive{
	max-width: 100%;
    height: auto;
}
.img-s{
	max-width: 38%;
    height: auto;
}
.img-sm{
	max-width: 65%;
    height: auto;
}
.img-gift{
	padding: .25rem;
    background-color: transparent;
    border: 2px solid #0390d6;
    max-width: 100%;
    height: auto;
	border-radius: 14px;
	position: relative;
}
.img-task{
	width: 90px;
	height: 32px;
	margin: 0 2px;
}
.completed{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.img-mobox{
	padding: .25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    width: 220px;
    height: 138px;
	text-align: center;
	display: block;
    line-height: 115px;
	background-image: url(../img/icon-gift.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
}
.img-mobox img{
	width: 100%;
    height: auto;
}
.text-fans{
	color: #0b088a;
}
.text-pink{
	color: #e1306c;
}
.underline{
	text-decoration-line: underline;
}
.bg-fans{
	background-color: #0b088a;
}
.bg-stageblue{
	background-color: #1542c0;
}
.bg-stagelight{
	background-color: #0180ce;
}
.bg-stagegreen{
	background-color: #549b03;
}
.bg-stageyellow{
	background-color: #eca202;
}
.bg-sky{
	background-color: #4ac4f5;
}
.bg-youtube{
	background-color: #d10404;
}
.bg-fb{
	background-color:  #0152b6;
}
.bg-grey{
	background-color: #adadad;
}
.bg-jelly-blue{
	background-color: #1199dd;
}
.bg-jelly-deepblue{
	background-color: #2770f7;
}
.bg-jelly-yellow{
	background-color: #ffc845;
}
.bg-jelly-green, .jelly-success{
	background-color: #62af09e0;
}
.bg-ig-pink{
	background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
}
.bg-jelly-red{
	background-color: #fc0606d7;
}
#nav-home, #nav-11m, #nav-12m, #nav-branch{
	padding: 30px 10px 50px 10px;
}
#nav-home button, #nav-11m button, #nav-12m button, #nav-branch button, .stage .card-body button{
	border-radius: 14px;
}
.stage{	
	background-size: 100% auto;
	background-color: transparent;
	width: 100%;
}
.stage h2{
	font-size: 1.75rem;
	font-weight: 800;
	color: #ffffff;
}
#stage .stage-post .navbar, #stage .navbar, .stage .card{
	border-bottom: 1px solid transparent;
	border-top: 1px solid transparent;
}
.user-nav{
	background-color: transparent;	
}
#stage .navbar li:nth-child(4) a::after{
	background-image: url(../img/crown-01.png);
    width: 100px;
    height: 100px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    content: '\A';
    top: 0;
    right: 0;
    margin: -61px 0px 0px 0px;
	-webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    -ms-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}
#stage .navbar li:nth-child(4) a:hover::after, #stage .nav .nav-item:nth-child(4) a:hover::after, #stage .navbar li:nth-child(4) a:focus::after, #stage .nav .nav-item:nth-child(4) a:focus::after,#stage .navbar li:nth-child(4) a:visited::after, #stage .nav .nav-item:nth-child(4) a:visited:after{
	background-image: url(../img/crown-02.png);
    width: 130px;
    height: 130px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    content: '\A';
    top: 0;
    right: 0;
    margin: -92px -10px 0px 0px;
    transition-duration: 100ms;
    transition-timing-function: linear;
    transition-delay: 2ms;
}
#stage .cta a {
    display: flex;
    padding: 8px 5px 8px 15px;
    text-decoration: none;
    color: white;
    transition: 1s;
    box-shadow: 6px 6px 0 #0b088a;
    transform: skewX(-15deg);
}
.stage .card-header button {
	background-color: transparent;
    padding: 0px 4px;
    text-decoration: none!important;
    color: #0b088a;
    transition: 1s;
}
.stage .card-header .accordion-button span::after{
	content: "";
  	background-image: url(../img/arrow.png);
	flex-shrink: 0;
	margin: 8px 8px 0px 0px;
	width: 1.25rem;
	height: .7rem;
	margin-left: auto;
	background-size: 1.25rem;
    transition: transform .2s ease-in-out;
  	float: right;
	transform:rotate(-180deg);
	opacity: .6;
}
.stage .card-header .accordion-button:not(.collapsed) span::after{
	/* transition: transform .2s ease-in-out; */
  	float: right;
	transform:rotate(0deg);
	opacity: 1;
}
.stage .cardcta {
    display: flex;
    padding: 0px 15px 0px 15px;
	background-color: transparent;
    text-decoration: none;
    transition: 1s;
	border-right: 0px solid transparent;
    border-left: 0px solid transparent;
}
.cardcta .card-header{
	padding: 0rem 0rem;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: 0px solid transparent;
}
.accordion>.card>.card-header button{
	background-color: #1542c0;
    border-bottom: 0px solid transparent;
	transform: skewX(-5deg);
	box-shadow: 6px 6px 0 #0b088a;
	padding: 8px 5px 8px 15px;
	text-decoration: none;
}
.accordion>.card:last-child>.card-header button{
	background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
    border-bottom: 0px solid transparent;
	transform: skewX(-5deg);
	box-shadow: 6px 6px 0 #0b088a;
	padding: 8px 5px 8px 15px;
	text-decoration: none;
}
.cta:focus, .cardcta .card-header:focus{
	outline: none; 
 }
.cardcta .card-header button:hover, #stage .cta a:hover, #stage .cta a:focus, .cardcta .card-header button:focus,#stage .cta a:visited, .cardcta .card-header:visited{
	padding: 8px 5px 8px 15px;
	transition: 0.5s!important;
	box-shadow: 10px 10px 0 #FBC638!important;
}
.accordion>.cardcta:last-child>.card-header button:hover,.accordion>.cardcta:last-child>.card-header button:focus,.accordion>.cardcta:last-child>.card-header button:visited{
	background-color: #fd51a1;
	background:linear-gradient(45deg, #fd51a1, #fd51a1, #fd51a1, #fd51a1, #fd51a1, #fd51a1);
}
.cta span {
	width: 20px;
	margin-left: 5px;
	bottom: 2px;
	position: relative;
	transition: 0.5s;
	margin-right: 0px;
	transform: skewX(15deg);
}
.cta:hover span, .cta:focus span, .cta:visited span {
	transition: 0.5s;
	margin-right: 10px;
}
.stage ol li{
	font-size: .95rem;
	line-height: 1.85;
	font-weight: 700;
}
/**************SVG****************/
path.one {
    transition: 0.4s;
    transform: translateX(-60%);
}
path.two {
    transition: 0.5s;
    transform: translateX(-30%);
}
.cta a:hover path.one, .cta a:focus path.one, .cta a:visited path.one {
    transform: translateX(0%);
    animation: color_anim 1s infinite 0.6s;
}
.cta a:hover path.two, .cta a:focus path.two, .cta a:visited path.two {
    transform: translateX(0%);
    animation: color_anim 1s infinite 0.4s;
}
/* SVG animations */

@keyframes color_anim {
    0% {
        fill: white;
    }
    50% {
        fill: #FBC638;
    }
    100% {
        fill: white;
    }
}
@media (max-width: 576px){
	.navbar-default {
		min-height: 32px;}
	.home_top {
		height: calc(100% - 10rem);
		padding-top: 10px;
	}
	.title .img-h1{
		max-width: 95%;
		height: calc(100% - 0px);
	}
	.home_top .title-img {
        margin-top: -25px;
    }
	.title-img h1::after{
		width: calc(55% - 120px);
        height: calc(55% + 200px);
        bottom: 0;
        right: 0;
    }
	.title-img-m h1::after{
		width: 135px!important;
		height: calc(70px - 5%);
		top: calc(-185px - 5%);
		right: calc(5% - 50px);
	}
	.stage h2, .stage .card-header h2 {
		font-size: 1.5rem;
		text-align: center;}
	#signin .signup{top:30px;right:60px;}
	.acmethod{top: 41px!important;right:100px;}
	#stage .post-bg .h3 {
		font-size: 1.6rem;
	}
	.xs-hidden{display:none;}
	.btn{ width: 100%;}
	.svg-sm {
		width: 32px;
		margin: 0px 0px 6px 0px;
	}
	.inviteinput .btn{
		width: 20%;
		top: calc(45% - 1.65em)!important;
		height: 35px;
    	font-size: .75rem;
	}
}
#stage .stage-post-1{
	background-color: #ffffff;
	border: 5px solid #0390d6;
	border-radius: 45px;
}
#stage .stage-post-2{
	background-color: #ffffff;
	border: 5px solid #58b601;
	border-radius: 45px;
}
#stage .stage-post-3{
	background-color: #ffffff;
	border: 5px solid #0347c5;
	border-radius: 45px;
}
#stage .stage-post-4{
	background-color: #ffffff;
	border: 5px solid #AA771C;
	border-radius: 45px;
}
#stage .post-bg, .card-body{
	padding: 35px 20px 25px 20px;
	background-color: #ffffff;
    border-radius: 0px 0px 30px 30px;
	margin: 0px 8px;
	font-size: 1.25rem;
	color: #0b088a;
}
.cardcta .card-1{
	border: 5px solid #0390d6;
	border-top: 0px solid transparent;
}
.cardcta .card-2{
	border: 5px solid #58b601;
	border-top: 0px solid transparent;
}
.cardcta .card-3{
	border: 5px solid #0347c5;
	border-top: 0px solid transparent;
}
.cardcta .card-4{
	border: 5px solid #AA771C;
	border-top: 0px solid transparent;
}
.post-bg .h3{
	font-size: 2.5rem;
}
.post-bg .h4{
	font-size: 1.5rem;
	line-height: 1.5;
}
.b-line{
	border-bottom: 2px dashed #0b088a!important;
	padding: 1rem 0;
    border-color: #0b088a;
	vertical-align:bottom
}
.svg-num{
	width:50px;
	margin:0 2px;
}
.svg-sm{
	width: 30px;
	margin: 0px 2px 5px 2px;
}
.svg-s{
	width: 20px;
	margin: 0px 3px 2px 0px;
}
.btn{
	color:#ffffff;
	min-width: 25%;
	margin: 5px 2px;
}
.report{
	color:#ffffff;
	font-size: 1.5rem;
	font-weight: 700;
	/* text-shadow: 2px 2px 10px#0000009a, -2px -2px 10px#0000009a; */
	min-width: 100%;
	min-height: 130px;
	vertical-align: middle;
	border-radius: 36px;
}
.btn-invite{
	font-size: 1.8rem;
	font-weight: 800;
	min-width: 100%;
	height: 80px;
	vertical-align: middle;
	padding: .5rem 1rem;
    line-height: 2;
	margin-top: 10%;
	text-shadow: 2px 2px 10px#0122919a, -2px -2px 15px#0122919a;
}
.btn-log{
	color: #0b088a!important;
	font-size: 1.1rem;
	font-weight: 800;
	min-width: 100%;
	height: 50px;
	vertical-align: middle;
    line-height: 2;
	border-radius: 22px;
	background-color: #ffffff00;
}
.btn-register{
	color: #0b088a!important;
	font-size: 1.1rem;
	font-weight: 800;
	min-width: 100%;
	height: 80px;
	vertical-align: middle;
	padding: .5rem 1rem;
    line-height: 2;
	border-radius: 22px;
	background-color: #ffffff00;
}
.btn-return{
	font-size: 1.8rem;
	font-weight: 800;
	min-width: 100%;
	height: 80px;
	vertical-align: middle;
	padding: .5rem 1rem;
    line-height: 2;
	margin-top: 10%;
	border-radius: 22px;
	background-color: #e1306c;
	text-shadow: 2px 2px 10px#bd03859a, -2px -2px 15px#91010d9a;
}
.btn-return:hover, .btn-return:focus, .btn-return:visited{
	font-size: 1.8rem;
	font-weight: 800;
	min-width: 100%;
	height: 80px;
	vertical-align: middle;
	padding: .5rem 1rem;
    line-height: 2;
	margin-top: 10%;
	border-radius: 22px;
	color:#ffffff;
	background-color: #fd65ac;
	text-shadow: 2px 2px 10px#1bfff49a, -2px -2px 15px#cff5479a;
}
.btn-register:hover, .btn-register:focus, .btn-register:visited{
	color: #e1306c;}
.btn-upload{
	color: #ffffff;
	background-color:  #0390d6;
	border-color:  #0390d6;
	border-radius: 8px;
}
.btn-upload:hover{
	color: #ffffff;
	background-color: #0e65cf;
	border-color: #0e65cf;
}
a.bg-youtube:focus, a.bg-youtube:hover, button.bg-youtube:focus, button.bg-youtube:hover{
	background-color: #FF0000;color:#ffffff;
}
a.bg-fb:focus, a.bg-fb:hover, button.bg-fb:focus, button.bg-fb:hover{
	background-color: #0165E1;color:#ffffff;
}
a.bg-jelly-blue:hover, a.bg-jelly-blue:focus, button.bg-jelly-blue:focus, button.bg-jelly-blue:hover{
	color:#ffffff;
	text-shadow: 2px 2px 10px#64f9e09a, -2px -2px 10px#64f9e09d, -2px 2px 10px#64f9e0, 2px -2px 10px#64f9e092;
	box-shadow: 2px 2px 20px#11d0dd46, -2px -2px 20px#6beff846;
	background-color: #51b4ee;
	animation: jelly 0.5s;
}
a.bg-jelly-deepblue:hover, a.bg-jelly-deepblue:focus, button.bg-jelly-deepblue:focus, button.bg-jelly-deepblue:hover{
	color:#ffffff;
	text-shadow: 2px 2px 10px#64f9e09a, -2px -2px 10px#64f9e09d, -2px 2px 10px#64f9e0, 2px -2px 10px#64f9e092;
	box-shadow: 2px 2px 20px#11d0dd46, -2px -2px 20px#6beff846;
	background-color: #0252e6;
	animation: jelly 0.5s;
}
a.bg-jelly-green:hover, a.bg-jelly-green:focus, button.bg-jelly-green:focus, button.bg-jelly-green:hover, a.jelly-success:hover, a.jelly-success:focus, button.jelly-success:hover, button.jelly-success:focus{
	color:#ffffff;
	text-shadow: 2px 2px 10px#64f9709a, -2px -2px 10px#64f9e09d, -2px 2px 10px#64f9a798, 2px -2px 10px#64f99192;
	box-shadow: 2px 2px 20px#11dd4e46, -2px -2px 20px#11dd4e46;
	background-color: #51c915ee;
	animation: jelly 0.5s;
}
a.bg-ig-pink:hover, a.bg-ig-pink:focus, button.bg-ig-pink:focus, button.bg-ig-pink:hover{
	color:#ffffff;
	background-color: #fd51a1;
	background:linear-gradient(45deg, #fd51a1, #fd51a1, #fd51a1, #fd51a1, #fd51a1, #fd51a1);
}
a.bg-jelly-yellow:hover, a.bg-jelly-yellow:focus, button.bg-jelly-yellow:focus, button.bg-jelly-yellow:hover{
	color:#ffffff;
	background-color: #eed91d;
	text-shadow: 2px 2px 10px#fca9109a, -2px -2px 10px#fc9610b6;
	box-shadow: 2px 2px 20px#ddbe1146, -2px -2px 20px#fcc661a1;
	animation: jelly 0.5s;
}
a.bg-jelly-red:hover, a.bg-jelly-red:focus, button.bg-jelly-red:focus, button.bg-jelly-red:hover{
	color:#ffffff;
	text-shadow: 2px 2px 10px#ff00889a, -2px -2px 10px#ff00889a, -2px 2px 10px#ff00889a, 2px -2px 10px#ff00889a;
	box-shadow: 2px 2px 20px#ff00889a, -2px -2px 20px#ff00889a;
	background-color: #ff539bee;
	animation: jelly 0.5s;
}
@keyframes jelly {

	0%
	100% {
		transform: scale( 1, 1);
	}

	33% {
		transform: scale( 0.9, 1.1);
	}

	66% {
		transform: scale( 1.1, 0.9);
	}
}
@keyframes jelly {

	0%
	100% {
		transform: scale( 1, 1);
	}

	25%
	75% {
		transform: scale( 0.9, 1.1);
	}

	50% {
		transform: scale( 1.1, 0.9);
	}
}
/*---------- signin ----------*/
#signin{padding: 5px 10px;margin: 10px 10px;}
.login{
	position: relative;
    width: 93px;
    height: 40px;
	/* padding-right: .75rem!important;
	padding-left: 35px !important; */
	padding: 8px 20px;
    background-color: #3da0da;
    color: #ffffff;
	text-align: center;
	font-size: 16px;
    border-radius: 25px;
    line-height: 1.5;
    z-index: 4;
	/* top: 40%;
    margin-top: -10px; */
}
.signup {
    position: relative;
    width: 93px;
    height: 40px;
	background-color: #1d19ff;
	color: #ffffff;
	text-align: center;
    margin-top: -10px;
    border-radius: 25px;
    font-size: 16px;
    line-height: 1.5;
    z-index: 5;
	top: 40%;
    margin-right: -30px;
}
.acmethod {
    position: relative;
    width: 93px;
    height: 40px;
	background-color: #1d19ff;
	color: #ffffff;
	text-align: center;
    margin-top: -15px;
    border-radius: 25px;
    font-size: 16px;
    line-height: 1.5;
    z-index: 5;
	top: 40%;
    margin-right: -10px;
}
.user{
	content: "";
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 18px;
	top: 40%;
	margin-top: -10px;
	background-color: #f8faf900;
}
.user::before{
	background-image: url(../img/icon-user.png);
	background-size: cover;
	width: 100%;
}
#signin .navbar-nav li a:hover,#signin .navbar-nav li button:hover, #signin .nav-link:focus, #signin .nav-link:active, #signin .nav-link:focus, #signin .nav-link:hover
#signup .navbar-nav li a:hover,#signup .navbar-nav li button:hover, #signup .nav-link:focus, #signup .nav-link:active, #signup .nav-link:focus, #signup .nav-link:hover{
	background-color: #201daf;
	background-image: none;
	height: 40px;
	color: #ffffff;
}
#signin.user:hover, #signin.user:focus, #signin .user:visited{height:60px!important;background-color: #ffffff!important;}
.signup:hover, .signup:focus, .signup:visited{color:#ffffff;}
.stage nav ul li a:hover, .stage nav ul li a:focus{background-color: #201daf;color:#ffffff;}
/*---------- input ----------*/
input.text {
	border: solid 1px #CCC;
	font-size: 15px;
	width: 90%;
	padding: 6px 2px 6px 4px;
	color: #333;
	line-height: 15px;
}
.inviteStyle {
	outline: none;
	border-radius: 18px;
	border: 1px solid #ccc;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 1.25rem;
}
.inviteinput {
	position: relative; 
	display: inline-block;
	width: 100%;
}
.inviteinput .btn { 
	position: absolute;
	right: 3px;
	top: calc(50% - 1.5em);
	background-color: #ebb248;
}
.inputPaddingRight {
	padding-right: 66px;
}
textarea{
	text-align: center;
	font-size: 1rem;
}
/* ----------Modal---------- */
.modal-body .bg-box{
	background-color: #7acffa;
    border: 2px solid #7acffa;
    border-radius: 15px;
	padding: 8px 10px 10px 10px;
}
.modal-body .bg-boxline{
	background-color: #ffffff;
    border: 2px solid #49bdf7;
    border-radius: 15px;
	padding: 20px 10px 20px 10px;
}
.bg-box .h6{
	color: #0b088a;
	font-weight: 700;
}
.modal-body a span{
	color: #02589e;
	font-size: .85rem;
}
.btn-upload a span{
	color: #ffffff;
	font-size: .85rem;
}
.modal-body a:hover span, .modal-body a:focus span, .bg-box a:hover{
	color:#000000;
	text-decoration: none;
}
.modal-body ol li a{color: #ff539b}
.modal-body ol li a:hover{
	color: #88702d;
    text-decoration: none;
}
.list-group{
	margin-left: 15px;
}
.list-group li{
	padding: .5rem .1rem;
	line-height: 1.6;
}
/*---------- bubble ----------*/
.bubble{
	position: relative;
	padding: 10px;
	margin: 1em 0em 1.5em 55%;
	width: 120px;
	font-size: .85rem;
	line-height: 1.2;
	text-align: center;
	color: #fff;
	background:#0b088a;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}
.bubble::before{
	content: "";
    position: absolute;
    bottom: -16px;
    right: 30px;
    border-width: 0 0 20px 50px;
    border-style: solid;
    border-color: transparent #0b088a;
    display: block;
    width: 0;
}
.bubble::after {
	content: "";
    position: absolute;
    bottom: -16px;
    right: 60px;
    border-width: 0 0 16px 20px;
    border-style: solid;
    border-color: transparent #ffffff;
    display: block;
    width: 0;
}
#nav-branch .progress{
	height: 1.5rem;
	border-radius: 1rem;
}
#nav-branch .progress .progress-bar{
	height: 1.5rem;
}

@media (max-width: 768px){
	body::before{
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-image: url(../img/animate-bg2-m.gif);
		background-repeat: repeat-y;
		background-size: 100% auto;
		z-index: -9;
		opacity: 0.6;
	}
	.title .img-h1{
		width: calc(95% - 10px);
		height: calc(95% - 10px);
	}
	.home_top .title-img {
		margin-top: -15px;
	}
	.title-img-m h1::after{
		width: calc(185px - 5%);
		height: calc(190px - 5%);
		top: calc(-185px - 5%);
		right: calc(5% - 50px);
		background-image: url(../img/baby.gif);
		background-size: 100%;
		background-repeat: no-repeat;
		position: absolute;
		content: "";
		margin: 0px 0px 0px 0px;
	}
	.stage .nav-item h2{font-size: 1rem;}
	#stage .nav-pills li{ width:90%;text-align: center;}
	h3 .img-h3{max-width:400px;height:58px;}
	#stage .nav-pills li {
		margin-bottom: 28px;
	}
	#stage .post-bg{padding: 0px 0px;margin: 2px 10px;}
	.bubble::after {
		content: "";
		position: absolute;
		bottom: -16px;
		right: 60px;
		border-width: 0 0 16px 20px;
		border-style: solid;
		border-color: transparent #ffffff;
		display: block;
		width: 0;
	}
}
/**---------------------------------------------------------*/
@media (min-width: 576px) {
	.home_top {
		height: 300px;
		padding-top: 35px;
	}
	.title-img h1::after{
		width: calc(220px - 15%);
        height: calc(331px - 15%);
        top: calc(5% - 175px);
        right: calc(28% - 80px);
	}
	/* .title-img p::after{
		width: calc(180px - 5%);
		height: calc(180px - 5%);
		top: calc(-200px - 5%);
		right: calc(20% - 50px);
	} */
	.stage h2{font-size: 1rem;}
}
@media (min-width: 768px) {
	.home_top {
		height: 380px;
		padding-top: 35px;
	}
	.title-img img {
		margin-top: -310px;
	}
	.title-img h1::after{
		width: calc(280px - 15%);
		height: calc(331px - 15%);
		top: calc(30% - 220px);
		right: calc(20% - 80px);
	}
	/* .title-img p::after{
		width: calc(200px - 5%);
		height: calc(200px - 5%);
		top: calc(-250px - 5%);
		right: calc(20% - 50px);
	} */
}
@media (min-width: 992px){
	.home_top {
		height: 420px;
		padding-top: 40px;
	}
	.home_top .title-img {
		margin-top: -195px;
	}
	.title-img img {
		margin-top: -220px;
	}
	.title-img h1::after{
		width: calc(340px - 15%);
		height: calc(431px - 15%);
		top: calc(17% - 150px);
		right: calc(25% - 80px);
	}
	.stage h2 {
		font-size: 1.5rem;}
}
@media (min-width: 1200px) {
	.home_top {
		height: 490px;
		padding-top: 35px;
	}
	.home_top .title-img {
		margin-top: -260px;
	}
	.title-img h1::after{
		width: calc(440px - 15%);
		height: calc(531px - 15%);
		top: calc(9% - 150px);
        right: 14%;
		margin: 0px 0px 0px 0px;
	}
}