/* 公共样式 */
body{
    margin: 0 auto;
    color: #333;
    background: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
        "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    }
    ul,ol,li,p,h1,h2,h3,h4,form,dd,dl,dt,i{ margin: 0; padding: 0; list-style: none; }
    img{ border: 0; }
    input{ outline: none; }
    i{ font-style: normal; }
    button{ display: block; }
    a{ cursor: pointer; text-decoration: none;}
    a:hover{ text-decoration: none;}
    .wrap{ max-width: 750px; margin: 0 auto; background-color: #f0f0f0; min-height: 100vh;}


    /* 头部 */
    .header{ background-image: url(../img/topbgi.png); height: 459px; background-repeat: no-repeat; padding-top: 90px;}
    .header .company{ display: block; font-size: 50px; text-align: center; color: #fff; font-weight: lighter;}
    .header .title{ display: block; font-size: 50px; text-align: center; color: #fff; margin-top: 20px; font-weight: bold;}
    /* 中间内容 */
    .content{ padding: 0 56px; }
    .content .three ul{ display: flex; justify-content: space-between;}
    .content .three ul li{ width: 192px; height: 222px; background-color: #fff; border-radius: 15px; box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.2); text-align: center;}
    .content .three ul li a{ display: block; width: 100%; height: 100%; border-radius: 15px;}
    .content .three ul li img{ width: 98px; height: 98px; margin-top: 36px; margin-bottom: 22px; -webkit-transition:-webkit-transform 0.3s ease-out;-moz-transition:-moz-transform 0.3s ease-out;transition:transform 0.3s ease-out;}
    .content .three ul li span{ display: block; color: #343434; font-size: 22px; transition: all 0.3s}
    .content .three ul li:hover img{ transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);}
    .content .three ul li:hover span{ color: #4aacfd;}
    .content .rmapp>span{ display: block; margin: 60px 0 46px 0px; padding-left: 28px; position: relative; font-size: 28px;}
    .content .rmapp>span::before{ content: ""; width: 4px; height: 19px; background-color: #49acfd; display: block; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);}
    .content .rmapp>div{ box-sizing: border-box; width: 640px; height: 632px; border-radius: 15px; background-color: #fff; padding: 0 26px 44px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);}
    .content .rmapp>div>ul{ display: grid; grid-template-columns: 33.3% 33.3% 33.3%; grid-template-rows: 33.3% 33.3%; width: 100%; height: 100%;}
    .content .rmapp>div>ul>li{ text-align: center; display: inline-block;}
    .content .rmapp>div>ul>li a{ display: block; }
    .content .rmapp>div>ul>li span{ display: block; color: #343434; font-size: 22px; transition: all 0.3s}
    .content .rmapp>div>ul>li img{ width: 98px; height: 98px; margin-top: 40px; margin-bottom: 20px; -webkit-transition:-webkit-transform 0.3s ease-out;-moz-transition:-moz-transform 0.3s ease-out;transition:transform 0.3s ease-out;}
    .content .rmapp>div>ul>li:hover img{ transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);}
    .content .rmapp>div>ul>li:hover span{ color: #4aacfd;}
    /* 尾部 */
    .footer{ text-align: center; padding-bottom: 20px; margin-top: 30px;}
    .footer p{ line-height: 36px; color: #515151;}
    .footer p a{ color: #515151; transition: all 0.3s;}
    .footer p a:hover{ color: #4aacfd;}


    /* 移动端样式 */
    @media (max-width: 767px){
        .header{ background-size: contain; padding-top: 36px; height: 138px;}
        .header .company{ font-size: 26px;}
        .header .title{ margin-top: 12px; font-size: 26px;}
        .content{ padding: 0 20px;}
        .content .three ul li{ width: 31%; height: 126px;}
        .content .three ul li span{ font-size: 16px;}
        .content .three ul li img{ width: 60px; height: 60px; margin-top: 16px; margin-bottom: 8px;}
        .content .rmapp>div{ width: 100%; height: 400px; padding: 6px 12px 16px;}
        .content .rmapp>span{ margin: 40px 0 26px 0px; font-size: 20px;}
        .content .rmapp>div>ul>li img{ width: 60px; height: 60px; margin-top: 20px; margin-bottom: 10px;}
        .content .rmapp>div>ul>li span{ font-size: 16px;}
        .footer{ margin-top: 30px;}
        .footer p{ font-size: 14px;}
        
    }