@charset "utf-8";
/* CSS Document */
.maintag{
	width:100%;
	height:auto;
	display:table;
	background-repeat:no-repeat;
	background-size:cover;
	background-image:url(../images/tag_bg.jpg);
	}



.maintag .sq ul li {
	float: left;
	width: 25%;
}

/*.maintag .sq ul li {
	float: left;
	width: 49%;
}*/
.maintag .sq ul li a {
	background-color: #fffed5;
	display: block;
	padding: 10px;
	margin-right: 5px;
	margin-left: 5px;
	text-align: center;
	color:#666;
	font-weight:bold;
	font-size:24px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
    box-shadow: 3px -3px 5px rgba(0,0,0,0.2);
	cursor:pointer;

}

.maintag .sq ul li.stay a {
	background-color: #ff6600;
	position: relative;
	color: #FF9;
	background-image: url(../img/stay_bt_bg.html);
	background-repeat: no-repeat;
	background-position: center 3px;
	background-size:80% auto;
	
}
@media (max-width:575px){
	.maintag .sq ul li a {
	font-size:18px;
}
	.maintag .sq ul li.stay a {
	background-image: url(../img/stay_bt_bg2.html);
		background-repeat: no-repeat;
	background-position: center 3px;
	background-size:80% auto;
}
		
}
@media (max-width:325px){
	.maintag .sq ul li a {
	padding: 5px;;
}
		
}
.maintag .sq ul li.stay a:before {
width: 0;
height: 0;
border-style: solid;
border-width: 10px 5px 0 5px;
border-color: #ff6600 transparent transparent transparent;
content:"";
left:calc(50% - 5px);
top:100%;
position:absolute;
}
}










/*測試*/

#pagearea .sq .page h4 {
    font-size: 24px;
    line-height: 24px;
    padding-bottom: 5px;
	color: #4267b2;
	text-align:center;
}


.praise .txt{
	font-size: 2.4rem;
	line-height: 32px;
	padding: 10px 20px 0px 0px;
}

@media screen and (max-width: 480px) {
.praise .txt{
	font-size: 2.2rem;
	line-height: 22px;
	
}
}	


..praise {
	height: auto;
	width: 100%;	
	}
	
.praise ul{
	display: table;
	margin: 0px;
	padding: 0px;
	height: auto;
	width: 100%;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	}
	
.praise ul li{
	width:calc((100% - 20px) / 2);
	float:left;
	margin-top: 10px;
	margin-bottom: 10px;
	box-shadow: 0 0 5px rgba(255, 204, 5, 0.5);
	border-radius: 15px;
	background-color: #ffffff;
	margin-right:20px;
	display:flex;
	flex-wrap:nowrap;
}


