@charset "UTF-8";
@import url("font-awesome.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic");


body {
  height: auto;
  background: #fff;
  position: relative;
}

/* Header */
.header{
  background: #fff;
  width: 100%;
  transition: 0.5s;
}

.header .header_top{
  width: calc(100% - 25%);
  padding:20px 10px 30px 10px;
  margin: 0 auto;	
  height:110px;
}

.header .header_top h1{
  cursor:default;
  float:left;
}
.mobilelogo{
 top: -100px;
 right:5%;
 position:fixed;	
}



@media (max-width: 991.98px) {
.header .header_top{
display:none;
}
.mobilelogo{
 top: 3px;
 right:5%;
 position:fixed;
 transition: 0.6s; 
 transform: scale(0.6);
 z-index:200000;
}

}
.header .applybutton{
  background: #ff6633; /* Old browsers */
  background: -moz-linear-gradient(left, #ff6633 0%, #ffbb33 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #ff6633 0%,#ffbb33 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #ff6633 0%,#ffbb33 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6633', endColorstr='#ffbb33',GradientType=1 ); /* IE6-9 */
  border-color: #ffbb33;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size:1.75rem; 
  font-weight:700;
  border-radius:50px; 
  padding:5px 25px; 
  float:right;  
}

.header .applybutton:hover{
  background: #ffbb33; /* Old browsers */
  background: -moz-linear-gradient(top, #ffbb33 0%, #ff6633 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(opt, #ffbb33 0%,#ff6633 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ffbb33 0%,#ff6633 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbb33', endColorstr='#ff6633',GradientType=1 ); /* IE6-9 */	
}

.header .applybutton span{
 font-size:1.5rem;	
}

.header .applybutton i{
 font-size:2rem;	
}

.applybutton02{
  background: #ff6633; /* Old browsers */
  background: -moz-linear-gradient(top, #ffbb33 0%, #ff6633 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ffbb33 0%,#ff6633 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ffbb33 0%,#ff6633 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbb33', endColorstr='#ff6633',GradientType=1 ); /* IE6-9 */
  border-color: #ffbb33;
  color: #fff;
  font-size:1.75rem; 
  font-weight:700;
  border-radius:30px; 
  padding:5px 25px; 
  margin:auto 10px;
}

.applybutton02:hover{
  background: #ffbb33; /* Old browsers */
  background: -moz-linear-gradient(top, #ff6633 0%, #ffbb33 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(opt, #ff6633 0%,#ffbb33 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ff6633 0%,#ffbb33 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6633', endColorstr='#ffbb33',GradientType=1 ); /* IE6-9 */	
}

.applybutton03{
  background: #ff6633; /* Old browsers */
  background: -moz-linear-gradient(top, #2A67A6 0%, #1D4197 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #2A67A6 0%,#1D4197 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #2A67A6 0%,#1D4197 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1D4197', endColorstr='#1D4197',GradientType=1 ); /* IE6-9 */
  border-color: #2A67A6;
  color: #fff;
  font-size:1.75rem; 
  font-weight:700;
  border-radius:30px; 
  padding:5px 25px; 
  margin:auto 10px;
}

.applybutton03:hover{
  background: #ffbb33; /* Old browsers */
  background: -moz-linear-gradient(top, #1D4197 0%, #2A67A6 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(opt, #1D4197 0%,#2A67A6 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #1D4197 0%,#2A67A6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1D4197', endColorstr='#1D4197',GradientType=1 ); /* IE6-9 */	
}

@media (max-width: 768px) {
.applybutton03{
 margin-top:15px;
 
}
} 

.applybutton02 span, .applybutton03 span{
 font-size:1.5rem;
 padding-left:5px; 
}

.applybutton02 i, .applybutton03 i{
 font-size:2rem;	
}

.navbar-fixed {
  top: 0;
  z-index: 100000;
  position: fixed;
  width: 100%;
}

.navbar-fixed .header_top h1{
 top: 20px;
 left:10%;
 transition: 0.6s; 
 transform: scale(0.6);
 z-index:200000;
 border:5px solid #f00;
}

.navbar-fixed .applybutton{
 top: 20px;
 right:7%;
 position: fixed;
 transition: 0.6s; 
 transform: scale(0.6);
 z-index:200000;
 border:5px solid #f00;
}

#banner {
 background-color: #fff;
 position: relative;
}

#banner .photo{
 width:100%;
 height: auto;
}

#banner .pageinfo{
 position: absolute;
 z-index: 5;
 width: 100%;
 height: 100px;
 background-color: rgba(25%, 25%, 25%, .35);
 filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000, endcolorstr=#7F000000);
 bottom: 0;
} 

#banner .pageinfo .title{
 color:#fff;
 position: absolute;
 left:12%;
 padding-top:15px;
 z-index: 50;
 }

#banner .pageinfo .title span{
 color:#fc3;
 font-weight:700;
 font-size: 2rem; 
}
#banner .pageinfo .title02{
 position: absolute;
 right:12%;
 bottom:15px;
 color:#fff;
 z-index: 50;
}
#banner .pageinfo a:link, #banner .pageinfo a:visited{
 color:#fff;	
}
@media (max-width: 480px) {
#banner .pageinfo{
 height: 55px;
} 
#banner .pageinfo .title{
padding-top:5px;	
}
#banner .pageinfo .title span{
 font-size: 1rem; 
}	
#banner .pageinfo .title02{
 display:none;	
}
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + #banner {
  padding-top:102px; /* banner圖與頂部距離 */
}

