.section
{
    margin: 0 auto;
}
.section .container
{
    width: 1200px;
    border: solid 1px #eee;
    height: 800px;
}
.section .mod-title
{
    padding-bottom: 35px;
    text-align: center;
    color: #333;
}
.section .mod-title h2
{
    font-size: 36px;
    margin-bottom: 17px;
}
.section .mode-list
{
    height: 798px;
    background: #fff;
}
.section .mode-list li:first-child
{
    animation: fadeinB 1s;
}
.section .mode-list li:nth-child(2)
{
    animation: fadeinB 1.5s;
}
.section .mode-list li:nth-child(3)
{
    animation: fadeinB 2s;
}
.section .mode-list li:nth-child(4)
{
    animation: fadeinB 2.5s;
}
.section .mode-list .mode-item
{
    width: 226px;
    height: 798px;
    text-align: center;
    float: left;
    overflow: hidden;
    background: #fff;
    transition: width 1s;
}
.section .mode-list .mode-wrap
{
    width: 746px;
    height: 798px;
}
.section .mode-list .mode-view
{
    float: left;
    width: 226px;
    height: 798px;
    border-right: 1px solid #eee;
    opacity: 1;
    padding: 70px 43px;
}
.section .mode-list .mode-view h3
{
    font-size: 30px;
    padding-top: 52px;
    padding-bottom: 11px;
}
.section .mode-list .mode-view h4
{
    font-size: 14px;
    color: #888;
}
.section .mode-list .mode-view i
{
    display: block;
    width: 120px;
    height: 90px;
    margin: 80px auto 105px;
}
.section .mode-list .mode-view ul
{
    padding-left: 20px;
}
.section .mode-list .mode-view li
{
    float: left;
    width: 90px;
    height: 30px;
    line-height: 30px;
    margin: 0 5px 10px 5px;
    background: #ededed;
}
.section .mode-list .mode-detail
{
    float: left;
    color: #fff;
    width: 519px;
    height: 798px;
    opacity: 0;
    border-right: 1px solid #eee;
    padding: 70px 43px;
}
.section .mode-list .mode-detail .detail-left, .section .mode-list .mode-detail .detail-right
{
    width: 271px;
    height: 798px;
}
.section .mode-list .mode-detail .detail-left
{
    float: left;
    overflow: hidden;
}
.section .mode-list .mode-detail .detail-left i
{
    display: block;
    width: 120px;
    height: 90px;
    margin: 112px auto 70px;
}
.section .mode-list .mode-detail .detail-left h3
{
    font-size: 30px;
    margin-bottom: 19px;
}
.section .mode-list .mode-detail .detail-left h4
{
    font-size: 14px;
    padding: 0 25px;
    line-height: 1.7;
}
.section .mode-list .mode-detail .detail-right
{
    float: left;
}
.section .mode-list .mode-detail .detail-right ul
{
    padding: 20px 20px 0 30px;
}
.section .mode-list .mode-detail .detail-right li
{
    margin-bottom: 16px;
}
.section .mode-list .mode-detail .detail-right li h3
{
    width: 83px;
    height: 28px;
    border: 1px solid #fff;
    line-height: 28px;
    margin-bottom: 11px;
    font-size: 16px;
}
.section .mode-list .mode-detail .detail-right li p
{
    text-align: left;
    line-height: 1.7;
    font-size: 14px;
}
.section .mode-list .mode-detail .detail-right .get
{
    width: 100px;
    height: 31px;
    line-height: 31px;
    padding-left: 15px;
    color: #00ce52;
    display: block;
    margin-left: 30px;
    font-size: 16px;
    background: #fff url(../image/fd_icon6.png) no-repeat 84px center;
    text-align: left;
}
.section .mode-list .mode-item-1 .mode-view i
{
    background: url(../image/fd_icon6.png) no-repeat -120px 0;
}
.section .mode-list .mode-item-1 .mode-detail .detail-left i
{
    background: url(../image/fd_icon6.png) no-repeat 0 0;
}
.section .mode-list .mode-item-2 .mode-view i
{
    background: url(../image/fd_icon6.png) no-repeat -120px 0;
}
.section .mode-list .mode-item-2 .mode-detail .detail-left i
{
    background: url(../image/fd_icon6.png) no-repeat 0 0;
}
.section .mode-list .mode-item-3 .mode-view i
{
    background: url(../image/fd_icon6.png) no-repeat -120px 0;
}
.section .mode-list .mode-item-3 .mode-detail .detail-left i
{
    background: url(../image/fd_icon6.png) no-repeat 0 0;
}
.section .mode-list .mode-item-4 .mode-view i
{
    background: url(../image/fd_icon6.png) no-repeat -120px 0;
}
.section .mode-list .mode-item-4 .mode-detail .detail-left i
{
    background: url(../image/fd_icon6.png) no-repeat 0 0;
}
.section .mode-list .mode-item.active
{
    width: 520px;
}
.section .mode-list .mode-item.active .mode-wrap
{
    margin-left: -225px;
}
.section .mode-list .mode-item.active .mode-view
{
    opacity: 0;
}
.section .mode-list .mode-item.active .mode-detail
{
    opacity: 1;
}
@media(min-width: 1600px)
{
    .section .container
    {
        width: 1440px;
        height: 800px;
    }
    .section .mode-list .mode-item
    {
        width: 272px;
        height: 798px;
        text-align: center;
        float: left;
        overflow: hidden;
        background: #fff;
        transition: width 1s;
    }
    .section .mode-list .mode-wrap
    {
        width: 894px;
        height: 798px;
    }
    .section .mode-list .mode-view
    {
        float: left;
        width: 272px;
        height: 798px;
        border-right: 1px solid #eee;
        opacity: 1;
        padding: 70px 43px;
    }
    .section .mode-list .mode-view h3
    {
        font-size: 30px;
        padding-top: 52px;
        padding-bottom: 11px;
    }
    .section .mode-list .mode-view h4
    {
        font-size: 14px;
        color: #888;
    }
    .section .mode-list .mode-view i
    {
        display: block;
        width: 120px;
        height: 90px;
        margin: 80px auto 105px;
    }
    .section .mode-list .mode-view ul
    {
        padding-left: 20px;
    }
    .section .mode-list .mode-view li
    {
        float: left;
        width: 90px;
        height: 30px;
        line-height: 30px;
        margin: 0 5px 10px 5px;
        background: #ededed;
    }
    .section .mode-list .mode-detail
    {
        width: 621px;
        height: 798px;
        padding: 70px 43px;
    }
    .section .mode-list .mode-detail .detail-left, .section .mode-list .mode-detail .detail-right
    {
        width: 271px;
        height: 798px;
    }
    .section .mode-list .mode-detail .detail-left
    {
        float: left;
        overflow: hidden;
    }
    .section .mode-list .mode-detail .detail-left i
    {
        display: block;
        width: 120px;
        height: 90px;
        margin: 112px auto 70px;
    }
    .section .mode-list .mode-detail .detail-left h3
    {
        font-size: 30px;
        margin-bottom: 19px;
    }
    .section .mode-list .mode-detail .detail-left h4
    {
        font-size: 14px;
        padding: 0 25px;
        line-height: 1.7;
    }
    .section .mode-list .mode-detail .detail-right
    {
        float: left;
    }
    .section .mode-list .mode-detail .detail-right ul
    {
        padding: 20px 20px 0 30px;
    }
    .section .mode-list .mode-detail .detail-right li
    {
        margin-bottom: 16px;
    }
    .section .mode-list .mode-detail .detail-right li h3
    {
        width: 83px;
        height: 28px;
        border: 1px solid #fff;
        line-height: 28px;
        margin-bottom: 11px;
        font-size: 16px;
    }
    .section .mode-list .mode-detail .detail-right li p
    {
        text-align: left;
        line-height: 1.7;
        font-size: 14px;
    }
    .section .mode-list .mode-detail .detail-right .get
    {
        width: 100px;
        height: 31px;
        line-height: 31px;
        padding-left: 15px;
        color: #00ce52;
        display: block;
        margin-left: 30px;
        font-size: 16px;
        background: #fff url(../image/fd_icon6.png) no-repeat 84px center;
        text-align: left;
    }
    .section .mode-list .mode-item.active
    {
        width: 622px;
    }
    .section .mode-list .mode-item.active .mode-wrap
    {
        margin-left: -271px;
        opacity: 1;
    }
}