/* ==============================font============================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&family=Nanum+Gothic:wght@400;700;800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");


@font-face {
    font-family: 'SpoqaHanSansNeo-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



.montserrat-<uniquifier> {
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.nanum-gothic-regular {
  font-family: "Nanum Gothic", serif;
  font-weight: 400;
  font-style: normal;
}

.nanum-gothic-bold {
  font-family: "Nanum Gothic", serif;
  font-weight: 700;
  font-style: normal;
}

.nanum-gothic-extrabold {
  font-family: "Nanum Gothic", serif;
  font-weight: 800;
  font-style: normal;
}

.roboto-thin {
  font-family: "Roboto", serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", serif;
  font-weight: 900;
  font-style: italic;
}


/* ==============================RESET============================== */
body {
cursor: default;
}





html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button, textarea, input {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: 'Pretendard Variable','Roboto','Nanum Gothic',serif;
	scroll-behavior: smooth;
}


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	position:relative;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {cursor:pointer; text-decoration:none; color:#fff;}
a:hover, a:active {text-decoration: none;}
*,
*::before,
*::after {
  box-sizing: border-box;
}

button{
background: inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer}



/* ==============================INDEX============================== */





#fullpage {
  height: 100vh; /* fullPage.js가 각 영역을 100% 높이로 설정 */
}

.section {
  width: 100%; /* 각 섹션이 가로로 꽉 차도록 설정 */
  height: 100vh; /* 각 섹션이 브라우저 높이를 차지 */
  position: relative; /* 섹션 내부 요소가 정확히 배치되도록 보장 */
  overflow: hidden; /* 불필요한 스크롤 방지 */
}







#header {transition: top 0.3s ease-in-out;  width:100%; height:82px; padding: 0px 100px; background-color:#fff; box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.10); position:fixed; top:0 ;left:0; z-index:23;}
#header .header-wrap {display:flex; justify-content:space-between; align-items:center; height:100%;}
#header .header-wrap a img {width:180px;}
#header .menu-wrap {display:flex; gap:28px; align-items:center;}
#header .menu-wrap .call-btn {background-color:#eaeef1; color:#08376B; padding:8px 24px; border-radius:40px; font-weight:600; display:flex; gap:8px; align-items:center;}
#header .menu-wrap .call-btn img {width:16px; height:16px;}
#header .burgerBtn {transition:0.3s; display:flex; flex-direction:column; gap:5px; justify-content:center; align-items:center; }
#header .burgerBtn span {transition:0.3s; height:2px; width:26px; background-color:#031325; border-radius:2px;}
#header .burgerBtn:hover span:first-child {width:20px}
#header .burgerBtn:hover span:last-child {width:20px}



#menuPage {position:fixed; top:0; left:0; width:100%; height:100vh; background: url('../images/main/menuPage-bg.png');  z-index:50; display:flex; justify-content:center; align-items:center; display:none;}
#menuPage .topDeco { position:absolute; top:20px; left:0; display:flex; align-items:center; margin-left:100px; color:#a1a1a1; font-weight:200;font-size:14px; }
#menuPage .topDeco span {margin-right:16px; width:160px; height:1px; background: rgba(255, 255, 255, 0.30);}
#menuPage .topDeco p {font-weight:300; margin-left:4px;}
#menuPage .btmDeco {position:absolute; bottom:20px; right:0; display:flex; align-items:center; margin-right:100px; color:#a1a1a1; font-weight:200;font-size:14px; }
#menuPage .btmDeco span {margin-left:16px; width:160px; height:1px; background: rgba(255, 255, 255, 0.30);}
#menuPage .btmDeco p {font-weight:300; margin-left:4px;}
#menuPage .colseBtn {display:flex; align-items:center; justify-content:center; transition:0.3s; position:absolute; top:28px; right:90px; width:38px; height:38px; background:none;}
#menuPage .colseBtn:hover {animation:closeBtn 0.5s forwards;}
#menuPage .colseBtn img {width:32px; height:32px; opacity:0.7;}
#menuPage .menuWrap {position:absolute; top:50%; right:50%; transform: translate(50%, -50%); display:flex; flex-direction:column; gap:50px; justify-content:center; align-items:center;}
#menuPage .menuWrap li a {transition:0.4s; font-size:44px; font-weight:400;  color:#5B6777;}
#menuPage .menuWrap li:hover {scale:1.1;}
#menuPage .menuWrap li:hover a {color:#fff; font-weight:500}
#menuPage .menuWrap li {transition:0.3s;}
#menuPage .menuWrap li a::after {opacity:0.7; content: ""; position: absolute;left: 0;top: 100%;width: 100%;height: 1px;background-color: #fff;transform: scale(0);transition: transform 0.3s;margin-top:10px;}
#menuPage .menuWrap li:hover > a::after {opacity:1; transform: scale(1);}


/*bottomFormBar*/
#bottomFormBar {align-items:center; z-index:40; width:100%; background-color:#08101A; height:80px; position:fixed; bottom:0 ; left:0; display:flex; gap:40px; justify-content:space-between;} 
#bottomFormBar .phoneNum {padding:0 80px 0 100px; width:25%; background-color:#08376B; color:#fff; display:flex; align-items:center; justify-content:space-between; height:100%;}
#bottomFormBar .phoneNum div {color:#F2F2F2; font-size:16px; display:flex; gap:4px; align-items:center;}
#bottomFormBar .phoneNum div img {width:18px; height:18px;}
#bottomFormBar .phoneNum p {color:#F2F2F2; font-size:28px; font-weight:600; padding-top:2px;}
#bottomFormBar .inputSection {display:flex; align-items:center; gap:40px;}
#bottomFormBar .inputSection label {font-size:16px; color:#fff; font-weight:400; margin-right:4px; display:flex; gap:12px; align-items:center;}
#bottomFormBar .inputSection input {width:16vw; height:48px; background-color:#292A2E; padding:20px; color:#5D5E5F; font-size:16px; border-radius:4px;}
#bottomFormBar .inputSection label:last-child {font-size:14px; font-weight:400; color:#c1c1c1; gap:0px;}
#bottomFormBar .inputSection label:last-child a {font-size:14px; color:#c1c1c1; padding-bottom:1px; border-bottom:1px solid #c1c1c1; margin-left:8px;}
#bottomFormBar .inputSection .chkBox {width:16px; height:16px; }
#bottomFormBar .formBtn {display:flex; align-items:center;}
#bottomFormBar .formBtn button {width:120px; height:44px; background-color:#103D6F; color:#fff; font-size:16px; font-weight:600; border-radius:4px; margin-right:100px;}


#bottomFormBar-M {display:none;}




#indexMain {width:100%; height:100vh; background: url('../images/main/main-bg.png'); position:relative; display:flex;justify-content:center; align-items:center;}
#indexMain .main-bg {width:100%; height:100vh; background: linear-gradient(0deg, rgba(41, 41, 41, 0.50) 10.05%, rgba(13, 13, 13, 0.95) 97%); position:absolute; top:0; left:0;}
#indexMain .main-text-wrap { position:relative; cubic-bezier(0.77, 0, 0.175, 1); gap:40px; position:relative; z-index:20; color:#fff; display:flex; flex-direction:column; align-items:center;}
#indexMain .main-text-wrap .title01 > h1{animation:mainTitle 18s infinite;}
#indexMain .main-text-wrap .title01 > p{opacity:0; animation:mainTitle 18s infinite; animation-delay: 0.3s}
#indexMain .main-text-wrap .title02 > h1{opacity:0;animation:mainTitle 18s infinite; animation-delay: 6s;}
#indexMain .main-text-wrap .title02 > p{opacity:0; animation:mainTitle 18s infinite; animation-delay: 6.3s}
#indexMain .main-text-wrap .title03 > h1{word-break:keep-all; opacity:0;animation:mainTitle 18s infinite; animation-delay: 12s;}
#indexMain .main-text-wrap .title03 > p{opacity:0; animation:mainTitle 18s infinite; animation-delay: 12.3s}
#indexMain .main-text-wrap .title02 {position:absolute; top:0; bottom:0;}
#indexMain .main-text-wrap .title03 {position:absolute; top:0; bottom:0;}
#indexMain .main-text-wrap h1 { margin-bottom:40px; text-align:center; word-break:keep-all; color: rgba(249, 249, 249, 0.98); font-size: 80px; font-style: normal;font-weight: 700;line-height:90px; }
#indexMain .main-text-wrap p { color: rgba(238, 238, 238, 0.98);text-align: center; font-size:28px;font-style: normal;font-weight: 300; line-height: 40px;}
#indexMain .main-text-wrap span { font-weight:600;}


