.container>.header>.headerauto>.navone>a { transition: .5s; } .container>.header>.headerauto>.navone>.active { background: #BD9369; color: #fff; } .container>.header-top>.top>.middle>ul { float: right; } .container>.header-top>.top>.middle>ul>a { color: #F3DFCB; font-size: 14px; line-height: 54px; margin-right: 24px; } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { width: 15px; height: 15px; background: #fff; opacity: 1; } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active { background: #BD9369; } #swiper-right { text-align: right; margin-left: -40px; margin-bottom: 10px; z-index: 999; } @media only screen and (min-width: 1500px) { .container>.header-top>.top>.middle { width: 1364px; margin: auto; display: none; } .container>.main { width: 1364px; margin: auto; } .container>.main>.main-left { float: left; position: relative; } .container>.main>.main-left>.item { width: 970px; overflow: hidden; padding: 35px 35px 35px 0; box-sizing: border-box; display: none; } .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; font-family: "Arial"; font-weight: bold; } .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; } .container>.main>.main-left>.main-banner>.swp-one>.Mask a{ color: #BE956A; } .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%; display: block; } .container>.main>.main-left>.item>.item-left>p { color: #474A50; font-size: 20px; font-family: "Arial"; font-weight: bold; } .container>.main>.main-left>.item>.item-right { width: 790px; height: 136px; overflow: hidden; float: right; } .container>.main>.main-left>.item>.item-right>h3 { font-size: 18px; font-weight: 500; margin-bottom: 10px; 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: 10px; } .container>.main>.main-left>.item>.item-right>.p2 { height: 40px; font-size: 14px; overflow: hidden; } .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; background: #FAFAFA; float: right; } .container>.main>.main-right img { width: 100%; float: left; } } @media only screen and (max-width: 1500px) { .container>.header-top>.top>.middle { width: 1120px; margin: auto; display: none; } .container>.main { width: 1120px; margin: auto; } .container>.main>.main-left { float: left; position: relative; } .container>.main>.main-left>.item { width: 740px; 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; 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; font-family: "Arial"; font-weight: bold; } .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; } .container>.main>.main-left>.main-banner>.swp-one>.Mask a{ color: #BE956A; } .container>.main>.main-left>.main-banner>.swp-one>.Mask>p { width: 600px; font-size: 16px; font-weight: 400; } .container>.main>.main-left>.main-banner { width: 740px; height: 410px; overflow: hidden; } .container>.main>.main-left>.main-banner>.swiper-container { width: 100%; height: 383px; overflow: hidden; } .container>.main>.main-left>.main-banner>.swiper-container>.swiper-wrapper>.swiper-slide>a>img { width: 100%; display: block; } .container>.main>.main-left>.item>.item-left>p { color: #474A50; font-size: 20px; font-family: "Arial"; font-weight: bold; } .container>.main>.main-left>.item>.item-right { width: 560px; height: 136px; overflow: hidden; float: right; } .container>.main>.main-left>.item>.item-right>h3 { font-size: 18px; font-weight: 500; margin-bottom: 1px; 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: 10px; } .container>.main>.main-left>.item>.item-right>.p2 { height: 40px; font-size: 14px; overflow: hidden; } .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: 366px; background: #FAFAFA; float: right; } .container>.main>.main-right img { width: 100%; float: left; } }