@charset "UTF-8";
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, h5, h6, span, p, a, input, button {
  font-family: "Microsoft JhengHei","Heiti TC","sans-serif";
  text-decoration: none; }

img {
  display: block; }

html, body {
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch; }

ul > li {
  list-style: none; }

@font-face {
  font-family: "name";
  src: url("../font/file.TTF"); }
/* 
@include transition(all 0.4s);
@media screen and (min-width:750px) and (max-width: 1000px) {}
@media screen and (max-width:1000px) {}


@media screen and (max-width:1610px) {	
}
@media screen and (max-width:639px) {
}
@media screen and (max-width:415px) {
}
 */
/*藏字*/
/*中心點*/
.banner {
  width: 100%;
  height: auto; }
  .banner > img {
    width: 100%;
    height: auto; }
  @media screen and (max-width: 709px) {
    .banner {
      display: none; } }

article {
  width: 1610px;
  height: auto;
  overflow: hidden;
  margin: 60px auto 0 auto; }
  @media screen and (max-width: 1610px) {
    article {
      width: 95%;
      margin: 20px auto 0 auto; } }

/*
*--點擊改變狀態
*  課程介紹
*  .focus
*  .focusdes
*
*  師資培訓
*  .focus2
*  .focusdes2
*
*
*
*/
.left-Box {
  width: 279px;
  height: 1011px;
  float: left;
  border-right: 1px solid #888888;
  padding-top: 66px; }
  @media screen and (max-width: 1610px) {
    .left-Box {
      width: 20%; } }
  @media screen and (max-width: 639px) {
    .left-Box {
      width: 90%;
      height: auto;
      overflow: hidden;
      margin: 0 auto;
      padding-top: 0px;
      float: none;
      border-right: 0px solid #888888;
      border-bottom: 1px solid #888888; } }
  .left-Box .big_title {
    width: 279px;
    height: auto;
    overflow: hidden;
    margin-bottom: 25px; }
    @media screen and (max-width: 1610px) {
      .left-Box .big_title {
        width: 80%; } }
    @media screen and (max-width: 639px) {
      .left-Box .big_title {
        width: 33.33333%;
        height: auto;
        padding-top: 0px;
        float: left;
        margin-bottom: 0px;
        padding-bottom: 20px; } }
    .left-Box .big_title > h2 {
      display: block;
      width: 279px;
      height: 31px;
      font-weight: 400;
      padding-left: 45px; }
      .left-Box .big_title > h2 > a {
        display: block;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        font-size: 24px;
        line-height: 31px;
        color: #6c6c6c; }
      @media screen and (max-width: 1610px) {
        .left-Box .big_title > h2 {
          width: 100%;
          height: auto;
          padding-left: 0px;
          text-align: center; }
          .left-Box .big_title > h2 > a {
            display: block;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            font-size: 18px;
            line-height: 0px;
            color: #6c6c6c;
            padding: 10px 0; } }
      @media screen and (max-width: 321px) {
        .left-Box .big_title > h2 > a {
          font-size: 16px; } }
      .left-Box .big_title > h2.focus {
        background-image: url("../images/course/totleicon.png");
        background-repeat: no-repeat;
        background-position: 10px 0; }
        .left-Box .big_title > h2.focus > a {
          color: #7350b4; }
        @media screen and (max-width: 1610px) {
          .left-Box .big_title > h2.focus {
            background-size: auto 100%;
            background-position: 20% 0; } }
        @media screen and (max-width: 1200px) {
          .left-Box .big_title > h2.focus {
            background-size: auto 100%;
            background-position: 10% 0; } }
        @media screen and (max-width: 910px) {
          .left-Box .big_title > h2.focus {
            background-size: auto 100%;
            background-position: 0 0; } }
        @media screen and (max-width: 640px) {
          .left-Box .big_title > h2.focus {
            background-image: none; } }
      .left-Box .big_title > h2.focus2 {
        background-image: url("../images/teacher/iconBles.jpg");
        background-repeat: no-repeat;
        background-position: 10px 0; }
        .left-Box .big_title > h2.focus2 > a {
          color: #009ee7; }
        @media screen and (max-width: 1610px) {
          .left-Box .big_title > h2.focus2 {
            background-size: auto 100%;
            background-position: 20% 0; } }
        @media screen and (max-width: 1200px) {
          .left-Box .big_title > h2.focus2 {
            background-size: auto 100%;
            background-position: 10% 0; } }
        @media screen and (max-width: 910px) {
          .left-Box .big_title > h2.focus2 {
            background-size: auto 100%;
            background-position: 0 0; } }
        @media screen and (max-width: 640px) {
          .left-Box .big_title > h2.focus2 {
            background-image: none; } }
    .left-Box .big_title > ul > li {
      position: relative;
      display: block;
      width: 250px;
      height: auto;
      float: right;
      margin-top: 19px; }
      @media screen and (max-width: 1610px) {
        .left-Box .big_title > ul > li {
          width: 100%; } }
      .left-Box .big_title > ul > li.focusdes > a {
        color: #7350b4; }
      .left-Box .big_title > ul > li.focusdes > span {
        background-color: #7350b4;
        display: block;
        width: 10px;
        height: 10px;
        margin-top: -5px; }
        @media screen and (max-width: 1610px) {
          .left-Box .big_title > ul > li.focusdes > span {
            margin-left: 12%; } }
        @media screen and (max-width: 1200px) {
          .left-Box .big_title > ul > li.focusdes > span {
            margin-left: 7%; } }
        @media screen and (max-width: 910px) {
          .left-Box .big_title > ul > li.focusdes > span {
            margin-left: 2%; } }
        @media screen and (max-width: 640px) {
          .left-Box .big_title > ul > li.focusdes > span {
            display: none; } }
      .left-Box .big_title > ul > li.focusdes2 > a {
        color: #009ee7; }
      .left-Box .big_title > ul > li.focusdes2 > span {
        background-color: #009ee7;
        display: block;
        width: 10px;
        height: 10px;
        margin-top: -5px; }
        @media screen and (max-width: 1610px) {
          .left-Box .big_title > ul > li.focusdes2 > span {
            margin-left: 12%; } }
        @media screen and (max-width: 1200px) {
          .left-Box .big_title > ul > li.focusdes2 > span {
            margin-left: 7%; } }
        @media screen and (max-width: 910px) {
          .left-Box .big_title > ul > li.focusdes2 > span {
            margin-left: 2%; } }
        @media screen and (max-width: 640px) {
          .left-Box .big_title > ul > li.focusdes2 > span {
            display: none; } }
      .left-Box .big_title > ul > li:hover > a {
        color: #888; }
      .left-Box .big_title > ul > li:hover > span {
        background-color: #888888; }
      .left-Box .big_title > ul > li > a {
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        display: block;
        width: 100%;
        height: 100%;
        font-size: 18px;
        padding-left: 45px;
        color: #666666; }
        @media screen and (max-width: 1610px) {
          .left-Box .big_title > ul > li > a {
            text-align: center;
            padding-left: 0px; } }
        @media screen and (max-width: 769px) {
          .left-Box .big_title > ul > li > a {
            padding-left: 25px; } }
        @media screen and (max-width: 639px) {
          .left-Box .big_title > ul > li > a {
            padding-left: 0px;
            text-align: center;
            font-size: 14px; } }
      .left-Box .big_title > ul > li > span {
        position: absolute;
        top: 50%;
        margin-top: -2.5px;
        left: 12%;
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        display: block;
        width: 5px;
        height: 5px;
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        background-color: #666666;
        float: left; }
        @media screen and (max-width: 1610px) {
          .left-Box .big_title > ul > li > span {
            display: none; } }

.right-Box {
  width: 1272px;
  height: auto;
  overflow: hidden;
  float: right; }
  @media screen and (max-width: 1610px) {
    .right-Box {
      width: 70%; } }
  @media screen and (max-width: 639px) {
    .right-Box {
      width: 90%;
      height: auto;
      overflow: hidden;
      float: none;
      margin: 50px auto 0 auto; } }
  .right-Box > h1 {
    display: block;
    width: 100%;
    height: 56px;
    background-color: #7350b4;
    color: #fff;
    letter-spacing: 3px;
    font-size: 40px;
    padding-left: 77px;
    background-image: url("../images/course/bannerIcon.png");
    background-repeat: no-repeat;
    background-position: 29px 50%;
    margin-bottom: 20px; }
    .right-Box > h1.bluebg {
      background-color: #009ee7; }
    @media screen and (max-width: 1160px) {
      .right-Box > h1 {
        font-size: 20px;
        line-height: 56px;
        overflow: hidden; } }
    @media screen and (max-width: 418px) {
      .right-Box > h1 {
        font-size: 20px; } }
    @media screen and (max-width: 321px) {
      .right-Box > h1 {
        background-image: none;
        padding-left: 10px; } }
  .right-Box > .tltle2 {
    width: 100%;
    height: 32px;
    background-image: url("../images/course/texticon.png");
    background-repeat: no-repeat;
    margin-top: 87px;
    background-position: 5px 50%; }
    .right-Box > .tltle2 > h3 {
      font-size: 36px;
      color: #666666;
      padding-left: 40px;
      line-height: 30px;
      float: left; }
    .right-Box > .tltle2 > span {
      display: block;
      width: 75%;
      height: 24px;
      float: right;
      background-color: #7350b4;
      margin-top: 5px; }
    @media screen and (max-width: 1610px) {
      .right-Box > .tltle2 > h3 {
        font-size: 30px; }
      .right-Box > .tltle2 > span {
        width: 65%; } }
    @media screen and (max-width: 1090px) {
      .right-Box > .tltle2 > span {
        width: 55%; } }
    @media screen and (max-width: 572px) {
      .right-Box > .tltle2 > h3 {
        font-size: 28px; }
      .right-Box > .tltle2 > span {
        width: 40%; }
        .right-Box > .tltle2 > span.displaySpan {
          width: 20%; } }

a.gotoTop {
  display: block;
  width: 50px;
  height: 83px;
  background-image: url("../images/gototop.png");
  margin: 200px auto 150px auto; }
  @media screen and (max-width: 415px) {
    a.gotoTop {
      margin: 50px auto 50px auto; } }

ul.t_list_box {
  padding-top: 134px; }
  @media screen and (max-width: 1610px) {
    ul.t_list_box {
      padding-top: 50px; } }
  ul.t_list_box > li {
    position: relative;
    display: block;
    width: 100%;
    height: 251px;
    -moz-border-radius-topleft: 150px;
    -webkit-border-top-left-radius: 150px;
    border-top-left-radius: 150px;
    -moz-border-radius-bottomleft: 150px;
    -webkit-border-bottom-left-radius: 150px;
    border-bottom-left-radius: 150px;
    background-color: #e6e6e6;
    border: 2px solid #009ee7;
    border-left: 0;
    margin-bottom: 70px; }
    @media screen and (max-width: 1610px) {
      ul.t_list_box > li {
        -moz-border-radius-topleft: 0px;
        -webkit-border-top-left-radius: 0px;
        border-top-left-radius: 0px;
        -moz-border-radius-bottomleft: 0px;
        -webkit-border-bottom-left-radius: 0px;
        border-bottom-left-radius: 0px;
        border-left: 2px solid #009ee7;
        height: auto;
        overflow: hidden; } }
    ul.t_list_box > li .t_img {
      width: 251px;
      height: 251px;
      float: left; }
      @media screen and (max-width: 1610px) {
        ul.t_list_box > li .t_img {
          float: none;
          margin: 30px auto 0 auto; } }
    ul.t_list_box > li .t_text {
      width: 59%;
      height: 251px;
      float: left;
      padding-left: 30px;
      padding-top: 5px; }
      ul.t_list_box > li .t_text h2, ul.t_list_box > li .t_text h4 {
        color: #323232; }
      ul.t_list_box > li .t_text > h2 {
        font-size: 30px;
        padding-top: 15px; }
      ul.t_list_box > li .t_text > h4 {
        font-size: 24px;
        padding-top: 5px;
        font-weight: 400; }
      @media screen and (max-width: 1610px) {
        ul.t_list_box > li .t_text {
          width: 80%;
          height: auto;
          overflow: hidden;
          padding-bottom: 100px;
          float: none;
          margin: 0 auto; }
          ul.t_list_box > li .t_text > h2 {
            font-size: 24px;
            padding-top: 15px; }
          ul.t_list_box > li .t_text > h4 {
            font-size: 20px;
            padding-top: 5px;
            font-weight: 400; } }
      @media screen and (max-width: 769px) {
        ul.t_list_box > li .t_text > h2 {
          font-size: 20px; }
        ul.t_list_box > li .t_text > h4 {
          font-size: 16px; } }
    ul.t_list_box > li a.gotoBtn {
      position: absolute;
      right: 0;
      bottom: 0;
      display: block;
      width: 137px;
      height: 43px;
      background-image: url("../images/teacher/goBtn.jpg"); }

ul.m_list_box {
  padding-top: 135px; }
  @media screen and (max-width: 1610px) {
    ul.m_list_box {
      padding-top: 50px; } }
  ul.m_list_box > li {
    display: block;
    width: 402px;
    height: 402px;
    float: left; }
    @media screen and (max-width: 1610px) {
      ul.m_list_box > li {
        margin-right: 20px;
        margin-bottom: 30px;
        width: 30%;
        height: auto; }
        ul.m_list_box > li:last-child {
          margin-right: 0px; } }
    @media screen and (max-width: 980px) {
      ul.m_list_box > li {
        margin-right: 0px;
        margin-bottom: 40px;
        width: 100%;
        height: auto; } }
    ul.m_list_box > li > a {
      -moz-transition: all 0.4s;
      -o-transition: all 0.4s;
      -webkit-transition: all 0.4s;
      transition: all 0.4s;
      display: block;
      width: 100%;
      height: 100%;
      border: 1px solid #b8b8b8;
      -moz-border-radius: 25px;
      -webkit-border-radius: 25px;
      border-radius: 25px; }
      ul.m_list_box > li > a > div {
        width: 401px;
        height: 295px;
        -moz-border-radius-topleft: 25px;
        -webkit-border-top-left-radius: 25px;
        border-top-left-radius: 25px;
        -moz-border-radius-topright: 25px;
        -webkit-border-top-right-radius: 25px;
        border-top-right-radius: 25px; }
        @media screen and (max-width: 1610px) {
          ul.m_list_box > li > a > div {
            width: 100%;
            height: 100%; } }
        ul.m_list_box > li > a > div > img {
          width: 100%;
          height: auto;
          -moz-border-radius-topleft: 25px;
          -webkit-border-top-left-radius: 25px;
          border-top-left-radius: 25px;
          -moz-border-radius-topright: 25px;
          -webkit-border-top-right-radius: 25px;
          border-top-right-radius: 25px; }
      ul.m_list_box > li > a > h2 {
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        display: block;
        color: #666;
        width: 374px;
        height: 51px;
        margin: 0 auto;
        border-bottom: 1px solid #b8b8b8;
        text-align: center;
        line-height: 51px; }
        @media screen and (max-width: 1610px) {
          ul.m_list_box > li > a > h2 {
            width: 90%;
            height: auto;
            font-size: 14px;
            line-height: 0px;
            padding: 20px 0; } }
        @media screen and (max-width: 980px) {
          ul.m_list_box > li > a > h2 {
            width: 90%;
            height: auto;
            font-size: 20px;
            line-height: 0px;
            padding: 40px 0; } }
        @media screen and (max-width: 321px) {
          ul.m_list_box > li > a > h2 {
            width: 90%;
            height: auto;
            font-size: 14px;
            line-height: 0px;
            padding: 20px 0; } }
      ul.m_list_box > li > a > h3 {
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        display: block;
        width: 137px;
        height: 44px;
        margin: 10px auto 0 auto;
        background-color: #b8b8b8;
        color: #fff;
        line-height: 44px;
        text-align: center; }
      ul.m_list_box > li > a:hover {
        border: 1px solid #1aa8e9; }
        ul.m_list_box > li > a:hover > h2 {
          border-bottom: 1px solid #1aa8e9; }
        ul.m_list_box > li > a:hover > h3 {
          background-color: #1aa8e9; }
    ul.m_list_box > li.B {
      margin: 0 30px; }
      @media screen and (max-width: 1610px) {
        ul.m_list_box > li.B {
          margin-left: 0;
          margin-right: 20px;
          margin-bottom: 30px; } }

ul.testList > li {
  display: block;
  width: 100%;
  height: 220px;
  border-bottom: 2px solid #009ee7; }
  @media screen and (max-width: 1610px) {
    ul.testList > li {
      height: auto;
      overflow: hidden;
      padding-bottom: 30px; } }
  ul.testList > li > p {
    color: #808080;
    font-size: 20px;
    padding-top: 10px; }
    @media screen and (max-width: 415px) {
      ul.testList > li > p {
        font-size: 16px;
        padding-top: 30px; } }
  ul.testList > li > h1 {
    font-size: 30px;
    color: #333;
    font-weight: 400;
    padding-top: 10px;
    text-decoration: underline; }
    @media screen and (max-width: 415px) {
      ul.testList > li > h1 {
        font-size: 20px; } }
  ul.testList > li > h2 {
    font-size: 20px;
    color: #6A6A6A;
    font-weight: 400;
    padding-top: 10px;
    line-height: 1.6em;
    padding-right: 150px; }
    @media screen and (max-width: 1610px) {
      ul.testList > li > h2 {
        padding-right: 0px; } }
    @media screen and (max-width: 415px) {
      ul.testList > li > h2 {
        font-size: 16px; } }
    ul.testList > li > h2 > a {
      color: #009ee7; }
      ul.testList > li > h2 > a:hover {
        color: #006B9C; }
  ul.testList > li:last-child {
    border-bottom: 0; }

.c_text {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden; }
  .c_text h1 {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 50px;
    border-bottom: 1px solid #009ee7;
    font-size: 52px;
    font-weight: 400;
    color: #333333; }
    @media screen and (max-width: 640px) {
      .c_text h1 {
        font-size: 30px;
        padding: 10px 70px 10px 0px; } }
  .c_text > p, .c_text > h2 {
    font-size: 20px;
    font-weight: 400; }
    @media screen and (max-width: 640px) {
      .c_text > p, .c_text > h2 {
        font-size: 16px; } }
  .c_text > p {
    padding-top: 10px;
    color: #808080;
    letter-spacing: 2px;
    margin-bottom: 30px; }
  .c_text > h2 {
    color: #666666;
    line-height: 2em; }
  .c_text a.textClose {
    position: absolute;
    right: 0;
    top: 28%;
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("../images/Calendar/btnclose_03.jpg"); }
    @media screen and (max-width: 1610px) {
      .c_text a.textClose {
        top: 0%; } }