/*--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
.show-sm,.show-xs{display:none!important}
@media screen and (max-width:980px){.show-sm{display:block!important}.hide-sm{display:none}}
@media screen and (max-width:480px){.show-xs{display:block!important}.hide-xs{display:none!important}}
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap&subset=chinese-traditional');
body{font-family: 'Noto Sans TC','微軟正黑體', sans-serif;font-size: 14px;background: #FFf;}
body a{transition:0.5s all;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;font-weight: 300;}
a:hover, a:focus{text-decoration: none;color: #B2A380;text-decoration: none;}
.header{display:flex;align-items:center;justify-content:center;background: #FCFBF7;padding: 0;overflow: hidden;}
.header img{width: 100%;height: auto;}
.header a{ z-index: 1 }
.header a > h3{font-weight: 900;color: #333;background: #fff;padding: 0 20px;font-weight: 300}
.header a.logo-link img{max-height: 30px;width: auto;margin-bottom: 60px;}
.header .bg-deco{z-index: 0;position: absolute;background-repeat: no-repeat;background-size: contain;}
.header .bg-deco.logo{z-index: 1;top: 20px;left: 20px;}
.header .bg-deco.logo img{max-height: 50px;width: auto;}
img.header-small{display: none;}
/*-----other----*/
.margin-bt20{margin-bottom:45px;}
.margin-bt10{margin-bottom:10px;}
#test-block p{font-size: 18px;}

