@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url('https://fonts.googleapis.com/css?family=Staatliches');
@import 'reset.css';
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Noto Sans TC', sans-serif;
}
a,a:hover {text-decoration: none; outline: none; /* for Firefox */
 hlbr:expression(this.onFocus=this.blur()); /* for IE */
}

body, html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    _height:100%;
    background: url(../images/bg.jpg);
    background:#fff;
     color: #000;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    background-attachment: fixed;
    letter-spacing: 3px;

}

::selection {background: #d1d1d1;}
::-moz-selection {background:#d1d1d1;}

.progress {

  background-color: #ebe3dd;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 9999999999;
  text-align: center;
  top: 0;
  color: #000; }


.progress-text {
  position: fixed;
  top: 50%;
  left: 0;
  width: 400px;
  text-align: center;
  font-size: 20px;
  font-family: 'Noto Sans TC', sans-serif; }

.loading {
  width: 400px;
  height: 256px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -200px 0 0 -200px; }



#WRAP {  
 width: 100%;
  min-width: 640px;
  height: auto;
  display: block;
  overflow: hidden;
  margin: auto;
}

.hid-xs{display: block;}
.bg-white{background:rgba(255,255,255,1);}
.bg-gray{background: #eee;width: 100%;height: 3000px;position: absolute;
 -webkit-transition: all 0.4s linear;
   -moz-transition: all 0.4s linear;
   -o-transition: all 0.4s linear;
   -ms-transition: all 0.4s linear;
   transition: all 0.4s linear;}
.display-none{display: none;}
.hover{
  -webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
   -o-transition: all 0.1s linear;
   -ms-transition: all 0.1s linear;
   transition: all 0.1s linear;
}
.btn{background: #339aa7; width: auto;padding: 15px 25px; color: #fff;margin: 10px auto;border-radius: 50px; display:inline-block; text-align: center;font-weight: 400;font-size: 17px;letter-spacing: 2px;cursor: pointer;
-webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
   -o-transition: all 0.1s linear;
   -ms-transition: all 0.1s linear;
   transition: all 0.1s linear;}
.btn:hover{background: #3dbece;color: #fff;}
.btn2{background: #339aa7; width: 40%;padding: 15px 25px; color: #fff;margin: 0 auto;margin-top: 25px; border-radius: 50px;  text-align: center;font-weight: 400;font-size: 17px;letter-spacing: 2px;cursor: pointer;
-webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
   -o-transition: all 0.1s linear;
   -ms-transition: all 0.1s linear;
   transition: all 0.1s linear;}
.btn2:hover{background: #3dbece;color: #fff;}
.btn3{background: #131313; width: 40%;padding: 15px 25px; color: #fff;margin: 0 auto;margin-top: 25px; border-radius: 50px;  text-align: center;font-weight: 400;font-size: 17px;letter-spacing: 2px;cursor: pointer;
-webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
   -o-transition: all 0.1s linear;
   -ms-transition: all 0.1s linear;
   transition: all 0.1s linear;}
.btn-big{background: #339aa7; width: 50%;padding: 25px 55px; color: #fff;margin: 0 auto;margin-top: 25px; border-radius: 50px;  text-align: center;font-weight: 400;font-size: 20px;letter-spacing: 2px;cursor: pointer;
-webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
   -o-transition: all 0.1s linear;
   -ms-transition: all 0.1s linear;
   transition: all 0.1s linear;}
.btn-big:hover{background: #3dbece;color: #fff;}
.active{background-color: #be9e56;color: #fff;}
.flow{display: none; width: 196px;height: 199px; position: fixed;bottom: 0px;right: 0px;z-index: 99;cursor: pointer;}
.fb-s{position: fixed;top: 0px;left: 0px;z-index: 101;margin: 20px 0 0 20px;}
.scroll-top{background: url(../images/scroll-top.png)center;width:66px;height: 66px;position: fixed;bottom: 8%;right: 20px;display: none;cursor: pointer;z-index: 888; }
.side-flow{background: url(../images/side-flow.png)center;width:49px;height: 894px;position: fixed;top: 120px;left: 20px;display: none;z-index: 79; }
p{letter-spacing: 2px;font-weight: 300;font-size: 17px;}
img{-webkit-transform: scale(1);transform: scale(1);-webkit-transition: .9s ease-in-out;transition: .9s ease-in-out;}
footer{padding: 20px;background: #252525;text-align: center;letter-spacing: 1px;color: #999;font-size: 0.3rem;position: relative;z-index: 81;}


@media only screen and (min-width: 0px) and (max-width: 640px) {
  .hid-xs{display: none;}
  p{font-size: 21px;}
  .btn{width: 60%;padding: 25px 45px;display:table;margin:0 auto; text-align: center;font-weight: 300;font-size: 21px;}
  footer{font-size: 20px;}
  .side-flow{display: none!important;}
  .btn2{width: 60%;padding: 15px 25px;  font-size: 21px;letter-spacing: 1px;cursor: pointer;}
  .btn3{width: 60%;padding: 15px 25px;  font-size: 21px;letter-spacing: 1px;cursor: pointer;}
  .btn-big{font-size: 21px;}
  .active{background-color: #be9e56;color: #fff;}
  .scroll-top{background: url(../images/scroll-top-m.png)center;}
}

/*主視覺區塊*/
#KV{background: url(../images/0918_01.jpg)center;position: relative;height: 100vh; min-height: 750px; max-height: 930px; overflow: hidden;z-index: 99;min-width: 1200px;}
#KV .con{width: 1200px;height: 966px;margin: 0 auto; position: relative;z-index: 80;}
#KV .kv-bg{width: 100%;height: 1200px;background:url('../images/0918_01.jpg') center center;position: absolute;top: -10%; }
#KV .top100-logo{background: url(../images/top100-logo.png)center;width: 170px;height: 165px;position: absolute;top: -50px;right: 50px;}
#KV .product-bg01{width: 100%;height: 1200px;background:url('../images/product-bg01.png') center center;position: absolute;top: -60px;
  -webkit-animation-name: productUP;
  animation-name: productUP;
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite }
#KV .product-bg02{width: 100%;height: 1200px;background:url('../images/product-bg02.png') center center;position: absolute;top: -60px;
  -webkit-animation-name: productDOWN;
  animation-name: productDOWN;
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite }
 .flag01{background:url('../images/flag01.png') center center;width: 1400px;height: 217px;position: fixed;top: -20px;left: 0;z-index: 10;}
 .flag02{background:url('../images/flag02.png') center center;width: 1184px;height: 217px;position: fixed;top: 0;right: 0;z-index: 10;}
#KV .til-cube{width: 514px;height: 505px;position: absolute;right: 10%;top: calc(100vh - 785px);}
#KV .til-cube .kv-til1{background: url(../images/kv-til.png)center;width: 487px;height: 365px;margin: 0 auto;text-indent: -9999px;margin-top: 10px;}
#KV .til-cube .til-border{border: 1px #339aa7 solid;width: 514px;height: 304px;padding: 10px;margin: 0 auto; margin-top: 15px;position: relative; }
#KV .til-cube .til-border .kv-class{overflow: hidden; background:url('../images/kv-class-cover.jpg') center center;width: calc(100% - 20px);height: calc(100% - 20px); position: absolute;  }
#KV .til-cube .til-border .kv-class img{width: 100%; -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .9s ease-in-out;
    transition: .9s ease-in-out;}
#KV .til-cube .til-border:hover img{-webkit-transform: scale(1.1);
    transform: scale(1.1);}  
#KV .til-cube .til-border .kv-black{background:rgba(0,0,0,0.3);width: calc(100% - 20px);height: calc(100% - 20px);position: absolute;}
#KV .til-cube .til-border .kv-class-p{line-height: 1.6; font-size: 22px;color: #fff;text-align: center;font-weight: 500;position: absolute;width: 400px; left: 50%;top: 50%;margin-left: -200px;margin-top: -80px;}
#KV .til-cube .til-border .kv-class-p span{font-weight: 300;}
#KV .til-cube .til-border .kv-class-p .btn{width: 50%;line-height: 30px;}
#KV .wine{background:url('../images/wine.png') center center;width: 236px;height: 174px;position: absolute;left: 390px;top:calc(100vh - 32%);}
#KV .bottle{background:url('../images/botton.png') center center;width: 116px;height: 200px;position: absolute;left: -80px;top:calc(100vh - 32%);}
#KV .female{background: url(../images/cook.png)center;width: 880px;height: 796px;position: absolute;left: -100px;top:calc(100vh - 796px);}
#KV .grass04{background: url(../images/grass04.png)center;width: 293px;height: 470px; position: absolute;right: -50px;bottom:-90px;transform-origin: bottom center;
  -webkit-animation-name: grass01;
  animation-name: grass01;
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite }
  #KV .grass05{background: url(../images/grass05.png)center;width: 391px;height: 338px; position: absolute;left: -100px;top:30%;transform-origin: center left;
  -webkit-animation-name: grass01;
  animation-name: grass01;
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite }
    #KV .grass06{background: url(../images/grass06.png)center;width: 268px;height: 338px; position: absolute;right: -50px;top:38%;transform-origin: center right;
  -webkit-animation-name: grass01;
  animation-name: grass01;
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite }
      #KV .grass07{background: url(../images/grass07.png)center;width: 391px;height: 338px; position: absolute;right: -90px;top:20%;transform-origin: center right;
  -webkit-animation-name: grass01;
  animation-name: grass01;
  -webkit-animation-duration: 7s;
  animation-duration: 7s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite }
.fb-s-m{z-index: 101; background:url(../images/fbshare-t.png);width: 66px;height: 47px;cursor: pointer;position: fixed;bottom: 16%;right: 20px;display: none;}
@-webkit-keyframes grass01 {
  0% {
  -webkit-transform: rotate(-5deg);
}
50% {
  -webkit-transform: rotate(5deg);
}
100% {
  -webkit-transform: rotate(-5deg);
}
}@keyframes grass01 {
  0% {
  transform: rotate(-5deg);
}
50% {
  transform: rotate(5deg);
}
100% {
  transform: rotate(-5deg);
}
}
@-webkit-keyframes goani {

  0%{ transform:scale(1) ;}
  50%{ transform:scale(0.9) ;}
  100%{ transform:scale(1) ;}
}
@keyframes goani {

  0%{ transform:scale(1) ;}
  50%{ transform:scale(0.9) ;}
  100%{ transform:scale(1) ;}
}

/* 視窗寬度小於1440時的 CSS。(FOR-1280)*/
@media screen and (max-width: 1439px) {
#KV .til-cube{top: 8%;}
#KV .kv-bg{top: -20%; }
#KV .til-cube .kv-til1{background-size: cover;width: 420px;height: 310px;}
#KV .til-cube .til-border{;width: 480px;height: 280px;padding: 10px;margin-top: 15px;position: relative; }
#KV .female{top:calc(100vh - 726px);}
.flag01{top: -40px;}
.flag02{top: -20px;display: none;}
#KV .kv-bg{background:url('../images/m-bg2.jpg') center ;}
}

