@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

* {
	border: 0px #000 solid;
	box-sizing: border-box;
	position: relative;
}
html,body{
	background-image: url("../images/bg.jpg");
	background-repeat: repeat;
	font-family: 'Noto Sans TC', sans-serif;
	
}
/*固定按鈕*/
.ans,.top{
	position: fixed;
	right: 5px;
	z-index: 100;
	width: 40px;
	border-radius: 50%;
	box-shadow: 0px 0px 8px 0px #fff;
}
.ans{
	bottom: 100px;
}
.top{
	bottom: 60px;
	width: 30px;
	right: 10px;
}
/*header頁首*/
header{
	height: 350px;

}
header p{
	font-size: 12px;
}
.abs{
	position: absolute;
}
.title{
	width: 80vw;
}
.open{
	bottom:-350px;
	right: -30px;
	height: 10em;
}
.flyman{
	top:4em;
	right: -30px;
	height: 4em;
}
/*nav選單列*/
.nav-item{
	display: inline-block;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 900;
	font-size: 1em;
	padding: 5px;
	margin: 5px;
	overflow: hidden;
	cursor: pointer;
}
.li-border{
	text-align: center;
	border: 1px solid;
	padding: 3px;

}



/*section五W*/
.item-name,.item-info{
	font-size: 1em;
}
.item-name-b::before,.item-name-o::before,.item-name-y::before,.item-name-w::before{
	width: 8px;
	height: 8px;
	position: absolute;
	border-radius: 15px;
	z-index: 10;
	top:3px;
	left: -5px;
}
.item-name-b::before{
	content: "";
	background: #260a06;
}
.item-name-o::before{
	content: "";
	background: #fa682f;
}
.item-name-y::before{
	content: "";
	background: #f7bf22;
}
.item-name-w::before{
	content: "";
	background: #fff;
}
.item-title{
	font-size: 1.5em;
	line-height: 1.2em;
	margin-top:10px;
}
.item-info{
	margin-bottom: 20px;
	line-height: 1.3em;
	font-weight: 600;
}
.item-infos{
	text-align: right;
}
.item-img{
	cursor: pointer;
}
.item-link{
	border: 1px solid #260a06;
	padding: 5px;
	font-weight: 300;
	display: inline-block;
	font-size: 12px;
	margin-top:10px;
	cursor: pointer;
}
.item-link img{
	height: 1.2em;
	top:-2px;
	margin-left: 5px;
}
#when,#who,#what,#why,#how{
	padding: 5px;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 900;
}

#when,#why{
	width: 100vw;
	left:-5vw;
}
#when .item-names{
	width: 50vw;
	display: inline-block;
	vertical-align : top
}
#when .item-img{
	width: 100px;
	box-shadow: 0px 0px 8px 0px;
}
#when .item-border{
	border:1px solid #fa682f;
	padding: 20px 10px 20px 30px;
}
#when .item-name{
	color:#fa682f;
	border-bottom: 2px solid #fa682f;
	padding-bottom: 5px; 
	margin-right: 10px; 
}
#when .item-infos{
	width: 100px;
	display: inline-block;
	vertical-align : top;
	}
#when .item-link{
	width: 12em;
	right: 3.7em;
}

#who,#how{
	width: 100vw;
	padding: 5px;
	margin-top:20px;
}

#who .item-border{
	border:2px solid #260a06;
	padding: 20px 40px 20px 20px;
	margin-right: 13vw;
}
#who .item-names{
	width: 3em;
	height: 100px;
	border-right: 2px solid #260a06;
	top:5px;
	margin-bottom: 25px;
}
#who .item-names-r{
	height: 230px;
	top:10px;
	padding-left: 3.5em;
	position: absolute;
}
#who .item-infos{
	width: 70vw;
	display: inline-block;
	vertical-align : top;
}
#who .item-video{
	width: 70vw;
	background-color: #000;
}
#what{
	margin-top:20px;
	margin-bottom:20px;
	padding: 15px 40px 15px 30px;
}
#what .item-border{
	padding: 15px;
}
#what .item-names{
	width: 60vw;
	height: 150px;
	border-left: 2px solid #fff;
	padding: 0px 0px 0px 20px;
	margin-bottom: 25px;
	display: inline-block;
	vertical-align : top
}

