@charset "utf-8";

/* CSS Document */
body {
  background-repeat: repeat;
  font-family: "Microsoft YaHei", sans-serif;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* 這是設定所有放大縮小的物件是使用移動方式變化 */
.tra {
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -ms-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;
}

/* wow進場後額外繼續輪播的動畫 */
.myAni {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.myAni.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.myAni.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.myAni.infinite.pulse {
  /*animation-delay: 2s;*/
  -webkit-animation-name: pulse !important;
  animation-name: pulse !important;
}

.wrapper {
  position: relative;
  overflow: hidden;
}

/*表頭表尾 請勿砍*/
.top,
.footer {
  line-height: 0px;
  width: 100%;
}

.top {
  z-index: 99;
  position: relative;
}

/*很多物件通用*/
.row {
  margin-left: 0;
  margin-right: 0;
}

.BRR {
  height: 1px;
}

.width1280 {
  max-width: 1280px;
  min-width: 280px;
  height: auto;
  margin: 0 auto;
}

.width1280_b {
  background-image: url(../images/bg02.png);
  max-width: 1280px;
  min-width: 280px;
  height: auto;
  margin: 0 auto;
}

.topICON {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.myButton {
  -moz-border-radius: 28px;
  -webkit-border-radius: 28px;
  border-radius: 28px;
  display: inline-block;
  cursor: pointer;
  font-family: Arial;
  font-size: 17px;
  padding: 9px 33px;
  text-decoration: none;
}

.myButton:hover {
  background-color: #5cbf2a;
}

.myButton:active {
  position: relative;
  top: 1px;
}



/*BANNER 進場delay時間、浮動*/

.banner {
  position: relative;
  overflow: hidden;
}

img.banner001,
img.banner002,
img.banner003,
img.banner004,
img.banner_bottom {
  position: absolute;
}

img.banner001 {
  -webkit-animation-delay: 1.2s;
  /* Chrome, Safari, Opera */
  animation-delay: 0.3s;
}

img.banner002 {
  -webkit-animation-delay: 1s;
  /* Chrome, Safari, Opera */
  animation-delay: 1s;
}

img.banner003 {
  -webkit-animation-delay: 1s;
  /* Chrome, Safari, Opera */
  animation-delay: 1s;
}

img.banner004 {
  -webkit-animation-delay: 1s;
  /* Chrome, Safari, Opera */
  animation-delay: 1s;
}


/*表單區*/
.fill {
  background-image: url(../images/b_bg.png);
  position: relative;
  z-index: 20;
  text-align: center;
}

.fill h2 {
  font-size: 38px;
  color: #FFF;
  text-align: center;
  /* line-height: 20px; */
  /* padding-bottom: 1px; */
  font-weight: bold;
  font-style: italic;
}

.fill h2 .a01 {
  font-size: 38px;
  color: #fff438;
  text-align: center;
  /* line-height: 2.2em; */
  padding-bottom: 10px;
  font-weight: bold;
  font-style: italic;
}

.fill h2 .a02 {
  font-size: 38px;
  color: #3384c3;
  text-align: center;
  line-height: 44px;
  padding-bottom: 10px;
  font-weight: bold;
  font-style: italic;
}

.fill h2 .gray {
  color: #7a7781;
  line-height: 39px;
  font-size: 27px;
}

.fill h2 .Bu {
  color: #0384c6;
  line-height: 42px;
  font-size: 40px;
}

.fill .share {
  display: block;
  width: 280px;
  margin: 0 auto;
}

.fill .share ul {}

.fill .share ul li {
  float: left;
  list-style: none;
  padding-left: 12px;
}

.fill #sBut {
  display: block;
  max-width: 527px;
  height: auto;
  min-width: 280px;
  margin: 9px auto;
  width: 100%;
}

.fill .go_button {
  -webkit-animation-duration: 2s;
  /* Chrome, Safari, Opera */
  animation-duration: 2s;
  max-width: 253px;
  /* height:auto; */
  min-width: 200px;
  margin: -18px auto;
  /* width:90%; */
}

.fill .statement {
  color: #606060;
  line-height: 40px;
}

.fill .statement a {
  color: #337ab7;
}

.fill .statement a:hover {
  color: #FFF;
}

.fill .form-control {
  margin-bottom: 5px
}

/* 翻牌效果 */
#f1_container {
  position: relative;
  height: 316px;
  z-index: 1;
  margin: 3px 1px;
  display: flex;
  flex-flow: row;
  justify-content: center;

}

#f1_container {
  perspective: 1000;
  -webkit-perspective: 1000;
  /* Safari 和 Chrome */
}