@media only screen and (min-width: 0px) and (max-width: 640px) {
#KV{max-height: 1138px; min-width: 640px;}
#KV .con{width: 640px;height:1138px; }
#KV .til-cube{width: 570px;height: 485px;right: 5%;top: 7%;padding: 15px;}
#KV .til-border{border: 3px #be9e56 solid;width: 100%;height: 100%;padding: 40px 20px;}
#KV .kv-til2{background: url(../images/kv-til.png)center no-repeat;width: 497px;height: 365px;background-size: contain; text-indent: -9999px;margin-top: 10px;}
#KV .til-border .kv-til3{background: url(../images/top100-til.png)center;width: 352px;height: 45px;text-indent: -9999px;margin-top: 10px;}
#KV .female{width: 832px;height: 760px;position: absolute;left: -50px;top: 420px;}
.fb-s-m{z-index: 101; background:url(../images/fbshare.png);width: 66px;height: 66px;cursor: pointer;position: fixed;bottom: 8%;left: 20px; }
#KV .bottle{left: 30px;top:calc(100vh - 20%);}
#KV .til-cube .til-border{ margin-top: 355px; }
#KV .grass06{top: 36%;}
#KV .grass05{top: 40%;}
#KV .grass07{top: 30%;} 
#KV .wine{left: -30%;}
#KV .til-cube .til-border .kv-class-p{line-height: 1.6; font-size: 28px;color: #fff;text-align: center;}
#KV .til-cube .til-border .kv-class-p span{font-weight: 300;}
#KV .til-cube .til-border .kv-class-p .btn{width: 60%;line-height: 20px;margin-top: 10px;font-weight: 500;}
}

/*首頁介紹*/
#INFO{background:#eeeeee;background: url(../images/bgall.jpg)center;background-attachment: fixed; position: relative;height: auto; overflow: hidden;min-width: 1200px;padding: 30px 0;}
#INFO .con{width: 1200px;height: auto;margin: 0 auto; position: relative;}
#INFO  .info-box{background: url(../images/info-bg.png)center;width: 1200px;height: 885px;padding: 50px;margin-top: 30px;}
#INFO .info-con{width: 550px;margin-left: 420px;margin-top: 180px;}
#INFO .info-con h3{font-size: 30px;color: #000;margin-top: 30px;margin-top: 50px;}
#INFO .info-con p{text-align: justify; font-size: 16px;color: #000;line-height: 2;margin-top: 10px;}
@media only screen and (min-width: 0px) and (max-width: 640px) {
#INFO{min-width: 640px;}
#INFO .con{width: 640px;}
#INFO .info-box{background: url(../images/info-bg-m.png)center;width: 640px;height: 1180px;padding: 50px;margin-top: 30px;}
#INFO .info-con{width: auto;margin-top: 130px;padding: 40px;margin-left: 0;}
#INFO .info-con h3{font-size: 32px;color: #000;margin-top: 30px;margin-top: 50px;line-height: 1.6;}
#INFO .info-con p{text-align: justify; font-size: 21px;color: #000;line-height: 2;margin-top: 20px;}
}
/*課程介紹*/
#CLASS{background:#eeeeee;background: url(../images/bgall.jpg)center;background-attachment: fixed; position: relative;height: auto; overflow: hidden;min-width: 1200px;padding: 30px 0;}
#CLASS .con{width: 1200px;height: auto;margin: 0 auto; position: relative;}
#CLASS h1{font-size: 51px;color: #339aa7;text-align: center;font-weight: 600;letter-spacing: 2px;}
#CLASS .class-con{width: 1200px;margin-top: 60px;}
#CLASS .class-col{width: 33.3%;float: left;background: #000;position: relative;}
#CLASS .class-col .class-img{width: 100%;height: auto;overflow: hidden;}
#CLASS .class-col .class-img img{width: 100%;height: auto;-webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .9s ease-in-out;
    transition: .9s ease-in-out;}
