#hdp { width: 100%; } #hdp .main { width: 1200px; margin: 0 auto; background: yellow; margin-top: 10px; } #hdp .main .swiper-container { width: 100%; height: 436px; } #hdp .main .swiper-slide { cursor: pointer; text-align: center; font-size: 0px; background: #fff; /* center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #hdp .main .swiper-pagination-bullet { width: 12px; height: 12px; background: transparent; opacity: 1; border-radius: 50%; border: 1px solid #fff; margin: 0px 6px; } #hdp .main .swiper-pagination-bullet-active { opacity: 1; background: #fff; ; } #hdp .main .swiper-pagination { text-align: right; margin-bottom: 0px; } #hdp .main .swiper-container-horizontal>.swiper-pagination-bullets, #hdp .main .swiper-pagination-custom, #hdp .main .swiper-pagination-fraction { right: 0; width: 180px; left: auto; } #hdp .main .swiper-container .text { width: 100%; } #hdp .main .swiper-container .text img { width: 100%; display: block; } #hdp .main .swiper-container .text p { display: inline-block; color: #fff; text-align: left; vertical-align: top; height: 50px; line-height: 50px; width: 100%; font-size: 18px; background: rgba(0, 0, 0, 0.6); margin: 0; padding-left: 40px; position: absolute; bottom: 0px; right:0px; left:0px; } .xwtit{display: inline-block;width: 520px;} #hdp .main .swiper-button-prev { height: 70px; width: 42px; background-color: rgba(0, 0, 0, 0.6); background-image: ; background-size: auto 30px; margin-left: -10px; margin-top: -40px; outline: 0; } #hdp .main .swiper-button-next { height: 70px; width: 42px; background-color: rgba(0, 0, 0, 0.6); background-image: ; background-size: auto 30px; margin-right: -10px; margin-top: -40px; outline: 0; } #news { width: 100%; } #news .main { width: 1200px; margin: 0 auto; margin-top: 20px; } #news .main .na { display: block; width: 100%; border-bottom: 2px solid #dddddd; height: 42px; line-height: 42px; } #news .main .na i { display: inline-block; height: 42px; line-height: 42px; font-size: 20px; color: #3468be; padding: 0 12px; font-style: normal; cursor: pointer; position: relative; margin-right: 30px; font-weight: bold; } #news .main .na i::before { position: absolute; bottom: -2px; left: 0px; content: ""; display: inline-block; vertical-align: top; height: 3px; width: 100%; background: #3468be; } #news .main .na li { display: inline-block; padding: 0 13px; } #news .main .na li a { font-size: 15px; color: #434343; display:block; max-width:475px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis; } #news .main .na span { float: right; font-size: 15px; } #news .main .na span a { color: #979797; } #news .main .navli { height: 370px; width: 596px; margin-top: 16px; position: relative; display: inline-block; } #news .main .navli>li { display: inline-block; cursor: pointer; transition: 0.3s; height: 48px; line-height: 48px; text-align: center; width: 198px; background: #dcdcdc; } #news .main .navli>li:hover { background: #3063bc; } #news .main .navli>li:hover a { color: #fff; } #news .main .navli>li:hover ul { display: block; } #news .main .navli>li>a { font-size: 17px; color: #000; } #news .main .navli>.more { font-size: 24px; color: #fff; } #news .main .navli>.choice { background: #3063bc; } #news .main .navli>.choice a { color: #fff; } #news .main .navli>.choice ul { display: block; } #news .main .navli ul { display: none; position: absolute; top: 48px; left: 0px; background: #fff; white-space: nowrap; transition: 0.3s; z-index: 999999; width: 596px; } #news .main .navli ul li { display: block; width: 596px; text-align: left; vertical-align: top; word-wrap: break-word; line-height: 22px; white-space: pre-wrap; } #news .main .navli ul li::before { content: ''; height: 5px; width: 5px; background: #d20000; display: inline-block; vertical-align: top; margin-top: 17px; margin-right: 4px; } #news .main .navli ul li a { font-size: 16px; line-height: 40px; color: #353535 !important; } #news .main .navli ul li a>i { display: inline-block; float: right; height: 40px; line-height: 40px; font-style: normal; color: #858585; } #news .main .ri { display: inline-block; margin-top: 16px; margin-left: 10px; } #news .main .ri .swiper-container { width: 588px; height: 360px; } #news .main .ri .swiper-slide { cursor: pointer; text-align: center; font-size: 0px; background: #fff; /* center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #news .main .ri .swiper-pagination-bullet { width: 12px; height: 12px; background: transparent; opacity: 1; border-radius: 50%; border: 1px solid #fff; margin: 0px 6px; } #news .main .ri .swiper-pagination-bullet-active { opacity: 1; background: #fff; ; } #news .main .ri .swiper-pagination { text-align: right; margin-bottom: 0px; } #news .main .ri .swiper-container-horizontal>.swiper-pagination-bullets, #news .main .ri .swiper-pagination-custom, #news .main .ri .swiper-pagination-fraction { left: -10px; } #news .main .ri .swiper-container .text { width: 100%; } #news .main .ri .swiper-container .text img { width: 100%; display: block; } #news .main .ri .swiper-container .text p { display: inline-block; color: #fff; text-align: left; vertical-align: top; height: 50px; line-height: 50px; width: 100%; padding-right: 100px; box-sizing: border-box; font-size: 18px; background: rgba(0, 0, 0, 0.6); margin: 0; padding-left: 40px; position: absolute; bottom: 0px; right: 0px; left: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #news .main .ri .swiper-button-prev { height: 70px; width: 42px; background-color: rgba(0, 0, 0, 0.6); background-image: ; background-size: auto 30px; margin-left: -10px; margin-top: -40px; outline: 0; } #news .main .ri .swiper-button-next { height: 70px; width: 42px; background-color: rgba(0, 0, 0, 0.6); background-image: ; background-size: auto 30px; margin-right: -10px; margin-top: -40px; outline: 0; } #adv { width: 100%; } #adv .main { width: 1200px; margin: 0 auto; font-size: 0; margin-top: 20px; } #adv .main img { height: 100px; } #adv .main .adv1 { width: 756px; margin-right: 10px; display: inline-block; } #adv .main .adv2 { width: 434px; display: inline-block; } #mainin { width: 100%; } #mainin .main { width: 1200px; margin: 0 auto; font-size: 0; margin-top: 30px; margin-bottom: 30px; } #mainin .main .le { display: inline-block; width: 756px; height: 330px; margin-right: 10px; } #mainin .main .ri { display: inline-block; width: 434px; height: 330px; } #mainin .main .ri img{ margin-top:14px; } #mainin .main .le .navli { width: 756px; height: 330px; position: relative; display: inline-block; } #mainin .main .le .navli::before { width: 100%; position: absolute; content: ""; height: 2px; background: #eee; display: block; vertical-align: top; top: 46px; z-index: 999; } #mainin .main .le .navli>li { display: inline-block; cursor: pointer; transition: 0.3s; height: 48px; line-height: 48px; text-align: center; width: 120px; } #mainin .main .le .navli>li:hover::after { width: 120px; position: absolute; content: ""; height: 3px; background: #3063bc; display: block; vertical-align: top; top: 44px; z-index: 999; } #mainin .main .le .navli>li:hover ul { display: block; } #mainin .main .le .navli>li>a { font-size: 20px; color: #3063bc; font-weight: bold; } #mainin .main .le .navli>li:nth-child(1)::before { background-image: url(/uploads/image/timg/special1.jpg); } #mainin .main .le .navli>li:nth-child(2)::before { background-image: url(/uploads/image/timg/video1.jpg); } #mainin .main .le .navli>li:nth-child(3)::before { background-image: url(/uploads/image/timg/painting1.jpg); } #mainin .main .le .navli>li:nth-child(1)::before, #mainin .main .le .navli>li:nth-child(2)::before, #mainin .main .le .navli>li:nth-child(3)::before { content: ""; height: 46px; width: 40px; background-repeat: no-repeat; background-position: 0 10px; display: inline-block; } #mainin .main .le .navli>i { height: 48px; line-height: 48px; display: inline-block; float: right; font-size: 15px; font-style: normal; } #mainin .main .le .navli>i a { color: #989898; } #mainin .main .le .navli>.more { font-size: 24px; color: #fff; } #mainin .main .le .navli>.choice::after { width: 120px; position: absolute; content: ""; height: 3px; background: #3063bc; display: block; vertical-align: top; top: 44px; z-index: 999; } #mainin .main .le .navli>.choice ul { display: block; } #mainin .main .le .navli ul { display: none; position: absolute; top: 48px; left: 0px; z-index: 999999; width: 756px; height: 282px; text-align: left; background: #fff; } #mainin .main .le .navli ul li { display: inline-block; width: 368px; height: 120px; margin-top: 10px; margin-bottom: 10px; text-align: left; margin-right: 10px; } #mainin .main .le .navli ul li a { display: inline-block; } #mainin .main .le .navli ul li a>img { height: 120px; width: 160px; display: inline-block; } #mainin .main .le .navli ul li .titsummary{ font-size:18px;line-height:30px; } #mainin .main .le .navli ul li .titsummary p{ height:62px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;color:#222; } #mainin .main .le .navli ul li .titsummary .summary-text{font-size: 14px;color: #868585;} #mainin .main .le .navli ul li a>i{ font-size:18px;color:#333333; } #mainin .main .le .navli ul li a>div { display: inline-block; height: 120px; width: 186px; margin-left: 10px; font-size: 16px; line-height: 26px; font-style: normal; color: #404040; } #mainin .main .le .navli ul li a>div span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; overflow: hidden; } #mainin .main .le .navli ul li a>div span:nth-child(2) { font-size: 14px; color: #777777; margin-top: 5px; } #mainin .main .ri .na { display: block; width: 100%; border-bottom: 2px solid #dddddd; height: 46px; line-height: 46px; } #mainin .main .ri .na i { display: inline-block; height: 46px; line-height: 46px; font-size: 20px; color: #3468be; padding: 0 12px; font-style: normal; cursor: pointer; position: relative; margin-right: 30px; font-weight: bold; } #mainin .main .ri .na i::before { position: absolute; bottom: -2px; left: 0px; content: ""; display: inline-block; vertical-align: top; height: 3px; width: 100%; background: #3468be; } #mainin .main .ri #mainin .main .ri img { margin-top: 14px; width: 434px; height: 260px; cursor: pointer; } #culture { width: 100%; } #culture .main { width: 1200px; margin: 0 auto; margin-top: 30px; } #culture .main .na { display: block; width: 100%; border-bottom: 2px solid #dddddd; height: 42px; line-height: 42px; margin-bottom: 14px; } #culture .main .na i { display: inline-block; height: 42px; line-height: 42px; font-size: 22px; color: #3468be; padding: 0 12px; font-style: normal; cursor: pointer; position: relative; margin-right: 30px; font-weight: bold; } #culture .main .na i::before { position: absolute; bottom: -2px; left: 0px; content: ""; display: inline-block; vertical-align: top; height: 3px; width: 100%; background: #3468be; } #culture .main .na span { float: right; font-size: 15px; } #culture .main .na span a { color: #979797; } #culture .main { font-size: 0; } #culture .main>.le { width: 756px; display: inline-block; } #culture .main>.le>img { width: 756px; height: 260px; display: inline-block; } #culture .main>.le>ul { display: block; margin-top: 20px; } #culture .main>.le>ul li { display: inline-block; width: 362px; height: 30px; line-height: 30px; font-size: 15px; margin-right: 30px; } #culture .main>.le>ul li:nth-child(even){ margin-right: 0px; } #culture .main>.le>ul li::before { content: ""; display: inline-block; vertical-align: top; height: 3px; width: 3px; background: #666; margin-top: 14px; margin-right: 6px; } #culture .main>.le>ul li i { height: 30px; line-height: 30px; display: inline-block; float: right; color: #999; font-size: 14px; font-style: normal; } #culture .main>.ri { width: 434px; position: relative; height: 260px; display: inline-block; margin-left: 10px; cursor: pointer; } #culture .main>.ri img { width: 434px; height: 260px; } .ind-play{ position: relative;} .ind-play::before { content: ''; display: inline-block; height: 80px; width: 80px; vertical-align: top; position: absolute; top: 80px; right: 170px; background-image: url(/uploads/image/timg/play.png); background-repeat: no-repeat; background-size: 80px 80px; background-position: 0 0; } #culture .main>.ri i { font-size: 18px; color: #fff; background: rgba(0, 0, 0, 0.6); height: 40px; line-height: 40px; display: block; position: absolute; bottom: 0; right: 0; left: 0px; font-style: normal; padding-left:10px; } #culture .main>.ri>ul { display: block; margin-top: 20px; } #culture .main>.ri>ul li { display: inline-block; width: 100%; height: 30px; line-height: 30px; font-size: 15px; margin-right: 14px; } #culture .main>.ri>ul li::before { content: ""; display: inline-block; vertical-align: top; height: 3px; width: 3px; background: #666; margin-top: 14px; margin-right: 6px; } #culture .main>.ri>ul li i { height: 30px; line-height: 30px; display: inline-block; float: right; color: #999; font-size: 14px; font-style: normal; position: initial; background: none; cursor: text; } #adv_hdp { width: 100%; } #adv_hdp .main { width: 1200px; margin: 0 auto; margin-top: 30px; } #adv_hdp .main .swiper-container { width: 100%; height: 100px; } #adv_hdp .main .swiper-slide { cursor: pointer; text-align: center; font-size: 0px; background: #fff; /* center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #adv_hdp .main .swiper-pagination-bullet { width: 12px; height: 12px; background: transparent; opacity: 1; border-radius: 50%; border: 1px solid #fff; margin: 0px 6px; } #adv_hdp .main .swiper-pagination-bullet-active { opacity: 1; background: #fff; ; } #adv_hdp .main .swiper-pagination { text-align: right; margin-bottom: 0px; } #adv_hdp .main .swiper-container-horizontal>.swiper-pagination-bullets, #adv_hdp .main .swiper-pagination-custom, #adv_hdp .main .swiper-pagination-fraction { left: -10px; } #adv_hdp .main .swiper-container .text { width: 100%; } #adv_hdp .main .swiper-container .text img { width: 100%; display: block; } #adv_hdp .main .swiper-container .text p { display: inline-block; color: #fff; text-align: left; vertical-align: top; height: 50px; line-height: 50px; width: 100%; font-size: 18px; background: rgba(0, 0, 0, 0.6); margin: 0; padding-left: 40px; position: absolute; bottom: 0px; } #adv_hdp .main .swiper-button-prev { height: 70px; width: 42px; background-color: rgba(0, 0, 0, 0.4); background-image: ; background-size: auto 30px; margin-left: -10px; margin-top: -35px; outline: 0; } #adv_hdp .main .swiper-button-next { height: 70px; width: 42px; background-color: rgba(0, 0, 0, 0.4); background-image: ; background-size: auto 30px; margin-right: -10px; margin-top: -35px; outline: 0; } #mainbottom { width: 100%; } #mainbottom .main { width: 1200px; margin: 0 auto; margin-top: 30px; font-size: 0; } #mainbottom .main .le { width: 360px; display: inline-block; } #mainbottom .main .le img { height: 78px; width: 360px; margin-bottom: 10px; } #mainbottom .main .middle { display: inline-block; border: 1px solid #898989; height: 252px; width: 360px; margin-left: 25px; } #mainbottom .main .middle p { width: 100%; margin: 0; line-height: 76px; text-align: center; font-size: 22px; } #mainbottom .main .middle div { border: 1px solid #c8c8c8; height: 36px; width: 320px; background: #fff; font-size: 0; margin-left: 20px; } #mainbottom .main .middle div input { border: 0; outline: 0; width: 158px; height: 36px; display: inline-block; padding-left:5px; } #mainbottom .main .middle div i { display: inline-block; font-size: 12px; border-left: 1px solid #c8c8c8; height: 36px; line-height: 36px; width: 156px; font-style: normal; text-align: center; } #mainbottom .main .middle>input { border: 0; outline: 0; width: 315px; height: 36px; display: block; margin-top: 10px; border: 1px solid #c8c8c8; margin-left: 20px; padding-left:5px; } #mainbottom .main .middle>button, #mainbottom .main .middle>span{ border: 1px solid #c8c8c8; width: 116px; height: 36px; line-height: 36px; text-align: center; background: transparent; display: inline-block; color:#333 !important; margin-top:26px; font-size: 14px; cursor: pointer; } #mainbottom .main .middle>span a{ font-size: 13px } #mainbottom .main .middle>button{ border-top-left-radius: 5px; border-bottom-left-radius: 5px; margin-left:72px; border-right:0; } #mainbottom .main .middle>span{ border-top-right-radius: 5px; border-bottom-right-radius: 5px; box-sizing: border-box; } #mainbottom .main .ri { display: inline-block; width: 436px; height: 254px; margin-left: 16px; } #mainbottom .main .ri .na { display: block; width: 100%; border-bottom: 2px solid #dddddd; height: 42px; line-height: 42px; } #mainbottom .main .ri .na i { display: inline-block; height: 42px; line-height: 42px; font-size: 22px; color: #3468be; padding: 0 12px; font-style: normal; cursor: pointer; position: relative; margin-right: 30px; font-weight: bold; } #mainbottom .main .ri .na i::before { position: absolute; bottom: -2px; left: 0px; content: ""; display: inline-block; vertical-align: top; height: 3px; width: 100%; background: #3468be; } #mainbottom .main .ri .na span { float: right; font-size: 15px; } #mainbottom .main .ri .na span a { color: #979797; } #mainbottom .main .ri .li { margin-top: 10px; } #mainbottom .main .ri .li li { display: block; line-height: 40px; font-size: 16px; } #mainbottom .main .ri .li li::before { content: ""; display: inline-block; vertical-align: top; height: 3px; width: 3px; background: #666; margin-top: 18px; margin-right: 6px; } #mainbottom .main .ri .li li i { font-style: normal; float: right; line-height: 40px; color: #999; }