@import url(./banner.css);

:root {
    --event-red: #e72f39;
    --event-yellow: #fef200;
    --event-blue: #065da0;
    --event-orange: #f27f22;
}

.bg-red-white {background: url(../../images/1307019/admission-card_01.png) no-repeat center top;/*height: 412px;*/}
.bg-orange-purple {background: linear-gradient(110deg, #e15a44 30%, #800080 100%);}
.bg-orange-purple-blue {background: linear-gradient(110deg, #e15a44 20%, #800080 45%, #800080 55%, #00a3de 80%);}
.bg-skin {background-color: #fff6ef;}
.bg-blue {background-color: #00a3de;}
.bg-light-blue {background-color: #eaf4fe;}
.bg-light-yellow {background-color: #fefce7;}
.text-red {color: var(--event-red);}
.text-blue {color: var(--event-blue);}
.text-orange {color: var(--event-orange);}
.h1 {font-size: 3.0rem;font-weight: bold;font-family: "Microsoft YaHei", 微軟正黑體, Arial;}
.h1 small {font-size: 2.0rem;}

/* 贏戰會計錦標賽 */
.banner {padding: 4rem 0 0;}
.banner_logo img {margin: auto 2rem auto auto;border: 3px solid white;}
.text-linear {background: linear-gradient(to bottom, white 80%, #bdc0c9 98%);background-clip: text;-webkit-background-clip: text;color: transparent;position: relative;}
.text-linear-blue {background: linear-gradient(135deg, #f5fbff 25%, #3baeda 100%);background-clip: text;-webkit-background-clip: text;color: transparent;position: relative;}
.banner_title {font-size: 7rem;color: var(--event-yellow);font-weight: bold;line-height: 7rem;position: relative;text-shadow: 5px 5px 5px rgb(29 29 29 / 55%);letter-spacing: 0.5rem;font-family: "Microsoft YaHei", 微軟正黑體, Arial;}
.banner_title span {font-size: 6rem;}
.banner_des {font-size: 5rem;font-weight: bold;text-shadow: 5px 10px 10px rgb(29 29 29 / 55%);}
.text-linear::after {content: attr(data-storke);position: absolute;left: 0;top: 0;background: linear-gradient(to bottom, white 0%, #bdc0c9 80%);background-clip: text;-webkit-background-clip: text;color: transparent;text-shadow: initial;}
.banner_title span::after {display: flex;align-items: center;top: 0;bottom: 0;}
.text-linear-blue::before {content: attr(data-storke);position: absolute;left: 0;background: linear-gradient(135deg, #d5e5f2 25%, #3baeda 100%);background-clip: text;-webkit-background-clip: text;color: transparent;text-shadow: initial;z-index: 2;}

/* 憑113會計師准考證報名 */
.signup {color: var(--event-blue);text-align: center;font-size: 3rem;font-weight: bold;padding: 3rem 0 0;}
.signup b {font-size: 3.2rem;padding: 0 0.5rem 0 0;}
.gift_journal {color: black;line-height: 4rem;margin: 1rem 0rem 3rem;}
.journal {border-radius: 2rem;padding: 0.25rem 1.5rem;color: white;margin: auto 1rem auto auto;}
.journal:first-of-type {background-color: var(--event-red);}
.journal:last-of-type {background-color: #036eb4;}
.gift_journal .text-red {font-size: 3.5rem;padding: 0 0.25rem 0 0;}

/* 限時加碼 */
.bonus {width: fit-content;margin: 1rem auto;}
.bonus dt {background: linear-gradient(to right, #e15a44 30%, #00a3de 100%);border-radius: 1rem 1rem 0 0;font-size: 2.5rem;text-align: center;color: white;padding: 0.25rem 0;display: flex;align-items: center;justify-content: center;font-weight: bold;font-family: "Microsoft YaHei", 微軟正黑體, Arial;}
.bonus dt i {color: var(--event-yellow);font-size: 1.5rem;padding: 0 1rem;}
.bonus dd {padding: 0.85rem;font-size: 1.5rem;}
.bonus dd::before {content: '•';}
.bonus dd:not(:last-of-type) {border-bottom: 1px solid #ababab;}
.bonus dd .bg-orange-purple, .bonus dd .bg-blue {border-radius: 1rem;color: white;padding: 0.125rem 0.5rem;margin: auto 0.25rem;}
.bonus dd b {font-size: 1.7rem;padding: 0 0.25rem;}
.dd-linear {background: linear-gradient(to bottom, #f5f5f5 0%, #d0d0d0 100%);border-radius: 0 0 1rem 1rem;padding: 0.5rem 2rem;}

/* 決勝會計師 */
.price_list {border-radius: 1rem;margin: 1rem auto;padding: 0.5rem 1rem;}
.price_list li {font-size: 1.35rem;padding: 0.8rem;text-indent: -1.25rem;margin: auto auto auto 1.5rem;}
.price_list li .bg-orange-blue {border-radius: 1rem;color: white;padding: 0.125rem 0.5rem;margin: auto 0.25rem;}
.price_list li:not(:last-of-type) {border-bottom: 1px dashed #ababab;}
.price_list li::before {content: '•';color: #ffd300;}
.price_list .text-red {padding: 0 0.25rem;font-size: 1.6rem;}
.price_list .bg-orange-purple, .price_list .bg-blue, .price_list .bg-orange-purple-blue {border-radius: 1rem;color: white;padding: 0.125rem 0.5rem;margin: auto 0.25rem;}
.price_note {padding: 0 0 0 0.5rem;font-size: 1.1rem;}
.inquiry {background: linear-gradient(to right, #e15a44 30%, #00a3de 100%);font-size: 1.1rem;text-align: center;color: white;padding: 1rem;}
.reviews {padding: 1.5rem 1rem 1rem;background: linear-gradient(to right, #ececed 5%, #fcfcfa 27%, #fcfcfa 73%, #ececed 100%);border-radius: 2rem;}
.reviews_title {text-align: center;font-size: 2.8rem;font-weight: bold;position: relative;}
.reviews_title i {color: var(--event-yellow);text-shadow: 0 0px 3px #a0a0a0;}
.reviews_title .ts1 {font-size: 1rem;}
.reviews_title .ts2 {font-size: 1.2rem;}
.reviews_title .ts3 {font-size: 1.4rem;}
.reviews_title .ts4 {font-size: 1.6rem;}
.reviews_title .ts5 {font-size: 1.8rem;}
.pr-4 {padding-right: 1rem;}
.reviews_cont {padding: 1rem 0;width: 80%;margin: auto;}
.reviews_cont figure {width: 180px;height: 180px;border-radius: 50%;overflow: hidden;}
.reviews_cont figure img {object-fit: cover;width: 180px;height: 180px;}
.reviews_cont ul {padding: 0 0 0 1rem;}
.reviews_cont ul li:first-of-type {font-size: 1.25rem;padding: 0 0 0.5rem 0;border-bottom: dotted 1px #e15a44;}
.reviews_cont ul li:last-of-type {font-size: 1.5rem;color: #00a3de;padding: 1.0rem 0;}
.reviews_cont p {font-size: 1.15rem;border-top: 1px dotted #7e7e7e;padding: 0.8rem;}
.reviews_cont .more {color: white;background-color: #909090;padding: 0 0.5rem;font-size: 0.9rem;text-decoration: none;}
.continue {margin-bottom: 0.5rem;width: 100%;background-color: #ffffff;color: #d8232a;text-align: center;font-size: 1.7rem;padding: 0.15rem 0 0 0;text-shadow: none;font-family: 'Noto Sans TC';box-shadow: 0 0px 3px #a92227;border-left: 5px solid #a92227;border-right: 5px solid #a92227;}
.event_btn {text-align: center;padding: 1rem 0;}
.event_btn a {display: inline-flex;flex-wrap: wrap;margin: 0.25rem 1rem;cursor: pointer;font-size: 1.5rem;background-color: #a92227;padding: 0.5rem 1.5rem;color: white;    border-radius: 1.5rem;text-decoration: none;}

/* 多元上課自由配 */
.diversity {text-align: center;}
.diversity .h1 {background: linear-gradient(to right, #e15a44 40%, #00a3de 60%);background-clip: text;-webkit-background-clip: text;color: transparent;position: relative;font-size: 3.5rem;line-height: 4rem;padding: 1rem 0;}
.learn_way {border-radius: 1rem;overflow: hidden;}
.learn_way dl {width: calc(100%/4);background-color: #fefce7;padding: 1rem;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;}
.learn_way dl:nth-of-type(odd) {background-color: #fff6ef;}
.way_title {color: var(--event-red);font-size: 2rem;font-weight: bold;}
.learn_way dl dt {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}
.verb {background-color: black;color: white;border-radius: 50%;width: 2rem;height: 2rem;margin: auto 0.5rem auto 0;display: flex;align-items: center;justify-content: center;}
.learn_way dl dd {font-size: 1.25rem;line-height: 1.55rem;margin-bottom: 0.8rem;}
.learn_way dl figure {width: 200px;height: 200px;border-radius: 50%;overflow: hidden;}
.learn_way dl figure img {width: 200px;height: 200px;object-fit: cover;}

@media screen and (min-width: 1024px) {     
}

@media screen and (max-width: 1280px) {   
    .reviews_title .sm\:hidden {display: none;}
    .reviews_title .sm\:block {display: block;}
    .reviews_title .ts1 {font-size: 1rem;}
    .reviews_title .ts2 {font-size: 1.2rem;}
    .reviews_title .ts3 {font-size: 1.4rem;}
    .reviews_title .ts4 {font-size: 1.2rem;}
    .reviews_title .ts5 {font-size: 1rem;}
}

@media screen and (max-width: 1023px) {   
    .banner {padding: 1rem 0 0;text-align: center;}
    .banner_title {font-size: 6rem;font-weight: 500;}
    .banner_title span {font-size: 5rem;}
    .banner_des {font-size: 4rem;}
    .text-linear::after {right: 0;}
    .signup {padding: 1rem 0 0;font-size: 2rem;}
    .signup b {display: block;padding: 0;font-size: 2.0rem;}     
    .gift_journal {margin: 1rem 0;}
    .gift_journal span:nth-of-type(2) {display: block;}
    .gift_journal .text-red {font-size: 2rem;}
    .bonus dd {font-size: 1.25rem;text-indent: -1.25rem;padding: 0.75rem 0.75rem 0.75rem 1.25rem;}
    .price_list {padding: 0.5rem 0rem 0.5rem 0;}
    .learn_way dl figure, .learn_way dl figure img {width: 150px;height: 150px;}
    .learn_way dl dd {font-size: 1.15rem;}
    .h1 small {font-size: 1.25rem;display: block;text-align: center;}
}

@media screen and (max-width: 767px) {
	.banner_title span {font-size: 4rem;}
    .h1 {font-size: 1.825rem;text-align: center;}
    .h1 span:first-of-type {font-size: 2.5rem;}
    .banner_logo img {margin: auto auto 0.5rem;}    
    .banner_title span::after {justify-content: center;left: 0;right: 0;}
    .banner_title {letter-spacing: 0;font-size: 3rem;text-align: center;line-height: 4rem;}
    .banner_des {font-size: 2.0rem;text-shadow: 2px 2px 2px rgb(29 29 29 / 55%);}  
	.bonus dt {font-size: 1.5rem;} 
	.bonus dd b {font-size: 1.3rem;}
    .reviews_title {font-size: 1.8rem;}
    .reviews {padding: 0.5rem;}
	.reviews_cont {width: 90%;}
	.reviews_cont p {padding: 0.5rem 0;}
	.reviews_cont ul {padding: 1rem 0 0rem;}
    .signup {font-size: 1.5rem;}
    .gift_journal {line-height: 3.5rem;}   
	.event_btn a {font-size: 1.2rem;}
    .price_list .bg-orange-purple, .price_list .bg-blue, .price_list .bg-orange-purple-blue {padding: 0.05rem 0.5rem 0.05rem 1.75rem;font-size: 1.1rem;display: inline-flex;}    
    .learn_way dl {border-radius: 1rem;width: 100%;margin: 0.25rem auto;}
    .learn_way dl figure, .learn_way dl figure img {width: 200px;height: 200px;}
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    .banner_title span {display: block;}
    .sm\:block {display: block;}    
}