img {
    width: 100%;
    height: 100%;
}

#firstPage {
    color: #05a9f5;
}

body .body {
    /*padding-bottom: 8.385vw;*/
    margin: 0;
    margin-top: 64px;
}

.leftyx.col {
    height: 100%;
    padding-top: 2.198vw;
}

.rightgdgn.col {
    height: 100%;
    padding-top: 2.198vw;
}

.leftyx .yx {
    width: 80.7%;
    height: 38.18vw;
    margin: 0 auto;
    position: relative;
}

.leftyx .yx h2,
.rightgdgn .gdgn h2 {
    padding: 0;
    margin: 0;
    font: 100 3.96vw/3.96vw "microsoft yahei";
    color: #344e6a;
    margin-bottom: 2.2396vw;
}

.leftyx .yx h2 span,
.rightgdgn .gdgn h2 span {
    font: 100 2.92vw/3.96vw "microsoft yahei";
    color: #0078ff;
    margin-left: 5px;
}

.leftyx .yx .bzyxrw {
    height: 32.135vw;
    padding: 0;
    cursor: pointer;
}

.rowParent {
    height: 32.135vw;
}

.leftyx .yx .bzyxrw .bzdmr {
    width: 97%;
}

.leftyx .yx .ckyxqk {
    height: 32.135vw;
    padding: 0;
    cursor: pointer;
}

.leftyx .yx .ckyxqk .ckdml {
    width: 97%;
    float: right;
}

.bzyxrw .gbimg,
.ckyxqk .fdjimg {
    width: 100%;
    background-color: #23c7c8;
    height: 20.625vw;
}

.bzyxrw .gbimg {
    padding-left: 1.35vw;
    padding-top: 1.35vw;
    position: relative;
}

.bookimg {
    width: 4.06vw;
    height: 13.49vw;
    position: absolute;
    top: 4.79vw;
    right: 0;
}

.fdjimg .bookimg {
    left: 0;
}

.bookimg img {
    width: 100%;
    height: 100%;
}

.pen {
    width: 11.822vw;
    height: 4.375vw;
    position: absolute;
    top: 10.5vw;
    right: 2.9vw;
}

.pen img {
    width: 100%;
    height: 100%;
}

.ckyxqk .fdjimg {
    padding-right: 1.35vw;
    padding-top: 1.35vw;
    position: relative;
}

.fdj {
    width: 8.333vw;
    height: 8.281vw;
    position: absolute;
    top: 8.072vw;
    left: 5.9375vw;
}

.fdj img {
    width: 100%;
    height: 100%;
}

.bzyxrw .gbimg h3,
.ckyxqk .fdjimg h3 {
    font: 100 1.67vw/1.67vw "microsoft yahei";
    margin: 0;
    color: #fff;
    margin-bottom: 0.729vw;
}

.ckyxqk .fdjimg h3 {
    text-align: right;
}

.ckyxqk .fdjimg p {
    color: #fff;
    text-align: right;
}

.bzyxrw .gbimg p {
    color: #fff;
}

.wenzi {
    height: 23%;
    width: 97%;
    float: left;
    padding-top: 0.5823vw;
    padding-left: 1.1458vw;
    border: 1px solid #c9c9c9;
    border-bottom: none;
}

.ckyxqk .wenzi {
    float: right;
}

.wenzi p {
    font-size: 1.1rem;
    line-height: 2.0rem;
}

.btn_bzzy {
    width: 97%;
    height: 13%;
    background-color: #fb7654;
    float: left;
    text-align: center;
    color: #fff;
    /*border:1px solid #ef542d;*/
    cursor: pointer;
    font-size: 2.2rem;
    line-height: 5.4rem;
}

.btn_bzzy a {
    color: #fff;
}

.ckyxqk .btn_bzzy {
    float: right;
}

.rightgdgn .gdgn {
    width: 80.7%;
    height: 38.18vw;
    margin: 0 auto;
}

.rightgdgn .gdgn .onerow,
.rightgdgn .gdgn .tworow {
    height: 10.42vw;
    margin-bottom: 0.42vw;
}

