/*手機頭尾CSS修改*/

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

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

  /*TOP_HTML*/

  body,
  h2 {
      margin: 0;
  }

  #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;
  }

  #AAA,
  #BBB {
      height: auto;
      display: flow-root;
  }

  #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: 1125px;
      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,
  #abgne_float_ad_com {
      /*浮動視窗*/
      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,
  #abgne_float_ad_com 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-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;

  }

  .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;
  }

  #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: 523px;
      background-image: url(../images/banner_ec2.jpg);
      background-size: cover;
      background-position: top center;
      margin-top: 85px;
  }

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

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

  h1.main_Tit {
      font-weight: bold;
      font-size: 36px;
      color: #586868;
      margin: 50px 0 0 0;
      display: block;
      font-family: "微軟正黑體";
      line-height: 1.4;
  }

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

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

  ul.main_Feature>li {
      float: left;
      height: 420px;
      padding-right: 60px;
  }

  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: 30px;
      color: #000;
      font-family: "微軟正黑體";
  }

  .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_48 {
      font-size: 48px;
      font-weight: bold;
  }

  #NEW_MEMBER {
      position: relative;
  }

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

  #intro {
      width: 100%;
      height: 720px;
      /* background: url(../images/pixta_29710579_XL.jpg) 50% 0 no-repeat fixed; */
      background: url(../images/pixta_29710579_XL.jpg) no-repeat;
      background-size: cover;
      background-position: left center;
      background-color: #000;
      position: relative;
  }

  #intro div {
      background-color: #000;
      opacity: 0.7;
      color: #FFF;
      z-index: 1;
      width: 612px;
      height: 254px;
      position: absolute;
      top: 120px;
      left: 10%;
  }

  #intro div p.title {
      font-size: 30px;
      font-weight: bold;
      text-align: center;
      letter-spacing: 1px;
      color: #FFF;
      line-height: 2;
  }

  #intro div p.title .font_48 {
      font-size: 48px;
      font-weight: bold;
  }

  #intro div img {
      margin-left: 60px;
      margin-right: 10px;
  }

  #intro div p.des {
      display: block;
      width: 330px;
      float: right;
      margin-right: 30px;
      font-size: 20px;
      color: #FFF;
  }

  #second {
      width: 100%;
      height: 720px;
      /* background: url(../images/banner_ec4.jpg) 50% 0 no-repeat fixed; */
      background: url(../images/banner_ec4.jpg) no-repeat;
      background-size: cover;
      background-position: left top;
      background-color: #000;
      position: relative;
  }

  #second div {
      background-color: #000;
      opacity: 0.8;
      color: #FFF;
      z-index: 1;
      width: 650px;
      height: 254px;
      position: absolute;
      top: 200px;
      left: 18%;
  }

  #second div p.title {
      font-size: 30px;
      font-weight: bold;
      text-align: center;
      letter-spacing: 1px;
      color: #FFF;
      line-height: 2;
  }

  #second div p.title .font_48 {
      font-size: 48px;
      font-weight: bold;
  }

  #second div img {
      float: right;
      width: 220px;
      margin-right: 10px;
      position: absolute;
      right: 20px;
      bottom: 20px;
  }

  #second div p.des {
      display: block;
      width: 360px;
      float: left;
      margin-left: 30px;
      font-size: 20px;
      color: #FFF;
  }


  #third p {
      width: 100%;
      height: 100px;
      background-color: #db140d;
      color: #FFF;
      font-size: 48px;
      font-weight: bold;
      line-height: 100px;
      margin-bottom: 0;
  }

  #fifth {
      width: 600px;
      margin: 0 auto;
      border: 2px solid #999;
  }

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

  #fifth p {
      margin: 20px auto;
  }

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

  /* ====摺疊表格==== */

  a.btn_OFF {
      display: block;
      width: 24px;
      height: 24px;
      background-image: url(../images/iconmonstr-plus-5-24.png);
      background-repeat: no-repeat;
      text-indent: -9999px;
      border: none;
      margin: 0 auto;
      float: right;
      padding-right: 20px;
      margin-top: -8px;
  }

  .btn_ON {
      background-image: url(../images/iconmonstr-minus-5-24.png) !important;
      float: left;
  }

  .box1,
  .box3,
  .box5,
  .box7,
  .box9 {
      float: none;
      width: 70%;
      background-color: #89cbf1;
      display: table;
      border-radius: 10px;
      margin: 0 auto;
      margin-top: 5px;
      padding: 15px;
  }

  .box2,
  .box4,
  .box6,
  .box8 {
      float: none;
      width: 70%;
      background-color: #c2c2c2;
      display: table;
      border-radius: 10px;
      margin: 0 auto;
      margin-top: 5px;
      padding: 15px;
  }

  .text1,
  .text2,
  .text3,
  .text4,
  .text5,
  .text6,
  .text7,
  .text8,
  .text9 {
      padding: 0px 0px 35px 50px;
      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: 200px;
      float: left;
      height: 60px;
      padding: 0 1.5%;
      border-right: 1px solid #ccc;
      text-align: center;
      margin: 0;
      line-height: 60px;
      font-size: 16px;
      /* border-left: 1px solid #ccc; */
      /* margin-left: -1px; */
  }

  .focus1 {
      font-weight: bold;
      /* text-decoration: underline; */
      -moz-text-decoration-color: red;
      /* text-decoration-color: red; */
      padding: 1px;
      display: inline-block;
      border-bottom: 1px solid red;
  }

  .focus2 {
      font-weight: normal;
      /* text-decoration: underline; */
      -moz-text-decoration-color: red;
      /* text-decoration-color: red; */
      padding: 1px;
      display: inline-block;
      border-bottom: 1px solid red;
  }

  .red {
      color: #F00;
  }

  .clearfix {
      clear: both;
  }

  .mobi-able {
      display: none;
  }

  .mobi-disable {
      display: block;
  }

  /*---IPAD版型區---*/

  @media screen and (max-width: 1550px) {
      .main_Feature {
          min-width: auto !important;
      }

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

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

      ul.main_Feature>li {
          padding-right: 50px;
          margin-bottom: 30px;
      }

      ul#BBB {
          width: 96%;
      }

      ul#BBB>li {
          padding-left: 10px;
          padding-right: 0px;
          max-width: 28%;
      }

      #DDD {
          width: 86%;
      }

      #DDD>li {
          padding-right: 30px;
          margin-bottom: 30px;
      }

      #DDD img#DDD_pic {
          width: 100%;
          max-width: 500px;
      }

      #NEW {
          z-index: 1;
          display: block;
          position: absolute;
          right: -30px;
          top: -80px;
          max-width: 70px;
      }
  }

  @media screen and (max-width: 1366px) {
      ul#AAA {
          width: 86%;
      }

      ul#BBB {
          width: 100%;
      }

      ul#BBB>li {
          padding-left: 10px;
          padding-right: 0px;
      }

      #DDD img#DDD_pic {
          width: 100%;
          max-width: 440px;
      }

      #intro {
          background-position: 50% center;
      }
  }

  @media screen and (max-width: 1280px) {
      #DDD {
          width: 95%;
      }
  }

  @media screen and (max-width: 1160px) {
      footer img {
          max-width: 1000px;
      }

      .bottom p {
          right: 8%;
      }
  }

  @media screen and (max-width: 900px) {
      footer img {
          max-width: 860px;
      }

      .bottom p {
          right: 5%;
          width: 280px;
          bottom: 70px;
      }
  }

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

  @media screen and (max-width: 768px) {
      .mui-scroll-wrapper {
          overflow: hidden;
      }

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

      #intro div {
          background-color: #000;
          opacity: 0.7;
          color: #FFF;
          z-index: 1;
          width: 560px;
          height: 200px;
          position: absolute;
          top: 120px;
      }

      #intro img {
          max-width: 100px;
      }

      ul#BBB>li {
          width: 28% !important;
          font-size: 16px;
          margin: 20px 10px 20px 0;
          min-height: 290px;
      }

      ul#BBB>li.title_Feature2 {
          padding-left: 0;
          font-size: 20px;
          letter-spacing: -1px;
      }

  }

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

      .mobi-able {
          display: block;
      }

      .mobi-disable {
          display: none;
      }

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

      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: auto;
          margin-top: 55px;
          background-image: url();
          background-position: top center;
      }

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

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

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

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

      h1.main_Tit {
          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;
          padding-right: 0;
      }

      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: 360px;
          background: url(../images/pixta_29710579_XL.jpg);
          background-size: 160%;
          background-position: center top !important;
          background-color: #000;
      }

      #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;
          padding-bottom: 20px;
      }

      #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;
      }

      #intro div p.title .font_48 {
          font-size: 28px;
          font-weight: bold;
      }

      ul#BBB>li {
          width: 100% !important;
          font-size: 16px;
          margin: 20px 10px 20px 0;
          min-height: auto;
          max-width: 100%;
      }

      #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;
          padding-bottom: 20px;
      }

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

      #second div p.title .font_48 {
          font-size: 28px;
          font-weight: bold;
      }

      #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;
      }

      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;
          font-size: 24px;
      }

      #DDD {
          height: auto !important;
      }

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

      #fifth {
          width: 90%;
          margin: 0 auto;
          border: 2px solid #999;
          box-sizing: border-box;
          padding: 0px;
      }

      #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;
      }

      .text1 p,
      .text2 p,
      .text3 p,
      .text4 p,
      .text5 p,
      .text6 p,
      .text7 p,
      .text8 p,
      .text9 p {
          border: none;
          width: 80%;
          margin: 0;
          padding: 0;
          text-align: center;
      }

      .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; */
      }

      /*---版權宣告頁---*/
      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;
      }
  }