html{height: 100%;}
html{height: 100%;}
body {
	padding: 0;
	margin: 0;
	background: #fff;	
	color: #212529;
	font-size: 15px;
	font-family: "Noto Sans TC","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;
}

a:focus, a:hover {
	text-decoration: none;
	outline: 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;
   line-height: 1.2;
}
p {
    margin: 0;
    color: #222;
    line-height: 1.3;
    font-size: 1.6em;
    letter-spacing: 1px;
}
.row{
	margin:0px;
	padding:0px;
}
ul {
	margin: 0;
	padding: 0;
}
label {
	margin: 0;
}


.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 --*/


.hoverbig img{
	filter:drop-shadow(2px 2px 2px #303030);
}
.hoverbig:hover img{
	transform: scale(1.1, 1.1);
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
filter:drop-shadow(0px 0px 0px #303030);
}
.btngo{
	 font-size: 2em;
    line-height: 1.2;
    font-weight: 700; 
    color: #fff!important;
    background-color: #cb3924;
    padding: .4em;
    margin-top: 2%;
    display: inline-block;
    min-width:60%; 
   border-radius: 30px;
}
.btngo:hover{
	color: #fff;
   transform: scale(1.1, 1.1);
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
}
/*click*/
.click_box{
    position: relative;
}
.click_box:hover img.click_hand{
   display: none;
}
.click_hand {
    position: absolute;
    filter: drop-shadow(2px 2px 2px #303030);
    width: 2em;
    z-index: 2;
    /* right: 15%; */
    /* bottom: 23%; */
    margin-left: 1em;
}

.timeboard .click_hand {
    width: 36px;
    right: -9%;
    bottom: -35%;
}
/*##click*/
.borderimg1 { 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url("../images/menu-bg.png") 30 round;
}



.bg-darkred{background-color: #bc1e21 !important;}
.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;}
.bgg-brown{background-image: linear-gradient(to top, #974823 0%, #974823 17%, #d8985a 100%);}

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

.f-red{color: #630f13!important;}
.f-blue{color: #617D91;}
.f-pink{color: #e05c6f;}
.f-white{color: #FFFFFF;}
.f-green{color: #6E7455;}
.f-yellow{color: #f19000!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/bg-th1.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;
}

/*BANNER*/
.menu-btnbg{
	background-image: url("../images/menu-bg.png");
	background-position:center top;	
	background-repeat: no-repeat;
	background-size: 100% 140%;
	-ms-background-size:  100% 140%;
	-moz-background-size:  100% 140%;
	-webkit-background-size:  100% 140%;
   padding: .5em .5em .2em .5em;
   font-size: 2em;
   font-weight: 700;
   display: inline-block;
   width: 7em;
   color: #fad5bc;
}
.menu-btnbg:hover{
	transform: scale(1.1, 1.1);
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
   color: #fff;
}

.mbtn-index{
   position: relative;
    z-index: 5;
    font-size: 2.4em;}
.mbtn-amds{position: relative;z-index: 2;right:-1em;}
.mbtn-ns{position: relative;z-index: 2;left: -1em;}


/*BANNER*/



#part2 .btngoto{
    position: absolute;
    right: 9%;
    bottom: 10%;
    width: 47%;
    background-color: unset;
    display: inline-block;
}


.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;
}
 
/*照片雲*/

.photo_cloud{
width: 100%;
overflow: hidden;
position: relative;
padding-bottom: 30%;   
}
.cloud-1,
.cloud-2,
.cloud-3{
   position: absolute;	
   z-index:0;
   width:100%!important;
   right: 0;
}

.cloud-1{
	animation:cloud-1 60s linear infinite;
	background:url(../images/all_1.png)no-repeat;
	background-position:bottom;	
	height: 35em;
	background-size:contain;	
	bottom:0;
	}
.cloud-2{	
	animation:cloud-2 60s linear infinite;
	background:url(../images/all_1.png)no-repeat;
	background-position:bottom;	
	height: 35em;
	background-size:contain;	
	bottom:0;
	}   
.cloud-3{
	
	animation:cloud-3 60s linear infinite;
	background:url(../images/all_1.png)no-repeat;
	background-position:bottom;	
	height: 35em;
	background-size:contain;	
	bottom: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: 575px) {
.photo_cloud {
    padding-bottom: 55%;}  
.cloud-1, .cloud-2, .cloud-3 {
   width: 195%!important;}

}/*#cloud_照片雲*/

/*翻牌*/
.flip-box{
font-family: 'TaiwanPearl', serif; 
   font-weight: bold;
   margin-bottom: 5%;
}

.flip-box .click_hand {
    right: 5%;
    bottom: 17%;
}
.flip-box .box-title,
.flip-box .box-content{
   filter:drop-shadow(4px 4px 4px #303030); 
   width: 100%;
   text-align: center;
}

.flip-box .box-title{
   background-color: #fff;
}

.flip-box .box-content{
   background-color: #fff;
   color: #332c2b;   
}

.flip-box .box-title p{
   font-size: 1.4em;
}
.flip-box .box-content p{
   font-size: 1.4em;
}
.box-title h4{
   font-size: 1.8em;
}
.box-title h2{
   font-size: 2.8em;
   font-weight: bold;
   margin-top: 3%;
}

.flip-box h4{
   width: 100%;
   margin-left: 0;
}


.flip-box:hover .box-title,
.flip-box:active .box-title,
.flip-box:hover .box-titlep,
.flip-box:active .box-titlep{
    transform: rotateY(-90deg);
}
.box-title,
.box-titlep{
    transform: rotateY(0deg);
    transition: all 0.5s ease-in-out 0s;}
.box-content{ 
    position: absolute;
    top: 0;
    left: 0;
    text-align: left;
    transform: rotateY(90deg);
    transition: all 0.50s ease-in-out 0s;
}
.flip-box:hover .box-content,
.flip-box:active .box-content{
    transform: rotateY(0);
}
/*#翻牌*/
/*class*/
/*ft_btn*/
.ft_btn{
    font-size: 2em;
    line-height: 1.2;
    font-weight: 700; 
    color: #fff;
    padding: 10px 5%;
    margin-top: 2%;
    display: inline-block;
    width: 90%;
   border-radius: 10px;
}

/*#_ft_btn*/
#class h3{
   font-size: 3.8em;
   font-weight: 700;
   margin-bottom: 2%;
}
#class h3 strong{
   font-size: 140%;
   font-weight: 900;
}
@media screen and (max-width: 575px) {
#socail_icon h3{
     font-size: 1.4em;
     margin-bottom: 2%;
     font-weight: 900;
   }
}
/*#_class*/

/*************Adms*************/
/*金色邊框*/
.border-gradient {
  border: 10px solid;
  border-image-slice: 1;
  border-width: 1.5em;
  background-color: #fff;
  padding: 3em;
}
.border-gradient-golden{
  border-image-source: linear-gradient(-60deg, #592a15 0%,#cb9b02 12%,#ffffff 24%,#ce971b 52%,#601814 100%);
}

h2.title{
   font-size: 3em;
   font-weight: 700;
   margin-bottom: .5em;
}
h2.title strong{
   font-size: 110%;
   font-weight: 900;
}

img.girl{
   position: absolute;
   top:25%;left: 15%;width: 11em;}
img.boy{ 
   position: absolute;
   top:43%;left: 15%;width: 11em;}

#adms-3 .btngo{
   position: absolute;
   top: 21%;
   left: 27%;
}
#adms-4 .btngo{
   position: absolute;
   top: 29%;
   left: 32%;
   min-width: 47%;
}
.btngo.fb{
   background-color: #3760ab!important;
}

/*臉書*/
.card-header{
   padding: 0!important;
}
.card-header h2{
   color: #fff!important;
    font-weight: 700;
    font-size: 2em;
}
.card-header .fbbtn{
    display: block;
    padding: 1em;
}
.card-body {
    padding: 1.25rem .25rem;
}
.card-body .s_btn {
    font-size: 1.7em;
    width: calc(100%/5);
    padding: .2em 0;}


/*#臉書*/
/*************Adms_MEDIA*************/
@media screen and (max-width: 1199px) {
img.girl{top:26%;left: 15%;width: 9em;}
img.boy{ top:45%;left: 15%;width: 9em;}
#adms .btngo{
      font-size: 1.6em;
   }   

}@media screen and (max-width: 575px) {
.border-gradient {
  border-width: 1em;
  padding: 1em;
}
.border-gradient-golden{
  border-image-source: linear-gradient(-60deg, #592a15 0%,#cb9b02 12%,#ffffff 24%,#ce971b 52%,#601814 100%);
} 
#adms .btngo{
      font-size: 2.1em;
   }      
img.girl {top: 18%;left: 33%;width: 15em;}   
img.boy{ top:40%;left: 33%;width: 15em;}   
#adms-3 .btngo {
    top: 13%;
    left: 20%;
  
}
 #adms-4 .btngo {
    top: 19%;
    left: 32%;
    min-width: 47%;
   
}  
#adms-5 .btngo {
   position: relative;
    top: -2%;
   margin-bottom: 5%;
}    
   
/*臉書*/   
.card-body .s_btn {
    font-size: 2em;
    width: 29%;
    padding: .3em 0;
}
   
}/*##*/



/*************#END_Adms*************/


/*****************ns-1*******************/
#ns-1,#ns-2,#ns-3{position: relative;}

#ns .btngo{
   font-size: 1.6em;
}  

