@charset "utf-8"; .all * { transition: all .3s; -moz-transition: all .3s; /* Firefox 4 */ -webkit-transition: all .3s; /* Safari 和 Chrome */ -o-transition: all .3s; /* Opera */ } .all-eac * { transition: all .3s ease-in; -moz-transition: all .3s ease-in; /* Firefox 4 */ -webkit-transition: all .3s ease-in; /* Safari 和 Chrome */ -o-transition: all .3s ease-in; /* Opera */ } .all5-eac * { transition: all .5s ease-in; -moz-transition: all .5s ease-in; /* Firefox 4 */ -webkit-transition: all .5s ease-in; /* Safari 和 Chrome */ -o-transition: all .5s ease-in; /* Opera */ } html>body { /*font-family: "fzlt";*/ font-family: -apple-system, SF UI Text, Arial, Source Han Sans CN, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; background: #1270db; } a { text-decoration: none; } input:focus, textarea:focus, button:focus { outline: none; } .cle:after { content: ''; display: block; clear: both; overflow: hidden; height: 0; } #menu_ico { position: fixed; right: 30px; top: 30px; z-index: 88; width: 34px; height: 34px; display: flex; justify-content: center; align-items: center; } #menu_ico a { display: block; width: 34px; height: 34px; transition: all .2s; -moz-transition: all .2s; /* Firefox 4 */ -webkit-transition: all .2s; /* Safari 和 Chrome */ -o-transition: all .2s; /* Opera */ } #menu_ico a.mot { transform: rotate(90deg); -ms-transform: rotate(90deg); /* IE 9 */ -moz-transform: rotate(90deg); /* Firefox */ -webkit-transform: rotate(90deg); /* Safari 和 Chrome */ -o-transform: rotate(90deg); /* Opera */ } #menu_ico a i { width: 34px; height: 34px; opacity: 1; filter: Alpha(opacity=100); position: absolute; top: 50%; left: 50%; margin: -18px 0 0 -18px; text-indent: -9999px; } #menu_ico a i.a { background: url(../images/caidan_ico2.png) no-repeat center; background-size: 100%; } #menu_ico a i.b { background: url(../images/close_ico2.png) no-repeat center; background-size: 100%; } #menu_ico a i.a.hs { background: url(../images/caidan_ico1.png) no-repeat center; background-size: 100%; } #menu_ico a i.b.hs { background: url(../images/close_ico1.png) no-repeat center; background-size: 100%; } #menu_ico a.mot i.a { opacity: 0; filter: Alpha(opacity=0); } #menu_ico a i.b { opacity: 0; filter: Alpha(opacity=0); } #menu_ico a.mot i.b { opacity: 1; filter: Alpha(opacity=100); } .menu_nav_wrp { display: none; width: 300px; z-index: 111; background: rgba(0, 0, 0, .4); } .nav_menu { padding-top: 135px; padding-left: 45px; padding-right: 25px; padding-bottom: 40px; height: 100%; box-sizing: border-box; } .nav_menu .solt { height: 100%; overflow: auto; } .nav_menu .m-item { padding: 15px 0; overflow: hidden; } .nav_menu .m-item .m-hd { float: left; width: 90px; text-align: left; padding: 4px 0 0; cursor: default; } .nav_menu .m-item .m-hd, .nav_menu .m-item .m-hd a { color: rgba(255, 255, 255, .6); font-size: 16px; font-weight: bold; } .nav_menu .m-item .m-hd:hover, .nav_menu .m-item .m-hd.cur, .nav_menu .m-item .m-hd a:hover, .nav_menu .m-item .m-hd a.cur { color: #fff; } .nav_menu .m-item .m-hd.move a { color: #fff; } .nav_menu .m-item .m-bd { float: left; width: 150px; padding-left: 20px; display: none; } .nav_menu .m-item .m-bd p { margin: 0; padding: 5px 0; } .nav_menu .m-item .m-bd p a { display: inline-block; width: auto; font-size: 14px; color: rgba(255, 255, 255, .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav_menu .m-item .m-bd p a:hover, .nav_menu .m-item .m-bd p a:focus, .nav_menu .m-item .m-bd p a.oe { color: #fff; } .nav_menu .sear-wrp { width: 178px; height: 25px; background: rgba(255, 255, 255, .5); border-radius: 5px; margin-top: 30px; } .nav_menu .sear-wrp .sear-l { float: left; margin-top: 5px; height: 15px; line-height: 15px; border-right: 2px solid #fff; color: #fff; font-size: 13px; padding: 0 10px; } .nav_menu .sear-wrp .sear-txt { float: left; width: 57px; height: 15px; background: none; padding: 0 10px; border: none; margin-top: 5px; color: #fff; font-size: 12px; } .nav_menu .sear-wrp .sear-btn { float: right; width: 16px; height: 16px; background: url(../images/sico.png) no-repeat center; background-size: 16px; border: none; padding: 0; margin-right: 10px; margin-top: 5px; cursor: pointer; } @media (max-width: 1023px) { .menu_nav_wrp { width: 100%; background: rgba(0, 0, 0, .8); } #menu_ico { border-radius: 50%; background: #fff; top: auto; bottom: 30px; width: 40px; height: 40px; box-shadow: 0 0 10px rgba(0, 0, 0, .2); } #menu_ico a { width: 40px; height: 40px; } #menu_ico a i { color: #000; width: 40px; height: 40px; margin: -20px 0 0 -20px; } #menu_ico a i.a, #menu_ico a i.a.hs { background: url(../images/caidan_ico1.png) no-repeat center; background-size: 50%; } #menu_ico a i.b, #menu_ico a i.b.hs { background: url(../images/close_ico1.png) no-repeat center; background-size: 50%; } } @media (max-width: 1023px) { .menu_nav_wrp { width: 100%; background: rgba(0, 0, 0, .5); } #menu_ico { border-radius: 50%; background: #fff; top: auto; bottom: 30px; width: 40px; height: 40px; box-shadow: 0 0 10px rgba(0, 0, 0, .2); } #menu_ico a i { color: #000; } } @media (max-width: 600px) { .menu_nav_wrp { width: 100%; } } @media (min-width: 1024px) { .menu_nav_wrp { width: 300px; } #menu_ico { right: 30px; top: 30px; } } @media (min-width: 1440px) { .menu_nav_wrp { width: 395px; } #menu_ico { right: 40px; top: 40px; } } @media (min-width: 1920px) { .menu_nav_wrp { width: 395px; } #menu_ico { right: 60px; top: 60px; } } .index {} .index img { display: block; margin: 0 auto; width: 70% } /*简介*/ .w_wrap { width: 100%; margin: 0 auto; padding: 140px 0; } .jj-c { padding: 0 40px; } .jj-c .mmt-left { float: left; width: 580px; } .jj-c .gg-title {} .jj-c .gg-title .t1 { font-size: 36px; color: #fff; } .jj-c .gg-title .t2 { font-size: 30px; color: #fff; line-height: 1.6; } .jj-c .gg-title .e { display: block; width: 20px; height: 3px; background: #fff; margin: 25px 0; } .jj-c .gg-neir { margin-top: 145px; } .jj-c .gg-neir p { color: #fff; font-size: 20px; line-height: 1.6; } .jj-c .mmt-right { float: right; margin-top: 120px; width: 650px; } .jj-c .mmt-right img { display: block; width: 100%; } @media (max-width: 1023px) { .w_wrap { width: 100%; padding: 60px 0; } .jj-c { padding: 0 40px; } .jj-c .gg-title .t1 { font-size: 20px; color: #fff; } .jj-c .gg-title .t2 { font-size: 18px; color: #fff; line-height: 1.6; } .jj-c .gg-title .e { margin: 20px 0; height: 2px } .jj-c .mmt-left { width: 100%; } .jj-c .mmt-right { width: 100%; margin-top: 10px; padding: 10px 20px; box-sizing: border-box; } .jj-c .gg-neir { margin-top: 40px; } .jj-c .gg-neir p { font-size: 14px; } } @media (max-width: 600px) { .w_wrap { width: 100%; padding: 40px 0; } .jj-c { padding: 0 20px; } .jj-c .gg-title .t1 { font-size: 16px; margin-top: 30px; color: #fff; } .jj-c .gg-title .t2 { font-size: 14px; color: #fff; line-height: 1.6; } .jj-c .gg-title .e { margin: 10px 0; height: 2px } .jj-c .mmt-left { width: 100%; } .jj-c .mmt-right { width: 100%; margin-top: 10px; padding: 10px 20px; box-sizing: border-box; } .jj-c .gg-neir { margin-top: 40px; } .jj-c .gg-neir p { font-size: 12px; } } @media (min-width: 1024px) { .w_wrap { width: 1000px; padding: 60px 0; } .jj-c { padding: 0 0; } .jj-c .gg-title .t1 { font-size: 26px; color: #fff; } .jj-c .gg-title .t2 { font-size: 22px; color: #fff; line-height: 1.6; } .jj-c .gg-title .e { margin: 15px 0; } .jj-c .mmt-left { width: 400px; } .jj-c .mmt-right { width: 450px; margin-top: 90px; } .jj-c .gg-neir { margin-top: 80px; } .jj-c .gg-neir p { font-size: 16px; } } @media (min-width: 1240px) { .w_wrap { width: 1200px; padding: 80px 0; } .jj-c { padding: 0 0; } .jj-c .gg-title .t1 { font-size: 30px; margin-top: 30px; color: #fff; } .jj-c .gg-title .t2 { font-size: 24px; color: #fff; line-height: 1.6; } .jj-c .gg-title .e { margin: 15px 0; } .jj-c .mmt-left { width: 480px; } .jj-c .mmt-right { width: 550px; margin-top: 100px; } .jj-c .gg-neir { margin-top: 80px; } .jj-c .gg-neir p { font-size: 18px; } } @media (min-width: 1440px) { .w_wrap { width: 1366px; padding: 100px 0; } .jj-c { padding: 0 0; } .jj-c .gg-title .t1 { font-size: 30px; color: #fff; } .jj-c .gg-title .t2 { font-size: 24px; color: #fff; line-height: 1.6; } .jj-c .gg-title .e { margin: 15px 0; } .jj-c .mmt-left { width: 480px; } .jj-c .mmt-right { width: 650px; margin-top: 120px; } .jj-c .mmt-right img { width: 100%; } .jj-c .gg-neir { margin-top: 80px; } .jj-c .gg-neir p { font-size: 20px; } } @media (min-width: 1920px) { .w_wrap { width: 1600px; margin: 0 auto; padding: 140px 0; } .jj-c { padding: 0 40px; } .jj-c .mmt-left { float: left; width: 530px; } .jj-c .gg-title {} .jj-c .gg-title .t1 { font-size: 36px; color: #fff; } .jj-c .gg-title .t2 { font-size: 30px; color: #fff; line-height: 1.6; } .jj-c .gg-title .e { display: block; width: 20px; height: 3px; background: #fff; margin: 25px 0; } .jj-c .gg-neir { margin-top: 145px; } .jj-c .gg-neir p { color: #fff; font-size: 20px; line-height: 1.6; } .jj-c .mmt-right { float: right; margin-top: 140px; width: 750px; } .jj-c .mmt-right img { width: 100%; } } /*业绩*/ .makto { width: 100%; } .makto .mo-item { float: left; width: 50%; border-left: 1px solid #fff; box-sizing: border-box; padding-left: 20px; overflow: hidden; } .makto .mo-item.pt { padding-top: 70px; } .makto .mo-item .t1 { color: #fff; font-size: 20px; line-height: 1.6; } .makto .mo-item .t2 { color: #fff; font-size: 90px; line-height: 1.1; margin-top: 10px; } .makto .mo-item .t2 span { font-size: 20px; margin-left: 5px; } .makto .mo-item .t2 span.bf { font-size: 40px; } .makto.amc { width: 50%; float: left; } .makto.amc .mo-item { width: 100%; } .jj-c .tj_im { float: right; width: 50%; } .jj-c .tj_im img { display: block; width: 95%; margin: 60px auto 0; } @media (max-width: 1023px) { .makto .mo-item.pt { padding-top: 30px; } .makto .mo-item .t1 { color: #fff; font-size: 20px; line-height: 1.6; } .makto .mo-item .t2 { color: #fff; font-size: 60px; line-height: 1.1; margin-top: 10px; } .makto .mo-item .t2 span { font-size: 20px } .makto .mo-item .t2 span.bf { font-size: 40px; } .jj-c .tj_im img { margin: 30px auto 0; width: 262px; } .jj-c .mmt-right.perf { padding: 10px 0; } } @media (max-width: 600px) { .makto .mo-item.pt { padding-top: 20px; } .makto .mo-item .t1 { color: #fff; font-size: 16px; line-height: 1.6; } .makto .mo-item .t2 { color: #fff; font-size: 50px; line-height: 1.1; margin-top: 10px; } .makto .mo-item .t2 span { font-size: 20px } .makto .mo-item .t2 span.bf { font-size: 40px; } .jj-c .tj_im img { margin: 30px auto 0; width: auto; height: 180px; } .jj-c .mmt-right.perf { padding: 10px 0; } } @media (max-width: 415px) { .makto .mo-item.pt { padding-top: 20px; } .makto .mo-item .t1 { color: #fff; font-size: 14px; line-height: 1.6; } .makto .mo-item .t2 { color: #fff; font-size: 35px; line-height: 1.2; margin-top: 10px; } .makto .mo-item .t2 span { font-size: 14px; } .makto .mo-item .t2 span.bf { font-size: 20px; } .jj-c .tj_im img { margin: 30px auto 0; width: auto; height: 150px; } .jj-c .mmt-right.perf { padding: 10px 0; } } @media (max-width: 374px) { .makto .mo-item { padding-left: 10px } .makto .mo-item.pt { padding-top: 20px; } .makto .mo-item .t1 { color: #fff; font-size: 10px; line-height: 1.6; } .makto .mo-item .t2 { color: #fff; font-size: 28px; line-height: 1.2; margin-top: 10px; } .makto .mo-item .t2 span { font-size: 14px; } .makto .mo-item .t2 span.bf { font-size: 20px; } .jj-c .tj_im img { margin: 30px auto 0; width: auto; height: 125px; } .jj-c .mmt-right.perf { padding: 10px 0; } } @media (min-width: 1024px) { .makto .mo-item.pt { padding-top: 30px; } .makto .mo-item .t1 { color: #fff; font-size: 14px; line-height: 1.6; } .makto .mo-item .t2 { color: #fff; font-size: 55px; line-height: 1.2; margin-top: 10px; } .makto .mo-item .t2 span { font-size: 16px; } .makto .mo-item .t2 span.bf { font-size: 30px; } .jj-c .tj_im img { margin: 50px auto 0; } .jj-c .mmt-right.perf { padding: 10px 0; } } @media (min-width: 1240px) { .makto .mo-item.pt { padding-top: 40px; } .makto .mo-item .t1 { color: #fff; font-size: 18px; line-height: 1.6; } .makto .mo-item .t2 { color: #fff; font-size: 70px; line-height: 1.1; margin-top: 10px; } .makto .mo-item .t2 span { font-size: 20px } .makto .mo-item .t2 span.bf { font-size: 40px; } } @media (min-width: 1440px) { .makto .mo-item.pt { padding-top: 50px; } .makto .mo-item .t1 { color: #fff; font-size: 20px; line-height: 1.6; } .makto .mo-item .t2 { color: #fff; font-size: 80px; line-height: 1.1; margin-top: 10px; } .makto .mo-item .t2 span { font-size: 20px } .makto .mo-item .t2 span.bf { font-size: 40px; } } @media (min-width: 1920px) { .makto .mo-item.pt { padding-top: 70px; } .makto .mo-item .t1 { color: #fff; font-size: 20px; line-height: 1.6; } .makto .mo-item .t2 { color: #fff; font-size: 90px; line-height: 1.1; margin-top: 10px; } .makto .mo-item .t2 span { font-size: 20px } .makto .mo-item .t2 span.bf { font-size: 40px; } } .news { padding: 0 20px; } .news_title { font-size: 36px; margin-top: 30px; color: #fff; } .news_list { margin-top: 1%; border-top: 1px solid #fff; } .news_list .item { border-bottom: 1px solid #fff; padding: 30px 0; } .news_list .item .l_left { float: left; width: 195px; color: #fff; font-size: 20px; line-height: 1.6; } .news_list .item .l_right { float: left; width: calc(100% - 235px); padding-left: 20px } .news_list .item .l_right .t1 { color: #fff; font-size: 20px; line-height: 1.6; } .news_list .item .l_right .t2 { color: #fff; font-size: 16px; line-height: 1.6; margin-top: 10px; } @media (max-width: 1023px) { .news_title { font-size: 30px; margin-top: 30px; } .news_list { margin-top: 40px; } .news_list .item { padding: 15px 0; } .news_list .item .l_left { width: 100%; font-size: 14px; } .news_list .item .l_right { width: 100%; padding-left: 0; } .news_list .item .l_right .t1 { font-size: 18px; } .news_list .item .l_right .t2 { font-size: 14px; opacity: .7; margin-top: 5px; } } @media (max-width: 415px) { .news_list .item .l_right .t1 { font-size: 16px; } .news_list .item .l_right .t2 { font-size: 12px; opacity: .7; margin-top: 5px; } } /*联系我们*/ .jj-c .gg-title .t3 { font-size: 22px; color: #fff; line-height: 1.6; } .jj-c .gg-title .t4 { font-size: 34px; color: #fff; line-height: 1.6; } .mmt-right.contacl { margin-top: 30px } .mmt-right.contacl img { width: 80%; margin: 0 auto } .contacl_neir { margin-top: 50px; } .contacl_neir .item { border-left: 1px solid #fff; padding-left: 20px; margin-bottom: 30px; } .contacl_neir .item p { color: #fff; font-size: 16px; } .contacl_neir .item p.hg { line-height: 1.6; } @media (max-width: 1023px) { .mmt-right.contacl { margin-top: 0; padding: 10px 20px; } .mmt-right.contacl img { width: 100%; } .jj-c .gg-title .t3 { font-size: 14px; } .jj-c .gg-title .t4 { font-size: 20px; } .contacl_neir { margin-top: 40px; } .contacl_neir .item p { color: #fff; font-size: 16px; margin: 10px 0 } } @media (max-width: 600px) { .contacl_neir .item p { color: #fff; font-size: 14px; margin: 10px 0 } } @media (min-width: 1024px) { .mmt-left.contacl { width: 400px; } .mmt-right.contacl { margin-top: 50px } .mmt-right.contacl img { width: 90%; } .jj-c .gg-title .t3 { font-size: 14px; } .jj-c .gg-title .t4 { font-size: 20px; } .contacl_neir { margin-top: 20px; } .contacl_neir .item p { margin: 10px 0 } } @media (min-width: 1240px) { .mmt-right.contacl { margin-top: 20px } .contacl_neir .item p { margin: 12px 0 } } @media (min-width: 1440px) { .mmt-left.contacl { width: 650px; } .mmt-right.contacl { margin-top: 30px } .mmt-right.contacl img { width: 80%; margin: 0 auto } .jj-c .gg-title .t3 { font-size: 22px; } .jj-c .gg-title .t4 { font-size: 34px; } .contacl_neir { margin-top: 50px; } .contacl_neir .item p { margin: 16px 0 } } @media (min-width: 1440px) { .mmt-left.contacl { width: 650px; } .mmt-right.contacl { margin-top: 30px } .mmt-right.contacl img { width: 75%; margin: 0 auto } } /*主营业务---资产管理*/ .bg_violet { background: #864ed7; } .gg-neir .more { display: block; width: 98px; height: 38px; border: 1px solid #fff; border-radius: 5px; text-align: center; line-height: 38px; color: #fff; font-size: 20px; margin-top: 60px; } .gg-neir.asset { margin-top: 60px; } .gg-neir.asset p { font-size: 20px; } .mmt-right.asset {} .mmt-right.asset img {} .mmt-left.asset { width: 650px; } @media (max-width: 1023px) { .mmt-right.asset { padding: 0 0; margin-top: 0; } .mmt-left.asset { width: 100%; } .gg-neir.asset { margin-top: 30px; } .gg-neir.asset p { font-size: 14px; opacity: .9; } .gg-neir .more { font-size: 16px } } @media (max-width: 600px) { .gg-neir.asset p { font-size: 12px; } } @media (max-width: 415px) {} @media (max-width: 374px) {} @media (min-width: 1024px) { .mmt-left.asset { width: 460px; } .gg-neir.asset p { font-size: 14px; } .mmt-right.asset img { width: 90%; } } @media (min-width: 1240px) { .mmt-left.asset { width: 515px; } .gg-neir.asset p { font-size: 16px; } .mmt-right.asset img { width: 90%; } } @media (min-width: 1440px) { .mmt-right.asset { margin-top: 145px; } .mmt-right.asset img { width: 80%; float: right; } .mmt-left.asset { width: 600px; } .gg-neir.asset p { font-size: 18px; } } @media (min-width: 1920px) { .gg-neir.asset p { font-size: 20px; } .mmt-right.asset img { width: 90%; } } /*资产管理更多*/ .bg_e9e9e9 { background: #e9e9e9; } .asm_head { position: relative; background: #864ed7; overflow: hidden; } .asm_head .as_img { width: 980px; margin-left: 20% } .asm_head .as_img img { display: block; width: 713px; } .asm_head:after { content: ''; position: absolute; left: 0; top: 0; z-index: 2; border-top: 200px solid #e9e9e9; border-right: 100px solid transparent; } .asm_head:before { content: ''; position: absolute; right: 0; bottom: 0; z-index: 2; border-bottom: 200px solid #e9e9e9; border-left: 100px solid transparent; } .asm_body { position: relative; width: 980px; margin-left: 20%; margin-top: 100px; } .asm_b_title { font-size: 32px; font-weight: bold; } .asm_b_e { display: block; width: 20px; height: 3px; background: #000; margin: 25px 0; } .asm_b_n { padding: 10px 0 5px; } .asm_b_n a { display: inline-block; font-size: 30px; color: #8c8c8c; margin-right: 30px; margin-bottom: 20px; } .asm_b_n a:hover, .asm_b_n a.on { color: #000 } .asm_b_c { border-top: 1px solid #747474; margin-bottom: 40px; } .asm_b_c .title { padding-top: 60px; line-height: 1.6; color: #000; font-size: 20px; font-weight: bold; } .asm_b_c .cont { margin-top: 20px; } .asm_b_c .cont p { color: #000; font-size: 20px; line-height: 1.6; } @media (max-width: 1023px) { .asm_head .as_img { width: 100%; margin-left: 0 } .asm_head .as_img img { margin-left: 0; width: 100% } .asm_body { margin-left: 0; width: 100%; padding: 0 30px; box-sizing: border-box; } .asm_b_title { font-size: 26px; } .asm_b_n { overflow: auto; white-space: nowrap; } .asm_b_n a { font-size: 26px; } .asm_b_e { margin: 20px 0; } .asm_b_c .title { font-size: 18px; } .asm_b_c .cont p { font-size: 18px; } } @media (max-width: 600px) { .asm_head:after { border-top: 100px solid #e9e9e9; border-right: 50px solid transparent; } .asm_head:before { border-bottom: 100px solid #e9e9e9; border-left: 50px solid transparent; } .asm_body { margin-top: 40px; padding: 0 20px } .asm_b_title { font-size: 18px; } .asm_b_e { margin: 10px 0; width: 10px; height: 2px; } .asm_b_n a { font-size: 18px; margin-right: 15px; margin-bottom: 10px; } .asm_b_c .title { font-size: 14px; padding-top: 30px; } .asm_b_c .cont { margin-top: 10px } .asm_b_c .cont p { font-size: 14px; } } @media (min-width: 1024px) { .asm_head .as_img { width: 980px; margin-left: 34px; } .asm_body { margin-left: 34px; } } @media (min-width: 1240px) { .asm_head .as_img { width: 980px; margin-left: 15% } .asm_body { margin-left: 15% } } @media (min-width: 1440px) { .asm_head .as_img { width: 980px; margin-left: 20% } .asm_body { margin-left: 20% } } @media (min-width: 1920px) { .asm_head .as_img { width: 980px; margin-left: 20% } .asm_body { margin-left: 20% } } /*主营业务---财富管理---家族信托*/ .bg_orange { background: #ec7e55; } .wel_head { position: relative; background: #ec7e55; overflow: hidden; } .wel_head .wel_img { width: 1500px; margin: 0 auto; } .wel_head .wel_img img { display: block; width: 713px; } .wel_head:after { content: ''; position: absolute; left: 0; top: 0; z-index: 2; border-top: 200px solid #e9e9e9; border-right: 100px solid transparent; } .wel_head:before { content: ''; position: absolute; right: 0; bottom: 0; z-index: 2; border-bottom: 200px solid #e9e9e9; border-left: 100px solid transparent; } .wel_body { position: relative; width: 1500px; margin: 100px auto 0; } .wel_b_title { font-size: 32px; font-weight: bold; } .wel_b_e { display: block; width: 20px; height: 3px; background: #000; margin: 25px 0; } .wel_b_n { padding: 10px 0 5px; } .wel_b_n a { display: inline-block; font-size: 30px; color: #8c8c8c; margin-right: 30px; margin-bottom: 20px; } .wel_b_n a:hover, .wel_b_n a.on { color: #000 } .wel_b_c { border-top: 1px solid #747474; border-bottom: 1px solid #747474; display: flex; justify-content: space-between; align-items: center; padding: 30px 0; } .wel_b_c .wel_bc_left { flex: 1; margin-right: 210px; } .wel_b_c .wel_bc_left .title { padding-top: 30px; line-height: 1.6; color: #000; font-size: 20px; font-weight: bold; } .wel_b_c .wel_bc_left .cont { margin-top: 20px; } .wel_b_c .wel_bc_left .cont p { color: #000; font-size: 20px; line-height: 1.6; } .wel_b_c .wel_bc_right { width: 540px; } .wel_b_c .wel_bc_right img { display: block; width: 100%; } .wel_b_ts { position: relative; border-bottom: 1px solid #747474; display: flex; justify-content: space-between; align-items: flex-start; padding: 30px 0; } .wel_b_ts .item { width: calc(33.33% - 20px); cursor: default; opacity: .5; } .wel_b_ts .aft { position: absolute; bottom: -28px; left: 13%; width: 74px; height: 28px; background: url(../images/xj_xb.png) no-repeat center; transition: all .5s; } .wel_b_ts.c1 .aft { left: 13%; } .wel_b_ts.c2 .aft { left: 47%; } .wel_b_ts.c3 .aft { left: 81%; } .wel_b_ts .item.op { opacity: 1 } .wel_b_ts .item .title { padding-top: 30px; line-height: 1.6; color: #000; font-size: 20px; font-weight: bold; } .wel_b_ts .item .cont { margin-top: 20px; } .wel_b_ts .item .cont p { color: #000; font-size: 20px; line-height: 1.6; } .wel_b_ts .item .xj { position: absolute; top: 100%; left: 0; width: 100%; display: none; padding-top: 40px; padding-bottom: 40px; } .wel_b_ts .item .xj .cont { width: calc(100% - 740px) } @media (max-width: 1023px) { .wel_head .wel_img { width: 100%; margin-left: 0 } .wel_head .wel_img img { margin-left: 0; width: 100% } .wel_b_title { font-size: 26px; } .wel_body { margin-left: 0; width: 100%; padding: 0 30px; box-sizing: border-box; } /* .wel_b_n{overflow: auto;white-space:nowrap;}*/ .wel_b_n a { font-size: 26px; } .wel_b_e { margin: 20px 0; } .wel_b_c .wel_bc_left { margin-right: 70px; } .wel_b_c .wel_bc_right { width: 340px } .wel_b_c .wel_bc_left .title { font-size: 16px; } .wel_b_c .wel_bc_left .cont p { font-size: 16px; } .wel_b_ts .item .title { font-size: 16px; } .wel_b_ts .item .cont p { font-size: 16px; } .wel_b_ts .item .xj .cont { width: 100%; } .wel_b_ts .aft { left: 11%; } .wel_b_ts.c1 .aft { left: 11% } .wel_b_ts.c2 .aft { left: 45%; } .wel_b_ts.c3 .aft { left: 79%; } } @media (max-width: 800px) { .wel_b_title { font-size: 22px; } .wel_body { margin-top: 60px } /* .wel_b_n{overflow: auto;white-space:nowrap;}*/ .wel_b_n a { font-size: 22px; margin-right: 15px; margin-bottom: 10px; } .wel_b_e { margin: 15px 0; } .wel_b_c .wel_bc_left { margin-right: 70px; } .wel_b_c .wel_bc_right { width: 240px } .wel_b_c .wel_bc_left .title { font-size: 16px; padding-top: 15px; } .wel_b_c .wel_bc_left .cont p { font-size: 16px; } .wel_b_ts .item .title { font-size: 14px; padding-top: 15px; } .wel_b_ts .item .cont p { font-size: 14px; } .wel_b_ts .item .xj .cont { width: 100%; } .wel_b_ts .aft { left: 10%; } .wel_b_ts.c1 .aft { left: 10% } .wel_b_ts.c2 .aft { left: 45%; } .wel_b_ts.c3 .aft { left: 79%; } } @media (max-width: 600px) { .wel_head:after { border-top: 100px solid #e9e9e9; border-right: 50px solid transparent; } .wel_head:before { border-bottom: 100px solid #e9e9e9; border-left: 50px solid transparent; } .wel_b_title { font-size: 18px; } .wel_body { margin-top: 40px; padding: 0 20px } .wel_b_e { margin: 15px 0; height: 2px; width: 15px } /*.wel_b_n{overflow: auto;white-space:nowrap;}*/ .wel_b_n a { font-size: 18px; margin-right: 15px; margin-bottom: 10px; } .wel_b_c { flex-direction: column; } .wel_b_c .wel_bc_left { margin-right: 0; } .wel_b_c .wel_bc_right { width: 80% } .wel_b_c .wel_bc_left .title { font-size: 16px; padding-top: 0; } .wel_b_c .wel_bc_left .cont { margin-top: 0; } .wel_b_c .wel_bc_left .cont p { font-size: 16px; } .wel_b_ts .item { width: calc(33.33% - 10px) } .wel_b_ts .item .title { font-size: 12px; padding-top: 0; } .wel_b_ts .item .cont p { font-size: 12px; } .wel_b_ts .item .xj .cont { width: 100%; } .wel_b_ts .aft { left: 8%; width: 36px; background-size: 36px; background-position: top; } .wel_b_ts.c1 .aft { left: 8%; } .wel_b_ts.c2 .aft { left: 45%; } .wel_b_ts.c3 .aft { left: 80%; } } @media (min-width: 1024px) { .wel_head .wel_img { width: 980px; } .wel_body { width: 980px; } .wel_b_title { font-size: 26px; } /*.wel_b_n{overflow: auto;white-space:nowrap;}*/ .wel_b_n a { font-size: 26px; } .wel_b_e { margin: 20px 0; } .wel_b_c .wel_bc_left { margin-right: 70px; } .wel_b_c .wel_bc_right { width: 400px } .wel_b_c .wel_bc_left .title { font-size: 16px; } .wel_b_c .wel_bc_left .cont p { font-size: 16px; } .wel_b_ts .item .title { font-size: 16px; } .wel_b_ts .item .cont p { font-size: 16px; } .wel_b_ts .item .xj .cont { width: 50%; } .wel_b_ts .aft { left: 12%; } .wel_b_ts.c1 .aft { left: 12% } .wel_b_ts.c2 .aft { left: 46%; } .wel_b_ts.c3 .aft { left: 81%; } } @media (min-width: 1240px) { .wel_head .wel_img { width: 1200px; } .wel_body { width: 1200px; } } @media (min-width: 1440px) { .wel_head .wel_img { width: 1400px; } .wel_body { width: 1400px; } } @media (min-width: 1920px) { .wel_head .wel_img { width: 1500px; } .wel_body { width: 1500px; } } /*主营业务---财富管理---热销产品*/ .wel_b_h { margin-top: 60px; margin-bottom: 100px; } .wel_b_h .item { padding: 25px 30px; background: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); margin-bottom: 50px; } .wel_b_h .item .wel_bh_left { float: left; width: 55%; font-size: 32px; line-height: 32px; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wel_b_h .item .wel_bh_right { float: right; width: 45%; text-align: right; height: 32px; display: flex; justify-content: flex-end; align-items: center; } .wel_b_h .item .wel_bh_right span { font-size: 18px; margin: 0 11px; } .wel_b_h .item .wel_bh_right span b { color: #ff7f00; } .wel_b_h .item .wel_bh_right .wh_more { font-size: 18px; color: #000; border: 1px solid #000; border-radius: 5px; padding: 7px 10px; margin-left: 20px; } @media (max-width: 1023px) { .wel_b_h { margin-top: 30px; margin-bottom: 70px; } .wel_b_h .item { padding: 12px 15px; margin-bottom: 20px; } .wel_b_h .item .wel_bh_left { font-size: 20px; width: 100%; } .wel_b_h .item .wel_bh_right { width: 100%; justify-content: flex-start; position: relative; left: -11px } .wel_b_h .item .wel_bh_right span { font-size: 14px; } .wel_b_h .item .wel_bh_right .wh_more { font-size: 14px; padding: 7px 10px; margin-left: 20px; } } @media (max-width: 600px) { .wel_b_h { margin-top: 30px; margin-bottom: 60px; } .wel_b_h .item { padding: 12px 15px; margin-bottom: 20px; } .wel_b_h .item .wel_bh_left { font-size: 16px; width: 100%; } .wel_b_h .item .wel_bh_right { width: 100%; justify-content: flex-start; position: relative; left: -11px } .wel_b_h .item .wel_bh_right span { font-size: 12px; } .wel_b_h .item .wel_bh_right .wh_more { font-size: 12px; padding: 7px 10px; margin-left: 10px; } } @media (max-width: 414px) { .wel_b_h { margin-top: 20px; margin-bottom: 50px; } .wel_b_h .item { padding: 12px 15px; margin-bottom: 20px; } .wel_b_h .item .wel_bh_left { font-size: 16px; width: 100%; } .wel_b_h .item .wel_bh_right { width: 100%; justify-content: flex-start; position: relative; left: -8px; flex-wrap: wrap; padding-bottom: 20px; } .wel_b_h .item .wel_bh_right span { font-size: 12px; margin: 0 8px; } .wel_b_h .item .wel_bh_right .wh_more { font-size: 12px; padding: 7px 5px; margin-left: 10px; margin-top: 5px; } } @media (min-width: 1024px) { .wel_b_h { margin-top: 30px; margin-bottom: 70px; } .wel_b_h .item { padding: 10px 15px; margin-bottom: 20px; } .wel_b_h .item .wel_bh_left { font-size: 20px } .wel_b_h .item .wel_bh_right span { font-size: 12px; } .wel_b_h .item .wel_bh_right .wh_more { font-size: 12px; padding: 7px 10px; margin-left: 20px; } } @media (min-width: 1240px) { .wel_b_h { margin-top: 40px; margin-bottom: 80px; } .wel_b_h .item { padding: 15px 20px; margin-bottom: 30px; } .wel_b_h .item .wel_bh_left { font-size: 24px } .wel_b_h .item .wel_bh_right span { font-size: 14px; } .wel_b_h .item .wel_bh_right .wh_more { font-size: 14px; padding: 7px 10px; margin-left: 20px; } } @media (min-width: 1440px) { .wel_b_h { margin-top: 50px; margin-bottom: 90px; } .wel_b_h .item { padding: 20px 25px; margin-bottom: 40px; } .wel_b_h .item .wel_bh_left { font-size: 28px } .wel_b_h .item .wel_bh_right span { font-size: 16px; } .wel_b_h .item .wel_bh_right .wh_more { font-size: 16px; padding: 7px 10px; margin-left: 20px; } } @media (min-width: 1920px) { .wel_b_h { margin-top: 60px; margin-bottom: 100px; } .wel_b_h .item { padding: 25px 30px; margin-bottom: 50px; } .wel_b_h .item .wel_bh_left { font-size: 32px } .wel_b_h .item .wel_bh_right span { font-size: 18px; } .wel_b_h .item .wel_bh_right .wh_more { font-size: 18px; padding: 7px 10px; margin-left: 20px; } } /*主营业务---固有业务*/ .bg_cyan { background: #00b3c6; } @media (min-width: 1920px) { .mmt-right.asset.inher img { width: 80% } } .inhere { margin-top: 60px; padding-bottom: 40px; } /*客户服务---信息披露*/ .bg_bd966e { background: #bd966e; } .jj-c .gg-title .t5 {} .jj-c .gg-title .t5 a { display: inline-block; font-size: 30px; color: #fff; opacity: .5; margin-right: 50px; margin-bottom: 20px; } .jj-c .gg-title .t5 a:hover, .jj-c .gg-title .t5 a.on { opacity: 1; } .jj-c .mmt-right.inform { width: 570px } .jj-c .mmt-left.inform { width: 730px } .jj-c .gg-neir.inform { margin-top: 20px; } .jj-c .gg-neir.inform.cl { width: 1500px; } .inform_list { border-top: 1px solid #fff; } .inform_list .item { border-bottom: 1px solid #fff; padding: 20px 0; color: #fff; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; } .inform_list .item .span { margin-right: 50px; float: left; } .inform_list .item em { margin-left: 10px; display: none; } .inform_list .item a { color: #fff; } @media (max-width: 1023px) { .jj-c .gg-title .t5 { overflow: auto; width: 100%; white-space: nowrap; } .jj-c .gg-title .t5 a { font-size: 22px; margin-right: 30px; margin-bottom: 10px; } .jj-c .mmt-right.inform { width: 100%; margin-top: 0; padding: 10px 0; float: none; margin: 0 auto; } .jj-c .mmt-left.inform { width: 100% } .jj-c .gg-neir.inform { margin-top: 50px; } .jj-c .gg-neir.inform.cl { width: 100%; } .inform_list .item { font-size: 14px; padding: 15px 0; overflow: visible; text-overflow: inherit; white-space: normal; } .inform_list .item .span { margin-right: 30px; } .inform_list .item em { display: inline; font-style: normal; } } @media (max-width: 600px) { .jj-c .gg-title .t5 a { font-size: 16px; margin-right: 30px; margin-bottom: 10px; } .jj-c .gg-neir.inform { margin-top: 30px; } .inform_list .item { font-size: 15px; padding: 10px 0; } .inform_list .item .span { font-size: 12px; display: block; width: 100%; margin-bottom: 5px; } } @media (max-width: 414px) {} @media (min-width: 1024px) { .jj-c .gg-title .t5 a { font-size: 22px; margin-right: 35px; margin-bottom: 10px; } .jj-c .mmt-right.inform { width: 350px; margin-top: 150px; } .jj-c .mmt-left.inform { width: 550px } .jj-c .gg-neir.inform.cl { width: 1000px; } .inform_list .item { font-size: 14px; padding: 15px 0; } .inform_list .item .span { margin-right: 40px; } } @media (min-width: 1240px) { .jj-c .gg-title .t5 a { font-size: 24px; margin-right: 40px; margin-bottom: 20px; } .jj-c .mmt-right.inform { width: 450px; margin-top: 150px; } .jj-c .mmt-left.inform { width: 650px } .jj-c .gg-neir.inform.cl { width: 1200px; } .inform_list .item { font-size: 16px; padding: 17px 0; } .inform_list .item .span { margin-right: 40px; } } @media (min-width: 1440px) { .jj-c .gg-title .t5 a { font-size: 28px; margin-right: 45px; margin-bottom: 20px; } .jj-c .mmt-right.inform { width: 500px; margin-top: 150px; } .jj-c .mmt-left.inform { width: 730px } .jj-c .gg-neir.inform.cl { width: 1366px; } .inform_list .item { font-size: 18px; padding: 20px 0; } .inform_list .item .span { margin-right: 45px; } } @media (min-width: 1920px) { .jj-c .gg-title .t5 a { font-size: 30px; margin-right: 50px; margin-bottom: 20px; } .jj-c .mmt-right.inform { width: 570px } .jj-c .mmt-left.inform { width: 730px } .jj-c .gg-neir.inform.cl { width: 1500px; } .inform_list .item { font-size: 20px; padding: 20px 0; } .inform_list .item .span { margin-right: 50px; } } /*客户服务---用户留言*/ .bg_9d9dc6 { background: #9d9dc6; } .jj-c .mmt-right.inform.gubook { margin-top: 330px } .g_book_n { margin-top: 80px; } .g_book_n .item { margin-bottom: 27px; } .g_book_n .item .gbl_left { float: left; width: 115px; color: #fff; font-size: 20px; line-height: 34px; } .g_book_n .item .gbl_right { float: left; width: calc(100% - 115px); } .g_book_n .item .gbl_right .txt { background: #fff; padding: 0 10px; width: 100%; height: 34px; line-height: 34px; font-size: 16px; color: #333; border-radius: 3px; border: none; box-sizing: border-box; } .g_book_n .item .gbl_right .texa { background: #fff; padding: 10px 10px; width: 100%; height: 150px; line-height: 24px; font-size: 16px; color: #333; border-radius: 3px; border: none; resize: none; box-sizing: border-box; } .g_book_n .item .gbl_right .texa.map { height: 90px; } .book_btn { display: block; width: 98px; height: 38px; background: none; border: 1px solid #fff; border-radius: 5px; text-align: center; line-height: 38px; color: #fff; font-size: 20px; margin-top: 60px; cursor: pointer; } @media (max-width: 1023px) { .jj-c .mmt-right.inform.gubook { margin-top: 0px } .g_book_n { margin-top: 60px; } .g_book_n .item { margin-bottom: 15px } .g_book_n .item .gbl_left { width: 100%; font-size: 16px } .g_book_n .item .gbl_right { width: 100%; } .g_book_n .item .gbl_right .txt { font-size: 14px; height: 30px; } .g_book_n .item .gbl_right .texa { font-size: 14px; height: 100px; } .book_btn { width: 88px; height: 33px; line-height: 33px; font-size: 16px; margin-top: 40px; } } @media (max-width: 600px) { .g_book_n { margin-top: 50px; } .g_book_n .item { margin-bottom: 10px } .g_book_n .item .gbl_left { width: 100%; font-size: 14px } .g_book_n .item .gbl_right { width: 100%; } .g_book_n .item .gbl_right .txt { font-size: 14px; } .g_book_n .item .gbl_right .texa { font-size: 14px; } .book_btn { width: 78px; height: 28px; line-height: 26px; font-size: 14px; margin-top: 30px } } @media (max-width: 414px) {} @media (min-width: 1024px) { .g_book_n .item .gbl_left { font-size: 14px; width: 85px; } .g_book_n .item .gbl_right { width: calc(100% - 85px); } .g_book_n .item .gbl_right .txt { font-size: 14px; } .g_book_n .item .gbl_right .texa { height: 100px; font-size: 14px; } .g_book_n .item .gbl_right .texa.map { height: 60px; } } @media (min-width: 1240px) { .g_book_n .item .gbl_left { font-size: 16px; width: 95px; } .g_book_n .item .gbl_right { width: calc(100% - 95px); } .g_book_n .item .gbl_right .txt { font-size: 14px; } .g_book_n .item .gbl_right .texa { height: 130px; font-size: 14px; } .g_book_n .item .gbl_right .texa.map { height: 70px; } } @media (min-width: 1440px) { .g_book_n .item .gbl_left { font-size: 18px; width: 115px; } .g_book_n .item .gbl_right { width: calc(100% - 115px); } .g_book_n .item .gbl_right .txt { font-size: 14px; } .g_book_n .item .gbl_right .texa { height: 140px; font-size: 14px; } .g_book_n .item .gbl_right .texa.map { height: 80px; } } @media (min-width: 1920px) { .g_book_n .item .gbl_left { font-size: 20px; width: 115px; } .g_book_n .item .gbl_right { width: calc(100% - 115px); } .g_book_n .item .gbl_right .txt { font-size: 14px; } .g_book_n .item .gbl_right .texa { height: 150px; font-size: 14px; } .g_book_n .item .gbl_right .texa.map { height: 90px; } } /*客户服务---消费者权益保护*/ .bg_00b282 { background: #00b282; } .gg_page { display: flex; margin-top: 40px; } .gg_page a { display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; border: 1px solid #fff; border-radius: 3px; color: #fff; font-size: 16px; margin-right: 15px; } .gg_page a.sy { width: 55px; } .gg_page a.sy.z_sjt { background: #fff url(../images/s_jt_h.png) no-repeat center; background-size: 30%; } .gg_page a.sy.z_djt { background: #fff url(../images/d_jt_h.png) no-repeat center; background-size: 30%; } .gg_page a.sy.y_sjt { background: #fff url(../images/s_jt_h.png) no-repeat center; background-size: 30%; transform: rotate(180deg); -ms-transform: rotate(180deg); /* IE 9 */ -moz-transform: rotate(180deg); /* Firefox */ -webkit-transform: rotate(180deg); /* Safari 和 Chrome */ -o-transform: rotate(180deg); /* Opera */ } .gg_page a.sy.y_djt { background: #fff url(../images/d_jt_h.png) no-repeat center; background-size: 30%; transform: rotate(180deg); -ms-transform: rotate(180deg); /* IE 9 */ -moz-transform: rotate(180deg); /* Firefox */ -webkit-transform: rotate(180deg); /* Safari 和 Chrome */ -o-transform: rotate(180deg); /* Opera */ } .gg_page .sumr { width: 70px; height: 30px; padding: 0 10px; background: #fff; border: 1px solid #fff; border-radius: 3px; color: #000; font-size: 16px; margin-right: 15px; } .asm_body.consu { margin-top: 100px; } .consu_b_t2 { padding: 10px 0 5px; font-size: 30px; color: #000; } .consu_time { margin-top: 10px; font-size: 16px; color: #747474 } .asm_b_c.consu { margin-top: 70px; } .asm_b_c.consu .title { padding-top: 55px } /* .asm_b_c.consu .cont { margin-top: 50px } */ /* .asm_b_c.consu .cont p { margin: 40px 0; } */ @media (max-width: 1023px) { .asm_body.consu { margin-top: 50px; } .consu_b_t2 { font-size: 24px } .consu_time { font-size: 18px; } .asm_b_c.consu { margin-top: 40px; } .asm_b_c.consu .title { padding-top: 40px } .asm_b_c.consu .cont { margin-top: 40px } .asm_b_c.consu .cont p { margin: 25px 0; } } @media (max-width: 600px) { .asm_body.consu { margin-top: 35px; } .asm_body.consu .asm_b_e { margin: 15px 0; } .consu_b_t2 { font-size: 18px; padding: 0; } .consu_time { font-size: 14px; } .asm_b_c.consu { margin-top: 35px; } .asm_b_c.consu .title { padding-top: 35px } .asm_b_c.consu .cont { margin-top: 35px } .asm_b_c.consu .cont p { margin: 15px 0; } } /*客户服务---消费者权益保护_信托研究*/ .consunm { margin-left: 172px; } .consunm .t1 { color: #fff; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .consunm .t2 { color: #fff; font-size: 20px; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1023px) { .consunm { margin-left: 125px; } .consunm .t1 { font-size: 16px; } .consunm .t2 { font-size: 16px; } } @media (max-width: 600px) { .consunm { margin-left: 0; clear: both; } .consunm .t1 { font-size: 14px; } .consunm .t2 { font-size: 14px; } } @media (min-width: 1024px) { .consunm { margin-left: 125px; } .consunm .t1 { font-size: 16px; } .consunm .t2 { font-size: 16px; } } @media (min-width: 1240px) { .consunm { margin-left: 140px; } .consunm .t1 { font-size: 18px; } .consunm .t2 { font-size: 18px; } } @media (min-width: 1440px) { .consunm { margin-left: 162px; } .consunm .t1 { font-size: 20px; } .consunm .t2 { font-size: 20px; } } @media (min-width: 1920px) { .consunm { margin-left: 172px; } .consunm .t1 { font-size: 20px; } .consunm .t2 { font-size: 20px; } } /*客户服务---消费者权益保护_消费者权益保护教育宣传周*/ .border{ justify-content: space-between; align-items: center; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } .pro_top { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } .pro_top .pr_left { width: 50%; } .pro_top .pr_left p { color: #fff; font-size: 20px; margin: 50px 0; } .pro_top .pr_right { width: 50%; } .pro_top .pr_right img { display: block; width: 50%; margin: 0 auto; } .pro_list * { transition: none; -moz-transition: none; /* Firefox 4 */ -webkit-transition: none; /* Safari 和 Chrome */ -o-transition: none; /* Opera */ } .pro_list .item { border-bottom: 1px solid #fff; } .pro_list .item .hokt { padding: 30px 0; cursor: pointer; } .pro_list .item .hokt .jt { float: right; width: 25px; height: 25px; background: url(../images/jt.png) no-repeat center; background-size: 100%; transition: all .5s ease-in; transform: rotate(180deg); -ms-transform: rotate(180deg); /* IE 9 */ -moz-transform: rotate(180deg); /* Firefox */ -webkit-transform: rotate(180deg); /* Safari 和 Chrome */ -o-transform: rotate(180deg); /* Opera */ } .pro_list .item .hokt.cut .jt { transform: rotate(0deg); -ms-transform: rotate(0deg); /* IE 9 */ -moz-transform: rotate(0deg); /* Firefox */ -webkit-transform: rotate(0deg); /* Safari 和 Chrome */ -o-transform: rotate(0deg); /* Opera */ } .pro_list .item .hokt .te { height: 25px; line-height: 25px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 20px; font-weight: bold; } .pro_list .item .goth { overflow: hidden; padding-bottom: 20px; display: none; } .pro_list .item .goth .tt { float: left; width: 50%; padding-right: 15px; box-sizing: border-box; } .pro_list .item .goth .tt p { color: #fff; font-size: 20px; line-height: 1.6; margin: 40px 0; } .pro_list .item .goth .tt:nth-child(2n) { padding-right: 0; padding-left: 15px; } @media (max-width: 1023px) { .border{ padding: 20px 0 40px; } .pro_top { padding: 20px 0 40px; flex-direction: column; } .pro_top .pr_left { width: 100%; } .pro_top .pr_right { width: 100%; } .pro_top .pr_right img { margin: 0; } .pro_top .pr_left p { margin: 20px 0; font-size: 16px; } .pro_list .item .hokt { padding: 20px 0; } .pro_list .item .hokt .te { font-size: 16px; } .pro_list .item .goth .tt { width: 100%; padding: 0; } .pro_list .item .goth .tt:nth-child(2n) { padding: 0; } .pro_list .item .goth .tt p { margin: 20px 0; font-size: 16px; } } @media (max-width: 600px) { .pro_top .pr_left p { margin: 15px 0; font-size: 14px; } .pro_list .item .hokt { padding: 10px 0; } .pro_list .item .hokt .jt { width: 20px; height: 20px; } .pro_list .item .hokt .te { height: 20px; line-height: 20px; font-size: 14px; } .pro_list .item .goth .tt p { font-size: 14px } } @media (min-width: 1024px) { .border{ padding: 30px 0; } .pro_top { padding: 30px 0; } .pro_top .pr_left p { margin: 20px 0; font-size: 14px; } .pro_list .item .hokt { padding: 20px 0; } .pro_list .item .hokt .te { font-size: 14px; } .pro_list .item .goth .tt p { margin: 20px 0; font-size: 14px; } } @media (min-width: 1240px) { .border{ padding: 30px 0; } .pro_top { padding: 30px 0; } .pro_top .pr_left p { margin: 30px 0; font-size: 16px; } .pro_list .item .hokt { padding: 20px 0; } .pro_list .item .hokt .te { font-size: 16px; } .pro_list .item .goth .tt p { margin: 30px 0; font-size: 16px; } } @media (min-width: 1440px) { .border{ padding: 20px 0; } .pro_top { padding: 20px 0; } .pro_top .pr_left p { margin: 40px 0; font-size: 18px; } .pro_list .item .hokt { padding: 25px 0; } .pro_list .item .hokt .te { font-size: 18px; } .pro_list .item .goth .tt p { margin: 40px 0; font-size: 18px; } } @media (min-width: 1920px) { .pro_top .pr_left p { margin: 50px 0; } .pro_list .item .hokt { padding: 30px 0; } .pro_list .item .hokt .te { font-size: 20px; } .pro_list .item .goth .tt p { margin: 50px 0; font-size: 20px; } } /*财富中心---登录*/ .bg_f99746 { background: #f99746; } .jj-c .mmt-right.cu_login { width: 690px; margin-top: 50px } .jj-c .mmt-left.cu_login { width: 535px; } .jj-c .gg-neir.cu_login { margin-top: 20px; } .g_book_n.cu_login {} .g_book_n.cu_login .txt { font-weight: bold; } .g_book_n.cu_login .txt.yzm { width: calc(100% - 200px); } .g_book_n.cu_login .yzm_img { float: right; } .g_book_n.cu_login .yzm_img .img { float: left; width: 80px; height: 34px; border-radius: 3px; overflow: hidden; margin-right: 20px; } .g_book_n.cu_login .yzm_img .img img { display: block; width: 80px; height: 34px; } .g_book_n.cu_login .yzm_img a { color: #fff; font-size: 18px; line-height: 34px; } .anniu_zu { padding-left: 115px; margin-top: 60px; display: flex; justify-content: space-between; align-items: center; } .anniu_zu .s { display: block; width: 1px; height: 38px; background: #fff; } .anniu_zu .book_btn { width: auto; margin-top: 0; padding: 7px 10px; line-height: 1; font-size: 20px; } @media (max-width: 1023px) { .jj-c .mmt-right.cu_login { width: 100%; margin-top: 0; padding: 0; } .jj-c .mmt-left.cu_login { width: 100%; } .jj-c .gg-neir.cu_login { margin-top: 20px; } .anniu_zu { padding-left: 0; margin-top: 40px; } .anniu_zu .s { width: 1px; height: 38px; } .anniu_zu .book_btn { padding: 7px 10px; font-size: 14px; } } @media (max-width: 600px) { .anniu_zu { padding-left: 0; margin-top: 40px; } .anniu_zu .s { width: 1px; height: 38px; } .anniu_zu .book_btn { padding: 7px 10px; font-size: 14px; } } @media (max-width: 414px) {} @media (min-width: 1024px) { .jj-c .mmt-right.cu_login { width: 490px; margin-top: 50px } .jj-c .mmt-left.cu_login { width: 335px; } .jj-c .gg-neir.cu_login { margin-top: 20px; } .anniu_zu { padding-left: 85px; margin-top: 40px; } .anniu_zu .s { width: 1px; height: 38px; } .anniu_zu .book_btn { padding: 7px 10px; font-size: 16px; } } @media (min-width: 1240px) { .jj-c .mmt-right.cu_login { width: 550px; margin-top: 80px } .jj-c .mmt-left.cu_login { width: 405px; } .jj-c .gg-neir.cu_login { margin-top: 20px; } .anniu_zu { padding-left: 115px; margin-top: 60px; } .anniu_zu .s { width: 1px; height: 38px; } .anniu_zu .book_btn { padding: 7px 10px; font-size: 16px; } } @media (min-width: 1440px) { .jj-c .mmt-right.cu_login { width: 590px; margin-top: 50px } .jj-c .mmt-left.cu_login { width: 435px; } .jj-c .gg-neir.cu_login { margin-top: 20px; } .anniu_zu { padding-left: 115px; margin-top: 60px; } .anniu_zu .s { width: 1px; height: 38px; } .anniu_zu .book_btn { padding: 7px 10px; font-size: 16px; } } @media (min-width: 1920px) { .jj-c .mmt-right.cu_login { width: 690px; margin-top: 50px } .jj-c .mmt-left.cu_login { width: 535px; } .jj-c .gg-neir.cu_login { margin-top: 20px; } .anniu_zu { padding-left: 115px; margin-top: 60px; } .anniu_zu .s { width: 1px; height: 38px; } .anniu_zu .book_btn { padding: 7px 10px; } } /*行业动态*/ .bg_38abed { background: #38abed; } .inform_list.news_n .item { overflow: visible; text-overflow: normal; white-space: normal; } .inform_list.news_n .item .span { float: none; width: 100%; margin-left: 0; font-size: 20px; } .inform_list.news_n .news_lye { display: block; width: 100%; font-size: 20px; line-height: 1.6; margin-top: 5px; } .asm_b_c.consu.news_die {} .asm_b_c.consu.news_die .cont img { max-width: 100%; margin: 0 auto; } @media (max-width: 1023px) { .inform_list.news_n .item .span { font-size: 14px; } .inform_list.news_n .news_lye { font-size: 14px; } } @media (max-width: 600px) { .inform_list.news_n .item .span { font-size: 14px; } .inform_list.news_n .news_lye { font-size: 14px; } } @media (min-width: 1024px) { .inform_list.news_n .item .span { font-size: 16px; } .inform_list.news_n .news_lye { font-size: 16px; } } @media (min-width: 1240px) { .inform_list.news_n .item .span { font-size: 18px; } .inform_list.news_n .news_lye { font-size: 18px; } } @media (min-width: 1440px) { .inform_list.news_n .item .span { font-size: 20px; } .inform_list.news_n .news_lye { font-size: 20px; } } /*首页*/ .bg_fff { background: #fff; } .index_wrap { height: 100%; overflow: hidden; } .index_top { padding-top: 55px; width: 1500px; margin: 0 auto; padding-bottom: 30px; } .index_top .loee { overflow: hidden; position: relative; } .index_top .logo { float: left; width: 240px; height: 59px; background: url(../images/logo.png) no-repeat center; background-size: 100%; } .index_top .hotn { float: left; width: 640px; height: 59px; margin-left: 180px; display: flex; justify-content: center; align-items: flex-end; } .index_top .hotn .ect { float: left; } .index_top .hotn .egr { float: left; } .index_top .hotn p { margin: 0; font-size: 12px; font-weight: bold; } .index_top .hotn p.zt { margin-top: 5px; font-size: 18px; font-weight: bold; } .index_top .hotn .s { margin: 0 20px; width: 1px; height: 37px; background: #000; } .kyu { margin-top: 170px; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-end; flex-flow: row-reverse; } .kyu .kyu_l { width: 60%; } .kyu .kyu_l p { color: #000; font-size: 36px; line-height: 1.3; margin: 0 0 10px; } .kyu .kyu_l p.y { font-size: 46px; margin: 0; } .kyu .kyu_l p.y.t2 { padding-left: 50px; } .kyu .kyu_r { width: 460px; } .kyu .kyu_r .consu { color: #00896a; font-size: 24px; display: flex; justify-content: flex-start; align-items: center; } .kyu .kyu_r .consu .icon { display: block; margin-right: 30px; width: 73px; height: 73px; background: url(../images/cons.png) no-repeat center; background-size: 100% } .index_bom { position: relative; width: 1500px; height: calc(100% - 488px); margin: 0; left: 50%; margin-left: -750px; background: url(../images/index-img.jpg) no-repeat center; background-size: cover; } .bo-more { position: absolute; bottom: 20px; left: 50%; width: 200px; margin-left: -100px; padding-bottom: 25px; text-align: center; color: #fff; font-size: 14px; background: url(../images/jt_bottom.png) no-repeat center bottom; } @media (max-width: 1199px) { .index_top { padding-top: 35px; width: 100%; } .index_top .logo { float: left; width: 20%; margin-left: 0px; } .index_top .hotn { float: left; width: 85%; height: 0px; } .kyu { margin-top: 130px; padding: 0 30px; } .kyu .kyu_l p { font-size: 28px; } .kyu .kyu_l p.y { font-size: 30px; } .kyu .kyu_l p.y.t2 { padding-left: 50px; } .kyu .kyu_r .consu { font-size: 24px; } .kyu .kyu_r .consu .icon { width: 53px; height: 53px; } .index_bom { width: 100%; height: calc(100% - 368px); margin-left: -50%; } } @media (max-width: 800px) { .index_top .hotn { float: right; margin-left: 0 } .kyu { margin-top: 100px; padding: 0 10px; display: block; } .kyu .kyu_l { width: 100%; margin-top: 30px } .kyu .kyu_r { width: 100%; padding-left: 20px; box-sizing: border-box; } .kyu .kyu_r .consu { font-size: 18px; display: flex; justify-content: flex-start; align-items: center; } .kyu .kyu_r .consu .icon { width: 43px; height: 43px; } } @media (max-width: 600px) { .index_top { padding-top: 15px; width: 100%; } .index_top .logo { float: left; width: 20%; height: 38px; margin-left: 2%; } .index_top .hotn { float: right; width: 115%; height: 67px; margin-left: 0; margin-right: -67px; margin-top: -47px; } .index_top .hotn { -webkit-transform: scale(.6, .6); -moz-transform: scale(.6, .6); -o-transform: scale(.6, .6); transform: scale(.6, .6); } .index_top .hotn p { margin: 0; font-size: 12px; font-weight: bold; } .index_top .hotn p.zt { margin-top: 5px; font-size: 12px; font-weight: bold; } .kyu { margin-top: 70px; padding: 0 10px; display: block; } .kyu .kyu_l { width: 100%; margin-top: 30px } .kyu .kyu_l p { font-size: 16px; } .kyu .kyu_l p.y { font-size: 18px; } .kyu .kyu_l p.y.t2 { padding-left: 10px; } .kyu .kyu_r { width: 100%; padding-left: 10px; box-sizing: border-box; } .kyu .kyu_r .consu { font-size: 14px; display: flex; justify-content: flex-start; align-items: center; } .kyu .kyu_r .consu .icon { width: 33px; height: 33px; } .index_bom { width: 100%; height: calc(100% - 304px); margin-left: -50%; } } @media (max-width: 321px) { .index_top .logo { width: 110px; margin-left: 10px; } } @media (min-width: 1200px) { .index_top { padding-top: 35px; width: 1200px; } .index_top .logo { float: left; width: 240px; } .index_top .hotn { float: left; width: 640px; height: 59px; } .kyu { margin-top: 130px; } .kyu .kyu_l p { font-size: 28px; } .kyu .kyu_l p.y { font-size: 30px; } .kyu .kyu_l p.y.t2 { padding-left: 50px; } .kyu .kyu_r .consu { font-size: 24px; } .kyu .kyu_r .consu .icon { width: 53px; height: 53px; } .index_bom { width: 1200px; height: calc(100% - 368px); margin-left: -600px; } } @media (min-width: 1441px) { .index_top { padding-top: 45px; width: 1366px; } .index_top .logo { float: left; width: 240px; } .index_top .hotn { float: left; width: 640px; height: 59px; } .kyu { margin-top: 150px } .kyu .kyu_l p { font-size: 34px; } .kyu .kyu_l p.y { font-size: 44px; } .kyu .kyu_l p.y.t2 { padding-left: 50px; } .kyu .kyu_r .consu { font-size: 24px; } .kyu .kyu_r .consu .icon { width: 63px; height: 63px; } .index_bom { width: 1366px; height: calc(100% - 452px); margin-left: -683px; } } @media (min-width: 1920px) { .index_top { padding-top: 55px; width: 1500px; } .index_top .logo { float: left; width: 240px; } .index_top .hotn { float: left; width: 640px; height: 59px; } .kyu { margin-top: 170px } .kyu .kyu_l p { font-size: 36px; } .kyu .kyu_l p.y { font-size: 46px; } .kyu .kyu_l p.y.t2 { padding-left: 50px; } .kyu .kyu_r .consu { font-size: 24px; } .kyu .kyu_r .consu .icon { width: 73px; height: 73px; } .index_bom { width: 1500px; height: calc(100% - 488px); margin-left: -750px; } } /*新加财富中心*/ .bg_f49246 { background: #f49246; } .bg_fdf4ec { background: #fdf4ec; } .jbxx_wrp { border-top: 1px solid #847f7b; } .ct_top { width: 1020px; padding-top: 70px; } .ct_top .item { float: left; width: 485px; height: 45px; padding: 10px 0; border-bottom: 1px solid #e7dfd7; } .ct_top .item:nth-child(2n) { float: right; } .ct_top .item .let { float: left; width: 105px; line-height: 45px; font-size: 20px; font-weight: bold; color: #000; } .ct_top .item .rig { float: left; width: 365px; } .ct_top .item .rig .sy { line-height: 45px; color: #f49246; font-size: 40px; } .ct_top .item .rig .sy em { display: inline-block; width: 12px; height: 33px; margin-left: 10px; vertical-align: middle; position: relative; top: -4px; background: url(../images/tops.png) no-repeat center; background-size: 100%; } .ct_top .item .rig .sy em.boms { background-image: url(../images/boms.png); } .ct_top .item .rig .hy { line-height: 45px; color: #F49246; font-size: 20px; font-weight: bold; } .ct_top.bh .item .let { color: #b2b2b2; } .ct_top.bh .item .rig .sy { color: #b2b2b2; } .ct_top.bh .item .rig .hy { color: #b2b2b2; } .ct_top.bh .item .rig .sy em { background-image: url(../images/tops_h.png); } .ct_top.bh .item .rig .sy em.boms { background-image: url(../images/boms_h.png); } .ct_neir { width: 1020px; padding-top: 40px; overflow: hidden; } .ct_neir .item { float: left; width: 485px; height: 45px; padding: 10px 0; border-bottom: 1px solid #e7dfd7; } .ct_neir .item:nth-child(2n) { float: right; } .ct_neir .item .let { float: left; width: 105px; line-height: 45px; font-size: 20px; font-weight: bold; color: #000; } .ct_neir .item .rig { float: left; width: 365px; position: relative; } .ct_neir .item .rig .kbj { display: none; } .ct_neir .item .rig .kbj.show { display: block; } .ct_neir .item .rig .kbj .ti { line-height: 45px; font-size: 20px; color: #000; } .ct_neir .item .rig .kbj .txt { width: 345px; height: 45px; padding: 0 10px; line-height: 45px; color: #000; font-size: 20px; background: #fff; border: none; } .ct_neir .item .rig .kbj .xbie { width: 345px; height: 45px; padding: 0 10px; background: #fff; } .ct_neir .item .rig .kbj .xbie .six { float: left; margin-right: 25px; padding-top: 13px; } .ct_neir .item .rig .kbj .xbie .six input { display: none; } .ct_neir .item .rig .kbj .xbie .six input+label { display: block; color: #000; font-size: 20px; } .ct_neir .item .rig .kbj .xbie .six input+label b { float: left; display: block; margin-top: 2px; margin-right: 7px; width: 15px; height: 15px; border: 1px solid #000; background: #fff; border-radius: 50%; } .ct_neir .item .rig .kbj .xbie .six input:checked+label b { background: #f49246; border-color: #f49246; } .ct_bom { width: 1020px; padding-top: 70px; overflow: hidden; } .ct_bom .let { float: left; width: 105px; line-height: 45px; font-size: 20px; font-weight: bold; color: #000; } .ct_bom .rig { float: left; width: calc(100% - 115px); } .ct_bom .rig .kbj { display: none; } .ct_bom .rig .kbj.show { display: block; } .ct_bom .rig .kbj .ti { line-height: 45px; font-size: 20px; color: #000; } .ct_bom .rig .kbj .texa { background: #fff; border: none; width: calc(100% - 30px); height: 60px; padding: 10px; color: #000; font-size: 20px; line-height: 30px; } .btn_sz { margin-top: 50px; padding-bottom: 60px; } .btn_sz .btn { margin-right: 30px; display: block; float: left; border: 1px solid #000; font-size: 20px; line-height: 1; color: #000; border-radius: 5px; padding: 5px 10px; background: none; cursor: pointer; } .btn_sz .kbj { display: none; } .btn_sz .kbj.show { display: block; } .ct_neir .item .rig .btin { position: absolute; right: -70px; top: 10px; color: #fe0b40; font-size: 20px; } @media (max-width: 1021px) { .ct_top, .ct_neir, .ct_bom { width: 100%; } .ct_top { padding-top: 40px; } .ct_bom { padding-top: 40px; } .ct_top .item, .ct_neir .item { width: 100% } .ct_bom .let { width: 80px; font-size: 14px; } .ct_bom .rig { width: calc(100% - 80px); } .ct_bom .rig .kbj .ti { font-size: 14px; line-height: 30px; padding-top: 7px; } .ct_bom .rig .kbj .texa { font-size: 14px; } .ct_top .item .let { font-size: 14px; width: 80px; } .ct_top .item .rig .sy { font-size: 30px; } .ct_top .item .rig .hy { font-size: 14px; } .ct_neir .item .let { font-size: 14px; width: 80px; } .ct_top .item .rig { width: calc(100% - 80px); } .ct_neir .item .rig { width: calc(100% - 80px); } .ct_neir .item .rig .txt { width: 100%; } .ct_top .item .rig .kbj .ti { font-size: 14px; } .ct_top .item .rig .kbj .txt { font-size: 14px; } .ct_neir .item .rig .kbj .ti { font-size: 14px; } .ct_neir .item .rig .kbj .txt { font-size: 14px; } .ct_neir .item .rig .kbj .xbie .six input+label { font-size: 14px; } .ct_neir .item .rig .kbj .xbie .six input+label b { width: 7px; height: 7px; } .btn_sz .btn { font-size: 14px; height: 30px; line-height: 18px; } .ct_neir.dye .item .rig .txt { width: calc(100% - 60px) } .ct_neir .item .rig .btin { right: 0; font-size: 14px; } } /*我的信托*/ .wdxt_wrp { border-top: 1px solid #847f7b; } .pro_list.wdxt {} .pro_list.wdxt .item { border-bottom: 1px solid #000; } .pro_list.wdxt .item .hokt .te { color: #000; } .pro_list.wdxt .item .hokt .jt { background-image: url(../images/jt_000.png); } .tabl {} .tabl .tab { border: none; border-collapse: collapse; border-spacing: 0; width: 100%; } .tabl .tab th { background: #f49246; padding: 10px 0; color: #fff; position: relative; color: #fff; font-size: 20px; } .tabl .tab th .sx { position: absolute; left: -1px; top: 50%; margin-top: -10px; display: block; width: 2px; height: 20px; background: #fff; } .tabl .tab td { border: 1px solid #ccc; text-align: center; padding: 10px 0; font-size: 20px; color: #000; } .tabl .tab td a { color: #f49246 } @media (max-width: 1240px) { .tabl .tab th { font-size: 16px; } .tabl .tab td { font-size: 16px; } } @media (max-width: 1024px) { .tabl .tab th { font-size: 14px; } .tabl .tab td { font-size: 14px; } } @media (max-width: 800px) { .tabl { width: 100%; overflow: auto; } .tabl .tab { width: 800px; } .tabl .tab th { font-size: 12px; } .tabl .tab td { font-size: 12px; } } /*预约*/ .yy-wrp { overflow: hidden; padding-bottom: 80px; } .yyw_left { float: left; width: 430px; } .yyw_left .too { width: 100%; padding: 20px 0; background: #f49246; border-radius: 7px; } .yyw_left .too .t1 { margin: 0 40px; text-align: center; color: #fff; font-size: 30px; border-bottom: 1px solid #fff; line-height: 1.6; padding-bottom: 20px; } .yyw_left .too .t2 { margin-top: 30px; } .yyw_left .too .t2 p { font-size: 20px; color: #fff; text-align: center; margin: 15px 0; } .yyw_left .moo { text-align: center; margin-top: 20px; } .yyw_left .moo .btn { display: block; margin: 0 auto; width: 100px; height: 35px; padding: 0; text-align: center; line-height: 33px; border: 1px solid #f49246; border-radius: 5px; color: #f49246; font-size: 20px; font-weight: bold; } .yyw_right { float: right; width: calc(100% - 500px); border-top: 1px solid #ccc } .yyw_right .items { border-bottom: 1px solid #ccc; padding: 15px 0; } .yyw_right .items .let { float: left; width: 140px; color: #000; font-size: 20px; } .yyw_right .items .rig { float: left; width: calc(100% - 170px); color: #000; font-size: 20px; } .yxi { color: #000; font-size: 16px; padding: 20px 0; font-weight: bold; } @media (max-width: 1024px) { .yyw_right { width: 100%; margin-top: 30px; } .yy-wrp { padding-bottom: 50px; } } @media (max-width: 800px) { .yyw_right .items .let { font-size: 16px; } .yyw_right .items .rig { font-size: 16px; } .yyw_left .moo .btn { font-size: 16px; } } @media (max-width: 600px) { .yyw_left { margin: 0 auto; width: 100%; } .yyw_left .too .t1 { font-size: 26px; } .yyw_left .too .t2 p { font-size: 16px; } .yyw_right .items .let { font-size: 14px; width: 100px; } .yyw_right .items .rig { font-size: 14px; width: calc(100% - 100px); } .yyw_left .moo .btn { font-size: 14px; height: 30px; line-height: 27px; width: 80px } } @media (max-width: 413px) { .yyw_left .too .t1 { font-size: 22px; } .yyw_left .too .t2 p { font-size: 16px; } } /*服务须知*/ .fwxz_wrp { padding: 60px 0; border-top: 1px solid #847f7b; border-bottom: 1px solid #847f7b; } .fwxz_wrp p { margin: 0 0; font-size: 20px; color: #000; line-height: 1.6; } @media (max-width: 600px) { .fwxz_wrp { padding: 30px 0; } .fwxz_wrp p { font-size: 16px; } } /*首页动画*/ .homePage { width: 100%; height: 100%; position: relative; } .index_bom { left: 50%; z-index: 1; } @media screen and (min-width: 1920px) { .homePage .header { width: 80%; height: 385px; background: #fff; margin: 0 auto; } .homePage .content { position: fixed; top: 385px; left: 0; right: 0; bottom: 0; width: 80%; background: url(../images/homePage.png) no-repeat; background-size: cover; margin: 0 auto; z-index: 1; } } @media screen and (min-width: 1440px) { .homePage .header { width: 80%; height: 385px; background: #fff; margin: 0 auto; } } @media screen and (min-width: 1240px) { .homePage .header { width: 80%; height: 385px; background: #fff; margin: 0 auto; } .homePage .content { position: fixed; top: 385px; left: 0; right: 0; bottom: 0; width: 80%; background: url(../images/homePage.png) no-repeat; background-size: cover; margin: 0 auto; z-index: 1; } } @media screen and (min-width: 1024px) { .homePage .header { width: 80%; height: 385px; background: #fff; margin: 0 auto; } .homePage .content { position: fixed; top: 385px; left: 0; right: 0; bottom: 0; width: 80%; background: url(../images/homePage.png) no-repeat; background-size: cover; margin: 0 auto; z-index: 1; } } @media screen and (max-width: 600px) { .homePage .header { width: 80%; height: 385px; background: #fff; margin: 0 auto; } .homePage .content { position: fixed; top: 385px; left: 0; right: 0; bottom: 0; width: 80%; background: url(../images/homePage.png) no-repeat; background-size: cover; margin: 0 auto; z-index: 1; } } @media screen and (max-width: 415px) { .homePage .header { width: 100%; height: 250px; background: #fff; margin: 0 auto; } .homePage .content { position: fixed; top: 250px; left: 0; right: 0; bottom: 0; width: 0%; background: url(../images/homePage.png) no-repeat; background-size: cover; margin: 0 auto; z-index: 1; } } .bo-more { position: absolute; bottom: 20px; left: 50%; width: 200px; margin-left: -100px; padding-bottom: 25px; text-align: center; color: #fff; font-size: 14px; cursor: pointer; background: url(../images/jt_bottom.png) no-repeat center bottom; animation: ReturnMoving 3s linear infinite; cursor: pointer; } @keyframes ReturnMoving { 25% { transform: translateY(-15px); -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); -moz-transform: translateY(-15px); -o-transform: translateY(-15px); } 50%, 100% { transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); } 75% { transform: translateY(-15px); -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); -moz-transform: translateY(-15px); -o-transform: translateY(-15px); } } .sjipin { position: fixed; top: 0; left: 0; width: 106%; height: 106%; margin-left: -3%; margin-top: -3%; /*background: #0082FA;*/ /*display: none;*/ } #vid_1 { position: fixed; width: 108%; height: 108%; object-fit: cover; margin-left: -2%; /*margin-top:-1%;*/ opacity: 0; transform: scale(.5, .5); transition: all 2s; /*position: fixed; min-width: 100%; min-height: 100%; background-size: cover; overflow: hidden; object-fit:fill;*/ } @media (max-width: 600px) { #vid_1 { width: 108%; height: 108%; margin: -1% 0 0 -2%; object-fit: fill; } } /**/ /*圆*/ #yuan { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; background: #0082FA; } .yuan { position: absolute; top: 50%; left: 50%; width: 690px; height: 690px; margin-left: -345px; margin-top: -345px; background: #F2D351; border-radius: 50%; animation: mymove 2s infinite; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes mymove { 0% { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin-left: -40px; margin-top: -40px; background: #F2D351; } 100% { position: absolute; top: 50%; left: 50%; width: 690px; height: 690px; margin-left: -345px; margin-top: -345px; background: #F2D351; } } /*10边形*/ #tenSidedShape { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; background: #0082FA; } #tenSidedShape #ctx { position: absolute; top: 50%; left: 50%; background: #0082FA; margin-left: -425px; margin-top: -425px; animation: rotateImg 2s linear; transform: rotateZ(17deg); animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes rotateImg { 0% { transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); } 100% { transform: rotate(135deg); -ms-transform: rotate(135deg); -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); } } /*八变形*/ #EightDeformation { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; background: #F2D351; } #octagon { position: absolute; top: 50%; left: 50%; width: 700px; height: 700px; margin-left: -350px; margin-top: -350px; background-color: #8149D3; position: relative; animation: rotary 2s linear; animation-fill-mode: forwards; /*transform: rotateZ(21deg);*/ } #octagon .le { width: 300px; height: 0; position: absolute; top: 0; left: 0; } #octagon .le:after { width: 0; height: 0; content: ''; position: absolute; right: 152px; top: -157px; border-width: 150px; border-style: solid; border-color: transparent #F2D351 transparent transparent; transform: rotate(45deg); } #octagon .le:before { width: 0; height: 0; content: ''; position: absolute; left: 554px; top: -155px; border-width: 150px; border-style: solid; border-color: transparent #F2D351 transparent transparent; transform: rotate(135deg); } #octagon .ri { width: 300px; height: 0; position: absolute; left: 0; bottom: 0; } #octagon .ri:after { width: 0; height: 0; content: ''; position: absolute; right: 154px; top: -146px; border-width: 150px; border-style: solid; border-color: transparent #F2D351 transparent transparent; transform: rotate(-45deg); } #octagon .ri:before { width: 0; height: 0; content: ''; position: absolute; left: 554px; top: -145px; border-width: 150px; border-style: solid; border-color: transparent #F2D351 transparent transparent; transform: rotate(-135deg); } @keyframes rotary { 0% { transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); } 100% { transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); } } /*立方体*/ .hhtootk .warp { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; /*transform-style: preserve-3d; -webkit-transform-style: preserve-3d;*/ perspective: 500px; -webkit-perspective: 500px; background: #00D0E7; /*perspective-origin:left bottom;*/ /*看立方体的角度*/ } .hhtootk .box { position: absolute; left: 50%; top: 50%; width: 690px; height: 690px; margin-left: -345px; margin-top: -345px; line-height: 690px; text-align: center; position: relative; background: #E45B4D; font-size: 50px; transition: 2s; -webkit-transition: 2s; /*transform-style: preserve-3d; -webkit-transform-style: preserve-3d;*/ animation: squre 1s linear; animation-fill-mode: forwards; -webkit-animation: squre 1s linear; -webkit-animation-fill-mode: forwards; } /*.box:hover { transform:rotateZ(45deg); transform: rotateY(45deg); }*/ .hhtootk .wall { position: absolute; width: 690px; height: 690px; } @keyframes squre { 0% { transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -moz-transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); } 100% { transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); } } .hhtootk .wall:nth-child(1) { top: -690px; left: 0; background: #E45B4D; transform-origin: bottom; transform: rotateX(90deg); -webkit-transform-origin: bottom; -webkit-transform: rotateX(90deg); } .hhtootk .wall:nth-child(2) { top: 0; left: -690px; background: #E45B4D; transform-origin: right; transform: rotateY(-90deg); -webkit-transform-origin: right; -webkit-transform: rotateY(-90deg); } .hhtootk .wall:nth-child(3) { top: 690px; left: 0; background: #E45B4D; transform-origin: top; transform: rotateX(-90deg); -webkit-transform-origin: top; -webkit-transform: rotateX(-90deg); } .hhtootk .wall:nth-child(4) { top: 0; left: 690px; background: #E45B4D; transform-origin: left; transform: rotateY(90deg); -webkit-transform-origin: left; -webkit-transform: rotateY(90deg); } .hhtootk .wall:nth-child(5) { top: 0; left: 0; background: #E45B4D; } .hhtootk .wall:nth-child(6) { top: 0; left: 0; background: #E45B4D; transform: translateZ(-690px) rotateX(180deg); -webkit-transform: translateZ(-690px) rotateX(180deg); } @keyframes ReturnMoving { 25% { transform: translateY(-15px); -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); -moz-transform: translateY(-15px); -o-transform: translateY(-15px); } 50%, 100% { transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); } 75% { transform: translateY(-15px); -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); -moz-transform: translateY(-15px); -o-transform: translateY(-15px); } } /*图片动画1*/ .box1 { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; background: #E65C4E; } .box1>.left { position: absolute; top: 50%; left: 50%; width: 893px; height: 600px; margin-left: -406px; margin-top: -300px; /*background-color: #0DDFF6;*/ position: relative; } .box1>.left>.square-box { width: 893px; height: 600px; box-sizing: border-box; position: relative; transform-style: preserve-3d; /*设置动画 三者分别为:动画名 执行一次时间 执行方式*/ animation: rotateanimation 5s ease; /*animation-iteration-count: infinite;*/ /*令动画无限执行下去*/ animation-timing-function: linear; /*匀速*/ transform: rotateX(30deg) rotateY(20deg) rotateZ(-20deg); } .box1>.left>.square-box>div { position: absolute; } /*设置六面的视角*/ .box1>.left>.square-box>.img { position: relative; width: 893px; height: 600px; transform: rotateY(2deg) translateZ(364px) rotateX(-23deg) translateX(-268px) translateY(48px); background: #0DDFF6; z-index: 0; overflow: hidden; } .box1>.left>.square-box>.img>img { position: relative; left: 0; /*width:100%; height:100%;*/ height: 100%; border: 0; animation: imgMoving1 20s linear; animation-fill-mode: forwards; } /*.square-box>.img>img:hover { transform: translateX(-200px); }*/ .box1>.left>.square-box>.img>.lanbu { position: absolute; top: 0; left: 0; width: 236px; height: 557px; transform: rotateY(259deg) translateZ(75px) rotateX(5deg) translateX(96px) rotateZ(24deg) translateY(24px); background: #0DDFF6; z-index: 10; opacity: 1; } .box1>.left>.square-box>.img>.bottomTriangle { position: absolute; bottom: -1px; right: -1px; width: 0px; height: 0px; border-color: transparent #E65C4E #E65C4E transparent; border-width: 0px 0px 87px 42px; border-style: solid; } .box1>.left>.square-box>.img>.topTriangle { position: absolute; top: 0; left: 0; width: 0px; height: 0px; border-color: #E65C4E transparent transparent #E65C4E; border-width: 57px 30px 48px 20px; border-style: solid; } /*添加动画效果*/ @keyframes imgMoving1 { 0% { left: 0; } 100% { left: -700px; } } /*图片动画2*/ .box2 { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; background: #C49472; } .box2>.left { position: absolute; top: 50%; left: 50%; width: 729px; height: 621px; margin-left: -250px; margin-top: -250px; position: relative; z-index: -2; } .box2>.left>.square-box { position: relative; width: 729px; height: 621px; transform: rotateY(2deg) translateZ(364px) rotateX(0deg) translateX(-166px) translateY(-20px) rotateZ(11deg); z-index: 0; /*overflow: hidden;*/ } .box2>.left>.square-box>.diamond { position: absolute; width: 191px; height: 610px; background: #F9DA58; /* margin: 100px auto; */ transform: rotateY(73deg) translateZ(-58px) rotateX(8.6deg) translateX(2264px) rotateZ(27deg) translateY(6px); z-index: 11; } .box2>.left>.square-box>.img { overflow: hidden; } .box2>.left>.square-box>.img>.picture { position: relative; left: -300px; height: 100%; animation: imgMoving2 10s linear; animation-fill-mode: forwards; } .box2>.left>.square-box>.bottomTriangle { position: absolute; top: -3px; right: -3px; z-index: 11; width: 0px; height: 0px; border-color: transparent #C49472 transparent transparent; border-width: 0px 64px 86px 0px; border-style: solid; } .box2>.left>.square-box>.topTriangle { position: absolute; bottom: -3px; left: 0; z-index: 11; width: 0px; height: 0px; border-color: transparent transparent #C49472 #C49472; border-width: 0px 64px 86px 0px; border-style: solid; transform: rotate(0deg); } @keyframes imgMoving2 { 0% { left: -300px; } 100% { left: 0 } } /*图片动画3*/ .box3 { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; background: #FE9738; } .box3>.left { position: absolute; top: 50%; left: 50%; width: 900px; height: 563px; margin-left: -450px; margin-top: -281px; /*background: #00D1E7;*/ } .box3>.left>.square-box { position: relative; width: 900px; height: 563px; /*transform: rotateY(2deg) translateZ(364px) rotateX(0deg) translateX(-166px) translateY(-20px) rotateZ(11deg);*/ /*z-index:-1;*/ /*overflow: hidden;*/ } .box3>.left>.square-box>.skew { position: relative; width: 900px; height: 563px; transform: skew(-50deg); overflow: hidden; } .box3>.left>.square-box>.skew>.skew_img { position: absolute; top: 0; left: -239px; transform: skew(50deg); overflow: hidden; } .box3>.left>.square-box>.skew>.skew_img>.img { position: relative; width: 1500px; height: 567px; left: 0; top: 0; background: url(../images/yinpingkuaizhao.jpg) no-repeat center; background-size: cover; animation: cover 3s linear; animation-fill-mode: forwards; } .box3>.left>.square-box>.skew>.skew-main { transform: skew(15deg); } .box3>.left>.square-box>.skew>.leftTriangle { position: absolute; left: 0; bottom: 0; z-index: 11; width: 0; height: 0; border-width: 0px 300px 300px 300px; border-style: solid; border-color: transparent transparent #FE9738; transform: rotateY(15deg) translateZ(-63px) rotateX(-47deg) translateX(504px) translateY(-598px) rotateZ(388deg); } .box3>.left>.square-box>.skew>.rightTriangle { position: absolute; left: 0; bottom: 0; z-index: 11; width: 0; height: 0; border-width: 0px 337px 146px 0px; border-style: solid; border-color: transparent transparent #FE9738; transform: rotateY(1deg) translateZ(1px) rotateX(1deg) translateX(-2px) translateY(1px) rotateZ(0deg); } .box3>.left>.square-box>.skew>.smallskew { /*position: absolute; z-index: 1;*/ width: 594px; height: 144px; background: #00D1e8; transform: skew(65deg) translateY(419px) translateX(-744px); } .box3>.left>.square-box>.skew>.smallskew>.smallskew-main { transform: skew(-15deg); } @keyframes cover { 0% { width: 1500px; height: 567px; left: 0; top: 0; } 100% { width: 1950px; height: 737px; left: -165px; top: -125px; } } /*图片动画4*/ .box4 { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; background: #E45A4C; } .box4>.left { position: absolute; top: 50%; left: 50%; width: 750px; height: 556px; margin-left: -375px; margin-top: -278px; /*background: #00D1E7;*/ background-size: cover; z-index: 1; } .box4>.left>.square-box { position: relative; /*width: 600px; height: 447px;*/ /*transform: rotateY(1deg) translateZ(1px) rotateX(0deg) translateX(1px) translateY(1px) rotateZ(1deg); background: green;*/ } .box4>.left>.square-box>.skew { position: relative; width: 750px; height: 556px; transform: skew(-36deg) rotateZ(49deg); background-size: cover; /*overflow:hidden;*/ } .box4>.left>.square-box>.skew>.skew_img { position: absolute; overflow: hidden; width: 100%; height: 100%; /* animation-fill-mode: forwards; */ } .box4>.left>.square-box>.skew>.skew_img>.img { position: absolute; top: -335px; left: -165px; width: 1210px; height: 1200px; background: url(../images/box4.jpg) no-repeat center; /* background: #0000FF; */ background-size: 100% 100%; transform: skew(-38deg) rotateZ(-85deg); animation: cover4 10s linear; animation-fill-mode: forwards; } .box4>.left>.square-box>.skew>.skew-main { transform: skew(15deg); } .box4>.left>.square-box>.skew>.lanbu { width: 50px; height: 792px; transform: rotateY(45deg) translateZ(0) rotateX(0deg) translateX(490px) translateY(-372px) skew(-80deg) rotateZ(90deg); background: #00CEE4; } .box4>.left>.square-box>.skew>.topTriangle { position: absolute; top: 0px; right: 60px; z-index: 11; width: 0; height: 0; border-width: 0px 2px 52px 244px; border-style: solid; border-color: transparent transparent #E45A4C; transform: rotateY(-3deg) translateZ(-1px) rotateX(-15deg) translateX(-450px) translateY(-9px) rotateZ(-182deg); } .box4>.left>.square-box>.skew>.leftTriangle { position: absolute; bottom: 0; left: 0; z-index: 11; width: 0; height: 0; border-width: 0px 2px 52px 244px; border-style: solid; border-color: transparent transparent #E45A4C; transform: rotateY(0deg) translateZ(1px) rotateX(1deg) translateX(508px) translateY(7px) rotateZ(0deg); } @keyframes cover4 { 0% { top: -335px; left: -165px; } 100% { top: -435px; left: -265px; } } /*图片动画5*/ .box5 { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; background: #00D1E8; } .box5>.left { position: absolute; top: 50%; left: 50%; width: 1000px; height: 434px; margin-left: -500px; margin-top: -217px; /*background: #00D1E7;*/ } .box5>.left>.square-box { position: relative; width: 1000px; height: 434px; /*margin-left: -164px; margin-top: -62px;*/ background: none; transform: rotateZ(-13deg); background: #00D1E8; /*transform: rotateY(2deg) translateZ(364px) rotateX(0deg) translateX(-166px) translateY(-20px) rotateZ(11deg);*/ /*z-index:-1;*/ /*overflow: hidden;*/ } .box5>.left>.square-box>.x_img { overflow: hidden; width: 100%; height: 100%; background: #00D1E8; position: relative; } .box5>.left>.square-box>.x_img>.img { position: absolute; top: -47px; left: -80px; width: 1500px; height: 820px; transform: rotateZ(13deg); background: url(../images/jizhang.jpg); animation: imgTopMoving 5s linear; animation-fill-mode: forwards; } .box5>.left>.square-box>.RightTriangle { position: absolute; top: 0; right: 0; z-index: 11; width: 0; height: 0; border-color: transparent #00D1E8; border-width: 0 123px 175px 0; border-style: solid; transform: translateX(1px) translateY(-1px); } .box5>.left>.square-box>.leftTriangle { position: absolute; bottom: -1px; left: -3px; z-index: 11; width: 0; height: 0; border-color: #00D1E8 transparent; border-width: 0 123px 175px 0; border-style: solid; } .box5>.left>.square-box>.skew { position: absolute; left: 0; top: 0; z-index: 11; width: 254px; height: 396px; background: #FF993A; transform: rotateY(291deg) translateZ(73px) rotateX(-20.6deg) translateX(5px) rotateZ(43deg) translateY(30px); } .box5>.left>.square-box>.skew>.skew-main { transform: rotateY(45deg); } @keyframes imgTopMoving { 0% { top: -47px; } 100% { top: -147px; } } /*图片动画6*/ .box6 { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; background: #F3D453; } .box6>.left { position: absolute; top: 50%; left: 50%; width: 580px; height: 780px; margin-left: -290px; margin-top: -390px; /*background: #00D1E7;*/ } .box6>.left>.square-box { position: relative; width: 580px; height: 780px; background: none; transform: rotateZ(-14deg); } .box6>.left>.square-box>.x_img { position: relative; width: 100%; height: 100%; overflow: hidden; } .box6>.left>.square-box>.x_img>.img { position: absolute; top: -65px; left: -80px; width: 775px; height: 900px; transform: rotateZ(14deg); background: url(../images/jifang.jpg) no-repeat center; background-size: cover; animation: imgZMoving 3s linear; animation-fill-mode: forwards; } .box6>.left>.square-box>.lanbu { position: absolute; top: 0; left: 0; z-index: 11; width: 369px; height: 700px; transform: rotateY(259deg) translateZ(75px) rotateX(177deg) translateX(410px) rotateZ(19deg) translateY(-42px); background: #088CFF; z-index: 10; } .box6>.left>.square-box>.leftTriangle { position: absolute; bottom: -3px; left: -3px; z-index: 11; width: 0; height: 0; border-color: #F3D453 transparent; border-width: 0px 73px 121px 0; border-style: solid; } .box6>.left>.square-box>.rightTriangle { position: absolute; top: -3px; right: -3px; z-index: 11; width: 0; height: 0; border-color: transparent #F3D453; border-width: 0px 73px 121px 0; border-style: solid; } @keyframes imgZMoving { 0% { top: -65px; left: -80px; width: 775px; height: 900px; } 100% { top: -40px; left: -110px; width: 891px; height: 1035px; } } /*图片动画7*/ .box7 { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; background: #BB8B69; } .box7>.left { position: absolute; top: 50%; left: 50%; width: 800px; height: 616px; margin-left: -400px; margin-top: -308px; /*background: #00D1E7;*/ } .box7>.left>.square-box { position: relative; width: 800px; height: 616px; transform: rotateZ(-7deg); /*overflow: hidden;*/ } .box7>.left>.square-box>.x_img { position: relative; width: 100%; height: 100%; overflow: hidden; } .box7>.left>.square-box>.x_img>.img { position: absolute; left: -165px; width: 1000px; height: 686px; transform: rotateZ(7deg); background: url(../images/xiu-28.jpg) no-repeat center; background-size: cover; animation: imgRightMoving 5s linear; animation-fill-mode: forwards; } .box7>.left>.square-box>.huangbu { position: absolute; top: 0; left: 1px; width: 739px; height: 77px; background: #F68F31; transform: skew(39deg) translateX(31px); } .box7>.left>.square-box>.leftTriangle { position: absolute; bottom: -2px; left: -2px; width: 0; height: 0; border-color: #BB8B69 transparent; border-width: 0px 63px 79px 0; border-style: solid; } .box7>.left>.square-box>.rightTriangle { position: absolute; top: -1px; right: -2px; width: 0; height: 0; border-color: transparent #BB8B69; border-width: 0px 63px 79px 0; ; border-style: solid; } @keyframes imgRightMoving { 0% { left: -165px; } 100% { left: -40px } } /*图片动画8*/ .box8 { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; background: #FF993A; } .box8>.left { position: absolute; top: 50%; left: 50%; width: 900px; height: 650px; margin-left: -450px; margin-top: -325px; /*background: #00D1E7;*/ } .box8>.left>.square-box { position: relative; width: 900px; height: 650px; transform: rotateZ(9deg); /*overflow: hidden;*/ } .box8>.left>.square-box>.x_img { position: relative; width: 100%; height: 100%; overflow: hidden; } .box8>.left>.square-box>.x_img>.img { position: absolute; left: -30px; top: -67px; width: 1103px; height: 785px; transform: rotateZ(-9deg); background: url(../images/iapo.jpg) no-repeat center; background-size: cover; animation: imgLeftMoving 4s linear; animation-fill-mode: forwards; } .box8>.left>.square-box>.lanbu { position: absolute; top: 0; left: -2px; width: 666px; height: 561px; transform: rotateY(259deg) translateZ(75px) rotateX(1.7deg) translateX(1020px) rotateZ(8deg) translateY(45px); background: #00CEE5; z-index: 10; } .box8>.left>.square-box>.leftTriangle { position: absolute; top: -1px; left: -1px; width: 0; height: 0; border-color: transparent #FF993A; border-width: 0px 0px 95px 134px; border-style: solid; } .box8>.left>.square-box>.rightTriangle { position: absolute; bottom: -3px; right: -1px; width: 0; height: 0; border-color: #FF993A transparent; border-width: 0px 0px 95px 134px; border-style: solid; } @keyframes imgLeftMoving { 0% { left: -30px; } 100% { left: -100px; } } /*图片动画9*/ .box9 { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; background: #00D1E8; } .box9>.left { position: absolute; top: 50%; left: 50%; width: 926px; height: 584px; margin-left: -463px; margin-top: -292px; /*background: #00D1E7;*/ } .box9>.left>.square-box { position: relative; width: 926px; height: 584px; transform: rotateZ(-6deg); /*overflow: hidden;*/ } .box9>.left>.square-box>.x_img { position: relative; width: 100%; height: 100%; overflow: hidden; } .box9>.left>.square-box>.x_img>.img { position: absolute; top: -59px; left: -35px; width: 1110px; height: 703px; transform: rotateZ(6deg); background: url(../images/xxpan.png) no-repeat center; background-size: cover; animation: LeftMoving 3s linear; animation-fill-mode: forwards; } .box9>.left>.square-box>.lanbu { position: absolute; bottom: 0; width: 855px; height: 48px; /* transform: rotateY(259deg) translateZ(75px) rotateX(3deg) translateX(591px) rotateZ(15deg) translateY(55px); */ background: #EB6153; z-index: 10; transform: skew(-55deg) translateX(39px); } .box9>.left>.square-box>.leftTriangle { position: absolute; top: -2px; left: -2px; width: 0; height: 0; border-color: transparent #00D1E8; border-width: 0px 0px 50px 83px; border-style: solid; } .box9>.left>.square-box>.rightTriangle { position: absolute; bottom: -2px; right: -4px; width: 0; height: 0; border-color: #00D1E8 transparent; border-width: 0px 0px 50px 83px; border-style: solid; } @keyframes LeftMoving { 0% { transform: translateX(0px) rotateZ(6deg); -ms-transform: translateX(0px) rotateZ(6deg); -moz-transform: translateX(0px) rotateZ(6deg); -webkit-transform: translateX(0px) rotateZ(6deg); -o-transform: translateX(0px) rotateZ(6deg); } 100% { transform: translateX(-100px) rotateZ(6deg); -ms-transform: translateX(-100px) rotateZ(6deg); -moz-transform: translateX(-100px) rotateZ(6deg); -webkit-transform: translateX(-100px) rotateZ(6deg); -o-transform: translateX(-100px) rotateZ(6deg); } } /*图片动画10*/ .box10 { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; background: #E05749; } .box10>.left { position: absolute; top: 50%; left: 50%; width: 593px; height: 800px; margin-left: -296px; margin-top: -400px; /*background: #00D1E7;*/ } .box10>.left>.square-box { position: relative; width: 593px; height: 800px; background: none; transform: rotateZ(8deg); /*overflow: hidden;*/ } .box10>.left>.square-box>.x_img { position: relative; width: 100%; height: 100%; overflow: hidden; } .box10>.left>.square-box>.x_img>.img { position: absolute; left: -65px; top: -61px; width: 740px; height: 1010px; transform: rotateZ(-8deg); background: url(../images/hndlo.jpg) no-repeat center; background-size: cover; animation: imgCover 5s linear; animation-fill-mode: forwards; } .box10>.left>.square-box>.lanbu { position: absolute; top: 0; left: 0; width: 190px; height: 816px; transform: rotateY(259deg) translateZ(75px) rotateX(186.2deg) translateX(10px) rotateZ(-29deg) translateY(10px); background: #F0D14D; z-index: 10; } .box10>.left>.square-box>.leftTriangle { position: absolute; top: -1px; left: -1px; width: 0; height: 0; border-color: transparent #E05749; border-width: 0px 0px 89px 41px; border-style: solid; } .box10>.left>.square-box>.rightTriangle { position: absolute; bottom: -1px; right: -1px; width: 0; height: 0; border-color: #E05749 transparent; border-width: 0px 0px 89px 41px; border-style: solid; } @keyframes imgCover { 0% { top: -61px; } 100% { top: -161px; } } /*图片动画11*/ .box11 { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; background: #0085f8; } .box11>.left { position: absolute; top: 50%; left: 50%; width: 690px; height: 690px; margin-left: -345px; margin-top: -345px; /*background: #00D1E7;*/ } .box11>.left>.square-box { position: relative; width: 690px; height: 690px; overflow: hidden; } .box11>.left>.square-box>.x_img { width: 690px; height: 690px; background: url(../images/xiu-1.jpg) no-repeat -210px center; background-size: cover; animation: imgcover 3s linear; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes imgcover { 0% { transform: scale(1); -ms-transform: scale(1); /* IE 9 */ -moz-transform: scale(1); /* Firefox */ -webkit-transform: scale(1); /* Safari 和 Chrome */ -o-transform: scale(1); } 100% { transform: scale(1.15); -ms-transform: scale(1.15); /* IE 9 */ -moz-transform: scale(1.15); /* Firefox */ -webkit-transform: scale(1.15); /* Safari 和 Chrome */ -o-transform: scale(1.15); } } @media (max-width: 1920px) { .hhtootk { zoom: .7; } } @media (max-width: 1440px) { .hhtootk { zoom: .5; } } @media (max-width: 800px) { .hhtootk { zoom: .3; } } .icp-box { clear: both; background: #fff; text-align: center; border-top: 3px solid #c15c00; padding: 30px 0 10px; } .icp-box>* { padding: 0 5px; color: #666; }