body { margin: 0; background: #9fefff; font-family:Arial,Helvetica,"微軟正黑體"!important; }
* { box-sizing: border-box; }
.wrapper{ width:100%; margin:0 auto;}

/*---------------加上這段chrome手機動畫才會順------------------*/
/* Set default durations */
:root {
    --animation-duration: 250ms; 
    --transition-duration: 250ms; 
}  
/* Contextually shorten duration length */
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
    :root {
        --animation-duration: 0.001ms !important; 
        --transition-duration: 0.001ms !important;
    }
}  
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
    /* Remove duration for all unknown animation when a user requests a reduced animation experience */
    * {
        animation-duration: var(--animation-duration);
        animation-iteration-count: 1 !important;
        transition-duration: var(--animation-duration);
    }
}  
/* Update the duration when animation is critical to understanding and the device can support it */
@media screen and (prefers-reduced-motion: reduce), (update: fast) {
    .c-educational-concept {
        /* Set a new animation duration scoped to this component */
        --animation-duration: 6000ms !important; 
        animation-name: educational-concept;
        /* Use the scoped animation duration */
        animation-duration: var(--animation-duration); 
    }
}
/*---------------加上這段chrome手機動畫才會順 END------------------*/

/*------------------ TOP鈕 ------------------*/
li.top::after {
    content: ""; /*向上箭頭*/
    width: 20px; height: 20px;
	border-right: 3px solid #fff; border-top: 3px solid #fff;
	transform: rotate(-45deg);
	position: absolute; top: 33px; left: 0; right: 0;
    margin: 0 auto; 
}
/*--底部選單--*/
.nav_sidearea_m { display:none; position:fixed; width:85px; bottom:12%; right:10px; z-index:999; opacity:0.95; }
.nav_sidearea_m ul.nav_sidecol { margin: 0; padding: 0;}
.nav_sidearea_m .nav_sidecol li { 
    flex:1; height: 85px; list-style-type:none; margin:5% 0; border-radius: 5px; background:#4e4e4e;
    display: flex; align-items: center; justify-content: center; text-align:center; position: relative; cursor: pointer;
}
.nav_sidearea_m .nav_sidecol li img{ width: 60%; margin: 0 auto; display: flex;}
.nav_sidearea_m .nav_sidecol li.line img{ width: 55%; }
.nav_sidearea_m .nav_sidecol li.line:hover { background-color:#1aa24c;}
.nav_sidearea_m .nav_sidecol li.fb:hover { background-color:#1164ae;}
.nav_sidearea_m .nav_sidecol li.ig:hover { background-color:#bb20c4;}
.nav_sidearea_m .nav_sidecol li:last-child { background:#49aaff; border-radius: 99em;}
.nav_sidearea_m .nav_sidecol li:last-child:hover { background:#145b99; }
.nav_sidearea_m .nav_sidecol li a { display:block; color:#FFF; text-decoration: none;}
.nav_sidearea_m .nav_sidecol li.line p{ margin-top: 6px;}
.buyNow{ display:none; width:100%; margin: 0 auto; padding: 20px 0; background-color: #d0135b; position:fixed; bottom:0; right:0; z-index:9999; opacity:0.9;}
.buyNow a{ display: block; text-decoration: none; text-align: center; font-size: 40px; font-weight: bold; color: #fff; }
.downarrow { margin-left: 15px; display: inline-block; animation: down-arrow 0.6s infinite alternate ease-in-out; }
.downarrow i { 
    display: inline-block; width: 10px; padding: 8px; position: relative; top:-5px;
    border: solid #fff; border-width: 0 5px 5px 0; opacity: 0.2;
    transform: rotate(-45deg); -webkit-transform: rotate(-45deg);    
}
.downarrow i:nth-child(1){ opacity: 0.8; }.downarrow i:nth-child(2){ opacity: 0.6; }
/*箭頭動畫*/
@keyframes down-arrow {
    0% { -webkit-transform: translateX(0); opacity: 0.4; }
    100% { -webkit-transform: translateX(-0.4em); opacity: 0.8; }
}

/* 刊頭 */
.head{ 
    width:100%; 
    margin:0 auto; 
    text-align:center;
    background:#e9f7ff url(../images/live_head_bg2.png) center top no-repeat; 
}
.head .headContent{ width:1280px; height:920px; margin:0 auto; position: relative;}
.headContent div{ margin:0 auto; position:absolute; left:0; right:0;}
.headContent .help{ top:3%; }
.headContent .help img{ width: 55%;}
.headContent .title{ top:15%; z-index: 2;}
.headContent .title_s1{ top:38%; }
.headContent .title_pay{ top:35%; right: 5%; left: auto; z-index: 3;}
.headContent .title_pay img{ width: 75%;}
.title_pay.animate__animated.animate__tada{ --animate-duration: 2s;}
.headContent .main{ bottom:-4px; }
.head-mobileimg{ display:none;}

.head_climb{ width: 100%; margin: 0 auto; }
.head_climb::after{ content: ""; display: block; width: 100%; height: 18px; margin: 0 auto; background-color: #c0e5ff;}
.head_climb img{ width: 100%; margin-bottom: 0; display: block;}
.head_climb img.mobile_img{ display: none;}


.slogan{ 
    width: 100%; 
    margin: 0 auto -70px; position: relative;
    padding: 0; 
    background-color: #046bba;
    text-align:center; 
    color: #fff; 
    font-weight: bold;
    line-height: 4.5rem; 
    padding: 25px 10px;
}
.slogan p{ font-size: 4.5vmin; }
.slogan p span{ font-size: larger; color: yellow;}
.goBN{ position: relative ; top:-80px; z-index: 2;}
.goBN img{ width: 80%;}
.triangleBG{ width: 100%; margin: 0 auto -70px; position: relative; top: -68px; z-index: 1;}
.triangleBG img.arrowDown{ width: 5%; margin: 0 auto; position: absolute; left: 0; right: 0; top: 55%; text-align: center; }


/*1280px*/
.content{ width: 1280px; margin: 0 auto; padding: 6% 0; }
.bg-a{ background: url(../images/live7_bg_top.png) center top no-repeat,url(../images/live7_bg_top_light.jpg) center bottom fixed; padding-top: 40px;}
.bg-pc{ background: url(../images/bg-pc.jpg) center top fixed;}
.star  { background-color: #e9f7ff; background-image: url(../images/bg_star.png); background-attachment: fixed;}


/*圖片*/
.picArea{ width: 100%; text-align: center; overflow-x: hidden;}
.picArea img{ width: 90%; margin: 0 auto; }
.blue    { background-color: #e9f7ff; }
.darkblue{ background-color: #2C78BC; }
.yellow  { background-color: #FFF7D7; }
.red     { background-color: #FFEEEE;}
img.animate__animated.animate__pulse{ --animate-duration: .5s;}
.gotobuy img{ width: 50%; margin: 2% auto; }
.gotobuy img:hover{ transform: scale(1.1);}
img.introTitle{ width: 30%; margin: 2% auto 4%;}
img.full-width{ width: 1920px; position: relative; left: -25%;}
img.full-widthLong{ width: 2000px; position: relative; left: -30%;}
.picArea h1{
    font-size: 70px; letter-spacing: 0.05em; line-height: 2.5rem; color: #0067c8; font-weight: bold;
    text-align: center; margin-bottom: 4%;
}
.picArea h1::after{ content: ""; display: block; width: 125px; border-radius: 99em; margin: 40px auto 0; border-bottom: 8px solid #75aaff; }
h1.system{ margin-bottom: 7%; }
h1.skill{ margin-bottom: 7%; color: #fff000;}
h1.skill::after{ border-bottom: 8px solid #fff478;}
img.mt-1{ margin-top: 8%;}
h1.mt-1{ margin-top: 8%;}

.BNx2{ margin: 4% auto 3%; display: flex; justify-content: center; flex-wrap: wrap;}
.BNx2 .half  { margin: 0 2%; flex: 1; font-size: 50px; background: #FF3C84; filter: drop-shadow(0 12px 1px #eb1764);}
.BNx2 .half:hover{ transform: scale(1.06);}
.BNx2 .half a{ display: block;}
.BNx2 .half, .get{ 
    padding: 2.5%; color: #fff; font-weight: bold; border-radius: 999em; transition: all .3s ease-out; 
}
.BNx2 .blueBN{ background: #4e9af0; filter: drop-shadow(0 12px 1px #3784dc);}
.get{ width: 65%; margin: 1% auto 0; font-size: 60px; background: #FF605B; filter: drop-shadow(0 12px 1px #E82E2E);}
.picArea a{ text-decoration: none; display: block; color: inherit;}

/*youtube RWD*/
.video-container-tutor {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    max-width: 1100px;
    margin: 0 auto 3%;
    border-radius: 10px; 
    width: 100%;
}
.video-container-tutor iframe, .video-container-tutor object, .video-container-tutor embed {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

/*特色*/
.feature{ margin: 0 auto 3%; display: flex; align-items: center; flex-direction: row; text-align: left; font-size: 28px; color: #3b3b3b;}
.feature img{ width: 100%;}
.feature div{ width: 50%;}
.flist ul { background:url(../images/live_feature_icon.png) left top no-repeat; margin: 11% 8% 11% 8%; }
.flist ul p{ color: #000; font-weight: bold; font-size: 1.4em; line-height: 3.2rem; margin: 5% 0; padding-left: 65px; }
.flist li{ list-style-type: none; line-height: 1.5em; padding-left: 67px;}

/*購買步驟*/
.stepArea { width: 100%; background: url(../images/tutor2_step_bg.jpg) no-repeat; background-size: cover; font-size: 28px; line-height: 1.8rem; color: #fff;}
.stepArea .content{ padding: 5% 0;}
.stepArea h2{ font-weight: bold; text-align: center;}
.stepArea h2.ps{ font-size: 1.8em;}
.stepArea h2.ps::after{ content: ""; display: block; width: 100px; border-radius: 99em; margin: 30px auto 0; border-bottom: 8px solid #fffeb9;}
.stepArea h5{ width: 80%; margin: 5% auto 0; color: #fffed1; font-size: 0.8em; font-weight: bold; text-align: center;}
.stepBox{ margin: 8% auto; display: flex; justify-content: space-between; }
.stepBox ul li.h3{ margin-bottom: 20px; font-size: 1.3em; font-weight: bold; color: #bbe5ff; }
.stepBox ul li{ margin-bottom: 11px;}
.stepArea ul.notice_item{ font-size: 0.8em; }

/*好評輪播*/
.picArea .mySwiper{ max-width: 960px;}
.picArea .mySwiper img{ max-width: 800px; border-radius: 1rem;}
.picArea .mySwiper{ margin: 0 auto; padding-bottom: 50px; text-align: center;}
.picArea .mySwiper .swiper-pagination.swiper-pagination-clickable{ display: flex; align-items: center; justify-content: center; }
.picArea .mySwiper .swiper-pagination span.swiper-pagination-bullet{ margin: 0 12px; }
.picArea .mySwiper .swiper-pagination-bullet{ background-color: #000; width: 12px; height: 12px; opacity: .3; }
.picArea .mySwiper .swiper-pagination-bullet-active{ background-color: #ff4a8d; width: 17px; height: 17px; opacity: 1; }
.picArea .mySwiper .swiper-pagination-bullet:focus{ outline: none; box-shadow: none;}
.picArea .swiper-button-next::after, .picArea .swiper-button-prev::after{ color: #67b2f5; font-size: 3em; font-weight: bold;}


/*Q&A*/
.picArea.QA { font-size: 22px; text-align: left; background: #fbfbfb; color: #3b3b3b;}
.picArea.QA h1, .picArea.notice h1{ font-size: 2.5em; }
.picArea.QA h1::after, .picArea.notice h1::after{ width: 70px; margin: 30px auto 0; }
.picArea.QA .qaBox{ width: 90%; margin: 6% auto 0;}
.qaBox ul{ margin-bottom: 3%; line-height: 2.2rem;}
.qaBox ul:last-of-type{ margin-bottom: 0;}
.qaBox ul li{ margin-bottom: 5px;}
.qaBox ul li:first-of-type{ font-weight: bold;}
.qaBox ul li.questionQ span{ color: #2C78BC;}
.qaBox ul li span{ color: #ec3c7d;}
.qaBox p{ margin-bottom: 4%; font-weight: bold; color: #ec3c7d; line-height: 2rem;}

/*注意事項*/
.picArea.notice { font-size: 18px; line-height: 1.8rem; text-align: left; background: #fff; color: #3b3b3b;}
.picArea.notice .content{ padding: 3% 4%;}
ul.notice_item:first-of-type{ margin-top: 4%;}
ul.notice_item{ margin-bottom: 4%;}
ul.notice_item p{ font-weight: bold;}
ul.notice_item li{ margin-bottom: 10px;}


footer{ width: 100%; background-color: #046bba; margin: 0 auto; padding: 10px 5px 100px !important; color: #fff; font-size: 13px; text-align: center; line-height: 1.4em !important;}

/*===================================================================================================================================*/
@media screen and (max-width:1900px) {
    /* slogan */
    .slogan{ margin-bottom: -50px; }
    .goBN{ top:-20px; }
    .triangleBG{ top:-20px;}
    

}

/*===================================================================================================================================*/
    @media screen and (min-width:768px) and (max-width:1281px) {
    
    /* slogan */
    .triangleBG img.arrowDown{ width: 9%; }
         

    
}

/*====================================================================================================================================*/
    @media screen and (max-width:1280px) {
    .head-mobileimg{ display: block; width:100%;}

    .bg-a { 
        background: url(../images/live7_bg_top.png), url(../images/live7_bg_top_lightm.jpg);
        background-size: 100% , contain; 
        background-position: center top,center 70%; 
        background-repeat:no-repeat, repeat-y; 
        padding-top: 8%;
    }
    .bg-pc{ background: url(../images/bg-pc-m.jpg) center top local; background-size: 150% auto; }
    .star  { background-size: 120% auto; background-attachment: local;}


    /*--浮動選單--*/
    .nav_sidearea_m .nav_sidecol li { width: 65px; height: 65px; }
    li.top::after { top: 25px; }
    .nav_sidearea_m .nav_sidecol li.line{ padding: 2% 15%; line-height: 1.2rem;}
    .nav_sidearea_m .nav_sidecol li.line p { margin-top: 0;}
    .nav_sidearea_m .nav_sidecol li.line img { display: none;}

    
    /* 刊頭 */
    .head{ background-image: none; }
    .head .headContent{ width:100%; height:auto; overflow:hidden; padding-bottom: 13%; background: #046bba;}
    .headContent img{ width:100%;}
    .headContent .help{ width:75%; top:2%; }
    .headContent .help img{ width: 100%;}
    .headContent .title{ width:100%; top:18%; }
    .headContent .title_s1{ width:60%; top:40%; }
    .headContent .title_pay{ width: 15%; top:37%; right: 2%;}
    .headContent .title_pay img{ width: 100%;}
    .headContent .main{ width:107%; top:50%; left: -4%; }

    /* slogan */
    .slogan{ margin-bottom: -50px; padding: 20px 10px 0 10px;}
    .goBN{ top:-50px; }
    .goBN img{ width: 100%;}
    .triangleBG{ margin: 0 auto 0; top: 0px; }
    .triangleBG img.arrowDown{ width: 9%; bottom: auto; top: 16%; }
    
    /*1280px*/
    .content{ width: 100%; padding: 10% 0;}   
    .slogan .words{ margin-bottom: 4%;}

    /*圖片*/
    .picArea h1{ font-size: 60px;}
    .picArea h1::after{ width: 100px; }
    img.full-width{ width: 100%; left: 0;}
    img.full-widthLong{ width: 150%; left: -25%;}
    .get{ font-size: 45px; }
    .BNx2 .half{ font-size: 38px; }


    /*youtube*/
    .video-container-tutor{ max-width: 87%;}

    /*特色*/    
    .feature{ font-size: 24px; }
    .flist ul p{ font-size: 1.2em; line-height: 2.5rem; }


    /*購買步驟*/
    .stepArea .content{ padding: 4% 2%;}
    .stepArea{ width: 100%; font-size: 22px;}
    .stepArea h2{ line-height: 2.5rem;}
  
    /*Q&A*/
    .qaBox ul{ margin-bottom: 5%;}
}



/*====================================================================================================================================*/
@media screen and (max-width:767px) {
    
    /*--浮動選單--*/
    .nav_sidearea_m { bottom:0 ; left: 0; width:100%; height:auto; }
    .nav_sidearea_m .nav_sidecol li.top { width: 40px; height: 40px; opacity: 0.8; }
    li.top::after { width: 10px; height: 10px; top: 15px; }
    .nav_sidearea_m .nav_sidecol { display:flex;}
    .nav_sidearea_m ul ul{ position:fixed; right:2%; bottom:23%;}
    .nav_sidearea_m .nav_sidecol li { height: auto; margin:0 ; padding: 3% 0; border-radius: 0; }
    .nav_sidearea_m .nav_sidecol li img{ width: auto; height: 20px; } 
    .nav_sidearea_m .nav_sidecol li.line{ padding: 0; }
    .buyNow{ position: static;}
    .buyNow a{ font-size: 35px; }
    .downarrow i { padding: 6px;  border: solid #fff; border-width: 0 4px 4px 0; }

    /*刊頭*/
    .head_climb img.mobile_img{ display: block;}
    .head_climb img.pc_img{ display: none;}


    /* slogan */
    .slogan{ margin-bottom: -20px;  line-height: 1.5rem; padding: 15px 0 10px; }
    .goBN{ top: -20px; }

    /*圖片*/
    .picArea img{ width: 95%;}
    .picArea h1{ font-size: 32px;}
    .picArea h1::after{ width: 70px; margin-top: 10px; border-bottom: 5px solid #75aaff;}
    h1.skill::after{ border-bottom: 5px solid #fff478;}
    .gotobuy img{ width: 70%; filter: drop-shadow(0 7px 1px #E82E2E);}
    img.full-width{ width: 170%; left: -30%;}
    img.full-widthLong{ width: 185%; left: -45%;}
    .get{ width: 85%; max-width: 500px; padding: 4.5%; font-size: 36px; filter: drop-shadow(0 10px 1px #E82E2E); }

    .BNx2 .half{ width: 85%; margin: 3% auto 4%; padding: 4%; flex: none; font-size: 36px; filter: drop-shadow(0 8px 1px #eb1764);}
    .BNx2 .blueBN{ filter: drop-shadow(0 8px 1px #3784dc);}


    /*youtube*/
    .video-container-tutor{ max-width: 90%;}


    /*特色*/
    .feature{ -webkit-flex-direction: column; flex-direction: column;/*順序才有效*/ font-size: 20px;}
    .feature div{ width: 100%; }
    .feature .imgBox{ text-align: center; margin: 0;}
    .feature.mobile_order > div:nth-of-type(1){ -webkit-order: 2; order: 2;}
    .feature.mobile_order > div:nth-of-type(2){ -webkit-order: 1; order: 1;}
    .feature .flist{ width: 90%; margin: 0 auto;}
    .flist ul { margin: 30px auto; background-size: 40px 40px;}
    .flist ul p{ font-size: 1.3em; line-height: 2.5rem; padding-left: 50px; }
    .flist li{ padding-left: 50px;}

  
    /*購買步驟*/
    .stepArea .content{ padding: 8% 4%;}
    .stepBox{ flex-direction: column; align-items: center; text-align: center;}
    .stepBox ul{ margin-bottom: 8%;}
    .stepArea h5{ width: 100%; text-align: justify;}
    .stepArea h2.ps{ margin-bottom: 10%;}
    .stepArea h2.ps::after{ width: 70px; margin: 15px auto 0; border-bottom: 5px solid #fffeb9;}


    /*好評輪播*/
    .picArea .mySwiper img{ max-width: 95%;}
    .mySwiper .swiper-button-next, .mySwiper .swiper-button-prev{ display: none;}


    /*QA+注意事項*/
    .picArea.QA{ font-size: 18px; }
    .picArea.QA h1, .picArea.notice h1{ font-size: 2em; }
    .picArea.QA h1::after, .picArea.notice h1::after{ width: 50px; margin: 15px auto 7%; }
    .picArea.QA .qaBox{ width: 100%;}
    .qaBox ul{ margin-bottom: 9%; line-height: 1.7rem;}
    .picArea.notice .content,.picArea.QA .content{ padding: 12% 6% 8%;}



    footer{ padding: 15px 5px 30%!important;}
}

/*====================================================================================================================================*/
@media screen and (max-width:450px) {


    .nav_sidearea_m { right: -8%;}
    .buyNow{ padding: 15px 0; }
    .buyNow a{ font-size: 30px; }
    .downarrow i { top: -3px;}

    .get{ padding: 4.5% 0; font-size: 30px; filter: drop-shadow(0 8px 1px #E82E2E); }
    .BNx2 .half{ padding: 4% 0; font-size: 28px; }

    footer{ padding: 15px 0 33%!important;}

    .stepArea ul.notice_item{ font-size: 0.7em; line-height: 1.5rem; }
    .stepArea h2.ps{ font-size: 1.5em; margin-bottom: 17%;}


}