@import url('https://use.fontawesome.com/releases/v5.15.2/css/all.css');
@import url('https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css');
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
@charset "utf-8";

@font-face {
    font-family: 'BCcardB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.1/BCcardB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* Reset CSS  */
html { height: 100%; overflow-y:scroll; }
body { font-size: 13px; color:#333; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, p { margin: 0px; padding:0px;  list-style:none; font-family: "Pretendard", "noto-sans-cjk-kr", sans-serif; }
fieldset{ border: 0px; }
a{font-style:normal; text-decoration:none; color:#000;}
hr, legend {height: 0; left: -5000px; line-height: 0; overflow-x: hidden; overflow-y: hidden; position: absolute; visibility: hidden;width: 0;}
caption {font-size: 0; height: 0; line-height: 0; visibility: hidden; width: 0;}
* {-webkit-text-size-adjust:none;}
* { margin:0; padding:0; border:0; outline:0;  }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
img, video { max-width:100%; border:0; height:auto; vertical-align:top; }
table { border-collapse:collapse; border-spacing:0; border: 0px solid #E5E5E5; }
input, select { vertical-align:middle; }
label { cursor:pointer; }
legend,hr,caption { display:block; overflow:hidden; position:absolute; top:0; left:-1000em; }
i,em,address { font-style:normal; font-weight:normal; }
td,th {vertical-align: middle;line-height: 1.6;}
td strong {font-weight: 100;	font-size: 5px;vertical-align: bottom;}
a:hover{text-decoration:none;}

/*bbs*/
#container_title{display:none;}
#bo_v_table{display:none;}
#bo_vc_w{border-bottom:0;}
#bo_vc{background:none;}

#bo_gall , #bo_w , #bo_v , #bo_list{font-size:15px;}
#bo_v_share .btn{width: auto !important;}

/* 지연 common*/
ul, ol, li { list-style: none; }
a { text-decoration: none; color: inherit; }
img { vertical-align: top; }
table { border-collapse: collapse; border-spacing: 0; }
button { border: none; background: transparent; font-family: inherit; font-size: inherit; cursor: pointer; }
button:active { outline: none; }
button:focus { outline: none; }
.clearfix::after { content: ""; display: block; clear: both; }
.blind { overflow: hidden; position: absolute; clip: rect(0, 0, 0, 0); width: 1px; height: 1px; margin: -1px; }
.inner_wrap { position: relative; width: 100%; max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 50px; }







/***************************** H E A D E R *********************************/
#header{ position: fixed; z-index: 999; top:0; left:0; width: 100%; height:90px; padding: 0 50px; background: #fff;  }
.bg { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }

#header .inner_wrap { display: flex; justify-content: space-between; align-items: center; max-width: inherit; padding: 0; }
#header .inner_wrap .wrap { display: flex; align-items: center; gap: 20px; }

#h_logo a { display: block; width: 100%; height: 100%; }
#h_logo a img { height: 40px; object-fit: contain; }

#h_gnb { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1180px; }
#h_gnb > li {position: relative; width: 10vw; text-align: center;}
#h_gnb > li > a {font-size: 20px; color:#333; font-weight:500; display: block; line-height: 90px; }
#h_gnb > li:hover > a { color: #1c4a86; transition: all 0.3s; font-weight: bold; }
#h_gnb > li:last-of-type { display: none; }
#h_gnb .sub { overflow: hidden; position: absolute; width: 100%; height: 0; background: #fff; transition: all 0.3s; }
#h_gnb .sub li { width: 100%; }
#h_gnb .sub li a { display: block; width: 100%; height: 100%; color: #777; font-size: 16px; text-align: center; line-height: 40px; }
#h_gnb .sub li:hover  a { color: #1c4a86; transition: all 0.3s; font-weight: bold; }
#header::after { content: ""; display: block; position: absolute; left: 0; width: 100%; height: 0; background: #fff; z-index: -1; transition: all 0.3s; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); }
#header:hover::after { height: 270px; transition: height 0.3s; }
#header:hover .sub { height: 270px; transition: height 0.3s; }


#nav_btn{ display: none; cursor: pointer; width: 30px; height: 23px; background: url("../img/ico_hamburger.png"); }
#notice { display: block; cursor: pointer; width: 29px; height: 35px; background: url("../img/ico_notice.png"); }

#sitemap{position: fixed; top:0; right:-100%; width: 50%; height: 100vh; background: rgba(255,255,255,0.96); padding:15vh 50px 0; box-shadow: -2px 1px 8px #46464640; z-index: 999;}
#sitemap .close{cursor: pointer; position: absolute; top: 55px; right:30px;}
#sitemap .close span{display: block; width: 40px; height: 2px; background: #000;}
#sitemap .close .line01{transform: rotate(45deg);}
#sitemap .close .line02{transform: rotate(-45deg); margin-top: -2px;}
#sitemap .lang{margin-bottom:10px; display: inline-block; border:1px solid #777; border-radius: 30px; padding:5px 20px;}
#sitemap .lang li{float: left;}
#sitemap .lang li a{display: block; font-size: 16px; color:#aaa;}
#sitemap .lang li:first-child a:after{content:"ㅣ"; padding:0 2px;}
#sitemap .lang li a.on, #sitemap .lang li:hover a{color:#000;}
#sitemap .gnb{height: 80vh; overflow-y: auto;}
#sitemap .gnb > li{margin-bottom:30px;}
#sitemap .gnb > li > a{font-size:26px; font-weight: 500; letter-spacing: -1px; border-bottom:1px solid #ddd; display: block; padding-bottom:10px; margin-bottom:10px;}
#sitemap .gnb > li:hover > a{color:#2e5399;}
#sitemap .gnb .lnb li a{font-size: 16px; transition: .5s; display: block; padding:3px 0; color: #999; }
#sitemap .gnb .lnb li:hover a{margin-left:10px; color:#000;}





/***************************** I N D E X *********************************/

#my_wrapper section { position: relative; width: 100%; }
#my_wrapper h2 { font-size: 60px; color: #1c4a86; font-weight: bold; line-height: 1; font-family: "lato"; }

/* visual */
#m_slider { height: 100vh; background: url("../img/img_visual_01.png") no-repeat center center /cover; filter: brightness(0.95); }
#m_slider .info { display: flex; flex-direction: column; justify-content: center; width: 50%; height: 100vh; padding: 0 50px; background: linear-gradient(90deg, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 100%);  }
#m_slider .info p { line-height: 1; font-weight: 500; font-family: 'BCcardB'; }
#m_slider .info .title { margin-bottom: 30px; font-size: 100px; color: #333; }
#m_slider .info .sub { margin-bottom: 10px; font-size: 54px; color: #002f7b;}
#m_slider .info .desc { font-size: 32px; font-weight: 400; line-height: 1.25; color: #444; }

/* business area */
#my_wrapper .area { padding: 150px 50px; background: #f5f5f5; }
#my_wrapper .area h2 { margin-bottom: 100px; text-align: center; }
#my_wrapper .area ul { display: flex; justify-content: center; gap: 1vw; }
#my_wrapper .area ul li { overflow: hidden; position: relative; width: 100%; height: 100%; }
#my_wrapper .area ul li a { height: 500px; background: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; }
#my_wrapper .area ul li:nth-of-type(1) a { background: url("../img/img_index_01.png") no-repeat center center /cover; }
#my_wrapper .area ul li:nth-of-type(2) a { background: url("../img/img_index_02.png") no-repeat center center /cover; }
#my_wrapper .area ul li:nth-of-type(3) a { background: url("../img/img_index_03.png") no-repeat center center /cover; }
#my_wrapper .area ul li:nth-of-type(4) a { background: url("../img/img_index_05.png") no-repeat center center /cover; }
#my_wrapper .area ul li p { position: absolute; right: 0; bottom: 0; min-width: 150px; color: #ffffff; font-size: 20px; font-weight: 600; z-index: 10; padding: 10px 10px 10px 30px; background: rgba(0, 0, 0, 0.6); border-top-left-radius: 50px; letter-spacing: 2px; text-align: center; }

/* recruit */
#my_wrapper .recruit { height: 400px; background: url("../img/img_index_04.png") no-repeat center center /cover; }
#my_wrapper .recruit h2 { margin-bottom: 30px; }
#my_wrapper .recruit p { margin-bottom: 30px; font-weight: 500; font-size: 20px; color: rgba(51, 51, 51, 0.7); word-break: keep-all; }
#my_wrapper .recruit a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 65px; font-size: 20px; font-weight: 500; color: rgba(90, 90, 90, 0.9); transition: all 0.3s; }
#my_wrapper .recruit a span { display: block; width: 14px; height: 10px; background: url("../img/ico_arrow.png"); transform: rotate(180deg); }
#my_wrapper .recruit a:hover { color: #1c4a86; }
#my_wrapper .recruit a:hover span { background: url("../img/ico_arrow2.png"); }
#my_wrapper .recruit .info { position: absolute; right: 6.2vw; top: 50%; width: 500px; height: 500px; border-radius: 100%; text-align: right; background: rgba(255, 255, 255, 0.8); padding: 160px 135px 0 0; transform: translate(0, -50%); }





/***************************** S U B  *********************************/

#s_top{ position: relative; height: 500px; }
#s_top::after { content: ""; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }
#s_top.bg01{background: url(../img/sub_top01.png) no-repeat center center / cover;}
#s_top.bg02{background: url(../img/sub_top02.png) no-repeat center center / cover;}
#s_top.bg03{background: url(../img/sub_top04.png) no-repeat center center / cover;}
#s_top.bg04{background: url(../img/sub_top05.png) no-repeat center center / cover;}
#s_top.bg05{background: url(../img/sub_top03.png) no-repeat center center / cover;}
#s_top > h2{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 50px; font-weight:500; letter-spacing: -1px; color:#fff; text-transform: uppercase;}

#path {position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0.6); }
#path .home_ico {display: block; width: 23px; height: 20px; background: url("../img/ico_home.png");}
#path .home { padding: 20px;}
#path .main { width: 30%; padding: 0 30px; }
#path .sub { width: 30%; padding: 0 30px; }
#path .inner_wrap { display: flex; height: 60px; justify-content: center; }
#path .sbm{ position: relative; color: #fff; }
#path .sbm::after { content: ""; display: block; position: absolute; right: -1px; top: 50%; width: 1px; height: 50%; background: #fff; transform: translate(0, -50%); opacity: 0.5; }
#path .sbm::before { content: ""; display: block; position: absolute; right: 20px; top: 50%; width: 14px; height: 8px; background: url("../img/ico_down.png"); transform: translate(0, -50%); }
#path .home::before { display: none; }
#path .sbm h2{ position: relative; line-height: 60px; font-size:16px; font-weight:300; cursor: pointer;}
#path .lnb{display: none; position: absolute; top:60px; left:-1px; width:100%; background: #fff;border:1px solid #ddd; z-index: 99; padding:10px 0;}
#path .lnb li a{display: block; color: #ccc; font-size:16px; padding:5px 24px;}
#path .lnb li a:hover{color: rgba(0, 47, 123, 1); font-weight: 500;}

#sub .inner_wrap { padding: 150px 50px; }
#sub h2 { position: relative; margin-bottom: 100px; padding-left: 87px; font-size: 40px; font-weight: 600; line-height: 1; color: #333; }
/* #sub h2::after { content: ""; display: block; position: absolute; left: 60px; bottom: -10px; width: 330px; height: 2px; background: rgba(0, 47, 123, 1); border-radius: 100px; } */
#sub h2::before { content: ""; display: block; position: absolute; left: 0; bottom: -4px; width: 60px; height: 46px; background: url("../img/simbol.png")no-repeat center center /cover; opacity: 0.6; }
#sub .style_01 { font-size: 18px; line-height: 1.5; color: #333; word-break: keep-all; }
#element { pointer-events: none; }

#sub0101 .inner_wrap { display: flex; align-items: center; justify-content: center; gap: 4vw; max-width: 1500px; }
#sub0101 .inner_wrap > .info { width: 40%; }
#sub0101 .inner_wrap > img { width: 38%; border-radius: 30px; }
#sub0101 h2 { margin-bottom: 50px; }
#sub0101 .info .rt { position: relative; text-align: right; }
#sub0101 .m { display: none; }

#sub0102 h2.mn { margin-bottom: 0; }
#sub0102 .table { position: relative; margin-bottom: 100px; padding-bottom: 50px; }
#sub0102 table { width: 65%; }
#sub0102 table tr th { color: #002f7b; font-weight: bold; font-size: 18px; }
#sub0102 table tr > * { font-size: 16px; line-height: 40px; padding: 0 20px;}
#sub0102 table tr div { display: inline-flex; justify-content: space-between; width: 100%; max-width: 145px; margin: 0 auto; }
#sub0102 table tr td { word-break: keep-all; }
#sub0102 table tr td:last-of-type { padding: 0 20px; letter-spacing: 2px; }
#sub0102 table tr .letter { width: 100%; margin: 0; color: #002f7b; font-weight: bold; }
#sub0102 table tr .rt { text-align: right; padding: 0 0 0 20px; }

#sub0102 .direction { position: relative; width: 100%; }
#sub0102 .direction ul { display: flex; justify-content: center; width: 100%; gap: 20px; margin-bottom: 50px; }
#sub0102 .direction ul li { width: 48%; padding: 50px 0; text-align: center; background: rgba(255, 255, 255, 0.8); box-shadow:0 0 2px rgba(0, 0, 0, 0.1); border-radius: 30px; }
#sub0102 .direction ul li .img_box { height: 55px; margin-bottom: 20px; display: flex; justify-content: center; align-items: center;}
#sub0102 .direction ul li p.title { margin-bottom: 20px; color: rgba(0, 47, 123, 1); font-size: 24px; font-weight: 600; line-height: 1; }
#sub0102 .direction ul li p.desc { margin-bottom: 20px; color: #5a5a5a; font-size: 16px; line-height: 1.25; padding: 0 20px; }

#sub0102 .direction .zoom { display: flex; justify-content: center; gap: 10px;  margin-top: 5px; }
#sub0102 .direction button { background: #333; color: #fff; padding: 10px 20px; border-radius: 5px; font-size: 14px; transition: all 0.3s; }
#sub0102 .direction button span { color: #48ac45; font-weight: bold; }
#sub0102 .direction button span.on { color: #00b2ed; }
#sub0102 .direction button:hover { background: #002f7b; color: #fff; }

#sub0103 .flex_box { display: flex; gap: 2vw; align-items: center; }
#sub0103 .inner_wrap > div { margin-bottom: 150px; }
#sub0103 h3 { position: relative; padding-left: 20px; margin-bottom: 100px; font-size: 30px; }
#sub0103 h3::after { content: ""; display: block; position: absolute; left: 0; top: 3px; width: 8px; height: 30px; background: #002f7b; }
#sub0103 .title { margin-bottom: 20px; font-size: 20px; line-height: 1; font-weight: 700; word-break: keep-all; }
#sub0103 .desc { width: 75%; font-size: 18px; line-height: 1.5; word-break: keep-all; }
#sub0103 .sub { margin-bottom: 10px; font-size: 14px; line-height: 1; color: #aaa; }
#sub0103 .box_01 li > div { margin-bottom: 50px; }
#sub0103 .box_01 li:first-of-type img { margin-bottom: 20px; }
#sub0103 .box_03 ul { display: flex; flex-wrap: wrap; gap: 2vw; }
#sub0103 .box_03 ul li { width: calc(100% / 3);}
#sub0103 .box_03 ul li img { height: 100%; max-height: 50px; object-fit: contain; }
#sub0103 .box_04 { margin-bottom: 0 !important; }
#sub0103 .box_04 ul li.flex_box { justify-content: center;flex-direction: column; }
#sub0103 .box_04 ul li.flex_box img:nth-of-type(1) { width: 50%; }

#sub0303 .box_01 h3 { position: relative; padding-left: 20px; margin-bottom: 50px; font-size: 30px; }
#sub0303 .box_01 h3::after { content: ""; display: block; position: absolute; left: 0; top: 3px; width: 8px; height: 30px; background: #002f7b; }
#sub0303 .flex_box { display: flex; gap: 2vw; align-items: center; margin-bottom: 50px; }
#sub0303 .flex_box:first-of-type { margin-bottom: 100px; }
#sub0303 .flex_box p { font-size: 16px; line-height: 1.5; color: #666; word-break: keep-all; }
#sub0303 .flex_box .title { margin-bottom: 10px; font-size: 20px; font-weight: 700; }
#sub0303 .img_box { display: block; width: 150px; height: 150px; padding: 40px; border-radius: 100%; background: #f5f5f5; }


#style_h3 { line-height: 1.5; margin-bottom: 100px; font-size: 28px; text-align: center; word-break: keep-all; }
#sub04 h3 span { color: #002f7b; }
#sub04 ul { display: flex; gap: 20px; align-items: center; }
#sub04 ul li { display: flex; flex-direction: column; width: 25%; padding: 35px; border: 1px solid #eee; border-radius: 30px; }
#sub04 ul li p { text-align: center; font-size: 16px; word-break: keep-all; }
#sub04 ul li .title { font-size: 30px; font-weight: bold; line-height: 1; margin-bottom: 10px; }
#sub04 ul li .sub { margin-bottom: 20px; color: #00b2ed; }
#sub04 ul li .desc { margin-bottom: 50px; }
#sub04 ul li img { height: 100px; object-fit: contain; }

/***************************** F O O T E R *********************************/
#footer { position: relative; width: 100%; padding: 50px 0; background: #f5f5f5; }
#footer .inner_wrap { display: flex; gap: 30px; justify-content: center; }
#footer h2 img { height: 90px; filter:grayscale(100%); }
#footer .flex_box { display: flex; align-items: end; gap: 20px; margin-bottom: 10px; }
#footer .flex_box img { height: 20px; }
#footer .flex_box p { color: #48ac45; font-size: 14px; }

#footer address{ line-height: 1.25; font-size: 14px; color: rgba(0, 0, 0, 0.5); word-break: keep-all; }
#footer .info{ margin-bottom:10px; line-height: 1.25; font-size: 16px; color: rgba(0, 0, 0, 0.5); word-break: keep-all; }
#footer .copy{color: rgba(0, 0, 0, 0.3);}