@charset "utf-8";
@media (min-device-width: 320px) and (max-width: 689px),(max-device-width: 480px) {
    input[type="button"],
    input[type="submit"] {
        vertical-align: middle;
        cursor        : pointer;
    }
    input[type=button],
    input[type=text],
    input[type=password] {
        -webkit-appearance: none;
        outline           : none;
    }
    /*---------- 0.public ----------*/
    body {
        -webkit-text-size-adjust: 100%;
    }
    .main {
        overflow: hidden;
    }
    .main,
    .w1100,
	.w1200 {
		width: 10rem
	}

    /*---------- 1.header ----------*/
    .ou-header img.logo {
        width: 15%;
        height: auto;
        margin-top: 0.16rem;
        margin-left: 0.2rem;
    }
    .ou-header .nav {
        font-size: 14px;
        float: right;
        width: auto;
    }
    .ou-header .nav a {
        margin: 0 5px;
    }

    /*---------- 2.video ----------*/
    .ou-video {
        background: url(../images/mbg.jpg) no-repeat;
        background-size: 100% auto;
    }
    .ou-top-height {
        height: 4.586666666666667rem;
    }
    .ou-video .content {
        width: 9.266666666666667rem;
        height: 5.36rem;
    }
    .ou-video .content video {
        width: 100%;
        height: auto;
    }

    /*---------- 3.REC ----------*/
    .ou-REC {
        background: url(../images/mbg2.jpg) no-repeat;
        background-size: 100% auto;
        height: 10.026666666666667rem;;
    }
    .ou-REC .content {
        width: 9.6rem;
    }
    /* item1 */
    .ou-REC .content .item1 {
        background: url(../images/mbg2a.png) no-repeat;
        width: 7.6rem;
        height: 3.52rem;
        top: 1.44rem;
        left: 0.6133333333333333rem;
        background-size: 100% auto;
    }
    .ou-REC .content .item1 .wrap img {
        width: 98%;
        height: 2.8933333333333335rem;
        margin-top: 0.30666666666666664rem;
    }
    .ou-REC .content .item1 .wrap span {
        background: url(../images/mbg2b.png) no-repeat;
        background-size: 100% auto;
        width: 2.7466666666666666rem;
        height: 0.64rem;
        font-size: 0.28rem;
        line-height: 0.49333333333333335rem;
        left: -0.50666666666666664rem;
    }
    /* item2 */
    .ou-REC .content .item2 {
        background: url(../images/mbg3a.png) no-repeat;
        width: 4.56rem;
        height: 4.066666666666666rem;
        top: 0.56rem;
        right: 0.24rem;
        background-size: 100% auto;
    }
    .ou-REC .content .item2 .wrap img {
        width: 85%;
        height: 2.83rem;
        margin-top: 0.6266666666666667rem;
        margin-left: -0.03rem;
    }
    .ou-REC .content .item2 .wrap span {
        background: url(../images/mbg3b.png) no-repeat;
        background-size: 100% auto;
        width: 3.1466666666666665rem;
        height: 0.8533333333333334rem;
        font-size: 0.28rem;
        line-height: 0.3533333333333334rem;
        right: 0;
        bottom: -0.35rem;
        padding: 0.04666666666666667rem 0.39333333333333333rem;
    }
    /* item3 */
    .ou-REC .content .item3 {
        background: url(../images/mbg4a.png) no-repeat;
        background-size: 100% auto;
        width: 4.1066666666666665rem;
        height: 3.24rem;
        top: 5.226666666666667rem;
        left: 0.6133333333333333rem;
    }
    .ou-REC .content .item3 .wrap img {
        margin-top: 0.28rem;
        width: 3.973333333333333rem;
        height: 2.6666666666666665rem;
    }
    .ou-REC .content .item3 .wrap span {
        background: url(../images/bg4b.png) no-repeat;
        background-size: 100% auto;
        width: 3.453333333333333rem;
        height: 0.5066666666666667rem;
        line-height: 0.5066666666666667rem;
        left: -0.50666666666666664rem;
        bottom: -0.2rem;
        font-size: 0.28rem;
    }
    /* item4 */
    .ou-REC .content .item4 {
        background: url(../images/mbg4a.png) no-repeat;
        background-size: 100% auto;
        width: 4.1066666666666665rem;
        height: 3.24rem;
        top: 5.226666666666667rem;
        left: 5.266666666666667rem;
    }
    .ou-REC .content .item4 .wrap img {
        margin-top: 0.28rem;
        width: 3.973333333333333rem;
        height: 2.6666666666666665rem;
    }
    .ou-REC .content .item4 .wrap span {
        background: url(../images/mbg5b.png) no-repeat;
        background-size: 100% auto;
        width: 2.68rem;
        height: 0.5066666666666667rem;
        line-height: 0.5066666666666667rem;
        right: -0.30666666666666664rem;
        bottom: -0.2rem;
        font-size: 0.28rem;
    }
    /*---------- 4.scroll ----------*/
    .ou-scroll {
        background: url(../images/mbg3.jpg) no-repeat;
        background-size: 100% auto;
        height: 8.52rem;
        padding-top: 1.44rem;
    }
    .ou-scroll .swiper-container {
        width: 100%;
        height: 5.253333333333333rem;
        margin: 0 auto 0 auto;
    }
    .ou-scroll .swiper-container .swiper-slide img {
        width: 2.9466666666666668rem;
        height: 5.253333333333333rem;
    }
    
    /* nav2 */
    .body-ou {
        background:url(../images/mdbg1.jpg) no-repeat;
        background-size: 100% 100%;
        height: 100vh;
    }
    .body-ou2 {
        background:url(../images/mdbg2.jpg) no-repeat;
        background-size: 100% 100%;
        height: 100vh;
    }
    .body-ou3 {
        background:url(../images/mdbg3.jpg) no-repeat;
        background-size: 100% 100%;
        height: 100vh;
    }
    .body-ou4 {
        background:url(../images/mdbg4.jpg) no-repeat;
        background-size: 100% 100%;
        height: 100vh;
    }
    .body-ou .main {
        height: 100vh !important;
    }
    .ou-container .nav2 {
        max-width: 9.2rem;
        margin-left: auto;
        margin-right: auto;
        height: 2.5rem;
    }
    .ou-container .nav2.side-menu {
        width: 9.2rem;
        top: 1%;
    }
    .ou-container .nav2 .item {
        width: 3.8133333333333335rem;
        height: 0.8933333333333333rem;
        font-size: 0.3rem;
        float: left;
        margin: 0.24rem 0.30666666666666664rem 0 0.30666666666666664rem;
        border-radius: 0.4533333333333333rem;
        padding: 0;
        line-height: 0.8933333333333333rem;
    }
    .ou-container .nav2 .item:nth-child(2) {
        padding: 0.05rem 0.4rem;
        line-height: normal;
    }
    .ou-container .nav2 .item a {
        margin: auto;
    }
    .ou-container .nav2 .item:last-child {
        display: none;
    }
    .ou-container .content {
        float: none;
        top: 17%;
        max-width: 10rem;
        padding-top: 0;
        height: 70vh;
        overflow-y: auto;
        scrollbar-width: 0em;
    }
    .ou-container .content::-webkit-scrollbar {
        width: 0em;
    }
    .ou-container .content ul.items {
        width: 9rem;
        margin-left: auto;
        margin-right: auto;
    }
    .ou-container .content li {
        float: left;
        width: 4.32rem;
        height: 3.246667rem;
        margin-left: 0.3466666666666667rem;
    }
    .ou-container .content li img {
        width: 4.226666666666667rem;
        height: 2.3333333333333335rem;
    }
    .ou-container .content li span {
        font-size: 0.32rem;
        padding: 0 0.2rem;
        height: 1.5rem;
    }
    .ou-container .content li:nth-child(3n+1) {
        margin-left: 0.3466666666666667rem;
    }
    .ou-container .content li:nth-child(2n+1) {
        margin-left: 0;
    }
    .ou-container .back {
        width: 2.4133333333333336rem;
        height: 0.8rem;
        line-height: 0.8rem;
        font-size: 0.28rem;
        text-align: center;
        background-color: rgb(90, 153, 239);
        margin-left: auto;
        margin-right: auto;
        border-radius: 30px;
    }
    .main-ou .footer {
        bottom: -25px;
    }
	
	
	.copyright {
        font-size: 0.32rem;
        padding: 0.1rem 0.24rem;
    }
}