.top-container h1{
  cursor:default;
  float:left;
}

.applybutton{
  background: #ff6633; /* Old browsers */
  background: -moz-linear-gradient(left, #ff6633 0%, #ffbb33 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #ff6633 0%,#ffbb33 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #ff6633 0%,#ffbb33 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6633', endColorstr='#ffbb33',GradientType=1 ); /* IE6-9 */
  border-color: #ffbb33;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size:1.75rem; 
  font-weight:700;
  border-radius:50px; 
  padding:5px 25px; 
  float:right;  
}

.applybutton:hover{
  background: #ffbb33; /* Old browsers */
  background: -moz-linear-gradient(top, #ffbb33 0%, #ff6633 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(opt, #ffbb33 0%,#ff6633 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ffbb33 0%,#ff6633 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbb33', endColorstr='#ff6633',GradientType=1 ); /* IE6-9 */	
}

.applybutton span{
 font-size:1.5rem;	
}

.applybutton i{
 font-size:2rem;	
}

/* mainbox */
.mainbox{
 text-align: center;
 margin:5rem auto;
}

.mainbox h1 {
 color:#f93;
 font-weight: 700;
 font-size: 2rem;
 letter-spacing: 0.25em;
 overflow: hidden;
}

.mainbox h1 .letter {
 display: inline-block;
 line-height: 1em;
}

.mainbox h2 {
 color:#f93;
 font-weight: 700;
 font-size: 2rem;
 letter-spacing: 0.25em;
 overflow: hidden;
}

.mainbox h2 .letter {
 display: inline-block;
 line-height: 1em;
}

.mainbox p{
 color: #6c6c6c;
 font-size: 1.25rem;
 font-weight:800;
 letter-spacing: 0.05em;	
}

.mainbox-btn01{
 position: relative;
 display: block;
 margin: 1em auto;
 width: 100%; 
 text-transform: uppercase;
 background-color: #f63;
 width: 120px;
 height: 120px;
 border-radius: 60px;
 padding-top:5px;
} 
.mainbox .mainbox-btn01 .name:link {
 color:#009;
 font-size: 1.125rem;
 font-weight:600;
 line-height: 3;
 border:2px solid #f00;
} 

.mainbox-btn01:hover{
 box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.5);
 color:	#f63;
}
.mainbox-btn01 h5:hover{
 color:	#f63;
}

.mainbox-btn02{
 position: relative;
 display: block;
 margin: 1em auto;
 width: 100%; 
 text-transform: uppercase;
 background-color: #fc3;
 width: 120px;
 height: 120px;
 border-radius: 60px;
 padding-top:5px;
} 

.mainbox-btn02:hover{
 box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.5);
 color: #fc3;
}
.mainbox-btn02 h5:hover{
 color: #fc3;
}

