@charset "utf-8";

@media screen and (max-width:1290px) {
	#wrap .container {
		max-width: 1250px
	}

	#top:after {
		position  : absolute;
		left      : 0;
		top       : 100%;
		z-index   : 1;
		content   : "";
		width     : 100%;
		height    : 8px;
		background: url(../img/menu_shadow.png) repeat-x center top
	}

	#main .sorting_tool {
		padding : 10px 0;
		position: static
	}

	#footer .copyright li {
		border-left-width: 1px
	}
}
@media screen and (max-width: 1100px){
	.maths_read .over_item .btn_download {
		font-size: 15px;
	}
}
@media screen and (max-width:980px) {

	.openResponsive,
	.openResponsive body {
		height  : 100%;
		overflow: hidden
	}

	.openResponsive #wrap {
		transform        : translate3d(280px, 0, 0);
		-webkit-transform: translate3d(280px, 0, 0);
		-moz-transform   : translate3d(280px, 0, 0)
	}

	.openResponsive #wrap .overlay {
		width             : 100%;
		height            : 100%;
		opacity           : 1;
		transition        : opacity .5s ease;
		-webkit-transition: opacity .5s ease;
		-moz-transition   : opacity .5s ease;
		transition-delay  : 0
	}

	.openResponsive #mobile_menu {
		visibility       : visible;
		transform        : translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform   : translate3d(0, 0, 0)
	}

	#top .login_btn {
		right: 65px
	}

	#top .mobile_btn {
		display: block
	}

	#footer .cr-box .cr-text {
		margin-right: 0
	}

	#menu {
		display: none
	}

	#mobile_menu {
		display: block
	}

	#main .banner_show .owl-prev span,
	#main .banner_show .owl-next span {
		width : 29px;
		height: 45px
	}

	#main .content_area {
		display: block
	}

	#main .right_side {
		display: block;
		width  : 100% !important;
		width  : 100vw;
		padding: 22px 0;
		margin : 0 -15px
	}

	#main .right_side:before {
		left            : -15px;
		background-image: none
	}

	#main .main_side {
		display       : block;
		width         : 100% !important;
		padding-right : 0 !important;
		padding-bottom: 60px
	}

	#main .right_side .icon_label {
		text-align  : left;
		padding-left: 20px
	}

	#main .back_to_top {
		right : 15px !important;
		bottom: 20px
	}

	#main .back_to_top.onBottom {
		right: 0 !important;
		left: auto !important;
	}

	#main .multipage {
		float        : none;
		padding-right: 0;
		text-align   : center
	}

	#main .multipage a {
		display: none
	}

	#main .multipage .select_area {
		display: inline-block
	}

	#footer .container {
		display: block
	}

	#footer .footer_logo {
		display       : block;
		padding-bottom: 20px;
		margin        : 0 auto
	}

	#footer .company_link {
		display       : block;
		padding-bottom: 20px;
		margin        : 0 auto
	}

	#footer .copyright {
		display   : block;
		margin    : 0 auto;
		text-align: center
	}

	#footer .copyright ul {
		text-align: center
	}

	#footer .copyright li {
		padding  : 0 12px;
		font-size: 14px
	}

	#footer .copyright p {
		font-size: 10px
	}

	#top .go-student {
		display: none
	}

	#top .guide {
		display: none
	}

	#menu .type_go_student {
		display: block !important
	}

	#top .login_btn {
		display: none
	}

	#main .guide-box .item {
		width: 30%
	}

	#footer .cr-box {
		display: block
	}

	#footer .cr-box .cr-text {
		margin-right: 0
	}
}

@media screen and (max-width:767px) {
	#wrap .container {
		max-width: none
	}

	#top {
		padding: 10px 0 8px 0
	}

	#top .login_btn {
		display  : none;
		right    : 65px;
		top      : 50%;
		width    : auto;
		transform: translateY(-50%)
	}

	#top .login_btn img {
		display: none
	}

	#top .login_btn a {
		display         : block;
		width           : 40px;
		height          : 40px;
		background-color: rgba(255, 255, 255, .39);
		box-sizing      : border-box;
		text-align      : center;
		text-transform  : uppercase;
		font-weight     : 700;
		font-size       : 0;
		color           : #268ddd;
		line-height     : 40px
	}

	#top .login_btn i {
		display: inline-block
	}

	#top .mobile_btn {
		display: block
	}

	#main .title_area {
		overflow      : hidden;
		align-items   : flex-start;
		flex-direction: column
	}

	#main .title_area .title {
		display: flex
	}

	#main .title_area .title_icon {
		width: 80px
	}

	#main .title_area .title_icon img {
		width       : 100%;
		margin-right: 0
	}

	#main .title_area .title_img {
		padding-bottom: 8px;
		display       : block
	}

	#main .title_area .title_img img {
		max-height: 56px
	}

	#main .title_area .title_icon+.title {
		width: calc(100% - 80px)
	}

	#main .back_to_top {
		width: 42px
	}

	#main .back_to_top.onBottom {
		bottom: 20px
	}

	#footer .footer_logo {
		width: 225px
	}

	#footer .copyright li {
		padding  : 0 6px;
		font-size: 14px
	}

	#main .guide-box .item {
		width: 48%
	}
}

