/*****************************Index Start*****************************************/

/*************login**************/
#h_contaniner {
    display: block;
    background-image: url("https://www.aibooks.tw/per/images/sys_images/hbg.jpg");
    width: 100%;
    height: 800px;
    position: relative;
    /*background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
      background-size: cover;*/
  }
  
  .h_img_position {
    width: 100px;
    position: fixed;
    z-index: 1;
    top: -50px;
    /*left: 50%;
      transform: translate(-50%,0%);*/
  } /*登入口logo擺放位置 */
  .h_img_position > img,
  .h_img_position_two > img {
    width: 100%;
  } /*登入口logo img */
  .h_index_bg {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }
  .h_login_bg {
    width: 33em;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    margin: 0 auto;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
  }
  
  .login_sec_width {
    width: 100%;
  }
  .h_login_bg_width {
    width: 80%;
    margin: 0 auto;
  }
  .h_login_title {
    width: 100%;
    height: 4em;
    color: #ffffff;
    background: linear-gradient(to bottom, #277f69 50%, #247564 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
    font-weight: bolder;
    stroke: #ffffff;
    stroke-width: 100em;
    -webkit-box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.25);
  }
  .h_login {
    width: 45%;
    /*justify-content: center !important;*/
  }
  .h_login_box,
  h1.h_login_box {
    font-size: 32px;
    color: #004c5d;
    font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
    font-weight: bolder;
    stroke: #ffffff;
    stroke-width: 100em;
  }
  
  /*login,rigister*/
  .login,
  .account {
    width: 100%;
    margin: auto;
    background-color: #ffffff;
    border: 1px solid #0ec9a8;
  }
  .login-content {
    padding: 30px 40px 30px 40px;
  }
  .login-content li {
    margin-bottom: 20px;
  }
  .profilel li {
    margin-bottom: 20px;
    width: 49%;
    display: block;
    padding: 0;
    padding-right: 1.5%;
    float: left;
  }
  .profilel li:nth-child(even) {
    float: right;
  }
  .login-content a {
    cursor: pointer;
  }
  .login-content li button,
  .login-content li a button {
    width: 100%;
    font-size: 14px;
    padding: 0.5em 0;
    color: #ffffff;
    height: 49px;
    position: relative;
    display: flex;
    justify-content: center;
  }
  .login-content li.linebtn,
  .login .login-content li.FBbtn {
    display: inline-block;
    width: 49.6%;
  }
  li.linebtn a,
  li.FBbtn a {
    display: block;
  }
  button {
    background: #0ec9a8;
  }
  .login-content li button i {
    font-size: 20px;
    margin-right: 10px;
  }
  
  .login-nav {
    width: 100%;
    margin: 0 auto;
    max-width: 600px;
    position: relative;
    display: table;
    border-top: 1px solid #0ec9a8;
  }
  .login-nav li {
    display: table-cell;
    text-align: center;
  }
  .login-nav li a {
    font-size: 18px;
    line-height: 4.5;
    color: #000000;
    background: #ffffff;
    border-right: 1px solid #0ec9a8;
  }
  .login-nav li:last-child a {
    border-right: 0;
  }
  .login-nav li a:hover {
  }
  .login-nav li a:after {
    top: 7px;
  }
  .login-nav .active a {
    border-bottom: 1px solid #0ec9a8;
  }
  .login-content .login-nav li a {
    line-height: 2;
    width: 150px; /*margin: 0 20px;*/
  }
  .login-content .login-nav li:first-child a {
    text-align: left;
  }
  .login-content .login-nav li:last-child a {
    float: right;
  }
  .login-content li button,
  .login-content li a button {
    align-items: center;
    height: 43px;
  }
  
  /*.login-nav li.active a{color:#213652;border-bottom:2px solid #0ec9a8;}*/
  .login-nav li.active a {
    color: #000000;
    background: #ffffff; /*box-shadow: inset 0 2px 0px 1px rgba(128,128,128,0.6); border:0;*/
  }
  .login > hr {
    border-top: 1px solid #b9b9b9;
    position: relative;
    top: -30px;
  }
  .login-content h5 {
    padding-left: 20px;
    margin-bottom: 10px;
  }
  
  .bdr5 {
    /*border-radius: 30px !important;*/
    border-radius: 5px !important;
  }
  .login-content select {
    padding: 1px 5px;
    width: 100%;
    border: 1px solid #ccc;
  }
  .login-content input[type="text"],
  .login-content input[type="email"],
  .login-content input[type="password"] {
    width: 100%;
    color: #333;
    line-height: 2;
    padding: 0.5em;
    resize: none;
    background: #fff;
    letter-spacing: 0.1em;
    border: 1px solid #cbcbcb; /*border-radius: 25px;*/
    border-radius: 5px;
    font-size: 14px;
  }
  .login-content select:hover,
  .login-content select:active,
  .login-content select:focus,
  .login-content input:hover,
  .login-content input:active,
  .login-content input:focus {
    box-shadow: 0px 0px 6px rgba(53.3%, 71.4%, 95.7%, 1);
  }
  .login li input[type="checkbox"] {
    margin: 0 5px 0 13px;
    width: 18px;
    height: 18px;
  }
  .verifycode {
    width: 100%;
    display: flex;
    align-items: center;
  }
  .verifycode input {
    width: 65.66% !important;
  }
  .verifycode img {
    width: 33.33%;
    margin-left: 1%;
  }
  
  .playline {
    display: flex;
    justify-content: space-between;
  }
  .btnLine {
    background-color: #00c300;
  }
  .btnFB {
    background-color: #345087;
    color: #ffffff !important;
  }
  .btnLine > img,
  .btnFB > img {
    height: 36px;
    position: absolute;
    top: 50%;
    left: 3%;
    transform: translate(0%, -50%);
    border-radius: 5px; /*margin-right:.5em;*/
  }
  .btnLine > img {
    box-shadow: 0 0 2px 0 rgba(253, 253, 253);
  }
  .btnFB .fa-facebook {
    width: 20px;
    height: 20px;
    display: inline-block;
  }
  .grayColor {
    color: #000;
  }
  
  /*indexkv*/
  .indexKV {
    margin-bottom: 50px;
  }
  
  .kv-swiper {
  }
  .kv-swiper .swiper-container {
    padding-bottom: 50px;
  }
  .kv-swiper aside {
    padding-bottom: 30.78%;
  }
  
  /*服務項目*/
  
  .in-service > div {
    text-align: center;
    margin-bottom: 90px;
    padding: 0;
  }
  
  .in-service .zone-header {
    
    padding: 0 20px;
    display: inline-block;
    text-align: left;
    margin-bottom: 30px;
  }
  .in-service .zone-header .mainTitle {
    margin: 0.1em auto 0;
  }
  .in-service .zone-header dt {
    text-align: left;
    width: 50%;
  }
  .in-service .zone-header dd {
  }
  .in-service .zone-header dd p {
    font-weight: 400;
  }
  
  .in-service .zone-header dd .app-download {
    border-left: 1px solid #ccc;
    padding-left: 30px;
    margin-top: 30px;
  }
  .in-service .zone-header dd .app-download img {
    margin-right: 5px;
  }
  
  .prdList-swiper .swiper-container {
    padding-bottom: 50px;
  }
  
  .prdList-swiper .swiper-slide aside {
    padding-bottom: 90%;
  }
  .prdList-swiper .swiper-slide aside nav {
    color: #fff;
    text-align: center;
    position: absolute;
  }
  .prdList-swiper .swiper-slide aside nav h4 {
    font-weight: 300;
    width: 7em;
    margin-bottom: 1em;
  }
  
  .prdList-swiper .swiper-slide:nth-child(even) nav {
    top: 30px;
    left: 60px;
  }
  .prdList-swiper .swiper-slide:nth-child(odd) nav {
    bottom: 30px;
    right: 60px;
  }
  
  /*新聞專區*/
  .in-news {
    margin-bottom: 90px;
    width: 100%;
  }
  .in-news > div {
    display: table-cell;
    vertical-align: top;
  }
  .in-news > div.famous {
    width: 750px;
  }
  .in-news > div.famous > article {
    width: inherit;
  }
  
  .in-news > div.news {
    padding: 0 80px;
    text-align: left;
  }
  
  /*famous*/
  .famous-swiper {
  }
  
  .famousList {
    padding-left: 80px;
    position: relative;
  }
  .famousList nav {
    width: 250px;
    height: 250px;
    background-color: #0ec9a8;
    color: #fff;
    padding: 20px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 99;
  }
  .famousList nav * {
    position: relative;
    z-index: 10;
  }
  .famousList nav:after {
    width: 0;
    height: inherit;
    position: absolute;
    left: 0;
ÿ  ⃠֚ 0;
    content: "";
    background-color: #ff8c00;
    z-index: 0;
    transition: all 0.3s;
  }
  
  .famousList nav h2 {
    font-size: 42px;
    margin: 0.5em 0 0.2em;
  }
  .famousList nav p {
    font-size: 20px;
    color: #fff;
    line-height: 1.5;
    font-weight: 300;
  }
  .famousList aside {
    height: 550px;
    margin-bottom: 50px;
    z-index: 0;
  }
  
  .famousList date {
    position: absolute;
    right: 10px;
    bottom: 0px;
    color: #333;
  }
  
  .famousList a:hover nav:after {
    width: inherit;
  }
  
  /*學習中心*/
  .in-learning > div {
    padding: 0 80px;
    text-align: center;
  }
  .in-learning .zone-header {
    display: inline-block;
    text-align: left;
    margin-bottom: 30px;
  }
  
  /*****************************Index End*****************************************/
  
  /*****************************MainPage Start*****************************************/
  
  /*kv-img*/
  .learning-kv {
    background-image: url(images/kv/learning.jpg);
  }
  .writer-kv {
    background-image: url(images/kv/writer.jpg);
  }
  .news-kv {
    background-image: url(images/kv/news.jpg);
  }
  .service-kv {
    background-image: url(images/kv/service.jpg);
  }
  .about-kv {
    background-image: url(images/kv/about.jpg);
  }
  .links-kv {
    background-image: url(images/kv/links.jpg);
  }
  .solution-kv {
    background-image: url(images/kv/solution.jpg);
  }
  .privacy-kv {
    background-image: url(images/kv/privacy.jpg);
  }
  .contact-kv {
    background-image: url(images/kv/contact.jpg);
  }
  
  /*共用區*/
  .textZone {
  }
  .textZone > div {
    max-width: 900px;
  }
  .textZone > div p {
    font-weight: 400;
    margin-bottom: 1.5em;
  }
  .textZone > div .text-header {
    font-weight: 400;
    margin-bottom: 0.5em;
    text-align: center;
    letter-spacing: 0.5em;
  }
  
  /*分類*/
  .category {
    text-align: center; /*display:none;*/
    margin-bottom: 50px;
  }
  .category ul {
    border-bottom: 1px solid #ccc;
  }
  .category ul li {
    text-align: center;
    margin: 0 1.2em;
  }
  .category ul li a {
    color: #333;
    letter-spacing: 0.2em;
    line-height: 2.5;
    position: relative;
    text-align: center;
  }
  .category ul li a:after {
    content: "";
    display: block;
    background: #ff8c00;
    height: 4px;
    transition: all 0.7s;
    width: 0;
  }
  
  .category ul li.active a {
    color: #ff8c00;
  }
  .category ul li a:hover:after,
  .category ul li.active a:after {
    width: 100%;
  }
  
  .category2 {
  }
  .category2 ul {
    border-top: 1px solid #ccc;
    border-bottom: none;
    padding-top: 10px;
  }
  .category2 ul li {
    margin: 0;
  }
  .category2 ul li + li a {
    border-left: 1px solid #ccc;
  }
  .category2 ul li a {
    line-height: 1;
    padding: 0.5em 2em 0;
  }
  .category2 ul li a:after {
    margin-top: 0.5em;
    background: #43c9a8;
  }
  .category2 ul li.active a {
    color: #43c9a8;
  }
  
  /*news*/
  .newsZone {
  }
  
  .newsList {
  }
  .newsList li {
    margin-bottom: 1.4em;
    padding-bottom: 1.4em;
    text-align: left;
    border-bottom: 1px solid #ccc;
  }
  .newsList li a {
    display: block;
    color: #333;
    position: relative;
  }
  .newsList li p {
    letter-spacing: 0.2em;
    margin: 0.5em 50px 0 0;
    line-height: 1.5;
  }
  .newsList li span {
    border: 1px solid #333;
    padding: 0.1em 0.8em;
    margin-right: 1em;
    font-size: 13px;
  }
  
  .newsList li date {
    letter-spacing: 0.5em;
  }
  .newsList li a.arrowBtn:after {
    background-image: url(images/arrow-g.svg);
    top: auto;
    bottom: 2px;
  }
  
  .newsList li a:hover p {
    color: #ff9600;
  }
  .newsList li a:hover span {
    background-color: #ff9600;
    color: #fff;
    border-color: #ff9600;
  }
  
  /*週報List*/
  .newsPaperList {
  }
  .newsPaperList li {
    float: left;
    width: 50%;
    margin: 1% 0;
    border-bottom: none;
    padding: 2%;
  }
  .newsPaperList li aside {
    margin: 10px 0;
  }
  .newsPaperList li p {
    letter-spacing: 0em;
    text-align: center;
    margin: 0;
  }
  .newsPaperList li date {
    letter-spacing: 0em;
  }
  .newsPaperList li a.arrowBtn:after {
    display: none;
  }
  
  @media (min-width: 768px) {
    .newsPaperList li {
      float: left;
      width: 25%;
    }
    .newsPaperZone {
    }
    .newsPaperZone .news-article-img {
      float: left;
      width: 30%;
      margin: 0;
      padding: 30px 0;
    }
    .newsPaperZone .news-article-edit {
      float: right;
      width: 70%;
      margin: 0;
      padding: 30px 0 30px 50px;
    }
  }
  
  /*Bgg*/
  .Bgg {
    font-family: sans-serif;
    font-size: 15px;
    padding-right: 0;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 2px;
  }
  .Bgg li {
    display: inline-block;
    margin-bottom: 3px;
  }
  .Bgg li .nav-link {
    border: 1px solid #aaaaaa;
    border-radius: 3px;
    padding: 5px 10px;
  }
  .Bgg > li > a:hover,
  .Bgg > li > a:hover i,
  .Bgg a.active,
  .Bgg a.active i {
    background-color: #eee;
    color: #23527c;
  }
  
  /* end Bgg */
  
  /*news-content*/
  .newsHead {
    letter-spacing: 0.2em;
    font-size: 24px;
    font-weight: 500;
    margin: 0.5em 0 1em;
    border-bottom: 3px solid #0ec9a8;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
  }
  .newsTag {
    border: 1px solid #333;
    padding: 0em 0.5em;
    font-size: 13px;
    display: inline-block;
    text-align: center;
  }
  .newsTime {
    letter-spacing: 0.5em;
    border-left: 1px solid #333;
    padding-left: 1em;
    margin-left: 1em;
  }
  
  .newsSocialbox {
    margin: 0;
    display: flex;
    align-items: center;
  }
  
  .newsSocial {
    width: 90px;
    display: block;
    font-size: 0;
    margin-left: auto;
  }
  
  .social2 {
    margin-top: -20px;
    margin-bottom: 20px;
  }
  .socialAbout {
    margin-top: -40px;
    margin-bottom: 20px; 
   
  }
  
  .newsSocial a {
    font-size: 30px;
    display: inline-block;
    line-height: 1;
  }
  .newsSocial a:hover {
    opacity: 0.8;
  }
  
  .newsSocial .navFB {
    color: #4384dc;
  }
  .newsSocial .navLine {
    color: #6cb100;
  }
  .newsSocial .copy-share {
    width: 26px;
    height: 26px;
    line-height: 20px;
    border-radius: 5px;
    background: #999;
    color: #fff;
    text-align: center;
  }
  .newsSocial .copy-share i {
    font-size: 16px;
  }
  
  .news-article-img {
    margin: 2em;
    text-align: center;
  }
  .news-article-edit {
    margin: 2em;
  }
  
  .news-article-edit p {
    display: block;
    font-size: 17.5px;
    font-weight: 400;
    word-break: break-all;
    text-align: justify;
    font-family: poppins, "noto sans kannada", 微軟正黑體, sans-serif;
    color: rgb(104, 104, 104);
    margin: 0px 0px 1.75em;
  }
  
  .news-article-edit h2 {
    margin-bottom: 1em;
  }
  .news-article-edit h3 {
    margin-bottom: 1em;
  }
  
  .news-function {
    background-color: #f6f6f6;
    margin-bottom: -100px;
    padding: 20px 0;
  }
  
  /*learning*/
  .learningZone {
  }
  
  .learningList {
    margin-bottom: 30px;
  }
  .learningList li {
    width: 31%; /*margin:0 1% 2%;*/
  }
  .learningList li a {
    color: #333;
    display: block;
    position: relative;
    padding-bottom: 30px;
    text-align: left;
  }
  .learningList li .titleList {
    display: flex;
    align-items: center;
    padding: 0 20px;
  }
  .learningList li .titleList:last-child {
    margin-bottom: 10px;
  }
  .learningList li h4 {
    /*color:#0ec9a8;*/
    font-size: 18px; /*margin-bottom:-1.2em;height:3.5em;*/
    line-height: 1.5;
    z-index: 99;
    position: relative;
    font-weight: 400;
  }
  .learningList li date {
    /*float:right;*/
    font-weight: 500;
    font-size: 18px; /*padding-left: 15px;*/
  }
  .learningList li aside {
    height: 345px;
    background: no-repeat center center;
    background-size: cover;
    border: 20px solid #efefef;
  }
  
  .learningList li i {
    background: #ff9600;
    width: 70px;
    height: 70px;
    position: absolute;
    left: 20px;
    bottom: 0;
    z-index: 99;
  }
  .learningList li i:before {
    content: "";
    background: url(images/arrow.svg) no-repeat center center;
    background-size: contain;
    width: 30px;
    height: 30px;
    position: absolute;
    left: calc(50% - 15px);
    top: calc(50% - 15px);
    z-index: 99;
    filter: invert(100%);
  }
  .learningList li a:hover aside {
    opacity: 0.8;
  }
  .learningList li a:hover i {
    background-color: #0ec9a8;
    transform: translateX(50px);
  }
  
  .learnList-swiper .swiper-button-next,
  .learnList-swiper .swiper-button-prev {
    transform: translate(0%, -50%);
  }
  
  .learningList-other {
    margin-bottom: 0;
  }
  .learningList-other li {
    /*margin:0 .5% 0%;*/
    width: 32.2%;
  }
  .learningList-other li aside {
    border: 10px solid #efefef;
    padding-bottom: 65%;
    height: 0;
  }
  .learningList-other li h4 {
    font-size: 15px;
    margin: 1em 0.5em;
  }
  .learningList-other li a {
    padding-bottom: 0px;
  }
  .learningList-other li i {
    width: 50px;
    height: 50px;
    right: 0px;
    left: auto;
    bottom: 68px;
  }
  .learningList-other li a:hover i {
    transform: translateX(0px);
  }
  
  /*學習中心產品*/
  .prdContent {
    margin-bottom: 50px;
  }
  .prdImg {
    margin-bottom: 50px;
  }
  
  .prdTxt {
    text-align: left;
  }
  .prdTxt .prdName {
    font-size: 34px;
    font-weight: 600;
    margin-top: 0.5em;
  }
  
  .prdTxt .prdPurchase {
    margin: 1.5em 0;
  }
  .prdTxt .prdPurchase dt {
    width: 55%;
    font-size: 30px;
    border: 1px solid #333;
    border-right: none;
    border-left: none;
  }
  
  .prdTxt .prdInfo {
    margin-bottom: 1em;
  }
  .prdTxt .prdInfo dl {
    margin-bottom: 0.5em;
  }
  .prdTxt .prdInfo dt {
    width: 4em;
    padding-right: 1em;
    border-right: 1px solid #333;
  }
  .prdTxt .prdInfo dd {
    padding-left: 1.5em;
  }
  
  .prdTxt article p {
    margin-bottom: 2em;
  }
  
  /*名家專欄*/
  .famousList-group {
  }
  .famousList-group li {
    width: 31%;
    margin: 0 1% 50px;
    padding-left: 20px;
  }
  .famousList-group li aside {
    background: no-repeat center center;
    background-size: cover;
    position: relative;
    height: 400px;
    margin-bottom: 30px;
  }
  .famousList-group li nav {
    width: 210px;
    height: 210px;
    text-align: left;
  }
  .famousList-group li nav h2 {
    font-size: 30px;
  }
  .famousList-group li nav {
    font-size: 16px;
  }
  .famousList-group li nav hr {
    margin: 10px auto;
    border-color: #fff;
  }
  
  /*營業項目*/
  .serviceZone {
  }
  .serviceZone > div {
    max-width: 1400px;
    margin: auto;
  }
  .serviceList li {
    width: 31%;
    margin: 0 1% 50px;
  }
  .serviceList li a {
    display: block;
    margin-bottom: 20px;
  }
  .serviceList li a aside {
    padding-bottom: 100%;
    margin-bottom: 1em;
    border: 1px solid #eee;
  }
  
  .serviceList li nav {
    border-left: 8px solid #0ec9a8;
    padding-left: 30px; /*min-height:100px;*/
  }
  .serviceList li h4 {
    font-weight: 500;
    margin-bottom: 0.5em;
  }
  .serviceList li p {
    line-height: 1.5;
    color: #999;
    display: none;
  }
  
  /*解決方案*/
  .solutionZone {
    margin: auto;
    display: block;
    font-size: 0;
  }
  .solutionZone > div {
    max-width: none;
  }
  
  .solutionList {
    margin: auto;
  }
  .solutionList li {
    margin: 1% 0.5%;
    background: #fff;
    width: 23.6%;
    box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0.5px 2px 5px 0.5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0.5px 2px 5px 0.5px rgba(0, 0, 0, 0.5);
    box-shadow: 0.5px 2px 5px 0.5px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    display: inline-table;
    cursor: pointer;
  }
  .solutionList li:active,
  .solutionList li:focus {
    position: relative;
    top: 1px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  
  .solutionarticle {
    background: #69e0c3;
    padding-bottom: 50px;
  }
  .solutionList li dt {
    width: 80px;
    height: 80px; /*background: #69e0c3;*/
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #000; /*color:#fff;*/
    font-size: 50px;
    transition: all 0.7s;
    border-radius: 10px 0px 0px 10px;
  }
  .solutionList li dt img {
    max-width: 45px;
    max-height: 45px;
    filter: invert(1) brightness(2);
  }
  
  /*						
  .solutionList li dt i{filter: drop-shadow(0px 0px 4px rgba(0,0,0,.5));}
  */
  
  .solutionList li dd {
    padding: 0 0.5em;
    vertical-align: middle;
    display: table-cell;
    transition: all 0.7s;
    border-radius: 0px 10px 10px 0px;
  }
  .solutionList li dd > h4 {
    margin-bottom: 0em;
    font-weight: 500;
    font-size: 14.2px;
  }
  .solutionList li dd .solution-content {
    font-size: 13px;
    color: #999;
    display: none;
  }
  
  .solutionList li:hover dt,
  .solutionList li:hover dd {
    background: #f68b02;
  }
  /*.solutionList li:hover dd{background:#f68b02; opacity:0.5; }*/
  
  .qaList li input[type="checkbox"] {
    display: none;
  }
  
  .qaList li section {
    margin-bottom: 24px;
    -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5);
  }
  .qaList li label {
    font-size: 30px;
    font-weight: 500;
    padding: 10px 15px;
    border: 1px solid #ff9600;
    color: #ff9600;
    background-color: #fcfcfc;
    cursor: pointer;
    border-radius: 2px 2px 0 0;
  }
  .qaList li label dt {
    width: 50px;
    padding: 0 0 0 0.5em;
    line-height: 2;
    position: relative;
  }
  .qaList li label dd {
    position: relative;
  }
  .qaList li label dd i {
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0.6;
    position: absolute;
    /*right:16px;*/
    right: 0;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .qaList li label dd i:before {
    font-size: 30px;
  }
  input[type="checkbox"]:checked + label i::before {
    content: "\f106";
    transition: 0.5s;
  }
  
  /*.qaList li label dd:after{
      content:"\f078";
      width: 0;
      height: 0;
      /*border-style: solid;
      border-width: 12px 0 12px 16px;
      border-color: transparent transparent transparent #ff9500;*/
  /*position:absolute;
      right:16px;
      top:calc(50% - 12px);
  }
  
  /*
  .qaList li p{font-size:18px;margin-left:40px;margin-right:20px;}
  */
  
  .qaList {
  }
  .qaList li label {
    font-size: 20px;
  }
  .qaList li label dt {
    width: 50px;
  }
  .qaList li label dd {
    padding: 0.2em 0; /*padding-left:1em;*/
  }
  
  .qaList li ul {
    list-style: disc;
    margin-left: 1.5em;
  }
  .qaList li ol {
    margin-left: 1.5em;
  }
  .qaList li li {
    margin-bottom: 0.3em;
  }
  
  input[type="checkbox"]:checked ~ article {
    opacity: 1;
    min-height: 60px;
    display: block;
    transition: 0.5s;
  }
  .qaList li article {
    font-size: 15px;
    padding: 15px 60px;
    position: relative;
    background-color: #fcfcfc;
    border: 1px solid #ff9600;
    border-top: 0;
    border-radius: 0 0 2px 2px;
    display: none;
    transition: all 10s ease;
  }
  .qaList li article .qaicon {
    position: absolute;
    left: 0px;
    background: #fcfcfc;
    display: block;
    width: 30px;
    text-align: center;
    border-radius: 8px;
    font-weight: 900;
    color: #fff;
    margin-left: 20px;
  }
  
  .qaList li article h4 {
    margin-bottom: 0.5em;
  }
  .qaList li article p {
    margin-bottom: 0.5em;
    line-height: 2.2;
  }
  .qaList li article aside {
    text-align: center;
  }
  .qaList li article aside img {
    max-width: 800px;
    width: 100%;
    margin-bottom: 20px;
  }
  
  /*隱私權政策*/
  .termsZone {
  }
  
  .termsList {
    list-style: cjk-ideographic; /*list-style-position:inside;*/
    padding: 0 20px;
  }
  .termsList > li {
    margin-bottom: 2em;
    font-size: 15px;
    line-height: 1.7;
    color: #f68b02;
  }
  
  .termsList li h4 {
    font-size: 130%;
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
  }
  
  /*
  .termsList li article {font-weight:400;margin-bottom:1.5em;line-height:1.8;}
  */
  .termsList li > ol,
  .termsList li > article,
  .termsList li > p {
    color: #333;
  }
  .termsList li > ol {
    margin-left: 1.4em;
  }
  
  .termsList li li {
    margin-bottom: 1em;
  }
  .termsList li li ul {
    margin: 1em 0.7em 1em 1.2em;
    list-style: disc;
  }
  .termsList li li ul li {
    margin-bottom: 0.3em;
  }
  
  /*聯絡我們*/
  .contactZone {
    text-align: center;
    background-color: #e5f3ef;
    margin: -80px 0 -100px;
    padding: 80px 0 50px;
  }
  .contactZone h3 {
    margin-bottom: 1em;
  }
  .contactZone > div p {
    margin-bottom: 0;
  }
  
  .contactList {
    margin-bottom: 30px;
  }
  .contactList li {
    width: 48%;
    margin: 1%;
    float: left;
  }
  .contactList li:last-child {
    width: 98%;
  }
  .contactList li input,
  .contactList li select,
  .contactList li textarea {
    font-size: 18px;
    padding: 1.5em;
    background-color: #fff;
    border: 1px solid #ccc;
    font-weight: 400;
  }
  
  .contactList li textarea {
    height: 10em;
  }
  
  /*相關網站連結*/
  .linksZone > div {
    max-width: 1400px;
    margin: auto;
  }
  
  .links-group {
    margin-bottom: 50px;
    padding: 0 30px;
  }
  .links-group h4 {
    font-size: 25px;
    border-bottom: 4px solid #0ec9a8;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
  }
  
  .links-group ul li {
    float: left;
    width: 25%;
    margin-bottom: 0.5em;
    padding-left: 1em;
  }
  .links-group ul li a {
    color: #000;
    display: block;
  }
  
  .links-group ul li a {
    display: inline-block;
    position: relative;
    font: 700 16px/2.5 Arial;
    max-width: 100%;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #000;
    padding: 5px;
    padding-left: 25px;
    border: 1px solid #ff8c00;
    border-radius: 6px;
  }
  /*.links-group ul li a:before {
    content: "-";
    padding-right: 0.5em;
  }*/
  .links-group ul li a:hover {
    color: #ff8c00;
  }
  
  /*about*/
  .aboutZone {
  }
  .aboutZone .btnAll {
    text-align: right;
  }
  
  /*關於我們*/
  .introArea {
  }
  
  .introTop {
  }
  .introTop aside {
    width: 250px;
  }
  .introTop article {
    padding-left: 5em;
  }
  
  .introArea > h4 {
    margin: 2em 0 1em;
    display: table;
    text-align: center;
  }
  .introArea > h4 b {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
    padding: 0 0.5em;
    transform: translateY(-0.5em);
    font-size: 20px;
    font-weight: 500;
    color: #3bb395;
  }
  .introArea > h4:before,
  .introArea > h4:after {
    display: table-cell;
    vertical-align: middle;
    content: "";
    width: 50%;
    border-top: 1px solid #3bb395;
  }
  
  .introArea dfn {
    color: #ff8a00;
  }
  
  .introList li {
    width: 50%;
    padding: 1em 2em;
  }
  /*
  .introList li>div{height:180px;width:180px;margin:0 auto 20px;
                          background-color: #62cab0;
                          border-radius:100%;}
  */
  
  .introList li > div {
    display: block;
    text-align: left;
  }
  
  .introList li > div figure i {
    display: block;
    margin: 0 auto 0.3em;
    font-size: 30px;
  }
  .introList li > div figure {
    text-align: left;
    font-size: 18px;
    letter-spacing: 0.3em;
    color: #3bb395;
  }
  
  .introList li p {
    font-size: 13px;
    line-height: 1.5;
  }
  
  /*品牌故事*/
  .brandList {
  }
  .brandList dl + dl {
    border-top: 1px solid #eee;
  }
  .brandList dt {
    width: 200px;
    padding: 30px 15px;
  }
  .brandList dd {
    padding: 0 5em;
    vertical-align: middle;
  }
  .brandList dd p {
    line-height: 1.8;
  }
  
  .brand-logo {
  }
  
  /*團隊*/
  .teamList {
  }
  .teamList > li {
    width: 31%;
    margin: 0 1% 50px;
    text-align: center;
    position: relative;
    cursor: pointer;
  }
  .teamList > li aside {
    padding-bottom: 100%;
    border: 1px solid #eee;
  }
  .teamList > li .team-name {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    text-align: left;
    background: rgba(14, 201, 168, 0.8);
    z-index: 10;
    color: #fff;
    padding: 0.5em 1em;
    transition: all 0.7s;
  }
  .teamList > li .team-name h4 {
    margin-bottom: 0.2em;
    font-weight: 500;
  }
  
  .teamList > li .team-txt {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.7s;
    background: rgba(14, 201, 168, 0.9);
    text-align: left;
    left: 0;
    top: 0;
    color: #fff;
    padding: 20px;
    line-height: 1.5;
  }
  
  .teamList > li .team-txt ol {
    list-style: disc;
  }
  .teamList > li .team-txt ol li {
    margin-bottom: 0.5em;
  }
  .teamList > li:hover .team-name {
    opacity: 0;
  }
  .teamList > li:hover .team-txt {
    opacity: 1;
  }
  
  /*歷史沿革*/
  .historyList dl {
    margin-bottom: 40px;
  }
  .historyList dt {
    width: 120px;
    color: #ff8c00;
    font-size: 26px;
    border-right: 1px solid #a8a8a8;
    font-weight: 700;
    position: relative;
  }
  .historyList dt:before {
    font-size: 13px;
    content: "AD.";
  }
  .historyList dt:after {
    width: 12px;
    height: 12px;
    background: #0ec9a8;
    right: -6px;
    top: calc(50% - 6px);
    position: absolute;
    content: ""; /*border-radius:100%;*/
  }
  
  .historyList dd {
    padding-left: 50px;
  }
  .historyList dd ul li {
    margin: 0.5em 0;
  }
  .historyList dd ul li span {
    display: inline-block;
    vertical-align: top;
    width: 55px;
    font-weight: 600;
    background: #e5e5e5;
    text-align: center;
    border-radius: 10px;
    line-height: 1.8;
  }
  .historyList dd ul li span:after {
    content: "月";
    font-weight: 500;
    font-size: 12px;
  }
  .historyList dd ul li p {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 70px);
    margin-left: 3px;
    margin-bottom: 0;
    font-size: 14px;
  }
  
  /*榮譽事蹟*/
  .honorList {
  }
  .honorList li {
    width: 23%;
    margin: 1% 1%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }
  .honorList li aside {
    /*height:120px;*/
    padding: 10px;
  }
  .honorList li p {
    padding: 0 1em;
    font-size: 15px;
    margin-bottom: 0;
    height: 3em;
    line-height: 3;
    text-align: center;
    display: none;
  }
  .honorList li a {
  }
  .honorList li a button {
    line-height: 2;
    max-width: none;
    display: none;
  }
  
  /*mapList*/
  .mapList {
  }
  .mapList > li {
    margin-bottom: 30px;
    border: 1px solid #eee;
    box-shadow: 0 0 9px 0px rgba(0, 0, 0, 0.11);
  }
  
  .mapList li dt {
    width: 320px;
    padding: 0 20px;
    position: relative;
  }
  .mapList li dt li {
    font-weight: 500;
    margin-bottom: 0.2em;
    font-size: 13px;
  }
  .mapList li dt h3 {
    font-size: 15px;
    padding: 0 1em;
    font-weight: 400;
    color: #fff;
    position: absolute;
    line-height: 2.2;
    left: 20px;
    top: 15px;
    background: #0ec9a8;
  }
  
  .mapList li:first-child dt h3 {
    background: #ff8c00;
  }
  
  .mapList li dd .map {
    padding-bottom: 30%;
    position: relative;
  }
  .mapList li dd .map iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  
  .mapbtn {
    font-weight: 400;
    border-width: 2px;
    font-style: normal;
    letter-spacing: 1px;
    margin: 0.4rem 0;
    white-space: normal;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    padding: 1rem 3rem;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    word-break: break-word;
    background-color: #2099b6;
    color: #ffffff;
    border: 1px solid rgba(156, 39, 176);
  }
  .mapbtn:hover {
    color: #fff !important;
    background-color: #0d6786 !important;
    border-color: #0d6786 !important;
  }
  
  /*sitemapList*/
  .sitemapList {
    max-width: 1300px;
    margin: auto;
  }
  .sitemapList .about,
  .sitemapList .service,
  .sitemapList .solution,
  .sitemapList .learning,
  .sitemapList .news,
  .sitemapList .Terms,
  .sitemapList .Others,
  .sitemapList .Fanstalk {
    float: left;
    width: 25%;
    text-align: center;
    min-height: 250px;
  }
  .sitemapList h2 {
    color: #2099b6;
    margin-bottom: 5px;
  }
  
  /* cookiealert */
  .cookiealert {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    border-radius: 0;
    transform: translateY(100%);
    transition: all 500ms ease-out;
    color: #ecf0f1;
    background: #0ec9a8;
  }
  
  .alert {
    padding: 10px;
  }
  
  .cookiealert.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
    transition-delay: 1000ms;
  }
  
  .cookiealert a {
    text-decoration: underline;
  }
  
  .cookiealert .acceptcookies {
    margin-left: 10px;
    vertical-align: baseline;
  }
  
  /*end cookiealert */
  
  /*人才招募*/
  .resourceZone {
  }
  .resourceZone .container {
    max-width: 1000px;
  }
  .resourceList > div {
    margin-bottom: 10px;
  }
  .resourceList > div aside {
    height: 140px;
    background: #fff;
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
    position: relative;
    border-radius: 10px;
    border: 1px solid #eee;
  }
  .resourceList > div aside:after {
    background: #999;
    height: 8px;
    width: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    transition: all 0.5s;
  }
  
  .resourceList > div:hover aside:after {
    background: #0ec9a8;
    width: 100%;
  }
  
  .resourceList > div a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
    padding: 20px;
  }
  
  .resource-txt {
    margin-bottom: 2em;
  }
  /*---*/
  .green {
    color: #0ec9a8;
  }