.mainbox-btn03{
 position: relative;
 display: block;
 margin: 1em auto;
 width: 100%; 
 text-transform: uppercase;
 background-color: #0cf;
 width: 120px;
 height: 120px;
 border-radius: 60px;
 padding-top:5px;
} 

.mainbox-btn03:hover{
 box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.5);
 color:	#0cf;
}
.mainbox-btn03 h5:hover{
 color:	#0cf;
}

.mainbox-btn04{
 position: relative;
 display: block;
 margin: 1em auto;
 width: 100%; 
 text-transform: uppercase;
 background-color: #099;
 width: 120px;
 height: 120px;
 border-radius: 60px;
 padding-top:5px;
} 

.mainbox-btn04:hover{
 box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.5);
 color:	#099;
}
.mainbox-btn04 h5:hover{
 color:	#099;
}

.mainbox-btn05{
 position: relative;
 display: block;
 margin: 1em auto;
 width: 100%; 
 text-transform: uppercase;
 background-color: #039;
 width: 120px;
 height: 120px;
 border-radius: 60px;
 padding-top:5px;
} 

.mainbox-btn05:hover{
 box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.5);
 color:	#039;
}
.mainbox-btn05 h5:hover{
 color:	#039;
}

.mainbox-btn06{
 position: relative;
 display: block;
 margin: 1em auto;
 width: 100%; 
 text-transform: uppercase;
 background-color: #939;
 width: 120px;
 height: 120px;
 border-radius: 60px;
 padding-top:5px;
} 

.mainbox-btn06:hover{
 box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.5);
 color:	#939;
}

.mainbox-btn06 h5:hover{
 color:	#939;
}

.mainbox-btn07{
 position: relative;
 display: block;
 margin: 1em auto;
 width: 100%; 
 text-transform: uppercase;
 background-color: #4E7CC6;
 width: 120px;
 height: 120px;
 border-radius: 60px;
 padding-top:5px;
} 

.mainbox-btn07:hover{
 box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.5);
 color:	#4E7CC6;
}

.mainbox-btn07 h5:hover{
 color:	#939;
}

.mainbox-btn08{
 position: relative;
 display: block;
 margin: 1em auto;
 width: 100%; 
 text-transform: uppercase;
 background-color: #F47F00;
 width: 120px;
 height: 120px;
 border-radius: 60px;
 padding-top:5px;
} 

.mainbox-btn08:hover{
 box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.5);
 color:	#F47F00;
}

.mainbox-btn08 h5:hover{
 color:	#939;
}

.mainbox-btn09{
 position: relative;
 display: block;
 margin: 1em auto;
 width: 100%; 
 text-transform: uppercase;
 background-color: #3E8448;
 width: 120px;
 height: 120px;
 border-radius: 60px;
 padding-top:5px;
} 

.mainbox-btn09:hover{
 box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.5);
 color:	#3E8448;
}

.mainbox-btn09 h5:hover{
 color:	#939;
}

.mainbox-btn010{
 position: relative;
 display: block;
 margin: 1em auto;
 width: 100%; 
 text-transform: uppercase;
 background-color: #B70808;
 width: 120px;
 height: 120px;
 border-radius: 60px;
 padding-top:5px;
} 

.mainbox-btn010:hover{
 box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.5);
 color:	#B70808;
}

.mainbox-btn010 h5:hover{
 color:	#939;
}


@media (max-width: 767.98px) {
.mainbox{
 margin:2.5rem auto;
}
.mainbox h2 {
 font-size: 1.25rem;	
}
.mainbox p {
 font-size: 1rem;	
}
}

/* servicebox */
.servicebox{
 background:#eee url(../images/bground_service.png) top center no-repeat;
 padding-top: 5rem !important;
 padding-bottom: 3rem !important;
}

.servicebox .poto{
 border-radius:5px;	
 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
 margin-bottom:3rem;
}
.servicebox h2{
 color:	#f93;
 font-size: 2rem;
 font-weight:600;
 letter-spacing: 0.05em;
 line-height:1;
 text-align:center;
}
.servicebox .slogan{
 background:url(../images/slodgo.png) bottom center no-repeat;	
 height:55px;
 text-align:center;
}

@media (max-width: 767.98px) {
.servicebox{
 padding-top: 5rem !important;	
}
.servicebox h2{
 font-size: 1.25rem;
}
}

