/* box-dbfw Start */ .box-dbfw { overflow: hidden; } .box-dbfw ul { padding: 1px 0 0 1px; } .box-dbfwWidth { width: 100%; max-width: 1230px; margin: 0 auto; padding: 0 15px; position: relative; } .box-dbfw ul li { width: 20%; float: left; border: 1px solid #d8d8d8; margin: -1px 0 0 -1px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; } .box-dbfw ul li .box { width: 100%; height: 300px; text-align: center; padding: 38px 0 0 0; transition: all 0.3s; } .box-dbfw ul li .box .bt { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 22px; color:#000; font-weight: bold; transition: all 0.3s; } .box-dbfw ul li .box .pic { margin: 28px auto; display: block; overflow: hidden; width: 100px; height: 100px; border-radius: 50%; box-shadow: 5px 5px 40px #032d85; } .box-dbfw ul li .box .pic img { width: 100%; height: 100%; } .box-dbfw ul li .box .more { font-size: 14px; color: #fff; background: url(/img/serviceBtn1.png) no-repeat; background-size: 100% 100%; width: 126px; height: 37px; line-height: 35px; display: block; overflow: hidden; margin: 0 auto; transition: all 0.3s; } .box-dbfw ul li .xun { height: 300px; width: 0; overflow: hidden; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .box-dbfw ul li .xun dl { width: 100%; } .box-dbfw ul li .xun dl dd a { font-size: 16px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; padding: 0 10px 0 25px; height: 50px; color: #000; line-height: 50px; border-bottom: 1px solid #eee; } .box-dbfw ul li .xun dl dd a:hover { color: #032d85; } .box-dbfw ul li .xun dl dd a:before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); background: #bababa; width: 4px; height: 4px; transition: all 0.3s; } .box-dbfw ul li .xun dl dd:hover a:before { background: #032d85; } .box-dbfw ul li .xun dl dd:last-child a { border-bottom: 0; } .box-dbfw ul li.cur { width: 40%; position: relative; z-index: 1; border-color: #032d85; } .box-dbfw ul li.cur .box { width: 50%; background: #032d85; background: -webkit-linear-gradient(top, #032d85, #1b397a); background: -moz-linear-gradient(top, #032d85, #1b397a); background: -o-linear-gradient(top, #032d85, #1b397a); background: linear-gradient(top, #032d85, #1b397a); } .box-dbfw ul li.cur .box .bt { color: #fff; } .box-dbfw ul li.cur .box .more { background: url(/img/serviceBtn1_H.png); color: #333; } .box-dbfw ul li.cur .xun { box-shadow: 0 0 10px #032d85; } @media only screen and (max-width:999px) { .box-dbfw ul { padding: 1px 0 0 0 } .box-dbfw ul li { width: 100%; margin: -1px 0 0 0 } .box-dbfw ul li .box { height: 240px; padding: 28px 0 0 0 } .box-dbfw ul li .box .bt { font-size: 18px; } .box-dbfw ul li .box .pic { margin: 18px auto; width: 80px; height: 80px } .box-dbfw ul li .box .more { line-height: 38px } .box-dbfw ul li .xun { height: 240px } .box-dbfw ul li .xun dl dd a { padding: 0 10px 0 18px; height: 40px; line-height: 40px; font-size: 12px } .box-dbfw ul li .xun dl dd a:before { left: 8px } .box-dbfw ul li.cur { width: 100% } .box-dbfw ul li:nth-child(even) { flex-direction: row-reverse } } /* box-dbfw End */ /* box-tit */ .box-tit { text-align: center; overflow: hidden; line-height: 1; padding: 60px 0 30px 0; } .box-tit .tit { font-size: 30px; font-weight: bold; color: #2c2c2c; } .box-tit .tit span { color: #005aa3; } .box-tit .tit i { display: inline-block; width: 8px; height: 8px; background: #2c2c2c; border-radius: 50%; margin: 0 8px; transform: translateY(-6px); } .box-tit .line { margin: 13px 0; overflow: hidden; background: url(/img/iconsl.png) center center no-repeat; height: 22px; position: relative; } .box-tit .line:before, .box-tit .line:after { content: ""; width: 40%; height: 1px; background: #d7d7d7; position: absolute; top: 50%; max-width:620px; } .box-tit .line:before { left: 50%; margin-left: 20px; border-left: 30px solid #005aa3; } .box-tit .line:after { right: 50%; margin-right: 20px; border-right: 30px solid #005aa3; } .box-tit p { color: #000; font-size: 14px; } @media only screen and (max-width:999px) { .box-tit { padding: 20px 0 15px 0; } .box-tit .tit { font-size: 22px } .box-tit .tit i { width: 6px; height: 6px; margin: 0 4px; transform: translateY(-4px) } .box-tit .line { margin: 6px 0 8px 0; height: 12px; background-size: auto 100% } .box-tit .line:before, .box-tit .line:after { width: 120px } .box-tit .line:before { margin-left: 15px; border-left-width: 20px } .box-tit .line:after { margin-right: 15px; border-right-width: 20px } .box-tit p { font-size: 14px } } /* End */