.header { width: 1280px; box-sizing: border-box; min-width: 1280px; margin: 0 auto; height: 130px; display: flex; justify-content: space-between; align-items: center; transition: all .3s; background: #fff; } .logo { display: inline-block; } .tips { display: flex; } .tips a{ display:inline-block; color: #222; display: flex; align-items: center; position: relative; } .tips a:nth-child(1) { border-right: 1px solid #ccc; padding-right: 10px; } .tips a:hover { color: #165493; } .tips i { content: ''; display: inline-block; width: 16px; height: 16px; margin: 0 10px; } .tips .home { background: url(/uploads/image/_t021timg/home.png) center no-repeat; background-size: contain; } .tips .add { background: url(/uploads/image/_t021timg/adress.png) center no-repeat; background-size: contain; } .nav { width: 100%; background:#165493; min-width:1280px; } .nav ul { width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; } .nav ul li { position: relative; width: 12%; } .nav ul li .navbox { position: absolute; bottom: 0; min-width: 100%; transform: translatey(100%); background: rgba(255, 255, 255, 0.8); display: none; z-index: 99; } .navbox a { display: block; box-sizing: border-box; padding: 0 20px; line-height: 40px; font-size: 16px; color: #000; white-space: nowrap; transition: all .3s; } .navbox a:hover { background: #e7ab54; color: #fff; } .nav ul li .line { position: absolute; left: 0; top: 50%; transform: translatey(-50%); width: 1px; height: 20px; background: rgba(255, 255, 255, .5); } .nav ul li>a{ display: inline-block; color: #fff; transition: all .3s; line-height: 50px; width: 100%; text-align: center; position: relative; z-index: 9; } .nav ul li:nth-child(1) a{ border-left: none; } .nav ul li>a span { position: relative; z-index: 99; } .nav ul li>a::before,.nav ul li>a::after{ content: ''; position: absolute; width: 0; height: 100%; transition: all .3s; background: #e7ab54; z-index: 1; } .nav ul li>a::before{ left: 50%; } .nav ul li>a::after{ right: 50%; } .nav ul li>a:hover::before, .nav ul li>a:hover::after, .nav ul li .on::before , .nav ul li .on::after { width: 50%; } .mainbg { background: #f8f8f8; } .main { min-height: 527px; } footer { width: 100%; min-width:1280px; background: #165493; font-style: 14px; color: #fff; } footer .bot { width: 98%; max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } footer .bot img { width: auto; } .fottips { width: 100%; background: #0f3b67; } .such { width: 1280px; margin: 0 auto; padding: 20px 0; } .such p { font-size: 14px; color: #fff; } .such a { color: #fff; } .such a:hover { text-decoration: underline; } .list4 { justify-content: flex-end; } .list4 li { margin-left: 20px; padding: 10px; background: #fff; } .list4 li p { padding: 15px 0; text-align: center; color: #666; font-size: 14px; margin-top: 10px; border-top: 1px solid #ccc; } .callus { font-size: 18px !important; } .bot-left p{ margin-bottom: 10px; font-size: 14px; } .friend { border-top: 1px solid #fff; padding-top: 20px; display: flex; align-items: center; margin: 20px 0; } .friend li { width: 280px; font-size: 14px; margin-right: 20px; } .friend li:last-child { margin-right: 0; } .friend li:nth-child(2) a { border-left: none; } .links { font-size: 16px; line-height: 40px; background: #fff; box-sizing: border-box; padding: 0 20px; cursor: pointer; position: relative; color: #999; display: flex; justify-content: space-between; align-items: center; } .links i { content: ''; display: inline-block; height: 26px; width: 26px; background: url(/uploads/image/_t021timg/arr-d.png) center no-repeat; transition: all .3s; } .friends { position: absolute; width: 100%; left: 0; top: 0; transform: translatey(-100%); display: none; background: #fff; } .friends a { display: inline-block; width: 100%; box-sizing: border-box; padding: 0 20px; line-height: 40px; border-bottom: 1px dashed #cfcfcf; color: #000; transition: all .3s; } .friends a:hover { color: #e7ab54; transform: translatex(10px); } .friends a:last-of-type { border-bottom: none; } .memu-btn { width: 50px; height: 30px; display: none; flex-flow: column; justify-content: space-between; cursor: pointer; overflow: hidden; } .memu-btn i { content: ''; display: inline-block; width: 100%; height: 3px; background: #222; transition: all 0.3s; } .memu-btn-active i:nth-child(2) { transform: translatex(150%); } .memu-btn-active i:nth-child(3) { transform: rotate(-45deg) translate(3px, -12px); } .memu-btn-active i:nth-child(1) { transform: rotate(45deg) translate(3px, 12px); } .y45 { transform: rotate(45deg); } .y-45 { transform: rotate(-45deg); } .warp { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.3); z-index: 998; display: none; } aside { position: fixed; top: 0; right: 0; height: 100%; background: #046c85; width: 50%; max-width: 200px; z-index: 999; transform: translatex(100%); transition: all 0.3s; } aside a { width: 100%; line-height: 40px; box-sizing: border-box; padding: 0 5% 0 10%; color: #fff; border-bottom: 1px solid #5098aa; display: flex; justify-items: center; align-items: center; justify-content: space-between; } aside a i { display: inline-block; height: 20px; width: 20px; background: url(/uploads/image/_t021timg/arrow_r_w.png) center no-repeat; } .aside-active { transform: translatex(0); } .navlists { display: none; background: #1486a2; } #flimg { z-index:999; } #flimg p { font-size: 14px; width: 100%; text-align: right; cursor: pointer; color: #999; } .flexbw { display: flex; justify-content: space-between; flex-wrap: wrap; } .flex { display: flex; } .container { width: 98%; min-width: 1280px; margin: 20px auto 0; } .banner2 { width: 460px; height: 330px; } .banner2 img { width: 460px; height: 330px; } .banner2 .title { color: black; font-size: 12px; text-align: center; padding: 8px 12px; font-weight: 700; } .banner2 .title p { display: none; } .conlist1 { width: 100%; } .conlist1>li { width: 31%; position: relative; min-height: 350px; } .conlist1>li .text { position: relative; width: 100%; text-align:center; background: #165493; border-top: 2px solid#fff; padding:5px 10px 40px; box-sizing: border-box; } .conlist1>li .text .swiper-pagination { display: block !important; bottom: 10px; left: 50%; transform: translatex(-50%); } .conlist1>li .text a { color: #fff; width: 80%; margin:0 auto; } .conlist1>li .swiper-slide img { height: 270px; width: 100%; transition: all .3s; } .conlist1>li .swiper-slide img:hover { transform: scale(1.2); } .conlist1>li .swiper-slide a { display: block; overflow: hidden; } .conlist1>li .text .pag { background: rgba(255, 255, 255, .3); } .conlist1>li .text .pag-active{ border: 2px solid rgba(0,0,0,0); background: #e7ab54 } .contitle { border-bottom:2px solid #165493; align-items: center; } .contitle .ti { font-size: 20px; color: #222; height: 50px; padding-right:20px; border-bottom: 2px solid #e7ab54; margin-bottom: -2px; } .contitle a{ color: #666; font-size: 14px; transition: all .3s; } .contitle a:hover { color: #165493; } .hot { padding: 20px 0; border-bottom: 1px dashed #ccc; } .hot .hotti { display: block; font-size: 20px; color: #000; } .hot:hover .hotti, .hot:hover .hotcon { color: #165493; } .hot .hotcon { margin-top: 10px; font-size: 14px; color: #666; } .list1 li { align-items: center; position: relative; box-sizing: border-box; padding-left: 20px; } .list1 li a{ width: 85%; line-height: 40px; } .list1 li::before { content: ''; position: absolute; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid #5ab9c4; left: 0; top: 50%; transform: translatey(-50%); transition: all .3s; } .list1 li:hover a{ text-decoration: underline; } .list1 li:hover::before { border-left: 7px solid #165493; } .list2 li { width: 100%; box-sizing: border-box; padding: 15px 20px; margin-top: 2px; background: #eef1fa; } .list2 li .data { width: 50px; margin-right: 20px; } .list2 li a { font-size: 14px; color: #222; width: 85%; } .list2 li a:hover { text-decoration: underline; } .data .yy-dd{ color: #fff; font-size: 12px; line-height: 20px; background: #5ab9c4; text-align: center; } .data .day { color: #e7ab54; font-size: 18px; line-height: 30px; text-align: center; background: #fff; } .date { font-size: 14px; color: #ccc; } .container2 { width: 100%; min-width:1280px; background: url(/uploads/image/_t021timg/bg.jpg) top no-repeat; background-size: 100% 100%; margin-top: 20px; padding-bottom: 40px; padding-top: 40px; } .conbox { width: 1200px; margin: 0 auto; } .conbox .ti { color: #fff; } .conbox .contitle { border-bottom: 2px solid rgba(255, 255, 255, .5); margin-bottom: 40px; } .conbox .contitle a { color: #fff; } .list3>li { width: 31.5%; padding: 10px; box-sizing: border-box; transition: all .5s ease-in-out; background: #fff; } .list3>li:hover{ box-shadow: 0px 0px 7px #fff; transform: scale(1.05); } .list3>li p{ padding: 15px 10px; } .list3>li .tips { font-size: 16px; color: #333; } .list3>li .data2 { font-size: 14px; color: #999; } .list3>li .data2 .day { display: inline-block; color: #165493; border-right: 1px solid #ccc; padding-right: 10px; margin-right: 10px; font-size: 30px; } .list3>li .list1 { width: 100%; box-sizing: border-box; margin-top: 20px; } .list3>li .list1 a { width: 95%; } .conlist2>li{ width: 48.5%; } .smallfont { font-size: 13px; line-height: normal; text-align: center; } .listleft { margin-top: -40px; width: 250px; } .listleft p{ width: 250px; height: 80px; vertical-align: middle; display: table-cell; color: white; font-size: 24px; background: #165493; text-align: center; } .subnav { background: #fff; } .subnav li { position: relative; transition: all .3s; border-bottom: 1px solid #ddd; } .subnav li>a{ font-size: 18px; width: 100%; box-sizing: border-box; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; color: #000; } .subnav li>a span { z-index: 999; position: relative; } /* .subnav li::before, .subnav li::after{ content: ''; position: absolute; } .subnav li::before { left: 0; height: 100%; width: 0%; transition: all .3s; background: #1787a3; } */ .subnav li:hover { -webkit-box-shadow: 0 5px 12px 0 rgb(124 124 124 / 30%); -moz-box-shadow: 0 5px 12px 0 rgba(124,124,124,0.3); box-shadow: 0 5px 12px 0 rgb(124 124 124 / 30%); -webkit-transform: translatey(-3px); -ms-transform: translatey(-3px); -o-transform: translatey(-3px); transform: translatey(-3px); } .subnav li:hover , .subnav .selected { /* color: #fff !important; */ border-bottom: 2px solid #165493 !important; } /* .subnav li:hover::before , .subnav .selected::before { width: 100%; z-index: 1; } */ .subnav li:hover .arr ,.subnav .selected .arr { display: block; } .arr { content: ''; display: none; border: solid #fff; border-width: 0 1px 1px 0; padding: 5px; transform: rotate(-45deg); position: relative; z-index: 990; } .bigbg{ height: 200px; background: url(/uploads/image/_t021timg/banner.jpg) center no-repeat; background-size: initial; background-position-y: -139px; width: 100%; min-width:1280px; max-width:1980px; background-size:100% 100% !important; margin:0 auto; } .listright { width: 78%; background: #fff; margin-top: 40px; padding: 0 20px 40px; box-sizing: border-box; } .ti { border-bottom: 2px solid #ccc; display: flex; justify-content: space-between; align-items: center; } .bor-t { font-size: 20px; line-height: 50px; border-bottom: 2px solid #165493; margin-bottom: -2px; padding-right: 20px; } .subnav2 { font-size: 13px; color: #000; } .subnav2 a { margin: 0 5px; } .subnav2 a:hover ,.subnav2 .selected{ color:#23527c; } .comtentlist ,.rolelist,.piclist { margin-top: 20px; } .comtentlist li{ border-bottom: 1px dashed #ccc; padding-left: 20px; position: relative; display: flex; justify-content: space-between; align-items: center; height: 50px; } .comtentlist li a { width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .3s; } .comtentlist li span { font-size: 13px; color: #999; } .comtentlist li::before { content: ''; position: absolute; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #165493; margin-left: 5px; left: 0; top: 50%; transform: translatey(-50%); } .comtentlist li:hover a{ color:#e7ab54; transform: translatex(5px); } .comtentlist li:hover::before{ border-left: 5px solid #e7ab54; } .rolelist { justify-content: flex-start; } .rolelist li { width: 23%; margin:0 20px 30px 0; border: 1px solid rgba(0, 0, 0, 0); border-bottom: 1px solid #ccc; transition: all .3s; } .rolelist li a { width: 100%; box-sizing: border-box; } .rolelist li:nth-child(4n) { margin-right: 0; } .rolelist li a p,.piclist li p { padding: 10px 0; text-align: center; } .rolelist li:hover { border: 1px solid #ccc; box-shadow: 0 5px 10px #ccc; transform: translatey(-3px); -moz-transform: translatey(-3px); -webkit-transform: translatey(-3px); -o-transform: translatey(-3px); } .piclist { justify-content: flex-start; } .piclist li { width: 31.5%; margin:0 20px 30px 0; transition: all .3s; border: 1px solid rgba(0, 0, 0, 0); } .imgbox { overflow: hidden; position: relative; width: 100%; text-align: center; display: flex; justify-content: center; align-items: center; color: #222; } .imgti { position: absolute; width: 60%; text-align: center; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(255, 255, 255, .8); padding: 10px 0; } .imgti span { margin: 0; display: inline-block; font-size: 20px; color: #222; padding: 0 10px 5px; border-bottom: 1px solid #165493; position: relative; } .imgti span::before { content: ''; position: absolute; left: 50%; bottom: -1px; transform: translatex(-50%); width: 20px; height: 2px; background: #e7ab54; } .imgbox img { transition:all .3s; } .piclist li p { background: #ccc; } .piclist li:nth-child(3n) { margin-right: 0; } .piclist li:hover { border: 1px solid #165493; } .piclist li:hover p { color: #fff; background: #165493; } .piclist li:hover img { transform: scale(1.2); } .search { position: absolute; left: 0; top: 50%; transform: translate(-100%,-50%); display: none; } .search form { height: 30px; border: 1px solid #ccc; border-radius: 5px; padding: 0 10px; display: flex; justify-content: space-between; } .container3 { width: 1280px; min-width: 1280px; margin: 0 auto; } #search { position: relative; display: flex; align-items: center; } /*add*/ .nav ul,.bot,.such { width:1280px; } .banner { margin:0 auto; width:100%; max-width:1920px; } .banner a img{ width:100%; height:360px; } .itemnav { width: 100%; } .itemnav a { font-size: 14px; width: 100%; padding: 10px 0; padding-left: 60px; box-sizing: border-box; position: relative; transition: all .3s; } .itemnav a::before { content: ''; width: 10px; height: 10px; position: absolute; left: 40px; top: 50%; transform: translatey(-50%); transition: all .3s; background: #999; } .itemnav a:hover,.itemnav .selected{ color: #165493; border-bottom: none !important; } .itemnav a:hover::before,.itemnav .selected::before{ background: #165493; } @media screen and (max-width: 1200px) { html { width: 1280px; } }