/* business */
.businessbox{
 margin:5rem auto;
}

.businessbox h2 {
 color:	#f93;
 font-size: 2rem;
 text-align: center;
 font-weight:600;
 letter-spacing: 0.05em;
 line-height:1;
}
.businessbox .slogan{
 background:url(../images/slodgo.png) bottom center no-repeat;	
 height:55px;
 text-align: center;
 margin-bottom:2rem;
}

.businessbox .scenes {
 margin-bottom:3rem;
 border:1px solid #bbb;
 box-shadow: 0 0 5px #999;
 border-radius:10px;
}

.businessbox .scenes .pic {
 overflow: hidden;
 text-align: center;
 border-radius:8px 8px 0 0;
}

.businessbox .scenes .title{
 color:#099;
 font-weight:700;
 padding:8px 15px;
 text-align: center;
}

.businessbox .scenes .msg{
 padding:0 15px 18px 15px;
 text-align: left; 
}

@media (max-width: 767.98px) {
.businessbox{
 margin:2.5rem auto;
}

.businessbox h2 {
 font-size: 1.25rem;
}
}

.green-btn{
 background-color:#099;
 border-radius: 30px;
 color:#fff;
 font-size:1.125rem;
 font-weight:700;
 padding:12px 36px;
}

.green-btn a:link, .green-btn a:visited{
 color:#fff;	
}

/* Youtube 的影片*/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
	border-radius:8px 8px 0 0;
	
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0%; 
	left: 0%;
    width: 100%; 
	height: 100%;
}


/* customerbox */
.customerbox{
 background:#eee url(../images/bground_service.png) top center no-repeat;
 padding-top: 7rem !important;
 padding-bottom: 4rem !important;
 text-align:center;
}

.customerbox .slogan{
 background:url(../images/slodgo.png) bottom center no-repeat;	
 height:55px;
}

.customerbox .msg{
 margin:0 auto;
 width:100%;
}
.msg h2{
 color:	#f93;
 font-size: 2rem;
 font-weight:600;
 letter-spacing: 0.05em;
 text-align:center;
}

.customerbox .cusinfo {
 margin:2rem 1rem;
}

.customerbox .cusinfo .pic{
 background-color: #fff;
 width: 120px;
 height: 120px;
 border-radius: 60px;
 border:5px solid #fff;
 margin:0 auto;
 text-align:center;
 box-shadow: 2px 2px 5px #999;
}

.customerbox .cusinfo .name{
 color:#fff;
 background-color: #099;
 font-weight:600;
 font-size:1.125rem;
 padding:15px 5px;
 border-radius: 10px;
 width:90%;
 margin:1rem auto 0.5rem auto;
 position: relative;
}

.customerbox .cusinfo .name:after, .customerbox .cusinfo .name:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.customerbox .cusinfo .name:after {
	border-bottom-color: #099; 
	border-width: 10px;
	margin-left: -10px;         
}
.customerbox .cusinfo .name:before {
	border-bottom-color: #099; 
	border-width: 10px;
	margin-left: -10px;  
}

.customerbox .cusinfo .talk{
 background-color:#fff;
 border:1px solid #bbb;
 box-shadow: 0 0 5px #999;
 border-radius:5px 5px 100px 100px;
 width:90%;
 margin:0 auto;
 padding: 1rem 2rem 1rem 2rem;
 text-align:left;
}

.customerbox .cusinfo .talk .cusmsg{
 font-size:1.5rem;
 margin:1rem auto;
 text-align: center; 
}

.customerbox .cusinfo .talk .cusmsg i{
 border:2px solid #099;
 border-radius:50px;
 background:#099;
 color:#fff;
 padding:0.5rem;
 transition: all .3s ease-in-out;
}

.customerbox .cusinfo .talk .cusmsg i:hover{
 border:2px solid #f93;
 color:#f93;
 background:#fff;
 transition: all .3s ease-in-out; 
}

@media (max-width: 767.98px) {
.customerbox{
 padding-top: 2.5rem !important;	
}

.msg h2{
 color:	#f93;
 font-size: 1.25rem;
}
}

