*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
h1{
    color: white;
}
#slogn{
    position: absolute;
    top: 20%;
    left: 15%;
    z-index: 1;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.7);
}
body{
   /* background-color: rgb(232,232,232);*/
   background-color: #faf7f8;
}
#logo{
    transform: translateY(6px);
    height: 30px;
    /*background-color: aquamarine;*/
}
#my{
    transform: translateY(6px);
    height: 30px;
    /*background-color: blue;*/
}
main{
    width: 100%;
    height: 100%;
}
.banner{
    width: 100%;
    height: 100%;
    background-image: url(../img/sofa.jpg);
    background-size: cover;
    background-position: center;
}
.banner::before{
    content:"";
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100vh;
/*   background-color: rgba(46, 46, 46, 0.5);*/
    z-index:-1;
}
header{
    position:absolute;
    top: 0;
    left: 0%;
    width: 100%;
    height: 20%;
    /*background-color: rgb(190, 212, 157);*/
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:1;
}

header ul li{
    list-style: none;
    display: inline-block;
    margin-left: 40px;
    height: 30px;
    line-height: 30px;
}
header ul li a:hover{
    color: rgb(48, 132, 104);
}
header ul li a:hover .list{
    display: block;
}
header ul li a{
    text-decoration: none;
    color: white;
    display: inline-block;
    /*background-color：aquamarine；*/
    height:30px;
    line-height: 30px;
    /* 垂直居中 */
}
.list{
    display: none;
    position: absolute;
    top: 60px;
    left: 30%;
    color: white;
}
.list>li{
    display: block;
}
.list>li:hover{
    color: rgb(48, 132, 104); ;
}
#san3{
    width: 0px;
    height: 0px;
    border: 5px solid transparent;
    border-top: 5px solid white;
    position: relative;
    top: 15px;
    left: 5px;
}
header ul li a:hover #san3{
    border: 5px solid transparent;
    border-bottom: 5px solid white;
    position: relative;
    top: -15px;
}
.container-img{
    position: absolute;
    top: 350px;
    /*border: 2px solid red;*/
    display: flex;
    width: 100%;
    height: 400px;
    /*background-color: aquamarine;*/
}
.left-box{
    flex: 1;
    height: 400px;
/*    background-color: rgb(208, 189, 225);*/
}
.center-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 600px;
    height: 200px;
  /* background-color: rgb(152, 186, 213);*/
}
.right-box{
    flex: 1;
    height: 400px;
/*    background-color: rgb(208, 189, 225);  */
}
.center-box>img{
    width: 190px;
}

.content{
    display: flex;
}
.left{
    flex: 1;
    height:400px;
/*    background-color: rgb(30, 0, 57)*/
}
.center{
    width: 600px;
    height: 400px;
/*    background-color: rgb(232, 16, 203);*/
    display: flex;
}
.right{
    flex: 1;
    height: 400px;
 /*   background-color: rgb(208, 189, 225)*/
}
.box1{
    flex: 1;
    height:400px;
    display: flex;
    justify-content: left;
/*   background-color: rgb(88, 8, 158);*/
    align-items:center;    
}
.box2{
    flex: 1;
    height: 400px;
/*   background-color: rgb(61, 244, 41);*/
    display: flex;
    justify-content: right;
    align-items: center;
}    
.box1>div{
    width: 80%;
    height: 80%;
 /*  background-color: aquamarine;*/
}
.box2>img{
    height: 70%;
}
.box1>div>p{
    line-height:23px;
    font-size: 17px;
}
.btn-t{
    text-decoration: none;
    color: black;
    border-bottom: 2px solid rgb(159, 100, 5);
    padding-bottom: 5px;
}
.btn-t:hover{
    color: rgb(241, 125, 41);
border-bottom: 2px solid rgb(255, 170, 32);
}
.box1>img{
    height: 70%;
}
.box2>div{
    text-align: right;
    width: 80%;
    height: 80%;
/*   background-color: aquamarine;*/
}
.box2>div>p{
    line-height:23px;
    font-size: 17px;
}
.content-img{
    display: flex;
    height: 260px;
}
.left-img{
    flex: 1;
/*    background-color: brown;*/
}
.center-img{
    display: flex;
    width: 600px;
    justify-content: space-between;
}
.right-img{
    flex: 1;
/*  background-color: brown;*/
}
.center-img>img{
    height: 260px;

}
.left-img>img{
    height: 100%;
    width: 100%;
}
.center>img{
    height: 168.5px;
}
.btn-2{
    height: 25px;
    margin-top: -100px;
    text-decoration: none;
    color: black;
    border-bottom: 2px solid rgb(159, 100, 5);
    padding-bottom: 5px;
}
.btn-2:hover{
    color: rgb(241, 125, 41);
    border-bottom: 2px solid rgb(255, 170, 32);
}

footer {
/*    background-color: darkorange;*/
    padding: 40px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
}

.footer-container {
    width: 600px;
    text-align: center;
}


.contact-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; 
    margin-bottom: 40px;
}

.address, .phone {
    font-size: 14px;
    color: #000;
    white-space: nowrap; 
}


.logo {
    font-size: 50px;
    color: #000;
    margin: 0 0 30px 0;
    letter-spacing: 2px;
    font-weight: normal;
}


.nav-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.nav-link {
    text-decoration: none;
    color: #000;
    font-size: 14px;
    padding: 0 10px;
    position: relative;
}

.nav-link:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: -12px;
    color: #000;
}

.nav-link:hover {
/*    color: chocolate;*/
    font-weight: bold;
}