/* ---------- 視覺980px ---------- */
body {
	overflow-x: hidden;
}
.bg03 {
    overflow-x: hidden;
}
.img-900 {
	margin: 0 auto;
	padding: 0;
	display: block;
	max-width: 900px;
}
.img-640 {
	margin: 0 auto;
	padding: 0;
	display: none;
	max-width: 640px;
}
.img-900 .w-100,.img-640 .w-100 {
    width: 100%;
    display: block;
}
.bg01,.bg02,.bg03,.bg04,.bg05,
.bg06,.bg07,.bg08,.bg09,.bg10,
.bg11,.bg12,.bg13,.bg14,.bg15,
.bg16,.bg17,.bg18,.bg19,.bg20,
.bg21,.bg22,.bg23,.bg24,.bg25 {
	position: relative;
}

/* 打勾動畫 */
@keyframes check {
    0% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    10% {
        opacity: 1;
        width: 1.5%;
        height: 0;
    }
    20% {
        width: 1.5%;
        height: 3%;
    }
    100% {
        width: 1.5%;
        height: 3%;
    }
}
@keyframes check2 {
    0% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    20% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    30% {
        opacity: 1;
        width: 1.5%;
        height: 0;
    }
    40% {
        width: 1.5%;
        height: 3%;
    }
    100% {
        width: 1.5%;
        height: 3%;
    }
}
@keyframes check3 {
    0% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    40% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    50% {
        opacity: 1;
        width: 1.5%;
        height: 0;
    }
    60% {
        width: 1.5%;
        height: 3%;
    }
    100% {
        width: 1.5%;
        height: 3%;
    }
}
@keyframes check4 {
    0% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    60% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    70% {
        opacity: 1;
        width: 1.5%;
        height: 0;
    }
    80% {
        width: 1.5%;
        height: 3%;
    }
    100% {
        width: 1.5%;
        height: 3%;
    }
}
.box1:after {
    animation: check 3s;
    animation-iteration-count: infinite;
}
.box2:after {
    animation: check2 3s;
    animation-iteration-count: infinite;
}
.box3:after {
    animation: check3 3s;
    animation-iteration-count: infinite;
}
.box4:after {
    animation: check4 3s;
    animation-iteration-count: infinite;
}
.box5:after {
    animation: check 3s;
    animation-iteration-count: infinite;
}
.box6:after {
    animation: check2 3s;
    animation-iteration-count: infinite;
}
.box7:after {
    animation: check3 3s;
    animation-iteration-count: infinite;
}
.box1:after {
    transform: scaleX(-1) rotate(135deg);
    transform-origin: left top;
    border-right: 10px solid #d51d73;
    border-top: 10px solid #d51d73;
    content: '';
    display: block;
    height: 3%;
    left: 13%;
    position: absolute;
    top: 38%;
    width: 1.5%;
}
.box2:after {
    transform: scaleX(-1) rotate(135deg);
    transform-origin: left top;
    border-right: 10px solid #d51d73;
    border-top: 10px solid #d51d73;
    content: '';
    display: block;
    height: 3%;
    left: 13%;
    position: absolute;
    top: 44%;
    width: 1.5%;
}
.box3:after {
    transform: scaleX(-1) rotate(135deg);
    transform-origin: left top;
    border-right: 10px solid #d51d73;
    border-top: 10px solid #d51d73;
    content: '';
    display: block;
    height: 3%;
    left: 13%;
    position: absolute;
    top: 50%;
    width: 1.5%;
}
.box4:after {
    transform: scaleX(-1) rotate(135deg);
    transform-origin: left top;
    border-right: 10px solid #d51d73;
    border-top: 10px solid #d51d73;
    content: '';
    display: block;
    height: 3%;
    left: 13%;
    position: absolute;
    top: 56%;
    width: 1.5%;
}
.box5:after {
    transform: scaleX(-1) rotate(135deg);
    transform-origin: left top;
    border-right: 10px solid #d51d73;
    border-top: 10px solid #d51d73;
    content: '';
    display: block;
    height: 3%;
    left: 8%;
    position: absolute;
    top: 47%;
    width: 1.5%;
}
.box6:after {
    transform: scaleX(-1) rotate(135deg);
    transform-origin: left top;
    border-right: 10px solid #d51d73;
    border-top: 10px solid #d51d73;
    content: '';
    display: block;
    height: 3%;
    left: 38%;
    position: absolute;
    top: 47%;
    width: 1.5%;
}
.box7:after {
    transform: scaleX(-1) rotate(135deg);
    transform-origin: left top;
    border-right: 10px solid #d51d73;
    border-top: 10px solid #d51d73;
    content: '';
    display: block;
    height: 3%;
    left: 68%;
    position: absolute;
    top: 47%;
    width: 1.5%;
}
@media screen and (max-width: 900px) {
@keyframes check {
    0% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    10% {
        opacity: 1;
        width: 1.35%;
        height: 0;
    }
    20% {
        width: 1.35%;
        height: 2.7%;
    }
    100% {
        width: 1.35%;
        height: 2.7%;
    }
}
@keyframes check2 {
    0% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    20% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    30% {
        opacity: 1;
        width: 1.35%;
        height: 0;
    }
    40% {
        width: 1.35%;
        height: 2.7%;
    }
    100% {
        width: 1.35%;
        height: 2.7%;
    }
}
@keyframes check3 {
    0% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    40% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    50% {
        opacity: 1;
        width: 1.35%;
        height: 0;
    }
    60% {
        width: 1.35%;
        height: 2.7%;
    }
    100% {
        width: 1.35%;
        height: 2.7%;
    }
}
@keyframes check4 {
    0% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    60% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    70% {
        opacity: 1;
        width: 1.35%;
        height: 0;
    }
    80% {
        width: 1.35%;
        height: 2.7%;
    }
    100% {
        width: 1.35%;
        height: 2.7%;
    }
}
.box1:after {
    border-right: 8px solid #d51d73;
    border-top: 8px solid #d51d73;
    left: 13%;
}
.box2:after {
    border-right: 8px solid #d51d73;
    border-top: 8px solid #d51d73;
    left: 13%;
}
.box3:after {
    border-right: 8px solid #d51d73;
    border-top: 8px solid #d51d73;
    left: 13%;
}
.box4:after {
    border-right: 8px solid #d51d73;
    border-top: 8px solid #d51d73;
    left: 13%;
}
.box5:after {
    border-right: 8px solid #d51d73;
    border-top: 8px solid #d51d73;
    left: 8%;
}
.box6:after {
    border-right: 8px solid #d51d73;
    border-top: 8px solid #d51d73;
    left: 38%;
}
.box7:after {
    border-right: 8px solid #d51d73;
    border-top: 8px solid #d51d73;
    left: 68%;
}
}
@media screen and (max-width: 640px) {
    @keyframes check {
    0% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    10% {
        opacity: 1;
        width: 1%;
        height: 0;
    }
    20% {
        width: 1%;
        height: 2%;
    }
    100% {
        width: 1%;
        height: 2%;
    }
}
@keyframes check2 {
    0% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    20% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    30% {
        opacity: 1;
        width: 1%;
        height: 0;
    }
    40% {
        width: 1%;
        height: 2%;
    }
    100% {
        width: 1%;
        height: 2%;
    }
}
@keyframes check3 {
    0% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    40% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    50% {
        opacity: 1;
        width: 1%;
        height: 0;
    }
    60% {
        width: 1%;
        height: 2%;
    }
    100% {
        width: 1%;
        height: 2%;
    }
}
@keyframes check4 {
    0% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    60% {
        opacity: 0;
        height: 0;
        width: 0;
    }
    70% {
        opacity: 1;
        width: 1%;
        height: 0;
    }
    80% {
        width: 1%;
        height: 2%;
    }
    100% {
        width: 1%;
        height: 2%;
    }
}
.box1:after {
    border-right: 3px solid #d51d73;
    border-top: 3px solid #d51d73;
    left: 13.7%;
}
.box2:after {
    border-right: 3px solid #d51d73;
    border-top: 3px solid #d51d73;
    left: 13.7%;
}
.box3:after {
    border-right: 3px solid #d51d73;
    border-top: 3px solid #d51d73;
    left: 13.7%;
}
.box4:after {
    border-right: 3px solid #d51d73;
    border-top: 3px solid #d51d73;
    left: 13.7%;
}
.box5:after {
    border-right: 3px solid #d51d73;
    border-top: 3px solid #d51d73;
    left: 9%;
}
.box6:after {
    border-right: 3px solid #d51d73;
    border-top: 3px solid #d51d73;
    left: 39%;
}
.box7:after {
    border-right: 3px solid #d51d73;
    border-top: 3px solid #d51d73;
    left: 69%;
}
}
/* button動畫 */
@keyframes square {
    0% {
        transform:scale(1,1);
    }
    10% {
        transform:scale(1.1,1.1);
    }
    20% {
        transform:scale(1,1);
    }
    30% {
        transform:scale(1.1,1.1);
    }
    40% {
        transform:scale(1,1);
    }
    100% {
        transform:scale(1,1);
    }
}
.square {
	animation-name: square;
    animation-duration: 1.3s;
    animation-iteration-count: infinite;
}
/* 三隻菌搖晃 */
@keyframes walk {
    0% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(-15deg);
    }
}
.walk {
    animation: walk 0.8s alternate linear infinite;
}
/* 腸菌觸發文字動畫 */
.bg09 .showRight,.bg13 .showRight {
    opacity: 0;
    transition: all 1s;
    transform: translateX(30px);
}
.bg09 .fadeIn,
.bg13 .fadeIn {
    opacity: 1;
    transform: translateX(0);
}
/* 腸菌動畫 */
@keyframes circle {
    0%, 100% {
        transform: scale(1,1) translateY(0) rotate(-6deg);
      }
      20% {
        transform: scale(1.3,1.3) translateY(30px) translateX(20px) rotate(10deg);
      }
      60% {
        transform: scale(1.3,1.3) translateY(10px) translateX(-80px) rotate(-20deg);
      }
}
@keyframes circle2 {
    0%, 100% {
        transform: scale(1.1,1.1) translateY(0) rotate(6deg);
      }
      20% {
        transform: scale(0.9,0.9) translateY(-50px) translateX(50px) rotate(-10deg);
      }
      60% {
        transform: scale(0.9,0.9) translateY(-70px) translateX(-20px) rotate(10deg);
      }
}
@keyframes circle3 {
    0%, 100% {
        transform: scale(0.9,0.9) translateY(0) rotate(-6deg);
      }
      20% {
        transform: scale(1.2,1.2) translateY(-30px) translateX(14px) rotate(10deg);
      }
      70% {
        transform: scale(1.2,1.2) translateY(80px) translateX(14px) rotate(-10deg);
      }
}
@keyframes circle4 {
    0%, 100% {
        transform: translateY(0) rotate(-6deg);
      }
      20% {
        transform: translateY(-8px) translateX(8px) rotate(5deg);
      }
      70% {
        transform: translateY(8px) translateX(8px) rotate(-5deg);
      }
}
@keyframes circle5 {
    0%, 100% {
        transform: translateY(0) rotate(-6deg);
      }
      20% {
        transform: translateY(8px) translateX(8px) rotate(5deg);
      }
      70% {
        transform: translateY(-8px) translateX(8px) rotate(-5deg);
      }
}
@media screen and (max-width: 640px) {
    @keyframes circle {
        0%, 100% {
            transform: scale(1,1) translateY(0) rotate(-6deg);
          }
          20% {
            transform: scale(1.3,1.3) translateY(20px) translateX(10px) rotate(8deg);
          }
          60% {
            transform: scale(1.3,1.3) translateY(10px) translateX(-60px) rotate(-16deg);
          }
    }
    @keyframes circle2 {
        0%, 100% {
            transform: scale(1.1,1.1) translateY(0) rotate(6deg);
          }
          20% {
            transform: scale(0.9,0.9) translateY(-10px) translateX(40px) rotate(-8deg);
          }
          60% {
            transform: scale(0.9,0.9) translateY(-50px) translateX(-20px) rotate(8deg);
          }
    }
    @keyframes circle3 {
        0%, 100% {
            transform: scale(0.9,0.9) translateY(0) rotate(-6deg);
          }
          20% {
            transform: scale(1.2,1.2) translateY(-20px) translateX(14px) rotate(8deg);
          }
          70% {
            transform: scale(1.2,1.2) translateY(25px) translateX(14px) rotate(-8deg);
          }
    }
    @keyframes circle4 {
        0%, 100% {
            transform: translateY(0) rotate(-6deg);
          }
          20% {
            transform: translateY(-4px) translateX(4px) rotate(5deg);
          }
          70% {
            transform: translateY(4px) translateX(4px) rotate(-5deg);
          }
    }
    @keyframes circle5 {
        0%, 100% {
            transform: translateY(0) rotate(-6deg);
          }
          20% {
            transform: translateY(4px) translateX(4px) rotate(5deg);
          }
          70% {
            transform: translateY(-4px) translateX(4px) rotate(-5deg);
          }
    }
}
.circle {
    animation: circle 3s linear;
    animation-iteration-count: infinite;
}
.circle2 {
    animation: circle2 3s linear;
    animation-iteration-count: infinite;
}
.circle3 {
    animation: circle3 3s linear;
    animation-iteration-count: infinite;
}
.circle4 {
    animation: circle4 1.5s linear;
    animation-iteration-count: infinite;
}
.circle5 {
    animation: circle5 1.5s linear;
    animation-iteration-count: infinite;
}
/* 動態長條圖 */
/* @keyframes flash {
    from,
    50%,
    to {
      opacity: 1;
    }
  
    25%,
    75% {
      opacity: 0;
    }
  }
  
.flash {
    animation: flash 1.7s infinite;
}
@keyframes histogram {
    0% {
        opacity: 1;
        height: 0;
    }
    40% {
        opacity: 1;
        height: 25%;
    }
    80% {
        opacity: 1;
        height: 25%;
    }
    100% {
        opacity: 0;
        height: 25%;
    }
}
.histogram {
    position: absolute;
    z-index: 1;
    height: 0;
    width: 10%;
    bottom: 11.8%;
    right: 17.5%;
    background: linear-gradient(to right, #1e5799 20%,#2989d8 68%,#7db9e8 100%);
    transition: all 1.5s;
    animation: histogram 2s normal cubic-bezier(0.15, 0.67, 0.65, 0.94) infinite;
}
@media screen and (max-width: 640px) {
    .histogram {
        animation: histogram 2.5s normal cubic-bezier(0.15, 0.67, 0.65, 0.94) infinite;
    }
}
.show {
    position: absolute;
    width: 22%;
    bottom: 17%;
    right: 11.5%;
    z-index: 2;
} */
/* 推薦4區域觸發動畫 */
.bg13 .showLeft {
    opacity: 0;
    transition: all 1s;
    transform: translateX(-30px);
}
.bg13 .fadeIn2 {
    opacity: 1;
    transform: translateX(0);
}
/* 撲克牌動畫 */
@keyframes card {
    0% {
        transform: rotate(-18deg);
        right: 11%;
    }
    50% {
        transform: rotate(-6deg);
        right: 10%;
    }
    100% {
        transform: rotate(-6deg);
        right: 10%;
    }
}
@keyframes card2 {
    0% {
        transform: rotate(-18deg);
        right: 11%;
    }
    50% {
        transform: rotate(6deg);
        right: 9%;
    }
    100% {
        transform: rotate(6deg);
        right: 9%;
    }
}
@keyframes card3 {
    0% {
        transform: rotate(-18deg);
        right: 11%;
    }
    50% {
        transform: rotate(18deg);
        right: 8%;
    }
    100% {
        transform: rotate(18deg);
        right: 8%;
    }
}
.card {
    animation: card 2s infinite;
    transform-origin: bottom left;
}
.card2 {
    animation: card2 2s infinite;
    transform-origin: bottom left;
}
.card3 {
    animation: card3 2s infinite;
    transform-origin: bottom left;
}
/* 免冰動畫 */
@keyframes shake {
from,
to,
10%,
90% {
    transform: translate3d(0, 0, 0);
}

30%,
50%,
70% {
    transform: translate3d(-10px, 0, 0);
}

20%,
40%,
60%,
80% {
    transform: translate3d(10px, 0, 0);
}
}
.shake {
    animation: shake 1.5s infinite;
}
/* 4重禮觸發動畫 */
.show1 {
	opacity: 0;
    transition: all 1s;
	transform: scale(0,0);
}
.fadeIn3 {
    opacity: 1;
	transform: scale(1,1);
}
.show2 {
	opacity: 0;
    transition: all 1s;
    transition-delay: 0.2s;
	transform: scale(0,0);
}
.show3 {
	opacity: 0;
    transition: all 1s;
    transition-delay: 0.28s;
	transform: scale(0,0);
}
.show4 {
	opacity: 0;
    transition: all 1s;
    transition-delay: 0.36s;
	transform: scale(0,0);
}
.fadeIn4 {
    opacity: 1;
	transform: scale(1,1);
}
/* arrow動畫 */
@keyframes arrow {
    from {
        transform: translateY(-10px);
    }
    to {
        transform: translateY(30px);
    }
}
@media screen and (max-width: 640px) {
    @keyframes arrow {
        from {
            transform: translateY(-10px);
        }
        to {
            transform: translateY(10px);
        }
    }
}
.arrow {
	animation-name: arrow;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}


