/*手機頭尾CSS修改*/

  .mui-bar-nav~.mui-content {
      padding-top: 0px;
  }

  .mui-scroll-wrapper {
      overflow: auto;
  }

  /* TOP_HTML */

  h2 {
      text-align: center;
      font-size: 40px !important;
      color: #FFF !important;
      clear: both;
      margin: 0 auto !important;
      margin-bottom: 40px !important;
      line-height: 80px !important;
      padding-top: 40px !important;
      border-bottom: 1px solid #FFF;
      width: 100%;
      max-width: 1100px;
      font-family: "微軟正黑體" !important;
      display: block !important;
  }

  #J_head_top {
      /* position: fixed; */
      width: 1125px;
      display: block;
      height: 126px;
      background: url(./../images/back_pic.jpg) repeat-x left top;
      opacity: 1;
      margin: 0 auto;
      z-index: 100;
  }

  #J_head_top a {
      margin: 0;
  }

  #BOX {
      width: 1125px;
      margin: 0 auto;
      position: relative;
  }

  #CPHONE {
      position: absolute;
      display: block;
      width: 359px;
      height: 30px;
      font-family: "新細明體", "細明體", Arial;
      font-size: 13px;
      line-height: 30px;
      font-weight: bold;
      color: #313131;
      right: 0px;
      top: 17px;
  }

  #CPHONE table td {
      vertical-align: top;
  }

  #CPHONE a {
      color: #313131;
      text-decoration: none;
  }

  #CPHONE a:hover {
      text-decoration: underline;
  }

  #UP-TOP {
      display: block;
      width: 980px;
      height: 66px;
      background-image: url(../images/top.jpg);
      background-repeat: no-repeat;
  }

  #UP-TOP img {
      margin-top: 10px;
  }

  /* TOP NAV */

  #WEBGO_NAV {
      width: 560px;
      height: 49px;
      margin: 0px 0 0 0;
      padding: 8px 0 0 0;
      float: left;
      background: url(./../images/back_pic.jpg) repeat-x left top;
      background-position: left -66px;
  }

  #WEBGO_NAV ul {
      height: 49px;
      margin: 0;
      padding: 0;
  }

  #WEBGO_NAV ul li {
      list-style: none;
      float: left;
      text-align: center;
      font-family: "微軟正黑體";
  }

  #WEBGO_NAV ul li a {
      display: block;
      height: 49px;
      line-height: 49px;
      text-align: center;
      text-decoration: none;
      color: #FFF;
      font-weight: normal;
      text-shadow: 1px 1px #666;
      font-size: 16px;
      background-image: url(../images/webgo_index_nav.png);
  }

  #WEBGO_NAV ul li a:hover {
      color: #FF9;
      background-image: url(../images/webgo_index_nav.png);
  }

  #WEBGO_NAV ul li#btn1 a {
      width: 115px;
      color: #666;
      text-shadow: 1px 1px #FFF;
      background-position: left top;
      z-index: 5;
      padding-top: 5px;
      line-height: 1.2;
      box-sizing: border-box;
  }

  #WEBGO_NAV ul li#btn1 a:hover {
      background-position: left -49px;
      position: relative;
  }

  #WEBGO_NAV ul li#btn2 a {
      width: 130px;
      margin-left: -16px;
      box-sizing: border-box;
      background-position: -98px top;
      z-index: 4;
  }

  #WEBGO_NAV ul li#btn2 a:hover {
      background-position: -98px -98px;
      position: relative;
      margin-left: -16px;
  }

  #WEBGO_NAV ul li#btn3 a {
      width: 124px;
      margin-left: -20px;
      box-sizing: border-box;
      background-position: -209px top;
      z-index: 3;
  }

  #WEBGO_NAV ul li#btn3 a:hover {
      background-position: -214px -147px;
      position: relative;
      margin-left: -20px;
  }

  #WEBGO_NAV ul li#btn4 a {
      width: 119px;
      margin-left: -16px;
      box-sizing: border-box;
      background-position: -325px top;
      z-index: 2;
  }

  #WEBGO_NAV ul li#btn4 a:hover {
      background-position: -325px 99px;
      position: relative;
      margin-left: -16px;
  }


  #WEBGO_NAV ul li#btn5 a {
      width: 136px;
      color: #333;
      font-weight: bold;
      text-shadow: 1px 1px #FFF;
      margin-left: -16px;
      box-sizing: border-box;
      background-position: right top;
      z-index: 1;
  }

  #WEBGO_NAV ul li#btn5 a:hover {
      background-position: right bottom;
      position: relative;
      margin-left: -16px;
  }

  .on {
      color: #FF9;
  }

  #WEBGO_NAV2 {
      width: 560px;
      height: 60px;
      margin: 0px 0 0 0;
      padding: 0;
      float: right;
  }

  #WEBGO_NAV2 ul {
      width: 560px;
      height: 60px;
      margin: 0;
      padding: 0;
  }

  #WEBGO_NAV2 ul li {
      list-style: none;
      float: left;
      text-align: center;
      font-family: "新細明體";
  }

  #WEBGO_NAV2 ul li a {
      display: block;
      width: 140px;
      height: 60px;
      line-height: 63px;
      text-align: center;
      text-decoration: none;
      color: #000;
      font-weight: bold;
      font-size: 15px;
  }

  #WEBGO_NAV2 ul li#btn1 a {
      box-sizing: border-box;
      background-image: url(../images/lhbutton2.gif);
  }

  #WEBGO_NAV2 ul li#btn1 a:hover {
      box-sizing: border-box;
      background-image: url(../images/lhbutton2-o.gif);
  }

  #WEBGO_NAV2 ul li#btn2 a {
      box-sizing: border-box;
      background-image: url(../images/lhbutton1.gif);
  }

  #WEBGO_NAV2 ul li#btn2 a:hover {
      box-sizing: border-box;
      background-image: url(../images/lhbutton1-o.gif);
  }

  #WEBGO_NAV2 ul li#btn3 a {
      box-sizing: border-box;
      background-image: url(../images/lhbutton7.gif);
  }

  #WEBGO_NAV2 ul li#btn3 a:hover {
      box-sizing: border-box;
      background-image: url(../images/lhbutton7-o.gif);
  }

  #WEBGO_NAV2 ul li#btn4 a {
      box-sizing: border-box;
      background-image: url(../images/lhbutton2.gif);
      color: #F00;
  }

  #WEBGO_NAV2 ul li#btn4 a:hover {
      box-sizing: border-box;
      background-image: url(../images/lhbutton2-o.gif);
  }

  /*彈跳視窗*/

  #top_down2 {
      background: #000;
      font-family: "新細明體", "細明體", Arial;
      font-size: 15px;
      color: #FFF;
      display: none;
      width: 450px;
      /*視窗的寬*/
      height: 320px;
      /*視窗的高*/
      overflow-x: hidden;
      overflow-y: auto;
      padding: 30px 0px 15px 0px;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      border-radius: 0px;
      position: fixed;
      z-index: 99;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
  }

  #top_down2 span {
      position: absolute;
      color: #CCC;
      right: 10px;
      margin-top: -20px;
  }

  #top_down2 span:hover {
      color: #FF0000;
  }

  #POPTD {
      display: block;
      text-align: left;
      margin: 0 auto;
      font-family: "新細明體", "細明體", Arial;
      font-size: 15px;
      color: #FFF;
      width: 360px;
      height: 320px;
  }

  #POPTD .TTB {
      font-size: 16px;
      text-align: left;
      font-weight: bold;
      line-height: 30px;
      border-bottom: 1px solid #FFF;
      /*下部边框*/
  }

  #POPTD .BBODY {
      text-align: left;
      padding: 5px 5px 5px 0px;
      line-height: 20px;
  }

  #POPTD .TNOTE {
      font-size: 13px;
      text-align: left;
      line-height: 18px;
      padding: 2px 0px 2px 0px;
      color: #FF0;
  }

  .M {
      display: block;
      width: 53px;
      height: 53px;
      background-image: url(../images/UPC-line.gif);
  }

  /*彈跳視窗結束*/

  #abgne_float_ad2 {
      /*浮動視窗*/
      display: block;
      position: fixed;
      font-family: "新細明體", "細明體";
      bottom: 150px;
      right: 0px;
      font-size: 13px;
      z-index: 3000;
      color: #FFF;
      letter-spacing: 1px;
  }

  #abgne_float_ad2 a {
      text-decoration: none;
      color: #FFF;
      margin: 0;
  }

  #abgne_float_ad a:hover {
      text-decoration: underline;
  }

  #abgne_float_ad .abgne_close_ad {
      display: block;
      text-align: right;
      cursor: pointer;
      font-size: 12px;
      color: #000;
  }

  #abgne_float_ad a img {
      border: none;
  }

  /*浮動視窗結束*/

  select.input-2 {
      line-height: 1.4;
      padding: 3px;
      font-size: 16px;
  }

  /* PAGE STYLE */

  @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      src: local('Montserrat-Regular'), url(http://themes.googleusercontent.com/static/fonts/montserrat/v4/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
  }

  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
      display: block;
  }

  body {
      line-height: 1;
  }

  small {
      font-size: 13px;
  }

  ol,
  ul {
      list-style: none;
  }

  blockquote,
  q {
      quotes: none;
  }

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

  table {
      border-collapse: collapse;
      border-spacing: 0;
  }

  body,
  html {
      height: 100%;
  }

  .clearfix {
      clear: both;
  }

  h1 {
      margin: 40px 0;
      font-size: 40px;
      line-height: 40px;
      font-weight: bold;
      /* text-shadow: 0px 1px 1px #888; */
  }

  a {
      text-decoration: none;
      color: #fff;
      margin: 0 10px;
  }

  a:focus {
      color: #FFF;
  }

  html,
  body {
      margin: 0 auto;
      font-family: "微軟正黑體";
      font-size: 18px;
      color: #000;
      line-height: 30px;
  }

  header {
      display: none;
  }

  div.tan {
      background-image: url(../images/ec_tan.jpg);
      height: 42px;
      background-position: top center;
      background-repeat: repeat-x;
      background-size: cover;
  }

  .font_28 {
      font-size: 30px;
      font-weight: bold;
  }

  .font_36 {
      font-size: 36px;
  }

  .red {
      color: #ed3338;
  }

  .Red {
      color: #F00;
  }

  .font_48 .Red {
      font-size: 72px;
  }

  @font-face {
      src: local('Montserrat-Regular'), url(http://themes.googleusercontent.com/static/fonts/montserrat/v4/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
  }

  .btn {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      position: relative;
      display: inline-block;
      overflow: hidden;
      height: 74px;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      line-height: 30px;
      font-size: 16px;
      font-weight: bold;
      text-shadow: 0px 1px 1px #888;
  }


  .btn span.icon,
  .btn span.title {
      display: block;
      position: relative;
      line-height: 30px;
      padding: 20px 60px;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
  }

  .btn span.left {
      float: left;
      border-radius: 6px 0 0 6px;
      -moz-border-radius: 6px 0 0 6px;
      -webkit-border-radius: 6px 0 0 6px;
  }

  .btn span.right {
      float: right;
      border-radius: 0 6px 6px 0;
      -moz-border-radius: 0 6px 6px 0;
      -webkit-border-radius: 0 6px 6px 0;
  }

  .btn span.icon {
      font-size: 30px;
      background-color: #db140d;
      -webkit-box-shadow: 0 3px 0 0 #707070;
      box-shadow: 0 3px 0 0 #707070;
      text-shadow: 0px 1px 1px #888;
      height: 30px;
  }

  .btn span.title {
      -webkit-box-shadow: 0 3px 0 0 #707070;
      box-shadow: 0 3px 0 0 #707070;
      background-color: #db140d;
      font-size: 30px;
  }


  .btn.left span.arrow-left {
      right: 0;
      -webkit-box-shadow: 10px 0 0 0 #00cdae, 10px 3px 0 0 #00ae94;
      box-shadow: 10px 0 0 0 #00cdae, 10px 3px 0 0 #00ae94;
      border-right: 10px solid #00cdae;
  }

  .btn.right span.arrow-left {
      right: 0;
      -webkit-box-shadow: 10px 0 0 0 #00967f, 10px 3px 0 0 #007261;
      box-shadow: 10px 0 0 0 #00967f, 10px 3px 0 0 #007261;
      border-right: 10px solid #00967f;
  }

  .btn.left span.arrow-right {
      left: 0;
      -webkit-box-shadow: -10px 0 0 0 #00967f, -10px 3px 0 0 #007261;
      box-shadow: -10px 0 0 0 #00967f, -10px 3px 0 0 #007261;
      border-left: 10px solid #00967f;
  }


  .btn.right span.arrow-right {
      top: 0;
      left: 0;
      -webkit-box-shadow: -10px 0 0 0 #db140d, -10px 3px 0 0 #707070;
      box-shadow: -10px 0 0 0 #db140d, -10px 3px 0 0 #707070;
      border-left: 10px solid #db140d;
  }

  .btn span.arrow-left,
  .btn span.arrow-right {
      position: absolute;
      width: 0;
      height: 0;
      border-top: 35px solid transparent;
      border-bottom: 35px solid transparent;
      -webkit-transition: all .15s;
      -webkit-transition-property: left, right;
      transition-property: left, right;
  }



  .btn:active,
  .btn.active {
      height: 71px;
  }

  .btn:hover {}

  .btn:hover span.arrow-left {
      right: 10px;
  }

  .btn:hover span.arrow-right {
      left: 10px;
  }

  .btn:hover span.slant-left {
      right: 10px;
  }

  .btn:hover span.slant-right {
      left: 10px;
  }

  .btn-small {
      height: 30px;
      font-size: 12px;
      line-height: 10px;
  }

  a.btn-small span.btn {
      height: 30px;
  }

  ul li {
      list-style: none;
  }

  .btn.blue {
      border: 2px solid #000;
      height: 55px;
      text-shadow: 0px 0px 0px;
  }

  a:hover.btn.blue,
  a:hover.btn.blue span {

      color: #e7312b;
  }

  .btn.blue span.title {
      background-color: #FFF;
      color: #000;
      font-size: 18px;
      padding: 10px 20px;
      box-shadow: 0 0 0 0;
  }

  .c_w100 {
      display: none;
  }

  #NAV_FRAME {
      width: 100%;
      margin: 0 auto;
      background-image: url(../images/index-bg.gif);
      background-repeat: repeat-x;
      height: 126px;
      position: fixed;
      top: 0;
      z-index: 100;
      opacity: 0.9;
  }

  #NAV_FRAME iframe {
      margin: 0 15%;
  }

  #TOP_BANNER {
      width: 100%;
      height: 95vh;
      background-image: url(../images/EC_POS_Banner_full.jpg);
      background-size: cover;
      background-position: center 33%;
      margin-top: 85px;
      position: relative;
  }

  #TOP_TITLE {
      width: 1100px;
      height: 230px;
      margin: -62px auto 60px auto;
  }

  #TOP_TITLE img {
      float: left;
      margin: 0 10px;
  }

  h1.main_Title {
      font-weight: bold;
      font-size: 36px;
      color: #586868;
      margin: 60px 0 0 0;
  }

  .main_Title span.focus {
      color: #586868;
      font-size: 48px;
  }

  ul.main_Feature {
      width: 80%;
      margin: 0 auto;
      min-width: 1500px;
  }

  ul.main_Feature>li {
      float: left;
      height: 420px;
  }

  ul.main_Feature2>li {
      float: left;
      height: 260px !important;
  }

  .main_pic img {
      width: 760px;
  }

  .m77 li {
      margin-right: 77px;
  }

  ul.list_Feature li {
      float: none;
      width: 240px;
      max-width: 240px;
  }

  .w200 li {
      width: 320px !important;
      max-width: 320px !important;
  }

  .w300 li {
      width: 400px !important;
      max-width: 400px !important;
  }

  ul.main_Feature.main_Feature2 li.title_Description ul li {
      list-style-type: disc;
      padding-left: 0px;
      margin-left: 25px;
      margin-right: 0;
      text-align: left;
  }

  .pic_Feature {
      text-align: center;
  }

  .pic_Feature img {
      margin: 0 auto;
      width: 140px;
      height: 140px;
      margin-bottom: 30px;
  }

  .title_Feature,
  .title_Feature h2 {
      font-weight: bold;
      ;
      font-size: 24px;
      line-height: 36px;
      text-align: center;
      margin-bottom: 34px;
  }

  .title_Feature2 {
      font-weight: bold;
      font-size: 24px;
      line-height: 36px;
      text-align: left;
      margin-bottom: 34px;
      /* background-image: url(../images/ec_title_line.png); */
      background-repeat: no-repeat;
      padding-left: 20px;
      background-size: contain;
  }

  ul.list_Feature li>ul {
      margin-left: 0;
      padding-left: 0;
  }

  .font_16 {
      font-size: 16px;
  }

  .font_48 {
      font-size: 48px;
      font-weight: bold;
  }

  .left {
      float: left;
  }

  .right {
      float: right;
  }

  #NEW_MEMBER {
      position: relative;
  }

  #NEW {
      z-index: 1;
      display: block;
      position: absolute;
      right: 60px;
      top: -80px;
  }

  #intro {
      width: 100%;
      height: 551px;
      background: url(../images/EC_POS_pic1.png) no-repeat;
      background-size: cover;
      background-position: center top;
      position: relative;
  }

  #intro div {
      color: #000;
      z-index: 1;
      width: auto;
      height: auto;
      position: absolute;
      top: 173px;
      right: 21%;
  }

  #intro div p.title {
      font-size: 30px;
      font-weight: bold;
      text-align: left;
      letter-spacing: 2px;
  }

  #intro div p.des {
      display: block;
      width: auto;
      font-size: 26px;
  }

  #intro div p.des b {
      display: inline;
      border-bottom: 2px solid #c00;
      padding-bottom: 2px;
  }

  #second {
      width: 100%;
      height: 628px;
      background: url(../images/EC_POS_pic2.png) no-repeat;
      background-size: cover;
      background-position: center top;
      position: relative;
      margin-top: -115px;
  }

  #second div {
      color: #000;
      z-index: 1;
      width: auto;
      height: auto;
      position: absolute;
      top: 260px;
      left: 15%;
  }

  #second div p.title {
      font-size: 30px;
      font-weight: bold;
      text-align: left;
      letter-spacing: 2px;
  }

  #second div p.des {
      display: block;
      width: auto;
      font-size: 26px;
  }

  #second div p.des b {
      display: inline;
      border-bottom: 2px solid #c00;
      padding-bottom: 2px;
  }


  #third {
      width: 100%;
      height: 597px;
      background: url(../images/EC_POS_pic3.png) no-repeat;
      background-size: cover;
      background-position: center top;
      position: relative;
      margin-top: -110px;
  }

  #third div {
      color: #000;
      z-index: 1;
      width: auto;
      height: auto;
      position: absolute;
      top: 285px;
      right: 15%;
  }

  #third div p.title {
      font-size: 30px;
      font-weight: bold;
      text-align: left;
      letter-spacing: 2px;
  }

  #third div p.des {
      display: block;
      width: auto;
      font-size: 26px;
  }

  #third div p.des b {
      display: inline;
      border-bottom: 2px solid #c00;
      padding-bottom: 2px;
  }

  #fifth {
      width: 100%;
      height: 780px;
      margin: 0 auto;
      background-image: url(../images/EC_wooden_bg.jpg);
      background-size: cover;
      background-position: center top;
  }

  #fifth div p.title {
      width: 100%;
      height: 60px;
      color: #000;
      font-size: 30px;
      font-weight: bold;
      line-height: 60px;
      text-align: center;
      margin: 0;
      padding-top: 20px;
  }

  #fifth p {
      margin: 20px auto;
  }

  #fifth div p.title small {
      font-size: 24px;
  }

  .main_feature {
      display: inline-block;
      vertical-align: top;
      padding: 10px 5%;
      width: 100%;
      box-sizing: border-box;
      border-bottom: 1px solid #ccc;
  }

  .main_feature.left_box {
      background-color: #FFF;
  }

  .main_feature.right_box {
      background-color: #eee;
  }

  .main_feature.left_box img.ft_pic {
      float: left;
      margin-right: 20px;
  }

  .main_feature.right_box img.ft_pic {
      float: right;
      margin-left: 20px;
      max-width: 250px;
  }

  .main_feature>div {
      max-width: 950px;
  }

  .main_feature p {
      padding: 0;
      margin: 0;
      text-align: left;
      line-height: 1.8;
      font-size: 20px;
  }

  .main_feature p.title {
      margin-top: 10px;
  }

  .main_feature p.des {
      max-width: 520px;
      float: left;
      text-align: justify;
  }

  #BOX3 {
      height: 530px;
      background-color: #004477;
      background-image: url(../images/EC_poscase_bg.jpg);
      background-size: cover;
      background-position: center;
  }

  #youtubebox {
      padding: 0 5%;
      margin: 0 auto;
      width: 1280px;
  }

  #leftbox {
      width: 500px;
      float: left;
      padding: 20px 20px 60px 30px;
  }

  #rightbox {
      width: 566px;
      float: left;
      padding: 0px;
      border: 3px solid #FFF;
      height: 321px;
  }

  #BOX3 p {
      text-align: left;
      color: #FFF;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
      font-size: 21px;
      line-height: 1.8;
  }

  #BOX3 p.w_title {
      font-weight: bold;
      font-size: 36px;
      margin: 0;
      line-height: 2;
      color: #FF0;
      text-align: left;
  }

  /* IPAD */

  #IPAD {
      width: 1000px;
      height: 693px;
      position: relative;
      margin: 0 auto;
      background-image: url(../images/EC_IPADs.png);
      background-repeat: no-repeat;
      float: right;
  }

  #IPAD ul.ipad_nav {
      position: absolute;
      left: 140px;
      bottom: 78px;
      z-index: 200;
  }

  #IPAD ul.ipad_nav li {
      list-style: none;
      display: inline-block;
      width: 74px;
      height: 74px;
      border: 1px solid #999;
      font-size: 23px;
      line-height: 1.3;
      padding-top: 7px;
      box-sizing: border-box;
      border-radius: 5px;
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fefefe+0,dbdbdb+49,d1d1d1+52,e2e2e2+100 */
      background: #fefefe;
      /* Old browsers */
      background: -moz-linear-gradient(top, #fefefe 0%, #dbdbdb 49%, #d1d1d1 52%, #e2e2e2 100%);
      /* FF3.6-15 */
      background: -webkit-linear-gradient(top, #fefefe 0%, #dbdbdb 49%, #d1d1d1 52%, #e2e2e2 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, #fefefe 0%, #dbdbdb 49%, #d1d1d1 52%, #e2e2e2 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#e2e2e2', GradientType=0);
      /* IE6-9 */
      text-align: center;
  }

  #IPAD ul.ipad_nav li:hover {
      color: #fff;
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fefefe+0,dbdbdb+49,d1d1d1+52,e2e2e2+100 */
      background: #8f8f91;
      /* Old browsers */
      background: -moz-linear-gradient(top, #8f8f91 0%, #545454 49%, #3b3b3b 52%, #51504e 100%);
      /* FF3.6-15 */
      background: -webkit-linear-gradient(top, #8f8f91 0%, #545454 49%, #3b3b3b 52%, #51504e 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, #8f8f91 0%, #545454 49%, #3b3b3b 52%, #51504e 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8f8f91', endColorstr='#51504e', GradientType=0);
      /* IE6-9 */
  }

  #IPAD ul.ipad_nav li:hover a {
      color: #FFF;
  }

  #IPAD ul.ipad_nav li a {
      margin: 0;
      color: #000;
  }

  #IPAD ul.ipad_nav li a:hover {
      color: #fff;
  }

  #IPAD .pos_content {
      width: 725px;
      height: 360px;
      position: relative;
      -webkit-box-shadow: 0px 0px 20px #666 inset;
      -moz-box-shadow: 0px 0px 20px #666 inset;
      box-shadow: 0px 0px 20px #666 inset;
      background-color: #fffdde;
  }

  #IPAD .pos_content .pos_title {
      font-size: 36px;
      font-weight: bold;
      display: inline-table;
      border-bottom: 3px solid #F00;
      padding-bottom: 20px;
      width: auto;
      position: absolute;
      left: 100px;
      top: 80px;
      padding-left: 10px;
      padding-right: 10px;
  }

  #IPAD .pos_content img {
      position: absolute;
      right: 60px;
      top: 66px;
  }

  #IPAD .pos_content p {
      position: absolute;
      width: 315px;
      font-size: 20px;
      text-align: left;
      line-height: 1.8;
      left: 100px;
      top: 140px;
      font-weight: normal;
      letter-spacing: 1px;
  }

  h3 {
      color: #000;
      text-align: center;
      line-height: 10px;
      display: block !important;
      font-size: 21px !important;
      font-family: "微軟正黑體" !important;
  }

  .clearfix {
      clear: both;
  }

  .mobi-able {
      display: none;
  }

  .mobi-disable {
      display: block;
  }

  .pctype {
      display: block;
  }

  .mbtype {
      display: none;
  }

  /* FOOTER */

  footer {
      background-image: url(../images/seo_0816-6.jpg);
      background-size: cover;
  }

  footer img {
      margin: 0 auto;
      display: block;
      padding: 40px 0;
      max-width: 1245px;
      width: 100%;
  }

  .bottom {
      position: relative;
      max-width: 1245px;
      margin: 0 auto;
      width: 100%;
  }

  .bottom p {
      font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
      color: #FFF;
      font-weight: bold;
      text-shadow: 1px 1px 2px #000;
      background-color: #db140d;
      box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
      width: 328px;
      text-align: center;
      line-height: 70px;
      border-radius: 5px;
      font-size: 30px;
      letter-spacing: 2px;
      right: 210px;
      position: absolute;
      bottom: 94px;
      transition: background .3s;
  }

  .bottom p:hover {
      background-color: #c50700;
  }

  #IPAD .swiper-container {
      width: 740px;
      height: 535px;
      margin: 0px auto;
      top: 97px;
      left: 9px;
      /* overflow: visible; */
      position: relative;
  }

  #IPAD .swiper-slide {
      -webkit-flex-shrink: 0;
      -ms-flex: 0 0 auto;
      flex-shrink: 0;
      width: 100%;
      height: 485px;
      position: relative;
  }

  #IPAD .swiper-button-next,
  #IPAD .swiper-button-prev {
      position: absolute;
      top: 35%;
      width: 27px;
      height: 44px;
      margin-top: -22px;
      z-index: 10;
      cursor: pointer;
      -moz-background-size: 27px 44px;
      -webkit-background-size: 27px 44px;
      background-size: 27px 44px;
      background-position: center;
      background-repeat: no-repeat;
      right: 20px;
  }

  #IPAD .gallery-thumbs {
      height: 20%;
      box-sizing: border-box;
      padding: 20px 0;
      top: -115px;
      left: -95px;
      width: 555px;
  }

  #IPAD .gallery-thumbs .swiper-slide {
      width: 100px;
      height: 100px;
      opacity: 0.4;
      list-style: none;
  }

  #IPAD .gallery-thumbs .swiper-slide-active {
      opacity: 1;
  }

  /*---手機版型區---*/

  @media screen and (max-width: 1680px) {
      #fifth>div {
          width: 100% !important;
          box-sizing: border-box;
      }

      #fifth img.left {
          width: 400px;
          text-align: center;
          padding: 0 3%;
      }
  }

  @media screen and (max-width: 1480px) {
      #fifth img.left {
          width: 320px;
          text-align: center;
          padding: 10px;
      }
  }

  @media screen and (max-width: 1366px) {
      #fifth {
          text-align: center;
          height: auto;
      }

      #fifth>div {
          width: 100% !important;
          box-sizing: border-box;
      }

      #fifth img.left {
          margin-top: 20px !important;
          float: none;
          margin-left: auto;
          margin-right: auto;
      }

      #IPAD {
          float: none;
      }
  }

  @media screen and (max-width: 1024px) {
      ul.main_Feature {
          width: 80%;
          margin: 0 auto;
          min-width: 100%;
      }
  }

  @media screen and (max-width: 1024px) {
      header {
          display: block;
          background-image: url(../templates/mobi_bg.jpg);
      }

      .mobi-able {
          display: block;
      }

      .mobi-disable {
          display: none;
      }

      .pctype {
          display: none;
      }

      img.pctype {
          display: none;
      }

      .mbtype {
          display: block;
      }

      img.mbtype {
          display: block;
      }

      html,
      body {
          overflow-x: hidden;
          box-sizing: border-box;
      }

      h2 {
          font-size: 30px !important;
          color: #FFF;
          clear: both;
          margin: 0 auto;
          margin-bottom: 20px !important;
          line-height: 60px !important;
          padding-top: 20px !important;
          border-bottom: 1px solid #FFF;
      }

      p {}

      .mui-bar .mui-title img {
          height: 24px !important;
          margin-top: 15px;
          width: initial;
          margin-left: 24%;
      }

      header {
          width: 100%;
          height: 55px;
          background: url(../templates/header.png) repeat-x;
          position: fixed;
          top: 0;
          z-index: 10;
      }

      h1.mui-title {
          margin-top: -30px;
      }

      #NAV_FRAME {
          display: none;
      }

      img {
          width: 100%;
      }

      ul {
          padding: 0;
      }

      #TOP_BANNER {

          width: 100%;
          height: 95vh;
          margin-top: 55px;
          background-image: url(../images/EC_POS_Banner_full.jpg);
          background-size: cover;
          background-position: center;
          position: relative;

      }

      #TOP_TITLE {
          width: 100%;
          height: auto;
          text-align: center;
          margin: 0;
      }

      #TOP_TITLE img {
          float: none;
          margin: 0 0px;
      }

      #TOP_TITLE p {
          width: 90%;
          margin: 0 auto;
          font-size: 18px !important;
      }

      .main_Title span.focus {
          color: #586868;
          font-size: 36px;
      }

      h1.main_Title {
          font-weight: bold;
          font-size: 28px;
          line-height: 1.4;
          width: 90%;
          margin: 0 auto;
          text-align: center;
          margin-bottom: 10px;
      }

      ul.main_Feature {
          width: 100%;
          margin: 0 auto;
          min-width: 100%;
          box-sizing: border-box;
          padding: 10px;
      }

      ul.main_Feature>li {
          float: none;
          height: auto;
          width: 100%;
          margin: 0;
          box-sizing: border-box;
          ;
      }

      ul.list_Feature li {
          float: none;
          width: 100%;
          max-width: 100%;
          text-align: center;
          padding-left: 0;
      }

      ul.list_Feature li.title_Description>li {
          margin-left: 0;
          padding-left: 20px;
      }

      .main_pic img {
          width: 100%;
      }

      .m77 li {
          margin-right: auto;
      }

      .w200 li {
          width: 100% !important;
          max-width: 100% !important;
      }

      .w300 li {
          width: 100% !important;
          max-width: 100% !important;
      }

      .pic_Feature {
          text-align: center;
      }

      .pic_Feature img {
          margin: 0 auto;
          width: 140px;
          height: 140px;
          margin-bottom: 10px;
      }

      .title_Feature,
      .title_Feature h2 {
          font-weight: bold;

          font-size: 24px;
          line-height: 36px;
          text-align: center;
          margin-bottom: 20px;
      }

      .title_Description {
          margin-bottom: 20px;
      }

      #intro {
          width: 100%;
          height: 551px;
          background: url(../images/EC_POS_pic1.png);
          background-size: cover;
          background-position: center top !important;
      }

      #intro div {
          background-color: #333;
          opacity: 1;
          color: #FFF;
          z-index: 1;
          width: 100%;
          height: auto;
          position: absolute;
          top: initial;
          bottom: 0;
          left: 0;
          line-height: 1.4;
      }

      #intro div p.title {
          font-size: 20px;
          font-weight: bold;
          text-align: center;
          letter-spacing: 0px;
          margin-top: 10px;
      }

      #intro div img {
          margin-left: 5%;
          margin-right: 0;
          width: 65px;
          margin-top: 10px;
          float: left;
      }

      #intro div p.des {
          display: block;
          width: 70%;
          float: right;
          margin-right: 20px;
          font-size: 18px;
          margin-top: -8px;
          line-height: 1.6;
      }

      #NEW {
          z-index: 1;
          display: block;
          position: absolute;
          width: 60px;
          right: 10px;
          top: -30px;
      }

      #second {
          width: 100%;
          height: 420px;
          background: url(../images/banner_ec4.jpg);
          background-size: 150%;
          background-position: center top !important;
          background-color: #000;
      }

      #second div {
          background-color: #333;
          opacity: 1;
          color: #FFF;
          z-index: 1;
          width: 100%;
          height: auto;
          position: absolute;
          bottom: 0px;
          left: 0;
          line-height: 1.4;
          top: initial;
      }

      #second div p.title {
          font-size: 18px;
          font-weight: bold;
          text-align: center;
          letter-spacing: 0px;
          margin-top: 10px;
      }

      #second div img {
          margin-left: 5%;
          margin-right: 0;
          width: auto;
          margin-top: -20px;
          float: left;
          width: 85px;
          left: -10px;
          bottom: 30px;
      }

      #second div p.des {
          display: block;
          width: 70%;
          float: right;
          margin-right: 8px;
          font-size: 18px;
          margin-top: -8px;
          line-height: 1.6;
      }

      .main_feature {
          padding-bottom: 20px !important;
      }

      .main_feature.left_box img.ft_pic,
      .main_feature.right_box img.ft_pic {
          width: 70%;
          float: none;
          margin: 0 auto !important;
          text-align: center;
      }

      .main_feature p {
          text-align: center;
          margin: 0 !important;
      }

      .main_feature p.title {
          float: none;
          margin: 0 !important;
          text-align: center;
          line-height: 1.4;
      }

      .main_feature p.des {
          font-size: 18px;
          float: none;
          margin-left: 0 !important;
          text-align: center;
      }

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

      .main_feature p.des img {
          width: auto;
      }

      ul.main_Feature.main_Feature2 li.title_Description ul li {
          list-style-type: disc;
          padding-left: 0px;
          margin-left: 25px;
          margin-right: 0;
          text-align: left;
      }

      ul.main_Feature.main_Feature2>li {
          height: auto !important;
          text-align: left;
          margin-bottom: 40px;
      }

      ul.list_Feature li.title_Feature2 {
          text-align: left;
          padding-left: 0px;
          margin: 20px 10px;
      }

      #DDD {
          height: auto !important;
      }

      #third p {
          font-size: 30px;
          padding: 0 20px;
          line-height: 1.6;
          box-sizing: border-box;
      }

      #fifth {
          width: 100%;
          margin: 0 auto;
          box-sizing: border-box;
          padding: 10px;
          height: auto;
      }

      #fifth>div {
          padding: 20px 15px !important;
          width: 100% !important;
          box-sizing: border-box;
      }

      #fifth .box-title {
          width: 100%;
          height: 50px;
          background-color: #474747;
          color: #FFF;
          font-size: 24px;
          font-weight: bold;
          line-height: 50px;
          text-align: center;
          margin: 0;
      }

      #fifth p {
          padding: 10px;
      }

      #BOX3,
      #youtubebox,
      #leftbox,
      #rightbox,
      #youtubebox iframe {
          width: 100%;
          box-sizing: border-box;
          height: auto;
          clear: both;
          display: inline-grid;
      }

      #BOX3 iframe {
          height: 420px;
      }

      .news.ke-zeroborder iframe {
          height: 550px;
      }

      #BOX3 p {
          font-size: 18px;
      }

      #BOX3 p.w_title {
          font-size: 24px;
          text-align: center;
      }

      .mbtype.swiper-container {
          width: 100%;
          height: 100%;
      }

      .mbtype.swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;

          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
      }

      #youtubebox {
          padding: 0 20px 20px 20px;
      }

      #leftbox {
          float: none;
          padding: 0px;
      }

      #fifth img.left {
          margin-top: 0 !important;
          width: 100%;
          padding: 0;
      }

      .font_28 {
          font-size: 21px;
      }

      .red.font_36 {
          font-size: 28px;
      }

      .font_36 {
          font-size: 24px;
      }

      .font_48 {
          font-size: 30px;
      }

      .btn {
          width: 90%;
      }

      .btn span.left {
          float: left;
          border-radius: 6px 6px 6px 6px;
          -moz-border-radius: 6px 0 0 6px;
          -webkit-border-radius: 6px 6px 6px 6px;
      }

      .btn.right {
          width: 70%;
      }

      .btn.right span.left {
          width: 100%;
          padding: 20px 0;
          font-size: 24px;
      }

      .btn.blue.right {
          width: 90%;
      }

      span.right.icon {
          display: none;
      }

      .btn.blue span.title {
          background-color: #FFF;
          color: #000;
          font-size: 18px;
          width: 100%;
          text-align: center;
          padding: 10px 0;
      }

      .box1,
      .box3,
      .box5,
      .box7,
      .box9,
      .box2,
      .box4,
      .box6,
      .box8 {
          width: 90%;
      }

      .text1,
      .text2,
      .text3,
      .text4,
      .text5,
      .text6,
      .text7,
      .text8,
      .text9 {
          padding: 0px 0px 35px 10px;
          width: 70%;
          float: none;
          background-color: #FFF;
          border-bottom-right-radius: 15px;
          border-bottom-left-radius: 15px;
          margin: 0px auto;
          clear: both;
          margin-bottom: 0px;
      }

      .text1 p,
      .text2 p,
      .text3 p,
      .text4 p,
      .text5 p,
      .text6 p,
      .text7 p,
      .text8 p,
      .text9 p {
          width: 49%;
          float: left;
          height: auto;
          padding: 0;
          border-right: 1px solid #ccc;
          text-align: center;
          margin: 0;
          line-height: 1.6;
          /* border-left: 1px solid #ccc; */
          /* margin-left: -1px; */
      }

      footer {
          background-image: url(../images/seo_0816-6.jpg);
          background-size: cover;
          background-position: center;
          margin-top: 0px;
          /*display: none;*/
      }

      footer img {
          margin: 0 auto;
          display: block;
          padding: 20px 0 10px 0;
          width: 100%;
      }

      .bottom p {
          font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
          color: #FFF;
          font-weight: bold;
          text-shadow: 1px 1px 2px #000;
          background-color: #db140d;
          box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
          width: 90%;
          text-align: center;
          border-radius: 5px;
          letter-spacing: 2px;
          position: relative;
          transition: background .3s;
          margin: 0 auto;
          line-height: 70px !important;
          font-size: 30px !important;
          margin-bottom: 20px;
          bottom: 0 !important;
          right: auto !important;
          margin-top: 0px;

      }

      /*---版權宣告頁---*/
      a {
          text-decoration: none;
      }

      .font_48 {
          font-size: 30px;
          font-weight: bold;
      }

      .c_w100 {
          width: 100%;
          background-color: #555;
          font-size: 14px;
          text-align: left;
          padding: 15px;
          color: #FFF;
          height: 220px;
          max-height: 220px;
          position: static;
          bottom: 0;
          margin-top: 40px;
          box-sizing: border-box;
          display: block;
          line-height: 1.6;
      }

      .c_w100 a#GOTOP {
          background-color: #FFF;
          color: #000;
          display: block;
          border-radius: 50px;
          width: 50px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: 18px;
          margin: -70px auto 0 auto;
          border: 2px solid #555;
      }

      .c_w100 img {
          width: 24px;
      }
  }

  @media screen and (max-width: 768px) {
      #TOP_BANNER {

          width: 100%;
          height: 95vh;
          margin-top: 55px;
          background-image: url(../images/EC_POS_Banner_mfull.jpg);
          background-size: cover;
          background-position: center 35%;
          position: relative;

      }
  }

  @media screen and (max-width: 550px) {
      header {
          display: block;
          background-image: url(../templates/mobi_bg.jpg);
      }

      .mobi-able {
          display: block;
      }

      .mobi-disable {
          display: none;
      }

      .pctype {
          display: none;
      }

      .mbtype {
          display: block;
      }

      html,
      body {
          overflow-x: hidden;
          box-sizing: border-box;
      }

      h2 {
          font-size: 30px !important;
          color: #FFF;
          clear: both;
          margin: 0 auto;
          margin-bottom: 20px !important;
          line-height: 60px !important;
          padding-top: 20px !important;
          border-bottom: 1px solid #FFF;
      }

      p {}

      .mui-bar .mui-title img {
          height: 24px !important;
          margin-top: 15px;
          width: initial;
          margin-left: 24%;
      }

      header {
          width: 100%;
          height: 55px;
          background: url(../templates/header.png) repeat-x;
          position: fixed;
          top: 0;
          z-index: 10;
      }

      h1.mui-title {
          margin-top: -30px;
      }

      #NAV_FRAME {
          display: none;
      }

      img {
          width: 100%;
      }

      ul {
          padding: 0;
      }

      #TOP_BANNER {
          width: 100%;
          height: 95vh;
          margin-top: 55px;
          background-image: url(../images/EC_POS_Banner_mfull.jpg);
          background-size: cover;
          background-position: center 33%;
          position: relative;
      }

      #TOP_TITLE {
          width: 100%;
          height: auto;
          text-align: center;
          margin: 0;
      }

      #TOP_TITLE img {
          float: none;
          margin: 0 0px;
      }

      #TOP_TITLE p {
          width: 90%;
          margin: 0 auto;
          font-size: 18px !important;
      }

      .main_Title span.focus {
          color: #586868;
          font-size: 36px;
      }

      h1.main_Title {
          font-weight: bold;
          font-size: 28px;
          line-height: 1.4;
          width: 90%;
          margin: 0 auto;
          text-align: center;
          margin-bottom: 10px;
      }

      ul.main_Feature {
          width: 100%;
          margin: 0 auto;
          min-width: 100%;
          box-sizing: border-box;
          padding: 10px;
      }

      ul.main_Feature>li {
          float: none;
          height: auto;
          width: 100%;
          margin: 0;
          box-sizing: border-box;
          ;
      }

      ul.list_Feature li {
          float: none;
          width: 100%;
          max-width: 100%;
          text-align: center;
          padding-left: 0;
      }

      ul.list_Feature li.title_Description>li {
          margin-left: 0;
          padding-left: 20px;
      }

      .main_pic img {
          width: 100%;
      }

      .m77 li {
          margin-right: auto;
      }

      .w200 li {
          width: 100% !important;
          max-width: 100% !important;
      }

      .w300 li {
          width: 100% !important;
          max-width: 100% !important;
      }

      .pic_Feature {
          text-align: center;
      }

      .pic_Feature img {
          margin: 0 auto;
          width: 140px;
          height: 140px;
          margin-bottom: 10px;
      }

      .title_Feature,
      .title_Feature h2 {
          font-weight: bold;

          font-size: 24px;
          line-height: 36px;
          text-align: center;
          margin-bottom: 20px;
      }

      .title_Description {
          margin-bottom: 20px;
      }

      #intro {
          width: 100%;
          height: 551px;
          background: url(../images/EC_POS_pic1.png);
          background-size: cover;
          background-position: center top !important;
      }

      #intro div {
          background-color: #333;
          opacity: 1;
          color: #FFF;
          z-index: 1;
          width: 100%;
          height: auto;
          position: absolute;
          top: initial;
          bottom: 0;
          left: 0;
          line-height: 1.4;
      }

      #intro div p.title {
          font-size: 20px;
          font-weight: bold;
          text-align: center;
          letter-spacing: 0px;
          margin-top: 10px;
      }

      #intro div img {
          margin-left: 5%;
          margin-right: 0;
          width: 65px;
          margin-top: 10px;
          float: left;
      }

      #intro div p.des {
          display: block;
          width: 70%;
          float: right;
          margin-right: 20px;
          font-size: 18px;
          margin-top: -8px;
          line-height: 1.6;
      }

      #NEW {
          z-index: 1;
          display: block;
          position: absolute;
          width: 60px;
          right: 10px;
          top: -30px;
      }

      #second {
          width: 100%;
          height: 420px;
          background: url(../images/banner_ec4.jpg);
          background-size: 150%;
          background-position: center top !important;
          background-color: #000;
      }

      #second div {
          background-color: #333;
          opacity: 1;
          color: #FFF;
          z-index: 1;
          width: 100%;
          height: auto;
          position: absolute;
          bottom: 0px;
          left: 0;
          line-height: 1.4;
          top: initial;
      }

      #second div p.title {
          font-size: 18px;
          font-weight: bold;
          text-align: center;
          letter-spacing: 0px;
          margin-top: 10px;
      }

      #second div img {
          margin-left: 5%;
          margin-right: 0;
          width: auto;
          margin-top: -20px;
          float: left;
          width: 85px;
          left: -10px;
          bottom: 30px;
      }

      #second div p.des {
          display: block;
          width: 70%;
          float: right;
          margin-right: 8px;
          font-size: 18px;
          margin-top: -8px;
          line-height: 1.6;
      }

      .main_feature {
          padding-bottom: 20px !important;
      }

      .main_feature.left_box img.ft_pic,
      .main_feature.right_box img.ft_pic {
          width: 70%;
          float: none;
          margin: 0 auto !important;
          text-align: center;
      }

      .main_feature p {
          text-align: center;
          margin: 0 !important;
      }

      .main_feature p.title {
          float: none;
          margin: 0 !important;
          text-align: center;
          line-height: 1.4;
      }

      .main_feature p.des {
          font-size: 18px;
          float: none;
          margin-left: 0 !important;
          text-align: center;
      }

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

      .main_feature p.des img {
          width: auto;
      }

      ul.main_Feature.main_Feature2 li.title_Description ul li {
          list-style-type: disc;
          padding-left: 0px;
          margin-left: 25px;
          margin-right: 0;
          text-align: left;
      }

      ul.main_Feature.main_Feature2>li {
          height: auto !important;
          text-align: left;
          margin-bottom: 40px;
      }

      ul.list_Feature li.title_Feature2 {
          text-align: left;
          padding-left: 0px;
          margin: 20px 10px;
      }

      #DDD {
          height: auto !important;
      }

      #third p {
          font-size: 30px;
          padding: 0 20px;
          line-height: 1.6;
          box-sizing: border-box;
      }

      #fifth {
          width: 100%;
          margin: 0 auto;
          box-sizing: border-box;
          padding: 10px;
          height: auto;
      }

      #fifth>div {
          padding: 20px 15px !important;
          width: 100% !important;
          box-sizing: border-box;
      }

      #fifth .box-title {
          width: 100%;
          height: 50px;
          background-color: #474747;
          color: #FFF;
          font-size: 24px;
          font-weight: bold;
          line-height: 50px;
          text-align: center;
          margin: 0;
      }

      #fifth p {
          padding: 10px;
      }

      #BOX3,
      #youtubebox,
      #leftbox,
      #rightbox,
      #youtubebox iframe {
          width: 100%;
          box-sizing: border-box;
          height: auto;
          clear: both;
          display: inline-grid;
      }

      #BOX3 iframe {
          height: 220px;
      }

      #BOX3 p {
          font-size: 18px;
      }

      #BOX3 p.w_title {
          font-size: 24px;
          text-align: center;
      }

      .mbtype.swiper-container {
          width: 100%;
          height: 100%;
      }

      .mbtype.swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;

          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
      }

      #youtubebox {
          padding: 0 20px 20px 20px;
      }

      #leftbox {
          float: none;
          padding: 0px;
      }

      #fifth img.left {
          margin-top: 0 !important;
          width: 100%;
          padding: 0;
      }

      .font_28 {
          font-size: 21px;
      }

      .red.font_36 {
          font-size: 28px;
      }

      .font_36 {
          font-size: 24px;
      }

      .font_48 {
          font-size: 30px;
      }

      .btn {
          width: 90%;
      }

      .btn span.left {
          float: left;
          border-radius: 6px 6px 6px 6px;
          -moz-border-radius: 6px 0 0 6px;
          -webkit-border-radius: 6px 6px 6px 6px;
      }

      .btn.right {
          width: 70%;
      }

      .btn.right span.left {
          width: 100%;
          padding: 20px 0;
          font-size: 24px;
      }

      .btn.blue.right {
          width: 90%;
      }

      span.right.icon {
          display: none;
      }

      .btn.blue span.title {
          background-color: #FFF;
          color: #000;
          font-size: 18px;
          width: 100%;
          text-align: center;
          padding: 10px 0;
      }

      .box1,
      .box3,
      .box5,
      .box7,
      .box9,
      .box2,
      .box4,
      .box6,
      .box8 {
          width: 90%;
      }

      .text1,
      .text2,
      .text3,
      .text4,
      .text5,
      .text6,
      .text7,
      .text8,
      .text9 {
          padding: 0px 0px 35px 10px;
          width: 70%;
          float: none;
          background-color: #FFF;
          border-bottom-right-radius: 15px;
          border-bottom-left-radius: 15px;
          margin: 0px auto;
          clear: both;
          margin-bottom: 0px;
      }

      .text1 p,
      .text2 p,
      .text3 p,
      .text4 p,
      .text5 p,
      .text6 p,
      .text7 p,
      .text8 p,
      .text9 p {
          width: 49%;
          float: left;
          height: auto;
          padding: 0;
          border-right: 1px solid #ccc;
          text-align: center;
          margin: 0;
          line-height: 1.6;
          /* border-left: 1px solid #ccc; */
          /* margin-left: -1px; */
      }

      footer {
          background-image: url(../images/seo_0816-6.jpg);
          background-size: cover;
          background-position: center;
          margin-top: 0px;
          /*display: none;*/
      }

      footer img {
          margin: 0 auto;
          display: block;
          padding: 20px 0 10px 0;
          width: 100%;
      }

      .bottom p {
          font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
          color: #FFF;
          font-weight: bold;
          text-shadow: 1px 1px 2px #000;
          background-color: #db140d;
          box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
          width: 90%;
          text-align: center;
          line-height: 70px;
          border-radius: 5px;
          font-size: 30px;
          letter-spacing: 2px;
          position: relative;
          transition: background .3s;
          right: 0;
          margin: 0 auto;
          margin-bottom: 20px;
          bottom: 0;
      }

      /*---版權宣告頁---*/
      a {
          text-decoration: none;
      }

      .font_48 {
          font-size: 30px;
          font-weight: bold;
      }

      .c_w100 {
          width: 100%;
          background-color: #555;
          font-size: 14px;
          text-align: left;
          padding: 15px;
          color: #FFF;
          height: 220px;
          max-height: 220px;
          position: static;
          bottom: 0;
          margin-top: 40px;
          box-sizing: border-box;
          display: block;
          line-height: 1.6;
      }

      .c_w100 a#GOTOP {
          background-color: #FFF;
          color: #000;
          display: block;
          border-radius: 50px;
          width: 50px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: 18px;
          margin: -70px auto 0 auto;
          border: 2px solid #555;
      }

      .c_w100 img {
          width: 24px;
      }
  }

  @media screen and (max-width: 320px) {
      .font_48 {
          font-size: 28px;
          font-weight: bold;
      }
  }