@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
body {
  margin: 0px;
  padding: 0px;
  font-family: 'Noto Sans TC', '微軟正黑體', sans-serif !important;
overflow-x: hidden1;
}
.colorO {
  color: #ff7800!important
}
.colorb {
  color: #109ef8
}
.btnin {
  background-color: #e12668;
  color: #FFFFFF;
  padding: 0.5% 4%;
  margin: 0 10px;
  border-radius: 5px;
  cursor: pointer
}
.footericon{max-width:223px;min-width: 150px;position: absolute;right: 0px;margin-top: -130px;z-index: 1;width: 40%}
.btnin:hover {
  background-color: #fb5e96;
}
.btnin2 {
  background-color: #e12668;
  color: #FFFFFF;
  padding: 2% 8%;
  margin: 0 10px;
  border-radius: 20px;
  cursor: pointer
}
.btnin2:hover {
  background-color: #fb5e96;
}
.btnin3 {
  background-color: #47abe2;
  color: #FFFFFF;
  padding-top:10px;
   height: 40px;
    vertical-align: middle;
  width:calc(50% - 10px);
    float: left;
    text-align: center;
  margin: 20px 10px 10px 0px;
  border-radius: 5px;
  cursor: pointer
}
.btnin3:hover {
  background-color: #3180ab;
}
.btnin4 {
  background-color: #10a6d1;
  color: #FFFFFF;
width: 180px;
  padding: 5px 50px 10px 20px;
  margin: 10px 10px 10px 0px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2rem;
  display: table;
  font-weight: 400
}
.btnin4:hover {
  background-color: #1c8aaa;
}
.btnin5 {
  background-color: #999999;
  color: #FFFFFF;
  padding: 10px 20px;
  margin: 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2rem;
  display: table;
  font-weight: 400;
  float: left
}
.btnin5:hover {
  background-color: #666666;
}
.btnin6 {
  background-color: #8038b6;
  color: #FFFFFF;
  padding: 10px 40px;
  margin: auto;
  border-radius: 20px;
  cursor: pointer;
  font-size: 1.2rem;
  display: table;
  font-weight: 400;
  float: left
}
.btnin6:hover {
  background-color: #581c85;
}
.btnin7 {
  background-color: #42ade3;
  color: #FFFFFF;
  padding: 5px 20px !important;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 400;
  text-align: center;
  float: left
}
.btnin7:hover {
  background-color: #1985bb;
}
.btnin8 {
  background-color: #9b4cd2;
  color: #FFFFFF;
  padding: 5px 20px !important;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 400;
  text-align: center;
  float: left
}
.btnin8:hover {
  background-color: #8436ba;
}

