* { margin: 0; padding: 0; } .html { color: #333; } a { color: #fff; } body { background-color: #f8f9fc; line-height: 1.3; overflow: -Scroll; overflow-x: hidden; } @font-face { font-family: iconfont; src: url(../font/iconfont.eot); src: url(../font/iconfont.eot?#iefix) format('embedded-opentype'), url(../font/iconfont.woff2) format('woff2'), url(../font/iconfont.woff) format('woff'), url(../font/iconfont.ttf) format('truetype'), url(../font/iconfont.svg#iconfont) format('svg'); } .iconfont { font-family: iconfont !important; font-size: 1rem; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } input { outline: 0; border: 0; } input:focus { border: 0; } .nav { position: relative; background-color: #fff; height: 4.4rem; } .nav-container { position: relative; width: 66.666667rem; height: 4.444444rem; margin: 0 auto; } .logo { float: left; display: inline-block; width: 7.5rem; height: 2.375rem; margin-left: 0; margin-top: 1.2rem; cursor: pointer; } .logo img { width: 100%; cursor: pointer; } .nav-box { float: right; display: inline-block; height: 100%; line-height: 4.4rem; } .nav-item { float: left; margin-right: 3.333rem; cursor: pointer; color: #333; } .nav-item:last-child { margin-right: 0; } .nav-item a { color: #333; } .banner { height: 23.333333rem !important; font-size: 2.777778rem !important; } .banner-product { display: inline-block; width: 100%; height: 23.333333rem !important; line-height: 23.333333rem !important; text-align: center !important; background-size: 100% 100% !important; } .cooperation { position: relative; height: 22.222222rem; background: url(https://xiaoyidushu.oss-cn-zhangjiakou.aliyuncs.com/huiwen/partner.png); background-size: 100% 100%; } .cooperation-left { position: absolute; top: 5rem; left: 20rem; width: 22.611111rem; text-align: left; } .cooperation-title { font-size: 2.777778rem; font-weight: 600; color: #fff; margin-bottom: 2.375rem; } .cooperation-content { font-size: 0.777778rem; font-weight: 400; color: #fff; } .cooperation-from { position: absolute; top: 5rem; left: 50.5rem; } .name { display: inline-block; box-sizing: border-box; width: 16.666667rem; height: 3.333333rem; background: rgba(255, 255, 255, 1); border-radius: 1.666667rem; padding: 0 2.222222rem; } .phone { display: inline-block; box-sizing: border-box; width: 16.666667rem; height: 3.333333rem; background: rgba(255, 255, 255, 1); border-radius: 1.666667rem; padding: 0 2.222222rem; margin-left: 2.222222rem; } .shenfen { display: inline-block; box-sizing: border-box; width: 35.555556rem; height: 3.333333rem; background: rgba(255, 255, 255, 1); border-radius: 1.666667rem; padding: 0 2.222222rem; margin-top: 1.875rem; } .subbtn { display: block; width: 11.888889rem; height: 3.333333rem; background: rgba(255, 186, 0, 1); box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.5); border-radius: 1.875rem; padding: 0 2.222222rem; margin-left: 13.3125rem; margin-top: 1.875rem; color: #fff; font-size: 1.333333rem; cursor: pointer; } .top { display: flex; height: 20.222222rem; background-color: #181e38; } .top-container { display: flex; width: 66.666667rem; margin: 0 auto; } .bottom { height: 2.777778rem; background-color: #0b122e; text-align: center; line-height: 2.777778rem; color: #fff; font-size: 14px; opacity: 80%; font-weight: 400; } .bottom a { font-size: 0.777778rem; opacity: 80%; } .top-item { text-align: left; color: #fff; margin-left: 4.444444rem; margin-top: 5rem; vertical-align: top; } .top-item:first-child { margin-left: 0; } .top-item h1 { font-size: 1.111111rem; font-weight: 600; } .top-item p { font-size: 0.777778rem; font-weight: 400; margin-top: 1.222222rem; opacity: 50%; } .top-item p a { color: #fff; opacity: 50%; } .first-top { margin-top: 2rem; } .guanzhu { width: 6.25rem; height: 10rem; margin-left: 9rem; margin-top: 5rem; } .guanzhu:last-child { margin-left: 3.75rem; } .guanzhu img { width: 100%; margin-bottom: 1.25rem; } .guanzhu p { display: block; width: 6.25rem; font-weight: 400; font-size: 0.75rem; color: #fff; text-align: center; } .drop-down-box { display: none; position: absolute; width: 6.1875rem; height: 8.125rem; z-index: 99999999999; } .box1 { top: 4.4rem; left: 30.5rem; } .box2 { top: 4.2rem; left: 39rem; } .drop-down-item { width: 5.125rem; height: 2.222222rem; background-color: #fff; border-bottom: 0.0625rem solid #eee; font-size: 0.875rem; text-align: center; line-height: 2.222222rem; } @media screen and (min-width: 751px) { #pc { display: block; } #mobile { display: none; } } @media screen and (max-width: 750px) { html { font-size: 0.5rem; } #pc { display: none; } #mobile { display: block; } a { color: #fff; } .menu { position: absolute; right: 1.5rem; top: 1.5rem; width: 2rem; height: 2rem; } .aside { position: absolute; top: 4.4rem; right: 0; width: 80vw; background-color: #fff; z-index: 999999999; box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.16); } .aside-menu-item { display: block; height: 4rem; line-height: 4rem; padding: 0 3rem; font-size: 14px; border-bottom: 1px solid #f0f0f0; } .aside-menu-item a, .product-menu-item a { display: block; color: #333; line-height: 4rem; } .back { font-size: 22px; vertical-align: middle; color: #999; margin-right: 0.5rem; } .product-menu-item { display: block; height: 4rem; line-height: 4rem; background-color: #f5f5f5; padding: 0 3rem; font-size: 14px; border-bottom: 1px solid #f0f0f0; } .banner { font-size: 2.222222rem !important; height: 13.9375rem !important; line-height: 13.9375rem !important; background-size: contain; } .branch-title { font-size: 2.222222rem !important; } .branch-explain { width: 90vw !important; line-height: 1.5rem; text-align: left; } .logo { margin-left: 1.875rem; } .consulting_service { position: fixed; bottom: 0; display: flex; height: 6rem; width: 100vw; z-index: 999999999; } .hotline { width: 50%; height: 100%; text-align: center; line-height: 6rem; background-color: #ffd45e; font-size: 2rem; } .hotline a { color: #222; } .online_consultation a { color: #222; } .hotline img { width: 3rem; height: 3rem; vertical-align: middle; margin-right: 0.625rem; } .online_consultation { width: 50%; height: 100%; background-color: #fbbc0e; text-align: center; line-height: 6rem; font-size: 2rem; } .online_consultation img { width: 3rem; height: 3rem; vertical-align: middle; margin-right: 0.625rem; } footer { margin-bottom: 6.15rem; } .cooperation { height: 36.777778rem; text-align: center; } .cooperation-left { width: 90vw; left: 50%; transform: translateX(-50%); text-align: center; } .cooperation-from { position: relative; width: 90%; height: 20rem; top: 16rem; left: 50%; transform: translateX(-50%); } .cooperation-content { line-height: 1.4; } .name, .phone, .shenfen { width: 81% !important; } .phone { margin-left: 0; margin-top: 1.875rem; } .subbtn { position: absolute; left: 50%; transform: translateX(-50%); width: 81% !important; color: #fff; box-shadow: none; font-size: 18px; margin-right: 0; margin-left: 0; } .top { display: flex; flex-wrap: wrap; height: 56.125rem; padding-top: 1.875rem; } .top-item { display: flex; width: 100vw; flex-wrap: wrap; box-sizing: border-box; padding: 0 5vw; margin: 0; padding-bottom: 1.875rem; } .top-item:first-child { margin-left: 0; } .top-item h1 { width: 100%; height: 1.5rem; } .top-item p { margin-right: 1.875rem; opacity: 50%; } .guanzhu-container { display: flex; justify-content: center; width: 100vw; } .guanzhu { width: 10rem; height: 12.222222rem; margin: 0; } .guanzhu p { width: 100%; } }