﻿#case .banner { height: 175px; background: url(/res/pc/images/allcase1.png)no-repeat; position: relative; min-width: 1100px; overflow: hidden; }
#case .banner .panel { position: absolute; right: -100%; height: 100%; width: 50%; background: url(/res/pc/images/allcase2.png)no-repeat; font-size: 32px; font-weight: bold; line-height: 64px; color: #fff; }
#case .banner .text { width: 388px; padding-top: 24px; margin-left: 160px; }
#case .section .tab { border-bottom: 1px solid #D9D9D9; margin: 72px 0px 60px; }
#case .section .tab a { position: relative; margin-right: 98px; display: inline-block; font-size: 18px; line-height: 24px; padding-bottom: 16px; position: relative; text-decoration: none; color: #666; }
#case .section .tab .active { color: #F48334; }
#case .section .tab .underline { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 2px; margin-top: 2px; background-color: #FD7E26; -webkit-backface-visibility: visible; backface-visibility: visible; transform-style: preserve-3d; transform: translate3d(0px, 0px, 0px) scale3d(0, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transition: all 0.3s; }
#case .section .tab a:hover { color: #F48334; }
#case .section .tab a:hover .underline { transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); }
#case .section .tab .active .underline { transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transition: inherit; }
#case .section .list { margin-top: 120px; opacity: 0; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
#case .section .list.show { opacity: 1; transform: translateY(-60px); }
#case .section .item { float: left; width: 340px; height: 460px; margin-right: 40px; margin-bottom: 32px; border-radius: 10px; position: relative; overflow: hidden; background: #ddd; box-shadow: 0 0 7px #aaa; }
#case .section .item:nth-child(3n) { margin-right: 0px; }
#case .section .item .pic { position: absolute; top: 0px; left: 0px; width: 100%; }
#case .section .item .pic img { width: 100%; max-height: unset; position: absolute; top: 0; left: 0; }
#case .section .item .desc { display: flex; justify-content: center; align-items: center; opacity: 0; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.4); top: 0; left: 0; font-size: 0; transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; }
#case .section .item:hover .desc { opacity: 1; }
#case .section .item .desc a { overflow: hidden; position: relative; }
#case .section .item .desc .btn1 { margin-right: 40px; }
#case .section .item .desc .btn2 { background-color: transparent; }
#case .section .item .desc .btn1:hover { border: 1px solid #F48334; background: #F48334; }
#case .section .item .desc .links { display: flex; justify-content: center; align-items: center; opacity: 1; }
#case .section .item .desc .links span { -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); position: absolute; top: 50%; left: 50%; z-index: 1; display: block; -moz-animation: new_anim-out .75s; -webkit-animation: new_anim-out .75s; animation: new_anim-out .75s; }
#case .section .item .desc .links span:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; -moz-animation: new_anim-out-pseudo .75s; -webkit-animation: new_anim-out-pseudo .75s; animation: new_anim-out-pseudo .75s; }
#case .section .item .desc .links span:before { position: relative; content: ''; display: block; margin-top: 100%; }
#case .section .item .desc .links span, .case .item .desc .links span:after { animation-iteration-count: infinite; animation-duration: 1.3s; }


#case_item .banner { background: linear-gradient(0deg, #E4FDF9 0%, #FFFFFF 101%); text-align: center; position: relative; }
#case_item .banner .container { position: relative; }
#case_item .banner .desc { width: 453px; font-size: 20px; text-align: left; margin-top: 134px; }
#case_item .banner .desc h4 { font-size: 48px; font-weight: bold; color: #F48334; opacity: 0; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; transition: all .6s ease-in-out; line-height: 56px; }
#case_item .banner .desc p { font-size: 16px; padding-top: 40px; opacity: 0; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; transition: all .6s ease-in-out; }
#case_item .banner .desc h4.show { opacity: 1; animation: floatCase 1s; }
#case_item .banner .desc p.show { opacity: 1; animation: floatCase1 1.2s; }
#case_item .banner .pic { width: 530px; height: 300px; margin: 106px 40px 26px 0; opacity: 0; transition: all .6s ease-in-out; }
#case_item .banner .pic img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 0 12px #aaa; border-radius: 10px; }
#case_item .banner .pic-show { opacity: 1; transform: translateY(-40px); }
#case_item .section { text-align: center; min-width: 1000px; }
#case_item .section h3 { margin: auto; font-size: 24px; font-weight: bold; padding: 0px 0px 24px 0px; }
#case_item .section p { font-size: 12px; line-height: 20px; padding-bottom: 56px; }
#case_item .project { text-align: left; padding-top: 60px; width: 1000px; margin: 0 auto; }
#case_item .project h3 { padding-bottom: 0px; font-weight: bold; font-size: 32px; color: #236EC6; }
#case_item .project .desc > .fll { width: 500px; }
#case_item .project .text { line-height: 28px; color: #666; }
#case_item .project .desc .time { color: #666; }
#case_item .project .business { font-size: 16px; width: 410px; padding: 16px 0px; }
#case_item .project .item { padding-bottom: 32px; text-align: right; }
#case_item .project .item div { font-weight: bold; padding-bottom: 8px; }
#case_item .project .item p { font-size: 14px; padding: 0px; color: #666; max-width: 300px; }
#case_item .project .item span { display: inline-block; height: 26px; line-height: 26px; padding: 0px 10px; background: #EFF8FF; color: #175CD3; margin-left: 10px; border-radius: 2px; }
#case_item .project .flr { margin-top:8px;}
#case_item .project .item span:first-child { margin-left: 0px; }
#case_item .project .item:last-child { padding-bottom: 0px; }
#case_item .content .item { padding: 80px 0px; font-size: 0px !important; }
#case_item .content .item .name { display: inline-block; vertical-align: middle; width: 500px; font-weight: bold; font-size: 40px !important; color: #236EC6; }
#case_item .content .item .tip { display: inline-block; vertical-align: middle; width: 500px; color: #666; line-height: 22px; font-size: 14px !important; }
#case_item .pcshow .pic { width: 1000px; margin: auto; margin-top: 40px; border: 6px solid #444; border-radius: 15px; overflow: hidden; box-sizing: border-box; }
#case_item .pcshow .pic img { width: 100%; object-fit: cover; }
#case_item .pcshow .links { text-align: center; padding: 40px 0px 60px 0px; vertical-align: top; font-size: 0px; }
#case_item .pcshow .links a { vertical-align: top; }
#case_item .content { width: 1000px; border: 1px solid #E0E0E0; border-radius: 10px; overflow: hidden; padding: 0px 32px; box-sizing: border-box; }
#case_item .content img { max-width: 936px; }
#case_item .case { background: #F9F9F9; }
#case_item .case .item { float: left; width: 538px; margin: 0px 24px 24px 0px; text-align: left; }
#case_item .case .item .pic { height: 275px; overflow: hidden; }
#case_item .case .item .pic img { width: 100%; height: 100%; object-fit: cover; }
#case_item .case .item .pic img img:hover { -webkit-transform: scale(1.04); transform: scale(1.04); }
#case_item .case .item .desc { background: #fff; padding: 20px 32px; }
#case_item .case .item .desc .time { font-size: 12px; color: #999; }
#case_item .case .item .desc .name { font-size: 16px; font-weight: bold; padding-bottom: 4px; }
#case_item .case .item .desc .tip { font-size: 12px; color: #666; }
#case_item .case .item:nth-child(2n) { margin-right: 0px; }
