@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
@charset "utf-8";
/* CSS Document */

body, html {
  height: 100%;
  margin: 0;
}
* {box-sizing: border-box;
}

/* ---reset.css--- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	font-family:'Century Gothic','cwTeXYen',serif, Arial , Heiti TC, sans-serif ;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
	-webkit-text-size-abjust:none; /*iphon 旋轉字大小不變*/
	list-style:none;padding:0;margin:0;


}
body {
line-height: 1;
letter-spacing:2px;
background:#f5f1ef;
color:#27233a;

}


ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
	display: block;
}

h1{
	font-size:6em;
	}
	
h2{ font-size:50px;font-weight:normal;
	}
h3{
  font-size:45px; font-weight:normal; /*36px*/
	}	
	
h4{
  font-size:32px;  /*24px*/
	}	
	
h5{
	font-size:24px;  /*20px*/
	}		

p{
	font-size:22px;
	line-height:28px;
	font-weight:normal;
	}	
	
@media only screen and (max-width: 768px) {
  h2{ font-size:36px;font-weight:normal;
	}  
  h3{
    font-size:36px; font-weight:normal; 
    }	
    h4{
      font-size:24px;  
      }
    h5{
        font-size:24px;  
        }		
    p{
      font-size:22px;
      line-height:28px;
      font-weight:normal;
      
          }	
  }
  
  @media only screen and (max-width: 414px) {
    h2{ font-size:32px;font-weight:normal;
    }  
    h3{
      font-size:36px; font-weight:normal; 
      }	
    p{
      font-size:20px;
      line-height:24px;
      font-weight:normal;
          }	
  }




