/*========================================================*/
/*-------首頁內容--------*/
/*========================================================*/
/*/////////////////////////////////////////////////////////*/
/*-------共用區塊--------*/
/*/////////////////////////////////////////////////////////*/
/*首頁內容區塊*/
.mainContent{
padding: 50px 0px;
position: relative;
}
/*----- 首頁標題1 -----*/
.index_title {
/* font-size: 30px;
font-weight: bold;
color: #777;
line-height: 1.3;
text-align: center;
margin-bottom: 20px; */
color: #000;
text-align: center;
font-size: 2.5em; /*字體大小 2.5vw、最小值 12px、最大值 18px*/
line-height: 1.3;
font-weight: 800;
letter-spacing: 7.2px;
}
.index_title strong{
font-size: inherit;
line-height: initial;
padding: 0;
margin: 0;
display: inline-block;
font-weight: inherit;
}
@media (max-width: 990px){
.mainContent{
padding: 25px 0px;
}
/*----- 首頁標題1 -----*/
.index_title{
/* font-size: 25px;
line-height: 1.2; */
margin-bottom: 20px;
font-size: 1.3125em;
}
}
/*========================================================*/
/*-------首頁_教學專區--------*/
/*========================================================*/
/* 首頁_教學專區區塊 */
.index_teachingBg{
padding: 60px 0;
}
.index_teaching_area{
display: grid;
align-items: center;
grid-template-columns: repeat(2 , 1fr);
gap: 10px 85px;
padding-top: 60px;
}
/* 首頁_教學專區區塊_影片 */
.index_teaching_vodeo{
/* width: 50%; */
}
.index_teaching_vodeo_in{
width: 100%;
position: relative;
padding-bottom: 56.25%;
/* padding-top: 30px; */
height: 0;
overflow: hidden;
display: block;
}
.index_teaching_vodeo .video-js{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:transparent;
}
/* 首頁_教學專區區塊_連結 */
ul.index_teaching_link{
margin: 0;
padding: 0;
list-style-type : none;
display: block;
/* margin: 0px -27px; */
/* display: flex; */
/* flex-wrap: wrap; */
display: grid;
grid-template-columns: repeat(2 , 1fr);
grid-template-rows: repeat(auto-fill, 108px);
gap: 27px 27px;
font-size: 1.625em; /*字體大小 2.5vw、最小值 12px、最大值 18px*/
}
ul.index_teaching_link li{
margin: 0;
padding: 0;
list-style-type : none;
display: flex;
/* padding: 0px 27px; */
/* width: 50%; */
/* align-items: center; */
}
ul.index_teaching_link a{
border-radius: 30px;
color: #FFF;
font-family: "Noto Sans SC";
font-size: inherit;
font-weight: 500;
letter-spacing: 5.6px;
background-color: var(--second_color);
padding: 15px 15px;
/* height: calc(100% - (27px * 2)); */
height: 100%;
flex-grow:1;
display: flex;
text-align: center;
text-decoration: none;
/* vertical-align: middle; */
align-items: center;
justify-content: center;
font-family: var(--mandarin_font);
line-height: 1.3;
}
ul.index_teaching_link a:hover{
/* opacity: 0.5; */
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
transition: 0.3s ease all;
}
@media (max-width: 1280px){
/* 首頁_教學專區區塊 */
.index_teachingBg{
padding: 30px 0;
}
.index_teaching_area{
gap: 10px 50px;
padding-top: 30px;
}
ul.index_teaching_link {
gap: 15px 15px;
grid-template-rows: repeat(auto-fill, 83px);
}
ul.index_teaching_link a{
border-radius: 10px;
letter-spacing: 1px;
padding: 10px;
}
}
@media (max-width: 990px){
/* 首頁_教學專區區塊 */
.index_teachingBg{
padding: 35px 0 0;
}
.index_teaching_area{
/* display: block; */
align-items: unset;
grid-template-columns: unset;
/* gap: unset; */
padding-top: 0px;
}
ul.index_teaching_link {
gap: 10px 10px;
grid-template-rows: auto;
font-size: 1em;
}
}
OopsOops
Well, that didn't go as we had expected.
Don't worry though, we're working on it.