/*---- banner-grids ----*/
.banner-grid{background:#242426;float:left;width:20%;padding:2em 2em 1.3em 2em;float:left;transition:0.5s all;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;}
.banner-grid span{width: 58px;height: 58px;display: inline-block;background: url(../images/top-icons.png) no-repeat 0px 0px;}
.banner-grid h3{color:#FFF;text-transform:uppercase;font-size:24px;font-weight: 300;margin:0;padding:0.5em 0;}
.banner-grid span.top-icon1{background-position:0px 0px;}
.banner-grid span.top-icon2{background-position: -184px 3px;}
.banner-grid span.top-icon3{background-position: -379px 3px;}
.banner-grid span.top-icon4{background-position: -562px 3px;}
.banner-grid span.top-icon5{background-position: -749px 3px;}

/*---- contactus -----*/
.contactus{padding:5em 0;}
.contactus ul{padding:0;}
.contactus li{list-style-type: none;padding:8px 0;}

/*---- top-grids -----*/
.top-grids{padding:5em 0;}

/*---- price ----*/
.head-section h3{color:#333;text-transform:uppercase;font-size: 40px;margin-bottom: 20px;}
.head-section h3 span{font-weight:300;margin-right:0.5em;}
.price-grids{padding:1.5em 0 0 0;}
.price-grid{margin:0;padding:0;}
.price-grid-pic img{width:100%;}
.price-grid-info{padding: 45px 30px 30px 30px;}
.price-grid-info h4{font-size: 24px;font-weight: 500;text-align: center;}
.price-grid-info p{color:#333;font-size:18px;line-height:1.5;font-weight:300;}
.price-grid1{background:#d6f5f2;}
.price-grid2{background:#ffebe2;}
.price-grid3{background:#fff1cc;}

/*---- special ----*/
.special{background: url(../images/special-bg.jpg) no-repeat 0px 0px;background-size:cover;padding: 4em 0 6em;}
.special-grids{padding:2.5em 0;}
.special-grid{padding:4em 0;}
.special-grid h4{color:#333;text-transform:uppercase;font-size:18px;text-decoration:none;font-weight:300;line-height: 30px;}
.special-grid span{width:68px;height:68px;display:inline-block;background:url(../images/special-icons.png) no-repeat 0px 0px;}
.special-grid span.p-icon2{background-position:-236px 0px;}
.special-grid span.p-icon3{background-position: -468px 0px;}
.special-grid span.p-icon4{background-position: -709px 0px;}
.special-grid span.p-icon5{background-position: -950px 0px;}
.special-grid1{background-image:url(../images/p-bg1.png);background-color: #f9f6ad}
.special-grid2{background-image:url(../images/p-bg2.png);background-color: #ffeab0}
.special-grid3{background-image:url(../images/p-bg3.png);background-color: #ffdcde}
.special-grid4{background-image:url(../images/p-bg4.png);background-color: #c3f9ef}
.special-grid5{background-image:url(../images/p-bg5.png);background-color: #c8ffc6}
.special-grid1, .special-grid2, .special-grid3, .special-grid4, .special-grid5{background-repeat: no-repeat;background-position:0px 0px;background-size:contain;}

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:before,.clearfix:after,.row:before,.row:after {content: '\0020';display: block;overflow: hidden;visibility: hidden;width: 0;height: 0; }
.row:after, .clearfix:after {clear: both; }
.row, .clearfix {zoom: 1}
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}

/*----- footer ----*/
.footer{background:#242426;padding:1em 0;color:#fff;}
#toTop {display: none;text-decoration: none;position: fixed;bottom: 5%;right: 3%;overflow: hidden;width:32px;height:19px;border: none;text-indent: 100%;background: url("../images/top-arrow.png") no-repeat 0px 0px;}
#toTopHover {width:32px;height:19px;display: block;overflow: hidden;float: right;opacity: 0;-moz-opacity: 0;filter: alpha(opacity=0);}

/***FOOTER固定選單***/
/*-----Footer-----*/
.mobile-footer {width:100%;text-align:center;font-size:12px;color:#9e9e9e;background-color:#f3f3f3;z-index:998;position:fixed;bottom:0;border-top:1px solid #e4e4e4;box-shadow:0 -1px 5px rgba(0, 0, 0, .5)}
.mobile-footer a,.mobile-footer a:focus,.mobile-footer a:hover {color:#9e9e9e;text-decoration:none}
.mobile-footer div {display:inline-block;width:18%;line-height:16px;padding:5px}
.mobile-footer div:last-child {border:none}
.m_footer_block {cursor:pointer}
.m_footer_block i {display:block;font-size:28px;padding-bottom:5px}
.modal {text-align:center;padding:0 !important}
#m_school-address .modal-content,#m_school-tel .modal-content,.teacher_modal .modal-content {width:inherit;height:inherit;margin:20vh auto 0;padding:0;text-align:center;max-width:90%;min-width:270px}
#m_school-address .modal-content a, #m_school-tel .modal-content a {color:#333;text-decoration:none}
.modal-body {padding:5px}
.modal .close {width:100%;position:absolute;top:-40px;color:#fff !important;opacity:1;font-size:40px;text-align:right;right:0}
.modal-content ul {list-style:none;padding-left:0;-webkit-padding-start:0;margin:0 auto;min-width:260px;text-align:center}
.modal-content ul li {border-bottom:1px solid #ddd;margin:0 auto;padding:15px 20px;line-height:20px}
.modal-content ul li:last-child {border-bottom:0}
.modal-content ul li::before {display:none}
#m_school-address button.close:hover,#m_school-tel button.close:hover,.teacher_modal button {background:0 0}
.m_footer_block .fa-facebook-messenger, .m_footer_block .fa-home, .m_footer_block .fa-line, .m_footer_block .fa-map-marker-alt {height:15px !important;margin-top:5px;margin-bottom:5px}
.m_footer_block .fa-phone {height:20px !important;color:#fe8a01}
.m_footer_block .fa-facebook-messenger {color:#00a1ff}
.m_footer_block .fa-line {color:#00b900}
.m_footer_block .fa-home {color:#004ea1}
.m_footer_block .fa-map-marker-alt {color:#d6463a}
.scrollup {font-size: 20px;-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;border-image-outset:0;border-image-repeat:stretch stretch;border-image-slice:100% 100% 100% 100%;border-image-source:none;border-image-width:1 1 1 1;height:50px;text-align:center;width:50px;border-radius:50%;border-style:solid;border-width:2px;position:fixed;display:none;z-index:999;bottom:2em;right:3em}
.scrollup span {position:relative;-webkit-animation-name:drop;-webkit-animation-duration:1s;-webkit-animation-timing-function:linear;-webkit-animation-delay:0s;-webkit-animation-iteration-count:infinite;-webkit-animation-play-state:running;animation-name:drop;animation-duration:1s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:infinite;animation-play-state:running}
.scrollup,.scrollup span {color:#5d99f3;border-color:#5d99f3}
.scrollup:hover,.scrollup:hover span {cursor:pointer;color:#eb3565;border-color:#eb3565}
@-webkit-keyframes drop{0%{top:15px;opacity:0}30%{top:5px;opacity:1}100%{top:0;opacity:0}}@keyframes drop{0%{top:15px;opacity:0}30%{top:5px;opacity:1}100%{top:0;opacity:0}}
.social {position: fixed;display: block;right: -250px;top: 25%;z-index: 1040;}
.social ul {padding: 0;-webkit-transform: translate(-270px, 0);-moz-transform: translate(-270px, 0);-ms-transform: translate(-270px, 0);-o-transform: translate(-270px, 0);transform: translate(0, 0)}
.social ul li {display: block;margin: 5px;background: rgba(0, 0, 0, .2);width: 300px;text-align: left;padding: 10px;-webkit-border-radius: 30px 0 0 30px;-moz-border-radius: 30px 0 0 30px;border-radius: 30px 0 0 30px;-webkit-transition: 1s;-moz-transition: 1s;-ms-transition: all 1s;-o-transition: 1s;transition: 1s}
.social ul li:hover {-webkit-transform: translate(-100px, 0);-moz-transform: translate(-100px, 0);-ms-transform: translate(-100px, 0);-o-transform: translate(-100px, 0);transform: translate(-100px, 0);background: rgba(0, 0, 0, .5)}
.social ul li#social-line:hover {background: #11b71f}
.social ul li#social-fb:hover {background: #016beb}
.social ul li#social-signup:hover {background: #fe8a01}
.social ul li:hover a {color: #fff}
.social ul li:hover i {color: #fff;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);-webkit-transition: 1s;-moz-transition: 1s;-ms-transition: all 1s;-o-transition: 1s;transition: 1s}
.social ul li i {padding: 5px 5px 5px 6px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;width: 40px;height: 40px;font-size: 30px;background: #fff;-webkit-transform: rotate(0);-moz-transform: rotate(0);-ms-transform: rotate(0);-o-transform: rotate(0);transform: rotate(0)}
.social ul li a {color: #fff!important;font-size: 20px;line-height: 1.5;text-decoration: none}

/*---- responsive-design ----*/
@media(max-width:1366px){.price-grid-info {padding: 1.2em 2.5em;}}
@media(max-width:1280px){.price-grid-info {padding: 1.34em;}
.banner-info h1{font-size: 70px;}
.special-grid h4 ,.price-grid-info p{font-size: 16px;}
.header .bg-deco.logo img{max-height: 30px;}
}
@media(max-width:1024px){.banner-info h1{font-size: 60px;}
#toTop {right: 15px;bottom: 75px}
#logo_icon_hr {top: 30px;}
.banner-grid h3{font-size: 18px;}
.price-grid-info h4{font-size: 20px;}
}
@media(max-width: 991px){.footer{margin-bottom:64px;}
.header h1, .header h2{font-size: 72px;}
.banner-grid h3{font-size: 14px;}
}
@media(max-width:768px){.banner-info h1 {font-size: 50px;padding: 30px 0;}
.top-grids {padding: 2em 0;}
.banner-grid {padding: 1.5em 2em 1.5em 2em;}
.top-grid {margin: 0 0 1.5em;}
.header .bg-deco.logo img {max-height: 25px;}
}
@media(max-width:640px){.info{font-size: 20px;margin:90px 0 0 0;}
.banner-info h1{font-size: 44px;padding: 10px 0;}
.banner-grid {padding:1em;}
.top-banner-grids {display:none;}
.banner-grid h3 {font-size: 0.875em;}
img.header-big{display: none}
img.header-small{display: block;}
}
@media(max-width:480px){.banner-grid {padding: 0.7em 0.4em;}
.footer {padding: 2em 0;}
.special {padding: 1em 0 1em;}
.header-title img {max-width: 90%;}
}
@media(max-width:320px){.info{font-size: 14px;}
.banner-info h1{font-size: 32px;padding:5px 0;}
.banner-grid {padding: 0.5em 0.4em;width: 33.33%;}
.banner-grid h3 {font-size: 0.875em;padding: 0.2em;}
.logo {padding: 0.5em 1em;}
.banner-grid:nth-child(5),.banner-grid:nth-child(4){display:none;}
.top-grid h3 {font-size: 1.2em;}
.head-section h3 {font-size: 1.5em;}
.price-grids {padding: 0.5em 0 0 0;}
.price-grid-info h4 {font-size: 1.1em;}
.head-section h3 {font-size: 1.3em;}
.special-grids {padding: 0.5em 0;}
.special-grid {padding: 1.5em 0 1.5em;}
.special-grid h4 {font-size: 1.3em;}
}
@media (max-width: 319px) {.header .bg-deco.logo {top: 10px;left: 0;}}