@charset "utf-8";
/*===============================
  start default
===============================*/
html,body{
  font-size: 16px;
}
body{
  font-family: Arial, Helvetica, sans-serif, "微軟正黑體";
}
a{
  color:#474747;
}
a:hover{
  color:#009062;
}
.contRelative {
  position: relative;
}
.divTable {
  display: table;
  width: 100%;
  overflow: hidden;
}
.divTr {
  display: table-row;
}
.divTd {
  display: table-cell;
}
div.LR15pxFix{
  padding-right: 0px;
  padding-left: 0px;
}
div.L15pxFix{
  padding-left: 0px;
}
div.R15pxFix{
  padding-right: 0px;
}
.text-justify {
  text-justify:inter-ideograph; /* bootstrap 補充 For IE */
}
.clearBoth{
  clear:both;
}
.clearfix:after{
  *zoom: 1; /* bootstrap 補充 For IE 6&7 only*/
}
.contentDivHr{
  border-bottom: solid 1px #ddd;
  margin-bottom: 20px;
  padding-top: 20px;
}
.contentDivHr02{
  margin-bottom: 20px;
  padding-top: 20px;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: #ddd;
}
.wordSpaceHalfw{
  letter-spacing: 0.5em;
}
.wordSpace1w{
  letter-spacing: 1em;
}
.wordSpace2w{
  letter-spacing: 2em;
}
.contRelative {
  position: relative;
}
.paddingT15{
  padding-top: 15px;
}
.paddingB15{
  padding-bottom: 15px;
}
.paddingTB15{
  padding-top: 15px;
  padding-bottom: 15px;
}
.marginT15{
  margin-top: 15px;
}
.marginB15{
  margin-bottom: 15px;
}
.marginTB15{
  margin-top: 15px;
  margin-bottom: 15px;
}
.paddingLR-15{
  padding-left: 0px;
  padding-right: 0px;
}
.paddingR-15{
  padding-right: 0px;
}
.paddingT30{
  padding-top: 30px;
}
.paddingB30{
  padding-bottom: 30px;
}
.paddingTB30{
  padding-top: 30px;
  padding-bottom: 30px;
}
.marginT30{
  margin-top: 30px;
}
.marginB30{
  margin-bottom: 30px;
}
.marginTB30{
  margin-top: 30px;
  margin-bottom: 30px;
}
.marginLR15{
  margin-left: -15px;
  margin-right: -15px;
}
.marginR15{
  margin-right: 0px;
}
.vAlignMiddle{
  clear:inherit;
  display: inline-block;
  vertical-align: middle;
}
.vAlignMiddleParent:before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
/*===============================
  edn default
===============================*/


