.banners-pc { clear: both; height: 856px; display: block; position: relative; top: -85px; } .banners-pc .frame { height: 856px; background: no-repeat center center; background-size: cover; } .banners-mb { display: none; clear: both; height: 700px; } .banners-mb div { height: 100%; } .banners-mb .frame { height: 100%; background: no-repeat center center; background-size: cover; } @media (max-width: 1024px) { .banners-pc { display: none; } .banners-mb { display: block; } } .main1 { margin-bottom: 88px; } .intro { position: relative; margin-bottom: 92px; } .intro .pic { position: absolute; left: 0; top: 0; } .intro .con { width: 62.5%; height: 456px; border: 3px solid #c99947; float: right; margin-top: 43px; padding-left: 26%; } .intro .con .top { float: right; margin-right: 52px; position: relative; width: 3px; height: 28px; background: #c99947; } @media (max-width: 1024px) { .intro .pic { position: inherit; } .intro .pic img { width: 100%; display: block; } .intro .con { float: none; width: 100%; height: auto; padding-left: 30px; padding-bottom: 30px; margin-top: 0; } } .intro .con .top .fa { position: absolute; top: 15px; left: -26px; color: #c99947; font-size: 70px; } .intro .con .top .s1 { position: absolute; top: 12px; left: 7px; width: 45px; height: 45px; border: 1px solid rgba(255,255,255,.25); font-size: 16px; font-weight: bold; z-index: 1; color: #fff; text-align: center; line-height: 45px; border-radius: 50px; } .intro .con .h1 { font-size: 18px; color: #000; font-weight: bold; padding-top: 100px; } .intro .con .p1 { font-size: 12px; color: #666; line-height: 30px; padding: 26px 30px 22px 0; } .intro .con .more { padding: 8px 24px; background: #000; color: #fff; font-size: 12px; display: inline-block; } .main3 { background: url(/uploads/image/tpsimg/index_bg2.jpg) no-repeat; height: 400px; background-size: cover; } .main3 .title { margin: 64px 0 0 18px; border: 3px solid #7b5e2d; padding: 54px 26px 54px 26px; } .main3 .title .h1 { color: #c99947; font-size: 72px; padding-right: 15px; } .main3 .title .p1 { font-size: 24px; color: #fff; font-weight: bold; padding-top: 10px; } .main3 .title .p2 { font-size: 16px; color: rgba(255,255,255,.6); padding-top: 6px; } .main3 .con { padding-top: 96px; } .main3 .con .p1 { max-width: 852px; color: #fff; line-height: 30px; } .main3 .con .more { display: inline-block; padding: 8px 24px; background: #c99947; color: #fff; font-size: 12px; margin-top: 40px; } @media (max-width: 1024px) { .main3 { height: auto; padding: 20px 0; } .main3 .title { float: none; margin: 0; border: 3px solid #7b5e2d; padding: 20px; } .main3 .con { float: none; padding-top: 30px; } .main3 .con .btn { text-align: center; display: block; } } .offset .list { margin-left: -14px; margin-bottom: -30px; } .offset .list > li { float: left; width: 25%; padding-left: 14px; padding-bottom: 30px; } .offset .list > li:nth-child(4n 1){ clear:both;} .offset .list > li .box { display: block; } .offset .list > li .box .pic img { max-width: 100%; width: 100%; } .offset .list > li .box .pic { position: relative; height: 340px; overflow: hidden; } .offset .list > li .box .pic .fdj { position: absolute; top: 45%; left: 45%; width: 40px; height: 40px; background: #fff; border-radius: 50px; text-align: center; line-height: 46px; opacity: 0; transition: .3s ease; } .offset .list > li .box .pic .fdj img { width: 18px; display: inline-block; } .offset .list > li .box .pic:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0; transition: .3s ease; background: rgba(201,153,71,.9); } .offset .list > li .box:hover .pic:before { opacity: 1; } .offset .list > li .box:hover .pic .fdj { opacity: 1; } .offset .list > li .box .font { padding-top: 15px; line-height: 24px; } .offset .list > li .box .font .p2 { color: #999; } .offset .list > li .box .font .h1 { font-weight: bold; color: #333; } @media (max-width: 1024px) { .offset .list > li { width: 50%; } .offset .list > li .box .pic { height: auto; } } @media (max-width: 667px) { .offset .list > li { width: 100%; } }