/*通用样式*/ * { margin: 0px; padding: 0px; font-family: "微软雅黑"; } img { width: 100%; } a { text-decoration: none!important; color: #000000; } ul li { list-style: none; } #container { height: 100%; width: 100%; min-width: 1460px; } /*头部样式*/ .head { display:flex; justify-content:space-between; align-items:center; width:80%; margin:40px auto; } .logo { } .head-rigth { flex:1; display: flex; flex-direction: column; justify-content: space-between; height: 90px; margin-left: 30px; } .head_phone { display:flex; justify-content: flex-end; align-items: center; } .phone-left { display: flex; align-items: center; margin-right:10px; } .phone-left img { width:30px; height:30px; } .phone-left span:last-child { } .head-language { float: right; padding-right: 16px; } .head-language span { padding-top: 20px; } .head-language a:first-child { border-right: 2px solid #000000; padding-right: 16px; } .head-language a:last-child { padding-left: 16px; } .nav { display: flex; } .nav>li { flex: 1; text-align: center; position: relative; padding-bottom: 10px; } /*.nav li a { padding: 0 15px; }*/ .nav li:last-child{ text-align: center; } .nav a { height: 30px; } .nav a:hover { color: red; } /*.nav li>ul li:hover { background: #A3A2A2; }*/ .nav-hide { margin-top: 10px; display: none; z-index: 1; position: absolute; width: 100%; border-radius: 3px; background: rgba(250,90,90,0.8); } .nav>li:hover .nav-hide { display: block; } .nav-hide li { margin-bottom: 1px; padding: 10px; text-align: center; } .nav li>ul li:hover a { color: red; } .nav-hide li a { padding: 0 10px; color: white; /*min-width: 90px;*/ display: block; transition:0.15s linear all; } /*頁腳*/ .footer { background-color: #333; height: 500px; } .footer a{ color: white; } .footer .footer-content { margin: 0 10%; overflow: hidden; display: flex; } .footer-child { padding-top: 100px; float: left; flex: 1; } .footer-head { color: #FFF; font-weight: bold; /*文字加粗*/ font-size: 18px; height: 60px; } .footer-head a { color: white; } .footer-head a:hover { color: red; } .footer-item { color: #a3a2a2; font-size: 18px; line-height: 48px; text-align: left; } .footer-item a:hover { color: white; } .footer-child:last-child .footer-head a { padding-right: 0; } .footer-item a { color: #CCC; } .footer .msg { float: left; padding-top: 100px; flex: 1; } .msg p { color: white; font-size: 18px; border: 1px solid #CCC; text-align: center; padding: 8px 76px; width: 72px; } .msg-icon { display: flex; } .msg-icon a { flex: 1; margin: 55px 10px 0 10px; } .msg-icon a:first-child { margin-left: 0; } .msg-icon a:last-child { margin-right: 0; } .msg-hide{ display: none; } .msg-show{ position: absolute; display: block; bottom: -144px; right: -32px; left: -32px; } /*页脚样式*/ .copyright { background-color: #000; height: 120px; text-align: center; color: #FFF; position: relative; } .copyright div { width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .copyright p:first-child{ padding-bottom: 15px; } /*轮播样式*/ ul, ol { padding: 0; clear: both; } .banner { position: relative; overflow: auto; text-align: center; width: 100%!important; } .banner li { list-style: none; } .banner ul li { float: left; } #b04 .dots { position: absolute; left: 0; right: 0; bottom: 20px; } #b04 .dots li { display: inline-block; width: 10px; height: 10px; margin: 0 4px; text-indent: -999em; border: 2px solid #fff; border-radius: 6px; cursor: pointer; opacity: .4; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s; } #b04 .dots li.active { background: #fff; opacity: 1; } #b04 .arrow { position: absolute; top: 210px; } #b04 #al { left: 15px; } #b04 #ar { right: 15px; } .banner a img { width: 20px; } @media screen and (max-width: 1920px) { html{font-size: 18px;} } @media screen and (max-width: 1820px) { html{font-size: 17px;} } @media screen and (max-width: 1720px) { html{font-size: 16px;} } @media screen and (max-width: 1620px) { html{font-size: 15px;} } @media screen and (max-width: 1520px) { html{font-size: 14px;} } @media screen and (max-width: 1420px) { html{font-size: 13px;} } @media screen and (max-width: 1320px) { html{font-size: 12px;} }