#ns-1 .btngo{
   position: absolute;
   left: 3%;
   bottom: 4%;
   min-width: 50%;
}
#ns-2 .btngo{
   position: absolute;
   left: 21%;
   bottom: 3%;
   background-color: #630f13;
}

#ns-3 .btngo{
   position: absolute;
   left: 21%;
   bottom: 7%;
}
/*--------ns-1---MEDIA--------*/
@media screen and (max-width: 991px) {
#ns .btngo {
    font-size: 1.4em;
}   
#ns-1 .btngo {
    bottom: 2%;
}
   
}@media screen and (max-width: 575px) {
#ns .btngo {
    font-size: 2em;
}   
#ns-1 .btngo,
#ns-2 .btngo {
   position: relative;}
#ns-2 .btngo {
   left: 0%;  }
#ns-3 .btngo {
    left: 21%;
    bottom: 8%;
}   
   
}/*###*/
/*****************#END_ns-1*******************/






















/*footerstyle*/
.logo{margin-top: 5%!important;}  
footer{
	padding: 3em 0;
	background-color: #222222;
	color: rgba(255, 255, 255, 0.9);
	text-align:center;}

ul.footerstyle-social {
  padding: 10px 0;
  margin: 0;}
ul.footerstyle-social li {
/*display: inline;*/
  padding: 0;
  margin: 0;
  list-style: none;}
