*{
    margin:0;
    padding: 0;
}
.clear{
    clear: both;
}
img{
    width:100%;
    vertical-align: bottom;
}
a, a:hover {
    text-decoration:none;
    cursor: pointer;
}
body{background-image: url('../images/BG/bg.jpg');background-attachment:fixed;}
img,a,p,ul,li,div,input,h1,h2,h3,h4,h5,h6,span,textarea,table,tr,td{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0;padding: 0}
#LP{ 
    font-family: 'Noto Sans TC', serif;
}
.content{
    max-width: 1000px;
    margin: 0 auto;
    
}
.content-wide{
    max-width: 1200px;
    margin: 0 auto;
}

img.flex-img{
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    display: block;
}
/**側邊按鈕**/
#side_btn{
	float: left;
	right: 20px;
	width: 30%;
	max-width: 200px;
	bottom:20px;
	position:fixed;
	z-index:200;
    transition: all 0.5s ease;-moz-transition: all 0.5s ease;-webkit-transition:all 0.5s ease;-o-transition: all 0.5s ease; 
}
 
.show{
    visibility: visible;
    display: block;
}
/*full bg*/
.full-bg{
    background-size: cover;
    background-position: center;
}
  
.user{
    background-image: url('../images/user.jpg');
    background-position: center top;
    background-size: 100%;
}
 
 
 
#side_btn.hidden {
   right: -250px;
}
 

/*影片*/
.movie-bg{
    background-image: url('../images/lp_03-3.jpg'); 
}
.movie{ 
    position: relative;
    width:90%;margin: 0 auto;
    padding: 0 0 52% 0;} 
.movie iframe{ 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;}


/*QA*/
.accordion-area{
    list-style: none; 
    margin:0 auto;
    padding-bottom: 80px;
    background-color:#eeedf3;
}
 
.title {
    position: relative; 
    cursor: pointer;
    font-size:1rem;
    font-weight: normal; 
    transition: all .5s ease;
}
 
.title::before {
    position: absolute;
    content:'';
    width: 5%;
    height:80%;
    top:10%;
    right:11%;
    background: url('../images/er.png') no-repeat center;
    background-size: 100%;
    transition: all .5s ease;
}
.title.close::before{
    transform: rotate(-90deg);
  }
 
 
.box {
    display: none; 
}

.section6{overflow: hidden;}

.trouble{
  width: 33.3%;
  position: absolute;
  top: 15%;
  right: 0;
}

	
/*按鈕*/
.section1 .content, .offer,.offer1, .offer2, .offer3,.relate {
    position: relative;
}
  
.btn{
    position: absolute;
    z-index: 2;
    bottom: 0;
    transition: all 0.2s ease;-moz-transition: all 0.2s ease;-webkit-transition:all 0.2s ease;-o-transition: all 0.2s ease;  
} 
 
 
/*按鈕定位*/
.offer .btn{
    bottom: 6%;
    left: 17%;
    width: 65%;
}
  
.offer1 .btn{
    bottom:7%;
    left: 15%;
    width: 70%;
}
 .offer2 .btn{
    bottom:6%;
    left: 15%;
    width: 70%;
}
.offer3 .btn{
    bottom:22%;
    width:48%;
  right:10%;  
}
 
 

/*亮亮*/ 
.light{width: 100%;
    text-align: center;
    font-size: 2rem; ;
    overflow: hidden;
    display: block; 
    position: relative;  
}

.light:after{content: '';
   display: block;
   position: absolute;
   left: -60%;
   top: 0;
   width:50%;
   height: 100%;
   background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
   background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
   -webkit-transform: skewX(-25deg);
   transform: skewX(-25deg);
   animation: btn  3s infinite ease-in-out; 
}

/*亮亮動畫*/
   @keyframes btn {
       0% {  left:  -60% ; } 
       100% { left: 100%; }
   }

   @-webkit-keyframes btn {
       0% { left: -60% ;  } 
       100% { left: 100%;  }
   }
 

/*RWD*/
 
@media screen and (max-width: 1000px){
 nav{ display: none;
  }
 #hamburger{display: block;} 
 #side_btn{
     right: 0;bottom:0;
 }
}

@media screen and (max-width: 768px){
  .hidden-md{display: none;}
  #nav-icon {  width: 80px; height: 80px;} 
 
 }
@media screen and (max-width: 450px){ 
   
}

@media screen and (max-width: 375px){ 
    #nav-icon {  width: 60px; height: 60px;}
    #nav-icon span{height: 2px;}
}