.praise ul li:nth-child(2){
	margin-right:0px;
}
.praise  ul li .picp{
	background-repeat: no-repeat;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.praise  ul li .picp{
	background-repeat: no-repeat;
	width: 96%;
	position: relative;
	overflow: hidden;
	padding: 5px 2% 10px 2%;
}

.praise  ul li>div{
	width: 100%;
	/*display: flex;*/
justify-content: space-between;
flex-wrap: nowrap;
	    padding: 10px 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	    align-items: center;
}




.praise  ul li .text{
	width: 90%;
	font-family: "微軟正黑體", Arial;
	color: #585657;
	font-size: 1.2rem;
	margin-right: 4%;
	position: relative;
	padding: 5px 5% 15px 5%;
	
}




.praise ul li div .text .t {
font-size: 1.4rem;
line-height: 32px;
margin-top: 10px;
font-family: "微軟正黑體", Arial;
color: #4267b2;
}
.praise ul li div .text div .d{
	font-size: 1.2rem;
	color: #ff6000;
}
.praise ul li div .text .tag {
	height: auto;
	width: 75%;
	margin-right: 25%;
	margin-bottom: 10px;
}


@media screen and (max-width: 480px) {
.praise ul li {
	width:100%;
	margin-bottom: 10px;
	margin-right:0px;
}	

}


.page .ps{
	width:90%;
	padding: 5px 5% 15px 5%;
}	

.page .ps ul li{
	list-style:disc;
}	









/*下拉選單*/
.downMenu{
	background-color:#DEEEF5;
	padding:15px 15px 15px 15px;
}
.downMenuPage{
	background-color:#DEEEF5;
	padding:15px 15px 15px 15px;
}
.dMenu_PadTop{margin-top:15px;}
.dMenu_bg{
	background-color:#FFF;
	padding:10px;
	cursor:pointer;
}.dMenu_bg:hover{background-color:#FDF1BB; transition: 0.3s;}
.dMenu_title{
	font-weight: bold;color: #CC6600;line-height:24px;vertical-align: bottom;
	Display:inline-block;	
	padding-left:6px;	
}

.dMenu_title_r{
	font-weight: bold;color: #e30000;line-height:24px;vertical-align: bottom;
	Display:inline-block;	
	padding-left:6px;	
}

.dMenu_title_p{
	font-weight: bold;color: #993399;line-height:24px;vertical-align: bottom;
	Display:inline-block;	
	padding-left:6px;	
}
@media screen and (min-width: 641px){
.dMenu_title{font-size:16pt; line-height: 24px;}
}


.dMenu_no{
	border-radius:38px;border: 2px solid #F29753;
	height:22px;width:22px;
	font-size: 15px;text-align: center;vertical-align: middle;font-family: monospace;line-height:22px;
	Display:inline-block;	
}
.dMenu_open{
	height:15px;width:auto;vertical-align: middle;
	float: right;
	padding-top:5px;
}
.dMenu_panel{
	margin:0px;padding:15px;
	background:#FFF;
	display:none;
	border-top-width: 1px;border-top-style: dashed;border-top-color: #ccc;
	/*font-size: 12px;line-height: 18px;text-align:left;*/
	font-size: 15px;line-height: 20px;text-align:left; margin-bottom:15px;
}

.dMenu_pane2{
	margin:0px;padding:15px;
	background:#FFF;
	display:none;
	border-top-width: 1px;border-top-style: dashed;border-top-color: #ccc;
	/*font-size: 12px;line-height: 18px;text-align:left;*/
	font-size: 15px;line-height: 24px;text-align:left; margin-bottom:15px;
}
.dMenu_panelunLine{
	margin:0px;padding:15px;
	background:#FFF;
	display:none;
	/*font-size: 12px;line-height: 18px;text-align:left;*/
	font-size: 15px;line-height: 20px;text-align:left; margin-bottom:15px;
}
.dMenu_panel table{

	padding-bottom: 10px; margin-bottom:5px;
}
.dMenu_panelLine{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	padding-bottom: 10px; margin-bottom:5px;
}
@media screen and (min-width: 641px){
.dMenu_panel{
	font-size: 17px;line-height: 24px;text-align:left;
}
.dMenu_panelunLine{
	font-size: 17px;line-height: 24px;text-align:left;
}
}







/*教材*/

.embed-container2 {position: relative;padding-bottom: 56.25%; height: 0;overflow: hidden; max-width: 100%;}
.embed-container2 iframe, .embed-container2 object, .embed-container2 embed {position: absolute;top: 10px;left: 0;width: 100%;height: 100%; }

@media screen and (min-width: 641px){

.embed-container2 {position: relative;padding-bottom: 27%; height: 0;overflow: hidden; max-width: 100%; width:48%;  margin:10px; float:left;}
.embed-container2 iframe, .embed-container2 object, .embed-container2 embed {position: absolute;top: 0;left: 0; width: 100%;    }

.embed-container3 {position: relative;padding-bottom: 20%; height: 0;overflow: hidden; max-width: 100%; width:30%;  margin:10px; float:left;}
.embed-container3 iframe, .embed-container3 object, .embed-container3 embed {position: absolute;top: 0;left: 0; width: 100%;    }
}



.pointBox_Product{
   font-size: 26px;
	position:relative;
	background-color:#DEEEF5;
	width:100%;
	text-align: center; vertical-align: top;
	padding-bottom:15px; margin-top: 15px; 
}
.pdBox{display:inline-block;
	width:100%; height:auto;
	font-size: 15px; line-height: 24px;	text-align: left; vertical-align: top;
	margin-top:25px; padding:0px;}
.pdBox img{width:100%; height:auto; }

.pdBox2{
	display:inline-block;
	width:100%; height:auto;
	font-size: 15px; line-height: 24px;	text-align: left; vertical-align: top;
	margin-top:25px; padding:5px;
}
.pdBox2 img{width:46%; max-height:250px;padding:0px 10px 10px 0px;}
.pdBox3{
	display:inline-block;
	width:96%; height:auto;
	font-size: 15px; line-height: 24px;	text-align: left; vertical-align: top;
	margin-top:25px; padding:5px;
}
.pdBox3 img{width:100%; }


.bookLINE{width:100%; height:1px;background-color:#A9A79D; margin-top:10px; margin-bottom:10px;}


/*圖框圓角與灰線藍線*/
.imgRd{border-radius: 15px;}
.imgLd{border: 1px solid #EEE;}
.imgBd{border: 2px solid #3399FF;}.imgBd:hover{border: 2px solid #FF66CC;}
.imgBRd{border: 2px solid #3399FF;border-radius: 10px;}.imgBRd:hover{border: 2px solid #FF66CC;}

@media screen and (min-width: 641px){
.pointBox_Movie{font-size: 26px;}
.pointBox_Product{font-size: 26px;}
.pdBox{max-width:23%;font-size: 16px; line-height: 20px; max-width:285px;}
.pdBox2{ max-width:100%;font-size: 16px; line-height: 20px;}
.pdBox2 img{width:45%; max-height:250px;padding:0px 20px 10px 0px;}
.pdBox3{font-size: 16px; line-height: 20px; max-width:100%;}
.pdBox3 img{width:70%; height:auto; }
.pdBoxTxtTilte{ padding-top:10px;}


}
@media screen and (min-width: 1000px){
.pdBox{width:23%; max-width:285px; margin-top:10px; margin-right: 20px;}
.pdBox2{max-width:45%;padding:10px;}
.pdBox2 img{width:auto; max-height:140px; padding-left:10px;}
/*1欄
.pdBox2{ max-width:100%;font-size: 16px; line-height: 20px;}
.pdBox2 img{width:30%; max-height:320px;padding:0px 20px 10px 0px;}*/
.pdBox3{max-width:40%; height:auto;padding-left:30px;padding-right:30px;}
.pdBox3 img{width:95%; height:auto; max-height:350px;}
/*1欄*/

}


/*pcx1一排小 mx1一排*/
.pdBox7{display:inline-block;
	width:100%; height:auto;
	font-size: 15px; line-height: 24px;	text-align: left; vertical-align: top;
	margin-top:25px; padding:0px;}
.pdBox7 img{width:100%; height:auto; }

@media screen and (min-width: 641px){
.pdBox7 img{width:100%; height:auto; }
}
@media screen and (min-width: 1000px){
/*1欄*/
.pdBox7{max-width:45%; height:auto; margin-top:10px;}
.pdBox7 img{width:100%; height:auto; }
}


/*pcx1一排 mx1一排*/
.pdBox4{display:inline-block;
	width:100%; height:auto;
	font-size: 15px; line-height: 24px;text-align: left; vertical-align: top;
	margin-top:25px; padding:0px;}
.pdBox4 img{width:100%; height:auto; }

@media screen and (min-width: 641px){
.pdBox4 img{width:100%; height:auto; }
}
@media screen and (min-width: 1000px){
/*1欄*/
.pdBox4{max-width:60%; height:auto; margin-top:10px;}
.pdBox4 img{width:100%; height:auto; }
}




/*pcx2一排 mx2一排*/
.pdBox5{display:inline-block;
	width:100%; height:auto;
	font-size: 15px; line-height: 24px;	text-align: left; vertical-align: top;
	margin-top:25px; padding:0px;}
.pdBox5 img{width:100%; height:auto;
    border: 6px solid #ffffff;
	border-radius: 8px;
	box-shadow:1px 1px 3px 2px #d2ccc2;
	margin-right:15px;
	margin-bottom:15px; 
	padding: 0px;
   }

@media screen and (min-width: 641px){
.pdBox5{ max-width:100%;font-size: 16px; line-height: 20px;margin-top:15px}
.pdBox5 img{width:45%; max-height:230px;padding:0px 10px 10px 0px;}
}
@media screen and (min-width: 1000px){
/*1欄*/
.pdBox5{ max-width:100%;font-size: 16px; line-height: 20px; margin-top:10px;}
.pdBox5 img{width:35%; max-height:300px;padding:0px;}
}



/*思考力小書 pcx2一排  mx1一排*/
.pdBox6{display:inline-block;
	width:100%; height:auto;
	font-size: 15px; line-height: 24px;	text-align: left; vertical-align: top;
	margin-top:25px; padding:0px;}
.pdBox6 img{width:100%; height:auto; }
@media screen and (min-width: 641px){
.pdBox6{ max-width:100%;font-size: 16px; line-height: 20px; margin-bottom:30px;}
.pdBox6 img{width:45%; max-height:250px;padding:0px 10px 10px 0px; margin-top:-8px;}
}
@media screen and (min-width: 1000px){
/*1欄*/
.pdBox6{ max-width:100%;font-size: 16px; line-height: 20px; margin-bottom:30px;}
.pdBox6 img{width:35%; max-height:240px;padding:0px 10px 0px 0px;  margin-top:-8px;}
}




.pdBoxTxtTilte{ font-weight: bold; color: #006699; padding-bottom:5px; padding-top:10px;}

.pdBoxTxtTilte2{ font-size: 20px; font-weight: bold; color: #eb3e6f; padding-bottom:5px; padding-top:10px;}


.gotop {
	position: fixed;
	height: 45px;
	width: 45px;
	right: 0px;
	bottom: 70px;
	z-index: 400;
	opacity:0.7;
}

.gotop img {
	width: 100%;
	height: auto;
}
@media screen and (min-width: 641px){
.gotop {
	position: fixed;
	height: 70px;
	width: 70px;	
	right: 10px;
	bottom: 70px;
	z-index: 400;
	opacity:0.7;
}
.gotop img {
	width: 100%;
	height: auto;
}
}


.line {
width: 100%; border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	margin-bottom:15px; margin-top:15px;
	}


/*備註*/

.psBox{font-size: 12px; line-height: 18px; width:90%; height:auto; margin:5px auto; 	text-align: left; vertical-align: top;}

@media screen and (min-width: 1000px){
/*1欄*/
.psBox{font-size: 14px; line-height: 18px; width:90%; height:auto; margin:5px auto; 	text-align: left; vertical-align: top;}
}




#pagearea {
	background-color: #fcf0f2;
}


#pagearea .sq .page {
	padding-top: 20px;
	padding-right: 5px;
	padding-bottom: 20px;
	padding-left: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	z-index:1;
	bottom:100%;
}

@media (max-width:575px){
#pagearea .sq .page {
	padding-top: 5px;
	padding-bottom: 5px;
}
}

/* #pagearea .sq .page.stay {
	position:relative;
	z-index:1;
	bottom:unset;
} */




#pagearea .sq .page h3 {
	font-size: 32px;
	line-height: 40px;
	color: #333;
	text-align: center;
	position:relative;
	text-decoration: underline;
text-decoration-color: #1ec0ff;
}

@media (max-width:575px){
	
#pagearea .sq .page h3 {
    font-size: 24px;
    line-height: 24px;
    /*padding-bottom: 5px;*/
}
}
/*#pagearea .sq .page h3::before {
	width:5em;
	height:2px;
	background-color:#1ec0ff;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	content:"";
	display:block;
	position:absolute;
}*/


/*版本特色*/
div.target{
	position: relative;
}
div.target>div{
	position:absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top:0;
}
div.target>div ul {
    width: 92%;
    height: 85%;
    list-style: none;
    display: flex;
    align-content: stretch;
    justify-content: center;
    padding-top: 5%;
    padding-left: 4%;
    padding-right: 4%;
}
div.target>div ul li{
	width: 20%;
	list-style: none;
	font-size: 0;
}
div.target>div ul li a{
display: block;
cursor: pointer;
width: 100%;
height: 100%;
}


/*點讀巧比*/

.lit_tag {
	height: auto;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
}
.lit_tag ul {
    display: table;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.lit_tag ul li {
	font-size: 18px;
	height: 60px;
	line-height: 150%;
	background-repeat: repeat-x;
	background-position: center;
	list-style-type: none;
	float: left;
	background-image: url(../images/tag_bg.jpg);
	margin-right: 10px;
	margin-left: 10px;
	border-radius:10px;
	background-size:auto 100%;
	    position: relative;
    /*overflow: hidden;*/
}
.lit_tag ul li a {
padding-top: 0px;
    padding-right: 30px;
    padding-bottom: 0px;
    padding-left: 30px;
    /* display: inline-grid; */
    display: flex;
	color:#333;
    align-items: center;
	cursor:pointer;
height: 100%;
position:relative;
z-index:1;
}


 .lit_tag ul li.stay a {
	font-size: 22px;
	font-weight:bold;
	color:#fff;
	
}


 .lit_tag ul li a img {
	display:inline-block;
	height: 80px;
    width: auto;
}
.lit_tag ul li a span {
	display:inline-block;
}
@media (max-width:575px){
	

 .lit_tag ul li.stay a {
	font-size: 16px;
	margin-bottom: 10px;
	
}

 .lit_tag ul li {
	font-size: 16px;
	margin-right: 3px;
    margin-left: 3px;
}
 .lit_tag ul li a {
padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
	text-align:center;
	
}
	
 .lit_tag ul li a img {
	display:none;
}		

}

 .lit_page .pp {
	background-color: #FFF;
	padding: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display:none;
}
@media (max-width:575px){
 .lit_page .pp {
	padding: 10px;
}	
}



 .lit_page .pp.stay {
	display:block;
}
 .lit_page .pp .video {
	padding-top: 65%;
	width: 100%;
	position:relative;
}
 .lit_page .pp img {
	width:100%;
	height:auto;
}

 .lit_page .pp .video iframe {
	height:100%;
	width: 100%;
	position:absolute;
	top:0;
	left:0;
}
 .lit_page .pp  .linkbut{
	margin-left: auto;
	margin-right: auto;
	display: table;
	background-color: #FC8F30;
	border-radius: 20px;
	margin-top: 1em;
	min-width: 120px;
	text-align: center;
	background-image: url(../images/tag_bg.jpg);
	background-repeat: repeat-x;
	background-position: center center;
	background-size:auto 100%;
	color:#fff;
	font-weight:bold;
	
}
 .lit_page .pp .linkbut a {
    display: flex!important;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap!important;
}
 .lit_page .pp .linkbut a img{
	width:30px;
	display:inline-block;
}
 .lit_page .pp  .linkbut span{
	margin-left: auto;
	margin-right: auto;
	display: table;
	background-color: #FC8F30;
	border-radius: 20px;
	margin-top: 1em;
	min-width: 120px;
	text-align: center;
	background-image: url(../images/o_tag_bg.jpg);
	background-repeat: repeat-x;
	background-position: center center;
	background-size:auto 100%;
	color:#fff;
	font-weight:bold;
}
 .lit_page .pp  .linkbut a{
	padding:5px 20px;
	color:#fff;
	font-size:18px;
	display:block;
	border-radius:50%;	
	}



@media (max-width:575px){
.h4
{margin: 0px;
}
}


.videot{
 text-align:center;
 margin-bottom: 10px;
}