#CLASS .class-col:hover  img{-webkit-transform: scale(1.1);transform: scale(1.1);}
#CLASS .class-col .class-blk{background:rgba(0,0,0,0.5);width: 100%;height:100%;position: absolute;top: 0;-webkit-transition: .9s ease-in-out;transition: .9s ease-in-out;}
#CLASS .class-col:hover .class-blk{background:rgba(0,0,0,0.2);}
#CLASS .class-col .class-word{position: absolute;width: 100%;top: 15%;opacity: 1;}
#CLASS .class-col .mon-til{margin:  0 auto; font-family: 'Staatliches', cursive;font-size: 95px;color: #eeabb4;text-align: center;font-weight: 100;}
#CLASS .class-col h4{font-size: 21px;text-align: center;color: #fff;font-weight: 300;margin-top: 5px;}
#CLASS .class-col h5{font-size: 27px;text-align: center;color: #fff;font-weight: 400;margin-top: 15px;}
#CLASS .class-col .btn2{margin-top: 15px;}
#CLASS .class-col .btn3{margin-top: 15px;}
#CLASS .class-col .border-blue{width: 365px;height: 305px;position: absolute;top: 16px;left: 16px;}
#CLASS .class-col:hover .border-blue{border: 2px solid #339aa7;}
@media only screen and (min-width: 0px) and (max-width: 640px) {
#CLASS{min-width: 640px;padding: 30px 0;}
#CLASS .con{width: 640px;}
#CLASS .class-con{width: 640px;margin-top: 30px;padding: 0 30px;}
#CLASS .class-col{width: 50%;}
#CLASS .class-col .mon-til{font-size: 45px;}
#CLASS .class-col .border-blue{width: 270px;height: 228px;position: absolute;top: 10px;left: 10px;}
}

/*HOWTO介紹*/
#HOWTO{background:#eeeeee;background: url(../images/bg2.jpg)center; position: relative;height: 1180px; overflow: hidden;min-width: 1200px;padding: 30px 0;}
#HOWTO .con{width: 1200px;height: auto;margin: 0 auto; position: relative;}
#HOWTO .howto-con{width: 100%;height: 910px;background:url(../images/how-bg.jpg)center top;  border: 8px solid #339aa7;margin-top: 50px;}
#HOWTO .til-bg{width: 1200px;height: 57px;background:url(../images/til-bg.png)center top;text-align: center;font-weight: 500;font-size: 32px;line-height: 57px;margin-top: 25px;}
#HOWTO .howto-con table.howw{width: 650px;margin-left: 100px;margin-top: 50px;}
#HOWTO .howto-con table.howw th{text-align: left; padding: 5px;font-family: 'Noto Sans TC', sans-serif;font-weight: 400;font-size: 20px;line-height: 1.6;}
#HOWTO .howto-con table.howw td{text-align: left; padding: 5px;font-family: 'Noto Sans TC', sans-serif;font-weight: 400;font-size: 20px;line-height: 1.6;}
#HOWTO .howto-con table.howw span{color: #339aa7;font-weight: 600;}

#HOWTO .gift-con{width: 100%;margin-top: 20px;padding: 0 30px;}
#HOWTO .gift-col{width: 30%;float: left;position: relative;margin: 0 15px;}
#HOWTO .gift-col .gift-img{clip-path: circle(45%);}
#HOWTO .gift-col .gift-img img{width: 100%;}
#HOWTO .gift-col h5{text-align: center;font-size: 24px;color: #339aa7;margin-top: 10px;}
#HOWTO .gift-col h6{text-align: center;font-size: 20px;color: #000;margin-top: 10px;line-height: 1.6;}

