@charset "UTF-8";
/*----------------------------------------------------------------------------------------------
Theme Project: iboclass 愛播聽書FM網站
Designed by : Evy
Front-End by : Evy
Author: 百崴數位科技股份有限公司 PAVI Digital Tech. Co., Ltd.
Author Web: https://www.pavi.com.tw/
----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------
|-> Reset
----------------------------------------------------------------------------------------------*/
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a,
a:visited, abbr, acronym, address, big, cite, code,
del, dfn, em, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  list-style: none; }

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

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  vertical-align: middle; }

input:focus, button:focus {
  outline: none; }

/*----------------------------------------------------------------------------------------------
|-> Global
----------------------------------------------------------------------------------------------*/
html {
  width: 100%;
  overflow: visible;
  display: block;
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  padding: 0; }

body {
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  font-family: Arial,"Microsoft JhengHei";
  font-size: 16px;
  line-height: 1.5em;
  padding: 0;
  overflow-x: hidden;
  display: block; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

p {
  line-height: 1.5em; }


a,
a:visited {
  outline: none;
  /* for Firefox Google Chrome  */
  color: #333;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  a:hover {
    color: #f08237;
    text-decoration: none; }

article {
  min-height: 300px; }

.clearFloat {
  clear: both; }

.hidden {
  display: none; }

.block {
  display: block; }

.marginCenter {
  margin: 0 auto; }

.center {
  text-align: center;
  display: block; }

.left {
  text-align: left; }

.mark {
  color: #e40101;
  background: none; }

#topcontrol {
  z-index: 99;
  margin-right: 10px;
  margin-bottom: 10px;
  width: 40px;
  height: 40px; }
  #topcontrol a {
    text-align: center;
    display: block;
    opacity: 0.7;
    color: #fff;
    background: #666;
    -webkit-border-radius: 20px;
    border-radius: 20px; }
    #topcontrol a:before {
      display: inline-block;
      margin: 0 auto;
      line-height: 40px;
      font-size: 20px;
      font-family: "iboclass";
      content: "x"; }
    #topcontrol a:visited {
      color: #fff; }
    #topcontrol a:hover {
      opacity: 1; }

/*----------------------------------------------------------------------------------------------
|-> Loading
----------------------------------------------------------------------------------------------*/
.loadingBox {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f08237;
  color: #FFF;
  text-align: center;
  font-size: 22px; }
  .loadingBox img {
    width: 80px; }
  .loadingBox .loadingContent {
    position: absolute;
    width: 100%;
    height: 120px;
    top: 50%;
    margin-top: -60px;
    font-family: 'Helvetica Neue', Helvetica; }

.loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  opacity: 0.8; }
  .loading div {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -40px;
    background: #f08237;
    -webkit-border-radius: 40px;
    border-radius: 40px; }
    .loading div img {
      width: 70%;
      margin-top: 15%; }

/*----------------------------------------------------------------------------------------------
|-> Form
----------------------------------------------------------------------------------------------*/
input[type="button"],
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="email"],
input[type="submit"],
input[type="reset"],
input[type="file"],
textarea {
  font-family: "Microsoft JhengHei", Arial;
  font-size: 1em;
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin-bottom: 10px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  outline: none;
  -webkit-appearance: none; }

select {
  font-family: "Microsoft JhengHei", Arial;
  font-size: 1em;
  border: 1px solid #ccc;
  padding: 0 10px;
  height: 35px;
  line-height: 35px;
  -webkit-border-radius: 5px;
  border-radius: 5px; }

