@charset "UTF-8";
@import url(./reset.css);

a {display: block;}
img {display: block; width: 100%;}

header {position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 153px; background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, .1); transition-duration: .5s;}

header .top {position: relative; top: 0; background-color: #F5F5F5; transition-duration: .5s;}
header .top .inner {display: flex; justify-content: space-between; align-items: center; max-width: 1920px; height: 57px; margin: 0 auto; padding: 0 80px;}
header .top .inner img:first-child {width: 700px;}
header .top .inner img:last-child {width: 140px;}

header > .inner {display: flex; align-items: center; max-width: 1920px; margin: 0 auto; padding: 16px 80px; transition-duration: .5s;}
header > .inner h1 a {width: 145px; transition-duration: .5s;}
header > .inner .gnb {position: relative; width: 1126px; margin: 0 64px 0 auto; transition-duration: .5s;}
header > .inner .gnb a {position: absolute; top: 0; left: 109px; width: 135px; height: 25px;}
header > .inner .util {width: 84px; transition-duration: .5s;}

header .menu {position: absolute; top: 153px; left: 0; width: 100%; opacity: 0; transition-duration: .5s; pointer-events: none;}
header .menu::before {content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 86px; background-color: #213F99;}
header .menu::after {content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #F0F0F0;}
header .menu.on {opacity: 1;}
header .menu .inner {position: relative; z-index: 1; max-width: 1920px; margin: 0 auto;}
header .menu .inner::before {content: ""; display: block; position: absolute; top: -12px; left: 716px; width: 20px; height: 14px; background: url("../images/ico-arrow.svg") no-repeat center center / cover;}

header.active {height: 64px;}
header.active .top {top: -57px;}
header.active > .inner {padding: 12px 80px; transform: translateY(-57px);}
header.active > .inner h1 a {width: 91px;}
header.active > .inner .gnb {width: 872px;}
header.active > .inner .gnb a {left: 82px; width: 108px; height: 20px;}
header.active > .inner .util {width: 60px;}

header.active .menu {top: 64px;}
header.active .menu .inner::before {left: 952px;}

.content {width: 100%; padding: 153px 0 188px;}
.content .inner {width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 80px;}

.content .news {margin-bottom: 120px; padding: 120px 0; background-color: #213F99;}
.content .news .tit {width: 238px; margin: 0 auto 80px;}
.content .news .sub-tit {width: 208px; margin-bottom: 40px;}
.content .news .flex {display: flex; justify-content: center; column-gap: 40px;}
.content .news .mt80 {margin-top: 80px;}

footer a {width: calc(100% - 33px); height: 100%; margin: 0 auto;}