body {
  font-family: "微軟正黑體", Arial, sans-serif;
  line-height: 1.8;
  font-size: 16px;
  background: #fff;
  color: #363636;
  font-weight: 300;
  overflow-x: hidden;
}
a:focus, a:hover{
  color:white;
}
#footer {
  background: #222831;
  padding: 60px 0 40px;
}
#footer .section-title {
  color: rgba(255, 255, 255, 0.8);
}
#footer .contact-info {
  margin: 0 0 10px 0;
  padding: 0;
}
#footer .contact-info li {
  list-style: none;
  margin: 0 0 15px 0;
  position: relative;
  padding-left: 40px;
}
#footer .contact-info li i {
  position: absolute;
  top: 5px;
  left: 0;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.7);
}
/*#footer .contact-info li a {
  color: rgba(255, 255, 255, 0.6);
}*/
#footer .contact-form .form-group input[type="name"],
#footer .contact-form .form-group input[type="text"],
#footer .contact-form .form-group input[type="email"],
#footer .contact-form .form-group textarea {
  font-size: 16px;
}
#footer .contact-form .form-group input[type="name"]::-webkit-input-placeholder,
#footer .contact-form .form-group input[type="text"]::-webkit-input-placeholder,
#footer .contact-form .form-group input[type="email"]::-webkit-input-placeholder,
#footer .contact-form .form-group textarea::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
#footer .contact-form .form-group input[type="name"]:-moz-placeholder,
#footer .contact-form .form-group input[type="text"]:-moz-placeholder,
#footer .contact-form .form-group input[type="email"]:-moz-placeholder,
#footer .contact-form .form-group textarea:-moz-placeholder {
  /* Firefox 18- */
  color: rgba(255, 255, 255, 0.5);
}
#footer .contact-form .form-group input[type="name"]::-moz-placeholder,
#footer .contact-form .form-group input[type="text"]::-moz-placeholder,
#footer .contact-form .form-group input[type="email"]::-moz-placeholder,
#footer .contact-form .form-group textarea::-moz-placeholder {
  /* Firefox 19+ */
  color: rgba(255, 255, 255, 0.5);
}
#footer .contact-form .form-group input[type="name"]:-ms-input-placeholder,
#footer .contact-form .form-group input[type="text"]:-ms-input-placeholder,
#footer .contact-form .form-group input[type="email"]:-ms-input-placeholder,
#footer .contact-form .form-group textarea:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
#footer .contact-form .form-group input {
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}
#footer .contact-form .form-group textarea {
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}
#footer #btn-submit {
  color: rgba(255, 255, 255, 0.9) !important;
  background: #4CB648 !important;
}
#footer .copy-right {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 50px;
  margin-top: 50px;
}
#footer .copy-right p {
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 1px;
  font-size: 14px;
  text-transform: uppercase;
}
#footer .copy-right p a {
  color: rgba(255, 255, 255, 0.5);
}

.btn {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.btn {
  text-transform: uppercase;
  letter-spacing: 2px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  font-size: 16px;
}
.btn.btn-primary {
  background: #7DAB27;
  color: #fff;
  border: none !important;
  border: 2px solid transparent !important;
}
.btn.btn-primary_more {
  background: transparent;
  color: #fff;
  border: none;
  border: 2px solid #7DAB27 ;
}
.btn.btn-primary:hover, .btn.btn-primary_more, .btn.btn-primary:active, .btn.btn-primary:focus {
  box-shadow: none;
  background: ;
  color: #fff !important;
}
.btn:hover, .btn:active, .btn:focus {
  background: #8FC133 ;
  color: #fff !important;
  outline: none !important;
}
.btn.btn-default:hover, .btn.btn-default:focus, .btn.btn-default:active {
  border-color: transparent;
}

.js .animate-box {
  opacity: 0;
}



#aboutUs{
  float: left;
  display: inline;
  width: 100%;
}
.about-us-area{
  float: left;
  display: inline;
  width: 100%;
}


.page-header {
    border-bottom: 1px solid #ccc;
    padding-top: 20px;
}

