index.css

@charset "utf-8";

header {
  padding: 0 30px 30px;
  background: linear-gradient(to right, #f2f2f2 50%, #f2f2f2, #042e6f, #042e6f 50%);
}
header .visual img {width:100%;}
header .logo img {width:30%;}
header h1 {position: absolute; left: 30px; top: 0; z-index: 31;}
header #lnb {position: absolute; left:0; top: 0; z-index: 30; padding: 0 60px 0 270px; width: 100%; box-sizing: border-box;}
header #lnb nav {position: relative; z-index: 30; border-bottom: 1px solid rgba(255,255,255,0.5); text-align: center; font-size: 0;}
header #lnb nav > ul {display: inline-block; overflow: hidden; height: 47px;}
header #lnb nav + div {position: absolute; left: 0; top: 0; z-index: 29; width: 100%; height: 0; background: #042e6f; opacity: 0; transition: all 0.5s;}
header #lnb nav:hover + div {height: 270px; opacity: 1;}
header #lnb nav > ul:hover {overflow: visible;}
header #lnb nav > ul:hover ul {opacity: 1;}
header #lnb nav > ul > li {display: inline-block; position: relative;}
header #lnb nav > ul > li > a {display: block; position: relative; width: 160px; height: 47px; font-size: 18px; color: #fff; line-height: 47px;}
header #lnb nav > ul > li > a:after {content: ""; position: absolute; left: 50%; bottom: -1px; width: 0; height: 2px; background: #fff; transition: all 0.5s;}
header #lnb nav > ul > li > a:hover:after {left: 0; width:100%;}
header #lnb nav > ul ul {position: absolute; width: 100%; padding: 22px 0 0; text-align: center; opacity: 0; transition: all 0.5s;}
header #lnb nav > ul ul li {line-height: 39px;}
header #lnb nav > ul ul a {font-size: 14px; position: relative; color: #fff; transition: all 0.5s;}
header #lnb nav > ul ul a:hover {color: #2acef1;}
header #lnb nav > ul ul a:after {content: ""; position: absolute; left: 50%; bottom: -7px; width: 0; height: 2px; background: #2acef1; transition: all 0.5s;}
header #lnb nav > ul ul a:hover:after {left: 0; width: 100%;}


.info_box {width: 1175px; margin: 0 auto;}
.info_box h2 {padding: 58px 0 41px; font-size: 35px; color: #777; font-weight: normal; text-align: center; letter-spacing: 36px;}
.info_box h2 span {color: #042e6f;}
.info_box li {float: left; padding: 0 0 0 45px; width: 260px; position: relative;}
.info_box li:first-child {padding: 0;}
.info_box li em {overflow: hidden; display: block; width: 100%; height: 170px;}
.info_box li img {width: 100%; height: 170px; transform: scale(1); transition: all 0.3s;}
.info_box li:hover img {transform: scale(1.1);}
.info_box li a > div {position: relative; padding: 40px 20px 0px; height: 170px;}
.info_box li:hover a > div {background: #aaa8aa;}
.info_box li:hover a * { transition: all 0.5s;}
.info_box li:hover a * { color: #fff;}
.info_box li a h3 {font-size: 19px; color: #222; font-weight: normal; line-height: 28px;}
.info_box li a p {padding: 13px 0 0; font-size: 13px; color: #747774; line-height: 18px;}
.info_box li a > div div {position: absolute; left: 20px; bottom: 0; width: 220px; height: 54px; line-height: 54px; border-top: 1px solid #ccc; text-align: right; font-size: 13px; color: #666;}
.info_box > ul + * {padding-top: 30px;}
.btn_more {display: inline-block; width: 140px; height: 44px; border: 1px solid #042e6f; box-sizing: border-box; font-size: 16px; color: 042e6f; line-height: 44px; text-align: center; letter-spacing: 7px;}
.btns.center {text-align: center;}

footer {background: #272f3c;}
footer > div {position: relative; width: 1175px; padding: 45px 0; margin: 0 auto;}
footer > div > a {position: absolute; right: 0; top: -25px; width: 39px; height: 49px; background: #22a5d5; color:#fff; text-align: center; padding: 5px 0 0; line-height: 39px;}
footer > div .left {float: left; line-height: 100%;}
footer > div .left div a {margin: 0 10px 0 0; font-size: 13px; color: #fff;}
footer > div .left p {padding: 13px 0 0; line-height: 21px; font-size: 13px; color: #747b85;}
footer > div .left p span {padding: 0 13px 0 0;}
footer > div .right {float: right; padding: 0 100px 0 20px;}
footer > div .right a {color: #747b85;}
footer > div .right a span {padding: 0 10px 0 0;}
footer > div .right a img {width: 40px; height: 40px; text-align: left; border-radius: 8px;}