#aboutPage {width:100%; height:100vh; background: linear-gradient(180deg, #F5F9FE 0%, #E6F0FC 100%); padding: 120px 0; position:relative; overflow:hidden}
#aboutPage .text-wrap {overflow:hidden;  display:flex; flex-direction:column; align-items:center; gap:16px; margin-bottom:110px; }
#aboutPage .text-wrap h2 {animation: slideup 1.5s forwards; font-size:48px; color: #000;font-family: Pretendard;font-size: 52px;font-style: normal;font-weight: 600; line-height: normal; letter-spacing: 0.52px;}
#aboutPage .text-wrap p {opacity:0; animation: slideup 1.5s forwards; animation-delay: 1s; color:#414141; text-align:center; font-size:22px; font-weight:300; line-height:28px;}
#aboutPage .text-wrap span {opacity:0; animation: slideup 1.5s forwards; animation-delay: 1s; color: #7B7B7B;text-align: center; font-size: 16px;font-weight: 300;}
#aboutPage .data-section {filter: drop-shadow(0px 0px 9px rgba(36, 70, 107, 0.10)); width:100%; padding:72px 100px; background: rgba(255, 255, 255, 0.60);  backdrop-filter: blur(12px); display:flex; justify-content:space-between;}
#aboutPage .data-section .data-wrap { display:flex; flex-direction:column; gap:16px; width:170px; }
#aboutPage .data-section .data-wrap p {color:#3C454E; font-size:20px; font-weight:300; }
#aboutPage .data-section .data-wrap span {transition:0.4s; color:#08376B; text-align:left; font-weight:700; font-family: "Spoqa Han Sans Neo"; font-size:44px;}
#aboutPage .data-section .data-wrap i {font-size:24px; margin-left:4px; color:#08376B; font-weight:600;}
#aboutPage .bg {position:absolute; bottom:-40%; right:50%; transform: translateX(50%);     opacity: 0.25;}
#aboutPage .bt-text {display:flex; align-items:center; justify-content:end; gap:50px; color:#424242; font-size:24px; margin-top:120px; padding:0 100px;}
#aboutPage img {width:}


#casePage {width:100%; height:100vh; padding:120px 100px; overflow:hidden;}
#casePage .header-wrap { display:flex; align-items:center; flex-direction:column; gap:28px; margin-bottom:80px;}
#casePage .header-wrap h2 {animation: slideup 1.5s forwards; text-align:center; font-size:48px; color: #000;font-family: Pretendard ;font-style: normal;font-weight: 300; line-height: normal;  letter-spacing: 0.52px; }
#casePage .header-wrap h2 span {font-weight:600;}
#casePage .header-wrap a {opacity:0; animation: slideup 1.5s forwards; animation-delay: 1s; transition:0.4s; color:#848484; display:flex; gap:6px; align-items:center; font-size:18px; border:1px solid #DADADA; padding:6px 16px; border-radius:40px; font-weight:300;}
#casePage .header-wrap a:hover {scale:1.05; background-color:#103D6F; color:#fff; font-weight:500; border:1px solid #103D6F; }
#casePage .header-wrap a:hover span {background-image: url('../images/sub/right-icon02.png');}
#casePage .header-wrap a > span {transition:0.4s; width:16px; height:16px; background-image: url('../images/sub/right-icon.png'); background-size:cover; }
#casePage .article-wrap {width:100%; display:flex; align-items:center; gap:34px; position:relative; }
#casePage .article-wrap .left-sec-wrap {}
#casePage .article-wrap .left-sec-wrap ul {font-size:28px; color:#1B1C1D; font-weight:600; display:flex; flex-direction:column; gap:20px; }
#casePage .article-wrap .left-sec-wrap ul > div {margin-bottom:30px; display:flex; align-items:end; gap:20px;}
#casePage .article-wrap .left-sec-wrap ul > div > span {transition:0.3s; animation:workTextLine 1s forwards; width:250px; height:1px; background-color:#000; display:inline-block; margin-bottom:2px;}
#casePage .article-wrap .left-sec-wrap li {align-items:center; animation:caseLine 0.8s; transition:0.3; font-size:18px; color:#2F2F2F; font-weight:500; display:flex; gap:8px;}
#casePage .article-wrap .left-sec-wrap li > img {width:16px; height:14px;}
#casePage .article-wrap .right-sec-wrap {width:70%; display:flex; }
#casePage .article-wrap .right-sec-wrap .caseBox {transition:0.4s;max-width:380px; height:420px; border-radius:20px; border:1px solid #dfdfdf; padding:50px 40px; }
#casePage .article-wrap .right-sec-wrap .caseBox::after {transition:0.5s; z-index: -4;width:0%; content:""; height:100%; position:absolute; top:0; left:0; background-color:#f4f9ff;border-radius:20px;}
#casePage .article-wrap .right-sec-wrap .caseBox:hover {background-color:#1B4879;}
#casePage .article-wrap .right-sec-wrap .caseBox:hover .text-wrap div {color:#efefef;}
#casePage .article-wrap .right-sec-wrap .caseBox:hover .text-wrap p {color:#dddddd;}
#casePage .article-wrap .right-sec-wrap .caseBox:hover .text-wrap span {color:#dddddd;}
#casePage .article-wrap .right-sec-wrap .caseBox:hover span:first-child {background-color:#e8f3ff; color:#0a2d53; font-weight:500;}
#casePage .article-wrap .right-sec-wrap .caseBox .text-wrap {display:flex; flex-direction:column; margin-top:70px; gap:26px;}
#casePage .article-wrap .right-sec-wrap .caseBox .text-wrap span {transition:0.4s; color:#969696; font-weight:300; margin-top:30px; text-align:end;}
#casePage .article-wrap .right-sec-wrap .caseBox span:first-child {transition:0.3s; padding:6px 12px; flex-grow:0 ; background-color:#103D6F; border-radius:40px; color:#fff;}
#casePage .article-wrap .right-sec-wrap .caseBox .text-wrap div {transition:0.3s; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size:28px; font-weight:600; line-height: 35px; color: #1B1B1B;}
#casePage .article-wrap .right-sec-wrap .caseBox .text-wrap p {transition:0.3s; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;font-size:18px; font-weight:300; line-height: 26px; color:#676767}
#casePage .caseSwiper-wrap {position:absolute; width:140px; right:0; bottom:-50px; z-index:20; }
#casePage .caseSwiper-wrap .caseSwiper-btn {color:#878787; border:1px solid #E9E9E9; border-radius:40px; padding:20px;  font-size:12px;}
#casePage .caseSwiper-wrap .swiper-button-prev:after, .swiper-button-next:after {font-size: 20px !important; font-weight: 300 !important;}
#casePage .caseSwiper {width:70%;}

