.head{ width: 100%; height: 60px; } .left{ float: left; } .left>span{ color: #1d1569; } .right{ height: 60px; line-height: 60px; float: right; } .left>img{ margin-right: 30px; } .right>a{ color: #1d1569; } .right>a:hover{ color: #b43727; } .right>a:nth-of-type(1){ margin-right: 20px; } @media screen and (max-width: 640px) { .head { height: 1rem; padding: 0 0.2rem; } .w{ width: 80%; } .left>img{ width: 2.2rem; height: auto; margin-right: 0; margin-top: 0.1rem; } .left>span{ display: none; } .right{ height: 1rem; line-height: 1rem; float: right; } .right>a:nth-of-type(1){ margin-right: 0.3rem; } } @font-face { font-family: myfirstfont; src: ,    /*  ; /* ie9 */ } .top{ width: 100%; position: relative; } .top>img{ width: 100%; } .top_n>h3{ display: none; } .top_n{ width: 1067px; height: 293px; line-height: 30px; color: #210379; padding: 0 26px; padding-top: 90px; font-size: 16px; background: no-repeat; background-size: 100% 100%; position: absolute; top: 60%; left: 50%; transform: translate(-50%); } @media screen and (max-width: 640px) { .top { width: 100%; position: relative; } .top_n>h3{ display: block; margin-top: 0.4rem; font-family: myfirstfont; font-size: 0.3rem; color: #fff; text-align: center; margin-bottom: 0.3rem; } .top>img{ width: 100%; height: 4.5rem; } .top_n{ width: 96%; line-height: 0.34rem; color: #210379; padding: 0 0.6rem; padding-top: 0rem; font-size: 0.23rem; background: url(/uploads/image/z2img/dao_02.png) no-repeat; background-size: 102% 100%; position: absolute; top: 65%; left: 50%; transform: translate(-49%); } } /*第二*/ .second{ width: 100%; text-align: center; margin-top: 140px; margin-bottom: 60px; } .second>img:nth-of-type(1){ width: 731px; height: 134px; } .second>img:nth-of-type(2){ width: 952px; height: 149px; margin-top: 80px; } .second>img:nth-of-type(3){ width: 731px; height: 134px; margin-top: 80px; } .second>img:nth-of-type(4){ width: 1117px; height: 399px; margin-top: 80px; } @media screen and (max-width: 640px) { .second { width: 100%; text-align: center; margin-top: 2.4rem; margin-bottom: 0.6rem; } .second>img:nth-of-type(1) { width:86% ; height: auto; margin-top: 2rem; } .second>img:nth-of-type(2){ width:94% ; height: auto; margin-top: 1.2rem; } .second>img:nth-of-type(3){ width:86% ; height: auto; margin-top: 1.2rem; } .second>img:nth-of-type(4){ width:94% ; height: auto; margin-top: 1.2rem; } } /*第三*/ .third{ width: 100%; background: url(/uploads/image/z2img/chang_bj.png) no-repeat; background-size: 100% 100%; padding-top: 80px; padding-bottom: 50px; } .third_bt{ width: 100%; text-align: center; margin-bottom: 60px; } .third_lb{ width: 1059px; height: 858px; margin: 0 auto; background: url(/uploads/image/z2img/chang_nr.png) no-repeat; background-size: 100% 100%; padding: 0 20px; padding-top: 108px; } #test3{ margin: 0 auto; width: 90% !important; height: 638px !important; } .layui-carousel>[carousel-item]>*{ background-color: rgba(0,0,0,0); } .layui-carousel{ background-color: rgba(0,0,0,0); } .layui-carousel[lay-anim=updown] .layui-carousel-ind{ right: 0; } .problems li{ padding: 30px 10px; } .problems li h3{ color: #210379; font-size: 20px; font-family: myfirstfont; padding: 10px 0; } .problems li p{ color: #210379; } .zhuan{ text-align: center; } .zhuan a{ display: inline-block; background: url(/uploads/image/z2img/ju_08.png) no-repeat; width: 314px; height: 68px; } @media screen and (max-width: 640px) { .third_bt>img{ width: 96%; height: auto; } .third_lb{ width: 100%; height:18rem; margin: 0 auto; background: url(/uploads/image/z2img/chang_nr_2.png) no-repeat; background-size: 100% 100%; padding: 0 20px; padding-top: 108px; } #test3{ margin: 0 auto; width: 90% !important; height: 14rem !important; } .problems li{ padding: 0.4rem 0.1rem; border-bottom: 1px dashed #210379; } .problems li h3{ color: #210379; font-size: 0.3rem; font-family: myfirstfont; } .five{ margin-top: 0 !important; } .six{ margin-top: 0rem !important; } .three{ padding: 0.2rem 0.1rem !important; } .twlve{ margin-top: 0 !important; } .nine{ margin-top: 0 !important; } .zhuan a{ display: inline-block; background: url(/uploads/image/z2img/ju_08.png) no-repeat; background-size: 100% 100%; width: 70%; height: 1rem; } } /*第四*/ .four{ width: 100%; padding-top: 80px; } .for_bt{ width: 100%; text-align: center; } .for_cont{ padding: 0 50px; } .for_cont>ul{ display: flex; max-width:1200px ; margin: 0 auto; margin-top: 40px; flex-wrap: wrap; justify-content: space-around; } .for_cont>ul>li{ flex-grow: 1; padding: 20px 20px; padding-left: 70px; padding-top: 140px; margin: 0 20px; } .for_cont>ul>li>h3{ display: none; } .for_cont>ul>li:nth-of-type(1){ width: 503px; height: 670px; background: no-repeat; margin-top: 22px; } .for_cont>ul>li:nth-of-type(2){ width: 503px; height: 670px; background: url(/uploads/image/z2img/xiao_x.png) no-repeat; padding-top: 164px; } .for_cont>ul>li:nth-of-type(3){ width: 503px; height: 670px; background: url(/uploads/image/z2img/you_e.png) no-repeat; padding-top: 164px; } .for_cont>ul>li:nth-of-type(4){ width: 503px; height: 670px; background: no-repeat; padding-top: 164px; } .for_cont>ul>li>p{ line-height: 30px; text-decoration: underline; } .for_cont>ul>li>p>a{ color: #fff; } @media screen and (max-width: 640px) { .four{ width: 100%; padding-top: 80px; margin-bottom: 0.7rem; } .for_bt>img{ width: 96%; height: auto; } .for_cont{ padding: 0 0; } .for_cont>ul{ display: flex; max-width:100% ; margin: 0 auto; margin-top: 0.4rem; flex-wrap: wrap; justify-content: space-around; } .for_cont>ul>li>h3{ display: block; font-size: 0.56rem; margin-top: 10%; margin-left: 7%; margin-bottom: 0.5rem; color: #210379; } .for_cont>ul>li{ flex-grow: 1; padding: 0.2rem 0.2rem; padding-left: 0.8rem; padding-top: 2.4rem; margin: 0 0.2rem; margin-left: 0; } .for_cont>ul>li:nth-of-type(1){ width: 100%; height: 14rem; background: url(/uploads/image/z2img/kong.png) no-repeat; background-size: 100% 100%; margin-top: 0.3rem; padding-top: 0; } .for_cont>ul>li:nth-of-type(2){ width: 100%; height: 13rem; background: url(/uploads/image/z2img/kong.png) no-repeat; background-size: 100% 100%; margin-top: 0.3rem; padding-top: 0; } .for_cont>ul>li:nth-of-type(3){ width: 100%; height: 12rem; background: url(/uploads/image/z2img/kong.png) no-repeat; background-size: 100% 100%; margin-top: 0.3rem; padding-top: 0; } .for_cont>ul>li:nth-of-type(4){ width: 100%; height: 11rem; background: url(/uploads/image/z2img/kong.png) no-repeat; background-size: 100% 100%; margin-top: 0.3rem; padding-top: 0; } .for_cont>ul>li:nth-of-type(4)>h3{ margin-top: 0.6rem; } .for_cont>ul>li>p{ line-height: 30px; text-decoration: underline; } } .bottom_bt{ width: 100%; text-align: center; } .bottom_ma{ margin-top: 80px; text-align: center; width: 100%; height: 613px; background: url(/uploads/image/z2img/bottom.png) no-repeat; background-size: 100% 100%; } .bottom_ma>img{ margin: 0 4%; } @media screen and (max-width: 640px) { .bottom_ma{ margin-top: 0.8rem; text-align: center; width: 100%; height: 5.8rem; background: url(/uploads/image/z2img/bottom.png) no-repeat; background-size: 100% 100%; } .bottom_bt>img{ width: 96%; height: auto; } .bottom_ma>img{ width: 40%; height: auto; } } .main_bottom { padding-top: 50px; padding-bottom: 20px; height: 156px; width: 100%; background-image: linear-gradient(0deg, rgba(87, 93, 104, 1) 0%, rgba(63, 69, 80, 1) 50%, rgba(46, 52, 63, 1) 100%), linear-gradient( rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)); background-blend-mode: normal, normal; } .bottom_top { padding: 0 158px; height: 200px; } .bottom_left { padding-right: 150px; border-right: 1px solid #fff; float: left; height: 100%; padding-top: 20px; } .bottom_left>p { height: 30px; line-height: 30px; color: #fff; } .bottom_right { float: left; padding-left: 94px; padding-top: 20px; } .wx_zp { display: inline-block; padding: 10px; text-align: center; margin: 0 20px; cursor: pointer; } .wx_zp>p { color: #fff; text-align: center; } .bottom_x { width: 100%; margin-top: 15px; } .bottom_x>p { width: 100%; text-align: center; height: 30px; line-height: 30px; color: #afb0b2; } .bottom_x>p:nth-of-type(1)>a { color: #fff; padding: 0 8px; border-right: 1px solid #fff; display: inline-block; height: 15px; line-height: 15px; } @media screen and (max-width: 640px) { .main_bottom { padding-top: 0.5rem; padding-bottom: 0.2rem; height: 2.8rem; width: 100%; background-image: linear-gradient(0deg, rgba(87, 93, 104, 1) 0%, rgba(63, 69, 80, 1) 50%, rgba(46, 52, 63, 1) 100%), linear-gradient( rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)); background-blend-mode: normal, normal; } .w{ width: 100%; } .bottom_top { padding: 0 1.58rem; height: 2rem; } .bottom_left { padding-right: 1.5rem; border-right: 1px solid #fff; float: left; height: 100%; padding-top: 0.2rem; } .bottom_left>p { height: 0.3rem; line-height: 0.3rem; color: #fff; } .bottom_right { float: left; padding-left: 0.94rem; padding-top: 0.2rem; } .wx_zp { display: inline-block; padding: 0.1rem; text-align: center; margin: 0 0.2rem; cursor: pointer; } .bottom_x { width: 100%; margin-top: 0.15rem; } .bottom_x>p { width: 100%; text-align: center; height: 0.35rem; line-height: 0.35rem; color: #afb0b2; font-size: 0.2rem; } .bottom_x>p:nth-of-type(1)>a { font-size: 0.2rem; color: #fff; padding: 0 0.1rem; border-right: 1px solid #fff; display: inline-block; height: 0.25rem; line-height: 0.25rem; } }