/* 手機板 */

@media screen and (max-width: 768px) {
    .logoDiv {
        display: none;
    }
    .section {
        min-height: 100vh;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        overflow: hidden;
    }
    /* ------------------------------------------------- */
    .content {
        height: 100%;
        padding-top: 10vh;
        padding-bottom: 10vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 20;
    }
    .content .info {
        z-index: 10;
        position: relative;
        top: 0%;
        left: 0%;
        writing-mode: vertical-rl;
    }
    .content .titleDiv {
        position: relative;
        top: 0%;
        left: 0%;
        writing-mode: vertical-rl;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        margin-left: 15vw;
        margin-bottom: 5vh;
    }
    .content .titleDiv .title {
        writing-mode: vertical-rl;
    }
    .content .titleDiv .title-decoTxt {
        position: relative;
        top: 0%;
        right: 0%;
    }
    .content .titleCircle {
        width: 30vw;
        height: 30vw;
        position: absolute;
        top: -8vw;
        left: auto;
        right: 0%;
    }
    /* 圖 */
    .section-logo {
        margin-top: 32px;
        display: block;
        width: 40vw;
        height: 60vw;
        background-color: #fff;
        mask-image: url(../img/logoMask.svg);
        mask-position: center center;
        mask-size: 100% auto;
        mask-repeat: no-repeat;
        -webkit-mask-image: url(../img/logoMask.svg);
        -webkit-mask-position: center center;
        -webkit-mask-size: 100% auto;
        -webkit-mask-repeat: no-repeat;
        position: relative;
        pointer-events: none;
    }
    .content .info {
        position: relative;
        top: 0%;
        right: 0%;
    }
    .decoPic {
        position: absolute;
        width: 100%;
        left: 0px;
        bottom: 0px;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        pointer-events: none;
    }
    .decoPic img {
        width: 100%;
        height: auto;
    }
    .background,
    .bgImg {
        min-height: auto;
    }
    .s2 {
        z-index: 50;
    }
    .s3 {
        z-index: 40;
    }
    .s4 {
        z-index: 30;
    }
    .s5 {
        z-index: 20;
    }
    .s6 {
        z-index: 10;
    }
    .s7 {
        z-index: 5;
    }
    /*.s2 .section-logo {
        background-image: url(../img/logoBG-1.png);
    } 
    .s3 .section-logo {
        background-image: url(../img/logoBG-2.png);
    }
    .s4 .section-logo {
        background-image: url(../img/logoBG-3.png);
    }
    .s5 .section-logo {
        background-image: url(../img/logoBG-4.png);
    }
    .s6 .section-logo,
    .s7 .section-logo {
        background-image: url(../img/logoBG-5.png);
    }*/
    .s2 .section-logo:before,
    .s3 .section-logo:before,
    .s4 .section-logo:before,
    .s5 .section-logo:before,
    .s6 .section-logo:before {
        content: ' ';
        position: fixed;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: url(../img/logoBG-1.png);
        background-size: cover;
    }
    .s3 .section-logo:before {
        background-image: url(../img/logoBG-2.png);
    }
    .s4 .section-logo:before {
        background-image: url(../img/logoBG-3.png);
    }
    .s5 .section-logo:before {
        background-image: url(../img/logoBG-4.png);
    }
    .s6 .section-logo:before {
        background-image: url(../img/logoBG-5.png);
    }
    .content .titleDiv .title {
        margin-left: 3vw;
        font-size: 32px;
    }
    .content .titleDiv .title-decoTxt {
        font-size: 16px;
    }
    .content .info .innerTxt-BigMode {
        font-size: 20px;
        margin-bottom: 0px;
    }
    .content .innerTxtDiv .decoTxt {
        font-size: 10px;
        line-height: 1.5;
    }
    .content .info .innerTxt {
        padding-right: 16px;
        padding-top: 0px;
        font-size: 16px;
        margin-bottom: 0px;
        margin-right: 0px;
    }
    .readMore {
        position: relative;
        top: 0px;
    }
    .s1 {
        padding-top: 60px;
        position: relative;
    }
    .s2 .decoPic {
        width: 150%;
        top: 0px;
        left: -50%;
        opacity: 0.2;
    }
    .s3 .decoPic {
        width: 150%;
        height: auto;
        opacity: 0.2;
        bottom: -20%;
    }
    .s4 .decoPic {
        width: 150%;
        height: auto;
        opacity: 0.1;
        bottom: -20%;
    }
    .s5 .decoPic {
        width: 150%;
        height: auto;
        opacity: 0.5;
        bottom: -20%;
    }
    .s6 .decoPic {
        width: 200%;
        left: -50%;
        height: auto;
        opacity: 0.5;
        bottom: 0px;
    }
    .s6 .footer {
        display: none;
    }
    .s2,
    .s3,
    .s5 {
        clip-path: none;
    }
    .s4,
    .s7 {
        clip-path: none;
    }
    .s7 {
        background-color: #8A959A;
    }
    .swiper-container-1 .swiper-pagination {
        display: none;
    }
    .swiper-container-1::before {
        z-index: 20;
        height: 14vh;
        clip-path: polygon(100% 7vh, 100% 100%, 0% 100%, 0 0);
        pointer-events: none;
    }
    .swiper-container-1::after {
        z-index: 20;
        height: 14vh;
        clip-path: polygon(0 100%, 100% 7vh, 100% 100%, 0 100%);
        pointer-events: none;
    }
    /* 動畫區 */
    .title {
        opacity: 0;
        animation: blurIn 1s forwards;
        white-space: nowrap;
    }
    .titleCircle {
        animation: drawLine 2s forwards;
    }
    .title-decoTxt {
        opacity: 0;
        animation-delay: 0s;
        animation-duration: 1s;
    }
    .s1 .infoDiv {
        top: 18%;
        left: 6%;
    }
    .s1 .infoDiv h2 {
        font-size: 16px;
    }
    .s1 .infoDiv p {
        padding-right: 2vw;
        font-size: 12px;
    }
}