body{
margin: 0;
padding: 0;
font-family: "sans-selif" ;
}
header{
background-image: url(../image/bg_header.jpg);
background-size: cover;
height: 30vh;
max-height: 300px;
}
.head_container{
text-align: center;
padding: 20px;
}
.main_nav{
display: flex;
justify-content: space-around;
list-style-type: none;
margin-top: 30px;
}
.main_nav a{
text-decoration: none;
color: #fff;
font-size: 20px;
font-weight: bold;
}
.main_nav a:hover{
color: #999;
}
article{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
h1{
font-size: 36px;
text-align: center;
margin-top: 20px;
margin-bottom: 30px;
}
.top_container{
display: flex;
}
.top_conA{
flex: 1;
}
h2{
font-size: 28px;
text-align: center;
margin-top: 25px;
margin-bottom: 25px;
}
p{
font-size: 18px;
color: #333;
padding: 20px;
}
.top_conB{
flex: 1;
background-image: url(../image/camera.jpg);
min-height: 300px;
background-size: cover;
background-position : center;
}
.ad_container{
display: flex;
flex-direction: row-reverse;
}
.ad_conA{
flex:1;
}
.ad_conB{
flex: 1;
background-image: url(../image/moment.jpg);
min-height: 300px;
background-size: cover;
}
.product{
display: flex;
justify-content: space-around;
}
.product div{
flex: 0 0 40%;
text-align: center;
}
h3{
font-size: 22px;
}
.pro_button{
text-decoration: none;
display: inline-block;
border: 2px solid #f00;
border-radius: 5px;
margin-top: 15px;
padding: 10px 20px;
color: #666;
font-weight: bold;
}
.pro_button:hover{
color: #fff;
background-color: #f00;
}
footer{
margin-top: 50px;
padding-top: 50px;
text-align: center;
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(../image/bg_footer.jpg);
background-size: cover;
height: 350px;
color: #fff;
}
.footer_nav{
margin: 20px auto;
list-style-type: none;
}
.footer_nav a{
text-decoration: none ;
color: #fff;
font-size: 20px;
font-weight: bold;
}
.footer_nav a:hover{
color: #999;
}