h1, h2, h3, h4, h5, h6, p { margin: 0; font-weight: normal; } a, a:hover, a:active, a:visited, a:focus, a:link { text-decoration: none; } ul, ol, li { list-style: none; padding: 0; margin: 0; } i { font-style: normal; } img { border: 0; } @font-face { font-family: 'iconfont'; /* project id 249974 */ src: url('//at.alicdn.com/t/font_249974_5ghpi13iqll.eot'); src: url('//at.alicdn.com/t/font_249974_5ghpi13iqll.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_249974_5ghpi13iqll.woff2') format('woff2'), url('//at.alicdn.com/t/font_249974_5ghpi13iqll.woff') format('woff'), url('//at.alicdn.com/t/font_249974_5ghpi13iqll.ttf') format('truetype'), url('//at.alicdn.com/t/font_249974_5ghpi13iqll.svg#iconfont') format('svg'); } .fonticon:before, .fonticon:after { font-family: 'iconfont'; } .icon_mobile:before { content:"\ea05"; } .icon_wechat:before { content:"\ea04"; } .icon_qq:before { content:"\ea00"; } .icon_tel:before { content:"\ea07"; } /*模版整体控制*/ #laymod_648303 { position: relative; overflow: hidden; width: 100vw; height: 100vh; font-family: "Microsoft Yahei", "PingHei", "Lucida Grande", "Lucida Sans Unicode"; } #laymod_648303 .bg { position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; } #laymod_648303 .bg_img { z-index: 2; } #laymod_648303 .bodyCont_width { position: relative; text-align: center; z-index: 4; } #laymod_648303 .bodyCont_width .bodyContContent .bodyCont_wrapper { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; height: 70vh; } #laymod_648303 .bodyCont_width .bodyContContent h3 { width: 100%; color: #d9dee6; } #laymod_648303 .bodyCont_width .bodyContContent .jh2_worry { position: relative; display: flex; align-items: center; justify-content: center; margin: 0 auto; padding: 0 15px; background-color: #ec633d; } #laymod_648303 .bodyCont_width .bodyContContent .jh2_worry_img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; z-index: 10; width: 100%; height: 100%; background:url() no-repeat center; background-size:cover; } #laymod_648303 .bodyCont_width .bodyContContent .span { position: relative; z-index: 20; text-align: left; color: #fff; } #laymod_648303 .bodyCont_width .bodyContContent .span b { display:block; font-style:normal; font-weight:normal; font-size:12px; opacity: 0.5; } #laymod_648303 .bodyCont_width .bodyContContent ul.span_top { margin-bottom:15px; } #laymod_648303 .bodyCont_width .bodyContContent ol { font-size: 0; margin: 0 -5px; margin-top: 5px; } #laymod_648303 .bodyCont_width .bodyContContent ol li { display:inline-block; vertical-align: middle; margin: 0 5px; position: relative; } #laymod_648303 .bodyCont_width .bodyContContent ol li a { display:flex; align-items: center; justify-content: center; color: #fff; width:30px; height:30px; } #laymod_648303 .bodyCont_width .bodyContContent ol li span { position: absolute; left:50%; bottom:40px; max-width:150px; min-height:34px; line-height: 34px; text-align: center; padding:8px; border-radius: 5px; background: #fff; box-shadow: 0 0 10px 0 rgba(0,0,0,0.15); color: #333; font-size: 14px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 60px); transition: all 0.3s; } #laymod_648303 .bodyCont_width .bodyContContent ol li:nth-child(2) span { width:auto; } #laymod_648303 .bodyCont_width .bodyContContent ol li:nth-child(2) span img { width:134px; } #laymod_648303 .bodyCont_width .bodyContContent ol li span:after { content:""; display:block; width:8px; height:8px; background:#fff; transform: rotate(45deg) translateX(-50%); position:absolute; bottom:-5.5px; left:50%; } #laymod_648303 .bodyCont_width .bodyContContent ol li:hover a { color: #fff; } #laymod_648303 .bodyCont_width .bodyContContent ol li:hover span { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } #laymod_648303 .bodyCont_width .bodyContContent ol li a i { font-size: 24px; } #laymod_648303 .bodyCont_width .bodyContContent .back_btn { width: 100%; margin-top: 30px; text-align: center; } #laymod_648303 .bodyCont_width .bodyContContent .back_btn span { display: inline-block; color: #fff; padding: 10px 15px; border-radius: 3px; font-size: 14px; min-width: 10vw; cursor: pointer; background-color: #ec633d; } @media (min-width: 992px) { #laymod_648303 .bodyCont_width .bodyContContent ul.span_bottom { font-size:14px; } #laymod_648303 .bodyCont_width .bodyContContent h3 { font-size: 150px; line-height: 1; margin-bottom: 4%; } #laymod_648303 .bodyCont_width .bodyContContent .jh2_worry { width: 800px; height: 260px; font-size: 16px; line-height: 2; } #laymod_648303 .bodyCont_width .bodyContContent .span b { margin-top:32px; } } @media (min-width: 768px) and (max-width: 991px) { #laymod_648303 .bodyCont_width .bodyContContent h3 { font-size: 120px; line-height: 1; margin-bottom: 4%; } #laymod_648303 .bodyCont_width .bodyContContent .jh2_worry { width: 90%; height: 220px; font-size: 14px; line-height:1.6; } #laymod_648303 .bodyCont_width .bodyContContent .span b { margin-top:30px; } } @media (max-width: 767px) { #laymod_648303 .bodyCont_width .bodyContContent h3 { font-size: 80px; margin-bottom: 4%; } #laymod_648303 .bodyCont_width .bodyContContent .jh2_worry { width: 100%; height: 220px; font-size: 12px; line-height:1.5; } #laymod_648303 .bodyCont_width .bodyContContent .span b { margin-top:15px; } }