html,
body,
p,
img {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.page {
display: flex;
flex-direction: column;
align-items: center;
background: #F5F5F5;
}
.nav {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: #393D49;
color: white;
font-size: 16px;
height: 50px;
width: 100%;
}
.menu {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 120px;
width: 96%;
border: 1px solid silver;
border-radius: 4px;
margin-top: 10px;
background: white;
}
.menu-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.menu-text {
font-size: 14px;
}
.menu-icon {
width: 40px;
height: 40px;
margin-bottom: 10px;
}
.menu-icon img {
width: 100%;
height: 100%;
}
.content-box {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
height: 500px;
width: 96%;
border: 1px solid silver;
border-radius: 4px;
margin-top: 10px;
background: white;
}
.content-title-box {
width: 100%;
height: 40px;
background: #F5F5F5;
border-bottom: 1px solid silver;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
display: flex;
align-items: center;
}
.content-title {
margin-left: 10px;
font-size: 16px;
}
.content-item {
width: 100%;
/* height: 100px; */
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin-right: 10px;
position: relative;
flex-grow: 1;
}
.content-item:hover {
background: #f5f5f5;
}
.content-item::after {
content: "";
position: absolute;
bottom: 0;
width: 96%;
border-bottom: 1px solid#F5F5F5;
left: 10px;
}
.content-item:last-child::after {
border-bottom: none;
}
.content-image {
height: 50%;
flex: 3;
margin-left: 10px;
margin-right: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.content-image img {
width: 100px;
height: 100%;
}
.content-text {
flex: 7;
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 5px;
}
.content-text-item1 {
font-size: 16px;
margin-bottom: 8px;
}
.content-text-item2 {
font-size: 14px;
color: #CCCCCC;
}
footer {
margin-top: 30px;
margin-bottom: 20px;
}
footer p,
footer a {
color: #CCCCCC;
text-align: center;
font-size: 14px;
}
.swiper-container {
width: 100%;
height: 200px;
}