@charset "utf-8";
/* CSS Document */

@import url("../css/reset.css");
@import url("/css/font-awesome.css");
@import url("/css/animate.css");
@import url("/css/bootstrap.css");
@import url("/css/hover.css");
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

html, body { width:100%; height: auto;overflow-X:hidden; }
body { font-size:100%; }
iframe { display: ;}
*{transition:all .3s; -webkit-transition:all .3s;}

/*:before{ content:"\f146";font-family: 'FontAwesome'; }*/

.btnTop{ background: #CCC \9;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; }

}


.show{ display:block !important;}
.hide{ display:none !important;}

@media screen and (max-width: 640px) {	

	.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: url("../images/header_bg.gif") no-repeat top center #def37d;

}



@media screen and (max-width: 640px) {	
	
    .wrap{ background: #def37d;    margin-bottom: 0 !important;}
	
}

		
.people{background: url("../images/people.png") no-repeat center center; position: absolute;top: 440px;width: 100%;height: 300px;z-index: 99;}


@media screen and (max-width: 640px) {	
	
    .people{ background: transparent; top: 76vh;height: auto;}
	
}


/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 版頭 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/

 .header {width:100%; position:relative; height: 615px; overflow:hidden;}




 .header .center{width:100%;max-width:1112px;position:relative; margin:0 auto; z-index:1;}
 



 .header .logo{ position:absolute; left:10px; top:10px; z-index:6; width:180px;}
 .header .logo img{width:100%; height:auto;max-width:100%;min-width:100px;}


@media screen and (max-width: 640px) {	
    .header .logo{ top: 3%;right: 10%;left: auto;width: 140px;}
     .header { height: auto;background: url("../images/header_bg-phone.gif") no-repeat bottom center #4f55e8; background-size: 100% auto;}

	
	
}


.title{position: absolute;top: 20%;right: 10%;text-align: center; }

@media screen and (max-width: 1100px) {	
    .title{right: 2%;}

}

@media screen and (max-width: 640px) {	
    .title{right: 0;
/*		zoom: .6 !important;*/
		width: 84%; position: relative;margin-left: auto;margin-right: auto;margin-top: 80px;}

}

.title .line{background: #def37d;position: absolute;}

.title h1{ color: #def37d;line-height: 1.2;position: relative;}
.title h1 .text{font-size:57px;display: block;letter-spacing: 1px;font-weight: 300;padding-left: 6px;}
.title h1 .blod{ font-weight: bold;font-size:68px;position: relative;letter-spacing: 0;display: block;}
.title h1 .blod .icon{ position: absolute;left: 153px;top:22px;}
.title h1 .line1{width: 8px;height: 90px;left: -30px;top: -30px;}
.title h1 .line2{width: 100px;height:3px;right: 10px;bottom: -10px;}


.title h2{ color: #fff;margin-top: 30px;margin-left: 10px;}
.title h2 .text{font-size: 25px;font-weight: 200;line-height: 1.2;display: inline-block;padding-right: 15px;border-right: 6px solid  #def37d;text-align: right; }
.title h2 .large{font-size: 48px;font-weight: 400;display: inline-block;vertical-align: top;line-height: 1.2;padding-left: 12px;position: relative;}
.title h2 .large .icon{position: absolute;right: -16px;top: -13px;}

@media screen and (max-width: 640px) {	
    
    .title h2{margin-top: 40px;}
    .title h2 .text{font-size: 28px;} 
    .title h2 .large{font-size: 52px;}
    .title h1 .blod .icon{display: none; }
        
}



.hold-phone{position: relative;top: 53px;width: 80%;max-width: 447px;}
.hold-phone .pic{top: 2.6%;right: 12.2%;position: absolute;width: 49.6%;max-width: 220px;height: 479px;}
.hold-phone .pic img{max-width:100%; height:auto;}

@media screen and (max-width: 640px) {	
    
    .hold-phone{top: 0;margin-top: 20px;}
}



.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;}
}




/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 內容 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/


.container { max-width:1200px;width:100%; margin:0 auto;}

.part1{padding-top: 15vh;position: relative;}

.part1 .item{width: 50%;text-align: center; color: #434343;margin-bottom: 30px;}
.part1 .item h3{font-size: 34px;font-weight: bold;}
.part1 .item p{margin-bottom: 30px;font-size: 20px;}
.part1 .item img{margin-left: auto;margin-right: auto;}


@media screen and (max-width: 640px) {	
	
   .part1{padding-top: 12vh;}  
    .part1 .item:first-child{margin-right: 0px;}
	
}


.part.part2 {
    background-color: #4f55e8;
    margin: 8vh 0 0;
    padding: 5% 0;
}
.part2 .container {max-width:1200px;}

.part2 .text{padding: 10px;font-size: 18px;margin-bottom: 20px;}
.part2 .text h3{font-size: 2em;font-weight: bold;margin-bottom: 20px;}
.part2 .text .tit{width: 110px;text-align: center;letter-spacing: 2px;background:#4f55e8; font-size: 1.2em;color: #fff; border-radius:30px ;padding: 2px ;margin-top: 20px;margin-bottom: 5px;}
.part2 .text p{font-size: 1em;}

.part2 .mac{width: 618px;position: relative;margin-bottom: 20px;}

.part2 .mac .pic{width: 80%;top: 6%;left: 12.5%;position: absolute;}
.part2 .mac .pic img{width: 93%;max-width:100%; height:auto;}

.part.part2 h2 {
    color: #def37d;    margin-bottom: 2%;font-weight: bold;
    font-size: 2.3em !important;
}
.part.part2 h3, .part.part2 p {
    color: #fff;
}




@media screen and (max-width: 640px) {	
    
   .part2 .text{font-size: 16px;}

}


.btns{text-align: center;margin:8vh 0;}

.btns .btn{ border-radius: 30px; background: #ff2476;display: inline-block;padding: 10px 30px; color: #fff;font-size: 24px;text-decoration: none;
    text-align: center;margin: 10px;width: 80%;max-width: 300px;}
.btns .btn:hover{ background: #4f55e8;}

.btns .btn .icon{width: 36px;height: 36px;display: inline-block;margin-left:20px;}

.btns .btn:hover .icon{transform: rotate(90deg);}






@media screen and (max-width: 640px) {	
    .btns .btn{}
	
	
}

section.part.register {
    padding: 4% 0;background-color: #efffd5;
}

.part4 .container {
    margin: 0 auto;
}


.part4 { margin-top: 0; position: relative; z-index: 9;     background: #def37d; padding: 3em 0; }
.part4 .container { max-width: 1000px; }
.part4 .gift .text-part h4 { font-size: 1.2em; padding-left: 5px; }
.part4 .gift .text-part h3 { color: #4f55e8; font-size: 2.4em; font-weight: bold; }
@media screen and (max-width: 640px) { .part4 .gift .text-part h3 { font-size: 1.8em; } }
.part4 .gift .text-list { list-style: none; font-size: 18px; padding-left: 6px; margin-top: 30px; }
.part4 .gift .text-list li { margin-bottom: 16px; }
.part4 .gift .text-list span { font-size: 16px; background: #4f55e8; margin-right: 6px; padding: 3px 6px; color: #fff; border-radius: 6px; }


@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
      transform: scale(1.2);
      -webkit-transform: scale(1.2);
    -webkit-transform: translate3d(0, -30%, 0);
    transform: translate3d(0, -30%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
       transform: scale(1.2);
      -webkit-transform: scale(1.2);
    -webkit-transform: translate3d(0, -30%, 0);
    transform: translate3d(0, -30%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}


.dot{display: none;}

@media screen and (max-width: 640px) {	

.title h1 .blod {
    font-size: 45px;
}
.title h1 .text {
    font-size: 36px;
}
.title h2 .text {
    font-size: 18px;
}
.title h2 .large {
    font-size: 40px;
}
.people-phone {
    display: none;
}
.part1 {
    padding-top: 5vh;
}
.register {
    width: 100% !important;
    max-width: none !important;
        padding: 4% 6% !important;
}	
.product p br {
    display: none;
}	
	
.dot{display: inline-block;}

}