/* applybox */
.applybox{
 margin:5rem auto;
 width: calc(100% - 5%);
}

.applybox h2 {
 color:	#f93;
 font-size: 2.25rem;
 font-weight:600;
 letter-spacing: 0.05em;
 line-height:1;
 text-align: center;
}

.applybox p{
 text-align: center;	
}

.applybox .slogan{
 background:url(../images/slodgo.png) bottom center no-repeat;	
 height:55px;
}

.applybox .magbox{
 padding: 0.375rem 0.75rem;
 border: 1px solid #ced4da;
 border-radius: 0.25rem;
 background-color: #f8f8f8;
 height:auto;
}

.applybox h3 {
 color:	#f93;
 font-size: 1.5rem;
 font-weight:600;
 letter-spacing: 0.05em;
 line-height:1;
 margin:2rem auto 3rem auto;
 text-align: center;
}

.applybox .pic{
 border: 1px solid #bbb;
 box-shadow: 0 0 2px #aaa;
 border-radius: 5px; 
}

.applybox .step{
 color: #6c6c6c;
 font-size: 1.25rem;
 font-weight:500;
 letter-spacing: 0.05em;
 text-align:center; 
}

.required{
 color:#f00;	
}

.applybox label{
 color:#363636;
 font-weight:600; 
}

@media (max-width: 767.98px) {
.applybox{
 margin:2rem auto;
}
.applybox h2 {
 font-size: 2rem;
}
}

/* footer */
.footerbox{
 background:#000 url(../images/bground_footer.png) top center no-repeat;
 padding-top: 3rem !important;
 margin-top: 3rem !important;
}

.footerbox h3 {
 line-height:1;
 text-align:center;
}

.footerbox h3 img{
 vertical-align: middle;	
}
.footerbox hr.style01 {
 border-top: 1px solid #8b8b8b;
 border-bottom: 1px solid #fff;
 width:90%;	
}

.footerbox p{
 line-height:1.3;
 text-align:center;
}

.footerbox .codeimg img{
 padding:0 5px;
}

.footerbox span.allline{
 white-space:nowrap;
}
.footerbox span.point{
 padding:0 0.3rem;
}

.footerbox .copy01:link{
 padding:6px 12px;
 white-space:nowrap;
}

.footerbox .copy03{
 text-align:center;
}

.footerbox .copy04{
 padding:15px 0;
 text-align:center;
}

@media (max-width: 575.98px) {
.footerbox{
 background:#000 url(../images/bground_footer.png) top center no-repeat;
 font-size:0.875rem;
 padding-top: 1rem !important;
 padding-bottom: 2rem !important;
}
.footerbox h3{
 text-align:left;	
 font-size:97%;
}
.footerbox p{
 text-align:left;	
}	
.footerbox .copy01:link, .footerbox .copy02:link, .footerbox .copy03:link{
 padding:10px 2px;	
}
.footerbox .copy03{
 text-align:left;
}
.footerbox span.point{
 display:none;
 padding:0 0;
}
.footerbox .img-fluid {
  max-width: 80%;
  height: auto;
}
}

/*-- back to top --*/
.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: #f93 url(../images/cd-top-arrow.svg) no-repeat center 50%;
  background-size:60%;
  border:1px solid #f93;
  border-radius:50px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
  z-index: 99999999;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  opacity: .85;
}
.cd-top:hover {
  background-color: #099;
  opacity: 1;
  border:1px solid #099; 
}
@media only screen and (min-width: 768px) {
.cd-top {
  right: 20px;
  bottom:20px;
}
}
@media only screen and (min-width: 1024px) {
.cd-top {
  height: 50px;
  width: 50px;
  right: 30px;
  bottom: 30px;
}
}

/* productsbox */
.productsbox{
 padding-top: 1rem !important;
 padding-bottom: 1rem !important;
}

.productsbox .proinfo {
 background: #fff url(../images/bground_products.png) no-repeat center top;
 /*background-size:100% 100%; 背景補滿. 會變型*/
 max-width:222px;
 height:649px;
 margin:2rem auto 1rem auto;
 padding:20px 1rem;
 position: relative;
 border:1px solid #ddd;
 box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1);
}

