@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

/*reset*/
body, html, applet, object, iframe, img, strong, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, dialog { margin: 0; padding: 0; border: 0; outline: 0; vertical-align:middle; }
h1, h2, h3, h4, h5, h6,p,b {margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal;}
article, aside, figure, footer, header, hgroup, nav, section, details, summary {display: block;margin:0;padding:0;border:0;}
table{border-collapse:collapse;border-spacing:0;}
img,a{border:0; outline:0;}
a{ text-decoration:none; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
*:focus { outline:none;}
body { font-family:"Noto Sans TC", "微軟正黑體", "Microsoft JhengHei" ,sans-serif; color:#000; font-size:22px; line-height:30px;}

/* default */
img {max-width:100%!important; height: auto!important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}
b,.t-bold { font-weight:600;}
h1 { font-size:45px; line-height:55px; font-weight:bold; margin-bottom:20px;}
h2 { font-size:25px; line-height:35px; font-weight:normal; margin-bottom:20px;}
h3 { font-size:35px; line-height:40px;}
h4 { font-size:24px; line-height:34px;}
p { font-size:22px; line-height:35px; margin-bottom:15px;}
.green { color:#B10F2E;}
.ora { color:#E6A48A;}
.white { color:#fff;}
.t-center { text-align:center;}

header { padding:10px 20px; text-align:center;}
.main-video{
    width:100%;
    margin:0 auto;
}

.main-video iframe{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    border:0;
}

.top-area { width:90%; max-width:1250px; margin:40px auto 100px auto; height:400px; position:relative;}
.top-area .imgs { position:absolute; left:0; top:60px; width:42%; z-index:2;}
.top-area .imgs img { border-radius:10px; box-shadow:0 0 20px 0 rgba(0,0,0,.2);}
.top-area .txt { position:absolute; right:0; top:40px; width:47%; padding:50px 7%; background:-webkit-linear-gradient(#e5383b, #551110); color:#fff; border-radius:10px; z-index:1;}

/*.top-area h1:after { content:""; display:block; width:30px; height:3px; border-radius:3px; background:#e5383a; margin:25px 0;}*/
section { margin:0 auto; padding:80px 0; width:90%; max-width:1100px; text-align:center; clear:both;}

h3.title { color:#B10F2E; margin:20px auto 40px auto; font-weight:600;}
h3.title span { display:inline-block; width:40px; height:2px; background:#BBBCBC; vertical-align:middle; margin:0 10px;}
h3.title.st2 { border-bottom:1px solid #B10F2E;}

ul li { font-size:22px; line-height:30px;}
ul.col-2 { width:100%; margin:0 auto 30px auto;}
ul.col-2 li { display:inline-block; width:36%; margin:5px 3%; padding:15px 3%; background:#f5f3f4; border-radius:5px; text-align:center;}
ul.col-2 i { display:inline-block; vertical-align:middle; font-size:15px; font-style: normal; background: -webkit-linear-gradient(#e5383b, #551110); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
ul.col-2 li:nth-child(odd) {}
ul.tick li { list-style:none; margin-bottom:10px; text-align:left;}
ul.tick li:before { content:"✔"; display:inline-block; vertical-align:middle; margin-right:5px; color:#B10F2E;}

.info { background: url("../images/infobg.jpg") no-repeat bottom center #f5f3f4;}
.advantage { margin-top: 50px;}
.advantage div { width:94%; margin:10px auto; padding:0 3% 30px 3%; background:#fff; vertical-align:top; border-radius:5px;}
.advantage div h4 { background: #E5383B; background: linear-gradient(90deg, rgba(229, 56, 59, 1) 0%, rgba(87, 0, 0, 1) 100%); color:#fff; width:360px; line-height:50px; position:relative; margin:0 auto; top:-20px; border-radius:5px;}
.advantage div p {}

.rank { width:100%; background:url("../images/rankbg.jpg") no-repeat center; background-size:cover; background-attachment:fixed; padding:50px 0;}
.rank h3.title { color:#FFF;}
.counter-flex { display: flex; align-items:flex-start; justify-content: center; flex-wrap: wrap; color:#fff; }
.counter-box { flex-basis:25%; height:100px;}
.counter { color:#E5383B; font-size:35px; font-weight:bold;}

@keyframes scroll-r2l {
  from { transform: translateX(0); }
  to {  transform: translateX(-100%); }
}
.scroll-r2l { animation: scroll-r2l 15s linear infinite;}

@keyframes scroll-l2r {
  from { transform: translateX(0); }
  to { transform: translateX(100%);}
}
.scroll-l2r { animation: scroll-l2r 10s linear infinite; }
.marquee { overflow: hidden; display: flex; flex-wrap: nowrap; box-sizing: unset; width: 100%; max-width:1600px; margin:0 auto 100px auto;}
.marquee-items { display: flex; flex-shrink: 0; height: 100%; min-width: 100%; position: relative;}
.marquee-items a { margin: 0 20px; height: 70px;}
.marquee-items img { height:70px !important; max-width:inherit; width:auto !important; height:70px !important; width:auto; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
.paused { -webkit-animation-play-state:paused; -moz-animation-play-state:paused; -o-animation-play-state:paused; animation-play-state:paused;}

.feedback { width:100%; background:url("../images/feedbackbg.jpg") no-repeat center #f5f3f4;}
.feedback .left { display:inline-block; width:calc( 100% - 590px ); margin-right:20px; text-align:left; vertical-align:middle;}
.feedback .right { display: inline-block; vertical-align:middle; position:relative;}
.feedback .right iframe { box-shadow:8px 6px 0 2px #B10F2E; }

.QA{ width:100%; max-width:850px; margin:30px auto;}
li.accordion ul { margin: 0; padding: 0; background: #fff; margin: 0 !important; border-top: 1px solid #fff; display: none; color:black;}
li.accordion ul .txt { padding: 10px 30px; margin: 0; text-align:left; background:#f5f3f4;}
li.accordion span { display: block; font-size:22px; font-weight: 500; padding: 10px; margin-top:10px; color: #fff; border-radius:5px; cursor:pointer; position:relative; text-align:left; background: linear-gradient(90deg, rgba(229, 56, 59, 1) 0%, rgba(87, 0, 0, 1) 100%); }
li.accordion { list-style:none; }
li.accordion span i { position:absolute; right:20px; top:17px; bottom:0; display: block; width: 10px; height: 10px; border-top: 2px solid #fff; border-left: 2px solid #fff; transform: rotate(135deg); transition: .3s;}
li.accordion.open span i { transform: rotate(225deg); transition: .3s; }

.sent { width:100%; background:url("../images/lastbg.jpg") no-repeat center; background-size:cover; background-attachment:fixed; padding:50px 0;}
.cta { margin:20px auto;}
input,button,select,textarea{outline:none;}
form { width:90%; margin:30px auto; max-width:500px; border:1px solid #ddd; padding:40px 3%; text-align:left; background:#fff; box-shadow:0 0 8px 0 rgba(0,0,0,.1);}
form .field { margin-bottom:10px;}
form .field label { display:inline-block; width:calc( 100% - 370px); font-size:20px;}
.input-style { border-radius:3px; background:#eee; padding:5px; font-size:22px; color:#000; border:0; width:360px; box-sizing:border-box; vertical-align:middle; }
.input-s { width:80px; background:#fff;}
.input-s2 { display:inline-block; width:100px; }
.pl { font-size:20px; color:#444; vertical-align:middle;}
input.fortel { width:260px;}
.go-btn { display:block; width:250px; margin:30px auto 0 auto; text-align:center; background:#B10F2E; color:#FFF; font-weight:500; font-size:22px; line-height:50px; box-shadow:none; border:0; cursor:pointer; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s}
.go-btn:hover { background:#000; color:#fff;}
#popup { background:rgba(0,0,0,.8); border-radius:5px; padding:30px 5%; text-align:center; width:60%; position:fixed; left:15%; top:30%; color:#fff;}

a.go-btn2 { display:block; width:60px; height:47px; font-size:16px; line-height:16px; padding-top:13px; text-align:center; border-radius:50%; background:#B10F2E; color:#fff; position:fixed; right:10px; bottom:20px;animation: zoom-in-zoom-out 2s ease-out infinite;}
@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}

footer { color:#ccc; font-size:14px; text-align:center; padding-top:20px;}


@media screen and (max-width: 1000px) {
    h1 { font-size:35px; line-height:45px;}
    h2 { font-size:22px; line-height:32px;}
    h3 { font-size:30px; line-height:40px;}
    h4 { font-size:20px; line-height:30px;}
    p { font-size:20px; line-height:30px;}

    h3.title { margin:20px auto;}
    h3.title span { width:20px; margin:0 8px;}
    h3.title.for-m span { display:none;}

    ul.tick { width:300px; margin:0 auto;}

    ul li { font-size:18px; line-height:25px;}
    ul.col-2 li { display:block; width:88%; margin:5px 3%; padding:15px 3%;}

    .top-area { margin:40px auto; height:auto; position:relative; text-align:center;}
    .top-area .imgs { position:static; width:100%;}
    .top-area .imgs img { border-radius:10px; box-shadow:none;}
    .top-area .txt { position:static; width:100%; padding:0; margin-top:20px; background:none; color:#000; border-radius:0;}
    .top-area h1 { color:#B10F2E;}

    .feedback {}
    .feedback .left { display:block; width:100%; margin-right:0; text-align:center;}
    .feedback .right { display:block;}
    .feedback .right iframe { box-shadow:8px 8px 0 2px #B10F2E; }
    
}


@media screen and (max-width: 640px) {
    
    h1 { font-size:30px; line-height:40px;}
    h2 { font-size:22px; line-height:32px;}
    h3 { font-size:28px; line-height:38px;}
    h4 { font-size:18px; line-height:28px;}
    p { font-size:18px; line-height:28px;}
     li.accordion span { font-size:17px;}
    
	form { margin:20px auto; padding:20px 5%; font-size:17px;}
	form .field { margin-bottom:10px;}
	form .field label { display:block; width:100%; font-size:17px;}
	.input-style {font-size:17px; width:100%;}
	.input-s { width:20%;}
    .input-s2 { width:20%; }
    .pl { font-size:17px;}
    input.fortel { width:73%;}
    
	.go-btn { width:200px; font-size:16px; line-height:40px;}

    .feedback .right iframe { width:320px; height:180px; box-shadow:6px 6px 0 2px #B10F2E; }
}

@media screen and (max-width: 480px) {
    .top-area .txt { top:50px;}
	section { padding:50px 0;}
    .rank,.sent { background-attachment:inherit;}
	.schoollink a { margin:20px;}
	.schoollink a img { height:50px !important;}
	.counter-flex {}
	.counter-box { flex-shrink: 1; flex-basis:50%; height:120px; }

}

/* 讓驗證框在欄位中水平置中，並增加一點間距 */
.cf-turnstile {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 10px 0;
}


.share-video-area{
    width:90%;
    max-width:1100px;
    margin:0 auto 50px auto;
    text-align:center;
}

.video-list{
    display:flex;
    gap:20px;
    justify-content:center;
    flex-wrap:wrap;
}

.video-item{
    flex:1;
    min-width:280px;
}

.video-item iframe{
    width:100%;
    aspect-ratio:16/9;
    border:0;
    border-radius:8px;
}

/* 手機版：改直排 */
@media screen and (max-width:640px){

    .video-list{
        display:block;
    }

    .video-item{
        width:100%;
        margin-bottom:20px;
    }
}


.video-testimonial-section{
    width:100%;
    max-width:none;
    margin:0 auto;
    padding:70px 0 55px 0;
    background:#222;
    text-align:center;
    overflow:hidden;
}

.video-testimonial-section .title{
    color:#FFFFFF;
    margin-bottom:45px;
}

.video-carousel{
    position:relative;
    width:90%;
    max-width:1100px;
    margin:0 auto;
}

.video-stage{
    position:relative;
    width:100%;
    height:360px;
}

.video-card{
    position:absolute;
    top:50%;
    left:50%;
    width:38%;
    display:block;
    background:#fff;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,.22);
    opacity:0;
    transform:translate(-50%,-50%) scale(.65);
    transition:
        transform 1.1s ease,
        opacity 1.1s ease;
    pointer-events:none;
}

.video-card.active{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.05);
    z-index:3;
    pointer-events:auto;
}

.video-card.is-left{
    opacity:.55;
    transform:translate(-135%,-50%) scale(.52);
    z-index:2;
    pointer-events:auto;
}

.video-card.is-right{
    opacity:.55;
    transform:translate(35%,-50%) scale(.52);
    z-index:2;
    pointer-events:auto;
}

.video-card iframe{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    border:0;
}

.video-caption{
    background:#fff;
    color:#2b5c9a;
    font-size:16px;
    line-height:24px;
    font-weight:600;
    text-align:left;
    padding:8px 12px 10px 12px;
}

.video-nav{
    position:absolute;
    top:45%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:50%;
    border:0;
    background:#B10F2E;
    color:#fff;
    font-size:34px;
    line-height:34px;
    cursor:pointer;
    z-index:5;
}

.video-nav.prev{
    left:-22px;
}

.video-nav.next{
    right:-22px;
}



@media screen and (max-width:640px){
    .video-stage{
        height:auto;
    }

    .video-card,
    .video-card.active,
    .video-card.is-left,
    .video-card.is-right{
        position:relative;
        left:auto;
        top:auto;
        width:100%;
        opacity:1;
        transform:none;
        margin-bottom:22px;
        pointer-events:auto;
    }

    .video-nav{
        display:none;
    }
}