.gdgn .onerow .bzzy {
    float: left;
    height: 100%;
    width: 29.86%;
    background-color: #2280da;
    padding-top: 1.77vw;
    padding-left: 1.82291667vw;
    position: relative;
    min-height: 60px;
}

.bzzz {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(9, 79, 150, 0.8);
    top: 0;
    left: 0;
    padding-top: 6.6146vw;
    padding-left: 1.1458vw;
    display: none;
    z-index: 100;
    cursor: pointer;
}

.bzzz h5 {
    font: 100 0.9375vw/1rem "microsoft yahei";
    color: #fff;
    margin: 0;
}

.bzzz h5 i {
    font-style: normal;
    margin-left: 3px;
}

.bzzz .xww {
    font: 100 0.729vw/1rem "microsoft yahei";
    color: #fff;
}

.tworow .zncp p.xww {
    font: 100 0.729vw/1rem "microsoft yahei";
    color: #fff;
}

.gdgn .threerow .zxdy p.xww {
    font: 100 0.729vw/1rem "microsoft yahei";
    color: #fff;
}

.threerow .xxsq p.xww {
    font: 100 0.729vw/1rem "microsoft yahei";
    color: #fff;
}

.onerow .bzzy .cbzzy {
    color: #fff;
    margin-bottom: 1.1458vw;
    width: 3.020833vw;
    height: 3.75vw;
}

.onerow .bzzy p.homework {
    font: 100 1.5625vw/1.5625vw "microsoft yahei";
    margin-bottom: 3px;
    color: #fff;
}

.onerow .bzzy p.ehw {
    font: 100 1.0417vw/1.0417vw "microsoft yahei";
    margin-bottom: 0;
    color: #fff;
}

.gdgn .onerow .pgzy {
    float: left;
    height: 100%;
    width: 69.24%;
    padding-top: 5.2083vw;
    background: url("/image/teacher/teacherindex/page2-2.png") no-repeat center center;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    background-size: 100% 100%;
    padding-right: 1.875vw;
    margin-left: 0.9%;
    position: relative;
}

.onerow .pgzy .pgimg {
    float: right;
    margin-left: 0.8854vw;
    width: 3.4375vw;
    height: 3.4375vw;
}

.onerow .pgzy .cpgzy {
    float: right;
    padding: 0;
    padding-top: 0.31125vw;
}

.onerow .pgzy .cpgzy p {
    font: 100 1.5625vw/1.5625vw "microsoft yahei";
    color: #fff;
    text-align: right;
    margin-bottom: 3px;
}

.onerow .pgzy .cpgzy p.epg {
    font: 100 1.0417vw/1.0417vw "microsoft yahei";
    color: #fff;
}

.gdgn .tworow .bksk {
    float: left;
    height: 100%;
    width: 29.86%;
    background-color: #2280da;
    padding-top: 2.1354vw;
    padding-left: 1.82291667vw;
    background: url("/image/teacher/teacherindex/page2-3.png") no-repeat center center;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    background-size: 100% 100%;
    position: relative;
    cursor: pointer;
}

.tworow .bksk .bkimg {
    height: 3.28125vw;
    margin-bottom: 0.78125vw;
    width: 3.69791667vw;
}

.tworow .bksk .cbksk {
    font: 100 1.66667vw/1.66667vw "microsoft yahei";
    color: #fff;
    margin-bottom: 3px;
}

.tworow .bksk .elt {
    font: 100 1.0417vw/1.0417vw "microsoft yahei";
    color: #fff;
}

.tworow .jxyj {
    width: 38.22%;
    background-color: #2280da;
    height: 100%;
    float: left;
    margin-left: 0.9%;
    padding-top: 4.16667vw;
    padding-left: 1.0416667vw;
    background: url("/image/teacher/teacherindex/page2-4.png") no-repeat center center;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    background-size: 100% 100%;
    position: relative;
    cursor: pointer;
}

.tworow .jxyj .jxyjimg {
    width: 3.64583vw;
    height: 2.9166667vw;
    float: left;
    margin-right: 0.41666667vw;
}

.tworow .jxyj .jxjy {
    float: left;
    padding-top: 3px;
}

.tworow .jxyj .jxjy p {
    font: 100 1.66667vw/1.66667vw "microsoft yahei";
    color: #fff;
    margin-bottom: 3px;
}