#member-intro {width:100%; height:100vh;     background: linear-gradient(180deg, #e9eff5 0%, #f7fbff 100%); padding:100px 0px; overflow:hidden;} 
#member-intro .header-wrap { display:flex; align-items:center; flex-direction:column; gap:8px; margin-bottom:40px;}
#member-intro .header-wrap h2 {margin:0 12px; opacity:0; animation: slideup 1.5s forwards;  animation-delay: 0.5s; text-align:center; font-size:46px; color: #292929; font-style: normal;font-weight: 300; line-height: normal;  letter-spacing: 0.52px; }
#member-intro .header-wrap h2 span {font-weight:600; color:#000;}
#member-intro .header-wrap h2 img {width:36px; height:36px; margin-bottom:12px; margin-right:12px; }
#member-intro .header-wrap h2 img:last-child {margin-left:12px; margin-right:0;}
#member-intro .header-wrap p { animation: slideup 1.5s forwards;  font-weight:200; font-size:20px;}
#member-intro .content-wrap {display:flex; gap:40px; align-items:center;}
#member-intro .text-wrap {margin-left:100px; display:flex; align-items:center; justify-content:center; padding:80px 52px; font-size:40px; font-weight:500; width:520px; word-break:keep-all; background-color:#fff; height:560px; border-radius:20px; border:1px solid #ebebeb; margin-top:22px;}
#member-intro .text-wrap p {width:360px; line-height: 52px; font-weight:600; margin-bottom:40px;}
#member-intro .text-wrap p span {color:#08376B;}
#member-intro .text-wrap a:hover {background-color:#08376B; border: 1px solid var(--Color, #08376B); color:#fff;}
#member-intro .text-wrap a:hover img {animation: viewMore 1s forwards; display:block}
#member-intro .text-wrap a > img {transition:0.4s; display:none; width:24px; height:24px;}
#member-intro .member-wrap {display:flex; }
#member-intro .member-wrap .member-box {border:1px solid #EDEDED; transition:0.4s; margin-top:40px; background-color:#fff; border-radius:16px; height:560px;  width:360px; display:flex; align-items:end; position:relative; }
#member-intro .member-wrap .member-box:hover .member {scale:1.03;}
#member-intro .member-wrap .member-box .member {transition:0.4s; position:absolute; right:50%; top:-5%; transform: translateX(50%); width:100%;} 
#member-intro .member-wrap .member-box .member-text-wrap {height:260px; padding:36px 40px; height:240px; width:100%; background-color:#123b69; border-radius:16px; overflow:hidden; position:relative; }
#member-intro .member-wrap .member-box .member-text-wrap ul {gap:14px; display:flex; flex-direction:column;}
#member-intro .member-wrap .member-box .member-text-wrap ul div {gap:10px; font-size:30px; color:#fff; font-weight:600; display:flex; align-items:end; margin-bottom:8px;}
#member-intro .member-wrap .member-box .member-text-wrap ul div p {font-size:18px; color:#f1f1f1; font-weight:500; }
#member-intro .member-wrap .member-box .member-text-wrap ul li {padding-left:2px; color:#e3e3e3; font-size:18px; font-weight:300; text-decoration:none;}
#member-intro .member-wrap .member-box .member-text-wrap img {position:absolute; bottom:0 ;right:0;}
#member-intro .memberSwiper {height:610px;}



#recognition .text-sec h2 {font-size:48px; text-align:center; line-height:54px; font-weight:300; padding:180px 0px;}
#recognition .text-sec h2 span {font-weight:600;}
#recognition .license-img {width:120px; margin-left:20px;}
#recognition .media-img {width:280px;}
#recognition .license-sec .emblem-img {display:flex; flex-direction:column; gap:8px; width:15vw; align-items:center;}
#recognition .license-sec .emblem-img img {width:120px;}
#recognition .license-sec .emblem-img p {font-weight:500; color:#2e2e2e; font-size:16px; text-align:center; line-height:20px; word-break:keep-all;}







#workArea {width:100%; height:100vh; background:url('../images/main/workArea-bg.png'); background-size:100% 100%; padding:120px 100px; display:flex; align-items:center; justify-content:space-between; }
#workArea .work-text-wrap {display:flex; flex-direction:column; gap:40px; margin-bottom:200px;}
#workArea .work-text-wrap p {font-size:28px; font-weight:300; display:flex; align-items:end; gap:20px; color:#041425}
#workArea .work-text-wrap p::after {transition:0.3s; animation:workTextLine 1s forwards;  content:""; width: 180px ;height: 1px;background-color: #000; display:block; margin-bottom:2px;}
#workArea .work-text-wrap h2 {opacity:0; animation: slideup 1.5s forwards; font-size:48px; font-weight:600;}
#workArea .work-text-wrap div {opacity:0; animation: slideup 1.5s forwards; animation-delay: 1s; font-size:20px; font-weight:300; line-height:28px; color:#3E3E3E;}
#workArea .workArea-main {width:60%; display:flex; flex-direction:column; gap:28px;}
#workArea .workArea-main .boxWrap {width:100%; display:flex; gap:28px; }
#workArea .workArea-main .boxWrap .workBox {transition:0.3s; display:flex; flex-direction:column; gap:18px; padding: 36px 34px; width:33%; background-color:#264f7d;  border-radius: 32px 12px 12px 12px; box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.25);}
#workArea .workArea-main .boxWrap .workBox:hover {scale:1.05;}
#workArea .workArea-main .boxWrap .workBox p {color: #B8C7D8;font-family: Montserrat; font-size: 36px; font-weight: 200; }
#workArea .workArea-main .boxWrap .workBox h3 {gap:4px; display:flex;font-size: 28px; color:#fff; font-weight:500; align-items:end;}
#workArea .workArea-main .boxWrap .workBox h3 > p {font-size:18px; font-weight:400;}
#workArea .workArea-main .boxWrap .workBox span {font-size: 20px; color:#DCDCDC; font-weight:200; line-height: 26px; word-break:keep-all; }


#reviewPage {overflow:hidden; position:relative; width:100%; height:100vh; padding:120px 0; display:flex; align-items:center; gap:120px;}
#reviewPage .review-title {width:auto; margin-left:100px;}
#reviewPage .review-title p {animation: slideup 1.5s forwards; margin-bottom:36px;font-size:28px; font-weight:300; display:flex; align-items:end; gap:20px; color:#041425}
#reviewPage .review-title p::after {transition:0.3s; animation:workTextLine 1s forwards;  content:""; width: 180px ;height: 1px;background-color: #000; display:block; margin-bottom:2px;}
#reviewPage .review-title h2 {word-break:keep-all; line-height:56px; margin-bottom:36px; opacity:0; animation: slideup 1.5s forwards; animation-delay: 0.5s; font-size:48px; font-weight:600;}
#reviewPage .review-title div {width:260px; word-break:keep-all; margin-bottom:36px; opacity:0; animation: slideup 1.5s forwards; animation-delay: 1s; font-size:20px; font-weight:300; line-height:26px; color:#3E3E3E;}
#reviewPage .reivew-bg {position:absolute; right:-40px; top:45%;  z-index:-1;}
#reviewPage .review-wrap {display:flex;}
#reviewPage .review-wrap .review-box {transform:scale(1); text-align:left; color:#fff; transition:0.4s; position:relative; display:flex; flex-direction:column; gap:40px; background-color:#08376A; width:420px !important; height:400px; border-radius: 40px 40px 4px 40px; padding:100px 70px 80px 70px; }
#reviewPage .review-wrap .review-box:hover h3 {transform:scale(1.1);}
#reviewPage .review-wrap .review-box:hover img {width:44px; height:44px;}
#reviewPage .review-wrap .review-box:nth-child(even) {background-color:#fff; color:#000; border:1px solid #E9E9E9;}
#reviewPage .review-wrap .review-box:nth-child(even) span {color:#000;}
#reviewPage .review-wrap .review-box:nth-child(even) span svg path {transition:0.4s; fill: #000;}
#reviewPage .review-wrap .review-box > img {transition:0.4s; position:absolute; top:40px; right:40px; width:40px; height:40px;} 
#reviewPage .review-wrap .review-box h3 {transition:0.3s; font-size:32px; font-weight:600; }
#reviewPage .review-wrap .review-box h3 > p {font-size:20px; margin-bottom:8px; display:flex; justify-content:end;}
#reviewPage .review-wrap .review-box p {font-size:18px; font-weight:200;line-height: 26px; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;  }
#reviewPage .review-wrap .review-box span {justify-content:end; gap:8px; display:flex; align-items:center; font-size:18px; font-weight:200;}
#reviewPage .review-wrap .review-box span svg {width:16px; height:16px;}