@media only screen and (min-width: 0px) and (max-width: 640px) {
#HOWTO{min-width: 640px;padding: 30px 0;height: auto;background: url(../images/m-bg.jpg)top left;}
#HOWTO .con{width: 640px;} 
#HOWTO .howto-con{width: 90%;height: 1250px;background:#fff;margin: 0 auto;  border: 8px solid #339aa7;margin-top: 50px;}
#HOWTO .til-bg{width: 100%;height: 57px;background:url(../images/til-bg.png)center top;font-size: 32px;line-height: 57px;margin-top: 25px;}
#HOWTO .howto-con table.howw{width: 95%;margin-left: 20px;margin-top: 20px;padding: 20px;}
#HOWTO .howto-con table.howw th{ padding: 10px;font-size: 24px;}
#HOWTO .howto-con table.howw td{ padding: 10px;font-size: 24px;}
#HOWTO .gift-col h5{font-size: 28px;}
#HOWTO .gift-col{width: 44%;float: left;margin: 0 15px;}
}
/*插畫家介紹*/
#ARTIST{background:#eeeeee;background: url(../images/bgall.jpg)center;background-attachment: fixed; position: relative;height: auto; overflow: hidden;min-width: 1200px;padding: 30px 0 80px 0;}
#ARTIST .con{width: 1200px;height: auto;margin: 0 auto; position: relative;}
#ARTIST .about-big .about-img-cube{width: 50%;height: 600px;float: left;overflow: hidden;position: relative;}
#ARTIST .about-big .about-img-cube .about-img{width: 600px;height: 600px;
-webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .9s ease-in-out;
    transition: .9s ease-in-out;}
#ARTIST .about-big:hover .about-img {
  -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
#ARTIST .about-big .about-word-cube{width: 50%;background: #fff;height: 600px;padding: 60px 60px;float: left;}
#ARTIST .about-big .about-word-cube h2{font-size: 32px;font-weight: 700;text-align: center;letter-spacing: 1px;margin-top: 30px;} 
#ARTIST .about-big .about-word-cube h3{margin-top: 20px; font-size: 90px;color: #339aa7;font-family: 'Staatliches', cursive;text-align: center;}
#ARTIST .about-big .about-word-cube p{line-height: 2.2;text-align: justify;margin-top: 10px;color: #000;padding: 0 20px;}

#ARTIST .about-big .about-img01{background: url(../images/about-img01.jpg)center; }
@media only screen and (min-width: 0px) and (max-width: 640px) {
#ARTIST{min-width: 640px;padding: 30px 0 80px 0;}
#ARTIST .con{width: 640px;}
#ARTIST .about-big .about-img-cube{width: 540px;height: 430px;display: inline-block;margin: 0 50px;margin-top: 20px;}
#ARTIST .about-big .about-word-cube{width: 540px;background: #fff;height: auto;padding: 50px 30px;margin: 0 50px;float: left;}
#ARTIST .about-big .about-word-cube h2{margin-top: 10px;} 

}

/*常見Q&A*/
#QA{background:#eeeeee;background: url(../images/bg2.jpg)center; position: relative;height: auto; overflow: hidden;min-width: 1200px;padding: 30px 0;}
#QA .con{width: 1200px;height: auto;margin: 0 auto; position: relative;}
#QA .QA-con{width: 100%;padding: 90px;background: rgba(255,255,255,0.8);margin-top: 100px;}
#QA .QA-con h1{font-size: 51px;color: #339aa7;text-align: center;font-weight: 600;letter-spacing: 2px;}
#QA .QA-con h3{font-size: 25px;color: #339aa7;font-weight: 500;letter-spacing: 1px;}
#QA .QA-con p{font-size: 16px;color: #000;font-weight: 300;letter-spacing: 1px;line-height: 2;margin:10px 0 40px 0;}
#QA .QA-con h4{border: 1px solid #339aa7;font-size: 19px;line-height: 1.8;color:#339aa7; padding: 30px;}
#QA .QA-con hr{margin: 70px 0;}
@media only screen and (min-width: 0px) and (max-width: 640px) {
#QA{min-width: 640px;}
#QA .con{width: 640px;}
#QA .QA-con{width: 90%;padding: 50px;margin: 0 auto; margin-top: 60px;}
#QA .QA-con h1{font-size: 51px;}
#QA .QA-con h3{font-size: 32px;line-height: 1.6;}
#QA .QA-con p{font-size: 21px;text-align: justify;}
#QA .QA-con hr{margin: 40px 0;}
#QA .QA-con h4{font-size: 21px;}
}

