﻿:root {
    --white:#FFFFFF;
    --purple: #e0c9de;
    --red: #b4392a;
    --skin: #f3d0b1;
}
#event_sec, #event_third, #event_fourth, #event_fifth, #event_sixth {padding: 1rem;}

/*112國營口試技巧指導講座*/
.bg-skin {background-color: var(--skin);}
/*.banner_wrap {align-items: center;}
.banner_wrap figure {overflow: hidden;display: flex;flex-wrap: wrap;width: 45%;}
.banner_wrap figure img {width: calc(100%/2);}
.main_title {background-color: var(--red);color: white;font-size: 4.5rem;padding: 2rem 2rem 4rem;text-align: center;font-weight: bold;}*/
.main_title span {display: block;border-bottom: 1px solid;font-size: 5.5rem;}
.oral_detail {font-size: 2rem;}
.oral_detail li {padding: 0.5rem 0;}
.oral_time {background-color: var(--red);border-radius: 1.5rem;padding: 0.25rem 1.5rem;color: #f6f6aa;margin: auto 1rem auto auto;font-size: 1.75rem;}

/*口試技巧講座*/
.lecture_cont {margin: 3rem auto;}
.lecture-title {font-size: 2.2rem;color: #105552;top: 0;left: 0;text-align: left;font-weight: bold;width: 100%;font-size: 3rem;}
.free {color: var(--red);padding: 0 0 0 1rem;text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;animation: myfirst 1s infinite alternate ease-in-out;}
@keyframes myfirst {
    from {opacity: 1;}
    15% {opacity: 0;}
    25% {opacity: 1;}
    100% {opacity: 1;}
}
.title_bg {font-size: 2.5rem;z-index: 3;transform: skewX(-10deg);color: #fffffff5;padding: 1rem 1.5rem;position: relative;left: -40px;top: -13px;display: inline-table;}
.title_bg::after {position: absolute;content: '';left: 0px;bottom: -13px;border-width: 0px 50px 13px 0px;border-style: solid solid solid solid;}
.skills_item {color: #105552;background: linear-gradient(90deg, #b0cfd1, transparent);}
.skills_item .title_bg {background-color: #53999a;}
.skills_item .title_bg::after {border-color: transparent #045551 transparent transparent;}
.course_item {color: #60346b;background: linear-gradient(90deg, #dcd5e8, transparent);}
.course_item .title_bg {background-color: #7d5d87;}
.course_item .title_bg::after {border-color: transparent #53254e transparent transparent;}
.skills_list {width: calc(100%/2);padding: 2rem;}
.skills_list dt {color: #105552;font-size: 2rem;font-weight: bold;}
.skills_list dd {font-size: 1.5rem;padding: 0 0 0 1.75rem;}
.identity {font-size: 2rem;}
.absent {padding: 0 0 0 11rem;}
.absent a {display: block;color: var(--red);font-weight: bold;}

/*口試實戰模擬*/
.course_list {background-color: #efe4ee;width: calc(100%/2 - 1rem);margin: 2rem auto 0;border-radius: 1.5rem;padding: 1rem 2rem 1rem 3rem;}
.course_list dt {color: #90006e;font-size: 2rem;font-weight: bold;border-bottom: 1px dotted;}
.course_list dd {font-size: 1.5rem;padding: 0.75rem 0 0;display: list-item;list-style-type: decimal;margin: auto auto auto 1.5rem;}
.course_note {font-size: 1.25rem;padding: 0.75rem 0 0;color: darkslateblue;}

/*國營口試講座【預約】*/
.ask-title dt {font-size: 2rem;font-weight: bold;}
#Ask {background-color: #fdab61 !important;}


@media screen and (min-width: 1201px) {	
	#event_sec, #event_third, #event_fourth, #event_fifth, #event_sixth {width: 1200px;margin: auto;}
    #Ask SELECT {width: auto !important;}
}

@media screen and (max-width: 1200px) {
    /*.banner_wrap figure {width: 100%;}
    .banner_wrap figure img {width: calc(100%/4);}*/
    .main_title {margin: auto;}
    .title_bg {left: -10px;text-indent: initial;}
    .lecture-title {width: 90%;margin: auto 0 auto auto;text-indent: -2rem;}
    .absent {padding: 0;}
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    .ask-wrap .sm\:block {display: initial;}
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    .main_title {padding: 1rem 2rem 2rem;}
    .main_title span {font-size: 2.5rem;}
    #event_master h1 {font-size: 2rem;}    
    .title_bg {font-size: 1.75rem;padding: 0.5rem 1rem;}
    .lecture_cont {margin: 1rem auto 2rem;}
    .lecture-title {font-size: 2rem;}
    .skills_list {width: 100%;padding: 0.5rem;}
    .course_list {width: 100%;}
    .oral_detail {margin: auto;font-size: 1.5rem;}
    .oral_time {font-size: 1.25rem;}
    .identity {font-size: 1.5rem;padding: 0.5rem 0 0;}
}