@charset "utf-8";



/*
 * design_view
 * */
.design_view{
    width: 100%;padding-bottom: 45%;height: 0;
    background-color: #fff;
    overflow: hidden;
    position: relative;
}
.design_view .view_dl{
    position: absolute;top:0;left:0;
    width: 100%;height: 100%;
}

.design_view .view_pics{float: left;width: 55%;height: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.design_view .view_pics img{width: auto;max-width:100%;height: 100%;}
.design_view .view_body{float: right;width: 45%;padding:0 15px;height:100%;
    overflow-x:hidden;
    overflow-y:auto;
}
.design_view .view_title{font-size: 18px;padding:10px 0;}
.design_view .view_base{}
.design_view .view_base .dl{position: relative;margin-bottom: 5px;}
.design_view .view_base .dt{position: absolute;top:0;left:0;width: 70px;}
.design_view .view_base .dd{margin-left: 80px;}

.design_view .view_box{display: none;border-top: 1px solid #ddd;}
.design_view .view_box .tit{font-size:16px;font-weight: bold;margin: 10px 0;}
.design_view .view_box .items{}
.design_view .view_box .item{margin-bottom: 10px;position: relative;}
.design_view .view_box .pic{float: left;width: 40%;}
.design_view .view_box .pic img{max-width: 100%;height: auto;}
.design_view .view_box .dl{float: right;width: 56%;}
.design_view .view_box .dt{font-size:16px;margin-bottom: 10px;}
.design_view .view_box .dd{font-size: 12px;color: #666;min-height: 20px;}
.design_view .view_box .dd img{max-width: 100%;}
.design_layer{background:none!important;box-shadow:none;}
.design_layer .layui-layer-content{overflow:hidden;}

@media (max-width: 640px) {
    .design_layer{background:#fff!important;}
    .design_layer .layui-layer-content{overflow:auto;}

    .design_view{
        padding-bottom:0;
        height: auto;
    }

    .design_view .view_dl{
        position: relative;
        max-height: none;
    }

    .design_view .view_pics,
    .design_view .view_body{float:none;width: 100%;}
    .design_view .view_body{padding:10px;min-height: auto;height: auto;}

    .design_view .view_pics img{height: auto;}
}

/*
 * view_banner
 * */
.view_banner{width:100%;overflow:hidden;position:relative;}
.view_banner .iframe{width: 100%;margin-bottom: 40%;}
.view_banner .iframe .con{position: absolute;top:0;left:0;width: 100%;height: 100%;}
.view_banner iframe{width: 100%;height: 100%;}

@media (max-width: 640px) {
    .view_banner .iframe {
        width: 100%;
        margin-bottom: 60%;
    }
}

.view_banner .dl{width:100%;position:relative;height:0;font-size:0;line-height:0;overflow: hidden;padding-bottom: 38%;}
.view_banner .pic{position:absolute;width:100%;height:100%;}
.view_banner img{width: 100%;height: 100%;}


@media (max-width: 640px) {
    .view_banner .dl{padding-bottom: 80%;}
    .view_banner .pic{}
    .view_banner .pic img{
        position: absolute;
        height: 100%;
        width: auto;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}


/*
 * view_prds_layer
 * */
.view_prds_layer{}
.view_prds_layer .con{margin: 10px;}
.view_prds_layer .pic{float: left;width: 50%;text-align: center;}
.view_prds_layer .pic img{max-width: 100%;height: auto;}
.view_prds_layer .txt{float: right;width: 50%;padding:0 15px;}
.view_prds_layer .dt{font-size: 16px;font-weight: bold;margin-bottom: 10px;}
.view_prds_layer .dd{margin-bottom: 10px;}

@media (max-width: 640px) {
    .view_prds_layer .txt{padding:10px;min-height: auto;height: auto;}
}