/*===============================
  start header
===============================*/
.navFram{
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  background-color:#FFF;
  z-index:1010;
}
a.logo{
  max-width:220px;
  display:block;
  float:left;
}
a.btHamburger{
  float: right;
  height: 40px;
  font-size: 3rem;/*48px*/
  color: #066;
  line-height: 40px;
  display: none;
  margin-top:20px;
}
.menuHeight{
  height:100hv;
}
.logo img{
  margin:18px 15px 9px 0px;
}
.menuBodyShadow{
  -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
}
ul.navMenu{
  float:right;
  margin:0px;
  padding:0px;
}
ul.navMenu li>ul.subMenu{
  display:none;
}
.HamburgerMenu {
 display: none;
}
ul.navMenu li{
  list-style:none;
  float:left;
}
ul.navMenu li.divide{
  border-left:solid 1px #61dab3;
}
ul.navMenu li a{
  transition: width 1s;
  display: block;
  font-size: 1.25rem; /*20px*/
  font-weight: 900;
  line-height: 23px;
  text-decoration: none;
  color: #FFF;
  background-color: #2abe8f;
  text-align: center;
  height: 113px;
  width: 113px;
  padding-top: 40px;
}
ul.navMenu li a:hover{
  background-color: #23A078;
}
ul.iconMenu{
  background-color:#efefef;
}
ul.language{
  margin:0px;
  padding:0px 0px 0px 25px;
}
ul.language li{
  padding-top:40px;
}
ul.language li+li{
  margin-left:12px;
}
.language .btn-default.active{
  background-color:#ec8e2a;
  border:none;
  color:#FFF;
}
.language button{
  width:30px;
  height:30px;
  vertical-align: middle;
  background-color:#afafaf;
  border:none;
  font-size:1.125rem;/*18px*/
  color:#FFF;
  padding:0px;
}
.language button:hover{
  background-color: #ec8e2a;
  font-size:1.125rem;/*18px*/
  color: #FFF;
}
.language button:active:hover,.language button:active,.language .btn.active{
  color: #FFF;
  background-color: #ec8e2a;
  border-color: none;
  webkit box-shadow: nonw;
  box-shadow: none;
}
.language button:active:focus,.language button:focus{
  color: #FFF;
    background-color: #ec8e2a;
    border-color: none;
}
button.btlogin{
  /* width:55px; */
  height:31px;
  vertical-align: middle;
  background-color:#e3567e;
  border:none;
  font-size:1.25rem;/*20px*/
  color:#FFF;
  /* padding:0px; */
  padding: 0px 2px 0px 2px;
}
button.btlogin:hover{
  background-color: #DF406B;
  font-size:1.25rem;/*23px*/
  color: #FFF;
}
button.btlogin:active:hover,button.btlogin:active{
  color: #FFF;
  background-color: #DF406B;
  border-color: none;
  box-shadow: none;
}
button.btlogin:active:focus,button.btlogin:focus{
  color: #FFF;
    background-color: #DF406B;
    border-color: none;
}
ul.iconMenu{
  margin:0px;
  padding:0px 26px;
}
ul.iconMenu li a{
  height: auto !important;
}
ul.iconMenu li{
  padding-top:38px;
  height:113px;
}
.navMenu .iconMenubg{
  background-color:#efefef;
}
ul.iconMenu li+li{
  margin-left:15px;
}
.iconMenu a{
    font-weight: 900;
    line-height: 23px;
    padding: 0px 0px !important;
  background-color: transparent !important;
  padding:0px;
  width: auto !important;
  font-size:1.875rem !important;/*30px*/
}
.iconMenu a .fa-home{
  color:#a166dd;
}
.iconMenu a:hover .fa-home{
  color: #8130D1;
}
.iconMenu a .fa-search{
  color:#3fa5d5;
}
.iconMenu a:hover .fa-search{
  color: #288AB9;
}

/*===============================
  start header
===============================*/


