@charset "UTF-8";

*{ margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html{ width:100%; height:100%; font-family:Arial, Helvetica,"微軟正黑體",sans-serif; text-size-adjust:none; font-size:15px; }
ul{ margin: 0; padding: 0; list-style: none;}
body{ background-color: #f7f8f8; height: 100vh;}

nav{ width: 100%; padding: 0 calc((100% - 1100px)/2); background-color: #fff; }
nav .navbar{ display: flex; align-items: center; height: 65px;}
nav .navbar .logo img{ width: 100%; max-width: 305px;}


header{ width: 100%; padding: 0 calc((100% - 1100px)/2);}

/* 團隊優勢-標題 */
header .title-team{ padding: 85px 0 0 0; text-align: center;}
header .title-team img{ max-width: 770px;}
header .team-member img{ max-width: 1100px;}
header .title-team-m{ display: none;}
header .team-member-m{ display: none;}

/* 我要當講師-標題 */
header .title-lecturer{ padding: 85px 0 0 0; text-align: center;}
header .title-lecturer img{ max-width: 555px; }
header .title-lecturer-m{ display: none;}

/* 關於我們-標題 */
header .title-about{ padding: 85px 0 0 0; margin: 0 auto; text-align: center;}
header .title-about img{ width: 100%; max-width: 375px; }

main{ width: 100%; padding: 0 calc((100% - 1100px)/2);}
main .advantage01{ margin: 100px 0; }
main .advantage01 ul{ display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; }
main .advantage01 ul li{ padding: 0 0 50px 0; display: flex; justify-content: space-between; width: 48%;}
main .advantage01 ul li:nth-child(1){ order: 1;}
main .advantage01 ul li:nth-child(2){ order: 3;}
main .advantage01 ul li:nth-child(3){ order: 5;}
main .advantage01 ul li:nth-child(4){ order: 2;}
main .advantage01 ul li:nth-child(5){ order: 4;}
main .advantage01 ul li:nth-child(6){ order: 6;}
main .advantage01 ul li .right-info{ padding: 0 0 0 20px;}
main .advantage01 ul li .right-info h3{ font-size: 2em; color: #52c3f1;}
main .advantage01 ul li .right-info p{ font-size: 1.2em; color: #262626; line-height: 1.7; text-align: justify;}

main .advantage02{ padding: 60px 0;}
main .advantage02 ul{ display: flex; justify-content:space-around; }
main .advantage02 ul li{ width: 22%; position: relative; display: flex; align-items: stretch;}
main .advantage02 ul li>img{ position: absolute; top: -50px; left: calc(50% - 50px);}
main .advantage02 ul li>div{ padding: 60px 20px 30px 20px; border-radius: 20px; text-align: center; width: 100%;}
main .advantage02 ul li>div.blue{ background-color: #b9e3f9;}
main .advantage02 ul li>div.yellow{ background-color: #ffe900;}
main .advantage02 ul li>div h3{ padding: 0 0 10px 0; font-size: 3em; color: #fff;}
main .advantage02 ul li>div p{ font-size: 1.1em; line-height: 1.6;}

main .btn{ margin: 0 0 80px 0; display: flex; justify-content: center;}
main .btn a{ display: block; margin: 0 10px; padding: 10px 40px; font-size: 1.5em; color: #ffe900; text-decoration: none; text-align: center;
    background-color: #595656; border-radius: 50px; font-weight: bold; transition: 1s;
}
main .btn a:hover{ background-color: #52c3f1;}

/* 我要當講師-你是不是也+要如何成為老師 */
main .lecturer{ margin: 50px 0; position: relative; overflow: hidden;}
main .lecturer h3{ display: block; margin: 0 auto; padding: 10px 0; border-radius: 50px; font-size: 2em; text-align: center; color: #fff; 
    background-color: #52c3f1; font-weight: normal; 
}
main .lecturer h3.sty01{ width: 20%; }
main .lecturer h3.sty02{ width: 30%;}
main .lecturer h3::after{ content: ''; border-top: 1px solid #52c3f1; position: absolute; left: 0; width: 100%; z-index: -999;}
main .lecturer h3.sty01::after{ top: 8%;}
main .lecturer h3.sty02::after{ top: 6%;}
main .lecturer>ul{ display: flex; justify-content: space-around; margin: 50px 0;}
main .lecturer>ul li{ width: 28%; text-align: center;}
main .lecturer>ul li h4{ padding: 10px 0; font-size: 1.7em; color: #52c3f1;}
main .lecturer>ul li p{ font-size: 1.2em; line-height: 1.6; color: #4e4e4e;}

/* 關於我們 */
main .aboutus{display: flex; justify-content: space-between; margin: 30px 0;}
main .aboutus .aboutus-main{ width: 50%; padding: 20px 80px;}
main .aboutus .aboutus-main h3{ display: block; margin-bottom: 10px; padding: 5px; width: 55%; font-size: 2em; background-color: #52c3f1; color: #fff; text-align: center;
    border-radius: 50px; font-weight: normal;
}
main .aboutus .aboutus-main p{ padding: 15px 0; font-size: 1.3em; line-height: 1.6; color: #333;}
main .aboutus .aboutus-photo img{ width: 100%; max-width: 550px;}
main .aboutus-list{ padding: 20px 0;}
main .aboutus-list ul{ margin: 0 auto; width: 70%; display: flex; justify-content: space-around;}
main .aboutus-list ul li{ font-size: 2em; color: #52c3f1;}
main .aboutus-btn{ margin:50px 0; display: flex; justify-content: center;}
main .aboutus-btn a{display: block; margin: 0 10px; padding: 10px 45px; font-size: 1.6em; color: #52c3f1; text-decoration: none; text-align: center;
    background-color: #ffe900; border-radius: 50px; font-weight: bold; 
}
main .aboutus-btn a:hover{ background-color: #52c3f1; color: #fff;}

footer{ padding: 20px 0; text-align: center; background-color: #fff; color: #595656; letter-spacing: 1px; line-height: 2;}
footer a{ text-decoration: none; color: #52c3f1;}


/* ===== table+moblie ===== */

@media screen and ( min-width:768px ) and ( max-width:1024px ){
    nav{ width: 100%; padding: 0 2%;}

    header{ width: 100%; padding: 0 5%;}
    header .title-team{ padding: 50px 0 0 0; }

    main{ padding: 0 5%;}
    main .advantage01{ margin: 50px 0 0 0; }
    main .advantage02 ul li>div{ padding: 60px 20px 20px 20px;}
    main .advantage02 ul li>div h3{ padding: 0 0 5px 0; font-size: 2em;}

    main .lecturer h3.sty01{ width: 30%;}
    main .lecturer h3.sty02{ width: 40%;}

    /* 關於我們 */
    main .aboutus{display: flex; justify-content: space-between; margin: 30px 0;}
    main .aboutus .aboutus-main{ width: 50%; padding: 20px;}

}

@media screen and ( max-width:768px ){
    main .advantage02{ padding: 30px 0;}
    main .advantage02 ul{ display: flex; justify-content:space-around; flex-wrap: wrap; }
    main .advantage02 ul li{ margin: 0 0 70px 0; width: 46%; align-items: stretch;}
    main .advantage02 ul li:nth-child(3){ margin: 0;}
    main .advantage02 ul li:nth-child(4){ margin: 0;}
    main .advantage02 ul li>div{ padding: 65px 10px 20px 10px;}
    main .advantage02 ul li>div h3{ padding: 0 0 5px 0; font-size: 1.8em;}
    main .advantage02 ul li>div p{ font-size: 1.2em; line-height: 1.5;}

    main .lecturer h3.sty01{ width: 40%; }
    main .lecturer h3.sty02{ width: 60%;}
    main .lecturer h3.sty01::after{ top: 7.5%;}
    main .lecturer h3.sty02::after{ top: 6%;}
    main .lecturer>ul{ display: flex; justify-content: space-between;}
    main .lecturer>ul li{ padding: 10px 0; width: 30%;}
    main .lecturer>ul li p{ font-size: 1em;}

    header .title-about{ padding: 40px 5%; margin: 0 auto; }
    main .aboutus{display: flex; justify-content:center; flex-wrap: wrap; margin: 10px 0;}
    main .aboutus .aboutus-main{ width: 100%; padding: 0 20px;}
    main .aboutus .aboutus-main h3{ padding: 5px; width: 35%; font-size: 1.7em;}
    main .aboutus .aboutus-main p{ padding: 15px 0; font-size: 1.3em;}
    main .aboutus-list{ padding: 0;}
    main .aboutus-list ul li{ font-size: 1.8em;}
    main .aboutus-btn{ margin:30px 5%; display: flex; justify-content:space-between;}
    main .aboutus-btn a{ font-size: 1.5em; width: 45%;}
}

@media screen and ( max-width:767px ){
    nav{ width: 100%;}
    nav .navbar{ display: flex; align-items: center; justify-content: center;}
    nav .navbar .logo img{ width: 100%; max-width: 305px;}

    header{ width: 100%; padding: 0;}
    header .title-team{ display: none;}
    header .title-team-m{ display:block; padding: 20px;}
    header .title-team-m img{ width: 100%; max-width: 750px; }
    header .team-member{ display: none;}
    header .team-member-m{ display:block;}
    header .team-member-m img{ width: 100%; max-width: 750px;}

    header .title-lecturer{ display: none;}
    header .title-lecturer-m{ display:block; padding: 20px; text-align: center; font-size: 1.1em;}
    header .title-lecturer-m img{ width: 100%; max-width: 750px;}

    /* 關於我們-標題 */
    header .title-about{ padding: 20px 10%; margin: 0 auto; }

    main{ width: 100%; padding: 0 2%;}
    main .advantage01{ margin: 20px 0; }
    main .advantage01 ul{ display: flex; flex-wrap: wrap; align-items:flex-start; justify-content:space-around; }
    main .advantage01 ul li{ padding: 0 0 20px 0; display: flex; justify-content: space-between; width: 40%; flex-wrap: wrap}
    main .advantage01 ul li:nth-child(1){ order: 1;}
    main .advantage01 ul li:nth-child(2){ order: 2;}
    main .advantage01 ul li:nth-child(3){ order: 3;}
    main .advantage01 ul li:nth-child(4){ order: 4;}
    main .advantage01 ul li:nth-child(5){ order: 5;}
    main .advantage01 ul li:nth-child(6){ order: 6;}
    main .advantage01 ul li .left-img{ width: 100%; text-align: center; }
    main .advantage01 ul li .left-img img{ width: 60%;}
    main .advantage01 ul li .right-info{ width: 100%; padding: 0; text-align: center;}
    main .advantage01 ul li .right-info h3{ font-size: 1.5em; padding: 5px 0;}
    main .advantage01 ul li .right-info p{ font-size: 1em; line-height: 1.5; }

    main .advantage02{ padding: 30px 0;}
    main .advantage02 ul{ display: flex; justify-content:space-around; flex-wrap: wrap; }
    main .advantage02 ul li{ margin: 0 0 70px 0; width: 46%; align-items: stretch;}
    main .advantage02 ul li:nth-child(3){ margin: 0;}
    main .advantage02 ul li:nth-child(4){ margin: 0;}
    main .advantage02 ul li>img{ transform: scale(0.8);}
    main .advantage02 ul li>div{ padding: 45px 10px 20px 10px;}
    main .advantage02 ul li>div h3{ padding: 0 0 5px 0; font-size: 1.6em;}
    main .advantage02 ul li>div p{ font-size: 1em; line-height: 1.5;}

    /* 我要當講師-你是不是也+要如何成為老師 */
    main .lecturer{ margin: 20px 0; }
    main .lecturer h3{ font-size: 1.5em;}
    main .lecturer h3.sty01{ width: 50%; }
    main .lecturer h3.sty02{ width: 70%;}
    main .lecturer h3.sty01::after{ top: 3.5%;}
    main .lecturer h3.sty02::after{ top: 2.5%;}
    main .lecturer>ul{ display: flex; justify-content:center; margin: 20px 0; flex-wrap: wrap;}
    main .lecturer>ul li{ padding: 10px 0; width: 80%;}
    main .lecturer>ul li h4{ padding: 5px 0; font-size: 1.5em;}
    main .lecturer>ul li p{ font-size: 1.1em; line-height: 1.5;}

    /* 關於我們 */
    main .aboutus{display: flex; justify-content:center; flex-wrap: wrap; margin: 10px 0;}
    main .aboutus .aboutus-main{ width: 100%; padding: 0 20px;}
    main .aboutus .aboutus-main h3{ padding: 5px; width: 65%; font-size: 1.5em;}
    main .aboutus .aboutus-main p{ padding: 15px 0; font-size: 1.1em;}
    main .aboutus-list{ padding: 0;}
    main .aboutus-list ul{ margin: 0 auto; width: 100%; display: flex; justify-content: space-around;}
    main .aboutus-list ul li{ font-size: 1.2em;}
    main .aboutus-btn{ margin:20px 2%; display: flex; justify-content:space-between;}
    main .aboutus-btn a{display: block; margin: 0; padding: 10px 0; font-size: 1.3em; width: 48%;}

    main .btn{ margin: 0 0 40px 0; }
    main .btn a{ width: 49%; margin: 0 5px; padding: 10px; font-size: 1.2em; }

    footer{ padding: 20px 2%; letter-spacing: 0; line-height: 1.5;}
}