0319

#wrap{

    width: 100%;

}

#main{

    width: 100%;

    height: 760px;

    background-color: violet;

}

#header{

    width: 100%;

    height: 120px;

    background-color: aquamarine;

}

#header_in{

    margin: 0 auto;

    width: 1300px;

    height: 120px;

    background-color: yellow;

}

#header_in .logo{

    float: left;

    width: 150px;

    height: 120px;

    background-color: tomato;

}

#header_in .group{

    float: right;

    width: 900px;

    height: 120px;

    background-color: tomato;

}

@media screen and (max-width:1300px) {

#main{

    width: 100%;

    height: 760px;

    background-color: violet;

}

#header{

    width: 100%;

    height: 120px;

    background-color: aquamarine;

}

#header_in{

    margin: 0 auto;

    /* width: 1300px; */

    width: 100%;

    height: 120px;

    background-color: #ccc;

}

#header_in .logo{

    float: left;

    width: 150px;

    height: 120px;

    background-color: tomato;

}

#header_in .group{

    float: right;

    width: 900px;

    height: 120px;

    background-color: tomato;

}

}

@media screen and (max-width:1120px) {

#main{

    width: 100%;

    height: 760px;

    background-color:rgb(18, 216, 68);

}

#header{

    width: 100%;

    height: 120px;

    background-color: aquamarine;

}

#header_in{

    /* width: 1300px; */

    width: 100%;

    height: 120px;

    background-color: #ccc;

}

#header_in .logo{

    float: left;

    width: 14vw;/* (150/1050)*100 */

    height: 120px;

    background-color: tomato;

}

#header_in .group{

    float: right;

    width: 80vw;

    height: 120px;

    background-color: tomato;

}

}

@media screen and (max-width:680px) {

#main{

    width: 100%;

    height: 760px;

    background-color:red;

}

#header{

    width: 100%;

    height: 150px;

    background-color: aquamarine;

}

#header_in{

    /* width: 1300px; */

    width: 100%;

    height: 150px;

    background-color: #ccc;

    padding-top: 30px;

}

#header_in .logo{

    float: none;

    margin: 0 auto;

    margin-bottom: 20px;

    width: 80px;/* (150/1050)*100 */

    height: 30px;

    background-color: tomato;

}

#header_in .group{

    float: none;

    width: 100vw;

    height: 80px;

    background-color: tomato;

}

}