@media screen and (max-width:620px) {
	#top .login_btn {
		right: 58px
	}

	#top .login_btn a {
		width      : 34px;
		height     : 34px;
		line-height: 34px
	}

	#top .login_btn a i {
		font-size: 26px
	}

	#top .mobile_btn a {
		width      : 34px;
		height     : 34px;
		line-height: 34px
	}

	#top .mobile_btn a i {
		font-size: 26px
	}

	#mobile_menu {
		width            : 250px;
		transform        : translate3d(-250px, 0, 0);
		-webkit-transform: translate3d(-250px, 0, 0);
		-moz-transform   : translate3d(-250px, 0, 0)
	}

	.openResponsive #wrap {
		transform        : translate3d(250px, 0, 0);
		-webkit-transform: translate3d(250px, 0, 0);
		-moz-transform   : translate3d(250px, 0, 0)
	}

	#main .guide-box .item {
		width    : 100%;
		max-width: 100%
	}

	/* .news-box .news-box-item-date {
		flex-grow: 1;
		border: none;
	} */
}

@media screen and (max-width:479px) {
	#top .logo {
		width: 132px
	}

	#top .course_logo {
		width: 85px
	}
	#top .course_logo_en {
		width: 110px
	}

	#banner .banner_show .owl-prev,
	#banner .banner_show .owl-next {
		width : 29px;
		height: 39px
	}
}

@media screen and (max-width:413px) {
	#top .login_info .login_welcome {
		display: none
	}
}

@media screen and (max-width:374px) {
	#top .logo {
		width: 102px
	}

	#top .course_logo {
		width: 65px
	}

	#top .login_btn {
		right: 50px
	}

	#top .login_btn a {
		width      : 30px;
		height     : 30px;
		line-height: 30px
	}

	#top .login_btn a i {
		font-size: 22px
	}

	#top .mobile_btn a {
		width      : 30px;
		height     : 30px;
		line-height: 30px
	}

	#top .mobile_btn a i {
		font-size: 22px
	}

	#main .sorting_tool {
		padding-top: 0
	}

	#main .sorting_tool .select_area {
		display    : block;
		width      : 100%;
		margin-top : 6px;
		margin-left: 0
	}

	#footer .copyright li {
		font-size: 13px
	}

	#main .title_area .title {
		display: block
	}
}

@media screen and (max-width:319px) {
	#top .logo_area {
		flex-wrap    : wrap;
		padding-right: 30px
	}

	#top .logo {
		width: 82px
	}

	#top .course_logo {
		width: 55px
	}

	#footer .copyright li {
		display: block;
		padding: 2px 6px;
		border : none
	}

	#footer .copyright p {
		font-size: 9px
	}
}

@media screen and (max-width:1290px) {
	.index_box_area {
		margin: -10px
	}

	.index_box_area .index_box_item {
		padding   : 10px;
		box-sizing: border-box
	}

	.index_icon_list .index_icon_item {
		padding: 0 10px
	}

	.index_ball_list {
		padding: 15px 29px
	}
}

@media screen and (max-width:980px) {
	.index_img {
		height: auto
	}

	.index_img img {
		margin-bottom: 0
	}

	.index_icon_list .index_icon_item {
		height: 190px
	}

	.index_ball_list.owl-carousel .owl-prev span,
	.index_ball_list.owl-carousel .owl-next span {
		width : 29px;
		height: 45px
	}
}

@media screen and (max-width:900px) {
	.index_icon_list .index_icon_item {
		height: 180px
	}
}

@media screen and (max-width:820px) {
	.index_icon_list .index_icon_item {
		height : 160px;
		padding: 0 6px
	}
}

@media screen and (max-width:767px) {
	.index_box_area .index_box.non_bg {
		padding: 0
	}

	.index_icon_list .index_icon_item {
		height: auto
	}

	.index_icon_list .index_icon img {
		max-height: 160px
	}
}

