.posrelative { position: relative; } .fr { float: right; } .fl{ float: left; } .wrap { width: 1400px; margin: 0 auto; } .head{ height: 100px; background: #fbc816; font-size: 20px; } .head .wrap{ position: relative; z-index: 9; } .head .line{ z-index: 8; width: 1550px; position: absolute; left: 50%; margin-left: -775px; bottom: 10px; } .head .line img{ display: block; width: 100%; } .logo{ display: inline-block; height: 62px; margin-top: 19px; } .logo img{ display: block; height: 100%; } @charset "utf-8"; *{transition: .25s;} html,body{ min-width: 1200px; } .head{ height: 100px; background: #fbc816; font-size: 20px; } .head .wrap{ position: relative; z-index: 9; } .wrap{ width: 100%; padding: 0 60px; } .head .line{ z-index: 8; width: 1600px; position: absolute; left: 50%; margin-left: -800px; bottom: 10px; } .head .line img{ display: block; width: 1460px; margin: auto; } .logo{ display: inline-block; height: 62px; margin-top: 19px; } .logo img{ display: block; height: 100%; } .nav{ line-height: 100px; } .nav a{ color: #353535; float: left; line-height: 24px; display: inline-block; margin-top: 38px; } .nav span{ color: #fff; display: block; margin: 0 15px; line-height: 24px; float: left; height: 22px; margin-top: 39px; } .nav span img{ height: 100%; display: block; } .hdr1{ margin-left: 10px; position: relative; height: 100px; } .hdr1 span{ color: #353535; float: left; line-height: 24px; display: inline-block; margin-top: 38px; cursor: pointer; } .hdr1 span img{ height: 15px; } .hdr1hide{ width: 100px; text-align: center; position: absolute; left: 50%; margin-left: -50px; top: 80px; background: #353535; padding: 5px 0; opacity: 0; visibility: hidden; transition: .25s; z-index: 99; } .hdr1:hover .hdr1hide{ opacity: 1; visibility: inherit; } .hdr1hide a{ color: #fff; line-height: 40px; font-size: 16px; display: block; } .hdr1hide a:hover{ color: #fbc816; } .hdr2{ margin-left: 25px; } .hdr2 a{ color: #353535; float: left; line-height: 24px; display: inline-block; margin-top: 38px; } .bnapb{ position: absolute; left: 50%; margin-left: -155px; bottom: 60px; } .bna{ display: inline-block; width: 310px; height: 46px; text-align: center; line-height: 46px; border-radius: 46px; background: #fbc816; color: #ffe89f; font-size: 22px; letter-spacing: 5px; overflow: hidden; } .bna span{ display: block; width: 60%; height: 100%; margin: 0 auto; background: #f01a22; transition: .5s; } .bna:hover span{ width: 100%; } .bna:hover{ box-shadow: 0 0 25px rgba(0,0,0,.5); } .md{ padding: 75px 0; } .m1{ background: url(../image/m1bg_02.png) no-repeat left top #f2f2f2; background-size: 460px; } .mr10{ margin-right: 10px; } .ml10{ margin-left: 10px; } .m1top{ font-size: 50px; font-weight: bold; color: #5e5e5e; letter-spacing: 10px; } .m1top img{ margin: 0 20px; height: 60px; margin-top: -5px; } .m1w{ margin-top: 110px; } .mdtop h3{ font-size: 42px; color: #000; font-weight: normal; } .mdtop p{ font-size: 14px; text-transform: uppercase; margin-top: 10px; } .mdtop img{ width: 240px; margin-top: -10px; } .m1txt{ background: url(../image/m1txt_03.png) no-repeat center; background-size: 100% 100%; padding: 30px 50px; font-size: 17px; color: #3d3d3d; line-height: 42px; } .m1txt p{ text-indent: 2em; } .m2{ background: #fbc816; } .swiper-button-next-public{ width: 60px; height: 100px; background: url(../image/m2r_03.png) no-repeat center; background-size: 45px; margin-top: -50px; margin-right: -100px; transition: .25s; } .swiper-button-prev-public{ width: 60px; height: 100px; background: url(../image/m2r_03.png) no-repeat center; background-size: 45px; margin-top: -50px; margin-left: -100px; transform:rotate(180deg); transition: .25s; } .swiper-button-next-public:hover{ margin-right: -105px; } .swiper-button-prev-public:hover{ margin-left: -105px; } .m2aimg_vd{ width: 126px; height: 126px; background: url(../image/vdico_03.png) no-repeat center; background-size: 100% 100%; position: absolute; left: 50%; top: 50%; margin: -63px 0 0 -63px; } .m2{ padding-bottom: 40px; } .m2ap{ font-size: 18px; color: #000; margin-top: 40px; text-align: center; } .videohide{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9999; visibility: hidden; opacity: 0; transition: .5s; } .videohide_class{ visibility: visible; opacity: 1; } .videohidebg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,.7); z-index: 10; } .videohidebox i{ display: inline-block; width: 30px; height: 30px; text-align: center; line-height: 26px; border-radius: 30px; background: #e0b211; color: #fff; position: absolute; right: 0; top: 0; margin-right: -15px; margin-top: -15px; border: 2px solid #fff; cursor: pointer; } .videohidebox i:hover{ -webkit-filter: brightness(110%); } .videohidebox{ width: 50%; height: 600px; background: #fff; position: absolute; top: 50%; left: 25%; z-index: 20; padding: 10px; margin-top: -600px; transition: .5s; } .videohidebox_class{ margin-top: -300px; } .videohidebox_1{ width: 100%; height: 530px; } .videohidebox_1 video{ width: 100%; height: 100%; object-fit: fill; } .videohidebox_1 p{ font-size: 16px; color: #000; height: 50px; line-height: 50px; text-align: center; } .m3{ background: url(../image/m3bg_02.jpg) no-repeat bottom center #f2f2f2; background-size: 100% 145px; padding-bottom: 0; } .mdmore a{ font-size: 16px; line-height: 40px; } .mdmore a img{ vertical-align: middle; margin-top: -3px; margin-left: 10px; } .m3a img{ height: 650px; } .swiper-container-m3 .swiper-slide{ width: auto!important; } .m3atxt{ padding: 20px 0; height: 145px; text-align: center; } .m3atxt h3{ font-size: 24px; font-weight: normal; line-height: 30px; height: 30px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis; } .m3atxt p{ font-size: 16px; line-height: 30px; height: 30px; margin-top: 5px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis; } .m4{ background: url(../image/m1bg_02.png) no-repeat left top #f2f2f2; background-size: 460px; padding-bottom: 90px; } .m4w{ width: 102%; } .m4a{ width: 18%; float: left; margin-right: 2%; background: #fff; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.1); padding: 40px 20px 80px 20px; transition: .25s; } .m4a:hover{ box-shadow: 0 4px 44px rgba(0,0,0,.15); } .m4a h3{ font-size: 78px; color: #848484; font-weight: normal; } .m4atxt{ margin-top: 90px; line-height: 62px; font-size: 32px; color: #000; transition: .25s; } .m4a:hover .m4atxt{ color: #fbc816; font-weight: bold; } .m4ai{ width: 130%; display: block; position: absolute; left: -15%; top: -37%; transition: .5s; transform: scale(0); } .m4a:hover .m4ai{ transform: scale(1); } .m4ai img{ display: block; width: 100%; } .yun{ display: block; position: absolute; right: 30px; top: 70px; animation: myfirst 3s infinite; } .yun img{ height: 165px; display: block; } @keyframes myfirst { 0% { transform: translate(0px, 0px); } 50% { transform: translate(0px, -20px); } 100% { transform: translate(0px, 0px); } } .m5{ background: url(../image/m5bg_02.png) no-repeat left top #fff; background-size: 260px; padding-bottom: 0; } .m5w{ width: 100%; height: 350px; background: url(../image/m5b_02.png) no-repeat center; background-size: 100% 100%; } .m5a{ left: 0; top: 0; width: 100%; height: 100%; } .m5ul li{ width: 40%; text-align: left; cursor: pointer; } .m5ul li:last-child{ text-align: right; } .m5ul li h3{ font-size: 40px; color: #000; font-weight: bold; line-height: 56px; } .m5ul li p{ line-height: 38px; font-size: 17px; color: #000; } .m5ul li i{ display: inline-block; height: 5px; width: 250px; background: #000; margin: 10px 0; } .m6ul li{ display: none; } .m6ul li.active{ display: block; } .m6{ background: url(../image/m6bg_03.jpg) no-repeat center; background-size: cover; } .m6a{ width: 236px; height: 268px; background: url(../image/m6abg_03.png) no-repeat center; background-size: 100% 100%; padding-top: 50px; } .m6a h3{ font-size: 30px; color: #000; font-weight: normal; } .m6a i{ font-size: 14px; color: #666; display: block; margin: 10px 0; } .m6a p{ font-size: 14px; color: #666; letter-spacing: 2px; } .m6a p b{ font-size: 32px; color: #fbc816; } .m6a img{ width: 190px; margin: 10px auto; } .m6a span{ font-size: 14px; color: #666; } .m6boxw{ display: inline-block; margin-top: -60px; } .m6w{ margin-top: 120px; } .m6more{ margin-top: 70px; } .m6more a{ display: inline-block; animation: myfirst 3s infinite; } .m6more a img{ display: block; height: 120px; } .m7{ background: url(../image/m7bg_03.jpg) no-repeat right top #fbc816; background-size: 350px; padding-bottom: 40px; } .m7w{ width: 101%; } .m7a{ width: 19%; margin-right: 1%; color: #000; } .m7a img{ display: block; width: 100%; } .m7a h3{ font-size: 22px; font-weight: normal; margin-top: 20px; } .m7a p{ font-size: 16px; margin-top: 20px; } .m7a span{ display: block; font-size: 18px; margin-top: 5px; } .m8{ background: #fbc816; } .m81{ width: 1660px; background: #f2f2f2; padding-bottom: 40px; } .m9{ background: url(../image/m9bg_03.png) no-repeat center; background-size: cover; } .m9w{ font-size: 24px; color: #000; line-height: 65px; } .m9 .yun{ top: 30%; } .foot{ background: #2d2d2d; color: #8c8c8c; line-height: 36px; padding: 20px 0; } .foot h3{ font-weight: normal; font-size: 20px; margin-bottom: 10px; } .foot p{ line-height: 30px; } .foot p span{ margin: 0 20px; } .lt{ background: #fbc816; border: 2px solid #000; border-radius: 50px; padding: 10px 0; position: fixed; left: 5px; bottom: 30%; z-index: 9999; } .lta{ position: relative; margin-top: 15px; padding: 0 10px; } .lta:first-child{ margin-top: 0; } .lta .lta_a img{ height: 46px; display: block; margin: 0 auto; } .ltewm{ position: absolute; left: 70%; top: 0; padding: 5px; background: #1a1a1a; transition: .25s; opacity: 0; visibility: hidden; } .lta:hover .ltewm{ opacity: 1; visibility: inherit; left: 100%; } .ltewm i{ display: inline-block; width: 9px; height: 11px; position: absolute; left: -8px; top: 17px; background: url(../image/lico.png) no-repeat center; } .ltewm img{ display: block; width: 120px; } /*info*/ .swiper1{ background: #1a1a1a; border-radius: 100px; overflow: hidden; padding: 2px; } .swiper1 .swiper-slide{ width: 25%; height: 94px; text-align: center; color: #fff; cursor: pointer; transition: .25s; border-radius: 100px; overflow: hidden; background: url(../image/libg_03.png) no-repeat center; background-position-y: 60px; position: relative; } .swiper1 .swiper-slide i{ display: inline-block; width: 54px; height: 26px; background: url(../image/li_i_03.png) no-repeat center; position: absolute; left: 50%; margin-left: -27px; bottom: 0; margin-bottom: -2px; opacity: 0; transition: .25s; } .swiper1 .swiper-slide.selected i{ opacity: 1; } .swiper1 .swiper-slide.selected{ background: url(../image/libg_03.png) no-repeat center #fbc816; background-position-y: 60px; } .swiper1 .swiper-slide h3{ font-size: 28px; font-weight: normal; color: #fff; transition: .25s; margin-top: 10px; } .swiper1 .swiper-slide.selected h3{ color: #000; } .swiper1 .swiper-slide p{ font-size: 12px; color: #fff; text-transform: uppercase; margin-top: 5px; } .swiper2{ background: url(../image/ifyun_03.png) no-repeat right bottom #fbc816; font-size: 30px; line-height: 60px; color: #000; border-radius: 30px; margin-top: 20px; } .swiper2 .swiper-slide{ width: 100%; padding: 70px; padding-bottom: 280px; } .swiper2 .swiper-slide:nth-child(1){ padding-bottom: 70px; } .ifmd{ background: #F2F2F2; } .if1w span{ font-size: 32px; position: absolute; left: 0; top: 0; } .if1w{ padding-left: 60px; margin-top: 50px; } .if1w:first-child{ margin-top: 0; } .if1a{ border-left: 2px solid #000; padding-left: 30px; font-size: 24px; line-height: 55px; } ::-webkit-scrollbar{width:0;height:8px;background-color:#fff}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{border-radius:4px;background-color:#ddd}::-webkit-scrollbar-thumb:hover{background-color:#bbb} @media only screen and (max-width:1700px) { .m81{ width: 100%; } .m81 .wrap{ float: none; } /*.swiper-button-next-public{*/ /* margin-right: 0;*/ /*}*/ /*.swiper-button-next-public:hover{*/ /* margin-right: 0;*/ /*}*/ /*.swiper-button-prev-public{*/ /* margin-left: 0;*/ /*}*/ /*.swiper-button-prev-public:hover{*/ /* margin-left: 0;*/ /*}*/ .m3w .swiper-button-next-public{ margin-top: -120px; } .m3w .swiper-button-prev-public{ margin-top: -120px; } .head .line{ width: 100%; left: 0; margin-left: 0; } } @media only screen and (max-width:1670px) { .wrap{ width: 100%; padding: 0 60px; max-width: 1260px; } .m7,.m4,.m1{ background-size: 20%; } .head .line img { width: 1260px; } .head { font-size: 18px; } html { zoom: .9; } } @media screen and (min-width: 1500px) { .wrap{ max-width: 1600px; } .head .line img { display: block; width: 1600px; margin: auto; } } @media only screen and (max-width:1399px) { .wrap{ width: 1300px; } .m1w{ margin-top: 70px; } .m1top{ font-size: 44px; margin-top: 20px; } .m1top img{ height: 50px; } .m1txt{ font-size: 16px; line-height: 40px; } .mdtop h3{ font-size: 38px; } .m3a img{ height: 500px; } .m4atxt{ font-size: 26px; line-height: 50px; margin-top: 60px; } .m4a h3{ font-size: 70px; } .yun img{ height: 120px; } .m6a{ width: 210px; height: 235px; padding-top: 40px; } .m6a h3{ font-size: 26px; } .m6a i{ margin: 5px 0; } .m6a p b{ font-size: 26px; } .m6a img{ width: 180px; } .m6more{ margin-top: 50px; } .m6more a img{ height: 100px; } .m9w{ font-size: 20px; line-height: 50px; } /*info*/ .swiper1 .swiper-slide{ height: 80px; } .swiper1 .swiper-slide h3{ font-size: 22px; } .swiper1 .swiper-slide p{ margin-top: 0; } .swiper1 .swiper-slide{ background-position-y: 40px; } .swiper1 .swiper-slide.selected{ background-position-y: 40px; } .swiper2{ font-size: 24px; } } @media screen and (max-width: 1200px) { .swiper-button-next-public{ margin-right: -70px; } .swiper-button-prev-public{ margin-left: -70px; } .swiper-button-next-public:hover{ margin-right: -70px; } .swiper-button-prev-public:hover{ margin-left: -70px; } .wrap { width: auto; } } .nav{ line-height: 100px; } .nav a{ color: #353535; float: left; line-height: 24px; display: inline-block; margin-top: 38px; } .nav span{ color: #fff; display: block; margin: 0 15px; line-height: 24px; float: left; height: 22px; margin-top: 39px; } .nav span img{ height: 100%; display: block; } .hdr1{ margin-left: 10px; position: relative; height: 100px; } .hdr1 span{ color: #353535; float: left; line-height: 24px; display: inline-block; margin-top: 38px; cursor: pointer; } .hdr1 span img{ height: 15px; } .hdr1hide{ width: 100px; text-align: center; position: absolute; left: 50%; margin-left: -50px; top: 80px; background: #353535; padding: 5px 0; opacity: 0; visibility: hidden; transition: .25s; z-index: 99; } .hdr1:hover .hdr1hide{ opacity: 1; visibility: inherit; } .hdr1hide a{ color: #fff; line-height: 40px; font-size: 16px; display: block; } .hdr1hide a:hover{ color: #fbc816; } .hdr2{ margin-left: 25px; } .hdr2 a{ color: #353535; float: left; line-height: 24px; display: inline-block; margin-top: 38px; } .hdr1 span img { height: 15px; } .ml5 { margin-left: 5px; } .middle { vertical-align: middle; margin-top: -3px; } .newWorkSelect .select-wrapper:hover .select-options{ display: block; } .foot{ background: #2d2d2d; color: #8c8c8c; line-height: 36px; padding: 20px 0; } .foot h3{ font-weight: normal; font-size: 20px; margin-bottom: 10px; } .foot p{ line-height: 30px; } .foot p span{ margin: 0 20px; } .textcenter{ text-align: center; } .page-user-gallery .page-sections{ padding-top: 50px } @media only screen and (max-width:1700px) { .m81{ width: 100%; } .m81 .wrap{ float: none; } .swiper-button-next-public{ margin-right: 0; } .swiper-button-next-public:hover{ margin-right: 0; } .swiper-button-prev-public{ margin-left: 0; } .swiper-button-prev-public:hover{ margin-left: 0; } .m3w .swiper-button-next-public{ margin-top: -120px; } .m3w .swiper-button-prev-public{ margin-top: -120px; } .head .line{ width: 100%; left: 0; margin-left: 0; } } @media only screen and (max-width:1500px) { .wrap{ width: 100%; padding: 0 60px; } .m7,.m4,.m1{ background-size: 20%; } } @media only screen and (max-width:1399px) { /*.wrap{*/ /* width: 1200px;*/ /*}*/ .m1w{ margin-top: 70px; } .m1top{ font-size: 44px; margin-top: 20px; } .m1top img{ height: 50px; } .m1txt{ font-size: 16px; line-height: 40px; } .mdtop h3{ font-size: 38px; } .m3a img{ height: 500px; } .m4atxt{ font-size: 26px; line-height: 50px; margin-top: 60px; } .m4a h3{ font-size: 70px; } .yun img{ height: 120px; } .m6a{ width: 210px; height: 235px; padding-top: 40px; } .m6a h3{ font-size: 26px; } .m6a i{ margin: 5px 0; } .m6a p b{ font-size: 26px; } .m6a img{ width: 180px; } .m6more{ margin-top: 50px; } .m6more a img{ height: 100px; } .m9w{ font-size: 20px; line-height: 50px; } /*info*/ .swiper1 .swiper-slide{ height: 80px; } .swiper1 .swiper-slide h3{ font-size: 22px; } .swiper1 .swiper-slide p{ margin-top: 0; } .swiper1 .swiper-slide{ background-position-y: 40px; } .swiper1 .swiper-slide.selected{ background-position-y: 40px; } .swiper2{ font-size: 24px; } } @media only screen and (min-width: 1921px) { .head { zoom:1.12 } }