#portfolio .portfolio-item {
    margin: 0 0 15px;
    right: 0;
    height: 285px;
}
#portfolio .portfolio-item .portfolio-link {
  display: block;
  position: relative;
  max-width: 400px;
  margin: 0 auto;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover {
  background: rgba(254, 209, 54, 0.9);
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
  opacity: 1;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
  position: absolute;
  width: 100%;
  height: 20px;
  font-size: 20px;
  text-align: center;
  top: 50%;
  margin-top: -12px;
  color: white;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
  margin-top: -12px;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
  margin: 0;
}
#portfolio .portfolio-item .portfolio-caption {
  max-width: 400px;
  margin: 0 auto;
  background-color: white;
  text-align: center;
  padding: 25px;
}
#portfolio .portfolio-item .portfolio-caption h4 {
  font-weight: bold;
  text-transform: none;
  margin: 0;
}
#portfolio .portfolio-item .portfolio-caption p {
  font-family: "微軟正黑體", "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*font-style: italic;*/
  font-size: 15px;
  margin: 0;
}
#portfolio * {
  z-index: 2;
}

.portfolio-modal .modal-dialog {
  margin: 0;
  height: 100%;
  width: auto;
}
.portfolio-modal .modal-content {
  border-radius: 0;
  background-clip: border-box;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  min-height: 100%;
  padding: 60px 0;
  text-align: center;
}
.portfolio-modal .modal-content h2 {
  margin-bottom: 15px;
  font-size: 3em;
}
.portfolio-modal .modal-content p {
  /*margin-bottom: 30px;*/
}
.portfolio-modal .modal-content p.item-intro {
  margin: 20px 0 30px;
  font-family: "微軟正黑體", "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: 16px;
}
.portfolio-modal .modal-content ul.list-inline {
  margin-bottom: 30px;
  margin-top: 0;
}
.portfolio-modal .modal-content img {
  margin-bottom: 30px;
}
.portfolio-modal .close-modal {
  position: absolute;
  width: 75px;
  height: 75px;
  background-color: transparent;
  top: 25px;
  right: 25px;
  cursor: pointer;
}

.portfolio-modal .close-modal:hover {
  opacity: 0.3;
}
.portfolio-modal .close-modal .lr {
  height: 50px;
  width: 1px;
  margin-left: 35px;
  background-color: #222222;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Safari and Chrome */
  z-index: 1051;
}
.portfolio-modal .close-modal .lr .rl {
  height: 50px;
  width: 1px;
  background-color: #222222;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Safari and Chrome */
  z-index: 1052;
}
.portfolio-modal .modal-backdrop {
  opacity: 0;
  display: none;
}
hr{
  border:0; height:1px; background-color:#dfdfdf;
}
hr.soften {
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.8), rgba(0,0,0,0));
  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.8), rgba(0,0,0,0));
  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.8), rgba(0,0,0,0));
  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.8), rgba(0,0,0,0));
  border: 0;
}

.disp_content{
  font-family:"微軟正黑體";font-size:15px;color:#555;line-height:25px;
}

.goback{
  color:#555;
  font-size:13px;
  font-family:"微軟正黑體";
}

.modal_link:hover{
  opacity: 0.9;
  box-shadow: rgba(0,0,0,0.8) 0 15px 30px 0;
}


.sun-service div{
    padding:0 20px;
}
.sun-service h4{
    color:#555;line-height:30px;
}
.sun-service div{
    /*padding-top:10px*/
}
.sun-service img{
    float:left;
    padding:0px;
    box-shadow: rgba(0,0,0,0.6) 0 5px 15px 0;
    margin:0 20px 30px 10px;
}

.sun-service span{
    line-height:25px;font-size:15px;
}

#fh5co-pricing{
  background-color: #fff;
  padding: 7em 0;
}

#fh5co-pricing {
  background: #f9f9f9;
}
#fh5co-pricing .price-box {
  background: #fff;
  border: 2px solid #ECEEF0;
  text-align: center;
  padding: 30px;
  margin-bottom: 40px;
  position: relative;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}
#fh5co-pricing .price-box.popular {
  border: 2px solid #8dc63f;
}
#fh5co-pricing .price-box.popular .popular-text {
  top: 0;
  left: 50%;
  margin-left: -54px;
  margin-top: -2em;
  position: absolute;
  padding: 4px 20px;
  background: #8dc63f;
  color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
#fh5co-pricing .price-box.popular .popular-text:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border-top: 10px solid black;
  border-top-color: #8dc63f;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
#fh5co-pricing .pricing-plan {
  margin: 0 0 30px 0;
  padding: 0;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
}
#fh5co-pricing .price {
  font-size: 50px;
  color: #000;
}
#fh5co-pricing .price .currency {
  font-size: 20px;
  top: -1.2em;
}
#fh5co-pricing .price small {
  font-size: 16px;
}
#fh5co-pricing .pricing-info {
  padding: 0;
  margin: 0 0 30px 0;
}
#fh5co-pricing .pricing-info li {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}