#what .item-name{
	width: 50vw;
	border-bottom: 1px solid #fff;
	padding-bottom: 5px; 
	margin-right: 10px; 
}
#what .line-double-y{
	width: 10px;
	height: 150px;
	border-left: 2px solid #fff;
	border-right: 2px solid #fff;
	display: inline-block;
	vertical-align : top
}
#why .item-border{
	border:1px solid #fff;
	padding: 30px 30px 30px 50px;
}
#why .item-name,#how .item-name{
	border-bottom: 1px solid #fff;
	padding-bottom: 5px; 
}
#how .item-border{
	border:1px solid #fff;
	padding: 30px 30px 30px 30px;
	margin-right: 18vw;
}
#how .item-link{
	border: 1px solid #fff;
	color: #fff;
	margin-bottom: 15px;
}
#how .item-img img{
	width: 100%;
}


/*section素養怎麼考*/
#F,#G{
	color: #fa682f;
	font-weight: 900;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 1.5em;
}
.online-class{
	left:10vw;
	width: 70vw;
	font-family: 'Noto Sans TC', sans-serif;
	border-radius: 15px;
	text-align: center;
	overflow-x: hidden;
	padding: 20px;
	margin-bottom: 20px;
}
.online-class h2{
	font-size: 1.3em;
	line-height: 1em;
	font-weight: 700;
}
.online-class h2 span{
	color: #260a06;
}
.online-class h4{
	font-size: 0.8em;
	line-height: 1em;
	font-weight: 300;
}
.line-double-x{
	width: 120vw;
	height: 8px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	margin-top: 15px;
	margin-bottom: 10px;
	left:-10vw;
}
.online-class .item-link{
	color: #260a06;
}
/*section素養怎麼考的書們*/
.books-bg{
	background: #fff;
	border-radius: 30px;
	width: 120vw;
	left:5vw;
	padding-top:10vw;
	padding-bottom: 10vw;
}
.book{
	width: 80vw;
	text-align: center;
	cursor: pointer;
}
.booktitle{
	left:-2.5em;
	height: 4em;
	z-index: 10;
}
.booktitle img{
	height: 100%;
}
.book-name{
	width: 10em;
	border: 2px solid #260a06;
	border-radius: 2em;
	display: inline-block;
	padding: 5px 10px;
	font-weight: 700;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 1.1em;
	margin-top:30px;
}
.book-img{
	width: 80vw;
}
.book-img img{
	width: 100%;
}
.book-link{
	background:#260a06; 
	color: #fff;
	display: inline-block;
	padding: 5px 10px;
	font-weight: 200;
	font-size: 12px;
}
.book-link img{
	height: 1em;
	top:-1px;
	margin-left: 5px;
}
.read1{
	text-align: right;
	right: 10vw;
}
.read1 img,.read2 img{
	height: 7em;
	margin-top:30px;
}
.read2{
	left: -6vw;
}
.more{
	cursor: pointer;
}
.more-img{
	width: 80vw;
	text-align: center;
}
.more-img img{
	height: 4em;
}
footer{
	margin-top:30px;
	background: #e4007f;
}
@media (min-width: 375px) {
	.open{right: 0px;}
	.nav-item{font-size: 1.2em;}
	.item-name,.item-info{font-size: 1.2em;}
	#when .item-names{width: 55vw;}
	#when .item-name{margin-right: 15px; }
	#F,#G{font-size: 1.7em;}
	.online-class{padding: 30px 10px;}
	.online-class h2{font-size: 1.5em;}
	.online-class h4{font-size: 1em;}
}
@media (min-width: 400px) {
	#when .item-border{padding: 20px 10px 20px 12vw;}
	.title{width: 60vw;}
}

