@charset "euc-kr";
html,body { font-family: 'Pretendard Variable',sans-serif; word-break: keep-all; color: var(--black); background-color: var(--white); }

:root {
 --blue: #3d76ba;
 --blue2: #406a99;
 --darkblue: #264a75;
 --lightdarkblue: #476495;
 --bluegray2: #e2e5e7;
 --bluegray: #667d97;
 --lightblue: #dbe2eb;
 --lightblue2: #c7d2dd;
 --black: #1f2a32;
 --bg1: #eaeff5;
 --bg2: #032661;
 --white: #fff;
 --gray: #f3f3f3;
 --gray2: #ddd;
 --gray3: #999;
}

@media screen and (max-width: 2560px) {
  html,body { font-size: 0.7vw; }
}

@media screen and (max-width: 1920px) {
  html,body { font-size: 1vw; }
}

@media screen and (max-width: 1600px) {
  html,body { font-size: 1.2vw; }
}

@media screen and (max-width: 1240px) {
  html,body { font-size: 1.4vw; }
  .wrap { padding: 0 2rem; }
  .header .header_wrap { margin: 0 2rem; }
}

@media screen and (max-width: 860px) {
  html,body { font-size: 2vw; }
  .section .hosting { flex-direction: column; gap: 4rem; }
  .section .biz_wrap { flex-direction: column; }
  .section .bsn { flex-direction: column; }
  .section .bsn .bsn_box { flex-direction: column; }
  .section .contact .contact_wrap > ul > li { flex-direction: column; align-items: flex-start !important; gap: 1.5rem; }
  .header { top: 0 !important; opacity: 1 !important; transition: 0s !important; animation-duration: 0.4s !important; }
  .header .header_wrap { height: 4rem !important; margin: 0; padding: 0 1.5rem 0 2rem !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: blur(5px) !important; transition: 0s !important; }
  .header .header_wrap .logo a img { width: 8rem !important; }
  .header .header_wrap .nav a { display: none; }
  .header .header_wrap .nav button { display: block !important; }
}

@media screen and (max-width: 640px) {
  html,body { font-size: 3vw; }
}

/* 스크롤 초기화 */
::-webkit-scrollbar { width: 5px; height: 6px; }
::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.1); }
::-webkit-scrollbar-thumb { background-color: rgb(181 184 185); border-radius: 5px; }

.bg1 { background-color: var(--bg1) !important; }
.bg2 { background-color: var(--bg2) !important; }
.bg2.section h1 { color: var(--white) !important; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; }
.swiper { width: 100%; height: 100%; }
.swiper .swiper-slide { height: 100vh !important; }
.wrapper { width: 100%; height: 100vh; position: relative; }
.wrapper .section { display: flex; align-items: center; justify-content: center; }
.wrapper.short { height: 100%; }
.wrapper.short .swiper { overflow: visible !important; }
.wrapper.short .swiper-wrapper { display: block !important; z-index: 2; }
.wrapper.short .swiper .swiper-slide { height: auto !important; }
.wrapper.short .swiper-slide.footer { height: 300px !important; }

/* 상단 공통 */
.header { display: flex; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; z-index: 9; transition: 0.3s; }
.header .header_wrap { width: 100%; max-width: 1200px; display: flex; align-items: center; justify-content: space-between; height: 4.3rem; transition: 0.3s; }
.header .header_wrap .logo a { display: flex; }
.header .header_wrap .logo a img { width: 8rem; }
.header .header_wrap .nav { display: flex; gap: 0.5rem; }
.header .header_wrap .nav a { font-size: 0.8rem; color: var(--darkblue); border-radius: 5px; padding: 0.5rem 1rem; }
.header .header_wrap .nav a:hover { background-color: var(--lightblue); }
.header .header_wrap .nav button { width: 30px; height: 30px; display: none; border: none; background: url(../images/icons/menu.png) no-repeat 50% 50%; cursor: pointer; content: ''; }
.header .header_wrap .nav button.close { background: url(../images/icons/close.png) no-repeat 50% 50%; }
.header.on { top: 10px; }
.header.on .header_wrap { height: 2.7rem; background-color: rgba(255,255,255,.8); border-radius: 10px; padding: 0 0.5rem 0 1rem; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 10px 10px 30px rgba(0,56,91,.1); }
.header.on .header_wrap .logo a img { width: 7rem; }
.header.on { animation-name: opacity; animation-duration: 0.4s; animation-timing-function: linear; animation-iteration-count: 1; animation-direction: normal; }
@keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } }

.m_nav { display: none; flex-direction: column; gap: 3rem; left: 0; top: 4rem; position: fixed; width: 100%; height: 100vh; background-color: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); padding: 2rem; padding-top: 6rem; box-sizing: border-box; z-index: 9; }
.m_nav a { font-family: 'oxanium'; font-size: 3.6rem; font-weight: 600; letter-spacing: -0.2rem; }
.m_nav.on { display: flex; }

.inner { padding: 16rem 0 4rem 0; background: url(../images/bg.png) no-repeat 50% 50%; border-bottom: 1px solid var(--gray); }
.inner h1 { font-size: 4.6rem; font-family: 'oxanium'; font-weight: 600; margin-bottom: 1rem; letter-spacing: -0.2rem; }
.inner span { font-size: 1.2rem; line-height: 1.6rem; }

.visual { width: 100%; height: 100vh; position: relative; background: url(../images/bg.png) no-repeat 50% 50%; background-size: cover; background-color: var(--white); }
.visual .visual_wrap { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.visual .visual_wrap h1 { font-size: 3.4rem; color: var(--black); line-height: 4rem; font-weight: 700; letter-spacing: -0.04rem; }
.visual .visual_wrap h1 b { font-family: 'oxanium'; font-weight: 700; -webkit-text-stroke-color: var(--black); -webkit-text-stroke-width: thin; color: transparent; }
.visual .visual_wrap h2 { display: flex; align-items: flex-end; margin: 1.4rem 0; gap: 0.4rem; }
.visual .visual_wrap h2 span { font-size: 1rem; margin-right: 2px; }
.visual .visual_wrap h2 b { font-size: 1.4rem; }

.visual .visual_wrap .visual_text { width: 22rem; height: 3.8rem; display: flex; align-items: center; justify-content: flex-end; border-radius: 1rem; border: 4px solid var(--blue); font-size: 1.1rem; overflow: hidden; box-sizing: border-box; position: relative; transition: 0.3s; }
.visual .visual_wrap .visual_text:hover { box-shadow: 10px 10px 20px rgba(0,56,91,.2); }
.visual .visual_wrap .visual_text ul { width: 100%; position: absolute; top: 0; left: 0; }
.visual .visual_wrap .visual_text ul li a { width: 100%; line-height: 3.4rem; padding: 0 1rem; text-align: left; }
.visual .visual_wrap .visual_text i { display: flex; height: 3.4rem; align-items: center; padding-right: 1rem; }
.visual .visual_wrap .visual_text i img { width: 1.6rem; }

.visual .scroll_down { position: absolute; left: 50%; bottom: 60px; transform: translate(-50%,0); display: flex; flex-direction: column; align-items: center; gap: 20px; }
.visual .scroll_down h1 { font-size: 14px; }
.visual .scroll_down span { width: 20px; height: 35px; border-radius: 50px; border: 1px solid var(--black); display: flex; justify-content: center; }
.visual .scroll_down b { display: block; width: 6px; height: 6px; background-color: var(--black); border-radius: 100%; position: relative; animation-name: scroll; animation-duration: 0.5s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate-reverse; }
@keyframes scroll { 0% { top: 10px; } 100% { top: 20px; } }

.section { background-color: var(--white); padding: 6rem 0; }
.section.bg { background: radial-gradient(circle farthest-side at 50% 100%, rgb(0,92,173,0.25) 12%, #e9eef2); background-attachment: fixed; }
.section.end { margin-bottom: 300px; }
.section h1 { font-size: 2.6rem; color: var(--darkblue); line-height: 3.4rem; font-weight: 700; margin-bottom: 1.6rem; letter-spacing: -0.04rem; }
.section h2 { font-size: 1rem; line-height: 1.6rem; color: var(--bluegray); }

.section .box_wrap { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 3.4rem; }
.section .box_wrap .box { flex: 1; background-color: var(--white); flex-basis: 340px; border-radius: 10px; overflow: hidden; }
.section .box_wrap .box .box_top { width: 100%; height: 250px; background-color: var(--darkblue); display: flex; align-items: center; justify-content: center; padding: 2.5rem 4rem; }

.section .box_wrap .box .box_top .box_mobile { width: 100%; max-width: 240px; display: flex; flex-direction: column; gap: 0.5rem; }
.section .box_wrap .box .box_top .box_mobile i { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.section .box_wrap .box .box_top .box_mobile i svg { fill: var(--white); }
.section .box_wrap .box .box_top .box_mobile i span { font-size: 11px !important; border-radius: 5px; background-color: var(--white); color: var(--blue); padding: 5px; }
.section .box_wrap .box .box_top .box_mobile p { width: 100%; height: 20px; background-color: var(--blue); opacity: 0.3; border-radius: 5px; }
.section .box_wrap .box .box_top .box_mobile .box_mobile_banner { height: 105px; overflow: hidden; }
.section .box_wrap .box .box_top .box_mobile .box_mobile_banner ul { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.section .box_wrap .box .box_top .box_mobile .box_mobile_banner ul li { width: 100%; height: 105px; border-radius: 5px; background-color: var(--blue); padding: 15px 20px; box-sizing: border-box; color: var(--white); }
.section .box_wrap .box .box_top .box_mobile .box_mobile_banner ul li span { font-size: 18px; }
.section .box_wrap .box .box_top .box_mobile .box_mobile_banner ul li b { display: block; font-size: 11px; margin-top: 8px; }

.section .box_wrap .box .box_top .box_system ul { width: 100%; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.section .box_wrap .box .box_top .box_system ul li { width: 85px; height: 85px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: 5px; background-color: var(--bluegray); }
.section .box_wrap .box .box_top .box_system ul li svg { fill: var(--white); width: 30px; height: 30px; }
.section .box_wrap .box .box_top .box_system ul li span { font-size: 12px; color: var(--white); }

.section .box_wrap .box .box_top .box_biz ul { width: 100%; display: flex; }
.section .box_wrap .box .box_top .box_biz ul li { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; border-radius: 100%; background-color: rgb(61,118,186,.3); color: var(--white); font-size: 13px; border: 3px solid var(--darkblue); box-sizing: border-box; position: relative; }
.section .box_wrap .box .box_top .box_biz ul li:first-child { left: 25px; }
.section .box_wrap .box .box_top .box_biz ul li:last-child { left: -25px; }

.section .box_wrap .box .box_content { width: 100%; padding: 2rem; background-color: var(--white); }
.section .box_wrap .box .box_content h3 { font-size: 1.3rem; font-weight: 600; color: var(--darkblue); margin-bottom: 1rem; }
.section .box_wrap .box .box_content span { font-size: 0.95rem; line-height: 1.4rem; color: var(--bluegray); }

.section .msg_wrap { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 3.4rem; }
.section .msg .msg_con { flex: 1; background-color: var(--lightblue); flex-basis: 340px; border-radius: 10px; padding: 40px; box-sizing: border-box; overflow: hidden; }
.section .msg .msg_con > h3 { font-size: 1.3rem; color: var(--darkblue); font-weight: 700; margin-bottom: 1rem; }
.section .msg .msg_con > span { display: block; font-size: 0.9rem; line-height: 1.2rem; color: var(--bluegray); margin-bottom: 2rem; }
.section .msg .msg_con .web { width: 100%; height: 200px; border-radius: 5px; background-color: var(--white); overflow: hidden; }
.section .msg .msg_con .web .web_header { display: flex; gap: 5px; padding: 10px; background-color: var(--gray); }
.section .msg .msg_con .web .web_header p { width: 8px; height: 8px; border-radius: 100%; }
.section .msg .msg_con .web .web_header p:nth-child(1) { background-color: #eb2b00; }
.section .msg .msg_con .web .web_header p:nth-child(2) { background-color: #ffbc00; }
.section .msg .msg_con .web .web_header p:nth-child(3) { background-color: #34a50f; }
.section .msg .msg_con .web .web_wrap { padding: 10px; display: flex; justify-content: space-between; }
.section .msg .msg_con .web .web_wrap i { display: flex; flex-direction: column; gap: 10px; }
.section .msg .msg_con .web .web_wrap i p { width: 100px; height: 5px; background-color: var(--gray); }
.section .msg .msg_con .web .web_wrap i .phone { border-radius: 5px; width: 80px; height: 120px; border: 2px solid var(--gray); padding: 5px 10px; box-sizing: border-box; }
.section .msg .msg_con .web .web_wrap i .phone .phone_top { width: 5px; height: 5px; border-radius: 5px; background-color: var(--gray); margin: 0 auto; }
.section .msg .msg_con .web .web_wrap i .phone .phone_msg { display: block; content: ''; width: 100%; height: 25px; border-radius: 5px; background-color: var(--gray); margin-top: 10px; }
.section .msg .msg_con .web .web_wrap i b { border-radius: 5px; width: 55px; height: 55px; background-color: var(--gray); }
.section .msg .msg_con .api { display: flex; flex-direction: column; }
.section .msg .msg_con .api i { display: flex; align-items: center; }
.section .msg .msg_con .api i p { width: 2.8rem; height: 2.8rem; display: flex; justify-content: center; align-items: center; background-color: var(--darkblue); border-radius: 5px; }
.section .msg .msg_con .api i p img { width: 1.3rem; }
.section .msg .msg_con .api i p img { animation-name: rotateY; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate-reverse; }
@keyframes rotateY { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg) } }
.section .msg .msg_con .api i b { display: flex; align-items: center; flex: 1.5; height: 2.8rem; background-color: var(--white); font-size: 0.74rem; color: var(--darkblue); padding: 0 1rem; box-sizing: border-box; border-radius: 5px; }
.section .msg .msg_con .api i .col { display: flex; justify-content: flex-end; flex: 0.5; height: 2.8rem; }
.section .msg .msg_con .api i .col span { width: 100%; height: 1.4rem; border-bottom: 1px dashed var(--bluegray); }
.section .msg .msg_con .api i .row { display: flex; justify-content: flex-end; flex: 1; height: 3.3rem; }
.section .msg .msg_con .api i .row span { width: 82px; height: 1.9rem; border-left: 1px dashed var(--bluegray); border-bottom: 1px dashed var(--bluegray); }
.section .msg .msg_con .api i:last-child b { margin-top: 10px; }
.section .msg .msg_con .add { display: flex; flex-direction: column; gap: 10px; }
.section .msg .msg_con .add .add_box { display: flex; align-items: center; width: 100%; height: 3.2rem; background-color: var(--lightblue2); padding: 0 20px; border-radius: 5px; }
.section .msg .msg_con .add .add_box span { font-size: 0.74rem; color: var(--darkblue); }
.section .msg .msg_con .add .add_box span b { color: var(--blue); font-weight: 700; }

.section .hosting { display: flex; align-items: center; margin-top: 3.4rem; justify-content: center; gap: 6rem; background-color: var(--lightdarkblue); border-radius: 5px; padding: 5rem 0; }
.section .hosting .hosting_wrap ul { width: 100%; max-width: 310px; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.section .hosting .hosting_wrap ul li { width: 90px; height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: 5px; background-color: var(--darkblue); position: relative; left: 0; }
.section .hosting .hosting_wrap ul li img { width: 36px; height: 36px; }
.section .hosting .hosting_wrap ul li span { font-size: 12px; color: var(--white); }
.section .hosting i { display: flex; flex-direction: column; gap: 20px; text-align: center; color: var(--white); line-height: 1.4rem; }
.section .hosting i .web { min-width: 300px; width: 100%; height: 200px; border-radius: 5px; background-color: var(--darkblue); overflow: hidden; }
.section .hosting i .web .web_header { display: flex; gap: 5px; padding: 10px; background-color: var(--gray); }
.section .hosting i .web .web_header p { width: 8px; height: 8px; border-radius: 100%; }
.section .hosting i .web .web_header p:nth-child(1) { background-color: #eb2b00; }
.section .hosting i .web .web_header p:nth-child(2) { background-color: #ffbc00; }
.section .hosting i .web .web_header p:nth-child(3) { background-color: #34a50f; }
.section .hosting i .web .web_wrap { height: 172px; display: flex; align-items: center; justify-content: center; position: relative; }
.section .hosting i .web .web_wrap::after { display: block; content: ''; width: 40px; height: 10px; border-radius: 5px; background-color: var(--lightdarkblue); position: absolute; bottom: 20px; }
.section .hosting i .web .web_wrap::after { animation-name: move; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate-reverse; }
@keyframes move { 0% { left: -20px; } 100% { left: 95%; } }

.section .biz_wrap { display: flex; justify-content: space-between; margin-top: 3.4rem; gap: 1rem; }
.section .biz_wrap .biz_box { display: flex; flex-direction: column; flex: 1; justify-content: center; align-items: center; padding: 2rem; background-color: var(--lightblue); border-radius: 5px; }
.section .biz_wrap .biz_box:first-child { background: url(../images/icons/native.png) var(--lightblue) no-repeat -40% -40%; background-size: 20rem; }
.section .biz_wrap .biz_box p { border-radius: 50px; padding: 0.6rem 1.4rem; background-color: var(--blue); color: var(--white); font-size: 0.8rem; margin-bottom: 1rem; }
.section .biz_wrap .biz_box h1  { font-size: 1.3rem; color: var(--white); line-height: 2.4rem; margin: 0; }
.section .biz_wrap .biz_box h1 b { color: var(--blue); }
.section .biz_wrap .biz_box img { width: 10rem; margin-bottom: 1rem; }
.section .biz_wrap .biz_box ul { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.section .biz_wrap .biz_box ul li { width: 100%; background-color: rgba(255,255,255,.7); border: 1px solid var(--white); padding: 1rem; box-sizing: border-box; border-radius: 5px; font-size: 0.85rem; position: relative; overflow: hidden; }
.section .biz_wrap .biz_box ul li::after { width: 1.4rem; height: 1.4rem; content: ''; background-color: var(--blue); position: absolute; top: -0.7rem; left: -0.7rem; transform: rotate(45deg); }
.section .biz_wrap i { display: flex; flex-direction: column; flex: 1; gap: 1rem; }
.section .biz_wrap i .biz_box:first-child { background: var(--darkblue); }

.section .bsn { display: flex; align-items: center; justify-content: space-between; gap: 4rem; }
.section .bsn .bsn_box { display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; background-color: var(--darkblue); border-radius: 10px; padding: 50px 40px; box-sizing: border-box; }
.section .bsn .bsn_box .bsn_wrap { flex: 1; }
.section .bsn .bsn_box .bsn_wrap ul { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.section .bsn .bsn_box .bsn_wrap li { display: flex; align-items: center; gap: 20px; width: 100%; padding: 15px; background-color: var(--lightdarkblue); box-sizing: border-box; border-radius: 10px; }
.section .bsn .bsn_box .bsn_wrap li p { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 100%; background-color: var(--darkblue); }
.section .bsn .bsn_box .bsn_wrap li span { font-size: 13px; color: var(--white); line-height: 1.6; }
.section .bsn .bsn_box .bsn_wrap li span b { color: var(--lightblue2); }

.section .bsn .bsn_box .bsn_slide { background-color: var(--white); width: 180px; height: 270px; border-radius: 10px; overflow: hidden; position: relative; }
.section .bsn .bsn_box .bsn_slide ul { width: 100%; height: 190px; }
.section .bsn .bsn_box .bsn_slide ul li { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.section .bsn .bsn_box .bsn_slide ul li p { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; border-radius: 100%; background-color: var(--gray); position: relative; }
.section .bsn .bsn_box .bsn_slide ul li p span { position: absolute; background-color: var(--darkblue); color: var(--white); font-size: 13px; padding: 5px 10px; border-radius: 5px; top: -10px; right: 10px; box-shadow: 5px 5px 10px rgba(0,56,91,.2); }
.section .bsn .bsn_box .bsn_slide ul li p::before { position: absolute; top: 5px; right: 50px; width: 5px; height: 10px; border: transparent; border-right: 10px solid var(--darkblue); content: ''; display: block; transform: rotate(45deg); }
.section .bsn .bsn_box .bsn_slide i { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 80px; background-color: var(--gray); padding: 15px; box-sizing: border-box; position: absolute; left: 0; bottom: 0; }
.section .bsn .bsn_box .bsn_slide i span { font-size: 13px; color: var(--darkblue); font-weight: 500; line-height: 1.4; }

.section .bsn .bsn_text { width: 100%; }
.section .bsn .bsn_text i { display: flex; gap: 0.6rem; margin-bottom: 1rem; }
.section .bsn .bsn_text i p { padding: 0.6rem 1.2rem; border-radius: 10px; background-color: var(--blue2); font-size: 0.8rem; color: var(--white); }
.section .bsn .bsn_text h1 { font-size: 1.4rem; margin: 0; }
.section .bsn .bsn_text h2 { font-family: 'oxanium'; font-size: 2rem; margin-bottom: 1.6rem; font-weight: 600; color: var(--darkblue); letter-spacing: -0.04rem; }
.section .bsn .bsn_text span { font-size: 1rem; line-height: 1.4rem; }

.section .news .news_wrap { display: flex; flex-wrap: wrap; gap: 20px; }
.section .news .news_wrap .news_none { opacity: 0.2; }
.section .news .news_wrap a { flex: 1; flex-basis: 385px; max-width: 385px; height: 15rem; border-radius: 20px; background-color: #ccefd7; position: relative; transition: 0.3s; }
.section .news .news_wrap a::before { width: 30px; height: 30px; border-radius: 100%; background: url(../images/icons/arrow48.png) no-repeat 50% 50% var(--white); background-size: 14px; display: block; content: ''; position: absolute; right: 20px; top: 20px; opacity: 0; transition: 0.6s; }
.section .news .news_wrap a:hover::before { opacity: 1; }
.section .news .news_wrap a:hover { box-shadow: 10px 10px 30px rgba(0,56,91,.2); }
.section .news .news_wrap a:nth-child(4n+1) { background-color: #ccddef; }
.section .news .news_wrap a:nth-child(4n+2) { background-color: #cce7ef; }
.section .news .news_wrap a:nth-child(4n) { background-color: #efd1cc; }
.section .news .news_wrap a .news_box { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 30px; box-sizing: border-box; }
.section .news .news_wrap a .news_box b { font-size: 0.8rem; margin-bottom: 1.6rem; font-weight: 600; }
.section .news .news_wrap a .news_box span { font-size: 0.8rem; }
.section .news .news_wrap a .news_box h1 { flex: 1; font-size: 1.3rem; line-height: 1.4; margin: 0; color: var(--black); margin-bottom: 3rem; }

.section .contact .contact_wrap { border-top: 2px solid var(--black); }
.section .contact .contact_wrap > ul { display: flex; flex-direction: column; }
.section .contact .contact_wrap > ul > li { display: flex; align-items: center; padding: 2.5rem; border-bottom: 1px solid var(--gray2); }
.section .contact .contact_wrap > ul > li i { flex: 1; width: 100%; }
.section .contact .contact_wrap > ul > li h1 { flex: 1; font-size: 1.6rem; font-weight: 700; color: var(--black); margin: 0; }
.section .contact .contact_wrap > ul > li ul { display: flex; width: 100%; flex-direction: column; gap: 1.5rem; }
.section .contact .contact_wrap > ul > li ul li { flex: 1; display: flex; align-items: center; gap: 1rem; font-size: 0.95rem; }
.section .contact .contact_wrap > ul > li ul li img { width: 1.05rem; }
.section .contact .contact_wrap > ul > li ul li span { display: flex; align-items: center; gap: 1rem; flex-basis: 8rem; font-weight: 700; letter-spacing: -0.04; }
.section .contact .contact_wrap > ul > li ul li p { color: var(--gray3); }

/* 하단 공통 */
.footer { width: 100%; height: 300px; padding: 3rem 0; position: fixed; left:0; bottom:0; background-color: var(--bg2); z-index: -1; }
.wrapper .footer { height: 300px !important; position: inherit; left: auto; bottom: auto; z-index: 1; }
.footer .wrap { height: 100%; display: flex; justify-content: space-between; }
.footer i { height: 100%; display: flex; flex-direction: column; justify-content: space-between; color: var(--white); }
.footer i p { font-size: 0.75rem; line-height: 1.4rem; }
.footer i > p { color: var(--lightdarkblue); }
.footer i img { width: 8rem; }
.footer i .footer_nav a { font-size: 1.3rem; color: var(--lightdarkblue); font-weight: 600; margin-bottom: 15px; transition: 0.2s; }
.footer i .footer_nav a:hover { color: var(--white); }
.footer i > a { font-size: 0.7rem; color: var(--lightblue); border: 1px solid var(--lightblue); padding: 0.7rem 1.2rem; }