/*======================///////////////
            start responsive style
=====================///////////////////////*/
@media screen and (max-width: 768px) {
  .fh5co-tab-menu-icon {
    margin-top: 7px;
  }

  .sun-service img{
    float:none;
  }
  #fh5co-pricing{
    padding: 3em 0;
  }
}
@media (max-width: 767px) {
  .portfolio-modal .close-modal .lr {
    height: 35px;
  }
  .portfolio-modal .close-modal .lr .rl {
    height: 35px;
  }
}



@media(max-width:1199px ){
  .navbar-default .navbar-nav > li > a {padding: 18px 6px;font-size: 15px;}
  .navbar-brand {font-size: 20px;width: 258px;}
  .doctors-nav figcaption h2 {font-size: 15px;}
  .doctors-nav figcaption p {font-size: 15px;padding: 0 12px;}
  .nav-tabs > li > a {padding: 10px 10px;}
}


@media(max-width:991px ){
  .navbar-header {float: none;text-align: center;}
  .navbar-brand {display: inline-block;float: none;font-size: 25px;width: 75%;}
  .sl-slider h2 {font-size: 36px;line-height: 40px;}
  .sl-slider p {font-size: 25px;}
  .sl-slider-wrapper {height: 500px;}
  .whyChoose-left {width: 350px;}
  .whyChoose-right .media-heading {font-size: 18px;line-height: 1em;}
  .whyChoose-right .media-body > p {font-size: 15px;}
  #counterSection {height: auto;background-size: 100% 100%;}
  .counter-box {margin-bottom: 35px;width: 95%;}
  .doctors-nav .slick-prev {left: 20px;}
  .doctors-nav .slick-next {right: -13px;}
  .single-blog-left {width: 25%;}
  .single-blog-right {width: 70%;}
  .blog-author > ul > li {font-size: 12px;}
  .blogArchive-area .single-blog-right {width: 72%;}
  #blogArchive {margin-top: 157px;}
  .social-share h3 {text-align: center;width: 100%;}
  .social-share ul {width: 100%;margin-top: 15px;text-align: center;}
  .nav-tabs {width: 100%;}
  .how-works-area {margin-top: 30px;}
  .nav-tabs > li > a {font-size: 18px;padding: 10px 20px;}
  .button--itzel {width: 190px;}
  #header .navbar-right {float: none !important;display: inline-block;}
  .navbar-collapse.collapse {text-align: center;}
  #respond input[type="text"], #respond input[type="email"], #respond input[type="url"] {width: 80%;}
  .slider-text h2 {font-size: 45px;line-height: 50px;}
  .slider-text p {font-size: 25px;}

}


