body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: inherit;
    line-height: 32px;
    font-family: 微軟正黑體, 微软雅黑,'Glyphicons Halflings';
    color: #FFF;
    background-color: #0B101B!important;
}

strong { font-weight: 500; }






	    color: #78CAD2;
	text-decoration: none;
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}

h1, h2 {
	margin-top: 10px;
	font-size: 30px;
    color: #666666;
    line-height: 50px;
    text-transform: uppercase;
	    font-weight: 700 !important;
}
h1{
	font-size: 48px;
	font-weight: Bold;
	margin-top: 56px;
}
h3 {
	font-size: 16px;
	font-weight: 500;
	color: #FFF;
	line-height: 30px;
	text-transform: uppercase;
	/* font-weight: 700 !important; */
}



.line-bottom{border-bottom: 4px #E1BE7E solid;}



.position-absolute{
	position:absolute;
}

.position-relative{
	position:relative;
}

.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
    background-color: initial;
    opacity: 0.6;
}

img{max-width: 100%;}

/* 特色 */



#WF .img-box{
	justify-content: flex-end;
	 display: flex;
}
#WF  .img-box.i-r{
justify-content: initial;}

#WF .img-box>div {
    height: 175px;
    width: 175px;
    border-radius: 100%;
    border: 5px #78CAD2 solid;
    display: flex;
    align-items: center;
    justify-content: center;


}




#WF  .text {
    background: url(../img/dialogue.svg);
	background-repeat:no-repeat;
	background-size:contain;
    height: 169px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
}


#WF  .text.t-r{
    background: url(../img/dialogue2.svg);
		background-repeat:no-repeat;
	background-size:contain;
}
	
.align-items-center {
align-items: center !important;
}
.justify-content{
    justify-content: center !important;
}

.mr-50{
    margin-right: 50px;	
}

.d-flex{display: flex;}

.justify-content-center{
 justify-content: center; 
	
}

.align-items-center{
align-items: center;}




/* YaPay優勢 */



article{
	margin: 56px 0;
}
/* 標題 */
.title-circle{
	display: initial;
	color: #FFF;
}
.title-circle .position-absolute{
    width: 15px;
    height: 15px;
    /* border: 2px #78CAD2 solid; */
    border-radius: 100%;
    right: -7px;
    bottom: 5px;
}


/* 首頁 */
header h1,header p{
color:#FFF!important;
}

header.top-content {
       margin-top: 0;
       height: 780px;
       margin-bottom: 64px;
}
header.top-content .bg-4{
	    right: 0;
	    bottom: 78px;
	    z-index:-4;
	    width: 100dvw;
	    height: 100dvh;
	    object-fit: none;
}

@keyframes scroll-1{
	0%{
        transform:translateY(-100%);
		 opacity:0;
		}
	100%{
     transform:translateY(0%);
		 opacity:1;	 
	}	
}
@keyframes scroll-2{
	0%{ 
	    transform:translateY(-100%);
		 opacity:0;
		}
	100%{
   transform:translateY(0%);
		 opacity:1;	 
	}	
}
@keyframes scroll-3{
	0%{
	    transform:translateY(-100%);
		 opacity:0;
		}
	100%{
   transform:translateY(0%);
		 opacity:1;	 
	}	
	} 
	
	
header .img{transform: translateX(-4%) translateY(-6%);}

header.top-content .bg-1{animation:scroll-1 1.1s both;animation-timing-function:ease-out;animation-delay:0.3s;width: fit-content;}

header.top-content .bg-2{
	 animation:scroll-2 1.5s both;	
	 animation-delay:1.3s;
	 animation-timing-function:ease-out;
	     width: fit-content;
		padding-bottom:8px
}
header.top-content .bg-3{
	animation:scroll-3 1.6s both;	
	animation-delay:2.8s;
	animation-timing-function:ease-out;
	    width: fit-content;
}

header .btn{
	    color: #fff;
	    width: 128px;
	    margin: 24px 0;
	    font-size: 16px;
	    font-weight: Bold;
	    margin-right: 16px;
}