.btnin9:hover {
  background-color: #1985bb;
}
@media (min-width:1001px) {
.btnin9 {
  background-color: #42ade3;
  color: #FFFFFF;
  padding: 5px 20px !important;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 400;
  position: absolute;
  width: 150px;
  bottom: 30px;
  left: 50%;
  margin: 30px auto auto -80px;
}
.logoPC {
    width: 400px;left:10px;top:15px;position: absolute;cursor: pointer;

}
.winbar2{width: 80%;height: 50px;font-size: 1.5rem;color: #FFFFFF;background-color: #43baff;vertical-align: middle;border-radius: 30px;padding-top: 10px;padding-left: 20%;position: relative}
.winbar2 img{position: absolute; width: 50%;max-width: 90px;margin:-1% auto auto -10%}
.winbar2in{width: 80%;height: 50px;font-size: 1rem;vertical-align: middle;padding-top: 20px;padding-left: 20%;color: #073e98;position: relative}
.winbar2in h1{font-size: 1.5rem;font-weight: 400;margin: 0;padding: 0;border-bottom: 5px solid #073e98;display: table}
.winbar2in h2{font-size: 1.1rem;font-weight: 400;margin:10px auto auto auto;padding: 0}
.winbar2in h3{font-size: 1.1rem;margin:10px auto auto auto;padding: 0}
.winbar2in h3 div{width: 31%;margin: 0 2% 0 0%;float: left;font-weight: 400!important;color: #0054fe!important}

.btnin11 {
margin: 20px 10px 0 10px;
  background-color: #47abe2;
  padding:10px;
    vertical-align: middle;
    text-align: center;
  border-radius: 5px;
  cursor: pointer;
}
.btnin11:hover {
  background-color: #3180ab;
}
}




@media (max-width:1000px) {
.btnin11 {
margin: 20px 10px 0 10px;
  background-color: #47abe2;
  color: #FFFFFF;
  padding:10px;
    vertical-align: middle;
    text-align: center;
  border-radius: 5px;
  cursor: pointer;
    display: block;
}
.btnin11:hover {
  background-color: #3180ab;
}

.winbar2{width: 85%;height: 50px;font-size: 1.5rem;color: #FFFFFF;background-color: #43baff;vertical-align: middle;border-radius: 30px;padding-top: 10px;padding-left: 15%;position: relative}
.winbar2 img{position: absolute; width: 50px;margin:-1% auto auto -15%}
.winbar2in{width: 80%;height: 50px;font-size: 1rem;vertical-align: middle;padding-top: 20px;padding-left: 20%;color: #073e98;position: relative}
.winbar2in h1{font-size: 1.5rem;font-weight: 400;margin: 0;padding: 0;border-bottom: 5px solid #073e98;display: table}
.winbar2in h2{font-size: 1.1rem;font-weight: 400;margin:10px auto auto auto;padding: 0}
.winbar2in h3{font-size: 1.1rem;margin:10px auto auto auto;padding: 0}
.winbar2in h3 div{width: 48%;margin: 0 2% 0 0%;float: left;font-weight: 400!important;color: #0054fe!important}


.logoMP {
   margin:10px 50px 10px auto;top:12px;left: 20px;position: absolute;width: 310px;cursor: pointer;

}
    .btnin9 {
  background-color: #42ade3;
  color: #FFFFFF;
  padding: 5px 20px !important;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 400;
  position: relative;
  margin: 20px auto 50px auto;
  width: 150px;
        left: auto;

}



}

.margin10px {
  margin: 10px
}
.btnin10 {
  background-color: rgba(255, 255, 255, 0);
  color: #007aff;
  border: 1px solid #007aff;
  padding: 5px 20px !important;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 400;
  text-align: center;
  float: left
}
.btnin10:hover {
  background-color: rgba(255, 255, 255, 0.5)
}
.txtlink {
  color: #666666
}
.txtlink:hover {
  color: #000000
}
.inputtxt {
  font-size: 1.2rem;
  border: 1px solid #37c0f6;
  border-radius: 5px;
  padding: 0.5% 2%
}
.font20 {
  font-size: 2rem
}
.font17 {
  font-size: 1.7rem
}
.font15 {
  font-size: 1.5rem
}
.font12 {
  font-size: 1.2rem
}
.font10 {
  font-size: 1rem
}
.font08 {
  font-size: 0.8rem
}
.poptab02 {
  background-color: #ff9c00;
  height: 10px;
  width: calc(100% - 40px);
  padding: 5px 20px;
  font-size: 1.1rem;
  line-height: 2rem
}
.kv {
  width: 100%;
  background-image: url(../img/kv.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.kv00 {
  background-image: url(../img/kv00.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100%;
}
#header {
  position: fixed;
  top: 0px;
  width: 100%;
  text-align: center;
  z-index: 2;
  height: 74px;
  overflow: hidden
}
.pcbg {
  width: 100%;
  height: 74px;
  background-color: rgba(255, 255, 255, 0);
  position: fixed;
  z-index: 1;
  top: -74px
}
@media (min-width:1367px) {
  .font22 {
    font-family: 'Noto Sans TC', '微軟正黑體', sans-serif !important;
    font-size: 1.2rem
  }
  .main {
    width: 100%;
    display: block;
  }
  .linebg {
    background-color: #3e8dba;
    width: 1px;
    height: 25px;
    margin-top: 25px;
  }
}
@media screen and (min-width: 1002px) and (max-width: 1366px) {
  .font22 {
    font-family: 'Noto Sans TC', '微軟正黑體', sans-serif !important;
    font-size: 1.1rem
  }
  .main {
    width: 100%;
    display: block;
    left: 0
  }
  .linebg {
    background-color: #3e8dba;
    width: 1px;
    height: 20px;
    margin-top: 20px;
  }
}
.tit1p {
  width: 80%;
  margin: 0px auto;
  padding: 10px 10% 50px 10%;
}
@media (min-width:1001px) {
  .font22 {
    font-family: 'Noto Sans TC', '微軟正黑體', sans-serif !important;
    font-size: 1.1rem
  }
  .linebg {
    background-color: #3e8dba;
    width: 1px;
    height: 20px;
    margin-top: 20px;
  }
  .menu__list {
    top: 5px
  }
  .line6h {
    background-color: #42ade3;
    height: 6px;
    width: 100%;
    width: 100%;
    border-radius: 6px
  }
  .line6h2 {
    background-color: #42ade3;
    height: 6px;
    width: 100%;
    width: 100%;
    border-radius: 6px;
    top: 74px;
    position: fixed;
    z-index: 2
  }
  .kvw {
    display: none1
  }
  .kvh {
    display: none
  }
  .menuhover {
    color: #FFFFFF;
    position: absolute;
    width: 100%;
    z-index: 1;
    margin-left: 0px;
  }
  #popbg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    overflow-y: scroll;
    z-index: 9;
    display: none
  }
  #pop01 {
    width: 700px;
    margin: 5% auto auto -350px;
    height: 73vh;
    background-color: #FFFFFF;
    position: fixed;
    padding-top: 50px;
    left: 50%;
    background-image: url("../img/bg2.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 30%;
    z-index: 100;
  }
  .titscroll {
    overflow-x: hidden;
    overflow-y: scroll
  }
  .tit1 {
    font-size: 2rem;
    color: #003894;
    font-weight: bold;
    margin: 0 auto;
    text-align: center
  }
  .tit2p {
    margin-left: 50px;
    font-size: 1.2rem;
    line-height: 2.5rem;
    float: left;
    width: 100%
  }
  .tit3p {
    margin-left: 50px;
    float: left;
    width: calc(100% - 100px);
    height: 400px;
    overflow-y: scroll;
    margin-bottom: 50px
  }
  .tit3p ul li {
    font-size: 1rem;
    line-height: 2rem !important
  }
  .tit2 {
    font-size: 1.2rem;
    float: right;
    margin-top: 10px;
    margin-right: 20px
  }
  .tit3 {
    font-size: 1.8rem;
    float: right;
    color: #0F3668
  }
  .tit4 {
    width: 100%;
    height: 400px;
    margin-top: 130px;
    font-size: 1rem;
    line-height: 1.7rem
  }
  .tit5 {
    margin: -200px 30px auto auto;
    position: absolute;
    right: 20px;
    width: 180px;
  }
  .tit8 {
    margin: 0px 30px auto auto;
    position: relative;
    float: right;
    width: 180px;
    height: 10px
  }
  .closebtn {
    background-image: url("../img/close.png");
    background-size: 100%;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 15px;
    top: 15px;
  }
  .main {}
  #pop02 {
    width: 450px;
    margin: 8% auto auto -225px;
    background-color: #FFFFFF;
    position: fixed;
    padding: 30px;
    left: 50%;
    background-image: url('../img/pic39.png');
    background-position: bottom left;
    background-size: 50%;
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    border-radius: 20px;
    z-index: 10;
  }
#pop03, #pop04 {
    width: 800px;
    margin: 8% auto auto -400px;
    background-color: #FFFFFF;
    position: fixed;
    padding: 30px 30px 70px;
    left: 50%;
    background-image: url('../img/pic39.png');
    background-position: bottom left;
    background-size: 50%;
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    border-radius: 20px;
    z-index: 10;
  }
  .btn {
    width: 23%;
    font-size: 1.5rem;
    border-radius: 10px;
    border: 0px;
    color: white;
    padding: 14px 28px;
    margin: 0 1%;
    cursor: pointer;
    float: left;
    position: relative;
  }
  .btn00 {
    background-color: #E97125;
    width: calc(100% - 56px);
    font-size: 1.5rem;
    border-radius: 10px;
    border: 0px;
    color: white;
    padding: 14px 28px;
    top: 0px;
    left: 0px;
    cursor: pointer;
    position: absolute;
  }
  .tit6 {
    float: left;
    margin: 50px auto 20px auto;
    width: 30%
  }
  .tit7 {
    width: 70%;
    height: 400px;
    margin-top: 50px;
    font-size: 1rem;
    line-height: 1.7rem
  }
  .poptab01 {
    background-color: #ff9c00;
    height: 80px;
    width: calc(100% - 40px);
    padding: 30px 20px;
    font-size: 1.1rem;
    line-height: 2rem
  }
  .poptab01 a {
    color: #FFFFFF
  }
}
#pop01, #pop02, #pop03, #pop04 {
  z-index: 10;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.hand {
  cursor: pointer
}
/*首頁下方右側按鈕*/
.rightbtn {
  float: right;
  margin-top: 50px;
  margin-right: 20px
}
.rightbtn div {
  font-size: 0.8rem;
  border-radius: 5px;
  margin: 5px auto;
  width: 120px;
  color: #0b4b64;
  border: 1px solid #29a7ff;
  padding: 5px 10px;
  text-align: center;
  cursor: pointer
}
.rightbtn div:hover {
  background-color: #29a7ff;
  color: #ffffff
}
.footerL {
  width: calc(100% - 170px);
  float: left
}
@media (min-width:1001px) {}
@media (max-width:1000px) {
  .rightbtn {
    width: 100%;
    clear: both;
    margin: auto
  }
  .rightbtn div {
    font-size: 0.8rem;
    border-radius: 5px;
    margin: 5px 1% 5px 2%;
    float: left;
    width: 44%;
    color: #0b4b64;
    border: 1px solid #29a7ff;
    padding: 5px 1%;
    text-align: center;
    cursor: pointer
  }
  .footerL {
    width: 100%;
    text-align: center
  }
}
@media (max-width:1000px) {
  .poptab01 {
    background-color: #ff9c00;
    width: calc(100% - 40px);
    padding: 30px 20px;
    font-size: 1.1rem;
    line-height: 2rem
  }
  .poptab01 a {
    color: #FFFFFF
  }
  .inputtxt {
    width: 96%;
    padding: 0.5% 2%
  }
  .tit1 {
    font-size: 2rem;
    color: #003894;
    font-weight: bold;
    margin: 0 auto;
    text-align: center
  }
  .tit1p {
    font-size: 1.2rem;
    line-height: 2.5rem;
    float: left;
    width: 80%;
    margin: 0 10%
  }
  .tit2p {
    font-size: 1.2rem;
    line-height: 2.5rem;
    float: left;
    width: 90%;
    margin: 0 5%
  }
  .tit5 {
    margin: -200px auto 0px -90px;
    position: absolute;
    width: 180px;
    left: 50%
  }
  .tit3p {
    width: 95%;
    margin-bottom: 50px
  }
  .tit3p ul li {
    font-size: 1rem;
    line-height: 2rem !important
  }
  .menu__list li a {
    color: #FFFFFF !important
  }
  .font22 {
    font-family: 'Noto Sans TC', '微軟正黑體', sans-serif !important;
    font-size: 1.4rem
  }
  .line6h {
    background-color: #42ade3;
    height: 6px;
    width: 100%;
    width: 100%;
    border-radius: 6px;
  }
  .line6h2 {
    background-color: #42ade3;
    height: 6px;
    width: 100%;
    width: 100%;
    border-radius: 6px;
    top: 74px;
    position: fixed;
    z-index: 2
  }
  .menuhover {
    display: none
  }
  #header {
    position: fixed;
    background-color: #FFFFFF;
    width: 100%;
    text-align: center;
    z-index: 2;
    overflow: hidden
  }
  .menu__list li {
    display: block;
    width: 100%
  }
  .kvw {
    display: none
  }
  .kvh {
    display: none1
  }
  #popbg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 1);
    overflow-y: scroll;
    z-index: 9;
    display: none
  }
  #pop01 {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    padding-top: 60px;
    left: 0px;
    top: 0px;
    background-image: url('../img/bg2.png');
    background-position: top right;
    background-size: 50%;
    background-repeat: no-repeat;
    z-index: 10;
    overflow-y: scroll;
    position: fixed;
  }
  #pop02 {
    width: calc(100% - 60px);
    background-color: #FFFFFF;
    padding: 30px;
    left: 0px;
    top: 0px;
    background-image: url('../img/bg.png');
    background-position: top center;
    background-size: 300%;
    background-repeat: no-repeat;
    background-color: #e2ebf3;
    z-index: 10;
    position: fixed;
  }
 #pop03, #pop04 {

    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    padding-top: 60px;
    left: 0px;
    top: 0px;
    background-image: url('../img/pic39.png');
    background-position: bottom 10% left 0%;
    background-size: 80%;
    background-repeat: no-repeat;
    z-index: 10;
    overflow-y: scroll;
    position: fixed;



  }
  .closebtn {
    background-image: url("../img/close.png");
    background-size: 100%;
    width: 30px;
    height: 30px;
    position: fixed;
    right: 15px;
    top: 15px;
  }
  .btn {
    width: 33%;
    font-size: 1.2rem;
    border-radius: 10px;
    border: 0px;
    color: white;
    padding: 14px 3%;
    margin: 2% auto;
    cursor: pointer;
    float: left;
    position: relative;
    overflow: hidden;
  }
  .m02, .m03 {
    width: 31%
  }
  .btn00 {
    background-color: #E97125;
    width: 90%;
    color: white;
    padding: 14px 5%;
    top: 0px;
    left: 0px;
    cursor: pointer;
    position: absolute;
  }
  .tit6 {
    float: left;
    margin: 50px auto 20px -5%;
    width: 35%
  }
  .tit6 img {
    width: 100%
  }
  .tit7 {
    width: 68%;
    height: 72vh;
    margin-top: 50px;
    font-size: 1rem;
    line-height: 1.7rem;
    float: right;
    overflow-y: scroll
  }
  /*.tit6{float: left;margin: 50px auto 20px auto;width: 100%;text-align: center!important}
.tit6 img{margin: auto}
.tit7{width: 100%;margin-top: 20px;font-size: 1rem;line-height: 1.7rem}  */
}
.qtit {
  color: #0F3668
}
.clear {
  clear: both
}
a {
  text-decoration: none;
}
.success {
  background-color: #99BBD9;
} /* Green */
.success:hover {
  background-color: #517a9e;
}
@media (min-width:1001px) {
  .iconfloatL {
    float: left
  }
}
@media (max-width:1000px) {
  .menu--shylock2 {
    background-color: #42ade3;
    top: 74px;
    left: 0px;
    position: absolute;
    text-align: left;
    width: 100%;
  }
  .iconfloatL {
    margin: 0 auto
  }
}
.font18 {
  font-size: 1.2rem;
  color: #002169;
  margin-bottom: 3px
}
.font16 {
  font-size: 1.0rem;
  color: #000000
}
footer {
  background-color: #FFFFFF;
  width: 98%;
  color: #666666;
  text-align: left;
  padding: 1% !important;
  font-size: 0.8rem;
  font-family: Verdana, '微軟正黑體', 'LiHei Pro', 'eiti TC', STHeiti, sans-serif !important
}
footer p {
  font-size: 0.9rem;
  ;
  color: #008FBE;
  line-height: 1.5rem;
  margin: 0.5% 0%;
}
/*搜尋 bar*/
.topnav {
  margin: 15px auto 10px auto;
  background-color: #FFFFFF;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid #42ade3;
    display: none;
}
.topnav input[type=text] {
  padding-left: 15px;
  margin-top: 0px;
  font-size: 1rem;
  border: none;
  width: 100px;
  outline: none;
}
.topnav .search-container button {
  padding: 3px 10px 6px 10px;
  margin-top: 4px;
  background: #ffffff;
  font-size: 1rem;
  border: none;
  cursor: pointer;
}
.topnav .search-container button:hover {
  color: #42ade3;
}
@media (min-width:1001px) {
  .topnav {
    width: 170px;
  }
}
@media (max-width:1000px) {
  .topnav {
    width: 80%;
  }
  .topnav .search-container button {
    float: right;
  }
  .topnav input[type=text] {
    margin-top: 10px;
    font-size: 1.5rem;
    width: calc(100% - 80px);
    outline: none;
  }
  .arricon {
    float: left;
    margin-top: 5px
  }
  .topnav .search-container button {
    padding: 9px 20px 12px 10px;
    margin-top: 4px;
    background: #ffffff;
    font-size: 1.5rem;
    border: none;
    cursor: pointer;
  }
}
#infopop {
  width: 94%;
  padding: 20px 3% 10px 3%;
  text-align: center;
  background-color: rgba(220, 220, 220, 0.9);
  color: #1A1A1A;
  position: fixed;
  z-index: 2;
  bottom: 0px;
  left: 0px;
  font-size: 1rem;
  line-height: 2rem;
  display: none1;
}
.okbtn {
  margin: 10px auto;
  cursor: pointer
}
.close2 {
  top: 25px;
  right: 25px;
  position: absolute;
  width: 30px;
  cursor: pointer
}
.hot_1 {
  position: absolute;
  -webkit-animation: baloon_1 3s infinite;
  -moz-animation: baloon_1 3s infinite;
  -ms-animation: baloon_1 3s infinite;
  -o-animation: baloon_1 3s infinite;
  animation: baloon_1 3s infinite;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -ms-animation-direction: alternate;
  -o-animation-direction: alternate;
  animation-direction: alternate;
}
.hot_2 {
  position: absolute;
  -webkit-animation: baloon_1 4s infinite;
  -moz-animation: baloon_1 4s infinite;
  -ms-animation: baloon_1 4s infinite;
  -o-animation: baloon_1 4s infinite;
  animation: baloon_1 4s infinite;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -ms-animation-direction: alternate;
  -o-animation-direction: alternate;
  animation-direction: alternate;
}
.hot_3 {
  position: absolute;
  -webkit-animation: baloon_1 1.5s infinite;
  -moz-animation: baloon_1 1.5s infinite;
  -ms-animation: baloon_1 1.5s infinite;
  -o-animation: baloon_1 1.5s infinite;
  animation: baloon_1 1.5s infinite;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -ms-animation-direction: alternate;
  -o-animation-direction: alternate;
  animation-direction: alternate;
}
@-webkit-keyframes baloon_1 {
  0% {
    transform: translateY(20px);
  }
  50% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(20px);
  }
}
@-moz-keyframes baloon_1 {
  0% {
    transform: translateY(20px);
  }
  50% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(20px);
  }
}
@-ms-keyframes baloon_1 {
  0% {
    transform: translateY(20px);
  }
  50% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(20px);
  }
}
@-o-keyframes baloon_1 {
  0% {
    transform: translateY(20px);
  }
  50% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(20px);
  }
}
@keyframes baloon_1 {
  0% {
    transform: translateY(20px);
  }
  50% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(20px);
  }
}
.swing2 {
  animation: swing2 ease-in-out 3s infinite alternate;
}
@keyframes swing2 {
  0% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(-3deg);
  }
}
.OAbtn {
  text-align: center;
  padding: 20px 1%;
  width: 98%;
  margin: auto;
  max-width: 1050px;
  overflow: hidden;
  position: relative
}
.OAbtn img {
  float: left;
  margin: 10px
}
.bgin01colorA {
  min-height: 500px;
  width: 100%;
  background-color: #e0f5fc;
  background-image: url("../img/mainbg.png");
  background-position: top center;
  background-repeat: repeat-x
}
.bgin01colorB {
  position: absolute;
  background-color: #e0f5fc;
  height: 73px;
  width: 100%;
}
.bgin01colorC {
  min-height: 500px;
  width: 100%;
  background-color: #FFFFFF;
}
.bgin01colorD {
  min-height: 500px;
  width: 100%;
  background-color: #f3f3f3;
}
.bgin01colorE {
  position: absolute;
  background-color: #f3f3f3;
  height: 73px;
  width: 100%;
}
.bgin01colorF {
  position: absolute;
  background-color: #3888bb;
  height: 73px;
  width: 100%;
}
.endbg {
  background-image: url("../img/pic38.png");
  background-repeat: no-repeat;
  background-position: right 5% top 100px;
  background-size: 20%
}

