* {
  box-sizing: border-box;
}

html {
    margin: 0;
    height: 100%;
}

body {
    margin: 0;
    font-family: "微軟正黑體", Arial;
    background: #0b5128;
    height: 100%;
    color: #e6ffe6;
    overflow: hidden;
}

form {
    height: 100%;
}
#bgcover {
    display: flex;
    flex-flow: column;
    background: rgba(0, 0, 0, 0.2);
    height: 100%;

}

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
    filter: opacity(90%);
}

#banner {
    padding: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex; /* Flexbox */
}

.left {
    display: flex;
    width: 30%;
    height: 100%;
    align-items: center; /* 垂直置中 */
}

.platimg {
    padding: 0.5vw;
}

    .platimg img {
        /*max-width: 74px;*/
        width:auto;
        height:4vw;
    }

.ltitle {
    font-size: 1.5vw;
    display: block;
}

.ltitle1 {
    display: block;
    font-size: 1vw;
}

.right {
    display: flex;
    flex: 1; /* 佔滿剩餘寬度 */
    -ms-flex: 1; /* IE 10 */
    height: 100%;
    font-size: 1.2vw;
    justify-content: flex-end; /* 水平靠右 */
    padding: 0 1vw;
    align-items: center; /* 垂直置中 */
} 

.right div{
	margin:0 0.5vw;
}

a:link {
    color: white;
    text-decoration: none;
    text-shadow: 0.1vw 0.1vw 0.2vw #003566;
}

a:visited {
    color: white;
    text-shadow: 0.1vw 0.1vw 0.2vw #003566;
}

a:hover {
    color: #ffccff;
    text-shadow: 0.1vw 0.1vw 0.2vw #003566;
}

a:active {
    color: white;
    text-shadow: 0.1vw 0.1vw 0.2vw #003566;
}

.container {
    width: 100%;
    text-align: center;
    color: #f1f1f1;
    overflow-x: hidden; /* Hide horizontal scrollbar */
    overflow-y: auto; /* Add vertical scrollbar */
    flex-grow: 1;
    display: flex;
    flex-flow: column;
}  


.text {
	font-size: 1.7vw;
	padding:0.6vh 0.5vw;
	white-space: nowrap; 
	border:1px white solid; 
	width:125%;
	margin:0 auto;
	background: rgba(0,128,0, 0.8);
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} 

.title {
	font-size: 3vw; 
	font-weight: bold;
	text-shadow: 0.1vw 0.1vw 0.3vw  #132639;
	margin:8vh 0 0 0;
}

.glow {
	font-size: 4vw; 
	-webkit-animation: glow 5s ease-in-out infinite alternate;
	-moz-animation: glow 5s ease-in-out infinite alternate;
	animation: glow 5s ease-in-out infinite alternate;
	margin: 0 0.5vw;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0.1vw 0.1vw 0.5vw #0d1a26, 0.1vw 0.1vw 1vw #4080bf, 0.1vw 0.1vw 1.5vw #3973ac;
  }
  to {
    text-shadow: 0.1vw 0.1vw 0.3vw #804000, 0.1vw 0.1vw 0.8vw #ff0000, 0.1vw 0.1vw 1.3vw #ffb366;
  }
}

.slide {
    padding: 3vw 0;
    flex-grow: 1;
}


/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    display: inline-block;
    margin: 0 2vw;
    width: 15vw;
    height: 15.5vw;
    position: relative;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

.c1 {
    margin-bottom: 3vw;
}


.c2 {
    margin-bottom: -3vw;
}


/* This container is needed to position the front and back side */
.flip-card-inner, .flip-card-inner1 {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}


/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner1 {
  transform: rotateX(180deg);
  
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {

  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

.img {
    width: 100%;
    height: 100%;
    border-radius: 1vw;
    box-shadow: 0 0.1vw 2vw black;
}

.footer {
    text-align: center;
    font-size: 0.8vw;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.7vw 0 1vw 0;
    align-items: center; /* 垂直置中 */
}

.span1 {
    margin:0 0.5vw;
    display: inline-block;
}

.span2 {
    display: inline-block;
}

#pageViews {
    font-size: 1.3vw;
    font-family: 'Times New Roman';
    font-style: italic;
    font-weight: bold;
    color: #ffccff;
}



@media screen and (max-width: 600px) {

    #banner {
        padding: 1vh;
    }

    .platimg img {
        height: 12vw;
    }

    .left {
        width: 37%;
    }

    .right {
        font-size: 4vw;
    }
        .right div {
            padding: 0.5vw;
            border:1px solid #a7b49b;
            text-align:center;
        }

    .ltitle {
        font-size:3vw;
        display: block;
    }

    .ltitle1 {
        font-size: 2.5vw;
    }

    .text {
        font-size: 4vw;
        width: 100%;
        top: 110%;
        padding: 0.9vw;
        background: #004d00;
    }

    .title {
        font-size: 7vw;
        margin: 3vh 0 0 0;
        font-weight:normal;
    }

    .glow {
        font-size: 8.5vw;
    }

    .slide {
        padding: 0;
    }

    .flip-card {
        margin: 8vw 2vw;
        width: 40vw;
        height: 40vw;
    }

    .footer {
        font-size: 2.5vw;
    }


    #pageViews {
        font-size: 3vw;
    }
}