/*實驗室公約*/
#CONVENT{background:#eeeeee;background: url(../images/bgall.jpg)center; position: relative;height: auto; overflow: hidden;min-width: 1200px;padding: 30px 0;}
#CONVENT .con{width: 1200px;height: auto;margin: 0 auto; position: relative;}
#CONVENT .CONVENT-con{width: 100%;padding: 90px;background: rgba(255,255,255,0.8);margin-top: 100px;}
#CONVENT .CONVENT-con h1{font-size: 51px;color: #339aa7;text-align: center;font-weight: 600;letter-spacing: 2px;}
#CONVENT .CONVENT-con h3{font-size: 25px;color: #339aa7;font-weight: 500;letter-spacing: 1px;}
#CONVENT .CONVENT-con p{font-size: 16px;color: #000;font-weight: 300;letter-spacing: 1px;line-height: 2;margin:10px 0 40px 0;}
#CONVENT .CONVENT-con h4{border: 1px solid #339aa7;font-size: 21px;line-height: 1.8;color:#339aa7; padding: 30px;}
#CONVENT .CONVENT-con hr{margin: 70px 0;}
#CONVENT .CONVENT-con ul{margin-left: 30px;line-height: 1.6;font-size: 16px;font-weight: 300;margin-top: -20px;}

@media only screen and (min-width: 0px) and (max-width: 640px) {
#CONVENT{min-width: 640px;}
#CONVENT .con{width: 640px;}
#CONVENT .CONVENT-con{width: 90%;padding: 50px;margin: 0 auto; margin-top: 60px;}
#CONVENT .CONVENT-con h1{font-size: 51px;}
#CONVENT .CONVENT-con h3{font-size: 32px;line-height: 1.6;}
#CONVENT .CONVENT-con p{font-size: 21px;word-break: break-all;}
#CONVENT .CONVENT-con hr{margin: 40px 0;}
#CONVENT .CONVENT-con h4{font-size: 21px;}
#CONVENT .CONVENT-con ul{font-size: 21px;}
}

/*TOPBAR區塊*/
#TOPBAR{background: url(../images/0918_01.jpg)center;position: relative;height: 565px; overflow: hidden;z-index: 9;}
#TOPBAR .topbar-bg{width: 100%;height: 1200px;position: absolute;top: -280px; }
.topbar01{background:url('../images/feb/topbar01.jpg') center;}
.topbar02{background:url('../images/apr/topbar01.jpg') center;}
.topbar03{background:url('../images/june/topbar01.jpg') center;}
.topbar04{background:url('../images/aug/topbar01.jpg') center;}
.topbar05{background:url('../images/oct/topbar01.jpg') center;}
.topbar06{background:url('../images/nov/topbar01.jpg') center;}


@media only screen and (min-width: 0px) and (max-width: 640px) {
#TOPBAR .topbar-cube{background: url(../images/topbar-cube-m.png)center;}
#TOPBAR .topbar-bg{width: 100%;height: 1200px;position: absolute;top:0; }
.topbar01{background:url('../images/feb/topbar01-m.jpg') center top;}
.topbar02{background:url('../images/apr/topbar01-m.jpg') center top;}
.topbar03{background:url('../images/june/topbar01-m.jpg') center top;}
.topbar04{background:url('../images/aug/topbar01-m.jpg') top;}
.topbar05{background:url('../images/oct/topbar01-m.jpg') center top;}
.topbar06{background:url('../images/nov/topbar01-m.jpg') center top;}
}

