@charset "euc-kr";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

/* 공통 */
html,body { font-family: 'Noto Sans KR', sans-serif; }
select { -webkit-appearance: none; cursor: pointer; -moz-appearance: none; appearance: none; filter: alpha(opacity=0); }
select::-ms-expand { display:none; }
select { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: url(../images/sub/down_icon.png) no-repeat 95% 50%; }
.flex { display: flex; align-items: center; }
.flex_start { display: flex; align-items: flex-start; }
.between { justify-content: space-between; }
.none { display: none; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt40 { margin-top: 40px; }
.pt20 { padding-top: 20px; }
.pb0 { padding-bottom: 0 !important; }
.wrap { width: 1200px; margin: 0 auto; position: relative; }
:root { 
   --blue: #0f6fab;
   --darkblue: #005387;
   --green: #0aa300;
}
.bg_black { background-color: #222; }
.bg_blue { background-color: #0f6fab; }
.active { position: relative; opacity: 0; transition: 1s; }
.active.on { top: 0 !important; opacity: 1; }
.blue_btn { background: var(--blue); color: #fff; }
.gray_btn { background: #444; color: #fff; }


/* 상단 영역 */
.menu_view { display: flex; align-items: center; justify-content: center; position: fixed; left:0; top:0; width: 100%; height: 100vh; background: url(../images/common/menu_view_bg.png) no-repeat 50% 50%; background-size: cover; z-index: 99; opacity: 0; visibility: hidden; transition: 0.6s; }
.menu_view.on { opacity: 1; visibility: visible; }
.menu_view > ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 4rem; }
.menu_view > ul > li { color: #fff; display: inline-flex; align-items: center; flex-direction: column; font-size: 4vh; font-weight: 500; gap: 2rem; }
.menu_view > ul > li:hover { color: var(--blue); }
.menu_view > ul .sub_menu { display: flex; gap: 2rem; flex-direction: column; }
.menu_view > ul .sub_menu li { font-size: 2vh; font-weight: 400; }
.menu_view > ul .sub_menu li a { color: #999; transition: 0.3s; }
.menu_view > ul .sub_menu li:hover a { color: #fff; }

.header { position: fixed; left:0; top:0; width: 100%; height: 100px; border-bottom: 1px solid transparent; z-index: 99; padding: 0 40px; transition: 0.3s; }
.header .logo { height: 100px; }
.header .logo a { margin-right: 10px; }
.header .nav > ul { display: flex; align-items: center; }
.header .nav > ul > li { margin: 0 20px; font-size: 1.9vh; font-weight: 500; position: relative; }
.header .nav > ul > li:last-child { margin-right: 0; }
.header .nav > ul > li > a { display: block; color: #fff; }
.header .nav > ul > li::before { content: ''; width: 8px; height: 8px; border-radius: 50px; position: absolute; left: 50%; top: -20px; transform: translate(-50%); background-color: var(--blue); opacity: 0; transition: 0.3s; }
.header .nav > ul > li:hover::before { opacity: 1; }
.header .nav > ul > li:hover .sub_nav { top: 35px; opacity: 1; visibility: visible; }
.header .nav > ul > li.all_menu_wrap::before { display: none; }
.header .nav > ul > li.all_menu_wrap .all_menu { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.3rem; overflow: hidden; cursor: pointer; }
.header .nav > ul > li.all_menu_wrap .all_menu span { content: ''; width: 30px; height: 2px; background-color: #fff; display: flex; position: relative; transition: 0.3s; }
.header .nav > ul > li.all_menu_wrap .all_menu span::before { content: ''; width: 30px; height: 2px; background-color: #fff; display: block; position: absolute; left: -100%; top: 0; }
.header .nav > ul > li.all_menu_wrap .all_menu span:nth-child(2)::before { animation-delay: 0.1s; }
.header .nav > ul > li.all_menu_wrap .all_menu span:nth-child(3)::before { animation-delay: 0.2s; }
.header .nav > ul > li.all_menu_wrap .all_menu.on { overflow: visible; }
.header .nav > ul > li.all_menu_wrap .all_menu.on span::before { display: none; }
.header .nav > ul > li.all_menu_wrap .all_menu.on span:nth-child(1) { display: none; }
.header .nav > ul > li.all_menu_wrap .all_menu.on span:nth-child(2) { transform: translate(-1.5px,0) rotate(45deg); }
.header .nav > ul > li.all_menu_wrap .all_menu.on span:nth-child(3) { transform: translate(-1.5px,-5px) rotate(-45deg); }
.header .nav > ul > li.all_menu_wrap .all_menu:hover span::before { animation-name: menu; animation-duration: 1s; animation-timing-function: ease; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes menu { 0% { left: 100%; } 100% { left: -100%; } }

.header .nav .sub_nav { position: absolute; width: 160px; border: 1px solid #ccc; background-color: #fff; left: 50%; top: 85px; transform: translate(-50%); opacity: 0; visibility: hidden; transition: 0.3s; }
.header .nav .sub_nav li { font-size: 1.6vh; height: 60px; line-height: 60px; text-align: center; }
.header .nav .sub_nav li:hover a { font-weight: 500; color: var(--blue); }
.header .nav .sub_nav li a { display: block; }
.header.down { border-bottom: 1px solid #ddd; color: #333; background-color: #fff; }
.header.down .nav > ul > li > a { color: #222; }
.header.down .nav > ul > li.all_menu_wrap .all_menu span { background-color: #111; }
.header:hover { border-bottom: 1px solid #ddd; color: #333; background-color: #fff; }
.header:hover .nav > ul > li > a { color: #222; }
.header:hover .nav > ul > li.all_menu_wrap .all_menu span { background-color: #111; }
.header_wrap.black .header { border-bottom: 1px solid #ddd; }
.header_wrap.black .header .nav > ul > li > a { color: #222; }
.header_wrap.black .header .nav > ul > li.all_menu_wrap .all_menu span { background-color: #111; }
.header.menuOn { background: transparent !important; border-bottom: none !important; }
.header.menuOn ul li { display: none; }
.header.menuOn ul li.all_menu_wrap { display: block; }
.header.menuOn ul li.all_menu_wrap .all_menu span { background-color: #fff !important; }


/* 메인 */
.container.none { overflow: hidden; overflow-y: hidden; }
.container .visual .swiper { width: 100%; height: 100vh; }
.container .visual .swiper .scroll_view { display: flex; flex-direction: column; align-items: center; position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0); z-index: 10; }
.container .visual .swiper .scroll_view h1 { font-size: 1.7vh; color: #f3f3f3; margin-bottom: 15px; }
.container .visual .swiper .scroll_view p { width: 3px; height: 100px; background-color: rgba(242, 242, 242, 0.3);  position: relative; overflow: hidden; }
.container .visual .swiper .scroll_view p span { width: 2px; height: 100px; background-color: #fff; position: absolute; left:0; }
.container .visual .swiper .scroll_view p span { animation-name: scroll; animation-duration: 1.5s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes scroll { 0% { top: -100px; } 100% { top: 100px; } }
.container .visual .swiper .swiper-slide { display: flex; align-items: center; padding: 0 20vw; color: #fff; }
.container .visual .swiper .swiper-slide h1 { font-size: 7vh; font-weight: 900; margin-bottom: 3vh; opacity: 0; position: relative; top: 100px; transition: 1s; transition-delay: 0.25s; }
.container .visual .swiper .swiper-slide h2 { font-size: 2.6vh; opacity: 0; position: relative; top: 100px; transition: 1s; transition-delay: 0.5s; }
.container .visual .swiper .swiper-slide.swiper-slide-active h1 { opacity: 1; top:0; }
.container .visual .swiper .swiper-slide.swiper-slide-active h2 { opacity: 1; top:0; }
.container .visual .swiper .swiper-button-next span { position: absolute; top: 5px; right: 70px; font-size: 1.9vh; }
.container .visual .swiper .swiper-button-prev span { position: absolute; top: 5px; left: 70px; font-size: 1.9vh; }
.container .visual .swiper-button-prev:after { display: none; }
.container .visual .swiper-button-next:after { display: none; }

.container .visual .swiper-button-next p { width: 4px; height: 35px; background-color: #fff; position: absolute; display: block; transition: 0.3s; }
.container .visual .swiper-button-next p.top { top: -17.5px; }
.container .visual .swiper-button-next p.bottom { top: 17.5px; }
.container .visual .swiper-button-prev p { width: 4px; height: 35px; background-color: #fff; position: absolute; display: block; transition: 0.3s; }
.container .visual .swiper-button-prev p.top { top: -17.5px; }
.container .visual .swiper-button-prev p.bottom { top: 17.5px; }

.container .visual .swiper-button-next:hover p.top { transform: translate(0, 6.5px) rotate(-45deg); }
.container .visual .swiper-button-next:hover p.bottom { transform: translate(0, -6.5px) rotate(45deg); }
.container .visual .swiper-button-prev:hover p.top { transform: translate(0, 6.5px) rotate(45deg); }
.container .visual .swiper-button-prev:hover p.bottom { transform: translate(0, -6.5px) rotate(-45deg); }
.container .visual .swiper .swiper-slide:nth-child(1) { background: url(../images/common/c_bg01.png) no-repeat 50% 50%; background-size: cover; }
.container .visual .swiper .swiper-slide:nth-child(2) { background: url(../images/common/c_bg02.png) no-repeat 50% 50%; background-size: cover; }
.container .visual .swiper .swiper-slide:nth-child(3) { background: url(../images/common/c_bg03.png) no-repeat 50% 50%; background-size: cover; }

.container .content#con-1 { padding-top: 60px; }
.container .content#con-1 .company_text_box { display: flex; justify-content: center; margin-bottom: 60px; }
.container .content#con-1 .company_text_box em { width: 50%; padding: 0 30px; }
.container .content#con-1 .company_text_box h1 { font-size: 1.8vh; text-align: right; margin-bottom: 20px; line-height: 1.8em; font-weight: 500; }
.container .content#con-1 .company_text_box h1 b { color: var(--blue); }
.container .content#con-1 .company_text_box h2 { font-size: 4.4vh; text-align: right; }
.container .content#con-1 .company_text_box span { font-size: 1.8vh; color: #666; line-height: 2em; letter-spacing: -0.04em; }

.container .content#con-1 .company_icon_box { background-color: #f3f3f3; height: 345px; padding: 60px 0; margin-bottom: 80px; }
.container .content#con-1 .company_icon_box .wrap { display: flex; justify-content: center; align-items: flex-start; }
.container .content#con-1 .company_icon_box em { width: 50%; padding: 0 30px; }
.container .content#con-1 .company_icon_box em.active { position: relative; top: 100px; }
.container .content#con-1 .company_icon_box em:first-child { display: inline-flex; justify-content: flex-end; }
.container .content#con-1 .company_icon_box em:last-child { display: inline-flex; flex-wrap: wrap; justify-content: space-between; }
.container .content#con-1 .company_icon_box em > img { width: 300px; height: 440px; position: relative; top: -120px; }
.container .content#con-1 .company_icon_box span { display: flex; align-items: center; width: 50%; margin-bottom: 40px; }
.container .content#con-1 .company_icon_box span p { display: flex; width: 90px; height: 90px; overflow: hidden; border-radius: 100%; margin-right: 20px; background-color: #fff; }
.container .content#con-1 .company_icon_box span h1 { font-size: 2.3vh; font-weight: 500; line-height: 1.2em; }
.container .content#con-1 .company_icon_box span h1 b { font-size: 1.5vh; font-weight: 300; color: #888; }

.container .content#con-1 .company_sv_box { text-align: center; }
.container .content#con-1 .company_sv_box h1 { font-size: 17px; margin-bottom: 20px; font-weight: 500; }
.container .content#con-1 .company_sv_box h1 b { color: var(--blue); }
.container .content#con-1 .company_sv_box h2 { font-size: 42px; }
.container .content#con-1 .company_sv_box .company_sv_con { display: flex; align-items: center; margin-top: 40px; }
.container .content#con-1 .company_sv_box .company_sv_con span { width: 100%; height: 400px; background-color: #eee; margin: 0 20px; }

.container .content#con-2 { height: 870px; background: url(../images/common/business_bg.png) no-repeat center right; padding: 0 200px; position: relative; overflow: hidden; }
.container .content#con-2 h4 { position: absolute; bottom: 290px; left: 40px; font-size: 12vh; color: #f3f3f3; font-weight: bold; font-family: sans-serif; }
.container .content#con-2 .b_text { position: absolute; bottom: 0; }
.container .content#con-2 .b_text h1 { font-size: 4.4vh; font-weight: bold; line-height: 1.4em; color: #333; letter-spacing: -0.02em; }
.container .content#con-2 .b_text b { color: var(--blue); }
.container .content#con-2 .b_text.active.on { top: auto !important; bottom: 100px; }
.container .content#con-2 .circle_wrap { width: 100%; height: 100%; position: relative; }
.container .content#con-2 .circle_wrap span { width: 10px; height: 10px; border-radius: 100%; background-color: var(--blue); position: absolute; }
.container .content#con-2 .circle_wrap span::before { content: ''; width: 30px; height: 30px; border-radius: 100%; background-color: #dbdbdb; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0.3; z-index: -1; }
.container .content#con-2 .circle_wrap span::before { animation-name: circle; animation-duration: 1.15s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
.container .content#con-2 .circle_wrap span:nth-child(1) { top: 210px; right: 268px; }
.container .content#con-2 .circle_wrap span:nth-child(2) { top: 300px; right: 375px; }
.container .content#con-2 .circle_wrap span:nth-child(3) { top: 170px; right: 475px; }
.container .content#con-2 .circle_wrap span:nth-child(4) { top: 240px; right: 960px; }
.container .content#con-2 .circle_wrap span:nth-child(5) { top: 375px; right: 475px; }
.container .content#con-2 .circle_wrap span:nth-child(6) { top: 485px; right: 420px; }
.container .content#con-2 .circle_wrap span:nth-child(7) { top: 405px; right: 873px; }
.container .content#con-2 .circle_wrap span:nth-child(8) { top: 325px; right: 850px; }
.container .content#con-2 .circle_wrap span:nth-child(9) { top: 200px; right: 700px; }
.container .content#con-2 .circle_wrap span:nth-child(10) { top: 550px; right: 763px; }
.container .content#con-2 .circle_wrap span:nth-child(11) { top: 290px; right: 520px; }
.container .content#con-2 .circle_wrap span:nth-child(12) { top: 340px; right: 280px; }
.container .content#con-2 .circle_wrap span:nth-child(13) { top: 455px; right: 135px; }
.container .content#con-2 .circle_wrap span:nth-child(14) { top: 505px; right: 83px; }
.container .content#con-2 .circle_wrap span:nth-child(15) { top: 340px; right: 210px; }
.container .content#con-2 .circle_wrap span:nth-child(16) { top: 300px; right: 240px; }
@keyframes circle { 0% { opacity: 0; } 50% { opacity: 0.7; } 100% { opacity: 0; } }
.container .content#con-2 .circle { position: absolute; top: 100px; left: 100px; opacity: 0.3; z-index: -1; }
.container .content#con-2 .circle { animation-name: move; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes move { 100% { transform: rotate(360deg); } }

.container .content#con-3 { min-height: calc(100vh - 100px); display: flex; background: url(../images/common/bn_bg.png) no-repeat 50% 50%; background-size: cover; }
.container .content#con-3 .bn_con { width: 100%; position: relative; overflow: hidden; z-index: 1; }
.container .content#con-3 .bn_con a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; }
.container .content#con-3 .bn_con a p { margin-bottom: 20px; }
.container .content#con-3 .bn_con a h1 { font-size: 4vh; margin-top: 20px; }
.container .content#con-3 .bn_con a h2 { font-size: 1.7vh; }
.container .content#con-3 .bn_con a span { font-size: 1.7vh; display: flex; align-items: center; padding: 15px 40px; border: 1px solid #fff; margin-top: 40px; }
.container .content#con-3 .bn_con a span img { margin-left: 5px; width: 0; transition: 0.3s; }
.container .content#con-3 .bn_con::before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; bottom: -100%; background: linear-gradient(130deg, #0f6fab, #0aa300); opacity: 0.7; z-index: -1; transition: 0.6s; }
.container .content#con-3 .bn_con:hover::before { bottom: 0; }
.container .content#con-3 .bn_con:hover a span img { width: 24px; }


/* 서브 공통 */
.sub_wrap { padding-top: 200px; padding-bottom: 60px; }
.sub_wrap.none { overflow: hidden; overflow-y: hidden; }
.sub_tit { margin-bottom: 60px; }
.sub_tit h1 { font-size: 2.3vh; font-weight: 500; color: var(--darkblue); letter-spacing: -0.04em; margin-left: 5px; margin-bottom: 40px; position: relative; top: 100px; opacity: 0; transition: 1s; }
.sub_tit h2 { font-size: 5.6vh; color: #333; letter-spacing: -0.04rem; line-height: 1.25em; font-weight: bold; opacity: 0; position: relative; top: 100px; transition: 1s; transition-delay: 0.15s; }
.sub_tit h2 span { color: var(--blue); }
.sub_tit.on { top: 0; opacity: 1; }
.sub_tit.on h1 { top: 0; opacity: 1; }
.sub_tit.on h2 { top: 0; opacity: 1; }
.sub_bg { width: 900px; height: 440px; position: absolute; top: 270px; right: 0; z-index: -1; opacity: 0; transition: 1s; transition-delay: 0.3s; }
.sub_bg.on { top: 170px; opacity: 1; }


/* 사업소개 */
.sub_wrap .biz_wrap { margin-top: 500px; }
.sub_wrap .biz_wrap .biz_con { padding: 80px 0; border-bottom: 5px solid #eee; }
.sub_wrap .biz_wrap .biz_con:first-child { padding-top: 0; }
.sub_wrap .biz_wrap .biz_con:last-child { padding-bottom: 20px; border: none; }
.sub_wrap .biz_wrap .biz_con .wrap > h1 { font-size: 5vh; font-weight: bold; color: var(--blue); margin-bottom: 80px; position: relative; top: 100px; }
.sub_wrap .biz_wrap .biz_con .wrap > ul { display: flex; gap: 6.5rem; padding-bottom: 80px; margin-bottom: 80px; border-bottom: 1px solid #e5e5e5; }
.sub_wrap .biz_wrap .biz_con .wrap > ul li { width: 315px; position: relative; top: 100px; }
.sub_wrap .biz_wrap .biz_con .wrap > ul li:nth-child(1) { transition-delay: 0.1s; }
.sub_wrap .biz_wrap .biz_con .wrap > ul li:nth-child(2) { transition-delay: 0.2s; }
.sub_wrap .biz_wrap .biz_con .wrap > ul li:nth-child(3) { transition-delay: 0.3s; }
.sub_wrap .biz_wrap .biz_con .wrap > ul li p { width: 100px; height: 100px; border-radius: 20px; background-color: #f3f3f3; margin-bottom: 40px; }
.sub_wrap .biz_wrap .biz_con .wrap > ul li h2 { font-size: 2.6vh; line-height: 1.2em; font-weight: bold; margin-bottom: 20px; letter-spacing: -0.06em; }
.sub_wrap .biz_wrap .biz_con .wrap > ul li h3 { font-size: 2vh; color: var(--blue); line-height: 1.4em; letter-spacing: -0.04em; }
.sub_wrap .biz_wrap .biz_con .biz_bottom { display: flex; }
.sub_wrap .biz_wrap .biz_con .biz_bottom .biz_bottom_tit { flex: 0 0 35.5%; position: relative; top: 100px; }
.sub_wrap .biz_wrap .biz_con .biz_bottom .biz_bottom_tit h4 { font-size: 1.8vh; font-weight: 500; line-height: 1.8em; margin-bottom: 20px; }
.sub_wrap .biz_wrap .biz_con .biz_bottom .biz_bottom_tit h4 b { color: var(--blue); }
.sub_wrap .biz_wrap .biz_con .biz_bottom .biz_bottom_tit h5 { font-size: 42px; font-weight: 500; letter-spacing: -0.04em; }
.sub_wrap .biz_wrap .biz_con .biz_bottom ul { display: flex; flex-wrap: wrap; gap: 2rem; }
.sub_wrap .biz_wrap .biz_con .biz_bottom ul li { display: flex; flex: 1 1 45%; flex-direction: column; position: relative; top: 100px; }
.sub_wrap .biz_wrap .biz_con .biz_bottom ul li h1 { font-size: 2vh; font-weight: 500; display: flex; align-items: flex-start; line-height: 1.2em; margin-bottom: 10px; }
.sub_wrap .biz_wrap .biz_con .biz_bottom ul li h1 img { margin-right: 5px; }
.sub_wrap .biz_wrap .biz_con .biz_bottom ul li span { font-size: 1.7vh; margin-left: 29px; line-height: 1.6em; color: #888; }
.sub_wrap .biz_wrap .biz_con:last-child .biz_bottom { border-bottom: none; padding-bottom: 0; }

.sub_wrap .biz_wrap .biz_con.innosms .wrap > h1 { display: flex; gap: 10px; }
.sub_wrap .biz_wrap .biz_con.innosms .wrap > h1 span { font-size: 20px; }
.sub_wrap .biz_wrap .biz_con.innosms .wrap > h1 span b { font-size: 24px; position: relative; left: 5px; top: -5px; }
.sub_wrap .biz_wrap .biz_con .biz_bottom.use_con { margin-top: 40px; padding-top: 40px; border-top: 1px solid #ddd; }
.sub_wrap .biz_wrap .biz_con .biz_bottom.use_con ul { width: 100%; }
.sub_wrap .biz_wrap .biz_con .biz_bottom.use_con ul li span { margin: 0; }
.sub_wrap .biz_wrap .biz_con .biz_bottom.use_con ul li a { width: 200px; height: 50px; line-height: 50px; text-align: center; background-color: #222; color: #fff; }

/* 복지제도 */
.sub_wrap .welfare_wrap { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 500px; }
.sub_wrap .welfare_wrap .welfare_con { width: calc(33% - 10px); height: 300px; background-color: #f3f3f3; margin-bottom: 20px; padding: 30px; position: relative; top: 150px; }
.sub_wrap .welfare_wrap .welfare_con .welfare_con_top { display: flex; }
.sub_wrap .welfare_wrap .welfare_con .welfare_con_top span { display: block; font-size: 18px; color: #888; font-family: sans-serif; margin-bottom: 20px; }
.sub_wrap .welfare_wrap .welfare_con .welfare_con_top h1 { font-size: 23px; font-weight: bold; color: var(--darkblue); letter-spacing: -0.04em; margin-bottom: 15px; }
.sub_wrap .welfare_wrap .welfare_con .welfare_con_top img {  margin-right: 20px; }
.sub_wrap .welfare_wrap .welfare_con .welfare_txt { display: flex; flex-wrap: wrap; }
.sub_wrap .welfare_wrap .welfare_con .welfare_txt span { font-size: 16px; width: 50%; margin-top: 15px; color: #333; }


/* 이용문의 */
.sub_wrap .contact_wrap { margin-top: 500px; }
.sub_wrap .contact_wrap .contact { display: inline-block; width: 100%; }
.sub_wrap .contact_wrap .contact .contact_con { display: flex; border-bottom: 1px solid #eee; padding: 80px 0; }
.sub_wrap .contact_wrap .contact .contact_con:first-child { padding-top: 0; }
.sub_wrap .contact_wrap .contact .contact_con .contact_tit { font-size: 4vh; font-weight: bold; letter-spacing: -0.02em; flex: 0 0 30%; position: relative; top: 100px; }
.sub_wrap .contact_wrap .contact .contact_con .contact_tit b { position: relative; }
.sub_wrap .contact_wrap .contact .contact_con .contact_tit b:after { content: ''; position: absolute; left: 0; bottom: 10px; width: 100%; height: 6px; background-color: var(--blue); z-index: -1; opacity: 0.3; }
.sub_wrap .contact_wrap .contact .contact_con ul { display: flex; flex-wrap: wrap; gap: 2rem; }
.sub_wrap .contact_wrap .contact .contact_con ul li { display: flex; flex-direction: column; flex: 1 1 45%; position: relative; top: 100px; font-size: 1.7vh; }
.sub_wrap .contact_wrap .contact .contact_con ul li b { display: flex; align-items: center; margin-bottom: 10px; font-weight: 500; }
.sub_wrap .contact_wrap .contact .contact_con ul li b img { margin-right: 5px; }
.sub_wrap .contact_wrap .contact .contact_con ul li p span { color: var(--darkblue); font-weight: 500; letter-spacing: -0.04em; }
.sub_wrap .contact_wrap .contact .contact_con ul li:nth-child(1) { transition-delay: 0s; }
.sub_wrap .contact_wrap .contact .contact_con ul li:nth-child(2) { transition-delay: 0.1s; }
.sub_wrap .contact_wrap .contact .contact_con ul li:nth-child(3) { transition-delay: 0.2s; }
.sub_wrap .contact_wrap .contact .contact_con ul li:nth-child(4) { transition-delay: 0.3s; }
.sub_wrap .contact_wrap .contact .contact_con ul li:nth-child(5) { transition-delay: 0.4s; }
.sub_wrap .contact_wrap .contact .contact_con ul li:nth-child(6) { transition-delay: 0.5s; }
.sub_wrap .contact_wrap .contact .contact_site { padding-top: 80px; padding-bottom: 40px; }
.sub_wrap .contact_wrap .contact .contact_site ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.sub_wrap .contact_wrap .contact .contact_site ul li { width: 155px; display: flex; align-items: center; flex-direction: column; position: relative; top: 100px; }
.sub_wrap .contact_wrap .contact .contact_site ul li p { width: 90px; height: 90px; border-radius: 100%; margin-bottom: 20px; }
.sub_wrap .contact_wrap .contact .contact_site ul li h1 { font-size: 2.1vh; font-weight: 500; margin-bottom: 10px; }
.sub_wrap .contact_wrap .contact .contact_site ul li h2 { font-size: 1.7vh; margin-bottom: 10px; font-weight: 500; }
.sub_wrap .contact_wrap .contact .contact_site ul li h3 { font-size: 1.7vh; display: flex; align-items: center; font-weight: 500; }
.sub_wrap .contact_wrap .contact .contact_site ul li h3 img { margin-right: 5px; }
.sub_wrap .contact_wrap .contact .contact_site ul li:nth-child(1) p { background-color: #035680; }
.sub_wrap .contact_wrap .contact .contact_site ul li:nth-child(2) p { background-color: #fdb514; }
.sub_wrap .contact_wrap .contact .contact_site ul li:nth-child(3) p { background-color: #24303e; }
.sub_wrap .contact_wrap .contact .contact_site ul li:nth-child(4) p { background-color: #5593ef; }
.sub_wrap .contact_wrap .contact .contact_site ul li:nth-child(5) p { background-color: #f3f3f3; }
.sub_wrap .contact_wrap .contact .contact_site ul li:nth-child(6) p { background-color: #216f60; }
.sub_wrap .contact_wrap .contact .contact_site ul li:nth-child(1) { transition-delay: 0s; }
.sub_wrap .contact_wrap .contact .contact_site ul li:nth-child(2) { transition-delay: 0.1s; }
.sub_wrap .contact_wrap .contact .contact_site ul li:nth-child(3) { transition-delay: 0.2s; }
.sub_wrap .contact_wrap .contact .contact_site ul li:nth-child(4) { transition-delay: 0.3s; }
.sub_wrap .contact_wrap .contact .contact_site ul li:nth-child(5) { transition-delay: 0.4s; }
.sub_wrap .contact_wrap .contact .contact_site ul li:nth-child(6) { transition-delay: 0.5s; }


/* 공지사항 */
.sub_wrap .notice_wrap { min-height: 500px; }
.sub_wrap .notice_wrap .nt_nav { margin-bottom: 20px; }
.sub_wrap .notice_wrap .nt_nav ul { display: flex; gap: 1rem; }
.sub_wrap .notice_wrap .nt_nav ul li { padding: 10px 20px; border-radius: 50px; background-color: #eee; font-size: 15px; font-weight: 400; }
.sub_wrap .notice_wrap .nt_nav ul li.this { background-color: var(--blue); color: #fff; }
.sub_wrap .notice_wrap .nt_nav ul li.write { background-color: #444; color: #fff; border-radius: 5px; position: absolute; right: 0; }
.sub_wrap .notice_wrap .a_head { border-top: 2px solid #111; border-bottom: 1px solid #111; }
.sub_wrap .notice_wrap .a_head dl { display: flex; }
.sub_wrap .notice_wrap .a_head dl dt { padding: 15px 0; font-size: 15px; font-weight: bold; text-align: center; }
.sub_wrap .notice_wrap .a_head dl dt:nth-child(1) { width: 15%; }
.sub_wrap .notice_wrap .a_head dl dt:nth-child(2) { width: 70%; }
.sub_wrap .notice_wrap .a_head dl dt:nth-child(3) { width: 15%; }

.sub_wrap .notice_wrap .a_body dl a { display: flex; }
.sub_wrap .notice_wrap .a_body dl dd { font-size: 15px; font-weight: 400; text-align: center; padding: 30px 0; border-bottom: 1px solid #ddd; }
.sub_wrap .notice_wrap .a_body dl dd:nth-child(1) { width: 15%; }
.sub_wrap .notice_wrap .a_body dl dd:nth-child(2) { width: 70%; text-align: left; }
.sub_wrap .notice_wrap .a_body dl dd:nth-child(3) { width: 15%; }

.sub_wrap .notice_wrap .page { margin-top: 40px; }
.sub_wrap .notice_wrap .page ul { display: flex; justify-content: center; }
.sub_wrap .notice_wrap .page ul li { line-height: 20px; margin : 0 10px; font-size: 15px; font-weight: 400; }
.sub_wrap .notice_wrap .page ul li.this { color: var(--blue); font-weight: bold; }

.sub_wrap .notice_wrap .nt_view .nt_view_top { border-bottom: 1px solid #111; padding-bottom: 20px; }
.sub_wrap .notice_wrap .nt_view .nt_view_top h1 { display: block; font-size: 15px; color: #6e8391; margin-bottom: 10px; font-weight: 400; }
.sub_wrap .notice_wrap .nt_view .nt_view_top h1 span { display: inline-block; }
.sub_wrap .notice_wrap .nt_view .nt_view_top h1 b { margin: 0 5px; }
.sub_wrap .notice_wrap .nt_view .nt_view_top h2 { font-size: 2.7vh; line-height: 1.2em; font-weight: bold; color: #333; }
.sub_wrap .notice_wrap .nt_view .nt_view_txt { padding: 40px 0; max-width: 580px; min-height: 300px; }
.sub_wrap .notice_wrap .nt_view .nt_view_txt em { font-size: 17px; line-height: 1.6em; }

.sub_wrap .notice_wrap .nt_write .nt_write_top { display: flex; align-items: center; border-bottom: 1px solid #111; padding-bottom: 20px; }
.sub_wrap .notice_wrap .nt_write .nt_write_top select { width: 60px; height: 35px; padding-left: 10px; border: 1px solid #aaa; border-radius: 4px; box-sizing: border-box; outline: none; margin-right: 5px; }
.sub_wrap .notice_wrap .nt_write .nt_write_top input[type=text] { width: 515px; height: 35px; padding-left: 10px; border: 1px solid #aaa; border-radius: 4px; box-sizing: border-box; outline: none; margin-right: 5px; }
.sub_wrap .notice_wrap .nt_write .nt_write_txt { padding: 40px 0; max-width: 580px; height: 300px; }
.sub_wrap .notice_wrap .nt_write .nt_write_txt textarea { width: 100%; height: 100%; border: 1px solid #aaa; resize: none; outline: none; padding: 10px; box-sizing: border-box; }

.sub_wrap .notice_wrap .nt_bottom_btn { display: flex; justify-content: center; border-top: 1px solid #ddd; padding-top: 40px; }
.sub_wrap .notice_wrap .nt_bottom_btn a { font-size: 1.7vh;  padding: 15px 50px; border-radius: 5px; font-weight: 400; margin: 0 10px; }


/* 부가서비스 */
/* .sup_wrap .sup_top { background-color: #fff; width: 100%; height: 100px; }
.sup_wrap .sup_con { background-color: #f3f3f3; padding: 40px 0; }
.sup_wrap .sup_con .sup_con_box { width: 900px; margin: 0 auto; background-color: #fff; }
.sup_wrap .sup_con .sup_con_box .sup_tit { display: flex; align-items: center; justify-content: space-between; background-color: #002840; padding: 6vh 60px; }
.sup_wrap .sup_con .sup_con_box .sup_tit h1 { font-size: 4vh; color: #fff; font-weight: 500; }
.sup_wrap .sup_con .sup_con_box .sup_tit img { width: 6.6vh; }
.sup_wrap .sup_con .sup_con_box .sup_text { padding: 40px 60px; }
.sup_wrap .sup_con .sup_con_box .sup_text h1 { font-size: 2.2vh; font-weight: 500; margin-bottom: 30px; }
.sup_wrap .sup_con .sup_con_box .sup_text h2 { font-size: 1.9vh; font-weight: 500; }
.sup_wrap .sup_con .sup_con_box .sup_text span { font-size: 1.7vh; line-height: 1.6em; }
.sup_wrap .sup_con .sup_con_box .sup_text i { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #ddd; display: inline-block; width: 100%; }
.sup_wrap .sup_con .sup_con_box .sup_text i ul { display: flex; flex-direction: column; gap: 20px; }
.sup_wrap .sup_con .sup_con_box .sup_text i ul li h2 { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
.sup_wrap .sup_con .sup_con_box .sup_text i ul li span { margin-left: 25px; letter-spacing: -0.025em; }
.sup_wrap .sup_con .sup_con_box .sup_text i:last-child { margin:0; padding:0; border: none; }
.sup_wrap .sup_con .sup_con_box .sup_text .sup_text_box { display: flex; gap: 10px; flex-wrap: wrap; }
.sup_wrap .sup_con .sup_con_box .sup_text .sup_text_box > span { border: 1px dashed #111; padding: 20px; flex: 50; text-align: center; }
.sup_wrap .sup_con .sup_con_box .sup_text .sup_text_box > span h2 { border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 10px; }
.sup_wrap .sup_con .sup_con_box .sup_text .sup_text_box > span b { font-size: 1.6vh; color: #888; }
.sup_wrap .sup_con .sup_con_box .sup_text .sup_number_box { display: flex; align-items: center; background-color: #253970; padding: 40px; color: #fff; gap: 20px; }
.sup_wrap .sup_con .sup_con_box .sup_text .sup_number_box h1 { margin: 0; display: flex; align-items: center; gap: 5px; }
.sup_wrap .sup_con .sup_con_box .sup_text .sup_view_box { background-color: #f3f3f3; padding: 20px; }
.sup_wrap .sup_con .sup_con_box .sup_text .sup_view_box .swiper-slide img { width: 100%; } */


/* 하단 영역 */
.footer { display: inline-block; width: 100%; padding: 60px 40px; position: relative; z-index: 1; background-color: #fff; border-top: 1px solid #ddd; }
.footer .copy { display: flex; justify-content: space-between; }
.footer .copy em span { margin-right: 10px; font-size: 1.5vh; }
.footer .copy em .ft_menu { display: inline-flex; }
.footer .copy em .ft_menu h1 { font-weight: bold; font-size: 1.7vh; }
.footer .copy em .ft_menu > li { margin-right: 100px; }
.footer .copy em .ft_menu ul li { margin-top: 20px; font-size: 1.5vh; }
.footer .copy em .info_btn { display: inline-flex; }
.footer .copy em .info_btn a { display: inline-block; width: 120px; font-size: 13px; height: 35px; line-height: 35px; border: 1px solid #ddd; text-align: center; color: #888; }


/* 모바일 */
@media screen and (max-width: 1200px) {
   
   /* 공통 */
   .header { padding: 0 20px; height: 70px; }
   .header .logo { height: 70px; }
   .header .logo > img { display: none; }
   .header .logo a img { width: 20vh; }
   .nav ul li { display: none; }
   .nav ul li.all_menu_wrap { display: block; }
   .container .visual .swiper { height: calc(100vh - 70px); }
   .wrap { width: auto; padding: 0 20px; }
   .active { opacity: 1 !important; top: 0 !important; }


   /* 메인 */
   .container .visual .swiper .swiper-slide { padding: 0; text-align: center; justify-content: center; }
   .swiper-button-next, .swiper-button-prev { display: none !important; }
   
   .container .content#con-1 { padding-top: 10vh; }
   .container .content#con-1 .company_text_box { flex-direction: column; margin-bottom: 10vh; }
   .container .content#con-1 .company_text_box em { width: 100%; padding: 0; text-align: center; }
   .container .content#con-1 .company_text_box h1 { text-align: center; }
   .container .content#con-1 .company_text_box h2 { text-align: center; margin-bottom: 5vh; }
   .container .content#con-1 .company_text_box span { display: block; width: 100%; padding: 0 20px; letter-spacing: -0.104rem; box-sizing: border-box; }
   .container .content#con-1 .company_icon_box { margin-bottom: 0; }
   .container .content#con-1 .company_icon_box { height: auto; }
   .container .content#con-1 .company_icon_box em { width: 100%; padding: 0; gap: 2rem; }
   .container .content#con-1 .company_icon_box em:first-child { display: none; }
   .container .content#con-1 .company_icon_box em:last-child { align-items: center; justify-content: center; flex-wrap: nowrap; }
   .container .content#con-1 .company_icon_box span { width: 45%; margin-bottom: 0; flex-direction: column; align-items: center; justify-content: center; }
   .container .content#con-1 .company_icon_box span p { margin: 0; }
   .container .content#con-1 .company_icon_box span h1 { text-align: center; margin-top: 2vh; }

   .container .content#con-3 { flex-direction: column; }
   .container .content#con-3 .bn_con { display: flex; height: 50vh; }


   /* 서브 공통 */
   .sub_wrap { padding-top: 170px; }
   

   /* 회사소개 */
   .sub_wrap .welfare_wrap .welfare_con { width: calc(100% /2 - 10px); }
   

   /* 이용문의 */
   .sub_wrap .contact_wrap .contact .contact_site ul { justify-content: center; }


   /* 공지사항 */
   .sub_wrap .notice_wrap .nt_nav ul li.write { right: 20px; }

   
   /* 하단 */
   .footer .copy { justify-content: center; }
   .footer .copy em:last-child { display: none; }
   .footer .copy em p { line-height: 1.4em; text-align: center; }
   .footer .copy em p span:last-child { display: block; }
   .footer .copy em span { margin:0; }

   
   /* 부가서비스 */
   .sup_wrap .sup_top { height: 70px; }

}

@media screen and (max-width: 900px) {

   /* 부가서비스 */
   .sup_wrap .sup_con { padding: 0; }
   .sup_wrap .sup_con .sup_con_box { width: 100%; }
   .sup_wrap .sup_con .sup_con_box .sup_tit { padding: 6vh 20px; }
   .sup_wrap .sup_con .sup_con_box .sup_text { padding: 40px 20px; }
   .sup_wrap .sup_con .sup_con_box .sup_text .sup_number_box { flex-direction: column; }
}

@media screen and (max-width: 640px) {

   /* 메인 */
   .container .content#con-1 .company_icon_box em:last-child { flex-wrap: wrap; }

   .container .content#con-2 { background: url(../images/common/company_icon_img.png) no-repeat 50% 50%; background-size: cover; padding: 0; height: 70vh; display: flex; align-items: center; justify-content: center; }
   .container .content#con-2::after { width: 100%; height: 100%; background-color: #111; position: absolute; content: ''; opacity: 0.8; }
   .container .content#con-2 .circle_wrap { display: none; }
   .container .content#con-2 .circle { left: 20px; top: 40px; }
   .container .content#con-2 .b_text { position: inherit; bottom: auto !important; text-align: center; letter-spacing: -1em; z-index: 98; }
   .container .content#con-2 .b_text h1 { color: #fff; font-size: 4vh; }
   .container .content#con-2 h4 { bottom: 40px; z-index: 98; font-size: 8vh; opacity: 0.3; }


   /* 서브공통 */
   .header_wrap.black .header { border: none; }
   .sub_bg.on { opacity: 0.3; top: -170px; }
   .sub_tit h1 { text-align: center; margin-left: 0; }
   .sub_tit h2 { text-align: center; font-size: 7.4vw; line-height: 1.4em; }
   .sub_wrap .biz_wrap .biz_con .wrap > h1 { font-size: 7.8vw; }
   .sub_wrap .biz_wrap .biz_con .biz_bottom .biz_bottom_tit h5 { font-size: 7.4vw; }


   /* 회사소개 */
   .sub_wrap .welfare_wrap { margin-top: 200px; }
   .sub_wrap .welfare_wrap .welfare_con { width: 100%; }


   /* 사업소개 */
   .sub_wrap .biz_wrap { margin-top: 200px; }
   .sub_wrap .biz_wrap .biz_con .wrap > h1 { text-align: center; justify-content: center; }
   .sub_wrap .biz_wrap .biz_con .wrap > ul { flex-direction: column; align-items: center; }
   .sub_wrap .biz_wrap .biz_con .wrap > ul li { display: flex; flex-direction: column; align-items: center; text-align: center; }
   .sub_wrap .biz_wrap .biz_con .biz_bottom { flex-direction: column; }
   .sub_wrap .biz_wrap .biz_con .biz_bottom .biz_bottom_tit { margin-bottom: 80px; text-align: center; }
   .sub_wrap .biz_wrap .biz_con .biz_bottom ul { gap: 1rem; }
   .sub_wrap .biz_wrap .biz_con .biz_bottom ul li h1 { line-height: 1.4em; }


   /* 이용문의 */
   .sub_wrap .contact_wrap { margin-top: 200px; }
   .sub_wrap .contact_wrap .contact .contact_con { padding: 60px 0; }
   .sub_wrap .contact_wrap .contact .contact_con { flex-direction: column; }
   .sub_wrap .contact_wrap .contact .contact_con .contact_tit { flex: 0 0 100%; margin-bottom: 40px; }


   /* 공지사항 */
   .sub_wrap .notice_wrap .nt_nav ul li.write { display: none; }
   .sub_wrap .notice_wrap .a_head { display: none; }
   .sub_wrap .notice_wrap .a_body dl a { display: block; padding: 20px 0; border-bottom: 1px solid #ddd; }
   .sub_wrap .notice_wrap .a_body dl dd { border-bottom: none; padding: 0; }
   .sub_wrap .notice_wrap .a_body dl dd:nth-child(1) { display: block; margin-right: 10px; width: 100%; text-align: left; }
   .sub_wrap .notice_wrap .a_body dl dd:nth-child(2) { display: block; line-height: 1.4em; width: 100%; margin-top: 10px; }
   .sub_wrap .notice_wrap .a_body dl dd:nth-child(3) { width: 100%; text-align: left; margin-top: 10px; }


   /* 부가서비스 */
   .sup_wrap .sup_con .sup_con_box .sup_text .sup_text_box > span { flex: 1 1 100%; }
}