#f1_card {
  width: 316px;
  height: 316px;
  transform-style: preserve-3d;
  transition: all 0.5s linear;
}

#f1_container:hover #f1_card {
  transform: rotateY(-180deg);
}

.face {
  position: absolute;
  width: 316px;
  height: 316px;
  backface-visibility: hidden;
  margin-left: -14px;
}

.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 0px;
  color: #FFF;
  font-size: 14px;
  background-color: #696969;
}

.face.back p {
  font-size: 16px;
  line-height: 1.5em;
  /* padding-top:100px; */
  color: #FFF;
  align-content: center;
  padding: 74px;
}



/*電腦線上真人面對面 -標頭*/
.title001 {
  background-color: #e7c99b;
  overflow: auto;
  text-align: center;
  margin-top:
}

.title001 h2 {
  font-size: 35px;
  color: #776042;
  font-weight: bold;
  line-height: 1em;
}

.title001 .w01 {
  font-size: 25px;
  color: #FFF;
  font-weight: normal;
}

/*8大超夯課程任您選-標頭*/
.title002 {
  background-color: #74c7ce;
  overflow: auto;
  text-align: center;
  margin-top:
}

.title002 h2 {
  font-size: 35px;
  color: #FFF;
  font-weight: bold;
  line-height: 1.3em;
}

/*內文*/
.content1 {
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  margin-top: 20px;
}

.content1 h2 {
  font-size: 20px;
  color: #7f6f61;
  /* font-weight:bold; */
  line-height: 1.3em;
  text-align: center;
  padding: 3% 8%;
}

.content1 p {
  font-size: 18px;
  color: #656565;
  text-align: center;
  margin: 14px 20px;
  padding-bottom: 35px;
}

.content2 {
  background-image: url(../images/bg03.png);
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  margin-top: 20px;
  /* align-content: center; */
}

.content2 h2 {
  font-size: 38px;
  color: #4e97bf;
  font-weight: bold;
  line-height: 1.3em;
  text-align: center;
  padding-top: 100px;
}

.content2 p {
  font-size: 22px;
  color: #656565;
}

.content3 {
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  margin-top: 20px;
}

.content3 h2 {
  font-size: 28px;
  color: #4c768b;
  font-weight: bold;
  line-height: 1.3em;
  text-align: center;
}

.content3 p {
  font-size: 18px;
  color: #656565;
  text-align: center;
  margin: 7px 20px;
}

.content3 h3 {
  font-size: 34px;
  color: #666464;
  font-weight: bold;
  line-height: 1.3em;
  text-align: center;
  margin: 22px 0;
}

/*PIC通用*/
img.pic {
  max-width: 295px;
  min-width: 200px;
  margin: auto;
  display: block;
  width: 95%;
  height: auto;
  margin-top: 30px;
}

img.pic2 {
  max-width: 474px;
  min-width: 303px;
  /* margin: 89px auto; */
  display: block;
  width: 124%;
  height: auto;
  margin-left: 193px;
  margin-top: 107px;
}

img.pic3 {
  max-width: 617px;
  /* min-width: 300px; */
  margin: auto;
  display: block;
  /* width:95%; */
  height: auto;
}

img.girl {
  max-width: 818px;
  min-width: 303px;
  margin: 47px auto;
  display: block;
  width: 162%;
  height: auto;
  margin-left: 149px;
}

img.bn {
  max-width: 331px;
  min-width: 250px;
  margin: 51px 114px;
  display: block;
  /* width:95%; */
  /* height:auto; */
  /* text-align: center; */
  /* align-content: flex-start; */
}


