@import url("/Events/DVDSales/PresentaionLayer/css/reset.css");

/*主表格*/
.RootTable { margin: 0 auto; border: solid 5px #9AC253; border-radius: 5px; background-color: white; }
tTable .Item li { white-space: nowrap }

/*[新]限時優惠及類似方塊*/
fieldset.Promo {
	box-shadow: 
		0 0 0 1px #DFCE60,
		0 0 0 3px white,
		0 0 0 4px #D08A15,
		0 0 0 9px #EDE9A6;
}
fieldset.Exclusive {
	box-shadow: 
		0 0 0 1px #DFCE60,
		0 0 0 3px white,
		0 0 0 4px #D08A15,
		0 0 0 9px #EECD8D;
}
fieldset.Container {
	border: none;
	border-radius: 5px;
	width:75%;
	margin: auto;
	padding: 0 4% 2% 4%;
}

fieldset.Container legend {
	font-size: 16pt;
	font-weight: bold;
	color: #D40000;
	background-color: white;
	font-family: 微軟正黑體, 標楷體;
	position: relative;
	bottom: 0.3em;
}

fieldset.Container ol { font-size: 10pt }

/*限時優惠及類似方塊*/
.PromoTable { width: 92%; margin: auto; border: none; border-spacing: 0 }
.PromoTable>tbody>tr>td { padding: 0 }
.PromoTable>tbody>tr>td:first-child { width: 21px; /* 修正在HTML5下左邊框圖片會自動擠開未設定寬度的td，造成外框裂開 */ }

/*課程內容表格*/
.ContentTable { width:100%; border-collapse: collapse }
.ContentTable th, .ContentTable td { border: solid 1px #cccccc; padding: 2px }
/*.ContentTable th 的背景色請參閱下面的「介紹標題」 */

/* 設定價格按鈕 */
.moneyBuy ul{ margin:5px 0 0 0; padding:0; list-style-type:none;}
.moneyBuy li{float:right;}
.moneyBuy li a{ display:block;background-image:url(../images/btn-moneyBuy.gif); background-position:top left;  background-repeat:no-repeat; padding:0 0 0 80px;}
.moneyBuy li a span{ display:block;background-image:url(../images/btn-moneyBuy.gif); background-position:top right; padding:0 170px 0 10px; font-size:20px; line-height:38px; background-repeat:no-repeat; }

/* 設定注意區區塊 */
.notice{background-image:url(../images/notice.gif); background-position:bottom; padding-bottom:10px; margin-top:10px; width:663px;}
.notice p{background-image:url(../images/notice-bg.gif);}
/* 注意區塊的標題↓ */
.notice .title1{ line-height:40px; font-size:13px;}
.notice .title1 a{ font-size:13px;}
.notice ul{ margin:0; padding:0 10px 0 120px; list-style-type:none;background-image:url(../images/notice.gif); background-position:top;}
.notice img{ border:0;}

/* 設定流血促銷區塊 */
.sale{background-image:url(../images/notice-sale.gif); background-size: auto; background-repeat:no-repeat; padding-bottom:10px; margin-top:10px; margin-bottom:10px; width:677px;}
.sale img{ border:0;}
.sale p{background-image:url(../images/notice-bg.gif);}
.sale .T1{ line-height:40px; font-size:18px; color:#CC0000; font-weight:bold;}
.sale ul{ margin:0; list-style-type:none;}
.sale li{  padding:0 10px 0 140px; font-size:15px; color:#588204; }
.sale li a{ font-size:15px; color:#588204; text-decoration:none; }
.sale li a:hover{ text-decoration:underline; color:#CC0000;}
/* 價格的設定 */
.sale li.T2{  padding:2px 10px 0 20px; font-size:15px; color:#CC0000; border-top:1px #E8DDBB dotted; line-height:30px;}
.sale li.T2 a{ font-size:15px; color:#CC0000; text-decoration:none; }
.sale li.T2 a:hover{ text-decoration:underline; font-weight:bold;}

/* 所有區塊的公用設定 */
.BOX div{ float:left; margin: 4px 4px 6px 4px; border: solid 1px #ccc; box-shadow: #f7f7f7 5px 5px; white-space: nowrap; overflow: hidden }
.BOX div h1{ text-align: center }
.BOX div h1 img { position: relative; top: -0.3em }
.BOX div h1 a{ text-decoration:none; font-weight:normal; vertical-align: top }
.BOX div h1 a:hover{ text-decoration:underline;}
.BOX div p{ color:#333333; text-align:center;}
.BOX div p img { vertical-align:middle; padding-bottom: 0.5em }
.BOX div h2{ text-align:center; font-weight:normal; }
.BOX div span{ color:#CC0000; font-weight:bold;}

@media screen and (max-width: 755px) {
.BOX div{ width: 98%; }
.BOX div p img{ width: 95%; }
}

@media screen and (min-width: 756px) and (max-width: 1047px) {
.BOX div{ width:48%; }
.BOX div h1 a{ font-size:16pt }
.BOX div p{ font-size:12pt; display: block }
.BOX div p img{ max-width: 95%; height: 200px }
.BOX div h2{ font-size:12pt; line-height: 2em;}
}

@media screen and (min-width: 1048px) {
.BOX div { width:31.5%; }
.BOX div h1 { font-size:12pt; line-height: 2em }
.BOX div p { font-size:10pt; line-height:20px; }
.BOX div p img { max-width: 96%; height: 145px }
.BOX div h2 { font-size:10pt; line-height: 2.5em; }
}

/* 區首頁每區塊的設定-國小、語言區日文 */
.Em .BOX div h1 { background-color: #B5E5F9; }
.Em .BOX div h1 a{ color:#003399; }
.Em .BOX div h2 { color:#3399CC; }

/* 區首頁每區塊的設定-國中 */
.Ju .BOX div h1 { background-color: #FEFDE6; }
.Ju .BOX div h1 a{ color:#CC6600; }
.Ju .BOX div h2 { color:#330066; }

/* 區首頁每區塊的設定-高中 */
.Se .BOX div h1 { background-color: #FEEAF8; }
.Se .BOX div h1 a{ color:#990099; }
.Se .BOX div h2 { color:#330066; }

/* 區首頁每區塊的設定-大專院校 */
.Col .BOX div h1 { background-color: #FBD4E5; }
.Col .BOX div h1 a{ color:#990099; }
.Col .BOX div h2 { color:#330066; }

/* 區首頁每區塊的設定-公職 */
.Ad .BOX div h1 { background-color: #E5F1B8; }
.Ad .BOX div h1 a{ color:#006600; }
.Ad .BOX div h2 { color:#669900; }

/* 區首頁每區塊的設定-研究所 */
.Gra .BOX div h1 { background-color: #EEDDFF; }
.Gra .BOX div h1 a{ color:#660099; }
.Gra .BOX div h2 { color:#993300; }

/* 區首頁每區塊的設定-語言區-智點全方位點讀 */
.El .BOX div h1 { background-color: #FDADAD; }
.El .BOX div h1 a{ color:#CC0000; }
.El .BOX div h2 { color:#CC6600; }

/* 區首頁每區塊的設定-語言區-英文學習 */
.Eng .BOX div h1 { background-color: #FDADAD; }
.Eng .BOX div h1 a{ color:#CC0000; }
.Eng .BOX div h2 { color:#CC6600; }

/* 區首頁每區塊的設定-語言區-英文學習 */
.Jap .BOX div h1 { background-color: #B5E5F9; }
.Jap .BOX div h1 a{ color:#003399; }
.Jap .BOX div h2 { color:#3399CC; }

/* 區首頁每區塊的設定-高職 */
.Sevo .BOX div h1 { background-color: #D2DEFC; }
.Sevo .BOX div h1 a{ color:#011C87; }
.Sevo .BOX div h2 { color:#3D0079; }

/* 區首頁每區塊的設定-證照 */
.Li .BOX div h1 { background-color: #fcf16e; }
.Li .BOX div h1 a{ color:#CC6600; }
.Li .BOX div h2 { color:#330066; }

/*-各分區標題方塊以及詳細介紹中各區的年級頁籤------------------------------------------------------------------------------*/
/*一般設定*/
.SubjectBox {
	border-style: solid;
	border-width: 1px;
	border-radius: 7px;
	display: inline-block;
	padding: 0.1em 1em;
	font-family: 'Microsoft JhengHei';
	font-size: 15pt;
	font-weight: bold;
	text-shadow: 1px 1px 0 white;
}

/*==在詳細介紹內的年級頁籤(各學級的背景及文字顏色同SubjectBox)==*/
ul.LevelTabs { margin: 0; padding-left: 10px; margin-top: 10px }
ul.LevelTabs li { display: inline-block; border-radius: 10px 10px 0 0; background-color: #ddd; padding: 0.5em 1em; margin: 0; font-size: 12pt; font-weight: bold;opacity: 0.5 }
ul.LevelTabs li a { text-decoration: none; text-shadow: 1px 1px 0 white; }
ul.LevelTabs li:hover, ul.LevelTabs li.Selected { opacity: 1 }

/* 國小、語言區日文 */
.Em .SubjectBox, .Jap .SubjectBox, .Em ul.LevelTabs li {
	border-color: #1CA4DC;
	background-color: #B5E5F9;
	background-image: linear-gradient(to bottom, white 0, #B5E5F9 7%, #31BDF6 100%);
	color: #0076A7;
}
.Em ul.LevelTabs li a { color: #0076A7 }

/* 國中 */
.Ju .SubjectBox, .Ju ul.LevelTabs li {
	border-color: #CB9900;
	background-color: #FEFDE6;
	background-image: linear-gradient(to bottom, white 0, #FEFDE6 7%, #FFBA00 100%);
	color: #CD6A00;
}
.Ju ul.LevelTabs li a { color: #CD6A00 }

/* 高中 */
.Se .SubjectBox, .Se ul.LevelTabs li {
	border-color: #D3A7C6;
	background-color: #FDE7F6;
	background-image: linear-gradient(to bottom, white 0, #FDE7F6 7%, #D885B0 100%);
	color: #B54B70;
}
.Se ul.LevelTabs li a { color: #B54B70; }

/* 高職 */
.Sevo .SubjectBox, .Sevo ul.LevelTabs li {
	border-color: #7F93AC;
	background-color: #D6E1FD;
	background-image: linear-gradient(to bottom, white 0, #D6E1FD 7%, #3467E5 100%);
	color: #1B44AA;
}
.Sevo ul.LevelTabs li a { color: #1B44AA; }

/* 大專院校 */
.Col .SubjectBox, .Col ul.LevelTabs li {
	border-color: #DA86A8;
	background-color: #F8D5E5;
	background-image: linear-gradient(to bottom, white 0, #F8D5E5 2%, #C9487D 100%);
	color: #C34077;
}
.Col ul.LevelTabs li a { color: #C34077; }

/* 研究所 */
.Gra .SubjectBox, .Gra ul.LevelTabs li {
	border-color: #78519F;
	background-color: #EBD9FC;
	background-image: linear-gradient(to bottom, white 0, #EBD9FC 7%, #7A559E 100%);
	color: #693B96;
}
.Gra ul.LevelTabs li a { color: #693B96; }

/* 公職‧就業‧國營 */
.Ad .SubjectBox, .Ad ul.LevelTabs li {
	border-color: #A3AC7F;
	background-color: #E2EFB3;
	background-image: linear-gradient(to bottom, white 0, #E2EFB3 7%, #85A11F 100%);
	color: #627B07;
}
.Ad ul.LevelTabs li a { color: #627B07; }

/* 證照 */
.Li .SubjectBox, .Li ul.LevelTabs li {
	border-color: #A77E00;
	background-color: #FFDB54;
	background-image: linear-gradient(to bottom, white 0, #FFDB54 7%, #E57500 100%);
	color: #A65600;
}
.Li ul.LevelTabs li a { color: #A65600; }

/* 語言 */
.El .SubjectBox, .Eng .SubjectBox, .El ul.LevelTabs li {
	border-color: #A03232;
	background-color: #FEAFAF;
	background-image: linear-gradient(to bottom, white 0, #FEAFAF 7%, #BD1F1F 100%);
	color: #890202;
}
.El ul.LevelTabs li a { color: #890202; }
/*-------------------------------------------------------------------------------------------------------*/
/* 左方選單的主分類：學級、次分類 */
/*======共同設定==========================================================================================*/
/*所有超連結隱藏底線*/
.EduLevelList>div>a { text-decoration: none }
/*學級方塊*/
.EduLevelList .EduLevelBox {
	border-style: solid;
	border-width: 1px 1px 5px 1px;
	padding: 0.1em 1em;
	font-family: 'Microsoft JhengHei';
	font-size: 15pt;
	font-weight: bold;
}
/*次分類*/
.EduLevelList .DVDSalesNavigater .Title {
	font-family: 'Microsoft JhengHei';
	font-size: 12pt;
	font-weight: bold;
	border-style: solid none;
	border-width: 2px;
	margin-top:2px;
	padding: 0.2em 0.5em;
 }
/*課程清單*/
.EduLevelList ul {
	margin: 0;
	padding-left: 0;
	list-style-type: none;
}
.EduLevelList ul li {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}
.EduLevelList ul li:not(:last-child) {
	border-bottom: dotted 1px #666;
}
.EduLevelList ul li:hover {
	background-color: white;
}

/*======各學級設定==========================================================================================*/
/*國小*/
.Em .EduLevelBox { background-color: #B5E5F9; border-color: #1CA4DC; color: #035C81; }
.Em .DVDSalesNavigater .Title { border-color: #1CA4DC; color: #035C81; }
/*國中*/
.Ju .EduLevelBox { background-color: #FEFDE6; border-color: #F8A900; color: #AC6602; }
.Ju .DVDSalesNavigater .Title { border-color: #F8A900; color: #AC6602; }
/*高中*/
.Se .EduLevelBox { background-color: #FEEAF8; border-color: #B54B70; color: #971B46; }
.Se .DVDSalesNavigater .Title { border-color: #B54B70; color: #971B46; }
/*高職*/
.Sevo .EduLevelBox { background-color: #D2DEFC; border-color: #3265E3; color: #002863; }
.Sevo .DVDSalesNavigater .Title { border-color: #3265E3; color: #002863; }
/*大專院校*/
.Col .EduLevelBox { background-color: #FBD4E5; border-color: #BF3D74; color: #AD366B; }
.Col .DVDSalesNavigater .Title { border-color: #BF3D74; color: #AD366B; } 
/*研究所*/
.Gra .EduLevelBox { background-color: #EEDDFF; border-color: #7B569E; color: #593A77; }
.Gra .DVDSalesNavigater .Title { border-color: #7B569E; color: #593A77; } 
/*公職*/
.Ad .EduLevelBox { background-color: #E5F1B8; border-color: #4F8F0A; color: #356900; }
.Ad .DVDSalesNavigater .Title { border-color: #4F8F0A; color: #356900; } 
/*證照*/
.Li .EduLevelBox { background-color: #fcf16e; border-color: #FF8A00; color: #854800; }
.Li .DVDSalesNavigater .Title { border-color: #FF8A00; color: #854800; } 
/*語言區：智點全方位點讀*/
.El .EduLevelBox { background-color: #BE1919; border-color: black; color: white; }
.El .DVDSalesNavigater .Title { border-color: #FDADAD; color: #BE1919; } 
/*語言區：英文學習*/
.Eng .EduLevelBox { background-color: #BE1919; border-color: black; color: white; }
.Eng .DVDSalesNavigater .Title { border-color: #FDADAD; color: #BE1919; } 
/*語言區：日文學習*/
.Jap .EduLevelBox { background-color: #259FDE; border-color: black; color: white; }
.Jap .DVDSalesNavigater .Title { border-color: #8CD5FF; color: #086AAF; }

/*==導航按鈕：=================================================================================*/
.NavBtns { border-bottom: solid 1px; text-align: center }
.NavBtns a { display: inline-block; position: relative; margin: 2px; padding: 0.4em 1em; border-radius: 5px; color: white; text-decoration: none }
.NavBtns a:hover { top: -2px }

.Em .NavBtns { border-color: #20A6DD }
.Em .NavBtns a { background-color: #20A6DD }

.Ju .NavBtns { border-color: #DCA81B }
.Ju .NavBtns a { background-color: #DCA81B }

.Se .NavBtns { border-color: #DA80AD }
.Se .NavBtns a { background-color: #DA80AD; }

.Sevo .NavBtns { border-color: #3265E4 }
.Sevo .NavBtns a { background-color: #3265E4 }

.Col .NavBtns { border-color: #DA80AD }
.Col .NavBtns a { background-color: #DA80AD }

.Gra .NavBtns { border-color: #825EA4 }
.Gra .NavBtns a { background-color: #825EA4 }

.Ad .NavBtns { border-color: #4F8F0A }
.Ad .NavBtns a { background-color: #4F8F0A }

.Li .NavBtns { border-color: #FF8A00 }
.Li .NavBtns a { background-color: #FF8A00 }

.El .NavBtns { border-color: #BE1919 }
.El .NavBtns a { background-color: #BE1919 }

.Eng .NavBtns { border-color: #BE1919 }
.Eng .NavBtns a { background-color: #BE1919 }

.Jap .NavBtns { border-color: #20A6DD }
.Jap .NavBtns a { background-color: #20A6DD }
/*==產品名稱=================================================================================*/
.ProductName { font-size: 16pt; color: #3333CC; text-align: left; font-weight: bold; margin-bottom: 1em; }
/*==產品圖片=================================================================================*/
table.ProductImage { margin: auto; border-spacing: 0 }
table.ProductImage tr:nth-child(2) td { background-color: #eceabf; font-size: 15px;font-weight: bold;line-height: 22px;color: #cf0505;text-align: center }
/*==產品名稱下的宣傳語========================================================================*/
.ShortDesc { font-size: 13pt; font-weight: bold; color: #cf0505; padding: 1em 0; text-align: center }
/*==產品簡介=================================================================================*/
.CourseIntro { text-align: left; font-size: 11pt; color: #333333; padding: 0.5em }
.CourseIntro ul { padding-left: 1.5em }
.CourseIntro li { line-height: 1.5em }
.CourseIntro p { text-indent: 2em; margin-bottom: 1em }
.CourseIntro .avatar { float: right }
/*==老師簡介=================================================================================*/
table.TeacherIntro { width: 100%; text-align: left; font-size: 10pt; color: #333333; }
table.TeacherIntro td { vertical-align: top }
/*table.TeacherIntro td:nth-child(1) { padding-left: 0.5em }*/
table.TeacherIntro td:nth-child(2) { width: 146px }
/*==介紹標題=================================================================================*/
.Em h3, .Ju h3, .Se h3, .Sevo h3, .Col h3, .Gra h3, .Ad h3, .Li h3 { text-align: center; border-top: dotted 1px gray; border-bottom: dotted 1px gray; border-spacing: 2px; font-weight: bold; padding:0.2em; font-size: 12pt; clear: both }
.Em h3, .Em .ContentTable th { background-color: #B5E5F9; color: #035C81 }
.Ju h3, .Ju .ContentTable th { background-color: #FEFDE6; color: #ac6602 }
.Se h3, .Se .ContentTable th { background-color: #FDE7F6; color: #971B46 }
.Sevo h3, .Sevo .ContentTable th { background-color: #D6E1FD; color: #002863 }
.Col h3, .Col .ContentTable th { background-color: #F8D5E5; color: #AD366B }
.Gra h3, .Gra .ContentTable th { background-color: #EBD9FC; color: #593A77 }
.Ad h3, .Ad .ContentTable th { background-color: #E2EFB3; color: #356900 }
.Li h3, .Li .ContentTable th { background-color: #FFDB54; color: #854800 }
/*==文中的列表，每個項目間空一行=================================================================================*/
.Em li, .Ju li, .Se li, .Sevo li, .Col li, .Gra li, .Ad li, .Li li { margin-top: 0.5em }
/*不讓左邊產品種覽中的項目受上一行影響*/
.EduLevelList .Em li, .EduLevelList .Ju li, .EduLevelList .Se li, .EduLevelList .Sevo li, .EduLevelList .Col li, .EduLevelList .Gra li, .EduLevelList .Ad li, .EduLevelList .Li li { margin-top: initial }
/*==章節表格中列的替代背景色=================================================================================*/
.Se .ContentTable tr.AltColor { background-color: #fffbff }
/*==每段落隔一行==*/
.OnelineBetweenP p:not(:last-child) { margin-bottom: 1em }
/*==產品頁頁尾的產品特色、注意事項等標題==*/
.NoticeTitle { text-align: left; padding: 4px; background-color: #ffffcc }
.Em .NoticeTitle { background-color: #B5E5F9 }
.Ju .NoticeTitle { background-color: #FEFDE6 }
.Se .NoticeTitle { background-color: #FDE7F6 }
.Sevo .NoticeTitle { background-color: #D6E1FD }
.Col .NoticeTitle { background-color: #F8D5E5 }
.Gra .NoticeTitle { background-color: #EBD9FC }
.Ad .NoticeTitle { background-color: #E2EFB3 }
.Li .NoticeTitle { background-color: #FFDB54 }

/* 首頁區塊中，分類子標題(若沒有以頁籤顯示) */
.Em .Subtitle, .Ju .Subtitle, .Se .Subtitle, .SeVo .Subtitle, .Col .Subtitle, .Gra .Subtitle, .Ad .Subtitle, .Li .Subtitle { padding: 0.5em; font-weight: bold; text-shadow: 1px 1px 0px white }
.Em .Subtitle { color: #0076A7; background-color: #73d2f8; background-image: linear-gradient(to right, #73d2f8 60%, white 100%) }
.Ju .Subtitle { color: #CD6A00; background-color: #F3D7B2; background-image: linear-gradient(to right, #F3D7B2 60%, white 100%) }
.Se .Subtitle { color: #B54B70; background-color: #E9B3D0; background-image: linear-gradient(to right, #E9B3D0 60%, white 100%) }
.SeVo .Subtitle { color: #1B44AA; background-color: #D6E1FD; background-image: linear-gradient(to right, #D6E1FD 60%, white 100%) }
.Col .Subtitle { color: #C34077; background-color: #F8D5E5; background-image: linear-gradient(to right, #B5E5F9 60%, white 100%) }
.Gra .Subtitle { color: #693B96; background-color: #B79CD1; background-image: linear-gradient(to right, #B79CD1 60%, white 100%) }
.Ad .Subtitle { color: #627B07; background-color: #9AC343; background-image: linear-gradient(to right, #9AC343 60%, white 100%) }
.Li .Subtitle { color: #A77E00; background-color: #FFDB54; background-image: linear-gradient(to right, #FFDB54 60%, white 100%) }