.tworow .jxyj .jxjy p.tar {
    font: 100 0.833333vw/ 0.833333vw "microsoft yahei";
    color: #fff;
}

.cloud {
    position: absolute;
    width: 5.104vw;
    height: 3.6979vw;
    top: 10px;
    animation: mysecond 25s infinite;
    -moz-animation: mysecond 25s infinite;
    -webkit-animation: mysecond 25s infinite;
    -o-animation: mysecond 25s infinite;
}

.bzzy .cloud {
    position: absolute;
    width: 3.104vw;
    height: 1.6979vw;
    top: 7px;
    right: 9px;
    animation: myfirst 5s infinite;
    -moz-animation: myfirst 5s infinite;
    -webkit-animation: myfirst 5s infinite;
    -o-animation: myfirst 5s infinite;
}

.tworow .zncp {
    width: 29.86%;
    height: 100%;
    background-color: #2280da;
    float: right;
    padding-top: 2.08333vw;
    padding-left: 1.19791667vw;
    background: url("/image/teacher/teacherindex/page2-5.png") no-repeat center center;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    background-size: 100% 100%;
    position: relative;
    cursor: pointer;
}

.tworow .zncp .znimg {
    height: 3.64583vw;
    margin-bottom: 0.78125vw;
    width: 2.864583vw;
}

.tworow .zncp p {
    font: 100 1.66667vw/1.66667vw "microsoft yahei";
    color: #fff;
    margin-bottom: 3px;
}

.tworow .zncp p.ia {
    font: 100 0.833333vw/ 0.833333vw "microsoft yahei";
    color: #fff;
}

.rightgdgn .gdgn .threerow {
    height: 10.42vw;
}

.gdgn .threerow .zxdy {
    float: right;
    width: 29.86%;
    height: 100%;
    background-color: #2280da;
    padding-top: 1.82291667vw;
    padding-left: 1.19791667vw;
    background: url("/image/teacher/teacherindex/page2-7.png") no-repeat center center;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    background-size: 100% 100%;
    position: relative;
}

.gdgn .threerow .zxdy .zximg {
    height: 3.69791667vw;
    margin-bottom: 0.5729vw;
    width: 3.1771vw;
}

.gdgn .threerow .zxdy p {
    padding-left: 0.46875vw;
    font: 100 1.66667vw/1.66667vw "microsoft yahei";
    color: #fff;
    margin-bottom: 3px;
}

.gdgn .threerow .zxdy p.online {
    font: 100 1.04167vw/1.04167vw "microsoft yahei";
}

.gdgn .threerow .xxsq {
    width: 69%;
    float: left;
    height: 100%;
    background-color: #2280da;
    padding-top: 3.59375vw;
    padding-left: 4.9271vw;
    background: url("/image/teacher/teacherindex/page2-6.png") no-repeat center center;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    background-size: 100% 100%;
    position: relative;
    cursor: pointer;
}

.threerow .xxsq .xximg {
    float: left;
    width: 5.15625vw;
    height: 3.48958vw;
    margin-right: 0.8333vw;
}

.threerow .xxsq .cxxsq {
    /*float: left;*/
    padding-top: 0.41666vw;
}

.threerow .xxsq p {
    font: 100 1.66667vw/1.66667vw "microsoft yahei";
    color: #fff;
    margin-bottom: 3px;
}

.threerow .xxsq p.lc {
    font: 100 1.04167vw/1.04167vw "microsoft yahei";
}

.enter {
    width: 240px;
    position: absolute;
    right: 0;
    top: -12px;
    display: none;
}

@media (max-width: 1600px) {
    html {
        font-size: 13px;
    }
}

@media (max-width: 1440px) {
    html {
        font-size: 11px;
    }
    .enter{
        width: 200px;
        top: -28px;
    }
    .leftyx .yx .bzyxrw .bzdmr,
    .leftyx .yx .ckyxqk .ckdml {
        height: 64%;
    }
    .bzyxrw .gbimg,
    .ckyxqk .fdjimg {
        padding-top: 2.8125vw;
        padding-left: 2.8125vw;
        height: 100%;
        width: 100%
    }
}