@media (min-width: 576px) { 
	.li-on-b:hover::before,.li-on-b:hover::after{
		content: "";
		background: #260a06;
		width: 20px;
		height: 20px;
		position: absolute;
		border-radius: 15px;
		z-index: 10;
		top:0.4em;
	}
	.li-on-o:hover::before,.li-on-o:hover::after{
		content: "";
		background: #fa682f;
		width: 20px;
		height: 20px;
		position: absolute;
		border-radius: 15px;
		z-index: 10;
		top:0.4em;
	}
	.li-on-y:hover::before,.li-on-y:hover::after{
		content: "";
		background: #f7bf22;
		width: 20px;
		height: 20px;
		position: absolute;
		border-radius: 15px;
		z-index: 10;
		top:0.4em;
	}
	.li-on-w:hover::before,.li-on-w:hover::after{
		content: "";
		background: #ffffff;
		width: 20px;
		height: 20px;
		position: absolute;
		border-radius: 15px;
		z-index: 10;
		top:0.4em;
	}
	.li-on-b:hover::before,.li-on-o:hover::before,.li-on-y:hover::before,.li-on-w:hover::before{
		left: -15px;
	}
	.li-on-b:hover::after,.li-on-o:hover::after,.li-on-y:hover::after,.li-on-w:hover::after{
		right: -15px;
	}

	header{height: 400px;}
	.open{bottom:-400px;right: -10px;height: 15em;}
	.title{width: 60vw;}
	.flyman{top:6em;right: -20px;height: 4em;}
	.item-name,.item-info{font-size: 1em;}
	#when,#who,#what,#why,#how{padding: 10px;}
	#when,#why{width: 48vw;left:-6vw;position: absolute;}
	#when .item-border{padding: 20px 10px 20px 10vw;}
	#when .item-names{width: auto;}
	#when .item-name{margin-right: 0px;}
	#when .item-img{width: 150px;}
	#when .item-infos{width: 150px;}
	#when .item-link{right: 0em;}
	#who,#how{width: 58vw;padding: 15px;left:43vw;margin-top:2vw;}
	#who{margin-bottom:15vw;top:10vw;}
	#who .item-border{padding: 20px 3vw 20px 2vw;margin-right: 8vw;}
	#who .item-names{width: 3.5em;}
	#who .item-names-r{padding-left: 4em;}
	#who .item-infos{width: 40vw;}
	#who .item-video{width: 40vw;}
	#what{margin-top:20px;margin-bottom:20px;padding: 15px 40px 15px 30px;}
	#what .item-border{padding: 15px;}
	#what .item-names{width: 35vw;height: 200px;padding: 0px 0px 0px 20px;margin-bottom: 0px;}
	#what .item-name{width: 30vw;}
	#what .line-double-y{height: 200px;}
	#what .item-img{height: 150px;}
	#what .item-img img{height: 100%;width: auto;}
	#why .item-border{padding: 20px 15px 20px 50px;}
	#how .item-border{padding: 20px;margin-right: 5vw;}
	#how .item-infos{display: inline-block;vertical-align : top;overflow: hidden;}
	#how .item-infos1{width: 18vw;}
	#how .item-infos2{width: 21vw;}
	#how .item-img{height: 24vw;}
	#how .item-img img{width: auto;height: 100%;}
	#how .item-link span{display: inline-block;}
	.online-class{display: inline-block;vertical-align : top;left:5vw;width: 40vw;margin-right: 3vw;}
	.online-class h2{font-size: 1.5em;}
	.online-class h4{font-size: 0.9em;}
	.books-bg{padding-right: 30vw;}
	.booktitle{left:-3em;height: 4em;width: 15vw;display: inline-block;vertical-align : top;}
	.book{width: 35vw;margin-bottom:30px;display: inline-block;vertical-align : top;}
	.book-name{margin-top:0px;}
	.book-img{width: 35vw;}
	.read1,.read2{width: 35vw;display: inline-block;}
	.read1{right: -5vw;top:15vw;}
	.read2{left:10vw;}
	.read1 img{height: 5em;}
	.read2 img{height: 6em;}
	.more-img{width: 50vw;display: inline-block;top:3vw;}
	}
@media (min-width: 600px) {
	header{height: 450px;}
	.open{bottom:-450px;right: -10px;height: 17em;}
	.flyman{top:10em;right: -10px;height: 4em;}
	header p{font-size: 1em;}
	.item-name,.item-info{font-size: 1.2em;}
	#F,#G{font-size: 1.7em;}
	.online-class h2{font-size: 1.5em;}
	.online-class h4{font-size: 1em;}
}
@media (min-width: 768px) {
	header{height: 550px;} 
	.open{bottom:-550px;right: 0px;height: 20em;}
	.title{height: 16em;width: auto;}
	.flyman{top:5em;right: -80px;height: 6em;}
	header p{font-size: 1.2em;}
	.nav-item{font-size: 1.3em;}
	.item-name,.item-info{font-size: 1.5em;}
	.item-title{font-size: 2.5em;}
	#F,#G{font-size: 2.5em;}
	.online-class h2{font-size: 2em;}
	.online-class h4{font-size: 1.2em;}

	#who .item-names{width: 4em;height: 160px;}
	#who .item-names-r{padding-left: 4.5em;}
	#what {margin: 20px 40px;}
	#what .item-names,#what .line-double-y{height: 220px;}
	#what .item-border{padding: 15px 2vw;}
	#what .item-img{height: 180px;}
	#why {width: 50vw;}
	#why .item-border{padding: 20px 15px 20px 10vw;}
	#how {width: 55vw;left:45vw;}
	#how .item-border{padding: 20px;margin-right: 4vw;}
	#how .item-infos1{width: 20vw;}
	#how .item-infos2{width: 20vw;}
	.online-class{margin-bottom: 50px;}
	.booktitle{left:-4em;height: 5em;}
	.book-name{font-size: 1.3em;}
	.read1 img{height: 7em;}
	.read2 img{height: 8em;}
	.more-img img{height: 6em;}
	}
