@charset "utf-8";

* {

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}



html,

body {

    width: 100%;

    height: 100%;

    background: transparent;

}



.DOP section {

    position: relative;

    width: 100%;

    min-width: 1200px;

    max-width: 1920px;

    font-size: 16px;

}

.container {

    position: relative;

    width: 1220px;

    margin: 0 auto;

}

h1,

h2,

h3,

h4,

h5,

h6 {

    font-weight: normal;

    line-height: 1.5;

}



h1 {

    font-size: 48px;

}



h2 {

    font-size: 40px;

}



h3 {

    font-size: 24px;

}

h4 {

    font-size: 20px;

}

p {

    font-size: 16px;

    line-height: 1.75;

}

.pc {

    display: block;

}

.m-mobile {

    display: none;

}

.fl {

    float: left;

}

.fr {

    float: right;

}

/*banner*/

#banner {

    position: relative;

    height: 500px;

    background: url("/software/DOP/images/banner.jpg") no-repeat center center;

    background-size: cover;

}

#banner h1 {

    color: #ffea04;

    padding-top: 160px;

    line-height: 50px;

    font-weight: bold;

}

#banner h1>span {

    font-size: 40px;

}

#banner .text {

    color: #fff;

    font-size: 24px;

    padding-top: 16px;

    font-weight: bold;

}

#banner .bframe {

    width: 180px;
    height: 40px;
    background: linear-gradient(-90deg, #3059F9 0%, #59A3F6 100%);
    border-radius: 6px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    border: none;
    padding: 0;
    margin-top: 20px;
    box-sizing: border-box;
}

#banner .bframe:hover {
    background: linear-gradient(to right, #ffb252 0%, #f18541 100%);
}

#banner .bframe a {

    color: #fff;

    font-size: 20px;

    line-height: 40px;



}

.titlss {

    float: right;

    width: 320px;

    height: 360px;

    background: #fff;

    box-shadow: 0 0 20px 2px rgba(153, 153, 153, .5);

    margin-top: 60px;

    opacity: .95;

}

.titlss .tith3 {

    font-size: 24px !important;

    color: #000;

    padding-top: 20px;

    padding-left: 40px;

    padding-bottom: 20px;

}

#titlsses {

    margin-left: 30px;

}



#titlsses .outline {

    position: relative;

    width: 260px;

    height: 40px;

    line-height: 40px;

    margin-bottom: 10px;

}

.titlss .inputTitle {

    position: absolute;

    top: 10px;

    left: 10px;

    /*z-index: -1;*/

    /*-webkit-transition: 0.5s;*/

    /*transition: 0.5s;*/

    color: #777;



}

.titlss input {

    display: block;

    width: 100%;

    height: 40px;

    padding: 14px 0 4px 10px;

    background: #f0f0f5;

    border: none;

    border-bottom: 1px solid #999;

    font-size: 18px;



}

.titlss #submit_a {
    font-size: 16px;
    margin: 0 auto;
    display: block;
    background: linear-gradient(to right, #ffb252 0%, #f18541 100%);
    width: 260px;
    padding: 7px 30px;
    margin-top: 10px;
    color: #fff;
    border-radius: 6px;
    height: 40px;
    cursor: pointer;
    line-height: 1;

}



.titlss .inputTitle {

    margin-bottom: 4px;

    font-size: 16px;

}



.titlss .inputTitle .requiredHint {

    margin-right: 4px;

    color: #fe5757;

}



.titlss .inputTitle .fillHint {

    color: #888;

    font-size: 14px;

}



.titlss .inputTitle .fa {

    display: none;

    margin-left: 4px;

    color: #ffa800;

    /*font-size: 14px;*/

}

.titlss .noInput .inputTitle .fa {

    display: inline-block;

}





.titlss .outline {

    position: relative;

    margin-bottom: 10px;

}



.titlss .inputTitle.focus {

    top: 0;

    font-size: 0;

    color: #3798e4;

}



.titlss .inputTitle .focus .requiredHint {

    color: #3798e4;

}



.titlss input:focus {

    outline: none;

}



.titlss input.noInput+.inputTitle .fa {

    display: inline-block;

}

/*困境*/

#dilemma {

    width: 100%;

    margin: 0 auto;

    position: relative;

    text-align: center;

    overflow: hidden;

    background: #cdebf6;

}

#dilemma h2,
#benefit h2,
#panel h2,

#run h2,
#multiport h2,
#discussion h2 {

    color: #333;

    padding: 60px 0 30px;

}

