.bgcolor0 {background: url(../../images/0811028_6_bg0.png) center, linear-gradient(to bottom, #86a9d9 0%,#c0d4ef 48%,#ffffff 80%,#ffffff 100%);}
.bgcolor1 {background: url(../../images/0811028_6_bg0.png) center, linear-gradient(to top,  #ffeb16 0%,#ffffff 71%);}
.bgcolor2 {background: url(../../images/1107058_tv.png) center}
.fcolor1 {color: #eb4944;}
.mr-1 {margin-right: 0.25rem;}
.mr-2 {margin-right: 0.5rem;}
.pl-4 {padding-left: 1rem;}
.sp-my {margin-top: -15px;}
.overflow-hidden {overflow: hidden;}
ul, li {list-style-type: none;}

/*event*/
#Master_title {justify-content: center;align-items: center;margin: auto;padding: 0 0 1rem;}
#Master_title h1 {justify-content: center;align-items: center;color: #0165a1;font-size: 7rem;line-height: 8.5rem;margin: 1rem auto;font-family: MElleHK, 'Noto Serif TC', serif;text-shadow: 2px 0 2px white, -2px 0 2px white, 0 2px 2px white, 0 -2px 2px white, 0 0 15px white;}
.lec-circle {text-shadow: initial;width: 100%;text-align: center;}
.lec-circle span {background-color: #0165a1;color: white;font-size: 6rem;width: 8rem;height: 8rem;line-height: 8rem;border-radius: 100%;display: inline-flex;align-items: flex-end;justify-content: center;}
.lec-circle b {font-family: MElleHK, 'Noto Sans TC', sans-serif;}
.des-wrap {width: 35%;font-size: 2rem;}
.lec-des {background: linear-gradient(to right,  #7a88b9 0%,#3798c5 100%);border-radius: 1.5rem;color: white;position: relative;display: inline-block;padding: 0 1rem 0 2.5rem;text-align: left;margin-bottom: 2rem;}
.lec-des::before {content: '';top: 1px;left: 10px;border-radius: 5rem 0 0 5rem;position: absolute;height: 98%;width: 8px;background: linear-gradient(to bottom,  #FFEF49 0%,#FFF26B 100%);}
.lec-des2 {color: #3257a7;font-family: "CHei3HK","Microsoft YaHei";transform: rotate(15deg);position: relative;}
.lec-line::before {content: '';width: 3px;height: 6rem;background-color: #3257a7;top: -25px;left: 4rem;position: absolute;transform: rotate(-25deg);}
.lec-line::after {content: '';width: 3px;height: 6rem;background-color: #3257a7;top: -25px;right: 4rem;position: absolute;transform: rotate(30deg);}
.teacher-cont {justify-content: center;align-items: flex-start;}
.tea-box {display: flex;flex-wrap: wrap;width: calc(100%/6);}
.tea-box img {margin: auto;}
.tea-box dl {display: inline-flex;align-items: center;width: 100%;margin: -1rem auto auto;justify-content: center;}
.tea-box:last-of-type dl {margin-top: -1.25rem;}
.tea-box dl dt {width: 4rem;height: 4rem;background: linear-gradient(to bottom, #d3ba9d 2%,#4a2700 10%,#080808 80%);border: 5px solid #fbd268;color: white;border-radius: 100%;display: flex;flex-wrap: wrap;;align-items: center;justify-content: center;font-weight: bold;z-index: 2;}
.tea-box dl dd {background: linear-gradient(to bottom, #fec02f 0%,#f4e3a6 50%,#d9aa4c 80%,#e4a52b 100%);border: 3px solid #f4c93c;color: #120d09;border-radius: 2rem;padding: 0 0.5rem 0 2.25rem;font-size: 1.5rem;font-weight: bold;margin-left: -2rem;}
.tea-box dd small {font-size: 1rem;font-family: initial;margin-left: 0.25rem;}

/* 精彩實戰解題 */
#event_master h2 {font-size: 3rem;text-align: center;padding: 0.5rem 0 1rem;color: #eb4944;}
.showtime {background-color: #3f488d;border-radius: 1.5rem 1rem 1rem 1rem;margin: 1rem auto 3rem;padding: 0 0 1rem;}
.mb-0 {margin-bottom: 0;}
.showtitle {}
.venue {background-color: white;color: #3f488d;font-size: 2rem;font-weight: bold;border-radius: 3rem;border: 8px solid #3f488d;padding: 0.25rem 2rem 0.25rem 1.5rem;position: relative;top: -1rem;width: fit-content;}
.venue i {padding: 0 0.5rem 0 0;}
.address {color: white;font-size: 1.75rem;padding: 0.5rem 0 0 1rem;}
.showtime ul {display: flex;flex-wrap: wrap;justify-content: center;}
.showtime ul li {background-color: white;margin: 1rem 0.5rem;padding: 1rem;width: calc(90%/2);font-size: 1.75rem;}
.date {border-right: 2px solid #f4c93c;padding: 0 2rem;margin: auto 2rem auto 0;}
.topic {border-left: 3px solid #fbd268;border-right: 3px solid #fbd268;border-radius: 2rem;padding: 0 1rem;margin: auto 1rem auto auto;font-size: 1.55rem;background-color: #4a2700;color: white;}
.coming {color: #eb4944;font-size: 3rem;font-weight: bold;text-align: center;padding: 1rem 0;}
.gift {font-size: 2rem;align-items: center;width: fit-content;margin: auto;padding: 2rem 1rem;}
.gift i {font-size: 5rem;transform: rotate(-5deg);color: #eb4944;}
.gift li {padding: 0 0 0 2rem;}
.schedule {text-align: center;padding: 0.5rem 0;}
.schedule a {cursor: pointer;color: white;font-size: 1.75rem;border: 1px solid;padding: 0 0.75rem;text-decoration: none;}
.raffle {background: linear-gradient(45deg, #eb4944, #9c27b0);color: white;transform: skewX(-10deg);display: inline-block;padding: 0 1rem;margin: auto 0.75rem auto 0;font-size: 1.75rem;}
.stream {width: calc(100%/2 - 4rem);margin: 2rem auto;box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}
.stream a {position: relative;display: block;}
.stream i {color: #FF0000;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;z-index: 2;font-size: 4rem;background-color: white;width: 60px;height: 40px;display: flex;align-items: center;justify-content: center;}
.video-placeholder {position: relative;width: 100%;padding-bottom: 56.25%;height: 0;}
.video-placeholder iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: none;}

/* aside */
.guide-btn {width: 100%;bottom: 0;left: 0;position: fixed;z-index: 3;margin: 0;}
.guide-btn > div {width: 100%;background:linear-gradient(to bottom, #fec02f 0%,#f4e3a6 50%,#d9aa4c 80%,#e4a52b 100%);padding: 1rem 0;justify-content: center;}
.guide-btn a {color: #120d09;margin: auto 1.5rem;font-size: 1.5rem;text-decoration: none;z-index: 2;}
.guide-btn:before {display: block;width: 0;height: 100%;position: absolute;right: 0;bottom: 0;background: linear-gradient(90deg,#fec02f 0%,#f4e3a6 45%,#e4a52b 100%);content: '';animation: infobe 10s infinite;}
.askclick {background: linear-gradient(to bottom, #fec02f 0%,#f4e3a6 50%,#d9aa4c 80%,#e4a52b 100%);color: #120d09;right: 0;border-radius: 1rem 0 0 1rem;}

@-webkit-keyframes infobe {
    0%{right:0;left:auto;width:0}
    10%{right:auto;left:0;width:0}
    48%{right:auto;left:0;width:100%}
    52%{right:0;left:auto;width:100%}
    90%{right:0;left:auto;width:0}
    100%{right:0;left:auto;width:0}
}
@keyframes infobe {
    0%{right:0;left:auto;width:0}
    10%{right:auto;left:0;width:0}
    48%{right:auto;left:0;width:100%}
    52%{right:0;left:auto;width:100%}
    90%{right:0;left:auto;width:0}
    100%{right:0;left:auto;width:0}
}
#community_full {width: calc(100%/3*2);}
.platform .youtube-wrap {width: calc(100%/3);background-color: #D01818;padding: 0.75rem 0;color: #ffed00;}
.platform a {font-size: 1.3em;color: white;font-weight: bold;}
.social-qr {height: 100%;}
.get_resource img {display: none;}
.bulletin {position: fixed;top: 25%;right: 0.25rem;text-align: right;}
.bulletin i {display: block;margin-bottom: 0.5rem;}
.bulletin i:hover {transform: initial;}
.click_tag:hover {color: white;}
#askarea_out {background-color: #0165A1;}
#askarea input[type="submit"], #askarea input[type="reset"] {background-color: #fbd268;}
#back-top a {color: #f77e63;}
.askclick {bottom: auto;}
.announce {bottom: calc(10% + 128px);top: auto;}

@media screen and (min-width: 1201px) and (max-width: 1920px) {
    .tea-box dl dd {font-size: 1.25rem;}
    @media screen and (max-width: 1280px) {
        .tea-box dl dd {font-size: 1.1rem;}
        .tea-box dl dd small {display: inline-block;}
    }
}

@media screen and (min-width: 1201px) {   
    .row100 {width:100%;}
    /*資料集中1200px寬外框*/
    #event_master {padding: 2rem;}
    #event_sec,#event_third,#event_fourth,#event_fifth,#event_sixth {margin:2% auto;padding:10px;}
    #Master_title {padding: 0;}
    .gift {display: flex;flex-wrap: wrap;}
    .askclick {font-size: 1.5rem;}
    .lec-circle b {font-weight: 500;}
}

@media screen and (max-width: 1535px) {
    #community_full .get_resource {align-items: flex-start;}
    .get_resource ul {margin: 0 auto auto;}
    .get_resource li {width: 100%;}
}

@media screen and (max-width: 1200px) {   
    #BodyContainer_event #Master_title {margin-top: 10%;padding-top: 2rem;}
    #Master_title h1 {width: 100%;}
    .tea-box {width: calc(100%/3 - 2rem);}   
    .teacher-cont {margin: auto;}
    .sm\:block {display: block;} 
    .sm\:hidden {display: none;}
    .showtime ul li {width: 90%;}
    .gift i {float: left;padding: 0 0.5rem;}
    .guide-btn a {margin: auto;}
    .guide-btn a:nth-of-type(2) {margin: auto 1.5rem;}
    .announce {bottom: calc(10% + 103px);top: auto;}
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    #Master_title h1 {margin-bottom: 1rem;}  
    #Master_title h1 {font-size: 5.5rem;line-height: 6rem;}  
    .lec-circle span {font-size: 5.5rem;line-height: 8.5rem;}  
    .coming {font-size: 2.6rem;}
    .gift {font-size: 1.6rem;}
    .gift i {font-size: 5rem;}
}

@media screen and (max-width: 767px) {   
    #Master_title h1 {font-size: 3.8rem;line-height: 4.5rem;}    
    .lec-circle span {font-size: 3.75rem;width: 5rem;height: 5rem;line-height: 5.5rem;}
    .teacher-cont {margin: auto .6rem;gap: 1rem .8rem;}
    .tea-box {width: calc(100%/2.05 - 6px);}
    .tea-box dl {position: relative;}
    .tea-box dl dt {position: absolute;left: 0;width: 3rem;height: 3rem;}
    .tea-box dl dd {width: 100%;margin: auto;padding: 0 0 0 3.15rem;font-size: 1.15rem;}
    .tea-box dl dd small {font-size: 0.75rem;}
    .tea-box img {height: 180px;width: auto;}    
    .lec-time dl {width: 80%;}
    #event_master h2 {font-size: 1.75rem;}
    .platform .youtube-wrap, .platform .member-wrap, #community_full {width: 100%;}
    .lec-circle {margin-top: 0;}
    .bulletin {top: initial;bottom: 35%;}    
    .guide-btn a {font-size: 1.125rem;}
    .guide-btn a i {display: none;}
    .guide-btn > div {padding: 0.5rem 0;}
    .address {padding: 0;text-align: center;width: 100%;} 
    .showtime ul li, .address, .schedule a {font-size: 1.4rem;}
    .date {border-right: 0;border-bottom: 2px solid #f4c93c;padding: 0 0 0.25rem 0;margin: auto auto 0.5rem;display: block;}
    .showtime ul li {text-align: center;}
    .venue {margin: auto;}
    .coming {font-size: 2.3rem;}
    .gift {font-size: 1.2rem;padding: 1rem;}
    .raffle {font-size: 1.1rem;}
    .gift i {font-size: 3.5rem;}
    .guide-btn a:nth-of-type(2) {margin: auto 0.75rem;}
    .topic {font-size: 1.25rem;}
    #community_full {width: 100% !important;}
    .stream {width: 95%;margin: 1rem auto;}
    @media screen and (width < 360px) {
        #Master_title h1, .lec-circle span {font-size: 3rem;} 
        .tea-box {width: 76%;} 
        .tea-box img {height: 150px;}
    }
}