@charset "UTF-8";
/*-------------------------------------------------
title       : 레이아웃
Author      : ㅈㅁㅈ
Create date : 2020-11-25
-------------------------------------------------*/
.scrollFixed {overflow: hidden;}
#header { position: fixed; left: 0; top: 0; z-index: 2; width: 100%; height: 9rem; padding-left: 3rem; box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.16); background-color: #fff; text-align: center; line-height: 9rem; }

#header .search .control { overflow: hidden; position: absolute; right: 8rem; top: 0; z-index: 1; width: 8rem; height: 100%; text-align: center; transition: all 0.3s; }

#header .search .control::before {display: flex; flex-flow: row wrap; align-items: center; align-content: center;  justify-content: center; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; font-size: 2.5rem; content: ''; }

#header .search .close { visibility: hidden; z-index: -1; background-color: #354188; color: #fff; opacity: 0; }

#header .search .group { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; left: 0; top: 100%; z-index: 2; width: 100%; background-color: #354188; color: #ECF0F9; text-align: left; }

#header .search .group .form { width: 71rem; max-width: calc(100% - 4rem); margin-left: auto !important; margin-right: auto !important; position: relative; height: 5rem; padding: 0 4rem 1.5rem 0; border-bottom: 1px solid #697692; }
#header .search .group .form form {height: 100%;}
#header .search .group .form input[type="text"] { font-size: 1.8rem; width: 100%; height: 3.5rem; border: 0 none; background: none; color: #fff; vertical-align: top; transition: all 0.3s; }

#header .search .group .form input::-webkit-input-placeholder { color: #ECF0F9; transition: all 0.3s; }

#header .search .group .form input:-ms-input-placeholder { color: #ECF0F9; transition: all 0.3s; }

#header .search .group .form input::-ms-input-placeholder { color: #ECF0F9; transition: all 0.3s; }

#header .search .group .form input::placeholder { color: #ECF0F9; transition: all 0.3s; }

#header .search .group .form input:focus { outline: 0 none; }

#header .search .group .form input:focus::-webkit-input-placeholder { color: #fff; }

#header .search .group .form input:focus:-ms-input-placeholder { color: #fff; }

#header .search .group .form input:focus::-ms-input-placeholder { color: #fff; }

#header .search .group .form input:focus::placeholder { color: #fff; }

#header .search .group .form input:focus + button + div::before { width: 100%; }

#header .search .group .form button { overflow: hidden; position: absolute; right: 0; top: 0; width: 3.5rem; height: 3rem; text-align: center; vertical-align: top; }

#header .search .group .form button::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; font-size: 2.8rem; content: ''; }

#header .search .group .form div::before { position: absolute; left: 0; bottom: -1px; width: 4rem; height: 1px; background-color: #E10F21; content: ''; transition: all 0.3s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }

#header .search .group .item { width: 71rem; max-width: calc(100% - 4rem); margin-left: auto !important; margin-right: auto !important; position: relative; margin-top: 2.5rem; padding-left: 9rem; line-height: 1.5; }

#header .search .group .item strong { position: absolute; left: 0; top: 0; font-weight: 500; }

#header .search .group .item a { position: relative; margin-right: 1.5rem; white-space: nowrap; }

#header .search .group .item a::after { position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: #ECF0F9; content: ''; transition: all 0.3s; }

#header .search .group .item a:hover::after, #header .search .group .item a:focus::after { width: 100%; }

#header .search.active .close { visibility: visible; z-index: 1; opacity: 1; }

#header .search.active .open { visibility: hidden; z-index: -1; opacity: 0; }

#header .search.active .group { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; width: 100%; padding: 4rem 0 3rem; transition: all 0.3s; }

#logo a { position: absolute; top: 50%; left: auto;  transform: translateY(-50%); left: 8rem; z-index: 1; width: 26.9rem; transition: all 0.3s; }

#hnb { font-size: 2.2rem; position: absolute; right: 16rem; top: 0; z-index: 3; font-weight: 600; text-align: right; white-space: nowrap; }

#hnb li { display: inline; margin-left: 1.5rem; }

#hnb a { position: relative; display: inline-block; padding: 0 0.5rem; line-height: 3.5rem; vertical-align: middle; }

#hnb a::after { position: absolute; left: 0; bottom: 0; width: 0; height: 0.3rem; background-color: #333; content: ''; transition: all 0.3s; }

#hnb a:hover::after, #hnb a:focus::after { width: 100%; }

#hnb .active a::after { width: 100%; }