#legalInfo {width:100%; height:100vh; background: url('../images/main/legalInfo-bg.png');  background-size:100% 100%; padding:120px 0; display:flex; align-items:center; justify-content:space-between}
#legalInfo .legalInfo-title {width:30%; margin-left:100px;}
#legalInfo .legalInfo-title p { font-family:roboto;margin-bottom:20px;font-size:28px; font-weight:300; display:flex; align-items:end; gap:20px; color:#041425}
#legalInfo .legalInfo-title h2 {line-height:56px; margin-bottom:36px; animation: slideup 1.5s forwards; font-size:48px; font-weight:600;}
#legalInfo .legalInfo-title span {opacity:0; animation-delay: 0.5s;  transition:0.3s; animation: legalInfoTextLine 1.5s forwards;  height:120px; width:1px; background-color:#000; content:none; display:block;}
#legalInfo .legalInfo-title div {width:260px; word-break:keep-all; margin:36px 0; opacity:0; animation: slideup 1.5s forwards; animation-delay: 0.5s; font-size:20px; font-weight:300; line-height:26px; color:#3E3E3E;}
#legalInfo .legalInfo-wrap {justify-content: space-between; width:80%; display:flex; flex-wrap:wrap; gap:30px; margin-right:100px;}
#legalInfo .legalInfo-wrap .legalInfo-box {border: 1px solid #E7ECF0; transition:0.5s; display:flex; justify-content:center; align-items:end; flex-direction:column;  width: calc(33% - 20px); height:280px; background-color:#fff; border-radius:24px;color:#1E1E1E;; padding:20px 40px; }
#legalInfo .legalInfo-wrap .legalInfo-box:hover {box-shadow: 0px 0px 10px 8px rgba(40, 93, 151, 0.10);}
#legalInfo .legalInfo-wrap .legalInfo-box:hover a {margin-top:20px; transform: scale(1); width:40px; height:40px; }
#legalInfo .legalInfo-wrap .legalInfo-box:hover p {color:#08376B; font-weight:500;}
#legalInfo .legalInfo-wrap .legalInfo-box div {display:flex; flex-direction:column; gap:28px; width:100%;}
#legalInfo .legalInfo-wrap .legalInfo-box p {font-family:roboto; transition:0.5s; font-size:16px; font-weight:300;}
#legalInfo .legalInfo-wrap .legalInfo-box h3 { line-height:28px; word-break:keep-all; font-size:24px; font-weight:600; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;}
#legalInfo .legalInfo-wrap .legalInfo-box span {word-break:keep-all;line-height:24px;  font-size:18px; font-weight:200; color: #787878; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#legalInfo .legalInfo-wrap .legalInfo-box a {transform: scale(0); transition:0.5s; background-color:#08376B; display:flex; width:0px; height:0px; border-radius:100px;  justify-content:center; align-items:center;}
#legalInfo .legalInfo-wrap .legalInfo-box a img {width:16px; height:14px;}


#applyPage {width:100%; height:100vh; background-color:#f5f9ff; display:flex; align-items:center; justify-content:space-between;}
#applyPage .applyTitle {width:30%; margin-left:100px; display:flex; flex-direction:column; gap:80px;}
#applyPage .applyTitle img {width:280px;}
#applyPage .applyTitle h2 {word-break:keep-all; font-size:48px; font-weight:300; line-height:58px; color:#020C17}
#applyPage .applyTitle h2 span {font-weight:600;}
#applyPage .applyForm { gap:60px;   width:60%; background: url('../images/main/applyForm-bg.png'); background-size:100% 100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;}
#applyPage .applyForm h3 {position:relative;  z-index:4; word-break:keep-all; font-size:32px; font-weight:400; color:#fff;}
#applyPage .applyForm h3 span {font-weight:600; position:relative; }
#applyPage .applyForm h3 span::after {opacity:0.9; content: ""; z-index:-2; position: absolute; left: -10%; top: 40%;width: 40px;height: 24px; background-color:#6d9ed5;}
#applyPage .applyForm h3 span:first-child::after {width:60px;}
#applyPage .applyForm form fieldset {justify-content:center; align-items:center; color:#fff; display:flex; flex-direction:column; gap:20px;}
#applyPage .applyForm form fieldset label {display:flex; flex-direction:column; gap:12px;}
#applyPage .applyForm form fieldset label input {background-color:#fff; opacity:0.8; width:460px; height:48px; border-radius:4px; border:none; padding-left:12px;font-weight:200; }
#applyPage .applyForm form fieldset label input:focus {outline: 2px solid #2c2c2c;}
#applyPage .applyForm form fieldset label textarea { padding:12px; height:240px; background-color:#fff; opacity:0.8; width:460px; border-radius:4px; border:none; font-weight:200; }
#applyPage .applyForm form fieldset label textarea:focus {outline: 2px solid #2c2c2c;}
#applyPage .applyForm form fieldset .agree {display:flex; flex-direction:row; align-items:center; gap:8px; font-size:18px; font-weight:200; margin-top:20px;}
#applyPage .applyForm form fieldset .agree input {width:20px;}
#applyPage .applyForm form fieldset .agree input:focus {outline:none;}
#applyPage .applyForm form fieldset .agree a {transition:0.3s; position:relative; font-size:16px; margin-left:12px; font-weight:400;}
#applyPage .applyForm form fieldset .agree a:hover {scale:1.05;}
#applyPage .applyForm form fieldset button {box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);height:54px; width:380px; background-color:#11437A; color:#fff; font-size:18px; font-weight:500; border-radius:4px;}


