@media(max-width: 1200px)
{
    .flexslider
    {
        height: calc(100vw * 302 / 512 + 100px);
        margin: 0 auto;
        width: 100%;
        overflow: hidden;
        zoom: 1;
    }
    .flexslider .slides
    {
        position: relative;
        z-index: 99;
    }
    .flexslider .slides li
    {
        float: left;
        width: 100vw;
        padding: 0 15px;
    }
    .flex-direction-nav li
    {
        width: 40px;
        height: 40px;
        overflow: hidden;
        margin: -20px 0 0;
        display: block;
        position: absolute;
        top: 50%;
        z-index: 199;
    }
    .flex-direction-nav li a
    {
        width: 40px;
        height: 40px;
        overflow: hidden;
        line-height: 99em;
        display: block;
        z-index: 10;
        cursor: pointer;
        -webkit-transition: all .3s ease;
        border-radius: 35px;
    }
    .flex-direction-nav li.flex-next
    {
        right: 0;
    }
    .flex-direction-nav li.flex-next a
    {
        background: url(/themes/pc/public/static/images/ind_arrow-02.png) no-repeat;
        background-size: 40px 40px;
    }
    .flex-direction-nav li.flex-prev
    {
        left: 0;
    }
    .flex-direction-nav li.flex-prev a
    {
        background: url(/themes/pc/public/static/images/ind_arrow.png) no-repeat;
        background-size: 40px 40px;
        left: 0;
    }
    .flexslider:hover .flex-next
    {
        opacity: .8;
        filter: alpha(opacity=25);
    }
    .flexslider:hover .flex-prev
    {
        opacity: .8;
        filter: alpha(opacity=25);
    }
    .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover
    {
        opacity: 1;
        filter: alpha(opacity=50);
    }
    .flex-control-nav
    {
        width: 100%;
        text-align: center;
    }
    .flex-control-nav li
    {
        margin: 0 2px;
        display: inline-block;
        zoom: 1;
        *display: inline;
    }
    .flex-control-paging li a
    {
        display: inline-block;
        width: 12px;
        height: 5px;
        margin: 0 1px;
        text-indent: -999px;
        border: 1px solid #aaa;
        border-radius: 4px;
        cursor: pointer;
        background-color: #fff;
    }
    .flex-control-paging li a.flex-active, .flex-control-paging li.active a
    {
        margin: 0 1px;
        width: 12px;
        height: 5px;
        border: 1px solid #1564ff;
        background-color: #1564ff;
    }
    .flexslider .slides a img
    {
        border-radius: 5px;
        width: 100%;
        display: block;
    }
    #product_tabs .slides li
    {
        padding: 0;
    }
    #product_tabs .slides a img
    {
        border-radius: 0;
    }
    #proCtrl
    {
        position: absolute;
        width: 100%;
        margin-top: -20px;
        z-index: 199;
        top: 50%;
    }
}
@media(min-width: 1200px)
{
    .flexslider
    {
        margin: 0 auto;
        position: absolute;
        width: 1920px;
        height: 700px;
        overflow: hidden;
        margin-left: -960px;
        left: 50%;
        zoom: 1;
    }
    .flexslider .slides li
    {
        float: left;
        width: 1920px;
        height: 100%;
    }
    .flex-direction-nav a
    {
        width: 40px;
        height: 40px;
        line-height: 99em;
        overflow: hidden;
        margin: -20px 0 0;
        display: block;
        position: absolute;
        top: 50%;
        z-index: 10;
        cursor: pointer;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transition: all .3s ease;
        border-radius: 35px;
    }
    .flex-direction-nav .flex-next
    {
        background: url(/themes/pc/public/static/images/ind_arrow-02.png) no-repeat;
        background-size: 40px 40px;
        right: 395px;
    }
    .flex-direction-nav .flex-prev
    {
        background: url(/themes/pc/public/static/images/ind_arrow.png) no-repeat;
        background-size: 40px 40px;
        left: 395px;
    }
    .flexslider:hover .flex-next
    {
        opacity: .8;
        filter: alpha(opacity=25);
    }
    .flexslider:hover .flex-prev
    {
        opacity: .8;
        filter: alpha(opacity=25);
    }
    .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover
    {
        opacity: 1;
        filter: alpha(opacity=50);
    }
    .flex-control-nav
    {
        width: 1920px;
        position: absolute;
        bottom: 10px;
        text-align: center;
    }
    .flex-control-nav li
    {
        margin: 0 2px;
        display: inline-block;
        zoom: 1;
        *display: inline;
    }
    .flex-control-paging li a
    {
        background: url(../image/dot.png) no-repeat 0 -16px;
        display: block;
        height: 16px;
        overflow: hidden;
        text-indent: -99em;
        width: 16px;
        cursor: pointer;
    }
    .flex-control-paging li a.flex-active, .flex-control-paging li.active a
    {
        background-position: 0 0;
    }
    .flexslider .slides a img
    {
        width: 1920px;
        height: 700px;
        display: block;
    }
}
@media(min-width: 1600px)
{
    .flex-direction-nav .flex-next
    {
        right: 105px;
    }
    .flex-direction-nav .flex-prev
    {
        left: 105px;
    }
}