@charset "utf-8";
/* CSS Document */

@import url("reset.css");
@import url("/css/font-awesome.css");
@import url("/css/bootstrap.css");
@import url("/css/animate.css");
@import url("/css/hover.css");
/*@import url("https://fonts.googleapis.com/icon?family=Material+Icons");*/

html, body { width:100%; height: auto;overflow-X:hidden; }
body { font-size:100%;}


/*:before{ content:"\f146";font-family: 'FontAwesome'; }*/

.btnTop{ background: #CCC;background:rgba(0,0,0,.2); border-radius:50%; width:50px; height:50px; position: fixed;right:15px; bottom:15px;cursor:pointer; z-index:99; color:#FFF; text-align:center; font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase; font-size:13px ; letter-spacing:1px; display: none  ; z-index:999;}
.btnTop:before{content:"\f106";font-family: 'FontAwesome'; font-size:20px; color: #FFF ; display:block; padding-top:6px;}
.btnTop:hover{background:rgba(0,0,0,.4);}

.img-response{ max-width:100%; height:auto;}

/*------------item-inline-block------------*/
.item-inline-block{ letter-spacing:-5px;}
.item-inline-block > *{display: inline-block !important; letter-spacing:1px;vertical-align: top;}

/*------------item-table-cell------------*/
.item-table-cell{ display:table;}
.item-table-cell > *{display: table-cell !important; vertical-align: top;}


/*------------item-flex------------*/
.item-flex{ display:flex !important;display:-webkit-flex !important;}
.item-flex > *{flex:1;-webkit-flex:1 }

@media screen and (max-width: 640px) {
	
.vertical-xs{ display:block !important;	}
.vertical-xs  > *{  display:block !important; width:100% !important ;float:none !important; }
.wrap .header .logo{ width: 140px; }
}


.show{ display:block !important;}
.hide{ display:none !important;}

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

	.hide-xs{ display:none !important; }
	.show-xs{ display:block !important;}

}


.wrap{width:100%;height:auto;position:relative; font-family:'Noto Sans TC',"微軟正黑體",Microsoft Yahei;line-height:1.6; background:#fff;padding-top: 0!important;}
		
.btn-contact{
	display: inline-block;
	font-size: 22px;
	padding: 10px 40px ;
	background: #ff4830;
	border-radius: 5px;
	color: #fff;
	box-shadow: 2px 2px #777;
	transition:all .3s; 
	-webkit-transition:all .3s;
	margin:20px auto 40px;
}
.btn-contact:hover{
	color:#fff;
	background: #5d68ff;
	text-decoration: none;
	box-shadow: 1px 1px #999;
	transition:all .3s; 
	-webkit-transition:all .3s;
}


/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 版頭 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/

.wrap .header .logo{ position:absolute; left:15px; top:15px; z-index:6;}
.wrap .header .logo img{width:100%; height:auto;max-width:200px;}


.kv{
	background: url(../images/kv.jpg) no-repeat top center;
	background-size: cover;
	width: 100%;
	height: 700px;
}

.kv .content{
	width:1200px;
	margin:0 auto;
	padding:148px 0 0 450px; 
}

.kv .content .sticker{
	padding:125px 0 0 340px;
	animation: arrowDown 1.5s infinite;
	animation-timing-function: ease-out;
}

@keyframes arrowDown {
	0% {
		padding-top: 125px;
	}

	50% {
		padding-top: 135px;
	}

	100% {
		padding-top: 125px;
	}
}

#TOP-MENU{
	display:none;
}

.nav{
	display:block;
	width:100%;
	background:#80ba41;
	text-align:center;
}

.nav a{
	font-size:24px;
	display:inline-block;
	color:#fff;
	line-height:70px;
	text-decoration:none;
	font-weight:bold;
	width:20%;
}

.nav a:hover{
	background:#51841a;
}




/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 內容 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/


.h2_title{
	font-size: 36px;
	font-weight: bold;
	line-height: 42px;
}
.wrap .container { }


.part2-dv {
    background-color: #fff;

    padding: 10vh 0;
}
.part2-dv .container {max-width:1200px;}

.part2-dv .text{padding: 0;font-size: 18px;margin-bottom: 20px;}
.part2-dv .text h3{font-size: 2em;font-weight: bold;margin-bottom: 0;    color: #446327;}
.part2-dv .text .tit {
    display: inline-block;
    text-align: center;
    letter-spacing: 2px;
    background:  #5a8334;
    font-size: 18px;
    color: #ffffff;
    padding: 5px 20px;
    margin-top: 12px;
    margin-bottom: 5px;
    transform: skewX(-10deg);
}
.part2-dv .text p{font-size: 16px;max-width: 420px;}

.part2-dv .mac{width: 551px;position: relative;margin-bottom: 20px;position: relative;top: 30px;}

.part2-dv .mac .pic{width: 80%;top: 6%;left: 12.5%;position: absolute;}
.part2-dv .mac .pic img{width: 93%;max-width:100%; height:auto;}

.part.part2-dv h2 {
    color: #def37d;    margin-bottom: 2%;font-weight: bold;
    font-size: 2.3em !important;
}





@media screen and (max-width: 640px) {	
    
   .part2-dv .text{font-size: 16px;}

}



.carousel-pic{position: relative;}
 .carousel-pic img{ position: absolute;top: 0; left: 0; opacity: 0;-webkit-animation: round 9s linear infinite;animation: round 9s linear infinite;}
    
 .carousel-pic img:nth-child(1) { webkit-animation-delay: 0s; animation-delay: 0s;}
 .carousel-pic img:nth-child(2) { -webkit-animation-delay: 3s; animation-delay: 3s;}
 .carousel-pic img:nth-child(3) { -webkit-animation-delay: 6s; animation-delay: 6s;}
    

@keyframes round {
    12%,33% { opacity: 1;}
    46%{ opacity: 0;}
}

@-webkit-keyframes round  {
     12%,33% { opacity: 1;}
    46%{ opacity: 0;}
}





.part.part2 {
    background-color: #ffe8bf;
    padding:10vh 0;
}
.part2 .containers {max-width:1200px;}



.part.part2 h2 {
    color: #000000;    margin-bottom: 6vh;font-weight: bold;text-align: center;
    font-size: 2.3em !important;
}
.part.part2 .icon{width: 140px;height: 140px;background: #fff;border-radius: 100em;padding-top: 18px;margin-left: auto;margin-right: auto;margin-bottom: 20px;}
.part.part2 .icon img{display: block;margin-left: auto;margin-right: auto;height: 110px;width: auto;max-width: none}
.part.part2 h3{
    color: #000000;margin-bottom:.5em;
}
.part.part2 p {color: #000000;max-width: 170px;margin-left: auto;margin-right: auto;}


.part-gift { padding-top: 0; }
.part-gift .container-wrap {
    max-width: 1000px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 30px auto 80px;
}
.part-gift .text p { margin: 0; margin-bottom: 2px; }
.part-gift .text h3 { line-height: 1; font-weight: bold; font-size: 1.9em; }
@media screen and (max-width: 768px) { .part-gift .gift { margin-top: 6px; } }
.part-gift .gift img { position: relative; top: -14px; }
.part-gift .gift p { font-weight: bold; font-size: 1.8em; margin-left: 10px; }
.part-gift .title-line-gift { display: flex; white-space: nowrap; text-align: center; align-items: center; font-weight: 600; font-size: 1em; color: #363636; letter-spacing: 0px; width: 100%; overflow: hidden; }
.part-gift .title-line-gift:after, .part-gift .title-line-gift:before { border-top: 4px dotted #363636; content: ''; position: relative; width: 50%; }
.part-gift .title-line-gift:before { right: 1.5%; }
.part-gift .title-line-gift:after { left: 1.5%; }

@media screen and (max-width: 768px) {
	.part-gift { margin-top: 0; }
  .part-gift .text { margin-bottom: 20px; background: #01b45c; border-radius: 0 100px 100px 0; color: #fff; padding: 10px 18px; }
  .part-gift .text p { font-size: 1.4em; line-height: 1.4; margin-bottom: 0; font-weight: 300;max-width: 170px; }
  .part-gift .text h3 { font-size: 1.6em; line-height: 1.2; color: #ffffff; margin-bottom: 0; }
  .part-gift .gift { border-bottom: 2px dotted #666666; padding-top: 12px; }
  .title-line-gift:after, .title-line-gift:before { display: none; } }
@media screen and (max-width: 640px) {	
    
   .part2 .text{font-size: 16px;}

}


@media screen and (max-width: 640px) {
	.h2_title{
	font-size: 30px;
	line-height: 38px;
}
	
}

.part.part2 h3 {
    font-size: 20px;text-align: center;
}

@media screen and (max-width: 768px) {
	
	.btn-contact{
		font-size: 24px;
		padding: 15px 20px;
		margin:0 auto 20px;
	}
}
@media screen and (max-width: 480px) {
	
	.btn-contact{
		font-size: 16px;
	}
}









@media screen and (max-width: 1024px) {
.kv .content{
	padding:13% 0 0 35%; 
}

.kv .content .tagline{
	width:75%;
}

.main-content .part1 ul:first-child{
	width:30%;
	margin-left:3%;
}

.main-content .part1 ul:last-child{
	width:55%;
	position:relative;
	margin-left:20px;
}




}


@media screen and (max-width: 768px) {
.kv{
	background: url(../images/phoneKv.jpg) no-repeat top center;
	background-size: auto;
	width:100%;
	max-width:768px;
	height:800px;
}

.kv .content{
	width:100%;
	padding:10% 0 0 5%; 
}

.kv .content .tagline{
	width:95%;
}

.kv .content .sticker{
	padding:90px 0 0 340px;
}

@keyframes arrowDown {
	0% {
		padding-top: 90px;
	}

	50% {
		padding-top: 100px;
	}

	100% {
		padding-top: 90px;
	}
}

.nav a{
	width:33%;
}

.main-content .part1 ul:first-child{
	width:43%;
	margin-left:3%;
}

.main-content .part1 ul:last-child{
	width:35%;
	position:relative;
	margin:0 5% 0 0;
}

.main-content .part1 ul:last-child li:first-child{
	top:0;
	left:0;
}

.main-content .part1 ul:last-child li:last-child{
	display:none;
}

.main-content .part2 li img:first-child{
	display:none;
}

.main-content .part2 li img:last-child{
	display:inline-block;
	text-align:center;
}

.main-content .part2{
	background: url(../images/bg2.jpg) repeat-y top center;
	background-size: cover;
	width: 100%;
	height: auto;
}

.main-content .part3{
	background: #fff3de;
	width: 100%;
	height: auto;
}



}

@media screen and (max-width: 640px) {
.kv{
	width:100%;
	max-width:768px;
	height:800px;
}

.main-content .part1 ul:first-child{
	width:50%;
}

.main-content .part1 ul:last-child{
	width:40%;
}

.main-content .part1 ul:last-child img{
	width:100%;
	max-width:366px;
}


}


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

.wrap .header .logo img{width:80%;}


.kv{
	background: url(../images/phoneKv_480.jpg) no-repeat top center;
	background-size: auto;
	width:100%;
	max-width:480px;
	height:500px;
}

.kv .content{
	width:100%;
	padding:15% 0 0 5%; 
}

.kv .content .sticker{
	width:80%;
	padding:15% 0 0 50%;
}

.main-content .part1 ul:first-child{
	width:95%;
	margin:0 3%;
}

.main-content .part1 ul:first-child li:last-child{
	text-align:center;
}

.main-content .part1 ul:last-child{
	display:none;
}

@keyframes arrowDown {
	0% {
		padding-top: 15%;
	}

	50% {
		padding-top: 16%;
	}

	100% {
		padding-top: 15%;
	}
}

#TOP-MENU{
	display:block;
	background:#80ba41;
	width:100%;
	text-align:right;
	padding:5px 10px 5px 0;
}

#TOP-MENU #BTN:before{
	font-family: 'FontAwesome';content: "\f0c9";color:#fff; font-size:30px;
	cursor: pointer;
}

.nav{
	display:none;
	transition: none; -webkit-transition:none;
}
	
.nav a{
	width:100%;
	font-size:24px;
}


.prizeBox{ padding:30px 0px; width:90%;}
.h4{ font-size:1.25em;}
.txt{margin:10px 0; font-size:16px}
.pTitle{ display: block; float: none; margin:0 auto;}
.prize img{display:block; margin-top:10px; margin:0 auto; width:100%;}

	
}

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

}