@charset "utf-8";
/* CSS Document */

/*PC端banner*/
.ny_ban{ position:relative; width:100%; overflow:hidden; max-width:1920px; margin:0 auto; height: 360px;}
.ny_ban:after{ position: absolute; content: ""; top: 0%; left: 0%; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}
.ny_ban img{ width: 100%; filter:blur(5px); transform: scale(1.5);}
.div_title{ width: 1200px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9;}
.div_title p{ font-size: 100px; font-weight: bold; line-height: 1em; -webkit-text-stroke: 1px #999; -webkit-text-fill-color: transparent;}
.div_title h2{ font-size: 56px; line-height: 1em; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); letter-spacing: 0.2em; text-indent: 0.2em; color: #f2f2f2;}

.cases_details{ background: #f2f2f2; padding: 60px 0px; width: 100%; overflow: hidden;}

.cases_details_remark{ width: 1200px; margin: 0 auto 40px; background: #fff; padding:24px 30px; box-sizing: border-box;}
.cases_details_remark p{ font-size: 14px; line-height: 24px;}

.cases_details_height{ max-height: 192px; overflow: hidden;}
.a_readmore{ font-size: 14px;line-height: 24px;color: #fff;display: inline-flex; align-items: center; cursor: pointer; background: #e60012;padding: 8px 16px;margin-top: 12px;}
.a_readmore b{ display: block; width: 14px; height: 2px; background: #fff; margin-left: 8px; position: relative;}
.a_readmore b:after{ position: absolute; content: ""; width: 2px; height: 14px; display: block; background: #fff; top: 50%; left: 50%; margin-left:-1px; margin-top:-7px;}

.cases_details_height_jq{ max-height: inherit!important;}
.a_readmore_jq b:after{ display: none!important;}

.cases_details .cases_details_con{ width: 1200px; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between;}
.details_con_l{ width: 940px;}
.details_con_l .web_cases{ padding: 70px 70px 40px; background:linear-gradient(to bottom,#facc2e 0%,#facc2e 70%,#fff 70%,#fff 100%);}
.details_con_l .web_cases .web_cases_con{position: relative;border-bottom: 32px solid #e2e2e2;border-radius: 0px 0px 8px 8px;transition: all 0.5s;}
.details_con_l .web_cases .web_cases_con .web_cases_con_img{border: 12px solid #353535;border-radius: 8px 8px 0px 0px;height: 360px;overflow: hidden; background: #fff;}
/* .details_con_l .web_cases .web_cases_con .web_cases_con_img img{ width: 100%;} */
.details_con_l .web_cases .web_cases_con svg{ width: 16px; height: 16px; display: block; position: absolute; bottom: -28px; left: 50%; margin-left: -6px;}
.details_con_l .web_cases .web_cases_con svg path{ fill: #353535;}
.details_con_l .web_cases .web_bottom{}
.details_con_l .web_cases .web_bottom .web_bottom_t{width: 120px;height: 30px;margin: 0 auto;background: linear-gradient(to top,#cccccc 0%,#e7e7e7 100%);border-top: 8px solid #afafaf;}
.details_con_l .web_cases .web_bottom .web_bottom_b{width: 120px;height: 30px;margin: 0 auto;background: linear-gradient(to bottom,#cccccc 0%,#e7e7e7 100%);transform: perspective(120px) rotateX(60deg);transform-origin: top;box-shadow: 0px 3px 0px -1px rgba(0,0,0,0.2);border-radius: 0px 0px 6px 6px;}

.shadow_hover{ transition: all 0.5s; margin: 0px auto 40px; background: #fff;}
.shadow_hover:hover{ transform: translateY(-10px); box-shadow: 0px 15px 30px -15px rgba(0,0,0,0.1);}
/* .shadow_hover img{ width: 100%;} */

.details_con_r{ width: 230px; position: relative;}
.details_con_r .details_con_r_info{ position: absolute; top:0px; width: 230px; background: #fff; padding: 20px; box-sizing: border-box;}
.details_con_r .a_website{ background: #ee031e; display: flex; align-items: center; justify-content: center; padding:12px 16px; margin-bottom: 20px;}
.details_con_r .a_website svg{ display: block; width: 20px; height: 20px; margin-right: 4px;}
.details_con_r .a_website svg path{ fill: #fff;}
.details_con_r .a_website p{ color: #fff; font-size: 14px;}
.details_con_r .p_lable{ font-size: 14px; color: #797979; margin-bottom: 4px;}
.details_con_r .ul_lable{ display: flex; align-items: center; flex-wrap: wrap;}
.details_con_r .ul_lable li{ background: #f2f2f2; border:1px solid #e2e2e2; border-radius: 5em; padding: 4px 8px; font-size: 12px; line-height: 1.2em; margin-right: 8px; margin-bottom: 8px; color: #666;}
.details_con_r .cases_tongji{ margin-top: 12px; display: flex;}
.details_con_r .cases_tongji p{ display: flex; align-items: center; margin-right: 30px;}
.details_con_r .cases_tongji p svg{ display: block; width: 18px; height: 18px; margin-right: 4px;}
.details_con_r .cases_tongji p svg path{ fill: #999;}
.details_con_r .cases_tongji p span{ font-size: 12px; color: #333;}

.details_con_r_jq .details_con_r_info{ position:fixed; top:53px; z-index: 9999;}
/* 新增咨询客服需求 */
.details_con_r_info .online_warp h2{ text-align: center; margin: 10px 0;} 
.details_con_r_info .online_warp .online_code { text-align: center; width: 100px; margin: 10px auto auto auto;}
.details_con_r_info .online_warp .online_code .online_code_img{ border: 1px solid #6666;  border-radius: 8px; padding: 5px;}
.details_con_r_info .online_warp .online_warp_p {line-height: 1.4em;text-align: center;margin: 5px 0;}
.details_con_r_info .online_warp .online_p .online_p_p { font-size: 12px; color: #797979; line-height: 1.4em; }

.details_bot{ display: flex; align-items: center; justify-content: center; margin:60px auto 0px;}

.icon_dz{ display: flex; align-items: center; justify-content: center; width:64px; height:64px; background:#ccc; border-radius:100%; cursor: pointer;}
.icon_dz svg{ display: block; width:40px; height:40px; }
.icon_dz svg path{ fill: #fff;}
.icon_dz_jq{ -webkit-animation:dz 1s ease 0s forwards;}
@-webkit-keyframes dz {
0% { transform:scale(1); background:#e2e2e2;}
20% { transform:scale(0); background:#e2e2e2;}
48% { transform:scale(1.15); background:#e60012;}
50% { transform:scale(1); background:#e60012;}
60%{ -webkit-transform:rotate3d(0,0,1,25deg);}
70%{ -webkit-transform:rotate3d(0,0,1,-20deg);}
80%{ -webkit-transform:rotate3d(0,0,1,15deg);}
90%{ -webkit-transform:rotate3d(0,0,1,-15deg);}
100%{ -webkit-transform:rotate3d(0,0,1,0deg); background:#e60012;}
}

.details_bot .a_makeone{ display: inline-block; font-size: 14px; line-height: 24px; padding: 6px 16px; border: 1px solid #e60012; background: rgba(255,255,255,0); color: #e60012; margin-left: 60px; cursor: pointer; transition: all 0.3s;}
.details_bot .a_makeone:hover{ background: #e60012; color: #fff;}

.color_div{ display: flex; align-items: flex-start; justify-content: space-between; width: 940px; margin: 40px auto; background: #fff; padding:30px 30px; box-sizing: border-box; position: relative;}
.color_div h2{ color: #333; font-size: 24px; font-weight: 600; line-height: 1em;}
.color_div h3{ position: absolute; bottom: 30px; left: 30px; font-size: 12px; color: #666; font-weight: normal; line-height: 1em;}
.color_div .ul_color{ display: flex; align-items: flex-end;}
.color_div .ul_color li{ margin:0px 15px 0px 15px;}
.color_div .ul_color li .color_con{ margin-bottom: 10px;}
.color_div .ul_color li .color_con h4{ font-size: 14px; text-align: center;}
.color_div .ul_color li .color_bottom{ width: 60px; border-radius: 300px; transition: all 0.5s;}
.color_div .ul_color li:nth-last-child(1) .color_bottom{ height: calc(80px * 1);}
.color_div .ul_color li:nth-last-child(2) .color_bottom{ height: calc(80px * 1.5);}
.color_div .ul_color li:nth-last-child(3) .color_bottom{ height: calc(80px * 2);}
.color_div .ul_color li:nth-last-child(4) .color_bottom{ height: calc(80px * 2.5);}
.color_div .ul_color li:nth-last-child(5) .color_bottom{ height: calc(80px * 3);}
.color_div .ul_color li:nth-last-child(6) .color_bottom{ height: calc(80px * 3.5);}

.color_div .ul_color li:hover .color_bottom{ transform: translateY(-5px); box-shadow: 0px 10px 15px -5px rgba(0,0,0,0.2);}

.demo_yd{ display: flex; align-items: center; justify-content: center; padding: 30px 30px; flex-wrap: wrap;}

body{
    --pw:280px;
}

.phone{ margin:15px 15px; width:var(--pw); /*height:calc(var(--pw) * 2.035);*/ background:#292929; border-radius:calc(var(--pw) / 7.77); box-sizing:border-box; padding:calc(var(--pw) / 70); position:relative; -webkit-animation:phone 4s ease 0s infinite; }
.phone_bg1{ width:100%; height:100%; background:#fff; border-radius:calc(var(--pw) / 7.77); box-sizing:border-box; padding:calc(var(--pw) / 280);}
.phone_bg2{ width:100%; height:100%; background:#0b0d0c; border-radius:calc(var(--pw) / 7.77); box-sizing:border-box; padding:calc(var(--pw) / 28); box-shadow:inset 14px 0px 10px -15px #fff, inset -14px 0px 10px -15px #fff;}
.phone_bg3{ width:100%; height:100%; background:#fff; border-radius:calc(var(--pw) / 11.66); box-sizing:border-box; position:relative; overflow: hidden;}
.phone_lh{ width:50%; height:calc(var(--pw) / 14); background:#0b0d0c; margin:0 auto; border-radius:0px 0px calc(var(--pw) / 23.33) calc(var(--pw) / 23.33); position: absolute; top: 0px; left: 25%;}
.phone_lh_con{ display:flex; align-items:center; justify-content:center;}
.lh_tiao{ width:calc(var(--pw) / 8.23); height:calc(var(--pw) / 70); border-radius:5em; background:#2d2d2d; margin-left:calc(var(--pw) / 17.5);}
.lh_yuan{ width:calc(var(--pw) / 46.66); height:calc(var(--pw) / 46.66); border-radius:5em; background:#212554; margin-left:calc(var(--pw) / 28);}
.phone_home{ width:calc(var(--pw) / 3.11); height:calc(var(--pw) / 70); border-radius:5em; position:absolute; bottom:calc(var(--pw) / 70); left:50%; margin-left:calc(var(--pw) / -6.22); background:#0b0d0c; display: none;}

.jingyin{ width:calc(var(--pw) / 93.33); height:calc(var(--pw) / 11.66); background:#121212; position:absolute; top:calc(var(--pw) / 3.68); left:calc(var(--pw) / -93.33); border-radius:5px 0px 0px 5px;}
.jingyin:after{ content:""; display:block; width:calc(var(--pw) / 280); height:calc(var(--pw) / 17.5); background:rgba(255,255,255,0.8); position:absolute; left:calc(var(--pw) / 140); bottom:calc(var(--pw) / 70);}
.yl_jia{ width:calc(var(--pw) / 93.33); height:calc(var(--pw) / 7); background:#121212; position:absolute; top:calc(var(--pw) / 2.37); left:calc(var(--pw) / -93.33); border-radius:5px 0px 0px 5px;}
.yl_jia:after{ content:""; display:block; width:calc(var(--pw) / 280); height:calc(var(--pw) / 8.75); background:rgba(255,255,255,0.6); position:absolute; right:0px; bottom:calc(var(--pw) / 70);}
.yl_jian{ width:calc(var(--pw) / 93.33); height:calc(var(--pw) / 7); background:#121212; position:absolute; top:calc(var(--pw) / 1.64); left:calc(var(--pw) / -93.33); border-radius:5px 0px 0px 5px;}
.yl_jian:after{ content:""; display:block; width:calc(var(--pw) / 280); height:calc(var(--pw) / 8.75); background:rgba(255,255,255,0.6); position:absolute; right:0px; bottom:calc(var(--pw) / 70);}
.suoping{ width:calc(var(--pw) / 93.33); height:calc(var(--pw) / 4.24); background:#121212; position:absolute; top:calc(var(--pw) / 2.12); right:calc(var(--pw) / -93.33); border-radius:0px 5px 5px 0px;}
.suoping:after{ content:""; display:block; width:calc(var(--pw) / 280); height:calc(var(--pw) / 4.82); background:rgba(255,255,255,0.6); position:absolute; left:0px; bottom:calc(var(--pw) / 70);}

/* .phone{ margin:0px 15px; width:140px; height:285px; background:#68686b; border-radius:18px; box-sizing:border-box; padding:2px; position:relative; -webkit-transform:skew(0deg,0deg); -webkit-animation:phone 4s ease 0s infinite;}
.phone_bg1{ width:100%; height:100%; background:#fff; border-radius:18px; box-sizing:border-box; padding:0.5px;}
.phone_bg2{ width:100%; height:100%; background:#0b0d0c; border-radius:18px; box-sizing:border-box; padding:5px; box-shadow:inset 14px 0px 10px -15px #fff, inset -14px 0px 10px -15px #fff;}
.phone_bg3{ width:100%; height:100%; background:#fff; border-radius:12px; box-sizing:border-box; position:relative; overflow: hidden;}
.phone_lh{ width:50%; height:10px; background:#0b0d0c; margin:0 auto; border-radius:0px 0px 6px 6px; position: absolute; top: 0px; left: 25%;}
.phone_lh_con{ display:flex; align-items:center; justify-content:center;}
.lh_tiao{ width:17px; height:2px; border-radius:5em; background:#2d2d2d; margin-left:8px;}
.lh_yuan{ width:3px; height:3px; border-radius:5em; background:#212554; margin-left:5px;}
.phone_home{ width:45px; height:2px; border-radius:5em; position:absolute; bottom:2px; left:50%; margin-left:-22.5px; background:#0b0d0c; display: none;}

.jingyin{ width:1.5px; height:12px; background:#121212; position:absolute; top:38px; left:-1.5px; border-radius:5px 0px 0px 5px;}
.jingyin:after{ content:""; display:block; width:0.8px; height:8px; background:rgba(255,255,255,0.8); position:absolute; left:0px; bottom:2px;}
.yl_jia{ width:1.5px; height:20px; background:#121212; position:absolute; top:59px; left:-1.5px; border-radius:5px 0px 0px 5px;}
.yl_jia:after{ content:""; display:block; width:0.5px; height:16px; background:rgba(255,255,255,0.6); position:absolute; right:0px; bottom:2px;}
.yl_jian{ width:1.5px; height:20px; background:#121212; position:absolute; top:85px; left:-1.5px; border-radius:5px 0px 0px 5px;}
.yl_jian:after{ content:""; display:block; width:0.5px; height:16px; background:rgba(255,255,255,0.6); position:absolute; right:0px; bottom:2px;}
.suoping{ width:1.5px; height:33px; background:#121212; position:absolute; top:66px; right:-1.5px; border-radius:0px 5px 5px 0px;}
.suoping:after{ content:""; display:block; width:0.5px; height:29px; background:rgba(255,255,255,0.6); position:absolute; left:0px; bottom:2px;} */


#qrcode{ margin-bottom: 20px;}
#qrcode img{ margin: 0 auto;}

/*手机端样式*/
@media screen and (max-width: 800px){

.ny_ban{ height: 120px;}
.div_title p{ font-size: 50px;}
.div_title h2{ font-size: 28px;}

.cases_details{ background: #f2f2f2; padding: 30px 15px; width: 100%; overflow: hidden; box-sizing: border-box;}

.cases_details_remark{ width: 100%; margin: 0 auto 30px; background: #fff; padding:24px 30px; box-sizing: border-box;}
.cases_details_remark p{ font-size: 14px; line-height: 24px;}

.cases_details .cases_details_con{ width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;}
.details_con_l{ width: 100%; order: 9;}

.details_con_l .web_cases{ padding: 20px 20px 10px; background:linear-gradient(to bottom,#facc2e 0%,#facc2e 60%,#fff 60%,#fff 100%);}
.details_con_l .web_cases .web_cases_con{ position: relative; border-bottom: 20px solid #e2e2e2; border-radius: 0px 0px 6px 6px; transition: all 0.5s;}
.details_con_l .web_cases .web_cases_con .web_cases_con_img{ border: 6px solid #353535; border-radius: 6px 6px 0px 0px; height: 32vw; overflow: hidden;}

.details_con_l .web_cases .web_cases_con svg{ width: 12px; height: 12px; display: block; position: absolute; bottom: -15px; left: 50%; margin-left: -6px;}
.details_con_l .web_cases .web_cases_con svg path{ fill: #353535;}

.details_con_l .web_cases .web_bottom .web_bottom_t{ width: 80px; height: 15px; margin: 0 auto; background: linear-gradient(to top,#cccccc 0%,#e7e7e7 100%); border-top: 8px solid #afafaf;}
.details_con_l .web_cases .web_bottom .web_bottom_b{ width: 80px; height: 15px; margin: 0 auto; background: linear-gradient(to bottom,#cccccc 0%,#e7e7e7 100%); transform: perspective(120px) rotateX(60deg); transform-origin: top; box-shadow: 0px 3px 0px -1px rgba(0,0,0,0.2); border-radius: 0px 0px 6px 6px;}

.details_con_r{ width: 100%; position: relative; margin-bottom: 30px; order: 2;}
.details_con_r .details_con_r_info{ position: inherit; top:0px; width: 100%; background: #fff; padding: 20px; box-sizing: border-box;}

.color_div{ display: block; align-items: flex-start; justify-content: space-between; width: 100%; margin: 30px auto; background: #fff; padding:15px 15px; box-sizing: border-box; position: relative;}

.color_div h2{ margin-bottom: 4px;}
.color_div h3{ position: inherit; bottom: 0px; left: 0px; margin-bottom: 30px;}
.color_div .ul_color li{ margin:0px 8px 0px 8px;}
.color_div .ul_color li .color_bottom{ width: 40px; border-radius: 300px; transition: all 0.5s;}
.color_div .ul_color li:nth-last-child(1) .color_bottom{ height: calc(60px * 1);}
.color_div .ul_color li:nth-last-child(2) .color_bottom{ height: calc(60px * 1.5);}
.color_div .ul_color li:nth-last-child(3) .color_bottom{ height: calc(60px * 2);}
.color_div .ul_color li:nth-last-child(4) .color_bottom{ height: calc(60px * 2.5);}
.color_div .ul_color li:nth-last-child(5) .color_bottom{ height: calc(60px * 3);}
.color_div .ul_color li:nth-last-child(6) .color_bottom{ height: calc(60px * 3.5);}

.shadow_hover{ transition: all 0.5s; margin: 0px auto 30px;}

.icon_dz{ display: flex; align-items: center; justify-content: center; width:48px; height:48px; background:#ccc; border-radius:100%; cursor: pointer;}
.icon_dz svg{ display: block; width:32px; height:32px; }

body{
    --pw:200px;
}

}