﻿/* .main .content{height: 500px;background: #f00;}测试用样式 */
*{margin: 0;padding: 0;}
    body{background: #F6F3F7}
        .middlebg{
            position: relative;
            width: 100%;
            height: 920px;
            background: url(../../img/frontend/help/banner01.png);
            background-size: 100% 100%;
        }
        .middletext{
            position: absolute;
            background: url(../img/middlecode.png);
            height: 608px;
            width: 338px;
            left: 27%;
        }
        .middlehuli{
             position: absolute;
             background: url(../img/banner-fox.png);
            height: 483px;
            width: 461px;
              left: 55%;
            top: 290px;
            z-index: 999999;
        }
        /*狐狸动画*/
        @-webkit-keyframes bounce-down {
         25% {-webkit-transform: translateY(-30px);}
         50%, 100% {-webkit-transform: translateY(0);}
         75% {-webkit-transform: translateY(30px);}
        }
        @keyframes bounce-down {
         25% {transform: translateY(-30px);}
         50%, 100% {transform: translateY(0);}
         75% {transform: translateY(30px);}
        }
        .animate-bounce-down{
            -webkit-animation: bounce-down 5s linear infinite;
            animation: bounce-down 5s linear infinite;
        }
        .middletltle{
              position: absolute;
            width: 1200px;
            height: 150px;
            /* border: 1px solid #000000; */
            border-radius: 25px;
            background: #fff;
            /* line-height: 150px; */
            text-align: center;
            font-size: 36px;
            top: 78%;
            left: 50%;
            margin-left: -601px;
            color: #444444;
            box-shadow: 2px 2px 10px #d7d7d7;
        }
        .middletltle .font1{
            margin-top: 30px;
            font-size: 36px;
            color: #444444;
            letter-spacing: 0;
            text-align: center;
        }
        .middletltle .font2{
            font-size: 26px;
            color: #444444;
            letter-spacing: 0;
        }
        .flexParent{
              display: box;              /* OLD - Android 4.4- */
              display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
              display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
              display: -ms-flexbox;      /* TWEENER - IE 10 */
              display: -webkit-flex;     /* NEW - Chrome */
              display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
        }
        .flexItem{
           -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
          -moz-box-flex: 1;         /* OLD - Firefox 19- */
          -webkit-flex: 1;          /* Chrome */
          -ms-flex: 1;              /* IE 10 */
          flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
        }
        .middllepart{
            height: 600px;
            margin-top: 160px;
        }
        .middllepart2{
            background: url(../img/bg-2.png);
            background-size: 100% 100%;
            padding: 100px 0;
        }
        .leftimg{
            width: 650px;
            height: 500px;
        }
         .leftimg img{
           float: right;
        }
        .rightimg img{
            float: left;
        }

        /*文字介绍*/
        .incloudtextmain{
           width: 500px;
           height:375px;
            margin-left: 60px;
            padding-top: 125px;
        }
        .incloudtextmain2{
            width: 500px;
            height:375px;
            float: right; 
            padding-top: 125px;
        }
        .incloudtext{
            font-size: 36px;
            color: #34AAF4;
            margin-bottom: 20px;
        }
        .inclouditem{
            margin-bottom: 15px;
            font-size: 26px;
            color: #444444 ;
        }
        .search {
            margin-top: 40px;
        }
        .search .text{
            font-size: 36px;
            color: #444444;
            margin-right:48px;
        }
        .input_box{
            position: relative;
            display: inline-block;
        }
        .search input{
            height:60px;
            width:364px;
            border-radius:30px;
            vertical-align: middle;
            outline: none;
            background: #ffffff;
            border: none;
        }
        .search .img_search{
            position: absolute;
            top: 9px;
            right: 27px;
        }
        .problem_list{
            padding-bottom: 72px;
        }
        .problem_list li{
            margin-top: 32px;
            margin-bottom: 8px;
        }
        .problem_list li p{
            font-size: 26px;
            color: #444444;
            margin-bottom: 20px;
        } 
        .solve_item .solve_box{
            width: 1000px;
            min-height: 138px;
            display: inline-block;
            background-color: #ffffff;
            margin-right: 40px;
            margin-left: 19px;
            border-radius: 20px;
            position: relative;
            padding: 16px 27px;
            font-size: 16px;
            color: #444444;
            line-height: 25px;
        }
        .solve_item .solve_box::after{
            content:'';
            border-width:20px 0px 20px 20px;
            border-style:solid;
            border-color:transparent transparent transparent #fff;/*透明 灰 透明 透明 */
            position: absolute;
            right: -20px;
            top: 40px;
        }
        .solve_item .solve_img{
            display: inline-block;
            width:129px;
            height: 129px;
            position: absolute;
        }
        .main{
            background: url('../../img/frontend/help/pipianswerbg.png') right bottom no-repeat;
            /* height: 1261px; */
            /* position: absolute; */
        }
        .mg20{
            margin-top: 20px;
        }