#main {
display: flex;
justify-content: space-between;
padding-top: 10px;
}
#main .main-menu {
color: white;
background-color: var(--main-color);
padding: 10px 20px;
}
#main .main-menu > li i {
padding: 0 20px;
}
.main-sub-menu {
color: black;
display: none;
position: absolute;
width: 264px;
top: 163px;
left: 381px;
padding: 10px;
border: 1px solid var(--line-color);
line-height: 1.6;
}
li:hover .main-sub-menu {
display:block;
}
.main-search span {
margin-right: -10px;
padding: 10px 20px;
border: 1px solid var(--line-color);
}
.main-search input[type="text"] {
padding: 15px 20px 11px;
margin-right: -6px;
border: 1px solid var(--line-color);
}
.main-search a{
padding: 11px 20px 11px;
color: white;
border: none;
background-color: var(--main-color);
}
.main-right {
display: flex;
}
.main-right .phone {
background-color: #f5f5f5;
color: var(--main-color);
padding: 15px;
border-radius: 50%;
}
.main-right div:last-child {
margin-left: 20px;
}
.main-img img {
padding-top: 30px;
padding-left: 310px;
}
.main img {
position: relative;
}
.banner-text {
position: absolute;
height: 300px;
top: 300px;
left: 800px;
}
.banner-text p:first-child {
font-size: 16px;
letter-spacing: 3px;
line-height: 1.8;
font-weight: 900;
color: var(--main-color);
}
.banner-text h1 {
font-size: 40px;
font-weight: 900;
}
.banner-p {
font-size: 14px;
line-height: 2;
color: gray;
padding-bottom: 30px;
}
.banner-text > a {
background-color: var(--main-color);
color: white;
padding: 10px 20px;
}
.slidebox {
width: 100%;
}
#slider .slidebox .slides{
display: flex;
}
.slide {
display: inline-block;
position: relative;
text-align: center;
transition: all 1s ease;
}
.slide img {
width: 100%;
}
.slide h1 {
font-size: 20px;
}
.slide label {
position: absolute;
top: 50%;
}
.left {
left: 0;
}
.right {
right: 0;
}
#slider .slide-btn{
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
#slider .slide-btn label {
width: 15px;
height: 15px;
background-color: var(--main-color);
margin-right: 5px;
border-radius: 50%;
cursor: pointer;
}
#s01:checked ~ .slidebox .slide {
transform: translateX(0%);
}
#s02:checked ~ .slidebox .slide {
transform: translateX(-100%);
}
#s03:checked ~ .slidebox .slide {
transform: translateX(-200%);
}
#s04:checked ~ .slidebox .slide {
transform: translateX(-300%);
}
#s05:checked ~ .slidebox .slide {
transform: translateX(-400%);
}
#slider input{
display: none;
}
.product {
padding-top: 50px;
line-height: 2;
text-align: center;
}
#tab-button {
display: flex;
justify-content: space-between;
width: 40%;
padding: 10px;
margin-left: 330px;
}
#tab-button label {
cursor: pointer;
}
.tab-content {
display: flex;
flex-wrap: wrap;
padding-left: 30px;
}
.all {
display: none;
}
#menu01:checked ~ #tab-box .tab-content .all,
#menu02:checked ~ #tab-box .tab-content .oranges,
#menu03:checked ~ #tab-box .tab-content .fresh,
#menu04:checked ~ #tab-box .tab-content .vegetables,
#menu05:checked ~ #tab-box .tab-content .fastfood {
display: block;
}
.product input {
display: none;
}