@font-face { font-family: 'siyuan'; src: url("https://cdnfonts.grgroup.com.cn/NotoSansHans-Thin-Windows.otf") format('opentype'); font-style: normal; font-weight: 100; } @font-face { font-family: 'siyuan'; src: url("https://cdnfonts.grgroup.com.cn/NotoSansHans-Light.otf") format('opentype'); font-style: normal; font-weight: 200; } @font-face { font-family: 'siyuan'; src: url("https://cdnfonts.grgroup.com.cn/NotoSansHans-DemiLight.otf") format('opentype'); font-style: normal; font-weight: 300; } @font-face { font-family: 'siyuan'; src: url("https://cdnfonts.grgroup.com.cn/NotoSansHans-Regular.otf") format('opentype'); font-style: normal; font-weight: 400; } @font-face { font-family: 'siyuan'; src: url("https://cdnfonts.grgroup.com.cn/NotoSansHans-Medium.otf") format('opentype'); font-style: normal; font-weight: 500; } @font-face { font-family: 'siyuan'; src: url("https://cdnfonts.grgroup.com.cn/NotoSansHans-Bold.otf") format('opentype'); font-style: normal; font-weight: 600; } @font-face { font-family: 'siyuan'; src: url("https://cdnfonts.grgroup.com.cn/NotoSansHans-Black.otf") format('opentype'); font-style: normal; font-weight: 700; } .NetProt{ width: 220px; height: 0px; background: rgba(48,50,55,.95); position: absolute; bottom: 120px; margin-left: 240px; z-index: 998; overflow: hidden; transition: .2s; } .NetProt>a:nth-child(1){ margin-top: 20px; } .NetProt>a{ display: block; color: #F2D7C0; line-height: 30px; text-indent: 20px; } .banner .swiper-pagination{ left: calc(50% - 50px) !important; width: 100px !important; margin-left: 0 !important; } @media only screen and (max-width: 1500px){ * { margin: 0; padding: 0; list-style: none; text-decoration: none; user-select: none; } #swp-left{ float: left; } .container { width: 100%; /* font-family: 'Noto Sans SC'; */ font-family: siyuan; font-weight: 400; position: relative; overflow: hidden; } .container>.ment { width: 620px; height: 400px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; } .container>.ment>span { display: block; cursor: pointer; width: 36px; height: 36px; background: #b7916c; position: absolute; color: #fff; text-align: center; line-height: 36px; right: 0; font-size: 20px; top: 0; } .container>.ment>img { width: 100%; height: 100%; } .container:before{ content: ''; display: block; height: 132px; } .container>.header { width: 100%; height: 132px; /* background: #BD9369; */ /* 鏆傛椂淇敼 */ background: #fff; position: fixed; overflow: hidden; z-index: 9999; top: 0; } .container>.header>.headerauto { width: 1120px; height: 132px; margin: auto; position: relative; overflow: hidden; } .container>.header>.headerauto>.logo { width: 195px; height: 68px; position: absolute; top: 50%; transform: translate(0, -50%); } .container>.header>.headerauto>.logo>img { width: 100%; height: 100%; } .container>.header>.headerauto>.navone { height: 132px; float: right; overflow: hidden; } .container>.header>.headerauto>.navone>a { display: block; height: 100%; line-height: 132px; float: left; font-size: 15px; padding: 0 20px; /* color: #fff; /* 鏆傛椂淇敼 */ color: #BD9369; transition: .5s; } .container>.header>.headerauto>.navone>.active { /* background: #987149; */ /* 鏆傛椂淇敼 */ background: #BD9369; color: #fff; } .container>.navtwo { width: 100%; height: 54px; /* 鏆傛椂淇敼 */ /* background: #987149; */ background: rgba(63, 77, 102, 0.9); overflow: hidden; position:fixed; z-index: 999; } .container>.navtwo>div { width: 1120px; height: 132px; margin: auto; } .container>.navtwo>div>ul { float: right; } .container>.navtwo>div>ul>li { height: 54px; line-height: 54px; float: left; margin-right: 20px; } .container>.navtwo>div>ul>li>a { font-size: 14px; color: #f3dfcb; display: block; line-height: 54px; } .container>.navtwo>div>ul>li:nth-child(8) { margin: 0; } .container>.banner { width: 100%; margin-bottom: 60px; } .container>.banner>.swiper-container>.swiper-wrapper>.swiper-slide>img { width: 100%; height: 100%; } .container>.banner>.swiper-container>.swiper-button-prev { opacity: 0; } .container>.banner>.swiper-container>.swiper-button-next { opacity: 0; } .container>.banner:hover>.swiper-container>.swiper-button-prev { opacity: 1; } .container>.banner:hover>.swiper-container>.swiper-button-next { opacity: 1; } .container>.listing { width: 1120px; margin: auto; margin-bottom: 24px; overflow: hidden; } .container>.listing>.listing-top { height: 180px; } .container>.listing>.listing-top>.listing-top-left { width: 400px; float: left; } .container>.listing>.listing-top>.listing-top-left>.swiper-container>.swiper-pagination { text-align: left; text-indent: 0; bottom: 0; } .container>.listing>.listing-top>.listing-top-left>.swiper-container>.swiper-pagination>.swiper-pagination-bullet { width: 43px; height: 5px; border-radius: 0; background: #F3DFCB; } .container>.listing>.listing-top>.listing-top-left>.swiper-container>.swiper-pagination>.swiper-pagination-bullet-active { background: #BE956A; } /* swiper-pagination-bullet swiper-pagination-bullet-active */ .container>.listing>.listing-top>.listing-top-left>.swiper-container>.swiper-wrapper>.swiper-slide>a>h2 { color: #797878; font-size: 18px; margin-bottom: 20px; font-weight: 500; } .container>.listing>.listing-top>.listing-top-left>.swiper-container>.swiper-wrapper>.swiper-slide>p { color: #858585; height: 60px; overflow: hidden; font-size: 14px; line-height: 20px; margin-bottom: 40px; font-weight: 400; } .container>.listing>.listing-top>.listing-top-left>.swiper-container>a { display: block; background: #BE956A; text-align: center; line-height: 16px; color: #fff; width: 42px; height: 16px; margin-left: 130px; position: absolute; font-size: 14px; z-index: 9999; bottom: 0; } .container>.listing>.listing-top>.listing-top-right { width: 700px; height: 180px; float: right; } .container>.listing>.listing-top>.listing-top-right>.multimap { width: 400px; height: 180px; float: left; } .container>.listing>.listing-top>.listing-top-right>.multimap>.swiper-container { width: 100%; height: 100%; } .container>.listing>.listing-top>.listing-top-right>.multimap>.swiper-container>.swiper-wrapper>.swiper-slide>img { width: 100%; height: 100%; } .container>.listing>.listing-top>.listing-top-right>.clk { float: right; width: 300px; height: 178px; } .container>.listing>.listing-top>.listing-top-right>.clk>a.img { float: left; width: 100%; height: 100%; } .container>.bottom { width: 100%; height: 148px; background: #FFF6E9; } .container>.bottom>div:nth-child(1) { width: 1120px; height: 100%; margin: auto; position: relative; overflow: hidden; } .container>.bottom>div:nth-child(1)>a>div { width: 415px; height: 100%; position: absolute; left: 0; } .container>.bottom>.bottom-middle>a>div>img { width: 100%; height: 100%; } .container>.footer { width: 100%; height: 120px; background: #474A50; padding: 20px 0 0 0; box-sizing: border-box; font-size: 14px; font-weight: 300; } .container>.footer>.footer-middle { width: 1120px; height: 100%; margin: auto; color: #F2D7C0; } .container>.footer>.footer-middle>.footer-middle-left { width: 420px; height: 36px; border-right: 1px solid #F2D7C0; padding: 0 15px 0 0; box-sizing: border-box; float: left; } .container>.footer>.footer-middle>.footer-middle-left>p { width: 168px; float: left; } .container>.footer>.footer-middle>.footer-middle-left>a { float: right; color: #F2D7C0; font-weight: 300; margin-right: 10px; } .container>.footer>.footer-middle>ul { float: left; } .container>.footer>.footer-middle>ul>a { margin-left: 15px; color: #F2D7C0; font-weight: 300; } .container>.footer>.footer-middle>img { width: 75px; height: 75px; float: right; margin-left: 24px; } .swiper-pagination>.swiper-pagination-bullet { width: 10px; height: 10px; display: inline-block; background: #FFFFFF; opacity: 1; margin: 0 5px; } .swiper-pagination>.swiper-pagination-bullet-active { background: #BD9369; } .swiper-pagination { text-indent: -65%; } } /* 绗旇鏈€傚簲 */ @media only screen and (min-width: 1500px){ * { margin: 0; padding: 0; list-style: none; text-decoration: none; user-select: none; } .container { width: 100%; /* font-family: 'Noto Sans SC'; */ font-family: siyuan; font-weight: 400; position: relative; overflow: hidden; } #swp-left{ margin-left: 0; } .container>.ment { width: 620px; height: 400px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; } .container>.ment>span { display: block; cursor: pointer; width: 36px; height: 36px; background: #b7916c; position: absolute; color: #fff; text-align: center; line-height: 36px; right: 0; font-size: 20px; top: 0; } .container>.ment>img { width: 100%; height: 100%; } .container>.header { width: 100%; height: 132px; /* background: #BD9369; */ /* 鏆傛椂淇敼 */ background: #fff; overflow: hidden; position: fixed; top:0; z-index: 999; } .container:before{ display: block; content: ''; width: 100%; height: 132px; } .container>.header>.headerauto { width: 1364px; height: 132px; margin: auto; position: relative; overflow: hidden; } .container>.header>.headerauto>.logo { width: 195px; height: 68px; position: absolute; top: 50%; transform: translate(0, -50%); } .container>.header>.headerauto>.logo>img { width: 100%; height: 100%; } .container>.header>.headerauto>.navone { height: 132px; float: right; overflow: hidden; } .container>.header>.headerauto>.navone>a { display: block; height: 100%; line-height: 132px; float: left; font-size: 15px; padding: 0 20px; transition: .5s; /* color: #fff; */ /* 鏆傛椂淇敼 */ color: #BD9369; } .container>.header>.headerauto>.navone>.active { /* background: #987149; */ /* 鏆傛椂淇敼 */ background: #BD9369; color: #fff; } .container>.navtwo { width: 100%; height: 54px; /* 鏆傛椂淇敼 */ /* background: #987149; */ background: rgba(63, 77, 102, 0.9); overflow: hidden; position:fixed; z-index: 999; } .container>.navtwo>div { width: 1364px; height: 132px; margin: auto; } .container>.navtwo>div>ul { float: right; } .container>.navtwo>div>ul>li { height: 54px; line-height: 54px; float: left; margin-right: 20px; } .container>.navtwo>div>ul>li>a { font-size: 14px; color: #f3dfcb; display: block; line-height: 54px; } .container>.navtwo>div>ul>li:nth-child(8) { margin: 0; } .container>.banner { width: 100%; margin-bottom: 60px; } .container>.banner>.swiper-container>.swiper-wrapper>.swiper-slide>img { width: 100%; height: 100%; } .container>.banner>.swiper-container>.swiper-button-prev { opacity: 0; } .container>.banner>.swiper-container>.swiper-button-next { opacity: 0; } .container>.banner:hover>.swiper-container>.swiper-button-prev { opacity: 1; } .container>.banner:hover>.swiper-container>.swiper-button-next { opacity: 1; } .container>.listing { width: 1364px; margin: auto; margin-bottom: 24px; overflow: hidden; } .container>.listing>.listing-top { height: 180px; } .container>.listing>.listing-top>.listing-top-left { width: 571px; float: left; } .container>.listing>.listing-top>.listing-top-left>.swiper-container>.swiper-pagination { text-align: left; text-indent: 0; bottom: 0; } .container>.listing>.listing-top>.listing-top-left>.swiper-container>.swiper-pagination>.swiper-pagination-bullet { width: 43px; height: 5px; border-radius: 0; background: #F3DFCB; } .container>.listing>.listing-top>.listing-top-left>.swiper-container>.swiper-pagination>.swiper-pagination-bullet-active { background: #BE956A; } /* swiper-pagination-bullet swiper-pagination-bullet-active */ .container>.listing>.listing-top>.listing-top-left>.swiper-container>.swiper-wrapper>.swiper-slide>a>h2 { color: #797878; font-size: 18px; margin-bottom: 20px; font-weight: 500; } .container>.listing>.listing-top>.listing-top-left>.swiper-container>.swiper-wrapper>.swiper-slide>p { color: #858585; height: 60px; overflow: hidden; font-size: 14px; line-height: 20px; margin-bottom: 40px; font-weight: 400; } .container>.listing>.listing-top>.listing-top-left>.swiper-container>a { display: block; background: #BE956A; text-align: center; line-height: 16px; color: #fff; width: 42px; height: 16px; margin-left: 130px; position: absolute; font-size: 14px; z-index: 9999; bottom: 0; } .container>.listing>.listing-top>.listing-top-right { width: 754px; height: 220px; float: right; } .container>.listing>.listing-top>.listing-top-right>.multimap { width: 417px; height: 180px; float: left; } .container>.listing>.listing-top>.listing-top-right>.multimap>.swiper-container { width: 100%; height: 100%; } .container>.listing>.listing-top>.listing-top-right>.multimap>.swiper-container>.swiper-wrapper>.swiper-slide>img { width: 100%; height: 100%; } .container>.listing>.listing-top>.listing-top-right>.clk { float: left; width: 337px; height: 180px; } .container>.listing>.listing-top>.listing-top-right>.clk>a>img { float: right; width: 100%; height: 100%; } .container>.bottom { width: 100%; height: 188px; background: #FFF6E9; } .container>.bottom>div:nth-child(1) { width: 1364px; height: 100%; margin: auto; position: relative; overflow: hidden; } .container>.bottom>div:nth-child(1)>a>div { width: 529px; height: 100%; position: absolute; left: 0; } .container>.bottom>.bottom-middle>a>div>img { width: 100%; height: 100%; } .container>.footer { width: 100%; height: 120px; background: #474A50; padding: 20px 0 0 0; box-sizing: border-box; font-size: 14px; font-weight: 300; } .container>.footer>.footer-middle { width: 1364px; height: 100%; margin: auto; color: #F2D7C0; } .container>.footer>.footer-middle>.footer-middle-left { width: 420px; height: 36px; border-right: 1px solid #F2D7C0; padding: 0 15px 0 0; box-sizing: border-box; float: left; } .container>.footer>.footer-middle>.footer-middle-left>p { width: 180px; float: left; } .container>.footer>.footer-middle>.footer-middle-left>a { float: right; color: #F2D7C0; font-weight: 300; margin-right: 10px; } .container>.footer>.footer-middle>ul { float: left; } .container>.footer>.footer-middle>ul>a { margin-left: 15px; color: #F2D7C0; font-weight: 300; } .container>.footer>.footer-middle>img { width: 75px; height: 75px; float: right; margin-left: 24px; } .swiper-pagination>.swiper-pagination-bullet { width: 10px; height: 10px; display: inline-block; background: #FFFFFF; opacity: 1; margin: 0 5px; float: left; } .swiper-pagination>.swiper-pagination-bullet-active { background: #BD9369; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { width: 1364px; margin: auto; margin-left: 278px; } }