@media screen and (max-width:479px) {
	.index_icon_list .index_icon img {
		max-height: 130px
	}
}

@media screen and (max-width:413px) {
	.index_icon_list .index_icon img {
		max-height: 115px
	}
}

@media screen and (max-width:374px) {
	.index_icon_list .index_icon img {
		max-height: 92px
	}
}

@media screen and (max-width:319px) {
	.index_icon_list {
		display: block
	}

	.index_icon_list .index_icon_item {
		display: block;
		padding: 10px 0
	}

	.index_icon_list .index_icon img {
		max-height: 130px
	}
}

@media screen and (max-width:1290px) {
	.icon_list .icon_item {
		width: 20%
	}
}

@media screen and (max-width:980px) {
	.icon_list {
		margin: -10px
	}

	.icon_list .icon_item {
		width  : 25%;
		padding: 10px
	}

	.icon_list .icon_title {
		font-size  : 18px;
		font-weight: normal
	}

	.right_side .icon_list .icon_title {
		font-size: 20px
	}

	.right_side .icon_list.owl-carousel {
		padding   : 0 25px;
		margin    : 0;
		box-sizing: border-box
	}

	.right_side .icon_list.owl-carousel .icon_item {
		width  : 100%;
		padding: 0
	}

	.right_side .icon_list.owl-carousel .owl-nav {
		position: absolute;
		top     : 50%;
		left    : 0;
		width   : 100%
	}

	.right_side .icon_list.owl-carousel .owl-prev,
	.right_side .icon_list.owl-carousel .owl-next {
		position   : absolute;
		top        : 0;
		padding    : 0 5px;
		margin     : 0;
		transform  : translateY(-50%);
		font-size  : 48px;
		color      : #268ddd;
		line-height: 1;
		outline    : none;
		cursor     : pointer
	}

	.right_side .icon_list.owl-carousel .owl-prev {
		left: -4px
	}

	.right_side .icon_list.owl-carousel .owl-next {
		right: -4px
	}
}

@media screen and (max-width:767px) {
	.icon_list {
		margin: -8px
	}

	.icon_list .icon_item {
		padding: 8px
	}
}

@media screen and (max-width:479px) {
	.icon_list {
		margin: -6px
	}

	.icon_list .icon_item {
		width  : 25%;
		padding: 6px
	}

	.right_side .icon_list .icon_title {
		font-size: 18px
	}
}

@media screen and (max-width:413px) {
	.icon_list .icon_title {
		font-size: 16px
	}

	.icon_list .icon_item {
		width: 33.3333334%
	}

	.right_side .icon_list .icon_title {
		font-size: 16px
	}
}

@media screen and (max-width:767px) {
	.detail_area table {
		font-size: 16px
	}

	.detail_area table td.dl_btn a {
		width      : 100%;
		height     : 28px;
		font-size  : 16px;
		line-height: 28px
	}

	.detail_area table td.dl_btn a img {
		max-height: 14px
	}

	.detail_area table.responsive tr {
		position: relative
	}

	.detail_area table.responsive td {
		display: flex
	}

	.detail_area table.responsive td .td_label {
		/* width           : 70px; */
		padding         : 6px 10px;
		text-align      : left;
		background-color: #209bdf;
		color           : #ffffff
	}

	.detail_area table.responsive td .td_content {
		width     : calc(100% - 70px);
		padding   : 6px 10px;
		text-align: left
	}

	.detail_area table.responsive td.book {
		padding-left: 0
	}

	.detail_area table.responsive td.type {
		padding-right: 100px
	}

	.detail_area table.responsive td.dl_btn {
		position     : absolute;
		right        : 10px;
		bottom       : 20px;
		width        : 77px !important;
		padding-right: 0;
		display      : block
	}

	.detail_area table.responsive td.dl_btn .td_label {
		display: none !important
	}

	.detail_area table.responsive td.dl_btn .td_content {
		width  : 100%;
		padding: 0
	}

	.detail_area table td.col_btn .td_content {
		text-align: left
	}

	.detail_area table td.col_btn a {
		display: inline-block;
		padding: 0 30px
	}

	/* 20220428 新template按鈕*/
	.detail_area table td.col_btn .btn-group {
		display: inline-flex;
		flex-direction: column;
	}
}