/*	↓↓↓↓	螢幕尺寸大於960時頁面顯示效果↓↓↓↓	 */
@media (min-width: 960px) {

  /*BANNER*/
  /*表單區*/
  .fill h2 .important {
    font-size: 35px;
  }

  img.banner_big {
    width: 100%;
    height: auto;
    display: block;
  }

  img.banner_min {
    display: none;
  }

  img.banner001 {
    display: block;
    top: 13%;
    left: 18%;
    z-index: 5;
    max-width: 731px;
    height: auto;
    width: 32vw;
  }

  img.banner002 {
    display: block;
    top: 54%;
    left: 30%;
    z-index: 5;
    max-width: 731px;
    height: auto;
    width: 23vw;
  }

  img.banner003 {
    display: block;
    top: 73%;
    left: 18%;
    z-index: 5;
    max-width: 731px;
    height: auto;
    width: 35vw;
  }

  img.banner004 {
    display: none;
  }



}

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 300 < x <1023 時,顯示效果 ↓↓↓↓  */
@media (min-width: 300px) and (max-width:960px) {
  .BRR {
    display: block;
  }

  /*BANNER*/
  img.banner_big {
    display: none;
  }

  img.banner_min {
    width: 100%;
    max-width: 960px;
    min-width: 280px;
    height: auto;
    display: block;
  }

  img.banner001 {
    display: none;
  }

  img.banner002 {
    display: none;
  }

  img.banner003 {
    display: none;
  }

  img.banner004 {
    display: block;
    top: 10%;
    left: 2.5%;
    z-index: 5;
    max-width: 506px;
    height: auto;
    width: 54vw;
  }

  .fill h2 {
    font-size: 36px;
    margin: -7px 30px;
  }

  .fill h2 .important {
    font-size: 28px;
  }

  .fill h2 .gray {
    color: #7a7781;
    line-height: 39px;
    font-size: 27px;
  }

  .fill h2 .Bu {
    color: #0384c6;
    line-height: 45px;
    font-size: 38px;
  }

  .content1 h2 {
    font-size: 26px;
    color: #7f6f61;
    /* font-weight:bold; */
    line-height: 1.3em;
    text-align: center;
  }

  .content1 p {
    font-size: 22px;
    color: #656565;
    text-align: center;
    margin: 15px 10px;
    padding-bottom: 35px;
  }

  .content2 h2 {
    font-size: 34px;
    color: #4e97bf;
    font-weight: bold;
    line-height: 1.3em;
    text-align: center;
    padding-top: 30px;
  }

  .content2 p {
    font-size: 22px;
    color: #656565;
  }

  .content3 h2 {
    font-size: 35px;
    color: #4c768b;
    font-weight: bold;
    line-height: 1.3em;
    text-align: center;
  }

  .content3 p {
    font-size: 18px;
    color: #656565;
    text-align: center;
    margin: 7px 20px;
  }

  .content3 h3 {
    font-size: 28px;
    color: #666464;
    font-weight: bold;
    line-height: 1.3em;
    text-align: center;
    margin: 38px 10px;
  }

  .content3 p {
    font-size: 22px;
    color: #656565;
    text-align: center;
    margin: 15px 10px;
  }


  img.pic {
    max-width: 411px;
    min-width: 210px;
    margin: auto;
    display: block;
    width: 84%;
    height: auto;
    margin-top: 30px;
  }

  img.pic2 {
    max-width: 408px;
    min-width: 314px;
    margin: 36px auto;
    display: block;
    width: 87%;
    height: auto;
  }

  img.pic3 {
    max-width: 617px;
    /* min-width: 300px; */
    /* margin: auto; */
    display: block;
    width: 95%;
    height: auto;
    margin-top: 10px;
  }

  img.girl {
    max-width: 846px;
    min-width: 303px;
    margin: 37px auto;
    display: block;
    width: 78%;
    height: auto;
  }

  img.bn {
    max-width: 331px;
    min-width: 250px;
    margin: 51px 114px;
    display: block;
    /* width:95%; */
    /* height:auto; */
    /* text-align: center; */
    /* align-content: flex-start; */
  }

  /* 翻牌效果 */
  #f1_container {
    position: relative;
    /* width: 314px; */
    height: 316px;
    z-index: 1;
    margin: 3px 1px;
    align-content: center;
  }

  .face {
    position: absolute;
    width: 316px;
    height: 316px;
    backface-visibility: hidden;
    margin-left: 0px;
  }
}

/*========================================================*/
@media only screen and (max-width: 1280px) {}

/*↓↓↓↓ *螢幕尺寸【大於於】768時頁面顯示效果	↓↓↓↓ */
@media (max-width: 768px) {}

/*↓↓↓↓ 	螢幕尺寸【大於】481時頁面顯示效果	↓↓↓↓ */
@media (min-width: 481px) {}


/*↓↓↓↓ 	螢幕尺寸【小於】480時頁面顯示效果	↓↓↓↓ */
@media (max-width: 480px) {}

/*↓↓↓↓ 螢幕尺寸【大於】1024時頁面顯示效果	↓↓↓↓ */
@media (min-width:1024px) {}

/*	↓↓↓↓ 螢幕尺寸【小於】1024時頁面顯示效果	↓↓↓↓ */
@media (max-width: 1023px) {}

@media only screen and (max-width: 1280px) {}