@charset "utf-8";
/* reset css */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td {margin:0; padding:0; -webkit-text-size-adjust:none;}
th{font-weight:normal; text-align:left;}
table{border-collapse:collapse; border-spacing:0;}
img{border:0;}
ol, ul{list-style:none;}
a{outline:none; hlbr:expression(this.onFocus=this.blur()); text-decoration:none;}
input , select , textarea , button{outline:none; border-radius:0;}

body{font-family:arial , "微軟正黑體";}
#all{position:relative;}
#all.active{position:fixed; left:0; top:0; width:100%; height:100%; overflow:hidden;}

/* header */
#header{position:relative; max-width:1200px; margin:0 auto; padding:25px 0;}
#header h1{display:block; width:260px; height:45px; margin-left:20px; background:url(../images/logo.png); text-indent:-9999px;}
#header .social{position:absolute; right:20px; top:30px;}
#header .social a{float:left;display:inline-block; width:40px; height:40px; background:url(../images/social.png); text-indent:-9999px; transition:all .3s;}
#header .social .jtf{ margin-right:0px; background-position:left top;}
#header .social .charitypaujar{ margin-right:0px; background-position:160px top;}
#header .social .xinyi{ margin-right:0px; background-position:120px top;}
#header .social .youtube {margin-right:0px; background-position:80px top;}
#header .social .fb{background-position:right top;}
#header .social a:hover{opacity:.6;}

/* navigation */
#navigation{background:#6aab15;}
#navigation ul{max-width:1200px; margin:0 auto; text-align:center;}
#navigation li{position:relative; display:inline-block;}
#navigation li > a{display:block; padding:0 35px; font-size:20px; color:#FFF; line-height:46px; cursor:pointer;}
#navigation li.home > a{width:23px; height:19px; padding:0 10px; background:url(../images/navi_home.png) center center no-repeat; line-height:19px; text-indent:-9999px;}
#navigation li > a:hover ,
#navigation li > a.active{background-color:#ffcc01; color:#000; font-weight:bold;}
#navigation li.home > a:hover{background-color:inherit; opacity:.8;}
#navigation li .sub-menu{position:absolute; left:0; top:46px; display:none; width:100%; background:#FFF; z-index:1}
#navigation li .sub-menu a{display:block; padding:10px 15px; border-bottom:1px solid #f1f1f1; font-size:16px; color:#000; line-height:25px; text-align:left; transition:all .3s;}
#navigation li .sub-menu a:hover{background:#999; color:#FFF;}

/* mobile */
#mobi-btn{position:absolute; right:20px; top:30px; display:none; width:40px; height:40px; background:url(../images/mobile.png); border-radius:50%; text-indent:-9999px; cursor:pointer;}
#mobile{position:absolute; left:-250px; top:0; width:250px; min-height:100%; background:#6aab15; z-index:999;}
#mobile li{border-top:1px solid #90cc42; border-bottom:1px solid #5c9215;}
#mobile li > a{display:block; padding:0 20px; font-size:18px; color:#FFF; line-height:60px; cursor:pointer;}
#mobile li .sub-menu{display:none; background:#FFF;}
#mobile li .sub-menu a{display:block; padding:15px 20px; border-bottom:1px solid #f1f1f1; font-size:16px; color:#000; line-height:25px;}
#mask{position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.8);}

/* identify */
#identify{padding:40px 0; background:url(../images/dot_bg_02.jpg) repeat;}
#identify h2{padding-bottom:40px;; font-size:30px; color:#000; text-align:center;}
#identify h2:before{content:""; position:relative; top:5px; display:inline-block; width:36px; height:36px; margin-right:10px; background:url(../images/index_icon.png) -72px top no-repeat;}
#identify .wrap{max-width:1300px; margin:0 auto;}
#identify .wrap:after{content:""; display:block; clear:both;}
#identify .wrap dl{float:left; width:33.33%; padding:0 3%; box-sizing:border-box;}
#identify .wrap dt{border:5px solid #FFF; border-radius:50%; overflow:hidden;}
#identify .wrap dt a{position:relative; display:block; border-radius:50%; overflow:hidden; transition:all .3s;}
#identify .wrap dt a:before{content:""; position:absolute; left:0; top:0; display:none; width:100%; height:100%; border-radius:50%; overflow:hidden; background:rgba(0,0,0,.6);}
#identify .wrap dt a:after{content:"快速瞭解"; position:absolute; left:50%; top:-100px; display:inline-block; margin:-20px 0 0 -51px; padding:5px 10px; border:1px solid #FFF; border-radius:10px; font-size:20px; color:#FFF; transition:all .3s;}
#identify .wrap dt a:hover:before{display:block;}
#identify .wrap dt a:hover:after{top:50%;}
#identify .wrap dt a img{display:block; width:100%; height:auto;}
#identify .wrap dd{padding:20px 0; text-align:center;}
#identify .wrap dd h3{padding-bottom:10px; font-size:30px; color:#954a39;}
#identify .wrap dd p{font-size:18px; color:#282828;}
#identify .wrap dd p:before{content:"【"}
#identify .wrap dd p:after{content:"】"}