/*課程詳細內容*/
#COURSE{background:#eeeeee;background: url(../images/bgall.jpg)center;background-attachment: fixed; position: relative;height: auto; overflow: hidden;min-width: 1200px;}
#COURSE .con{width: 1200px;height: auto;margin: 0 auto; position: relative;padding: 100px 0 30px 0 ;}
#COURSE .COURSE-con{width: 100%;margin-top: 30px;margin-bottom: 30px;display: inline-block;}
#COURSE .COURSE-con .COURSE-col-4{width: 40%;height: 521px; float: left;background: #fff;position: relative;padding: 80px 30px;overflow: hidden;}
#COURSE .COURSE-con .COURSE-col-4.apr{width: 50%;height: 521px; float: left;background: #fff;position: relative;padding: 20px 30px;overflow: hidden;}
#COURSE .COURSE-con .COURSE-col-4.june{padding: 40px 30px;}
#COURSE .COURSE-con .COURSE-col-4.aug{width: 50%;height: 660px;padding: 40px 30px;}
#COURSE .COURSE-con .COURSE-col-4.aug2{width: 50%;height: 550px;padding: 40px 30px;}
#COURSE .COURSE-con .COURSE-col-4.nov{width: 50%;height: auto;padding: 40px 30px;}
#COURSE .COURSE-con .COURSE-col-6{width: 60%;height: 521px;background: #fff;position: relative;overflow: hidden;}
#COURSE .COURSE-con .COURSE-col-6.apr{width: 50%; height: auto; line-height: 0;}
#COURSE .COURSE-con .COURSE-col-6.aug{width: 50%;height: 660px;}
#COURSE .COURSE-con .COURSE-col-6.aug2{width: 50%;height: 550px;}
#COURSE .COURSE-con .COURSE-col-4 h1{font-size: 32px;font-weight: 700;text-align: center;letter-spacing: 1px; line-height: 48px}
#COURSE .COURSE-con .COURSE-col-4 p{line-height: 2.2;text-align: justify;margin-top: 20px;color: #000;padding: 0 20px;}
#COURSE .COURSE-con .COURSE-col-4 p span{color: #339aa7;}
#COURSE .COURSE-con .COURSE-col-6 .owl-carousel{clear: both; width: 100%;text-align: center;z-index: 2;height: auto;background: #fff;}
#COURSE .COURSE-con .COURSE-col-6 .owl-carousel .item{width: 100%;height: auto;display: inline-block;background: #fff;}
#COURSE .COURSE-con .COURSE-col-6 .owl-carousel .item img{width: 100%;height: auto;}
#COURSE .COURSE-con .COURSE-col-6 .owl-carousel .owl-nav{position: absolute;width: 100%;top: 35%;background: none;}
#COURSE .COURSE-con .COURSE-col-6 .owl-carousel .owl-prev{background:url('../images/arrow.png') ;transform: rotate(180deg); background-size: cover; position: absolute; width: 79px;height: 123px;text-indent: -9999px;left: 10px;top: 2%;opacity: 1;margin: 0;}
#COURSE .COURSE-con .COURSE-col-6 .owl-carousel .owl-next{background:url('../images/arrow.png') ;background-size: cover;position: absolute;width:79px;height: 123px;text-indent: -9999px;right: 10px;top: 2%;opacity: 1;margin: 0;}
#COURSE .COURSE-con .COURSE-col-6 .owl-carousel .owl-dots{display: none;}
#COURSE .con h3{font-family: 'Staatliches', cursive;color: #ea919d;font-size: 78px;text-align: center;margin-top: 90px;clear: both;}
#COURSE .course-detail{width: 80%; border:8px solid #ea919d;margin: 0 auto; margin-top: 30px;padding: 60px 50px;}
#COURSE .course-detail ul li{margin-top: 10px;font-size: 17px;font-weight: 300;line-height: 2;letter-spacing: 1px;text-align: justify;}
#COURSE .course-detail ul li span{color: #339aa7;font-weight: 500;}
#COURSE .course-detail ul li span.price{color: #ea919d;}
#COURSE .course-detail ul li span.delete{color: #000;text-decoration:line-through;font-weight: 300;}


/*老師場地*/
#VENUE{background:#eeeeee;background: url(../images/bg2.jpg)center top;position: relative;height: auto; overflow: hidden;min-width: 1200px;}
#VENUE .con{width: 1200px;height: auto;margin: 0 auto; position: relative;padding:0 0 100px 0;} 
#VENUE .about-big {width: 100%;height: 500px;margin-top: 80px;display: inline-block;}
#VENUE .about-big.apr {height: auto;}
#VENUE .about-big .about-img-cube{width: 50%;height: 500px;float: left;overflow: hidden;position: relative;}
#VENUE .about-big .about-img-cube.apr{height: auto;}
#VENUE .about-big .about-img-cube img{width: 600px;height: 500px;
-webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .9s ease-in-out;
    transition: .9s ease-in-out;}
#VENUE .about-big .about-img-cube.apr img{height: auto;}
#VENUE .about-big:hover img {
  -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
#VENUE .about-big .about-word-cube{width: 50%;background: #fff;height: 500px;padding: 60px 60px;float: left;}
#VENUE .about-big .about-word-cube.apr{height: auto}
#VENUE .about-big .about-word-cube h2{font-size: 32px;font-weight: 700;text-align: center;letter-spacing: 1px;margin-top: 20px;} 
#VENUE .about-big .about-word-cube h3{margin-top: 10px; font-size: 90px;color: #339aa7;font-family: 'Staatliches', cursive;text-align: center;}
#VENUE .about-big .about-word-cube p{line-height: 2.2;text-align: justify;margin-top: 20px;color: #000;padding: 0 20px;}

