.background{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
}

.back{
background: url("9.gif") no-repeat;
background-size: cover;
height: 245px;
position: relative;
}

.header{
width: 100%;
padding: 0px;
text-align: center;
position: absolute;
top: 5%;
left: 0%;
}

.header h1{
font-size: 60px;
font-weight: bold;
color: white;
text-shadow: 1px -3px 0 #24478f, 2px 3px 0  #660000, -3px 3px 0  #660000;
}

.header h2{
display: block;
color: white;
font-size: 20px;
font-weight: 200;
text-shadow: 1px -3px 0 #24478f, 2px 3px 0  #660000, -3px 3px 0  #660000;
}

.text h1{
color: #fff;
font-size: 200%;
font-weight: bold;
text-align: left;
letter-spacing: 3px;
display: block;
border-right: 10px double rgb(102,179,255);
border-left: 10px double rgb(102,179,255);
width: 125px;
height: 43px;
background-color: #00264d;
position: absolute;
overflow: hidden;
}

.text h1:hover{
width: 97%;
height: 50px;
font-size: 34px;
text-align: center;
padding-top: 6px;
font-weight: bold;
transition: .2s ease;
}

ul.link{
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #0a1429;
height: 100%;
overflow: auto;
z-index: 4;
font-family: 'Hiragino Kaku Gothic Pro', 'WenQuanYi Zen Hei', 
'微軟正黑體', '蘋果儷中黑', Helvetica, Arial, sans-serif;
}

ul.link li a{
display: block;
color: white;
text-align: center;
padding: 22px 40px;
text-decoration: none;
font-size: 20px;
}

ul.link li a:hover{
font-size: 23px;
background-color: #e6f2ff;
transition: .3s ease;
padding: 20px 40px;
color: black;
border-radius: 5px;
}

ul.link li a.current{
background-color: #ffeb99;
border-radius: 100px;
color: black;
font-weight: bolder;
}


ul.link li a.current:hover{
font-size: 25px;
transition: .3s ease;
padding: 20px 45px;
}

@media screen and (min-width: 900px){
ul.link{
width: 100%;
height: auto;
position: relative;
}

ul.link li a{
float: left;
}

.link1 a{
display: block;
background-color: #391339;
position: fixed;
text-decoration: none;
color: white;
font-size: 19px;
padding: 10px;
left: 2%;
bottom: 2%;
border-radius: 10px 5px 10px 5px;
transition: .3s ease;
}

.link1:hover a{
background-color: #003380;
color: white;
font-size: 23px;
border: 3px solid white;
border-radius: 5px 10px 5px 10px;
}

.align{
display: flex;
}

.image{
margin-top: 35px;
}

.image img{
position: relative;
left: 24.5%;
border: 2px solid  #ccf2ff;
border-radius: 15px;
padding: 7px;
box-shadow: 0 0 5px 5px  #ccf2ff;
background-color: #00cccc;
}

.image img:hover{
border: 4px solid white;
border-radius: 20px;
transition: .2s ease;
box-shadow: 0 0 10px 10px #0099cc;
}


p{
font-size: 33px;
color: white;
text-align: left;
margin-top: 2px;
width: 100%;
font-weight: bold;
}

.p1{
font-size: 23px;
color: white;
letter-spacing: 2px;
text-align: center;
padding: 40px;
background-color: #0d0d26;
width: 50%;
margin: auto;
box-shadow: 0 0 5px 5px  #ccf2ff;
border-radius: 15px;
}

.p1 a{
text-decoration: none;
color: white;
}

.p1 a:hover{
color: #FCC004;
transition: .2s ease;
font-size: 26px;
}

@media screen and (max-width: 900px){
ul.link li a{
display: none;
}