@import url("./common.css");

/*DIY--設計可增加用樣式*/
:root {
    --pink:#d355ac;
    --pink-light: #F4D2ED;
    --tiffany: #78dadd;
    --tiffany-dark: #1b9b9f;
    --tiffany-light: #b9e5e3;
    --purple: #983d90;
    --gray: #5A5B5C;
    --gray-light: #FAFAFA;
    --blueberry: #6558BC;
    --berry-light: #D8D5EE;
    --red-hot:rgb(209, 4, 76);
}
.bgcolor0 {background-color: white;}
.bgcolor1 {background-color: #a9779d;}
.bgcolor2 {background-color: #85b9a8;}
.bgcolor3 {background-color: #dfceb0;}
.bgcolor4 {background-color: #a99675;}
.bg-gray {background-color: #efefef;}
.bg-linear-gray {background: linear-gradient(to bottom, #efefef 0%, transparent 30%);}
.bgcolor5 {background: linear-gradient(to right, white 0%, #FFFDD3 100%);}
.fcolor1 {color: #544427!important;border-bottom: solid 1px #544427!important;}
.fcolor2 {color: var(--red-hot);}
.reg_go{color: var(--red-hot);}
.new::before,.hot::before{color: white;padding: 0.25rem;margin: 0 0.25rem;font-size: 0.90rem;}
.new::before{content: 'NEW';background: var(--purple);}
.hot::before{content: 'HOT';background: var(--red-hot);}
h1 {font-size: 3.8rem;line-height: 4.2rem;}
.main_banner h1 {font-size: 5rem;font-family: 'Noto Serif TC', serif;font-weight: 700;text-align: left;padding: 4% 0% 1%;line-height: 5.5rem;letter-spacing: 0.7rem;}
.main_banner h2 {font-size: 2.7rem;font-family: 'Noto Serif TC', serif;font-weight: 700;color: #b77a1d;text-align: left;padding: 0% 0%;letter-spacing: 0.6rem;line-height: 3.2rem;margin: 1% 0 0.5% 0;}
.main_hs p {font-size: 1.7rem;text-align: left;font-family: 'Noto Serif TC', serif;font-weight: 700;letter-spacing: 0.1rem;line-height: 2.2rem;text-wrap: pretty;}
.main_hs p:nth-of-type(1) {/*padding-bottom: 1%;*/padding-bottom: 1rem;}
.main_hs p:nth-of-type(3) {padding: 2rem 0 0;/*font-size: 2.2rem;*/}
.mt-6 {margin-top: 1rem !important;}
.main_hs p strong {/*font-size: 2.2rem;*/display: inline-block;/*margin: 0.5rem;*/background: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,0) 70%,#fff100 70%,#fff100 100%);font-family: 'Noto Serif TC', serif;font-weight: 900;}
.hs {background-color: #efefef;padding: 1% 0%;margin: 1% 0 0;}
.welcome {text-align: right;margin: auto 10% auto auto;font-size: 1.5rem;padding: 1% 29% 1% 0%;font-family: 'Noto Serif TC', serif;font-weight: 700;}
.welcome a {text-decoration: none;background-color: #fff100;font-family: 'Noto Serif TC', serif;font-weight: 700;margin-left: 0.2rem;}
.chair {background: linear-gradient(to right,#ffffff00 25%,#85b9a8 25%,#85b9a8 100%,#ffffff 100%);float: right;padding: 4% 0% 0 0;}
.chair img {width: 85%;margin: 0 auto;}
.main_hs p strong:nth-of-type(4) {/*margin: 0.5rem 0.5rem 0.5rem 0;*/}

/*舊生回門禮，有書有課有多聞！*/
.event_title {border-bottom: solid 1px #fff;color: #fff;text-align: left;margin: auto auto 1.5rem;font-family: 'Noto Serif TC', serif;font-weight: 700;padding: 0.5rem 0;width: 100%;font-size: 3.8rem;line-height: 4.2rem;position: relative;}
#event_master .event_title {color: #544427;border-bottom: 0;margin: auto;}
.event_title img {position: absolute;right: 0;top: 0;}
.back-gift {text-align: left;font-size: 1.4rem;margin: 0.5rem auto auto 0;position: relative;padding: 1rem 0 2rem;}
.des_title {color: #ffedcc;background: linear-gradient(to right, #814574 75%, transparent 100%);font-size: 1.5rem;margin: auto 0.5rem auto auto;padding: 0.25rem 2rem 0.25rem 1rem;font-family: 'Noto Serif TC', serif;}
.back-gift .des_title a {font-family: 'Noto Serif TC', serif;}
.back-gift li {/*color: #fff3fc;*/color: #814574;}
.back-gift li:not(:last-of-type) {margin: auto auto 1.5rem;}
#event_master .back-gift li .sm\:block {margin-left: 0;}
.branchtabs {justify-content: center;padding: 2rem 0;}
#gifttabs .tabVuecontent {margin: auto;}
#gifttabs .branchtabs a {border-radius: 2rem;margin: auto 1rem;color: #b77a1d;border: 1px solid #b77a1d;background-color: white;width: calc(100% / 3 - 2rem);padding: 0 0 0.5rem;}
#gifttabs .branchtabs a.active {/*box-shadow: rgba(183, 122, 29, 0.2) 0px 5px, rgba(183, 122, 29, 0.1) 0px 10px;*/box-shadow: rgba(183, 122, 29, 0.2) 0px 0px 0px 5px, rgba(183, 122, 29, 0.1) 0px 0px 0px 10px}
.branch_box {z-index: 2;width: 100%;}
.give {font-size: 2rem;color: var(--red-hot);padding: 0 0.15rem;}
.table_style .text-sm {font-size: 1rem;}

/*跨學科免費體驗課*/
.table_style {font-size: 1.1rem;}
.table_style th {background-color: #94d5c0;padding: 0.5rem;border-right: 1px dotted var(--gray);}
.table_style td {padding: 0.5rem;background-color: white;border-bottom: 1px dotted var(--gray);}
#event_sec .mooc_table .mooc_sort {background-color: #ddf5ed;font-size: 1.4rem;color: #305a4d;}
.mooc_table tr:nth-of-type(odd) td {background-color: var(--gray-light);}
.apply  {padding: 1% 0;position: relative;}
.apply a {/*display: inline-block;background: linear-gradient(to right, var(--pink) 10%, var(--blueberry) 100%);*/color: #000;padding: 0.3rem 1.5rem;border-radius: 2rem;text-decoration: none;margin: 0.5rem;background-color: #fff100;font-size: 1.5rem;}
.realname {padding: 0.5rem 0 1rem;color: #544427;font-size: 0.85rem;}
.realname li::before {content: '※';}
.realname li {padding: 0 0.5rem 0 0;}

/*來聽講座，汲取高手內力化為己用！*/
.lecture_wrap:not(:last-of-type) {padding: 0 0 2rem;}
.lecture_title {color: #953a81;font-size: 2rem;}
.lecture_title strong {}
.lecture_wrap:nth-of-type(even) .lecture_title {color: #3b7663;}
.lecture_wrap:nth-of-type(even) .lecture_table th {background-color: #85b9a8;}
.lecture_table th {background-color: #a9779d;color: white;font-weight: normal;font-size: 1.2rem;}
.lecture_table th:last-of-type, .table_style th:last-of-type {border-right: 0;}
.lecture_table tr:nth-of-type(odd) td {background-color: var(--gray-light);}
.essay_table td, .lecture_wrap .essay_table td:last-of-type, .lecture_wrap .essay_table tr:nth-of-type(odd) td, .lecture_wrap .essay_table td:first-of-type {text-align: center;padding: 0.5rem 2rem;}
.lecture_table td:first-of-type {text-align: left;padding: 0.5rem 2rem;}
.lecture_table td:last-of-type {text-align: center;}
.lecture_note li {font-size: 1.1rem;padding: 0.5rem;}
.lecture_wrap .essay_table tr td.text-left, .lecture_wrap .work_table tr td.text-left {text-align: left;padding: 0.5rem 2rem;}
.lecture_table tr td.bgcolor0 {background-color: white;}
.work_table td.text-center {text-align: center;}

/*轉職、考研、跨領域運試正當時*/
.Vuetabs a {font-size: 1.5rem;width: calc(100%/4);text-decoration: none;cursor: pointer;padding: 0.5rem 0;text-align: center;background-color: #ddf5ed;}
.Vuetabs a.active {cursor: default;transition: background-color 0.2s;border: 1px solid #b96ba6;background-color: white;color: #b96ba6;}
.tabVuecontent {justify-content: space-around;margin: 1rem auto;}
.month {background-color: #FFF;width: calc(100%/3 - 0.25rem);}
.month_list dt {background-color: #379375;color: white;font-size: 1.1rem;text-align: center;padding: 0.5rem;}
.month_list dd {font-size: 1.1rem;text-align: left;border-bottom: 1px dotted var(--gray);padding: 0.5rem;}
.month_list dd a{text-decoration:none;display:inline-flex}
.month_list dd span {background-color: #b96ba6;color: white;padding: 0 0.5rem;border-radius: 1rem;}
.news{padding: 0 0 1.5rem;text-align: left;}
.news a{color: white;font-size: 1.25rem;margin: auto 1rem auto 0;}
.news a::before{text-decoration: none;display: inline-flex;}

/*ask*/
.asktitle small {font-size: 1.5rem;}
.target-fix {position: relative;display: block;visibility: hidden;}

@media screen and (min-width: 1201px) {
    .event_title img {top: -3rem;}
    .bgcolor0 {background-size: 25%;background-position: 70% 40%;}
    #event_sec, #event_third, #event_fourth, #event_fifth, .lecture_wrap {width:1200px;padding: 1rem 0;margin: auto;clear: both;}
    .branchtabs {width:1200px;margin: auto;clear: both;}
    .back-gift {width:1200px;margin: auto;}
    #event_master .event_title {width:1200px;}
    .main_banner {width:1200px;margin: auto;} 
	.main_hs {width:1200px;margin: auto;}    
    .md\:block {display: block;}    
    .md\:pl-22{padding-left: 11rem;}
    .md\:pl-25{padding-left: 12.5rem;}
    .bg-taipei {background-image: url(../../images/1303010/taipei.jpg);background-repeat: no-repeat;background-position: right 50%;background-size: 45%;position: relative;width: 100%;}
    .bg-taichung {background-image: url(../../images/1303010/taichung.jpg);background-repeat: no-repeat;background-position: right 90%;background-size: 50%;position: relative;width: 100%;}
    .bg-tainan {background-image: url(../../images/1303010/tainan.jpg);background-repeat: no-repeat;background-position: right 30%;background-size: 50%;position: relative;width: 100%;}
    .bg-taipei::before, .bg-taichung::before, .bg-tainan::before {background: linear-gradient(to right, rgba(255, 255, 255, 1) 55%,rgba(255, 255, 255, 0.9) 65%, rgba(255, 255, 255, 0.2) 100%);position: absolute;content: '';width: 100%;height: 100%;left: 0;}
    .news a::before{margin: 0 0.35rem 0 0;}
}

@media screen and (max-width: 1200px) {   
    .bgcolor0 {}
    h1 {font-size: 2rem;padding: 0 0.5rem;line-height: 2.8rem;}
    .lecture_title {font-size: 1.5rem;}
    .event_title {text-align: center;text-wrap-style: balance;word-break: keep-all;overflow-wrap: anywhere;}
    .table_style td {text-align: center;}
    .essay_table td, .lecture_wrap .essay_table td:last-of-type, .lecture_wrap .essay_table tr:nth-of-type(odd) td, .lecture_wrap .essay_table td:first-of-type, .lecture_wrap .essay_table tr td.text-left, .lecture_wrap .work_table tr td.text-left, .lecture_table td:first-of-type {padding: 0.5rem;}
    @media all and (orientation : portrait) {#Master_title {margin-top: 15%;}}
    @media screen and  (orientation:landscape) {#Master_title {margin-top: 10%;}} 
    .st-content img {width: 85%;}
    .event_title img {width: 15%;}
    .bg-taipei, .bg-taichung, .bg-tainan {background-position: right top;}    
    .bg-taipei::before, .bg-taichung::before, .bg-tainan::before {background: linear-gradient(to right, rgba(255, 255, 255, 1) 40%,rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.5) 100%);}
    .Vuetabs small {font-size: 1.25rem;}
    .news a:last-of-type{display: block;margin: 0.25rem auto auto 0;}
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
    .md\:block {display: block;}    
    .md\:pl-22{padding-left: 11rem;}
    .md\:pl-25{padding-left: 12.5rem;}
    .sm\:block {display: initial;}
}

@media screen and (max-width: 767px) {    
    .sm\:block {display: block;}
	.chair {width: 43%;}	
	.main_banner h1 {font-size: 2.05rem;line-height: 3rem;letter-spacing: 0;padding: 4% 0% 1% 0.5rem;}
	.main_banner h2 {font-size: 1.25rem;letter-spacing: 0.15rem;line-height: 1.75rem;padding: 0 0 0 0.5rem;}
	.hs {padding: 3% 0%;}
	.main_hs p {font-size: 1.2rem;line-height: 1.5rem;letter-spacing: 0;padding: 0 0 0 2%;}
	.main_hs p strong {/*font-size: 1.35rem;margin: 0.125rem 0.25rem;*/}
	.apply {padding: 2% 0 5%;}
    .back-gift .des_title {display: block;width: fit-content;margin: auto 0.5rem auto -1rem;}
    .back-gift {padding: 0 0 1rem;}
    .back-gift li {padding: 0 1rem;}
    .back-gift li:nth-of-type(n+4):nth-of-type(-n+6) span {margin-left: 0;}
    .month {width: 100%;}
    .Vuetabs small {display: block;font-size: 1rem;}
    .news a{display: block;margin: 0.25rem auto auto 0;font-size: 1.05rem;}
    .target-fix {top: -3.5rem;}
	.event_title img {width: 30%;}
    .branch_box .event_title {text-align: left;}
    .event_title {font-size: 2rem;line-height: 3rem;}
    #gifttabs .branchtabs a {margin: auto;width: auto;font-size: 1rem;padding: 0.2rem 0.3rem 0.25rem;}
    .branchtabs {justify-content: space-around;padding: 1rem 0;}
    #event_master .event_title {text-align: left;padding: 0 0 0 2%;}
    .give {padding: 0;font-size: 1.2rem;}
    .main_hs p:nth-of-type(3) {/*font-size: 1.5rem;*/padding: 1rem 0 0 2%;}
    .realname {font-size: 0.5rem;}
}