/* index-link */
#index-link{max-width:1200px; margin:0 auto; padding:40px 0; overflow:hidden;}
#index-link li{float:left; width:25%; padding:1% 1.5%; box-sizing:border-box;}
#index-link li a{display:inline-block; transition:all .3s;}
#index-link li a img{display:block; width:100%; height:auto;}
#index-link li a:hover{opacity:.6;}

/* footer */
#footer{position:relative; background:#5d8517; color:#FFF;}
#footer .control{position:absolute; left:50%; top:-25px; display:block; width:50px; height:50px; margin-left:-26px; background:url(../images/dot_bg_02.jpg); border:3px solid #FFF; border-radius:50%; text-indent:-9999px; cursor:pointer; transition:all .3s;}
#footer .control:hover{box-shadow:2px 2px 5px #333;}
#footer .control:before{content:""; position:absolute; left:50%; top:50%; display:block; width:0; height:0; margin:-5px 0 0 -7px; border-style:solid; border-width:0 7px 10px 7px; border-color:transparent transparent #5d8517 transparent;}

#footer .control.active:before{border-width:10px 7px 0 7px; border-color:#5d8517 transparent transparent transparent;}
#footer > .wrap{display:none; max-width:1200px; margin:0 auto; padding:80px 0 40px 0;}
#footer .wrap li{float:left; width:25%; padding:0 20px; box-sizing:border-box;}
#footer .wrap li h2{margin-bottom:15px; font-size:25px; font-weight:normal; text-indent:-2px;}
#footer .wrap li a{font-size:16px; color:#FFF; line-height:25px;}
#footer .wrap li a:hover{text-decoration:underline;}
#footer .wrap .row-1{margin-bottom:50px; overflow:hidden;}
#footer .wrap .row-2 .title{padding-bottom:10px; overflow:hidden;}
#footer .wrap .row-2 .title h3{float:left; width:50%; padding:0 20px; font-size:30px; box-sizing:border-box;}
#footer .wrap .row-2 ul{overflow:hidden;}
#footer .wrap .row-2 .exam a{position:relative; top:-6px; font-size:25px; line-height:34px; transition:all .3s;}
#footer .wrap .row-2 .exam a:before{content:""; position:relative; top:8px; display:inline-block; width:34px; height:34px; margin-right:10px; background:url(../images/ft_icon.png);}
#footer .wrap .row-2 .exam a:hover{text-decoration:none; opacity:.7;}
#footer .copyright{font-size:13px; background:#44630c;}
#footer .copyright .wrap{max-width:1200px; margin:0 auto; padding:35px 20px 10px 20px; overflow:hidden; box-sizing:border-box;}
#footer .copyright .wrap .left{float:left;}
#footer .copyright .wrap .left a{color:#75a226; transition:all .3s;}
#footer .copyright .wrap .left a:hover{color:#FFF;}
#footer .copyright .wrap .right{float:right;}
#footer .copyright .wrap .right a{display:inline-block; font-size:14px; color:#FFF; transition:all .3s;}
#footer .copyright .wrap .right a:before{content:""; position:relative; top:5px; display:inline-block; width:36px; height:31px; margin-right:5px; background:url(../images/ft_logo.png);}
#footer .copyright .wrap .right .logo-1{margin-right:15px;}
#footer .copyright .wrap .right .logo-1:before{background-position:left top;}
#footer .copyright .wrap .right .logo-2:before{background-position:right top;}
#footer .copyright .wrap .right a:hover{opacity:.6;}

/* banner */
#banner{width:100%; height:200px; background:url(../images/banner.jpg) center top no-repeat;}