#locationPage {width:100%; height:100vh; padding:100px 100px;}
#locationPage h2 {font-size:48px; display:flex; align-items:end; gap:20px; font-weight:500; margin-bottom:40px;}
#locationPage h2::after {transition:0.3s; animation:workTextLine 1s forwards;  content:""; width: 200px ;height: 1px;background-color: #000; display:block; margin-bottom:2px;}
#locationPage .LocationGuide {display:flex; flex-direction:column; gap:40px; border-radius:16px;}
#locationPage .LocationGuide .sub-title {display:flex; gap:20px; align-items:center;}
#locationPage .LocationGuide .sub-title h3 {font-size:24px; font-weight:500;}
#locationPage .LocationGuide .sub-title a {transition:0.4s; align-items:center; padding:6px 16px; background-color:#fff; border:1px solid #d1d1d1; border-radius:62px; color:#737373;  font-size:16px; display:flex; gap:4px;}
#locationPage .LocationGuide .sub-title a:hover {background-color:#08376 A; color:#fff; border: 1px solid #08376A;}
#locationPage .LocationGuide .sub-title a:hover svg path {stroke:#fff;}
#locationPage .LocationGuide .Guide-text {background-color:#f8f9fb; flex-direction:column; gap:32px; padding:60PX 40px; border-radius:16px;}
#locationPage .LocationGuide .Guide-text div {display:flex; gap:20px; align-items:center;}
#locationPage .LocationGuide .Guide-text div:last-child {align-items:start;}
#locationPage .LocationGuide .Guide-text div div {font-size:20px; color:#2f2f2f; font-weight:500;}
#locationPage .LocationGuide .Guide-text div div span {background-color:#fff; border-radius:40px; width:36px; height:36px; display:flex; justify-content:center; align-items:center;}
#locationPage .LocationGuide .Guide-text div p {font-size:20px; font-weight:300; margin-left:20px;}
#locationPage .LocationGuide .Guide-text div:last-child  p {line-height:1.5;}
#locationPage .LocationGuide .Guide-text div div span img {width:22px; height:22px;}
#locationPage .btn-wrap {display:flex; gap:20px; width:100%; justify-content:space-between; margin-bottom:20px; align-items:center; }
#locationPage .btn-wrap .map-btn {transition:0.3s; gap:4px; color:#737373; display:flex; align-items:center; justify-content:center; font-size:16px; height:48px; padding:12px 68px; border-radius:4px; border:1px solid #ddd; background-color:#fff; }
#locationPage .btn-wrap .map-btn:hover {background-color:#103d6f; color:#fff; font-weight:500;}
#locationPage .btn-wrap .map-btn span {transition:0.3s; display:flex; align-items:center; justify-content:Center; margin-bottom:2px; width:24px; height:24px; background-image:url('../images/sub/download-icon.png'); background-repeat:no-repeat; background-position:center;}
#locationPage .btn-wrap .map-btn:hover span {background-image: url('../images/sub/download-icon02.png');}
#locationPage .btn-wrap .tap-wrap {display:flex; width:50%; gap:20px; padding-right:30px;}
#locationPage .btn-wrap .tap-btn {font-size:20px; padding:16px 40px; background-color:#fff; color:#727272; border-radius:4px; width:100%; border:1px solid #E6E6E6;}
#locationPage .btn-wrap .tap-btn.on {background-color:#08376A; color:#fff;}
#locationPage .tap-btn {padding: 10px 20px; background-color: #f1f1f1; border: 1px solid #ddd;cursor: pointer; border-radius: 5px;}
#locationPage .tap-btn.active {background-color:#103d6f ; color: #fff; font-weight:600; }
#locationPage .tab-content {display: none;}
#locationPage .tab-content .content-wrap {display:flex; gap:60px;}
#locationPage .tab-content.active {display: block;}
#locationPage .map-container {width: 50%; height:560px !important; border: 1px solid #ddd; border-radius: 8px; }
#locationPage .tab-content .content-wrap .text-wrap {height:560px; justify-content:center; display:flex; gap:60px; flex-direction:column; width:50%; padding:48px; background-color:#F7F8FC; border-radius:8px;}
#locationPage .tab-content .content-wrap .text-wrap h3 {font-size:28px; font-weight:500; }
#locationPage .text-wrap .text-content {display:flex; flex-direction:column; gap:28px;}
#locationPage .text-wrap .text-content > div {display:flex; align-items:center;  font-size:22px; font-weight:300;}
#locationPage .text-wrap .text-content > div > div   {width:24%; display:flex; align-items:center; gap:12px; font-size:22px; font-weight:500;}
#locationPage .text-wrap .text-content > div > p {line-height:24px; word-break:keep-all; }
#locationPage .text-wrap .text-content div span {display:flex; align-items:center; justify-content:center; background-color:#fff; border-radius:40px; padding:8px;}
#locationPage .text-wrap .text-content div span img {width:24px; height:24px;}
#locationPage .text-wrap .text-content > div:nth-child(4) {align-items:start; }



