* { margin: 0; padding: 0; transition: transform 0.5s ease, opacity 0.5s ease, color 0.5s ease; } .top_box { display: flex; width: 1330px; margin: 20px auto; align-items: center; justify-content: space-between; } .top_box .logo { width: 536px; } .top_box .xun { width: 317px; } .nav { background-color: rgb(96, 131, 229); } .nav>ul { width: 1330px; margin: auto; display: flex; justify-content: space-between; list-style: none; } .nav>ul>li { position: relative; } .nav ul li a { display: block; padding: 19px 14px; font-size: 16px; color: #fff; text-decoration: none; } .nav ul li a:hover { background-color: #fff; color: rgb(96, 131, 229); } .nav>ul>li>ul>li>a:hover { background-color: #3256bd; color: #fff } .nav>ul>li>ul { display: none; list-style: none; position: absolute; z-index: 999; background: rgb(96, 131, 229); width: 100%; } .nav>ul>li>ul>li { text-align: center; } .slider { margin: 0 auto; } .slider img { width: 100%; } .main { width: 1330px; margin: 0 auto; } .main .content { margin-top: 40px; display: flex; justify-content: space-between; flex-wrap: wrap; } .main .content .images { width: 48%; position: relative; margin-bottom: 20px; } .main .content .images a { position: relative; display: block; } .main .content .images a img { max-width: 100%; } .main .content .images .ye { background-color: rgb(80, 107, 184); padding: 20px; padding-left: 40px; opacity: 0.9; position: absolute; bottom: 50px; left: 0px; width: 400px; color: #fff; font-weight: 500; } .main .content .ex { width: 46%; margin-bottom: 35px; } .main .content .ex .text { width: 100%; display: flex; align-items: center; position: relative; padding-bottom: 8px; position: relative; } .main .content .ex .text .word { font-size: 20px; font-weight: 700; padding-bottom: 10px; border-bottom: 2px solid rgb(93, 177, 241); } .main .content .ex .text img { margin-right: 10px; height: 35px; } .main .content .ex .text .more { position: absolute; right: 0px; top: 10px; } .main .content .ex .text .more a { color: rgb(153, 153, 153); text-decoration: none; } .main .content .ex .text .more a:hover { color: rgb(93, 177, 241); } .main .content .ex .data { width: 100%; margin-top: 5px; } .main .content .ex .data ul li { list-style: none; } .main .content .ex .data ul li a { display: flex; padding: 8px 0 8px 16px; border-bottom: 2px solid rgb(241, 241, 241); justify-content: space-between; color: #000; text-decoration: none; } .main .content .ex .data ul li a:hover { color: rgb(93, 177, 241); } .main .content .ex .data ul li:last-child a { border: none; } .main .content .ex .data ul li h5 { position: relative; font-size: 16px; font-weight: 400; } .main .content .ex .data ul li h5:before { content: ""; display: block; width: 6px; height: 6px; background-color: #000; position: absolute; left: -14px; top: 8px; background-color: rgb(93, 177, 241); border-radius: 50%; } .main .content .ex .data ul li span { font-size: 13px; color: rgb(155, 155, 155); } .main .content .ex .datas { width: 100%; margin-top: 5px; } .main .content .ex .datas ul li { list-style: none; } .main .content .ex .datas ul li a { display: flex; padding: 8px 0px; border-bottom: 2px solid rgb(241, 241, 241); justify-content: space-between; color: #000; text-decoration: none; font-size: 16px; } .main .content .ex .datas ul li a:hover { color: rgb(93, 177, 241); } .main .content .ex .datas ul li:last-child a { border: none; } .main .content .ex .datas ul li span { font-size: 13px; color: rgb(155, 155, 155); } .main .content .some { width: 100%; display: flex; text-align: center; margin-bottom: 35px; font-size: 0; } .main .content .some div { font-size: 20px; font-weight: 500; flex-grow: 1; } .main .content .some div a { color: #fff; text-decoration: none; display: block; padding: 23px; font-size: 26px; } .main .content .some div a:hover { opacity: 0.6; } .main .content .some div:nth-child(1) a { background-color: rgb(131, 85, 208); } .main .content .some div:nth-child(2) a { background-color: rgb(87, 158, 184); } .main .content .some div:nth-child(3) a { background-color: rgb(58, 127, 81); } .main .content .link_plat { width: 100%; margin-bottom: 30px; } .main .content .link_plat ul { list-style: none; display: flex; justify-content: space-between; } .main .content .link_plat ul li { width: 18%; } .main .content .link_plat ul li:hover { transform: translateY(-15px); opacity: 0.7; } .main .content .link_plat ul li img { width: 100%; border-radius: 27px; } .main .content .link_plat ul li a { color: #fff; text-decoration: none; display: block; } .main .content .link_plat ul li div { font-weight: 700; text-align: center; position: relative; bottom: 135px; font-size: 27px; color:#000; text-shadow:#fff 1px 0 0,#fff 0 1px 0,#fff -1px 0 0,#fff 0 -1px 0; } .bottom_box { position: relative; width: 100%; font-size: 0px; } .bottom_box .bottom_content { left: 0; top: 0; position: absolute; width: 100%; } .bottom_box .bottom_content .bt_link { margin: 30px auto; width: 1330px; padding-bottom: 30px; border-bottom: 1px solid rgb(148, 155, 243); } .bottom_box .bottom_content .bt_link ul { list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; } .bottom_box .bottom_content .bt_link ul li { font-size: 16px; font-weight: 200; margin: 10px 0; text-align: center; width: 12%; } .bottom_box .bottom_content .bt_link ul li a { text-decoration: none; color: #fff; } .bottom_box .bottom_content .bt_link ul li a:hover { text-shadow: 2px 2px 4px #000; font-weight: 700; } .bottom_box .bottom_content .copyRight { width: 1330px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .bottom_box .bottom_content .copyRight .lf { margin-top: 30px; color: #fff; font-size: 16px; font-weight: 200; line-height: 23px; } .bottom_box .bottom_content .copyRight .rt { margin-top: 30px; display: flex; width: 400px; justify-content: space-between; } .bottom_box .bottom_content .copyRight .rt>div { color: #fff; font-size: 11px; width: 30%; text-align: center; } .bottom_box .bottom_content .copyRight .rt>div img { width: 100%; } .menu { width: 80%; } .menu h1 { color: #fff; background: rgb(96, 131, 229); font-size: 16px; padding: 10px; } .menu .menu_box { list-style: none; border: 1px solid #ddd; border-top: none; padding-top: 5px; } .menu .menu_box li {} .menu .menu_box li a { display: block; background: #fff; padding: 15px 10px; color: rgb(96, 131, 229); font-size: 16px; border-bottom: 1px dotted #ddd; background-image: url(../images/menu.png); background-repeat: no-repeat; background-position: 190px center; } .menu .menu_box li a:hover { color: #fff; background: rgb(96, 131, 229); background-image: url(../images/menu-h.png); background-repeat: no-repeat; background-position: 190px center; }