@charset "utf-8";

/* CSS Document */



/* CSS Reset */

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, input, 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;

	-webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

}

/* 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-x: hidden;

	font-family:'Open Sans', Verdana, Geneva,'Microsoft JhengHei',"微軟正黑體", sans-serif;

}

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;

}

form, label, input, table, textarea {

	outline: 0;

	border: none;

	/*background-color: transparent;*/

}

a, a:link, a:visited {

	text-decoration: none;

	color: inherit;

}

/* CSS Reset */





@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;1,400&display=swap');

body,div,ul,li,form,button,header,footer,nav,input,textarea,th,td,span,p,select,h1,h2,h3,h4,h5,h6{ 

font-family:'Source Sans Pro',Verdana,'Microsoft JhengHei',"微軟正黑體", sans-serif; letter-spacing:1px; }

h1,h2{  margin:0 0 1em 0; padding:0;}

body { margin:0;  background: #f2ecdf/*#999*/; padding:0}

html,body {  font-size:100%; -webkit-text-size-adjust:100% ; height: 100%;  min-height: 100% !important;} /*for ipad*/



*{ 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:#666; text-decoration: none}

a img{ border:0px; }

.clearFix {clear:both;}

img{vertical-align: top;}



h6{ font-size:1em; /*line-height:1.5em;*/}

h5{ font-size:1.125em; /*18px/16px*/line-height:1.1em;  /*21px/16px*/}

h4{ font-size:1.3125em; /*21px/16px*/ line-height:1.2em;/*25px/16px*/}

h3{ font-size:1.3em;/*26px/16px*/ line-height:1.5em;/*30px/16px*/}

h2{ font-size:1.625em;/*26px/16px*/ line-height:33px;/*34px/16px*/ color:#008b03; font-weight: bold;}

h1{ font-size:1.75em;/*32px/16px*/ line-height:1.8em;/*36px/16px*/ color: #008b03; font-weight: bold;}





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

/*手機*/

.sb-2.right.push{display:none ;}

.sb-2 nav{display:none !important;}

.fixed-header{display:none ;}

.mobileMenu {  display:none ; position:relative; }

.lanMobile {}









nav { 

	position: relative;

	padding: .5em 1em;

	font-size: 1.125em;

	font-weight: bold;

	margin: -15px auto 0 auto;

	width: 1100px;

}

nav > ul {

	position: absolute;

	z-index: 9;

	width: 100%;

	padding: .9em 7.5em 0 5.5em;

}

nav > ul li {

	text-align: center;

	position: relative;

}

nav > ul li:hover {

	cursor: pointer;

}

nav ul li:hover > ul {

	display:block;

}

nav > ul li.active { color:#008b03;}

nav > ul li.active::before{

	content:'';

	background: url("../../images/nav-active.png") no-repeat;

	background-size: 22px 32px;

	width: 22px; height: 32px;

	position: absolute;

	left: -27px; bottom: -14px;

	z-index: 9;

}

nav ul ul {

	display:none;

	position:absolute;

	padding-top: 10px;

	text-align: center;

	margin-left: calc(50% - 55px);

}

nav ul ul li {

	width: 110px;

	height:45px;

	display: block;

	position: relative;

	background: url("../../images/ddbg-c.png") center repeat-x;

	background-size: auto 44px;

	margin-top: -4px;

	padding-top: 12px;

}

nav ul ul li::before, nav ul ul li::after {

	content:'';

	position: absolute;

	display: block; width: 5px; height: 44px;

	top: 0;

}

nav ul ul li::before {

	background: url("../../images/ddbg-l.png") center no-repeat;

	background-size: 5px 44px;

	left: -2px;

}

nav ul ul li::after {

	background: url("../../images/ddbg-r.png") center no-repeat;

	background-size: 5px 44px;

	right:-2px;

	

}

nav ul ul li a {

	position: relative;

	width:inherit;

	display: block;

}

nav ul ul li a::after{

	content:'';

	background: url("../../images/dropDownLine.png") center repeat-x;

	background-size: 72px 4px;

	width: 90%;

	height:4px;

	display: block;

	margin: 9px auto 0 auto;

}

nav ul ul li:last-child a::after{

	background: none;

}





.nav_bg.flex_row { 

	justify-content: space-between;

}

.nav_bg span:first-child {

	background:url("../../images/nav-bg-l.png") top no-repeat;

	background-size: contain;

	width: 120px; height: 49px;

	flex: 0 0 120px;

}

.nav_bg span:nth-child(2) {

	background:url("../../images/nav-bg-c.png") top repeat-x;

	background-size: 100px 49px;

	position: relative;

	width: 100%; height:49px;

	flex: 1 1 100px;

	margin: 0 -1px 0 -1px;

}

.nav_bg span:nth-child(3) {

	background:url("../../images/nav-bg-r.png") top no-repeat;

	background-size: contain;

	width: 133px; height: 56px;

	flex: 0 0 133px;

}



/*第2層*/

.menu > ul > li > ul { 

  display: none; 

  position: absolute; left: 0px;

  top:100%;

  min-width: 210px;  margin-top: -3px; 

}



.menu > ul > li:last-child > ul { 

  right: 0px !important;left: auto;

}

.menu ul ul li{text-align:center; }

.menu li li a, .menu > ul > li.active li a { position: relative; z-index:100; padding:0.2em; 

	filter:alpha(opacity=95); -moz-opacity:95;  opacity: 0.95;  border-bottom: 0;}

.menu li li:first-child a, .menu > ul > li.active li:first-child a { border:0;}

.menu li li a:hover, .menu > ul > li.active li a:hover  { color: #333;}

.menu ul li:hover > ul { display: block; 

    animation-name:subm;

    animation-duration:.2s;

}

@keyframes subm{

    from{

        opacity: 0;

    }

    to{

        opacity: 1;

    }

}

.menu ul ul > li { position: relative; }











.bgc-blue { background-color: #c9e8ec;}

.flex_row {

	display: flex;

	flex-direction: row;

	justify-content: space-between;/*平均分配內元素，左右與 main start 和 main end 貼齊*/

	align-items: flex-start;/*垂直對齊*/

	flex-wrap: nowrap;

}

.mainWidth {

	width: 1100px;

	margin: auto;

}

.mainCont {

	text-align: center;

	padding-top: 40px;

}

.top {

	position: relative;

	padding-bottom: 164px;

}



/***INDEX TITLE***/

.title { 

	position: relative; 

	display: inline-block;

	margin: 40px auto;

}

.title::before {

	content:'';

	position: absolute;

	background-size: contain;

	background-repeat: no-repeat;

}

.t-resources.title::before {

	background-image: url("../../images/title-icon-resoures.png");

	width: 64px; height: 77px;

	left: -70px; top:calc(50% - 38px);

}

.t-competition.title::before {

	background-image: url("../../images/title-icon-competition.png");

	width: 64px; height: 80px;

	left: -70px; top:calc(50% - 40px);

}

.t-file.title::before {

	background-image: url("../../images/title-icon-file.png");

	width: 69px; height: 79px;

	left: -70px; top:calc(50% - 40px);

}

/************************INNER TITLE************************/

.t-paper.title::before {

	background-image: url("../../images/title-icon-paper.png");

	width: 54px; height: 73px;

	left: -60px; top:calc(50% - 35px);

}



.top_bg {

	background: url("../../images/bg-top-index.png") repeat-x top left;

	background-size: 1492px auto;;

	width: 100%; height: 164px;

	position: absolute;

	bottom: -20px;

	pointer-events: none;

}

.header {

	width: 1100px;

	margin: auto;

	align-items: center;

	padding: .5em 3.5em 0 2.5em;

}

.header a, .header a:link {

	color: #000;

}

.logo {

	background: url("../../images/logo-han-tsi.png") center no-repeat ;

	background-size: contain;

	width: 198px; height: 70px;

	display: block;

	position: relative;

}

.logo a { 

	position: absolute;

	width: inherit; height: inherit;

	display: block;

}

.RS-link li{

	width: fit-content;

	padding: 2px 8px;

}

.login_style {

	background:#76b4b7;

	border-radius: 11px;

	width: 60px; height: 22px;

}

.login_style a, .login_style a:link {

	color:#fff;

}



/************************首頁BANNER************************/

.wrap { 

	height: 100%; 

	display:flex;

	flex-direction: column;

}

.impactBox{ position: relative; }

.impact { 

	width: 1000px;

	height: 226px;

	margin: 0 auto;

	position: relative;

}

.impact.swiper-container { z-index: auto !important; padding: 0!important;}

.impact .swiper-slide .ph picture img{

	width: 100%; height: auto;

}

.impact .swiper-slide .ph { 

	position: relative; 

	background-position: center center; 

	background-repeat:no-repeat;

 	background-size: cover; 

	-webkit-background-size: cover; 

	-moz-background-size: cover; 

	-o-background-size: cover;  

	/*padding-bottom: 22.6%;*/

	border-radius: 6px;

}

.impact .swiper-pagination0.swiper-pagination-bullets{  

	position: absolute;

	width: 300px !important;  

	left: auto !important; 

	right: 30px !important;  

	bottom:20px !important;

	text-align: right !important;

	z-index: 999;

}

.impact .swiper-container-horizontal > .swiper-pagination-bullets { }





/*單顆點點*/

.impact .swiper-pagination-white .swiper-pagination-bullet {

	background: /*#fff*/ url(../../images/dot_normal.png)!important;

	background-size: 12px 12px!important;

}

.impact .swiper-pagination-bullet {opacity: 1 !important;}

.impact .swiper-pagination-white .swiper-pagination-bullet-active { 

	background: /*#88ba03*/ url(../../images/dot_active.png)!important; 

	background-size: 12px 12px!important;

	opacity: 1!important;

}

.swiper-pagination-bullet {

 	width: 12px!important;

  	height: 12px!important;

  	display: inline-block;

}







/************************INDEX 教材數位資源&即時資源************************/

.item { position: relative;}

.index .item {

	display: flex;

	flex-direction: column;

	align-items: center;

}

.contPic { position: relative;}

.contPic img { 

	position: relative;

	z-index: -1;

}



.contPic::before {

	content:'';

	position: absolute;

	display: block;

	z-index: 9;

}

.contTxt {

	text-align: left;

	margin-top: 24px;

}

.index .contTxt {text-align:center; }

.contTxt h3 {

	color:#008b03;

	font-weight: bold;

}

.contTxt a h3:hover {

color: #62a521;

}

.contTxt p {

	font-size: 1.125em;

	color: #555;

}

/************************按鈕************************/

.btn {

	background: url("../../images/btn-bg-g-c.png") center repeat-x;

	background-size: 8px 28px;

	width: fit-content; height:28px;

	padding: 5px 5px 7px 0;

	position: relative;

	margin: 8px 15px 0 15px;

	z-index: 9;

}

.btn::before, .btn::after { 

	width:17px; height: 28px;

	display: block;

	position: absolute;

}

.btn::before {

	content:'';

	background: url("../../images/btn-bg-g-l.png") center no-repeat;

	background-size: 17px 28px;

	top: 0; left: -15px;

}

.btn::after {

	content:'';

	background: url("../../images/btn-bg-g-r.png") no-repeat;

	background-size: 17px 28px;

	background-position: center;

	top: 0; right: -15px;

}

.btn a, .btn a:link {

	color: #fff;/*008b03*/

	font-size: .9375em;

	position: relative;

	z-index: 9;

}

.btn a::before {

	content:'';

	position: absolute;

	top: -1px; left: -15px; right: -15px; bottom: -1px;

	display: block;

	cursor: pointer;

	z-index: 9;

}

.btn.btn-link a::after {

	content:'';

	background: url("../../images/btn-arrow-right.png") center no-repeat;

	background-size: contain;

	width: 11px; height: 7px;

	display: block;

	position: absolute;

	top: 6px; right: -12px;

	z-index: 99;

}

.btn:hover {

	transition-duration: 550ms;

	transition-property: opacity;

	opacity: .8;

}

.btn_border .btn a, .btn_border .btn a:link, .btn.b_border a, .btn.b_border a:link {

	color: #008b03;

}

.btn_border .btn, .btn.b_border {

	background: url("../../images/btn-bg-g-c2.png") center repeat-x;

	background-size: 8px 28px;

}

.btn_border .btn::before, .btn.b_border::before {

	background: url("../../images/btn-bg-g-l2.png") center no-repeat;

	background-size: 17px 28px;

}

.btn_border .btn::after, .btn.b_border::after {

	background: url("../../images/btn-bg-g-r2.png") no-repeat;

	background-size: 17px 28px;

}

.btn_border.flex_row, .btn_fill.flex_row {

	justify-content: flex-start!important;

}

.btn.btn-download a::after {

	content:'';

	background: url("../../images/btn-arrow-down.png") center no-repeat;

	background-size: contain;

	width: 7px; height: 10px;

	display: block;

	position: absolute;

	top: 4px; right: -11px;

	z-index: 99;

}

.btn_group {

	display: flex;

	margin-top: 10px;

}

.btn_group .btn { margin: 8px 24px 0 15px; }





.innerReference .contTxt ul li .btn {

	margin: 0 15px 0 15px;

	z-index: 29;

	flex-shrink: 0;

}

.innerReference .contTxt ul li:nth-child(even) .btn {

	background: url("../../images/btn-bg-lg-c.png") center repeat-x;

	background-size: 8px 28px;

}

.innerReference .contTxt ul li:nth-child(even) .btn::before {

	content:'';

	background: url("../../images/btn-bg-lg-l.png") center no-repeat;

	background-size: 17px 28px;

}

.innerReference .contTxt ul li:nth-child(even) .btn::after {

	content:'';

	background: url("../../images/btn-bg-lg-r.png") no-repeat;

	background-size: 17px 28px;

	background-position: center;

}







.contResources { overflow:hidden;}

.contResources .contPic {

	width: 320px; height: 200px;

}

 .contPic img { 

	object-fit: cover;

	min-width: 100%;

	min-height: 100%;

}

.contResources .contPic::before {

	background: url("../../images/mask_688x448.png") center no-repeat;

	background-size: cover;

	width: 344px; height: 224px;

	top:-12px; left:calc(50% - 172px);

}





.contFile { overflow: hidden;}

.contFile .contPic img { 

	width: 230px; 

}

.contFile .contPic::before {

	background: url("../../images/mask_492x425.png") center no-repeat;

	background-size: cover;

	width: 246px; height: 212px;

	top: 2px; left:calc(50% - 123px);

}



.contFile .item::before {

	content:'';

	position: absolute;

	width: 33px; height: 30px;

	display:block;

	top: 0; left: 12px;

	z-index: 19; 

}



.contFile .item.tag-spring::before {

	background: url("../../images/tag-spring.png") center no-repeat;

	background-size: contain;

}

.contFile .item.tag-summer::before {

	background: url("../../images/tag-summer.png") center no-repeat;

	background-size: contain;

}

.contFile .item.tag-fall::before {

	background: url("../../images/tag-fall.png") center no-repeat;

	background-size: contain;

}

.contFile .item.tag-winter::before {

	background: url("../../images/tag-winter.png") center no-repeat;

	background-size: contain;

}



.contResources img {  width: 100%;}

.swiper-container { padding: 0 0 50px 0!important;}

.swiper-container-horizontal > .swiper-pagination-bullets {bottom: 0!important; text-align: center;}

.contResources .swiper-slide {

  	width: 320px;

  	height: auto;

}



.contResources .swiper-pagination{z-index: 999;}

.contResources .swiper-pagination-white .swiper-pagination-bullet {

	background:url(../../images/dot_normal.png)!important;

	background-size: 12px 12px!important;

}

.contResources .swiper-pagination-bullet {opacity: 1 !important;}

.contResources .swiper-pagination-white .swiper-pagination-bullet-active { 

	background:url(../../images/dot_active.png)!important; 

	background-size: 12px 12px!important;

	opacity: 1!important;

}

.contResources .swiper-pagination-bullet {

 	width: 12px!important;

  	height: 12px!important;

  	display: inline-block;

}







.contFile .contPic {

	width: 230px; height: 192px;

	padding-top: 10px;

}

.contFile .swiper-pagination{z-index: 999;}

.contFile .swiper-pagination-white .swiper-pagination-bullet {

	background:url(../../images/dot_normal.png)!important;

	background-size: 12px 12px!important;

}

.contFile .swiper-pagination-bullet {opacity: 1 !important;}

.contFile .swiper-pagination-white .swiper-pagination-bullet-active { 

	background:url(../../images/dot_active.png)!important; 

	background-size: 12px 12px!important;

	opacity: 1!important;

}

.contFile .swiper-pagination-bullet {

 	width: 12px!important;

  	height: 12px!important;

  	display: inline-block;

}







/************************INDEX 語文競賽************************/

.contCompetition { 

	position:relative;

	overflow: hidden;

}

.contCompetition::before {

	content:"";

	background:#f2ecdf;

	width: 20px; height: 100%;

	position: absolute;

	top: 0; right: 0;

	display: block;

	z-index: 19;

}

.contCompetition .item {

	/*width: 400px;*/

}

.contCompetition .item.flex_row {

	justify-content: center;

	align-items: center;

}

.contCompetition .contTxt {

	margin-top: 20px;

	margin-right: 8px;

	width: 70%;

}

.contCompetition .contTxt h3 a {color: #000; }

.contCompetition .btn { 

	margin-left: 20px;

	margin-right: 20px;

	white-space: nowrap;

}



.swiper-container2 { overflow: hidden;}

.contCompetition .swiper-slide { 

	width: 50%!important;

	position: relative;

	margin-bottom: 40px;

}

.contCompetition .swiper-slide::after {

	content:'';

	background: url("../../images/y-line.png") center no-repeat;

	background-size: contain;

	width: 7px; height: 30px;

	position: absolute;

	top:calc(50% - 15px); right: 0;

}

.contCompetition .swiper-pagination{z-index: 999;}

.contCompetition .swiper-pagination-white .swiper-pagination-bullet {

	background:url(../../images/dot_normal.png)!important;

	background-size: 12px 12px!important;

}

.contCompetition .swiper-pagination-bullet {opacity: 1 !important;}

.contCompetition .swiper-pagination-white .swiper-pagination-bullet-active { 

	background:url(../../images/dot_active.png)!important; 

	background-size: 12px 12px!important;

	opacity: 1!important;

}

.contCompetition .swiper-pagination-bullet {

 	width: 12px!important;

  	height: 12px!important;

  	display: inline-block;

	margin: 0 4px 10px 4px!important;

}

.swiper-container-horizontal > .swiper-pagination-bullets {

	margin-top: 50px!important;

}







/************************INDEX 不只是教科書************************/

.slogan {

	background: url("../../images/index-slogan.png") center no-repeat;

	background-size: 1100px auto;

	width: 1100px; height: 84px;

	margin: 4em auto;

}





/***INDEX CALENDAR***/

.contCalendar {

	position: relative;

	background: url("../../images/bg-calendar.png") bottom repeat-x;

	background-size: 659px auto;

	z-index: 1;

	padding: 1.8em 1em 1em;

}

.contCalendar .swiper-container3 { 

	overflow: hidden; 

	position: relative;

	padding: 0 2.5em;

}

.contCalendar.flex_row {

	justify-content: center;

}

.contCalendar::before {

	content:'';

	display: block;

	width: 100%; height: 25px;

	background: url("../../images/cal_mask.png") bottom repeat-x;

	background-size: 659px 24px;

	position: absolute;

	top: -2px; left: 0;

	z-index: 9;

}

.item_month {

	/*width: 30%;*/

	width: fit-content;

}

.item_month.flex_row {

	justify-content: flex-start;

	align-items: center;

}

.cal_month {

	background: url(../../images/calendar.png) center no-repeat;

	background-size: contain;

	width: 60px; height: 74px;

	color: #ea4800;

	font-weight: bold;

	padding: 20px 0px 10px 0px;

}

.item_date.flex_row {

	align-items: center;

}

.cal_date {

	padding: .5em 0em;

	width: 65px;

}

.t-year { font-size: .9375em;}

.t-month { 

	font-size: 1.6em;	
	letter-spacing: -1px;
	margin-top: 1px;

}

.t-month::after {

	content:'月';

	font-size: 0.5em;
	margin-left: 2px;

}

.t-date {

	font-size: 1em;

	color: #ea4800;

	font-style: italic;

	margin-bottom: 4px;

}

.t-name {

	font-size: 1em;

	color: #000;

	line-height: 1.25em;

}



.contCalSW.swiper-container {

	padding: 0 2.4em!important;

}

.swiper-button-prev:after {

	content: ''!important;

	width: 24px!important; height: 24px!important;

	display: block;

	background: url(../../images/btn-claendar-arrow.png) center no-repeat;

	background-size: contain;

	position: absolute;

	

}

.swiper-button-next:after {

	content: ''!important;

	-webkit-transform: scaleX(-1);

  	transform: scaleX(-1);

	width: 24px!important; height: 24px!important;

	display: block;

	background: url(../../images/btn-claendar-arrow.png) center no-repeat;

	background-size: contain;

	position: absolute;

}

.swiper-container3 .swiper-button-next {

	right: 8px!important;

	left: auto;

}

.swiper-container3 .swiper-button-prev {

	right: auto;

	left: 8px!important;

}





/************************INNER************************/

/*頁籤*/

.panel-control {

  position:absolute;

  opacity:0;

}

.tab-group { position: relative;}

.tab-group::after {

	content: '';

	width: 100%; height: 35px;

	background: url("../../images/tab-bgLine.png") no-repeat;

	background-size: 1102px 35px;

	background-position: bottom center;

	bottom: -10px;

	display: block;

	position: absolute;

}

.tab-group label {

	display:inline-block;

	padding: 25px 30px 0 30px;

	border-bottom:none;

	bottom:0;

	position:relative;

	font-size: 1.3125em; font-weight: bold;

	text-align: center;

	cursor: pointer;

}

.tab-group a:hover {

	color:#62a521;

}

.tab-group a { position: relative;}

.tab-group a::before {

	content: '';

	position: absolute;

	width: 100px; height: 50px;

	top: -10px; left: -25px;

}





.tab01 {

	background: url("../../images/tab01.png") top no-repeat;

	background-size: 120px 62px;

	width: 120px; height: 62px;

	z-index: 99;

	color: #62a521;

	

}



.tab02 {

	background: url("../../images/tab02.png") top no-repeat;

	background-size: 120px 62px;

	width: 120px; height: 62px;

	z-index: 99;

	color: #62a521;

}

.tab01.tab-active{

	background: url("../../images/tab01-active.png") top no-repeat;

	background-size: 120px 62px;

	width: 120px; height: 62px;

	z-index: 99;

	cursor: default;

	color: #ffffff;

}



.tab02.tab-active{

	background: url("../../images/tab02-active.png") top no-repeat;

	background-size: 120px 62px;

	width: 120px; height: 62px;

	z-index: 99;

	cursor: default;

	color: #ffffff;

}

.content-group {

  padding: 1.5em .5em;

}





.content-group .content1, .content-group .content2 { 

	display:flex; 

	justify-content: space-between!important;

	align-items: stretch;

}



/************************INNER BANNER************************/

.innerPage .top_bg {

	background: url("../../images/bg-top-index.png") repeat-x bottom left, url("../../images/bn-cloud.png") center 55% no-repeat ;

	background-size: 910px auto, 1155px 78px;

	width: 100%; height: 330px;

	position: absolute;

	bottom: -20px;

	padding-top: 150px;

}

.innerBanner {

	text-align: center;

	position: relative;

}

.innerBanner h1 {

	margin: 0 auto;

}

.innerBanner p {

	font-size: 1.125em;

	color: #555;

	font-weight: bold;

}

.innerResources.innerBanner::before, .innerResources.innerBanner::after {

	content:'';

	display: block;	

	position: absolute;

	

}

.innerResources.innerBanner::before {

	background: url("../../images/bn-sp-04.png") center no-repeat;

	background-size: contain;

	width: 74px; height: 66px;

	bottom: -80px; right: 100px;

}

.innerResources.innerBanner::after {

	background: url("../../images/bn-sp-05.png") center no-repeat;

	background-size: contain;

	width: 52px; height: 74px;

	bottom: -100px; left: 100px;

}

.innerResources .contPic::before {

	background: url("../../images/mask_492x425.png") center no-repeat;

	background-size: cover;

	width: 246px; height: 212px;

	top: 0; left:0;

}





/************************INNER Resources 教材服務************************/

.innerResources .flex_row {

	flex-wrap: wrap;

	justify-content: center;

}

.innerResources .item.flex_row {

	flex-wrap: nowrap;

}

.innerResources .item {

	width: 50%;

	background:url("../../images/lineHorizontal.png") repeat-x;

	background-position: bottom 0 left 0;

	background-size: 546px auto;

	margin-bottom: 1em;

	padding:0 0 1em 1em;

}

.innerResources .item:nth-child(odd) {

	background:url("../../images/lineHorizontal.png") repeat-x, url("../../images/line-vertical.png") repeat-y;

	background-position:bottom 0 left 0, top 0 right 0;

	background-size: 546px auto,4px auto;

}

.innerResources .item:last-child {

	background:url("../../images/lineHorizontal.png") repeat-x;

	background-position: bottom 0 left 0;

	background-size: 546px auto;

}

.innerResources .item.flex_row {

	justify-content: space-between;

}

.innerResources .contPic {

	width: 246px; height: 212px;

	padding-top: 10px;

	margin-right: 8px;

}

.innerResources .contPic img { 

	width: 230px; height: 192px;

}

.innerResources .contSide { 

	padding: 0 .5em;

	width: 280px;

}

.innerResources .btn { 

	margin-right: 20px;

	min-width: 40px;

}

/*.innerResources .btn a::after { display: none;}*/





/************************INNER Paper 各期番薯報************************/

.innerPaper {}

.innerPaper .mainWidth{

	padding: 0 115px 0 115px;

}

.innerPaper .flex_row {

	flex-wrap: wrap;

}

.innerPaper .btn {

	margin: 10px 45px;

	font-size: 1em;

}

  

.innerPaper .btn a::after {

	display: none;

}



  input[type="checkbox"] {

    position: absolute;

    margin: 0;

    width: 80px;

    height: 100%;

    left:calc(50% - 40px);

    top: 0;

    z-index: 1;

    opacity: 0;

    cursor: pointer;

  }

  

  input[type="checkbox"]:checked  { top: auto; bottom: 0;}

  input[type="checkbox"]:checked ~ .portlet-header span::after {

    transform: rotate(180deg);

  }

input[type="checkbox"]:checked ~ .portlet-header {

	order: 2;

}

  input[type="checkbox"]:checked ~ .portlet-content {

	transition: 3ms height ease-in-out;

    height: auto;

	order: 1;

  }

  

  .portlet {

    position: relative;

    overflow: hidden;

	display: flex;

	flex-direction: column;

  }

  

  .portlet-header {

    color: #008b03;

    padding: 10px;

    display: flex;

    justify-content: center;

  }

.portlet-header span { border-bottom: #008b03 solid 1px;}

.portlet-header span::after {

	content:'';

	background: url("../../images/icon-more.png") center no-repeat;

	background-size: contain;

	width: 7px; height: 10px;

	display: inline-block;

}

  .portlet-content {

	transition: 3s height ease-in-out;

    height: 0;

  }

/* 其他內容 ... */

input[type="checkbox"]:checked ~ .portlet-content {

    max-height: 999vh;

    transition: 3s max-height ease-in-out;

}

/* 其他內容 ... */

.portlet-content {

  max-height: 0;

  transition: 3s max-height ease-in-out;

}

/* 其他內容 ... */





/************************INNER Reference 教學參考************************/

.innerReference.innerBanner::before {

	content: '';

	background: url("../../images/bn-rf-01.png") no-repeat;

	background-size: 116px 75px;

	width: 116px; height: 75px;

	top: 70px; left: 170px;

	position: absolute;

}

.innerReference.innerBanner::after {

	content: '';

	background: url("../../images/bn-rf-02.png") no-repeat;

	background-size: contain;

	width: 64px; height: 73px;

	position: absolute;

	top: 70px; right: 250px;

}

.innerReference .item {

	background: url("../../images/lineHorizontal.png") repeat-x;

	background-position: bottom 0 left 0;

	background-size: 546px auto;

	padding: 1.2em;

}

.innerReference .item:last-child {

	background: none;

	margin-bottom: 3em;

}

.innerReference .item.flex_row {

}

.sort { 

	align-self: center;

	color: #008b03;

	font-size: 1.3125em;

	font-weight: bold;

	width: 180px;

	flex: 0 0 180px;

	text-align: left;

}

.innerReference .contTxt {

	flex: 1 0 auto;

}

.innerReference .contTxt li {

	

	position: relative;

}

.innerReference .contTxt ul.link-list li > div > div > a {

	z-index: 9;

	position: relative;

	font-size: 1.125em;

	color: #333333;

	font-weight: bold;

	margin-left: 1em;

	line-height: 1.3em;

}

.innerReference .contTxt ul.link-list li > div > div > a:hover { color: #666;}

.innerReference .contTxt ul.link-list li > div > div > a::before {

	content:'';

	background: url("../../images/dot.png") no-repeat;

	background-size: 5px 5px;

	width: 5px; height: 5px;

	position: absolute;

	top: 5px; left: -13px;

}

.innerReference .contTxt ul.link-list li:nth-child(even) > div > div > a::before {

	content:'';

	background: url("../../images/dot_B.png") no-repeat;

	background-size: 5px 5px;

	width: 5px; height: 5px;

	position: absolute;

	top: 5px; left: -13px;

}



/************************INNER link-list************************/

.link-list {position: relative; width: 100%;}

.link-list li {width: 100%; }



.innerReference .contTxt ul.link-list li:nth-child(even)::before { 

	content:'';

	background: url("../../images/link-list/list-bg-g-ltop.png") no-repeat;

	background-size: 20px 16px;

	position: absolute;

	top: -1px; left:-2px;

	display: block;

	width: 20px; height: 16px;

	z-index: 9;

}

.innerReference .contTxt ul.link-list li:nth-child(even)::after { 

	content:'';

	background: url("../../images/link-list/list-bg-g-lbot.png") no-repeat;

	background-size: 20px 16px;

	position: absolute;

	bottom: -2px; left:-2px;

	display: block;

	width: 20px; height: 16px;

	z-index: 9;

}

.innerReference .contTxt ul.link-list li > div {padding: .9em .7em .3em 1em; }

.innerReference .contTxt ul.link-list li:nth-child(even) > div { 

	background:url("../../images/link-list/list-bg-g-lcen.png") repeat-y, url("../../images/link-list/list-bg-g-rcen.png") repeat-y,

		url("../../images/link-list/list-bg-g-ctop.png") repeat-x, url("../../images/link-list/list-bg-g-cbot.png") repeat-x;

	background-position: top left, top right, top left, bottom left;

	background-size: 20px 11px, 20px 11px, 30px 16px,30px 16px;

}

.innerReference .contTxt ul.link-list li p span a { position: relative; }

.innerReference .contTxt ul.link-list li > div > div {

	display: flex;

	flex-direction: row;

	justify-content: space-between;

	align-items: flex-start;

}

.innerReference .contTxt ul.link-list li:nth-child(even) > div > div { 

	background-color: #f4f4f4;

}

.innerReference .contTxt ul.link-list li:nth-child(even) > div::before { 

	content:'';

	background: url("../../images/link-list/list-bg-g-rtop.png") no-repeat;

	background-size: 20px 16px;

	position: absolute;

	top: -1px; right:-2px;

	display: block;

	width: 20px; height: 16px;

	z-index: 9;

}

.innerReference .contTxt ul.link-list li:nth-child(even) > div::after { 

	content:'';

	background: url("../../images/link-list/list-bg-g-rbot.png") no-repeat;

	background-size: 20px 16px;

	position: absolute;

	bottom: -2px; right:-2px;

	display: block;

	width: 20px; height: 16px;

	z-index: 9;

}



/************************INNER Competition 語文競賽************************/

.innerCompetition { position: relative;}

.t2-competition { 

	color: #333333;

	font-size: 1.5em;

	margin-top: 20px!important;

}



 /*下拉選單樣式*/

.dd-menu {

	position: absolute;

	top: 140px; left: 1em;

}

.innerCompetition.innerBanner::before {

	content:'';

	background:url("../../images/bn-cp-01.png")no-repeat; 

	background-size: contain;

	width: 80px; height: 84px;

	display:block;

	position: absolute;

	top: 80px; left: 160px

}

.innerCompetition.innerBanner::after {

	content:'';

	background:url("../../images/bn-cp-02.png")no-repeat; 

	background-size: contain;

	width: 72px; height: 77px;

	display:block;

	position: absolute;

	top: 75px; right: 100px

}

.innerCompetition .contTxt a:hover h3 { color:#62a521;}

select.pretty-select {

  /*移除箭頭樣式*/

	font-size: 1.125em;

    appearance:none;

    -moz-appearance:none;

    -webkit-appearance:none;

	-webkit-tap-highlight-color: rgba(0,0,0,0);

	-webkit-tap-highlight-color: transparent;

    focus: none!important; 

    outline:none!important;

	outline-width: 0!important;

    text-shadow: 0 0 0 #000 !important;

    /*改變右邊箭頭樣式*/

    background: url("../../images/dropDownArrow.png"), url("../../images/select-bg.png");

    background-size: 14px 11px, 90px 31px ;

    background-position: right 5px center, top center;

    background-repeat: no-repeat;

    border:0px;

    width:90px;

    height:31px;

    color: #333;

	padding: 4px 16px;

}



input:focus,

select:focus,

textarea:focus,

button:focus {

    outline: none;

	outline:none !important;

    outline-width: 0 !important;

    box-shadow: none!important;

    -moz-box-shadow: none!important;

    -webkit-box-shadow: none!important;

}



/*IE隱藏箭頭樣式*/

.pretty-select::-ms-expand { 

  display: none; 

}



.pretty-select:focus{

  box-shadow: 0 0 5px 2px #467BF4;    

}

.innerCompetition .flex_row {

	flex-wrap: wrap;

	justify-content: center;

}

.innerCompetition .item {

	width: 50%;

	background:url("../../images/lineHorizontal.png") repeat-x;

	background-position: bottom 0 left 0;

	background-size: 546px auto;

	margin-bottom: 1em;

	padding: 1.5em;

}



.innerCompetition .item:nth-child(odd) {

	background:url("../../images/lineHorizontal.png") repeat-x, url("../../images/line-vertical.png") repeat-y;

	background-position:bottom 0 left 0, top 0 right 0;

	background-size: 546px auto,4px auto;

}

.innerCompetition .item:last-child {

	background:url("../../images/lineHorizontal.png") repeat-x;

	background-position: bottom 0 left 0;

	background-size: 546px auto;

}

.innerCompetition .item.flex_row {

	flex-wrap: nowrap;

}

.innerCompetition .contTxt {

	flex: 0 1 auto;

	margin: auto 1.2em auto auto;

}

.innerCompetition .contTxt h3 { 

	font-size: 1.3125em;

	margin-bottom: 6px;

}

.innerCompetition .contTxt p { 

	font-size: 1em;

	color: #4b4b4b;

	line-height: 1.2em;

}

.innerCompetition .btn {

	flex: 1 0 fit-content;

	margin-right: 20px;

	align-self: center;

}





/************************INNER News 好康訊息************************/

.innerNews .flex_row {

	flex-wrap: wrap;

	justify-content: space-between;

	align-items: stretch;

}

.innerNews.innerBanner::before {

	content: '';

	background: url("../../images/bn-ns-01.png") no-repeat;

	background-size: 89px 87px;

	width: 89px; height: 87px;

	top: 60px; left:90px;

	position: absolute;

}

.innerNews.innerBanner::after {

	content: '';

	background: url("../../images/bn-ns-02.png") no-repeat;

	background-size: contain;

	width: 124px; height: 84px;

	position: absolute;

	top: 45px; right: 150px;

}

.innerNews .item { 

	width: 50%;

	background:url("../../images/lineHorizontal.png") repeat-x;

	background-position: bottom 0 left 0;

	background-size: 546px auto;

	margin-bottom: 1em;

	padding: 1.5em;

}



.innerNews .item:nth-child(odd) {

	background:url("../../images/lineHorizontal.png") repeat-x, url("../../images/line-vertical.png") repeat-y;

	background-position:bottom 0 left 0, top 0 right 0;

	background-size: 546px auto,4px auto;

}

.innerNews .item:last-child {

	background:url("../../images/lineHorizontal.png") repeat-x;

	background-position: bottom 0 left 0;

	background-size: 546px auto;

}

.innerNews .contTxt {

	flex: 0 1 auto;

	margin: 0;

}

.innerNews .contTxt h3 { 

	font-size: 1.3125em;

	margin-bottom: 6px;

}

.innerNews .contTxt p { 

	font-size: 1em;

	color: #4b4b4b;

	line-height: 1.2em;

}

.innerNews .item.flex_row {

	flex-direction: column;

}

.innerNews .item .btn_group {

	display: flex;

	align-self: flex-end;

}

.t-category { 

	width: fit-content;

	margin: auto;

}

.t-category.flex_row {

	flex-wrap: wrap;

	justify-content: center;

	align-content: space-around;

}

.t-category div{ 

	background: url("../../images/stem-light.png") repeat-x;

	background-size: 136px 3px;

	background-position: bottom left;

	white-space: nowrap;

	padding: 12px 4px;

	font-size: 1.3125em;

	font-weight: bold;

	margin: 1em;

	position: relative;

} 

.t-category div.active, .t-category div.active:hover {

	color: #008b03;

	background: url("../../images/stem.png"),url("../../images/stem.png");

	background-size: 136px 3px;

	background-repeat: repeat-x;

	background-position: top right,bottom left;

}

.t-category div.active::before {

	content:'';

	background: url("../../images/leaf.png") no-repeat;

	background-size: 26px 18px;

	width: 26px; height: 18px;

	position: absolute;

	top: -15px; left: -23px;

}

.t-category div.active::after {

	content:'';

	background: url("../../images/leaf2.png") no-repeat;

	background-size: 14px 14px;

	width: 14px; height: 14px;

	position: absolute;

	bottom: -8px; right: -10px;

}

.t-category div a, .t-category div a:link {

	color: #62a521;

}

.t-category div a:hover {

	color: #008b03;

}

.t-category div:hover {

	background: url("../../images/stem-hover.png") repeat-x;

	background-size: 136px 3px;

	background-position: bottom left;

}





/************************INNER News 好康訊息-頁數************************/

.page {

	margin: 50px auto;

	font-size: 1.125em;

	font-weight: bold;

	width: fit-content;

}

.page.flex_row {

	align-items: center;

	justify-content: center;

}

.page span { 

	margin: 1em;

	position: relative;

}

.page span.active, .page span a:hover {

	color: #292929;

}

.page a, .page a:link {

	color: #adadad;

	width: inherit; height: inherit;

}



.page a::before {

	content:'';

	width: 16px; height: 16px;

	display: inline-block;

	cursor: pointer;

	position: absolute;

	top: -1px; left:-1px; right: -1px; bottom: -1px;

}

.prev { 

	background: url("../../images/p-arrow-g.png") no-repeat;

	background-size: contain;

	width: 12px; height: 12px;

	display: inline-block;

}

.prev:hover {

	background: url("../../images/p-arrow-b.png") no-repeat;

	background-size: contain;

}

.prevToFirst {

	background: url("../../images/p-arrow-g-2.png") no-repeat;

	background-size: contain;

	width: 12px; height: 12px;

	display: inline-block;

}

.prevToFirst:hover {

	background: url("../../images/p-arrow-b-2.png") no-repeat;

	background-size: contain;

}

.next { 

	background: url("../../images/p-arrow-g.png") no-repeat;

	background-size: contain;

	width: 12px; height: 12px;

	display: inline-block;

	transform:scale(-1);

}

.next:hover {

	background: url("../../images/p-arrow-b.png") no-repeat;

	background-size: contain;

}

.nextTolast {

	background: url("../../images/p-arrow-g-2.png") no-repeat;

	background-size: contain;

	width: 12px; height: 12px;

	display: inline-block;

	transform:scale(-1);

}

.nextTolast:hover {

	background: url("../../images/p-arrow-b-2.png") no-repeat;

	background-size: contain;

}







/************************INNER Event 活動專區************************/

.innerEvent.innerBanner::before {

	content: '';

	background: url("../../images/bn-ev-01.png") no-repeat;

	background-size: 73px 86px;

	width: 73px; height: 86px;

	top: 60px; left:90px;

	position: absolute;

}

.innerEvent.innerBanner::after {

	content: '';

	background: url("../../images/bn-ev-02.png") no-repeat;

	background-size: contain;

	width: 158px; height: 85px;

	position: absolute;

	top: 0; right: 130px;

}

.event-pic {

	position: relative;

	overflow: hidden;

	width: 700px; height: 467px;

	margin: 50px auto 0 auto;

	display: flex;

	justify-content: center;

	align-items: center;

}

.event-pic img {

	width: 100%; height: auto;

	transition: transform 400ms ease-in-out;

	transform: scale(1);

}

.event-pic img:hover {

	transition: transform 400ms ease-in;

	transform: scale(1.05);

}



.event-pic::before {

	content: '';

	background: url("../../images/mask_1400x935.png") no-repeat;

	background-size: contain;

	width: 704px; height: 471px;

	position: absolute;

	top: -2px; left:-2px;

	z-index: 9;

	pointer-events: none;

}



.innerEvent .title { 

	font-size: 1.3125em;

	margin: 20px auto 10px auto;

}

.innerEvent p { font-size: 1em;}

.innerEvent .btn { margin: 20px auto;}





/***FOOTER***/

.f_box {

	min-height: 171px;

	position: relative;

	flex-grow: 1;

}

.goTop {

	position: fixed; right: 1.5em; bottom: 70px; 

	-webkit-opacity: 0; 

	-moz-opacity: 0; 

	opacity: 0;

	background: url("../../images/top-btn.png") center;

	background-size: 45px;

	background-repeat: no-repeat;

	color: #FFF;

	text-align: center;

	display: block;

	width: 45px; height: 45px;

	z-index: 19;

	padding-top: 15px;

	transition: .3s;

	font-weight: 500;

	filter:alpha(opacity=0);

}

.goTop:hover {

	bottom: 75px;

	color: #fff;

}

.goTop a:hover { color: #fff;}



.goTop.show{

	-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;

	-webkit-opacity: 1; 

	-moz-opacity: 1; 

	opacity: 1; 

	filter:alpha(opacity=100); 

}

.footer {

	font-size: .9em; line-height: 18px;

	color: #333;

	background: url("../../images/bg-footer.png") bottom center repeat-x ;

	background-size: 1464px auto;

	min-height: 171px;

	bottom: 0;

	position: absolute;

	width: 100%;

	letter-spacing: 0;

	text-align: center;

}

.footer .mainWidth { padding: 1em; }

.footer .flex_row { align-items: center; }

.footer_logo {

	background: url("../../images/logo-footer.png") center no-repeat;

	background-size: contain;

	width: 209px; height: 86px;

	margin: 1em;

	flex: 0 0 auto;

}

.footer p { 

	

}