/* 解決方案 */
 #answer  div.text-center{
	 height: 87px;
	}
 
 #answer  div.text-center img{width: 64px;}
 
 #answer  .wow.fadeInUp>div{
    background: linear-gradient(180deg, #181E29, #500E15);
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0px 4px 5px 0px #333;
    padding-top:50px;
    height: 244px;
 }
 
 
 
 #answer div.d-flex>div:nth-last-of-type(1){
	  margin-right: 0; 
  }
  
 #answer div.d-flex{
	 margin:0 15px;
 }  



 /* 關於 */

 
#about .bg{
	    z-index: 1;
    right: 0;
}
 

 
/***** Loader *****/

.loader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	overflow: hidden !important;
	z-index: 99999;
}

.loader-img {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -30px 0 0 -30px;
	width: 60px;
	height: 60px;
	background: url(../img/loading.gif) center center no-repeat;
}


/***** General style, all sections *****/




.section-container-image-bg, 
.section-container-image-bg h2, 
.section-container-image-bg h3 {
	color: #fff;
}

.section-container-image-bg .divider-1 span {
	border-color: #fff;
}

.section-description {
	margin-top: 96px;
	/* padding-bottom: 10px; */
}

.section-description p {
    margin-top: 56px;
}
.section-container-image-bg .section-description p {
	opacity: 0.8;
}

.w-10{
	    width: 10em;
}

.btn-link-1 {
    display: inline-block;
    -moz-border-radius: 4px;
    border-radius: 24px;
    position: fixed;
    right: 16px;
    bottom: 20%;
    z-index:5;
    background: #f1b358;
}

.btn-link-1 a{
	content: url(../img/btn_top.svg);
	display: block;
	padding: 12px 12px;
}