/* container */
#container{background:url(../images/dot_bg_01.jpg);}
#container > .wrap{max-width:1200px; margin:0 auto; background:#FFF; overflow:hidden;}
#container > .wrap .left{float:left; width:25%; padding-bottom:20px; background:#fcfcfc;}
#container > .wrap .left .sub-menu{padding-bottom:20px; border-bottom:1px solid #aaa;}
#container > .wrap .left .sub-menu h1{padding:20px; background:#538611; font-size:22px; color:#FFF; font-weight:normal;}
#container > .wrap .left .sub-menu h1:before{content:""; position:relative; top:1px; display:inline-block; width:6px; height:20px; margin-right:12px; background:#ffcc01; border-radius:3px;}
#container > .wrap .left .sub-menu ul{margin:0 10px;}
#container > .wrap .left .sub-menu li{padding:10px; border-bottom:1px solid #b8d198;}
#container > .wrap .left .sub-menu li:last-child{border:none;}
#container > .wrap .left .sub-menu li a{font-size:18px; color:#000; transition:all .3s;}
#container > .wrap .left .sub-menu li a:hover{color:#666;}
#container > .wrap .left .resource{margin-bottom:20px;}
#container > .wrap .left .resource h1{padding:20px; font-size:22px; color:#000; font-weight:normal;}
#container > .wrap .left .resource h1:before{content:""; position:relative; top:8px; display:inline-block; width:36px; height:36px; margin-right:5px; background:url(../images/index_icon.png) right top no-repeat;}
#container > .wrap .left .resource ul{margin:0 35px;}
#container > .wrap .left .resource li{padding:5px 0;}
#container > .wrap .left .resource li a{font-size:18px; color:#333; transition:all .3s;}
#container > .wrap .left .resource li a:hover{color:#666;}
#container > .wrap .left .resource li a:before{content:""; position:relative; top:-3px; display:inline-block; width:4px; height:7px; background:url(../images/resouce_arrow.png); margin-right:10px;}
#container > .wrap .right{float:right; width:75%; padding:20px 45px; background:#FFF; box-sizing:border-box;}
#container > .wrap .right .path{font-size:15px; color:#777;}
#container > .wrap .right .path a{color:#777; transition:all .3s;}
#container > .wrap .right .path a:hover{color:#000;}
#container > .wrap .right .path a:before{content:""; position:relative; top:5px; display:inline-block; width:20px; height:20px; background:url(../images/path_home.png); margin-right:5px;}
#container > .wrap .right .path span:before{content:">"; display:inline-block; padding:0 5px;}
#container > .wrap .right .main-title{padding:20px 0; border-bottom:1px solid #538611; font-size:26px; color:#000; font-weight:bold;}

/* editro */
#editor{padding:20px 0;}

/* quiz */
#quiz{padding:20px 0;}

/* Responsive Table */
#rwd-table, .css-table{ width:99.5%; background:#ffffff; border-collapse:collapse; margin:20px 0; letter-spacing:1px; font-size:17px; line-height:25px;}
#rwd-table td, #rwd-table th, .css-table .td, .css-table .th{ padding:5px;}
#rwd-table td, .css-table .td{ color:#666666; border:#ddd 1px solid;}
#rwd-table th, .css-table .th{ background-color:#6eae58; color:#ffffff;border:#d8d8d8 1px solid;text-align: center;}
#rwd-table input{ display:inline-block; width:18px; height:18px; cursor:pointer;}
#rwd-table tr:nth-child(even){ background:#f8f8f8;}
.css-table{ display:table; display:none;}
.css-table .thead{ display:table-header-group;}
.css-table .tbody{ display:table-row-group;}
.css-table .tr{ display:table-row;}
.css-table .th, .css-table .td{ display:table-cell;}
.table-no{ width:8%; text-align:center;}
.table-title{ width:30%;}
.table-item{ width:15%; text-align:center;}

