@charset "UTF-8";
/*-------------------------------------------------
title       : 레이아웃
Author      : ㅈㅁㅈ
Create date : 2021-06-02
-------------------------------------------------*/
#wrap { overflow: hidden; position: relative; width: 300rem; max-width: 100%; margin: 0 auto; letter-spacing: -0.05rem; }

#issue, .topbanner, #gnb2, #quick, .footbanner { display: none; }

#header { position: absolute; left: 0; top: 0; z-index: 4; width: 100%; height: 12.5rem; transition: all 0s; }

#header::after { position: absolute; left: 0; top: 100%; z-index: -2; width: 100%; height: 0; background-color: #000; content: ''; opacity: 0; transition: opacity 0.2s; }

#header .search .control { font-size: 2.4rem; overflow: hidden; position: absolute; top: 4rem; right: -3rem; width: 8.5rem; height: 8.5rem; color: #fff; text-align: center; line-height: 8.5rem; }

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

#header .search .control.close { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; overflow: hidden !important; top: -8.5rem; background-color: #2E2E2E; }

#header .search .control.close::before { transform: rotate(0); transition: all 0.2s; }

#header .search .control.close:hover::before, #header .search .control.close:focus::before { transform: rotate(180deg) translateY(2px); }

#header .search .control.close::before { content: ''; }

#header .search .group { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; left: 0; top: 12.5rem; z-index: 20; width: 100%; }

#header .search .group::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; background-color: #2E2E2E; }

#header .search .form { position: relative; z-index: 0; width: 60rem; max-width: calc(100% - 6rem); margin-left: auto !important; margin-right: auto !important; max-width: 100%; }

#header .search .form #search { font-size: 1.9rem; width: 100%; padding-bottom: 1.5rem; outline: 0 none; border: 0 none; border-bottom: 0.4rem solid #fff; background: none; color: #fff; }

#header .search .form .search_keyword::placeholder {color:#ccc;}

#header .search .form label { display: none; }

#header .search .form button { font-size: 2.4rem; overflow: hidden; position: absolute; right: 0; top: 0; width: 3rem; height: 3rem; color: #fff; text-align: right; }

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

#header .search .keyword { width: 60rem; max-width: calc(100% - 6rem); margin-left: auto !important; margin-right: auto !important; max-width: 100%; margin-top: 2rem; color: #fff; text-align: center; }

#header .search .keyword strong { font-size: 2.1rem; display: inline-block; width: 6rem; height: 3rem; margin-right: 1.5rem; border-radius: 3rem; background: linear-gradient(to right, #FF4600, #FF9700); font-family: "xeicon"; font-weight: 900; text-align: center; line-height: 3rem; vertical-align: middle; }

#header .search .keyword a { display: inline-block; vertical-align: middle; }

#header .search .keyword a + a::before { display: inline-block; position: relative; top: -0.1rem; width: 1px; height: 2rem; margin: 0 1rem; border-left: 1px dashed #fff; content: ''; vertical-align: middle; opacity: 0.4; }

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

#header .search.active .open { display: none; }

#header .search.active .close { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; width: 8.5rem; height: 8.5rem; transition: opacity 0.2s; }

.header_wrap { width: 140rem; max-width: calc(100% - 6rem); margin-left: auto !important; margin-right: auto !important; position: relative; max-width: calc(100% - 4rem); height: 100%; }

#logo a { overflow: hidden; position: absolute; left: 0; top: 6.5rem; z-index: 1; width: 28.5rem; height: 3.5rem; line-height: 0; }

#logo a img { display: block; transition: all 0.2s; height:100%;}

#logo a::after { display: block; width: 100%; height: 100%; background: url("/main/img/layout/logo_m.png") no-repeat center center/cover; content: ''; }

#hnb { position: relative; z-index: 0; font-size: 1.5rem; height: 4rem; margin-bottom: 2.5rem; color: #fff; line-height: 4rem; opacity: 0.81; }

#hnb::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; top: auto; bottom: 0; height: 1px; background-color: #fff; opacity: 0.3; transition: all 0s; }

#hnb .hnb1 { float: left; }

#hnb .hnb1 li + li::before { display: inline-block; position: relative; top: -1px; width: 1px; height: 1.2rem; margin: 0 1.5rem; background-color: #fff; vertical-align: middle; opacity: 0.3; content: ''; }

#hnb .hnb1 span { font-weight: 400; color: #F7BA46; }

#hnb .hnb2 { float: right; text-transform: uppercase; }

#hnb .hnb2 li { margin-left: 3rem; }