/*----------------------------------------------------------------------------------------------
|-> Form - Inside
----------------------------------------------------------------------------------------------*/
.formContent {
  position: relative;
  width: 70%;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 40px; }
  .formContent h2 {
    text-align: center; }
  .formContent .was-validated .form-control.is-invalid:valid {
    border-color: #dc3545; }
  .formContent .custom-checkbox {
    margin-left: 25px;
    margin-bottom: 20px; }
    .formContent .custom-checkbox a {
      color: #f08237;
      font-size: 1.05em;
      margin-left: 5px; }
      .formContent .custom-checkbox a:visited {
        color: #f08237; }
      .formContent .custom-checkbox a:hover {
        text-decoration: underline; }
  .formContent .formArea input {
    width: auto;
    display: inline-block;
    vertical-align: top; }

ul.formInsideList {
  text-align: left;
  margin: 20px auto; }
  ul.formInsideList .address-zone .zipcode {
    min-width: 0;
    padding: 5px 0;
    width: 35px;
    border: none;
    display: inline-block;
    vertical-align: top; }
  ul.formInsideList .address-zone .address {
    display: inline-block;
    vertical-align: top;
    width: 51.5%; }
  ul.formInsideList li {
    position: relative;
    margin-bottom: 15px; }
    ul.formInsideList li.chinaAddress span {
      position: absolute;
      top: 0;
      left: 0; }
    ul.formInsideList li.chinaAddress input {
      display: inline-block;
      vertical-align: top;
      margin-left: 10%;
      width: 85.5%; }
    ul.formInsideList li.part4 {
      display: inline-block;
      vertical-align: top;
      width: 24%; }
      ul.formInsideList li.part4 select {
        width: 90%; }
    ul.formInsideList li.helf {
      display: inline-block;
      vertical-align: top;
      width: 48%; }
    ul.formInsideList li.verificationArea {
      display: inline-block;
      vertical-align: top;
      width: 28%; }
      ul.formInsideList li.verificationArea input.form-control {
        max-width: 70%; }
    ul.formInsideList li.phoneArea {
      width: 66.8%;
      display: inline-block;
      vertical-align: top; }
      ul.formInsideList li.phoneArea input.form-control {
        display: inline-block;
        width: 50%;
        margin-left: 36px;
        height: 36px;
        line-height: 36px;
        margin-bottom: 5px; }
      ul.formInsideList li.phoneArea input.verification {
        display: inline-block;
        vertical-align: top;
        width: 35%;
        background: none;
        color: #f08237;
        border: 1px solid #f08237;
        -webkit-border-radius: 25px;
        border-radius: 25px; }
        ul.formInsideList li.phoneArea input.verification:hover {
          cursor: pointer;
          color: #FFF;
          background: #f08237; }
    ul.formInsideList li .mark {
      display: inline-block; }
    ul.formInsideList li .text-muted {
      font-size: 14px; }
    ul.formInsideList li input.form-control {
      display: inline-block;
      width: 80%;
      margin-left: 36px;
      height: 36px;
      line-height: 36px;
      margin-bottom: 5px; }
    ul.formInsideList li span[class^="icon-"] {
      position: absolute;
      width: 36px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      border: 1px solid #ccc;
      border-right: 0px;
      background: #eaeaea;
      -webkit-border-radius: 5px 0 0 5px;
      border-radius: 5px 0 0 5px; }
      ul.formInsideList li span[class^="icon-"]:before {
        position: relative;
        top: 2px; }
      ul.formInsideList li span[class^="icon-"] + input.form-control {
        -webkit-border-radius: 0 5px 5px 0;
        border-radius: 0 5px 5px 0; }
  ul.formInsideList select {
    min-width: 120px; }
    ul.formInsideList select.carType {
      width: 300px; }
  ul.formInsideList ul.dropdown-menu {
    padding: 0; }
    ul.formInsideList ul.dropdown-menu li {
      margin-bottom: 0;
      border-top: 1px solid rgba(0, 0, 0, 0.15); }
      ul.formInsideList ul.dropdown-menu li:first-child {
        border-top: 0px solid rgba(0, 0, 0, 0.15); }
      ul.formInsideList ul.dropdown-menu li:hover {
        background: #eaeaea; }
      ul.formInsideList ul.dropdown-menu li a {
        padding: 8px 10px;
        color: #333;
        display: block; }
        ul.formInsideList ul.dropdown-menu li a:visited {
          color: #333; }
        ul.formInsideList ul.dropdown-menu li a:hover {
          color: #333; }

.btnArea {
  border-top: 1px solid #ccc;
  padding: 20px;
  text-align: right; }
  .btnArea input[type="reset"] {
    vertical-align: top;
    font-size: 18px;
    color: #666;
    background: #ddd;
    opacity: 0.8;
    line-height: 46px;
    padding: 0 35px;
    margin-right: 10px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .btnArea input[type="reset"]:hover {
      cursor: pointer;
      opacity: 1; }
  .btnArea a.btnBack {
    display: inline-block;
    -webkit-border-radius: 5px;
    border-radius: 5px; }
    .btnArea a.btnBack:visited {
      color: #fff; }
    .btnArea a.btnBack:hover {
      color: #fff; }
  .btnArea input[type="submit"] {
    vertical-align: top;
    font-size: 18px;
    color: #fff;
    background: #f08237;
    opacity: 0.8;
    line-height: 46px;
    padding: 0 35px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .btnArea input[type="submit"]:hover {
      cursor: pointer;
      opacity: 1; }

a.btnSubmit {
  display: inline-block;
  vertical-align: top;
  font-size: 18px;
  color: #fff;
  background: #f08237;
  opacity: 0.8;
  line-height: 46px;
  padding: 0 35px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  a.btnSubmit:visited {
    color: #fff; }
  a.btnSubmit:hover {
    cursor: pointer;
    opacity: 1; }

/*----------------------------------------------------------------------------------------------
|-> Header
----------------------------------------------------------------------------------------------*/
.header {
  position: relative;
  z-index: 90;
  background: #f08237;
  height: 65px; }

a.btnFB {
  position: absolute;
  top: 16px;
  right: 0;
  background: #FFF;
  padding: 2px 15px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  color: #29487d; }
  a.btnFB:before {
    position: relative;
    top: 3px;
    font-family: 'iboclass';
    content: "B";
    color: #29487d;
    font-size: 20px;
    margin-right: 8px; }
  a.btnFB:visited {
    color: #29487d; }
  a.btnFB:hover {
    background: #29487d;
    color: #fff; }
    a.btnFB:hover:before {
      color: #FFF; }

.memberTop {
  position: absolute;
  top: 13px;
  right: 0;
  color: #FFF; }

a.btnMember {
  margin: 18px 10px 0 10px;
  height: 47px;
  line-height: 47px;
  color: #FFF; }
  a.btnMember:before {
    position: relative;
    top: 3px;
    font-family: 'iboclass';
    content: "a";
    color: #FFF;
    font-size: 20px;
    margin-right: 8px; }
  a.btnMember:visited {
    color: #FFF; }
  a.btnMember:hover {
    color: #ffee7b; }
    a.btnMember:hover:before {
      color: #ffee7b; }

a.btnLogout {
  color: #FFF;
  margin-left: 5px; }
  a.btnLogout:visited {
    color: #FFF; }
  a.btnLogout:hover {
    color: #ffee7b; }
  a.btnLogout:before {
    content: '|';
    margin: 0 10px 0 5px;
    color: #FFF; }

.menuGroup {
  position: relative;
  width: 1200px;
  margin: 0 auto; }

.logo {
  width: 220px;
  padding-top: 10px; }

.topGroup {
  position: absolute;
  top: 0;
  left: 0; }

.mainMenuGroup {
  margin-left: 250px;
  vertical-align: top; }

/*---------------------------------------------------
|-> Right Area
---------------------------------------------------*/
/*---------------------------------------------------
|-> Search
---------------------------------------------------*/
.searchGroup {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 60%;
  margin-right: 20px; }

input.searchInput {
  width: 100%;
  margin-right: 50px;
  border: 0px solid #ccc;
  -webkit-border-radius: 17px;
  border-radius: 17px;
  padding: 0 50px 0 15px;
  line-height: 34px; }

a.icon-search-find {
  display: none; }

label.icon-search-find {
  position: absolute;
  top: 0;
  right: 0;
  width: 55px;
  height: 34px; }
  label.icon-search-find:before {
    position: absolute;
    right: 12px;
    top: 5px;
    font-size: 20px;
    color: #f08237; }
  label.icon-search-find input[type="submit"] {
    float: left;
    opacity: 0; }
    label.icon-search-find input[type="submit"]:hover {
      cursor: pointer; }
  label.icon-search-find:hover {
    cursor: pointer; }
    label.icon-search-find:hover:before {
      color: #333; }

.rightGroup {
  position: absolute;
  z-index: 100;
  top: 15px;
  right: 0;
  width: 55%;
  text-align: right; }
  .rightGroup a[class^="icon-"]:before {
    position: relative;
    top: 4px;
    margin-right: 10px;
    font-size: 20px; }
  .rightGroup a {
    color: #fff;
    line-height: 32px; }
    .rightGroup a:visited {
      color: #fff; }
    .rightGroup a:hover {
      color: #ffee7b; }

a.btnTalk {
  position: relative;
  z-index: 100;
  margin-right: 20px;
  display: inline-block;
  padding: 0 15px;
  border: 1px solid #fff;
  -webkit-border-radius: 17px;
  border-radius: 17px;
  color: #fff;
  font-size: 14px; }
  a.btnTalk:visited {
    color: #fff; }
  a.btnTalk:hover {
    color: #f08237;
    background: #fff; }

/*---------------------------------------------------
|-> Menu
---------------------------------------------------*/
a.icon-menu {
  display: none;
  position: absolute;
  z-index: 91;
  right: 0;
  top: 0;
  width: 60px;
  height: 60px;
  color: #fff; }
  a.icon-menu:visited {
    color: #fff; }
  a.icon-menu:hover {
    color: #fff; }
  a.icon-menu:before {
    position: relative;
    right: -15px;
    font-size: 30px;
    line-height: 60px; }

.menu ul {
  text-align: left;
  font-size: 18px; }
  .menu ul li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin-left: -5px; }
    .menu ul li a.mainLink {
      margin: 18px 10px 0 10px;
      height: 47px;
      line-height: 47px; }
    .menu ul li:hover dl {
      display: block; }
    .menu ul li.select a.mainLink span, .menu ul li:hover a.mainLink span {
      color: #ffee7b; }
    .menu ul li.select a.icon-home:before, .menu ul li:hover a.icon-home:before {
      color: #ffee7b; }
    .menu ul li dl {
      position: absolute;
      left: 50%;
      top: 75px;
      width: 152px;
      margin-left: -76px;
      font-size: 14px;
      display: none; }
      .menu ul li dl dd {
        position: relative;
        display: block;
        line-height: 25px;
        height: auto;
        margin: 0;
        background: #333; }
        .menu ul li dl dd:hover dl {
          display: block; }
        .menu ul li dl dd a {
          display: block;
          height: auto;
          color: #fff;
          padding: 10px 0;
          line-height: 30px; }
          .menu ul li dl dd a:visited {
            color: #fff; }
          .menu ul li dl dd a:hover {
            background-color: #00648c;
            color: #fff; }
    .menu ul li a {
      display: block;
      color: #fff;
      text-decoration: none;
      height: 65px;
      line-height: 65px; }
      .menu ul li a:visited {
        color: #fff; }
      .menu ul li a span {
        display: block;
        margin: 0 15px;
        font-weight: bold; }

/*----------------------------------------------------------------------------------------------
|-> Footer
----------------------------------------------------------------------------------------------*/
.footer {
  position: relative;
  z-index: 50;
  text-align: left;
  vertical-align: top;
  padding: 30px 0;
  background: #ddd;
  color: #666; }
  .footer a {
    color: #666; }
    .footer a:visited {
      color: #666; }
    .footer a:hover {
      color: #f08237; }

ul.footerList {
  display: inline-block;
  vertical-align: top; }
  ul.footerList li {
    display: inline-block;
    vertical-align: top;
    margin-right: 30px; }

.footerArea {
  position: relative;
  width: 1200px;
  margin: 0 auto; }

.mainFooter {
  display: block;
  font-weight: bold;
  margin-bottom: 15px; }

.qrcode {
  position: absolute;
  top: -20px;
  right: 10px; }

.copyright {
  font-style: normal;
  font-size: 14px; }

/*----------------------------------------------------------------------------------------------
|-> More Btn
----------------------------------------------------------------------------------------------*/
a.moreBtn {
  display: block;
  text-align: center;
  color: #333;
  background: #eaeaea;
  margin: 20px auto;
  padding: 10px 0;
  -webkit-border-radius: 5px;
  border-radius: 5px; }
  a.moreBtn:visited {
    color: #333; }
  a.moreBtn:hover {
    background: #f08237;
    color: #fff; }

/*----------------------------------------------------------------------------------------------
|-> Banner Bar
----------------------------------------------------------------------------------------------*/
.bannerBar {
  position: relative; }
  .bannerBar figure {
    line-height: 0; }
    .bannerBar figure img {
      width: 100%; }

.bannerTitle {
  position: absolute;
  width: 100%;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); }
  .bannerTitle h1 {
    width: 1200px;
    margin: 0 auto;
    text-align: left;
    padding: 10px 0;
    line-height: 1.6em;
    font-size: 26px;
    color: #fff;
    font-weight: normal; }

/*---------------------------------
|-> 404
---------------------------------*/
.page404 section {
  position: relative;
  padding: 150px 0;
  text-align: center; }
  .page404 section:before {
    position: absolute;
    display: block;
    content: ' ';
    width: 165px;
    height: 110px;
    top: 0;
    right: 25%;
    background: url(../images/404_top.jpg); }
  .page404 section:after {
    position: absolute;
    display: block;
    content: ' ';
    width: 145px;
    height: 170px;
    bottom: 0;
    left: 25%;
    background: url(../images/404_bottom.jpg); }

.page404 figure {
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;
  padding-top: 10px; }

.page404 div {
  display: inline-block;
  vertical-align: top;
  text-align: left; }

.page404 h2 {
  font-size: 32px;
  line-height: 1.4em;
  font-weight: normal; }

.page404 p {
  margin-bottom: 10px; }

.page404 a {
  display: block;
  text-align: center;
  background: #f08237;
  color: #fff;
  width: 190px;
  margin: 20px auto;
  padding: 15px 0;
  -webkit-border-radius: 5px;
  border-radius: 5px; }
  .page404 a:visited {
    color: #fff; }
  .page404 a:hover {
    background: #333;
    color: #fff; }

/*---------------------------------
|-> Crumb
---------------------------------*/
.crumb {
  background: #ddd;
  padding: 5px 10px;
  text-align: left;
  font-size: 14px; }
  .crumb ul {
    width: 1200px;
    margin: 0 auto; }
    .crumb ul li {
      color: #3291b7;
      display: inline-block;
      vertical-align: top; }
      .crumb ul li:before {
        position: relative;
        top: 0;
        content: ">";
        color: #666;
        margin: 2px 5px 2px 2px; }
      .crumb ul li:first-child:before {
        content: "";
        margin: 0; }
      .crumb ul li a {
        color: #666; }
        .crumb ul li a:visited {
          color: #666; }
        .crumb ul li a:hover {
          color: #3291b7; }
      .crumb ul li:last-child a {
        color: #3291b7; }
        .crumb ul li:last-child a:visited {
          color: #3291b7; }
        .crumb ul li:last-child a:hover {
          color: #3291b7;
          cursor: default; }

/*----------------------------------------------------------------------------------------------
|-> RWD
----------------------------------------------------------------------------------------------*/
@media all and (max-width: 1200px) {
  .formContent {
    width: 85%; }
  .header a.btnFB, .header .memberTop {
    right: 10px; }
  .menuGroup, .bannerTitle h1, .crumb ul {
    width: auto; }
  .rightGroup {
    margin-right: 15px; }
  .footerArea {
    width: auto;
    margin: 0 20px; }
  .logo {
    padding-left: 10px; }
  .bannerTitle h1 {
    padding: 10px 20px; } }

@media all and (max-width: 1100px) {
  .menu ul li a.mainLink {
    margin: 18px 0 0 0; }
  .menu ul li a span {
    margin: 0 10px; }
  .header a.btnFB {
    right: 10px;
    padding: 2px 8px; } }

@media all and (max-width: 1000px) {
  html {
    overflow-x: hidden; }
  .formContent {
    width: 95%; }
  .rightGroup {
    position: static;
    margin-right: 60px;
    margin-top: 14px;
    width: 75%;
    float: right; }
  a.btnTalk {
    opacity: 0;
    height: 0;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    margin-right: 0;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    line-height: 55px;
    border: 0; }
    a.btnTalk:hover {
      background: none;
      color: #ffee7b; }
  .mainMenuGroup {
    display: none;
    position: absolute;
    z-index: 99;
    top: 60px;
    right: 0;
    width: 100%;
    margin-left: 0;
    background: #f08237;
    -webkit-box-shadow: -4px 0 5px 0 rgba(0, 0, 0, 0);
    box-shadow: -4px 0 5px 0 rgba(0, 0, 0, 0); }
    .mainMenuGroup.menuOpen + .rightGroup a.btnTalk {
      height: auto;
      opacity: 1; }
  .menu {
    position: relative;
    z-index: 85;
    border-top: 1px solid #fff; }
    .menu ul {
      margin-top: 55px; }
      .menu ul li {
        display: block; }
        .menu ul li a.mainLink {
          margin: 0;
          height: 55px;
          line-height: 55px; }
  .header {
    height: 60px; }
    .header a.btnFB {
      z-index: 86;
      height: 55px;
      line-height: 55px;
      text-align: center;
      background: none;
      color: #FFF;
      top: 0;
      left: 0;
      right: 0;
      border: 0; }
      .header a.btnFB:before {
        color: #FFF; }
      .header a.btnFB:hover {
        color: #ffee7b;
        border: 0; }
        .header a.btnFB:hover:before {
          color: #ffee7b; }
    .header .memberTop {
      z-index: 86;
      height: 55px;
      line-height: 55px;
      top: 0;
      left: 0;
      right: 0;
      border: 0;
      text-align: center; }
  a.icon-menu {
    display: block; }
  .bannerBar figure {
    overflow: hidden;
    max-width: 100%; }
    .bannerBar figure img {
      position: relative;
      left: -15%;
      width: 130%; }
  .qrcode {
    position: relative;
    top: 0;
    right: 0;
    margin-top: 10px;
    margin-bottom: 20px;
    line-height: 0; }
  .footerArea {
    text-align: center; }
  ul.footerList {
    display: inline-block;
    margin: 0 auto 0 auto;
    width: auto;
    text-align: center; }
    ul.footerList li {
      margin: 0 15px 10px 15px; }
  .mainFooter {
    margin-bottom: 0; } }

@media all and (max-width: 768px) {
  .formContent {
    width: auto; }
  .icon-user span {
    display: none; }
  ul.formInsideList .address-zone .address {
    width: 95%; } }

@media all and (max-width: 650px) {
  .formArea .btnArea {
    text-align: center; }
  ul.formInsideList .text-muted {
    display: block; }
  ul.formInsideList li.helf, ul.formInsideList li.phoneArea, ul.formInsideList li.part4 {
    display: block;
    width: 100%; }
  ul.formInsideList li.phoneArea input.verification {
    width: 110px; }
  ul.formInsideList li.verificationArea {
    width: 250px; }
  ul.formInsideList li.part4 select {
    width: 97%; }
  ul.formInsideList li input.form-control {
    width: 85%; }
    ul.formInsideList li input.form-control#cellphone {
      width: 85%; }
  ul.formInsideList li.chinaAddress span {
    position: relative; }
  ul.formInsideList li.chinaAddress input {
    margin-top: 5px;
    display: block;
    margin-left: 0;
    width: 97%; }
  .footerArea {
    width: auto; }
  .searchGroup {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 100;
    top: 60px;
    text-align: center;
    width: auto;
    margin: 0;
    background: #666; }
    .searchGroup a.icon-search-find {
      display: block;
      position: absolute;
      z-index: 100;
      top: -60px;
      right: 80px;
      color: #fff; }
      .searchGroup a.icon-search-find:before {
        position: absolute;
        right: 25px;
        top: 19px;
        font-size: 20px;
        color: #fff; }
      .searchGroup a.icon-search-find:visited {
        color: #fff; }
      .searchGroup a.icon-search-find:hover {
        color: #fff; }
    .searchGroup label.icon-search-find {
      top: 10px;
      right: 10px;
      height: 0; }
    .searchGroup .ui-widget {
      display: none;
      margin: 10px auto;
      padding: 0 10px;
      -webkit-border-radius: 0;
      border-radius: 0; }
      .searchGroup .ui-widget.searchOpen label.icon-search-find {
        height: auto; }
    .searchGroup .searchInput {
      margin-bottom: 0; }
  .bannerBar figure {
    overflow: hidden;
    max-width: 100%; }
    .bannerBar figure img {
      position: relative;
      left: -50%;
      width: 200%; }
  .bannerTitle h1 {
    padding: 10px 20px;
    font-size: 18px; } }