.btn-link-1:hover, .btn-link-1:focus, .btn-link-1:active { outline: 0;  color: #fff; }

.btn-link-2 {
	display: inline-block;
	height: 50px;
	margin: 0 5px;
	padding: 16px 20px 0 20px;
	background: #444;
	background: rgba(0, 0, 0, 0.3);
	font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    color: #fff;
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
}
.btn-link-2:hover, .btn-link-2:focus, 
.btn-link-2:active, .btn-link-2:active:focus { outline: 0; opacity: 0.6; background: rgba(0, 0, 0, 0.3); color: #fff; }




/***** Top menu *****/
nav.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{
	    color: #E1BE7E;
}



nav.navbar{
	background-color: hsl(0deg 0% 0% / 78%) !important;
	position: fixed;
	top: 0;
	width: 100%;
	z-index:100;
}

nav.navbar-light .navbar-nav .nav-link{
    color:#ffffff;
    font-weight: Bold;
    font-size: 14px;
}


.navbar-brand {
    width: 182px;
    height: 80px;
    background: url(../img/logo.png) left center no-repeat;
    text-indent: -99999px;
}
nav.navbar-light .navbar-nav .nav-link:hover {
    color: #E1BE7E;
}
nav.navbar-light .navbar-toggler {
}

nav .navbar-nav {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}
/***** Top content *****/

.inner-bg {
    padding: 180px 0;
}


.top-content .description {
	margin: 20px 0 10px 0;
}

.top-content .description p { opacity: 0.8; }

.top-content .top-big-link {
	margin-top: 35px;
}


/***** Features *****/

.features-box {
	padding-top: 30px;
}

.features-box .features-box-icon {
	width: 120px;
	height: 120px;
	margin: 0 auto;
	background: #f8f8f8;
    font-size: 60px;
    color: #666666;
    line-height: 120px;
    -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
    -o-transition: all .6s; -moz-transition: all .6s; -webkit-transition: all .6s; -ms-transition: all .6s; transition: all .6s;
}

.features-box .features-box-icon:hover {
	background: #2668fc;
	color:#fff;
}

.features-box h3 {
	margin-top: 15px;
	padding: 10px 0;
}


/***** More features *****/

.more-features-container {
	padding-bottom: 60px;
}

.more-features-box {
	margin-top: 30px;
	margin-bottom: 20px;
}

.more-features-box-text {
	margin-top: 40px;
	padding-left: 30px;
	overflow: hidden;
	text-align: left;
}
.more-features-box-text:first-child { margin-top: 20px; }

.more-features-box-text-left {
	padding-left: 0;
	padding-right: 30px;
}

.more-features-box-text-icon {
	float: left;
	width: 60px;
	height: 60px;
	padding-top: 6px;
	background: #78CAD2;
	-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
    font-size: 32px;
    color: #555;
    line-height: 40px;
    text-align: center;
}
.more-features-box-text-icon i { vertical-align: middle; }

.more-features-box-text h3 {
	float: right;
	width: 86%;
	margin-top: 0;
}

.more-features-box-text-description {
	float: right;
	width: 86%;
}


/***** Great support *****/

.great-support-container {
	padding-bottom: 60px;
}



.great-support-box-text {
	margin-top: 40px;
	padding-left: 30px;
	overflow: hidden;
	text-align: left;
}


.great-support-box-text h3 {
	margin-top: 0;
}

.great-support-box-text .medium-paragraph {
	margin-top: 20px;
	margin-bottom: 20px;
}


/***** How it works *****/

.how-it-works {
	padding-bottom: 30px;
}

.how-it-works-box {
	padding-top: 15px;
	padding-bottom: 15px;
}

.how-it-works-box .how-it-works-box-icon {
    font-size: 74px;
    line-height: 80px;
}

.how-it-works-box h3 {
	margin-top: 15px;
}

.how-it-works-box p {
	opacity: 0.8;
}


/***** Testimonials *****/

.testimonials-container {
	padding-bottom: 70px;
}

.testimonial-list {
    margin-top: 30px;
    text-align: center;
}

.testimonial-list .testimonial-image img {
	max-width: 160px;
	-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}

.testimonial-list .testimonial-text {
	margin-top: 30px;
}

.testimonial-list .nav-tabs {
	margin-top: 30px;
    border: 0;
}

.testimonial-list .nav-tabs li {
	float: none;
	display: inline-block;
	margin-left: 5px;
    margin-right: 5px;
}

.testimonial-list .nav-tabs li a {
    width: 14px;
    height: 14px;
    padding: 0;
    background: #ddd;
    border: 0;
    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
}

.testimonial-list .nav-tabs li a:hover { border: 0; background: #66d6c5; }
.testimonial-list .nav-tabs li.active a { background: #66d6c5; }
.testimonial-list .nav-tabs li.active a:focus { border: 0; }




/***** Footer *****/

footer {
	background: #0B101B;
	color: #fff;
}

.footer-social {
	font-size: 42px;
    line-height: 42px;
}

.footer-social a {
	display: inline-block;
	width: 60px;
	height: 60px;
	margin: 0 5px;
	padding-top: 7px;
	background: #eee;
	-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
    font-size: 32px;
    color: #666666;
    line-height: 40px;
    text-align: center;
}
.footer-social a:hover, .footer-social a:focus { background: #66d6c5; color: #555; }

.footer-social a i { vertical-align: middle; }

.footer-copyright {
	margin-top: 25px;
}

.dropdown-toggle::after{
	content: url(../img/dropdown.png);
	margin-left:initial;
	vertical-align:initial;
	border-top:initial;
	border-right:initial;
	border-bottom:initial;
	/* border-left:initial; */
	transform: translateY(4px);
}


/* 常見問題 */


.commonproblem .title{
display:table;
position: relative;
}

.commonproblem .title div{
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    border: solid 2px #78CAD2;
    right:-0.2em;
    bottom:0.2em;
}


.commonproblem{	
background: #f8f8f8;
    padding:20px 100px;
    border-radius: 20px;
  box-shadow: 0px 3px 5px 0 rgba(52, 52, 52, 0.2);
  background-color: #f8f8f8;
}
.commonproblem .ask{
	font-weight: bold;
	 color: #78CAD2;
	
}
.dropdown-item.active, .dropdown-item:active {
    background-color: #f1b358;
}

.instructionsforuse.title{
	    background: #78CAD2;
	
}

.instructionsforuse h3{
    background: #78CAD2;
    color: #fff;
margin-top: .5rem;	

}


.instructionsforuse video{
	background:#fff;
	border: 1px solid #ccc;
}

@keyframes download-shock{
	0%{
		transform:translateY(1) ;
		transform:scale(0.95); 
		}
	50%{
		transform:translateY(-10px) ;
		transform:scale(1); 
		}
	100%{
		transform:translateY(1) ;
		transform:scale(0.95); 
		}		
} 


#about .download-big {
    background: #78CAD2;
    border-radius: 40px;
    padding: 20px 20px;
    animation: download-shock 1s infinite;
	color:#fff;
	font-size: larger;
	width:8em;
	text-align:center;
	font-weight:bold;
}


@media screen and (max-width: 0px) {
	
/* 自訂	 */
article {
    margin: 50px 0;
}
article.article-mn {
    margin:100px 0;
}
.line-bottom {
    border-bottom: 0;
}
.none-1200{
	display:none;
}
.block-1200{
	display:block!important;
}
#WF .text {
    text-align: center;
}
#WF .text, #WF .text.t-r{
    background-size: 100% 100%;

}
#WF .img-box {
    align-items: center;
}
#WF .img-box>div{
     height: 10vw;
    width: 10vw;
}
#WF .img-box>div img{
padding: 20px;
}