#hnb .hnb2 li::before { display: inline-block; position: relative; top: 1px; font-family: "xeicon"; vertical-align: top; margin-right: 0.5rem; }

#hnb .hnb2 li.child::before {font-family:'remixicon'; content:"\efb1"}

#hnb .hnb2 li.lang::before { content: ""; }

#hnb .hnb2 li.sitemap::before { content: ""; }

#hnb li { display: inline; }

#gnb1 { float: right; padding-right: 13rem;}

#gnb1 > ul > li { display: inline; margin-left: 4.5rem; }

#gnb1 > ul > li > a { font-size: 1.9rem; display: inline-block; position: relative; font-weight: 400; color: #fff; line-height: 3.5rem; vertical-align: top; transition: all 0.2s;}

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

#gnb1 > ul > li.active > a { font-weight: 600; color: #1A2273 !important; }

#gnb1 > ul > li.active > a::before { width: calc(100% + 4rem); }

#gnb1 > ul > li.active .submenu { background-color: #2C3167; opacity:1; visibility:visible;}

#gnb1 > ul > li.active .submenu strong, #gnb1 > ul > li.active .submenu li { color: #fff; }

#gnb1 .submenu { display: flex !important; visibility: hidden; position: absolute; top: 100%; left:0 !important; z-index: -1; width: 100%; border-right: 1px solid #E3E3E3; opacity: 0; transition: all 0s 0s; }

#gnb1 .submenu > ul { padding: 6rem 0 6rem 4rem; flex-grow:1; flex-wrap:wrap; gap:2rem; display:flex; position:relative;}

#gnb1 .submenu > ul::before {display:block; content:""; width:100vw; height:100%; background:#fff; position:absolute; left:50%; top:0; transform: translateX(-50%); z-index:-1}

#gnb1 .submenu > ul > li { font-size: 1.6rem; margin-bottom: 0.5rem; color: #4B4B4B; width:calc(100% / 4 - 2rem * 3 / 4);}

#gnb1 .submenu > ul > li > a {word-break:keep-all; display:flex;align-items:center; min-height:6.6rem; line-height: 1.3; width:100%; padding:1rem 2rem; gap:1rem; justify-content:space-between; border:1px solid #E3E3E3; color:#333; font-size:1.7rem;}

#gnb1 .submenu > ul > li:has(.submenuDepth) > a::after { display: block; position: absolute; font-family: "xeicon"; content: '\e941'; transition: all 0.2s; position:relative; font-size:1.7rem;}

#gnb1 .submenu .submenuDepth {word-break:keep-all; display:flex; flex-direction:column; gap : .5rem; padding: 2rem 1.5rem; }

#gnb1 .submenu .submenuDepth a {padding-left:1.6rem; display:block; font-size:1.7rem; color:#333; position:relative;}

#gnb1 .submenu .submenuDepth a::before {display:block; content:""; width:.6rem; height:.6rem; background:#D9D9D9; position:absolute; top:1.2rem; left:0; border-radius:50%;}

#gnb1 .submenu .submenuDepth a:hover, #gnb1 .submenu .submenuDepth a::before {color:#253D8D; text-decoration:underline; text-underline-position:under; text-decoration-thickness : 1px;}

#gnb1 .submenu .submenuDepth a:hover::before, #gnb1 .submenu .submenuDepth a:focus::before {background:#253D8D;}

#gnb1 .submenu > ul > li:has(.submenuDepth) > a.active::after {	transform:rotate(180deg)}

/*
#gnb1 .submenu > ul > li > a.active + .submenuDepth {display:flex;}
*/
#gnb1 .submenu > ul > li > a.active {background:#253D8D; color:#fff; border-color: #253D8D}

#gnb1 .submenu .title {padding: 6rem 0; color: #0F0F0F; width:36rem; flex-shrink:0; position:relative; color:#fff;}

#gnb1 .submenu .title strong {position: relative; display:flex; flex-direction:column; font-size: 2.8rem; display: block;  margin-bottom:2rem;}

#gnb1 .submenu .title strong::after {display:block; content:""; width:3.5rem; height:.5rem; background:#FF8200; margin-top:1.9rem}

#gnb1 .submenu .title p {position: relative; font-size:1.7rem;}

#gnb1 .submenu .title::before {	display:block; content:""; width:40vw; top:0; right:0; height:100%; 
background:#2C3167 url(/main/img/layout/submenu-background.jpg)no-repeat right 0 bottom 0 / cover; position:absolute; z-index:0;}

#header.active { background-color: #fff; transition: all 0.2s;}

#header.active::before {opacity:1; visibility:visible;}

#header.active::after { height: 10000%; opacity: 0.3; }

