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

@import url("reset.css");

html { width:100%; height: 100%; }
html, body { margin:0; padding:0;}
body { font-family:Yu Gothic,"微軟正黑體",Arial, Helvetica, sans-serif; font-size:13px ; line-height:18px; color:#555; width:100%; height:100%; background:#fFFF;}

a{ text-decoration:none;}
::selection {  background: #444; color: #937c46;/* Safari */}
::-moz-selection {  background: #444; color: #937c46;/* Firefox */}

header{ display:block; position:relative;}
header img{ width:100%; height:auto; min-height:300px}
header a.logo{ display:block; width:188px; height:123px; margin:0 0 0 -94px; position:absolute; top:20px; left:50%; z-index:3;}
header a.logo img{ min-height:inherit;}
header h1{ display: block; width:100%; position:absolute; top:50%; text-align:center; font-size:32px; line-height:32px; color:#2e2e2e; z-index:4;}
header h1 span{ color: #995754;}
header p.title{ display: block; width:100%; position:absolute; top:260px; text-align:center; font-size:32px; line-height:32px; color:#2e2e2e; z-index:4;}
header p.title span{ color: #995754;}
#page header{ margin:-200px 0 60px 0;}
#page header a.logo{ top: inherit; bottom:0;}
#page header h1{ top: inherit; bottom:-40px; font-size:16px; color:#aeaeae; letter-spacing:1px;}
#page header h1 span{ color: #aeaeae;}
#page header p.title{ top: inherit; bottom:-40px; font-size:16px; color:#aeaeae; letter-spacing:1px;}
#page header p.title span{ color: #aeaeae;}
#wave-canvas{position:absolute; bottom:0px;left:0;width:100%;height:100%; pointer-events:none; z-index:1;}
#page #wave-canvas{ display:  none;}
#wave-canvas2{position:absolute; bottom:0px;left:0;width:100%;height:100%; pointer-events:none; transform: scaleY(-1); z-index:2;}
audio, canvas, progress, video{ display: inline-block; vertical-align: baseline}
*{	-webkit-font-smoothing: antialiased;    -moz-font-smoothing: antialiased;    font-smoothing: antialiased;}

.list{ display:block; width:100%; max-width:1200px; margin:0 auto 80px auto;}
.list.pagetext{ max-width:1200px;}
.list .title{ display:block; width:100%; margin:0 0 40px 0; padding:15px 0 0 0; background: url(../images/title_line.png) no-repeat center top; font-size:15px; color:#995754; line-height:20px; text-align:center; position:relative; letter-spacing:1px;}
.list .title time{ color:#c6a7a6;}
.list .title h2{ font-size:28px; line-height:35px; color:#565656; letter-spacing:2px;}
.list .title h1{ font-size:35px; line-height:50px; color:#333; letter-spacing:2px; text-align: left; padding:50px 0 0 0;}
.list .title h1 span{ display: inline-block; max-width:150px; height:25px; float: right; margin:12px 20px 0 30px; padding:0 20px 0px 20px; background: #333; font-size:16px; line-height:28px; font-weight: normal; color:#fff; border-radius:8px; overflow:hidden;}
.list .title a{ display:inline-block; padding:0 0 0 20px; font-size:12px; color:#555; position:absolute; top:45px; right:10px; background:url(../images/icon.png) no-repeat left center;}
.list ul{ display:block; width:100%; overflow:hidden;}
.list ul li{ display:block; width:29%; margin:0 6.5% 80px 0; float:left; border-radius:10px;}
.list ul li.last{ margin:0 0 20px 0;}
.list ul li p.img{ display:block; width:100%; margin:0 0 15px 0; padding:6px; background:url(../images/list_bg.jpg); border-radius:10px; font-size:0; line-height:0;}
.list ul li p.img img{ width:100%; height: auto;}
.list ul li h3{ width:90%; margin:0 auto 10px auto; font-size:20px; line-height:30px; color:#414141; height:60px; overflow:hidden;}
.list ul li h3 span{ font-weight: normal; color:#9c6b6b; margin:0 15px 0 0; padding:0 15px 0 0; background:url(../images/line.png) no-repeat right center; }
.list ul li p.text{ display:block; width:90%; height:150px; margin:0 auto 35px auto; font-size:16px; line-height:30px; color:#595959; overflow:hidden;}
.list ul li p.date{ display:block; width:90%; height:1px; margin:0 auto 15px auto; position: relative; background:#d1d1d1;}
.list ul li p.date span{ display: inline-block; width:120px; height:18px; margin:0 0 0 -60px; padding:0 15px; color:#b0b0b0; font-size:15px; line-height:18px; background:#FFF; text-align:center; position:absolute; top:-9px; left:50%;}

.list ul li:hover { background:url(../images/list_bg2.jpg);}
.list ul li:hover p.img{ background: none;}
.list ul li:hover p.date {background: none;}
.list ul li:hover p.date span {background: none;}

.content{ display:block; width:100%; margin:0 auto 50px auto;  font-size:18px; line-height:200%; color:#494949; letter-spacing:1px; overflow:hidden;}
.content span{ line-height: normal;}
.content img{ max-width:100% !important; height:auto !important;}
.content a:visited{ color:inherit;}

.content2{ display:block; width:100%; padding:50px 0 0 0; margin:0 auto 50px auto;  font-size:18px; line-height:200%; color:#494949; border-top:1px solid #D4D4D4; letter-spacing:1px; overflow:hidden;}
.content2 span{ line-height: normal;}
.content2 img{ max-width:100%; height:auto;}
.content2 h2,.content2 h3{ font-size:20px; line-height:28px; color:#333; margin:0 0 15px 0;}

.people{ margin:0 0 15px 0;}

.facebookmain{ display:block; width:100%; margin:0 auto 90px auto; padding:30px; border:1px solid #e3e3e3; border-radius:8px;}
.fb-comments{ width:100%;}
.fb-comments span{ width:100% !important;}
.fb-comments iframe{ width:100% !important;}

.page{ display:block; width:100%; min-height:85px; margin:0 0 100px 0; padding:35px 0 0 0; background: url(../images/title_line.png) no-repeat center top; position:relative; overflow:hidden;}
.page .prev,.page .next{ display:block; width:50%; float:left; font-size:16px; line-height:21px; color:#414141; text-align:left; padding:0 30px 0 0;}
.page .next{ text-align: right; padding:0 0 0 30px; float: right;}
.page .prev a{ display:block; width:50px; height:50px; margin:0 15px 0 0; background: #FFF url(../images/prev.png) no-repeat center center; text-indent:-5000px; cursor:pointer; border:2px solid #d7d7d7; border-radius:50px; float:left;}
.page .prev a:hover{ border:2px solid #333;}
.page .next a{ display:block; width:50px; height:50px; margin:0 0 0 15px; background: #FFF url(../images/next.png) no-repeat center center; text-indent:-5000px; cursor:pointer; border:2px solid #d7d7d7; border-radius:50px; float: right;}
.page .next a:hover{ border:2px solid #333;}
.page .prev span,.page .next span{ font-size:13px; color:#bc9b85;}
.page a.list{ display:block; width:50px; height:50px; margin:0 0 0 -25px; background: #FFF url(../images/list.png) no-repeat center center; text-indent:-5000px; cursor:pointer; border:2px solid #d7d7d7; border-radius:50px; position:absolute; top:35px; left:50%;}
.page a.list:hover{ border:2px solid #333;}

.class{ display:block; width:100%; max-width:1200px; margin:0 auto 80px auto; padding:0 85px;}
.class .title{ display:block; width:100%; margin:0 0 10px 0; padding:15px 0 0 0; background: url(../images/title_line.png) no-repeat center top; font-size:15px; color:#995754; line-height:20px; text-align:center;}
.class .title h4{ font-size:28px; line-height:35px; color:#565656; letter-spacing:2px;}

.class .clist{ display:block; width:100%; height:390px;margin:0 0 0 0; position:relative;}
.class .clist .scrollable { position:relative; top:0px; overflow:hidden; width:100%; height:390px; padding:0; margin:0 auto;}
.class .clist .scrollable .items { width:1000%; position:absolute; clear:both;}
.class .clist .scrollable .items div{ display:block; float:left; width:10%; height:390px; position:relative; overflow:hidden; padding:0px; color:#333;}
.class .clist .scrollable .items div ul{ display:block; width:100%;  height:390px; overflow:hidden; margin:0 auto;}
.class .clist .scrollable .items div ul li{ display:block; width:21%;  height:390px; margin:0 2% 0 2%; float:left;  overflow:hidden;  position:relative;

}

.class .clist .scrollable .items div ul li .box{ display:block; width:100%; height:280px; margin:30px 0 0 0; background:url(../images/list_bg.jpg); padding:5px; border-radius:10px; position:relative;
-moz-transform-origin:center;
-moz-transform:skewY(0deg);
-webkit-transform-origin:center;
-webkit-transform:skewY(0deg);
-o-transform-origin:center;
-o-transform:skewY(0deg);
-ms-transform-origin:center;
-ms-transform:skewY(0deg);
transform-origin:center;
transform:skewY(0deg);
-webkit-transition:all .5s ease;
  -moz-transition:all .5s ease;
  -o-transition:all .5s ease;
  -ms-transition:all .5s ease;
  transition:all .5s ease;}
.class .clist .scrollable .items div ul li:hover .box{
	-moz-transform-origin:center;
-moz-transform:skewY(20deg);
-webkit-transform-origin:center;
-webkit-transform:skewY(20deg);
-o-transform-origin:center;
-o-transform:skewY(20deg);
-ms-transform-origin:center;
-ms-transform:skewY(20deg);
transform-origin:center;
transform:skewY(20deg) scaleX(0.8);
-webkit-transition:all .5s ease;
  -moz-transition:all .5s ease;
  -o-transition:all .5s ease;
  -ms-transition:all .5s ease;
  transition:all .5s ease;
	}
.class .clist .scrollable .items div ul li p{ display:block; width:100%; height:100%; padding:1px; position:relative; background:#FFF; border-radius:5px;}
.class .clist .scrollable .items div ul li p span.img{ display:block; width:100%;  margin:0 auto 10px auto; overflow:hidden;  line-height:0; font-size:0; border-radius:5px;}
.class .clist .scrollable .items div ul li p span.img img{ width:100%; height:auto;}
.class .clist .scrollable .items div ul li p span.text{ display:block; width:90%; height:46px; margin:0 auto 0px auto; overflow:hidden;  line-height:23px; font-size:18px; color:#262626; font-weight: bold; text-align:center; overflow:hidden;}
.class .clist .scrollable .items div ul li p span.en{ display:block; width:90%; max-width:89px; margin:0 auto; padding:8px 0 0 0; overflow:hidden;  line-height:15px; font-size:12px; color:#888; text-align:center; background:url(../images/list_bg.jpg) repeat-x 0 -2px;}


.class .clist .scrollable .items div ul li .door{ display:block; width:194px; height:267px; background: url(../images/door.png) no-repeat; position:absolute; top:40px; left:5px; transform: none; opacity:0;
-webkit-transition:all .5s ease;
  -moz-transition:all .5s ease;
  -o-transition:all .5s ease;
  -ms-transition:all .5s ease;
  transition:all .5s ease;
  overflow:visible;
}
.class .clist .scrollable .items div ul li .door .teacher{ display:block; width:158px; height:222px; background: url(../images/teacher.png) no-repeat; position:absolute; top:30px; right:10px;
-webkit-transition:all .5s ease;
  -moz-transition:all .5s ease;
  -o-transition:all .5s ease;
  -ms-transition:all .5s ease;
  transition:all .5s ease;
  overflow:visible;
}
.class .clist .scrollable .items div ul li .door .teacher .talk{ display:block; width:87px; height:76px; background: url(../images/talk.png) no-repeat; position:absolute; top:-70px; left:5px;}
.class .clist .scrollable .items div ul li:hover .door{opacity:1;
 left:0px;
-webkit-transition:all .5s ease;
  -moz-transition:all .5s ease;
  -o-transition:all .5s ease;
  -ms-transition:all .5s ease;
  transition:all .5s ease;}
.class .clist .scrollable .items div ul li:hover .door .teacher{
	 right:40px;
-webkit-transition:all .8s ease;
  -moz-transition:all .8s ease;
  -o-transition:all .8s ease;
  -ms-transition:all .8s ease;
  transition:all .8s ease;
	}

.class .clist a.next{ display:block; width:50px; height:50px; background: #FFF url(../images/next.png) no-repeat center center; text-indent:-5000px; position:absolute; top:135px; right:-50px; z-index:2; cursor:pointer; border:2px solid #d7d7d7; border-radius:50px;}
.class .clist a.next:hover{ border:2px solid #333; background: url(../images/next.png) no-repeat center center #333;}
.class .clist a.prev{  display:block; width:50px; height:50px; background: #FFF url(../images/prev.png) no-repeat center center; text-indent:-5000px; position:absolute; top:135px; left:-50px; z-index:2; cursor:pointer; border:2px solid #d7d7d7; border-radius:50px;}
.class .clist a.prev:hover{ border:2px solid #333; background: #333 url(../images/prev.png) no-repeat center center;}
.class .clist a.disabled{ display: none;}

.about{ display:block; width:100%; max-width: 1120px; margin:0 auto 50px auto; padding:60px 0 50px 0; background: url(../images/about_bg.jpg) no-repeat right center #f3f5f2; border-radius: 15px;}
.about h5{ display:block; width:100%; height:117px; background:url(../images/about_title.png) no-repeat; font-size:25px; line-height:30px; color:#262626; padding:70px 0 0 140px; margin:-100px 0 20px 0;} 
.about p{ display:block; width:50%; font-size:16px; line-height:31px; color:#595959; padding:0 0 0 60px;}

.contact{ display:block; width:100%; margin:0 0 50px 0; font-size:15px; line-height:40px; color:#a1a1a1; text-align:center;}
.contact a.tel{ color:#955f56; font-size:35px; vertical-align: middle; margin:0 0 0 15px;}
.contact a.mail{ color:#111;  margin:0 0 0 15px;}
.contact .btn {display:block; width:100%; max-width: 1120px; height:90px; margin:0 auto; text-align:center;background: url(../images/btn_bg.jpg) repeat-x left center;}
.contact .btn a{ display: inline-block; width:80px; height:90px; padding:20px 20px 20px 20px; background:#FFF;}
.contact .btn a.fb{ padding:20px 10px 20px 20px;}
.contact .btn a.google{ padding:20px 20px 20px 10px;}
.contact .btn a span{ display:block; width:50px; height:50px; border:3px solid #8b8b8b; border-radius:50px; opacity:0.6;}
.contact .btn a.fb span{ background:url(../images/fb.jpg) no-repeat center center;}
.contact .btn a.google span{ background:url(../images/google.jpg) no-repeat center center;}
.contact .btn a:hover span{ opacity:1;}

footer{ display:block; width:100%; height:50px; background:#373737; font-size:12px; line-height:45px; color:#FFF; letter-spacing:1px; text-align:center;}
@media screen and (max-width: 600px) {
	#page header{ margin:-100px 0 60px 0;}
	header a.logo{ width:150px; height:98px; margin:0 0 0 -75px;  top:20px; left:50%;}
	header h1{ font-size:25px; line-height:32px; }
	.list{ width:95%; margin:0 auto 50px auto;}
	.list ul li{ width:44%; margin:0 3% 30px 3%;}
	.list ul li.last{ margin:0 3% 30px 3%;}
	.list ul li h3{ font-size:18px;}
	.class{  margin:0 auto 80px auto; padding:0 15px;}
	.class .clist{ height: auto; margin:0 0 0 0; position:relative;}
	.class .clist .scrollable {  height: auto;}
	.class .clist .scrollable .items { width:1000%; position:relative;}
	.class .clist .scrollable .items div{ width:10%; height: auto; }
	.class .clist .scrollable .items div ul{ height: auto; overflow:hidden; margin:0 auto;}
	.class .clist .scrollable .items div ul li{  width:29.3%; margin:0 2% 15px 2%; }
	.class .clist .scrollable .items div ul li.last{ margin:0 2% 15px 2%; }
	.class .clist a.next{top:60%; right:12%;}
	.class .clist a.prev{top:75%; right:12%; left:inherit;}
	.class .clist a.disabled{ display: block; opacity:0.4;}
	.about{ width:90%;padding:60px 0 80px 0; background-size: contain; background-position: right bottom}
	.about h5{ padding:70px 0 0 100px; background-position: -30px 0;}
	.about p{ width:100%; padding:0 30px 0 30px;}
	
	.list .title{ padding:15px 15px 0 15px;}
	.content{ padding:0 15px;}
	.page .prev,.page .next{ width:100%; margin:0 0 15px 0; padding:0 0 15px 0; border-bottom:1px solid #E1E1E1;}
	
	.page a.list{ position: relative; top:inherit; clear: both;}
	.facebookmain{ width:100%;}
}