.bg02>img:nth-child(2) {
    position: absolute;
    width: 58%;
    top: 0;
    left: 0;
}

.bg03>img:nth-child(2) {
    position: absolute;
    width: 36%;
    top: 44.5%;
    left: 5%;
}
.bg03>img:nth-child(3) {
    position: absolute;
    width: 36%;
    top: 40%;
    right: 8%;
}
.bg03>img:nth-child(4) {
    position: absolute;
    width: 49%;
    top: 9.2%;
    left: 26%;
}
.bg03>img:nth-child(5) {
    position: absolute;
    width: 50%;
    top: 16.7%;
    left: 24.5%;
}

.bg04>a>img {
    position: absolute;
    width: 46%;
    bottom: 10%;
    left: 46%;
}

.bg05 .box1 img,
.bg05 .box2 img,
.bg05 .box3 img,
.bg05 .box4 img {
    position: absolute;
}
.bg05 .box1 img {
    width: 30%;
    top: 36%;
    left: 13%;
}
.bg05 .box2 img {
    width: 30%;
    top: 42%;
    left: 13%;
}
.bg05 .box3 img {
    width: 30%;
    top: 48%;
    left: 13%;
}
.bg05 .box4 img {
    width: 39%;
    top: 54%;
    left: 13%;
}