.productsbox .proinfo .title{
 color:#fff;
 font-weight:600;
 font-size:1.5rem;
 padding-top:30px;
 text-align:center;
 height:155px;
}

.productsbox .proinfo .title a:link, .productsbox .proinfo .title a:visited{
 color:#fff;	
}

.productsbox .proinfo .title a:hover{
 color:#f93;	
}

.productsbox .proinfo .pic{
 width: 120px;
 height: 185px;
 padding-top:6px;
 padding-left:2px;
 margin:0 auto;
 text-align:center;
}

.productsbox .proinfo .subtitle{
 border-bottom:2px solid #099;
 color:#099;
 font-weight: 700;
 padding:16px 0 2px 0;
}

.productsbox .proinfo .msg{
 font-size: 0.9375rem;
 line-height:1.6;
 padding-top:10px;	
}

.productsbox .proinfo .more{
 text-align:center;
 cursor: pointer;
 position: absolute;
 bottom:1rem;
}

.productsbox .proinfo .more a:link, .productsbox .proinfo .more a:visited{
 color:#fff;
}

.productsbox .proinfo .more a:hover{
 color:#f93; 
}

.productsbox  h2{
 color: #f93;
 font-size: 2rem;
 font-weight: 600;
 letter-spacing: 0.05em;
 line-height: 1;
 text-align: center;
}

.productsbox .slogan{
 background:url(../images/slodgo.png) bottom center no-repeat;	
 height:55px;
 text-align: center;
}


@media (max-width: 1199.98px) {
.productsbox .proinfo .subtitle{
 padding:3px 0 2px 0;
}	
	
.productsbox .proinfo .msg{
 font-size: 0.9375rem;
 line-height:1.5;
 padding-top:5px;	
}
}


/* aboutbox */
.aboutbox{
 background:#eee;
 margin:2rem auto;
 padding-top: 3rem;
 padding-bottom: 5rem;
 text-align:left;
 line-height:1.8;
}

.aboutbox h3, .aboutbox02 h3 {
 background:url(../images/xslogo.png) no-repeat left 6px;
 color:#fc3;
 font-size: 1.75rem;
 font-weight:700;
 padding-left:26px;
}
.aboutbox .pic, .aboutbox02 .pic{
 border-radius:10px;	
 box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
 margin-bottom:10px;
}

.aboutbox02{
 background:#fff;
 margin:0rem auto 2rem auto;
 padding-top: 3rem;
 padding-bottom: 5rem;
 text-align:left;
 line-height:1.8;
}

@media (max-width: 767.98px) {
.aboutbox, .aboutbox02{
 margin:1rem auto;
 padding-top: 1rem;
 padding-bottom: 1rem;
}
}

/* faq */
.nav-faq{
 list-style: none; 
 text-align: center; 
 padding:0 0;
 margin:0 auto;
}

.nav-faq li{
 font-size: 1.25rem;
 font-weight: 700;
 list-style: none;
 display: inline-block; 
 padding:0 1rem;
}

.nav-faq li a{
 color:#565656;
 display: block;
 white-space:nowrap;
 padding-bottom:12px;
}

.nav-faq li .focus{
 color: #f93;
}

.nav-faq li i{
 font-size: 1.25rem;
 font-weight: 400;	
}

.container-fluid hr.style01 {
 border-top: 1px solid #aaa;
 border-bottom: 1px solid #eee;
 width:100%;
}

.card-header > a.collapsed:after {
 content:url(../images/arrow_down.png); /* 圖片也可用文字代替. 例如 "+" 會顯示 + */
 position: absolute;
 right: 24px;
 top:15px;
}

.card-header > a:after {
 content:url(../images/arrow_right.png);
 position: absolute;
 right: 24px;
 top:15px;
}


/* Sign up */
.signbox{
 padding-top: 5rem!important;
 padding-bottom: 3rem!important;
}

.signbox h2 {
 color:	#f93;
 font-size: 2rem;
 font-weight:600;
 letter-spacing: 0.05em;
 line-height:1;
 text-align: center;
}

.signbox p{
 text-align: center;
 background:url(../images/slodgo.png) bottom center no-repeat;	
 height:55px; 
}

.signtitle{
 color:#f93;
 font-weight:600;
 padding-top:1rem; 
}

