.container>.header>.headerauto>.navone>.active { background: #BD9369; color: #fff; } .container>.header>.headerauto>.navone>a { transition: .5s; } @media only screen and (min-width: 1500px) { .container>.main { width: 1364px; margin: auto; } .container>.banner { width: 100%; position: relative; } .container>.banner>.nav { width: 100%; height: 54px; background: rgba(70, 77, 88, 0.9); position: fixed; z-index: 999; } .container>.banner>.nav>.top { width: 1364px; margin: auto; } .container>.banner>.nav>.top>ul { float: right; display: none; } .container>.banner>.nav>.top>ul>a { color: #F3DFCB; font-size: 14px; line-height: 54px; margin-right: 20px; } .container>.banner>.nav>.top>ul>a:nth-child(8) { margin: 0; } .container>.banner>img { width: 100%; height: auto; display: block; } .container>.main>.main-left { float: left; position: relative; } .container>.main>.main-left>.item { width: 970px; padding: 35px 35px 35px 0; box-sizing: border-box; display: none; overflow: hidden; } .container>.main>.main-left>.item>.item-left { float: left; width: 126px; height: 126px; background: #F8CF48; } .container>.main>.main-left>.item>.item-left>img { width: 100%; height: 100%; } .container>.main>.main-left>.item>.item-right { width: 790px; height: 126px; overflow: hidden; float: right; } .container>.main>.main-left>.item>.item-right>h3 { font-size: 18px; font-weight: 500; margin-bottom: 15px; color: #797878; } .container>.main>.main-left>.item>.item-right>p { color: #797878; } .container>.main>.main-left>.item>.item-right>.p1 { font-size: 15px; margin-bottom: 15px; } .container>.main>.main-left>.item>.item-right>.p2 { height: 47px; overflow: hidden; font-size: 14px; line-height: 24px; } .container>.main>.main-left>.item:hover { background: #FAFAFA; cursor: pointer; } .container>.main>.main-left>.item:hover>.item-right>h3 { color: #BE956A; } .container>.main>.main-left>.drop { width: 50px; height: 50px; border-radius: 50%; background: url(../img/xl.png); background-size: 100% 100%; cursor: pointer; margin: 60px auto 60px auto; } .container>.main>.main-right { width: 376px; height: 100%; background: #FAFAFA; float: right; } .container>.main>.main-right>.swiper-container { width: 100%; float: left; } .container>.main>.main-right>.swiper-container>.swiper-wrapper>.swiper-slide>a>img { width: 100%; height: 100%; } .container>.main>.main-left>.main-banner>.swp-one { position: relative; } .container>.main>.main-left>.main-banner>.swp-one>.Mask { width: 100%; height: 86px; background: rgba(46, 49, 56, .8); z-index: 2; position: absolute; bottom: 0; color: #BE956A; font-size: 18px; padding: 15px 0 0 40px; box-sizing: border-box; cursor: pointer; } .container>.main>.main-left>.main-banner { width: 971px; height: 503px; overflow: hidden; } .container>.main>.main-left>.main-banner>.swiper-container { width: 100%; height: 100%; } .container>.main>.main-left>.main-banner>.swiper-container>.swiper-wrapper>.swiper-slide>a>img { width: 100%; height: 100%; } #swiper-right { text-align: right; margin-left: -40px; z-index: 999; } .swiper-pagination-bullet { width: 15px; height: 15px; background: #fff; } .swiper-pagination-bullet-active { background: #BD9369; } .container>.main>.main-left>.item>.item-left { float: left; width: 126px; height: 126px; background: #F8CF48; padding-top: 20px; box-sizing: border-box; text-align: center; } .container>.main>.main-left>.item>.item-left>h3 { width: 90px; margin: auto; font-weight: 400; font-size: 30px; border-bottom: 1px solid #474A50; margin-bottom: 10px; padding-bottom: 5px; color: #474A50; text-align: center; font-family: "Arial"; font-weight: bold; } .container>.main>.main-left>.item>.item-left>p { color: #474A50; font-size: 20px; text-align: center; font-family: "Arial"; font-weight: bold; } } @media only screen and (max-width: 1500px) { .container>.main { width: 1120px; margin: auto; } .container>.banner { width: 100%; position: relative; } .container>.banner>.nav { width: 100%; height: 54px; background: rgba(70, 77, 88, 0.9); position: fixed; z-index: 999; } .container>.banner>.nav>.top { width: 1120px; margin: auto; } .container>.banner>.nav>.top>ul { float: right; display: none; } .container>.banner>.nav>.top>ul>a { color: #F3DFCB; font-size: 14px; line-height: 54px; margin-right: 20px; } .container>.banner>.nav>.top>ul>a:nth-child(8) { margin: 0; } .container>.banner>img { width: 100%; height: auto; display: block; } .container>.main>.main-left { float: left; position: relative; } .container>.main>.main-left>.item { width: 800px; padding: 35px 35px 35px 0; box-sizing: border-box; display: none; overflow: hidden; } .container>.main>.main-left>.item>.item-left { float: left; width: 126px; height: 126px; background: #F8CF48; font-family: Anton; } .container>.main>.main-left>.item>.item-left>img { width: 100%; height: 100%; } .container>.main>.main-left>.item>.item-right { width: 790px; height: 126px; overflow: hidden; float: right; } .container>.main>.main-left>.item>.item-right>h3 { font-size: 18px; font-weight: 500; margin-bottom: 15px; color: #797878; } .container>.main>.main-left>.item>.item-right>p { color: #797878; } .container>.main>.main-left>.item>.item-right>.p1 { font-size: 15px; margin-bottom: 15px; } .container>.main>.main-left>.item>.item-right>.p2 { height: 47px; font-size: 14px; overflow: hidden; line-height: 24px; } .container>.main>.main-left>.item:hover { background: #FAFAFA; cursor: pointer; } .container>.main>.main-left>.item:hover>.item-right>h3 { color: #BE956A; } .container>.main>.main-left>.drop { width: 50px; height: 50px; border-radius: 50%; background: url(../img/xl.png); background-size: 100% 100%; cursor: pointer; margin: 60px auto 60px auto; } .container>.main>.main-right { width: 310px; height: 410px; background: #FAFAFA; float: right; } .container>.main>.main-right>.swiper-container { width: 100%; float: left; height: 410px; } .container>.main>.main-right>.swiper-container>.swiper-wrapper>.swiper-slide>a>img { width: 100%; height: 100%; } .container>.main>.main-left>.main-banner>.swp-one { position: relative; } .container>.main>.main-left>.main-banner>.swp-one>.Mask { width: 100%; height: 90px; background: rgba(46, 49, 56, .8); z-index: 2; position: absolute; bottom: 0; color: #BE956A; font-size: 18px; padding: 15px 0 0 40px; box-sizing: border-box; cursor: pointer; } .container>.main>.main-left>.main-banner>.swp-one>.Mask>p { width: 600px; font-size: 16px; } .container>.main>.main-left>.main-banner { width: 800px; height: 410px; overflow: hidden; } .container>.main>.main-left>.main-banner>.swiper-container { width: 100%; } .container>.main>.main-left>.main-banner>.swiper-container>.swiper-wrapper>.swiper-slide>a>img { width: 100%; } #swiper-right { text-align: right; margin-left: -40px; margin-bottom: 20px; z-index: 999; } .swiper-pagination-bullet { width: 15px; height: 15px; background: #fff; } .swiper-pagination-bullet-active { background: #BD9369; } .container>.main>.main-left>.item>.item-left { float: left; width: 126px; height: 126px; background: #F8CF48; padding-top: 20px; box-sizing: border-box; text-align: center; } .container>.main>.main-left>.item>.item-left>h3 { width: 90px; margin: auto; font-weight: 400; font-size: 30px; border-bottom: 1px solid #474A50; margin-bottom: 10px; padding-bottom: 5px; color: #474A50; text-align: center; font-family: "Arial"; font-weight: bold; } .container>.main>.main-left>.item>.item-left>p { color: #474A50; font-size: 20px; text-align: center; font-family: "Arial"; font-weight: bold; } .container>.main>.main-left>.item>.item-right { width: 610px; } }