@media (min-width: 850px) {	
	#when .item-border{padding: 20px 10px 20px 14vw;}
	#who .item-border{margin-right: 10vw;}
	#what .item-border{padding: 15px 5vw;}
}

@media (min-width: 992px) {	
	.open{height: 25em;}
	.flyman{top:13em;}
	.nav-item{font-size: 1.8em;}
	#F,#G{font-size: 3em;}
	.online-class h2{font-size: 2.3em;}
	.online-class h4{font-size: 1.5em;}
	#when,#who,#what,#why,#how{padding: 15px;}
	#when{width: 45vw;}
	#when .item-names{width: 250px;}
	#when .item-img,#when .item-infos{width: 250px;}
	#who{margin-bottom:15vw;top:10vw;}
	#who .item-border{padding: 20px 4vw 20px 4vw;margin-right: 12vw;}
	#who .item-infos,#who .item-video{width: 36vw;}
	#what{margin: 50px 10vw;}
	#what .item-border{padding: 15px 7vw;}
	#why{width: 48vw;}
	#why .item-border{padding: 20px 5vw 20px 14vw;}
	#how .item-border{padding: 20px 3vw 20px 3vw;margin-right: 5vw;}
	#how .item-infos1{width: 180px;margin-right: 10px;}
	#how .item-infos2{width: 200px;}
	#how .item-img{height: 220px;}
	.online-class{padding: 50px 30px;}
	.booktitle{left:-4em;height: 6.5em;}
	.read1 img{height: 8em;}
	.read2 img{height: 10em;}
	.li-on-b:hover::before,.li-on-b:hover::after,.li-on-o:hover::before,.li-on-o:hover::after,.li-on-y:hover::before,.li-on-y:hover::after,.li-on-w:hover::before,.li-on-w:hover::after{
	width: 30px;height: 30px;top:0.4em;}
	.li-on-b:hover::before,.li-on-o:hover::before,.li-on-y:hover::before,.li-on-w:hover::before{left: -20px;}
	.li-on-b:hover::after,.li-on-o:hover::after,.li-on-y:hover::after,.li-on-w:hover::after{right: -20px;}
}

@media (min-width: 1200px) { 
	.ans{right: 9vw;width: 50px;}
	.top{right: calc(9vw + 5px);width: 40px;bottom: 50px;}
	.open{right: 50px;height: 30em;}
	.flyman{right: 0px;}
	.book-link{font-size: 16px;}
	#when,#why{width: 36vw;left:3vw;}
	#when .item-border,#why .item-border{padding: 20px 3vw 20px 8vw;}
	#what{margin: 50px 12vw;}
	#what .item-names,#what .item-name{width: 230px;}
	#what .item-names,#what .line-double-y{height: 270px;}
	#what .item-img{height: 230px;}
	#who,#how{width: 50vw;left:42vw;}
	#who .item-border{padding: 20px 4vw 20px 4vw;margin-right: 5vw;}
	#who .item-names{width: 6.5vw;height: 160px;}
	#who .item-names-r{padding-left: 9vw;}

	#how .item-border{padding: 20px 3vw 20px 3vw;margin-right: 5vw;}
	#how .item-infos1{width: 16vw;margin-right: 10px;}
	#how .item-infos2{width: 19vw;}
	#how .item-img{height: 22vw;}
	.online-class{padding: 50px 3vw;}
	.read1 img{height: 12vw;}
	.read2 img{height: 17vw;}
	.book{width: 22vw;margin-bottom:80px;}
	.book-img{width: 22vw;}
	.more-img img{height: 8vw;}
	}
@media (min-width: 1400px){
	#when .item-img,#when .item-infos,#when .item-names{width: 20vw;}
	#what .item-names,#what .line-double-y{height: 23vw;}
	#what .item-img{height: 20vw;}
	

	
}