#gnb1 > ul > li { display: inline-block; margin: 0 4rem; vertical-align: top; }

#gnb1 > ul > li > a { font-size: 2rem; position: relative; z-index: 1; font-weight: 700; letter-spacing: -0.05rem; transition: all 0.3s; }

#gnb1 > ul > li > a::before { position: absolute; top: auto; left: 50%; transform: translateX(-50%); top: 0; width: 0; height: 0; margin-top: -1rem; border-radius: 100%; background-color: #E10F21; content: ''; transition: all 0.3s; }

#gnb1 > ul > li.active > a { color: #D9000D; }

#gnb1 > ul > li.active > a::before, #gnb1 > ul > li.active > a::before, #gnb1 > ul > li > a.active::before { width: 0.6rem; height: 0.6rem; }

#gnb1 > ul > li > a.active::before {background-color: #333;}

#gnb1 > ul > li > a.active:hover:before {background-color: #E10F21;}

#gnb1 > ul > li.active .submenu { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; width: 192rem; max-width: calc(100% - 4rem); margin-left: auto !important; margin-right: auto !important; padding: 4rem 0; }

#gnb1 > ul > li.active .desc::before { width: 8rem;  transform: skew(-35deg); transition: all 0.3s 0.1s; }

#gnb1 > ul > li.active .desc::after { width: 17rem;  transform: skew(-35deg); transition: all 0.3s; }

#gnb1 .submenu { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; top: auto; left: 50%; transform: translateX(-50%); width: 192rem; max-width: calc(100% - 4rem); margin-left: auto !important; margin-right: auto !important; display: inline-block !important; top: 100%; vertical-align: top; }

#gnb1 .submenu::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; top: auto; bottom: 0; height: 200%;  box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.16); background-color: #fff; }

#gnb1 .submenu::after { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; height: 1px; background-color: #ddd; }

#gnb1 .submenu > ul { width: 138rem; max-width: calc(100% - 45rem); margin-left: 3rem; transition: all 0.3s; }

#gnb1 .submenu > ul > li { min-height: 14.5rem; }

#gnb1 .submenu > ul > li::after { position: absolute; right: 0; top: 0; width: 1px; height: 100%; max-height: 26rem; background-color: #F1F1F1; content: ''; }

#gnb1 .submenu > ul > li.active a::before { background-color: #E10F21; }

#gnb1 .submenu > ul.sub01 > li, #gnb1 .submenu > ul.sub02 > li { min-height: 26rem; }

#gnb1 .desc { position: relative; z-index: 0; font-size: 1.8rem; line-height: 1.5; float: left; width: 47rem; height: 31rem; margin-left: -5rem; padding: 4.25rem 4rem 0 22rem; border-radius: 0 5rem 5rem 0; background: url("/main/img/layout/gnb1_bg.png") no-repeat 7.7rem center #262F68; color: #fff; text-align: left; transition: all 0.3s; }

#gnb1 .desc::before { position: absolute; left: 12rem; bottom: 0; width: 0; height: 7rem; background-color: #E10F21; content: ''; transform: skew(0); }

#gnb1 .desc::after { position: absolute; left: 16.5rem; bottom: -1.8rem; z-index: -1; width: 0; height: 14.5rem; background-color: #161B52; content: ''; transform: skew(0); }

#gnb1 .desc strong { font-size: 3.6rem; display: block; margin-bottom: 0.25rem; }

#gnb2::before { position: fixed; right: 20rem; bottom: 1.8rem; z-index: 4; width: 0; height: 7rem; background-color: #E10F21; content: ''; transform: skew(-34deg); }

#gnb2::after { position: fixed; right: 20rem; bottom: 0; z-index: 3; width: 0; height: 14.5rem; background-color: #161B52; content: ''; transform: skew(-34deg); }

#gnb2 .control { overflow: hidden; position: absolute; right: 0; top: 0; z-index: 3; width: 8rem; height: 100%; background-color: #E10F21; color: #fff; text-align: center; transition: all 0.3s; }

#gnb2 .control::before {display: flex; flex-flow: row wrap; align-items: center; align-content: center;  justify-content: center; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; font-size: 3rem; }

#gnb2 .open::before { content: ''; }

#gnb2 .close { visibility: hidden; z-index: -1; opacity: 0; }

#gnb2 .close::before { -webkit-transform: rotate(0); transform: rotate(0); transition: all 0.3s; }

#gnb2 .close:hover::before, #gnb2 .close:focus::before { -webkit-transform: rotate(180deg) translateY(2px); transform: rotate(180deg) translateY(2px); }

