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

.header {display: flex; align-items: center; width: 100%; height: 120px;}
.header .inner {display: flex; align-items: center; justify-content: space-between; position: relative; padding: 0 80px; width: 100%;}
.header .logo {width: 120px;}
.header .gnb {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 527px;}
.header .util {width: 148px;}

.content img {width: 100%;}
.content .inner {width: calc(100% - 320px); max-width: 1920px; margin: 0 auto;}
.content .scroll-motion {transform: translateY(100px); transition-duration: .7s; opacity: 0;}
.content .scroll-motion.active {transform: translateY(0); opacity: 1;}

.top {padding: 200px 0 160px;}
.top img {width: 100%;}
.top .motion {transform: translateY(70px); transition-duration: .7s; opacity: 0;}
.top .motion.active {transform: translateY(0); opacity: 1;}
.top .tit {width: 897px; margin-bottom: 32px;}
.top .notice {width: 615px; margin-bottom: 120px; transition-delay: 0.3s;}
.top .tab {width: 1323px; transition-delay: 0.6s;}

section.bg {padding: 160px 0; background-color: #F3F3F3;}
section + section {margin-top: 160px;}
section .tit {margin-bottom: 56px;}

section.bg .list-wrap {display: flex; column-gap: 41px;}
section.bg .list-item {width: calc((100% - 82px) / 3); border: 1px solid #fff; cursor: pointer; transition-duration: .3s;}
section.bg .list-item:hover {box-shadow: 16px 16px 40px rgba(0, 0, 0, 0.1); border: 1px solid #172C56;}

.section1 .info-wrap {display: flex;}
.section1 .info-wrap .txt-box {display: flex; flex-direction: column; justify-content: center; width: 50%; padding: 0 192px 0 129px; box-sizing: border-box; background-color: #F3EEE6;}
.section1 .info-wrap .txt-box > img:first-of-type {width: 62.5%; margin-bottom: 48px;}
.section1 .info-wrap .txt-box > img:last-of-type {margin-top: 109px;}
.section1 .info-wrap .progress-wrap {position: relative; margin-top: 12px; margin-left: 23%;}
.section1 .info-wrap .progress-wrap .progress-thumb {width: 100%; height: 12px; background-color: #DFD8D0; border-radius: 100px;}
.section1 .info-wrap .progress-wrap .progress-track span {position: absolute; top: 0; left: 0; width: 0; height: 12px; background-color: #172C56; border-radius: 100px; transition-duration: .7s;}
.section1 .info-wrap .progress-wrap .progress-track img {position: absolute; top: -4px; left: 0; width: 7%; transition-duration: .7s;}
.section1 .info-wrap .progress-wrap .progress-track.active span {width: 32.5%;}
.section1 .info-wrap .progress-wrap .progress-track.active img {left: 29.5%;}
.section1 .info-wrap .progress-wrap .progress-track + img {position: absolute; top: 39px; left: 22.2%; width: 21.2%; transition-duration: .7s; opacity: 0;}
.section1 .info-wrap .progress-wrap .progress-track + img.active {top: 24px; opacity: 1;}
.section1 .info-wrap .img-box {width: 50%;}

.section2 .list-item {border: 1px solid #ddd; cursor: pointer; transition-duration: .3s;}
.section2 .list-item:hover {box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1); border: 1px solid #172C56;}
.section2 .list-item + .list-item {margin-top: 16px;}

footer, footer a, footer a img {width: 100%;}