#dilemma img {

    margin: 75px auto 90px;

}

/*效益*/

#benefit {

    width: 100%;

    margin: 0 auto;

    position: relative;

    text-align: center;

    overflow: hidden;

}

#benefit ul {

    width: 100%;

    position: relative;

    margin: 55px auto 20px;

}

#benefit ul li {

    float: left;

    width: 246px;

    height: 400px;

    margin-right: 72px;

}

#benefit ul li:last-child {

    margin-right: 0;

}

#benefit ul li .boldh2 {

    font-weight: bold;

    padding: 15px 0;

    line-height: 30px;

    font-size: 30px;

}

#benefit ul li>P {

    text-align: justify;

}

#benefit ul li:first-child>a img:hover {

    content: url("/software/DOP/images/h-benefit1.png");

    cursor: pointer;

}

#benefit ul li:nth-child(2)>a img:hover {

    content: url("/software/DOP/images/h-benefit2.png");

    cursor: pointer;

}

#benefit ul li:nth-child(3)>a img:hover {

    content: url("/software/DOP/images/h-benefit3.png");

    cursor: pointer;

}

#benefit ul li:last-child>a img:hover {

    content: url("/software/DOP/images/h-benefit4.png");

    cursor: pointer;

}

/*面板*/

#panel {

    position: relative;

    height: 980px;

    background: url("/software/DOP/images/panel.jpg") no-repeat center center;

    background-size: cover;

    text-align: center;

    overflow: hidden;

}

#panel .tabs {

    width: 100%;

    margin-top: 30px;

    text-align: center;

}

#panel .tabs .titles {

    display: inline-block;

}

#panel .tabs .titles>li {

    float: left;

    width: 210px;

    height: 45px;

    margin: 0 20px;

    background: #aeaeae;

    border-radius: 30px;

    cursor: pointer;

}

#panel .tabs .titles>li>p {

    line-height: 45px;

    color: #fff;

}

#panel .tabs .titles .on {

    background: #08a8c5;

}

#panel .tabs .tab_img {

    width: 873px;

    height: 412px;

    margin: 0 auto;

    margin-top: 48px;

    overflow: hidden;

}

/*6大管理*/

#run {

    width: 100%;

    margin: 0 auto;

    position: relative;

    text-align: center;

    overflow: hidden;

}

#run img {

    margin: 70px auto;

}

.buttonM {

    text-align: center;

    margin: 0 auto;

    margin-bottom: 70px;

    position: relative;

    overflow: hidden;

}

.buttonM .btn_m {

    display: inline-block;

    width: 240px;

    height: 40px;

    line-height: 40px;

    border-radius: 5px;

    border: 1px solid #016c80;

    margin: 0 20px;

}

.buttonM .btn_m a {

    display: block;

    color: #016c80;

    text-decoration: none;

}

.buttonM .btn_m a:hover {

    color: #fff;

    background: #016c80;

}



/*多終端支持*/

#multiport {

    position: relative;

    height: 480px;

    background: url("/software/DOP/images/mul1.jpg") no-repeat center center;

    background-size: cover;

    overflow: hidden;

}

#multiport ul {

    margin-top: 15px;

}

#multiport ul li {

    margin-bottom: 50px;

}

.txtp {

    display: inline-block;

    margin-left: 15px;

}

.pbold {

    color: #17adc8;

    font-weight: bold;

}



/*议题*/

#discussion {

    position: relative;

    height: 605px;

    background: url("/software/DOP/images/discussionbg.jpg") no-repeat center center;

    background-size: cover;

    overflow: hidden;

}

#discussion img {

    margin-top: 92px;

}

#discussion p {

    color: #333;

}

/*#discussion h2{*/

/*padding-right: 60px;*/

/*}*/

#discussion .buttonM {

    float: left;

}

#discussion .buttonM .btn_m {

    margin: 60px auto 0;

}



/*移动端*/