.bg06>img:nth-child(2) {
    position: absolute;
    width: 56%;
    top: 4.7%;
    left: 4%;
}
.bg06>img:nth-child(3) {
    position: absolute;
    width: 57%;
    top: 27.6%;
    right: 3.1%;
}
.bg06>img:nth-child(4) {
    position: absolute;
    width: 57%;
    top: 50.5%;
    left: 6%;
}

.bg07 .box5 img,
.bg07 .box6 img,
.bg07 .box7 img {
    position: absolute;
}
.bg07 .box5 img {
    width: 28%;
    top: 45%;
    left: 6%;
}
.bg07 .box6 img {
    width: 28%;
    top: 45%;
    left: 36%;
}
.bg07 .box7 img {
    width: 28%;
    top: 45%;
    left: 66%;
}

.bg08>img:nth-child(2) {
    position: absolute;
    width: 10%;
    top: 40%;
    left: 2%;
}
.bg08>img:nth-child(3) {
    position: absolute;
    width: 9%;
    top: 40%;
    left: 37%;
}
.bg08>img:nth-child(4) {
    position: absolute;
    width: 10%;
    top: 40%;
    right: 21%;
}
.bg08>img:nth-child(5) {
    position: absolute;
    width: 40%;
    bottom: 4%;
    right: 12%;
}

