* {
    padding: 0;
    margin: 0;
}

a {
    color: #333;
    text-decoration: none;
}

li {
    list-style: none;
}

body,
html {
    height: 100%;
}

.c_container {
    width: 1200px;
    margin: 0 auto;
}

.c_fullScreen {
    width: 100%;
    min-width: 1200px;
}

.flex {
    display: flex;
}

.justify-between {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}

body {
    background: url('./images/bg.jpg') left center;
    background-size: 100% 100%;
    font-size: 12px;
    overflow: hidden;
}

.logo {
    position: absolute;
    left: 2%;
    top: 4%;
    cursor: pointer;
    width: 20vw;
}

.aside {
    width: 15vw;
    height: 50vh;
    position: absolute;
    top: 55vh;
    transform: translateY(-50%);
    right: 1vw;
    background: url('./images/aside.png') left center no-repeat;
    background-size: 100% 100%;
}

.aside div {
    position: absolute;
}

.aside .label1{
    left: 2.5vw;
    top: 17vh;
    width: 3.1vw;
    height: 1.6vh;
    background: url('./images/qq/1.png') left center;
    background-size: 100% 100%;
}
.aside .label2{
    left: 2.5vw;
    top: 19.5vh;
    width: 2.9vw;
    height: 1.6vh;
    background: url('./images/qq/2.png') left center;
    background-size: 100% 100%;
}

.aside .label3{
    left: 2.5vw;
    top: 21.8vh;
    width: 3.1vw;
    height: 1.6vh;
    background: url('./images/qq/3.png') left center;
    background-size: 100% 100%;
}

.aside .as:nth-of-type(1) a  div{
    left: 5.9vw;
    top: 17vh;
    width: 3.2vw;
    height: 1.4vh;
    background: url('./images/qq/11.png') left center;
    background-size: 100% 100%;
}
.aside .as:nth-of-type(2) a  div{
    left: 5.8vw;
    top: 19.5vh;
    width: 3.7vw;
    height: 1.4vh;
    background: url('./images/qq/21.png') left center;
    background-size: 100% 100%;
}

.aside .as:nth-of-type(3) a  div{
    left: 6vw;
    top: 21.8vh;
    width: 4vw;
    height: 1.4vh;
    background: url('./images/qq/31.png') left center;
    background-size: 100% 100%;
}
.aside .as:nth-of-type(1):hover a  div{
    left: 5.9vw;
    top: 17vh;
    width: 3.2vw;
    height: 1.4vh;
    background: url('./images/qq/hover11.png') left center;
    background-size: 100% 100%;
}
.aside .as:nth-of-type(2):hover a  div{
    left: 5.8vw;
    top: 19.5vh;
    width: 3.7vw;
    height: 1.4vh;
    background: url('./images/qq/hover21.png') left center;
    background-size: 100% 100%;
}

.aside .as:nth-of-type(3):hover  a  div{
    left: 6vw;
    top: 21.8vh;
    width: 4vw;
    height: 1.4vh;
    background: url('./images/qq/hover31.png') left center;
    background-size: 100% 100%;
}

/*.aside .as:hover .label1{
    left: 2.5vw;
    top: 17vh;
    width: 3.1vw;
    height: 1.6vh;
    background: url('./images/qq/hover1.png') left center;
    background-size: 100% 100%;
}
.aside .as:hover .label2{
    left: 2.5vw;
    top: 19.5vh;
    width: 2.9vw;
    height: 1.6vh;
    background: url('./images/qq/hover2.png') left center;
    background-size: 100% 100%;
}

.aside .as:hover .label3{
    left: 2.5vw;
    top: 21.8vh;
    width: 3.1vw;
    height: 1.6vh;
    background: url('./images/qq/hover3.png') left center;
    background-size: 100% 100%;
}
*/



.section {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.s1 {
    width: 65vw;
    height: 40vh;
    background: url('./images/s1.png') left center no-repeat;
    background-size: 100% 100%;
    position: relative;
    top: 8vh;
    left: -4vw;
}

.s1 .img1 {
    position: absolute;
    right: 5vw;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: 12vw;
    background:url('./images/1.png')left center no-repeat;
    background-size: 100% 100%;
    height: 60%;
}
.s1 .img1:hover{
    background:url('./images/3.png')left center no-repeat;
    background-size: 100% 100%;
}
.s1 .img1:focus,.s1 .img1:active{
    background:url('./images/5.png')left center no-repeat;
    background-size: 100% 100%;
}
.s2 {
    width: 65vw;
    height: 40vh;
    background: url('./images/s2.png') left center no-repeat;
    background-size: 100% 100%;
    position: relative;
    top: -1vh;
    left: -4vw;
}
.s2 .img2 {
    position: absolute;
    right: 5vw;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: 12vw;
    background:url('./images/2.png') left center no-repeat;
    background-size: 100% 100%;
    height: 60%;
}
.s2 .img2:hover{
    background:url('./images/4.png')left center no-repeat;
    background-size: 100% 100%;
}
.s2 .img2:focus,.s2 .img2:active{
    background:url('./images/6.png')left center no-repeat;
    background-size: 100% 100%;
}
.aside .as{ 
    display: flex;
    align-items: center; 
}