#header.active #gnb1 > ul > li.active .submenu::before {z-index:1; display:block; content:""; width:100vw; height:12.5rem; box-shadow:0 .3rem .4rem rgba(0,0,0,0.1); position:absolute;bottom:100%; left:50%; transform:translateX(-50%);}

#header.active #logo a img { margin-top: -3.5rem; }

#header.active .search .open { color: #2E2E2E; }

#header.active #hnb { color: #6F6F6F; }

#header.active #hnb::before { height: 100%; background-color: #EAEAEA; transition: all 0.2s; }

#header.active #hnb .hnb1 li + li::before { background-color: #A2A2A2; }

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

.time_m { display: none; }

#footer { position: relative; z-index: 0; z-index: 3; padding: 6rem 0 7rem; background-color: #fff; }

#footer .footer_wrap { width: 140rem; max-width: calc(100% - 6rem); margin-left: auto !important; margin-right: auto !important; position: relative; padding-left: 19.5rem; }

#footer .logo { position: absolute; left: 0; top: 0; }

#footer .related { font-size: 1.5rem; position: absolute; right: 0; top: 5rem; z-index: 1; }

#footer .related a { display: block; padding: 0 2rem; }

#footer .related .group { width: 20rem; }

#footer .related .label { height: 5.5rem; border: 1px solid #BEBEBE; line-height: 5.3rem; position: relative; z-index: 1; background-color: #fff; color: rgba(0, 0, 0, 0.7); }

#footer .related .label::after { position: absolute; top: auto; left: auto; right: auto; font-family: "xeicon"; font-size: 2.2rem; right: 2rem; color: #000; content: ''; opacity: 0.3; transition: all 0.2s; }

#footer .related .list { visibility: hidden; overflow: hidden; position: absolute; left: 0; bottom: 0; width: 100%; margin-bottom: 1px; border: 1px solid #bebebe; background-color: #fff; height: 0; line-height: 3rem; transition: all 0.2s; }

#footer .related .list a { transition: all 0.2s; }

#footer .related .list a:hover, #footer .related .list a:focus { background-color: #f8f8f8; }

#footer .related .active .label::after { transform: rotate(180deg); }

#footer .related .active .list { visibility: visible; bottom: 100%; height: auto; padding: 1rem 0; }

#fnb .fnb1 { margin-bottom: 3rem; }

#fnb .fnb1 li { display: inline; color: #434343; }

#fnb .fnb1 li + li::before { display: inline-block; width: 1px; height: 1.7rem; margin: 0 2rem; background-color: #BFBFBF; vertical-align: middle; content: ''; }

#fnb .fnb1 span { color: #e84400; font-weight:400}

#fnb .fnb1 a { display: inline-block; position: relative; vertical-align: middle; }

#fnb .fnb1 a::before { position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: #434343; content: ''; transition: all 0.2s; }

#fnb .fnb1 a:hover::before, #fnb .fnb1 a:focus::before { width: 100%; }

#fnb .fnb2 { position: absolute; right: 0; top: 0; width: 20rem; text-align: center; }

#fnb .fnb2 a { display: inline-block; overflow: hidden; width: 3.5rem; height: 3.5rem; border-radius: 100%; background-color: #1DC321; color: #fff; text-align: center; line-height: 3.5rem; vertical-align: top; }

#fnb .fnb2 li { display: inline; margin-top: 0.5rem; }

#fnb .fnb2 li.facebook a { background-color: #4267B2; }

#fnb .fnb2 li.facebook a::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; font-size: 2rem; position: relative; top: 0.2rem; content: ""; }

#fnb .fnb2 li.youtube a { background-color: #CD201E; }

#fnb .fnb2 li.youtube a::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; font-size: 2rem; position: relative; top: 0.2rem; content: ""; }

#fnb .fnb2 li.blog a::before { font-size: 2rem; display: block; position: relative; top: -0.1rem; font-weight: 600; content: 'b'; }

#fnb .fnb2 li.post a::before { display: block; position: relative; top: 0.85rem; width: 1.3rem; height: 2.2rem; margin: 0 auto; background: url("/main/img/layout/sns_post.png") no-repeat center center/cover; content: ''; }

#siteinfo { display: flex; flex-wrap: wrap; align-items: center; color: rgba(57, 57, 57, 0.6); }

#siteinfo span { display: block; width: 100% }
/* #siteinfo span + span { margin-left: 8rem; } */

#siteinfo .copyright { margin-top: 0.5rem; text-transform: uppercase; }

.footer_wrap .wa_mark { padding-left: 5rem; }
.footer_wrap .wa_mark img { width: 15rem; object-fit: contain; }