@media(max-width:767px ){
    .navbar-default .navbar-toggle {border-color: #fff;margin-top: 12px;}
    .navbar-default .navbar-toggle .icon-bar {background-color: #fff;}
    .navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background-color: transparent;}
    .navbar-default .navbar-brand {margin-bottom: 10px;margin-top: 0;}
    #sliderArea {margin-top: 70px;}
    .navbar-right .dropdown-menu::before {display: none;}
    .whychoose-singleslide img {width: 100%;}
    .whyChoose-left {width: 100%;}
    .whyChoose-right {margin-top: 50px;}
    .counter-box {margin-bottom: 40px;width: 100%;}
    .counter-box::after {width: 103%;}
    .single-blog-left {width: 20%;}
    .single-blog-right {width: 75%;}
    .single-Blog {margin-bottom: 30px;}
    .single-footer-widget {margin-bottom: 30px;}
    .footer-copyright {text-align: center;}
    .footer-social {margin-top: 20px;text-align: center;}
    #blogArchive {margin-top: 81px;}
    .blog-pagination {margin-bottom: 30px;text-align: center;}
    .sidebar-widget {margin-bottom: 35px;}
    .blogArchive-area .single-blog-right {width: 75%;}
    .similar-post .media{margin-bottom: 15px;}
    .nav-tabs > li > a {font-size: 15px;padding: 10px 15px;}
    .contact-address {margin-top: 40px;}
    .navbar-collapse.collapse {text-align:left;}
    .top-slide-inner {height: 400px;}
    .slider-text {padding: 10px 5px;top: 10%;}
    .slider-text h2 {font-size: 35px;line-height: 40px;}
    .slider-text p {font-size: 20px;}
    .navbar-right .dropdown-menu {left: auto;right: -70px;top: 40px;}
}

@media(max-width:480px ){
    .sl-slider h2 {font-size: 22px;line-height: 25px;}
    .sl-slider p {font-size: 16px;}
    .readmore_area a {font-size: 1em;}
    .counter-box::after {width: 104%;}
    .postnav-left h4, .postnav-right h4 {font-size: 15px;}
    .nav-tabs > li > a {font-size: 12px;padding: 10px;}
    .slider-text h2 {font-size: 30px;line-height: 34px;}
    .slider-text p {font-size: 18px;}
}


@media(max-width:360px ){
    .navbar-brand {float: left;font-size: 20px;width: 240px;}
    .navbar-default .navbar-brand {margin-bottom: 10px;margin-top: 5px;}
    .navbar-brand > i {font-size: 25px;}
    .slider-text {width: 90%;}
    .sl-slider-wrapper {height: 420px;}
    .counter-box::after {width: 107%;}
    .blog-breadcrumbs-left {text-align: center;width: 100%;}
    .blog-breadcrumbs-right {width: 100%;}
    .blog-pagination .pagination > li > a, .blog-pagination .pagination > li > span {
     font-size: 15px;
     padding: 5px 12px;
    }
    .blog-breadcrumbs-right .breadcrumb {padding: 8px;}
    .blog-details h2 {font-size: 20px;line-height: 30px;margin-bottom: 10px;margin-top: 10px;}
    .blog-details blockquote {font-size: 16px;}
    .social-share ul li > a {font-size: 15px;height: 25px;line-height: 26px;width: 25px;}
    .social-share h3 {font-size: 20px;}
    .nav-tabs > li > a {font-size: 10px;padding: 3px;}
    .custom-panel .panel-heading a {font-size: 16px;}
    #myModal .modal-title {font-size: 25px;}
    .post-author .news-img {margin-right: 0px;width: 45px;height: 45px;}
    .author-name {font-size: 13px;margin-bottom: 5px;display: block;}
    .post-author p {font-size: 12px;line-height: 18px;}
    .commentlist .news-img {height: 45px;width: 45px;}
    .children {margin-left: 15px;}
    .commentlist .media-body p {font-size: 12px;}
    .error-page-area h1 {font-size: 150px;}
    .error-page-area h3 {font-size: 50px;margin-bottom: 70px;}
    .error-page-area h5 {font-size: 25px;}
    .slider-text h2 {font-size: 25px;line-height: 30px;}
    .slider-text p {font-size: 16px;}
}


@media(max-width:320px ){
    .navbar-brand {width: 240px;}
    .blog-breadcrumbs-right .breadcrumb > li a {font-size: 12px;}
    .blog-breadcrumbs-right .breadcrumb > .active {font-size: 12px;}
    .custom-panel .panel-heading a {font-size: 15px;}
    #myModal .modal-title {font-size: 22px;}
    #respond input[type="text"], #respond input[type="email"], #respond input[type="url"] {
      width: 100%;
    }
}

/*--------------------*/
/* SERVICE */
/*--------------------*/

#service{
  float: left;
  display: inline;
  width: 100%;
  padding: 10px 0px;
}
.service-area{
  float: left;
  display: inline;
  width: 100%;
}
.section-heading{
  float: left;
  display: inline;
  width: 100%;
  text-align: center;
}
.service-content{
  float: left;
  display: inline;
  width: 100%;
  padding: 10px 0px;
}
.single-service{
  float: left;
  margin-bottom: 30px;
  padding: 0px 10px;
  display: inline;
  width: 100%;
  text-align: center;
}
.service-icon-effect {
  display: inline-block;
  font-size: 0px;
  margin: 15px 30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  z-index: 1;
}
.service-icon-effect:after {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: '';
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.service-icon-effect:before {
  speak: none;
  font-size: 48px;
  line-height: 90px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  display: block;
  -webkit-font-smoothing: antialiased;
}
.service-icon .service-icon-effect {
   -moz-transition: -moz-background 0.2s, color 0.2s;
  -o-transition: -o-background 0.2s, color 0.2s;
  -webkit-transition: -webkit-background 0.2s, color 0.2s;
  transition: background 0.2s, color 0.2s
}
.service-icon .service-icon-effect:after {
  top: -8px;
  left: -8px;
  padding: 8px;
  z-index: -1;
  opacity: 0;
}
.service-icon .service-icon-effect:after {
  -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -moz-transition: opacity 0.2s, -moz-transform 0.2s;
    -o-transition: opacity 0.2s, -o-transform 0.2s;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s;
    -moz-transition: opacity 0.2s, -moz-transform 0.2s;
    -o-transition: opacity 0.2s, -o-transform 0.2s;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s;
    -moz-transition: opacity 0.2s, -moz-transform 0.2s;
    -o-transition: opacity 0.2s, -o-transform 0.2s;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s
}
.single-service:hover .service-icon-effect:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}
.service-icon .service-icon-effect:before {
   -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    -o-transition: -o-transform 0.2s, opacity 0.2s;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    -o-transition: -o-transform 0.2s, opacity 0.2s;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    -o-transition: -o-transform 0.2s, opacity 0.2s;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s
}
.single-service:hover .service-icon-effect:before {
   -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1
}
.single-service>h3 a{
  color: #3e3e3e;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s
}
.single-service>h3 a:hover,.single-service>h3 a:focus{
  text-decoration: none;
  outline: none;
}
.single-service > p {
  color: #8997a7;
  font-size: 15px;
  letter-spacing: 0.5px;
  line-height: 25px;
}

