@charset "UTF-8";
@import url('../css/general.css');
@import url('../fonts/fonts.css');
@import url('../plugin/plugin.css');

/* layout */
.layout { width: 100%; max-width: 1760px; margin: 0 auto; }
@media (max-width: 1780px) {
.layout { padding: 0 2rem; }
}

/* header */
#header { position: fixed; top: 0; left: 0; z-index: 4; width: 100%; padding: 4rem 0; transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1); }
#header .layout { display: flex; justify-content: space-between; align-items: center; }
#header .layout .header-logo { flex-shrink: 0; height: 5.9rem; overflow: hidden; }
#header .layout .header-logo img { transition: all .5s; }
#header .layout .header-nav { display: flex; justify-content: center; align-items: center; padding: .8rem; background: rgba(0, 0, 0, 0.40); border-radius: 3rem; backdrop-filter: blur(10px); }
#header .layout .header-nav ul { display: flex; align-items: center; gap: .8rem; } 
#header .layout .header-nav ul li a { display: flex; padding: .75rem 1.2rem; border-radius: 2.2rem; }
#header .layout .header-nav ul li a span { color: #FFF; font-size: 1.8rem; font-family: "Pretendard"; font-weight: 600; font-style: normal; line-height: 140%; text-align: center; }
#header .layout .header-nav ul li a.active { background: #fff; }
#header .layout .header-nav ul li a.active span { color: #273B7D; }
#header .layout .header-util { display: flex; }
#header .layout .header-util .btn-more { display: flex; align-items: center; gap: .8rem; padding: 0.8rem 0.8rem 0.8rem 2.2rem; background: #fff; border-radius: 3rem; backdrop-filter: blur(10px); }
#header .layout .header-util .btn-more i { display: flex; flex-shrink: 0; justify-content: center; align-items: center; gap: 1rem; width: 4rem; height: 4rem; padding: 0 1.2rem; color: #fff; font-size: 1.8rem; background: #273B7D; border-radius: 2.2rem; transition: all .5s; }
#header .layout .header-util .btn-more span { color: #222; font-size: 1.8rem; font-weight: 600; font-style: normal; line-height: 140%; text-align: center; }
#header .layout .header-util .btn-menu { display: none; }
#header .layout .header-util .btn-menu i { color: #fff; font-size: 2.8rem; }
#header.fixed { background: #fff; }
#header.fixed .layout .header-logo img { transform: translateY(-5.9rem); }
#header.fixed .layout .header-util .btn-menu i { color: #424242; } 
#header.fixed .layout .header-util .btn-menu i.ri-close-line { font-size: 3.8rem; }
@media (min-width: 1024.1px) {
#header.fixed .layout .header-nav { background: rgba(0, 0, 0, 0.08); }
#header.fixed .layout .header-nav ul li a span { color: #424242; }
#header.fixed .layout .header-nav ul li a.active { background: #273B7D; }
#header.fixed .layout .header-nav ul li a.active span { color: #fff; }
#header.fixed .layout .header-util .btn-more { background: #273B7D; }
#header.fixed .layout .header-util .btn-more span { color: #fff; }
#header.fixed .layout .header-util .btn-more i { color: rgba(39, 59, 125, 1); background: #fff; transform: rotate(45deg); }
}
@media (max-width: 1024px) {
#header .layout .header-nav { position: fixed; top: 9.8rem; right: -100%; display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; height: calc(100% - 9.8rem); padding: 6rem 2rem; background: #fff; border-radius: 0; }
#header .layout .header-nav.on { right: 0; }
#header .layout .header-nav ul { flex-direction: column; align-items: flex-start; gap: 4rem; }
#header .layout .header-nav ul li a { position: relative; display: flex; align-items: center; gap: 1.6rem; padding: 0; }
#header .layout .header-nav ul li a span { color: #424242; font-size: 3.2rem; font-family: "KIMM"; font-weight: 700; font-style: normal; line-height: 140%; }
#header .layout .header-nav ul li a.active span { color: #424242; }
#header .layout .header-nav ul li a.active:after { content: ""; display: block; width: .8rem; height: .8rem; background: #273B7D; }
#header .layout .header-util .btn-more { display: none; }
#header .layout .header-util .btn-menu { display: block; }
}
@media (max-width: 640px) {
#header { padding: 2rem 0; }
}

/* footer */
#footer { padding: 12rem 0 8rem 0; background: #00121F; }
#footer .footer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.4rem; }
#footer .footer-top .btn-top { display: flex; justify-content: center; align-items: center; width: 5.6rem; height: 5.6rem; padding: 0 1.2rem; border: 1px solid rgba(255, 255, 255, 0.60); border-radius: 0.8rem; } 
#footer .footer-top .btn-top i { color: #fff; font-size: 2.2rem; }
#footer .footer-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 14.45rem; }
#footer .footer-bottom .title strong { color: #FFF; font-size: 4.4rem; font-family: "KIMM"; font-weight: 700; font-style: normal; line-height: 130%; }
#footer .footer-bottom .util { margin-left: auto; }
#footer .footer-bottom .util ul { display: flex; gap: 14.45rem; }
#footer .footer-bottom .util ul li strong { display: block; margin-bottom: 1.2rem; color: #FFF; font-size: 1.8rem; font-weight: 600; font-style: normal; line-height: 140%; }
#footer .footer-bottom .util ul li p { margin-top: .8rem; color: #FFF; font-size: 1.6rem; font-weight: 500; font-style: normal; line-height: 140%; opacity: .6; }
#footer .footer-bottom .quick ul { display: flex; flex-direction: column; gap: 1.2rem; }
#footer .footer-bottom .quick ul li a { display: flex; align-items: center; gap: 1.2rem; }
#footer .footer-bottom .quick ul li a span { color: #FFF; font-size: 1.8rem; font-weight: 600; font-style: normal; line-height: 140%; }
#footer .footer-bottom .quick ul li a i { color: #FFF; font-size: 2rem; }
@media (max-width: 1024px) {
#footer .footer-bottom { gap: 3.8rem; }
#footer .footer-bottom .title strong { font-size: 3.8rem; line-height: 120%; }
#footer .footer-bottom .util ul { gap: 3.8rem; }
}
@media (max-width: 767px) {
#footer .footer-bottom { flex-direction: column; }
#footer .footer-bottom .title strong br { display: none; }
#footer .footer-bottom .util { margin-left: 0; }
#footer .footer-bottom .quick ul { flex-direction: row; gap: 4rem; }
}
@media (max-width: 640px) {
#footer .footer-bottom .title strong br { display: block; }
}