.wrap *{transition:all .3s; -webkit-transition:all .3s;}
.wrap{ background:url(../images/demo/bg_header.gif) no-repeat top center #34ad56; min-height:1200px;
	font-family:'Noto Sans TC',"微軟正黑體","Microsoft YaHei","Gen Jyuu Gothic",Helvetica; }

@media (max-width: 640px) {
	
	.wrap{ background:url(../images/demo/bg_header.gif) no-repeat  center -50px #34ad56;}
	
}

.container{width:100%;max-width:954px;margin:0 auto ;position:relative; padding:10px ;padding-top:20px;}
.logo{  position:relative ; left:35px; z-index:3; display:inline-block; margin-bottom:-6px;}
.logo img{ margin:0 auto;  max-width:100%;}

@media (max-width: 640px) {
	.logo{ margin-left:auto; margin-right:auto; left: auto; display:block;}
}




.quickLink { position:absolute; right:10px; top:-10px; right:40px; }
.quickLink .link{ background:#ff9000; color:#000; padding:4px 14px; border-radius:10px 10px 0 0; margin:0 2px; text-decoration:none;position:relative;top:0px; 
box-shadow: 1px 1px 0 0px rgba(255,255,255,.5) inset; cursor: pointer;}
.quickLink .link:hover{ padding:4px 14px 8px; top:-4px;  background:#ffa530}

.quickLink .link-list{background: #ffc018}
.quickLink .link-list:hover{background: #ffc836}


@media (max-width: 640px) {
	.quickLink { display:none;}
}




/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ experience 體驗▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/

.experience{ margin-bottom:30px;}

.experience .title {margin-bottom:50px; margin-top:30px;text-align:center;}
.experience .title h2{ font-size:68px; font-weight:bold; color:#34ad56;  line-height:1.2; }
.experience .title h2 span{ color:#ff8a00;}
.experience .title h2 p{ font-size:30px;font-weight: normal; color:#6f6f6f;}
.experience .title a{ margin-top: 16px; font-size:15px;font-weight: normal; color:#6f6f6f;text-decoration: none;display: inline-block;padding:4px 6px 2px 15px; border-radius: 20px;border: 1px solid transparent;
}
.experience .title a:hover{border: 1px solid #34ad56; color: #34ad56; }
.experience .title a i{ margin-left: 5px; vertical-align: middle;position: relative;top: -2px;transition:all 0s; -webkit-transition:all 0s;}

.experience .device{ margin:0 auto; max-width:100%;}

.experience .btn-wrap{ text-align:center; margin:20px auto 10px;}
.experience .btn-wrap a{ background:#fff; color:#34ad56; padding:10px 20px; border-radius:50px; text-decoration:none; margin:4px; width:46%; max-width:260px; font-size:22px; font-weight:bold; }
.experience .btn-wrap a p{ font-size:70%; font-weight:normal; line-height:1.2; margin-bottom:5px;}
.experience .btn-wrap a:hover{ background:#fff837; }


@media (max-width: 1380px) and (min-width: 641px){
	
	.experience .title {margin-bottom:25px; margin-top:15px}
	.experience .title a{ margin-top: 10px;}
	.experience .title h2{font-size:60px;}
	.experience .btn-wrap{ text-align:center; margin:10px auto 10px;}
	.experience .btn-wrap a{padding:8px 16px; font-size:20px;}
}




@media (max-width: 640px) {


.experience{ margin-bottom:0px;}

.experience .title h2{ font-size:50px;}
.experience .title h2 p{ font-size:24px;}

.experience .btn-wrap{ margin:20px auto 40px;}
.experience .btn-wrap a{padding:8px 10px;font-size:18px; }
	

}


.arr-down{background:#219542;width: 36px;height: 36px;border-radius:50%; display: block;margin: 0 auto 60px;text-align: center;padding-top: 4px;cursor: pointer;}
.arr-down i{color: #fff;font-size: 24px;animation:arr-down .5s both infinite;-webkit-animation:arr-down .5s both infinite;position: relative;}


@keyframes arr-down {
  0%, 100% {top: 0; }
  50%,52% { top: 4px; }
}

@-webkit-keyframes arr-down  {
  0%, 100% {top: 0; }
  50%,52% { top: 4px; }
}




/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ main-vision 主視覺▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/


.main-vision-wrap{background:url(../images/demo/bg_content.gif) no-repeat   center  415px #34ad56;}

.main-vision{ width:100%;min-height:0; background:#ff9000; margin:0 auto 120px; border-radius:30px; position:relative; box-shadow:0 10px  50px 0px rgba(0,0,0,.2); overflow:hidden; z-index:1;

}

 .menu-part{ background: #fff; min-height:100px; position: relative;z-index:99;}
 .menu-part .bg{ width:100%; height:74px; background:url(../images/demo/menu-bg.png) no-repeat top center;position: absolute;top:-74px;z-index:1; }

 .menu-part .text-footer{ text-align:center; letter-spacing:10px; color:#adaeae; position:relative; top:-10px; font-size:14px;}

 .menu-part .btn-list{ background:#f2f2f2; border:1px solid #cacaca;border-radius:15px; cursor:pointer; position:absolute; right:10px; bottom:10px; 
	display:inline-block; padding:2px 10px; color:#8d8d8d; font-size:15px;}
	.menu-part .btn-list:hover{ background:#ff9000; color:#fff; border-color:#eb8500;}

@media (max-width: 640px) {
	.main-vision-wrap{background: none;}
	.main-vision{margin:0 auto 60px;}
	.main-vision .menu-part .bg{ display:none;} 
	.main-vision .menu-part .text-footer{top:-6px;}
	
}

/*--------------------------menu 選單--------------------------*/

.menu { width:90%;  max-width:800px; margin:0 auto; position:relative; top:-40px; z-index:99;  }
.menu ul {display:flex; }
.menu li { flex:1  }

.menu li .icon {width:80px; height: 80px; text-align: center; margin: 0 auto; z-index: 2;  position: relative; }
.menu li .line { width:50%; height:5px; position: relative; top: -50px; display:block; color:#bcbcbc;  }
.menu li .line:before{content:"●●" ;letter-spacing:1px; font-size:8px; font-family:Arial, Helvetica, sans-serif;}
.menu li .line.active { color:#0d8a30; }
.menu li .line.right { float: right;text-align:right }
.menu li .line.left { float: left; text-align: left;}


.menu li p{ text-align:center; letter-spacing:2px ; color:#CCC; font-weight:bold; background:#0d8a30; color:#fff; font-size:24px; font-weight:bold; display: none; 
border-radius:30px; max-width:110px; margin:-5px auto 0 ;}
.menu li p.active{ display:block;
 -webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
 -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}



@media (max-width: 640px) {

.menu{ top:0px; padding:15px 0;}
.menu li .line { display:none;}

}



/*-------------------------- menu-list--------------------------*/

.menu li h3{ font-size:28px; font-weight:bold; color:#2f9d4a; text-align:center;}
.menu li a{ display:inline-block; text-decoration: none; margin-left:40px;padding:2px 4px; border-radius:3px;font-size: 14.5px;}
.menu li a:after{content:"\f105";font-family: 'FontAwesome';margin-left: 4px;color: #00a52e;font-weight: bold;}
.menu li a:hover{color:#fff; background:#2f9d4a; }
.menu li a:hover:after {color:#fff;}


.menu-footer{  top:-20px; padding:15px 0; border-top:1px solid #e5e5e5;}
.menu-footer li a{margin-left:0px; text-align:center;margin-left:70px;}




@media (max-width: 640px) {
.menu ul{-webkit-flex-flow: row wrap;-ms-flex-flow: row wrap;flex-flow: row wrap;}
.menu-icon{ display:none !important;}
.menu li h3{ text-align: left; padding-left:10px; margin-bottom:5px; }
.menu li { margin-bottom:5px; margin-top:10px;}
.menu ul > li{ -webkit-flex: 1 50%;-ms-flex: 1 50%;flex: 1 50%;}
.menu  li a{ margin-left:10px !important;}
}




/*------------------------------------------ 左右按鈕-------------------------------------------------*/

.btn-step {display:inline-block; width:50px; height:50px;line-height:50px; vertical-align:middle; background:#000; color:#ff9000; font-size:16px; font-weight: bold;
position:absolute;left:0;top:0;right:0;bottom:0;text-align:center; cursor:pointer; z-index:999; white-space:nowrap; }
.btn-step i{font-size:26px;font-weight:normal; margin:5px; top:2px; position:relative;}

.btn-step:hover{ width:100px; } 
.btn-step:before,.btn-step:after { display: none; } 
.btn-step:hover:before,.btn-step:hover:after{display: inline; } 


.btn-next{margin:auto 0 auto auto;  border-radius:30px 0 0 30px;}
.btn-next:before{ content:"下一步"}
.btn-prev,.btn-replay{margin:auto auto auto 0 ;border-radius:0 30px 30px 0;}
.btn-replay{ margin:32%  auto auto 0; }
.btn-prev:after {content:"上一步"}
.btn-replay:after {content:"重播"}



.btn-step:hover i{  animation:arr-move .2s both infinite;-webkit-animation:arr-move .2s both infinite;}

@-webkit-keyframes arr-move {
  0%, 100% { left:2px; }
		50% {left:0px; }
}
@keyframes text-color-flash {
  0%, 100% { left:2px; }
		50% {left:0px; }
}



/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ situation 對話▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/

.situation{ position: relative; z-index:1; height:477px;}
.situation .char,.situation .say ,.situation .bg{  position:absolute;left:0;top:0;right:0;bottom:0;  }
.situation .char{z-index:1;}
.situation .bg { z-index:0;}
.situation .say{z-index:2;  color:#fff; }
.situation .say h3{font-size:30px;font-weight:bold; line-height:1.2;}
.situation .say p{ font-size:18px; }

.situation .say .line{ width:26px; height:2px; background:#fff; border-radius:1px; position:absolute; opacity:0; }
.situation .say .line.left{ transform:rotate(45deg);  }
.situation .say .line.right { transform:rotate(-45deg);  }





/*-------------------------- 打字效果--------------------------*/

.set-show .typing{  display: inline-block;  width: 0; overflow: hidden;white-space: nowrap;
animation: typing-act 1s steps(8)  both;-webkit-animation: typing-act 1s steps(8)  both;
}


@keyframes typing-act {  
	0% { width: 0;}
	100% {width: 240px;}
}
@-webkit-keyframes typing-act {  
	0% { width: 0;}
	100% {width: 240px;}
}


.set-show .text-show { overflow: hidden;animation:text-show .8s  both ease-in-out ;-webkit-animation:text-show .8s  both ease-in-out ;}
@keyframes text-show {
  0% { width:0; }
		100% {width:100%;  }
}
@-webkit-keyframes text-show {
  0% { width:0; }
		100% {width:100%;  }
}



.set-show .line-show { animation:line-show .3s  both  ;-webkit-animation:line-show .3s  both  ;}
@keyframes line-show {
  0% { opacity:0 ;}
		100% {opacity:1;  }
}
@-webkit-keyframes line-show {
  0% { opacity:0 ;}
		100% {opacity:1;  }
}


.set-show .char-show { animation:char-show .3s  both    ;-webkit-animation:char-show .3s  both  ;}
@keyframes char-show {
  0% { -webkit-transform: translateY(60px);transform: translateY(60px); opacity:0;}
		80% {-webkit-transform: translateY(-6px);transform: translateY(-6px);opacity:1; }
		100% {-webkit-transform: translateY(0px);transform: translateY(0px); }
}
@-webkit-keyframes char-show {

}


.situation .set{ display:none;}
.situation .set-show{ display: block;}


.set-show .char01 { animation-delay:.1s;-webkit-animation-delay:.1s;}
.set-show .char02 { animation-delay:.3s;-webkit-animation-delay:.3s;}
.set-show .char03 { animation-delay:.4s;-webkit-animation-delay:.4s;}
.set-show .bg { animation-delay:.6s;-webkit-animation-delay:.6s;}
.set-show .say01 .typing { animation-delay:1s;-webkit-animation-delay:1s;}
.set-show .say01 .text-show { animation-delay:2s;-webkit-animation-delay:2s;}
.set-show .say01 .line-show { animation-delay:2.5s;-webkit-animation-delay:2.5s;}
.set-show .say02 .typing { animation-delay:2.5s;-webkit-animation-delay:2.5s;}
.set-show .say02 .text-show { animation-delay:3.5s;-webkit-animation-delay:3.5s;}
.set-show .say02 .line-show { animation-delay:4.0s;-webkit-animation-delay:4.0s;}




/*-------------------------- 情境1--------------------------*/

.set01{ }
.set01 .char01{ margin:8% auto auto 25%;}
.set01 .char02{margin:12% 21% auto auto ;}
.set01 .say01{margin:6% auto auto 9%;width:190px; }
.set01 .say01 .text-show ,.set01 .say01 p{ width:190px;}
.set01 .say02{margin:12% 4% auto auto ;width:140px}
.set01 .say02 .text-show ,.set01 .say02 p{width:140px;}
.set01 .say01 .line{right:10px;margin-top:-10px;}
.set01 .say02 .line {left:-30px; margin-top:-10px;}
.set01 .bg {margin:auto auto 50px auto;}




/*-------------------------- 情境2--------------------------*/

.set02{ }
.set02 .char01{ margin:auto auto 50px auto ;}
.set02 .char02{margin:auto auto 50px 20% ;}
.set02 .say01{margin:7% auto auto 8%;width:220px; }
.set02 .say01 .text-show ,.set02 .say01 p{ width:220px;}
.set02 .say02{margin:12% 3% auto auto ;width:210px}
.set02 .say02 .text-show ,.set02 .say02 p{ width:210px;}
.set02 .bg {margin:3%  30% auto  auto;}


/*-------------------------- 情境3--------------------------*/

.set03{ }
.set03 .char01{ margin:3% auto auto 10%;}
.set03 .char02{margin:6% 32% auto auto ;}
.set03 .say01{margin:3% auto auto 24%;width:240px; }
.set03 .say01 .text-show ,.set03 .say01 p{ width:240px;}
.set03 .say02{margin:24% 14% auto auto ;width:200px}
.set03 .say02 .text-show ,.set03 .say02 p{width:200px;}
.set03 .say01 .line{left:-30px;margin-top:-40px;}
.set03 .say02 .line{left:-30px; margin-top:-60px;}
.set03 .bg {margin:4% -5px auto auto ;}



/*-------------------------- 情境4--------------------------*/

.set04{ }
.set04 .char01{ margin:5% auto auto 25%;}
.set04 .char02{margin:10% 29% auto auto ;}
.set04 .say01{margin:4% auto auto 38%;width:200px; }
.set04 .say01 .text-show ,.set04 .say01 p{ width:200px;}
.set04 .say02{margin:15% 4% auto auto ;width:220px}
.set04 .say02 .text-show ,.set04 .say02 p{width:220px;}
.set04 .say01 .line{left:-30px;margin-top:-10px;}
.set04 .say02 .line {left:-30px; margin-top:-80px;}
.set04 .bg {margin:7% auto auto  8%;}



/*-------------------------- 情境5--------------------------*/

.set05{ }
.set05 .char01{ margin:3% auto auto 8%;}
.set05 .char02{ margin:13%  auto auto 21%;}
.set05 .char03{margin:12% 7% auto auto ;}
.set05 .say01{margin:3% auto auto 26%;width:180px; }
.set05 .say01 .text-show ,.set05 .say01 p{ width:180px;}
.set05 .say02{margin:26%  auto auto 38%;width:200px}
.set05 .say02 .text-show ,.set05 .say02 p{width:200px;}
.set05 .say01 .line{left:-30px;margin-top:-10px;}
.set05 .say02 .line {left:-30px; margin-top:-80px;}
.set05 .bg {margin:7% auto auto  16%;}


/*------------------------------- 列表--------------------------------*/

.set-list{ }
.set-list .char01{ margin:4% 12% auto auto ;}
.set-list .char02{ margin:25%  auto auto 20%;}
.set-list .say01{margin:10% auto auto 20%;width:290px; }
.set-list .say01 .text-show ,.set-list .say01 p{ width:290px;}

.set-list .bg {margin:27% 24% auto auto  ;}




@media (max-width: 640px) {
.situation{  height:610px; zoom:.6;}


.set-list .char01{ margin:auto 1% 0 auto ;}
.set-list .char02{ margin: auto auto 26%  6%;}
.set-list .say01{margin:10% auto auto 6%;width:340px;  }
.set-list .say01 .text-show ,.set-list .say01 p{ width:340px;}

.set-list .bg {margin:auto auto  4%  10% ;}

.set-list .say h3{font-size:24px;}
.set-list .say p{ font-size:16px; }


.set-show .typing{  display: inline-block;  width: 0; overflow: hidden;white-space: nowrap;
animation: typing-act 1s steps(10)  both;-webkit-animation: typing-act 1s steps(8)  both;
}


@keyframes typing-act {  
	0% { width: 0;}
	100% {width: 340px;}
}
@-webkit-keyframes typing-act {  
	0% { width: 0;}
	100% {width: 340px;}
}


}





/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ FAQ 問答▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/

.FAQ *{transition: none; -webkit-transition:none; }

.FAQ{ background:#eff1fe; padding-bottom:200px; }

.FAQ h3{ font-size:38px; font-weight:bold; color:#34ad56; margin-bottom:20px;}

 .QA-wrap { list-style:decimal; padding-left:26px; }

 .QA-wrap  .QA{ color:#34ad56; position:relative; }
	
	.QA-wrap  .QA:before,.QA-wrap  .QA:after{ content:""; position:absolute; left:0; width:100%; height:1px;}
	.QA-wrap  .QA:before{ background:#cfcfcf; bottom:1px;}
	.QA-wrap  .QA:after{background:#cfcfcf; bottom:0px;}
	
	/*.QA-wrap  .QA:last-child:before ,.QA-wrap  .QA:last-child:after{ display:none;}*/

 .QA-wrap  .QA .Q{ vertical-align:middle;padding:10px; padding-left:5px ;padding-right:30px;font-weight:bold;  cursor:pointer; font-size:20px; letter-spacing:1px;  position:relative;}
 .QA-wrap  .QA .Q:before{ content:"\f107"; color:#34ad56;font-family: 'FontAwesome'; font-size:30px; position:relative; top:5px; margin-right:5px; font-weight:normal;
	position:absolute; right:0; top:5px;
	 }
 .QA-wrap  .QA .Q.close:before{ content:"\f106";}

 .QA-wrap  .QA .A{padding:10px ;padding-left:;  background:#e2e4f3; color:#676767}

.QA-wrap  .QA .A a{ color: #F60; text-decoration:underline;}

.FAQ .pic{ max-width:100%; margin:20px auto;}

.FAQ  .video { }
.FAQ  .video div{ margin:10px; }
.FAQ  .video iframe { width:400px; height:225px;}


@media (max-width: 640px) {
	
	.FAQ h3{ font-size:30px;}
	.QA-wrap  .QA .Q{font-size:18px;}

.FAQ  .video iframe { width:100%; height:40vw; }

}
















@media (max-width: 640px) {



}