@charset "UTF-8";
@import url("reset.css");

body{ font-family:"Century Gothic","Microsoft JhengHei"; }

*{-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0; padding: 0;
}

a{ text-decoration: none; }
img { border:0; display: block; margin: auto;  }
area{ outline: none; display: block; }
section{ background: url(../images/index_10.jpg) no-repeat; background-position: center top; }

#wrapper{ width: 100%; }
header, footer{ display: flex; align-items: center; font-family:"Century Gothic","Microsoft JhengHei"; }
header{ height: 75px; border-top: #ff8a82 5px solid; }
header a{ text-decoration: none; }
footer{ height: 65px; justify-content: center; font-size: 0.8em; }
footer br,.mobile-nav-drop,.mobile-nav-top{ display: none; }
.header-wrapper{ margin: auto; width: 100%; max-width: 1000px; display: flex; align-items: center; justify-content: center; }
.FGlogo{ width: 100%; max-width: 240px; margin-left: 5%; }
.FGlogo-de{ margin: auto; }
.FGlogo svg{ vertical-align: middle; }
.nav-top{ margin-left: auto; flex: 1; }
.nav-top ul{ display: flex; align-items: center; justify-content:flex-end; }
.nav-top ul li{ margin-left: 3%; }
.nav-login a{ padding: 3px 20px; line-height: 35px; border: #fff 1px solid; border-radius:30px; }
.ver-white header{ background-color: #fff; color: #333; }
.ver-white header a{ color: #333; }
.ver-white footer{ background-color: #ff8a82; color: #fff; }
.ver-white .nav-login a{ border: #ff8a82 1px solid; color: #ff8a82; }
.ver-gray .FGlogo .cls-1,.ver-gray .FGlogo .cls-2,.ver-gray .FGlogo .cls-3{ fill: #fff; }
.ver-gray header,footer{ background-color: #333; color: #fff; }
.ver-gray header a{ color: #fff; }

.mobile{ display: none; }

.main{ background: #e3f0fa; }
.content{ position: relative; margin: auto; width: 100%; max-width: 1200px; /*border: #000 1px solid;*/ }
.black{ background:#e3f0fa; position:absolute; width:100%; height:680px; left:0px; top:0px; }
.kv{ background: url(../images/index_01.jpg) no-repeat; height: 680px; background-position: center; }
.kv-tit, .kv-pro, .kv-icon01, .kv-icon02{ position: absolute; }
.kv-tit{ left: 110px; top: 65px; display: none; }
.kv-pro{ left: 220px; top: 270px; display: none; }
.kv-icon01{ left: 80px; top: 370px; display: none; }
.kv-icon02{ left: 520px; top: 280px; display: none; }

.intro{ background: url(../images/index_04.jpg) no-repeat; height: 700px; background-position: center; }
.intro-a, .intro-b, .intro-c{ position: absolute; }
.intro-a{ left: 120px; top: 230px; }
.intro-b{ left: 190px; top: 340px; }
.intro-c{ left: 120px; top: 450px; }

.result{ padding: 5% 0; background: #00b0f0; color: #fff; }
.result .content{ position: relative; margin: auto; width: 100%; max-width: 1000px; }
.result .content h1{ position: absolute; left: 50%; top: -20%; width: 75%; transform: translateX(-50%); padding: 1% 2%; background: #fff; border-radius: 60px; font-size: 2em; font-weight: bold; text-align: center; }
.result .content h1 span{ color: #ff71b8; font-size: 1.2em; }
.result .content p{ display: inline-block; margin-bottom: 5%; width: 55%; font-size: 1.4em; line-height: 1.6em; vertical-align: top; }
.result .content p span{ color: #fff100; font-weight: bold; }
.result-pic{ display: inline-block; margin-left: 5%; width: 35%; vertical-align: top; }
.result-form{ display: flex; justify-content: center ; margin: auto; padding: 5%; background: #fff; border-radius: 40px; }
.result-form-pic{ flex: 1; }
.result-note{ width: 100%; padding-top: 2%; font-size: 0.8em; text-align: right; }

.mov{ height: 690px; background: url(../images/index_11.png) no-repeat; background-position: top center; }
#mov_player{ position:absolute; left: 120px; top: 320px;}
/*.player{ position: absolute; left: 120px; top: 320px; }
.player iframe{ width: 560px; height: 315px; }*/
.editor{ }
.editor-word{ display: inline-block; padding-left: 10%; width: 59%; vertical-align: middle; }
.editor-pic01{ display: inline-block; width: 40%; vertical-align: middle; }
.editor-pic02
.editor h2{ font-size: 1.8em; font-weight: bold; margin-bottom: 2%; }
.editor p{ font-size: 1.2em; margin-bottom: 10%; }
.editor a{ padding: 2% 12%; background: #00b0f0; border-radius: 60px; color: #fff; text-align: center; }

.feedback{ height: 690px; background: url(../images/index_13.jpg) no-repeat; background-position: top center; }
.feedback-a, .feedback-b, .feedback-c, .feedback-d, .feedback-e, .feedback-f{ position: absolute; }
.feedback-a{ left: 100px; top: 130px; }
.feedback-b{ left: 0px; top: 290px; }
.feedback-c{ left: 100px; top: 450px; }
.feedback-d{ left: 750px; top: 130px; }
.feedback-e{ left: 850px; top: 290px; }
.feedback-f{ left: 750px; top: 450px; }

.btn{ display: flex; justify-content: center; margin: auto; background: #00b0f0; }
.btn a{ flex: 1; color: #fff; line-height: 100px; text-align: center; letter-spacing: 0.1em; }
.btn a:last-child{ background: #4ccfff; }
.btn h4{ display: inline-block; font-size: 2em; font-weight: 300;}

.blue{ color: #00b0f0; }
.highline{ font-size: 1.6em; }

/*--------------------------animation left--------------------------*/
.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

/*--------------------------animation right--------------------------*/
.animation-element.slide-right {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(100px, 0px, 0px);
  -webkit-transform: translate3d(100px, 0px, 0px);
  -o-transform: translate(100px, 0px);
  -ms-transform: translate(100px, 0px);
  transform: translate3d(100px, 0px, 0px);
}

.animation-element.slide-right.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

/*--------------------------animation top--------------------------*/
.animation-element.slide-top {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(0px, 100px, 0px);
  -webkit-transform: translate3d(0px, 100px, 0px);
  -o-transform: translate(0px, 100px);
  -ms-transform: translate(0px, 100px);
  transform: translate3d(0px, 100px, 0px);
}

.animation-element.slide-top.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

/*--------------------------animation bottom--------------------------*/
.animation-element.slide-bottom {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(0px, -100px, 0px);
  -webkit-transform: translate3d(0px, -100px, 0px);
  -o-transform: translate(0px, -100px);
  -ms-transform: translate(0px, -100px);
  transform: translate3d(0px, -100px, 0px);
}

.animation-element.slide-bottom.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

/*-------------------mobile----------------------*/
@media only screen and (max-width:768px) {

header{ height: auto; padding: 2.5% 0; }
header{ border: none; }
footer br{ display: block; }
footer p{ text-align: center; line-height: 1.6em; }
.FGlogo a{ max-width: 50%; }
.nav-top{ display: none; }
.mobile-nav-top{ display: block; margin-left: auto; flex: 1; }
.mobile-nav-top ul{ display: flex; align-items: center; flex-direction: row-reverse; }
.mobile-nav-top ul li{ margin-right: 8%; }
.mobile-login{ font-size: 1.6em; color: #ff8a82; }
.ver-gray .mobile-login{ color: #fff; }
.ver-gray .menu .menu-item{ background: #fff; }

.mobile{ display: block; }
.desktop{ display: none; }

.kv{ background: url(../images/mobile_01.jpg) no-repeat; height: 570px; background-size: 100%; }
.kv img, .intro img, .result-pic img, .result-form-pic img{ width: 100%; }
.kv-tit{ display: none!important; }
.kv-pro{ display: none!important; }
.kv-icon01{ width: 30%; left: 30px; top: 420px; }
.kv-icon02{ width: 30%; left: 160px; top: 420px; }

.intro{ padding-top: 440px; background: url(../images/mobile_02.jpg) no-repeat; height: 720px; background-size: 100%; }
.intro-a, .intro-b, .intro-c{ position: static; margin: auto; width: 90%; }
.result{ padding: 20% 0; }
.result .content{ width: 90%; }
.result .content h1{ top: -12%; width: 100%; padding: 2% 3%; font-size: 1.4em;}
.result .content p{ display: block; margin: auto; margin-bottom: 10%;  width: 90%; font-size: 1.2em; }
.result-pic{ display: block; margin: auto; width: 90%; }
.result-form{ flex-wrap: wrap; margin-top: 10%; }
.result-form-pic{ flex: 0 1 40%; margin: 5%; }
.result-note{ padding-top: 5%; text-align: center; }

.mov{ padding-top: 320px; background: url(../images/mobile_03.png) no-repeat; background-position: top center; background-size: 100%; }
#mov_player{ position: static; margin: auto; width: 100%; }
/*.player{ position: static; margin: auto; width: 90%; }
.player iframe{ width: 100%; }*/

.editor-word{ display: block; margin: auto; padding: 0 ; width: 90%; }
.editor h2{ margin-bottom: 5%; }
.editor-pic01{ display: none; }
.editor-pic02{ margin-bottom: 5%; }
.editor-pic02 img{ width: 100%; }
.editor a{ display: block; margin: auto; margin-bottom: 5%; width: 40%; padding: 3% 12%; }

.feedback{ height: auto; padding-top: 320px; padding-bottom: 40px; background: url(../images/mobile_05.jpg) no-repeat; background-position: top center; background-size: 100%; }
.feedback h3{ display: block; margin-bottom: 3%; text-align: center; }
.feedback-a, .feedback-b, .feedback-c, .feedback-d, .feedback-e, .feedback-f{ position: static; margin-bottom: 5%; }
.feedback .content img{ width: 90%; }
.btn h4{ font-size: 1.4em; }

}

/*-------------------mobile----------------------*/
@media only screen and (max-width:320px) {
/*.kv{ height: 480px; }
.kv-icon01{ top: 360px; }
.kv-icon02{ top: 360px; }
.intro{ padding-top: 370px; height: 620px; }
.mov{ height: 610px; padding-top: 250px; }
.feedback{ height: auto; padding-top: 250px; }*/

}