.green-btn-sm{
 background-color:#099;
 border-radius: 30px;
 color:#fff;
 font-size:1rem;
 font-weight:700;
 padding:5px 16px;
}

.green-btn-sm02{
 background-color:#099;
 border-radius: 25px;
 color:#fff;
 font-size:1rem;
 font-weight:700;
 padding:5px 12px;
 margin:0 0 0 55px;
/*  margin:0 7px 0 0; 暫時隱藏 */
}

.green-btn-sm03{
 background-color:#099;
 border-radius: 25px;
 color:#fff;
 font-size:1rem;
 font-weight:700;
 padding:5px 12px;
 display:none; /* 暫時隱藏 */
}

.signtable {
  border: 0;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;
}

.signtable tr {
  border-bottom: 1px solid #ccc;
  padding: 5px;
}

.signtable td {
  padding: .75rem 1.25rem;
  background: #f9f9f9;
}

.signtable td {
 vertical-align:text-top	
}

.signtable th {
  background: #f0f0f0;
  border-top: 3px solid #099;
  border-bottom: 1px solid #099;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 1px;
  white-space:nowrap;
  text-align: center;
  padding: .75rem 1.25rem;
}

.signtable td.time{
 white-space:nowrap;	
}

.signtable td.name{
 width:35%;
}

.signtable td.price{
 text-align: center;
}

.signtable td a:link, .signtable td a:visited{
 color:#4f4f4f; 
}

.signtable td a:hover{
 color:#f93; 	
}

.signtable td.address{
 width:30%;	
}

.signtable td.address i{
 font-size: 1.25rem;	
 padding-right:0.25rem;
 color:#099;
}

.signtable td.sign{
 white-space:nowrap;
 width:10%;	 
}


@media (max-width: 767.98px) { 
.signbox{
 padding-top: 2.5rem!important;
 padding-bottom: 0!important;
}
.signbox h2, .accapply h2 {
 font-size: 1.5rem;
}
.signtable {
  border: 0;
}
.signtable thead {
  display: none;
}
.signtable tr {
 margin-bottom: 10px;
 display: block;
 border: 1px solid #ddd;
 border-bottom: 2px solid #ddd;
}
.signtable td {
 display: block;
 text-align: right;
 font-size: 0.875rem;
 border-bottom: 1px dotted #ccc;
}
.signtable td:last-child {
 border-bottom: 0;
}
.signtable td:before {
 color:#111;
 content: attr(data-label);
 float: left;
 text-transform: uppercase;
 font-weight: bold;
 padding-right:0.5rem;
}
.signtable td.address, .signtable td.sign, .signtable td.name{
 width:100%;
}

.signtable td.price{
 text-align:right;	
}
}


/* timeline */
.main-timeline{
    overflow: hidden;
    position: relative;
}
.main-timeline:before,
.main-timeline:after{
    content: "";
    display: block;
    width: 100%;
    clear: both;
}
.main-timeline:before{
    content: "";
    width: 3px;
    height: 100%;
    background:	#00caca;
    position: absolute;
    top: 30px;
    left: 50%;
}
.main-timeline .timeline{
    width: 50%;
    float: left;
    padding-right: 30px;
    position: relative;
}
.main-timeline .timeline-icon{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #099;
    position: absolute;
    top: 5.5%;
    right: -17.5px;
}
.main-timeline .year{
    display: block;
    padding: 10px;
    margin: 0;
    font-size: 1.25rem;
    color: #fff;
    border-radius: 0 50px 50px 0;
    background: #099;
    text-align: center;
    position: relative;
}
.main-timeline .year:before{
    content: "";
    border-top: 30px solid 	#00aeae;
    border-left: 30px solid transparent;
    position: absolute;
    bottom: -30px;
    left: 0;
}
.main-timeline .timeline-content{
    padding: 30px 20px 20px 20px;
    margin: 0 30px;
    background: #f2f2f2;
}
.main-timeline .title{
    font-size: 1.125rem;
    font-weight: bold;
    color: #504f54;
    margin: 0 0 10px 0;
}
.main-timeline .description{
    font-size: 1rem;
    color: #666;
    margin: 0;
}
.main-timeline .timeline:nth-child(2n){ padding: 0 0 0 30px; }
.main-timeline .timeline:nth-child(2n) .timeline-icon{
    right: auto;
    left: -14.5px;
}
.main-timeline .timeline:nth-child(2n) .year{ border-radius: 50px 0 0 50px; }
.main-timeline .timeline:nth-child(2n) .year:before{
    border-left: none;
    border-right: 30px solid transparent;
    left: auto;
    right: 0;
}
.main-timeline .timeline:nth-child(2n) .timeline-content{
    text-align: left;
    margin: 0 30px 0 30px;
}
.main-timeline .timeline-content .movie{
 padding-top:10px; 
}

