html, body, #fullpage { height: 100%; } .header { position: fixed; } #fullpage .slide { position: relative; } #fullpage .slide .slide-pic img { height: 100%; width: 100%; } #fullpage .slide .slide-info { font-size: 0; position: absolute; top: 0; width: 100%; height: 100%; } #fullpage .slide .slide-info:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; } #fullpage .slide .slide-info-box { display: inline-block; vertical-align: middle; font-size: 16px; width: 100%; color: #242424; } #fullpage .slide .slide-info-box .tip { font-size: 14px; font-weight: bold; } #fullpage .slide .slide-info-box h2 { font-size: 40px; padding: 12px 0 24px; line-height: 45px; } #fullpage .slide .slide-info-box p { font-size: 16px; line-height: 24px; } #fullpage .slide .slide-info-box .more { color: #fff; display: inline-block; width: 214px; height: 58px; line-height: 58px; margin-top: 40px; text-align: center; border: 1px solid #0072b9; border-radius: 30px; background-color: #0072b9; } #fullpage .slide .slide-info-box .more:hover { background-color: transparent; color: #0072b9; } #fullpage .section { position: relative; overflow: hidden; } #fullpage .section .page-bg { position: absolute; bottom: 0; height: 100%; left: 0; top: 0; } #fullpage .section .page-bg img { display: block; float: left; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } #fullpage .section .section-cont { position: absolute; top: 40px; width: 100%; padding: 96px 0 0; color: #0072b9; } #fullpage .section .section-cont h2 { font-size: 42px; font-weight: 400; text-align: center; text-transform: uppercase; line-height: 100%; } #fullpage .section .section-cont h3 { font-size: 32px; font-weight: 400; text-align: center; text-transform: uppercase; margin-top: 28px; line-height: 100%; } #fullpage .section .section-cont.colorf { color: #fff; } .solution .page-cen { position: relative; margin-top: 50px; } .solution .nav_sol { position: absolute; left: 0; top: 128px; width: 50px; border: 1px solid #ccc; padding: 25px 25px; z-index: 2; background: #f2f2f2; } .solution .nav_sol li { border: 2px solid #7e7c7c; border-radius: 6px; width: 45px; height: 45px; line-height: 45px; margin: 5px 0; font-size: 18px; color: #7e7c7c; text-align: center; cursor: pointer; } .solution .nav_sol li.active { border-color: #0072b9; color: #0072b9; } .solution .cont_sol { position: relative; left: 0; top: 0; /* padding-left: 170px; */ } .solution .cont_sol li { /* position: absolute; */ /* left: 0; */ padding-bottom: 20px; padding-left: 170px; position: relative; display: none; } .solution .cont_sol li.active { display: block; } .solution .cont_sol li .tip { position: absolute; left: 0; top: 0; width: 82px; height: 68px; color: #fff; padding: 30px 10px; background: url(/uploads/image/tbsimages/arrow_ttop.png) no-repeat 56px 30px #0072b9; font-size: 32px; line-height: 100%; } .solution .cont_sol li .tip i { font-style: normal; padding-left: 6px; font-weight: lighter; } .solution .cont_sol li .tip span { display: block; font-size: 13px; margin-top: 18px; text-align: center; } .solution .cont_sol li .content h4 { font-size: 18px; font-weight: bold; color: #0072b9; } .solution .cont_sol li .content h6 { font-size: 16px; font-weight: lighter; color: #666; padding-top: 16px; } .solution .cont_sol li .content h6:after { content: ''; width: 34px; height: 2px; display: block; background-color: #0072b9; margin-top: 26px; } .solution .cont_sol li .content .spel { font-size: 16px; color: #0072b9; padding: 24px 0; } .solution .cont_sol li .content p { color: #666; line-height: 26px; width: 456px; } .map .content { position: relative; height: 520px; } .map #containmap { position: absolute; width: 1200px; height: 100%; margin-top: 80px; z-index: 200; } .map .tooltip { position: absolute; z-index: 999; height: 100%; right: 10%; top: 0; } .map .tooltip:after { content: ''; display: inline-block; width: 0; height: 100%; vertical-align: middle; } .map .tooltip .tooltip_box { display: inline-block; width: 280px; padding: 22px 30px; border: 1px solid #00fcff; background-color: rgba(0, 0, 0, 0.25); color: #fff; vertical-align: middle; } .map .tooltip .tooltip_box .title { margin-bottom: 10px; font-size: 18px; } .map .tooltip .tooltip_box .title:after { content: ''; display: block; width: 28px; height: 1px; background-color: #fff; margin-top: 20px; } .map .tooltip .tooltip_box p { line-height: 30px; } .map .tooltip .tooltip_box p span { display: inline-block; width: 196px; vertical-align: top; } .sample .page-cen { position: relative; } .sample .samplebox { /*margin: 0 -115px;*/ overflow: hidden; padding-top: 50px; } .sample .samplelist { overflow: hidden; } .sample li { float: left; width: 700px; padding: 0 15px; /* margin-right: 30px; */ } .sample li img { /*width: 700px; height: 400px;*/ width: 100%; } .caroul .info { padding: 24px 40px; } .caroul .info h4 { font-size: 18px; color: #333; font-weight: bold; margin-bottom: 10px; } .caroul .info .date { color: #0072b9; margin-top: 15px; margin-bottom: 25px; line-height: 100%; } .caroul .info .date:after { content: ''; display: block; width: 70px; height: 1px; background-color: #00a1e0; margin-top: 25px; } .caroul .info p { font-size: 15px; color: #666; line-height: 30px; } .caroul .info .more { /* margin-top: 40px; */ padding-left: 20px; background: url(/uploads/image/tbsimages/icon_a.jpg) no-repeat 0 50%; color: #666; display: block; } .caroul .info .more:hover { color: #0072b9; } .prevsample, .nextsample { position: absolute; top: 50%; width: 64px; height: 63px; margin-top: -32px; background: url(/uploads/image/tbsimages/arrow.png) no-repeat 0 0; cursor: pointer; } .prevsample { left: -103px; } .nextsample { background-position: -64px 0; right: -103px; } .nextsample:hover { background-position: -64px -64px; } .prevsample:hover { background-position: 0 -64px; } .newslist_rel { position: relative; width: 100%; overflow: hidden; margin-top: 50px; } .newslist { /*margin: 50px 0;*/ /*width: 100%;*/ } .newslist li { float: left; } .newslist li .pic { overflow: hidden; } .newslist li img { width: 100%; } .prevnews, .nextnews { position: absolute; top: 0; width: 342px; height: 595px; background: rgba(0, 0, 0, 0.25); text-align: center; cursor: pointer; } .prevnews:before, .nextnews:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .prevnews:after, .nextnews:after { content: ''; display: inline-block; height: 65px; width: 65px; background: url(/uploads/image/tbsimages/arrow_news.png) no-repeat 0 50%; } .prevnews { left: 0; } .nextnews { right: 0; } .nextnews:after { background-position: 100% 50%; } body.wfeditormode .solution a.wfeditormode { float: left; margin-top: 0; } .about { height: 660px !important; } .about .pic { position: absolute; bottom: 0; left: 0; } .about .pic img { display: block; } .about .info { /* width: 800px; */ width: 900px; margin: 0 auto; font-size: 15px; line-height: 30px; margin-top: 60px; text-align: center; } .about ul { text-align: center; margin-top: 50px; } .about ul li { display: inline-block; width: 150px; vertical-align: top; } .about ul li .num { font-size: 54px; line-height: 62px; } .about ul li .sep { height: 134px; background: url(/uploads/image/tbsimages/icon_sep.png) no-repeat 50%; } .gundong { width: 18px; height: 26px; background: url(/uploads/image/tbsimages/mouse.png) no-repeat center left; position: fixed; animation: gunmove 1.5s infinite; -moz-animation: gunmove 1.5s infinite; -o-animation: gunmove 1.5s infinite; -webkit-animation: gunmove 1.5s infinite; -o-animation: gunmove 1.5s infinite; left: 50%; margin-left: -17px; bottom: 10px; cursor: pointer; } .gundong.style02 { background-position: right center; } @keyframes gunmove { 0% { margin-bottom: 20px; opacity: 1; } 100% { margin-bottom: 0px; opacity: 0; } } @-webkit-keyframes gunmove { 0% { bottom: 15%; opacity: 1; } 100% { bottom: 13%; opacity: 0; } } @-moz-keyframes gunmove { 0% { bottom: 15%; opacity: 1; } 100% { bottom: 13%; opacity: 0; } } @-o-keyframes gunmove { 0% { bottom: 15%; opacity: 1; } 100% { bottom: 13%; opacity: 0; } } @media screen and (max-width:1600px) { .sample li .pic { height: 234px; overflow: hidden; } .newslist li .pic { height: 180px; } .sample .samplebox { padding-top: 24px; } .sample li { width: 400px; } .sample .page-cen { width: 880px; } .map #containmap { margin-top: 38px; } #fullpage .section .section-cont { padding-top: 64px; } .solution .page-cen { margin-top: 5px; } #fullpage .section .section-cont h2 { font-size: 34px; line-height: 40px; } #fullpage .section .section-cont h3 { font-size: 28px; margin-top: 5px; } #fullpage .slide .slide-info-box .page-cen { width: 1000px; } .page-cen { width: 1200px; } .solution .page-cen { width: 1000px; } .newslist_rel { margin-top: 28px; } .caroul .info { padding: 14px 20px; } .caroul .info .date { color: #0072b9; margin-top: 14px; margin-bottom: 14px; } .caroul .info .date:after { margin-top: 18px; } .caroul .info .more { margin-top: 10px; } } @media screen and (max-width:1280px) { #fullpage .slide .slide-info-box .page-cen { width: 800px; } .solution .page-cen { width: 800px; } .map .page-cen { width: 1000px; } .sample .page-cen { width: 700px; } .sample li .pic { height: 194px; } .sample li { height: 400px; } .newslist li .pic { height: 102px; } }