锘?banner { position:relative; width:100%; height:auto; overflow:hidden; padding-top:120px; } .banner .container { height:100%; } .banner .contents { position:absolute; top:120px; left:0px; width:100%; height:100%; } .banner .content { position:absolute; top:0px; width:100%; height:100%; background-size:100%; background-repeat:no-repeat; background-position:left top; text-align:center; } .banner .contentInfo { display:none; overflow:hidden; position:absolute; top:50%; left:100px; width:675px; height:200px; margin-top:-100px; z-index:1; text-align:left; } .banner .contentInfo .sub { text-shadow:0px 0px 3px #b67ebc; position:absolute; top:17px; left:8px; width:2px; height:120px; background:#fff; } .banner .contentInfo .sub { transform-origin:left bottom; -moz-transform-origin:left bottom; -ms-transform-origin:left bottom; -o-transform-origin:left bottom; -webkit-transform-origin:left bottom; } .banner .contentInfo .quan { text-shadow:0px 0px 3px #b67ebc; position:absolute; top:128px; left:0px; width:14px; height:14px; border:2px solid #fff; border-radius:16px; -moz-border-radius:16px; -ms-border-radius:16px; -o-border-radius:16px; -webkit-border-radius:16px; } .banner .contentInfo .title { text-shadow:0px 0px 3px #b67ebc; position:absolute; left:32px; top:8px; line-height:50px; font-size:40px; color:#fff; font-family:"寰蒋闆呴粦"; } .banner .contentInfo .info { text-shadow:0px 0px 3px #b67ebc; position:absolute; left:32px; top:70px; line-height:32px; font-size:20px; color:#fff; } .banner .contentInfo .btn { text-shadow:0px 0px 3px #b67ebc; position:absolute; top:146px; left:32px; color:#fff; border:1px solid #fff; text-align:center; line-height:32px; width:110px; height:30px; border-radius:30px; -moz-border-radius:30px; -ms-border-radius:30px; -o-border-radius:30px; -webkit-border-radius:30px; } .banner .bannerNav { position:absolute; bottom:10px; width:100%; text-align:center; z-index:2; } .banner .bannerNav .bannerNavChild { margin:0 10px; width:10px; height:10px; display:inline-block; *display:inline; *zoom:1; background:#fff; border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; -webkit-border-radius:10px; cursor:pointer; } .banner .bannerNav .bannerNavChild.on { background:#000; animation:bannerNavChildOn .2s ease-in-out 0s both; -moz-animation:bannerNavChildOn .2s ease-in-out 0s both; -webkit-animation:bannerNavChildOn .2s ease-in-out 0s both; -o-animation:bannerNavChildOn .2s ease-in-out 0s both; } .banner .bannerBg { width:100%; height:auto; vertical-align:middle; } .about { padding:80px 0; background:#fff; } .about .left { width:600px; height:284px; float:left; } .about .left img { width:100%; height:100%; vertical-align:middle; } .about .right { position:relative; width:524px; height:284px; float:right; } .about .right .title { font-size:20px; color:#923AA4; line-height:20px; padding-bottom:20px; } .about .right .info { font-size:14px; color:#666; line-height:22px; } .about .right .btn { position:absolute; bottom:0px; left:0px; width:122px; height:38px; border:1px solid #dcdcdc; line-height:38px; text-align:center; color:#999999; font-size:14px; } .about .right .btn { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .about .right .btn:hover { background:#7E308E; color:#fff; border:1px solid #fff; } .news { padding:40px 0; background:#f7f7f7; } .news .container { height:415px; margin:56px auto 0 auto; } .news .contents { position:relative; width:1200px; height:415px; overflow:hidden; } .news .content { position:absolute; top:0; left:0; } .news .child { display:none; position:absolute; width:342px; } .news .child .childImg { width:342px; height:228px; overflow:hidden; } .news .child .childImg { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .news .child .childImg:hover { box-shadow:0px 0px 5px #000; -moz-box-shadow:0px 0px 5px #000; -ms-box-shadow:0px 0px 5px #000; -o-box-shadow:0px 0px 5px #000; -webkit-box-shadow:0px 0px 5px #000; } .news .child .childImg img { vertical-align:middle; width:100%; height:100%; } .news .child .childImg img { transition-duration: 1s; -ms-transition-duration: 1s; -moz-transition-duration: 1s; -webkit-transition-duration: 1s; } .news .child .childImg img:hover { transform:rotate(20deg) scale(1.4); -moz-transform:rotate(20deg) scale(1.4); -ms-transform:rotate(20deg) scale(1.4); -o-transform:rotate(20deg) scale(1.4); -webkit-transform:rotate(20deg) scale(1.4); } .news .child .childTitle { line-height:30px; padding-top:40px; color:#666; font-size:24px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news .child .childTime { color:#999999; font-size:14px; line-height:40px; } .news .child .childInfo { color:#878787; font-size:14px; line-height:22px; } .news .navBtn { position:absolute; top:80px; height:70px; cursor:pointer; } .news .navBtn.leftBtn { left:-88px; } .news .navBtn.rightBtn { right:-88px; } .other { position:relative; background:#fff; padding:80px 0 60px 0; text-align:center; } .other .child { width:280px; display:inline-block; *display:inline; *zoom:1; margin-right:174px; vertical-align:text-top; } .other .child#vedioChild { margin-right:0px; } .other .child#vedioChild .childImg { position:relative; overflow:hidden; } .other .child .childImg { width:280px; height:280px; background:#EFEFEF; border-radius:280px; -moz-border-radius:280px; -ms-border-radius:280px; -o-border-radius:280px; -webkit-border-radius:280px; } .other .child .childImg .childImgc { vertical-align:middle; } .other .child .childImg .childImgc { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .other .child .childImg .childImgc:hover { transform:rotate(20deg) scale(1.4); -moz-transform:rotate(20deg) scale(1.4); -ms-transform:rotate(20deg) scale(1.4); -o-transform:rotate(20deg) scale(1.4); -webkit-transform:rotate(20deg) scale(1.4); } .other .child .childTitle { margin-top:46px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; line-height:52px; color:#666; font-size:24px; } .other .child .childInfo { padding-top:26px; line-height:26px; color:#999999; font-size:14px; } .other .child#vedioChild { cursor:pointer; } .other .child#vedioChild .childImg .childImgc:hover { transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; -webkit-transform:none; } .other .child#vedioChild .childImg .childHide { border-raidus:280px; -moz-border-raidus:280px; -ms-border-raidus:280px; -o-border-raidus:280px; -webkit-border-raidus:280px; position:absolute; top:0; left:0; width:280px; height:280px; background:url(../img/pruplebg.png); } .other .child#vedioChild .childImg .childVedio { position:absolute; top:50%; left:50%; width:76px; height:76px; margin:-38px 0 0 -38px; } .work { position:relative; } .work .workTitle { padding:40px 0; background:#f7f7f7; } .work .container { margin:50px auto; height:533px; } .work .container .child { position:absolute; width:385px; height:257px; } .work .container .child .childImg { width: 100%; height: 100%; } .work .container .child .childFoot { position:absolute; bottom:0px; left:0px; width:100%; height:240px; } .work .container .child .childRight { position:absolute; bottom:0px; right:0px; } .work .container .child .childTitle { color:#fff; font-size:20px; position:absolute; bottom:0px; left:0px; padding-left:18px; line-height:36px; width:80%; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index:1; } .work .container .child .childHide { display:none; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2; background:url(../img/pruplebg.png); } .work .container .child .childSearchBg { display:none; position:absolute; top:50%; left:50%; width:66px; height:66px; margin:-33px 0 0 -33px; background:url(../img/seachbg.png); border-radius:66px; -moz-border-radius:66px; -ms-border-radius:66px; -o-border-radius:66px; -webkit-border-radius:66px; z-index:2; } .work .container .child .childSearch { display:none; position:absolute; top:50%; left:50%; width:30px; height:24px; margin:-12px 0 0 -15px; z-index:3; } .work .container .child:hover .childHide { display:block; } .work .container .child:hover .childSearchBg { display:block; animation:quan .2s ease-in-out 0s both; -moz-animation:quan .2s ease-in-out 0s both; -webkit-animation:quan .2s ease-in-out 0s both; -o-animation:quan .2s ease-in-out 0s both; } @keyframes quan { 0% { transform:scale(0); } 100% { transform:scale(1); } } @-moz-keyframes quan { 0% { -moz-transform:scale(0); } 100% { -moz-transform:scale(1); } } @-webkit-keyframes quan { 0% { -webkit-transform:scale(0); } 100% { -webkit-transform:scale(1); } } @-o-keyframes quan { 0% { -o-transform:scale(0); } 100% { -o-transform:scale(1); } } .work .container .child:hover .childSearch { display:block; } .work .container .child#work1 { top:0px; left:0px; } .work .container .child#work2 { top:0px; left:406px; } .work .container .child#work3 { top:0px; left:810px; } .work .container .child#work4 { top:277px; left:0px; } .work .container .child#work5 { top:277px; left:406px; } .work .container .child#work6 { top:277px; left:810px; } @media (max-width: 639px) { .banner { padding-top:50px; } .banner .contents { top:50px; } .banner .content { background-size:auto 160px; background-position:center 0px; background-attachment: inherit; } .banner .contentInfo { top:50%; left:0px; height:200px; width:100%; margin-top:-100px; } .banner .contentInfo .sub { top:47px; left:8px; width:2px; height:120px; } .banner .contentInfo .quan { top:98px; left:0px; width:14px; height:14px; border:2px solid #fff; border-radius:16px; -moz-border-radius:16px; -ms-border-radius:16px; -o-border-radius:16px; -webkit-border-radius:16px; } .banner .contentInfo .title { position:relative; left:32px; top:0px; line-height:30px; font-size:22px; padding-top:40px; } .banner .contentInfo .info { display:none; position:relative; left:32px; top:0px; line-height:32px; padding-top:10px; font-size:20px; } .banner .contentInfo .btn { position:relative; top:0; left:32px; line-height:32px; margin-top:6px; width:110px; height:30px; border-radius:30px; -moz-border-radius:30px; -ms-border-radius:30px; -o-border-radius:30px; -webkit-border-radius:30px; } .banner .bannerNav { bottom:10px; } .banner .bannerNav .bannerNavChild { margin:0 10px; width:10px; height:10px; border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; -webkit-border-radius:10px; } .banner .bannerBg { width:auto; height:160px; } @keyframes sub { 0% { height:0px; } 100% { height:60px; } } @-moz-keyframes sub { 0% { height:0px; } 100% { height:60px; } } @-webkit-keyframes sub { 0% { height:0px; } 100% { height:60px; } } @-o-keyframes sub { 0% { height:0px; } 100% { height:60px; } } .about { padding:17px 0 25px 0; } .about .left { width:100%; height:auto; float:none; } .about .left img { width:100%; height:auto; vertical-align:middle; } .about .right { width:100%; height:auto; float:none; } .about .right .title { font-size:16px; line-height:20px; padding:17px 0 12px 0; } .about .right .info { font-size:12px; line-height:18px; } .about .right .btn { position:relative; margin-top:15px; width:86px; height:23px; border:1px solid #dcdcdc; line-height:23px; font-size:12px; border-radius:23px; -moz-border-radius:23px; -moz-border-radius:23px; -ms-border-radius:23px; -o-border-radius:23px; -webkit-border-radius:23px; } .about .right .btn:hover { border:1px solid #fff; } .news { padding:22px 0; } .news .container { height:250px; margin:25px auto 0 auto; } .news .contents { width:209px; height:250px; margin:0 auto; } .news .child { width:209px; } .news .child .childImg { width:209px; height:125px; } .news .child .childTitle { line-height:20px; padding-top:10px; font-size:14px; } .news .child .childTime { font-size:12px; line-height:18px; padding-bottom:8px; } .news .child .childInfo { font-size:12px; line-height:16px; } .news .navBtn { top:40px; height:35px; } .news .navBtn.leftBtn { left:0px; } .news .navBtn.rightBtn { right:0px; } .other { padding:30px 0 0px 0; } .other .child { width:75%; margin:0 auto; display:block; padding-bottom:30px; } .other .child#vedioChild { margin:0 auto; } .other .child .childImg { width:100%; height:100%; border-radius:100%; -moz-border-radius:100%; -ms-border-radius:100%; -o-border-radius:100%; -webkit-border-radius:100%; } .other .child .childImg .childImgc { max-width:100%; max-height:100%; } .other .child .childTitle { margin-top:23px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; line-height:30px; font-size:14px; } .other .child .childInfo { padding-top:20px; line-height:20px; font-size:12px; } .other .child#vedioChild .childImg .childHide { border-raidus:140px; -moz-border-raidus:140px; -ms-border-raidus:140px; -o-border-raidus:140px; -webkit-border-raidus:140px; width:280px; height:280px; } .other .child#vedioChild .childImg .childVedio { width:38px; height:38px; margin:-19px 0 0 -19px; } .work { position:relative; } .work .workTitle { padding:20px 0; } .work .container { margin:20px auto; height:auto; } .work .container .child { position:relative; width:100%; height:auto; margin:0 auto 18px auto; } .work .container .child .childImg { vertical-align:middle; width:100%; height:auto; } .work .container .child .childFoot { height:120px; } .work .container .child .childTitle { font-size:12px; padding-left:5px; line-height:18px; } .work .container .child .childSearchBg { width:33px; height:33px; margin:-16px 0 0 -16px; border-radius:33px; -moz-border-radius:33px; -ms-border-radius:33px; -o-border-radius:33px; -webkit-border-radius:33px; } .work .container .child .childSearch { width:15px; height:12px; margin:-6px 0 0 -8px; } .work .container .child#work1 { top:0px; left:0px; } .work .container .child#work2 { top:0px; left:0px; } .work .container .child#work3 { top:0px; left:0px; } .work .container .child#work4 { top:0px; left:0px; } .work .container .child#work5 { top:0px; left:0px; } .work .container .child#work6 { top:0px; left:0px; } } @media (min-width: 640px) and (max-width:1023px ) { .banner { padding-top:73px; } .banner .content { background-size:auto 320px; background-position:center 0px; background-attachment: inherit; } .banner .contents { top:73px; } .banner .contentInfo { top:50%; left:0px; height:200px; width:100%; margin-top:-100px; } .banner .contentInfo .sub { top:17px; left:8px; width:2px; height:120px; } .banner .contentInfo .quan { top:128px; left:0px; width:14px; height:14px; border:2px solid #fff; border-radius:16px; -moz-border-radius:16px; -ms-border-radius:16px; -o-border-radius:16px; -webkit-border-radius:16px; } .banner .contentInfo .title { position:relative; left:32px; top:0px; line-height:50px; font-size:40px; } .banner .contentInfo .info { position:relative; left:32px; top:0px; line-height:32px; padding-top:10px; font-size:20px; } .banner .contentInfo .btn { position:relative; top:0; left:32px; line-height:32px; margin-top:6px; width:110px; height:30px; border-radius:30px; -moz-border-radius:30px; -ms-border-radius:30px; -o-border-radius:30px; -webkit-border-radius:30px; } .banner .bannerNav { bottom:10px; } .banner .bannerNav .bannerNavChild { margin:0 10px; width:10px; height:10px; border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; -webkit-border-radius:10px; } .banner .bannerBg { width:auto; height:320px; opacity: 0; } .about { padding:34px 0 50px 0; } .about .left { width:100%; height:auto; float:none; } .about .left img { width:100%; height:auto; vertical-align:middle; } .about .right { width:100%; height:auto; float:none; } .about .right .title { font-size:25px; line-height:33px; padding:18px 0 12px 0; } .about .right .info { font-size:16px; line-height:28px; } .about .right .btn { position:relative; margin-top:20px; width:130px; height:32px; border:2px solid #dcdcdc; line-height:30px; font-size:16px; border-radius:46px; -moz-border-radius:46px; -moz-border-radius:46px; -ms-border-radius:46px; -o-border-radius:46px; -webkit-border-radius:46px; } .about .right .btn:hover { border:2px solid #fff; } .news { padding:36px 0; } .news .container { height:411px; margin:50px auto 0 auto; } .news .contents { width:418px; height:500px; margin:0 auto; } .news .child { width:418px; } .news .child .childImg { width:418px; height:250px; } .news .child .childTitle { line-height:28px; padding-top:11px; font-size:18px; } .news .child .childTime { font-size:17px; line-height:26px; padding-bottom:10px; } .news .child .childInfo { font-size:16px; line-height:26px; } .news .navBtn { top:80px; height:70px; } .news .navBtn.leftBtn { left:0px; } .news .navBtn.rightBtn { right:0px; } .other { padding:60px 0 0px 0; } .other .child { width:280px; margin:0 auto; display:block; padding-bottom:60px; } .other .child#vedioChild { margin:0 auto; } .other .child .childImg { width:280px; height:280px; border-radius:280px; -moz-border-radius:280px; -ms-border-radius:280px; -o-border-radius:280px; -webkit-border-radius:280px; } .other .child .childImg .childImgc { vertical-align:middle; } .other .child .childImg .childImgc { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .other .child .childImg .childImgc:hover { transform:rotate(20deg) scale(1.4); -moz-transform:rotate(20deg) scale(1.4); -ms-transform:rotate(20deg) scale(1.4); -o-transform:rotate(20deg) scale(1.4); -webkit-transform:rotate(20deg) scale(1.4); } .other .child .childTitle { margin-top:46px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; line-height:52px; color:#666; font-size:25px; } .other .child .childInfo { padding-top:26px; line-height:26px; color:#999999; font-size:14px; } .other .child#vedioChild { cursor:pointer; } .other .child#vedioChild .childImg .childImgc:hover { transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; -webkit-transform:none; } .other .child#vedioChild .childImg .childHide { border-raidus:280px; -moz-border-raidus:280px; -ms-border-raidus:280px; -o-border-raidus:280px; -webkit-border-raidus:280px; position:absolute; top:0; left:0; width:280px; height:280px; background:url(../img/pruplebg.png); } .other .child#vedioChild .childImg .childVedio { position:absolute; top:50%; left:50%; width:76px; height:76px; margin:-38px 0 0 -38px; } .work { position:relative; } .work .workTitle { padding:40px 0; } .work .container { margin:15px auto; height:auto; } .work .container .child { position:relative; width:385px; height:257px; margin:0 auto 35px auto; } .work .container .child .childFoot { height:240px; } .work .container .child .childTitle { font-size:20px; padding-left:10px; line-height:36px; } .work .container .child .childSearchBg { width:66px; height:66px; margin:-33px 0 0 -33px; border-radius:66px; -moz-border-radius:66px; -ms-border-radius:66px; -o-border-radius:66px; -webkit-border-radius:66px; } .work .container .child .childSearch { width:30px; height:24px; margin:-12px 0 0 -15px; } .work .container .child#work1 { top:0px; left:0px; } .work .container .child#work2 { top:0px; left:0px; } .work .container .child#work3 { top:0px; left:0px; } .work .container .child#work4 { top:0px; left:0px; } .work .container .child#work5 { top:0px; left:0px; } .work .container .child#work6 { top:0px; left:0px; } } @media (min-width: 1024px) and (max-width:1199px ) { .banner { padding-top:80px; } .banner .contents { top:80px; } .banner .content { background-size:auto 500px; background-position:center 0px; background-attachment: inherit; } .banner .contentInfo { margin-top:-100px; } .banner .bannerBg { width:auto; height:500px; } .about { padding:60px 0; } .about .left { width:490px; height:230px; } .about .right { width:450px; height:230px; } .about .right .title { padding-bottom:8px; } .news { padding:40px 0; } .news .container { height:340px; margin:56px auto 0 auto; } .news .contents { width:980px; height:340px; } .news .child { width:280px; } .news .child .childImg { width:280px; height:186px; } .news .child .childTitle { line-height:24px; padding-top:20px; font-size:20px; } .news .child .childTime { font-size:14px; line-height:30px; } .news .child .childInfo { font-size:12px; line-height:20px; } .news .navBtn { top:80px; height:70px; } .news .navBtn.leftBtn { left:0px; } .news .navBtn.rightBtn { right:0px; } .other { padding:60px 0 40px 0; } .other .child { width:280px; margin-right:65px; } .other .child .childImg { width:280px; height:280px; background:#EFEFEF; border-radius:280px; -moz-border-radius:280px; -ms-border-radius:280px; -o-border-radius:280px; -webkit-border-radius:280px; } .other .child .childImg .childImgc { vertical-align:middle; } .other .child .childImg .childImgc { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .other .child .childImg .childImgc:hover { transform:rotate(20deg) scale(1.4); -moz-transform:rotate(20deg) scale(1.4); -ms-transform:rotate(20deg) scale(1.4); -o-transform:rotate(20deg) scale(1.4); -webkit-transform:rotate(20deg) scale(1.4); } .other .child .childTitle { margin-top:46px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; line-height:52px; color:#666; font-size:24px; } .other .child .childInfo { padding-top:26px; line-height:26px; color:#999999; font-size:14px; } .other .child#vedioChild { cursor:pointer; } .other .child#vedioChild .childImg .childImgc:hover { transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; -webkit-transform:none; } .other .child#vedioChild .childImg .childHide { border-raidus:280px; -moz-border-raidus:280px; -ms-border-raidus:280px; -o-border-raidus:280px; -webkit-border-raidus:280px; position:absolute; top:0; left:0; width:280px; height:280px; background:url(../img/pruplebg.png); } .other .child#vedioChild .childImg .childVedio { position:absolute; top:50%; left:50%; width:76px; height:76px; margin:-38px 0 0 -38px; } .work .workTitle { padding:40px 0; } .work .container { width:790px; margin:50px auto; height:814px; } .work .container .child#work1 { top:0px; left:0px; } .work .container .child#work2 { top:0px; left:406px; } .work .container .child#work3 { top:277px; left:0px; } .work .container .child#work4 { top:277px; left:406px; } .work .container .child#work5 { top:555px; left:0px; } .work .container .child#work6 { top:555px; left:406px; } } @media (min-width: 1200px) and (max-width:1439px ) { } @media (min-width: 1440px) and (max-width:1920px ) { } @keyframes scaleOpacityShow { 0% { transform: scale(0) rotate(20deg); opacity:0; } 80% { opacity:0.5; } 100% { transform:scale(1) rotate(0deg); opacity:1; } } @-moz-keyframes scaleOpacityShow { 0% { -moz-transform: scale(0) rotate(20deg); opacity:0; } 80% { opacity:0.5; } 100% { -moz-transform:scale(1) rotate(0deg); opacity:1; } } @-webkit-keyframes scaleOpacityShow { 0% { -webkit-transform: scale(0) rotate(20deg); opacity:0; } 80% { opacity:0.5; } 100% { -webkit-transform:scale(1) rotate(0deg); opacity:1; } } @-o-keyframes scaleOpacityShow { 0% { -o-transform: scale(0) rotate(20deg); opacity:0; } 80% { opacity:0.5; } 100% { -o-transform:scale(1) rotate(0deg); opacity:1; } }