html{height: 100%;}
body {
	padding: 0;
	margin: 0;
	background: #fff;	
	color: #212529;
	line-height: 28px;
	font-size: 15px;
	font-family: "Microsoft JhengHei","微軟正黑體","Arial", sans-serif!important;
    height: 100%;
}
body a {
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
	text-decoration: none;
}
body a:hover {
	text-decoration: none;
}
body a:focus, a:hover {
	text-decoration: none;
}
input[type="button"], input[type="submit"] {
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-weight:normal;
}
p {
	margin: 0;
	color:#777;
	letter-spacing:1px;
	line-height:1.5em;
	font-size:15px;}
.row{
	margin:0px;
	padding:0px;
}
ul {
	margin: 0;
	padding: 0;
}
label {
	margin: 0;
}
a{
	color:#000;
}
a:focus, a:hover {
	text-decoration: none;
	outline: none;
}
a:focus, a:hover {    
    text-decoration:none;
}
.hide{display: none;}
img{width: 100%;}
section{padding-bottom: 4rem;padding-top: 4rem;}

.scroll-to-top {
  z-index: 1029;
  right: 1rem;
  bottom: 6.3rem;
  display: none;
}

.scroll-to-top a {
  width: 3.1rem;
  height: 3.1rem;
  background-color: rgba(0, 0, 0, 0.5);
  line-height: 3.1rem;
}
/*-- //Reset-Code --*/