.white{ color:#FFF;}
.WRAPPER{ width:100%; margin:0 auto; overflow:hidden;}
@media only screen and (max-width: 480px) {
h1{
	font-size:36px;
	}	
	
	}
.main_h {
  position: fixed;
  top: 0px;
  max-height: 70px;
  z-index: 999;
  width: 100%;
  padding-top: 17px;
  background: none;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
  top:-100px;
  padding-bottom: 6px;
  font-family:'Century Gothic','cwTeXYen',serif, Arial , Heiti TC, sans-serif ;
}
@media only screen and (max-width: 812px) {
    .main_h {
    padding-top: 25px;
	overflow:hidden;
  }
}

.open-nav {
  max-height: 400px !important;
}
.open-nav .mobile-toggle {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.sticky {
  background-color: rgba(255, 255, 255, 0.93);
  opacity: 1;
  top: 0px;
  border-bottom: 1px solid gainsboro;
}



nav {
  float: right;
  width: 80%;
  margin-top:-10px;
  
}
@media only screen and (max-width: 812px) {
  nav {
    width: 100%;
  }
}
nav ul {
  list-style: none;
  overflow: hidden;
  text-align: right;
  float: right;
}
@media only screen and (max-width: 812px) {
  nav ul {
    padding-top: 15px;
    margin-bottom: 22px;
    float: left;
    text-align: center;
    width: 100%;
  }
}
nav ul li {
  display: inline-block;
  margin-left: 35px;
  line-height: 1.5;
}
@media only screen and (max-width: 812px) {
  nav ul li {
    width: 100%;
    padding: 10px 0 5px;
    margin: 0;
  }
}
nav ul a {
  color:#27233a;
  text-transform: uppercase;
  font-size: 24px;
}

.mobile-toggle {
  display: none;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 40px;
  top: 0;
  width: 30px;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}
@media only screen and (max-width: 812px) {
  .mobile-toggle {
    display: block;
  }
}
.mobile-toggle span {
  width: 30px;
  height: 4px;
  margin-bottom: 6px;
  border-radius: 1000px;
  background: #8A5A94;
  display: block;
}

.row {
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding: 0 2%;
}


a {
  text-decoration: none;
}

.point{ color:#F94D44;}




/*--PC float------------------------------------------*/
a.back-to-top {opacity: 1; display: none;width: 10px; height:10px;padding:28px;height: 35px;text-indent: -9999px;position: fixed;z-index: 10000;right: 0px;top: 415px;background:#F5B983 url(../images/up-arrow.png) no-repeat center 43%;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;
background-size:45px ;border-radius: 5px 0 0 5px;}

a:hover.back-to-top {background-color: #F3B3A6;}
@media only screen and (max-width: 812px) {
a.back-to-top {opacity: 0.7;top: 500px;width: 15px;height: 25px;padding:20px;}}
@media only screen and (max-width: 320px) {
  a.back-to-top {top: 380px;}  
}
#mySidenav a { display:block;position: fixed;right: -245px;transition: 0.3s;padding: 10px ;width: 300px;text-align:left;text-decoration: none;font-size: 18px;color: white;border-radius: 5px 0 0 5px;}

#mySidenav a:hover {right: 0;}
#floatform img{ width:45px;vertical-align:middle;}
#floatform{top: 220px;background-color: #8A5A94;z-index:10000;}
#floatPhone img{ width:45px;vertical-align:middle;}
#floatPhone {top: 285px;background-color:  #f09124;z-index:10000;}
#floatrFB img{ width:45px;vertical-align:middle;}
#floatrFB {top: 350px;background-color: #425f9c;z-index:10000;}

@media only screen and (max-width: 812px) {
#mySidenav a { display:none;}	
	}


/*-----------------KV---------------*/
.KV-pc{ display:block; width:100%; height:600px; background:url(../images/0KV-bg.jpg) no-repeat fixed; background-size:cover; overflow:hidden;}

.kV-title{position:relative; width:1100px; margin:0 auto;  }
.KV-girl{ position:relative; float:left; width:240px; height:auto; padding-top:85px; }
.KV-man{position:relative;float:left;  width:850px; padding-top:60px; }
.KV-man img{ width:100%;}
.KV-M{ display:none;}


@media only screen and (max-width: 812px) {
.KV-pc{ display:none;}
.KV-M{ display:block; width:100%; height:auto; background:url(../images/0KV-bg.jpg) no-repeat fixed; background-size:cover;}
.KV-title-m,.KV-man-m{ width:100%; margin:0 auto; }
.KV-title-m{padding: 10px;}
.KV-title-m img,.KV-man-m img{ width:100%;}

	}



/*-------------C1-認識自己-------------------------------------------*/
.easymovning{ width:100%; height:660px; margin:0 auto; background-color:#505168;}
.easymovning .cloud{ width:100%; height:551px; margin:0 auto; background:url(../images/C1-cloud.png) no-repeat; background-position:center;}
.easymovning .content{ position:relative;  width:1200px; margin:0 auto;  }
.easymovning .content .text{ width:500px; float:left; padding-top:40px; text-align:right;}
.easymovning .pic{ width:500px; height:563px; margin-top:60px;  background:url(../images/C1-01.png)no-repeat; background-size:cover;float:left; }
.easymovning p{ line-height:36px;}
.FS-B{ font-size:36px;}
.C1btn{ margin-top:20px;}
.C1btn .btn-btn { width:200px;}
.close-320{display: none;}

/*-----搬家前先認識自己------*/
.C1-who{ width:100%; height:auto; margin:0 auto; background:#505168;text-align:center; }
.C1-who h2{ color:#ecd1c0; padding:10px 0; }
.C1-who p{ color:#FFF;}
.hide{
 display:none;
}
@media only screen and (max-width:1023px) {
.easymovning{ width:100%; height:800px; }
.easymovning .content{ position:relative;  width:100%; margin:0 auto;  }
.easymovning .content .text{ width:100%; float:none;  text-align:center;}
.easymovning .pic{ width:500px; height:520px; margin:60px auto;  float:none; background-size:100%; }
.C1-who{ margin:0 auto; text-align:center; padding-top:60px; }
}
@media only screen and (max-width:480px) {
  .easymovning .pic{ width:350px; height:520px; margin:60px auto;  float:none; background-size:100%; }
  .C1-who p{ padding: 0 20px;}
}

@media only screen and (max-width: 320px) {
  .close-320{display: none;}
  .FS-B{ font-size:24px;}
  .easymovning .content .text{ width:100%; padding: 10px ; float:none;  text-align:left}
}
/*-----你是哪一種搬家類型呢？------*/
.whichkind{ width:100%; height:600px; margin:0 auto;  background:#505168;text-align:center; overflow:hidden;}
.whichkind h3 , .howmany h3 , .whichsituation h3{color:#ecd1c0; margin-top:40px; padding:20px 0; font-weight:normal;}
.whichkind .group  { width:1200px; height:350px; margin:0 auto;}
.whichkind .pic , .howmany .pic ,.whichsituation.pic{ display:inline-block; position:relative;margin-top:0px; width:350px; height:auto; padding:5px 10px 0;transition:margin-top  5s;-webkit-transition:margin-top 5s; }
.whichkind .pic img ,.howmany .pic img ,.whichsituation .pic img{ width:100%; position:relative; z-index:4;}
.whichkind .pic .text{ position:relative; z-index:5; top:-120px; margin:0 auto; width:220px; height:60px; border-radius:50px; color:#FFF;  background:#339af6;}
.whichkind .pic .text h5{ padding-top:15px; font-size:30px; font-weight:inherit;}
.whichkind  .position{  position:relative;top:-300px; left:240px;}
.whichkind .remake{ padding-top:50px;}

@media only screen and (max-width:1200px) {
.whichkind{ width:100%; height:600px; }
.whichkind .group  { width:100%;}
.whichkind .pic , .howmany .pic ,.whichsituation.pic{ display:inline-block; position:relative; width:300px; height:auto; }
.whichkind  .position{  position:relative;top:-210px; left:220px;}
	}
  
@media only screen and (max-width:920px) {
  .whichkind{ width:100%; height:auto; padding-bottom: 40px; }
  .whichkind .group  { width: 600px; height:auto;  margin: 0 auto;}
  .whichkind .pic , .howmany .pic ,.whichsituation.pic{ display:block;  width:300px; height:280px; }
  .whichkind .pic img ,.howmany .pic img ,.whichsituation .pic img{ width:100%;}
  .whichkind .pic .text{ top:-220px; left: 100%;  width:220px;}
  .whichkind  .position{  position:relative;top:-230px; left:220px;}
  }
   
  @media only screen and (max-width:640px) {
    .whichkind .group  { width: 100%; }
    .whichkind .pic , .howmany .pic ,.whichsituation.pic{ display:block;  width:300px; height:280px; }
    .whichkind .pic img ,.howmany .pic img ,.whichsituation .pic img{ width:300px;}
    
  }
  @media only screen and (max-width:548px) {
    .whichkind .pic , .howmany .pic ,.whichsituation.pic{ display:block;  width:200px; height:280px; }
    .whichkind .pic img ,.howmany .pic img ,.whichsituation .pic img{ width:250px;}
    .whichkind .pic .text{ top:-220px; left: 120%;  width:220px;}
    .whichkind  .position{  position:relative;top:-230px; left:150px;}
  }

  @media only screen and (max-width:480px) {
    .whichkind .pic , .howmany .pic ,.whichsituation.pic{ display:block;  width:200px; height:200px; }
    .whichkind .pic img ,.howmany .pic img ,.whichsituation .pic img{ width:200px;}
    .whichkind .pic .text{ top:-200px; left: 100%;  width:220px;}
    .whichkind  .position{  position:relative;top:-180px; left:120px;}
  }
  @media only screen and (max-width:400px) {
    .whichkind .pic , .howmany .pic ,.whichsituation.pic{ display:block;  width:200px; height:160px; }
    .whichkind .pic img ,.howmany .pic img ,.whichsituation .pic img{ width:150px;}
    .whichkind .pic .text{ top:-180px; left: 80%;  width:220px; width:200px; }
    .whichkind  .position{  position:relative;top:-140px; left:80px;}
  }
	
/*-----你的東西多還是少呢？------*/
.howmany{ width:100%; height:600px; margin:0 auto;  background:#505168;text-align:center; overflow:hidden; }
.howmany .group { width:1000px; height:400px; margin:0 auto;}
.howmany .pic{  width:460px; height:auto;display:inline-block; position:relative; top:-30px;  padding:5px 10px 0;}
.howmany .pic img{top:-30px; }
.howmany h5{ position:relative; z-index:5; top:50px; margin:0 auto; width:150px; height:60px; padding:15px;
   border-radius:50px; color:#FFF;  background:#339af6; font-size:30px;font-weight:inherit; }
.howmany  .text { position:relative; z-index:5; top:-220px; margin:0 auto; margin-left:100px;}
.howmany  .text p{ width:250px; color:#000; font-size:20px; line-height:24px;}
.howmany .position{position:relative;top:-420px; left:360px; z-index:1;}


@media only screen and (max-width:1024px) {
.howmany .group { width:100%; height:400px;}
.howmany .pic{  width:45%;}
.howmany .pic img{ width:100%; top:-30px; }
.howmany  .text { top:-220px; margin-left:80px;}

}
@media only screen and (max-width:970px) {
.howmany .position{top:-370px; left:80%;}
.howmany  .text { top:-220px; margin-left:70px;}
}

@media only screen and (max-width:900px) {
.howmany h5{ top:300px;  }
.howmany  .text { top:-100px; margin-left:15%; text-align: center;}
.howmany  .text p{  color:#FFF;  }
.howmany .position{position:relative;top:-380px; left:80%;}
}

@media only screen and (max-width:850px) {
  .howmany  .text { top:-100px; margin-left:10%;}
  .howmany .position{top:-320px; left:80%;}

}
@media only screen and (max-width:760px) {
  .howmany  .text { top:-70px; margin-left:10%;}
  .howmany .position{top:-300px; left:80%;}

}

@media only screen and (max-width:700px) {
  .howmany{ width:100%; height:auto; margin:0 auto; padding-bottom: 80px;  }
  .howmany .group { width:100%; height:auto; margin:0 auto;}
  .howmany .pic{  width:50%; height:350px;display:block;  top:-30px;  padding:5px 20px 0;}
  .howmany .pic img{top:0px; }
  .howmany h5{  top:128px; left:100% ; width:150px; height:60px; }
  .howmany  .text { position:relative; z-index:5; top:-200px;  margin-left:110% ;}
  .howmany  .text p{ width:250px; color:#FFF; font-size:20px; line-height:24px; text-align:left;}
  .howmany .position{position:relative;top:-240px; left:80%; z-index:1;}
}
@media only screen and (max-width:600px) {
  .howmany .pic{  width:45%; height:280px;top:-30px; }
  .howmany h5{  top:40px; margin:0 auto ; left:0 ; width:150px; height:60px; }
  .howmany .position{position:relative;top:-200px; left:80%; z-index:1;}
}
@media only screen and (max-width:480px) {
  .howmany .pic{  width:100%; height:500px;  padding:5px 25px 0;}
  .howmany  .text {  top:-80px; margin: 0 auto;}
  .howmany  .text p{ width:100%; text-align:center;}
  .howmany h5{  top:370px; margin:0 auto ; left:0 ; width:150px; height:60px; }
  .howmany .position{position:relative;top:-400px; left:80%; z-index:1;}
}
@media only screen and (max-width:430px) {
  .howmany .pic{  width:100%; height:420px; }
  .howmany h5{  top:325px;  }
  .howmany .position{position:relative;top:-320px; left:80%; z-index:1;}
}
@media only screen and (max-width:380px) {
  .howmany h5{  top:310px;  }
  .howmany .position{position:relative;top:-300px; left:80%; z-index:1;}
}

@media only screen and (max-width:320px) {
  .howmany .pic{   top:-50px;  height:400px; }
  .howmany h5{  top:300px;  }
  .howmany  .text {  top:-20px; margin: 0 auto;}
  .howmany .position{position:relative;top:-240px; left:80%; z-index:1;}
}

/*------你是哪種情況呢？-------------*/
.whichsituation{ width:100%; height:700px; margin:0 auto;  background:#505168;text-align:center; overflow:hidden;}
.whichsituation .group{ width:1200px; height:400px; margin:40px auto;}
.whichsituation .group .pic{ display:inline-block; padding:0 10px; width:280px;  height:auto;}

.whichsituation .position{position:relative;top:-220px; left:160px; z-index:1;}
.whichsituation .text { position:relative; z-index:5; top:-60px;}
.whichsituation  .text p{ position:relative;  width:100%; hight:80px; color:#FFF; font-size:20px; line-height:24px; text-align:justify;}
.whichsituation .btn-btn{ position:relative; top:-50px; } 
.whichsituation .btn-btn p{ color:#27233a;}
.whichsituation .booking:hover {background-color:#9295b7; color:#FFF;  box-shadow: 0 9px #2d2d2d;}
.whichkind a:hover , .howmany a:hover , .whichsituation .picpic a:hover { position:relative; top:-20px; }


@media only screen and (max-width:1199px) {
  .whichsituation{ width:100%; height:auto;}
  .whichsituation .group{ width:900px; height:auto; margin:40px auto;}
  .whichsituation .group .pic{display:inline-block; padding:10px; width:400px;  height:auto;}
  .whichsituation .group .pic img{ width: 250px; }
  .whichsituation  .text p{ position:relative;  width:100%; padding: 0 10px; height:100px; margin: 0 auto;}
  .whichsituation .position{top:-220px; left:220px; }
}

@media only screen and (max-width:950px) {
  .whichsituation .group{ width:100%; height:auto; margin:40px auto;}
  .whichsituation .group .pic{display:inline-block; padding:10px; width:48%;  height:auto;}
  .whichsituation .group .pic img{ width: 250px; }
  .whichsituation  .text p{ position:relative;  width:80%; height:100px; margin: 0 auto;}
  .whichsituation .position{top:-220px;}
}

@media only screen and (max-width:653px) {
  .whichsituation .position{top:-220px; left:60%; }
}
@media only screen and (max-width:480px) {
  .whichsituation .group .pic img{ width: 100%; }
  .whichsituation  .text p{ position:relative;  width:100%; height:140px; padding: 0 20px; margin: 0 auto; line-height:21px;}
  .whichsituation .position{top:-150px;  left:58%; }
  .whichsituation  .btn-btn{   padding: 10px 10px;}
}

@media only screen and (max-width:375px) {
  .whichsituation  .text p{   width:100%; height:175px;}
  .whichsituation .position{top:-140px;  left:50%; }
 
}
@media only screen and (max-width:320px) {
  .whichsituation  .text p{   width:98%; height:185px;}
  .whichsituation .position{top:-110px;  left:45%; }
  .whichsituation  .btn-btn{   padding:0;}
  
}


/*pulse*/
.pulse-button {
  display: block;
  width: 80px;/*原點尺寸*/
  height:80px;
  color: white;
  border: none;
  border-radius: 50%;
  background: #f6c340;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(246, 195, 24, 0.5);
  -webkit-animation: pulsepulse 1.5s infinite;
}

@-webkit-keyframes pulsepulse {
  0% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: 0 0 0  30px rgba(246, 195, 24, 0); /*改影子尺寸*/
  }
  100% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(246, 195, 24, 0);
  }
}

/*-------C2-專業搬家------------*/
.moving-house{ width:100%; height:1720px; background-color:#79a6d5; color:#FFF;}
.moving-house .title{ width:500px; margin:0 auto; padding-top:40px}
.moving-house .title img{ width:130px;}
.moving-house .sale{  font-size:45px;  }
.moving-house .text{ width:800px; margin:40px auto; line-height:28px;}
.group-top , .group-under{ width:1100px; height:600px; margin:0 auto; }
.group-top .box, .group-under .box{ display:inline-block; width:500px; border-radius:20px; 
  background-color:#FFF; box-shadow:2px 2px 10px #666d6d; margin-left:20px; padding-bottom:20px; }

.group-top .box h4 ,.group-under .box h4{ width:100px; margin:0 auto; text-align: center;  padding:20px 0 10px; color:#27233a;} 
.line { margin:-15px auto; width:110px; height:10px; background:#ecd1c0; border-radius:10px; }
.group-top .content , .group-under .content{ width:500px;  padding:30px 20px 20px;}
.group-top .content img,.group-under  .content img{ width:100%; border-radius:20px;}
.group-top ul,.group-under ul{ width:90%; height:120px; margin:0 auto; padding-top:10px;color:#27233a; font-size:20px; line-height:24px; }
.group-top li , .group-under li{ list-style-image:url(../images/diamond-31.png); list-style-position: outside;}
.group-top .content .btn, .group-under .content .btn{ width:250px; margin:0 auto; padding-top:20px;}
.group-under{ margin-top:80px;}
.group-under li a{ color:#f09124; font-weight:bold;}
.group-under .content .btn{ width:260px;}
.group-under .space{ padding-top:65px;}

 
 /*-----------按鈕--------------------*/
 
 .BTN-form{ width:100%; height:200px; background-color:#79a6d5; padding-top:50px; }
 .BTN-form .position{ width:500px; margin:0 auto;}
 .BTN-form .position img{ width:100px; padding:10px;vertical-align: middle; }
 .BTN-form .position .btn-btn { width:300px; position:relative; margin-top:-40px;}


 @media only screen and (max-width:1199px) {
.group-under{ margin-top:15%;}
.moving-house{ width:100%; height:1720px;}
.moving-house .text{ width:100%; padding:40px;}
.group-top , .group-under{ width:100%; height:500px; }
.group-top .box, .group-under .box{ display:inline-block; width:45%;margin-left:20px; }	
.group-top .content , .group-under .content{ width:100%;  padding:30px 20px 20px;}	
.group-top ul,.group-under ul{ width:100%; height:180px; padding:20px;}
.BTN-form{ height:300px;  padding-top:160px; }

   }
@media only screen and (max-width:1000px) {
.BTN-form{ height:200px;  padding-top:80px; }
   }
@media only screen and (max-width:768px) {
.BTN-form{ height:150px; padding-top:0px; }
   }
 @media only screen and (max-width:680px) {
.moving-house .title img{ width:20%; padding:10px;}
.moving-house .text{ width:100%; padding:10px;}
.moving-house{ width:100%; height:auto; padding-bottom:20px;}
.group-top , .group-under{ width:100%; height:auto; }
.group-top .box, .group-under .box{ display:block; width:90%; height: auto; margin:0 auto; margin-bottom:40px; }	
.group-under .space{ padding-top:0px;}
.group-top .content .btn{ position: relative; margin-left: 65px;}
.group-under .content .btn{ position: relative; margin-left: 50px;}
.BTN-form{  padding-top:10px; }
 
 }
 
 @media only screen and (max-width:480px) {	
.moving-house .sale{  font-size:36px;  }
.moving-house .text{ width:100%; padding:10px 20px; margin: 0 auto;}
.close{ display:none;}
.BTN-form{ width:100%; height:100px;}
.BTN-form .position{ width:300px; margin:0 auto; padding-top:15px;}
  
} 
@media only screen and (max-width:375px) {	
.group-top .content .btn{ position: relative; margin-left: 50px;}
.group-under .content .btn{ position: relative; margin-left: 40px;}
}
	 
 /*-----------C3-專人打包----------------*/
 
 .packing{ width:100%; height:650px; background-color:#ecd1c0; color:#27233a;} 
 .packing h3{ width:300px; margin:0 auto; padding-top:60px;}
 .packing .text{width:800px; margin:20px auto;}
 .packing .group{ width:1000px; height:850px; margin:0 auto;}
 .packing .group .pic{ width:500px; height:380px; float:left; padding-top:10px;  }
 .packing .group .pic img{ width:100%;}
 .packing .group  .smailpic{ width:500px;  float:left;}
 .packing .group  .smailpic img{ width:100%;}
 .packing .group  .smailpic p{ width:100%;  background-color:#FFF; padding:20px; border-radius:50px;}
 
 /*---C3-打包服務流程----*/
.packingprocess{ width:100%;  background-color:#ecd1c0;}
.process{ position:relative; top:-60px;  width:100%; height:600px; color:#FFF; background:url(../images/C3-bg.png) no-repeat; background-size:cover;}
.process .group{ width:1000px; margin:0 auto; padding:80px 0 0 ; }
.process .group .text{ width:500px;  float:left; margin-top:40px; }
.process .group .text h3{ text-align:center;}
.process .group .text ol{ width:95%; line-height:24px; padding:10px 0;  }
.process .group .text li{list-style-type:decimal; }
.process .group .pic{ width:500px; margin-top:80px; padding:10px;  float:left;}
.process .group .pic img , .packing .group  .smailpic img{ width:100%;border-radius:20px;}
.process .group .pic p{ padding:20px 0 0 ; text-align:center;}
.process .group .text h5 ,.process .group .text a{ color:#f6c340;}
.process .group .text h5 { padding-bottom:10px;}
 @media only screen and (max-width:1000px) {
 .packing{ width:100%;  height:auto; margin-buttom:30px;}
 .packing .text{width:100%; margin:0px auto; padding:10px;}
 .packing h3{ width:100%; text-align:center;padding:60px;}
 .packing .group{ width:100%; height:auto; margin:0 auto;} 	
 .packing .group .pic{ width:450px; margin:0 auto; float:none;  }
 .packing .group .smailpic{ width:100%;  float:none; margin-top:10px; }
 .packing .group .close{ display:none;}
.packing .group  .smailpic p{ width:100%; text-align:center;   padding:20px; border-radius:0px;}
 /*打包流程*/
 .packingprocess{ width:100%; height:auto; padding-bottom:20px;}
 .process{ position:relative; top:20px; height:auto;  padding-bottom:20px;  background:none; background-size:cover; background-color:#505168;}/*紫色波浪底*/
 .process .group{ width:100%; margin:0 auto; padding:40px 0 0 ; }
 .process .group .text{ width:100%;  float:none; margin-top:40px;}
 .process .group .text ol{ width:90%; padding:10px 10px 0 20px; margin:0 auto;  }
 .process .group .pic{ width:100%; height:auto; margin-top:10px; padding:10px;  float:none;}
	 }

 @media only screen and (max-width:480px) {
  .packing .text{width:100%; margin:0px auto; padding:10px 20px;}
.packing .group .pic{ width:100%; height:auto; padding:0;}
 .packing .group .smailpic{  margin-top:-2px; }
 .flexslider{ width: 80%; margin: 0 auto;}
 .process .group .text p{line-height:28px; }

	 }
 /*---------------C4-服務流程----------------------*/

.service{ width:100%; margin:0 auto;}
.service h3{ text-align:center; padding-top:80px;}
.service .group{ width:1360px; margin:20px auto; padding:10px;}
.service .group img{ width:320px;}
/*M版*/
.group-m{ display: none;}

@media only screen and (max-width:1366px) {
  .service .group{ width:100%; display: inline-block; text-align: center; }
}

@media only screen and (max-width:1024px) {
  .service .group{ display: inline-block; text-align: center; width:100%; }
}

@media only screen and (max-width:580px) {
  .group-m{ display:block;}
  .group-m img{ width: 100%; }
  .service .close{ display: none;}
  .service .group img{ width:100%;}
}



 /*---------------C5--服務範圍---------------------*/

.range{ width:100%; background:#505168; }
.range h3{ text-align:center; color:#ecd1c0; padding-top:80px;}
.range .group{ width:900px; margin:20px auto;}
.range .group h5{  width:200px; height:45px; padding-top:10px; border-radius:50px; background-color:#ecd1c0;text-align:center; font-weight:normal;}
.range .group p{ padding:10px ; color:#FFF;}
.range  .car{ width:100%; height:200px; position:relative;  margin:0 auto;}
.range  .car img{  width:300px; margin-left:70%;}
.range  .car .line{margin:-15px auto; width:100%; height:5px; background:#FFF; }
 @media only screen and (max-width:930px) {
.range .group{ width:100%; margin:20px auto;}
.range .group h5{  width:200px; height:45px; margin:0 auto;}
.range .group p{ padding:20px 10px ; color:#FFF; text-align:left;}
.range  .car{ width:100%; height:200px; position:relative;  margin:0 auto;}
.range  .car img{  width:200px; margin-left:20%;}
	 }
  @media only screen and (max-width:580px) {
    .range .group p{ padding:20px; color:#FFF;}
    .range  .car{ height:150px;   }
   }
 /*---------------C6--Q&A---------------------*/
.QA{ width:100%; height:700px; background-color:#79a6d5; }
.QA h3{ color:#FFF; text-align:center; padding-top:80px; }
.QA #wrap {
 width: 90%;
 max-width: 960px;
 display: block;
 margin: 40px auto;
}

/*--------------Accordion Styles------------------*/
 

.accordion {
 margin: 0 0 30px;
 border-top: 0px solid #DDD;
 border-radius: 4px;
}

.accordion dt {
 position:relative;
 z-index:11;
 border-bottom:5px solid #f09124; 
 background: #f6c340;
 color: #27233a;
 font-size:24px;
 margin-bottom:20px;
}
.accordion h5{	
padding:10px 20px 10px 20px ;
font-weight:normal;
}

.accordion dd {
 display: none;
 padding: 60px 20px 20px;
 width: 98%;
 margin-top:-60px;
 margin-left: 10px;
 border-bottom: 5px solid #f5f1ef;
 background: #FFF;
 font-size:20px;
 line-height:28px;
 border-radius:0 0 20px 20px;
 margin-bottom:20px;
}

.accordion dd a{ color: #f09124; ;}

.accordion dt {
 cursor: pointer;
 padding: 8px 15px;
 margin: 0;
 border-radius:50px ;
 margin-bottom:20px;
}

.accordion dt:before {

 
 padding-right: 5px;
 transition: all .3s linear;
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 transform: rotate(0deg);

}

.accordion dt:hover:before {
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 transform: rotate(90deg);
}

.accordion dt.accordion-active:before {

 padding-right: 5px;
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
}

.accordion dt.accordion-active:hover {
 cursor: default;
}
 @media only screen and (max-width:768px) {
.QA{ width:100%; height:auto; padding-bottom:40px; }	
.accordion dd {margin-left: 5px;}
	}

/*--------C7-AD BANNER-------------------------*/
.AD-BANNER{ width:100%; }
.AD-BANNER .group{ width:1200px; margin:0 auto; padding-top:80px; padding-bottom:20px;}
.AD-BANNER .group img{  width:600px; height:auto; float:left; transition: opacity .3s;-webkit-transition: opacity .3s; -moz-transition:width 3s;}
.AD-BANNER .group  img:hover{opacity: 0.7;}

.none{ clear:both;}
 @media only screen and (max-width:1199px) {
.AD-BANNER .group{ width:600px;  }	
.AD-BANNER .group img{   height:auto; float:none; padding:10px; text-align: center; margin: 0 auto;} 
	 }

 @media only screen and (max-width:768px) {
.AD-BANNER .group{ width:100%;  padding-top:50px;	} 
.AD-BANNER .group img{  width:100%;}
}


/*------------- 留言表單 -------------------------------------------------*/

.form{ width:100%; height:auto; margin:20px auto;  padding:0px 0 20px; }
.form h3 { width:400px; color:#27233a; margin:0 auto; text-align:center; padding-top:80px; line-height:46px;}
.form .box{ width:1000px; height:auto; margin:20px auto;  padding:10px 0;} 
.message { text-align: center;width:100%; margin: auto;}
.city-size{ width:180px; font-size:18px;}
.remake-box{ margin-top:10px; width:100%; height:140px; color:#27233a; line-height:20px;font-size:18px;font-family:'Century Gothic','cwTeXYen',serif, Arial , Heiti TC, sans-serif ;}
@media screen and (min-width: 768px) {.message {width: 80%; }}
.message label { font-size: 20px;}


@media screen and (min-width: 768px) { .message .m_title { font-size: 45px; }}
.message .m_subtitle {font-size:20px; margin-top: 20px; margin-bottom: 30px; text-align: center; line-height: 150%;}
.form h3 {  padding-top:80px; }
@media screen and (min-width: 768px) { .message .m_subtitle { font-size: 24px; }}

.message .m_group { font-size:20px; text-align: left;  margin: auto;}

@media screen and (min-width: 860px) {.message .m_group { width:60%;margin:0 auto; }}

.message .m_group > div { margin-bottom: 25px;}

.message .m_group .area_box { margin-top: 10px; margin-bottom: 10px;}
.area_box select{ height: 32px; border: 1px solid #a7a7a7; font-size: 20px; }
.message .m_group input[type='text'] { width: 100%; margin-top: 7px;}
.message .m_group .name label, .message .m_group .phone label { display: block;}
#name , #mobile,#county ,  #city{ font-size:18px;font-family:'Century Gothic','','cwTeXYen', Arial , Heiti TC, sans-serif ;}
@media screen and (min-width: 768px) {
.message .m_group .name, .message .m_group .phone { width: 100%; font-family:'Century Gothic','','cwTeXYen', Arial , Heiti TC, sans-serif ;}}
.message .m_group .name input, .message .m_group .phone input {height: 30px; border: 1px solid #a7a7a7; font-size: 20px;}

@media screen and (min-width: 768px) {
 .message .m_group .name {margin-right: 6%;}}

.message .m_group .county, .message .m_group .region { display: inline-block; width:48%;  } /*區域 填表*/
.message .m_group .region label {margin-right: 6px;}
.message .m_group .privacy span { font-size:20px; line-height:26px;}
.privacy .smail{  color: #5D5D5D;} 
.privacy .link a{ font-size:20px; color:#f09124;} 
.message .m_roup .privacy a { text-decoration: none; color: #f09124; }
.message .m_group .submit {-webkit-box-sizing: border-box;box-sizing: border-box; text-align: center; margin: auto; font-size: 20px;}

@media screen and (min-width: 768px) {
.message .m_group .submit { width: 250px;}
}
.submit_box { width: 100%; text-align: center; }

@media screen and (max-width: 480px) {.city-size { width:100%; } 
.message .m_group .county, .message .m_group .region { display: inline-block; width:100%; margin-top:10px;   } /*區域 填表*/
}
.message .m_group .area_box { margin-top: 10px; margin-bottom: 10px; }
@media screen and (max-width: 320px) {.city-size { width:110px; }}
	
	/*booking button*/ 
.butbooking{ width:180px; margin:40px auto;  }
.btn-btn{ border: none;color:#27233a;  padding: 15px 25px;font-size: 28px;  border-radius: 45px; box-shadow: 0 9px #f09124;
  cursor: pointer; margin:0 auto; font-family:'Century Gothic', 'cwTeXYen'; }
.booking{background-color: #f6c340;  /*border-radius: 50px;  box-shadow:2px 2px 10px #666d6d;*/}
.booking:hover {background-color:#505168; color:#FFF;  box-shadow: 0 9px #181a23;}
.booking:active {
  background-color: #292c3d;
  box-shadow: 0 5px #181a23;
  transform: translateY(4px);
}
@media screen and (max-width: 1023px) {
	.form .box{ width:90%; height:auto; padding:10px; margin:20px auto; }
	}

/*--- footer-------------------------------------------------------------------------------*/

.copyright{ padding:20px 0;text-align:center; color: #FFF; font-size:18px; padding-bottom:20px;  background-color:#27233a;}
.footer{ display:none;}

@media screen and (max-width: 812px) {
.copyright{  padding-bottom:95px;  	
	}}
/*--- footer-------------------------------------------------------------------------------*/

.footer-link{ display:none;}
@media screen and (max-width: 812px) {
/*================mobile footer*=========*/
.footer-link{display:block;width: 100%;height: 75px;background: #35322e;
/*-webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(100%,#111));*/
position: fixed;bottom: 0px;z-index:9050;
/*box-shadow: 0px -1px 1px #333;*/}
.footer-link ul{display:block;list-style: none;width: 100%;height: 80px;}
.footer-link li{float: left;width: 24%; /*要被分開成 5 個原22.55%*/height: 60px;padding-top:2px;}
.footer-link li:first-child{border-left:none;}
.footer-link li:last-child{border-right: none;}
.footer-link li a{display:block;width:100%;height:80px;padding-top:45px; /*把文字往下推*/font-size:20px;
	color:#FFF;text-align:center;text-decoration:none;background-repeat:no-repeat;
	background-position:center 5px; /* X置中 Y向下5px*/letter-spacing:1px;
	background-size:35px 35px; /* 把背景圖縮小一半 符合視網膜 2X 解析度*/}


.footer-link li a.m_phone{ background-image:url(../images/phone.png);}
.footer-link li a.m_form{ background-image:url(../images/form.png);}
.footer-link li a.m_fb{ background-image:url(../images/fb.png);}
.footer-link li a.m_line{ background-image:url(../images/line.png);}

}

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

.style .content h3 ,.spacel .content h3 ,.precautions .content h3 ,.service content h3{ width:90%;}

}