:root{
    --TopBarHeight:5em;
}

iframe {
    width: 100%;
    height:650px;
    border: 2px none red; /* 設置邊框以便於查看 */
}

.navbar {
    position: fixed;
    width: 100%;
    min-height:var(--TopBarHeight);
}

.ChooseModel .line{
    margin: .3em 1.2em;
    min-width: 2px;
    min-height: 2px;
    background: white;
}

#bottom {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;

    background: black;
    position: fixed;
    bottom: 0;
    width:100%;
    height: 2.4em;
    color: white;
}

#bottom p {margin: .2em 0;}
#bottom > p {font-size: calc(.5em + .5vw);margin: 0 .5em;}
#bottom p:last-child {width: 6em;}

#bottom a {color: aqua;text-decoration: none;}

.topSpace {
    width: 100%;
    min-height:var(--TopBarHeight);
}

.Logo{height:2em;margin: .3em .4em;}

.collapse {justify-content: space-between;}
.navbar-nav > li {display: flex;flex-direction: column;align-items: center;}
.dropdown-menu.show{right:0;left: auto;}

.ProjectorBox{
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;

    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
}
.ProjectorBox img{
    width: 30%;
    max-width: 300px;
}
.ProjectorBox > .ProjectContent{
    width: 70%;
    max-width: 600px;
    text-align: center;
}

h1 span{
    font-size: .7em;
    margin: .5em ;
    opacity: .5;
}

.ProjectorBox > .Line{
    width:100%;
    max-width: 950px;
    height: .3em;
    margin: 1.6em 0;
    background: black;
}

.ProjectorBox .NP_Tip {
    margin: 1em 0 0;
    text-align: center;
}

@media screen and (max-width: 900px) {
    iframe {height:calc(200vw - 30px);}
    .ProjectorBox > img {width: 100%;}
    .ProjectorBox > div {width: 100%;}
}

@media screen and (max-width: 400px) {
    iframe {height:calc(300vw - 50px);}
    .ProjectorBox > img {width: 60%;}
    .ProjectorBox > div {width: 100%;}
}