@charset "UTF-8";
/* CSS Document */

@import url(http://www.catsschool.com.tw/css/reset.min.css);

/* General */
body { font-family:"Hiragino Kaku Gothic Pro", "LiHei Pro", "Microsoft JhengHei", Helvetica, Arial;}
a { text-decoration: none; }
li { list-style-type: none; }
.clearfix { clear: both; }

/* Header */
#logo { color:#999; float: left;clear: both; position:relative; display: block; height: 68px; width: 180px; margin-top: -5px; background: url(../img/logo.png) no-repeat; }
#logo h1{ position:relative; font-weight:lighter; left:45px; font-size:11px; letter-spacing:1px; }
#logo:active{ top:1px; }
#top-nav { height: 37px; border-top:#000 solid 3px ; font-size: 12px; line-height: 37px; position:relative; z-index:999; }
#top-nav a { color: #333333; margin-right: 10px;}
#top-nav a:hover { color: #87cc81; }
#top-nav ul { float: left; }
#top-nav ul li { float: left; margin-left: 10px; }
#top-nav .nav li:last-child { margin-left: 0px; }
#nav { height: 80px;}
#nav ul { float: right; position: relative; line-height: 50px;margin-top: 30px;}
#nav ul li { float: left; margin-left: 30px; }
#nav ul li a { color: #b3b3b3; }
#nav ul li a.current, #nav ul li a:hover { color: #4d4d4d; }

/* Menu*/
#menu li{ position:relative; }
#menu ul { margin: 20px 0 0 0; opacity: 0; display:none; position:absolute; z-index: 999; top:50px; left:-60px; background: #444; background: #4d4d4d; box-shadow: 0 0 3px #000; border-radius: 3px; transition: all .2s ease-in-out; }
#menu li:hover > ul { opacity: 1; display:inline-block; margin: 0; }
#menu ul li { float: none; display: block; border: 0; line-height: normal; margin: 0; width: 180px; height: 35px; line-height: 35px; }
#menu ul li:last-child { box-shadow: none; }
#menu ul li a { display: block; white-space: nowrap; float: none; text-transform: none; text-align: center; color: #FFF; }
#menu ul li a:hover { background-color: #2e3192; color: #fff; }
#menu ul li a:active{ background:#000; }
#menu ul li:first-child > a { border-radius: 3px 3px 0 0; }
#menu ul li:first-child > a:after { content: ''; position: absolute; left: 85px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #4d4d4d; }
#menu ul li:first-child a:hover:after { border-bottom-color: #2e3192; }
#menu ul li:first-child a:active:after { border-bottom-color: #000; }
#menu ul li:last-child > a { border-radius: 0 0 3px 3px; }
#menu li a.highlight{ background:#2e3192; color:#FFF; padding:10px;  border-radius:20px; }
#menu li a.highlight:hover{ background:#669933; color:#fff; }
#switcher { padding: 2px 25px 2px 50px; background: url(../img/btn-dropmenu.png) no-repeat 20px center; }
#btn-youtube { display: inline-block; width: 49px; height: 21px; background: url(../img/btn-youtube.png) no-repeat bottom; position: relative; top: 4px; }
#btn-facebook { display: inline-block; width: 20px; height: 20px; background: url(../img/btn-facebook.png) no-repeat bottom; position: relative; top: 4px; }
#btn-weibo { display: inline-block; width: 20px; height: 20px; background: url(../img/btn-weibo.png) no-repeat bottom; position: relative; top: 4px; }
#btn-weixin { display: inline-block; width: 20px; height: 20px; background: url(../img/btn-weixin.png) no-repeat bottom; position: relative; top: 4px; }

/* Top Menu*/
ul#top-menu{ float:right;background-color: #2e3192;color: #000;border-radius: 0px 0px 27px 27px;-moz-border-radius: 0px 0px 27px 27px;-webkit-border-radius: 0px 0px 27px 27px;}
ul#top-menu li{ float:left;position:relative; left:0;border-radius: 0px 0px 27px 27px;-moz-border-radius: 0px 0px 27px 27px;-webkit-border-radius: 0px 0px 27px 27px;}
ul#top-menu li a{ color: #fff; margin-right: 15px}
ul#top-menu li a:hover{ color: #fff;}
ul#top-menu li:first-child{ margin-left: 0;background-color: #000;border-radius: 0px 0px 27px 27px;-moz-border-radius: 0px 0px 27px 27px;-webkit-border-radius: 0px 0px 27px 27px; }
ul#top-menu ul { width:145px; margin: 20px 0 0 0; opacity: 0; display:none; position:absolute; z-index: 1; top:80px; left:-60px; background: #444; background: #eee; box-shadow: 0 0 3px #000; border-radius: 3px; transition: all .2s ease-in-out; }
ul#top-menu li:hover > ul { opacity: 1; display:inline-block; margin: 0; top:37px; left:26px; }
ul#top-menu ul li { float: none; display: block; border: 0; border-bottom:#ccc solid 1px; line-height: normal; margin: 0; width: 145px; height: 35px; line-height: 35px; background:url(../img/ico-arrow.png) 125px center no-repeat; border-radius: 0px 0px 0px 0px;-moz-border-radius: 0px 0px 0px 0px;-webkit-border-radius: 0px 0px 0px 0px;}
ul#top-menu ul li:first-child{  background:url(../img/ico-arrow.png) 125px center no-repeat;border-radius: 0px 0px 0px 0px;-moz-border-radius: 0px 0px 0px 0px;-webkit-border-radius: 0px 0px 0px 0px;}
ul#top-menu ul li:last-child { box-shadow: none; }
ul#top-menu ul li a, ul#top-menu ul li span { cursor:pointer;display: block; white-space: nowrap; float: none; padding-left:15px; text-transform: none; text-align: left; color: #666; margin-right: 0;}
ul#top-menu ul li a:hover, ul#top-menu ul li span:hover { color: #fff; background:url(../img/ico-arrow-active.png) 125px center no-repeat #333; }
ul#top-menu ul li a:active, ul#top-menu ul li span:active{ background:url(../img/ico-arrow-active.png) 125px center no-repeat #000 }
ul#top-menu ul li:first-child > a { border-radius: 3px 3px 0 0; }
ul#top-menu ul li:first-child > a:after { content: ''; position: absolute; left: 75px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #eee; }
ul#top-menu ul li:first-child a:hover:after { border-bottom-color: #333; }
ul#top-menu ul li:first-child a:active:after { border-bottom-color: #000; }
ul#top-menu ul li:last-child > a { border-radius: 0 0 3px 3px; }
ul#top-menu ul li { float: left; margin-left: 0; }
ul#top-menu ul li:last-child { margin-left: 0; border-bottom:0; }
ul#top-menu ul li.last_li, ul#top-menu ul li.last_li span:hover{background:none;}
ul#top-menu ul li.last_li a:hover{background: #333;}
ul.nav{ margin-left: 180px;}

ul#top-menu li:hover > ul li ul{top:0; left:100%;}
ul#top-menu ul li li:first-child > a:after{border:none;}
ul#top-menu ul li li:first-child{background:transparent;}
ul#top-menu ul li li{background:transparent;}
ul#top-menu ul li li a:hover{background:#333;}

/* Banner */
#full-width-slider h1 { font-family: 'Quicksand', sans-serif; letter-spacing:0; font-size: 52px; line-height: 58px; margin-bottom: 30px; text-shadow: #000 1px 1px 5px; }
#full-width-slider h2 { font-size: 20px; margin-bottom: 50px; text-shadow: #000 1px 1px 5px; }
#full-width-slider a { font-size: 20px; }
#full-width-slider #liner { display: block;  width: 240px; height: 5px; margin: 0px auto 20px auto; }
#btn-feature { color: #808080; padding: 15px 40px; margin-right: 40px; background: #FFF; border-radius: 30px; box-shadow: 0 0 5px #ccc; }
#btn-feature:hover { background: #222; color: #fff; }
#btn-intro { color: #FFF; padding-right: 30px; background: url(../img/btn-seedetail.png) right center no-repeat; text-shadow: #000 1px 1px 5px; }

/* Info */
#info { background: #fff; color: #000; padding: 40px 0; }
#info h1 { text-align: left;line-height: 30px; font-size: 20px; letter-spacing: 1px; margin-bottom: 15px;width: 100px; position: relative; z-index: 2; font-weight: normal;padding-left: 35px;background: url(../img/indexicon1.png)left top no-repeat;}
#info a { color: #000; }
#info a:hover { color: ##87cc81; }
#info ul li .size-A {display: none !important;}
#info ul li:first-child .size-A {display: inline-block !important; margin-top: 0 !important;}
#info ul li h1 { text-align: left; margin-bottom: 10px; width: auto;font-size: 16px;padding-left: 20px;background: url(../img/newsli.png) left center no-repeat;overflow: hidden;text-overflow : ellipsis;white-space : nowrap;width : 310px;height: 16px;line-height: 16px;}
#info ul li:first-child h1 { padding-left: 0px;background: none;float: right;width: 265px;}
#info ul li p { display: none;}
#info ul li:first-child p {font-size: 12px;line-height: 20px;letter-spacing: 1px;float: right; width: 265px;height: 140px;margin-top: 20px;display: block;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
#info ul li div { float: left; line-height: 12px; font-size: 12px; color: #999999; }
#info ul li:first-child div { float: left; width: 285px; height: 190px;}
#info ul li span { margin: 0 3px;}
#divider { position: relative; bottom: -10px; height: 2px; width: 100%; background: #FFF; }


/* video */
#video { background: #2e3192; color: #FFF; padding: 40px 0; }
#video h1{text-align: left;line-height: 30px; font-size: 20px; letter-spacing: 1px; margin-bottom: 15px;padding-left: 35px;position: relative; z-index: 2; font-weight: normal;}
#video .film h1{width: 270px; background: url(../img/indexicon2.png)left top no-repeat;}
#video .film{width: 565px;float: left;}
#video .film #ytplayer{float: right;}
#video .film #ytplayer:first-child{float: left;}
#video .film #ytplayer:nth-child(3){margin-top: 19px;}
#video .more{margin-top: 20px;float: right;display: block;padding-left: 15px;background: url(../img/icon-more.png) left center no-repeat;font-size: 13px;color: #fff;}
#video .event h1 {width: 235px; background: url(../img/indexicon3.png)left top no-repeat;}
#video .event{width: 270px;float: right;margin-right: 55px;}
#video .event .slider{width: 50px;float: right; color: #FFF;}
#video .event .slider li{width: 7px;height: 7px;border-radius: 50%;background-color: #d3e9c8;float: left;margin: 11px 3px;cursor: pointer;}
#video .event .slider li:hover{background-color: #fff;}
#video .event .event_data{float: left;margin: 0 20px 10px 0;border: #FFF solid 2px;width: 60px;height: 60px;border-radius: 30px;text-align: center;line-height: 29px;font-size: 12px;}
#video .event span{display: block;width: 30px;height: 2px;margin: 0 auto;background: #FFF;clear: both;}
#video .event h2{line-height: 20px;text-align: left;margin: 15px 0;width: 180px;background: none;display: block; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;float: left;}
#video .event p{font-size: 12px;line-height: 20px;letter-spacing: 1px;float: right;clear: both;width: 265px;height: 140px;margin: 0px 0 0 5px;display: block; -webkit-line-clamp: 5;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
#video .event p a{ color: #FFF;}
.film .in_video01 { float: left; margin-right:12px; position: relative; }
.film .in_video02 {float: left; margin-bottom: 12px; position: relative; }



/* Feature */
#feature { background: #f1edec; padding: 50px 0; letter-spacing: 1px; text-align: center; }
#feature span { display: inline-block; width: 100px; height: 70px; border-radius: 20px; margin: 0 auto; }
#feature h1 { text-shadow: #FFF 0 0 1px; font-size: 18px; color: #4d4d4d; margin: 20px 0; }
#feature p { text-shadow: #FFF 0 0 1px; font-size: 12px; line-height: 20px; color: #999; margin-bottom: 20px; text-align: left; min-height: 80px; }
#feature a { font-size: 12px; color: #ccc; background: #000; padding: 8px 25px; border-radius: 5px; }
#feature a:hover { color: #fff; background: #2e3192; }

/* Bakground */
.bg-orange { background: #ffd100; }
.bg-red { background: #f28353; }
.bg-purple { background: #7c51a0; }
.bg-blue { background: #00c1e9; }
.bg-green { background: #2abb5c; }

/* Icon */
.ico-culture, .ico-theme, .ico-reading, .ico-language, .ico-mood, .ico-international, .ico-book, .ico-link, .ico-apple, .ico-world, .ico-bilingual, .ico-Winter, .ico-refresh { background-repeat: no-repeat; background-position: center center; }
.ico-culture { background-image: url(../img/ico-cross-culture.png); }
.ico-theme { background-image: url(../img/ico-theme.png); }
.ico-reading { background-image: url(../img/ico-reading.png); }
.ico-language { background-image: url(../img/ico-language.png); }
.ico-mood { background-image: url(../img/ico-mood.png); }
.ico-international { background-image: url(../img/ico-international.png); }
.ico-book { background-image: url(../img/ico-book.png); }
.ico-link { background-image: url(../img/ico-link.png); }
.ico-apple { background-image: url(../img/ico-apple.png); }
.ico-world { background-image: url(../img/ico-world.png); }
.ico-bilingual{ background-image: url(../img/ico-bilingual.png); }
.ico-Winter{ background-image: url(../img/ico-Winter.png); }
.ico-refresh{ background-image: url(../img/ico-refresh.png); background-size: contain; }

/* Form */
.form{ text-align: left; }
.form [type="text"], .form [type="tel"], .form [type="email"], .form [type="button"], .form select, .form textarea{ font-size:15px; line-height:22px; padding:15px 20px; margin-bottom:15px; color:#000; background:#fff; border-radius:25px; border:0; width:100%; box-sizing: border-box; }
.form [type="button"], .form button{ width:250px; height:50px; background:#444; color:#ccc; }
.form [type="button"]:hover, .form button:hover{ background:#333; color:#fff; }
.form [type="button"]:active, .form button:active{ background:#000; }
.form textarea{ height:100px; }
.form_btnGroup{ margin-top: 10px; text-align: center; }
.form_refreshCaptcha{ display: inline-block; width: 23px; height: 23px; margin: 0 5px; vertical-align: 2px; cursor: pointer; }


/* Footer */
#footer { background: #000; padding: 60px 0; letter-spacing: 1px; }
#footer h1 { font-size: 14px; color: #fff; margin-bottom: 30px; }
#footer p { font-size: 12px; line-height: 24px; color: #999; margin-top: 30px; }
#footer ul li a { color: #999; font-size: 12px; line-height: 24px; }
#footer ul li a:hover { color: #fff; }
#copyright { color: #666; margin-top: 60px; letter-spacing: 1px; text-align: center; font-size: 11px; }
#btn-subscribe { display: block; background: #2e3192; color: #fff; width: 220px; height: 50px; line-height: 50px; border-radius: 20px; font-size: 15px; text-align: center; }
#btn-subscribe:hover { color: #fff; background: #693; }

/* Cover */
#cover { padding: 40px 0; background: #2e3192; color: #fff; text-align: center; }
#cover h1 { position:relative; z-index:99; font-size: 90px; line-height:94px; font-family: 'Quicksand', sans-serif; text-transform: uppercase; font-weight: normal; margin: 30px 0; }
#cover h2 { font-size: 13px; display:none; }
#cover p {font-size: 15px; line-height: 22px; letter-spacing: 1px; padding-top: 20px;}
#cover span { display: inline-block; width: 240px; height: 5px; background: #fff; margin: 0 auto 50px auto; }
.curtain { width: 100%; height: 11px; background: url(../img/bg-curtain.png) repeat-x; position: relative; bottom: -41px; }
.curtain-gray { width: 100%; height: 11px; background: url(../img/bg-curtain-gray.png) repeat-x; position: relative; bottom: -41px; }

/* Cover Backgrounds */
#cover.about { background-image: url(../img/chongqing/cover-about.jpg); background-repeat: no-repeat; background-position: top center; }
#cover.founder { background-image: url(../img/chongqing/cover-founder.png); background-repeat: no-repeat; background-position: top center; }
#cover.dann { background-image: url(../img/chongqing/cover-dann.png); background-repeat: no-repeat; background-position: top center; }
#cover.international { background-image: url(../img/chongqing/cover-international.jpg); background-repeat: no-repeat; background-position: top center; }
#cover.bilingual { background-image: url(../img/chongqing/cover-bilingual.jpg); background-repeat: no-repeat; background-position: top center; }
#cover.reading { background-image: url(../img/chongqing/cover-reading.jpg); background-repeat: no-repeat; background-position: top center; }
#cover.theme { background-image: url(../img/chongqing/cover-theme.jpg); background-repeat: no-repeat; background-position: top center; }
#cover.language { background-image: url(../img/chongqing/cover-language.jpg); background-repeat: no-repeat; background-position: top center; }

/* Canvas */
#xCanvas{ position:absolute; top:0; left:0; }

/* Page */
#page { padding: 60px 0; font-size: 13px; line-height: 22px; letter-spacing: 1px; }
#page.green{ background:#2e3192; }
#page.green-pattern{ background:url(../img/chongqing/bg-history.png) repeat; }
#page.gray{ background:#f2f2f2; }
#page p{ margin-bottom:30px; }
.head-picture{ margin-bottom:30px; }
#intro-text{ padding:30px; border:3px solid #fff; color:#fff; border-radius:15px; }
#intro-text p{ margin-bottom:0; }
#intro-text-en{ padding:20px; border:3px solid #fff; color:#fff; border-radius:15px; margin-top: 20px; }
#intro-text-en p{margin-bottom:0; font-size: 14px; line-height: 20px; text-align: left;}

/* Index */
body.home .rsMinW .rsBullets{ bottom:10px; }
body.home .rsMinW .rsArrowLeft, body.home .rsMinW .rsArrowRight{ top:130px; }

/* About */
.about-feature { margin-top: 50px; }
.about-feature h1 { font-size: 18px; color: #4d4d4d; text-align: center; margin-bottom: 40px; }
.about-feature p { font-size: 13px; color: #999; }
.about-feature span { display: inline-block; width: 100px; height: 70px; border-radius: 20px; margin-left: 140px; margin-bottom: 35px; }
#btn-course, #btn-contact { display: block; background: #2e3192 url(../img/ico-see-detail.png) 335px center no-repeat; color: #fff; width: 350px; padding-left: 30px; height: 70px; line-height: 70px; border-radius: 30px; font-size: 15px; margin-bottom: 20px; }
#btn-contact-us { display: block; background: #2e3192 url(../img/ico-see-detail.png) 250px center no-repeat; color: #fff; padding-left: 30px; height: 70px; line-height: 70px; border-radius: 30px; font-size: 15px; margin-bottom: 20px; }
#btn-course:hover, #btn-contact:hover, #btn-contact-us:hover { background-color:#333;  }
.about-feature:hover{ cursor:pointer; }


/* Founder */
#founder p{ color:#FFF; }
#btn-check{ display: block; background: #fff url(../img/ico-check.png) 280px center no-repeat; color: #2e3192; width: 300px; padding-left: 30px; height: 70px; line-height: 70px; border-radius: 30px; font-size: 15px; margin-bottom: 20px; }
#btn-check:hover { color:#fff; background: #333 url(../img/ico-see-detail.png) 280px center no-repeat; }

/* History */
body.history{ overflow-x:hidden; }
body.history .royalSlider { height: 500px;  }
body.history .rsMinW .rsBullets{ bottom:-10px; }

.history{ color:#FFF; }
#full-width-slider.history-content h1{ font-size:40px; line-height:48px; }
#full-width-slider.history-content h2{ font-size:90px; font-family: 'Quicksand', sans-serif; font-weight:700; position:relative; z-index:9; margin-top:30px; }
#full-width-slider.history-content p{ font-size:13px; margin:45px 0; }
#full-width-slider.history-content h1, #full-width-slider.history-content h2, #full-width-slider.history-content p{ text-shadow:none;  text-align:left;  }
#full-width-slider.history-content h2{ margin-bottom:0; }
#full-width-slider.history-content a{ font-size:13px; }
.btn-next, .btn-prev{ margin-right:10px; float:left; display:block; color:#FFF; height:70px; width:70px; line-height:70px; text-align:center; border-radius:45px; border:3px solid #fff; }
.btn-next:hover, .btn-prev:hover{ background:#fff; color:#2e3192; }
.history-year{ background: url(../img/bg-history-line.png) no-repeat 80px; }
#page .history ul li{ text-align:left; list-style:disc; margin-left:15px; }
#page .history ul li a{ color:#FFF; }
#page .history ul li a:hover{ text-decoration:underline; }

/* International */
#intro-text{ margin-bottom:20px; }
#nation li{ float:left; position:relative; margin-top:50px; width:300px; height:300px; }
#nation li a{ position:relative; z-index:999; text-align:center; font-size:30px;  text-transform:uppercase; font-family: 'Quicksand', sans-serif; font-weight:700; display:block; height:270px; width:270px; line-height:270px;  color:#fff; background:url(../img/btn-zoom.png) no-repeat center 220px; border:solid 3px transparent; border-radius:300px; margin:11px; }
#nation li a:hover{ border:#fff solid 3px; }
#nation li img{ position:absolute; top:0; }

/* Bilingual */
#bilingual-resources{ float:left; margin-top:15px; }
#bilingual{ float:left; margin-top:30px; }
#bilingual li{ float:left; position:relative; width:235px; height:176px; }
#bilingual li a{ position:relative; z-index:999; text-align:center; display:block; height:126px; width:175px; color:#fff; padding:50px 30px 0; opacity:0; }
#bilingual li a:hover{ background:rgba(0, 0, 0, 0.5); opacity:1; }
#bilingual li a h1{ font-size:20px; }
#bilingual li a h2{ font-size:13px; border-top:2px solid #fff; margin-top:10px; padding-top:10px; }
#bilingual li a span{ display:block; height:35px; width:35px; position:absolute; top:0; right:0; background:#ffd100 url(../img/ico-more.png) center center no-repeat; }
#bilingual li img{ position:absolute; top:0; }

/* News */
.news-photo{ background:url(../img/bg-news-photo.png) repeat; line-height:0; }
#news-list li{ margin-bottom:30px; padding-bottom:30px; border-bottom:1px #ccc solid; }
#news-list li:last-child{ border:0; }
#news-list li h1{ color:#4d4d4d; font-size:20px; margin:20px 0; }
#news-list li h2{ color:#4d4d4d; font-size:13px; margin-bottom:20px; }
#news-list li p{ color:#999; font-size:13px; margin-bottom:20px; }
#news-list li a{ color:#fff; display:inline-block; background:#2d2929; padding:5px 20px; border-radius:5px; }
#news-list li a:hover{ background:#2e3192; }
#news-list li .film{ width:375px; hanging-punctuation:205px; margin-bottom:15px;}
.film .in_video01 { float: left; margin-right:12px; position: relative; }
.film .in_video02 {float: left; margin-bottom: 12px; position: relative; }


/*#news-pagenation{ text-align:center; border:#CCC solid 1px; }
#news-pagenation span{ display:inline-block; border-right:#CCC solid 1px; padding:10px; color:#666; }
#news-pagenation a{ display:inline-block; border-right:#CCC solid 1px; padding:10px; color:#666; }
#news-pagenation a:hover{ background:#999; color:#fff; }
#news-pagenation a:nth-child(2){ border-left:#CCC solid 1px; }
#news-pagenation a:last-child{ border-left:#CCC solid 1px; border-right:0; }
#news-pagenation a.current{ color:#000; background:#eee; }
a.btn-pagenation-prev{ float:left; }
a.btn-pagenation-next{ float:right; }*/

/* News Content */
#news-content h1{ color:#4d4d4d; font-size:20px; margin:20px 0; }
#news-content h2{ color:#4d4d4d; font-size:13px; margin-bottom:20px; }
#news-content p{ color:#999; font-size:13px; margin-bottom:20px; }
#btn-back{ display:inline-block; height:40px; line-height:40px; padding-left:45px; font-size:20px; color:#333; background:url(../img/btn-back.png) no-repeat left center; }

/* Widget:Search */
#input-search{ width:210px; height:30px; background:#999; color:#FFF; padding:10px 15px; font-size:18px; line-height:normal; border:none; }
#input-search:focus{ background-color:#777;}
#input-search-submit{ width:60px; height:50px; border:0; background:url(../img/btn-search.png) no-repeat center center #fec415; }
#input-search-submit:hover{ background-color:#666; }
#input-search-submit:active{ background-color:#333; }

/* Widget:Calendar */
#widget-calendar{}
ul#calendar-menu, ul#calendar-menu ul { list-style-type: none; margin: 0; padding: 0; width: 300px; }
ul#calendar-menu a { display: block; text-decoration: none; }
ul#calendar-menu li { margin-top: 1px; }
ul#calendar-menu li li{ margin-top: 0px; }
ul#calendar-menu li a { background:url(../img/ico-menu-item.png) no-repeat 270px center #17b5e4; color: #fff; height:50px; line-height:50px; padding-left: 20px; }
ul#calendar-menu li a:hover { background:url(../img/ico-menu-item.png) no-repeat 270px center #333;  }
ul#calendar-menu li a.current { background:url(../img/ico-menu-item-current.png) no-repeat 270px center #17b5e4; }
ul#calendar-menu li a.current:hover { background:url(../img/ico-menu-item-current.png) no-repeat 270px center #17b5e4; }
ul#calendar-menu li ul li a { background: #0ccce5; color: #fff; padding-left: 30px; }
ul#calendar-menu li ul li a:hover, ul#calendar-menu li ul li a.current, ul#calendar-menu li ul li a.current,ul#calendar-menu li ul li a.current:hover { background: #666; padding-left: 30px; }
ul#calendar-menu li a:active, ul#calendar-menu li ul li a:active{ background:#000; }

/* Widget:News Letter */
.widget{ margin-bottom:30px; }
#widget-newsletter{ padding:155px 30px 30px; background:url(../img/ico-newsletter.png) no-repeat center 40px #7c51a0; color:#fff; }
#widget-newsletter a{ display:block; background:#662d91; border-radius:20px; padding:15px 0; text-align:center; color:#fff; margin-bottom:10px; }
#widget-newsletter a:hover{ background:#fff; color:#666; }

/* Albums */
#album-search-box{ height:50px; }
#album-search{ width:210px; height:30px; background:#fff; color:#999; padding:10px 15px; font-size:18px; line-height:normal; border:none; }
#album-search:focus{ color:#000; }
#album-search-submit{ width:60px; height:50px; border:0; background:url(../img/btn-search.png) no-repeat center center #fec415; }
#album-search-submit:hover{ background-color:#333; }
#album-search-submit:active{ background-color:#000; }


/* Ablum Items */
#albums{ margin-bottom:40px; }
#album-pagenation{ text-align:center; margin-top:80px; }
#btn-album-prev{ display:inline-block; height:36px; width:36px; background:url(../img/btn-album-prev.png) no-repeat; margin-right:60px;  }
#btn-album-next{ display:inline-block; height:36px; width:36px; background:url(../img/btn-album-next.png) no-repeat;  }
#btn-album-prev:hover, #btn-album-next:hover{ opacity:0.5; }
#btn-album-prev.disabled, #btn-album-next.disabled{ opacity:0.5; }

/* Album Content */
.tp-grid { list-style-type: none; position: relative; display: block; }
.tp-grid li { position: absolute; cursor: pointer; border: 10px solid #fff; box-shadow: 0 2px 3px rgba(0,0,0,0.2); display: none; overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; }
.no-js .tp-grid li { position: relative; display: inline-block; }
.tp-grid li a { display: block; outline: none; }
.tp-grid li img { display: block; border: none; }
.tp-info, .tp-title { position: absolute; background: #fff; line-height: 20px; color: #333; top: 70%; width: 75%; padding: 10px; font-weight: 700; text-align: left; left: -100%; box-shadow: 1px 1px 1px rgba(0,0,0,0.1),  5px 0 5px -3px rgba(0,0,0,0.4),  inset 0 0 5px rgba(0,0,0,0.04); }
.touch .tp-info { left: 0px; }
.no-touch .tp-info { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.no-touch .tp-grid li:hover .tp-info { -webkit-transition-delay: 150ms; -moz-transition-delay: 150ms; -o-transition-delay: 150ms; -ms-transition-delay: 150ms; transition-delay: 150ms; }
.no-touch .tp-open li:hover .tp-info { left: 0px; }
.tp-title { padding: 10px 35px 10px 10px; left: 0px; }
.tp-title span:nth-child(2) { color: #aaa; padding: 0 5px; background: #F7F7F7; right: 0px; height: 100%; line-height: 40px; top: 0px; position: absolute; display: block; }


/* Custom elements style */
.back { width: 40px; height: 40px; position: absolute; left: 50%; top: 420px; margin: -20px 0 0 -20px; border-radius: 50%; text-align: center; line-height: 38px; color: #999; background: #ddd; background: rgba(255,255,255,0.5); cursor: pointer; display: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.no-touch .back:hover { background: #fff; background: rgba(255,255,255,0.9); }


.default-back { width: 100px; height: 40px; position: absolute; left: 50%; margin: -75px 0 0 -50px; border-radius: 5px; text-align: center; line-height: 40px; color: #999; background: #ddd; background: rgba(255,255,255,0.8); cursor: pointer; display: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 15px;}
#albums #tab01{width: 900px; margin: 0 auto; margin-top:8px }
.no-touch .default-back:hover { background: #fff; background: rgba(255,255,255,1); }

/* Loader */
.loader { left: 50%; position: absolute; margin-left: -120px; }
.loader i { display: inline-block; width: 40px; height: 40px; -webkit-animation: loading 1s linear infinite forwards; -moz-animation: loading 1s linear infinite forwards; -o-animation: loading 1s linear infinite forwards; -ms-animation: loading 1s linear infinite forwards; animation: loading 1s linear infinite forwards; }
.cssanimations .loader span { display: none; }
.no-cssanimations .loader i { display: none; }
.loader i:nth-child(2) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; -ms-animation-delay: 0.1s; animation-delay: 0.1s; }
.loader i:nth-child(3) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; -ms-animation-delay: 0.2s; animation-delay: 0.2s; }
.loader i:nth-child(4) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; -ms-animation-delay: 0.3s; animation-delay: 0.3s; }
.loader i:nth-child(5) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; -ms-animation-delay: 0.4s; animation-delay: 0.4s; }
.loader i:nth-child(6) { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; -ms-animation-delay: 0.5s; animation-delay: 0.5s; }

/* Schools */
#schools{ color:#FFF; }
#school-filter{ float:left; margin-top:80px; }
#school-filter li a{ display:block; border:#FFF solid 2px; border-radius:25px; padding:15px 20px; color:#fff; margin-bottom:10px; background:url(../img/ico-school-select.png) no-repeat 185px center; }
#school-filter li a:hover{ color:#4d4d4d; background:url(../img/ico-school-selected.png) no-repeat 185px center #fff; }
#school-filter li a:active, #school-filter li a.active{ color:#4d4d4d; background:url(../img/ico-school-select-active.png) no-repeat 185px center #fff; }

.school_title{ margin-bottom: 1em; font-size: 3em; line-height: 1.2; text-align: center; }
.school-result{ margin-top:30px; color:#fff; }
.school-result+.school-result{ margin-top: 2.5em; }
.school-result li{ margin-bottom:20px; }
.school-result .school_title+li:last-child{ float: none; display: block; margin-left: auto; margin-right: auto; }
.school-result .schoolClass:nth-of-type(2n+1){ clear: left; }
.school-result li div{min-height: 105px; border:#FFF solid 4px; border-radius:40px; padding:25px 30px 25px 85px; min-height: 130px;}
.school-result li.kindergarten{ background:url(../img/ico-kindergarten.png) no-repeat 30px 30px; }
.school-result li.english-school{ background:url(../img/ico-english-school.png) no-repeat 30px 30px; }
.school-result li.bookstore{ background:url(../img/ico-bookstore.png) no-repeat 30px 30px; }
.school-result li.lab{ background:url(../img/ico-lab.png) no-repeat 30px 30px; }
.school-result li h1{ float:left; font-size:18px; margin-bottom:10px;width: 100%; }
.school-result li p{ margin:5px 0 0 0; clear:both; }
.school-result li a{ display:inline-block; float:left; color:#666; background:#fff; border-radius:10px; padding:2px 10px; margin-right:10px; position:relative; top:-2px; }
.school-result li a:hover{ background:#ffd100; color:#000; }


/* classes */
.classtabbox{clear: both;width: 960px;overflow: hidden;text-align:center;display: block !important;}
.classtab {display:block; margin:20px 0px; float:left; width:960px; }
.classtab ul{}
.classtab li {width:223px; height:50px;float: left;overflow: hidden;position: relative;margin-bottom: 10px;background: #2e3192;text-align:center;border:2px solid #FFFFFF;border-radius:40px;font-size:14px;line-height: 50px;margin-left:10px;}
.classtab li.on,.classtab li.on a{ color:#000; background: #FFFFFF;}
.classtab li  a{width:223px; height:50px;text-decoration: none;display: inline-block;color: #fff}		
.classtab li a:hover, .classtab li .selected { color:#000; background: #FFFFFF;}

.tab_item{text-align:center; padding:50px 0;color:#FFFFFF;}
.tab_item h1.class{ font-size:20px; margin-bottom:20px;color:#FFFFFF;}
.tab_item h1.class span{ font-size:16px; }
.tab_item .class{ width:800px; margin:0 auto; }
.tab_item .class:after{clear:both; display:block; visibility:hidden; height:0; content:".";}
.tab_item .class span{ font-size:10px; padding:0 10px;}
.tab_item .class dl{ display: block; float: left; clear: both; margin-top: 10px;}
.tab_item .class dt{ float:left;width:80px; height:30px; border-radius:20px; line-height:30px; color: #2e3192; font-size:15px; display:block; background: #fff; text-align:center; margin-right:10px; padding:3px;}
.tab_item .class dd{ float:left; line-height:30px; padding:3px;	}
.tab_item .class a{ color: #FFF;}
.tab_item p,.tab_item ul{ width:800px; text-align:left; margin:0 auto; margin-bottom:20px; }
.tab_item li{ list-style:circle; text-align:left;margin-left:25px;}

.class_btn{ display: block; margin: 20px auto; width:250px; height:50px; line-height: 50px; font-size: 15px; text-align: center; 
	background:#444; color:#ccc; border-radius: 25px; cursor: pointer; }
.class_btn:hover{ background:#333; color:#fff; }
.class_btn:active{ background:#000; }
.class_form{ display: none; margin-top: 50px; padding-top: 50px; border-top: solid 1px #fff; }
.class_form_title{ font-size: 3em; margin-bottom: 1em; }


/* Contact */
#contact{ color:#fff; }
#contact-form input[type="text"], #contact-form input[type="button"], #contact-form textarea{ font-size:15px; line-height:22px; padding:15px 20px; margin-bottom:15px; background:#fff; border-radius:25px; border:0; width:100%; }
#contact-form input[type="text"]:focus, #contact-form input[type="button"]:focus, #contact-form textarea:focus{ color:#000; }
#contact-form input[type="button"]{ width:250px; height:50px; position:relative; left:120px; background:#444; color:#ccc; }
#contact-form input[type="button"]:hover{ background:#333; color:#fff; }
#contact-form input[type="button"]:active{ background:#000; }
#contact-form textarea{ height:100px; }

/* Sent */
#sent{ text-align:center; }
#btn-back-home{ margin-top:80px;  display:block; font-size:15px; line-height:22px; padding:15px 20px;background:#fff; border-radius:25px; border:0; background:#444; color:#ccc; }
#btn-back-home:hover{ background:#333; color:#fff; }
#btn-back-home:active{ background:#000; }

/* Career */
.btn-environment{   
	background: url("../img/ico-see-detail.png") no-repeat scroll 335px center #ffd100; border-radius: 30px 30px 30px 30px;
    color: #FFFFFF; display: block; font-size: 15px; height: 70px; line-height: 70px; margin-top: 20px; margin-left:300px;
    padding-left: 30px; width: 350px; text-align:left;
}
.btn-environment:hover { background: url("../img/ico-see-detail.png") no-repeat scroll 335px center #000; }
body.contact #cover .para{ text-align:left; margin-bottom:20px; }
body.contact #contact h1{ text-align:center; font-size:20px; margin-bottom:40px; font-family: 'Quicksand',sans-serif; }


/* albumtab */
.albumtab {display:block; margin:20px 0px; float:left; width:960px; }
.albumtab ul{}
.albumtab li {width:223px; height:50px;float: left;overflow: hidden;position: relative;margin-bottom: 10px;background: #2e3192;text-align:center;border:2px solid #FFFFFF;border-radius:40px;font-size:14px;line-height: 50px;margin-left:10px;}
.albumtab li  a{width:223px; height:50px;text-decoration: none;display: inline-block;color: #fff}		
.albumtab li a:hover, .classtab li .selected { color:#000; background: #FFFFFF;}
.albumtab_item{text-align:center; padding:50px 0;color:#FFFFFF;}
.albumtab li.on,.albumtab li.on a{ color:#000; background: #FFFFFF;}

/* C */
#autoclick{ display: block; position:fixed; right:50px; top: 50px; width: 300px;  background: #FFF; z-index: 999; padding: 15px;-moz-box-shadow: 1px 1px 5px #333333;
-webkit-box-shadow: 1px 1px 5px #333333; box-shadow: 1px 1px 5px #333333;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
#autoclick img{ width: 300px;}
#autoclick .closeBox{ display: block; width: 100%; font-size: 15px; color: #333; text-align: center; padding-top:10px;}
.classImg01{border-radius:50px 0 0 50px; margin-bottom:10px; width: 204px; height: 281px;}
.classImg02{border-radius:0 50px 50px 0; margin-bottom:10px; width: 452px; height: 281px;}
#info ul li::first-child div { float: left; line-height: 12px; font-size: 12px; color: #999999; margin-left: 20px; display: block;}
.in_video01 .inVideotype{ display:none; width: 315px; height: 145px; background: #000; position: absolute; top: 0; left:0; color: #FFF; padding:30px;
filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8;}
.in_video01 .inVideotype h3{ padding-bottom:10px; text-align: center; border-bottom:#FFF 2px solid; opacity: 1; font-size: 18px;}
.in_video01 .inVideotype p{text-align: center; padding-top: 10px;  opacity: 1; font-size: 15px; line-height: 150%;}
.in_video02 .inVideotype{display:none; width: 150px; height: 76px; background: #000; position: absolute; top: 0; left:0; color: #FFF; padding:10px;
filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8;}
.in_video02 .inVideotype h3{ text-align: center; opacity: 1; font-size: 15px; line-height: 150%; vertical-align: middle; padding-top:10px;
	-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;display: block;display: -webkit-box;white-space: normal;-webkit-box-orient: vertical;-moz-box-orient: vertical;box-orient: vertical;
}



.pager { margin: 8px 3px; padding: 3px; }
.pager .disabled { border: 2px solid #FFF; color: #FFF; text-align: center; width: 35px; height: 35px; display: inline-block; line-height: 35px;
-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
.pager .current { background-color: #FFF; border: 2px solid #FFF; color: #2e3192; font-weight: bold; text-align: center; width: 35px; height: 35px;
display: inline-block; line-height: 35px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
.pager span, .pager a { margin: 4px 3px; }
.pager a { border: 2px solid #FFF; color: #ffffff; text-align: center; text-decoration: none; -webkit-border-radius: 50%; -moz-border-radius: 50%;
border-radius: 50%; width: 35px; height: 35px; display: inline-block; line-height: 35px;}