ul.footerstyle-social li a {
color: white;
  padding: 10px;
  font-size: 16px;}
ul.footerstyle-social li a:hover {
  color: white;}

@media screen and (max-width: 767px) {
.logo{width: 70%;margin-top: 5%;}   
footer {
    padding: 2em 0 6em 0;
}	
footer ul {
  border-bottom-width: 1px ;
	border-bottom-style: solid;
	border-bottom-color: rgba(255, 255, 255, 0.6);
	padding: 1em 0;
	/*margin: 0 3em; */
}	   
}@media screen and (max-width: 575px) {	

footer {
    padding: 3em 0 10em 0;
  }	
}	
/*end_footerstyle*/

/*---------------------------media------------------------------*/
@media screen and (max-width: 1400px) {
}
/*992~1200*/
@media screen and (max-width: 1199px) {
body {font-size: 1.35vw!important;}    

.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) {

}@media screen and (max-width: 768px) {

.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) {
body {font-size: 2vw!important;}      

section{padding-bottom: 3rem;padding-top: 3rem;overflow: hidden;}	
.type_pc{display: none;}
.nolr{
    padding-left: 0!important;
    padding-right: 0!important;}	
.click_hand {
    margin-left: .3em;
}
	
}/*END(max-width: 575px)*/
@media screen and (max-width: 472px) {	


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


}