body{
margin: 0px; }
a:link, a:visited{
color: black; text-decoration: none; }  .title-and-menu-frame{
display: flex;
align-items: center;
}
.title{
flex: auto;
display: flex;
font-weight: bold;
}
.menu-desktop-and-tablet{
flex: auto;
display: flex;
justify-content: flex-end;
}
.menu-mobile{
display: none;
}
.item{
margin: 12px;
font-size: 20px;
}  .banner{
display: flex;
justify-content: center;
align-items: center;
height: 300px;
font-size: 40px;
font-weight: bold;
background-color: #ddeef8;
}   .content-header-outer-frame{
display: flex;
justify-content: center;
}
.content-header-inner-frame{
display: flex;
width: 1200px;
}
.content-header{
display: flex;
flex: auto;
align-items: center;
margin: 10px;
margin-top: 20px;
height: 50px;
background-color: #ddeef8;
}
.content-header-text{
font-size: 20px;
margin-left: 10px;
} .content-outer-frame{
display: flex;
justify-content: center;
}
.content-inner-frame{
display: flex;
width: 1200px;
flex-wrap: wrap;
}
.content{
flex: auto;
width: 20%;
height: 180px;
margin: 10px;
}
.content img{ width:auto;
max-width: 100%; height: auto;
object-fit: cover;
}
.content-right-top-conner-photo{
max-width: 100%;
position: absolute;
transform: translate(-50px, 15px);
}
.content-text{
text-align: center;
font-size: 20px;
padding: 10px;
transform: translate(0px, -46px);
background-color: rgb(255, 255, 255, 0.8);
}  @media(max-width: 1200px){
.content-inner-frame{
flex-wrap: wrap;
}
.content{
width: 45%;
}
.content-header-outer-frame, .content-outer-frame{
margin: 20px;
}
.content img{ width: 100%;
height: 170px;
object-fit: cover;
}
}  @media(max-width: 600px){
.menu-desktop-and-tablet{
display: none;
}
.menu-mobile{
display: block;
}
.banner{
font-size: 30px;   
}
.content-header-inner-frame{
flex-wrap: wrap;
}
.content-header, .content{
width: 90%;
}
}