#gnb2 .close::before { content: ''; }

#gnb2 > .topmenu_all { display: none; }

#gnb2 .group { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: fixed; left: 0; top: 9rem; z-index: 2; width: 100%; max-height: calc(100% - 14rem);  box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.16); background-color: #fff; }

#gnb2 .group::before { position: fixed; left: 0; top: 0; width: 100%; height: 9.1rem; background-color: #fff; content: ''; }

#gnb2 .group::after { position: fixed; right: 17rem; bottom: 7.5rem; z-index: -1; width: 21.8rem; height: 24.244rem; background: url("/main/img/layout/gnb2_bg.png") no-repeat center center/cover; content: ''; }

#gnb2 .group .topmenu_all > li { width: 166.5rem; max-width: calc(100% - 4rem); margin-left: auto !important; margin-right: auto !important; position: relative; padding-left: 30rem; text-align: left; }

#gnb2 .group .topmenu_all > li::before { position: absolute; left: 30rem; top: 0; width: 1px; height: 100%; background-color: #262F68; content: ''; transition: all 0.3s; }

#gnb2 .group .topmenu_all > li > a { font-size: 2.8rem; position: absolute; left: 12.5rem; top: 0; font-weight: 600; color: #262F68; line-height: 1.2; }

#gnb2 .group .topmenu_all > li:hover::before { background-color: #E10F21; }

#gnb2 .group .submenu > ul { padding-left: 2rem; padding-bottom: 1.5rem; }

#gnb2 .group .submenu > ul > li:hover > a { color: #363081; }

#gnb2 .group .submenu > ul > li:hover > a::before { background-color: #E10F21; }

#gnb2 .group .submenu > ul li li a:hover, #gnb2 .group .submenu > ul li li a:focus { color: #262F68; }

#gnb1 .lnb7, #gnb1 .lnb8, #gnb2 .lnb7, #gnb2 .lnb8 { display: none; }

#gnb1 .submenu, #gnb2 .submenu { word-break: keep-all; }

#gnb1 .submenu > ul, #gnb2 .submenu > ul { margin-top: -2.5rem; display: inline-block; width: calc(100% + 0px); color: #555; }

#gnb1 .submenu > ul > *, #gnb2 .submenu > ul > * { clear: none; float: left; width: calc(16.66667% - 0px); margin: 2.5rem 0px 0 0; }

#gnb1 .submenu > ul > *:nth-child(2n + 1), #gnb2 .submenu > ul > *:nth-child(2n + 1) { clear: none; }

#gnb1 .submenu > ul > *:nth-child(3n + 1), #gnb2 .submenu > ul > *:nth-child(3n + 1) { clear: none; }

#gnb1 .submenu > ul > *:nth-child(4n + 1), #gnb2 .submenu > ul > *:nth-child(4n + 1) { clear: none; }

#gnb1 .submenu > ul > *:nth-child(5n + 1), #gnb2 .submenu > ul > *:nth-child(5n + 1) { clear: none; }

#gnb1 .submenu > ul > *:nth-child(6n + 1), #gnb2 .submenu > ul > *:nth-child(6n + 1) { clear: both; }

#gnb1 .submenu > ul > li, #gnb2 .submenu > ul > li { position: relative; padding: 0 1rem 0 3.5rem; text-align: left; line-height: 1.5; transition: all 0.3s; }

#gnb1 .submenu > ul > li > a, #gnb2 .submenu > ul > li > a { position: relative; padding-left: 0; text-align: left; font-size: 1.8rem; display: block; position: relative; margin-bottom: 1.5rem; font-weight: 500; color: #151515; }

#gnb1 .submenu > ul > li > a::before, #gnb2 .submenu > ul > li > a::before { position: absolute; left: 0; top: auto; content: ''; }

#gnb1 .submenu > ul > li > a::before, #gnb2 .submenu > ul > li > a::before { left: -1.3rem; top: 0.9rem; width: 0.5rem; height: 0.5rem; background-color: #F1F1F1; transition: all 0.3s; }

#gnb1 .submenu > ul > li li, #gnb2 .submenu > ul > li li { margin-top: 0.5rem; }

#gnb1 .submenu > ul > li li a, #gnb2 .submenu > ul > li li a { transition: all 0.3s; }

#gnb1 .submenu > ul > li li a:hover, #gnb1 .submenu > ul > li li a:focus, #gnb2 .submenu > ul > li li a:hover, #gnb2 .submenu > ul > li li a:focus { font-weight: 400; color: #151515; text-decoration: underline; }

