@charset "utf-8";

/*
 
 * 17素材vip建站专区模块代码
 * 详尽信息请看官网：http://www.17sucai.com/pins/vip
 *
 * Copyright , 温州易站网络科技有限公司版权所有
 * 图片不能商用，代码可商用。
 
 * 请尊重原创，未经允许请勿转载。
 * 在保留版权的前提下可应用于个人或商业用途
 
*/.imt-loading-indicator {
	vertical-align: middle !important;
	width: 10px !important;
	height: 10px !important;
	display: inline-block !important;
	margin: 0 4px !important;
	border: 2px rgba(221, 244, 255, 0.6) solid !important;
	border-top: 2px rgba(0, 0, 0, 0.375) solid !important;
	border-left: 2px rgba(0, 0, 0, 0.375) solid !important;
	border-radius: 50% !important;
	padding: 0 !important;
	-webkit-animation: imt-loading-animation 0.6s infinite linear !important;
	animation: imt-loading-animation 0.6s infinite linear !important;
}
 @-webkit-keyframes imt-loading-animation {
 from {
 -webkit-transform: rotate(0deg);
}
 to {
 -webkit-transform: rotate(359deg);
}
}
 @keyframes imt-loading-animation {
 from {
 transform: rotate(0deg);
}
 to {
 transform: rotate(359deg);
}
}
.se_imt_html {
	height: 100%;
}
.se_imt_html body {
	position: relative;
	min-height: 100%;
	top: 40px;
}
body{ background: #777}
*{margin:0;padding:0;box-sizing:border-box;font-family:"微软雅黑"}
a{text-decoration:none}
ul{list-style:none}
.card-fouth{padding:22px 0 88px;}
.card-fouth:after{ width: 100%; height: 2px; background: #fff; content:""; position: absolute; top:319px }
.card-fouth .sub-title{margin-bottom:32px;text-align:center;font-size:40px;color:#333}
.card-fouth .desc.desc-list{font-size:0;color:#3a3a3a;font-weight:200;width:1000px;margin:0 auto;margin-bottom:45px;white-space:nowrap;overflow:hidden;text-align:center}
/*顶部分类*/
.card-fouth .industry{font-size:20px;color:#999;padding:15px 0;display:inline-block;width:220px}
.card-fouth .industry.first{padding-left:0}
.card-fouth .industry.last{padding-right:0}
.card-fouth .industry.active{padding-bottom:14px; text-align: center}
.card-fouth .industry span{font-family:PingFang SC;font-weight:400; color: #fff}
.card-fouth .industry.active span{ font-weight: bold; }
.yuan{ width: 14px; height: 14px; background: #fff; border-radius: 50%; display: block; margin: 0 auto; margin-top: 10px}
.card-fouth .industry.active .yuan{width: 14px; height: 14px; background: #fd9d15; border: 2px solid #fff; z-index: 99; position: relative}




/*内容*/
.card-fouth .case-container{position:relative;width:90%;margin:0 auto;height:70vh; background: #fff; margin-left: 10%; box-shadow: 0 5px 35px rgba(0,0,0,.3); }
.card-fouth .case-panel{position:absolute;z-index:1;opacity:0;overflow:hidden; }
.card-fouth .case-panel.active{z-index:100;opacity:1;-webkit-transition:all .2s ease-out .1s;transition:all .2s ease-out .1s; display: flex; height: 100%; justify-content:  space-between; width: 100%}
.card-fouth .case-preview{display:inline-block; position:relative;left:0px;z-index:200;padding: 2% 5%}
/*内容左侧*/
.card-fouth .case-left{display:inline-block;vertical-align:top; height: 100%}
.card-fouth .case-left img{height: 100%}
.card-fouth .phone-framework{z-index:102;position:relative}
.card-fouth .case-left .phone-image-cover{position:absolute;width:197px;height:426px;top:30px;left:70px;z-index:101;background-color:rgba(0,0,0,.6);text-align:center;display:block}
.card-fouth .case-left .phone-image-cover img{width:118px;margin-top:150px;z-index:103}
.card-fouth .case-left .phone-image-cover div{margin-top:10px;color:#ffffff;font-size:13px}
.card-fouth .case-left .phone-image-cover.hidden{display:none}
.card-fouth .case-left .phone-image{position:absolute;width:197px;top:30px;left:70px;z-index:1;opacity:0}
.card-fouth .case-left .phone-image.active{z-index:100;opacity:1;-webkit-transition:all .2s ease-out .1s;transition:all .2s ease-out .1s}
/*内容右侧*/
.card-fouth .case-head{font-size:36px;color:#000;margin-bottom:20px;font-weight:bold; background: url("../images/line21.jpg") no-repeat left bottom; padding-bottom: 10px}
.card-fouth .case-head span{font-size:22px;color:#000;margin-bottom:20px;font-weight:bold}

.card-fouth .case-text{font-size:18px;color:#141414;padding-bottom:22px;height:107px}
.card-fouth .case-text P{font-size:18px;color:#141414;padding-bottom:22px; text-align: left; }


.card-fouth .case-content{width:476px;margin-top:10px}
.card-fouth .case-icon-list{font-size:0;width:476px}
.card-fouth .case-icon-list img{margin-top:35px;margin-right:30px;display:inline-block;width:117px;border-radius:20px}
.card-fouth .case-content img{margin-top:15px;width:576px;height:1px;opacity:0.3}
.card-fouth .case-icon-list .image-hover{width:75px}
.card-fouth .case-icon-list img.active{border:2px solid #1696ff}
.card-fouth .case-icon-list img.last{margin-right:0}
.card-fouth .industry-tab-line{height:2px;background:#2267fa;top:164px;position:absolute;-webkit-transition:all .3s;transition:all .3s}



/*--------------------------------------------------------------------------------------------------------------------------------------550--*/
@media all and (max-width:1650px){  
	
.card-fouth .case-container{height:80vh; }
	.card-fouth .case-text P{font-size:16px;color:#141414;padding-bottom:22px; text-align: left}
	
}


/*--------------------------------------------------------------------------------------------------------------------------------------550--*/
@media all and (max-width:850px){  
	
	
	.bg_2 h3 {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
}.bg_2 p {
    line-height: 1;
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    text-align: center;
}.card-fouth .desc.desc-list {
    font-size: 0;
    color: #3a3a3a;
    font-weight: 200;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
}.card-fouth .industry {
    font-size: 14px;
    color: #999;
    padding: 0px 0;
    display: inline-block;
    width: 25%;
    line-height: 1.3;
    font-family:Arial
}
	
	.card-fouth .industry.active .yuan {
    width: 11px;
    height: 11px;
    background: #fd9d15;
    border: 1px solid #fff;
    z-index: 99;
    position: relative;
}.yuan {
    width: 11px;
    height: 11px;
    background: #fff;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    margin-top: 10px;
}
	.card-fouth:after {
    width: 100%;
    height: 1px;
    background: #fff;
    content: "";
    position: absolute;
    top: 174px;
}
	.card-fouth .case-container {
    position: relative;
    width: 90%;
    margin: 0 auto;
    height: 70vh;
    background: #fff;
    margin-left: 5%;
    box-shadow: 0 5px 35px rgba(0, 0, 0, .3);
}
	.card-fouth .case-head {
    font-size: 18px;
    color: #000;
    margin-bottom: 10px;
    font-weight: bold;
    background: url(../images/line21.jpg) no-repeat left bottom;
    padding-bottom: 5px;
}
	.card-fouth .case-head span {
    font-size: 18px;
    color: #000;
    margin-bottom: 20px;
    font-weight: bold;
}
	
	
	.card-fouth .case-panel.active{flex-wrap: wrap ;}
	
	.card-fouth .case-preview {
    display: inline-block;
    position: relative;
    left: 0px;
    z-index: 200;
    padding: 0;
	}.card-fouth .case-panel.active{ padding: 4%}
	
	
	.card-fouth .case-icon-list {
    font-size: 0;
    width: 100%;
}.card-fouth .case-panel.active {
    z-index: 100;
    opacity: 1;
    -webkit-transition: all .2s ease-out .1s;
    transition: all .2s ease-out .1s;
    display: flex
;
    height: 100%;
    justify-content: space-between;
    width: 100%;
}.card-fouth .case-content {
    width: 100%;
    margin-top: 10px;
}    .card-fouth .case-preview {
        display: inline-block;
        position: relative;
        left: 0px;
        z-index: 200;
        padding: 0;
        width: 100%;
    }    .card-fouth .case-text P {
        font-size: 14px;
        color: #141414;
        padding-bottom: 22px;
        text-align: left;
        line-height: 1.5;
    }.card-fouth .case-text {
    font-size: 18px;
    color: #141414;
    padding-bottom: 22px;
    height: auto;
}
	.more2 {
    width: 106px;
    height: 30px;
    background: #fd9d15;
    text-align: center;
    line-height: 26px;
    border-radius: 24px;
    margin-top: 0px;
}.more2 a {
    color: #fff;
    font-size: 12px;
}.card-fouth .case-left {
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: 100%;
}.card-fouth .case-left img {
    height: auto;
    width: 100%;
}
}