@charset "utf-8";
body{ font-family: "微軟正黑體"; line-height:1.6; overflow-x:hidden;}
.space{ clear:both; line-height:0; height:0;}

.header{ border-bottom:1px solid #ccc; height:65px; position:fixed;top:0; background:#fff; width:100%; z-index:99999999;} 
.header .logo{ padding:10px; float:left;}
.header ul{float:right;}
.header li{ float:left; }
.header li a{ display: inline-block; padding:0 25px; line-height:65px; color:#000; font-size:15px;}
.header li a:hover{ color:#666;}

.section1,.section2,.section5,.section10{ position:relative;}

.section1{ text-align:center; width:1200px; margin:0 auto; height:635px; margin-top:100px;}
.section1 .leftimg{ position:absolute; left:0;top:20px; z-index:-1; display:none; }
.section1 .rightimg{ position:absolute; right:150px; top:100px; display:none;}
.section1 h1{ margin-top:50px;}
.section1 p{ color:#888; margin-top:20px;}
.section1 a, .btn_body{ position:absolute; display:inline-blockl; color:#666; width:80px; height:80px; border-radius:40px; border:1px solid #ccc; line-height:70px; background:url(../images/arrow.jpg) center 55px  no-repeat;}
.section1 a.btn_face{ left:440px; top:350px;animation:down 2s infinite alternate linear; }
.section1 a.btn_body{left:550px; top:320px;animation:down 1.5s infinite alternate linear;}
.section1 a.btn_qa{left:660px; top:350px;animation:down 1s infinite alternate linear;}

.section2{ background:url(../images/kv_essence.jpg) top center; height:682px;}
.section2 .left{ position:absolute; left:50%; margin-left:-595px; top:210px;}
.section2 .left h2{ font-size:24px; font-weight:bold;}
.section2 .left p{ color:#777; font-weight: bold;margin-top:10px; }
.section2 .left a , .m_s2_title a{color:#777; font-size:14px; font-weight:bold; padding:3px 20px; border:1px solid #777; display:inline-block; margin-top:15px; transition:1s all;}
.section2 .left a:hover, .m_s2_title a:active{ background:#777; color:#fff;}
.section2 .right{ position:absolute; left:50%; margin-left:250px; top:380px; color:#888}

.section3{ background: url(../images/bg_essence.jpg) top center; padding:50px 0;}
.btn_in{ display:inline-block;background:url(../images/btn_in.jpg) no-repeat; width:115px; height:35px; float:left; margin-top:5px; margin-left:10px;}
.btn_in:hover{ background:url(../images/btn_in.jpg) 0 -34px no-repeat;}
.section3 .right h2{float:left}
.section3 .wrap,.section6 .wrap,.section7 .wrap,.section8 .wrap,.section9 .wrap{ width:1200px; margin:0 auto;}
.section3 .left,.section6 .left,.section7 .left,.section8 .left,.section9 .left{ float:left; width:450px; text-align:center; }
.section3 .right,.section6 .right,.section7 .right,.section8 .right,.section9 .right{ float:left; width:745px; font-size:15px;}
.section3 .right h2,.section6 .right h2,.section7 .right h2,.section8 .right h2,.section9 .right h2{ font-size:26px; font-weight:bold; }
.section3 .right  p.info,.section6 .right  p.info,.section7 .right  p.info,.section8 .right  p.info,.section9 .right  p.info {font-size:14px;color:#888; font-weight:normal;}
.section3 .right h3{ font-family:"新細明體"; }
.section3 .right p,.section6 .right p,.section7 .right p,.section8 .right p,.section9 .right p{color:#666;margin:10px 0}
.section3 .right h4{ margin-bottom:5px; margin-top:20px;}
.section3 .right li h5{ background:#eee; padding:3px 10px; margin:8px 0}
.section3 .right li{ margin-top:15px;}
.section3 .right li p{ margin-bottom:10px; margin-left:10px;}

.section4{ text-align:center; border-bottom:1px solid #ccc; height:746px;}
.section4 img{ display:block; position:absolute; left:50%; margin-left:-700px;}

.section5{ text-align:center; padding-top:20px; border-bottom:1px solid #ccc; height:680px; }
.section5 .wrap{ width:1200px; margin:50px auto; position:relative}
.section5 .nav_body a img{ position:absolute; top:50px;}
.section5 .nav_body a img.p1{left:120px;animation:down 2s infinite alternate linear;}
.section5 .nav_body a img.p2{ position:absolute; top:300px; left:0px;animation:down 1s infinite alternate linear;}
.section5 .nav_body a img.p3{ position:absolute; top:50px; right:150px;animation:down 1.5s infinite alternate linear;}
.section5 .nav_body a img.p4{ position:absolute; top:300px; right:30px;animation:down 2s infinite alternate linear;}
.section5 .btn_body{top:450px; left:50%; margin-left:-40px;animation:down .6s infinite alternate linear;}

.section6,.section7,.section8,.section9{ padding:50px 0;border-bottom:1px solid #ccc;}
.section6 .right h2,.section7 .right h2,.section8 .right h2{ margin-top:60px;}
.section6 .right h2 span,.section7 .right h2 span,.section8 .right h2 span,.section9 .right h2 span{ font-size:20px;}
.btn_massage{ display:inline-block; color:#4f4e4e; background:#f3f3f3; border:1px solid #c3c3c3; font-size:15px; padding: 10px; margin:10px 0; transition:all 1s;}
.btn_massage span{ font-size:12px;}
.btn_massage:hover{ background:#999; color:#fff;}

.section10{ border-top:8px solid #dbdbdb; margin-top:3px; text-align:center; background:url(../images/bg_qa.jpg) top center; height:900px;}
.section10 h2{margin:30px 0;}
.section10 p{color:#686868}
.section10 .wrap{ width:1200px; margin:0 auto; position:relative}
.section10 .q li{ position:absolute;cursor:pointer}
.section10 .q li:hover{ animation:l 1s infinite alternate; }
.section10 .q li.q1{left:0;top:330px}
.section10 .q li.q2{left:430px; top:450px;}
.section10 .q li.q3{left:56px ;top:580px;}
.section10 .q li.q4{left:200px;top:720px;}

.section10 .a li{ width:1180px; height:510px; position:absolute;top:330px; border-radius:5px; box-shadow:0 0 30px #bbb;}
.section10 .a li.a1{ background: url(../images/a1.jpg) no-repeat;display:none;}
.section10 .a li.a2{ background: url(../images/a2.jpg) no-repeat; display:none;}
.section10 .a li.a3{ background: url(../images/a3.jpg) no-repeat; display:none;}
.section10 .a li.a4{ background: url(../images/a4.jpg) no-repeat; display:none;}
.replay{ position:absolute; color:#666; font-size:15px; left:70px; top:350px; border:1px solid #666; padding:3px 20px;}
.replay:hover{ background:#666; color:#fff;}
.sent{ background:url(../images/sent.jpg) no-repeat; width:135px;height:34px; border:none; cursor:pointer;margin-left:80px;}
.sent:hover{ background-position:0 -34px;}
.section10 .form{ width:480px; text-align:left; margin-left:650px; margin-top:130px;font-size:15px;}
.section10 .form h3{ font-size:18px;}
.section10 .form h3 span{ text-decoration:underline;}
.section10 .form h4{  padding:5px 10px; border:1px solid #666; color:#666; margin:10px 0;}
.section10 .form p{ line-height:3;}
.section10 .form p span{ display:inline-block; width:80px;}
.section10 .form p input[type="text"]{ background:#ddd; border:none; padding:5px; width:380px;}
.section10 .form p input[type="text"]:focus{ background:#eee;}
.section10 .form p.check{ margin-left:80px; font-size:13px;}
.footer{ font-size:13px; color:#999; position:absolute; bottom:10px; left:50%; margin-left:-120px;}

.black{width: 100%;height: 100%;position: fixed;top: 0px;left: 0px;background: #000; z-index: 99999999999999999; opacity: 0.7; cursor: pointer;display:none;}
.pop{ position: fixed;top: 70px;z-index: 999999999999999999;  text-align:center;display:none; left:50%; margin-left:-480px;}
.pop img{ display:none; }
.close{position: fixed;top: 40px;z-index: 999999999999999999; left:50%; margin-left:400px; display:none;cursor: pointer;}

/*mobile*/
.mobile_wrap{ overflow:hidden}
.mobile_wrap, .mobile_wrap .section1{ width:640px; margin:0 auto;}
.header_m .logo{ text-align:center;}
.header_m .icon{ left:0; position:absolute; cursor:pointer}
.header_m .logo img{ width:150px; height:auto; margin-top:10px; }
.header_m{ border-bottom:1px solid #ccc;  position:fixed;top:0; background:#fff; width:640px; z-index:99999999;} 
.header_m ul{ margin-top:20px; display:none;}
.header_m ul li{ text-align:center;border-bottom:1px solid #ccc; }
.header_m ul li a{ color:#000; padding:20px 0; display:inline-block; font-size:28px;  }
.mobile_wrap .section1 a{width:100px; height:100px; border-radius:50px; line-height:90px; background-position: center 70px; font-size:20px}
.mobile_wrap .section1 a.btn_face{ left:160px; top:400px;animation:down 2s infinite alternate linear; }
.mobile_wrap .section1 a.btn_body{left:280px; top:350px;animation:down 1.5s infinite alternate linear;}
.mobile_wrap .section1 a.btn_qa{left:400px; top:400px;animation:down 1s infinite alternate linear;}
.mobile_wrap .m_kv{ margin-top:190px;}
.mobile_wrap .section1 h1{ margin-top:80px;}
.mobile_wrap .section1 p{ margin-top:0; font-size:24px;}
.mobile_wrap .section1{ height:1100px;}
.mobile_wrap .footer{ font-size:13px; color:#999; position: relative; }

.mobile_wrap .section2{ margin-top:50px; text-align:center}
.mobile_wrap  .m_s2_title{ background:url(../images/mobile/s2_bg_title.jpg) no-repeat; height:112px; text-align:center; padding-top:365px;}
.mobile_wrap .m_s2_title a{ font-size:20px;}
.mobile_wrap .section3 .left{ float:none; width:640px;}
.mobile_wrap .section3 .right{ float:none;width:540px; padding:50px; font-size:160%;}
.mobile_wrap .section3  .right h2{ font-size:38px;}
.mobile_wrap .section5{ background:url(../images/mobile/bg_body.jpg); height:1019px; margin-top:60px;}
.mobile_wrap .section5 .btn_body{ top:860px; font-size:20px; width:100px; height:100px; border-radius:50px; line-height:90px; background-position: center 70px;}
.mobile_wrap  .section6 .left, .mobile_wrap  .section7 .left,.mobile_wrap  .section8 .left,.mobile_wrap  .section9 .left{ float:none; width:640px; text-align:center}

.mobile_wrap  .section6 .right, .mobile_wrap .section7 .right,.mobile_wrap  .section8 .right,.mobile_wrap  .section9 .right{float:none; width:540px;  padding:10px 50px; font-size:160%;}

.mobile_wrap .section6 .right h2,.mobile_wrap  .section7 .right h2,.mobile_wrap  .section8 .right h2,.section9 .right h2{ font-size:36px;}

.mobile_wrap .section3 .right p.info,.mobile_wrap .section6 .right p.info,.mobile_wrap .section7 .right p.info,.mobile_wrap .section8 .right p.info, .mobile_wrap .section9 .right p.info{ font-size:18px;}
 
.mobile_wrap  .btn_massage{ font-size:22px;}
.mobile_wrap .btn_massage span{font-size:16px;}

.mobile_wrap .section10{ background: url(../images/mobile/bg_qa.jpg); height:1668px;margin-top:70px; padding-top:300px;}
.mobile_wrap  .section10 p{ padding:0 50px; font-size:24px;}
.m_q{ margin-top:50px;}
.m_q li{ border:1px dashed #000; width:510px; margin:50px  auto; border-radius:8px; box-shadow:0 0 20px #bbb; cursor:pointer; transition:all .6s;}
.m_q li:active{ -webkit-transform:translate(0,5px);transform:translate(0,5px); box-shadow:none;}
.m_footer{ color:#999; margin-top:140px; text-align:center; z-index:9999}

.section10 .m_a li{ width:560px; height:1340px; position:absolute;top:550px; border-radius:5px; box-shadow:0 0 30px #bbb; left:40px; border-bottom:8px solid #ddd; }
.section10 .m_a li.a1{ background: url(../images/mobile/a1.jpg) no-repeat; display:none;}
.section10 .m_a li.a2{ background: url(../images/mobile/a2.jpg) no-repeat; display:none;}
.section10 .m_a li.a3{ background: url(../images/mobile/a3.jpg) no-repeat; display:none;}
.section10 .m_a li.a4{ background: url(../images/mobile/a4.jpg) no-repeat; display:none;}
.m_a .replay{ top:500px; font-size:24px; left:40px;}
.m_a li.a2 .replay{ top:565px}
.m_a li.a4 .replay{ top:450px}
.section10 .m_a li .form{ margin-left:50px; margin-top:640px;}
.section10 .m_a li.a2 .form{ margin-left:50px; margin-top:700px;}
.section10 .m_a li .form h3{ font-size:32px;}
.section10 .m_a li .form h4{ font-size:24px; margin-bottom:30px; }
.section10 .m_a li .form p{ padding:0}
.section10 .m_a li .form p input[type="text"]{ padding:10px 0px;}
.section10 .m_a li .form p.check{ font-size:18px;}
.m_a li .sent{ background:url(../images/mobile/sent.jpg); width:245px; height:62px; }
.m_a li .sent:active{ background-position:0 -62px;}
 @keyframes l {
    from { transform:translate(0,0)}
    to {transform:translate(10px,0)}
}

 @-webkit-keyframes l {
    from { -webkit-transform:translate(0,0)}
    to {-webkit-transform:translate(10px,0))}
}
 @keyframes down {
    from { transform:translate(0,0)}
    to {transform:translate(0,15px)}
}

 @-webkit-keyframes down {
    from { -webkit-transform:translate(0,0)}
    to {-webkit-transform:translate(0,15px)}
}


 @keyframes op {
    from { transform:scale(1,1)}
    to {transform:scale(1.1,1.1)}
}

 @-webkit-keyframes op {
    from {-webkit-transform:scale(1,1)}
    to {-webkit-transform:scale(1.1,1.1)}
}