@charset "utf-8";
/* CSS Document index */ :root {
--main-purple-color: #685AFC;
/*與白色對比為4.71的顏色,舊版為#7266FC..對比只有4.18*/
}
Body {
font-family: "Microsoft JhengHei", Inter, "Noto Sans", Poppins, ui-sans-serif, "蘋果儷中黑", "微軟正黑體", Roboto, serif;
font-size: 1em;
}
main {
position: relative;
width: 100%;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none !important;
}
h2, h3, h4 {
font-weight: 600;
}
.flex-cc {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.ll-hide {
display: none;
}
.ss-hide {
display: block;
}
.container-1550 {
max-width: 1550px;
width: 100%;
margin-right: auto;
margin-left: auto;
}
.container-1400 {
max-width: 1400px;
width: 100%;
margin-right: auto;
margin-left: auto;
}
/*新增brootstrap icon 資料庫*/
.bi-custom-diamond {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 8px;
vertical-align: middle;
/* 使用 mask 技術 */
mask: url('data:image/svg+xml;utf8,') no-repeat center;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
background-color: currentColor; /* 繼承父層顏色 */
}
.bi-custom-student {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 8px;
vertical-align: middle;
/* 使用 mask 技術 */
mask: url('data:image/svg+xml;utf8,') no-repeat center;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
background-color: currentColor; /* 繼承父層顏色 */
}
.bi-custom-teacher {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 8px;
vertical-align: middle;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
background-color: currentColor;
}
.bi-custom-enterprise {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 8px;
vertical-align: middle;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
background-color: currentColor;
}
.bi-custom-greenpower {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 8px;
vertical-align: middle;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
background-color: currentColor;
}
.bi-custom-innovationmng {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 8px;
vertical-align: middle;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
background-color: currentColor;
}
.bi-custom-innovation {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 8px;
vertical-align: middle;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
background-color: currentColor;
}
.bi-custom-ESG-cycle {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 8px;
vertical-align: middle;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
background-color: currentColor;
}
.icon-colored {
width: 1.5em;
height: 1.5em;
vertical-align: middle;
margin-right: 0.5rem;
filter: invert(29%) sepia(79%) saturate(1684%) hue-rotate(225deg) brightness(98%) contrast(102%);
transition: filter 0.3s ease;
}
a:hover .icon-colored, a.active .icon-colored {
filter: brightness(0) invert(1);
}
/*----沿用網大相關設定----*/
section {
display: block;
}
.breadcrumbs-link-wrapper .breadcrumbs-link-block {
position: relative;
padding: 8px 0;
font-size: 0.875rem;
color: #6c757d;
z-index: 3;
}
.breadcrumbs-link-wrapper .breadcrumbs-link-block a {
color: #007bff;
}
.breadcrumbs-link-wrapper .breadcrumbs-link-block a:hover {
color: #0056b3;
text-decoration: underline;
}
.menu-accessibility-point {
position: absolute;
left: 0;
color: #000;
display: inline-block;
padding: 0px 5px;
opacity: 0;
}
/*----網大相關CSS結束----*/
/***************************************************************************/
/*AI主題專區*/
/***************************************************************************/
/*標題與熱門課程區*/
.title-hot-area {
position: relative;
background-image: url(../images/classes_zone/bg_ai-zone.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 10px 10px 25px;
}
.unit-title-group {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.unit-title {
font-size: 2.375rem;
font-weight: 600;
color: #000;
display: flex;
align-items: center;
padding: 15px 0;
text-wrap: nowrap;
min-width: 380px;
}
.unit-title > img {
width: 40px;
margin-right: 0.75rem;
}
.unit-title > i {
color: #5445FF;
margin-right: 0.75rem;
}
.unit-title-intro {
font-weight: 600;
color: #555;
font-size: 1.125rem;
line-height: 1.5;
padding: 5px;
padding-left: 2rem;
}
.zone-news {
position: relative;
background-color: #ffff9980;
border-radius: 35px;
padding: 10px 15px 5px 3rem;
box-shadow: 1px 1px 5px 0 #e0750a60;
line-height: 125%;
min-height: 42px;
}
.zone-news a {
color: #e0750a;
text-decoration: underline !important;
}
.zone-news a:hover {
text-decoration: none;
color: var(--main-purple-color);
}
.zone-news:before {
content: "";
position: absolute;
width: 40px;
height: 40px;
background-image: url(../images/classes_zone/icon_zone-list.svg);
background-size: 100%;
top: calc(50% - 20px);
left: 2px;
animation: jump-out 4s ease-in-out 2;
}
.type-menu-list {
font-size: 1.3rem;
padding: 10px 1rem;
display: flex;
flex-wrap: wrap;
}
.type-menu-list li {
list-style: none;
}
.type-menu-list li a {
padding: 8px 15px;
border-radius: 8px;
border: 1px solid #DDD;
color: #000;
background-color: #FFF;
margin: 4px;
text-align: center;
font-weight: 600;
white-space: nowrap;
transition: all .5s;
}
.type-menu-list li i {
margin-right: 0.25rem;
}
.type-menu-list li a.active, .type-menu-list li a:hover {
border: 1px solid var(--main-purple-color);
background-color: var(--main-purple-color);
color: #FFF;
}
/*AI專區主按鈕修改*/
.type-menu-list.all li {
flex: 0 0 25%;
}
.type-menu-list.all {
justify-content: flex-start;
font-size: 1.25rem;
}
.type-menu-list.all li a {
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 1.25rem;
letter-spacing: 0;
padding: 12px 10px;
line-height: 150%;
margin: 5px 3px;
}
.type-menu-list.all li a span {}
.type-menu-list.all li a i {
color: #5356fc;
margin-right: 0.5rem;
font-size: 150%;
}
.type-menu-list.all li a.active i, .type-menu-list.all li a:hover i {
color: #FFF;
}
/*創業專區溫馨提醒*/
.create-icon{
width: fit-content;
font-size: 1rem;
color: #FFF;
padding: 5px 15px;
background-color: #9A42FF;
border-radius: 30px;
transition: all .4s;
}
.create-icon i{
margin-right: 0.5rem;
}
.create-icon:hover{
color: #FFFFFF;
background-color: #685AFC;
}
/*創業專區溫馨提醒內容*/
.create-notice-title{
color: #4337CE;
font-size: 1.125rem;
padding: 0 10px 10px;
}
.create-notice-block{
display: flex;
}
.create-notice-box{
position: relative;
color: #555;
background-color: #F2F2FF;
padding: 10px 8px;
border-radius: 8px;
margin:0 8px;
}
.create-notice-box:after{
top: calc(50% - 10px);
right: -14px;
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 12px 0 12px 15px;
border-color: transparent transparent transparent #b8b2ff;
}
.create-notice-box.no:after{
display: none;
}
/*創業專區溫馨提醒 Modal*/
.modal.create .btn-close{
position: absolute;
right: 15px;
top:15px;
}
/*創業專區-先修課程說明*/
.create-intro-block{
padding: 0 20px;
font-size: 1.125rem;
color: #4337CE;
}
.create-intro-box{
border:2px solid #A69EFF;
border-radius: 26px;
padding: 1.5rem;
color: #555555;
font-size: 1rem;
line-height: 1.5;
margin:0 10px 20px;
min-height: 220px;
}
.create-intro-box .title{
text-align: center;
color: #4337CE;
font-size: 1.25rem;
font-weight: 600;
}
.create-intro-box .title i{
margin-right: 0.75rem;
font-size: 1.5rem;
}
.create-intro-box .title img{
margin-right: 0.75rem;
height: 1.5rem;
vertical-align: middle;
}
/*八大專區-新增左側搜尋與課程區*/
.class-zone-block {
position: relative;
display: flex;
flex-wrap: wrap;
width: fit-content;
margin-left: auto;
margin-right: auto;
padding: 80px 0 100px;
width: 100%;
max-width: 1502px;
}
.class-zone-wide {
position: absolute;
width: 100%;
left: 0;
}
.class-zone-wide.top {
top: 0;
}
.class-zone-wide.bottom {
bottom: 0;
}
.zone-search-menu {
position: relative;
width: 242px;
}
.zone-course-list {}
#zone-search-menu-box {
margin: 15px 0;
padding: 15px;
border-radius: 12px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, .15);
background-color: #FFF;
}
#zone-search-menu-box .title {
font-size: 1.25rem;
color: #333;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid #E1E8F0;
}
#zone-search-menu-box .title i {
color: #7266FC;
margin-right: 0.5rem;
}
#zone-search-menu-box .notice {
font-size: 0.875rem;
color: #333333;
padding: 10px 0;
}
#zone-search-menu-box .notice span {
font-size: 0.875rem;
color: #4337CE;
}
.zone-search-menu .input-group input {
padding: 0 5px !important;
height: 34px;
}
.zone-search-menu .input-group button {
height: 34px;
padding: 2px 5px !important;
}
.zone-search-menu .input-group input::placeholder {
font-size: 0.9rem;
}
.zone-search-line {
display: flex;
flex-wrap: nowrap;
padding: 10px 0;
}
.zone-check-btn {
flex: 1 1 33%;
border: 1px solid #BBBBBB !important;
padding: 3px 0;
text-align: center;
font-size: 0.875rem;
margin: 2px;
border-radius: 0;
}
.zone-search-line .btn-check:checked + .btn, .btn.active, .zone-search-line .btn.show, .zone-search-line .btn:first-child:active, .zone-search-line :not(.btn-check) + .btn:active {
color: #FFF;
background-color: #7266FC;
}
.zone-search-line .btn-check + .btn:hover {
border-radius: 0;
color: #FFF;
background-color: #7266FC;
}
.mng-5-btn {
position: relative;
border: 1px solid #BBBBBB;
padding: 3px 6px;
background-color: #FFF;
font-size: 1.125rem;
color: #4337CE;
margin: 0 2px;
width: 100%;
transition: all .5s;
}
.mng-5-btn:hover {
border: 1px solid #BBBBBB;
background-color: #4337CE;
color: #FFF;
}
.mng-5-btn:after {
content: "";
position: absolute;
right: 10px;
background-image: url(../images/classes_zone/icon_arrow-after.svg);
width: 7px;
height: 27px;
background-position: center center;
background-repeat: no-repeat;
}
.mng-5-btn:hover:after {
background-image: url(../images/classes_zone/icon_arrow-after-w.svg);
}
.btn-select-course.zone {
font-size: 1.125rem;
padding: 2px;
border-radius: 10px;
}
/*下方補全開合相關CSS*/
.zone-search-menu {
position: relative;
width: 33px; /* 只保留按鈕的寬度 */
overflow: hidden;
transition: width 0.3s ease;
}
.zone-search-menu.expanded {
width: 246px; /* 展開寬度 */
display: flex;
justify-content: center;
align-items: flex-start;
}
#zone-search-menu-box {
position: absolute;
left: 0;
top: 0;
margin-left: 2px;
margin-right: 2px;
width: 242px;
transition: transform 0.3s ease;
}
/* 收合狀態把內容往左推走 */
.zone-search-menu.collapsed #zone-search-menu-box {
transform: translateX(-100%);
}
.zone-search-menu.collapsed {
background-image: url(../images/classes_zone/bg_side-closed.svg);
background-repeat: no-repeat;
background-position: left 18px;
background-size: auto;
}
.zone-search-menu.collapsed #zone-search-menu-box {
margin-left: 0;
margin-right: 0;
}
#wbtn {
position: absolute;
right: 0;
top: 25px;
z-index: 10;
background-color: #EFEEFF;
border: 1px solid #DDDDDD;
padding: 5px 10px;
border-radius: 3px 0 0 3px;
transition: transform 0.3s ease;
}
#wbtn.rotated {
transform: rotate(180deg);
border-right: 0;
}
/*專區搜尋-Modal視窗*/
.modal.zone {
--bs-modal-border-color: #DDD;
--bs-modal-header-border-width: 10;
--bs-modal-border-radius: 12px;
--bs-modal-width: 265px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, .15) !important;
}
.modal.zone .modal-dialog {
margin-top: 5%;
margin-right: auto;
margin-left: calc(50vw - 650px);
}
.modal.zone .btn-close {
position: absolute;
right: 10px;
top: 12px;
width: 1em;
height: 1em;
background: transparent url(../images/classes_zone/icon_purple-X.svg);
background-repeat: no-repeat;
background-size: 100%;
border-radius: 0.375rem;
opacity: 1;
z-index: 5;
}
.modal.zone .modal-header {
background-color: #EAE8FF;
justify-content: flex-start;
font-size: 1.25em;
letter-spacing: 0;
color: #4337CE;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
padding: 10px;
}
.modal.zone .modal-header:before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 7px 0 7px 13px;
border-color: transparent transparent transparent #4437ce;
margin-right: 0.25rem;
}
.m-main-list > .hint, .m-sub-list > .hint {
font-size: 1rem;
color: #333333;
}
.modal.zone .modal-body {
padding: 10px 15px 25px;
}
.m-main-list > button {
font-size: 1.125em;
color: #4337CE;
position: relative;
width: 100%;
list-style: none;
border: 0;
text-align: center;
background-color: #FFF;
font-weight: 600;
border: 1px solid #BBBBBB;
padding: 2px 10px;
margin: 6px 0;
letter-spacing: 1px;
transition: all .4s ease;
}
.m-main-list > button:after {
content: "";
position: absolute;
right: 10px;
background-image: url(../images/classes_zone/icon_arrow-after.svg);
width: 7px;
height: 27px;
background-position: center center;
background-repeat: no-repeat;
}
.m-main-list > button:hover {
background-color: #EAE8FF;
border: 1px solid #4337CE;
}
.modal.zone .m-sub-list {
min-height: 150px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
max-height: 225px;
padding-bottom: 5px;
}
.m-sub-list > button {
font-size: 1em;
color: #555555;
position: relative;
width: 100%;
list-style: none;
text-align: center;
background-color: #FFF;
font-weight: 600;
border-radius: 5px;
border: 1px solid #BBBBBB;
padding: 5px 10px;
margin: 5px 0;
transition: all .4s ease;
}
.m-sub-list > button:hover {
background-color: #EAE8FF;
border: 1px solid #4337CE;
}
.selected-toast {
display: inline-flex;
align-items: center;
background-color: #EAE8FF;
color: #333333;
border-radius: 5px;
padding: 3px 8px;
margin: 0 2px 4px;
font-size: 0.875rem;
border: 1px solid #BBBBBB;
}
.selected-toast .btn-close {
margin-left: 0.5rem;
width: 0.6em;
height: 0.6em;
background: unset;
background-image: url(../images/classes_zone/icon_purple-X.svg) !important;
background-repeat: no-repeat;
background-size: 100%;
border-radius: 0.375rem;
opacity: 1;
z-index: 5;
}
/*下拉選單內容*/
.type-menu-list.all .dropdown-menu.show {
display: block;
width: 80%;
inset: -90% 0 0 95% !important; /*右側選單*/
padding: 10px;
border: 0;
height: fit-content;
border-radius: 10px;
filter: drop-shadow(rgba(0, 0, 0, 0.04) 0px 0px 8px) drop-shadow(rgba(0, 0, 0, 0.12) 0px 6px 20px);
}
.type-menu-list.all .dropdown-toggle::after {
position: absolute;
right: 5%;
transform: rotate(-90deg);
}
.type-menu-list.all .dropdown-menu.show a {
border: 0;
border-radius: 0;
width: 95%;
margin: 0 auto;
font-size: 100%;
padding: 10px;
}
.type-menu-list.all .dropdown-menu.show > li {
border-bottom: 1px dashed #00000020;
}
.type-menu-list.all .dropdown-menu.show > li:last-child {
border-bottom: 0;
}
.type-menu-list.all .dropdown-menu.show::after { /*對話框左側三角*/
content: "";
position: absolute;
top: 22px;
left: -32px;
width: 0;
height: 0;
border: 16px solid;
border-color: transparent #FFF transparent transparent;
}
/*特別類別(國際應用)*/
.type-menu-list li.sp a {
color: #FFF;
border: 1px solid #DDD;
background-color: #F38F1E;
}
.type-menu-list li.sp a:hover {
color: #FFF;
border: 1px solid #CC6600;
background-color: #CC6600;
}
.type-menu-list li.sp a i {
color: #FFF;
}
/*子分類小標*/
.hot-course-block {
position: relative;
}
.hot-title {
margin-top: 3rem;
margin-bottom: 0.5rem;
}
.type-title {
position: relative;
font-size: 1.75rem;
font-weight: 600;
}
.type-title i {
color: var(--main-purple-color);
margin-right: 0.5rem;
}
/*熱門課程arrow前後筆silck*/
.center_1_prev {
left: -2rem;
}
.center_1_next {
right: -2rem;
}
.center_1_prev, .center_1_next {
cursor: pointer;
position: absolute;
top: calc(50% - 15px);
z-index: 15;
opacity: .65;
transition: all .5s;
border: 0;
background-color: transparent;
}
.center_1_prev > img, .center_1_next > img {
width: 30px;
}
.center_1_prev:hover, .center_1_next:hover {
transform: scale(1.1);
opacity: 1;
}
/*熱門課程播放/暫停控制器*/
.hot-course-controller {
position: absolute;
right: 0;
top: 4px;
width: fit-content;
transition: all .3s;
}
.hot-course-controller:hover {
transform: scale(1.1);
}
.slick-play-pause {}
.slick-play-pause i {
font-size: 1.15rem;
margin-right: 0.125rem;
}
.slick-play-pause a {
color: #685AFC;
}
.slick-play-pause a.pause-color {
color: #666 !important;
}
.slick-play-pause a:hover, a.pause-color:hover {
color: #0d6efd;
}
.slick-pp-btn img {
width: 25px;
}
.slick-dots-and-control {
display: flex;
align-items: center;
justify-content: center;
gap: 10px; /* dots 和按鈕間距 */
margin-top: 10px;
}
.slick-play-pause img {
width: 24px;
height: 24px;
cursor: pointer;
}
/*課程box與熱門課程box*/
.course-box {
width: 100%;
margin: 15px 0;
padding: 5px;
display: flex;
flex-direction: column;
}
.course-box.hot {
margin: 0;
padding: 15px;
flex-direction: row;
}
.course-box .photo {
position: relative;
flex: 1 1 100%;
border-radius: 10px;
overflow: hidden;
width: 100%;
padding-bottom: 52.5%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
transition: all .5s;
}
.course-box .photo:hover {
transform: scale(1.05);
}
.course-box.hot .photo {
padding-bottom: 61.5%;
}
.course-box .photo:after {
position: absolute;
content: 'READ MORE';
width: 100%;
height: 100%;
left: 0;
top: 0;
color: #fff;
letter-spacing: 1px;
display: flex;
justify-content: center;
flex-wrap: nowrap;
font-weight: 900;
text-shadow: 1px 1px 4px #00000080;
align-items: center;
background-color: #7266FC99;
z-index: 3;
transition: all .5s;
opacity: 0;
}
.course-box .photo:hover:after {
opacity: 1;
}
.course-box.hot > a {
flex: 0 1 48%;
margin: 10px;
}
.course-box .detail {
flex: 0 1 52%;
margin: 5px;
}
.course-box .content {
padding: 10px 0;
min-height: 100px;
}
.course-box.hot .content {
padding: 0;
height: 135px;
}
.course-box .title {
color: #333;
max-height: 76px;
overflow: hidden;
font-size: 1.5rem;
font-weight: 600;
line-height: 145%;
margin-bottom: 0.25rem;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: hidden;
-webkit-line-clamp: 3;
}
.course-box.hot .title {
max-height: 75px;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: hidden;
-webkit-line-clamp: 2;
}
.course-box.hot .speaker {
color: #888;
font-size: 1rem;
height: 50px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.course-box .title > a {
color: #222;
}
.course-box .title > a:hover {
color: #4337CE;
}
.course-box .intro {
color: #555;
font-size: 1.125rem;
max-height: 50px;
overflow: hidden;
font-weight: 600;
line-height: 145%;
margin-bottom: 0.25rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.course-box .intro-long {
color: #555;
font-size: 1rem;
max-height: 90px;
overflow: hidden;
font-weight: 600;
line-height: 145%;
margin-bottom: 0.25rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.course-box .speaker {
color: #666;
font-size: 1.125rem;
height: 22px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.course-box.hot .speaker {
color: #666;
}
.course-box .footer-up {
color: #888;
font-size: 1.125rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.course-box .footer-up {
color: #666;
flex-wrap: wrap;
}
.col-lg-4 .course-box .footer-up {
flex-wrap: nowrap;
}
.col-xl-3.col-lg-4 .course-box .footer-up {
flex-wrap: wrap;
}
.course-box .footer-up span {
font-weight: 400;
}
.course-box .footer-up > .star {
display: flex;
align-items: center;
justify-content: flex-start;
padding-right: 1.25rem;
}
.course-box .footer-up > .star img {
width: 20px;
height: 20px;
margin-right: 1px;
}
.course-box .footer-up i {
margin-right: 0.25rem;
}
.course-box .footer-up div {
flex:1 1 auto;
line-height: 1.75;
}
.course-box .footer-up div:nth-child(2) {
flex:1 1 20%;
white-space: nowrap;
}
.course-box .footer-up div:nth-child(3) {
flex:1 1 20%;
white-space: nowrap;
}
.course-box .footer-bottom {
border-top: 1px solid #7E71FF;
margin-top: 0.25rem;
padding-top: 0.25rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
height: 38px;
}
.course-box .footer-bottom > .hashtag {
display: flex;
text-align: left;
justify-content: start;
flex-wrap: wrap;
overflow: hidden;
height: 38px;
line-height: 115%;
}
.course-box .footer-bottom > .hashtag > a {
font-size: 0.938rem;
color: #888;
white-space: nowrap;
margin-right: 0.5rem;
}
.course-box.hot .footer-bottom > .hashtag > a {
font-size: 1rem;
color: #666;
white-space: nowrap;
margin-right: 5px;
}
.course-box .footer-bottom > .hashtag > a:hover {
color: #4337CE;
background-color: #EEE;
}
.course-box .footer-bottom .price {
font-size: 1rem;
font-weight: 600;
color: #4337CE;
letter-spacing: 1px;
}
.course-box .footer-bottom .free {
font-size: 1rem;
font-weight: 600;
color: #FFF;
background-color: var(--main-purple-color);
border: 1px solid #A69EFF;
padding: 1px 10px;
border-radius: 4px;
letter-spacing: 0;
white-space: nowrap;
}
/*課程列表*/
.course-area {
background-color: #F9F9F9;
padding: 50px 0;
}
.title-search-group {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #CCC;
padding-bottom: 0.25rem;
}
.type-title span {
padding-left: 1rem;
font-size: 1.125rem;
color: #4337CE;
}
input.input-course-search::placeholder {
color: #AAA;
}
.btn-course-search {
border: 1px solid #ced4da;
border-left: 0;
background-color: #FFF;
}
.title-filter-group {
text-align: right;
padding: 15px 0 10px;
}
.btn-filter {
color: #999;
border: 1px solid #BBB;
padding: 2px 15px;
border-radius: 0;
background-color: transparent;
transition: all .5s;
}
.btn-filter:hover, .btn-filter.active {
color: #FFF;
border: 1px solid var(--main-purple-color);
background-color: var(--main-purple-color);
}
.course-list-group, .course-list-group.zone {
position: relative;
padding: 0 15px;
max-width: 1256px;
margin-left: auto;
margin-right: auto;
}
.col-zone { /*配合上面寬度排列四筆*/
flex: 0 0 auto;
width: 25%;
min-width: 295px;
}
.pagination-group {
display: flex;
justify-content: center;
}
.page-link {
margin: 10px;
border-radius: 0 !important;
width: 40px;
text-align: center;
background-color: transparent;
color: #999;
padding: 5px;
}
.page-link:hover, .page-link.active {
color: #FFF;
background-color: var(--main-purple-color);
border: 1px solid #4200CD;
}
/*AI工具分享*/
.title-aitool-area {
position: relative;
background-image: url(../images/tool_zone/bg_ai-tools.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 10px;
}
.type-menu-list.sub {
position: relative;
width: fit-content;
}
.type-menu-list.sub:before, .type-menu-list.sub:after {
position: absolute;
content: "";
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 22px;
height: 22px;
opacity: .75;
}
.type-menu-list.sub:before {
background-image: url(../images/icon/caret-left-square.svg);
top: 15px;
left: -0.75rem;
}
.type-menu-list.sub:after {
background-image: url(../images/icon/caret-right-square.svg);
top: 15px;
right: -0.75rem;
}
.type-menu-list.sub li {
height: 45px;
}
.type-menu-list.sub li a {
padding: 5px 10px;
margin: 3px;
}
.tool-box {
margin: 20px 12px;
padding: 15px 25px;
border-radius: 12px;
border: 2px solid #E1E8F090;
background-color: #FBFAFF;
transition: all .4s;
}
.tool-box:hover {
border: 2px solid #A69EFF;
background-color: #FAF9FF;
transform: translateY(-5px) translateX(-5px);
}
a .tool-box {
color: #1E293B;
}
.tool-box .title {
color: #000;
line-height: 180%;
font-weight: 600;
font-size: 1rem;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
}
.tool-box .title img {
height: 25px;
width: auto;
margin-right: 1rem;
}
.tool-box .intro {
color: #333;
line-height: 175%;
font-weight: 500;
font-size: 1rem;
height: 80px;
overflow: hidden;
letter-spacing: 1px;
margin-bottom: 1.25rem;
}
.tool-box .type > span {
color: #FFF;
font-size: .75rem;
padding: 3px 10px;
font-weight: 600;
margin: 0 2px
}
.tool-box .type > .free {
background-color: #58C577;
}
.tool-box .type > .paid {
background-color: #D782CE;
}
.tool-box .type > .cht {
background-color: #00A6A7;
}
.tool-box .type > .eng {
background-color: #3C7DBA;
}
/*雲市集AI解決方案*/
.tool-box .ai-type {
color: #FFF;
font-size: 0.95rem;
padding: 2px 8px 0;
font-weight: 600;
margin: 0 2px;
width: fit-content;
margin-bottom: 0.5rem;
}
.tool-box .ai-type.shop {
background-color: #CC0954;
}
.tool-box .ai-type.marketing {
background-color: #FF6633;
}
.tool-box .ai-type.office {
background-color: #5644BC;
}
.tool-box .ai-type.management {
background-color: #208CE5;
}
.tool-box .ai-type.customer {
background-color: #FF6699;
}
.tool-box .ai-type.market {
background-color: #58C577;
}
.tool-box .ai-type.zero {
background-color: #569656;
}
.tool-box .ai-type i {
font-weight: 400;
margin-right: 0.25rem;
}
.tool-box .company {
color: #333;
line-height: 180%;
font-weight: 600;
font-size: 1rem;
margin-bottom: 0.125rem;
}
.tool-box .product {
color: #000;
line-height: 150%;
font-weight: 600;
font-size: 1.25rem;
height: 150px;
overflow: hidden;
margin-bottom: 0.125rem;
}
.tool-box .hashtag {
height: 30px;
line-height: 125%;
}
.tool-box .hashtag.no {}
.tool-box .hashtag a {
color: #666;
font-weight: ;
font-size: 0.95rem;
padding-right: 0.5rem;
white-space: nowrap;
}
.tool-box .hashtag a:hover {
color: #4337CE;
background-color: #EEE;
}
.tool-box .more {
color: #5445FF;
position: relative;
text-align: right;
padding-top: 10px;
font-size: 1rem;
color: #FFF;
background-color: var(--main-purple-color);
border: 1px solid #A69EFF;
padding: 2px 15px;
border-radius: 4px;
letter-spacing: 0;
white-space: nowrap;
width: fit-content;
margin-left: auto;
}
/***************************************************************************/
/*AI主題專區-亮點案例*/
/***************************************************************************/
.title-hot-area.case {
background-image: url(../images/case_zone/bg_case-zone.jpg);
box-shadow: 0 0 15px 0 rgba(0, 0, 0, .1);
}
.title-class-area.case {
background-image: url(../images/case_zone/bg_inside.png);
background-size: 100% 75vh;
background-repeat: repeat-x;
background-position: top center;
background-color: #f2f2f2;
}
.case-type-menu {
position: relative;
display: block;
width: 100%;
color: #333333;
text-align: center;
font-weight: 600;
font-size: 125%;
padding: 6px;
padding-left: 25px;
border-radius: 25px;
background-color: #FFF;
border: 1px solid #829FC0;
transition: all .5s;
margin: 5px 0;
}
.case-type-menu:hover, .case-type-menu.active {
color: #1770DB;
border-radius: 25px;
background-color: #F4FDFF;
border: 1px solid #007BFF;
box-shadow: 2px 2px 0 0 rgba(0, 123, 255, .2);
}
.case-type-menu:before {
content: "";
top: calc(50% - 16px);
left: 6px;
position: absolute;
border-radius: 50%;
display: block;
height: 32px;
width: 32px;
background-image: url(../images/case_zone/icon_case-type01.svg);
border: 1px solid #D6D6D6;
background-repeat: no-repeat;
background-position: left center;
background-size: 100%;
}
.case-type-menu.PD:before { /*生產管理小圖*/
background-image: url(../images/case_zone/icon_case-type01.svg);
border: 1px solid #D6D6D6;
}
.case-type-menu.MK:before { /*行銷管理小圖*/
background-image: url(../images/case_zone/icon_case-type02.svg);
border: 1px solid #4CC1BE;
}
.case-type-menu.HR:before { /*人資管理小圖*/
background-image: url(../images/case_zone/icon_case-type03.svg);
border: 1px solid #F2B0B0;
}
.case-type-menu.RD:before { /*研發管理小圖*/
background-image: url(../images/case_zone/icon_case-type04.svg);
border: 1px solid #AADEAA;
}
.case-type-menu.FN:before { /*財務管理小圖*/
background-image: url(../images/case_zone/icon_case-type05.svg);
border: 1px solid #FFCC00;
}
.case-type-menu.IT:before { /*資訊管理小圖*/
background-image: url(../images/case_zone/icon_case-type06.svg);
border: 1px solid #007BFF;
}
.case-more-link {
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.case-more-link a {
font-weight: 600;
color: #555555;
}
.case-more-link a:hover {
color: #0056b3;
}
/*案例直立box*/
.course-box.hot .photo {
padding-bottom: 61.5%;
}
.course-box.case-video .photo:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: url(../images/case_zone/play-circle.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 65px 65px;
background-color: #00000030;
z-index: 3;
transition: all .5s;
opacity: .8;
}
.course-box.case-video .title, .course-box.case-article .title {
height: 80px; /*設定資料高度*/
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3; /*設定資料顯示行數*/
}
.course-box.case-video-hr .photo:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: url(../images/case_zone/play-circle.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 65px 65px;
background-color: #00000030;
z-index: 3;
transition: all .5s;
opacity: .8;
}
.course-box.case-video-hr .title {
height: 60px; /*設定資料高度*/
max-height: unset;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3; /*設定資料顯示行數*/
}
.course-box.case-video .speaker, .course-box.case-video-hr .speaker, .course-box.case-article .speaker {
color: #666;
font-weight: 600;
height: 50px; /*設定資料高度*/
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2; /*設定資料顯示行數*/
}
.type-title.case {
color: var(--main-purple-color);
}
.type-title.case span {
color: #555;
}
.course-box.hot.case-video .detail, .course-box.hot.case-video-hr .detail, .course-box.hot.case-article .detail {
display: flex;
flex-direction: column;
justify-content: center;
}
.course-box.hot.case-video .content, .course-box.hot.case-article .content {
padding: 0;
height: 110px;
}
.course-box.hot.case-video .title, .course-box.hot.case-article .title {
max-height: 80px;
}
/*亮點案例內頁-*/
.case-video-box {
margin: 5px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 0 6px 0 #00000030;
}
.case-content-title {
font-size: 200%;
font-weight: 600;
color: #000;
line-height: 150%;
margin-bottom: 10px;
}
.case-share-group {
display: flex;
color: #999999;
color: #999;
font-size: 85%;
align-items: center;
justify-content: flex-end;
padding-top: 10px;
line-height: 100%;
}
.case-share-group div {
flex: 0 0 auto;
padding: 0 6px;
width: fit-content;
letter-spacing: 1px;
}
.case-share-group a i {
color: #8282E8;
font-size: 165%;
transition: all .5s;
}
.case-share-group a:hover i {
color: #3300cc;
}
.case-video-box .photo {
position: relative;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-radius: 12px;
padding-top: 53.92%;
overflow: hidden;
}
.case-video-box .photo:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: url(../images/case_zone/play-circle.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 75px 75px;
background-color: #00000070;
transition: all .5s;
z-index: 3;
opacity: .8;
}
.case-intro-box {
margin: 0 5px;
padding: 3rem;
background-color: #FFF;
border-radius: 12px;
border: 1px solid #E1E8F0;
line-height: 225%;
margin-bottom: 3rem;
}
.case-intro-box.side-info {
padding: 2rem;
margin-bottom: 0;
}
.case-intro-box .stitle {
color: #6A6AEA;
font-size: 1.625rem;
padding-bottom: 8px;
margin-bottom: 15px;
border-bottom: 1px solid rgba(153, 153, 153, .5);
font-weight: 600;
}
.case-intro-box i {
margin-right: 0.5rem;
}
.case-intro-box .side-content {
font-size: 125%;
font-weight: 600;
line-height: 225%;
color: #333;
padding: 5px;
border-bottom: 1px solid rgba(153, 153, 153, .5);
}
.case-intro-box .side-content span {
font-size: 90%;
color: #8282E8;
margin-right: 1rem;
}
.case-intro-box .side-content .detail {
font-size: 80%;
font-weight: 500;
line-height: 175%;
}
.btn-purple.case {
color: #FFF !important;
background-color: #8282E8;
width: 80%;
padding: 2px;
}
.btn-purple.case:hover {
color: var(--main-purple-color) !important;
}
#back.btn-purple.case {
max-width: 240px;
}
.case-content-block {
font-size: 125%;
font-weight: 500;
color: #333;
}
.case-front-block {
font-size: 131.25%;
color: #000;
font-weight: 600;
padding-bottom: 3rem;
margin-bottom: 3rem;
border-bottom: 1px solid rgba(153, 153, 153, .5);
}
.case-content-block img {
display: block;
max-width: 100%;
height: auto;
border-style: none;
vertical-align: middle;
margin: 1rem auto 0.5rem;
}
.case-notice-box {
padding: 2.5rem 25px;
background-color: rgba(240, 238, 255, .5);
color: #444;
margin: 3.5rem 5px;
border-radius: 5px;
}
.case-notice-box img {
max-width: 100%;
margin: 15px auto;
border-radius: 15px;
box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .1);
}
.case-keyword-box {
padding: 1.5rem 1.5rem 4rem;
}
.case-keyword-box a {
padding: 4px 25px;
border-radius: 30px;
font-weight: 600;
border: 1px solid #6A6AEA;
margin: 5px;
color: #666;
background-color: #FFF;
white-space: nowrap;
transition: all .5s;
}
.case-keyword-box a:hover {
border: 1px solid #999999;
color: #FFF;
background-color: #6A6AEA;
}
/*文章案例*/
.case-info-line {
padding-top: 10px;
font-size: 110%;
color: #333;
display: flex;
justify-content: space-between;
line-height: 100%;
}
.case-info-line a {
border-bottom: 1px solid #007bff;
}
.case-info-line a:hover {
color: #6A6AEA;
border-bottom: 0;
}
.case-info-line i {
margin-right: 0.24rem;
color: #6A6AEA;
}
.case-info-line div {
width: fit-content;
padding: 0 5px;
}
.case-article-box {
margin: 0 5px;
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 0 6px 0 #00000030;
}
.case-article-box img {
max-width: 100%;
height: auto;
}
.case-article-box > .pic-intro {
position: absolute;
left: 0;
bottom: 10%;
width: 100%;
max-width: 600px;
font-size: 125%;
font-weight: 600;
color: #FFF;
padding: 5px 15px;
background-color: rgba(0, 0, 0, .7);
}
/*推薦*/
.course-box.case-article.side {
padding-bottom: 0.5rem;
border-bottom: 1px dashed rgba(153, 153, 153, .5);
margin-bottom: 0.5rem;
}
.course-box.case-article.side .title {
height: auto; /*設定資料高度*/
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3; /*設定資料顯示行數*/
}
.course-box.case-article.side .speaker {
height: auto; /*設定資料高度*/
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 1; /*設定資料顯示行數*/
}
.course-box.case-article.side .content {
padding: 10px 0 0;
height: auto;
}
/***************************************************************************/
/*開課合作單位主題專區*/
/***************************************************************************/
.title-co-area {
position: relative;
padding: 10px;
}
.co-banner-area {
position: relative;
}
.co-banner-box {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
padding-bottom: 36%;
margin: 15px 25px;
box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, .15);
border-radius: 20px;
}
/**開課合作專區:banner slick區**/
.co_banner_prev, .co_banner_next {
cursor: pointer;
position: absolute;
top: calc(50% - 17px);
z-index: 4;
border: 0;
background-color: transparent;
opacity: .9;
transition: all .5s;
}
.co_banner_prev:hover, .co_banner_next:hover {
transform: scale(1.2);
}
.co_banner_prev {
left: 18%;
}
.co_banner_next {
right: 18%;
}
.co_banner_prev > img, .co_banner_next > img {
width: 35px;
}
.co-logo-area {
padding: 100px 0;
}
/**主Banner區的slick 前後兩項縮小*********/
.slick_co_banner .slick-slide {
transform: scale(0.95);
opacity: 0.3;
border-collapse: collapse;
}
.slick_co_banner .slick-current {
transform: scale(1);
opacity: 1;
}
/**開課合作單位專區:搜尋**/
.co-search {
display: flex;
align-items: center;
margin-left: auto;
margin-right: auto;
width: calc(60% - 50px);
padding: 10px;
border-radius: 15px;
background-color: rgba(185, 178, 255, .5);
}
.co-search .search-input-group {
flex: 0 1 99%;
}
.co-search .filter {
flex: 0 0 auto;
padding-left: 10px;
}
.co-search .input-group input {
font-size: 120%;
line-height: 175%;
height: 46px;
}
.co-search .input-group button {
font-size: 135%;
color: #333;
width: 46px;
height: 46px;
}
.co-search .input-group button:hover {
color: #FFF;
}
/*搜尋結果專頁使用*/
.co-search.result {
max-width: 1100px;
width: 100%;
}
.no-result-box { /*無搜尋結果*/
font-weight: 600;
font-size: 1.25rem;
color: #999;
max-height: 250px;
height: 40vw;
max-width: 1100px;
width: 95%;
margin-left: auto;
margin-right: auto;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid rgba(185, 178, 255, .3);
background-color: rgba(185, 178, 255, .15);
margin-bottom: 3rem;
}
.co-filter-btn {
font-size: 125%;
background-color: #F38F1E;
border: 1px solid #A46301;
border-radius: 5px;
color: #FFF;
padding: 8px 10px;
text-shadow: 1px 1px 2px #00000050;
transition: all .5s;
}
.co-filter-btn i {
margin-right: 0.25rem;
}
.co-filter-btn:hover, .filter-btn:focus {
color: #000;
}
.co-filter-btn.dropdown-toggle::after {
display: none;
}
.co-filter-dropdown {
padding: 15px 25px;
background-color: #FFF;
max-width: 825px; /*注意RWD情形*/
width: 98%; /*注意RWD情形*/
border-radius: 20px;
}
.co-filter-dropdown .title {
font-size: 140%;
font-weight: 600;
color: #333;
border-bottom: 1px solid #CCCCCC;
margin-bottom: 15px;
}
.co-filter-dropdown .title i {
color: var(--main-purple-color);
margin-right: 10px;
line-height: 200%;
}
.filter-item-list .rh {
display: flex;
justify-content: center;
align-items: center;
}
.filter-item-list .rh.totop {
align-items: flex-start;
}
.filter-item-list hr {
border: none;
background-color: #555;
height: 1px;
max-width: 587px;
width: 95%;
margin-left: auto;
margin-right: auto;
}
.btn-filter-check {
font-size: 1em;
font-weight: 600;
color: #999999;
padding: 5px 8px;
margin-right: 6px;
border-radius: 5px;
border: 1px solid #999999;
transition: all .5s ease;
}
.btn-check + .btn.btn-filter-check:hover {
color: #FFF;
background-color: #F38F1E;
border-color: #A46301;
}
.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
color: #FFF;
background-color: #F38F1E;
border-color: #A46301;
}
.date-start-end-select {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.date-start-end-select input {
width: fit-content;
}
.date-start-end-select span {
padding: 0 5px;
}
label.county-regon {
color: #555555;
text-align: center;
padding: 6px 8px;
background-color: #E8F1FB;
margin-right: 10px;
white-space: nowrap;
}
.purple-outline-btn {
color: #333;
background-color: #FFF;
border-radius: 6px;
border: 1px solid var(--main-purple-color);
padding: 6px 15px;
font-weight: 600;
transition: all .5s;
}
.purple-outline-btn:hover {
color: #FFF;
background-color: var(--main-purple-color);
border: 1px solid var(--main-purple-color);
}
/*合作開課單位:LOGO輪播區*/
.co-units-block {
position: relative;
padding: 20px 0;
}
.unit-logo-box {
margin: 15px auto;
max-width: 115px;
width: 100%;
}
.unit-logo-box .logo {
width: 115px;
height: 115px;
border-radius: 50%;
border: 1px solid rgba(153, 153, 153, .2);
box-shadow: 1px 1px 3px rgba(0, 0, 0, .15);
background-size: 80%;
background-repeat: no-repeat;
background-position: center center;
background-color: #FFF;
}
.unit-logo-box .title {
font-size: 87.5%;
color: #555555;
text-align: center;
padding: 10px 0;
height: 50px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/**開課合作專區:LOGO slick區**/
.co_logo_prev, .co_logo_next {
cursor: pointer;
position: absolute;
top: 30%;
z-index: 15;
border: 0;
background-color: transparent;
opacity: .9;
transition: all .5s;
}
.co_logo_prev:hover, .co_logo_next:hover {
transform: scale(1.2);
}
.co_logo_prev {
left: -2rem;
}
.co_logo_next {
right: -2rem;
}
.co_logo_prev > img, .co_logo_next > img {
width: 30px;
}
/*新版LOGO排排站*/
#logos-block {
border: 1px solid #EDEDED;
background-color: #EDEDED;
border-radius: 15px;
overflow: hidden;
max-height: calc(2 * (90px + 56px + 16px) + 16px); /* 預設兩排的高度 */
transition: max-height 0.5s ease;
}
#logos-block.expanded {
max-height: 3500px; /* 設置為足夠大的高度，確保能容納所有內容 */
}
#logos-block-container {
position: relative;
}
#logos-block-container::after {
content: "";
display: block;
height: 16px;
background: linear-gradient(to top, rgba(242, 242, 242, 1), rgba(242, 242, 242, 0));
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
pointer-events: none;
}
#logos-block.expanded + .text-end::after {
display: none; /* 展開時隱藏漸變 */
}
.co-units-logo-group {
position: relative;
display: flex;
flex-wrap: wrap;
}
.co-units-logo-group a {
flex: 0 0 20%;
}
.co-unit-item {
border-radius: 10px;
margin: 8px;
background-color: #FFF;
overflow: hidden;
}
.co-unit-item .logo {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
box-shadow: 0 2px 5px 0 #00000010;
height: 90px;
}
.co-unit-item .logo img {
max-width: 150px;
max-height: 75px;
}
.co-unit-item .name {
font-size: 1.125rem;
padding: 8px;
height: 70px;
text-align: center;
line-height: 140%;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
align-content: center;
}
.logos-more {
padding: 10px;
border-top: 1px solid #7E71FF50;
text-align: right;
display: flex;
justify-content: space-between;
align-items: center;
}
.logos-more > div {
padding: 0.25rem;
}
.more-logo-btn {
padding: 5px 10px;
border-radius: 5px;
border: 1px solid var(--main-purple-color);
color: var(--main-purple-color);
font-size: 110%;
font-weight: 600;
}
/*更多more*/
.co_more-link {
margin-right: 0.5rem;
font-weight: 600;
color: #4337CE;
}
.co_more-link i {
margin-left: 0.25rem;
font-size: 110%;
}
/*合作單位熱門&最新課程區*/
.co-class-area {
padding: 40px 0;
background-color: #f2f2f2;
}
.title-underline {
border-bottom: 1px solid #CCC;
padding-bottom: 0.25rem;
margin-bottom: 0.75rem;
}
.list-type-btn {
font-size: 130%;
background-color: #FFF;
color: #555;
border-radius: 5px;
padding: 6px 5px 4px;
line-height: 100%;
border: 1px solid #DDDDDD;
transition: all .5s;
}
.list-type-btn.active, .list-type-btn:hover, .list-type-btn:focus {
background-color: #CCCCFF;
}
.course-box.co.co-hot {
padding: 15px;
}
.course-box.co {
padding: 10px;
}
.course-box.co .content {
height: auto;
}
/*橫式課程列表!!*/
.course-box.list {
display: flex !important;
flex-direction: row !important;
align-items: center;
}
.course-box.co.list {
padding: 0 15px;
}
.course-box.co.list .photo {
padding-bottom: 55%;
}
.course-box.list > a {
flex: 0 0 300px;
margin-right: 15px;
}
.course-box.list > .detail {
flex: 1 0 calc(100% - 325px);
margin-right: 15px;
}
.course-box.co.list .content {
padding: 0;
height: auto;
}
.course-box.co.list .title {
font-size: 1.25rem;
height: auto;
margin-bottom: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 1;
}
.course-box.list .footer-up {
color: #888;
font-size: .875rem;
display: flex;
justify-content: flex-start;
align-items: center;
}
.course-box.list .footer-up > div {
margin-right: 1rem;
}
.course-box.co.list .speaker {
color: #000;
font-size: 1rem;
font-weight: 600;
height: auto;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.course-box.co.list .intro {
color: #666;
font-size: 0.875rem;
height: 42px;
margin-bottom: 0;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/*新增數位-實體課程標示*/
.course-box .type {
width: fit-content;
font-size: 1rem;
font-weight: 600;
color: #FFF;
background-color: #F38F1E;
padding: 1px 10px;
border-radius: 4px;
letter-spacing: 0;
white-space: nowrap;
margin-bottom: 5px;
}
.course-box .type.class {
background-color: #00BBBC;
}
.course-box.co .title {
font-size: 1.5rem;
height: 64px;
margin-bottom: 0.5rem;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
}
.course-box.co .intro {
color: #666;
font-size: 1rem;
height: 46px;
margin-bottom: 0.5rem;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.course-box.co .intro-long {
color: #666;
height: 92px;
font-size: 1rem;
margin-bottom: 10px;
}
.course-box.co .speaker {
color: #666;
font-size: 1.125rem;
font-weight: 600;
height: 50px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.course-box.co .speaker2 {
color: #000;
font-size: 1rem;
font-weight: 600;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
/**開課合作專區:熱門課程 slick區**/
.co_hot_prev, .co_hot_next {
cursor: pointer;
position: absolute;
top: 45%;
z-index: 15;
border: 0;
background-color: transparent;
opacity: .9;
transition: all .5s;
}
.co_hot_prev:hover, .co_hot_next:hover {
transform: scale(1.2);
}
.co_hot_prev {
left: -35px;
}
.co_hot_next {
right: -35px;
}
.co_hot_prev > img, .co_hot_next > img {
width: 30px;
}
/**開課合作專區:最新課程 slick區**/
.co_new_prev, .co_new_next {
cursor: pointer;
position: absolute;
top: 45%;
z-index: 15;
border: 0;
background-color: transparent;
opacity: .9;
transition: all .5s;
}
.co_new_prev:hover, .co_new_next:hover {
transform: scale(1.2);
}
.co_new_prev {
left: -35px;
}
.co_new_next {
right: -35px;
}
.co_new_prev > img, .co_new_next > img {
width: 30px;
}
/*開課合作專區:課程地圖*/
.co-course-map {
padding: 100px 15px;
}
.co-map-list {
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center left;
}
.co-map-list .title {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-weight: 900;
font-size: 275%;
color: #FFF;
text-shadow: 0 1px 4px rgba(0, 0, 0, .65);
letter-spacing: 0.5rem;
line-height: 150%;
}
.co-map-list .title span {
font-size: 50%;
letter-spacing: 0.125rem;
}
.co-map-block {
margin: 6% 5px;
padding: 25px;
padding-left: 40px;
background-color: #C1BCF4;
border-radius: 75px 20px 20px 75px;
}
.co-map-item {
display: flex;
font-size: 125%;
color: #555;
font-weight: 600;
align-items: center;
justify-content: center;
margin: 20px 10px;
padding: 2px;
padding-right: 10px;
border: 2px solid #8282E8;
border-radius: 10px;
background-color: #FFF;
transition: all .5s;
}
.co-map-item:hover {
transform: scale(1.1);
}
.co-map-item img {
width: 75px;
margin-right: 10px;
}
/*開課合作單位:公版教材*/
.public-textbook-area {
padding: 100px 0;
}
.public-textbook-block {
padding: 0 20px;
display: flex;
align-items: center;
}
.public-textbook-block > div {
padding: 10px;
}
.public-textbook-industry-tag {
flex: 0 0 95px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.public-textbook-industry-tag .tag {
position: relative;
background-color: rgb(217, 215, 245);
color: #000;
font-size: 125%;
font-weight: 600;
text-align: center;
padding: 2px;
height: 34px;
margin: 20px 0;
}
.public-textbook-industry-tag .tag::after {
position: absolute;
content: "";
right: -10px;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 17px 0 17px 10px;
border-color: transparent transparent transparent rgb(217, 215, 245);
}
.public-textbook-industry-menu {
flex: 1 1 99%;
}
.public-textbook-box {
padding: 25px 35px;
border: 1px solid #A69EFF;
border-radius: 12px;
margin: 15px;
transition: all .5s;
}
.public-textbook-box:hover {
background-color: #eaeaff;
transform: scale(1.02);
}
.public-textbook-box .title {
font-size: 250%;
color: #333;
text-align: center;
font-weight: 600;
letter-spacing: 0.25rem;
border-bottom: 1px solid var(--main-purple-color);
}
.public-textbook-box .title img {
width: 90px;
}
.public-textbook-box .number {
display: flex;
align-items: center;
justify-content: center;
font-size: 350%;
color: var(--main-purple-color);
text-align: center;
font-weight: 500;
font-family: poppins;
}
.public-textbook-box .number span {
font-size: 20%;
color: #FFF;
background-color: #6935D6;
text-align: center;
font-weight: 500;
padding: 2px 10px;
border-radius: 4px;
margin: 0 25px;
}
.public-textbook-box.no .number {
color: #CCCCCC;
}
.public-textbook-box.no .number span {
background-color: #CCCCCC;
}
/*開課合作單位:Modal 視窗*/
.textbook-modal .modal-content {
border-radius: 20px;
border: 0;
}
.textbook-modal .modal-header {
background-color: var(--main-purple-color);
border-radius: 18px 18px 0 0;
padding: 12px 20px;
}
.textbook-modal .modal-title {
color: #FFF;
font-size: 175%;
font-weight: 600;
}
.textbook-modal .modal-title i {
margin-right: 0.25rem;
}
.textbook-modal .btn-close {
background-size: cover;
background-image: url(../images/icon/btn-closed-white.svg);
margin: 0.125rem;
color: #FFF;
}
.textbook-modal .modal-body {
padding: 20px 10px 40px;
}
.modal-textboox-box {
display: flex;
align-items: center;
}
.modal-textboox-box .photo {
flex: 0 0 25%;
padding: 15px;
align-items: center;
justify-content: center;
}
.textboox-industy-list {
flex: 1 0 70%;
border-top: 2px solid #4337CE;
border-bottom: 1px solid #4337CE;
}
.textboox-industy-list .th {
background-color: rgba(185, 178, 255, .2);
font-size: 1.875em;
font-weight: 600;
border-bottom: 1px solid #4337CE;
padding: 10px 15px;
display: flex;
justify-content: space-between;
}
.textboox-industy-list .th i {
margin-right: 0.5rem;
}
.textboox-industy-list .count {
width: 100px;
text-align: center;
font-weight: 500;
font-size: 85%;
}
.textboox-industy-list .td {
font-size: 1.5em;
font-weight: 600;
border-bottom: 1px solid #4337CE;
padding: 10px 15px;
padding-left: 3rem;
display: flex;
justify-content: space-between;
}
.textboox-industy-list .td:nth-child(odd) {
background-color: rgba(185, 178, 255, .1);
}
.textboox-industy-list a {
color: #0347AC;
}
.textboox-industy-list .td a:before {
content: "－";
font-weight: 600;
color: #0347AC;
}
.textboox-industy-list a:hover {
color: #6935D6;
}
/*開課合作專區:下方LOGO群*/
.col-lg-logo {
-ms-flex: 0 0 12.5%;
flex: 0 0 12.5%;
max-width: 12.5%;
min-height: 1px;
}
/*加入開課合作單位按鈕*/
.fixed-join-btn {
width: 120px;
height: 120px;
position: fixed;
right: -5px;
bottom: 90px;
z-index: 100;
transition: all .5s;
}
.fixed-join-btn:hover {
transform: scale(1.1);
}
.test-icon {
border-radius: 50%;
position: fixed;
width: 65px;
height: 65px;
background-color: #EEEEEE40;
box-shadow: 1px 3px 4px 2px #cccccc;
cursor: pointer;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-webkit-user-drag: element;
-ms-user-select: none;
cursor: pointer;
right: 20px;
bottom: 20px;
}
/*加入合作開課單位說明頁*/
.co-intro-area {
background-color: #FFF;
background-size: auto;
background-repeat: no-repeat;
background-position: left top;
background-image: url(../images/co_unit_zone/bg_intro-area.png);
font-weight: 600;
}
.co-intro-area .breadcrumbs-link-block {
width: fit-content;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
}
.co-intro-title {
color: #803CEE;
font-size: 237.5%;
text-align: center;
width: fit-content;
margin: 2rem auto;
}
.co-intro-content {
font-size: 125%;
line-height: 175%;
color: #333;
}
.co-intro-box {
color: #333;
text-align: center;
font-size: 137.5%;
}
.co-qualify-block {
background-color: rgba(240, 238, 255, .5);
padding: 25px;
border-radius: 20px;
font-size: 125%;
}
.co-qualify-block .title {
padding: 5px 25px;
margin-right: 1rem;
background: linear-gradient(to right, #34AFB7, #6F4BFF);
color: #FFF;
text-shadow: 1px 1px 3px #00000080;
border-radius: 10px;
}
.co-attach-box {
color: #000;
font-size: 80%;
text-align: center;
padding: 10px;
}
.co-attach-set {
background-color: rgba(240, 238, 255, .5);
padding: 20px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin: 15px;
}
.co-attach-group {
font-size: 125%;
color: #000;
text-align: center;
}
.co-attach-signal { /*提供+ 跟 or 使用*/
display: flex;
justify-content: center;
align-items: center;
}
.co-intro-content li:before {
margin-left: -1.5rem;
padding-right: 0.25rem;
content: "■";
font-size: 180%;
color: #6935D6;
}
.co-apply-area {
padding: 50px 0 150px;
background-color: #FFF;
background-size: auto;
background-repeat: no-repeat;
background-position: right bottom;
background-image: url(../images/co_unit_zone/bg_reg-rb.png);
font-weight: 600;
}
.co-apply-box {
background-color: #F0EEFF;
border: 1px solid #E1E8F0;
padding: 25px;
border-radius: 12px;
box-shadow: 5px 5px 0 0 rgba(0, 0, 0, .2);
}
.co-apply-box .type-title {
color: #4337CE;
}
.apply-fill-block {
width: 95%;
margin-right: auto;
margin-left: auto;
}
.co-apply-box label {
font-size: 1.125rem;
}
.apply-fill-block > div {
padding: 15px;
}
.notice-red {
color: #DC3545;
font-size: 95%;
padding: 5px 0;
}
.apply-fill-block hr {
border-color: #333;
}
.btn-purple {
display: block;
background-color: var(--main-purple-color);
border: 1px solid var(--main-purple-color);
border-radius: 6px;
text-align: center;
color: #FFF;
font-size: 1.25rem;
padding: 8px 5px;
width: 100%;
transition: all .5s;
font-weight: 600;
}
.btn-purple:hover {
background-color: #FFF;
border: 1px solid var(--main-purple-color);
color: var(--main-purple-color);
}
/*開課合作專區：單位首頁*/
.title-co-index-area {
position: relative;
background-image: url(../images/co_unit_zone/bg_co-index.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 10px;
}
.co-index-title {
font-weight: 600;
color: #000;
display: flex;
align-items: center;
padding: 25px 0;
}
.co-index-title-logo {
width: 115px;
height: 115px;
border-radius: 115px;
border: 1px solid rgba(153, 153, 153, .2);
box-shadow: 1px 1px 3px rgba(0, 0, 0, .15);
background-size: 80%;
background-repeat: no-repeat;
background-position: center center;
background-color: #FFF;
}
.p30-block {
padding: 30px 0;
}
.p50-block {
padding: 50px 0;
}
.co-index-title .co-title {
padding-left: 1rem;
padding-right: 1rem;
font-size: 2rem;
color: #555;
flex: 0 0 calc(100% - 115px);
}
.co-index-banner-block {
padding: 30px 0 80px;
}
.co-index-banner {
padding: 20px;
background-color: #FFF;
border: 1px solid #CCCCCC;
border-radius: 10px;
display: flex;
}
.co-index-banner .photo {
flex: 0 0 30%;
height: 225px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.co-index-banner .content {
padding-left: 1.5rem;
padding-right: 15px;
font-weight: 600;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.co-index-banner .content .title {
color: #333;
font-size: 1.625rem;
height: 72px;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
}
.co-index-banner .content .date {
color: #999;
font-size: 1.25rem;
font-weight: 400;
}
.co-index-banner .content .intro {
color: #666;
font-size: 1rem;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3;
margin-bottom: 10px;
}
.co-index-banner .content .detail {
text-align: right;
}
.co-banner-btn-more {
padding: 5px 15px;
border: 1px solid #999;
border-radius: 5px;
letter-spacing: 2px;
text-align: center;
background-color: #FFF;
color: #999;
transition: all .4s;
}
.co-banner-btn-more:hover {
border: 1px solid var(--main-purple-color);
background-color: var(--main-purple-color);
color: #FFF;
}
.search-input-group.tab-search {
display: flex;
align-items: center;
}
.search-input-group.tab-search div {
margin: 0 5px;
}
/*單位首頁:課綱下載*/
.syllabus-box {
border: 1px solid #CCC;
display: flex;
align-items: center;
border-radius: 15px;
background-color: #FFF;
margin: 15px;
}
.syllabus-box .photo {
padding: 10px;
flex: 0 0 25%;
display: flex;
justify-content: center;
align-items: center;
color: #333333;
font-size: 2.5rem;
border-radius: 15px 0 0 15px;
background-color: rgba(204, 204, 255, .3);
}
.syllabus-box .link {
flex: 0 0 75%;
padding: 10px;
overflow: hidden;
word-wrap: break-word;
}
.syllabus-box .link > a {
display: block;
position: relative;
width: 90%;
font-size: 1.625rem;
font-weight: 600;
color: #4337CE;
word-wrap: break-word;
}
.syllabus-box .dropdown-toggle {
white-space: pre-wrap;
}
.syllabus-box .dropdown-toggle::after {
display: inline-block;
position: absolute;
border-top: 0.5em solid #CCCCCC;
border-right: 0.4em solid transparent;
border-bottom: 0;
border-left: 0.4em solid transparent;
right: -10%;
top: calc(50% - 0.25em);
}
.syllabus-dropdown {
padding: 5px 10px;
border-radius: 10px;
font-size: 1.25rem;
}
.syllabus-dropdown a {
color: #333 !important;
}
.syllabus-dropdown a:hover {
color: #4337CE !important;
}
.syllabus-dropdown > .tr {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
border-bottom: 1px dotted #888;
}
.syllabus-dropdown > .tr:last-child {
border-bottom: 0;
}
.syllabus-dropdown .tr i {
margin-left: 1rem;
}
.unit-index-textbook-box {
border: 1px solid #CCCCCC;
border-radius: 12px;
background-color: #FFF;
padding: 15px;
transition: all .5s;
margin: 10px;
}
.unit-index-textbook-box:hover {
transform: scale(1.05);
border: 1px solid #4337CE;
}
.unit-index-textbook-box .head {
display: flex;
align-items: center;
padding: 10px;
}
.unit-index-textbook-box .head .photo {
flex: 0 0 auto;
}
.unit-index-textbook-box .head .photo i {
font-size: 200%;
}
.unit-index-textbook-box .head .title {
flex: 1 1 90%;
color: #333;
font-size: 1.75rem;
font-weight: 600;
padding-left: 1rem;
}
.unit-index-textbook-box .head .title span {
color: #333;
font-size: 1.25rem;
font-weight: 500;
height: 65px; /*設定資料高度*/
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2; /*設定資料顯示行數*/
}
.unit-index-textbook-box .content {
padding-top: 10px;
}
.unit-index-textbook-box .content .title {
color: #333;
font-size: 1.25rem;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
font-weight: 600;
height: 60px;
margin-bottom: 5px;
}
.unit-index-textbook-box .content .intro {
color: #333;
font-size: 1rem;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 4;
height: 96px;
margin-bottom: 10px;
}
.unit-index-textbook-box .content .unit {
color: #000;
font-size: 1rem;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
font-weight: 600;
height: 48px;
}
.co-unit-intro-box {
height: 100%;
padding: 25px;
margin: 15px;
background-color: #FFF;
border-radius: 12px;
border: 1px solid #E1E8F0;
}
.co-unit-intro-box .stitle {
color: #4337CE;
font-size: 1.625rem;
padding-bottom: 5px;
border-bottom: 1px solid #E1E8F0;
font-weight: 600;
}
.co-unit-intro-box .stitle i {
margin-right: 0.25rem;
}
.co-unit-intro-box .unit-title {
font-size: 1.5rem;
color: #444444;
font-weight: 600;
}
.co-unit-intro-box .content {
font-weight: 600;
font-size: 1.125rem;
line-height: 1.75;
color: #666666;
}
/*尋找心儀課程搜尋排版用*/
.co-unit-intro-box .col-lg-auto {
min-width: 25px !important;
}
/*公版教材*/
.public-textbook-title {
font-size: 2rem;
color: #000;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid #E1E8F0;
margin-bottom: 1.5rem;
}
.textbook-info-box {
display: flex;
align-items: center;
padding: 10px 0;
}
.textbook-info-box .photo {
flex: 0 0 70px;
width: 70px;
height: 70px;
font-size: 2.5rem;
color: #4337CE;
padding: 5px;
border-radius: 50%;
background-color: rgba(204, 204, 255, .4);
display: flex;
align-items: center;
justify-content: center;
}
.textbook-info-box .content {
padding: 10px;
font-size: 1.375rem;
font-weight: 600;
color: #333;
line-height: 120%;
}
.textbook-info-box .content span {
display: block;
font-size: 1rem;
font-weight: 500;
color: #4337CE;
}
.course-intro-content.strong {
font-weight: 600;
}
.textbook-update-block {
background-color: rgba(240, 238, 255, .5);
padding: 10px;
border-radius: 10px;
font-weight: 500;
}
.textbook-update-block span {
color: #4337CE;
}
.textbook-update-block i {
color: #4337CE;
margin-right: 0.5rem;
}
/*實體課程 + 數位課程內頁*/
.title-class-area {
position: relative;
background-color: rgba(29, 10, 255, .1);
padding: 10px 0 25px;
}
.title-class-area > .cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 10px;
z-index: 2;
filter: blur(5px);
opacity: .1;
}
.class-header {
position: relative;
margin: 20px 0;
z-index: 3;
}
.class-header .photo {
width: 95%;
padding-bottom: 52.5%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-radius: 20px;
box-shadow: 1px 1px 10px 0 #00000030;
}
.class-header .summary {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
color: #000;
}
.class-header .summary div {
line-height: 150%;
}
.class-header .summary i {
margin-right: 5px;
}
.class-header .summary .star {
display: flex;
margin: 0 5px;
margin-bottom: 10px;
}
.class-header .summary .star div {
padding-right: 20px;
}
.class-header .summary .tag span {
margin-right: 0.5rem;
}
.class-header .summary .title {
font-size: 200%;
font-weight: 600;
margin-bottom: 15px;
margin-top: 15px;
color: #333;
}
.class-header .summary .date-place, .co-unit-intro-box .class-content .date-place {
padding: 5px 0;
color: #666;
font-size: 1.25rem;
font-weight: 600;
text-indent: -0.7rem;
margin-left: 1.5rem;
}
.class-header .summary .btn-group {
min-width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 1rem;
text-align: center;
display: flex;
justify-content: center;
}
.class-header .summary .btn-group a {
font-weight: 600;
font-size: 1.5rem;
letter-spacing: 1px;
text-align: center;
color: #FFF;
background-color: #00BBBC;
border-radius: 25px;
margin: 10px;
padding: 8px;
border: 1px solid #00BBBC;
width: 90%;
transition: all .5s;
}
.class-header .summary .btn-group a:hover {
color: #FFF;
border: 1px solid #4337CE;
background-color: #4337CE;
}
.class-header .summary .btn-group a.disable {
color: #999;
border: 1px solid #999;
background-color: #EEE;
cursor: ;
}
.tag-type-class, .tag-type-online, .tag-type-free {
color: #FFF;
letter-spacing: 1px;
font-size: 1.25rem;
font-weight: 600;
padding: 2px 10px;
border-radius: 5px;
background-color: #EEEEEE;
}
.tag-type-class {
background-color: #00BBBC;
}
.tag-type-online {
background-color: #F38F1E;
}
.tag-type-free {
background-color: var(--main-purple-color);
}
.course-content-intro {
background-color: #F9F9F9;
font-weight: 600;
}
.course-content-intro .co-unit-intro-box {
position: relative;
height: auto;
}
.info-block {
font-size: 1.25rem;
color: #333;
padding: 15px 25px;
line-height: 200%;
font-weight: 600;
}
.info-block img {
width: 30px;
margin-right: 0.5rem;
}
.course-intro-content {
padding: 25px;
font-size: 1.25rem;
line-height: 175%;
color: #666;
}
.sticky-notice {
position: sticky !important;
top: 95px;
z-index: 3;
}
.sticky-notice.class {
position: sticky !important;
top: 155px;
z-index: 3;
}
.speaker-intro-box {
display: flex;
padding: 15px;
align-items: center;
}
.speaker-intro-box.class {
padding: 0;
}
.speaker-intro-box .photo {
flex: 0 0 165px;
width: 165px;
height: 165px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 50%;
box-shadow: -10px 10px 0 0 rgba(204, 204, 255, .6);
}
.speaker-intro-box .content {
padding: 15px;
}
.speaker-intro-box .content .name {
color: #333;
font-size: 1.5rem;
font-weight: 600;
line-height: 150%;
padding: 5px 0;
}
.speaker-intro-box .content .name span {
font-size: 85%;
margin-left: 0.25rem;
}
.speaker-intro-box .content .intro {
color: #666;
font-size: 1.2rem;
}
.speaker-intro-box .content .intro-s {
color: #666;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.75;
}
/*數位課程內頁補充*/
.class-header.login { /*登入後的class-header*/
position: relative;
margin: 0 0 20px;
}
.class-header .summary .title.class { /*登入前的標題*/
font-size: 1.75rem;
}
.class-header.login .summary .title.class { /*登入後的標題*/
font-size: 1.75rem;
margin-top: 10px;
margin-bottom: 5px;
}
.class-header .summary .speaker {
font-size: 1.25rem;
color: #333333;
}
.class-header.login .summary .speaker { /*登入後的講師*/
font-size: 1rem;
color: #666666;
margin-bottom: 10px;
}
.class-header .summary .date-group {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.class-header .summary .date-group div {
width: fit-content;
}
.class-header .summary .score-group, .co-unit-intro-box .score-group {
display: flex;
align-items: center;
}
.class-header .summary .score-group > .star, .co-unit-intro-box .score-group .star {
display: flex;
align-items: center;
margin-bottom: 0;
padding: 0 3px;
}
.class-header .summary .score-group > .star img, .co-unit-intro-box .score-group .star img {
width: 14px;
margin-right: 2px;
}
.class-header .summary .btn-group {}
.class-info-btn {
padding: 2px 20px;
border: 1px solid #666666;
color: #666666;
font-size: 1rem;
margin-left: 0;
margin-right: 1rem;
background-color: transparent;
letter-spacing: 2px;
transition: all .5s;
}
.class-info-btn.active, .class-info-btn:hover {
border: 1px solid var(--main-purple-color);
color: #FFF;
background-color: var(--main-purple-color);
}
.btn-class-group {
width: 100%;
display: flex;
align-items: center;
margin: 15px 0;
padding-bottom: 25px;
border-bottom: 1px solid #99999970;
}
.btn-fun {
flex: 1 1 50%;
}
.btn-select {
flex: 1 1 50%;
}
.btn-select-course {
text-align: center;
color: #FFF;
font-size: 1.25rem;
letter-spacing: 3px;
font-weight: 600;
background-color: #756AF4;
border: 1px solid #756AF4;
display: block;
width: 100%;
padding: 5px;
border-radius: 10px;
}
.btn-select-course:hover {
color: #756AF4;
background-color: transparent;
border: 1px solid #756AF4;
}
.hashtag-class-group {
font-size: 1rem;
}
.hashtag-class-group > a {
color: #666;
white-space: nowrap;
margin-right: 15px;
}
.hashtag-class-group > a:hover {
color: #4337CE;
background-color: #EEE;
}
/*數位課程內容-課程資訊*/
.class-fun-group {
background-color: #FFF;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
display: flex;
align-items: center;
padding: 0;
position: sticky !important;
top: 75px;
z-index: 5;
}
.class-fun-btns ul {
margin-bottom: 0;
padding-left: 0
}
.class-fun-btns li {
list-style: none;
display: inline-block;
}
.class-fun-itme {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 175px;
border-top: 4px solid #FFFFFF;
border-bottom: 4px solid #FFFFFF;
color: #888;
font-size: 1.25rem;
transition: all .5s;
}
.class-fun-itme:hover, .class-fun-itme.active {
border-top: 4px solid #4337CE04;
border-bottom: 4px solid #756AF4;
color: #4337CE;
font-weight: 600;
background-color: #4337CE08;
}
.class-accordion-box {
margin: 15px;
position: relative;
}
.class-accordion-tag {
position: absolute;
top: -135px;
}
.class-accordion-box .accordion-button {
color: #4337CE;
font-size: 1.625rem;
background-color: #F6F6FF;
font-weight: 600;
}
.class-accordion-box .accordion-button:not(.collapsed) {
color: #4337CE;
background-color: #F6F6FF;
}
.class-accordion-box .accordion-button i {
margin-right: 0.5rem;
}
.class-intro-content {
padding: 25px;
font-size: 1.25rem;
line-height: 1.75;
color: #555;
}
/*教材下載*/
.textboox-industy-list.download.class .th, .textboox-industy-list.download.class .td {
}
/*右方貼紙資訊*/
.co-unit-intro-box .class-title {
font-size: 1.5rem;
color: #444444;
font-weight: 600;
line-height: 1.75;
margin: 15px 0;
}
.co-unit-intro-box .class-content {
color: #555555;
font-size: 1.25rem;
line-height: 1;
font-weight: 500;
}
.co-unit-intro-box .class-content i {
margin-right: 0.5rem;
}
/*數位課程分享-Modal*/
.share-modal.modal {
--bs-modal-width: 362px;
border-radius: 20px;
overflow: hidden;
}
.share-modal .modal-title {
margin-left: auto;
margin-right: auto;
color: #666666;
font-size: 1.25rem;
letter-spacing: 0.25rem;
}
.share-modal .modal-header {
padding-bottom: 10px;
}
.share-modal .modal-header .btn-close {
position: absolute;
right: 15px;
top: 15px;
}
.share-modal .modal-body {
padding: 30px;
}
.modal-share-box {}
.modal-share-box .photo {
text-align: center;
}
.modal-share-box .photo img {
width: 55px;
transition: all .5s;
}
.modal-share-box .photo img:hover {
transform: scale(1.2);
}
.modal-share-box .note {
text-align: center;
margin-top: 15px;
color: #999999;
font-size: 0.75rem;
font-weight: 600;
}
/*登入後的課程影片區*/
.video-temp {
background-color: #000;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: #CCC;
letter-spacing: 2px;
font-weight: 500;
}
.unit-list-box {
background-color: #252F3B;
width: 100%;
height: 100%;
font-size: 1.375rem;
font-weight: 500;
line-height: 2;
color: #FFF;
}
.unit-list-box ul {
margin-bottom: 0;
padding-left: 0;
}
.unit-list-box a {
color: #FFF;
display: flex;
padding: 10px 15px;
height: 100%;
width: 100%;
transition: all .5s;
background-color: rgba(0, 0, 0, 0);
border-left: 5px solid transparent;
letter-spacing: 1px;
}
.unit-list-box a:hover, .unit-list-box a.active {
background-color: rgba(0, 0, 0, .3);
border-left: 5px solid #9363E6;
}
.unit-list-box li {
list-style: none;
border-bottom: 1px solid #000;
}
.unit-list-box .intro i {
margin-right: 0.75rem;
}
.unit-list-box li .no {
width: 24px;
}
.unit-list-box li .content span {
font-size: 1.125rem;
}
.unit-list-box li .content span i {
margin-right: 0.5rem;
}
.unit-list-box li .content .last-time {
color: #FFEE59;
}
/*借用公版教材下載*/
.textboox-industy-list.download .th {
font-size: 1.125rem;
font-weight: 600;
color: #4337CE;
border-top: 2px solid #4337CE;
}
.textboox-industy-list.download .td {
font-size: 1.25rem;
font-weight: 600;
color: #333;
padding: 10px 15px;
}
.textboox-industy-list.download .th .title, .textboox-industy-list.download .td .title {
flex: 0 0 55%;
}
.textboox-industy-list.download .th .data, .textboox-industy-list.download .td .data {
flex: 0 0 15%;
text-align: center;
}
.textboox-industy-list.download .th .no, .textboox-industy-list.download .td .no {
flex: 0 0 5%;
text-align: center;
}
.textboox-industy-list.download .th .datatime, .textboox-industy-list.download .td .datatime {
flex: 0 0 25%;
text-align: center;
}
.textboox-industy-list.download .td a:before {
display: none;
}
.textboox-industy-list.download .td a {
font-size: 1.6rem;
}
/*開課合作單位:課程地圖*/
.unit-title.co > img {
width: 60px;
}
.type-menu-list.all.co img {
width: 60px;
}
.type-menu-list.all.co li a {
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 1px;
padding: 5px 10px;
line-height: 150%;
margin: 6px;
border: 1px solid #DDDDDD;
}
.type-menu-list.all.co li a.active, .type-menu-list.all.co li a:hover {
border: 1px solid #DDDDDD;
background-color: rgba(200, 211, 255, .8);
color: #4337CE;
}
input.input-course-search.digital {
min-width: 300px;
}
/*開課單位註冊*/
.type1-edit-modal-wp .type1-edit-modal-block.small-modal.regist {
max-width: 920px;
width: 100%;
padding: 50px;
background-color: #F0EEFF;
border-top: 6px solid var(--main-purple-color);
}
/***************************************************************************/
/*30人以下數轉補助*/
/***************************************************************************/
.title-digital-index-area {
position: relative;
padding: 10px 10px 0;
background-color: #FFF;
}
.title-digital-area {
position: relative;
background-image: url(../images/digital_transform_zone/bg_digtial_transform.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 10px 10px 2rem;
}
.title-digital-tw-area {
position: relative;
padding: 10px 10px 0;
background-color: #FFF;
border-bottom: 6px solid #D1C8FC;
}
.digital-tw-title {
color: #A779E9;
font-weight: 600;
font-size: 200%;
margin-top: 3.5rem;
}
.digital-tw-title i {
margin-right: 0.5rem;
margin-left: 0.5rem;
}
.digital-tw-title img {
width: 40px;
vertical-align: middle;
margin-bottom: 8px;
}
.digital-intro {
margin-top: 1.5rem;
padding: 5px;
font-size: 125%;
font-weight: 600;
text-align: justify;
line-height: 175%;
color: #555;
}
/*AI六小時課程篩選按鈕*/
.type-menu-group.ai-6hr { /*一排幾個*/
margin-top: 1rem;
}
.type-menu-group.ai-6hr li { /*一排幾個*/
flex: 0 1 16.6%;
}
.type-menu-list.ai li a {
position: relative;
font-size: 1.125rem;
display: flex;
color: #333333;
text-align: center;
justify-content: center;
align-items: center;
font-weight: 600;
padding: 8px 10px;
text-align: center;
border-radius: 25px;
background-color: #FFF;
border: 1px solid #829FC0;
margin: 5px;
transition: all .5s;
box-shadow: 2px 3px 0 0 rgba(0, 0, 0, .1);
}
.type-menu-list.ai li a:hover, .type-menu-list.ai li a.active {
color: #1770DB;
border-radius: 25px;
background-color: #F4FDFF;
border: 1px solid #007BFF;
box-shadow: 2px 3px 0 0 rgba(0, 123, 255, .3);
}
/*心儀課程地點下移對齊左方*/
.filter-place {
margin-top: 3.25rem;
}
/*台灣地圖動畫區塊*/
/*首頁台灣區塊*/
.course-area.digital-tw {
background: linear-gradient(to right, #F8F4FF, #F8F4FF, #F8F4FF, #F0EEFB, #EAEAF9);
padding: 100px 0;
}
.index-taiwan-area {
position: relative;
}
.index-taiwan-block {
position: relative;
}
.btn-index-tw {
position: absolute;
font-size: 1.5em;
color: #fff;
padding: 5px 15px;
border-radius: 20px;
border: 1px solid #FFFFFF;
font-weight: 600;
letter-spacing: 0.25em;
width: 140px;
box-shadow: 2px 3px 0 0 rgba(0, 0, 0, .2);
transition: all .5s ease;
}
.btn-index-tw:hover {
transform: scale(1.1);
}
#btn-tn {
top: 13%;
left: 34%;
width: fit-content;
letter-spacing: 0;
background-color: #9363E6;
}
#btn-tc {
top: 35%;
left: 14%;
background-color: #758EFF;
}
#btn-ts {
top: 71%;
left: 7%;
background-color: #44CF9D;
}
#btn-te {
top: 57%;
left: 67%;
background-color: #AD7EEE;
}
#btn-ti {
top: 35%;
left: 0;
}
/*臺灣地圖右方說明*/
.index-taiwan-title {
padding: 10% 1rem 5%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.index-taiwan-title .title {
font-size: 200%;
font-weight: 600;
color: #A779E9;
}
.index-taiwan-title .notice {
padding-left: 3rem;
padding-right: 0.5rem;
font-size: 125%;
font-weight: 600;
color: #3E3A39;
}
.index-taiwan-title .title img {
width: 40px;
vertical-align: middle;
margin-bottom: 8px;
margin-right: 0.25rem;
}
.tw-search-btn {
max-width: 360px;
}
.tw-search-btn img {
transition: all .8s;
}
.tw-search-btn img:hover {
transform: scale(1.05);
}
/*臺灣地圖Model*/
.modal.tw {
--bs-modal-border-color: #2688a1;
--bs-modal-header-border-width: 1px;
--bs-modal-border-radius: 16px;
overflow: hidden;
--bs-modal-width: 320px;
}
.modal.tw .modal-dialog {
max-width: 360px;
margin-top: -2%;
margin-left: auto;
margin-right: calc(50vw - 550px);
}
.modal.tw .modal-content {
box-shadow: 10px 10px 0 0 #BEBEED50;
border-radius: 18px;
max-height: 75vh;
}
.modal.tw .modal-body {
padding: 0.5rem 1.5rem;
}
.modal.tw .modal-header {
background-color: #eea93a;
justify-content: center;
font-size: 2em;
font-weight: 600;
letter-spacing: 0.2em;
color: #fff;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
padding: 5px;
}
/*Modal視窗關閉按鈕*/
.modal.tw .btn-close {
width: 2rem;
height: 2rem;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: absolute;
right: 8px;
top: 10px;
opacity: 1;
z-index: 5;
}
.m-tw-list > a {
color: #4D4D4D;
display: block;
position: relative;
width: 100%;
list-style: none;
border: 0;
text-align: left;
background-color: #fff;
font-weight: 600;
border-bottom: 1px solid #c6c6c6;
padding: 8px 5px;
font-size: 1.4em;
letter-spacing: 0.5em;
transition: all .4s ease;
}
.m-tw-list > a:last-child {
border-bottom: none;
}
.m-tw-list > a::after {
position: absolute;
content: "";
width: 40px;
height: 15px;
top: calc(50% - 8px);
right: 0;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
/*四區Modal視窗個別調色*/
/*外框線*/
#tw-n.modal.tw .modal-content, #tw-e.modal.tw .modal-content {
border: 2px solid #AD7EEE;
}
#tw-c.modal.tw .modal-content {
border: 2px solid #6699FF;
}
#tw-s.modal.tw .modal-content {
border: 2px solid #44CF9D;
}
/*區域表頭*/
#tw-n .modal-header, #tw-e .modal-header {
color: #9966FF;
border-bottom: 2px solid #AD7EEE;
background: linear-gradient(to right, #FFFFFF, #A683FC);
}
#tw-c .modal-header {
color: #5171E5;
border-bottom: 2px solid #6699FF;
background: linear-gradient(to right, #FFFFFF, #758EFF);
}
#tw-s .modal-header {
color: #29C187;
border-bottom: 2px solid #44CF9D;
background: linear-gradient(to right, #FFFFFF, #44CF9D);
}
/*關閉按鈕*/
#tw-n.modal.tw .btn-close, #tw-e.modal.tw .btn-close {
background-image: url(../images/digital_transform_zone/icon_close-purple.svg);
}
#tw-c.modal.tw .btn-close {
background-image: url(../images/digital_transform_zone/icon_close-blue.svg);
}
#tw-s.modal.tw .btn-close {
background-image: url(../images/digital_transform_zone/icon_close-green.svg);
}
/*後方箭頭*/
#tw-n .m-tw-list > a::after, #tw-e .m-tw-list > a::after {
background-image: url(../images/digital_transform_zone/icon_arrow-purple.svg);
}
#tw-c .m-tw-list > a::after {
background-image: url(../images/digital_transform_zone/icon_arrow-blue.svg);
}
#tw-s .m-tw-list > a::after {
background-image: url(../images/digital_transform_zone/icon_arrow-green.svg);
}
/*報名按鈕動畫*/
.fixed-join-btn.fade-ani {
animation: icon-jump 8s ease-in-out infinite;
transition: all .5s;
}
.fixed-join-btn.fade-ani:hover {
transform: scale(1.15);
}
@keyframes icon-jump {
0% {
transform: scale(1.0);
opacity: 1;
}
10% {
transform: scale(1.15);
opacity: .6;
}
20%, 100% {
transform: scale(1.0);
opacity: 1;
}
}
/*切換縣市按鈕*/
.city-menu {
padding: 1rem;
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
}
.btn-city {
flex: 0 1 22%;
font-size: 115%;
font-weight: 600;
padding: 5px;
margin: 6px;
border-radius: 30px;
color: #000;
border: 1px solid #6358E8;
background-color: #FFFFFF;
transition: all .5s ease;
}
.btn-city.active, .btn-city:hover {
color: #FFFFFF;
border: 1px solid #6358E8;
background-color: #A69EFF;
}
/*心儀課程搜尋框*/
.co-search.city {
width: 90%;
margin: 1rem;
}
/*台灣分區小地圖*/
.digital-tw-map {
text-align: center;
}
.digital-tw-map img {
max-width: 425px;
}
/*訓練機構名片*/
.digital-institution-box {
padding: 1rem;
border-radius: 12px;
background-color: #FFF;
border: 1px solid #E1E8F0;
display: flex;
margin: 15px;
min-height: 215px;
}
.unit-logo-box.digital {
margin: 0 1.5rem;
}
.digital-institution-box .institution-contact-block {
flex: 1 1 80%;
}
.institution-contact-block {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
font-size: 112.5%;
font-weight: 600;
line-height: 175%;
color: #555555;
}
.institution-contact-block .title {
font-size: 125%;
width: 100%;
font-weight: 600;
color: #000000;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid #CCCCCC;
}
.institution-contact-block i {
margin-right: 0.5rem;
}
.unit-logo-box .link {
padding: 20px 0 10px;
text-align: center;
}
.btn-course-list {
background-color: #3C7DBA;
border: 1px solid #3C7DBA;
padding: 5px 20px;
color: #FFFFFF;
font-weight: 600;
font-size: 100%;
width: 100%;
max-width: 120px;
border-radius: 5px;
transition: all .5s;
}
.btn-course-list:hover {
background-color: #FFFFFF;
color: #3C7DBA;
}
/*混成課程標籤*/
.course-box .type.blended {
background-color: #D360C8;
}
/*小標變成淺紫色*/
.unit-title.digital > i, .type-title.digital i {
color: #A779E9;
}
/*心儀課程搜尋框*/
.co-search.digital {
display: flex;
align-items: center;
margin-left: unset;
margin-right: auto;
margin-bottom: 10px;
width: calc(50% - 50px);
padding: 0;
border-radius: 15px;
background-color: transparent;
}
/*課程價格*/
.digital-course-price {
color: #4337CE;
}
/*課程清單表格*/
.digital-class-list {
border-top: 2px solid #4337CE;
border-bottom: 1px solid #4337CE;
}
.digital-class-list .th {
background-color: rgba(185, 178, 255, .2);
color: #4337CE;
border-bottom: 1px solid #4337CE;
border-top: 2px solid #4337CE;
font-size: 1.125rem;
padding: 10px 15px;
display: flex;
justify-content: space-between;
}
.digital-class-list .th > div {
font-weight: 600;
}
.digital-class-list .td {
font-size: 1.125rem;
color: #333;
border-bottom: 1px solid #4337CE;
padding: 10px 15px;
display: flex;
justify-content: space-between;
}
.digital-class-list .th .no, .digital-class-list .td .no {
flex: 0 0 5%;
text-align: center;
}
.digital-class-list .th .title, .digital-class-list .td .title {
flex: 0 0 40%;
}
.digital-class-list .unit, .digital-class-list .unit {
flex: 0 0 25%;
}
.digital-class-list .th .datatime, .digital-class-list .td .datatime {
flex: 0 0 30%;
font-size: 1rem;
}
/*電子書*/
.type-menu-group.ebook li { /*類別選單一排幾個*/
flex: 0 1 20%;
}
.ebook-menu-list {
padding: 10px 1rem;
display: flex;
flex-wrap: wrap;
}
.ebook-menu-list li {
list-style: none;
padding: 5px;
}
.ebook-menu-list li a {
font-size: 1.25rem;
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 58px;
padding-left: 25%;
border-radius: 38px;
border: 1px solid #A69EFF;
color: #000;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, .05);
text-align: center;
font-weight: 600;
white-space: nowrap;
background-color: #FFF;
background-size: auto 60%;
letter-spacing: 1px;
background-position: 16px center;
background-repeat: no-repeat;
opacity: .8;
transition: all .8s;
}
.ebook-menu-list li:nth-child(1) a {
background-image: url(../images/ebooks/icon-ebook.svg);
}
.ebook-menu-list li:nth-child(2) a {
background-image: url(../images/ebooks/icon-ebook-emagazine.svg);
}
.ebook-menu-list li:nth-child(3) a {
background-image: url(../images/ebooks/icon-ebook-gold-books.svg);
}
.ebook-menu-list li:nth-child(4) a {
background-image: url(../images/ebooks/icon_ebook-publication.svg);
}
.ebook-menu-list li:nth-child(5) a {
background-image: url(../images/ebooks/icon_ebook-audiobooks.svg);
}
.ebook-menu-list li a.active, .ebook-menu-list li a:hover {
border: 1px solid #5555F2;
transform: scale(1.01);
opacity: 1;
color: #4337CE;
background-color: #FFF;
box-shadow: 3px 3px 0 0 rgba(0, 123, 255, .15);
}
/*電子書標題*/
.type-title.ebook {
color: #333;
}
.type-title.ebook img {
width: 34px;
margin-right: 0.5rem;
vertical-align: middle;
}
.e-book-inputs select {
margin-right: 8px;
border-radius: 5px;
}
.gold-books-type-title {
font-size: 1.375rem;
color: #333;
font-weight: 600;
margin-top: 15px;
padding-top: 20px;
border-top: 1px solid #CCC;
}
.gold-books-type-title:nth-child(1) {
border-top: 0;
}
.ebook-box {
width: 100%;
margin-bottom: 15px;
padding: 5px;
display: flex;
flex-direction: column;
}
.ebook-box .photo {
position: relative;
flex: 1 1 100%;
border-radius: 5px;
border: 1px solid #CCCCCC;
overflow: hidden;
width: 100%;
padding-bottom: 135%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
transition: all .5s;
}
.ebook-box .photo:hover {
transform: scale(1.05);
}
.ebook-box .photo:after {
position: absolute;
content: 'READ MORE';
width: 100%;
height: 100%;
left: 0;
top: 0;
color: #fff;
letter-spacing: 1px;
display: flex;
justify-content: center;
flex-wrap: nowrap;
font-weight: 900;
text-shadow: 1px 1px 4px #00000080;
align-items: center;
background-color: #7266FC99;
z-index: 3;
transition: all .5s;
opacity: 0;
}
.ebook-box .photo:hover:after {
opacity: 1;
}
.ebook-box .title {
color: #555;
margin-top: 0.5rem;
max-height: 80px;
overflow: hidden;
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
margin-bottom: 0.25rem;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3;
transition: all .5s;
}
.ebook-box .title > a {
color: #555;
}
.ebook-box .title > a:hover {
color: #4337CE;
}
/***************************************************************************/
/*其它RWD*/
/***************************************************************************/
@media only screen and (max-width: 1600px) {
.type-menu-list.all .dropdown-toggle::after {
transform: rotate(0deg);
}
.type-menu-list.all .dropdown-menu.show {
width: 97%;
inset: 0 0 0 0 !important;
}
.type-menu-list.all .dropdown-menu.show::after {
content: "";
position: absolute;
top: -32px;
left: calc(50% - 16px);
width: 0;
height: 0;
border: 16px solid;
border-color: transparent transparent #FFF transparent;
}
/*主題專區側邊攔與課程顯示寬度控制 1600*/
.course-list-group.zone {
padding: 0;
max-width: calc(98vw - 246px);
}
}
@media only screen and (max-width: 1450px) {}
@media only screen and (max-width: 1400px) {
.container-xxl, .container-xl {
padding-left: 15px;
padding-right: 15px;
}
.type-menu-list.all .dropdown-toggle::after {
right: 20px;
}
/*亮點案例側欄減小邊框 1400*/
.case-intro-box.side-info {
padding: 2rem 1rem;
margin-bottom: 0;
}
/*開課合作單位:首頁Banner-slick 1400*/
.co_banner_prev {
left: 8%;
}
.co_banner_next {
right: 8%;
}
/*開課合作單位:首頁搜尋 1400*/
.co-search {
width: calc(80% - 50px);
}
/*開課合作單位:首頁課程地圖*/
.co-map-item {
margin: 10px;
}
/*主題專區側邊攔與課程顯示寬度控制 1400*/
.course-list-group.zone {
padding: 0;
max-width: calc(98vw - 246px);
}
.col-zone {
flex: 0 0 auto;
width: 33.33333%;
}
/*電子書 1400*/
.ebook-menu-list {
padding: 10px 0;
display: flex;
flex-wrap: wrap;
}
.ebook-menu-list li a.active, .ebook-menu-list li a:hover {
transform: scale(1);
}
.ebook-menu-list li a {
font-size: 1.125rem;
height: 50px;
letter-spacing: 0;
background-size: auto 65%;
}
/*專區搜尋-Modal視窗*/
.modal.zone .modal-dialog {
margin-top: 5%;
margin-right: auto;
margin-left: 5%;
}
}
@media only screen and (max-width: 1200px) {
.type-menu-list.all li {
flex: 0 0 33%;
}
.type-menu-list.all .dropdown-toggle::after {
right: 10%;
}
/*三快課程列表-第三項可以換行 1200*/
.col-lg-4 .course-box .footer-up {
flex-wrap: wrap;
}
/*開課合作專區:下方合作單位區 1200*/
.col-lg-logo {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
min-height: 1px;
}
/*課程橫列框顯示調整 1200*/
.course-box.co.list .footer-up {
flex-wrap: wrap;
}
.course-box.co.list .speaker {
flex: 0 0 100%;
}
/*開課合作專區:公版教材 1200*/
.public-textbook-industry-tag {
display: none;
}
.public-textbook-box {
padding: 20px;
border: 1px solid #A69EFF;
border-radius: 12px;
margin: 10px;
transition: all .5s;
}
/*加入開課合作單位說明 1200*/
.co-qualify-block .title {
padding: 5px 25px;
margin-right: unset;
display: block;
width: fit-content;
margin-bottom: 10px;
}
.co-intro-box {
font-size: 1.25rem;
}
/*30人數轉視窗 1200*/
.modal.tw .modal-dialog {
margin-top: 0;
margin-right: auto;
}
/*主題專區側邊攔與課程顯示寬度控制 1200*/
.course-list-group.zone {
padding: 0;
max-width: calc(98vw - 246px);
}
.col-zone {
flex: 0 0 auto;
width: 50%;
}
/*電子書 1200*/
.type-menu-group.ebook li {
flex: 0 1 25%;
}
.ebook-menu-list li a {
font-size: 1.125rem;
height: 50px;
letter-spacing: 0;
}
}
@media only screen and (max-width: 992px) {
/*AI專區補充(增加按鈕大小) 992*/
.type-menu-list.all li {
flex: 0 0 50%;
}
.unit-title-group {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.unit-title-intro {
font-weight: 600;
color: #555;
font-size: 1.125rem;
line-height: 175%;
padding: 15px;
border-left: 0;
border-top: 1px solid #DDD;
}
.case-keyword-box {
padding: 1.5rem 1.5rem 4rem;
}
/*創業專區溫馨提醒內容992*/
.create-notice-block{
display: flex;
flex-wrap: wrap;
}
.create-notice-box{
flex:1 1 45%;
position: relative;
color: #555;
background-color: #F2F2FF;
padding: 10px 8px;
border-radius: 8px;
margin:8px;
}
/*開課合作單位:首頁相關-slick 992*/
.co_banner_prev {
left: 5px;
}
.co_banner_next {
right: 5px;
}
/*新版LOGO排排站 992*/
.co-units-logo-group a {
flex: 0 0 25%;
}
.co-unit-item .logo {
height: 70px;
padding: 5px;
}
.co-unit-item .logo img {
max-width: 120px;
max-height: 100%;
}
.co-unit-item .name {
font-size: 1.125rem;
padding: 8px;
height: 70px;
text-align: center;
line-height: 140%;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical; /*指定向上對齊*/
-webkit-line-clamp: 2; /*設定資料顯示行數*/
}
/*影音案例內頁:下方關鍵字 992*/
.case-intro-box {
padding: 1.5rem;
background-color: #FFF;
border-radius: 12px;
border: 1px solid #E1E8F0;
line-height: 225%;
margin-bottom: 1.5rem;
}
.case-keyword-box {
padding: 1.5rem 1.5rem;
}
.co-search {
width: calc(100% - 50px);
padding: 10px;
border-radius: 10px;
}
.case-info-line {
flex-wrap: wrap;
padding-bottom: 1rem;
}
.case-share-group {
border-top: 1px solid rgba(0, 0, 0, .1);
}
.case-info-line div {
padding: 5px;
}
/*開課合作單位:課程地圖 992*/
.co-map-list {
background-size: 145%;
background-position: center center;
border-radius: 25px;
}
.co-map-list .title {
padding-top: 25px;
font-size: 250%;
letter-spacing: 0.25rem;
}
.co-map-block {
margin: 0 10px -25px;
padding: 20px;
border-radius: 20px;
}
/*開課合作單位:公版教材 992*/
.public-textbook-box .title {
font-size: 225%;
}
.public-textbook-box .number {
font-size: 300%;
}
.public-textbook-box .number span {
font-size: 30%;
}
/**公版教材-Modal**/
.modal-textboox-box .photo {
display: none;
}
.textboox-industy-list .th {
font-size: 1.6em;
}
.textboox-industy-list .td {
font-size: 1.25em;
}
/*開課合作專區:下方合作單位區 992*/
.col-lg-logo {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
/*各合作單位首頁 992*/
.co-index-banner .photo {
flex: 0 0 40%;
}
/*實體課程內頁 992*/
.class-header .summary {
margin-top: 20px;
}
/*數位課程內頁 992*/
.class-header.login .summary {
margin-top: 0;
}
/*公版教材內頁 992*/
.public-textbook-title {
font-size: 1.8rem;
}
.textbook-info-box .content {
font-size: 1.25rem;
}
/*30人以下數轉補助 992*/
.index-taiwan-title {
padding: 25px 15px;
}
.index-taiwan-title > div {
margin-right: auto;
margin-left: auto;
}
/*消除Modal視窗最小高度 992*/
.modal.tw .modal-content {
max-height: unset;
}
/*AI六小時課程篩選按鈕 992*/
.type-menu-group.ai-6hr li { /*一排幾個*/
flex: 0 1 25%;
}
.tw-search-btn {
margin: 4rem auto 0;
}
/*電子書 992*/
.type-menu-group.ebook li {
flex: 0 1 33.3%;
}
.ebook-menu-list li a {
font-size: 1.125rem;
height: 50px;
letter-spacing: 0;
}
}
@media only screen and (max-width: 768px) {
.ll-hide {
display: block;
}
.ss-hide {
display: none;
}
/*課程box與Hot box調整 768*/
.course-box.hot {
margin: 0;
padding: 15px;
flex-direction: column;
}
.course-box.hot .photo {
padding-bottom: 52.5%;
}
.course-box .title, .course-box.hot .title {
max-height: auto;
}
.course-box.hot .intro {
max-height: auto;
}
.course-box .content, .course-box.hot .content {
height: auto;
min-height: 100px;
}
/*主題專區側邊攔與課程顯示寬度控制 768*/
.course-list-group.zone {
padding: 0;
max-width: calc(96vw - 246px);
}
.col-zone {
flex: 0 0 auto;
width: 100%;
}
/*AI工具分享 768*/
.type-menu-list.sub:before, .type-menu-list.sub:after {
display: none;
}
.tool-box .intro {
height: auto;
min-height: 80px;
}
.tool-box.hot .intro {
height: 80px;
}
/*AI專區補充(增加按鈕大小) 768*/
.type-menu-list.all li {
flex: 0 0 50%;
}
/*亮點案例-文章內頁 768*/
.case-info-line {
font-size: 100%;
justify-content: flex-start;
}
.case-info-line div {
padding-right: 15px;
}
.case-article-box > .pic-intro {
position: relative;
max-width: 600px;
background-color: rgba(0, 0, 0, .7);
}
/*開課合作專區:首頁Banner區 768*/
.co-banner-box {
padding-bottom: 36%;
margin: 0;
box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, .15);
border-radius: 10px;
}
/*開課合作單位:首頁Banner-slick 768*/
.co_banner_prev {
left: -15px;
}
.co_banner_next {
right: -15px;
}
/*開課合作單位:首頁搜尋 768*/
.co-search {
margin-top: 10px;
width: 100%;
padding: 5px;
border-radius: 10px;
}
.date-start-end-select {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.digital-class-list .th {
display: none;
}
.digital-class-list .th, .digital-class-list .td {
flex-wrap: wrap;
padding: 10px 0;
}
.digital-class-list .th .title, .digital-class-list .td .title {
flex: 0 0 92%;
}
.digital-class-list .unit, .digital-class-list .unit {
padding-left: 8%;
flex: 0 0 100%;
background-color: #EEEEEE80;
border-top: 1px dashed #999;
}
.digital-class-list .th .datatime, .digital-class-list .td .datatime {
padding-left: 8%;
flex: 0 0 100%;
background-color: #FFF;
}
/*新版LOGO排排站 768*/
.co-units-logo-group a {
flex: 0 0 33%;
}
.logos-more > div {
font-size: 90%;
padding: 0;
}
.more-logo-btn {
padding: 4px;
border-radius: 5px;
font-size: 90%;
}
/*課程列表切換鈕隱藏 768*/
#co-hotTab .list-type-btn, #co-newTab .list-type-btn {
display: none;
}
/*課程橫式列表調整 768*/
.course-box.co.list {
display: flex !important;
flex-direction: column !important;
align-items: center;
}
.course-box.co.list .photo {
padding-bottom: 52.5%;
}
/*開課合作單位:課程地圖 768*/
.co-map-list {
background-size: 200%;
background-position: center center;
border-radius: 25px;
}
.co-map-item {
margin: 5px 0;
}
.co-map-item img {
width: 60px;
margin-right: 10px;
}
/*開課合作專區:下方合作單位區 768*/
.co-index-title .co-title {
font-size: 1.8rem;
}
.col-lg-logo {
-ms-flex: 0 0 33%;
flex: 0 0 33%;
max-width: 33%;
}
/*加入開課單位說明 768*/
.co-attach-group {
margin: 15px 0;
}
.co-apply-box {
padding: 15px;
}
/*各合作單位首頁 768*/
.co-index-banner {
display: flex;
flex-direction: column;
}
.co-index-banner .photo {
flex: 0 0 100%;
padding-bottom: 55%;
margin-bottom: 10px;
}
/*隱藏課程列表按鈕 768*/
#co-onlineTab .list-type-btn {
display: none;
}
/*實體課程內頁 768*/
.class-header .photo {
width: 100%;
border-radius: 5px;
}
.class-header .summary .title {
font-size: 175%;
}
.textboox-industy-list.download .th, .textboox-industy-list.download .td {
flex-wrap: wrap;
}
.textboox-industy-list.download .th .title, .textboox-industy-list.download .td .title {
flex: 0 0 100%;
}
.textboox-industy-list.download .th .title {
text-align: center;
border-bottom: 1px solid #CCC;
}
.textboox-industy-list.download .td .data {
text-align: center;
}
.textboox-industy-list.download .td .data i {}
.speaker-intro-box {
flex-direction: column;
}
/*開課合作單位:課程地圖 768*/
.type-menu-list.all.co img {
width: 40px;
}
/*30人數位轉型 768*/
/*AI六小時課程篩選按鈕*/
.type-menu-group.ai-6hr li { /*一排幾個*/
flex: 0 1 33.3%;
}
/*電子書 768*/
.type-menu-group.ebook li {
flex: 0 1 50%;
}
.input-group > .form-control, .input-group > .form-select, .input-group > .form-floating {
flex: 1 1 40%;
margin-bottom: 5px;
}
.input-group.e-book-inputs button {
margin-bottom: 5px;
}
}
/*******************************************************************************************
行動版面開始
********************************************************************************************/
/* 桌面版面: 559px 最大*/
@media only screen and (max-width: 576px) {
.title-hot-area {
padding: 10px 0;
}
.hot-title {
margin-top: 1.5rem;
margin-bottom: 0;
}
.type-title {
margin-bottom: 0.5rem;
}
.search-input-group {
width: 100%;
text-align: end;
}
.title-filter-group {
display: flex;
justify-content: space-evenly;
}
/*類別 576*/
.title-search-group {
flex-wrap: wrap;
}
.type-menu-list.all, .type-menu-list {
padding: 10px 0;
font-size: .95rem;
}
.type-menu-list li, .type-menu-list.sub li {
height: 42px;
width: 50%;
display: flex;
margin: 3px 0;
}
.type-menu-list.all li a, .type-menu-list li a, .type-menu-list.sub li a {
padding: 10px !important;
font-size: 1.125rem !important;
font-weight: 500;
width: 100%;
text-align: center;
letter-spacing: 0;
height: 42px;
}
.type-menu-list.all .dropdown-menu.show li a:hover {
color: #000;
}
.type-menu-list.all li a i {
margin-right: 0.5rem;
}
/*主題專區側邊攔與課程顯示寬度控制 576*/
.class-zone-block {
flex-direction: column;
padding-left: 15px;
padding-right: 15px;
}
.course-list-group.zone {
padding: 0;
max-width: 100%;
}
.col-zone {
flex: 0 0 auto;
width: 100%;
}
.class-zone-block {
flex-direction: column;
}
.zone-search-menu {
position: relative;
width: 100%;
height: auto; /* 預設展開高度 */
transition: height 0.3s ease;
overflow: hidden;
}
.zone-search-menu.expanded {
width: 100%;
}
.zone-search-menu.collapsed {
height: 45px; /* 收合只留按鈕高度 */
background-image: none;
}
#zone-search-menu-box {
position: relative;
top: 0;
left: 0;
width: 100%;
height: auto;
transition: transform 0.3s ease;
}
.zone-search-menu.collapsed #zone-search-menu-box {
transform: translateY(-100%);
}
#wbtn {
transform: rotate(90deg);
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
}
#wbtn.rotated {
transform: rotate(270deg);
border-right: 1px;
top: -3px;
}
/*專區搜尋-Modal視窗 576*/
.modal.zone {
--bs-modal-width: 100%;
}
.modal.zone .modal-dialog {
margin-top: 5%;
margin-right: 10px;
margin-left: 10px;
}
.unit-title-group { /*專區主標題與下方課程間距縮小 576*/
margin-bottom: 0;
}
/*專區標題左右留空 576*/
.class-zone-wide.top {
padding-left: 15px;
padding-right: 15px;
}
/*AI專區補充(增加按鈕大小) 576*/
.type-menu-list.all li {
flex: 1 1 100%;
}
.unit-title-intro {
padding: 0;
}
.type-menu-list.all li a i {
font-size: 100%;
}
.type-menu-list.all .dropdown-toggle::after {
right: 15px;
opacity: .6;
}
.type-menu-list.all .dropdown-menu.show::after {
top: -20px;
left: calc(50% - 10px);
border: 10px solid;
border-color: transparent transparent #FFF transparent;
}
.type-menu-list.all .dropdown-menu.show > li {
width: 100%;
}
.type-menu-list.all .dropdown-menu.show a {
border: 0;
border-radius: 0;
width: 95%;
margin: 0 auto;
font-size: 100%;
font-weight: 500;
padding: 5px 0;
}
.course-list-group {
padding: 0;
}
.course-box, .course-box.hot {
padding: 0;
margin: 15px 0;
}
/*AI工具分享 576*/
.tool-box {
margin: 15px 0;
}
.tool-box .product {
height: auto;
min-height: 50px;
overflow: auto;
margin-bottom: 0.25rem;
}
/*上下頁silck--消失好了 576*/
.center_1_prev, .center_1_next {
display: none;
}
.center_1_prev {
left: -5px;
}
.center_1_next {
right: -5px;
}
.center_1_prev > img, .center_1_next > img {
width: 20px;
}
.center_1_prev.tool, .center_1_next.tool {
top: 45%;
}
.center_1_prev.tool {
left: -10px;
}
.center_1_next.tool {
right: -10px;
}
.center_1_prev.tool > img, .center_1_next.tool > img {
width: 30px;
}
/*dots 距離變近 576*/
.slick-dots li {
margin: 0 3px !important;
}
.slick-pp-btn img {
width: 20px;
}
/*亮點案例專區 576*/
.case-type-menu {
font-size: 110%;
padding: 6px;
padding-left: 25px;
border-radius: 25px;
}
.case-type-menu:before {
left: 3px;
}
.case-intro-box {
padding: 15px;
}
.case-notice-box {
padding: 10px;
color: #444;
margin: 2.5rem 0 0;
}
/*開課合作單位:搜尋框 576*/
.co-search .input-group input {
font-size: 100%;
height: 36px;
}
.co-search .input-group button {
font-size: 100%;
color: #333;
width: 46px;
height: 36px;
}
/*開課合作單位:篩選下拉 576*/
.co-filter-btn {
font-size: 120%;
padding: 4px 10px;
}
.date-start-end-select .county-regon {
flex: 0 0 95%;
}
/*開課合作單位:首頁幾項-slick 576*/
.co_banner_prev img, .co_banner_next img, .co_logo_prev img, .co_logo_next img {
width: 30px;
}
.co_banner_prev {}
.co_banner_next {}
.co_logo_prev, .co_hot_prev, .co_new_prev {
left: -20px;
}
.co_logo_next, .co_hot_next, .co_new_next {
right: -20px;
}
/*新版LOGO排排站 576*/
.co-units-logo-group a {
flex: 0 0 50%;
}
.co-unit-item {
border-radius: 5px;
margin: 3px;
background-color: #FFF;
overflow: hidden;
}
.co-unit-item .logo {
height: 60px;
padding: 5px;
}
.co-unit-item .name {
padding: 5px;
font-size: 85%;
height: 44px;
text-align: center;
line-height: 140%;
display: -webkit-box;
-webkit-line-clamp: 2;
}
/*開課合作專區:下方合作單位區 576*/
.col-lg-logo {
-ms-flex: 0 0 33%;
flex: 0 0 33%;
max-width: 33%;
}
.fixed-join-btn {
display: none;
}
.co_banner_next, .co_banner_next {
display: none;
}
/*開課合作單位辦法-帳號申請modal視窗 576*/
/*開課單位註冊 576*/
.type1-edit-modal-wp .type1-edit-modal-block.small-modal.regist {
max-width: 920px;
width: 100%;
padding: 50px 10px;
}
/*各開課合作單位學院 576*/
.course-box.co.co-hot {
padding: 10px;
}
/*實體課程內頁 576*/
.tag-type-class, .tag-type-online, .tag-type-free {
letter-spacing: 0;
font-size: 1rem;
font-weight: 500;
padding: 2px 10px;
border-radius: 2px;
}
.co-unit-intro-box {
padding: 15px;
margin: 15px 0;
border-radius: 10px;
}
.info-block {
font-size: 1.2rem;
color: #333;
padding: 15px 0;
line-height: 200%;
font-weight: 600;
}
.course-intro-content {
padding: 15px 0;
}
.speaker-intro-box {
padding: 15px 0;
}
.speaker-intro-box .content {
padding: 15px 0;
}
.class-header .summary .btn-group a {
font-size: 1.25rem;
letter-spacing: 1px;
text-align: center;
color: #FFF;
margin: 8px;
padding: 8px 20px;
}
/*數位課程內頁-補充 576*/
.class-header .summary .date-group {
flex-direction: column;
align-items: flex-start;
}
.btn-class-group {
flex-wrap: wrap;
}
.btn-fun {
flex: 1 1 100%;
}
.btn-select {
margin-top: 20px;
flex: 1 1 100%;
}
.class-fun-group {
top: 108px;
}
.class-fun-itme {
height: 50px;
width: calc((100vw - 60px) / 4);
border-top: 4px solid #FFFFFF;
border-bottom: 4px solid #FFFFFF;
color: #555555;
font-size: 1.125rem;
font-weight: 500;
transition: all .5s;
}
.class-accordion-box {
margin: 0;
position: relative;
}
.class-intro-content {
padding: 15px 10px;
}
.class-accordion-tag {
position: absolute;
top: -150px;
}
.sticky-notice.class {
position: sticky !important;
top: 155px;
z-index: 2;
margin-top: 0;
margin-bottom: 0;
}
.speaker-intro-box .content .name span {
display: block;
}
/*開課合作單位:課程地圖分類 576*/
.unit-title.co > img {
width: 55px;
margin-right: 0.25rem;
}
.unit-title.co > img {
width: 60px;
}
.type-menu-list.all.co li {
height: 40px;
margin: 5px 0;
}
.type-menu-list.all.co li a {
height: 40px;
}
/*30人以下數轉補助 576*/
/*心儀課程地點下移對齊左方 576*/
.filter-place {
margin-top: 10px;
}
/*臺灣地圖 576*/
.btn-index-tw {
position: absolute;
font-size: 1.2em;
color: #fff;
padding: 6px 15px;
border-radius: 20px;
letter-spacing: 0;
width: 80px;
box-shadow: 2px 3px 0 0 rgba(0, 0, 0, .2);
transition: all .5s ease;
}
/*臺灣地圖下方標示 576*/
.index-taiwan-title .title {
font-size: 175%;
}
.index-taiwan-title .title img {
width: 30px;
}
.institution-contact-block {
padding-left: 1.5rem;
font-size: 100%;
}
.co-search.digital {
width: 100%;
}
.digital-tw-title {
color: #A779E9;
font-weight: 600;
font-size: 175%;
margin-top: 1.5rem;
}
.city-menu {
padding: 10px;
margin-top: 0;
}
.btn-city {
flex: 0 1 30%;
font-size: 100%;
margin: 4px;
color: #000;
}
.digital-tw-map img {
max-width: 300px;
}
/*30人數位轉型 576*/
/*AI六小時課程篩選按鈕 576*/
.type-menu-group.ai-6hr li { /*一排幾個*/
flex: 0 1 50%;
height: auto;
}
.digital-institution-box {
flex-direction: column;
}
.unit-logo-box.digital {
margin: 0 auto;
flex: 0 0 100%;
}
.institution-contact-block .title {
text-align: center;
margin-top: 1rem;
}
.index-taiwan-area {
padding-right: 0;
padding-left: 0;
}
#btn-tn {
top: 9%;
left: 25%;
}
.btn-purple.case {
margin: auto;
}
/*30人數轉Model視窗 576*/
.modal.tw .modal-dialog {
margin-right: auto;
}
/*電子書 576*/
.type-menu-group.ebook li {
flex: 0 1 50%;
padding: 5px 2px;
}
.ebook-menu-list li a {
font-size: 1rem;
text-align: left;
height: 40px;
margin: 0;
padding-left: 22.5%;
background-position: 10px center;
font-weight: 500;
}
}
@keyframes tree-shake {
0% {
transform: rotate(0);
transform-origin: 0 100%;
}
40% {
transform: rotate(4deg);
transform-origin: 0 100%;
}
60% {
transform: rotate(4deg);
transform-origin: 0 100%;
}
90% {
transform: rotate(0);
transform-origin: 0 100%;
}
}
@keyframes tree-shake2 {
0% {
transform: rotate(0);
transform-origin: 100% 0;
}
45% {
transform: rotate(8deg);
transform-origin: 100% 0;
}
65% {
transform: rotate(8deg);
transform-origin: 100% 0;
}
90% {
transform: rotate(0);
transform-origin: 100% 0;
}
}
@keyframes jump-out {
0% {
transform: scale(1);
}
60% {
transform: scale(1);
opacity: 1;
}
80% {
transform: scale(1.3);
opacity: .2;
}
100% {
transform: scale(1);
opacity: 1;
}
}