#header.active { z-index: 2; }

#header.active #hnb { display: block; visibility: visible !important; right: calc(100% - 8rem); transform: translateX(100%); opacity: 1 !important; }

#header.active #gnb2::before { width: 8rem; transition: all 0.3s; }

#header.active #gnb2::after { right: 7rem; width: 17rem; transition: all 0.3s; }

#header.active #gnb2 .close { visibility: visible; z-index: 3; opacity: 1; }

#header.active #gnb2 .open { visibility: hidden; z-index: -1; opacity: 0; }

#header.active #gnb2 .group { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; overflow-y: auto; width: 100%; padding: 1rem 0 4rem;  transition: opacity 0.2s; }

#main { padding-top: 9rem; }

#footer { position: relative; padding: 6rem 0 4.5rem; background: url("/main/img/layout/footer.png") no-repeat center bottom #0A274A; color: #EBEBEB; }

.footer_wrap { width: 142rem; max-width: calc(100% - 4rem); margin-left: auto !important; margin-right: auto !important; }

#fnb { position: relative; }

.fnb1 { overflow: hidden; overflow-x: auto; padding-bottom: 1.5rem; white-space: nowrap; }
.fnb1 .group { display: inline-block; position: relative; margin-right: 4rem; padding-top: 2.5rem; vertical-align: top; }
.fnb1 .group a { position: relative; clear: both; float: left; margin-top: 1rem; color: #fff; }
.fnb1 .group a::after { position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: #fff; content: ''; transition: all 0.3s; }
.fnb1 .group a:hover::after, .fnb1 .group a:focus::after { width: 100%; }
.fnb1 .group a:focus {outline: 0;}
.fnb1 .group span a { color: #8CD9FE; }
.fnb1 .group span a::after { background-color: #8CD9FE; }

.fnb1 .group1::before { position: absolute; left: 0; top: 0; width: 2.5rem; height: 1rem; background-color: #00A1ED; content: ''; }

.fnb2 { position: absolute; right: 0; top: 0; }
.fnb2 li { display: inline-block; margin-left: .6rem; }
.fnb2 li:nth-child(1) a:hover, .fnb2 li:nth-child(1) a:focus { border-color: #11539E; background-color: #11539E; color: #fff; }
.fnb2 li:nth-child(2) a:hover, .fnb2 li:nth-child(2) a:focus { border-color: #D41279; background-color: #D41279; color: #fff; }
.fnb2 li:nth-child(3) a:hover, .fnb2 li:nth-child(3) a:focus { border-color: #D9000D; background-color: #D9000D; color: #fff; }
.fnb2 li:nth-child(4) a:hover, .fnb2 li:nth-child(4) a:focus { border-color: #389E0D; background-color: #389E0D; color: #fff; }
.fnb2 a {display: block; width: 4.8rem; height: 4.8rem; padding: 0 1.25rem; border-radius: 100%; background-color: #C7C9CB; color: #0B223E; text-align: center; line-height: 4.8rem; vertical-align: top; transition: all 0.3s; overflow: hidden; }
.fnb2 a::before { display: block; width: 100%; height: 200%; font-family: "xeicon"; text-align: center; line-height: inherit; font-size: 2rem;  transition: all 0.3s; }
.fnb2 a:hover::before, .fnb2 a:focus::before { transform: translateY(-50%); }
.fnb2 .facebook a::before { content: " "; }
.fnb2 .instagram a::before { content: " "; }
.fnb2 .youtube a::before { content: " "; }
.fnb2 .blog a::before { content: "b b"; }
.fnb2 .blog a::before { font-family: Roboto; font-weight: 800; }

#siteinfo { position: relative; margin-top: 8rem; }

#siteinfo .logo { position: absolute; right: 0; top: 0; width: 22.376rem; }

#siteinfo address { display: inline; margin-right: 1rem; }

#siteinfo span { display: inline-block; margin-right: 1rem; vertical-align: middle; }

#siteinfo .webwatch { position: absolute; left: auto; top: auto; margin-left: 1rem; }

.btn_top { display: none; overflow: hidden; position: absolute; right: 0; top: -2.75rem; width: 5.5rem; height: 5.5rem; background-color: #151515; color: #fff; text-align: center; line-height: 5.5rem; }

.btn_top::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; content: ''; }

[id*="layerPopup"] .form_check input:focus + label::before { outline: 1px dotted yellow; }