.bg09>img:nth-child(2) {
    position: absolute;
    width: 5%;
    top: 32%;
    right: 20%;
    z-index: 2;
}
.bg09>img:nth-child(3) {
    position: absolute;
    width: 10%;
    top: 38%;
    right: 30%;
}
.bg09>img:nth-child(4) {
    position: absolute;
    width: 11%;
    top: 27%;
    right: 25%;
}
.bg09>img:nth-child(5) {
    position: absolute;
    width: 7%;
    top: 63%;
    left: 6%;
}
.bg09>img:nth-child(6) {
    position: absolute;
    width: 7%;
    top: 56%;
    left: 3.5%;
}
.bg09>img:nth-child(7) {
    position: absolute;
    width: 15%;
    top: 7.5%;
    right: 47%;
}
.bg09>img:nth-child(8) {
    position: absolute;
    width: 9%;
    top: 19%;
    right: 50%;
}
.bg09>img:nth-child(9) {
    position: absolute;
    width: 14%;
    top: 27.6%;
    right: 47%;
}
.bg09>img:nth-child(10) {
    position: absolute;
    width: 26%;
    bottom: 11.8%;
    right: 12%;
}

.bg12>a>img {
    position: absolute;
    width: 46%;
    bottom: 10%;
    left: 46%;
}

