@charset "UTF-8";
#swap {
    background: url("../images/swap_1920.jpg") center 20px no-repeat;
    height: 788px;
}

#swap div {
    position: absolute;
    left: 533px;
    top: 208px;
    width: 580px;
    height: 247px;
}

#swap .port {
    width: 220px;
    height: 88px;
    background: url(../images/port.png) center no-repeat;
    left: 520px;
    top: 400px;
    position: absolute;
}

@media screen and (max-width: 1366px) {
    #swap {
        background: url("../images/swap_1366.jpg") center 0 no-repeat;
        height: 536px;
    }
    #swap div {
        left: 367px;
        top: 102px;
        width: 416px;
        height: 169px;
    }
    #swap .port {
        background: url(../images/port.png) center no-repeat;
        left: 340px;
        top: 250px;
        transform: scale(0.8, 0.8);
    }
}

@media screen and (max-width: 960px) {
    #swap {
        background: url(../images/swap_960.jpg) center -48px no-repeat;
        height: 476px;
    }
    #swap div {
        left: 209px;
        top: 75px;
        width: 447px;
        height: 242px
    }
    #swap .port {
        background: url(../images/port.png) center no-repeat;
        left: 169px;
        top: 202px;
        transform: scale(0.8, 0.8);
    }
}

@media screen and (max-width: 640px) {
    #swap {
        background: url("../images/swap_640.jpg") center -95px no-repeat;
        height: 427px;
        /* background-color: #eeeeed;
*/
    }
    #swap div {
        top: 38px !important;
    }
    #swap .port {
        background: url(../images/port.png) center no-repeat;
        left: 29px !important;
        top: 42px !important;
        width: 220px !important;
        height: 88px!important;
        transform: scale(0.7, 0.7);
    }
}