@charset "utf-8";
* { margin: 0; padding: 0; }
a:link, a:visited ,a:hover ,a:active {text-decoration: none;}
area:focus { outline-width: 0px;}
*:link, *:visited, *:hover, *:active, *:focus , * {
-o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
-webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
-moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
transition: color .20s linear, background-color .20s linear, border-color .20s linear;}
img, iframe{ border:none;}
ul, li{ list-style-type:none;}

body{ background:url(../img/bg.jpg) repeat; font-family:Microsoft JhengHei, Arial, Helvetica, sans-serif; overflow-x:hidden;}
body, html{ height:100%;}

h1{ color:#48b133;}
h2{ color:#48b133;}
h3{ color:#48b133;}
p{font-size:1.125em; line-height:33px; color:#454545; font-weight:300;}

#wrapper{ width:100%; margin: 0; position: relative; float:left;}

/* nav */
nav{ width:10%; height: 100%; position: absolute; left:0; background:#2b2b2b url(../img/nav_bg2.png) top left repeat-y; display:inline-block; z-index:999;}
nav ul{ width:100%; overflow:auto; position: absolute; top: 0; left: 0;}
nav ul li{ float:left; text-align:center;}
.nav_td{ background:#fff845; height:95px; width:100%; padding:5px 0 0 0; margin:0 0 10px 0;}
.nav_td img{ width:142px; margin: 5px 0 0 0;}
.navs{ padding:0 0 10px 0; color:#fff; font-size:1.125em; margin:12px 0 10px 13%; border-bottom:2px solid #2b2b2b; width:80%;}
.navs a{ display: block; width:100%; height:100%; color:#fff;}
.navs a:visited{ color:#fff;}
.navs a:hover{ color:#fff845;}
.navs:hover{ border-bottom:2px solid #fff845;}
.nav_sh{ margin:10px 0 10px 18%;}
.nav_book{ margin:10px 0 10px 20%; color:#CCC; font-size:0.813em; line-height:22px;}

/* btn */
.btn1 { width: 100%; height: 30px; color:#fff; line-height:30px; background:#6ed75b; box-shadow: 0 5px 0 #52a72e; -webkit-box-shadow: 0 5px 0 #52a72e; -moz-box-shadow: 0 5px 0 #52a72e; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; margin:5px 0 0 0; font-size:15px; font-weight:300;}
.btn1 a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; color:#fff;}
.btn1 a:hover { text-decoration: none; background-color: #52a72e; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;}

.btn2 { width: 150px; height: 40px; color:#fff; line-height:40px; background:#6ed75b; box-shadow: 0 5px 0 #52a72e; -webkit-box-shadow: 0 5px 0 #52a72e; -moz-box-shadow: 0 5px 0 #52a72e; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; margin:5px 10% 0 10%; font-size:1.125em; text-align:center; font-weight:300;}
.btn2 a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; color:#fff;}
.btn2 a:hover { text-decoration: none; background-color: #52a72e; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;}

.btn3 { width: 150px; height: 40px; color:#fff; line-height:40px; background:#6ed75b; box-shadow: 0 5px 0 #52a72e; -webkit-box-shadow: 0 5px 0 #52a72e; -moz-box-shadow: 0 5px 0 #52a72e; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; margin:5px 0 0 0; font-size:1.125em; text-align:center; font-weight:300;}
.btn3 a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; color:#fff;}
.btn3 a:hover { text-decoration: none; background-color: #52a72e; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;}

.btn4 { width: 80%; height: 30px; color:#fff; line-height:30px; background:#6ed75b; box-shadow: 0 5px 0 #52a72e; -webkit-box-shadow: 0 5px 0 #52a72e; -moz-box-shadow: 0 5px 0 #52a72e; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; margin:10px 10% 0 10%; font-size:15px; font-weight:300;}
.btn4 a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; color:#fff;}
.btn4 a:hover { text-decoration: none; background-color: #52a72e; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;}

	
/* right */
section{ display:inline-block; width:100%; background:url(../img/bg.jpg) repeat;}
section ul{ width:90%; margin-left:10%;}
section .tit{ text-align:center; margin:0 0 10px 0;}
.card1{ height:400px; background: #262626 url(../img/bg-2.jpg) center top no-repeat; -moz-background-size: contain; background-size: contain; text-align:center; padding-top:400px;}
.card1 img{ margin:5px 0;}

.card2{ background:url(../img/bg-3.png) repeat-x; padding:30px 0; position:relative;}
.s_pic1{ position: absolute; top:455px; left:20%; z-index:9;}
.s_pic2{ position: absolute; top:60px; left:76%; z-index:9;}
.card2_yt{ text-align:center; padding:10px 0; margin:0 0 20px 0;}
.card2_yt iframe{ width:853px; height:480px;}
.card2 h3{font-size:1.125em; line-height:36px; font-weight:300; width:80%; margin:0 10% 30px 10%;}
.card2 p{width:80%; margin:0 10%; padding: 0 0 20px 0;}
.card2_book{ float:right; margin:0 200px 0 50px; text-align:center;}

.card3{ background:#e8e8e8; padding: 30px 0; margin-top:30px;}
.card3 iframe{ width:800px; height:230px; margin-left:500px;}

.card4{ position:relative; height:570px; padding:30px 0;}
.s_pic3{position:absolute; top:380px; left:-150px;}
.s_pic3-2{position:absolute; top:-15px; left:53%;}
.big_photo{position:absolute; top:80px; left:150px; z-index:9;}
.card4_w{ float:right; width:45%; margin-right:250px;}
.card4_w h2{ font-size:1.25em; line-height:36px; margin:0 0 10px 0;}
.card4_w p{ line-height:36px;}

.card5{ padding: 30px 0; display:block;}
.card5 iframe{ width:100%; height:360px;}

.card6{ width:60%; padding: 30px 0 15px 0; margin:150px 0 0 25%; background:url(../img/6_bg1.png) center 80px no-repeat,url(../img/6_bg2.png) center bottom no-repeat; -moz-background-size: contain; background-size: contain; text-align:center;}
.card6_td{ background:url(../img/6_bg3.png) repeat; margin:2% 5%; width:84%; padding:2% 3%; overflow:auto;}
.card6_td h2{ color:#f56200; font-size:2.5em; font-weight:bold; letter-spacing:2px;}
.card6_td p{ color:#333; font-size:1em; font-weight:700;}
.card6_td p a{ color:#f56200;}
.card6_td p a:visited{ color:#f56200;}
.card6_td p a:hover{ color:#be4c00;}
.card6_td span{ color:#f56200; font-weight:bold;}
.card6 ul.int1{ width:100%; float:left; margin:30px 0 0 0; padding:0;}
.card6 ul.int1 li{ float:left; text-align:left;}
.card6 ul.int1 li.www{width:70%;}
.card6_book{ margin:0 10px 0 90px;}

.card6 iframe{ width:100%;}
.card6 ul.int2{ width:80%; float:left; margin:30px 7% 0 13%; padding:0;}
.card6 ul.int2 li{ float:left;}
.card6_day{ background:#f56200; color:#fff; text-align:center; width:80px; height:80px; line-height:80px; font-size:1.8em; font-weight:bold; -webkit-border-radius: 80px; -moz-border-radius: 80px; border-radius: 80px;}
.card6_w{ color:#f56200; font-size:1.5em; font-weight:bold; margin:20px 0 0 10px;}
.card6_w span{ color:#333; font-size:15px; font-weight:700; line-height:22px;}
.card6_w span a{ color:#333;}
.card6_w span a:visited{ color:#333;}
.card6_w span a:hover{ color:#f56200;}


/* 報名 */
div.formfield{
display: block;
min-height: 30px;
clear: both;
text-align: left;
background: #EFEFFF;
}

.xform{
width: 50%;
color: #555555;
float:left; background: url(../img/6_bg4.png) repeat; padding:0 10%; margin:30px 25% 0 15%; -webkit-border-radius: 5px;
-moz-border-radius: 5px; border-radius: 5px;}

.formtitle{
font-weight: 700;
font-size: 160%;
clear: left;
margin: 0 0 5px;
}

.card7{ background:#e8e8e8; padding: 30px 0; display:block; text-align:center; position:relative; margin-top:30px;}
.card7 p{ margin:0 0 20px 0;}
.s_pic4{position:absolute; top:-50px; left:47%;}

.card8{ padding: 30px 0; display:block; text-align:center; width:90%; margin-left:10%;}
.card8 ul{ width:800px; margin:0 auto;}
.books{ width:18%; text-align:center; float:left; margin:0 0 70px 0; padding:0 1%;}
.books a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer;}
.books img{ margin:0 0 5px 0; width:120px; height:160px;}
.books h2 { font-size:15px; line-height:22px; font-weight:700; color:#48b133; text-align:left;}
.books h2 a {color:#48b133;}
.books h2 a:visited {color:#48b133;}
.books h2:hover {color:#f56200;}
.books p { font-size:15px; line-height:22px; font-weight:300; color:#454545;}

/* foot */
footer{ width:100%; background:#fff845; text-align:center; color:#222; line-height:22px; font-size:13px; font-weight:700; padding:5px 0; float:left;}
footer a{ color:#be4c00;}
footer a:hover{ color:#f56200;}

/* action */
.animation1{visibility: hidden;}
.opa{animation: line 1s linear; -webkit-animation: line 1s linear; -moz-animation:line 1s linear; -o-animation: line 1s linear; visibility: visible !important;}
@keyframes line { 
0% { opacity:0;} 100% { opacity:1;}}
@-webkit-keyframes line {
0% { opacity:0;} 100% { opacity:1;}}

.fadeIn{animation: fadeIn 2s ease-in-out; -webkit-animation: fadeIn 2s ease-in-out; -moz-animation:fadeIn 2s ease-in-out; -o-animation: fadeIn 2s ease-in-out; visibility: visible !important;}
@keyframes fadeIn {
	0% {opacity: 0; transform: translateY(-50%);}	
	100% {opacity: 1; transform: translateY(0%);}		
}
@-webkit-keyframes fadeIn {
	0% { opacity: 0;  transform: translateY(-50%);}	
	100% { opacity: 1; transform: translateY(0%);}		
}

.fadeIn2{animation: fadeIn2 0.6s linear; -webkit-animation: fadeIn2 0.6s linear; -moz-animation:fadeIn2 0.6s linear; -o-animation: fadeIn2 0.6s linear; visibility: visible !important;}
@keyframes fadeIn2 {
	0% {opacity: 0; transform: translateY(30%);}	
	100% {opacity: 1; transform: translateY(0%);}		
}
@-webkit-keyframes fadeIn2 {
	0% { opacity: 0;  transform: translateY(30%);}	
	100% { opacity: 1; transform: translateY(0%);}		
}

@media screen and (max-width: 1680px) {
nav{ width:15%;}
.nav_book{ margin:10px 0 10px 24%;}

section ul{ width:85%; margin-left:15%;}
.s_pic1{ left:13%;}
.s_pic2{left:80%;}
.card3 iframe{ margin-left:300px;}
.big_photo{left:150px;}
.s_pic3{top:420px; left:-150px;}
.s_pic3-2{left:56%;}
.card4{ height:600px; }
.card4_w{ margin-right:100px;}
.card5{ padding: 80px 0 30px 0;}
.card6{ width:60%; margin:150px 0 0 28%;}
.card6 ul.int1 li.www{width:60%;}
.xform{ width: 70%; margin:30px 5% 0 5%;}
.card6 ul.int2{ width:90%; float:left; margin:30px 7% 0 3%; padding:0;}
.card8{ width:83%; margin-left:17%;}

@media screen and (max-width: 1366px) {
.nav_book{ display:none;}

.s_pic1{ left:5%;}
.s_pic2{left:87%;}
.card2_book{ margin:0 100px 0 50px;}
.card3 iframe{ margin-left:200px;}
.nav_td{ padding:3px 0 0 0; margin:0 0 8px 0;}
.navs{ padding:0 0 8px 0;}
.big_photo{top:100px; left:70px;}
.s_pic3{top:420px; left:-250px;}
.card4_w{ margin-right:50px; margin-top:20px;}
.card5{ padding: 170px 0 10px 0;}
.card5 iframe{ height:360px;}
.card6{ width:80%; margin:150px 0 0 18%;}
.card6 ul.int1 li.www{width:58%;}
.card7{ margin-top:70px;}
.s_pic4{top:-60px; left:46%;}
}

@media screen and (max-width: 1280px) {
.s_pic1{ left:3%;}
.s_pic2{left:89%;}
.card2_book{ margin:0 50px 0 50px;}
.card3 iframe{ margin-left:130px;}

.big_photo{top:100px; left:60px;}
.card4_w{ width:40%;}
.s_pic3{top:430px; left:-250px;}
.s_pic3-2{left:58%;}
.card5{ padding: 280px 0 30px 0;}
.card5 iframe{ height:330px;}
.card6 ul.int1 li.www{width:60%;}
}

@media screen and (max-width: 1024px) {
nav{ width:17%;}
.navs{ padding:0 0 10px 0;}

section ul{ width:83%; margin-left:17%;}
.s_pic1{ top:340px; left:2%;}
.s_pic2{left:87%;}
.card2_yt iframe{ width:640px; height:360px;}
.card3 iframe{ margin-left:5px;}
.big_photo{ left:-25px; z-index:999;}
.card4_w{ margin-right:35px; width:38%;}
.s_pic3{left:-350px;}
.card5{ padding: 470px 0 0 0;}
.card5 iframe{ width:800px; height:330px;}
.card6{ margin-top:20px;}
.card6 ul.int2{ width:100%; margin:30px 0 0 0; }
.card6_day{  width:60px; height:60px; line-height:60px; font-size:1.5em;}
.card6_w{ font-size:1.25em; font-weight:700;}
.xform{ width: 90%; margin:30px 0; padding:0 5%;}
.card6_book{ margin:0 10px 0 30px;}
.card6 ul.int1 li.www{width:63%;}
.card7{ margin-top:80px;}
}