.menu_bar {
    top: 0;
    position: relative;
    width: auto;
}

.project {
    display: block;
    width: 100%;
    background-color: #ceb598;
}

.main_visual {
    display: block;
    width: 100%;
    height: 0px;
    padding-bottom: 24%;
    background-image: url(/images/project/2021/customize/visual_bg.jpg);
}

    .main_visual div {
        display: block;
        display: block;
        max-width: 1050px;
        height: 0px;
        padding-bottom: 24%;
        margin: 0 auto;
        background-image: url(/images/project/2021/customize/visual.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

/*測邊nav*/
.side_bar {
    position: fixed;
    right:5%;
    z-index:99;
/*    left: 50%;
    margin-left: 620px;*/
}

/*nav*/
.project nav ul {
    text-align: center;
    margin-top: 40px;
}

    .project nav ul li {
        display: inline-block;
        text-align: center;
        width: 160px;
        height: 120px;
        background-image: url(/images/project/2021/customize/nav.png);
        margin: 15px;
        position: relative;
        font-weight: 500;
    }

        .project nav ul li a {
            line-height: 130px;
            font-size: 1.25em;
            font-weight: 500;
        }

        .project nav ul li:before {
            display: block;
            content: "chapter 01";
            position: absolute;
            top: 10px;
            font-size: 14px;
            right: 10px;
        }

        .project nav ul li:nth-child(2):before {
            content: "chapter 02";
        }

        .project nav ul li:nth-child(3):before {
            content: "chapter 03";
        }

        .project nav ul li:nth-child(4):before {
            content: "chapter 04";
        }

        .project nav ul li:nth-child(5):before {
            content: "chapter 05";
        }

        .project nav ul li:hover {
            background-image: url(/images/project/2021/customize/nav_hover.png);
        }

        .project nav ul li a {
            display: block;
        }

            .project nav ul li a:hover {
                color: #fff;
            }

/*整體設定*/
.project section {
    display: block;
    max-width: 1200px;
    margin: 0 auto;
    padding: 70px 20px;
}

.project h2 {
    display: block;
    width: 210px;
    height: 63px;
    background-image: url(/images/project/2021/customize/title_bg.png);
    margin: 0 auto;
    font-size: 1.8em;
    font-weight: 600;
    text-align: center;
    position: relative;
    margin-bottom: 15px;
    margin-top: 50px;
}

    .project h2:before {
        display: inline-block;
        content: "chapter";
        font-size: 14px;
        position: absolute;
        top: -10px;
        left: 5px;
        font-style: italic;
    }

    .project h2:after {
        display: inline-block;
        content: "01";
        font-size: 18px;
        position: absolute;
        bottom: 3px;
        right: 9px;
        font-style: italic;
    }

.project .chapter02 h2:after {
    content: "02";
}

.project .chapter03 h2:after {
    content: "03";
}

.project .chapter04 h2:after {
    content: "04";
    right: 7px;
}

.project .chapter05 h2:after {
    content: "05";
}

.project .chapter04 h2 {
    width: 290px;
    background-image: url(/images/project/2021/customize/title_bg_01.png);
}

.project .chapter05 h2 {
    background-image: url(/images/project/2021/customize/title_bg_white.png);
    color: #fff;
}

.project h3, .project h4 {
    font-size: 1.5em;
    text-align: center;
    font-weight: 600;
}

.project h4 {
    margin-top: 60px;
}

.project p {
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 70%;
}

    .project p span {
        color: #ef755d;
    }

/*屋況比較*/
table {
    display: table;
    background-color: #fff;
    width: 90%;
    margin: 0 auto;
    border: 6px solid #333;
    margin-top: 20px;
    border-collapse: separate;
    border-spacing: 0;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    overflow: hidden;
}

    table th {
        border: 1px solid #333;
        padding: 10px;
        vertical-align: middle;
    }

    table tr:first-child {
        background-color: #ef755d;
        font-size: 1.25em;
        font-weight: 500;
        color: #fff;
    }

    table th:first-child {
        width: 17%;
    }

    table span {
        display: inline-block;
        margin-left: 5px;
        color: #e84924;
    }

/*認識客變*/
.chapter02 .switch_nav {
    display: none;
    text-align: center;
}

    .chapter02 .switch_nav a {
        display: inline-block;
        margin: 30px 15px;
    }

.chapter02, .chapter03 {
    display: block;
    width: 100%;
    background-color: #fff;
}

    .chapter02 em {
        display: block;
        text-align: center;
        font-weight: 600;
        margin-top: 20px;
    }

    .chapter02 a {
        display: block;
        text-decoration: underline;
        text-align: center;
        word-break: break-all;
    }

    .chapter02 .wiki {
        display: inline;
    }

        .chapter02 a:hover, .chapter02 .wiki:hover {
            color: #e84924;
        }

.note {
    display: block;
    width: 70%;
    background-color: #ebebeb;
    margin: 0 auto;
    border: 5px solid #0c5b86;
    margin-top: 40px;
    padding: 15px;
    box-sizing: border-box;
}

.box {
    display: flex;
    justify-content: center;
}

.plan img {
    width: 100%;
}

.items h5, .items_app h5 {
    font-size: 1.25em;
    color: #c42f11;
    font-weight: 600;
}

.items.right .desc:first-child {
    margin-top: 10px;
}

.desc {
    margin-top: 30px;
    opacity: 0.5;
}

    .desc ul li {
        list-style-type: disc;
        list-style-position: inside;
    }

.chapter02 .margin {
    margin-left: 50px;
}

.box .left div:hover, .box .left .selected {
    opacity: unset;
}

.box .right div:hover, .box .rihgt .selected {
    opacity: unset;
}

/*客變流程*/
.steps-timeline {
    display: flex;
    justify-content: space-around;
}

.steps {
    width: 11%;
    margin-top: 50px;
    position: relative;
}

.steps-name {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    border: 6px solid #0c5b86;
    text-align: center;
    line-height: 80px;
    margin: 0 auto;
    background-color: #fff;
    position: relative;
    z-index: 2;
}

    .steps-name:before {
        display: block;
        content: "";
        width: 150%;
        height: 6px;
        background-color: #0c5b86;
        position: absolute;
        top: 40px;
        right: 0px;
        margin-right: -150%;
        z-index: 1;
    }
/*transform:rotate(40deg);*/
.steps h3 {
    font-size: 15px;
    color: #0c5b86;
    font-weight: 700;
}

.steps-description {
    font-size: 1.25em;
    font-weight: 600;
}

.steps ul li {
    list-style-type: disc;
    list-style-position: outside;
}

.steps-name.style6:before {
    display: none;
}

.steps-name.style6 {
    border-color: #ef755d;
    color: #ef755d;
}

/*預售影音*/
.deco {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 5px solid #000;
    margin-top: 60px;
}

    .deco i {
        display: inline-block;
        width: 60px;
        height: 60px;
        border-radius: 100%;
        border: 2px solid #000;
        line-height: 57px;
        text-align: center;
        padding-left: 5px;
        box-sizing: border-box;
        position: relative;
        bottom: 15px;
        margin-right: 20px;
    }

        .deco i.fa-glasses {
            font-size: 1.25em;
            padding-left: 0px;
        }

.deco_desc {
    display: inline-block;
    padding-left: 20px;
    border-left: 1px solid #000;
}

    .deco_desc h3, .deco_desc p {
        text-align: left;
        width: 100%;
    }

.video {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

    .video div {
        width: 31%;
        margin-top: 30px;
    }

        .video div a img {
            width: 100%;
            height: calc(100vw*0.31/3*2);
        }

        .video div a {
            display: block;
            position: relative;
        }
            /*.video div a span{display:none; width: 90px; height: 90px; border-radius: 100%; border:2px solid #fff;line-height:85px; text-align: center;padding-left: 5px;box-sizing: border-box;position:absolute;color: #fff;  top: 0;  right: 0;  bottom: 0;  left: 0;  margin: auto;padding-top: 5px;padding-left:10px;}*/
            .video div a span i {
                font-size: 1.5em;
            }
    /*.video div a:hover span{display: inline-block;}*/
    .video h4 {
        margin-top: 0px;
    }

    .video p {
        width: 100%;
    }

    /** iframe不設定分配寬度 **/
    .video .v_iframe {
        width: unset;
        text-align: center;
    }

        .video .v_iframe iframe {
            width: calc(100vw*0.28);
            height: calc(100vw*0.28/16*9);
        }

/*常見Q&A*/
.chapter05 {
    display: block;
    width: 100%;
    background-color: #4a7e93;
    color: #fff;
}

.knowledge {
    margin: 30px 0px;
    padding-bottom: 5px;
    border-bottom: 2px dotted #fff;
}

    .knowledge.no3 .qestion_no {
        position: relative;
        top: -30px;
    }

.qestion_no {
    display: inline-block;
    width: 63px;
    height: 61px;
    background-image: url(/images/project/2021/customize/question_bg.png);
    text-align: center;
    font-size: 1.8em;
    font-weight: 600;
    font-family: Tw Cen MT;
    line-height: 60px;
    position: relative;
    top: -15px;
}

.answer {
    display: inline-block;
    margin-left: 20px;
    width: 92%;
}

    .answer h3, .answer p {
        text-align: left;
        width: 100%;
    }

    .answer h3 {
        font-size: 1.25em;
        font-weight: 500;
    }

    .answer p {
        color: #fbe4ca;
    }

        .answer p:before {
            display: inline-block;
            content: "A：";
        }

.knowledge.no6 {
    border-bottom: 0;
}

/*大會考*/
.chapter06 {
    display: block;
    width: 100%;
    background-color: #ef755d;
}

    .chapter06 section {
        background-image: url(/images/project/2021/customize/exam_bg.jpg);
        background-position: center;
        background-size: auto;
        background-repeat: no-repeat;
    }

    .chapter06 .exam {
        display: block;
        max-width: 1000px;
        background-color: #fff;
        border-radius: 30px;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
        padding: 0 20px;
    }

        .chapter06 .exam h3 {
            color: #ef755d;
            font-size: 2em;
            margin-bottom: 8px;
            padding-top: 40px;
        }

        .chapter06 .exam p {
            font-size: 1.6em;
            font-weight: 600;
        }

            .chapter06 .exam p span {
                color: #00b319;
            }

        .chapter06 .exam a {
            display: block;
            width: 200px;
            height: 45px;
            border-radius: 50px;
            margin: 0 auto;
            background-color: #000;
            line-height: 45px;
            color: #fff;
            text-align: center;
            font-weight: 500;
            font-size: 1.25em;
            position: relative;
            top: 20px;
        }

            .chapter06 .exam a:hover {
                color: #ef755d;
            }

        .chapter06 .exam i {
            position: absolute;
            right: 0;
            top: 25px;
        }

.team {
    text-align: center;
    background-color: #000;
    color: #fff;
    font-size: 14px;
    padding: 10px 0;
}

/*測驗*/
.main_visual.exam div {
    background-image: url(/images/project/2021/customize/exam_visual.png);
}

.exam_desc {
    display: block;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #4a7e93;
    padding: 40px 80px;
    box-sizing: border-box;
    color: #fff;
}

    .exam_desc strong {
        display: block;
        color: #fbe4ca;
        font-size: 1.5em;
        font-weight: 500;
        margin-top: 20px;
    }

    .exam_desc ul li {
        list-style-type: decimal;
        margin-left: 30px;
        margin-bottom: 10px;
    }

    .exam_desc i {
        display: block;
        margin-left: 20px;
        font-size: 1.5em;
        font-weight: 600;
    }

.prize {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

    .prize div {
        width: 22%;
        margin-top: 20px;
    }

.prize_container a {
    display: block;
    color: #fff;
}

.prize_container img {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    box-shadow: 3px 3px 3px 3px #3c6d81;
    margin: 0 auto;
}

.prize_container p span {
    display: inline-block;
    font-size: 1.25em;
    color: #fff;
    font-weight: 500;
    margin-top: 15px;
}

.prize_container em {
    display: block;
    padding-top: 10px;
    border-top: 1px solid #fff;
    margin-top: 10px;
}

.exam_btn {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    text-align: center;
    margin-top: 50px;
}

    .exam_btn a {
        display: inline-block;
        color: #fff;
        border-radius: 50px;
        margin: 0 auto;
        margin: 20px;
        width: 220px;
        border: 1px solid #fff;
        line-height: 45px;
        font-size: 1.25em;
        font-weight: 500;
    }

        .exam_btn a.review {
            border-color: #424242;
            color: #424242;
        }

        .exam_btn a:hover {
            background-color: #ef755d;
            color: #fff;
            border-color: #ef755d;
        }

        .exam_btn a.review:hover {
            background-color: #424242;
            color: #fff;
            border-color: #424242;
        }

/*贊助商*/
.sponser {
    background-color: #272727;
    text-align: center;
    color: #fff;
    padding: 20px 0;
}

    .sponser a {
        display: inline-block;
        margin: 30px 20px;
    }

/*測驗題目*/
.exam_desc h2 {
    background-image: none;
    width: auto;
    height: auto;
}

    .exam_desc h2:before, .exam_desc h2:after {
        display: none;
    }

    .exam_desc h2 span {
        display: block;
        font-size: 1.8em;
    }

.exam_img {
    width: 80%;
    margin: auto;
}

    .exam_img img {
        width: 100%;
    }

.tip a {
    text-decoration: underline;
    color: #fbe4ca;
}

.exam_star .exam_btn {
    margin-top: 30px;
}

/*測驗結果*/
.exam_result {
    text-align: center;
}

.exam_desc.exam_result i {
    text-align: center;
    font-weight: 500;
}

.exam_result em {
    display: block;
    width: 250px;
    margin: 0 auto;
    line-height: 50px;
    font-size: 1.6em;
    border-radius: 60px;
    background-color: #e1dcd6;
    color: #4a7e93;
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 10px;
}

.exam_result h3 {
    display: inline-block;
    color: #bb9f7e;
    font-size: 2em;
    padding: 10px;
    border-bottom: 1px solid #bb9f7e;
    margin-bottom: 20px;
}

.exam_result p {
    font-size: 1.25em;
    width: 50%;
}

.exam_btn a.fb_btn {
    background: #4267b2;
    border-color: #4267b2;
    border-color: #4267b2;
}

/*分享元件*/
.share {
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 15px;
    line-height: 28px;
}

@media (min-width:320px) and (max-width: 1024px) {

    .video div iframe {
        width: 100%;
    }

    .main_visual, .main_visual div {
        padding-bottom: 40%;
    }

    .side_bar {
        display: none;
    }

    .IsWeb .container.content {
        padding-top: 50px;
    }

    .project section {
        padding: 30px 20px;
    }

    #chapter01 p {
        width: 90%;
    }

    table {
        width: 90%;
    }

    .chapter02 .margin {
        margin-left: 20px
    }

    .answer {
        width: 90%;
    }

    .steps {
        width: 13%;
    }

    .knowledge.no3 .qestion_no, .knowledge.no4 .qestion_no {
        top: -35px;
    }

    .knowledge.no6 .qestion_no {
        top: -60px;
    }

    .exam_star h2 {
        margin-top: 0;
    }

    /*分享元件*/
    .share {
        display: inline-block;
        position: absolute;
        right: 0px;
        top: 15px;
        line-height: 28px;
    }
}

@media (min-width:320px) and (max-width: 780px) {
    .project nav ul li {
        margin: 15px 20px;
    }

    table {
        width: 100%;
    }

    #chapter02 p {
        width: 90%;
    }

    .chapter02 .switch_nav {
        display: block;
    }

        .chapter02 .switch_nav a {
            margin-bottom: 0px;
        }

    .note {
        width: 90%;
    }

    .box {
        display: block;
    }

    .desc {
        text-align: center;
        margin-bottom: 20px;
    }

        .desc:nth-child(n+2), .items.right {
            display: none;
        }

    .answer {
        width: 85%;
    }

    .knowledge.no3 .qestion_no {
        top: -65px;
    }

    .knowledge.no2 .qestion_no, .knowledge.no5 .qestion_no {
        top: -40px;
    }

    .knowledge.no6 .qestion_no {
        top: -90px;
    }


    .exam_desc {
        padding: 40px 20px;
    }

    .prize {
        justify-content: space-around;
    }

        .prize div {
            width: 38%;
        }
}

@media (min-width:320px) and (max-width:640px) {
    .steps-timeline {
        display: block;
        text-align-last: center;
    }

    .steps {
        width: 100%;
    }

        .steps ul li {
            list-style-position: inside;
        }

    .steps-name:before {
        display: none;
    }

    .video div {
        width: 100%;
    }

    .deco i {
        display: none;
    }

    .deco_desc {
        width: 100%;
        border-left: 0;
        padding-left: 0;
    }

        .deco_desc h3, .deco_desc p {
            text-align: center;
        }

    .deco {
        border-bottom: 5px solid #000;
        border-top: 5px solid #000;
        padding: 10px 0;
    }

    .video div {
        margin-top: 50px;
    }

    .knowledge.no6 .qestion_no {
        top: -110px;
    }

    .chapter06 .exam i {
        display: none;
    }

    .exam_result p {
        width: 80%;
    }

    .video div a img {
        width: 100%;
        height: calc(100vw/3*2)
    }

    .video .v_iframe iframe {
        width: calc(100vw*0.9);
        height: calc(100vw*0.9/16*9);
    }

}

@media (min-width:320px) and (max-width:480px) {
    .project nav ul li {
        width: 145px;
        height: 105px;
        background-image: url(/images/project/2021/customize/nav.png);
        background-size: contain;
        background-repeat: no-repeat;
        margin: 5px;
    }

        .project nav ul li a {
            line-height: 110px;
        }

    .chapter02 .switch_nav a {
        margin: 15px 10px;
    }

    .desc {
        margin-top: 10px;
    }

    .qestion_no {
        display: block;
        top: 0;
    }

    .knowledge.no2 .qestion_no, .knowledge.no3 .qestion_no, .knowledge.no4 .qestion_no, .knowledge.no5 .qestion_no, .knowledge.no6 .qestion_no {
        top: 0;
    }

    .knowledge {
        padding-bottom: 20px;
    }

    .answer {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
    }

    .prize div {
        width: 80%;
    }

    .exam_btn a {
        width: 80%;
    }

    .sponser a {
        margin: 10px 15px;
    }

    .chapter06 .exam h3 {
        font-size: 1.7em;
    }

    .chapter06 .exam p {
        font-size: 1.3em;
    }

    .video .v_iframe iframe {
        width: calc(100vw*0.9);
        height: calc(100vw*0.9/16*9);
    }
}

@media (min-width:360px) and (max-width:480px) {
    .chapter06 .exam h3 {
        font-size: 2em;
    }

    .chapter06 .exam p {
        font-size: 1.5em;
    }
}

@media (min-width:375px) and (max-width:480px) {
    .chapter06 .exam p {
        font-size: 1.5em;
    }
}

@media (min-width:414px) and (max-width:480px) {
    .chapter06 .exam h3 {
        font-size: 2.2em;
    }

    .chapter06 .exam p {
        font-size: 1.65em;
    }
}

@media (min-width:640px) and (max-width:768px) {
    .video .v_iframe {
        width: 31%;
    }
}

.shi-play, .video_mode .shi-play{
    filter:unset;
}