@media only screen and (min-width: 0px) and (max-width: 640px) {
#COURSE{min-width: 640px;}
#COURSE .con{width: 640px;padding: 50px 0 30px 0 ;}
#VENUE{min-width: 640px;}
#VENUE .con{width: 640px;}
#COURSE .COURSE-con .COURSE-col-4,
#COURSE .COURSE-con .COURSE-col-4.apr,
#COURSE .COURSE-con .COURSE-col-4.nov
{width: 90%;height: auto; float: none;padding: 80px 30px;margin: 0 auto;}
#COURSE .COURSE-con .COURSE-col-6{width: 90%;height: auto;background: #fff;margin: 0 auto;}
#COURSE .COURSE-con .COURSE-col-6.apr{width: 90%;height: auto;}
#COURSE .COURSE-con .COURSE-col-6.aug{height: auto;}
#COURSE .COURSE-con .COURSE-col-4 h1{font-size: 35px; line-height: 45px}
#COURSE .con h3{font-size: 65px;margin-top: 40px;}
#COURSE .course-detail{width: 90%; margin-top: 30px;padding: 50px 30px;}
#COURSE .course-detail ul li{margin-top: 10px;font-size: 24px;font-weight: 300;line-height: 2;letter-spacing: 1px;}
#COURSE .course-detail ul li span{color: #339aa7;font-weight: 500;}

#VENUE .about-big{width: 540px;height: auto;display: inline-block;margin: 0 50px;margin-top: 60px;}
#VENUE .about-big .about-img-cube{width: 540px;height: 430px;display: inline-block;margin: 0 auto;float: none;}
#VENUE .about-big .about-word-cube{width: 540px;background: #fff;height: auto;padding: 50px 30px;margin: 0 auto;float: none;}
#VENUE .about-big .about-word-cube h2{margin-top: 10px;} 

}
 /*EC-STEP01 區塊*/
 #topbar{width: 100%;height: 230px;background: #222222;position: relative;}
 .topbar-logo{background: url(../images/ec/mc-logo.png)center;width: 409px;height: 90px;margin-top: -45px;top: 50%;left: 50%;margin-left: -205px; position: absolute;} 
 .next{line-height: 60px;width: 200px;text-align: center;background:#339aa7;color: #fff; margin: 40px auto;filter: brightness(1);cursor: pointer;}
 .next:hover{filter: brightness(1.3);}
 #ec-step01{background: #f5f1ee;position: relative;height: auto; overflow: hidden;min-width: 1200px; }
 #ec-step01 hr{height:1px;border:none;border-top:1px solid #c7c7c7;}
 #ec-step01 .con{width: 1200px;height: auto;margin: 0 auto; position: relative;padding:30px 0 80px 0;text-align: center;}
 #ec-step01 .step01-img{background: url(../images/ec/step01.png)center;width: 800px;height: 90px;margin: 30px auto 60px auto;}
 #ec-step01 .step01-s1{background: #ffffff;width: 100%;padding: 10px;}
 #ec-step01 .step01-s1 table{border-collapse: collapse;width: 100%;background: #fff;}
 #ec-step01 .step01-s1 th,td{padding: 35px;font-family: 'Noto Sans TC', sans-serif;font-weight: 400;font-size: 20px;}
 #ec-step01 .step01-s1 th{color: #000;text-align: center;background: #e7e7e7;}
 #ec-step01 .step01-s1 td{color: #000;text-align: center;}
 #ec-step01 .step01-s1 p{line-height: 1.6;text-align: left;}
 #ec-step01 .step01-s1 .total{text-align: right;font-size: 24px;color: #339aa7;padding: 20px;letter-spacing: 0;}
 
#ec-step01 .step01-s2{background: #ffffff;width: 100%;padding: 10px;margin-top: 20px;text-align: left;}
#ec-step01 .step01-s3{background: #ffffff;width: 100%;padding: 10px;margin-top: 20px;text-align: left;}
#ec-step01 .information{text-align: left;font-size: 21px;color: #000;padding: 20px;letter-spacing: 0;font-weight: 300;}
#ec-step01 .step01-s2 .form{width: 520px;padding: 30px 0 30px 20px; }
#ec-step01 .step01-s3 .form{width: 100%;padding: 30px 0 30px 20px; }
#ec-step01 .form-list{width: 520px;height: 52px; text-align: left;font-size: 21px;font-weight: 300;margin-top: 20px;color: #000;line-height: 50px;}
#ec-step01 .step01-s2 label{width: 18%;float:left;line-height:50px;}
#ec-step01 .step01-s2 input{line-height:50px;font-size:21px;padding-top:0px;width:70%;padding-left:10px;font-weight: 200;border: 1px solid #aeaeae;outline: none;}
#ec-step01 .step01-s2 input[type="radio"]{width: 20px;height: 20px;margin: 0 8px 0 0; line-height: 52px;vertical-align:middle;}
#ec-step01 .step01-s3 input[type="radio"]{width: 20px;height: 20px;margin: 0 8px 0 0; line-height: 52px;vertical-align:middle;}
#ec-step01 .step01-s2 select{height: 50px; line-height:50px;font-size:21px;width:30%;padding-left:10px;font-weight: 200;border: 1px solid #aeaeae;outline: none; }
#ec-step01 .step01-s2 input#adress{margin-left: 18%;}
#ec-step01 .step01-s3 input[type="checkbox"]{height:20px; width:20px;}
#ec-step01 .step01-s3 span{font-size: 20px;letter-spacing: 1px;margin-left: 5px;}
#ec-step01 .step01-s3 .chech-detail{width: 100%;background: #4f4f4f;padding: 30px;color: #fff;font-size: 16px;line-height: 1.7;font-weight: 300;letter-spacing: 1px;text-align: justify;}