/*--------------------*/
/* WHY CHOOSE US */
/*--------------------*/

#whychooseSection{
  background-color: #f7f7f7;
  float: left;
  display: inline;
  width: 100%;
  /*padding: 25px 0px;*/
}
.whyChoose-left {
  display: inline;
  float: left;
  margin-top: 30px;
  border: 5px solid #fff;
  height: 330px;
  width: 460px;
}
.whychoose-slider{
  float: left;
  display: block;
  width: 100%;
  height: 100%;
}
.whychoose-singleslide{
  float: left;
  display: block;
  width: 100%;
  height: 100%;
}
.whychoose-singleslide img{
  height: 320px;
  max-width: 100%;
}
.whychoose-slider .slick-prev,
.whychoose-slider .slick-next {
    background-color: #fff;
    height: 45px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    opacity: 0.8;
    top: 46%;
    width: 40px;
    display: none !important;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s
}
.whyChoose-left:hover .slick-prev,
.whyChoose-left:hover .slick-next{
  display: block !important;
}
.whychoose-slider .slick-next {
  background-image: url("../../images/next_icon1.png");
  background-position: center center;
  background-repeat: no-repeat;
  right: 0;
}
.whychoose-slider .slick-prev {
  background-image: url("../../images/prev_icon.png");
  background-position: center center;
  background-repeat: no-repeat;
  left: 0;
}
.whyChoose-right{
  float: left;
  margin-top: 30px;
  display: inline;
  width: 100%;
  padding: 0px 20px;
}
.whyChoose-right .media{
  margin-bottom: 20px;
}
.media-icon {
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  color: #fff;
  display: inline-block;
  font-size: 25px;
  height: 68px;
  line-height: 55px;
  margin-right: 15px;
  padding: 5px 10px;
  text-align: center;
  width: 68px;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s
}
.whyChoose-right .media-heading{
  font-size: 22px;
  line-height: 1.3em;
  padding-bottom: 6px;
}
.whyChoose-right .media-body > p {
  color: #6d6d6d;
  font-size: 15px;
  line-height: 1.6em;
}
.whyChoose-right .media:hover .media-icon{
  background-color: #fff;
}

/*--------------------*/
/* COUNTER */
/*--------------------*/

#counterSection {
  background-image: url(../../images/counter-bg2.jpg);
  background-repeat: no-repeat;
  background-position: 100%;
  background-color: #222;
  display: block;
  float: left;
  padding: 77px 0;
  width: 100%;
  position: relative;
  height: 300px;
}
#counterSection::after {
  background-color: rgba(0, 0, 0, 0.7);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.counter-area {
  display: inline;
  float: left;
  position: relative;
  width: 100%;
  z-index: 99;
}
.counter-box {
  border: 1px solid #fff;
  border-radius: 10px;
  display: inline;
  float: left;
  font-family: "Raleway",sans-serif;
  padding: 10px 5px 20px;
  width: 100%;
  position: relative;
}
.counter-box::after {
  border: 1px solid #fff;
  border-radius: 10px;
  content: "";
  height: 111%;
  left: -9px;
  position: absolute;
  top: -8px;
  width: 107%;
}
.counter-no {
  color: #fff;
  display: inline;
  float: left;
  font-size: 30px;
  font-weight: bold;
  line-height: 1.3em;
  padding-left: 0;
  text-align: center;
  width: 100%;
}
.counter-label {
    font-family: '微軟正黑體';
  color: #ededed;
  display: inline;
  float: left;
  font-size: 18px;
  /*font-weight: bold;*/
  line-height: 1.8em;
  padding-left: 0;
  padding-top: 5px;
  text-align: center;
  width: 100%;
  text-transform: uppercase;
}

/*--------------------*/
/* TESTIMONIAL */
/*--------------------*/

