@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@600;900&display=swap');
:root {
  --shine: #f9f70e;
  --suit-blue: #006faa;
  --blue: #006faa;
  --light-suit-blue: #2c8bcf;
  --lake-blue: #00adac;
  --light-lake-blue: #3cc4ae;
  
}
.ft_NOTO {font-family: 'Noto Sans TC', sans-serif;}
body { color: #373737;}
[v-cloak]{display: none;}

/* Header */
#Web_map {background: linear-gradient(to right, #006caa 15%,#00afab 40%,#00afab 80%,#9ad1b9 100%);}
#Web_map label {border-bottom: 2px solid white !important;}
.sm-map label {filter: brightness(0.5);}
#Web_map label::before, #Web_map label::after {background-color: white !important;}
#Web_map nav {background: linear-gradient(to right, #006caa 15%,#00afab 40%,#00afab 80%,#9ad1b9 100%);}
.adminCollege-logo {display: flex;
  background: #ffffff; /* Old browsers */
  background: -moz-linear-gradient(to right,  #006caa 15%,#00afab 40%,#00afab 80%,#9ad1b9 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(to right,  #006caa 15%,#00afab 40%,#00afab 80%,#9ad1b9 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #006caa 15%,#00afab 40%,#00afab 80%,#9ad1b9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */;}
.adminCollege-header nav {background: rgb(255 255 255 / 50%);padding: 0.5rem 0 0;}
.adminCollege-logo > div, .adminCollege-menu ul {width:1200px;margin: auto;}
.adminCollege-menu ul li {width: calc(100%/7 - 0.25rem);font-size: 1.35rem;text-align: center;padding: 0.5rem 0;color: white;}
.adminCollege-menu ul li a {text-decoration: none;display: block;transition: left 3s ease-in;}
.adminCollege-menu ul li a:hover {top: 0;letter-spacing:0.1rem;color: var(--shine);}
.adminCollege-menu ul li a::after {content: '▶';font-size: 0.75rem;position: relative;top: -3px;left: 5px;opacity: 0.4;}
.adminCollege-menu ul li:nth-of-type(odd) {background-color: var(--light-suit-blue);}
.adminCollege-menu ul li:nth-of-type(even) {background-color: var(--light-lake-blue);}
.adminCollege-menu ul li:hover a::after {position: relative;opacity: .7;left: 8px;color: white;}
.adminCollege-menu ul li:nth-of-type(odd):hover {background-color: #026da3;color: white;}
.adminCollege-menu ul li:nth-of-type(even):hover {background-color: #00aeac;color: white;}
#channel_master {padding: 1rem 0.5rem 2rem;}
#Admin_title {/*background: url(../../../File/Image/KP_bg_line3.png) no-repeat top center, linear-gradient(to right, #f8d093 0%,#fae6df 40%,#fae6df 60%,#fbede0 100%);padding: 1rem;*/background-size: cover;}

/*左選單*/
.leftside_menu {width: 20%;position: relative;margin: auto auto auto 0;}
.left_menu_tabs a {width: 100%;color: white;text-decoration: none;font-size: 1.25rem;padding: 0.15rem 0;text-align: center;position: relative;border-bottom: 1px solid white;transition: left 3s ease-in;}
.left_menu_tabs a::before {content: '';position: absolute;top: -0.2rem;left: 0;width: 40px;height: 40px;clip-path: polygon(55% 50%, 0 10%, 0 90%);background: linear-gradient(to right, transparent 0%, white 70%);display: block;}
.left_menu_tabs a:hover {top: initial;color: var(--shine)}
.left_menu_tabs a:hover::before {left: .3rem;}
.left_menu_tabs a:nth-of-type(1) {background-color: #026da3;}
.left_menu_tabs a:nth-of-type(2) {background-color: #0091ac;}
.left_menu_tabs a:nth-of-type(3) {background-color: #00aeac;}
.left_menu_tabs a:nth-of-type(4) {background-color: #30c6bd;}
.left_menu_cont {position: absolute;top: 0;left: 100%;z-index: 2;width: 200px;}
.left_menu_cont .tabVuecontent {width: 197px;background-color: #f4f4f4;box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;}
.left_menu_cont ul {padding: 0.5rem 1rem;}
.left_menu_cont a {text-decoration: none;color: ;padding: 0 0 0.25rem;font-size: 1.125rem;display: block;}

/* Banner */
.admin_banner_zone {width: 850px;margin: auto 3rem auto auto;}
#Admin_banner .hooper {height: auto;}
#Admin_banner .hooper-next, #Admin_banner .hooper-prev {padding: 0.25rem;outline: none;background: rgb(0 0 0 / 25%);fill: #ffffff;}
#Admin_banner img {margin: auto;}

/* 新班開課 */
.curriculum {position: fixed;top: 140px;z-index: 9;}
.curriculum a {font-size: 1.125rem;display: block;color: #ffffff;box-shadow:rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;text-decoration: none;}
#switch {display: none;}
.seasonclick {transition: .5s;position: fixed;}
.seasonclick label {font-size: 1.125rem;position: absolute;color: #ffffff;text-align: center;box-shadow:rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;cursor: pointer;}
.seasonclick ul {padding: 1rem 0 1rem 1.25rem;}

/* 名師話重點 */
.mvOut {width: calc(100%/2);justify-content: center;}
.movie_title,.eachSite dt,.win_title,.win_subtitle,.teacher_title {font-weight: bold;font-family:'微軟正黑體', 'Noto Sans TC', sans-serif;}
.movie_title {width: 98% !important;margin: auto;border-bottom: 3px #128d9d solid;padding: 0.25rem 0;box-shadow: rgb(137 137 137 / 60%) 0px 5px 3px -4px;}
.movie_title a {color:var(--blue);text-decoration: none;}
.right_to_speak {margin: auto;padding: 1rem 0;}
.right_to_speak dl {text-align: center;margin: auto 0.5rem;}
.right_to_speak dl a {
  width: 10rem;height: 10rem;border-radius: 50%;color: white;display: inline-block;
  text-decoration: none;padding: 1rem 0;box-shadow:rgb(145 145 145 / 60%) 0px 4px 5px 0px;
  transition: .2s ease-in;
}
.right_to_speak dl a:hover { top: 0;transform: scale(1.02);letter-spacing:0.08rem;}
.right_to_speak dl:first-of-type a {background-color: #8263a9;}
.right_to_speak dl:nth-of-type(2) a {background-color: #383b88;}
.right_to_speak dl:nth-of-type(3) a {background-color: #1c5e9b;}
.right_to_speak dl dt {font-size: 2rem;font-family: 'Noto Serif TC', serif;line-height: 2.5rem;padding: 0 0 0.5rem 0;margin: auto auto 0.25rem;position: relative;}
.right_to_speak dl dt::before { position: absolute;content: '';width: 100%;height: 1px;background: linear-gradient(to right,transparent 0%, white 30%,white 70%, transparent 100%);left: 0;bottom: 0;}
.right_to_speak dl dd {font-size: 1.125rem;}

/*國試一點通*/
.mvOut:last-of-type .movie_title {margin: auto auto 1.5rem;}
.essay_box {width: 65%;color: white;display: flex;flex-wrap: wrap;text-align: center;}
.essay_box dt {
  background-color: #1c5e9b;width: 30%;display: flex;align-items: center;justify-content: center;
  font-family: 'Noto Serif TC', serif;font-size: 2rem;line-height: 2.25rem;border-radius:4px 0 0 4px;
}
.essay_box > div {width: 65%;}
.essay_box dd {font-size: 1.125rem;padding: 0.25rem;border-bottom: 1px solid;}
.essay_box dd:nth-of-type(1) {background-color: #1c8a97;border-radius:0 4px 0 0;}
.essay_box dd:nth-of-type(2) {background-color: #137081;}
.essay_box dd:nth-of-type(3) {background-color: #1b7899;}
.essay_box dd:nth-of-type(4) {background-color: #0f5d74;border-bottom: 1px solid #0f5d74;border-radius:0 0 4px 0;}
.essay_box dd a:hover { top: 0;color: var(--shine); }
.think_tank {width: 30%;color: white;}
.think_tank a {background: #d583a9;font-family: 'Noto Serif TC', serif;font-size: 2rem;text-align: center;margin: auto;display: block;padding: 1.5rem 0;border-radius:4px;transition: .2s ease-in;}
.think_tank a:hover { top: 0; background: linear-gradient(30deg,#d583a9 0%,#c95f90 100%);padding-left: 0.3rem;}

/* 師資切換 */
.select1,.select2 {border-bottom:1px #919191 solid; color: #919191;text-align: center;width:50%;margin: 3% auto;}
.select1:hover,.select2:hover {cursor: pointer;}
.content1,.content2 {display: block;padding: 0% 0;}
.out_tea_1,.out_tea_2,.out_tea_3,.out_tea_4,.out_tea_5,.out_tea_6,.out_tea_7,.out_tea_8,.out_tea_9,.out_tea_10,.out_tea_11,.out_tea_12 {border:0px #000 solid;position: absolute;opacity: 0.9;width:100%;padding:5px 0;text-align: center;z-index: 1;bottom:-42%;} 
.out_tea_1,.out_tea_7 {background-color:#62367d ;}.out_tea_2,.out_tea_8 {background-color:#191e73 ;}
.out_tea_3,.out_tea_9 {background-color:#367088 ;}.out_tea_4,.out_tea_10 {background-color:#0c5295 ;}
.out_tea_5,.out_tea_11 {background-color: #313a89;}.out_tea_6,.out_tea_12 {background-color:#675c2d ;}
.teacher .swiper-slide {background: initial;}
.swiper-button-black {opacity: 0.3;}
.tea_show {margin-top:2%;height: 100px;}   
.tea_show,.tea_show a {color: #fff;}
.tea_show dt {border-bottom:dotted 1px #fff;padding: 0% 0 2%;}
.tea_show dd {margin: 1% 0;font-size: 0.8em;}
.active {display: inline-block;animation-name:ani;animation-duration:0.5s;}
.active2 {border-bottom: 5px #2f8bc8 solid;color: var(--blue);font-weight: bold;padding-bottom: 0.5%;}
.active3 {display: block;animation-name: fadeInUpNEW;animation-duration: 1s;bottom: 0;padding-bottom: 1rem;}
.teacher {position: relative;margin: 0 auto 0%;}
.teacher_bg {background: linear-gradient(to bottom,#b2b2b2 5%,#FFF 100%);height: 10px;display: block;}
.teacher_title {padding: 1%; color: #fff;background: #10619a;
  background: -moz-linear-gradient(left, #10619a 0%, #1c8b94 100%); 
  background: -webkit-linear-gradient(left, #10619a 0%,#1c8b94 100%);
  background: linear-gradient(to right, #10619a 0%,#1c8b94 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#10619a', endColorstr='#1c8b94',GradientType=1 );
}

/* 國考新手老手 */
.bgSite1 {background: url(../images/0812085_win01.png) no-repeat #1e689c;background-position: 90% 70%;}
.bgSite2 {background: url(../images/0812085_win02.png) no-repeat #2e9dc7;background-position: 10% 65%;}
.bgSite3 {background: url(../images/0812085_win03.png) no-repeat #40b0b9;background-position: 90% 40%;}
.bgSite4 {background: url(../images/0812085_win04.png) no-repeat #3cc3a8;background-position: 5% 45%;}
.eachSite .bg {width: calc(100%/2);}
.eachSite .bg:hover dl i { transform: scale(1.1) translate(-10%,-10%);transition: .2s ease-in; }
.eachSite .bg:nth-of-type(1):hover { background: linear-gradient(135deg,#1c5e9b 80%,#1587f1 100%); }
.eachSite .bg:nth-of-type(1) {background-color: #1c5e9b;}
.eachSite .bg:nth-of-type(2):hover { background: linear-gradient(45deg,#5fc5ed 10%,#2e9dc8 20%); }
.eachSite .bg:nth-of-type(2) {background-color: #2e9dc8;}
.eachSite .bg:nth-of-type(3):hover { background: linear-gradient(45deg,#40b1b9 80%,#acf9ff 100%); }
.eachSite .bg:nth-of-type(3) {background-color: #40b1b9;}
.eachSite .bg:nth-of-type(4):hover { background: linear-gradient(135deg,#72e1cb 10%,#3dc3a8 20%); }
.eachSite .bg:nth-of-type(4) {background-color: #3dc3a8;}
.eachSite dl {width: calc(1200px / 2);display: flex;flex-wrap: wrap;align-items: center;}
.eachSite .bg:nth-of-type(1) dl, .eachSite .bg:nth-of-type(3) dl {margin: auto 0 auto auto;padding: 6% 12% 8% 0;}
.eachSite .bg:nth-of-type(2) dl, .eachSite .bg:nth-of-type(4) dl {margin: auto auto auto 0;padding: 6% 0 8% 12%;}
.eachSite dl i {
  font-size: 3rem;background-image: linear-gradient(-45deg, #b17d27 0%, #fdfbd5 25%, #b17d27 50%, #fdfbd5 75%, #b17d27 100%);
  -webkit-background-clip: text;background-clip: text;color: transparent;
}
.eachSite dl > div {width: calc(100% - 5rem);padding: 0 0 0 1rem;font-size: 1.125rem;}
.eachSite dl dt {font-size: 2rem;}
.eachSite dl dd a, .eachSite dl dd span {border-right: 1px solid;padding: 0 0.75rem 0.25rem 0;margin: auto 0.75rem auto auto;display: inline-flex;line-height: 1rem;}
.eachSite dl dd a:last-of-type, .eachSite dl dd span:last-of-type {border-right: 0;}
.eachSite {position: relative;}
.eachSite dl,.eachSite dl a,.Community a {color:#fff;}
.eachSite dt {border-bottom: 1px #fff dotted;text-align: center;margin-bottom: 3%;}
.eachSite_sub_label { color: var(--shine) }
.winout {width: calc(100%/2);}
.win {box-shadow: -10px 10px 42px -5px rgb(70 70 70 / 50%);top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 180px;height: 180px;background: linear-gradient(30deg,white 40%,transparent 100%); transform: rotate(45deg);text-align: center;display: flex;flex-wrap: wrap;align-items: center;position: absolute;}
.win_title {font-weight: bold;transform: rotate(-45deg);width:100%;}
.win_subtitle { font-family: 'Noto Serif TC', serif; }
.ycolor {color: #fff100;}
.fcolor1 { color: #fc527a !important; }
.triangle {width: 0;height: 0;left:48%;top: 50px;position: absolute; border-style: solid; border-width: 30.2px 28px 0px 28px; border-color: #167697 transparent transparent transparent;}
.gift img {width: 100%;height: auto;}
@keyframes fadeInUpNEW {from {opacity: 0; transform: translate3d(0, 100%, 0); } to {opacity: 1; transform: none;}}
@keyframes ani {from {opacity: 0;}to {opacity:10;}}
.reservation {background-color: #f48b36;}
.hotbtn,.newBtn {background-color: #fff;}
.free {background-color: #f45e36;}
.reservation,.free {color: #fff;}
.hotbtn {color: #f45e36;}
.newBtn {color: #1e689c;}
.reservation,.hotbtn,.newBtn,.free {border-radius: 5px;margin-left: 2%;padding: 0.5% 1.5%;font-size: 0.8em;}
.hotbtn,.newBtn {font-size: 0.7em;}

/* 考取秘技大公開 */
.success-skills {justify-content: space-around;align-items: center;padding: 0 0 1rem;}
.student_youtube {width: 480px;}
.skills-list {width: calc(100% - 500px);}
.skills-title {text-align: center;font-weight: 500;display: block;background: linear-gradient(to right, #835080 0%,#d885a9 100%);padding: 1%;color: #fff;margin: auto auto 1rem;}
.skills-student {width: calc(100%/3);text-align: center;margin: 0.5rem auto;}
.skills-student img {width: 100px;height: 100px;object-fit: cover;border-radius: 50%;margin: auto;}
.skills-student figure {width: 100px;height: 100px;margin: auto;background: #fff4f1;border-radius: 50%;}
.skills-student figure img {object-fit: initial;}
.student-title {display: block;font-size: 1rem;padding-top: 2%;}
.student-title a {text-decoration: none;color: #ffffff;display: inline-block;background-color: #bc749c;border-radius: 1em;padding: 0.1em 0.5em;margin-top: 0.2em;}
.student-title strong {font-weight: bold;color: #000;margin-right: 0.3em;}
.student-get {font-weight: bold;color: #e42e11;font-weight: normal;font-size: 0.875rem;}
.special-admission {margin: auto 0.25rem;font-weight: bold;border-left: dotted 1px #e42e11;padding: 0 0.5em;}
.student_youtube .hooper-next, .student_youtube .hooper-prev {padding: 0.25rem;outline: none;background: rgb(0 0 0 / 25%);fill: #ffffff;}
.student_youtube .hooper {height: auto;}


@media (min-width: 1201px) {  
  .w-1200 {width: 1200px;}
  #BodyContentMainNavigator {margin-top: 11.5rem;}
  #Admin_title {width: 1200px;margin: auto;}
  #Admin_banner .hooper-prev {left: -1rem;}
  #Admin_banner .hooper-next {right: -1rem;}  
  .eachSite_R {padding-left: 22%!important;}
  .eachSite dd {padding-left: 3%;}
  .adminCollege-article .th-fixed th {position: initial;}
  .seasonclick {transform: translateX(0%);left: -200px;width: 200px;border-radius: 0 0 0.25rem 0;background: linear-gradient(to left, #EFEFEF 0%, #FFFFFF 100%);}
  .seasonclick label {writing-mode: vertical-lr;padding: 1.5rem 0.5rem;border-radius: 0 1rem 1rem 0;left: 100%;background: linear-gradient(to right, #835080 0%,#d885a9 100%);}
  .curriculum a {padding: 1.5rem 0.5rem;border-radius: 0 1rem 1rem 0;writing-mode: vertical-lr;background: linear-gradient(to right, #835080 0%,#d885a9 100%);}
  #switch:checked+.seasonclick {transform: translateX(100%);}
  #switch:checked+.seasonclick label {background: linear-gradient(to left, #835080 0%,#d885a9 100%);}
  #switch:checked+.seasonclick i {transform: scaleX(-1);} 
  /* 考前講座 */
  .exam-before .video_wrap {width: 60%;margin: 1rem auto 2rem;}
}

@media (max-width: 1200px) {
  .adminCollege-menu ul {width: 100%;}
  .adminCollege-menu ul li {width: calc(100%/8);font-size: 1rem;padding: 0.25rem;}
  .adminCollege-menu ul li a::after {font-size: 0.5rem;}
  .adminCollege-menu ul li:hover a::after {font-size: 0.6rem;}
  .skills-student {width: calc(100%/3);}
  .Mv_content dd {display: inline-block;margin-right: 0.5rem;}
  .adminCollege-article .th-fixed th {top: 9rem;}
  .right_to_speak dl dt {font-size: 1.75rem;line-height: 2rem;}
  .right_to_speak dl a {width: 9rem;height: 9rem;}
  .essay_box dt {width: 25%;}
  .essay_box > div {width: 75%;}
  .eachSite dl {width: 90%;}
  .skills-list {width: 100%;}
  .curriculum {top: auto;left: 0;bottom: 0;}
  .curriculum a {padding: 0.5rem 1.5rem;border-radius: 1rem 1rem 0 0;background: linear-gradient(to top, #835080 0%,#d885a9 100%);}
  .curriculum a i {transform: rotate(-90deg);padding: 0px 6px 0px 6px;}
  .seasonclick {transform: translateY(100%);bottom: 0;width: 100%;background: linear-gradient(to bottom, #EFEFEF 0%, #FFFFFF 100%);}
  .seasonclick label {padding: 0.5rem 1.5rem;border-radius: 1rem 1rem 0 0;left: 0;right: auto;bottom: 100%;background: linear-gradient(to top, #835080 0%,#d885a9 100%);}
  .seasonclick label i {transform: rotate(-90deg);padding: 0px 6px 0px 6px;}
  .seasonclick ul {display: flex;flex-wrap: wrap;width: 100%;padding: 0.5rem 0;}
  .seasonclick ul li {width: calc(100%/2);text-align: center;}
  #switch:checked+.seasonclick {transform: translateY(0%);}
  #switch:checked+.seasonclick i {transform: rotate(90deg);} 
}

@media screen and (min-width: 821px) and (max-width: 1179px) { 
  .leftside_menu {width: calc(100% - 825px);}
  .admin_banner_zone {width: 800px;margin: auto;}  
}

@media screen and (max-width: 820px) { 
  .leftside_menu {width: 100%;}
  .admin_banner_zone {width: 100%;margin: auto;}
  .left_menu_tabs a {width: calc(100%/4);}
  .left_menu_cont {top: 100%;left: 0;z-index: 2;width: 100%;}
  .left_menu_cont .tabVuecontent {width: 100%;animation-name: initial;}
  .left_menu_cont ul {display: flex;flex-wrap: wrap;}
  .left_menu_cont ul li {margin: auto 0.5rem;}
  .essay_box {width: 100%;}
  .think_tank {width: 100%;}
}

@media (max-width: 767px) {
  #Web_map nav {margin-top: 0px;}
  .adminCollege-logo {padding: 0.5rem 0;}
  /*#BodyContentMainNavigator {margin-top: 7.25rem;}*/  
  .mvOut, .Mv_content, .newclass, .class_out, .class_out li {width: 100%;}
  .adminCollege-menu ul li a::after {content: none;}
  .left_menu_tabs a {width: calc(100%/2);}
  .left_menu_tabs a::before {background: linear-gradient(to right, transparent 0%, rgb(255 255 255 / 50%) 70%);}
  .class_out li {text-align: center;}
  .skills-student {width: calc(100%/2);}
  .triangle {left: 42%;top: 15%;}
  @media screen and (max-width: 360px) { .triangle {display: none;} }
  .province {margin-top: 1rem;}
  .right_to_speak { flex-direction: column;gap: 1rem; }
  .right_to_speak dl {margin: auto;}
  .essay_box {width: 100%;}
  .think_tank {width: 100%;}
  .think_tank a { border-radius: 0 0 4px 4px; }
  .eachSite { margin: 2rem auto 0; }
  .eachSite .bg {width: 100%;} 
  .eachSite dl i {margin: auto;}
  .eachSite dl > div {width: 100%;padding: 0;} 
  .student_youtube {width: 100%;}  
  .eachSite .win {order: 1;position: relative;margin-bottom: 1.5rem;}
  .eachSite .bg {order: 2;}
  .essay_box dt { border-radius: 4px 0 0 0; }
  .essay_box dd:nth-of-type(4) { border-radius:0; }
}
@media screen and (max-width: 767px) and (orientation: portrait){
  .student-get{font-size:0.8rem;}
}
@media (max-width:320px) {
  .banner-tabs a {font-size: 0.875rem;}
}