/*===============================
  start content
===============================*/
.contentBGTop{
  background:url(../images/bg01.jpg) top center no-repeat;
  background-size: 100%;
  background-color:#ffffa4;
}
.contentBGBottom{
  background:url(../images/bg02.jpg) bottom center no-repeat;
  background-size: 100%;
  padding-top:40px;
  padding-bottom:96px;
  margin:113px -15px 0px;
}
.adGroup ul{
  margin:0px;
  padding:0px;
  position:absolute;
  top:24px;
  right:24px;
}
.adGroup li{
  text-indent: 0px !important; 
    padding-left: 0px !important; 
  list-style:none;  
  float:left;
}
.adGroup li+li{
  margin-left:13px;
}
.adGroup li a{
  display:block;
  width:21px;
  height:21px;
  border:solid 2px #FFFFFF;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
.adGroup li a:hover,.adGroup li a.active{
  background-color:#FFF;
}
.btNewCourse{
  width:100%;
  height:43px;
  vertical-align: middle;
  background-color:#ff8106;
  border:none;
  font-size:1.25rem;/*20px*/
  color:#FFF;
  margin-bottom:19px;
}
.btNewCourse:hover{
  background-color: #D26900;
  font-size: 1.25rem;/*21px*/
  color: #FFF;
}
.btNewCourse:active:hover,.btNewCourse:active{
  color: #FFF;
  background-color: #D26900;
  border-color: none;
  box-shadow: none;
}
.btNewCourse:active:focus,.btNewCourse:focus{
  color: #FFF;
    background-color: #D26900;
    border-color: none;
}
.btMore{
  width:100%;
  height:43px;
  vertical-align: middle;
  background-color:#2abe8f;
  border:none;
  font-size:1.125rem;/*18px*/
  color:#FFF;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  margin-top:10px;
}
.btMore:hover{
  background-color: #26AE82;
  font-size: 1.3125rem;/*21px*/
  color: #FFF;
}
.btMore:active:hover,.btMore:active{
  color: #FFF;
    background-color: #26AE82;
    border-color: none;
  box-shadow:none;
}
.btMore:active:focus,.btMore:focus{
  color: #FFF;
    background-color: #26AE82;
    border-color: none;
}
.blockStyle ul{
  margin:0px;
  padding:0px;
}
.blockStyle li.indentFix{
  text-indent:0px;
  padding-left:0px;
}
.blockStyle li.indentFix img{
  border:solid 1px #949494;
}
.blockStyle li p{
  text-indent:-13px;
  padding-left:28px;
}
.blockStyle li{
  text-indent:-13px;
  padding-left:28px;
  list-style:none;
  margin-bottom:19px;
}
.blockStyle li a:hover{
  text-decoration:none;
}
.blockStyle .fa-bookmark{
  font-size:1.375rem;/*22px*/
  letter-spacing:0.5em;
  vertical-align:text-top;
  color:#ff9806;
}
.blockStyle .date{
  color:#b5a997;
}
.blockStyle{
  border: solid 1px #afafaf;
  overflow: hidden;
  margin-bottom: 52px;
  background-color: #FFF;
}
.blockStyle .img-responsive{
  width:100%;
}
.blockStyle .title01{
  font-size:1.625rem;/*30px*/
  color:#005043;
  line-height:1;
  margin-top:30px;
  margin-bottom:40px;
}
.blockStyle .col-md-12>ul{
  padding:0px;
}
.blockStyle:hover .title02{
  bottom:0px;
  height:100%;
}
.blockStyle:hover .title02 h1{
  margin:30px 0px 40px;
}
.blockStyle:hover .title02 p{
  margin:0px 0px 30px;
  padding:0px;
  font-size:1rem;
  line-height:1.5rem;
}
.blockStyle .title02 h1{
  transition:all .3s; 
  font-size:1.625rem;/*30px*/
  margin:15px 0px 40px;
}
.blockStyle .title02{
  transition:all .3s; 
  padding:0px 15px 0px;
  color:#FFF;
  line-height:57px;
  position:absolute;
  width:100%;
  bottom:0px;
  height:54px;
  background-color:rgba(0,0,0,0.5);
  z-index:1;
}
.blockStyle .title02 p{
  line-height:2.5rem;
  margin-bottom:30px;
}
.blockStyle:hover .title03{
  bottom:0px;
  height:100%;
}
.blockStyle:hover .title03 h1{
  margin:30px 0px 20px;
}
.blockStyle:hover .title03 p{
  margin:0px 0px 30px;
  padding:0px;
  font-size:1rem;
  line-height:1.5rem;
}
.blockStyle .title03 h1{
  transition:all .3s; 
  font-size:1.625rem;/*30px*/
  margin:15px 0px 20px;
}
.blockStyle .title03{
  transition:all .3s; 
  padding:0px 15px 0px;
  color:#FFF;
  line-height:57px;
  position:absolute;
  width:100%;
  bottom:0px;
  height:96px;
  background-color:rgba(0,0,0,0.5);
  z-index:1;
}
.blockStyle .title03 p{
  line-height:2.5rem;
  margin-bottom:10px;
}
ul.blockMenu{
  margin:0px;
  padding-left:15px;
}
ul.blockMenu li a{
  color:#FFF;
}
ul.blockMenu li{
  padding-right:15px;
}
ul.blockMenu li a:hover{
  color:#FF3;
}
ul.blockMenu .col-xs-12{
  line-height:1.5rem;
  padding-left:15px;
}
.blockStyle:hover .imgHoverScale{
  transform: scale(1.1,1.1);
  -ms-transform: scale(1.1,1.1);  /* IE 9 */
  -webkit-transform: scale(1.1,1.1);  /* Safari 和 Chrome */
  -o-transform: scale(1.1,1.1); /* Opera */
  -moz-transform: scale(1.1,1.1); /* Firefox */
}
.blockStyle .imgHoverScale{
  transition:all 1s;
  transform: scale(1,1);
  -ms-transform: scale(1,1);  /* IE 9 */
  -webkit-transform: scale(1,1);  /* Safari 和 Chrome */
  -o-transform: scale(1,1); /* Opera */
  -moz-transform: scale(1,1); /* Firefox */
}
a.taiwanese{
  display:block;
}

/*start login*/
.popupBody{
  padding:5px 26px 0px;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  background-color:#FFF;
  overflow:hidden;
}
.popupBody .title{
  font-size:24px;
}
.popupBody .attentBody{
  color:#FFF;
  padding: 6px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #c50711;
  background: -moz-linear-gradient(top,  #c50711 100%, #7d0006 100%);
  background: -webkit-linear-gradient(top,  #c50711 100%,#7d0006 100%);
  background: linear-gradient(to bottom,  #c50711 100%,#7d0006 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c50711', endColorstr='#7d0006',GradientType=0 );
}
.popupBody .attentBody p{
  margin:0px
}
.popupBody .attentBody .title{
  padding-bottom:1px;
  margin-bottom:1px;
  font-size:16px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #CC3300;
}
.popupBody .attentBody .content{
  font-size:14px;
}
.popupBody .popupClose{
  display:block;
  position:absolute;
  top:5px;
  right:26px;
  color:#999;
}
.popupBody .popupClose:hover{
  color: #333;
}
.popupBody .fb{
  display:block;
  padding:4px;
  background-color:#5c9ce8;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  color:#FFF;
  text-decoration:none;
  margin-top:5px;
}
.popupBody .fb:hover{
  background-color: #488FE6;
}
.popupBody .gPlus{
  display:block;
  padding:4px;
  background-color:#e0575f;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  color:#FFF;
  text-decoration:none;
  margin-top:5px;
}
.popupBody .gPlus:hover{
  background-color: #DE4E55;
}
.popupBody .gPlus p,.popupBody .fb p{
  display:inline-block;
  margin:0px;
  margin-left:10px;
  vertical-align:middle;
}
.popupBody .gPlus i,.popupBody .fb i{
  width:60px;
  text-align:center;
  border-right:solid 1px rgba(255,255,255,.5);
  vertical-align:middle;
}
.popupBody .divide{
  border-bottom:solid 1px #CCCCCC;
  margin:0px 0px 10px;
}
.popupBody .divide p{
  white-space:nowrap;
  width:35px;
  padding:0px 5px;
  margin:0px auto;
  background-color:#FFF;
  position:relative;
  top:10px;
}
.popupBody form{
  margin:0px;
}
.popupBody .submitArea{
  padding: 5px 36px;
  margin:0px -25px;
  background-color: #f0f0f0;
}
.popupBody .submitArea dd{
  margin:5px 0px;
}
.popupBody .submitArea dl{
  margin-bottom:0px;
}
.popupBody .submitArea i{
  color:#C00;
}
.popupBody .submitArea a{
  display:block;
  color: #333;
  text-decoration: none;
  text-indent:-10px;
  margin-left:20px;
}
.popupBody .submitArea a:hover span{
  color: #036;
}
.popupBody .submitArea .btLogin{
  width:auto;
  height:auto;
  padding:5px 15px;
  position:absolute;
  right:26px;
  top:15px;
  background-color:#b31920;
  border:none;
  font-size:1.125rem;/*18pt*/
  color:#FFF
}
.popupBody .submitArea .btLogin:hover{
  background-color: #b31920;
  color: #FF9;
}
.popupBody .submitArea .btLogin:active:hover,.popupBody .submitArea .btLogin:active,.popupBody .submitArea .btLogin .btn.active{
  color: #FF9;
    background-color: #b31920;
    border-color: none;
  webkit box-shadown:none;
  box-shadow:none;
}
.popupBody .submitArea .btLogin:active:focus,.popupBody .submitArea .btLogin:focus{
  color: #FF9;
    background-color: #b31920;
    border-color: none;
}
/*end login*/

/*===============================
  end content
===============================*/


/*===============================
  start footer
===============================*/
.footerBGColor{
  background:#585b53;
  padding-top:54px;
  padding-bottom:59px;
}
.copyright{
  font-size:0.875rem;/*14px*/
  color:#d3d3d3;
  line-height:28px;
  margin-bottom:30px;
}
.copyright a{
  color:#e0d077;
}
.fbFans{
  width:100%;
  height:280px;
  overflow:hidden;
  float:right;
  background-image:url(../images/pic_sample01.png);
  background-size:cover;
}
.shareGroup{
  float:right;
  margin-bottom:30px;
}
.shareGroup ul{
  width:194px;
  margin-bottom:19px;
  padding:0px;
}
.shareGroup li{
  list-style:none;
  float:left;
}
.shareGroup li+li{
  margin-left:10px;
}
.shareGroup a.twitter{
  transition:background .3s;
  background:url(../images/icon_twitter.png) center center;
  background-size: 58px 58px;
  display:block;
  width:58px;
  height:58px;
}
.shareGroup a.twitter:hover{
  background:url(../images/icon_twitter.png) center 58px;
  background-size: 58px 58px;
}
.shareGroup a.fb{
  transition:background .3s;
  background:url(../images/icon_facebook.png) center center;
  background-size:58px 58px;
  display:block;
  width:58px;
  height:58px;
}
.shareGroup a.fb:hover{
  background:url(../images/icon_facebook.png) center 58px;
  background-size: 58px 58px;
}
.shareGroup a.gPlus{
  transition:background .3s;
  background:url(../images/icon_g+.png) center center;
  background-size:58px 58px;
  display:block;
  width:58px;
  height:58px;
}
.shareGroup a.gPlus:hover{
  background:url(../images/icon_g+.png) center 58px;
  background-size: 58px 58px;
}
.btOldWebsite{
  width:194px;
  height:44px;
  vertical-align: middle;
  background-color:#2abe8f;
  border:none;
  font-size:1.125rem;/*18px*/
  color:#FFF
}
.btOldWebsite:hover{
  background-color: #24A67B;
  font-size: 1.3125rem;/*21px*/
  color: #FFF;
}
.btOldWebsite:active:hover,.btOldWebsite:active{
  color: #FFF;
    background-color: #24A67B;
    border-color: none;
  box-shadow:none;
}
.btOldWebsite:active:focus,.btOldWebsite:focus{
  color: #FFF;
    background-color: #24A67B;
    border-color: none;
}


/*===============================
  end footer
===============================*/




@media (max-width: 767px) {
/*===============================
  start header
===============================*/
a.btHamburger{
  display:block;
  margin:20px 0px;
}
ul.navMenu{
  display:none;
}
  #mobileOneRow    { display: block; }
  #midRow    { display: none; }
  #rightRow    { display: none; }
  #oneRowHidden1 { display: none; }
  #oneRowHidden2 { display: none; }
  #oneRowHidden3 { display: none; }
  .attentBody { display: none; }
  #gPlus { display: none; }
  #fb-btn { display: none; }
  .divide { display: none; }
  #loginIconGroup { display: block; }
/*===============================
  end header
===============================*/


/*===============================
  start content
===============================*/

/*===============================
  end content
===============================*/


/*===============================
  start footer
===============================*/
.shareGroup{
  float:left;
}
/*===============================
  end footer
===============================*/
}

@media (min-width: 768px) {
/*===============================
  start header
===============================*/
a.btHamburger{
  display:block;
}
.navMenu{
  display:none;
}
.HamburgerMenu{
  /* display:none !important; */
  display:none;
}
  #mobileOneRow    { display: none; }
  #midRow    { display: block; }
  #rightRow    { display: block; }
  #oneRowHidden1 { display: block; }
  #oneRowHidden2 { display: block; }
  #oneRowHidden3 { display: block; }
  #loginIconGroup { display: none; }
/*===============================
  end header
===============================*/


/*===============================
  start content
===============================*/

/*===============================
  end content
===============================*/


/*===============================
  start footer
===============================*/
.shareGroup{
  float:left;
}
/*===============================
  end footer
===============================*/
}

@media (min-width: 992px) {
/*===============================
  start header
===============================*/
a.btHamburger{
  display:none;
}
.navMenu{
  display:block;
}
ul.navMenu li a{
  width:90px;
}
.HamburgerMenu{
  display:none !important;
  /* display:none; */
}
  #mobileOneRow    { display: none; }
  #midRow    { display: block; }
  #rightRow    { display: block; }
  #oneRowHidden1 { display: block; }
  #oneRowHidden2 { display: block; }
  #oneRowHidden3 { display: block; }
  #loginIconGroup { display: none; }
/*===============================
  end header
===============================*/


/*===============================
  start content
===============================*/

/*===============================
  end content
===============================*/


/*===============================
  start footer
===============================*/
.shareGroup{
  float:right;
}
/*===============================
  end footer
===============================*/
}

@media (min-width: 1200px) {
/*===============================
  start header
===============================*/
ul.navMenu li a{
  width:113px;
}
.HamburgerMenu{
  /* display:none !important; */
  display:none;
}
  #mobileOneRow    { display: none; }
  #midRow    { display: block; }
  #rightRow    { display: block; }
  #oneRowHidden1 { display: block; }
  #oneRowHidden2 { display: block; }
  #oneRowHidden3 { display: block; }
  #loginIconGroup { display: none; }
/*===============================
  end header
===============================*/


/*===============================
  start content
===============================*/

/*===============================
  end content
===============================*/


/*===============================
  start footer
===============================*/

/*===============================
  end footer
===============================*/
}