#testimonial{
  float: left;
  display: inline;
  padding: 75px 0px 100px;
  background-color: #f7f7f7;
  width: 100%;
}
.testimonial-area{
  float: left;
  display: inline;
  width: 100%;
}
.testimonial-nav {
  margin-top: 30px;
}
.testimonial-nav>li{
  display: block;
  width: 100%;
}
.single-testimonial{
  float: left;
  display: inline;
  width: 100%;
}
.testimonial-img {
  border-radius: 100%;
  height: 150px;
  margin: 0 auto;
  width: 150px;
}
.testimonial-img>img{
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.testimonial-cotent{
  float: left;
  display: inline;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
.testimonial-cotent > p {
  font-size: 18px;
  padding: 0 30px;
}
.testimonial-parg::before {
  content: "\f10d";
  font-family: FontAwesome;
  font-size: 25px;
  left: 0;
  margin-right: 5px;
  position: relative;
}
.testimonial-parg:after{
  position: relative;
  font-family: FontAwesome;
  content: "\f10e";
  left: 0;
  font-size: 25px;
}
.testimonial-cotent > p span{
  font-size: 25px;
}
.testimonial-cotent > p .fa-quote-left {
  margin-right: 5px;
}
.testimonial-cotent > p .fa-quote-right{
  margin-left: 5px;
}
.testimonial-nav .slick-dots li {
   -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s
}
.testimonial-nav .slick-dots li button::before {
  color: transparent;
}
.testimonial-nav .slick-dots li.slick-active button::before {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    opacity: 0.75
}

.parallax {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

.parallax,
.parallax h1,
.parallax h2,
.parallax h3,
.parallax h4,
.parallax h5,
.parallax h6 {
  color: #fff;
}

.parallax input[type="text"],
.parallax input[type="text"]:hover,
.parallax input[type="email"],
.parallax input[type="email"]:hover,
.parallax input[type="url"],
.parallax input[type="url"]:hover,
.parallax input[type="password"],
.parallax input[type="password"]:hover,
.parallax textarea,
.parallax textarea:hover {
  font-weight: 300;
  color: #fff;
}
/*************************
*******Features CSS*******
**************************/
#features {
  text-align: center;
  background-image: url(../../images/features-bg.jpg);
}

#features i {
  font-size: 48px;
}

#features h3 {
  margin-top: 15px;
  font-size: 30px;
  margin-bottom: 7px;
  color: #fff;
}

#features .slider-overlay {
  opacity: 0.8;
}

/*************************
********Twitter CSS*******
**************************/
#twitter {
  background-image: url(../../images/twitter-bg.jpg);
}

#twitter > div {
  text-align: center;
  position: relative;
}

#twitter-carousel {
  position: relative;
  z-index: 15
}

.twitter-icon {
  position: relative;
  z-index: 15;
  color: #fff;
}

.twitter-icon .fa-twitter {
  font-size: 24px;
  height: 64px;
  width: 64px;
  line-height: 65px;
  border-radius: 50%;
  position: relative;
}

.twitter-icon .fa-twitter:after {
  position: absolute;
  content: "";
  border-width: 8px;
  border-style: solid;
  left: 24px;
  bottom: -14px;
}

#twitter-carousel .item {
  padding: 0 55px;
}

#twitter-carousel .item a {
  color: #fff;
}

.twitter-icon h4 {
  text-transform: uppercase;
  margin-top: 25px;
  margin-bottom: 25px;
  color: #fff;
}

.twitter-left-control,
.twitter-right-control {
  position: absolute;
  top: 50%;
  color: #fff;
  border: 1px solid #fafafa;
  height:34px;
  width: 34px;
  line-height: 31px;
  margin-top: -17px;
  font-size: 18px;
  border-radius: 50%;
  z-index: 15
}

.twitter-left-control {
  left: 80px;
}

.twitter-right-control {
  right: 80px
}

.twitter-left-control:hover, .twitter-right-control:hover {
  color: #fff;
}

/*scrol to top*/

.scrollToTop {
  bottom: 30px;
  height: 38px;
  display: none;
  font-size: 28px;
  line-height: 33px;
  font-weight: bold;
  position: fixed;
  right: 13px;
  text-align: center;
  text-decoration: none;
  width: 38px;
  z-index: 999;
  color: #fff;
  transform:rotate(43deg);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;

}
.scrollToTop>i{
   transform:rotate(-45deg);
}
.scrollToTop:hover,
.scrollToTop:focus{
  background-color: #fff;
  text-decoration: none;
  outline: none;
}

@media screen and (max-width: 768px) {
  .scrollToTop {
    bottom: 15px;
    right: 15px;
  }
}

