﻿article {color: #3f3f3f;}
#event_master h1 {font-size: 4.6rem;}
#event_master h2 {font-size: 3.2rem;}
#EventContainer .bgcolor1 {background: white;}
#EventContainer .bgcolor2 {background:linear-gradient(to bottom,white 10%,#ffe8c9 25%,#fffce4 70%);z-index: 0;overflow: hidden;position: relative;}
#EventContainer .bgcolor4 {background: linear-gradient(63deg, #F2E94E 24%, #FFB521 92%);}
#EventContainer .bgcolor2:before, #EventContainer .bgcolor2:after {position: absolute;content: "";z-index: -1;opacity: 0.8;}
#EventContainer .bgcolor2:before {background: url(../../images/1104072_container_bg1.png) left 450px no-repeat,url(../../images/1104072_container_bg1.png) left 2500px no-repeat;width: 398px;height:100%;top: 0;left: -5%;filter: blur(5px) opacity(.4);}
#EventContainer .bgcolor2:after {background: url(../../images/1104072_container_bg2.png) right 700px no-repeat,url(../../images/1104072_container_bg2.png) right 3100px no-repeat;width: 451px;height:100%;right: -9%;top:15%;filter: blur(5px) opacity(.4);}
#event_sec, #event_third, #event_fourth, #event_fifth, #event_sixth {padding: 1rem;}
#EventContainer #Master_title {background: initial;height: auto;}
.banner img {margin: auto;}
.banner {position: relative;margin: auto;background: #faf484;}
.banner_title,.banner_teachers,.download {position: absolute;content: "";display:block;}
.banner_title {bottom:-1.5%;right:1.5%;z-index: 5;}
.download {z-index: 5;right:0%;bottom: 20%;font-size: 1.3rem;color: #464646;font-weight: bold;text-align: center;display: inline-block;background-color: #ffee38;border-radius: 8px;padding: 1%;}
.download a {color: #464646;font-weight: bold;}
.download a:hover {text-decoration:none;}
.download i {font-size: 1.6rem;line-height: 1.3;}

:root{
  --font-green1:#439aa1;
  --font-pink1:#DD4B84;
  --font-purple1:#892789;
  --linear1:linear-gradient(to right,var(--font-pink1) 60%,var(--font-green1) 100%);
  --trans:.3s ease;
}

/*選單*/
.Vuetabs {position: relative;}
.Vuetabs a:first-of-type,.Vuetabs a:first-of-type:hover{border-radius:0 0 0  30px;}
.Vuetabs a:last-of-type,.Vuetabs a:last-of-type:hover{border-radius: 0 0 30px 0;}
.Vuetabs a {font-size: 1.8rem; cursor: pointer;padding:1rem;transition: background-color 0.2s;background-color:#faf585;width: calc(100%/2);box-sizing: border-box;text-align: center;font-weight: bold;}
.Vuetabs a:last-of-type {border-right: none;}
.Vuetabs a:hover {background-color: #ffde99; color: #484848;}
.Vuetabs a.active {background-color: var(--font-pink1);color: #fff;cursor: default;text-decoration: none;margin-top: -.2rem;}
.Vuetabs a:nth-of-type(even).active {background-color: var(--font-purple1);}
.tabVuecontent {padding: 2rem;background: linear-gradient(to bottom, rgba(255,255,255,1) 20%, #ffead7 65%,white 76%);}
#Ask {background: #f0841a !important;}
.paper-link {text-align: center;padding: 0.5rem 0;font-size: 1.25rem;}
.paper-link, .paper-link a {color: var(--font-pink1);}
.paper-link a:first-of-type:before {content: '\f56d';font-family: "Font Awesome 5 Free";font-weight: bold;margin-right: 0.5rem;}
.add-in {font-size: 1.5rem;text-align: center;}

/* 2023高普考 */
.seminar {margin: 0.5rem;width: calc(100%/2 - 1rem);box-shadow: rgba(151, 151, 151, 0.6) 15px 15px 25px -20px;border-radius: 12px;overflow: hidden;transition: var(--trans)}
.seminar:hover{/*width: calc(100%/2 - 1.1rem);background: white;*/}
.seminar:hover dl dt{padding: 1% 3% 3% 10%;}
.seminar:hover .teacher-name + img{transform: scale(1.05);}
.seminar:hover .teacher-name{transform: scale(1.08);left: -.5rem;bottom: 1.2rem;}
.seminar dl {width: 100%;display: flex;flex-wrap: wrap;align-items: center;}
.seminar dl dt {color: #fff;font-size: 2.3rem;padding: 1% 5% 3%;display: inline-block;border-radius: 0 30px 30px 0;background-color: var(--font-pink1);order: 1;margin-right: 50%;transition: var(--trans);}
.session2 .seminar dl dt {background-color: var(--font-purple1);}
.session2 .seminar:nth-last-of-type(2) dl dt {margin-right: 40%;}
.seminar dl dd {margin: auto;}
.seminar dl dd:last-of-type {order: 2;}
.seminar dl dd:first-of-type {order: 3;position: relative;}
.teacher-name {background: linear-gradient(63deg, #F2E94E 24%, #FFB521 92%);display: flex;flex-wrap: wrap;align-content: center;justify-content: center;border-radius: 50%;  width: 140px;height: 140px;font-size: 2rem;padding: 1rem 0;text-align: center;font-weight: bold;position: absolute;left: -.5rem;bottom: 0.8rem;transition: var(--trans);}
.teacher-name + img {z-index: 2;position: relative;padding-left: 5rem;transition: .3s ease;}
.teacher-name small {font-size: 1rem;width: 100%;font-weight: initial;}
.time-detail {letter-spacing: 2px;font-size: 1.3rem;}
.time-detail li:first-of-type {font-size: 1.6rem;font-weight: bold;color: var(--font-green1);}
.time-detail li:nth-of-type(2) {color: var(--font-pink1);}
.video-pic {position: relative;}
.video-pic::before {content: '';background: url(https://goldensun.get.com.tw/File/Image/play.svg) no-repeat;top: 0;bottom: 0;left: 0;right: 0;margin: auto;position: absolute;width: 65px;height: 65px;}

/* 先測驗了解實力 */
.triangle {position: relative;color: white;margin: auto 2rem;z-index: 2;transition: var(--trans);}
.triangle:hover::after{top: -8px;}
.triangle::after {position: absolute;content: '';width: 0;height: 0;border-style: solid;border-width: 50px 0 50px 90px;border-color: transparent transparent transparent var(--font-pink1);z-index: -1;left: -5px;top: -5px;}
.triangle2::after {border-color: transparent transparent transparent var(--font-purple1);}
.each_out {width: 100%;text-align: center;padding: 2rem 0 0;}
.study_feature {width: calc(100%/4 - 1rem);margin: 0 0.5rem;border: 0px #000 solid;font-size: 1.2em;text-align: center;transition: var(--trans);}
.study_feature:hover figure{transform: scale(1.05);}
.study_feature:hover li:nth-child(2){color: #F2E94E;margin-top: .2rem;}
.study_feature li:nth-child(2) {color: #fff;}
.study_feature li:nth-child(2) {background: var(--linear1);position: relative;padding: 5px 0;font-size: 1.2em;transition: var(--trans);}
.study_feature li:nth-child(2):before {border-width: 22px 0px 22px 8.5px;border-color: transparent transparent transparent var(--font-green1);right: -8px;content: "";position: absolute;border-style: solid;width: 0;height: 0;top: 0;}
.study_feature,.fa-arrow-circle-right {display: inline-table;}
.study_feature figure {background-color: #FFF;border-radius: 99em;text-align: center;padding: 15px 14px 11px;display: inline-block;}
.study_feature figure img {width: 50px;height: 50px;transition: var(--trans);}

/* 我要預約講座 */
#Ask .ask-wrap .ask-title {/*font-size: 2rem;*/}
.ask-title small {text-align: center;font-size: 1.25rem;display: block;}
#Ask .circle-check input, #Ask .circle-check input[name="sContent"] {width: initial !important;vertical-align: middle;margin: auto 0.25rem 0.25rem auto;}
.circle-check {align-items: baseline;margin-bottom: 0.5rem;}
.circle-check dt {margin-right: 0.5rem;font-weight: bold;width: auto;}
.circle-check dd {margin-right: 1rem;}
.circle-check:not(:last-of-type) {border-bottom: 1px dotted;}
/* .reserve {position: fixed;right: 0;bottom: calc(15% + 200px);z-index: 3;}
.reserve a {background: var(--linear1);color: white;width: 120px;height: 120px;font-size: 1.5rem;border-radius: 50%;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;text-decoration: none;text-align: center;padding: 0 0 1rem;transition: var(--trans);}
.reserve a:hover {transform: scale(.98);}
.reserve i {width: 100%;margin-bottom: -2rem;animation: shakeDown 6s ease 1s infinite;}
@keyframes shakeDown {
    from, to {
      transform: translate3d(0, 0, 0);
    }
  
    10%, 30%, 50%, 70%, 90% {
      transform: translate3d(0, -8px, 0);
    }
  
    20%, 40%, 60%, 80% {
      transform: translate3d(0, 8px, 0);
    }
} */
.keycode {position: fixed;left: 0;bottom: 0;z-index: 4;width: 100%;text-align: center;background: var(--font-green1);}
.reserve {position: fixed;left: 0;bottom: 0;z-index: 3;width: 100%;text-align: center;background: var(--font-pink1);}
.reserve a, .keycode a {color: white;padding: 0.5rem;display: block;font-size: 1.25rem;text-decoration: none;position: relative;}  
.reserve a:hover {position: initial;}
.reserve a::before {display: block;width: 0;height: 100%;position: absolute;right: 0;bottom: 0;background: linear-gradient(90deg, #fffffd00 0%, #DD4B84 40%, #439aa1 100%);content: '';z-index: -1;animation: infobe 10s infinite;}
@-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}
}

@media (min-width: 1201px) {	
	#event_master, #event_sec, #event_third, #event_fourth, #event_fifth, #event_sixth {width: 1200px;margin: auto;}
  #Ask SELECT, #Ask input[type="text"] {/*width: 15% !important;*/}
  .circle-check dd {width: calc(100%/6);}
  .circle-check dd:nth-of-type(6) {margin-left: 3.5rem;}
}
@media (max-width: 1200px) {
    .banner {width: 100%;}
    #Vuetabs .Vuetabs a, #Vuetabs .Vuetabs a:hover {border-radius: 0;}
    .seminar dl dt {margin-right: 25%;}
    .circle-check dt {width: 100%;padding-top: 0.25rem;}
}
@media (min-width: 768px) and (max-width: 1199px) {
    .banner {overflow: inherit;}
    .banner img {width: 100%;}
    .banner_teachers {top: 9%;margin: auto;left: -5%;right: 0;top:inherit;}
    .banner_title {bottom: 0;margin: auto;left: 0;right: 0;top:inherit;}  
    .session2 .seminar:nth-last-of-type(2) dl dt {margin-right: 0;}
    #Ask SELECT, #Ask input {width: auto !important;}   
}
@media (max-width: 767px) and (orientation : portrait) {
    #BodyContentMainNavigator{margin: 0 1rem;}
    .lecture-video {width: 100%;}
    .banner {overflow: inherit;}
    .Vuetabs a {font-size: 1.2rem;}
    .add-in {font-size: 1.35rem;}
    .download {font-size: 1rem;left: 4%;bottom: 10%;width: 5em;}  
    #EventContainer header h1 {font-size: 1.6rem;} 
    .triangle::after{border-width: 26px 0 26px 50px;}
    .seminar {width: 100%;}
    .seminar dl dt {font-size:1.8rem;}
    .session2 .seminar:nth-last-of-type(2) dl dt {margin-right: 15%;}
    .study_feature {width: calc(100%/2 - 1rem);}
    .tabVuecontent {padding: 1rem;}
    /* .reserve {position: fixed;left: 0;top: auto;bottom: 0;}
    .reserve a {width: initial;height: initial;border-radius: initial;padding: initial;}
    .reserve a:hover {transform: initial;}
    .reserve i {display: none;} */
    input[type="checkbox"] {width: 99%;}
    #Ask .circle-check input, #Ask .circle-check input[name="sContent"] {display: inline-block;}  
}