.bg13>img:nth-child(2) {
    position: absolute;
    width: 35%;
    top: 25%;
    left: 6.5%;
}
.bg13>img:nth-child(3) {
    position: absolute;
    width: 35%;
    top: 25%;
    right: 23.5%;
}
.bg13>img:nth-child(4) {
    position: absolute;
    width: 34%;
    bottom: 13%;
    right: 24%;
}
.bg13>img:nth-child(5) {
    position: absolute;
    width: 34%;
    top: 55%;
    left: 7%;
}

.bg14>img:nth-child(2) {
    position: absolute;
    width: 13%;
    top: 57.5%;
    right: 14%;
    transform: rotate(-18deg);
}
.bg14>img:nth-child(3),
.bg14>img:nth-child(4),
.bg14>img:nth-child(5) {
    position: absolute;
    width: 13%;
    top: 57.5%;
    right: 14%;
    transform: rotate(-18deg);
}

.bg15>img:nth-child(2) {
    position: absolute;
    width: 34%;
    top: 23%;
    right: 10%;
}
.bg15>img:nth-child(3) {
    position: absolute;
    width: 70%;
    top: 74%;
    left: 16%;
}

.bg17>img:nth-child(2) {
    position: absolute;
    width: 17%;
    top: 11%;
    right: 6%;
}