/* PRICING */
#pricing_sec {
/*padding : 70px 0;*/
/*border-bottom: solid 1px #ddd;*/
background: rgba(0, 0, 0, 0.02);
}

.sngl_pricing ul {
border : #EBEBEB solid 5px;
margin : 0;
padding : 0;transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s
}
.sngl_pricing ul li {
  color : #666666;
  font-size : 15px;
  list-style : none outside none;
  text-transform : capitalize;
  border-top : 1px solid #EBEBEB;
  padding : 8px 0;
  text-align : center;
}
.sngl_pricing ul li:first-child {
  border-top : 0;
}
.sngl_pricing {
  text-align : center;
  border : #EBEBEB solid 5px;
}
.sngl_pricing:hover {
  border : #C6E48D solid 5px;transition: all 1s ease 0s;
  -moz-transition: all 1s ease 0s;
  -webkit-transition: all 1s ease 0s
}
.sngl_pricing_red, .sngl_pricing_red ul{
  border : #EBEBEB solid 5px;
}
.sngl_pricing_red:hover {
  border : #E3777A solid 5px;transition: all 1s ease 0s;
}
.sngl_pricing_blue, .sngl_pricing_blue ul {
  border : #EBEBEB solid 5px;
}
.sngl_pricing_blue:hover {
  border : #93EED2 solid 5px;transition: all 1s ease 0s;
}
.sngl_pricing_orange, .sngl_pricing_orange ul {
  border : #EBEBEB solid 5px;
}
.sngl_pricing_orange:hover {
  border : #F0AB37 solid 5px;transition: all 1s ease 0s;
}
.sngl_pricing:hover.sngl_pricing h3 {
  background : none 0 0 repeat scroll #C6E48D;transition:
  -moz-transition: all 1s ease 0s;
  -webkit-transition: all 1s ease 0s
}
.sngl_pricing:hover.sngl_pricing h2{
    background-image : url("../../images/standar.jpg");
    transition: all 1s ease 0s;
}
.sngl_pricing_red:hover.sngl_pricing_red h3 {
  background : none 0 0 repeat scroll #E3777A;transition: all 1s ease 0s;
}
.sngl_pricing_red:hover.sngl_pricing_red h2{
  background-image : url("../../images/extended.jpg");
  transition: all 1s ease 0s;
}
.sngl_pricing_blue:hover.sngl_pricing_blue h3 {
  background : none 0 0 repeat scroll #93EED2;transition: all 1s ease 0s;
}
.sngl_pricing_blue:hover.sngl_pricing_blue h2{
  background-image : url("../../images/basic.jpg");
  transition: all 1s ease 0s;
}
.sngl_pricing_orange:hover.sngl_pricing_orange h3 {
  background : none 0 0 repeat scroll #F0AB37;transition: all 1s ease 0s;
}
.sngl_pricing_orange:hover.sngl_pricing_orange h2{
  background-image : url("../../images/onepage.jpg");
  transition: all 1s ease 0s;
}

.sngl_pricing > h2 {
color : #fff;
font-size : 18px;
margin : 0;
padding : 30px;
text-transform : uppercase;
}
.basic_b {
background-image : url("../../images/basic_b.jpg");
background-position : center center;
background-repeat : no-repeat;
background-size : 100% 100%;
line-height: 30px;
}
.standar_b {
background-image : url("../../images/standar_b.jpg");
background-position : center center;
background-repeat : no-repeat;
background-size : 100% 100%;
line-height: 30px;
}
.extended_b {
background-image : url("../../images/extended_b.jpg");
background-position : center center;
background-repeat : no-repeat;
background-size : 100% 100%;
line-height: 30px;
}
.onepage_b {
background-image : url("../../images/onepage_b.jpg");
background-position : center center;
background-repeat : no-repeat;
background-size : 100% 100%;
line-height: 30px;
}
.sngl_pricing > h3 {
background : none 0 0 repeat scroll #EBEBEB;
color : #000;
font-size : 48px;
margin : 0;
padding : 20px 0;
}
.sngl_pricing_red > h3 {
  background : none 0 0 repeat scroll #EBEBEB;
}
.sngl_pricing_blue > h3 {
  background : none 0 0 repeat scroll #EBEBEB;
}
.sngl_pricing_orange > h3 {
  background : none 0 0 repeat scroll #EBEBEB
}
.currency {
font-size : 24px;
position : relative;
top : -18px;
}
.monuth {
font-size : 24px;
text-transform : none;
}
.btn.pricing_btn {
background : none 0 0 repeat scroll #92C82D;

color : #fff;
text-transform : uppercase;
padding : 10px 30px;
}
.btn.pricing_btn:hover {
background : none 0 0 repeat scroll #85B629;
/*border : #666666 solid 1px;*/
color : #fff;
text-transform : uppercase;
padding : 10px 30px;
font-weight: bold;
}
.btn.pricing_red_btn {
background : none 0 0 repeat scroll #DA4E51;
}
.btn.pricing_red_btn:hover {
background : none 0 0 repeat scroll #D73C40;
font-weight: bold;
}
.btn.pricing_blue_btn {
background : none 0 0 repeat scroll #5EE6BD;
}
.btn.pricing_blue_btn:hover {
background : none 0 0 repeat scroll #42E1B1;
font-weight: bold;
}
.btn.pricing_orange_btn {
background : none 0 0 repeat scroll #F0AB37;
}
.btn.pricing_orange_btn:hover {
background : none 0 0 repeat scroll #EE9E1A;
font-weight: bold;
}
.sngl_pricing ul {
margin : 0;
padding : 35px 0;

}
.sngl_pricing a {
margin-top : 30px;
}