@media (max-width: 1280px) {
    html {
        font-size: 10px;
    }
    .btn_bzzy {
        line-height: 4.4rem;
    }
}

@media (max-width: 992px) {
    .enter {
        width: 180px;
        top: 8px;
    }
    .leftyx .yx,
    .rightgdgn .gdgn {
        width: 100%;
    }
    .leftyx.col {
        padding-top: 13px;
        height: 85.1875vw;
        padding-left: 3.90625vw;
        padding-right: 3.90625vw;
    }
    .leftyx .yx h2,
    .rightgdgn .gdgn h2 {
        font: 100 8.28125vw/ 8.28125vw "microsoft yahei";
        margin-bottom: 4.375vw;
    }
    .leftyx .yx h2 span,
    .rightgdgn .gdgn h2 span {
        font: 100 6.09375vw/6.09375vw "microsoft yahei";
    }
    .leftyx .yx .bzyxrw .bzdmr,
    .leftyx .yx .ckyxqk .ckdml {
        height: 43.59375vw;
    }
    .bzyxrw .gbimg,
    .ckyxqk .fdjimg {
        padding-top: 2.8125vw;
        padding-left: 2.8125vw;
        height: 100%;
        width: 100%
    }
    .ckyxqk .fdjimg {
        padding-left: 0;
        padding-right: 2.8125vw;
    }
    .bzyxrw .gbimg h3,
    .ckyxqk .fdjimg h3 {
        font: 100 3.4375vw/3.4375vw "microsoft yahei";
        margin-bottom: 1.71875vw;
    }
    .bzyxrw .gbimg p,
    .ckyxqk .fdjimg p {
        font: 100 2.5vw/2.5vw "microsoft yahei"
    }
    .bookimg {
        width: 8.59375vw;
        height: 28.28125vw;
        top: 10vw;
    }
    .pen {
        width: 25vw;
        height: 9.21875vw;
        right: 2.96875vw;
        top: 20.624vw;
    }
    .fdj {
        width: 17.65625vw;
        height: 17.65625vw;
        left: 12.5vw;
        top: 16.875vw;
    }
    .wenzi {
        padding-top: 3.59375vw;
        height: 15vw;
    }
    .btn_bzzy {
        height: 9.21875vw;
        min-height: 30px;
        font: 100 3.75vw/9.21875vw "microsoft yahei";
    }
    .rightgdgn.col {
        padding-left: 3.90625vw;
        padding-right: 3.90625vw;
        padding-top: 2.96875vw;
    }
    .rightgdgn .gdgn .onerow,
    .rightgdgn .gdgn .tworow {
        height: 22.03125vw;
        margin-bottom: 0.88125vw;
    }
    .rightgdgn .gdgn .threerow {
        height: 22.03125vw;
    }
    .gdgn .onerow .bzzy {
        padding-top: 3.59375vw;
        padding-left: 3.28125vw;
        cursor: pointer;
    }
    .onerow .bzzy .cbzzy {
        width: 7.34375vw;
        height: 7.8125vw;
        margin-bottom: 2vw;
    }
    .onerow .bzzy p.homework {
        font: 100 3.28125vw/3.28125vw "microsoft yahei";
    }
    .onerow .bzzy p.ehw {
        font: 100 2.1875vw/2.1875vw "microsoft yahei";
    }
    .gdgn .onerow .pgzy {
        padding-top: 10.625vw;
        padding-right: 3.59375vw;
        cursor: pointer;
    }
    .onerow .pgzy .pgimg {
        width: 7.96875vw;
        height: 7.96875vw;
        margin-left: 1.875vw;
    }
    .onerow .pgzy .cpgzy {
        padding-top: 0.625vw;
    }
    .onerow .pgzy .cpgzy p {
        font: 100 3.59375vw/3.59375vw "microsoft yahei"
    }
    .onerow .pgzy .cpgzy p.epg {
        font: 100 2.1875vw/2.1875vw "microsoft yahei"
    }
    .gdgn .tworow .bksk {
        padding-top: 4.53125vw;
        padding-left: 3.4375vw;
    }
    .tworow .bksk .bkimg {
        width: 7.8125vw;
        height: 7.03125vw;
        margin-bottom: 1.71875vw;
    }
    .tworow .bksk .cbksk {
        font: 100 3.59375vw/3.59375vw "microsoft yahei";
    }
    .tworow .bksk .elt {
        font: 100 2.1875vw/2.1875vw "microsoft yahei"
    }
    .tworow .jxyj {
        padding-top: 9.0625vw;
        padding-left: 2.1875vw;
    }
    .tworow .jxyj .jxyjimg {
        width: 7.8125vw;
        height: 6.09375vw;
        margin-right: 0.9375vw;
    }
    .tworow .jxyj .jxjy {
        padding-top: 0;
    }
    .tworow .jxyj .jxjy p {
        font: 100 3.59375vw/3.59375vw "microsoft yahei"
    }
    .tworow .jxyj .jxjy p.tar {
        font: 100 1.71875vw/1.71875vw "microsoft yahei"
    }
    .tworow .zncp {
        padding-top: 4.21875vw;
        padding-left: 2.1875vw;
    }
    .tworow .zncp .znimg {
        width: 6.09375vw;
        height: 7.656225vw;
        margin-bottom: 1.71875vw;
    }
    .tworow .zncp p {
        font: 100 3.59375vw/3.59375vw "microsoft yahei"
    }
    .tworow .zncp p.ia {
        font: 100 1.71875vw/1.71875vw "microsoft yahei"
    }
    .gdgn .threerow .xxsq {
        padding-top: 7.5vw;
        padding-left: 14.375vw;
    }
    .threerow .xxsq .xximg {
        width: 10.9375vw;
        height: 7.34375vw;
        margin-right: 1.71875vw;
    }
    .threerow .xxsq .cxxsq {
        padding-top: 0.9375vw;
    }
    .threerow .xxsq p {
        font: 100 3.59375vw/3.59375vw "microsoft yahei"
    }
    .threerow .xxsq p.lc {
        font: 100 2.1875vw/2.1875vw "microsoft yahei"
    }
    .gdgn .threerow .zxdy {
        padding-top: 3.28125vw;
        padding-left: 1.875vw;
    }
    .gdgn .threerow .zxdy .zximg {
        width: 7.1875vw;
        height: 8.4375vw;
        margin-bottom: 1.25vw;
    }
    .gdgn .threerow .zxdy p {
        font: 100 3.59375vw/3.59375vw "microsoft yahei"
    }
    .gdgn .threerow .zxdy p.online {
        font: 100 2.1875vw/2.1875vw "microsoft yahei"
    }
    .cloud {
        width: 10.78125vw;
        height: 7.65625vw;
    }
    .bzzy .cloud {
        width: 5.78125vw;
        height: 3.65625vw;
    }
}