.bgg3{background-image: url('../img/bgg3.jpg'); background-position: top; background-repeat: repeat-x;background-color: #3888bc;width: 100%;min-height: 500px;background-size: 60%;margin-top: -100px}


.bgg3tit{color: #fff600;font-size: 1.1rem; vertical-align: top}


@media (min-width:1001px) {
.bgg3tit01{padding-top: 15vh}
.bgg3tit02{padding-top: 5vh}

.bgg3in{width: 31%;margin: 0 10% 0 auto;color: #FFFFFF!important; font-family: 'Noto Sans TC', '微軟正黑體', sans-serif !important;;font-size: 1rem;position: relative;float: left}
.bgg3tit{color: #fff600;font-size: 1.1rem; vertical-align: top}
.bgg3img01{width: 150px;position: absolute;right: -10%;margin-top: -25%}
.bgg3img02{width: 100px;position: absolute;right: 0%;margin-top: -30%}
.bgg3img03{width: 130px;position: absolute;right: 20%;margin-top: 10%}
.bggbox{width: 90%;margin:-50px auto auto auto;padding-left:20%;max-width: 1200px}
}

@media (max-width:1000px) {
.bggbox{width: 90%;margin:-50px auto auto auto;padding-left:auto;max-width: 1200px}
    .bgg3tit01{padding-top: 5vh}
.bgg3tit02{padding-top: 5vh}

.bgg3in{width: 98%;margin: 0 1%;float: left;color: #FFFFFF!important; font-family: 'Noto Sans TC', '微軟正黑體', sans-serif !important;;font-size: 1rem;position: relative}


.bgg3tit{color: #fff600;font-size: 1.1rem; vertical-align: top}
.bgg3img01{width: 150px;position: absolute;right: 0%;margin-top: -25%}
.bgg3img02{width: 100px;position: absolute;right: 0%;margin-top: -35%}
.bgg3img03{width: 150px;position: absolute;right: 0%;margin-top: 10%}
}

@media (min-width:1001px) {
  .bgin01btn {
    padding: 5px 20px 5px 10px;
    background-color: #FFFFFF;
    border: 2px solid #49ace3;
    border-radius: 40px;
    text-align: center;
    color: #7d32b4;
    display: table;
    margin: 0 10px;
    font-size: 1.4rem;
    box-shadow: 0px 8px 0px #49ace3;
    font-weight: 600;
    cursor: pointer;
    float: left;
    height: 40px !important
  }
  .bgin01btn:hover {
    color: #000000;


  }

  .bgin02btn {
    position: absolute;
    top:13px;
    padding: 5px 20px 5px 10px;
    background-color: #FFFFFF;
    border: 2px solid #f3a307;
    border-radius: 40px;
    text-align: center;
    color: #000000;
    margin: 0 10px;
    font-size: 1.4rem;
    box-shadow: 0px 8px 0px #f3a307;
    font-weight: 600;
    cursor: pointer;
    float: left;
    height: 40px !important;

  }








  .kvinfo {
    background-color: #8cd7fd;
    width: 100%;
    height: 310px;
    position: relative;
    background-image: url("../img/pic03.png");
    background-position: top right;
    background-repeat: no-repeat
  }
  .kvinfo2 {
    background-color: #8cd7fd;
    width: 100%;
    height: 310px;
    position: relative;
    background-image: url("");
    background-position: top right;
    background-repeat: no-repeat
  }
  .pic01 {
    margin: 10px auto auto auto;
    position: absolute;
    z-index: 1;
    left: 5%;
    width: 290px
  }
  .pic13 {
    margin: 100px auto auto auto;
    position: absolute;
    z-index: 1;
    left: 5%;
    width: 180px
  }
  .pic01btn {
    position: absolute;
    z-index: 1;
    left: 5%;
    bottom: 30px;
    width: 320px
  }
  .pic01btn div {
    margin: 1% 2%;
    float: left
  }
  .pic01btn div img {
    opacity: 0;
    cursor: pointer
  }
  .pic01btn div img:hover {
    opacity: 1
  }
  .ba1 {
    background-image: url('../img/pic04.png');
    background-repeat: no-repeat
  }
  .ba2 {
    background-image: url('../img/pic05.png');
    background-repeat: no-repeat
  }
  .pic02 {
    margin: -5px auto auto auto;
    position: absolute;
    z-index: 1;
    right: 15%;
    width: 680px
  }
  .pic12 {
    margin: -10px auto auto auto;
    position: absolute;
    z-index: 1;
    right: 5%;
    width: 740px
  }
}
@media (max-width:1000px) {
  .bgin01btn {
    padding: 5px 20px 5px 10px;
    background-color: #FFFFFF;
    border: 2px solid #49ace3;
    border-radius: 40px;
    text-align: center;
    color: #7d32b4;
    display: table;
    margin: 0 10px;
    font-size: 1.4rem;
    box-shadow: 0px 8px 0px #49ace3;
    font-weight: 600;
    cursor: pointer;
    float: left;
    height: 40px !important
  }
  .bgin02btn {
    position: absolute;
    padding: 5px 20px 5px 10px;
    background-color: #FFFFFF;
    border: 2px solid #f3a307;
    border-radius: 40px;
    text-align: center;
    color: #000000;
    margin: 0 10px;
    font-size: 1.4rem;
    box-shadow: 0px 8px 0px #f3a307;
    font-weight: 600;
    cursor: pointer;
    float: left;
    height: 40px !important;
  }









  .kvinfo {
    background-color: #8cd7fd;
    width: 100%;
    position: relative;
    background-image: url("../img/pic03.png");
    background-position: bottom left;
    background-repeat: no-repeat
  }
  .kvinfo2 {
    background-color: #8cd7fd;
    width: 100%;
    position: relative;
    background-image: url("");
    background-position: bottom left;
    background-repeat: no-repeat
  }
  .pic01 {
    margin: 10px 15%;
    width: 70%;
  }
  .pic01btn {
    width: 320px;
    margin: 5% auto
  }
  .pic01btn div {
    margin: 0px 2% 50px 2%;
    float: left
  }
  .pic01btn div img {
    opacity: 0;
    cursor: pointer
  }
  .pic01btn div img:hover {
    opacity: 1
  }
  .ba1 {
    background-image: url('../img/pic04.png');
    background-repeat: no-repeat
  }
  .ba2 {
    background-image: url('../img/pic05.png');
    background-repeat: no-repeat
  }
  .pic02 {
    width: 100%
  }
  .pic12 {
    margin: 100px auto 0px auto;
    width: 100%
  }
  .pic13 {
    width: 150px;
    display: table;
    top: 20px;
    left: 50%;
    margin: auto auto auto -75px;
    position: absolute
  }
}
/*影片排列設定*/
.w90 {
  width: 90%;
  margin: auto
}
.h10 {
  width: 100%;
  height: 10px
}
.h100 {
  height: 100px
}
.h90 {
  height: 90px
}
.h80 {
  height: 80px
}
.h70 {
  height: 70px
}
.h60 {
  height: 60px
}
.h50 {
  height: 50px
}
.h40 {
  height: 40px
}
.h30 {
  height: 30px
}
.h20 {
  height: 20px
}
.hand {
  cursor: pointer
}
.vfont p {
  padding-bottom: 10px;
  margin: 0px;
  cursor: default;
  color: #999;
  position: relative;
  font-size: 1.2rem;
  border-bottom: 5px solid #f3a307;
  display: table;
  font-weight: 600;
  float: left
}
.vfont div {
  color: #f3a307;
  padding-bottom: 10px;
  margin: 0px;
  position: relative;
  font-size: 1.2rem;
  display: table;
  font-weight: 600;
  float: right
}
.vfontin {
  margin-top: 10px;
  color: #0438a1
}
.vfontinbtn {
  color: #8038b6;
  padding: 20px;
  font-size: 1.2rem;
  display: table;
  float: right;
  bottom: 0px;
  right: 0px;
  position: absolute
}
.vfontinbtn:hover {
  background-color: #8038b6;
  color: #FFFFFF;
}
.linkbt {
  margin: 1% 1% 2% 1.6%;
  padding: 1%;
  text-decoration: none;
  display: inline-table;
  position: relative;
  background-image: url("../img/bgg2.png");
  background-position: top center
}
@media all and (min-width: 1681px) {
  .videobox {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    display: table
  }
  .linkbt {
    width: 28%
  }
}
@media all and (min-width: 1367px) and (max-width: 1680px) {
  .videobox {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    display: table
  }
  .linkbt {
    width: 28%
  }
}
@media all and (min-width: 1000px) and (max-width: 1366px) {
  .videobox {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    display: table
  }
  .linkbt {
    width: 28%
  }
}
@media all and (min-width: 641px) and (max-width: 999px) {
  .videobox {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    display: table
  }
  .linkbt {
    width: 47%
  }
}
@media (max-width:640px) {
  .videobox {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    display: table
  }
  .linkbt {
    width: 98%
  }
}
.img-hover-zoom--brightness img {
  width: 100% !important
}
.img-hover-zoom--brightness {
  width: calc(100% - 4px);
  height: auto; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
  position: relative;
  border: 2px solid #8cd7fd !important;
}
/* Brightness-zoom Container */
.img-hover-zoom--brightness img {
  transition: transform 0.5s, filter 0.5s ease-in-out;
  transform-origin: center center;
  filter: brightness(80%);
  transform: scale(1.07);
}
/* The Transformation */
.img-hover-zoom--brightness:hover img {
  filter: brightness(150%);
  transform: scale(1.2) rotate(-2deg);
}
.img-hover-zoom--brightness div {
  position: absolute;
  z-index: 2;
  color: aliceblue;
  left: calc(50% - 10px);
  top: calc(50% - 0px);
  transform: scale(1.2) rotate(0deg);
  opacity: 0;
}
.img-hover-zoom--brightness:hover div {
  position: absolute;
  z-index: 10;
  color: aliceblue;
  left: calc(50% - 10px);
  top: calc(50% - 10px);
  filter: brightness(150%);
  transform: scale(2) rotate(-2deg);
  opacity: 0.8;
}
.topbt {
  position: fixed;
  z-index: 2;
  bottom: 10px;
  width: 50px;
  left: calc(50% - 25px)
}
.main {
  width: 100%;
  height: 100%;
  position: absolute;
}
.menuqa {
  border-radius: 20px;
  overflow: hidden;
  margin: 1% auto;
  width: 90%;
  max-width: 800px;
  border: 2px solid #77a3d4;
}
.menuqa a {
  color: #000000;
  text-decoration: none;
  font-size: 16px;
  font-family: '微軟正黑體';
  min-height: 40px;
  display: block;
  padding-top: 20px;
}
.menuqa a:hover {
  text-decoration: none;
  background-color: ffffff;
}
.menuqa .submenu {
  display: none;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.menuqa .lastmenu {
  color: #333333;
  display: none;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.menuqa ul li {
  line-height: 1.5rem;
}
.submenu li {
  padding: 20px;
}
body {
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}
.arr {
  float: right;
  margin-right: 20px;
}
.menuqa .allbtn {
  margin: 0px;
  padding: 0px;
}
.qbtn1 {
  background-color: #bdd3e9;
  color: #0f3668;
  text-indent: 20px;
  border-bottom: 1px solid #ffffff;
}
.qbtn2 {
  background-color: #d0dfee;
  color: #0f3668;
  text-indent: 20px;
  border-bottom: 1px solid #ffffff;
}
ol.as {
  padding-left: 20px;
}
ol.as li {
  text-indent: 0px !important;
  padding: 0px 5px;
  line-height: 1.5rem;
  margin: 0px;
}
.bfontco {
  color: #015a8f;
}
.tab02 tr td {
  border-bottom: 1px solid #4b87bd;
  font-size: 13px;
}
a.menu-open {
  background-color: #77a3d4;
}
.floatR {
  float: right
}
.floatL {
  float: left
}
/*學員登入*/


@media (min-width:1001px) {
.logintxtL {
  padding: 5%;
  display: table
}
.logintxtL input {
  width: 300px;
  border: 0px;
  border-left: 3px solid #1278f5;
  padding: 10px 20px;
}
}
@media (max-width:1000px) {
.logintxtL {
  padding: 10%;
  display: table
}
.logintxtL input {
  width: 85%;
  border: 0px;
  border-left: 3px solid #1278f5;
  padding: 10px 20px;
}
}






.colorb2 {
  color: #008ed7
}
.loginbox {
  margin: 50px auto auto auto;
  background-image: url('../img/pic08.png');
  background-repeat: no-repeat;
  background-size: 100%;
  width: 900px;
  height: 600px;
  position: relative
}
.pic10 {
  background-image: url("../img/pic10.png");
  background-repeat: no-repeat;
  background-position: right
}
.pic11 {
  background-image: url("../img/pic11.png");
  background-repeat: no-repeat;
  background-position: right
}
@media (max-width:1000px) {
  .loginbox {
    margin: 50px 5% auto 5%;
    width: 90%;
    background-size: 250%;
    background-position: left;
    height: auto;
  }
}
/*學員註冊*/
.button-group input {
  display: none;
}
.button-group input:checked + label, .button-group input:checked + label:active {
  background-color: #37c0f6;
}

.labelbox{width: 50%!important;float: left;margin: 5px auto!important;padding: 0!important}

.Otherin{font-size: 1.2rem!important;margin:10px auto auto 10px;width: 50%}
@media (min-width:1001px) {
  .stud01 {
    width: 960px;
margin:5% auto 2% auto;
  }
  .stud01>div {
    margin: 1% 10px 1% 10px;
    width: 300px;
    height: 370px;
    background-size: 100%;
    background-repeat: no-repeat;
    float: left;
  }

  .stud01>div>div {
    width: 75%;
      height: 150px;
    margin: 57% 10% auto 15%;
    position: relative;
  }


  .stud01 .scrollbox {
    width: 75%;
      height: 150px;
    margin: -20px 10% auto 15%;
    position: relative;
  }
  .stud02 {
    width: 600px;
    margin: 5% auto;
    display: table
  }
  .stud02 h1 {
    font-size: 1.1rem!important;
    padding: 0.5rem;
    margin: 10px auto;
    float: left;
    clear: both;
    width: 32%;
    text-align: right
  }
  .stud02 h2 {
    margin: 0;
    padding: 0;
    float: right;
    width: 63%
  }
  .stud02 h2 input {
    width: 100%;
    font-size: 1.1rem!important;
    padding: 0.5rem;
    margin: 10px auto;
    border: 1px solid #37c0f6;
    border-radius: 5px
  }
  .stud02 h2 select {
    width: 105%;
    font-size: 1.1rem!important;
    padding: 0.5rem;
    margin: 10px auto;
    border: 1px solid #37c0f6;
    border-radius: 5px;
      background-color: #FFFFFF;
  }
  .stud02 div {
    font-size: 1.1rem!important;
    float: right;
    width: 60%;
    margin-top: 20px;
    margin-bottom: 20px
  }
  .stud03 {
    width: 80%;
    max-width: 1000px;
    border-top: 5px solid #21a9ff;
    border-bottom: 5px solid #21a9ff;
    margin: 10px auto;
    position: relative
  }
  .stud03 .h1 {
    font-size: 1.1rem!important;
    padding: 0.5rem;
    margin: 10px auto 10px 10%;
    width: 45%;
    font-weight: 400;
    left: 10px
  }
  .stud03 .h2 {
    margin: 0;
    padding: 0;
    top: 10px;
    right: 10%;
    font-size: 1.1rem!important;
    font-weight: 400;
    position: absolute
  }
  .stud04 {
    width: 80;
    max-width: 1000px;
    margin: 30px auto 10px auto;
    position: relative
  }
  .stud04 .h1 {
    font-size: 1.1rem!important;
    padding: 0.5rem;
    margin: 10px auto 10px 20%;
    width: 45%;
    font-weight: 400;
    left: 10px
  }
  .stud04 .h2 {
    margin: 0;
    padding: 0;
    top: 0px;
    right: 20%;
    font-size: 1.2rem;
    font-weight: 400;
    position: absolute
  }
}
.checkBox {
  width: 22px;
  height: 22px;

}
@media (max-width:1000px) {
  .stud01 {
    width:100%;
    position:relative;
      margin: 50px auto auto auto;
  }
  .stud01>div {

    margin: 15px 10%;
    width: 80%;
    max-height: 390px;
    background-size: 100%;
    background-repeat: no-repeat;
    float: left;
  }

  .stud01>div>div {
    width: 75%;
    margin: 57% 10% auto 15%;
    position: relative;
  }


  .stud01 .scrollbox {
    width: 70%;
    margin: -20px 15% auto 15%;
      overflow: visible;
       height: auto;

  }




  .stud02 {
    width: 90%;
    margin: 5% auto;

  }
  .stud02 h1 {
    font-size: 1.1rem!important;
    padding: 0.2rem;
    margin: 0px auto;
    float: left;
    clear: both;
    width: 100%;
    text-align: left
  }
  .stud02 h2 {
    margin: 0 auto;
    padding: 0;
    float: left;
    width: 100%
  }
  .stud02 h2 input {
    width: calc(100% - 1rem);
    font-size: 1.1rem!important;
    padding: 0.5rem;
    margin: 10px auto;
    border: 1px solid #37c0f6;
    border-radius: 5px
  }
  .stud02 h2 select {
    width: 100%;
    font-size: 1.1rem!important;
    padding: 0.5rem;
    margin: 10px auto;
      background-color: #FFFFFF;
    border: 1px solid #37c0f6;
    border-radius: 5px
  }
  .stud02 div {
    font-size: 1.1rem!important;
    float: right;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px
  }
  .stud03 {
    width: 90%;
    border-top: 5px solid #21a9ff;
    border-bottom: 5px solid #21a9ff;
    margin: 10px auto;
    position: relative;
    padding-bottom: 80px
  }
  .stud03 .h1 {
    font-size: 1.1rem!important;
    padding: 0;
    margin: 10px 5% 10px 5%;
    width: 90%;
    font-weight: 400;
  }
  .stud03 .h2 {
    margin: 1%;
    padding: 0;
    font-size: 1.1rem!important;
    font-weight: 400;
  }
  .stud04 {
    width: 80;
    margin: 30px auto 10px auto;
    position: relative
  }
  .stud04 .h1 {
    font-size: 1.1rem!important;
    padding: 0.5rem;
    margin: 10px 5%;
    width: 90%;
    font-weight: 400;
    left: 10px
  }
  .stud04 .h2 {
    margin: 1% auto;
    padding: 0;
    font-size: 1.1rem!important;
    font-weight: 400;
    position: absolute;
    left: 5%
  }
}
.numb123 {
  padding-left: 20px
}
/*課前測試*/
.class01 {
  width: 100%;
  text-align: center;
  margin: 20px auto
}
.class01 img {
  height: 30px
}
.class03 {
  width: 100%;
  text-align: center;
  margin: 20px auto
}
@media (min-width:1001px) {
  ul.class02 {
    width: 80%;
    margin: 0 auto;
    padding-left: 4%;
    max-width: 1000px;
    list-style-type: none;
    text-align: center;
  }
}
ul.class02 li {
  display: inline-block;
  width: 27%;
  float: left;
  min-height: 270px;
  background-repeat: no-repeat !important;
  background-size: 50%;
  background: #33b3fd;
  text-align: left;
  line-height: 50px;
  margin: 1%;
  padding: 1%;
  border-radius: 20px;
  cursor: pointer;
}
ul.class02 li:hover {
  background-color: #0173b4 !important;
}
ul.class02 li h1 {
  font-size: 1.4rem;
  color: #fcf513;
  margin: 0;
  padding: 0;
  text-align: center
}
ul.class02 li h2 {
  width: 100%;
  margin: 0;
  padding: 0px;
  height: 10px;
  background-image: url("../img/pic25.png");
  background-repeat: no-repeat;
  background-position: center
}
ul.class02 li h3 {
  width: 75%;
  padding: 0px;
  color: #FFFFFF;
  font-weight: 400;
  line-height: 2rem;
  margin: 20px auto auto 20%
}
ul.class02 li h3 i {
  margin-right: 5px;
  height: 30px;
  margin: 7px auto auto -25px;
  padding: 0;
  background-image: url("../img/arr4.png");
  background-repeat: no-repeat;
  background-size: 100%;
  width: 20px;
  height: 20px;
  display: block;
  position: absolute
}
.class0201 {
  background-image: url("../img/pic20.png") !important;
  background-position: bottom left !important;
  background-size: 80% !important;
}
.class0202 {
  background-image: url("../img/pic21.png") !important;
  background-position: bottom left !important;
  background-size: 55% !important;
}
.class0203 {
  background-image: url("../img/pic22.png") !important;
  background-position: bottom right !important;
  background-size: 70% !important;
}
.class0204 {
  background-image: url("../img/pic23.png") !important;
  background-position: bottom right !important;
  background-size: 60% !important;
}
.class0205 {
  background-image: url("../img/pic24.png") !important;
  background-position: bottom right !important;
  background-size: 60% !important;
}
@media (max-width:1000px) {
  ul.class02 {
    width: 90%;
    margin: 0 5% 0 5%;
    list-style-type: none;
    padding: 0;
    text-align: center;
  }
  ul.class02 li {
    display: inline-block;
    width: 98%;
    float: left;
    height: 300px;
    background: #33b3fd;
    text-align: left;
    line-height: 50px;
    margin: 2% 1%;
    padding: 1%;
    border-radius: 20px;
  }
}
/*課前測驗問題*/
@media (min-width:1001px) {
  .textQ {
    width: 650px;
    min-height: 500px;
    margin-top: 100px;
    background-image: url("../img/pic28.png");
    background-repeat: repeat-y;
    background-size: 90%;
    text-align: left;
    background-position: top right;
    left: 50%;
    position: relative;
    margin-left: -200px
  }
  .textQ h1 {
    font-size: 3rem;
    font-weight: 400;
    color: #073e98;
    font-family: 'LiHei Pro', 'eiti TC', STHeiti, sans-serif !important;
    margin: -60px auto auto 120px;
    position: absolute
  }
  .textQ h1 span {
    font-size: 2rem;
    font-weight: 400;
    color: #CCCCCC
  }
  .textQ div {
    font-weight: 400;
    font-size: 1.2rem;
    display: table;
    width: 70%;
    padding-left: 20%;
    line-height: 2rem;
    padding-top: 30px
  }
  .textQ div h3 {
    font-weight: 400;
    font-size: 1.2rem;
    border-bottom: 1px dashed #5e9fe6;
    padding-bottom: 5%
  }
  .textQimg {
    width: 300px;
    position: absolute;
    left: 50%;
    margin: 20px auto auto -400px;
    z-index: 1
  }
  .btnclass1 {
    background-color: #42ade3;
    padding: 10px 20px;
    border-radius: 20px;
    display: table
  }
}
@media (max-width:1000px) {
  .textQ {
    width: 90%;
    background-image: url("../img/pic28.png");
    background-repeat: repeat-y;
    background-size: 90%;
    text-align: left;
    background-position: top right;
    position: relative;
    margin-top: 80px
  }
  .textQ h1 {
    font-size: 3rem;
    font-weight: 400;
    color: #073e98;
    font-family: 'LiHei Pro', 'eiti TC', STHeiti, sans-serif !important;
    margin: -70px auto auto -20px;
    left: 50%;
    position: absolute
  }
  .textQ h1 span {
    font-size: 2rem;
    font-weight: 400;
    color: #CCCCCC
  }
  .textQ div {
    font-weight: 400;
    font-size: 1rem;
    display: table;
    width: 70%;
    padding-left: 20%;
    line-height: 2rem;
    padding-top: 30px
  }
  .textQ div h3 {
    font-weight: 400;
    font-size: 1rem;
    border-bottom: 1px dashed #5e9fe6;
    padding-bottom: 5%
  }
  .textQimg {
    width: 70%;
    position: relative;
    left: 15%;
    z-index: 1
  }
  .btnclass1 {
    background-color: #42ade3;
    padding: 10px 20px;
    border-radius: 20px;
    display: table
  }
  .btnin8 img {
    display: none
  }
}

/*線上課程*/
.YTbg {
  background-image: url('../img/pic32.png');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
  width: 100%;
  min-height: 600px
}
.youtubeMv {
  width: 80%;
  height: 50vh;
  margin: auto;
  max-width: 800px;
  text-align: right
}
.YTnumb {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
  text-align: left
}
.YTRtxt div {
  padding: 0px 20px 20px 0px;
  border-bottom: 1px dashed #39bbfa;
  margin-bottom: 20px;
     font-size: 1.1rem!important;
}
.YTRtxt span div {
  width: calc(100% - 26px);
  padding: 0px;
  border: 0px;
  margin-left: 26px;
  line-height: 1.5rem;
  color: #1181e0;

}
.YTRtxt span div input {
  margin: 0px auto auto -30px;
  position: absolute;
    width: 25px;
    height: 25px;

}
.innum {
  float: left
}
@media (min-width:1001px) {
  .YTRtxt {
    width: calc(100% - 100px);
    float: right
  }
  .innum img {
    width: 60px
  }
  .YTimg {
    position: absolute;
    float: left;
    margin-top: -200px;
    left: 5%;
    width: 350px
  }
  .floatR2 {
    float: right
  }
  .YTRtxt span {
    width: 500px !important
  }
}
@media (max-width:1000px) {
  .YTRtxt {
    width: calc(100% - 60px);
    float: right
  }
  .innum img {
    width: 50px
  }
  .YTimg {
    position: absolute;
    float: left;
    margin-top: -140px;
    left: 5%;
    width: 200px
  }
  .floatR2 {
    float: right
  }
}
/*學習紀錄*/
.winbar {
  width: 90%;
  margin: auto;
  max-width: 1000px;
  font-size: 1.2rem;
  color: #073e98
}
.onbar02 {
  width: 90%;
  padding: 1% 5%;
  float: left
}
.progress {
  height: 30px;
  background: #ebebeb;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-radius: 50px;
  position: relative
}
.end1 {
  background-color: #cdd1fc;
  padding: 3px;
  border: 1px solid #bfb6fb
}
.end2 {
  background-color: #fcd4b6;
  padding: 3px;
  border: 1px solid #f6c0a5
}
.end3 {
  background-color: #b9ead9;
  padding: 3px;
  border: 1px solid #96c8c5
}
.progress > span {
  position: relative;
  float: left;
  margin: 0 -1px;
  min-width: 30px;
  height: 30px;
  border-radius: 50px;
}
.progress > span > span {
  padding: 0 8px;
  font-size: 11px;
  font-weight: bold;
  color: #404040;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: 0 1px rgba(255, 255, 255, 0.4);
}
.progress > span:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 30px;
  border-radius: 50px;
}
.progress .end1in {
  background-image: url("../img/bar01.png");
  height: 30px
}
.progress .end2in {
  background-image: url("../img/bar02.png");
  height: 30px
}
.progress .end3in {
  background-image: url("../img/bar03.png");
  height: 30px
}
.progress img {
  right: 0px;
  position: absolute;
  margin-top: -60px
}
.none {
  display: none
}
.CT04 {
  width: 90%;
  padding: 1% 5%;
  float: left;
  margin-top: 50px
}
.CT04 div h5 {
  margin: 0;
  padding: 0;
  font-weight: 400;
}
.CT04 .color01 {
  color: #108b58
}
.CT04 .color02 {
  color: #101d91
}
.CT04 .color03 {
  color: #ff6702
}
.CT04 .color04 {
  color: #01a2f5
}
.onbar01 {
  padding: 1% 5%;
  float: left
}
.CT04 div img {
  float: left;
  margin: 0px 20px 20px 0px
}
.CT04 div h1 {
  padding: 0;
  font-size: 1.2rem;
  font-weight: 400;
}
@media (min-width:1001px) {
  .plusicon {
    float: left;
    margin-top: 90px
  }
  .onbar01 {
    width: 38%;
  }
  .CT04 div h1 {
    margin: 0;
  }
}
@media (max-width:1000px) {
  .CT04 div h1 {
    margin: 5px auto 40px 5px;
    padding: 0;
  }
  .CT04 div h5 {
    margin: auto auto auto 5px;
    padding: 0;
  }
  .onbar01 {
    width: 90%;
  }
  .plusicon {
    float: left;
    margin-top: 20px;
    width: 100%;
    text-align: center
  }
  ;
}
.learbtn {
  width: 92%;
  text-align: right;

}
/*彈出下方對話框*/
#downbtntxt01, #downbtntxt02, #downbtntxt03, #downbtntxt041 {
  display: none
}
@media (min-width:1001px) {
  .downinfo01 {
    width: 80% !important;
    margin: 5% 10% 10% 10%;
    overflow-y: scroll;
    height: 50vh;
    padding-bottom: 50px
  }
  .dowtit {
    width: 80%;
    margin: auto;
    color: #1299ee;
    font-size: 1.2rem
  }
  .copyicon {
    width: calc(100% - 170px);
    float: left;
  }
}
@media (max-width:1000px) {
  .downinfo01 {
    width: 90% !important;
    margin: 5% 5% 10% 5%;
    padding-bottom: 50px
  }
  .dowtit {
    width: 80%;
    margin: auto;
    color: #1299ee;
    font-size: 1.2rem
  }
}
.container {
  overflow-y: scroll;
}
/* custom scrollbar */ ::-webkit-scrollbar {
  width: 20px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}
/*首頁主視覺*/
.indexkv {
  min-height: 700px;
  background-color: #eff0f0;
  background-image: url("../img/admap.gif");
  background-repeat: no-repeat;
  background-position: bottom -100px right 5%;
  background-size: 55%;
}
.indexkvwave {
  width: 100%;
  height: 60px;
  margin-top: -60px;
  position: absolute;
  background-image: url("../img/wave.png");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 100%
}
@media (max-width:1000px) {
  .indexkvwave {
  width: 100%;
  height: 60px;
  margin-top: -60px;
  position: absolute;
  background-image: url("../img/wave.png");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 200%
}

}
.kvtxt {
  width: 400px;
  position: absolute;
  z-index: 1;
  left: 15vw;
  top: 10vh;
}
.kvtxt01 {
  width: 320px;
  margin-top: -10px
}
.kvtxt02 {
  width: 450px;
  margin-top: 10px
}
.kvtxt03 {
  width: 450px;
  margin-top: 20px
}
.kvtxt04 {
  width: 320px;
  margin-top: 20px
}
.kvtxt05 {
  width: 200px;
  margin-top: 20px;
  ;
  margin-bottom: 10px;
  width: 150px;
  padding: 10px auto
}
.kvtxt06 {
  width: 200px;
  margin-top: 10px;
  float: left
}
.kvtxt07 {
  width: 200px;
  margin-top: 10px;
  float: left
}
ul.newsarrbtn {
  list-style-type: none;
  display: block;
  margin: 0px auto;
  padding: 0px;
  width: 90%;
  max-width: 1200px;
}
.NAbtnin {
  position: relative;
  display: inline-block;
  float: left;
  width: 33%;
  text-align: center;
  min-height: 550px;
}
.NAimg{ width:300px}
ul.newsarrbtn li h1 {
  font-size: 1.4rem;
  margin: 0;
  padding: 0;
  color: #8038b6;
  letter-spacing: 2px;
  text-align: center;
  width: 100%
}
ul.aaa {
  display: block;
  margin: 20px auto auto auto;
  width: 200x;
}
ul.aaa li {
  list-style-type: none;
  font-size: 1.1rem;
  margin-bottom: 10px !important;
  width: 80% !important;
  margin: auto 10%;
  text-align: left;
}
ul.aaa li span {
  background-image: url("../img/point.png");
  width: 30px;
  height: 30px;
  position: absolute;
  margin-left: -20px;
  background-repeat: no-repeat;
  background-size: 12px;
    background-position: center left;
}
@media (max-width:1000px) {
  .NAbtnin {
    width: 100%;
  }
  .kvtxt {
    width: 90%;
    position: absolute;
    z-index: 1;
    left: 5%;
    top: 10vh;
  }
  .kvtxt01 {
    width: 90%;
    margin-top: -10px;
  }
  .kvtxt02 {
    width: 100%;
    margin-top: 10px
  }
  .kvtxt03 {
    width: 100%;
    margin-top: 20px
  }
  .kvtxt04 {
    width: 100%;
    margin-top: 20px
  }
  .kvtxt05 {
    width: 100%;
    margin-top: 20px;
    ;
    margin-bottom: 10px;
    width: 150px;
    padding: 10px auto
  }
  .kvtxt06 {
    width: 50%;
    margin-top: 10px;
    float: left
  }
  .kvtxt07 {
    width: 50%;
    margin-top: 10px;
    float: left
  }



.indexkv {
  min-height: 700px;
  background-color: #eff0f0;
  background-image: url("../img/admap.gif");
  background-repeat: no-repeat;
  background-position: bottom 0px left -50px;
  background-size: 150%;
  padding-bottom: 500px;
}

}



.wlink{text-decoration:underline;color: #333333 }
.wlink:hover{color: #1e4a61}