@media screen and (max-width:319px) {
	.detail_area table td.dl_btn a {
		display  : inline-block;
		max-width: 77px
	}

	.detail_area table.responsive td {
		display         : block;
		background-color: #f2f4f4
	}

	.detail_area table.responsive td .td_label {
		width: 100%
	}

	.detail_area table.responsive td .td_content {
		width: 100%
	}

	.detail_area table.responsive td.type {
		padding-right: 0
	}

	.detail_area table.responsive td.dl_btn {
		position: static;
		width   : 100% !important
	}

	.detail_area table.responsive td.dl_btn .td_content {
		padding: 6px 10px
	}
}

@media screen and (max-width:767px) {

	.eTool,
	.gamezone-area .eTool {
		min-width: 80px;
		max-width: 300px;
		width    : 18%
	}

	.eTool .over_item {
		width: 46%
	}
}

@media screen and (max-width:479px) {

	.eTool,
	.gamezone-area .eTool {
		min-width: 80px;
		max-width: 300px;
		width    : 46%;
		margin   : 2%
	}

	.eTool .over_item {
		width: 46%
	}
}

@media screen and (max-width:768px) {
	.maths_read .item_name {
		font-size: 18px
	}

	.maths_read .cover_area .item_cover {
		width: 23%
	}

	.maths_read .cover_area .item_cover_hover {
		width: 23%
	}
}
@media screen and (max-width:780px) {
	.maths_read {
		min-width: 80px;
		max-width: 300px;
		width    : 31%
	}

	.maths_read .cover_area .item_cover {
		width: 31%
	}

	.maths_read .cover_area .item_cover_hover {
		width: 31%
	}

	.maths_read .over_item {
		width: 31%
	}

}
@media screen and (max-width:540px) {
	.maths_read {
		min-width: 80px;
		max-width: 300px;
		width    : 48%
	}

	.maths_read .cover_area .item_cover {
		width: 48%
	}

	.maths_read .cover_area .item_cover_hover {
		width: 48%
	}

	.maths_read .over_item {
		width: 48%
	}

	.maths_read .item_name {
		font-size  : 16px;
		font-weight: normal
	}
}

@media screen and (max-width:1290px) {
	.course_box .course_header {
		padding: 0 36px
	}

	.course_box .course_content {
		padding-left: 22px
	}

	.course_box .new_course_list_topic {
		font-size: 28px
	}

	.course_box .new_course_name {
		font-size: 24px
	}
}

@media screen and (max-width:767px) {
	.course_box {
		padding-bottom: 0
	}

	.course_box .course_header {
		padding: 0 15px
	}

	.course_box .course_content {
		padding: 10px 15px
	}

	.course_box .new_course_info {
		width    : 100%;
		padding  : 15px 0;
		max-width: none
	}

	.course_box .new_course_list_area {
		width    : 100%;
		padding  : 15px 0;
		max-width: none
	}

	.course_box .new_course_list_topic {
		position : static;
		font-size: 24px
	}

	.course_box .new_course_name {
		font-size: 20px
	}

	.course_box .course_img_patten {
		width   : 100%;
		padding : 10px;
		position: static
	}

	.course_box .course_img_patten img {
		width: 20.5%
	}
}

@media screen and (max-width:1290px) {
	.editor_content img {
		width : auto !important;
		height: auto !important
	}

	.editor_content table {
		width    : auto !important;
		max-width: 100%
	}

	.editor_content a[href^="http:"],
	.editor_content a[href^="https:"],
	.editor_content a[href^="mailto:"] {
		word-break: break-all
	}
}

@media screen and (max-width:1290px) {
	table.mobile_block {
		width: 100% !important
	}
}

@media screen and (max-width:980px) {

	table.mobile_block,
	table.mobile_block>tr,
	table.mobile_block>tr>th,
	table.mobile_block>tr>td,
	table.mobile_block>tbody,
	table.mobile_block>tbody>tr,
	table.mobile_block>tbody>tr>th,
	table.mobile_block>tbody>tr>td {
		display: block !important;
		width  : 100% !important
	}

	table.mobile_block>tr>th,
	table.mobile_block>tr>td,
	table.mobile_block>tbody>tr>th,
	table.mobile_block>tbody>tr>td {
		padding-bottom: 20px
	}

	table.mobile_block>tr>th iframe,
	table.mobile_block>tr>td iframe,
	table.mobile_block>tbody>tr>th iframe,
	table.mobile_block>tbody>tr>td iframe {
		width: 100% !important
	}

	table.mobile_block>tr>th img,
	table.mobile_block>tr>td img,
	table.mobile_block>tbody>tr>th img,
	table.mobile_block>tbody>tr>td img {
		margin: 0 auto
	}
}