@media (max-width: 960px) {
    html {
        font-size: 8px;
    }
}

@media (max-width:750px) {
    body .body {
        max-width: 600px;
        margin: 70px auto 0 auto;
    }
    .leftyx .yx .bzyxrw .bzdmr,
    .leftyx .yx .ckyxqk .ckdml {
        height: 140px;
    }
    .enter {
        width: 120px;
        top: -13px;
    }
    .bookimg {
        width: 28px;
        height: 91px;
        top: 37px;
    }
    .leftyx .yx h2,
    .rightgdgn .gdgn h2 {
        margin-bottom: 15px;
    }
    .pen {
        width: 80px;
        height: 30px;
        right: 10px;
        top: 65px;
    }
    .fdj {
        width: 57px;
        height: 57px;
        left: 45px;
        top: 54px;
    }
    .rightgdgn .gdgn .onerow,
    .rightgdgn .gdgn .tworow {
        height: 71px;
        margin-bottom: 2px;
    }
    .gdgn .onerow .bzzy {
        padding-top: 12px;
        padding-left: 11px;
    }
    .onerow .bzzy .cbzzy {
        width: 25px;
        height: 25px;
        margin-bottom: 8px;
    }
    .bzzy .cloud {
        width: 19px;
        height: 12px;
    }
    .gdgn .onerow .pgzy {
        padding-top: 34px;
        padding-right: 12px;
    }
    .onerow .pgzy .pgimg {
        width: 26px;
        height: 26px;
        margin-left: 6px;
    }
    .cloud {
        width: 35px;
        height: 25px;
    }
    .gdgn .tworow .bksk {
        padding-top: 15px;
        padding-left: 11px;
    }
    .tworow .bksk .bkimg {
        width: 25px;
        height: 23px;
        margin-bottom: 5px;
    }
    .tworow .jxyj {
        padding-top: 29px;
        padding-left: 7px;
    }
    .tworow .jxyj .jxyjimg {
        width: 25px;
        height: 20px;
        margin-right: 3px;
    }
    .tworow .zncp {
        padding-top: 14px;
        padding-left: 7px;
    }
    .tworow .zncp .znimg {
        width: 20px;
        height: 24px;
        margin-bottom: 5px;
    }
    .rightgdgn .gdgn .threerow {
        height: 71px;
    }
    .gdgn .threerow .zxdy {
        padding-top: 11px;
        padding-left: 6px;
    }
    .gdgn .threerow .zxdy .zximg {
        width: 23px;
        height: 27px;
        margin-bottom: 4px;
    }
    .gdgn .threerow .xxsq {
        padding-top: 24px;
        padding-left: 46px;
    }
    .threerow .xxsq .xximg {
        width: 35px;
        height: 24px;
        margin-right: 5px;
    }
    .row .col.s12 {
        height: 310px;
    }
    .leftyx .yx h2,
    .rightgdgn .gdgn h2 {
        font: 100 34px/34px "microsoft yahei"
    }
    .leftyx .yx h2 span,
    .rightgdgn .gdgn h2 span {
        font: 100 21px/33px "microsoft yahei"
    }
    .bzyxrw .gbimg h3,
    .ckyxqk .fdjimg h3 {
        font: 100 14px/14px "microsoft yahei";
        margin-bottom: 7px;
    }
    .bzyxrw .gbimg p,
    .ckyxqk .fdjimg p {
        font: 100 10px/10px "microsoft yahei"
    }
    .bzyxrw .gbimg,
    .ckyxqk .fdjimg {
        padding-top: 12px;
        padding-left: 12px;
    }
    .leftyx .yx .bzyxrw,
    .leftyx .yx .ckyxqk {
        height: 133px;
    }
    .ckyxqk .fdjimg {
        padding-left: 0;
        padding-right: 12px;
    }
    .onerow .bzzy p.homework {
        font: 100 13px/13px "microsoft yahei"
    }
    .onerow .pgzy .cpgzy p,
    .tworow .bksk .cbksk,
    .tworow .jxyj .jxjy p,
    .tworow .zncp p,
    .gdgn .threerow .zxdy p {
        font: 100 14px/14px "microsoft yahei"
    }
    .threerow .xxsq p {
        font: 100 17px/17px "microsoft yahei"
    }
    .wenzi,
    p.ehw,
    p.epg,
    p.elt,
    p.tar,
    p.ia,
    p.lc,
    p.online {
        display: none;
    }
}

@keyframes mysecond {
    0% {
        left: 0px;
    }
    50% {
        left: 80%;
    }
    100% {
        left: 0px;
    }
}

@-moz-keyframes mysecond {
    0% {
        left: 0px;
    }
    50% {
        left: 80%;
    }
    100% {
        left: 0px;
    }
}

@-webkit-keyframes mysecond {
    0% {
        left: 0px;
    }
    50% {
        left: 80%;
    }
    100% {
        left: 0px;
    }
}

@-o-keyframes mysecond {
    0% {
        left: 0px;
    }
    50% {
        left: 80%;
    }
    100% {
        left: 0px;
    }
}

@keyframes myfirst {
    0% {
        right: 9px;
    }
    50% {
        right: 20%;
    }
    100% {
        right: 9px;
    }
}

@-moz-keyframes myfirst {
    0% {
        right: 9px;
    }
    50% {
        right: 20%;
    }
    100% {
        right: 9px;
    }
}

@-webkit-keyframes myfirst {
    0% {
        right: 9px;
    }
    50% {
        right: 20%;
    }
    100% {
        right: 9px;
    }
}

@-o-keyframes myfirst {
    0% {
        right: 9px;
    }
    50% {
        right: 20%;
    }
    100% {
        right: 9px;
    }
}