@charset "utf-8";
/* CSS Document */
/*CSS RESET*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@font-face {
  font-family: 'Noto Sans TC';
  src: url("../Noto_Sans_TC/NotoSansTC-Black.otf")format("opentype"),
         url("../Noto_Sans_TC/NotoSansTC-Bold.otf")format("opentype"),
	  url("../Noto_Sans_TC/NotoSansTC-Light.otf")format("opentype"),
	  url("../Noto_Sans_TC/NotoSansTC-Medium.otf")format("opentype"),
	  url("../Noto_Sans_TC/NotoSansTC-Regular.otf")format("opentype"),
	  url("../Noto_Sans_TC/NotoSansTC-Thin.otf")format("opentype");
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
  overflow-y: scroll;
  overflow-x: hidden;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/*CSS RESET*/


body,div,ul,li,form,button,header,footer,nav,input,textarea,th,td,span,p,select,h1,h2,h3,h4,h5,h6{ 
font-family:'Noto Sans TC','Open Sans', Geneva,'Microsoft JhengHei',"微軟正黑體", sans-serif; letter-spacing:0.5px; }
h1,h2,h3,h4,h5,h6{  margin:0 0 1em 0; padding:0; }
body { margin:0;  color:#212121 ; padding:0}
html,body {  font-size:100%; -webkit-text-size-adjust:100% ; height: 100%;  min-height: 100% !important;} /*for ipad*/
html {  image-rendering:-webkit-optimize-contrast;}

*{box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

a, a h1, a h2, a h3, a h4, a h5, a h6{ text-decoration: none ; 
-o-transition:all 0s ease 0s, all 160ms ease 0s;
-webkit-transition:all 0s ease 0s, all 160ms ease 0s;
-moz-transition: all 0s ease 0s, all 160ms ease 0s;
transition: all 0s ease 0s, all 160ms ease 0s;     
}
a:hover, a:hover h1, a:hover h2, a:hover h3, a:hover h4, a:hover h5, a:hover h6{ color:#dd6631; text-decoration: none}
a img{ border:0px; max-width: 100%; }
a, a:link { width: 100%; height: 100%; display: inline-block; }
/*img{ vertical-align: top; max-width: 100%; }*/

ul, ol, li { list-style: none; list-style-type:none; }
input {border:0px ;  line-height:1.5em; vertical-align:middle; background:transparent; color:#212121; padding:0.2em 0; outline:0 !important;menuwidth: 100%; border-bottom: 1px solid #d57c97; width: 80%; margin: 0 auto; font-size: 2em;}
input:hover, textarea:hover, input:focus, textarea:focus{ }
textarea {border:0; background:#f6f6f6; color:#000; padding:5px; width:100%; font-size:0.9375em; }
/*input[type=checkbo<navx] { border:0px\9; background:none; width:auto !important; height:auto !important;}*/

nav { display:block; }

select {  border: 0; background: transparent; color:#000; vertical-align:middle; font-size:16px;}
select:hover, select:focus{border:0px; background: transparent ; color:#000;}
/*input[type="radio"]{border:0px\9; background:none; vertical-align:middle;  width:auto !important; height:auto !important;}*/


/*-------------------------------------基本設定-------------------------------------------*/
/*最外框*/
.wrap{ width:100%; margin:0 auto; position:relative; line-height: 1.7; min-height: 100%; } /*外層裝所有物件除了縮小選單*/


/*主內容外框*/
.full { width: 100%; }
.bg-j { background-color: #56b6d1; margin-top: 70px; }
.bg-s { background-color: #66cccc; margin-top: 70px;}
.bg-test { background-color:#cccccc; position: relative;
	margin-top: 180px;
}
.bg-j-p { 
	background-image:url("../../images/bg-j.png");
	background-size: 2000px auto;
	background-repeat: repeat-x;
	background-position: top 50px center;
}
.bg-s-p { 
	background-image:url("../../images/bg-s.png");
	background-size: 2000px auto;
	background-repeat: repeat-x;
	background-position: top 50px center;
}


.topCont { 
	width: 100%;
	margin: auto; padding-bottom: 65px;
	overflow: hidden;
	position:relative;
	background-image: url("../../images/cloud.png");
	background-size: 1620px auto;
	background-position: calc(50% - 50px) 0;
	background-repeat: no-repeat;
}
.mainCont {
	width: 1024px;
	margin: 0 auto;
}
*::before, *::after {pointer-events: none;}
.toTOP {
	width: 55px; height: 55px; border-radius: 28px;
	position: fixed; bottom: 235px; right: 50px;
	background:#1c88c2;
	color:#eee; font-size: 1em;
	text-align: center; line-height: 4.5em;
	display: none; z-index: 999;
}
.toTOP a, .toTOP a:link, .toTOP a:visited { color:#eee; text-decoration: none;}
.toTOP::before {
	content:'▲';
	position: absolute; top: -20px; left: 18px;
}
.toTOP.btnShow { 
	display: block;
	animation-name: ani-btnShow;
	animation-duration: 3.5s;
	animation-iteration-count: 0;
    animation-direction: alternate-reverse;
}
@keyframes ani-btnShow {
    0%{ 
		bottom: 90px;
		opacity: 0.0;
    }
    100%{
		
		bottom: 105px;
		opacity: 1.0;
		
    }
}

/*選單-----------------------------*/

header { 
	position:absolute; top: 0; 
	width:100%; height: 80px;
	margin:0 auto; padding:0;    
	z-index: 1080;
	display: block;
}
.menuCont { width: 1280px; margin: 0 auto;}
.pcNav li.grade {
	border-radius: 4px;
	padding: 0 5px; margin-left: 18px!important;
	color: #000!important;
	position: relative;
	font-size:1.125em;
	font-weight:500;
}
.pcNav li.grade::after { 
	content:'►'; color: #000;
	position: absolute;
	right: -10px; top: 5px;
	font-size: 0.5em;
}
/*.main { margin-top: 98px;}*/
/*內頁logo*/
.logo { 
	width: 195px!important; 
	height: auto!important;   
	position: absolute; 
	margin: 1em; 
	z-index: 3000;
}
.logo img { width: 100%; height: auto; }
/*.inner .logo a{background-image: url("../../images/inner_logo.png"); background-repeat: no-repeat;
      height: 0; width: 100%; display: block;
     padding-bottom: 100%; 
	-webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;}*/

/*.indexH { position: relative; }
.indexH ul.pcNav { margin: 620px auto 0 auto; padding: 1em 1.5em; text-align: center;}
.indexH .pcNav li { display: inline-block; text-align: center; height: 30px; margin: 0.5em;}*/
/*選單文字樣式*/
/*.indexH .pcNav li a { font-size: 1.25em; }
.indexH .pcNav li a:hover, .inner .pcNav li a:hover { color:#f6d851; -webkit-text-stroke-color: #f6d851; }
.indexH .pcNav li a, .inner .pcNav li a { padding: 0;  line-height: 30px; color: #FFF; font-weight: bold; }
.indexH .logoH { margin-bottom: 0.5em;}
.indexH .pcNav li a {display: inline-block;}*/



ul.pcNav { margin: 0; padding: 0; }

/*內頁選單*/
.inner ul.pcNav { 
	width: auto; 
	display: block; 
	top: 0; 
	padding: 1em; 
	margin: 0 auto 0 auto; 
	text-align: right;
	position: relative;
}
/*選單背景*/
.inner ul.pcNav::after {
	content:'';
	width: 630px; height: 37px;
	background-color: #4ca7db;
	opacity: .5;
	display:block;
	position: absolute;
	right: 0; top:13px;
	border-radius: 17px;
	z-index:-1;
}
/*下滑選單陰影*/
/*.inner ul.pcNav.navShadow {
  -webkit-filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.2));
  z-index: 1;
}*/
.pcNav li { display: inline-block; position: relative; }
.inner .pcNav li { margin: 0 .3em; color:#fff;}
.inner .pcNav li.navLine { margin: 0;}
.inner .pcNav li a { font-size: 1.125em; color: #fff; font-weight:500;}
.pcNav li.active a {color:#f6d851;}
/*.pcNav li a{ display: block; padding: 0.8em 0;}*/


/*.closeBtn { position: absolute;  top: 15px; right: 5.3%; display: none;  width: 35px; height: 35px;cursor:pointer; background-color: transparent;border: 0;}
.closeBtn .line1, .closeBtn .line2 {width: 35px;height: 2px;background-color: #e292aa;display:block;}
.open-closeBtn { display:block; z-index:1085; }
.closeBtn .line1 {-webkit-transform: rotate(45deg) translate(0px, 2px); transform: rotate(45deg) translate(0px, 2px);}
.closeBtn .line2 { -webkit-transform: rotate(-45deg) translate(0px, -2px); transform: rotate(-45deg) translate(0px, -2px);}*/

.grt-mobile-button { display:none; }
.grt-mobile-button:focus { border:0; outline:0; }
header.full { height:100% !important; }

/*滑動logo和nav加陰影*/
/*header.shadow .pcNav, header.shadow.inner img.logo {
	-webkit-box-shadow: 2px 7px 4px -3px rgba(0,0,0,0.08);
    -moz-box-shadow: 2px 7px 4px -3px rgba(0,0,0,0.08);
    box-shadow: 2px 7px 4px -3px rgba(0,0,0,0.08);
    -webkit-filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.2));
    -moz-filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.2));
    -ms-filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.2));
 }*/


header.changeS { -webkit-animation: MoveBg 0.2s ease-in-out forwards; animation: MoveBg 0.2s ease-in-out forwards; }
@keyframes MoveBg {
    from { height: 98px; }
    to { height: 70px; }
}

header.changeH{ -webkit-animation: MoveBg2 0.2s ease-in-out forwards; animation: MoveBg2 0.2s ease-in-out forwards;     }
@keyframes MoveBg2 {
    from { height: 70px; }
    to { height: 98px; }
}


/*手機版logo下滑*/
/*header.changeS .logo { -webkit-animation: MoveLogo 0.2s ease-in-out 1 forwards; animation: MoveLogo 0.2s ease-in-out 1 forwards;      }
@keyframes MoveLogo {
    from { transform: scale(1); top: auto; margin-top: 0;}
    to {  transform: scale(0.85); top: 19px;margin-top: -25px;}
    from { opacity:1; margin-top: 0;}
    to {  opacity:0;margin-top: -25px;}
}*/

/*手機版logo初始*/
/*header.changeH .logo { -webkit-animation:MoveLogo2 0.2s ease-in-out 1 forwards; animation: MoveLogo2 0.2s ease-in-out 1 forwards;  }
@keyframes MoveLogo2 {
    from { transform: scale(0.85); top: 19px; margin-top: -20px;}
    to {  transform: scale(1); top: auto;  margin-top: 0;}}*/

/*滑動後banner消失*/
/*.banner.fadeOut { -webkit-animation:Fade 0.2s ease-in-out 1 forwards; animation: Fade 0.2s ease-in-out 1 forwards; pointer-events: none; }
@keyframes Fade {
    from { opacity:1;}
    to {  opacity:0;}
}*/

/*首頁選單移動*/
/*header.changeS .pcNav{-webkit-animation: MoveNav 0.2s ease-in-out 1 forwards;animation: MoveNav 0.2s ease-in-out 1 forwards;}
@keyframes MoveNav {
    from { top: 40px;}
    to {  top: 25px;}}

header.changeH .pcNav{-webkit-animation: MoveNav2 0.2s ease-in-out  forwards;animation: MoveNav2 0.2s ease-in-out  forwards;}
@keyframes MoveNav2 {
    from { top: 10px;}
    to {  top: 35px;}}*/



/*首頁---------------------------------------------------------------*/

.bg-gradient {background: linear-gradient(360deg, rgba(255,255,255,1) 35%, rgba(220,221,220,1) 100%); }
.banner h1 { 
	font-size: 2.34em; color:#3e6a16; 
	line-height: 1.3em;
	font-weight: 700;
	position: relative; top: 88px;
	z-index: 1001;
	-webkit-text-stroke: 0px white;
    -webkit-text-fill-color: #3e6a16;
	text-shadow:
    -1px -1px 0 #fff,  
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
}


.banner h1 span { 
	font-size: .4em; display: block;
	margin-top: 0px; 
}
.banner { 
	width: 1280px; height: 300px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	
}
.banner div { 
	position: absolute; display: block;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
}
.bn-r{
	width:307px; height: 328px; 
	background-image:url("../../images/bg-r.png");
	background-size: cover;
	background-repeat: no-repeat;
	top:33px; right: 102px;
	z-index: 7;
}
.bn-l{
	width:409px; height: 192px; 
	background-image:url("../../images/bg-l.png");
	background-size: cover;
	background-repeat: no-repeat;
	top:109px; left: 118px;
	z-index: 5;
}
.bn-c{
	width:553px; height: 163px; 
	background-image:url("../../images/bg-c.png");
	background-size: cover;
	background-repeat: no-repeat;
	top:179px; right: 232px;
	z-index: 3;
}

.bn-tree{
	width:684px; height: 547px; 
	background-image:url("../../images/bg-tree.png");
	background-size: cover;
	background-repeat: no-repeat;
	top:-74px; left: -111px;
	z-index: 1;
}






/*即時新訊---------------------------------------------------------------*/
.news {
	position: relative; 
	z-index: 998;
	margin: auto;
	width: 1030px;
}
.newsTitle {
	background-image:url("../../images/title-news.png");
	background-size: 176px 50px;
	background-repeat: no-repeat;
	color: #5f4f3c; font-size: 1.875em; text-indent: -999999px;
	width: 234px; height: 56px;
	position: absolute;
	left: 8px; top:-50px;
}

.newsTitle span {
	background: url("../../images/bn-bug.png");
	background-size: cover;
	width: 66px; height: 67px;
	position: absolute;
	left: -5px; top: -45px;
	display: block;
}
.bxflex {
	width: 1015px; height: 293px;
	margin-top: -15px;
	margin-left: calc( 50% - 507px );
	background: #e5dbbf;
	border-radius: 6px;
	display:inline-flex;
}
.sliderFrame {
	width: 433px; height: 275px;
	margin: 9px 8px 0 11px;
	border-radius: 5px;
	overflow: hidden;
	-webkit-mask-image: -webkit-radial-gradient(white, black);/*修復safari圓角overflow失效*/
}
.sliderFrame li {
	position: relative; 
}
.sliderFrame li p {
	position: absolute; bottom: 0; left: 0;
	width: 100%; height: 63px;
	background-color: rgba(15,16,15,0.65);
	color: #fff; font-size: 1em;
	line-height: 1.3em;
	padding: 10px;
	z-index: 10;
	font-weight: 500;
}
.sliderFrame li p span { display: block; margin-left: -7px;}
.flex-2x2 {
	width: 560px;
	margin: 9px 0 0 3px ;
	display:inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}
.sliderFrame li img { 
	width: 100%; height: auto; 
	transform:scale(1,1);
	transition: all 0.2s ease-out;
}
.sliderFrame li img:hover{ transform:scale(1.07,1.07); }

/*修改jqbxsliderCSS********/
.bx-wrapper { border: 0!important; }
.bx-controls-direction { display: none;}/*hide btn*/
.bx-wrapper .bx-pager { bottom: 75px!important; left: 15px; width: 115px!important;}/*pager position width*/
.bx-wrapper .bx-pager.bx-default-pager a { width: 15px!important; height: 15px!important; border-radius: 8px!important; background:#e8e2de!important; margin: 0 13px 0 0!important; box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);}
.bx-wrapper .bx-pager.bx-default-pager a.active { background:#1c8aad!important; }
/*修改jqbxsliderCSS********/

.flex-2x2 li {
	width: 264px; height: 127px;
	display: block;
	position: relative;
	border-radius: 5px;
	margin: 0 16px 19px 0;
	overflow: hidden;
	z-index: 0;/*修復safari圓角overflow失效*/
}
.flex-2x2 li img { 
	width: 100%; height: auto; 
	transform:scale(1,1);
	transition: all 0.2s ease-out;
}
.flex-2x2 li img:hover{ transform:scale(1.07,1.07); }
.flex-2x2 li p {
	position: absolute; bottom: 0; left: 0;
	width: 100%; height: 50%;
	background-color: rgba(15,16,15,0.65);
	color: #fff; font-size: 1em;
	font-weight: 500;
	line-height: 1.4em;
	padding: 8px;
	border-radius: 0 0 5px 5px;
	z-index: 10;
}
.flex-2x2 li p span {
	display: block;
	margin-left: -7px;
}


/*數位特色---------------------------------------------------------------*/
/*feature*/
.grade { 
	position: relative;
	text-align: center;
	padding: 40px 0 20px 0;
}
.grade h1 {
	display: inline-block;
	font-size: 1.875em; font-weight: bold; line-height: 0;
	position: relative; 
	margin: 60px auto 100px auto;
	z-index: 10;
}

.feature {
	display:inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	margin: 0 auto 50px auto;
}
.feature div {
	width: 330px; height: 330px; display: block;
	padding: 75px 0 0 0px; margin: 0 15px 0 0;
	text-align: center;
}

.feature div h3 {
	font-size: 1.625em; color: #ffffff;
	line-height: 20px; letter-spacing: .9px;
	font-weight: 500;
}
.feature div p {
	color: #bedfe9; font-size: 1em;
	line-height: 1.3em;
	padding: 0 45px;
	text-align: justify;
	font-weight: 300;
}

/*junior-feature*/
.grade.junior h1 { color: transparent; }
.junior .feature div { 
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
}
.grade.junior h1::after {
	content:''; display: block;
	width: 414px; height: 95px;
	background-image:url("../../images/title-junior.png");
	background-size: 414px 95px;
	background-position: 0 0;
	position: absolute;
	bottom: -30px; left: calc(50% - 206px);
	z-index: -1;
	
}


.junior .feature div:nth-child(1) { 
	background-image:url("../../images/f_j_01.png");
}
.junior .feature div:nth-child(2) { 
	background-image:url("../../images/f_j_02.png");
}
.junior .feature div:nth-child(3) { 
	margin-right: 0;
	background-image:url("../../images/f_j_03.png");
}

/*senior-feature*/
.grade.senior h1 { color: transparent; }
.senior .feature div { background-size: contain;
	background-repeat: no-repeat;
	position: relative; }

.grade.senior h1::after {
	content:''; display: block;
	width: 414px; height: 95px;
	background-image:url("../../images/title-senior.png");
	background-size: 414px 95px;
	background-position: 0 0;
	position: absolute;
	bottom: -30px; left: calc(50% - 206px);
	z-index: -1;
}
.grade.senior .feature h3{color:#ffffff;}
.grade.senior .feature p { color: #d4f2ea;}
.senior .feature div:nth-child(1) { 
	background-image:url("../../images/f_s_01.png");
}
.senior .feature div:nth-child(2) { 
	background-image:url("../../images/f_s_02.png");
}
.senior .feature div:nth-child(3) { 
	margin-right: 0;
	background-image:url("../../images/f_s_03.png");
}

/*video*/
.video-cont{
	position: relative;
	padding-bottom: 56.25%; 
    padding-top: 0px;
	height: 0; width: 1024px;
	overflow: hidden;
	background-color: transparent;
	border-radius: 10px;
	z-index: 0;/*修復safari圓角overflow失效*/
}
.video-cont iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}


/*list*/
.grade h2 {
	width: 100%;
	display: block;
	font-size: 1.5em;
	text-align: center;
	position: absolute; top: -80px;
	margin: 19px auto;
	font-weight: 500;
}

.list {
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	margin-bottom: 120px;
}
.junior .list li { width: 48%;}
.list li {
	width: 48%; height: 60px;
	text-align: left;
	border-radius: 10px;
	margin-bottom: 12px;  
	position: relative;
}
.list li a {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
}
.list li h3 {
	font-size: 1em; 
	line-height: 20px; font-weight: 500;
	margin: 0; padding: 0 10px 3px 55px;
}
.list p {
	color: #757575; font-size: 0.75em;
	padding: 0 10px 0 55px;
	text-indent: -.5em;
	line-height: 1.2em;
	font-weight: 500;
}
.t-outdent { text-indent: 0em!important;}
.t-outdent-l { 
	display: block;
	text-indent: 4.6em!important;
}
.t-spacing { letter-spacing: -.1px!important;}
.list li.grade3::before, .list li.grade4::before, .list li.grade5::before, .list li.grade6::before {
	content:''; 
	background-size: 54px 60px;
	display: block; width: 54px; height: 60px;
	position: absolute; top: 0; left: 0;
}
.list li.t-video::after, .list li.t-web::after, .list li.t-app::after {
	content:'';
	background-size: 22px 22px;
	display: block; width: 22px; height: 22px;
	position: absolute; top: calc( 50% - 11px); right: 10px;
}

/*junior-list*/
.grade.junior h2 { color:#4179a2; }
.grade.junior h2::after { background-color:#e7dacf;}
.junior .list li a h3, .junior .list li a:link h3, .junior .list li a:visited h3 { color:#4179a2; }
.junior .list li { background-color: #e9e9e8; }
.junior .list li:hover { background-color: #cedce7; }
.junior .list li.grade3::before { background-image:url("../../images/grade3-video.png"); }
.junior .list li.grade3-w::before { background-image:url("../../images/grade3-web.png"); }
.junior .list li.grade4::before { background-image:url("../../images/grade4-video.png"); }
.junior .list li.grade4.t-web::before { background-image:url("../../images/grade4-web.png"); }
.junior .list li.grade4.t-app::before { background-image:url("../../images/grade4-app.png"); }
.junior .list li.grade3.t-web::before { background-image:url("../../images/grade3-web.png"); }
.junior .list li.grade3.t-app::before { background-image:url("../../images/grade3-app.png"); }


/*senior-list*/
.grade.senior h2 { color:#29897a;}
.grade.senior h2::after { background-color:#419387;}
.senior .list li a h3, .senior .list li a:link h3, .senior .list li a:visited h3 { color:#29897a; }
.senior .list li { background-color: #e0e0e2; }
.senior .list li:hover { background-color: #d4d4d4; }
.senior .list li.grade5::before { background-image:url("../../images/grade5-video.png"); }
.senior .list li.grade6::before { background-image:url("../../images/grade6-video.png"); }
.senior .list li.t-video::before { background-image:url("../../images/l_s_icon_video.png"); }
.senior .list li.grade5.t-web::before { background-image:url("../../images/grade5-web.png"); }
.senior .list li.grade5.t-app::before { background-image:url("../../images/grade5-app.png"); }
.senior .list li.grade6.t-web::before { background-image:url("../../images/grade6-web.png"); }
.senior .list li.grade6.t-app::before { background-image:url("../../images/grade6-app.png"); }
.senior .list { margin-bottom: 60px;}

/*即時測驗---------------------------------------------------------------*/
.test { margin-bottom: 45px;}
.test h1 { 
	color:#161616; font-size: 1.875em; font-weight: 500;
	text-align: center;
	margin: 5px auto 20px auto; padding-top: 50px;
	position: absolute; z-index: 10;
	width: 100%;
	text-align: center;
	left: 0; top: -180px;
}

.test > p { 
	font-size: 1em; color: #555; 
	text-align: center;
	position: absolute; z-index: 10;
	width: 100%;
	left: 0; top: -70px;
	font-weight: 300;
}
.testCont {
	width: 1024px; 
	padding: 55px 45px 45px 45px;
	display:inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	position: relative;
}

.testCont div {
	width: 100%;
	margin-bottom: 55px;
}
.wordwall .title {
	width: 152px; height: 65px; display: block;
	margin: auto auto 20px auto;
	background-image: url("../../images/test-wordwall.png");
	background-size: 152px auto;
	background-repeat: no-repeat;
}
.wordwall .title p { 
	padding-top: 35px;
	font-weight: 500;
	text-align: center;
}
.kahoot .title {
	width: 344px; height: 46px; display: block;
	margin: auto auto 20px auto;
	background-image: url("../../images/test-kahoot.png");
	background-size: 344px auto;
	background-repeat: no-repeat;
}
.quizizz .title {
	width: 325px; height: 45px; display: block;
	margin: auto auto 20px auto;
	background-image: url("../../images/test-quizizz.png");
	background-size: 325px auto;
	background-repeat: no-repeat;
}
.testCont ul {
	width: 100%;
	display:inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
}
.testCont ul li {
	width: 200px; height: 50px; display: block;
	margin: 0 8px 13px 8px;
	border-radius: 25px;
	background-color: #fff;
	line-height: 3em;
	text-align: center;
}
.testCont ul li a, .testCont ul li:link, .testCont ul li:visited { 
	color: #505050; font-size: 1em; font-weight: 500;
}
.testCont ul li:hover { background:#aaaaaa;}
.testCont ul li:hover a { color:#fff;}
/*footer*/

footer { 
	color: #2c2c50; font-size:0.9375em; 
	padding: 0 1em 4em 1em; 
	line-height: 1.2;  font-weight: 500;
	text-align: center;
	z-index: 10;
	position: relative;
}
footer a, footer a:link {
	/*display: inline;*/
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
	width: auto; height: auto;
}

footer a:hover {
	color: #555;
}