@media (max-width:768px) {

    .DOP section {

        min-width: 100%;

        max-width: 100%;

    }

    .container {

        width: 100%;

    }

    h1 {

        font-size: 36px;

    }



    h2 {

        font-size: 28px;

    }



    h3 {

        font-size: 22px;

    }

    h4 {

        font-size: 18px;

    }

    p {

        font-size: 16px;

        line-height: 1.75;

        text-align: justify;

    }

    .pc {

        display: none;

    }

    .m-mobile {

        display: block;

    }



    #banner h1 {

        font-size: 40px;

        padding-left: 20px;

        padding-top: 160px;

    }

    #banner h1>span {

        font-size: 30px;

    }

    #banner .text {

        font-size: 20px;

        padding-left: 20px;

    }

    #banner .bframe {

        display: none;

    }

    .titlss {

        float: none;

        margin: 40px auto;

    }

    #dilemma h2,
    #benefit h2,
    #run h2,
    #multiport h2,
    #discussion h2 {

        text-align: justify;

        padding-left: 20px;

        padding-right: 20px;

        padding-top: 35px;

        padding-bottom: 20px;

    }

    #dilemma img {

        margin: 20px auto;

    }

    #dilemma p,
    #benefit p,
    #panel p,
    #run p {

        padding: 0 20px;

    }





    #benefit p br {

        display: none;

    }

    #benefit ul {

        width: 100%;

        margin: 5% auto;

    }

    #benefit ul li {

        display: inline-block;

        width: 50%;

        height: auto;

        margin: 10% auto;

        text-align: center;

    }

    #benefit ul li:last-child {

        margin-right: 0;

    }

    #benefit ul li:first-child>a img:hover {

        content: url("/software/DOP/images/mh-benefit1.png");

    }

    #benefit ul li:nth-child(2)>a img:hover {

        content: url("/software/DOP/images/mh-benefit2.png");

    }

    #benefit ul li:nth-child(3)>a img:hover {

        content: url("/software/DOP/images/mh-benefit3.png");

    }

    #benefit ul li:last-child>a img:hover {

        content: url("/software/DOP/images/mh-benefit4.png");

    }

    #benefit ul li .boldh2 {

        font-size: 22px;

        /*letter-spacing: -2px;*/

        text-align: center;

    }

    #benefit ul li>p {

        padding: 0 5%;

    }

    #benefit h2 br {

        display: none;

    }

    #panel {

        height: 530px;

        background: url("/software/DOP/images/mpanel.jpg") no-repeat center center;

        background-size: cover;

    }

    #panel .tabs {

        margin: 0 auto;

    }

    #panel .tabs .titles {

        width: 90%;

        margin: 0 auto;

    }

    #panel .tabs .titles li {

        display: inline-block;

        width: 32%;

        height: 26px;

        margin: 0 auto;

        margin-right: 1%;

        margin-bottom: 1%;

        text-align: center;

        letter-spacing: -1px;

    }

    #panel .tabs .titles>li>p {

        text-align: center;

        line-height: 26px;

        color: #fff;

        font-size: 15px;

        padding: 0;

    }

    #panel .tabs .tab_img {

        width: 100%;

        height: 145px;

        overflow: hidden;

        margin: 0 auto;

        margin-top: 9%;

    }



    #run h2 {

        text-align: center;

    }

    #run img {

        margin-top: 5%;

        margin-bottom: 5%;

    }

    #run ul {

        margin: 0 5%;

        margin-bottom: 5%;

    }

    #run ul li {

        margin-bottom: 12%;

    }

    #run ul li h4 {

        color: #17adc8;

        text-align: left;

        font-weight: bold;

    }

    #run ul li>p {

        padding: 0;

    }

    .buttonM {

        margin-bottom: 50px;

    }

    .buttonM .btn_m {

        margin-bottom: 8%;

    }

    #multiport {

        height: 550px;

        background: url("/software/DOP/images/mmul1.jpg") no-repeat center center;

        background-size: cover;

    }

    #multiport ul {

        overflow: hidden;

        margin: 0 5%;

    }

    #multiport ul li {

        overflow: hidden;

        margin-bottom: 15%;

    }

    .txtp {

        position: absolute;

        margin-left: 0;

    }

    .pbold {

        padding: 0;

        padding-left: 2%;

    }

    #multiport ul li p {

        padding: 0 5% 0 2%;

    }

    #discussion {

        height: 545px;

        background: url("/software/DOP/images/mdiscussionbg.jpg") no-repeat center center;

        background-size: cover;

        text-align: center;

    }

    #discussion img {

        margin-top: 5%;

    }

    #discussion h2 {

        text-align: center;

    }

    #discussion p {

        text-align: center;

    }

    #discussion .buttonM {

        float: none;

        margin-top: -8%;

    }

}

@media (max-width:360px) {

    #panel .tabs .titles li {

        width: 45%;

    }

    #panel .tabs .tab_img {

        margin-top: 2%;

    }

}