.bg-g{background-color: #ccc !important;}
.bg-o{background-color: #f9c270 !important;}
.bg-bk{background-color: #000 !important;}
.bg-yellow{background-color: #fee28a !important;}
.bg-gray{background-color: #474542!important;}
.bg-green{background-color: #8cba0a!important;}
.bg-red{background-color: #e81408!important;}
.bg-blue{background-color: #008fd6!important;}

.bg-pink{background-color: #ba4c63;}
.bg-purple{background-color: #c6d6ee;}
.bg-green2{background-color: #586B34;}
.bg-green3{background-color: #E4E28F;}

.f-blue{color: #617D91;}
.f-pink{color: #e05c6f;}
.f-white{color: #FFFFFF;}
.f-green{color: #6E7455;}
.f-yellow{color: #C7A869!important;}

.bg_banner{
	background-image: url("../images/bn-bg.png");
	background-position:center!important;
	background-size: cover!important;
}
.bg_th1{
	z-index: -1;
	width: 100%;
	background-image: url("../images/pt1-bg.png");
	background-position:center top;	
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
}
.bg_th2{
	z-index: -1;
	width: 100%;
	background-image: url("../images/pt2-bg.png");
	background-position:center top;	
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
}
.bg_th3{
	z-index: -1;
	width: 100%;
	background-image: url("../images/pt3-bg.png");
	background-position:center top;	
	background-repeat: no-repeat;
    background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
    padding-bottom: 27%;

}
.bg_th1{
	z-index: -1;
	width: 100%;
	background-image: url("../images/pt1-bg.png");
	background-position:center top;	
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
}
.bg_th4{
	z-index: -1;
	width: 100%;
	background-image: url("../images/pt4-bg.png");
	background-position:center top;	
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
}
.bg_th5{
	z-index: -1;
	width: 100%;
	background-image: url("../images/pt5-bg.png");
	background-position:center top;	
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
}

/*BTN AREA*/
.topline{width:70px;}
.ft_btn{display: block;padding: 1rem 0;width: 90%;margin: 0 auto;border-radius: 8px;font-size: 2rem;font-weight: bolder;}

/*.btn-yellow*/
.btn-yellow{color:#fff;background-color:#C7A869;border-color:#C7A869}
.btn-yellow:hover{color:#fff;background-color:#A67E2D;border-color:#A67E2D}
.btn-yellow.disabled,.btn-yellow:disabled{color:#fff;background-color:#C7A869;border-color:#C7A869}
.btn-yellow:not(:disabled):not(.disabled).active,
.btn-yellow:not(:disabled):not(.disabled):active,
.show>.btn-yellow.dropdown-toggle{color:#fff;background-color:#A67E2D;border-color:#A67E2D}
/*.btn-green*/
.btn-green{color:#fff;background-color:#6E7455;border-color:#6E7455}
.btn-green:hover{color:#fff;background-color:#4A4E36;border-color:#4A4E36}
.btn-green.disabled,.btn-green:disabled{color:#fff;background-color:#6E7455;border-color:#6E7455}
.btn-green:not(:disabled):not(.disabled).active,
.btn-green:not(:disabled):not(.disabled):active,
.show>.btn-green.dropdown-toggle{color:#fff;background-color:#4A4E36;border-color:#4A4E36}
/*##BTN AREA*/

.pt2-btn{position: relative;background-color: #700012;color: #fff;font-size: 2rem;padding: 15px 0;font-weight: bolder;border-radius: 30px;}
.pt2-btn .btn-click{
position: absolute;
width: 12%;
top: 6%;
right: 5%;
}
.pt2-btn:hover{color: #fff;font-size: 2.2rem;}
.pt2-btn:hover .btn-click{display: none;}
.pt2-girl{position: absolute;top:23%;left: 16%;width: 200px;}
.pt2-boy{position: absolute;top:43%;left: 16%;width: 200px;}

.box-title{
    transform: rotateY(0deg);
    transition: all 0.50s ease-in-out 0s;}
 /*   
.pt3-3-box:hover .box-title,
.pt3-3-box:active .box-title{
    transform: rotateY(-90deg);
}
*/
.box-content{ 
   width: 94%;
    height: 78%;
    position: absolute;
    border:8px solid #660d96;
    top: 8.6%;
    left: 0;
    padding:0;
    margin: 0 3%;
    text-align: left;
    background: rgba(255,255,255,1);
    transform: rotateY(90deg);
    transition: all 0.50s ease-in-out 0s;    
}
.pt3-3-box:hover .box-content,
.pt3-3-box:active .box-content{
    transform: rotateY(0);
}
.box-content h5{margin-bottom: 20px;}
.box-content ul{list-style-type:none;font-weight: bold;line-height: 1.4rem;}

.pt3-btn img{
    box-shadow: 4px 4px 8px rgba(0,0,0,.6);
    border-radius: 40px;
    border:3px solid #332b2b;
    background-color: #332b2b;
    }
.pt3-btn:hover img{
width: 106%;margin-left: -3%;-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
    box-shadow: 0 0 0 rgba(0,0,0,.6);
    }

#part3{
width: 100%;
overflow: hidden;
}
    
.cloud-1{
	position: absolute;	z-index:0;
	animation:cloud-1 60s linear infinite;
	background:url(../images/all_1.png)no-repeat;
	background-position:bottom;	
	width:100%;height: 600px;
	background-size:contain;	
	bottom:0;right: 0;
	}
.cloud-2{
	position: absolute;	z-index:0;
	animation:cloud-2 60s linear infinite;
	background:url(../images/all_1.png)no-repeat;
	background-position:bottom;	
	width:100%;height: 600px;
	background-size:contain;	
	bottom:0;right: 0;
	}   
.cloud-3{
	position: absolute;	z-index:0;
	animation:cloud-3 60s linear infinite;
	background:url(../images/all_1.png)no-repeat;
	background-position:bottom;	
	width:100%;height: 600px;
	background-size:contain;	
	bottom:0;right: 0;
	}     
    
@keyframes cloud-1{
0%{transform:translateX(80%)}
90%{transform:translateX(-100%) scale(1);}
90.3%{transform:translateX(-101%) scale(0);}
90.6%{transform:translateX(100%) scale(0);}
91%{transform:translateX(100%) scale(1);}
100%{transform: translateX(80%);}
}
@keyframes cloud-2{
0%{transform:translateX(20%)}
60%{transform:translateX(-100%) scale(1);}
60.3%{transform:translateX(-101%) scale(0);}
60.6%{transform:translateX(100%) scale(0);}
61%{transform:translateX(100%) scale(1);}
100%{transform: translateX(20%);}
}
@keyframes cloud-3{
0%{transform:translateX(-40%)}
30%{transform:translateX(-100%) scale(1);}
30.3%{transform:translateX(-101%) scale(0);}
30.6%{transform:translateX(100%) scale(0);}
31%{transform:translateX(100%) scale(1);}
100%{transform: translateX(-40%);}
}
@media screen and (max-width: 768px) {
.bg_th3{
    padding-bottom: 65%;
}
.cloud-1{
	animation:cloud-1 60s linear infinite;
	width:250%;height: 600px;

	}
.cloud-2{
	animation:cloud-2 60s linear infinite;
	background-position:bottom;	
	width:250%;height: 600px;

	}   
.cloud-3{
	animation:cloud-3 60s linear infinite;
	background-position:bottom;	
	width:250%;height: 600px;
	}   
}


/*footerstyle*/
#logo{width: 150px;margin-top: 5%;}
#footerstyle{
	padding: 3em 0;
	background-color: #161616;
	color: rgba(255, 255, 255, 0.9);
	font-size: 16px;	
	text-align:center;}
#footerstyle a {
  color: rgba(255, 255, 255, 0.6);}
#footerstyle a:hover {
  color: white;}
.footerstyle-social {
  padding: 0;
  margin: 0;}
.footerstyle-social li {
/*display: inline;*/
  padding: 0;
  margin: 0;
  list-style: none;}
.footerstyle-social li a {
  padding: 10px;
  font-size: 16px;}
@media screen and (max-width: 1199px) {
footer h4 {
    font-size: 2.6em;
    margin-bottom: 0.7em;}	
	
}@media screen and (max-width: 991px) {
.bn-ps{left: 0;top: 10%;width: 300px;}
.footer_logo{
		padding-bottom: 1em;
		margin-bottom: 1em;
		border-bottom-width: 1px ;
		border-bottom-style: solid;
		border-bottom-color: rgba(255, 255, 255, 0.6);
	}
}@media screen and (max-width: 767px) {
footer {
    padding: 2em 0 6em 0;
}	
}@media screen and (max-width: 575px) {	
#footerstyle ul {
  border-bottom-width: 1px ;
	border-bottom-style: solid;
	border-bottom-color: rgba(255, 255, 255, 0.6);
	padding: 1em 0;
	/*margin: 0 3em; */
}	
		
  #footerstyle {
    padding: 2em 0 7em 0;
  }	
}	
/*end_footerstyle*/

/*---------------------------media------------------------------*/
@media screen and (max-width: 1400px) {
}
/*992~1200*/
@media screen and (max-width: 1199px) {
.pt2-girl{top:23%;left: 13%;width: 180px;}
.pt2-boy{ top:43%;left: 13%;width: 180px;}

.pt2-btn{font-size: 1.8rem;padding: 15px 0;}
.pt2-btn .btn-click{
position: absolute;
width: 15%;
    top: 34%;
    right: -2%;
}

.pt2-btn:hover{font-size: 2rem;}
}@media screen and (max-width: 991px) {
.pt2-girl{top:23%;left: 13%;width: 140px;}
.pt2-boy{ top:43%;left: 13%;width: 140px;}
}@media screen and (max-width: 768px) {
.pt2-girl{top:23%;left: 15%;width: 100px;}
.pt2-boy{ top:43%;left: 15%;width: 100px;}
.ft_btn {
    padding: 1rem 0;
    width: 100%;
    font-size: 1.6rem;
}    
}/*576以上*/
@media screen and (min-width: 576px) {
.type_ph{display: none;}
	
}/*手機板575*/
@media screen and (max-width: 575px) {
.pt2-girl{top:16%;left: 30%;width: 40%;}
.pt2-boy{ top:39%;left: 30%;width: 40%;}
section{padding-bottom: 3rem;padding-top: 3rem;}	
.type_pc{display: none;}
.container:not(.nolr){
    padding-left: 0!important;
    padding-right: 0!important;}	

	
}/*END(max-width: 575px)*/
@media screen and (max-width: 472px) {	


}/*END(max-width: 472px)*/
@media screen and (max-width: 420px) {


}