.tab-box{background: #ffcf00;height: 60px; line-height: 60px;}
.tab{width: 1200px; margin: 0 auto; position: relative; font-family:"Arial","\5FAE\8F6F\96C5\9ED1","\5B8B\4F53"; }
.tab .name{position: absolute; left: 0; top: 0; color: #131313; font-size: 14px;}
.tab-box a{float: left; margin-left: 34px; color: #515151; font-size: 14px;-webkit-transition: all ease .2s; transition: all ease .2s;}
.tab-box a.active,.tab-box a:hover{ color: #fff;}


.cases-box li{width: 20%; padding-top: 20%;float: left; *display: inline; position: relative; overflow: hidden;}
.cases-box a{position: absolute; width: 100%; height: 100%;left: 0; top: 0;}
.cases-box img{height: 100%; display: block; -webkit-transition: .3s ease all; transition: .3s ease all;}
.cases-box .txt-box{position: absolute; left: 0; top: 0; bottom: 0; right: 0; text-align: center;  font-weight: bold; cursor: pointer;}
.cases-box .txt-box i{content:'';position: absolute; top: 50%; width: 0; left: 24%; background: #ffcf00; margin-top: -2px; z-index: 2; height: 3px; -webkit-transition: .36s .25s ease all; transition: .36s .25s ease all;}
.cases-box .name{width: 100%; position: absolute; left: 0; top: 50%; margin-top: -38px; line-height: 36px; font-size: 18px; color: #ffcf00; -webkit-transform: translateY(-40px); transform: translateY(-40px); -webkit-transition: .36s .1s ease all; transition: .36s .1s ease all; opacity: 0; z-index: 2;}

.cases-box .technology{width: 100%; position: absolute; left: 0; top: 50%; margin-top: -2px; line-height: 36px; font-size: 14px;color: #fff; -webkit-transform: translateY(-0px); transform: translateY(40px); -webkit-transition: .36s .25s ease all; transition: .36s .25s ease all; opacity: 0; z-index: 2;}

.cases-box a:hover img{-webkit-transform: scale(1.1); transform: scale(1.1);}
.cases-box a:hover .txt-box{background: url(../images/comm/black76.png) repeat; }
.cases-box a:before,.cases-box a:after{content:"";width: 0;height: 0;position: absolute;transition: width 0.3s ease-in, height 0.3s ease-in;transition: width 0.3s ease-in, height 0.3s ease-in;z-index: 9;opacity: 0;}
.cases-box a:before{top: 0;left: 0;border-top: 10px solid #ffcf00;border-left: 10px solid #ffcf00; }
.cases-box a:after{bottom: 0;right: 0;border-right: 10px solid #ffcf00;border-bottom: 10px solid #ffcf00;}
.cases-box a:hover:before,.cases-box a:hover:after{width: 100%;height: 100%;opacity: 1;}
.cases-box a:hover .txt-box i{width: 52%;}
.cases-box a:hover .name,.cases-box a:hover .technology{opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}




.works .footer .contact,.works .footer .about{opacity: 1;}

.cases-loading{position: relative; height: 0; overflow: hidden; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
.cases-loading.active{ height: 40px; padding: 10px 0 20px;}
.cases-loading span{font-size: 12px; color: #fff; line-height: 20px; text-align: center; display: block;}
.cases-loading i{width: 30px; height: 30px; display: block; margin: 0 auto; position: relative;}
.cases-loading i:before,
.cases-loading i:after {
    content: '';
    width: inherit;
    height: inherit;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: loader 2.0s infinite ease-in-out;
    animation: loader 2.0s infinite ease-in-out;
}
.cases-loading i:after {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.delay0{-webkit-animation-delay:.1s;animation-delay:.1s;}
.delay1{-webkit-animation-delay:.2s;animation-delay:.2s;}
.delay2{-webkit-animation-delay:.3s;animation-delay:.3s;}
.delay3{-webkit-animation-delay:.4s;animation-delay:.4s;}
.delay4{-webkit-animation-delay:.5s;animation-delay:.5s;}
.fadeInUp{ -webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.cases-box li.fadeInUp{opacity: 1;}

/*¼æÈݵͰ汾IE*/
.need-to-upgrade .cases-box .txt-box{ display: none;}
.need-to-upgrade .cases-box a:hover .txt-box{display: block;}
.need-to-upgrade .cases-box a:before,.need-to-upgrade .cases-box a:after{display: none;}
.need-to-upgrade .cases-box a:hover:before,.need-to-upgrade .cases-box a:hover:after{display: block;}
.need-to-upgrade .cases-loading i{display: none;}
.need-to-upgrade .cases-loading.active{ height: 20px; padding: 10px 0 10px;}


@media screen and (max-width:1280px){.tab{width: 1000px;}}

.mobile .tab-box{display: none;}
.mobile .cases-box li{width: 100%; padding-top: 0; background: #131313;}
.mobile .cases-box a{width: 100%; height: auto; position: static; display: block;}
.mobile .cases-box .txt-box{display: block; position: static; padding-top: 100%; background:url(../images/comm/loading.png) 50% 2.94rem no-repeat; background-size: 1.82rem 1.62rem;}
.mobile .cases-box img{width: 100%; height: 7.5rem; position: absolute; left: 0; top: 0;}
.mobile .cases-box .name{ position: static; font-size: .3rem; opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); display: block; margin-top: 0; color: #fff; line-height: .5rem; padding-top: .11rem;}
.mobile .cases-box .technology{font-size: .18rem; line-height: .24rem; display: block; position:static; color: #fff; -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; font-weight: normal;padding-bottom: .4rem;}
.mobile .cases-box a:hover .txt-box{border: none; background:#131313;}
.mobile .cases-box .txt-box i{display: none;}
.mobile .cases-box a:hover img{-webkit-transform: scale(1); transform: scale(1);}
.mobile .wrapper{transition: opacity .2s cubic-bezier(.215,.61,.355,1);}