﻿/*新版贏家影音專區*/
#gradeHit_bg{
	width:100%;
	_width:99%;
	margin: 0px;
	font-family:"微軟正黑體";
	display:inline-block;
}
#gradeHit_bg img{
	border: 1px solid #E6E6E6;
	border-radius:4px;
}
#gradeHit_bg img:hover{
	opacity:0.8;
}
.gradeHit_title{
	font-size: 1.6em;
	font-weight: normal;
	text-align: center;
	padding:1%;
}
.double_border{
	padding-top:1%;}
#gradeHit_list{
    display: block;
    overflow: hidden;
    padding: 20px 0;
    box-shadow: 2px 1px 5px -2px rgba(20%,20%,40%,0.5);
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f9f9f9 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%,#f9f9f9 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#f9f9f9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 );
}
#gradeHit_bg .tabs{background: #98c5ae;padding: 0.8rem 4em;border-radius: 2rem!important;font-family: 'Noto Sans TC', sans-serif;}
.sec_tab .tabs li{border:1px solid white!important;border-radius: 1rem!important;font-weight: 700;margin: 0 1rem;}
#gradeHit_bg .tabs a{color: white!important;}
.sec_tab .tabs li.active,.sec_tab .tabs li a:hover {
	background: #346e50!important;

}
/* 卡片基礎容器 */
.hit_card {
    list-style: none;
    padding: 0;
    margin: 10px;
    text-align: center;
}

/* 推薦區塊外層 */
.recommend_header {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
}

/* 定位容器 */
.recommend_wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-bottom: 12px; /* 為底線預留空間 */
	height: 2rem;
}
.recommend_wrapper img{border:0px!important;}
/* 推薦印章圖：縮小並稍微往左靠 */
.rec img {
    width: 70px; /* 根據原圖 326px 等比例縮小 */
    height: auto;
	position: absolute;
	left: -20px;
	bottom: -10px;
}

/* 課程標題文字：增加力道 */
.course_title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
	margin-left: 3.5rem;
	font-family: 'Noto Sans TC', sans-serif;
}
.course_title,.course_title a,.rec_course{
    color: #b38728!important;font-weight: 700;font-family: 'Noto Sans TC', sans-serif; }

/* 金色底線圖：絕對定位在文字下方 */
.recommend_line {
    position: absolute;
    bottom: 0px;
    right: -25px;
    width: calc(100% - 0px); /* 讓線條寬度對應文字長度，扣除印章寬度 */
}

.recommend_line img {
    width: 100%;
    height: auto;
    display: block;
}
/*20200406 ADD*/
#gradeHit_bg .hit_school,.gradeHit_title{display: none;}

#gradeHit_bg ul li a:hover{
	text-decoration: underline;
}
#gradeHit_bg .hit_school{
	font-size:1.0em;
	color: #333;
	line-height: 1.7em;
	
}
#gradeHit_bg .hit_photo{
	border-radius:5px;	

	}
#gradeHit_bg .hit_name{
	    color: #000;
    font-size: 1.1em;
}
#gradeHit_bg .gradeHit_more{
	background-color: #EFEFEF;
	display: inline-block;
	width: 90%;
    padding: 1% 2% 1% 8%;
	border-top:4px double #333;
	font-size: 0.9em;
}
#gradeHit_bg .gradeHit_more img {border: 0;}
#gradeHit_bg .gradeHit_more a{
	color: #36C;
}
#gradeHit_bg .gradeHit_more a:hover{
	text-decoration: none;
}
@media all and (min-width: 1px) and (max-width: 1200px){
	#gradeHit_bg{width:100%;margin-left:0%;}

	#gradeHit_bg .hit_name{margin:0;
		font-size: 1.0rem;}
		.recommend_wrapper {display: inline-block;}
		.rec{width: 100%;}
		.rec img {
			width: 50px; /* 根據原圖 326px 等比例縮小 */
			height: auto;
			position:static;
			display: block;
			margin: 0 auto;
		}
		.recommend_line {
			display: none;
		}
		.course_title {margin: 0;font-size: 1.0rem;
			display: block;}
			.recommend_header{display: block;}
		#gradeHit_list{
			display: flex;flex-wrap: wrap;
		}
		#gradeHit_bg .tabs{border-radius: 0px!important;
		padding:0.5rem 0rem;}
		@media screen and (max-width: 1024px) {
		.sec_tab .tabs li{margin: 0.8rem!important;width: calc(100% / 8);}
		.sec_tab .tabs li a{font-size: 1.0rem!important;}
			}
		@media screen and (max-width: 767px) {
		.sec_tab .tabs li{margin: 0.5rem!important;padding: 0.10rem;
        width: calc(100% / 3.7);border-radius: 1.5rem !important}
		.sec_tab .tabs li a{font-size: 0.7rem!important;}
			}
}