/* fraction */
.fraction{ display:block; overflow:hidden; background:#f8f8f8; border-radius:10px; padding:10px 20px; margin-bottom:20px;}
.fraction td{ padding:10px;}
.fraction tr{ border-bottom:1px dashed #ccc; color:#333;}
.fraction tr:last-child{ border-bottom:0;}

.result{ width:150px; height:150px; color:#fff; line-height:150px; border-radius:150px; background:#a2c537; text-align:center; display:block; margin:0 auto; border:8px solid #eee;}

.btn{ display:block; margin:20px auto; text-align:center;}
.btn a{ display:inline-block; padding:10px 30px; border-radius:5px; border:2px solid #bbb; color:#666; background:#fff; text-decoration:none; transition:all .3s;}
.btn a:hover{ background:#6aab15; border:2px solid #6aab15; color:#fff;}

/* news */
#container > .wrap .right #news {padding:20px 0;}
#container > .wrap .right #news .news li{position:relative; padding:10px 20px 10px 120px; border-bottom:1px solid #83cc8c;}
#container > .wrap .right #news .news li span{position:absolute; left:15px; top:14px; font-size:18px; color:#36b0ef;}
#container > .wrap .right #news .news li a{display:block; font-size:20px; color:#000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#container > .wrap .right #news .news li a:hover{color:#666;}

/* page */
#container > .wrap .right .page{ text-align:center; padding:20px 0; overflow:hidden;}
#container > .wrap .right .page a{position:relative; display:inline-block; width:30px; font-size:16px; color:#6eae58; line-height:35px; text-align:center; cursor:pointer; box-sizing:border-box; transition:all .3s;}
#container > .wrap .right .page a.prev ,
#container > .wrap .right .page a.next{text-indent:-9999px;}
#container > .wrap .right .page a.prev:before ,
#container > .wrap .right .page a.next:before{content:""; position:absolute; left:50%; top:50%; display:block; height:15px; margin-top:-7px; margin-left:-7px; background:url(../images/page-arrow.png) no-repeat;width:15px;}
#container > .wrap .right .page a.prev:before{background-position:left center;}
#container > .wrap .right .page a.next:before{background-position:right center;}
#container > .wrap .right .page a.num:hover ,
#container > .wrap .right .page a.num.active{background:#6aab15; color:#fff;}
#container > .wrap .right .page a.prev:hover ,
#container > .wrap .right .page a.next:hover{background-color:#f1f1f1;}

/* back */
.back{ text-align:right;}
.back a{ display:block; margin:20px auto; text-align:center;}
.back a{ display:inline-block; padding:10px 30px; border-radius:5px; border:2px solid #bbb; color:#666; background:#fff; text-decoration:none; transition:all .3s;}
.back a:hover{ background:#6aab15; border:2px solid #6aab15; color:#fff;}

/* identify_list */
#container > .wrap .identify_list{ padding:20px 45px; background:#FFF; box-sizing:border-box;}
#container > .wrap .identify_list .path{font-size:15px; color:#777;}
#container > .wrap .identify_list .path a{color:#777; transition:all .3s;}
#container > .wrap .identify_list .path a:hover{color:#000;}
#container > .wrap .identify_list .path a:before{content:""; position:relative; top:5px; display:inline-block; width:20px; height:20px; background:url(../images/path_home.png); margin-right:5px;}
#container > .wrap .identify_list .path span:before{content:">"; display:inline-block; padding:0 5px;}
#container > .wrap .identify_list .main-title{padding:20px 0; border-bottom:1px solid #538611; font-size:26px; color:#000; font-weight:bold;}

/* img-block */
#container > .wrap .identify_list .img-block { overflow:hidden;}
#container > .wrap .identify_list .img-block dl{ float:left; width:31%; margin:1%; box-sizing:border-box; overflow:hidden; position:relative; transition:all .3s; background:#f7f7f7;}
#container > .wrap .identify_list .img-block dl dt { position:relative; text-align:center;}
#container > .wrap .identify_list .img-block dl dt img{ display:block; width:100%; height:auto; position:relative; bottom:0px; transition:all .3s;}
#container > .wrap .identify_list .img-block dl dt div{ position:absolute; color:#333; font-weight:bold; text-align:center; bottom:0px; width:100%; font-size:20px; padding:10px 0; background:#f1f1f1; transition:all .3s;}
#container > .wrap .identify_list .img-block dl dd{ position:absolute; bottom:-300px; width:100%; box-sizing:border-box; padding:20px 10px; box-sizing:border-box; background:#5ea306; transition:all .5s;}
#container > .wrap .identify_list .img-block dl dd b{ font-size:20px; color:#fff; line-height:25px; margin:0 0 5px 0; display:block;}
#container > .wrap .identify_list .img-block dl dd p{ font-size:18px; color:#fff; font-weight:normal;}
#container > .wrap .identify_list .img-block dl:hover dt img{ bottom:30px;}
#container > .wrap .identify_list .img-block dl:hover dt div{ bottom:30px;}
#container > .wrap .identify_list .img-block dl:hover dd{ bottom:0px; }
#container > .wrap .identify_list #editor{ padding:20px 10px;}

/* resource_table */
.resource_list { overflow:hidden; margin:0 0 10px 0;}
.resource_list li{ padding:10px 20px; float:left; cursor:pointer; font-size:20px; border:2px solid #D4EADB; border-radius:5px; margin-right:10px; color:#47A168; font-weight:bold;}
.resource_list li.active{ color:#fff; background:#4C7C5E;}
.resource_con li{ display:none;}
.resource_table {border-left:1px solid #d8d8d8; border-top:1px solid #d8d8d8; margin:20px 0;border-collapse:collapse; border-spacing:0;}
.resource_table tbody tr:nth-child(even){ background:#f8f8f8;}
.resource_table thead td{ padding:5px;color:#fff; background:#6eae58; border-right:1px solid #d8d8d8; border-bottom:1px solid #d8d8d8; font-size:17px;line-height:30px; }
.resource_table tbody td{ padding:5px; border-right:1px solid #d8d8d8; border-bottom:1px solid #d8d8d8; color:#333; font-size:17px;line-height:25px; }

/* RWD */
@media screen and (max-width:1200px){
/* navigation */
#navigation > ul > li > a{padding:0 24px;}
}

@media screen and (max-width:1000px){
/* navigation */
#navigation > ul > li > a{padding:0 15px;}
}

@media screen and (max-width:900px){
/* header */
#header .social{right:70px;}
/* navigation */
#navigation{display:none;}
/* mobile */
#mobi-btn{display:block;}
/* container */
#container > .wrap .left{display:none;}
#container > .wrap .right{float:none; width:100%; padding:20px;}
}

@media screen and (max-width:800px){
/* footer */
#footer .copyright .wrap{padding:20px;}
#footer .copyright .wrap .left ,
#footer .copyright .wrap .right{float:none; text-align:center;}
#footer .copyright .wrap .right{margin-bottom:10px;}
}

@media screen and (max-width:768px){
/* index-link */
#index-link{padding:20px 0;}
/* footer */
#footer .control{display:none;}
#footer > .wrap{display:block !important; padding:20px 0;}
#footer > .wrap .row-1 ,
#footer > .wrap .row-2 .title ,
#footer > .wrap .row-2 li{display:none;}
#footer > .wrap .row-2 .exam{float:none; display:block; width:100%; text-align:center;}

/* Responsive Table */
.break-table{ background-color:transparent !important;}
.break-table, .break-table thead, .break-table tbody, .break-table th, .break-table td, .break-table tr{ display:block;}
.break-table thead tr{ position:absolute; top:-9999px; left:-9999px;}
.break-table tr{border:1px solid #ccc; margin-bottom:10px; background:#fff;}
.break-table td{border:none!important; border-bottom:1px solid #eee !important; position:relative; padding-left:35% !important; white-space:normal; text-align:left; width:64%;}
.break-table td:before{ position:absolute; top:6px; left:6px; width:30%; padding-right:10px; white-space:nowrap; text-align:left; font-weight:bold; color:#1a1a1a;}
.break-table td:before{ content:attr(data-title);}
/* page */
#container > .wrap .right .page a{ width:20px; line-height:30px;}
/* img-block */
#container > .wrap .identify_list .img-block dl{ width:48%;}
}

@media screen and (max-width:600px){
/* identify */
#identify{padding:40px 0; background:url(../images/dot_bg_02.jpg) repeat;}
#identify h2{padding-bottom:40px;; font-size:30px; color:#000; text-align:center;}
#identify h2:before{content:""; position:relative; top:5px; display:inline-block; width:36px; height:36px; margin-right:10px; background:url(../images/index_icon.png) -72px top no-repeat;}
#identify .wrap{max-width:1300px; margin:0 auto; overflow:hidden;}
#identify .wrap dl{float:none; width:100%; max-width:280px; padding:0; margin:0 auto 20px auto;}
/* index-link */
#index-link{padding:10px 0;}
#index-link li{width:50%; opacity:1;}
#index-link li a{display:block;}
#index-link li a img{width:100%; max-width:none;}
/* resource_list */
.resource_list li{ padding:10px 1%; font-size:17px; margin:0 1% 1% 0;}
.resource_list li:last-child{ margin:0 0 1% 0; }
}

@media screen and (max-width:480px){
/* header */
#header { overflow:hidden;}
#header .social{position:static; margin-top:10px; padding-right:70px; float:right;}
/* mobile */
#mobi-btn{left:auto; right:20px; top:80px;}
/* img-block */
#container > .wrap .identify_list .img-block dl{ width:100%; margin:10px 0;}
}
@media screen and (max-width:320px){
/* resource_list */
.resource_list li{ padding:10px 1%; font-size:16px; margin:0 1% 1% 0; border:1px solid #D4EADB;}
.resource_list li:last-child{ margin:0 0 1% 0; }
}