:root {
    --white:#FFFFFF;
}

.relative {position: relative;}
.section_wrap {padding: 1rem;}
.bg-gray {background-color: #DFDFDF;}
.bg-blue-beige {background: linear-gradient(-70deg, #fff3ef 50%, #fe5f3d 50%);}
.bg1 {background-color: #fff7f5;}
.bg2 {background: linear-gradient(to right, #41d9cf 5%, #fff 50%, #faac90 95%);}
.bg3 {background-color: #ffede8;}
.bg4 {background-color: #fff;}
/*國考好試聯播網*/
.banner {text-align: center;}
.banner h1 {font-size: 5rem;}
.banner_des {font-size: 4rem;}
.banner img{width: fit-content;height: auto;max-width: 100%;}

/*行政公職就試好*/
.section_wrap h1 {text-align: center;position: relative;margin-bottom: 2.0rem;font-size: 3.75rem;}
.section_wrap h1::after {content: '';position: absolute;bottom: 0px;left: 50%; -webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);width: 30%;height: 4px;background: linear-gradient(to right, #46dbbe 0%, #ff775c 100%);;
}
.youtube-shorts-container {position: relative;width: 100%;padding: 0.5rem 1rem 2rem;}
.youtube-shorts-iframe {width: 100%;height: 100%;box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;}
.e_learning {width: auto;padding: 1rem 1.5rem;font-size: 1.25rem;background-color: white;border-radius: 1.0rem;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 10px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}
.e_learning dt {font-size: 1.5rem;padding: 0 0 0.5rem;color: #fe5d3d;border-bottom: dotted;margin-bottom: 0.5rem;}
.e_learning dd {padding: 0.5rem 0;}
.e_learning dd a::before {color: #fe5d3d;content: '\f00c';font-family: "Font Awesome 5 Free";font-weight: bold;display: inline-block;padding: 0 0.5rem 0 0;}

/*關鍵評比，高點全勝！*/
.bg-purple-tiffany {background: linear-gradient(to right, #A9ACF5 0%, #7FBABE 100%);}
.compare_title {font-size: 2.5rem;text-align: center;color: #fe5f3d;}
.compare_title b {font-size: 3.5rem;}
.team_intro {margin: auto;width: calc(95%/2);border-left: 8px #ffffff40 solid;border-radius: 2rem;border-right: 8px #ffffff40 solid;padding: 1rem 0 0.5rem;position: relative;background-color: #fccbb9;}
.team_intro:last-of-type {background-color: #93eae4;}
.team_intro:last-of-type .subject {top: 0.5rem;}
.subject {font-size: 1.5rem;position: absolute;top: 1.5rem;left: 0;writing-mode: vertical-lr;letter-spacing: 0.2rem;color: #ffffff;
    /* text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 16px #fff, 0 0 10px #fff; */padding: 0.5rem 0 1.0rem;}
.subject.bg01 {background: linear-gradient(to bottom, #fe5f3d 60%, #ffffff00 100%);}
.subject.bg02 {background: linear-gradient(to bottom, #12c8bd 60%, #ffffff00 100%);}
.teacher_name {text-align: center;}
.teacher_name .dot {padding: 0 1px;font-size: 1.1rem;}
.teacher_name li small {padding: 0 0 0 2px;}
.teacher_name li:nth-child(1){border-bottom: dotted 0px;background: linear-gradient(to right, #ffffff00 0%, #ffffff96 20%, #ffffffe3 80%, #ffffff00 100%);}
/*高點他班*/
.profession {width: calc(100%/2);}

.comment {width: 85%;}
.goldensun {position: relative;}
.goldensun .win {position: absolute;right: 0;left: 0;top: 0;bottom: 0;font-size: 5rem;box-shadow: -10px 10px 42px -5px rgb(70 70 70 / 50%);margin: auto;width: 180px;
    height: 180px;background: linear-gradient(-30deg, white 40%, transparent 100%);transform: rotate(25deg);text-align: center;display: flex;flex-wrap: wrap;align-items: center;position: absolute;justify-content: center;color: #fe5f3d;border: solid 9px;border-radius: 50%;}
.goldensun .comment {margin: auto 10% auto auto;}
.business .comment {margin: auto auto auto 10%;}
.comment li {padding: 1rem;}
.comment li img {border-radius: 2rem;margin: auto 0 auto auto;max-width: 100%;}
.vs_tag {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;font-size: 5rem;font-weight: bold;width: fit-content;height: fit-content;text-shadow: -1px -1px 0 white,1px -1px 0 white,-1px 1px 0 white,1px 1px 0 white;}
.vs_tag span:last-of-type {position: relative;top: 0.5rem;}
.vs_tag span:first-of-type {position: relative;top: -0.5rem;right: 0.25rem;}
.business .comment li img {margin: auto auto auto 0;}
.profession .brand {font-size: 3rem;}
.goldensun .brand {margin: auto 25% auto auto;border-bottom: dotted;color: #ffffff;}
.business .brand {order: 2;margin: auto auto auto 25%;border-bottom: dotted;}
.brand .win {font-size: 4rem;position: absolute;left: -5rem;top: 0;text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 16px #fff, 0 0 10px #fff;}
.exp_title {font-size: 2rem;text-align: center;}
.exp_title dt {font-weight: bold;color: #fe5f3d;}
.exp_title dd {font-size: 2.5rem;background: linear-gradient(to right, #ffffff00 0%, #ffb62a 20%, #ff775c 90%, #ffffff00 100%);color: white;}
.exp_topic {display: block;font-size: 1.2rem;border-bottom: dotted 1px #fe5f3d;}
.exp_cont {padding: 1rem;}
.exp_cont figure img {width: 100px;height: 100px;border-radius: 50%;}
.exp_cont p {background-color: white;padding: 1rem 2rem;position: relative;margin: auto auto 25px;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}
.exp_cont p .mark {color: #FF5D5D;}
.exp_cont p::after {position: absolute;content: '';width: 0;height: 0;border-style: solid;border-width: 15px 10px 0 10px;border-color: white transparent transparent transparent;bottom: -15px;left: 50px;}
.exp_cont p::before {position: absolute;content: '';width: 0;height: 0;border-style: solid;border-width: 16px 12px 0 12px;border-color: rgba(50, 50, 93, 0.25) transparent transparent transparent;bottom: -16px;left: 48px;z-index: -1;}
.exp_cont dl {width: calc(100% - 100px);padding: 0 0 0 1rem;}
.exp_cont dl dt strong {background: linear-gradient(to right, #fe5f3d 60%, #ff9247 100%);font-size: 1.0rem;padding: 0.2rem 0.5rem;color: white;margin-right: 0.5rem;}
.exp_cont dl dt {border-bottom: dotted 1px ;margin-bottom: 0.8rem;}
.exp_more {display: inline-block;}
.exp_more::after {content: '>';padding: 0 0 0 1px;display: inline-flex;position: relative;}
.flipInY2 {
    animation-name: flipInY2;
    backface-visibility: visible !important;
}
@keyframes flipInY2 {
    0% {
    transform: perspective(400px) rotateY(90deg) rotate(25deg);
    animation-timing-function: ease-in;
    opacity: 0;}
    40% {
        transform: perspective(400px) rotateY(-20deg) rotate(25deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: perspective(400px) rotateY(10deg) rotate(25deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotateY(-5deg) rotate(25deg);
    }
    100% {
        transform: perspective(400px) rotateY(0deg) rotate(25deg);
    }
}

/*批改勝*/
.paper_pic img {margin: auto;}

/*課程勝*/
.offline_pic img {margin: auto;}

/*操作介面貼心便捷*/
.interface ul {width: calc(100% - 1.5rem);margin: 0 auto;}
.interface ul li img {max-width: 100%;}
.interface ul li:nth-of-type(2) {font-size: 1.1rem;font-weight: bold;padding: 0.5rem 0 0.2rem;color: #00aba0;border-bottom: dotted 1px;margin-bottom: 0.3rem;}

/*公職新鮮人立享預購優惠*/
.class_list a {font-size: 1.5rem;padding: 0.25rem 1rem;border-radius: 2rem;text-decoration: none;background-color: rgb(126 126 126 / 50%);color: white;margin: 0.5rem;}
.class_list a.active {font-weight: bold;background: linear-gradient(to right, #46dbbe 0%, #ff775c 100%);;}
.amount {font-size: 1.25rem;color: #00aba0;font-weight: bold;justify-content: right;}
.amount i {color: rgb(102 102 102 / 54%);}
.amount dt {padding: 0 1rem 0 0;}
.class_item {padding: 1rem 0.25rem;text-decoration: none;}
.class_item figure {position: relative;}
.class_subject {position: absolute;background-color: #fe5f3d;color: white;padding: 0.125rem 1rem 0.25rem 1.5rem;font-size: 1.25rem;border-radius: 0 1rem 1rem 0;border-right: 4px #FDD000 solid;top: 1rem;left: 0;}
.class_item figure {width: 55%;}
.class_item figure img {height: 140px;object-fit: cover;width: 100%;}
.class_item ul {width: 45%;background-color: rgb(255 255 255 / 90%);padding: 4rem 1rem 0;}
.class_item .third {padding: 1.5rem 1rem 0;}
.original {text-decoration-line: line-through;}
.discount {font-size: 1.5rem;color: #fe5f3d;}
.tea_name {font-size: 1.1rem;padding: 0 0 1rem 0;}
.tea_name i {padding: 0 4px 0 0;}
.case_cont {font-size: 1.25rem;text-align: center;margin-bottom: 3%;padding: 0.8rem;border-top: solid;}
.case_cont a {background-color: #07B53B;color: white;padding: 0.25rem 0.5rem;border-radius: 0.5rem;text-decoration: none;margin: auto 0.25rem;font-size: 1.1rem;}

/*搭配好書+微課*/
.bookseries {width: 60%;}
.fine {width: 40%;}
.match_title {font-size: 1.5rem;color: #fe5f3d;border-bottom: solid #fe5f3d;margin-bottom: 0.5rem;}
.book_brand {background: linear-gradient(to right, #fe5f3d 60%, #ffffff00 100%);color: white;;font-size: 1.3rem;padding: 0 5rem 0 0.5rem;width: fit-content;}
.publish dl {width: calc(100%/3 - 1rem);margin: auto;}
.publish dl dt,.ecibrain dl dt {font-size: 1.1rem;}
.publish dl dt::before,.ecibrain dl dt::before {content: "\f14a";font-family: "Font Awesome 5 Free";font-weight: bold;border-radius: 50%;margin: auto 0.25rem auto auto;}
.publish dl dd img {max-width: 100%;}
.ecibrain dl {width: calc(100%/2 - 1rem);margin: auto;}
.ecibrain dl dd  {width: calc(100%/2 - 1rem);margin: auto;display: inline-block;background-color: white;}
.ecibrain dl dd img  {max-width: 100%;}
.fine {padding: 0 0 0 2rem;}
.member dl {width: calc(100% / 1 - 1rem);margin: 0 auto 0.5rem;background-color: #ffffff;border-radius: 1.0rem;padding: 0.5rem 1rem 0.5rem 0.8rem;border-left: solid 6px #ffd6ca;}
.member dl dt {font-weight: bold;}
.event_btn {text-align: center;}
.event_btn a {margin: 0.5rem;font-size: 1.25rem;padding: 0.25rem 0.5rem;border-radius: 0.5rem;background-color: #00aba0;color: white;text-decoration: none;display: inline-block;}

@media screen and (min-width: 1201px) {	
	.section_wrap {width: 1200px;margin: auto;}
    .youtube-shorts-container {height: 575px;}
}

@media screen and (min-width: 768px) {
    .cross_des {position: absolute;width: calc(100%/3*2);padding: 0 0.75rem;}
    .ibrainux .md\:hidden {display: none;}
}

@media screen and (max-width: 1200px) {
    .discount {font-size: 1.25rem;}
    .class_cont {width: 95%;margin: auto;}
    .stream_wrap {width: 95%;margin: auto;}
    .ibrainux {width: 95%;margin: auto;}
    .youtube-shorts-container {height: 540px;}
    .comment li img {border-radius: 1rem;}
    .goldensun .win {font-size: 3rem;width: 100px;height: 100px;border: solid 7px;}
    .class_subject {font-size: 1.1rem;padding: 0.125rem 0.75rem 0.25rem 0.5rem;}
    .cross_des {width: calc(100% - 1.5rem);margin: auto;}
}

@media screen and (max-width: 1023px) {
    .bookseries {width: 95%;margin: auto;}
    .fine {width: 95%;padding: 0;margin: auto;}     
    .youtube-shorts-container {height: 605px;}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
}

@media screen and (min-width: 768px) and (max-width: 991px) {
}

@media screen and (max-width: 767px) and (orientation: portrait) { 
    .section_wrap h1 {font-size: 1.75rem;}
    .section_wrap h1::after {bottom: -4px;}
	.compare_title { font-size: 1.5rem;}
	.profession .brand {font-size: 2rem;}
	.exp_title {font-size: 1.5rem;}
	.exp_title dd {font-size: 1.5rem;}
	.compare_title b { font-size: 2.0rem;}
   .stream_wrap {width: 100%;}
    .team_intro {width: 100%;}
    .e_learning dd {display: inline-block;margin: auto 0.5rem auto 0;}
    .bg-blue-beige {background: linear-gradient(-70deg, #fff3ef 50%, #fe5f3d 50%);}
	.goldensun .brand {margin: auto 50% auto auto;}
	.business .brand {margin: auto auto auto 65%;}
    .profession {width: 100%;}
    .comment li {padding: 0.5rem 0;}
    .vs_tag {font-size: 3rem;position: initial;}
    .business {padding: 0 0 1rem;}
    .business .brand {order: 1;}
    .business .comment {order: 2;}
    .profession .comment {margin: auto;width: 95%;}
    .section_wrap .VueCarousel {width: 95%;margin: auto;}
    .class_list a {font-size: 1rem;padding: 0.25rem 0.5rem;margin: auto;}
    .class_subject {font-size: 1rem;padding: 0.125rem 0.5rem 0.25rem 0.5rem;}
    .discount {font-size: 1.1rem;}
    .youtube-shorts-iframe {position: absolute;top: 0;left: 0;}
    .youtube-shorts-container {padding-bottom: 177.78%; /* 9:16 ratio for vertical shorts */;height: 0;}
}