@import '../../static/css/animate.css';

.ig-tool .s1,
.ig-tool .s4 { display: none; }

.tp-poi { position: relative; overflow: hidden; }
.tp-poi img { position: relative; left: 50%; width: 1920px; margin: 0 0 0 -960px; display: block; }
.tp-poi a { position: absolute; left: 50%; bottom: 70px; margin: 0 0 0 -120px; z-index: 2; width: 240px; line-height: 60px; white-space: nowrap; background: #3388ff; color: #fff; font-size: 30px; text-align: center; border-radius: 60px; transition: all .3s ease; }
.tp-poi a:hover { background: #ef0014; transform: translateY(5px); }

.tp-head { text-align: center; margin: 0 0 50px; }
.tp-head h2 { line-height: 50px; font-size: 34px; font-weight: normal; }
.tp-head h3 { line-height: 40px; font-size: 20px; font-weight: normal; }

.tp-video { padding: 60px 0 20px; background: #fff; }
.tp-video .main { position: relative; overflow: hidden; }
.tp-video .list { overflow: hidden; width: 110%; }
.tp-video .item { float: left; width: 180px; margin: 0 75px 50px 0; text-align: center; cursor: pointer; }
.tp-video .item img { display: block; width: 60px; height: 60px; margin: 0 auto 5px; }
.tp-video .item h3 { display: inline-block; line-height: 30px; font-size: 20px; font-weight: normal; position: relative; +display: inline; +zoom: 1; }
.tp-video .item i { width: 28px; height: 28px; background: url(_b0.png) 0 0 no-repeat; vertical-align: middle; margin: 0 0 0 10px; position: absolute; right: -40px; top: 0; }
.tp-video .item:hover img,
.tp-video .item:hover h3 { opacity: .8; }

.tp-case { padding: 60px 0 80px; background: #f6f6f6; }
.tp-case .tabed { position: relative; text-align: center; margin: -10px 0 60px; }
.tp-case .tabed li { display: inline-block; padding: 0 40px; font-size: 20px; line-height: 60px; border: 1px solid #a0a0a0; color: #a0a0a0; border-radius: 60px; margin: 0 10px; cursor: pointer; transition: all .5s ease; +display: inline; +zoom: 1; }
.tp-case .tabed li:hover { border-color: #666; color: #666; }
.tp-case .tabed li.active { border-color: #ef0014; color: #ef0014; }
.tp-case .main { position: relative; }
.tp-case .video { float: left; width: 340px; height: 642px; margin: 0 0 0 20px; background: url(_c0.png) 0 0 no-repeat; position: relative; }
.tp-case .video .inner { position: absolute; left: 19px; top: 44px; width: 302px; height: 537px; }
.tp-case .video .inner img { display: block; width: 100%; height: 100%; }
.tp-case .video .shadow { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; background: url(about:blank) 0 0 repeat; }
.tp-case .list { float: right; width: 788px; margin: 50px 20px 80px 0; }
.tp-case .item { float: left; width: 182px; height: 154px; margin: 0 0 15px 15px; position: relative; background: #fff; overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,.03); }
.tp-case .item img { display: block; width: 182px; height: 308px; position: relative; top: -154px; transition: all .3s ease; }
.tp-case .item:hover { box-shadow: 0 0 10px rgba(0,0,0,.1); }
.tp-case .item:hover img { top: 0; }
.tp-case .foot { float: right; width: 773px; position: relative; margin: 0 20px 0 0; }
.tp-case .foot h2 { line-height: 40px; font-size: 20px; }
.tp-case .foot h3 { line-height: 40px; font-size: 20px; font-weight: normal; }
.tp-case .foot a { position: absolute; right: 0; bottom: 0; line-height: 40px; border-radius: 40px; padding: 0 50px; background: #ef0014; color: #fff; font-size: 16px; transition: all .3s ease; }
.tp-case .foot a:hover { background: #3388ff; }

.tp-process { padding: 60px 0 150px; background: #fff; }
.tp-process .main { position: relative; overflow: hidden; }
.tp-process .list { overflow: hidden; }
.tp-process .list dt { float: left; width: 128px; text-align: center; }
.tp-process .list dd { float: left; width: 50px; height: 20px; background: url(_d0.png) center center no-repeat; margin: 25px 0 0; }
.tp-process .list img { display: block; width: 68px; height: 68px; margin: 0 auto 15px; }
.tp-process .list h3 { line-height: 24px; font-size: 16px; font-weight: normal; }

.dialog-video { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 99999; display: none; }
.dialog-video .shadow { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 0; background: #000; filter: Alpha(opacity=30); background: rgba(0,0,0,.3); animation: fadeIn .5s ease; }
.dialog-video .inner { position: absolute; left: 50%; top: 50%; margin: -275px 0 0 -155px; z-index: 2; border: 5px solid #333; animation: zoomIn .5s ease; }
.dialog-video .video { position: relative; z-index: 0; width: 302px; height: 537px; background: #000; }
.dialog-video .close { position: absolute; right: -35px;  top: -5px; width: 30px; height: 30px; background: url(_b0x.png) center center no-repeat #3388ff; cursor: pointer; z-index: 2; animation: }
.dialog-video .close:hover { background-color: #ef0014; }