/*약도 팝업 2025-04-29*/
#locationPage h2.popup-title {font-size: 20px; font-weight: bold;margin-bottom: 10px;}
.popup-overlay {position: fixed;top: 0;left: 0;width: 100%; height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 1000;display: flex;justify-content: center;align-items: center;}
.popup-content {background: white;padding: 25px;border-radius: 10px;max-width: 450px; width: calc(100% - 40px);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);text-align: left;position: relative;animation: popup-scale-in 0.3s ease-out;}
.popup-close {position: absolute;top: 15px;right: 15px;background: none;border: none; font-size: 20px;cursor: pointer;color: #888;transition: color 0.3s;}
.popup-close:hover {color: #000;}
.popup-description { font-size: 14px;margin-bottom: 15px;color: #555;}
.popup-address {font-size: 14px;color: #333;line-height: 1.5; margin-bottom: 20px;}
.popup-map {width: 100%;border-radius: 8px;margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.input-group {display: flex; gap: 8px; margin-bottom: 10px;}
.input-group input {flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 5px;font-size: 14px;box-sizing: border-box; width:33%;}
.checkbox-group {display: flex;align-items: center;font-size: 12px;color: #555; margin-bottom: 15px;}
.checkbox-group input { margin-right: 5px;}
.popup-submit { width: 100%; background: #0044cc; color: white;font-size: 15px; font-weight: bold;border: none;padding: 12px 0; border-radius: 7px;cursor: pointer;transition: background 0.3s;}
.popup-submit:hover {background: #0033aa;}

/* 팝업 애니메이션 */
@keyframes popup-scale-in {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}



#footer {width:100%; background-color:#041931; padding:60px 100px 140px ; position:relative; overflow:hidden;}
#footer .top {display:flex; justify-content:space-between; margin-bottom:20px;}
#footer .top img {height:55px;}
#footer .top div {display:flex; flex-direction:column; color:#fff; gap:20px;}
#footer .top div > span {height:10px; width:1px; background-color:#B0B0B0;}
#footer .top div div {display:flex; gap:20px; flex-direction:row; align-items:center; color:#B0B0B0;} 
#footer .top div div a {color:#B0B0B0;}
#footer .top div div img {width:40px; height:40px;}
#footer .footer-text-wrap {display:flex; gap:80px; color:#A7A7A7; font-weight:200;}
#footer .footer-text-wrap div {display:flex; flex-direction:column; gap:16px; font-size:18px;}
#footer .footer-text-wrap div h3 {font-size:20px; font-weight:400;}
#footer .footer-text-wrap div p {font-size:16px; line-height:18px;}
#footer .footer-bg {position:absolute; bottom:-20px; right:0;}
#footer .bottom {width:100%; border-top:1px solid #2C3A48; margin:60px auto 0; position:relative;}
#footer .bottom p {color:#A6A6A6; font-size:14px; font-weight:200; text-align:end; margin-top:20px;}













/* ==============================BTN============================== */




.viewBTN {transition:0.4s  ease; display:inline-flex; align-items:center; height:38px; gap:4px; padding:8px 20px; border-radius: 30px; border: 1px solid #A5A5A5; color:#696969; font-size:16px; font-weight:200; }
.viewBTN:hover {background-color:#08376B; border: 1px solid var(--Color, #08376B); color:#fff;}
.viewBTN:hover img {animation: viewMore 1s forwards; transform: scale(1);  width:24px; height:24px;}
.viewBTN > img {transition:0.4s; transform: scale(0); width:0px; height:0px;}






/* ==============================animation============================== */


@keyframes slideup {
              0% {
	opacity:0; transform: translateY(100%)
  }

  100% {
	opacity:1; transform: translateY(0)
  }
}

@keyframes mainTitle {

	0% {opacity:0;  transform: translateY(100%)}
	10% {transform: translateY(0); opacity:1}
	30% {transform: translateY(0); opacity:1}
	35% {opacity:0;}
	100% {opacity:0;}
}


@keyframes viewMore  {
              0% {
	transform: scale(0) ; transform: rotateZ(180deg);
  }

  100% {
	transform: scale(1); transform: rotateZ(0deg)
  }
}


@keyframes closeBtn {
              0% {
	 transform: rotateZ(230deg);
  }

  100% {
	 transform: rotateZ(90deg);
  }
}


@keyframes workTextLine {
              0% {
	 width:0%; 
  }

  100% {
	 width:160px;
  }
}

@keyframes legalInfoTextLine {
              0% {
	  height:0px; opacity:0;
  }

  100% {
	 height:160px; opacity:1; 
  }
}


/* 팝업 애니메이션 */
@keyframes popup-scale-in {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}



/* ==============================반응형============================== */

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

	#header .header-wrap a img {width:18vw;}


	#menuPage .menuWrap li a {font-size:36px;}


	#indexMain .main-text-wrap h1 {font-size:3.5rem}
	#indexMain .main-text-wrap p {font-size:1.5rem; line-height:2rem;}

	#bottomFormBar {gap:0;}
	#bottomFormBar .inputSection {display:none;}
	#bottomFormBar .phoneNum {width:50%; gap:10px; justify-content:center; align-items:center;}
	#bottomFormBar .formBtn {width:50%; justify-content:center;}
	#bottomFormBar .formBtn button {width:28vw; margin:0; }
	#bottomFormBar .phoneNum p {font-size:1.5rem ;}

	#aboutPage {height:auto}
	#aboutPage .bg {bottom:-30%;}
	#aboutPage .bg > img {width:600px;}
	#aboutPage .text-wrap {margin-bottom:80px;}
	#aboutPage .text-wrap p {font-size:1.2rem; line-height:1.4rem}
	#aboutPage .text-wrap h2 {font-size:2.5rem;}
	#aboutPage .data-section {padding:58px 40px;  backdrop-filter: blur(10px);}
	#aboutPage .data-section .data-wrap span {font-size:2rem ;}
	#aboutPage .data-section .data-wrap p {font-size:1rem;}
	#aboutPage .data-section .data-wrap {width:130px;}
	#aboutPage .data-section .data-wrap i {font-size:1rem;}
	#aboutPage .bt-text {justify-content:center; font-size:1.5rem; position:relative; z-index:2; gap:32px; margin-top:100px;}
	#aboutPage .bt-text img {width:240px;}

	#casePage {padding:100px 40px; height:100%; }
	#casePage .header-wrap h2 {font-size:2.5rem;}
	#casePage .article-wrap {flex-direction:column; gap:60px; justify-content:center; align-items:center;}
	#casePage .article-wrap .left-sec-wrap {width:auto;}
	#casePage .article-wrap .right-sec-wrap .caseBox {width:340px !important; height:380px;}
	#casePage .article-wrap .left-sec-wrap ul {font-size:1.5rem}
	#casePage .article-wrap .left-sec-wrap li {font-size:1rem; line-height:1.2rem;}
	#casePage .article-wrap .left-sec-wrap li > img {width:12px; height:10px}
	#casePage .article-wrap .right-sec-wrap .caseBox .text-wrap div {font-size:1.5rem; line-height:1.8rem}
	#casePage .article-wrap .right-sec-wrap .caseBox .text-wrap p {font-size:1rem; line-height:1.4rem}
	#casePage .article-wrap .right-sec-wrap .caseBox .text-wrap {margin-top:60px; gap:24px;}
	#casePage .article-wrap .right-sec-wrap .caseBox .text-wrap span {font-size:1rem;}
	#casePage .article-wrap .right-sec-wrap .caseBox span:first-child {font-size:1rem; padding:6px 12px;}


	#member-intro {height:100%; padding:100px 0;}
	#member-intro .header-wrap h2 {font-size:2.5rem;}
	#member-intro .content-wrap {flex-direction:column; gap:60px;}
	#member-intro .member-wrap .member-box {width:360px !important;}
	#member-intro .text-wrap {font-size:1.5rem; padding:20px; width:100%; height:auto; background:none; padding:0; border:none; margin-left:0; margin-bottom:0px;}
	#member-intro .text-wrap > div {display:flex; justify-content: center; align-items: center; flex-direction:column;}
	#member-intro .text-wrap p {width:100%; margin-bottom:20px; line-height:1.3rem; font-weight:200;}
	#member-intro .header-wrap {margin-bottom:12px; gap:4px; margin-bottom:8px;}
	#member-intro .text-wrap a {font-size:1rem; width:120px; padding:0; display:flex; justify-content: center; align-items: center;}
	#member-intro .memberSwiper {width:100%;} 
	#member-intro .member-wrap .member-box .member {width:80%;}


	#recognition .text-sec h2{font-size:36px; line-height:40px;}
	#recognition .media-img {width:160px;}
	#recognition .emblem-sec .emblem-img img {width:100px; padding:0px 20px;}
	#recognition .emblem-sec .emblem-img p {width:140px; word-break:keep-all;}


	#workArea {flex-direction:column; padding:100px 40px; height:120vh; justify-content: normal;}
	#workArea .work-text-wrap p {justify-content:center;}
	#workArea .work-text-wrap {text-align:center; margin-bottom:40px; gap:20px;}
	#workArea .workArea-main {width:100%;}
	#workArea .work-text-wrap h2 {font-size:2.5rem;}
	#workArea .work-text-wrap div {font-size:1.2rem;}
	#workArea .work-text-wrap p {font-size:1.2rem;}
	#workArea .workArea-main .boxWrap .workBox {align-items:center; text-align:center;}
	#workArea .workArea-main .boxWrap .workBox p {font-size:1.5rem;}
	#workArea .workArea-main .boxWrap .workBox h3 {font-size:1.5rem;}
	#workArea .workArea-main .boxWrap .workBox span {font-size:1rem; line-height:20px;}


	#reviewPage {flex-direction:column; padding:100px 0px; height:100vh; text-align:center; gap:60px;}
	#reviewPage .review-title {margin:0; width:100%;}
	#reviewPage .review-title p {font-size:1.5rem; margin-left:40px; justify-content:center;}
	#reviewPage .review-title h2 {font-size:2rem; line-height:2rem; margin-bottom:24px;}
	#reviewPage .review-title div {font-size:1.3rem; line-height:1.3rem; width:auto; margin-bottom:24px;}
	#reviewPage .review-wrap .review-box {width:35% !important; gap:24px; padding:60px 40px 60px 40px; height:300px;}
	#reviewPage .review-wrap .review-box h3 {font-size:1.5rem;}
	#reviewPage .review-wrap .review-box h3 > p {font-size:1rem;}
	#reviewPage .review-wrap .review-box > img {width:32px; height:32px;}
	#reviewPage .reivew-bg {top:55%; height:300px;}

	.viewBTN {font-size:1rem;}


	#legalInfo{flex-direction:column; padding:100px 40px; height:100%;}
	#legalInfo .legalInfo-title {width:100%; text-align:center; justify-content:center; margin:0;margin-bottom:60px;}
	#legalInfo .legalInfo-title p {justify-content:center; font-size:1.5rem; }
	#legalInfo .legalInfo-title div {width:auto; margin:28px 0; font-size:1.3rem;}
	#legalInfo .legalInfo-title span {display:none;}
	#legalInfo .legalInfo-title h2 {font-size:2.5rem; }
	#legalInfo .legalInfo-wrap {margin:0; width:100%;}
	#legalInfo .legalInfo-wrap .legalInfo-box h3 {font-size:1.2rem;}
	#legalInfo .legalInfo-wrap .legalInfo-box span {font-size:1rem;}
	#legalInfo .legalInfo-wrap .legalInfo-box div {text-align:center; gap:24px;}
	#legalInfo .legalInfo-wrap .legalInfo-box {padding:28px 32px; height:auto}


	#applyPage {flex-direction:column; padding:100px 0; height:120vh;}
	#applyPage .applyTitle {width:90%; margin:0 100px 80px 100px; align-items:center; flex-direction:row; justify-content:center; gap:20px;}
	#applyPage .applyTitle h2 {font-size:2rem; line-height:2.5rem;}
	#applyPage .applyForm {width:100%; padding:100px 0;}
	#applyPage .applyTitle img {margin:0 auto; width:200px; height:50px;}
	#applyPage .applyForm {gap:40px;}
	

	#locationPage .LocationGuide .Guide-text div div span img {width:18px; height:18px;}
	#locationPage {height:100%; padding:140px 60px 100px;}  
	#locationPage h2 {font-size:2.5rem; margin-bottom:60px; justify-content:center;}
	#locationPage .text-wrap {flex-direction:column; align-items:unset; gap:40px;}
	#locationPage .LocationGuide {gap:10px; justify-content:center; align-items:center;}
	#locationPage .LocationGuide .sub-title h3 {font-size:1.5rem;}
	#locationPage .LocationGuide .Guide-text {gap:24px;}
	#daumRoughmapContainer1735267262679 {width:100% !important; height:320px;}
	#locationPage .LocationGuide .Guide-text div div span {width:24px; height:24px;}
	#locationPage .LocationGuide .sub-title {justify-content:center;}
	#locationPage .LocationGuide .Guide-text div {}
	#locationPage .btn-wrap {justify-content:center; flex-direction:column; align-items:end; }
	#locationPage .btn-wrap .tap-btn {padding:16px 80px; font-size:18px;}
	#locationPage .btn-wrap .tap-wrap {width:100%; padding:0;}
	#locationPage .tab-content .content-wrap {flex-direction:column; gap:20px;}
	#locationPage .tab-content .content-wrap .text-wrap {width:100%; gap:40px; height:100%;}
	#locationPage .map-container {width:100%;}
	#locationPage h2::after {display:none;}
	#locationPage .tab-content .content-wrap .text-wrap h3 {font-size:24px; word-break:keep-all;}
	#locationPage .text-wrap .text-content > div > div {font-size:20px;}
	#locationPage .text-wrap .text-content > div {font-size:20px;}
	#locationPage .text-wrap .text-content > div > p {font-size:20px;}
	#locationPage .text-wrap .text-content div span img {width:22px; height:22px;}
	#locationPage .text-wrap .text-content div span {padding:6px;}



	#bottomFormBar {display:none}
	#bottomFormBar-M article:nth-child(1) img {width:18px; height:18px;}
	#bottomFormBar-M article a,button {color:#fff; display:flex; gap:6px; align-items:center; justify-content:center; }
	#bottomFormBar-M article img {width:20px; height:20px;}
	#bottomFormBar-M {display:flex; height:64px; width:100%; background-color:#08376B; color:#fff; justify-content:space-between;  align-items:center; padding:0 120px;}
	#bottomFormBar-M {position:fixed; bottom:0; z-index:40;}
	#bottomFormBar-M span {display:block; width:1px; height:24px; background-color:#eee;}



	#moreInfo {margin-top:0px;}
}



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

#aboutPage .data-section .data-wrap span {font-size:1.5rem;}
#aboutPage .data-section {padding:48px 20px;}
#aboutPage .data-section .data-wrap {width:110px; text-align:center; align-items:center;}
#aboutPage .text-wrap h2 {font-size:2rem;}
#aboutPage {padding:100px 0px;}
#aboutPage .text-wrap {margin-bottom:60px;}
#aboutPage .bt-text {font-size:1.3rem; margin-top:70px;}
#aboutPage .bt-text img {width:200px;}


#casePage .header-wrap h2 {font-size:2rem;}
#casePage {padding:80px 20px;}
#casePage .article-wrap .left-sec-wrap ul {gap:16px;}


#member-intro .header-wrap h2 {font-size:2rem;}
#member-intro .text-wrap p {font-size:1.3rem;}
#member-intro .header-wrap {margin-bottom:0px; gap:0px;}
#member-intro .text-wrap {margin-top:8px;}
#member-intro .header-wrap h2 img {width:32px; height:32px;}
#member-intro .content-wrap {gap:40px;}


#workArea .workArea-main .boxWrap .workBox {padding:28px 16px;}
#workArea {padding:80px 20px;}
#workArea .work-text-wrap h2 {font-size:2rem;}
#workArea .work-text-wrap {gap:16px;}
#workArea .workArea-main .boxWrap .workBox p {font-size:1.2rem;}
#workArea .workArea-main .boxWrap .workBox h3 {font-size:1.3rem;}


#reviewPage .review-title p {margin-bottom:12px;}
#reviewPage .review-title h2 {margin-bottom:20px;}
#reviewPage .review-title p {font-size:1.2rem;}
#reviewPage .review-wrap .review-box {width:20% !important;}


#legalInfo .legalInfo-title h2 {font-size:2rem; line-height:2rem; margin-bottom:0px; }
#legalInfo .legalInfo-title p {margin-bottom:8px; font-size:1.3rem;}
#legalInfo .legalInfo-title div {margin:12px 0px; width:80%;}
#legalInfo .legalInfo-title {display:flex; align-items:center; flex-direction:column;}
#legalInfo .legalInfo-wrap .legalInfo-box {width:calc((100% / 2) - 18px); }
#legalInfo {padding:80px 40px;}
#legalInfo .legalInfo-title {margin-bottom:60px;}	


#applyPage .applyTitle h2 {font-size:1.6rem; line-height:1.9rem;}
#applyPage .applyTitle img {width:180px;}
#applyPage {padding:80px 0px;}
#applyPage .applyTitle {margin-bottom:74px;}
#applyPage .applyForm h3 {font-size:28px;}
#applyPage .applyForm form fieldset label input {width:400px;}
#applyPage .applyForm form fieldset label textarea {width:400px;}
#applyPage .applyForm form fieldset .agree {margin-top:0px;}
#applyPage .applyForm form fieldset button {width:320px;}
#applyPage .applyForm form fieldset .agree {height:auto;}


#locationPage h2 {font-size:2rem; margin-bottom:20px;}

}






@media only screen and (max-width: 425px) {
	#indexMain .main-text-wrap h1 {font-size:2rem; line-height:2.5rem; margin:0 20px 20px;}
	#indexMain .main-text-wrap  p {font-size:1rem; line-height:1.5rem;}
	
	
	#header {height:68px;}
	#header .menu-wrap .call-btn img {width:12px; height:12px;}
	#header .header-wrap a img {width:28vw;}
	#header {padding: 0px 20px;}
	#header .menu-wrap .call-btn {display:none}
	#header .burgerBtn {width:20px; height:20px;}

	#bottomFormBar .phoneNum {padding:0 20px; flex-direction:column;}
	
	#menuPage .menuWrap li a {font-size:1.8rem;}
	#menuPage .topDeco {font-size:12px; margin-left:20px;}
	#menuPage .colseBtn img {width:24px; height:24px;}
	#menuPage .colseBtn {top:50px; right:20px;}
	#menuPage .btmDeco {font-size:12px; margin-right:20px;}
	

	#aboutPage .data-section .data-wrap p {font-size:12px;}
	#aboutPage {padding:80px 0;}
	#aboutPage .text-wrap h2 {font-size:1.5rem;}
	#aboutPage .text-wrap p {font-size:1rem;}
	#aboutPage .text-wrap span {font-size:0.8rem;}
	#aboutPage .text-wrap {margin-bottom:60px;}
	#aboutPage .data-section .data-wrap {text-align:center;}
	#aboutPage .data-section {flex-wrap:wrap; padding:40px; display:flex; flex-direction:column; align-items:center;}
	#aboutPage .data-section .data-wrap {gap:10px; margin-bottom:40px;}
	#aboutPage .data-section .data-wrap:nth-child(6) {margin-bottom:0;}  
	#aboutPage .bt-text {flex-direction:column; font-size:16px; padding:0; gap:8px;}
	#aboutPage .bg > img {width:400px;}
	#aboutPage .bg {bottom:-20%;}
	#aboutPage .bt-text img {width:140px;}

	
	#casePage {padding:100px 20px;}
	#casePage .header-wrap h2 {font-size:1.5rem;}
	#casePage .caseSwiper-wrap {right:50%; transform: translateX(50%); }
	#casePage .header-wrap {margin-bottom:40px;}
	#casePage .article-wrap .left-sec-wrap ul > div {font-size:1.3rem; font-weight:400;}
	#casePage .article-wrap .left-sec-wrap ul {gap:10px;}
	#casePage .header-wrap a {font-size:16px;}
	#casePage .article-wrap .left-sec-wrap li {font-size:0.8rem;}
	#casePage .caseSwiper {width:100%;}
	#casePage .article-wrap .right-sec-wrap .caseBox .text-wrap div {font-size:1.3rem; line-height:1.5rem;}
	#casePage .caseSwiper {width:100%; }

	
	#member-intro {padding:80px 0;}
	#member-intro .header-wrap h2 {font-size:1.4rem; word-break: keep-all; line-height:1.6rem; margin:0; width:78%; margin-bottom:12px;}
	#member-intro .header-wrap p {font-size:16px;}
	#member-intro .header-wrap h2 img {display:none;}
	#member-intro .text-wrap p { text-align:center; font-size:1.2rem; word-break: keep-all; width:80%; line-height:1.5rem;}
	#member-intro .text-wrap a {font-size:14px;}
	#member-intro .content-wrap {gap:40px;}
	#member-intro .member-wrap .member-box {width:320px !important; height:480px; margin:0px; margin-left:20px;}
	#member-intro .member-wrap .member-box .member-text-wrap ul div {font-size:20px;}
	#member-intro .member-wrap .member-box .member-text-wrap ul li {font-size:16px;}
	#member-intro .member-wrap .member-box .member-text-wrap {height:210px;}
	#member-intro .member-wrap .member-box .member {top:4%; width:220px;}
	#member-intro .text-wrap a {height:32px;}
	#member-intro .aos-init {display:contents !important;} 
	#member-intro .text-wrap {margin-top:0px;}
	#member-intro .memberSwiper {width:100%; height:500px;}
	#member-intro .header-wrap {gap:4px;}


	
	#recognition .text-sec h2 {font-size:26px; line-height:32px;}
	#recognition .license-img {width:100px;}
	#recognition .license-sec .emblem-img img {width:100px;}
	#recognition .license-sec .emblem-img p {font-size:14px; line-height:16px;}

	#workArea {height:100%; background:none; background-color:#edf1f5; padding:80px 20px;}
	#workArea .work-text-wrap h2 {font-size:1.5rem;}
	#workArea .work-text-wrap p {font-size:1rem;}
	#workArea .work-text-wrap div {font-size:1rem; line-height:1.5rem;}
	#workArea .workArea-main .boxWrap {flex-wrap:wrap;}
	#workArea .workArea-main .boxWrap .workBox {width:100%; min-height:196px;}


	#reviewPage .review-title p {font-size:1rem; word-break: keep-all; margin-bottom:20px;}
	#reviewPage .review-title h2 {font-size:1.5rem; word-break: keep-all; padding:0 20px;}
	#reviewPage .review-title div {font-size:1rem; word-break: keep-all; margin:0 40px;}
	#reviewPage .review-wrap .review-box {width:300px !important;}
	#reviewPage {height:100%;}
	#reviewPage .review-wrap .review-box span {font-size:14px;}
	#reviewPage .viewBTN {margin-top:40px;}
	#reviewPage .reviewSwiper {width:100%; margin:0px;} 
	#reviewPage .review-wrap .review-box p {font-size:16px; line-height:1.8rem;}

	

	#legalInfo {padding:80px 20px; height:100%; background-repeat:no-repeat; background-size:100%; background-position:bottom; background-color:#f4f7fa;}
	#legalInfo .legalInfo-title h2 {font-size:1.5rem; word-break: keep-all; line-height:1.5rem; margin-bottom:20px;}
	#legalInfo .legalInfo-title p {font-size:1rem; word-break: keep-all; margin-bottom:8px;}
	#legalInfo .legalInfo-title div {font-size:1rem; word-break: keep-all; line-height:1.2rem; margin:0px;}
	#legalInfo .legalInfo-title div:nth-child(4) {margin-bottom:20px; }
	#legalInfo .legalInfo-wrap .legalInfo-box {width:100%; min-height:226px;}
	#legalInfo .legalInfo-title {margin-bottom:40px;}
	
	


	#applyPage {height:100%;}
	#applyPage .applyTitle {flex-direction:column; text-align:center; gap:20px; margin:0 40px 60px}
	#applyPage .applyForm form fieldset label input {width:320px; height:44px;}
	#applyPage .applyForm form fieldset label textarea {width:320px;}
	#applyPage .applyForm h3 {font-size:1.5rem;}
	#applyPage .applyForm form fieldset .agree a {font-size:12px;}
	#applyPage .applyForm form fieldset .agree {font-size:14px; margin:0px;}
	#applyPage .applyForm form fieldset button {width:320px;}
	#applyPage .applyTitle h2 {font-size:1.5rem; line-height:2rem;}
	#applyPage .applyTitle img {width:140px; height:40px;}
	#applyPage .applyForm h3 span::after {width:24px; height:20px;}
	#applyPage .applyForm h3 span:first-child::after {width:40px;}
	#applyPage .applyForm form fieldset label {font-size:14px;}


	#locationPage {height:100%; padding:48px 20px;}
	#locationPage h2 {font-size:1.8rem; justify-content:center; margin-bottom:40px;}
	#locationPage .LocationGuide .sub-title {flex-direction:column; margin-bottom:40px;}
	#locationPage .LocationGuide .sub-title h3 {font-size:1.5rem;}
	#locationPage .LocationGuide .sub-title a {font-size:1rem; font-weight:200;}
	#locationPage .LocationGuide .Guide-text div p {font-size:1rem; margin:0;}
	#locationPage .LocationGuide .Guide-text div div span img {width:14px; height:14px;}
	#locationPage .LocationGuide .Guide-text div div {font-size:1rem; flex-direction:row;}
	#locationPage .LocationGuide .Guide-text div {flex-direction:column; text-align:center; word-break:keep-all; justify-content:center; align-items:center;}
	#locationPage .LocationGuide .Guide-text > div {margin-bottom:20px; gap:12px;}
	#locationPage .btn-wrap {margin-top:20px; gap:12px;} 
	#locationPage .btn-wrap .tap-btn {padding:12px 40px; font-size:16px; word-break:keep-all;}
	#locationPage  #daumRoughmapContainer1735267262679 {width:200px;}
	#locationPage .LocationGuide .Guide-text div p:last-child {line-height:1.5rem; width:80%;}
	#locationPage .btn-wrap .tap-wrap {width:100%; padding:0px; gap:12px;}
	#locationPage .btn-wrap .map-btn {width:100%;}
	#locationPage .text-wrap .text-content > div {flex-direction:column; gap:8px;}
	#locationPage .text-wrap .text-content > div > div {width:auto; font-size:18px;}
	#locationPage .text-wrap .text-content > div > p {text-align:center;}
	#locationPage .text-wrap .text-content > div:nth-child(4) {align-items:center;}
	#locationPage .text-wrap .text-content > div > p {font-size:16px;}
	#locationPage .tab-content .content-wrap .text-wrap h3 {text-align:center; font-size:22px;}
	#locationPage .map-container {height:460PX;}





	#footer {padding:60px 40px 100px;}
	#footer .top {height:auto ;flex-direction:column; gap:20px; align-items:start; justify-content:normal; padding:0px; margin-bottom:40px;}
	#footer .top img {width:140px; height:40px;}
	#footer .bottom p {font-size:12px;}
	#footer .footer-text-wrap div p {font-size:16px; gap:14px;}
	#footer .footer-text-wrap div {font-size:16px; line-height:18px;}
	#footer .footer-bg {width:400px;}
	#footer .footer-text-wrap {position:relative; z-index:4; flex-direction:column;}
	#footer .top div {margin:0px;}
	#footer .footer-text-wrap {gap:60px;}


	#bottomFormBar {display:none}

	#bottomFormBar-M {padding:0 20px;}
	

	}



	@keyframes workTextLine {
              0% {
	 width:0%; 
  }

  100% {
	 width:100px;
  }
}

@keyframes legalInfoTextLine {
              0% {
	  height:0px; opacity:0;
  }

  100% {
	 height:100px; opacity:1; 
  }
}
	

}