#nav {
    width:100px;
    background-color: red;
    float: left;
    opacity: 0.5;
    width:100%;
}
h1 {
    text-align: center;
    margin-top: 50px;
    margin-bottom:20px;
    color:white;
}
h2{
    text-align: center;
    margin-top: 50px;
    margin-bottom:20px;
    color:white;
}
h3{
    text-align: center;
    margin-top: 50px;
    margin-bottom:20px;
    color:white;
}
h4{
    color:black;
    margin-left:80px;
}
h5{
    color:black;
    margin-left:80px;
}
.whitetext{
    color: white;
    font-family:sans-serif;
}
p{
    color: white;
    font-size: 20px;
}
#pbar{
    
    top:0px;
    left:0px;   
    position:fixed;
    height: 100vh;
    width:100px;
    float: none;
 
   display: inline-block;
 
   vertical-align: middle;

    background-color: midnightblue;
}
.round{

    background-color:darkgrey;
    margin-left: 5vw;
    margin-right: 5vw;
    
    border-radius:30px;
    
}


.subframe{
    position: relative;
    width: 100%;
    border-radius:30px;

}

section {
	font-family: Microsoft JhengHei, serif;	
	width: 100%; height: 100vh;
	/*background-attachment: fixed;*/
	/*background-position: center center;*/
    background-size: cover;
    /*border-radius:50px;*/
    /*margin-bottom:20px;*/
    margin-top:0px;


/* Flex Box 設定內部元素置中	 */
/*	display: flex;
	justify-content: center;
	align-items: center;*/
}


.content-center{
    background-position: center center;
    display: flex;
	justify-content: center;
    align-items: center;

}
.content-left{
    padding-left: 10vw;
    padding-top:40vh;
}
.fixed {
    position: fixed;
    bottom: 0;
	/*display:center;
	text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);*/
}
.fixedcenter{
    position: fixed;
	display:center;
	text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.air{
    background-color:blue;
    opacity: 0;
    height:100vh ;
}
.gradient{
    background-image: linear-gradient(180deg, rgb(255, 255, 255) , rgba(255, 255, 255, 0));
}
#reminder{
    background-color:yellow;
    opacity: 50%;
    width: 100%;
    height: 10px;
}
#iphone{
    height:90vh;
    animation:zoom 1s;
}
#phone{
    height:90vh;
    animation:zoom 1s;
  
}
#menu{
    /*background-color:black ;*/
    /*background-image: url("assets/123.png");*/
    /*background-color:green;*/
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../img/menu.jpg");
    
    z-index: -1;
}
#menu2{
    /*background-color:pink;*/
    /*background-image: url("assets/123_2.png");*/
    background-image: url("../img/menu2.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}
#pic1{
    background-image: url("../img/D_4_1160x773.jpg");
    background-attachment: fixed;
    background-position: right;
    
}
#pic2{
    background-image: url("../img/D_2_1160x773.jpg");
    background-attachment: fixed;
    background-position: right;
    background-size: cover
}

.sub1{
    height:100vh;
   
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 1vw;
    margin-right: 1vw;
    border-radius:30px;
    
    z-index: 2;
    top:100px;
    /*margin-top: 50px;*/
}
.sub2{
    height:90vh ;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 1vw;
    margin-right: 1vw;
    border-radius:30px;
  
    margin-top: 5vh;
    z-index: 3;
    top:120px;
    
}
.sub3{
    height:80vh;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 1vw;
    margin-right: 1vw;
    border-radius:30px;
    margin-top: 5vh;
    
    z-index: 999;

    top:140px;
   
}
.glass{
    opacity: 0;
}
#endframe{
    background-image: url("../img/menu.jpg");
}

@keyframes zoom{
    from{
        height: 50vh;
        /*padding-top:20vh;*/

    }
    to{
        height :90vh;
        /*padding-top:10vh*/

    }
}
.red{
    color: #b32760;
    font-size: 75px;
}
.green{
    color: #7cb226;
    font-size: 75px;
    
}

#story1-1{
    background-image: url("../img/M_5_1160x773.jpg");
}
#story1-2{
    background-image: url("../img/M_4_1160x773.jpg");
}
#story1-3{
    
    background-image: url("../img/M_3_1160x773.jpg");
    
}
#story2-1{
    background-image: url("../img/T_7_1160x773.jpg");
}
#story2-2{
    background-image: url("../img/T_5_1160x773.jpg");
}
#story2-3{
    background-image: url("../img/T_2_1160x773.jpg");
}


#story3-1{
    background-image: url("../img/D_1_1160x773.jpg");
}

#story3-2{
    background-image: url("../img/D_5_1160x773.jpg");
}

#story3-3{
    background-image: url("../img/D_7_1160x773.jpg");
}
#story4-1{
    background-image: url("../img/Y_5_1160x773.jpg");
}
#story4-2{
    background-image: url("../img/Y_4_1160x773.jpg");
}
#story4-3{
    background-image: url("../img/Y_3_1300x866.jpg");
}

.transY{
    transform: translateY(100px);
}

#story1{
    background-color: #877492;
}
#story2{
    background-color: #28396d;
}
#story3{
    background-color: #7b685a;
}
#story4{
    background-color: #e9d29c;
}
#end{
    height:1vh;
}