/* Scroll Animations */
@-webkit-keyframes ani-mouse {
  0% {
    opacity: 1;
    top: 29%;
  }
  15% {
    opacity: 1;
    top: 50%;
  }
  50% {
    opacity: 0;
    top: 50%;
  }
  100% {
    opacity: 0;
    top: 29%;
  }
}
@-moz-keyframes ani-mouse {
  0% {
    opacity: 1;
    top: 29%;
  }
  15% {
    opacity: 1;
    top: 50%;
  }
  50% {
    opacity: 0;
    top: 50%;
  }
  100% {
    opacity: 0;
    top: 29%;
  }
}
@keyframes ani-mouse {
  0% {
    opacity: 1;
    top: 29%;
  }
  15% {
    opacity: 1;
    top: 50%;
  }
  50% {
    opacity: 0;
    top: 50%;
  }
  100% {
    opacity: 0;
    top: 29%;
  }
}

/*--------------- scroll-btn ----------------*/
.scroll-btn {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  z-index: 15;
}

.scroll-btn > * {
  display: inline-block;
  line-height: 18px;
  font-size: 13px;
  font-weight: normal;
  color: #7f8c8d;
  color: #ffffff;
  font-family: Arial, sans-serif;
  letter-spacing: 2px;
}

.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {
  color: #ffffff;
}

.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.scroll-btn .mouse {
  position: relative;
  display: block;
  width: 30px;
  height: 45px;
  margin: 0 auto 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid white;
  border-radius: 23px;
}

.scroll-btn .mouse > * {
  position: absolute;
  display: block;
  top: 29%;
  left: 50%;
  width: 2px;
  height: 6px;
  margin: -2px 0 0 -1px;
  background: white;
  -webkit-animation: ani-mouse 2.5s linear infinite;
  -moz-animation: ani-mouse 2.5s linear infinite;
  animation: ani-mouse 2.5s linear infinite;
}

.fh5co-table,
.fh5co-table-cell,
.fh5co-parallax {
  height: 500px;
}

.fh5co-parallax {
  background-color: #555;
  background-attachment: fixed;
  background-size: cover;
  position: relative;
}
.fh5co-parallax .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  opacity: .2;
}

@media screen and (max-width: 768px) {
  .fh5co-parallax {
    height: inherit;
    padding: 4em 0;
  }
}
.fh5co-parallax .fh5co-intro h2 {
  color: #fff;
  font-size: 70px;
  font-weight: 300;
  margin-bottom: 10px;
  text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
}
@media screen and (max-width: 768px) {
  .fh5co-parallax .fh5co-intro h2 {
    font-size: 40px;
  }
}
.fh5co-parallax .fh5co-intro p {
  color: #fff;
}
.fh5co-parallax .fh5co-intro p a {
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
.fh5co-parallax .fh5co-intro p a:hover {
  color: #fff;
}
.fh5co-parallax .fh5co-intro.box-area {
  padding: 40px;
  background: #222831;
}

.fh5co-table-cell {
  display: table-cell;
  vertical-align: middle;
}

.fh5co-table {
  display: table;
}

.text-white{
  color:#eee;
}

.text-white:hover{
  color:white;
  font-weight: 500;
}

@media screen and (max-width: 578px) {
  .mbr-box__magnet > .padding_top {
    padding-top: 35%
  }
}

@media screen and (min-width: 578px) {
  .mbr-box__magnet > .padding_top {
    padding-top: 15%
  }
}