.d-1200-none {
    display: none !important;
}
	
#about .col-xl-6.p-0 {
    height:500px;
    display: flex;
    align-items: center;
    justify-content: center;
}
 


#about {
    margin-bottom:0;
}	

#about .bg{
top:10vw;
}

#answer  .wow.fadeInUp>div{
height:initial;
margin-bottom:30px;
}
	
header.top-content .bg-1,
header.top-content .bg-2,
header.top-content .bg-3{
left: initial;
    right: 0;
padding-bottom:8px	
}

header.top-content .bg-4 {
    display: none;
}

header.top-content .bg-4-1 {
    display: none;
	height: 894px; 
	width: 100dvw;
	object-fit: none;
	right: 0px;
	z-index: -4;
}
	
.btn-link-1 {
    bottom: 10%;
}
header.top-content {
    margin-bottom:10vw;
}

.col-xl-6.p-0 {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
 

}


@media screen and  (max-width:768px) {
	
	
h1 {
    font-size: 32px;
}	



header.top-content {
    margin-top: 0px;
    height: inherit;
    text-align: center;
}

header .img {
    transform: initial;
	align-items: center;
}

#about .bg{
top:15vw;
}

 #WF .img-box {
    display:none;
}

#WF .text,#WF .text.t-r{
margin-left:15px;
margin-right:15px;
}
#benefit .ovalbg {
margin-left:15px;
margin-right:15px;
    padding-bottom: 50px;
    padding-top: 100px;
}

/* 客服中心 */
.commonproblem {
    padding: 20px 20px;
}

.navbar-light .navbar-nav .show>.nav-link{
color:#fff;	
}

.dropdown-menu{
	margin-bottom:10px;
}

.instructionsforuse h2{
    font-size:inherit;
    line-height:inherit;

}


}

#benefit  div.text-center{
	 height: 87px;
	}
 
 #benefit  div.text-center img{width: 360px;padding-bottom: 24px;}
 
 #benefit  .wow.fadeInUp>div{
    background: linear-gradient(180deg, #181E29, #500E15);
    padding: 30px;
    border-radius: 16px;
    padding-top: 32px;
    height: 276px;
    border: 1px solid #737B89;
 }
 
 
 
 #benefit div.d-flex>div:nth-last-of-type(1){
	  margin-right: 0; 
  }
  
 #benefit div.d-flex{
	 margin:0 15px;
 }