@media only screen and (max-width: 768px) {
    .parallaxParent {
        position: relative;
    }
	.parallaxParent > .figure {
		height: 100%;
		position: relative;
		top: 0;
		background-position: bottom center;
		background-size: 480px;
		background-attachment: fixed;
	}

    .bubble {
        width: 370px;
        margin: 0 auto;
        background-size: contain;
        z-index: 100;
        transform: translateZ(0);
        will-change: transform;
    }

    .bubble.c1 {
        height: 193px;
    }
    .bubble.c2 {
        height: 71px;
    }
    .bubble.c3-1 {
        height: 86px;
    }
    .bubble.c3-2 {
        height: 141px;
    }
    .bubble.c4 {
        height: 138px;
    }
    .bubble.c5 {
        height: 97px;
    }
    .bubble.c7 {
        height: 175px;
    }

    .title-wrapper {
        width: 100%;
    }
    .title-wrapper .title {
        width: 90%;
        max-width: 375px;
    }
    .title-wrapper h2 {
        font-family: "PingFang TC", "Noto Sans TC", "Source Sans Pro", Arial, sans-serif;
        font-size: 16px;
        font-weight: 600;
        margin-top: 70px;
    }
    .title-wrapper h2 span {
        display: block;
    }
    .indicator-spacing {
        padding-top: 25px;
    }
    .indicator-wrap .indicator {
        width: auto;
        margin: 0 28px;
    }
    .menu {
        width: auto;
        margin: 0 28px;
        padding: 16px 0 16px 0;
    }

    .chapter {
        font-weight: 600;
        font-size: 13px;
        line-height: 17px;
        margin-top: 8px;
	    margin-right: 16px;
        color: #FFF;
    }

    .chapter::before {
        width: 13px;
        height: 13px;
    }

	.main {
		max-width: 100%;
		width: auto;
	}
	.main img {
		width: 100%;
	}
	.indicator {
		width: 100%;
	}
	section.quote {
		max-width: 100%;
        height: auto;
        padding-top: 60px;
        padding-bottom: 40px;
	}
	section.phone {
		max-width: 100%;
	}
    .phone-wrapper {
        flex-direction: column;
        margin-top: 68px;
    }
    .phone-wrapper > :last-child {
        margin-top: 50px;
    }
    .phone-frame.left, .phone-frame.right {
        margin: 0 auto;
    }

    .quote-wrapper {
        flex-direction: column;
        height: auto;
    }
    .quote.content {
        font-weight: 500;
        font-size: 12px;
        line-height: 24px;
        color: #FFFFFF;
        margin-left: 0;
    }
    .quote.photo {
        width: 100%;
        height: 250px;
        flex: initial;
        opacity: 1;
    }

    article {
        padding: 0 28px;
    }
    article p {
        font-size: 15px;
        line-height: 30px;
        font-weight: 400;
    }
    article h3 {
        font-size: 20px;
        line-height: 40px;
    }
    article h3::before {
        width: 16px;
        height: 16px;
        margin-right: 8px;
        border-radius: 8px;
    }

	.outline {
		transform: scale(0.7);
	}
    .outline.C {
        transform: scale(0.6);
    }
    .outline.D {
        transform: scale(0.6);
        left: calc(50% - 55px);
    }
    .outline.E {
        transform: scale(0.6);
        left: calc(50% - 35px);
    }
    .outline.F {
        transform: scale(0.6);
    }
    .parallaxParent > .figure-wrapper {
        clip: rect(0, auto, auto, 0);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 200vh;
    }
    .parallaxParent > .figure-wrapper > .figure {
        position: fixed;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-size: contain;
        background-position: center center;
        transform: translateZ(0);
        will-change: transform;
        background-attachment: initial;
    }

    #parallax7 > .figure-wrapper {
        height: 300vh;
    }

	.figure.A {
		background-image: url(../intro/character/m1.png);
	}
	.figure.B {
		background-image: url(../intro/character/m2.png);
	}
	.figure.C {
		background-image: url(../intro/character/m3.png);
	}
	.figure.D {
		background-image: url(../intro/character/m4.png);
	}
	.figure.E {
		background-image: url(../intro/character/m5.png);
	}
	.figure.F {
		background-image: url(../intro/character/m6.png);
	}
	.figure.all {
		background-image: url(../intro/character/m7_all.png);
	}

    .annotation-content {
        font-size: 12px;
        line-height: 20px;
        padding: 12px 8px;
    }

    .img-wrapper {
        margin: 36px 27px;
    }
    .img-wrapper .text {
        font-size: 10px;
        line-height: 20px;
    }

    footer {
        padding: 40px 45px;
    }
    .credit {
        font-size: 8px;
        line-height: 16px;
        margin-top: 8px;
    }
    .credit .purple::after {
        content: '●';
        width: 8px;
        height: 8px;
        color: #ff00ff;
    }
    .credit .blue::after {
        content: '●';
        width: 8px;
        height: 8px;
        color: #29abe2;
    }
    .credit .yellow::after {
        content: '●';
        width: 8x;
        height: 8px;
        color: #ffff00;
    }
    .credit .green::after {
        content: '●';
        width: 8px;
        height: 8px;
        color: #00ff00;
    }

    .related-wrapper {
        width: auto;
        margin: 0 28px;
        padding: 28px;
        margin-top: 40px;
        border-top: 1px solid #989898;
        border-bottom: 1px solid #989898;
    }

    .related-wrapper h2 {
        font-family: 'Noto Serif TC', Georgia, 'Times New Roman', Times, serif;
        font-weight: 500;
        font-size: 28px;
        line-height: 32px;
        text-align: center;
        color: #E5E5E5;
        margin: 0;
    }

    .related-wrapper .desc {
        font-family: 'Noto Serif TC', Georgia, 'Times New Roman', Times, serif;
        width: 241px;
        margin: 0 auto;
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 32px;
        text-align: justify;
        color: #FFFFFF;
    }

    .related-wrapper .photo-wrapper {
        position: relative;
        margin: 0 auto;
        margin-top: 16px;
        margin-bottom: 59px;
        width: 241px;
        height: 161px;
    }

    .related-wrapper .photo-wrapper .photo::before {
        top: -21px;
        left: -39px;
        width: 241px;
        height: 161px;
        background: #1F1F1F;
    }

    .related-wrapper .photo-wrapper .photo::after {
        bottom: -31px;
        right: -38px;
        width: 241px;
        height: 161px;
        background: #3F3F3F;
    }

    .logo {
        top: 10px;
        right: 60px;
    }

    .share {
        top: 10px;
        right: 10px;
    }
}