.main-timeline .timeline-content .movie img{
 margin:0 auto;
 text-align:center;  
 max-width:100%;
 height:auto;
}

/* rwd youtube */
.embed-container { 
 position: relative; padding-bottom: 62.25%; height: 0; overflow: hidden; max-width: 100%; 
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
 position: absolute; top: 10px; left: 0; width: 100%; height: 100%; 
}

.main-timeline .timeline:nth-child(2){ margin-top: 170px; }
.main-timeline .timeline:nth-child(odd){ margin: -175px 0 0 0;}
.main-timeline .timeline:nth-child(even){ margin-bottom: 80px;}
.main-timeline .timeline:first-child,
.main-timeline .timeline:last-child:nth-child(even){ margin: 0; }
.main-timeline .timeline:nth-child(2n) .timeline-icon{ border-color: #099; }
.main-timeline .timeline:nth-child(2n) .year{ background: #099; }
.main-timeline .timeline:nth-child(2n) .year:before{ border-top-color: #00aeae; }
.main-timeline .timeline:nth-child(3n) .timeline-icon{ border-color: #099; }
.main-timeline .timeline:nth-child(3n) .year{ background: #099; }
.main-timeline .timeline:nth-child(3n) .year:before{ border-top-color: #00aeae; }
.main-timeline .timeline:nth-child(4n) .timeline-icon{ border-color: #099; }
.main-timeline .timeline:nth-child(4n) .year{ background: #099; }
.main-timeline .timeline:nth-child(4n) .year:before{ border-top-color: #00aeae; }
@media only screen and (max-width: 767px){
.main-timeline{ overflow: visible; margin-left:10px; }
.main-timeline:before{
 top: 0;
 left: 0;
}
.main-timeline .timeline:nth-child(2),
.main-timeline .timeline:nth-child(odd),
.main-timeline .timeline:nth-child(even){ margin: 0; }
.main-timeline .timeline{
 width: 100%;
 float: none;
 padding: 0 0 0 30px;
 margin-bottom: 20px !important;
}
.main-timeline .timeline:last-child{ margin: 0 !important; }
.main-timeline .timeline-icon{
 right: auto;
 left: -14.5px;
}
.main-timeline .year{ border-radius: 50px 0 0 50px; }
.main-timeline .year:before{
 border-left: none;
 border-right: 25px solid transparent;
 left: auto;
 right: 0;
}
.main-timeline .timeline-content{ margin: 0 25px;}
}
}

/*Form Wizard*/
.bs-wizard {padding: 10px 0 4rem 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #099; font-size: 1rem; margin-bottom: 0px;}
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #099; font-size: 1.25rem; font-weight:600;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #099; top: 47px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;} 
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background:	#007979; border-radius: 50px; position: absolute; top: 8px; left: 8px; } 
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #099;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none;}

@media only screen and (max-width: 767px){
.bs-wizard > .bs-wizard-step .bs-wizard-info {font-size: 1rem; margin-bottom: 2px; font-weight:400;}
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 559px) {
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
  }

  .video-container iframe,
  .video-container object,
  .video-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
}
@media (max-width: 767.98px) {
.freetalk{
 position: fixed;
 left: 0; 
 bottom:0;
 height:auto;
 justify-content: center;
 text-align: center;
 width: 100%;
 background: #fff;
 color: #d04d04;
 padding: 13px 20px;
 z-index: 99999990;
}

.freetalk a:link, .freetalk a:visited{
 color: #d04d04;
 font-size: 1.25rem;
 font-weight: 700;
}
}