/*css*/


#div1 .container {
    background:none !important;
   
   }
   
   
   
   .navbar-default {
       background-color: rgba(255, 255, 255, 0.8);
       border-color: #e7e7e7;
       margin-bottom: 0;   /*cover */
       /* position: fixed; */
       /* display: block; */
   }
   
   .container {
       background: #fff;
       /* box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); */
   }
   
   .padding0 {
       padding: 0px !important;
   }
   
   .section-wrap .image {
       text-align: center;
   }
   
   
   .section-wrap h2 {
       color: #e4312d;
       letter-spacing: .214em;
       padding: 5px;
       font-size: 30px;
       font-weight: 400;
   }
   
   .section-wrap h3 {
       color: red;
       font-size: 21px;
       letter-spacing: .214em;
       width: 80%;
       line-height: 30px;
       display: block;
       margin: 20px auto;
   }
   
   section p, section ul li, section ol li {
       font-size: 16px;
       font-family: 微軟正黑體, "Microsoft JhengHei", MingLiU, sans-serif;
       line-height: 35px;
   }
   
   .section-wrap p {
       text-align: center;
   }
   
   .section-wrap a {
       border: none;
   }
   
   
   .pic01 img{
       display: block;
       max-width: 600px;
       margin: 0 auto;
   }
   
   .box {
       box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
   }
   
   .box-img {
       /* max-height: 171px; */
       overflow: hidden;
       margin: 30px 0px;
   }
   
   .box p {
       background-color: #f4f4f4;
   }
   
   
   .box-contain {
       box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
       padding: 20px;
       margin-bottom: 30px;
   }
   
       .box-contain h3 {
           text-align: center;
           color: red;
           font-weight: 600;
           margin: 15px 0px;
       }
   
       .box-contain p {
           line-height: 1;
       }
   
   .class-row {
       margin: 0px;
       padding: 10px;
   }
   
       .class-row h4 {
           background-color: #f4f4f4;
           padding: 5px;
           margin: 0 auto 0 auto;
           font-size: 16px;
           text-align: center;
           line-height: 35px;
       }
   
   
       .class-row p {
           padding: 5px 15px;
           font-size: 16px;
           letter-spacing: 1.2;
       }
   
   
   .story-box p {
       padding: 10px 20px;
       line-height: 30px;
       text-align: left;
   }
   
   .story-box img {
       width: 100%;
   }
   
   .story-box h5 {
       font-size: 21px;
       text-align: center;
   }
   
   .class-column {
       color: #fff;
   }
   
       .class-column h2 {
           font-size: 28px;
       }
   
       .class-column img {
           width: 100%;
       }
   
   .mbr-gallery-item img {
   }
   
   .hvr-underline-from-left:before {
       content: "";
       position: absolute;
       z-index: -1;
       left: 0;
       right: 100%;
       bottom: 0;
       background: #fff !important;
       height: 4px;
       -webkit-transition-property: right;
       -moz-transition-property: right;
       -o-transition-property: right;
       transition-property: right;
       -webkit-transition-duration: 0.3s;
       -moz-transition-duration: 0.3s;
       -o-transition-duration: 0.3s;
       transition-duration: 0.3s;
       -webkit-transition-timing-function: ease-out;
       -moz-transition-timing-function: ease-out;
       -o-transition-timing-function: ease-out;
       transition-timing-function: ease-out;
   }
   
   .class-info {
       padding: 10px 5px;
       min-height: 200px;
   }
   
       .class-info h5 {
           text-align: center;
           font-size: 1.2em;
           color: #333;
       }
   
   
   
   .panel {
       text-align: left;
   }
   
   .panel-heading h3 {
       font-size: 1.5em;
       color: #354b60;
       margin: 20px 0px;
   }
   
   
   .panel-title a {
       font-size: 16px;
   }
   
   
   .panel-heading {
       font-family: 微軟正黑體, "Microsoft JhengHei", MingLiU, sans-serif;
       font-size: 21px;
   }
   
   
   .panel-body {
       font-size: 16px;
   }
   
   
   
   .title-h4 {
       color: #f00;
       font-size: 1.5em;
       margin-bottom: 0.5em;
       text-align: center;
   }
   
   .analysis ul li {
       display: block;
       text-align: center;
   }
   
   .analysis {
       text-align: center;
       margin: 10px 0px;
   }
   
   
   
   
   
   @media only screen and (max-width: 1921px) and (min-width: 1680px) {
       .btnJoin {
           color: #fff;
           font-size: 16px;
           position: absolute;
           padding: 5px;
           right: 20%;
       }
   }
   
   
   
   .tip {
       margin: 15px 0px;
   }
   
       .tip a {
           background-color: #1a89e7 !important;
           border: none;
           text-align: center;
           display: block;
           width: 220px;
           padding: 4px;
           margin: 10px auto;
       }
   
       .tip img {
           -moz-border-radius: 100%;
           -webkit-border-radius: 100%;
           border-radius: 100%;
           width: 90px;
           height: 90px;
       }
   
   .dashed-border {
       border-bottom: 1px dashed #ccc;
   }
   
   .form-control {
       display: block;
       width: 100%;
       font-size: 14px;
       line-height: 1.42857143;
       color: #373737;
       background-color: #f6f6f6;
       background-image: none;
       border: 2px solid #dddddd;
       -moz-border-radius: 0px;
       -webkit-border-radius: 0px;
       border-radius: 0px;
       -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
       -moz-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
       transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
   }
   
   .heading-center {
       text-align: center;
       font-family: 微軟正黑體, "Microsoft JhengHei", MingLiU, sans-serif;
       margin: 3% 0px 1% 0px;
   }
   
   .center {
       text-align: center;
   }
   
   
   
   .color-white {
       color: rgb(255, 255, 255) !important;
   }
   
   
   .hero_text {
       color: rgb(252, 78, 51);
       font-size: 42px;
       font-weight: 600;
       margin: 10px 0px 10px 0px;
   }
   
   
   
   .mbr-hero h3 {
       color: #333;
       margin: 5px 0px;
       font-size: 21px;
   }
   
   
   .mbr-hero p {
       color: #333;
       width: 80%;
       margin: 5px 0px;
       font-size: 18px;
   }
   
   
   .more {
       text-align: center;
       padding: 20px;
       /* border: bisque; */
   }
   
   
       .more a {
           font-family: 微軟正黑體, "Microsoft JhengHei", MingLiU, sans-serif;
           font-size: 1em;
           border: none;
           margin: 10px;
       }
   
       .more button {
           font-size: 18px;
           margin: 10px 15px;
       }
   
   .marginbottom25 {
       margin-bottom: 25px;
   }
   
   .map a {
       color: #333;
   }
   
   .card-box {
       margin-top: 20px;
   }
   
       .card-box img {
           width: 100%;
           height: 105px;
       }
   
   
   /*自適應RWD*/
   
   @media only screen and ( min-width:1922px) {
       .banner {
           height: 100%;
           margin-top: 10%;
           display: block;
           min-height: 600px;
       }
   
       .container {
           /*width: 100%;*/
           margin-right: auto;
           margin-left: auto;
           padding-left: 15px;
           padding-right: 15px;
       }
   
       .item img {
           position: absolute;
           right: 23%;
           top: 40px;
           z-index: 999;
           width: 300px;
       }
   }
   
   
   @media only screen and ( min-width:1922px) {
       .banner {
           height: 100%;
           margin-top: 10%;
           display: block;
           min-height: 600px;
       }
   
       .container {
           /*width: 100%;*/
           margin-right: auto;
           margin-left: auto;
           padding-left: 15px;
           padding-right: 15px;
       }
   
       .item img {
           position: absolute;
           left: 57%;
           top: 35px;
           width: 300px;
       }
   }
   
   @media only screen and ( min-width:1680px) and (max-width :1921px) {
       .banner {
           height: 100%;
           margin-top: 10%;
           display: block;
           min-height: 600px;
       }
   
       .container {
           /*width: 100%;*/
           margin-right: auto;
           margin-left: auto;
           padding-left: 15px;
           padding-right: 15px;
       }
   
       .item img {
           position: absolute;
           left: 63%;
           top: 30%;
           /* width: 380px; */
       }
   }
   
   
   
   @media only screen and ( min-width:1279px) and (max-width :1679px) {
       .banner {
           height: 100%;
           margin-top: 10%;
           display: block;
           min-height: 600px;
       }
   
       .container {
           /*width: 100%;*/
           margin-right: auto;
           margin-left: auto;
           padding-left: 15px;
           padding-right: 15px;
       }
   
       .item img {
           position: absolute;
           right: 21%;
           top: 21%;
           z-index: 999;
           /* width: 350px; */
       }
   }
   
   @media only screen and ( min-width:960px) and (max-width :1278px) {
   
       .banner {
           height: 100%;
           margin-top: 10%;
           display: block;
           min-height: 400px;
       }
   
       .container {
           /*width: 100%;*/
           margin-right: auto;
           margin-left: auto;
           padding-left: 15px;
           padding-right: 15px;
       }
   
       .item img {
           position: absolute;
           right: 9%;
           top: 35%;
           width: 250px;
           z-index: 999;
       }
   }
   
   @media only screen and ( min-width:768px) and (max-width :959px) {
   
   
       .banner {
           height: 100%;
           margin-top: 10%;
           display: block;
           min-height: 400px;
       }
   
       .container {
           /*width: 100%;*/
           margin-right: auto;
           margin-left: auto;
           padding-left: 15px;
           padding-right: 15px;
       }
   
       .item img {
           position: absolute;
           right: 10%;
           top: 35%;
           width: 250px;
           z-index: 999;
       }
   }
   
   @media only screen and ( min-width:481px) and (max-width :767px) {
   
       .banner {
           height: 100%;
           margin-top: 10%;
           display: block;
           min-height: 400px;
       }
   
       .container {
           /*width: 100%;*/
           margin-right: auto;
           margin-left: auto;
           padding-left: 15px;
           padding-right: 15px;
       }
   
       /*主視覺*/
       .view_pic {
           background-image: none;
           background: #e74c3c;
       }
   
       .item img {
           position: absolute;
           right: 20%;
           top: 500px;
           width: 300px;
           z-index: 999;
       }
   }
   
   @media only screen and ( min-width:321px) and (max-width :480px) {
   
   
       .banner {
           height: 100%;
           margin-top: 10%;
           display: block;
           min-height: 400px;
       }
   
       .container {
           margin-right: auto;
           margin-left: auto;
       }
   
       .hero_text {
           /* color: rgb(0, 0, 0); */
           font-size: 28px;
           font-weight: bold;
           left: -2px;
           letter-spacing: 1px;
           line-height: 40px;
           padding-bottom: 8px;
           position: relative;
           top: 8px;
           text-transform: uppercase;
           margin: 5px 0px;
       }
   
       .view_pic {
           background-image: none;
           background: #e74c3c;
       }
   
       .heading h2 {
           font-size: 2em;
       }
   
       #section-3 h2 {
           color: #fff;
           font-size: 28px;
           height: 60px;
       }
   
       .mbr-hero {
           padding-left: 25px;
           position: relative;
       }
   
       .width90 {
           width: 90%;
       }
   
       .width100 {
           width: 100%;
       }
   
       .item img {
           position: absolute;
           right: 20%;
           top: 290px;
           z-index: 999;
           width: 230px;
       }
   }
   
   @media only screen and ( max-width:320px) {
   
       .banner {
           height: 100%;
           margin-top: 10%;
           display: block;
           min-height: 400px;
       }
   
       .hero_text {
           /* color: rgb(0, 0, 0); */
           font-size: 1.6em;
           font-weight: bold;
           left: -2px;
           letter-spacing: 0px;
           line-height: 40px;
           padding-bottom: 5px;
           position: relative;
           top: 8px;
           text-transform: uppercase;
           /* margin: 5px 0px; */
       }
   
       .view_pic {
           background-image: none;
           background: #e74c3c;
       }
   
       .heading h2 {
           font-size: 2em;
       }
   
       #section-3 h2 {
           color: #fff;
           font-size: 28px;
           height: 60px;
       }
   
       .mbr-hero {
           padding: 25px;
           /* min-height: 200px; */
           position: relative;
       }
   
       .width90 {
           width: 90%;
       }
   
       .item img {
           position: absolute;
           right: 20%;
           top: 245px;
           z-index: 999;
           width: 200px;
       }
   }
   
   /*cover bootstrap*/
   @media (min-width: 768px) {
       .modal-dialog {
           width: 800px; /*調整尺寸*/
           margin: 30px auto;
       }
   }
   
   @media (max-width: 768px) {
       .testimonial-image {
           margin-top: 10px !important;
       }
   
   
   
       h3.hero_text {
           /* top: 80px; */
           padding-top: 130px;
       }
   
       .mbr-hero p {
           color: #333;
           width: 100%;
           margin: 30px 0px;
           font-size: 18px;
       }
   
       .mbr-hero {
           padding: 5px 0px;
       }
   }
   
   
   
   .fix-button-box {
       position: fixed;
       bottom: 4px;
       display: grid;
       right: 10px;
       z-index: 999;
       padding: 4px;
   }
   
       .fix-button-box a {
           padding: 0px !important;
           border: none;
           -moz-border-radius: unset;
           -webkit-border-radius: unset;
           border-radius: unset;
           margin-bottom: 10px;
       }
   
       .fix-button-box img {
           width: 45px;
           height: 45px;
       }
   
           .fix-button-box img:hover {
               opacity: .6;
           }
   
   .youtube-row {
       display: block;
       text-align: center;
   }
   
   
   /*slider banner*/
   .carousel-indicators {
       position: absolute;
       bottom: -50px;
       z-index: 15;
       width: 60%;
       padding-left: 0;
       margin-left: -30%;
       text-align: center;
       list-style: none;
   }
   
   @media only screen and ( min-width:768px) {
   
       #carousel-example {
           margin: 0 auto;
           width: 440px;
       }
   }
   
   @media only screen and ( min-width:960px) and (max-width :1278px) {
       .top-banner {
           position: relative;
           overflow: hidden;
       }
   }
   
   @media only screen and ( min-width:481px) and (max-width :959px) {
       .top-banner {
           position: relative;
           overflow: hidden;
       }
   
       #div2 .class-column {
           color: #000;
           display: block !important;
           margin: 0px auto 130px auto;
           padding: 0px 40%;
           text-align: center;
       }
   }
   
   @media only screen and ( min-width:321px) and (max-width :480px) {
       .top-banner {
           position: relative;
           margin: 0px;
           width: 100%;
       }
   
       #div2 .class-column {
           color: #000;
           display: block !important;
           margin: 0px auto 120px auto;
           text-align: center;
       }
   }
   
   @media only screen and ( max-width:320px) {
       .top-banner {
           position: relative;
           margin: 0px;
           width: 100%;
       }
   
       #div2 .class-column {
           color: #000;
           display: block !important;
           margin: 0px auto 120px auto;
           text-align: center;
       }
   }
   
   
   
   .glyphicon img {
       width: 150px;
   }
   
   
   
   .info {
       color: #000;
       background-color: #fffa65;
       font-family: 微軟正黑體, "Microsoft JhengHei", MingLiU, sans-serif;
       font-size: 1.2em;
       padding: 5px 10px;
       margin: 10px auto;
       border: none;
       width: 90%;
   }
   
   
   #gotop {
       bottom: 30px;
       background: rgba(1,1,1,.5);
       -moz-border-radius: 50%;
       -webkit-border-radius: 50%;
       border-radius: 50%;
       color: white;
       cursor: pointer;
       font-size: 1em;
       font-family: arial;
       position: fixed;
       padding: 10px;
       width: 40px;
       height: 40px;
       right: 30px;
       z-index: 99;
   }
   
   /*bottom style*/
   
   #bottom {
       position: fixed;
       bottom: 0;
       left: 0;
       width: 100%;
       z-index: 10000;
       text-align: center;
       line-height: 1em;
       padding: 0;
   }
   
   .fixFooterRow {
       background: rgba(0, 0, 0, 0.6);
       padding: 30px;
       height: 100px;
       vertical-align: middle;
   }
   
       .fixFooterRow img {
           width: 36px;
           margin: 0 10px;
       }
   
   
   .animate-bottom {
       position: relative;
       -moz-animation: animatebottom 0.4s;
       -o-animation: animatebottom 0.4s;
       -webkit-animation: animatebottom 0.4s;
       animation: animatebottom 0.4s;
   }
   
   .hide {
       display: none !important;
   }
   
   .show-block, .show {
       display: block !important;
   }
   
   .show-inline-block {
       display: inline-block !important;
   }
   
   .banner-google {
       margin: 0px 10px 30px 10px;
       padding: 0px;
       border: 1px solid #fff;
       display: inline-block;
   }
   
       .banner-google img {
           max-width: 336px;
           width: 100%;
       }