@charset "utf-8";
body { font-weight: 300; overflow-x: hidden; font-family: "微軟正黑體", Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: "微軟正黑體", Arial, Helvetica, sans-serif; font-weight: 400; line-height: 1.25em; }
h1 { font-size: 3.625em; font-weight: 300; }
h2 { font-size: 2.4em; text-transform: uppercase; color: #ec6941; }
h3 { font-size: 1.7em; text-transform: uppercase; font-weight: 500; margin-bottom: 20px; color: #111; }
p { font-size: 15px; color: #333333; line-height: 1.5em; font-weight: 400; }
a { font-size: 15px; color: #a1815a; font-weight: 400; letter-spacing: .3px; text-decoration: underline }
a:hover { -webkit-transition: background-color .3s ease; -moz-transition: background-color .3s ease; -o-transition: background-color .3s ease; transition: background-color .3s ease; text-decoration: none; border: none; outline: none; color: #ec6941 }
.section { padding: 90px 0; overflow-x: hidden;}
.section-title { margin-bottom: 30px; padding-bottom: 20px; display: inline-block; font-weight: 800; color: #000; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000; }
.button { border: none; padding: 12px 25px; display: inline-block; color: #fff; text-transform: uppercase; background-color: #063256; font-weight: 500; font-size: 1.25em; -webkit-transition: background-color .3s ease; -moz-transition: background-color .3s ease; -o-transition: background-color .3s ease; transition: background-color .3s ease;	border-radius: 5px;  margin-top: 1em; }
.button a{ color: #FFF; text-decoration: none; }
.button:hover { text-decoration: none; border-color: #FFF; background-color: #00a0e9; }
.overlay { /* background: rgba(20, 140, 197, 0.8); */ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00a5c6+32,00d1c3+100&0.85+0,0.85+100 */
/*background: -moz-linear-gradient(-45deg,  rgba(0,165,198,0.85) 0%, rgba(0,165,198,0.85) 32%, rgba(0,209,195,0.85) 100%); /* FF3.6-15 */
/*background: -webkit-linear-gradient(-45deg,  rgba(0,165,198,0.85) 0%,rgba(0,165,198,0.85) 32%,rgba(0,209,195,0.85) 100%); /* Chrome10-25,Safari5.1-6 */
/*background: linear-gradient(135deg,  rgba(0,165,198,0.85) 0%,rgba(0,165,198,0.85) 32%,rgba(0,209,195,0.85) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d900a5c6', endColorstr='#d900d1c3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


}
/* NAVIGATION
================================================ */

.navbar-default { background: #fff; border-color: transparent; padding: 10px 0; -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); }
.navbar-brand { padding: 0px 15px; max-width: 530px; }
.navbar-default .navbar-nav>li>a { color: #949494; margin-right: 8px; font-family: 'Open Sans', sans-serif; text-decoration: none }
.navbar-default .navbar-nav>li>a:hover { color: #F60; }
.navbar-brand img { max-height: 48px; }
 @media (max-width:350px) {
.navbar-brand { padding: 0px 0px 0 15px; width: 80% }
.navbar-brand img { max-height: 50px; width: 90% }
}
/* HEADER
================================================ */

#home-area { background: url(../img/header-bg.jpg) no-repeat; background-position: 50% 50%; background-size: cover; background-color: #0991bf; }
#home-area .container { padding-top: 40px; padding-bottom: 55px; }
.home-content { color: #fff; padding-top: 100px; padding-left: 30px; }
.home-content h1 { text-transform: capitalize; font-weight: 900; text-shadow: 3px 3px 5px #333; font-size: 3.5em; width: 55% }
#home-area h2 { color: #FFF; }
.home-content p { font-size: 1.375em; font-weight: 500; color: #fff; letter-spacing: .3px; line-height: 1.7em; margin: 30px 0; text-shadow: 2px 2px 3px #333; }
.home-content .home { background-color: #332619; color: #fff; text-decoration: none; }
.home-content .home:hover { background: #fff; color: #222; }
.home-feature { }
@media (max-width: 992px) {
.home-content { padding-left: 0px; }
}
@media (max-width: 767px) {
.home-content h1 { width: 80%; margin: 0 auto }
#home-area h2 br { display: none; }
.home-content p { margin: 30px; }
#home-area { background: url(../img/header-bg2.jpg) no-repeat; background-position: 50% 50%; background-size: cover; background-color: #0991bf; }
}
 @media (max-width:430px) {
.home-content { padding: 80px 5px 40px; }
.home-content h1 { width: 100%; margin: 0 auto; font-size: 3em; }
.home-content p br { display: none }
#home-area { background-position: 55% 50% }
}


/* 關於 HyScholar
================================================ */
#about { background: #fff; border-bottom: 1px solid #efefef; }
#about .section-title { margin-bottom: 5px; }
#about .section-title.wow.fadeIn { color: #4287be;}
#about a:hover { color: #187F90; text-decoration: none; }
#about h3 { margin-bottom: 5px; color: #333333; }
.single-service { padding-top: 25px; margin-bottom: 10px; }
.single-service .pic { width: 110px; height: 110px; padding: 15px; border-radius: 50%; margin: 0px auto 15px; background: #DEDEDE; }
.single-service .pic img { width: 80px; margin: 0px auto; }
.service-title { color: #24C0D9; margin-bottom: 0px; }
.service-content { }

/* about2
================================================ */
#about2 { border-bottom: 1px solid #efefef; background-color: #4287be; }
#about2 .container { margin-top: 50px }
#about2 .row { margin-bottom: 40px; position: relative }
#about2 .section-title { margin-bottom: 5px; }
#about2 a:hover { color: #187F90; text-decoration: none; }
#about2 h3 { margin: 50px 40px 30px 50px; color: #333; text-align: left; font-weight: 600; font-size: 2em; color: #FFF; }
#about2 p { font-size: 1.438em; line-height: 180%; margin: 0 40px 40px 50px; text-align: left; color: #FFF; }
#about2 img { background-color: #fff; border-radius: 5px }
#about2 .section-title.wow.fadeIn { color: #FFF;}
#about2 .section-title { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FFFFFF; }
 @media (min-width: 992px) and (max-width: 1199px) {
#about2 img { width: 100% }
#about2 h3 { margin: 40px 0 }
#about2 p { margin: 0 0 30px }
}
 @media (max-width: 991px) {
#about2 h3 { margin: 40px 0 30px; text-align: center }
#about2 p { margin: 0 0 10px; padding: 0 20px 40px; text-align: center; border-bottom: 1px solid #CCC; }
}
 @media (max-width:550px) {
#about2 img { width: 95% }
}
 @media (max-width:480px) {
#about2 h3 { font-size: 1.75em }
#about2 p { font-size: 1.25em; margin: 0 10px 10px; }
}
/* service 服務特色
================================================ */
#service { background-image: url(../img/service_bg.jpg); background-repeat: no-repeat; background-position: left top; height: 681px; background-color: #225b90; }
#service .section-title { color: #fff; }
#service h3 { text-transform: capitalize; font-weight: 900; text-shadow: 3px 3px 5px #000; font-size: 3.2em; color: #FFF;}
#service h4 { text-transform: capitalize; font-weight: 900; text-shadow: 3px 3px 5px #000; font-size: 1.8em; color:#FFF; }
#service P { color: #fff; font-size: 1.25em; margin: 0 0 40px;}
#service .images { }
#service .images img { width: 700px; height: auto; margin: 0 auto; }
#service .slick-dots { bottom: -55px }
#service .slick-dots li button:before { font-size: 15px }
#service .slick-prev:before, #service .slick-next:before { font-size: 40px }
#service .slick-dotted.slick-slider { }
#service .slick-prev { left: 20px; z-index: 999 }
#service .slick-next { right: 40px; z-index: 999 }
#service .slick-dots li.slick-active button:before { color: #fff; opacity: 1 }
#service .slick-dots li button::before { color: #fff; opacity: .2 }
#service .slick-prev, #service .slick-next { width: 40px; height: 40px }
#service .slick-prev:before, #service .slick-next:before { color: #ccc }
@media (max-width: 991px) {
#service .slick-prev { left: -20px; }
#service .slick-next { right: -20px; }
}
@media (max-width: 767px) {
#service .question p { margin: 0 70px }
#service .slick-prev { left: 0px; z-index: 999 }
#service .slick-next { right: 0px; z-index: 999 }
#service .images img { width: 100%; height: auto; margin: 0 auto }
#service h4 { display: none; }
#service P { display: none;}
}
/* client 精選客戶
================================================ */
#portfolio { background-color: #f1f1f1; color: #fff; position: relative }
#portfolio .section-title { margin-bottom: 60px }
#portfolio .images { margin: 0 0 30px }
#portfolio .images img { width: 100%; border-radius: 5px; border: 5px solid #FFF }
/* NEWSLETTER SIGNUP
 ================================================ */

#newsletter { background: #24C0D9; background-size: cover; background-position: 0% 80%; padding-top: 40px; padding-bottom: 30px; }
#newsletter .form-control { border: none; height: 50px; margin: 20px 0; font-size: 18px; padding-left: 20px; }
#newsletter h2 { margin-top: 50px; color: #fff; }
#newsletter p { color: #fff; margin: 20px 0; }
#newsletter input { display: inline-block; }
.newsletter { position: relative; top: -70px; right: -1px; border: none; background: #222; color: #fff; height: 50px; }
.newsletter:hover { background: #454545; color: #fff; }
/* TESTIMONIAL
================================================ */

#testimonial { background: #fff; border-bottom: 1px solid #efefef; }
#owl-demo .item img { display: block; width: 100%; height: auto; }
.single-testimonial { max-width: 500px; margin: 0 auto; }
.single-testimonial img { max-width: 102px; max-height: 102px; border-radius: 100%; border: 2px solid #efefef; }
.single-testimonial p { margin-top: 30px; }
.social-networks { margin-top: 0px; margin-bottom: 30px; }
.social-networks a { display: inline-block; border: 1px solid #24C0D9; border-radius: 50%; background: #FFFFFF; margin: 3px; padding: 14px 20px 15px 18px; width: 50px; height: 50px; }
.social-networks a:hover { background: #24C0D9; border: 1px solid #24C0D9; color: #fff; }
.testimonial { background: #24C0D9; color: #fff; margin-top: 20px; }
.testimonial:hover { color: #fff; }
/* GET TRIAL
================================================ */

#get-trial { background: #34495E; padding: 120px 0; }
#get-trial h4 { display: inline-block; color: #fff; font-size: 18px; font-weight: 300; margin: 20px; }
.get-trial { background: #24C0D9; border: none; color: #fff; }
.get-trial:hover { background: #fff; color: #222; }
/* CLOUD
 ================================================ */
#cloud { background: #24C0D9; position: relative; overflow: hidden; padding-top: 90px; padding-bottom: 80px; }
#cloud h3 { color: #FFF; }
#cloud h2 { padding-left: 10%; padding-right: 10%; border-bottom: 1px solid #FFF; }
#cloud img { margin-bottom: 10px; }
 @keyframes c_1 { from {
left:-2%;;
}
to { left: 6%; ; }
}
@keyframes c_2 { from {
left:90%;;
}
to { left: 80%; ; }
}
@keyframes c_3 { from {
left:-10%;;
}
to { left: 10%; ; }
}
@keyframes c_4 { from {
right: -8%;
}
to { right: -16%; }
}
#cloud .cloud_1 { width: 200px; height: 108px; position: absolute; bottom: 30%; left: -2%; opacity: .8; z-index: 99; animation: c_1 5s ease-out infinite alternate; }
#cloud .cloud_2 { width: 160px; height: 86px; position: absolute; bottom: 70%; left: 90%; z-index: 9; opacity: .8; animation: c_2 4s ease-out infinite alternate; }
#cloud .cloud_3 { width: 250px; height: 135px; position: absolute; bottom: 40%; left: -10%; opacity: .4; z-index: 99; animation: c_3 7s ease-out infinite alternate; }
#cloud .cloud_4 { width: 463px; height: 417px; position: absolute; bottom: -10%; right: -13%; z-index: 99; animation: c_4 4s ease-out infinite alternate; }
@media (max-width:768px) {
#cloud .cloud_1 { display: none; }
#cloud .cloud_2 { display: none; }
#cloud .cloud_3 { display: none; }
#cloud .cloud_4 { display: none; }
}
#cloud h2 { margin-top: 10px; margin-bottom: 10px; color: #fff; }
#cloud p { color: #fff; margin: 0px 0 15px; }
/* CONTACT US
 ================================================ */

.contact-form .form-control { -webkit-box-shadow: none; box-shadow: none; padding: 20px 15px; }
.form-control { height: 45px; font-size: 16px; }
.send-button { background: #24C0D9; color: #fff; }
.contact-form { margin-top: 30px; margin-bottom: 100px; }
.contact-info { margin-top: 30px; }
.contact-info span { color: #24C0D9; margin-right: 10px; }
.contact-info, .business-hours { margin-bottom: 30px; margin-left: 10px; }
/* 政府共契
================================================ */
#contract { background: #ffa700; }
#contract p { max-width: 70%; margin: 20px auto 40px; font-size: 1.125em; line-height: 180% }
/*-*/
#contract table { width: 100%; margin-bottom: 40px; font-size: 1.375em; background-color: #FFF; }
#contract table tr th { padding: 10px; color: #333; background-color: #E6E6E6; border: 1px solid #CCC; border-bottom-width: 1px; border-bottom-color: #ccc; text-align: center; white-space: nowrap; }
#contract table tr td { padding: 10px; text-align: left; border: 1px solid #CCC; }
#contract table tr td.title { color: #fff; background: #a487ca; }
#contract table tr td.date { color: #fff; background: #BB9BC7; }
#contract table tr td.price { color: #333; background: #efefef; }
#contract table tr td.type { color: #284da1; width: 15%; }
#contract table tr td.info { width: 50%; }
#contract table .aCenter { text-align: center; }
#contracttable .aRight { text-align: right; }
 @media (max-width: 767px) {
#contract table { width: 100%; }
#contract table tr { margin: 0 0 20px 0; display: block; }
#contract table tr th { display: none; }
#contract table tr td { display: block; width: 100%; margin: -1px 0 0 0 }
#contract table tr td:nth-child(1) { width: 100%; }
#contract table tr td:nth-child(2) { width: 100%; }
#contract table tr td:before { content: attr(data-title) "："; display: inline-block; color: #333; font-weight: 500 }
#contract table tr td:empty { display: none; }
#contract table tr td.title { color: #fff; background: #a487ca; }
#contract table tr td.date { color: #fff; background: #BB9BC7; }
#contract table tr td.price { color: #333; background: #efefef; }
#contract table .aCenter { text-align: left; }
#contract table .aRight { text-align: left; }
}
#contract ul { margin: 10px; padding: 0 }
#contract ul li { display: inline-block; list-style-type: none; margin: 0 15px 15px 0 }
#contract ul li a { display: block; background-color: #1b466c; color: #fff; padding: 13px 45px; font-size: 1.375em; text-decoration: none; border-radius: 5px }
#contract ul li a:hover { background-color: #ec6941; }

/* 聯絡我們
================================================ */
#contact_us { background: #E9E9E9; }
#contact_us p { font-size: 1.125em; line-height: 180% }
.contact_btn { width: 200px; margin: 30px auto; }
.contact_btn a { background-color: #666; color: #fff; padding: 10px 20px; display: block; text-decoration: none; font-size: 1.5em; border-radius: 5px; }
.contact_btn a:hover { background-color: #000 }
/* FOOTER
================================================ */

footer { background: #333; border-top: 1px solid #efefef; padding: 40px 0; color: #fff; text-align: center; font-size: 1.125em; }
footer p { }
footer a { color: #fff }
footer a:hover { color: #ec6941 }
.footer-menu li { border-right: 1px solid #e4e4e4; }
.footer-menu li:last-child { border-right: none; }
.footer-menu a { color: #CCC; font-size: 11px; text-transform: uppercase; font-weight: 600; padding: 0 5px; }
.footer-menu a:hover { color: #ec6941; text-decoration: none; }
.footer-content p { color: #34495E; }
footer .images { float: right; margin: -20px 0 0 0 }
@media (max-width: 767px) {
footer .images { float: none; margin: 0 }
}

/*.container{ border:1px solid red}*/