.bg19>a>img {
    position: absolute;
    width: 86%;
    bottom: 3%;
    left: 7%;
}

.bg20>a>img {
    position: absolute;
    width: 86%;
    bottom: 2%;
    left: 7%;
}

.bg21>a>img {
    position: absolute;
    width: 86%;
    bottom: 4.5%;
    left: 7%;
}

.bg23>img:nth-child(2) {
    position: absolute;
    width: 17%;
    top: 20.5%;
    left: 30%;
}
.bg23>img:nth-child(3) {
    position: absolute;
    width: 25%;
    top: 21%;
    right: 0;
}
.bg23>img:nth-child(4) {
    position: absolute;
    width: 38%;
    top: 44%;
    left: 23%;
}
.bg23>img:nth-child(5) {
    position: absolute;
    width: 38%;
    top: 44%;
    right: 2%;
}
.bg23>img:nth-child(6) {
    position: absolute;
    width: 65%;
    bottom: 9%;
    left: 30%;
}
.bg23>img:nth-child(7) {
    position: absolute;
    width: 74%;
    top: 0;
    left: 12%;
}

.bg24>img:nth-child(2) {
    position: absolute;
    width: 75%;
    bottom: 9%;
    left: 12%;
}

@media screen and (max-width: 640px) {
    .bg01,.bg02 {
        display: none;
    }
    .img-640 {
	margin: 0 auto;
	padding: 0;
	display: block;
	max-width: 640px;
    }
}

/* ---------- YOUTUBE崁入 ----------*/
.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
    overflow: hidden;
}
.video>iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*為影片高度與寬度的比例16:9計算得來，9除以16=0.5625換算高度比0.5625=56.25%*/
	padding-bottom: 56.25%;
}
.img-900-video {
    width: 88%;
    padding: 6%;
    background: #024d84;
}

@media screen and (max-width: 900px) {
.img-900-video {
	padding: 3.5%;
	width: 93%;
	text-align: center;
}
}