/*---common css---*/ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); :root { /*color*/ --color-base: #000; --color-kakao: #ffc401; --color-kakao-text: #442f01; --color-naver: #00c13a; /*font-size*/ --font-size-13: 0.813rem; --font-size-14: 0.875rem; --font-size-16: 1rem; --font-size-17: 1.0625rem; --font-size-18: 1.125rem; --font-size-19: 1.188rem; --font-size-20: 1.25rem; --font-size-22: 1.375rem; --font-size-23: 1.438rem; --font-size-24: 1.5rem; --font-size-25: 1.563rem; --font-size-26: 1.625rem; --font-size-27: 1.688rem; --font-size-28: 1.75rem; --font-size-30: 1.875rem; --font-size-31: 1.938rem; --font-size-32: 2rem; --font-size-34: 2.125rem; --font-size-36: 2.25rem; --font-size-35: 2.188rem; --font-size-45: 2.813rem; --font-size-48: 3rem; --font-size-50: 3.125rem; --font-size-55: 3.438rem; --font-size-60: 3.75rem; --font-size-70: 4.375rem; --font-size-72: 4.5rem; --font-size-80: 5rem; --font-size-90: 5.625rem; --font-size-100: 6.25rem; /*font-weight*/ --font-r: 400; --font-m: 500; --font-sb: 600; --font-b: bold; --font-bl: 900; } /*font size*/ .fs_13{font-size: var(--font-size-13);} .fs_14{font-size: var(--font-size-14);} .fs_16{font-size: var(--font-size-16);} .fs_17{font-size: var(--font-size-17);} .fs_18{font-size: var(--font-size-18);} .fs_19{font-size: var(--font-size-19);} .fs_20{font-size: var(--font-size-20);} .fs_22{font-size: var(--font-size-22);} .fs_23{font-size: var(--font-size-23);} .fs_24{font-size: var(--font-size-24);} .fs_25{font-size: var(--font-size-25);} .fs_26{font-size: var(--font-size-26);} .fs_27{font-size: var(--font-size-27);} .fs_28{font-size: var(--font-size-28);} .fs_30{font-size: var(--font-size-30);} .fs_31{font-size: var(--font-size-31);} .fs_32{font-size: var(--font-size-32);} .fs_34{font-size: var(--font-size-34);} .fs_35{font-size: var(--font-size-35);} .fs_36{font-size: var(--font-size-36);} .fs_45{font-size: var(--font-size-45);} .fs_48{font-size: var(--font-size-48);} .fs_50{font-size: var(--font-size-50);} .fs_55{font-size: var(--font-size-55);} .fs_60{font-size: var(--font-size-60);} .fs_70{font-size: var(--font-size-70);} .fs_72{font-size: var(--font-size-72);} .fs_80{font-size: var(--font-size-80);} .fs_90{font-size: var(--font-size-90);} .fs_100{font-size: var(--font-size-100);} @media screen and (max-width:1420px){ .fs_80 {font-size:var(--font-size-60);} .fs_100 {font-size:var(--font-size-90)} } @media screen and (max-width:1020px){ .fs_80 {font-size:var(--font-size-50);} .fs_70 {font-size:var(--font-size-45);} .fs_90 {font-size:var(--font-size-48);} } @media screen and (max-width:767px){ .fs_70 {font-size:var(--font-size-32);} .fs_90 {font-size:var(--font-size-43);} .fs_100 {font-size:var(--font-size-45)} } /*--- common ---*/ .img_box {position:relative;} .img_box img {width:100%; margin:0 auto; display:block;} .pos_img {position:absolute;left:0; top:0;} @font-face { font-family: 'GenKJwajinOTF-Rg'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GenKJwajinOTF-Rg.woff') format('woff'); font-weight: normal; font-style: normal; } .font_mons {font-family: "Montserrat", sans-serif;} .font_ko { font-family: 'KoPub Dotum'; } .font_jin {font-family: 'GenKJwajinOTF-Rg'; } .font_pop {font-family: "Poppins", serif;} .letter40 {letter-spacing:-0.04em} /*font weight*/ .font_r{font-weight: var(--font-r);} .font_m{font-weight: var(--font-m);} .font_sb{font-weight: var(--font-sb);} .font_b{font-weight: var(--font-b);} .font_bl{font-weight: var(--font-bl);} /*text-motion*/ .j_motion.common_motion{transform: translateY(25px);opacity: 0;transition: transform .8s ease, opacity .4s;} .j_motion.common_motion.on {transform: translateY(0);opacity: 1;} .j_delay_01{transition-delay: .2s !important;} .j_delay_02{transition-delay: .4s !important;} .j_delay_03{transition-delay: .6s !important;} .j_delay_04{transition-delay: .8s !important;} .j_delay_05{transition-delay: 1s !important;} .j_delay_06{transition-delay: 1.2s !important;} .j_delay_07{transition-delay: 1.4s !important;} .j_delay_08{transition-delay: 1.6s !important;} .j_delay_09{transition-delay: 1.8s !important;} .j_delay_10{transition-delay: 2s !important;} .j_delay_11{transition-delay: 2.2s !important;} /*------------------------------------------------------------------------------------------------------------*/ /*header*/ #j_header {height:120px; position:fixed; left:0; top:0; width:100%; z-index:99; transition:0.28s;} #j_header.active {background:#fff; height:80px;} .hd_inner {max-width:1720px; margin:0 auto; width:92%; height:100%;} .hdWrap {width:100%; display:flex; justify-content:space-between; height:100%; align-items:center; transition:0.28s; } .hdMeun {height:100%; display:flex;align-items:center; gap:103px; transition:0.28s;} .hdMeun > .j_gnb {display:flex; align-items:center; height:100%; gap:50px; transition:0.28s;} .hdMeun > .j_gnb > li > a {font-size:var(--font-size-20); font-weight:var(--font-m); position: relative;overflow: hidden;display: block;text-align: center;-webkit-box-flex: 1;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;padding: 0;} .hdMeun > .j_gnb > li > a:after {position: absolute;top: 100%;left: 0;right: 0;content: attr(data-hover);display: inline;text-align: center;-webkit-transition: top 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);transition: top 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);} .hdMeun > .j_gnb > li > a:hover {color: #1f10dd;} .hdMeun > .j_gnb > li > a:hover:after {top: 0;} .hdMeun > .j_gnb > li > a:active {-webkit-animation-name: rubberBand;animation-name: rubberBand;} .hdMeun > .j_gnb > li > a i {display: block;-webkit-transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);} .hdMeun > .j_gnb > li > a:hover i {color: #1f10dd;-webkit-transform: translateY(-100%);transform: translateY(-100%);} .allGnb {width:50px; height:19px; position:relative; transition:0.28s; } .allGnb span {width:100%; background:#111111; display:block; height:4px;position:absolute; transition: 0.28s; transform-origin: center; } .allGnb span:nth-of-type(1){top:0;} .allGnb span:nth-of-type(2){bottom:0;} .allGnb.active span:nth-of-type(1) { top: 50%; /* 가운데로 이동 */ transform: translateY(-50%) rotate(45deg); /* 45도 회전 */} .allGnb.active span:nth-of-type(2) {bottom: 50%; /* 가운데로 이동 */transform: translateY(50%) rotate(-45deg);/* -45도 회전 */} /*overray*/ .mobile_wrap {position:fixed; width:20%; height:100vh; top:0; right:0; padding:40px; background:#fff ;transition: transform 0.4s; transform:translateX(100%); box-shadow: 5px 20px 24px 0px rgba(0, 0, 0, 0.11); z-index:99; border-radius:15px 0 0 15px;} .mobile_wrap.on {transform:translateX(0);} .mo_inner {height:100%; color:#000;} .mo_inner > .j_gnb {height:100%; display: flex; height: 100%; flex-direction: column; align-items: center; width: 100%; text-align: center;justify-content: center; gap: 40px; } .mo_inner > .j_gnb > li {font-size: 1.188rem; word-break: keep-all; font-weight:700; transition:0.28s; } .mo_inner > .j_gnb > li > a {color:#000; font-family: 'GmarketSans';} .mo_inner > .j_gnb > li:hover a {color:#5ca0d8;} .close_btn {position:absolute; right:30px; top:30px; width: 30px; height: 30px;} .close_btn span {background:#5ca0d8; width:30px; height:2px; display:block; position:absolute; transform:translate(0);} .close_btn span:nth-of-type(1) {transform: rotate(45deg);} .close_btn span:nth-of-type(2) {transform: rotate(-45deg);} .j_site_bg {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255, 0.7); transition:0.28s; z-index:40; display:none; backdrop-filter: blur(5px);} .j_site_bg.on {display:block;} @media screen and (max-width:920px){ .hdMeun > .j_gnb {display:none;} } @media screen and (max-width:767px){ #j_header {height:80px;} .hdWrap > a img {width:80%;} .allGnb {width:30px;} .close_btn {right:5px;} .close_btn span {width:18px;} .mobile_wrap {width:35%;} } /*---------------------------------------------------------------------------------------------------*/ /*mainVisual*/ .mvWrap {display: flex; align-items:center;justify-content: space-between;} .mvLt h2 {color:#170ac3; letter-spacing:0;} .mvLt p {margin-top:35px;} .mainVisual {position:relative; width:100%; height:100%; background:#f6f5ff; padding:230px 0 165px; } .ourMove {display:flex; align-items:center; width:161px; height:161px; border-radius:161px; background:#170ac3; justify-content: center; animation: bounce 0.6s 0.1s cubic-bezier(0, 0, 0.18, 0.99) infinite alternate;} .mvSwipBox {position:absolute; top:50%; transform:translateY(-50%); left:0; max-width:1420px; width:92%; z-index:2} .mainDesc {display: flex; flex-direction: column; gap: 30px; } .mv_span {display:flex; align-items:center; background:#fff; border:2px solid #000000; border-radius:25px;padding: 12px 39px;} .mv_span span {display:block; transform: translateY(4px); opacity: 0; /* fade-in 효과를 위해 초기 투명도 설정 */} .mainDesc {position:relative;} .mainDesc div {overflow:hidden;} .mainDesc h2 em {color:#1f10dd; font-weight:700;} .mvDesc02 h2 {display:flex; align-items:center; gap:20px;} .mainDesc.active .mvDesc01 h2{animation: slideUp 1s ease forwards; animation-delay: 0s;} .mainDesc.active .mvDesc02 h2{animation: slideUp 1s ease forwards; animation-delay: 0.4s;} .mainDesc.active .mvDesc03 h2{animation: slideUp 1s ease forwards; animation-delay: 0.8s;} .mainDesc.active .mv_span span {animation: fadeIn 1s ease forwards;animation-delay: 0.7s;} .mvDesc01 h2, .mvDesc02 h2, .mvDesc03 h2 {transform: translateY(100%); /* 시작 위치를 화면 아래로 설정 */ } .mainVisual .mvPageBox .swiper-pagination {display:flex; gap:50px;} .mainVisual .mvPageBox .swiper-pagination .swiper-pagination-bullet {border-radius:0; opacity: 1; background-color: transparent; position:relative; display:block; font-family: "Poppins", serif; font-size:var(--font-size-22); font-weight: var(--font-r); color:#c6c4de;letter-spacing: 0.05em; font-style: italic;} .mainVisual .mvPageBox .swiper-pagination .swiper-pagination-bullet-active {color:#111;font-weight: var(--font-b);} .mvPageBox {position:absolute; top:-90px; left:6px;} .mvContent {z-index:2;box-shadow: 0px 16px 0px 2px rgba(0, 0, 0, 1);border-radius: 164px 0 0 164px; background:#1f10dd; display:flex; gap:45px; padding:26px; position: absolute;right: 0;top: 50%;transform: translateY(-50%); align-items: center; opacity: 0; /* 초기 투명도 설정 */animation: slideIn 0.5s forwards; /* 애니메이션 추가 */} .mvContent a {gap: 0px; flex-direction: column;font-family: "Poppins", serif; font-size:var(--font-size-36); font-weight: var(--font-b); color:#fff; display:flex; align-items:center; justify-content:center; background:#170ac3; border-radius:50%; width:275px; height:275px;} .mvArrow {display:flex; align-items:center;} .mvMoveDesc p {color:#fff; line-height:1.75em; word-break:keep-all;} .arrow_motion {animation: arrow-wave 2s infinite;opacity: 0;box-sizing: border-box;} .arrow_motion:nth-of-type(1) {animation-delay: 0s;} .arrow_motion:nth-of-type(2) {animation-delay: .15s;} .arrow_motion:nth-of-type(3) {animation-delay: .3s;} .mvWaveSlide { position: relative;overflow: hidden;height: 300px; width:100%; margin-top:45px;} /* .mvWaveSlide:after {content:''; position:absolute; left:-87%; width:100%; top:0; height:100%; background:#f6f5ff; z-index:1;} */ .mvWaveSlide .mvWaveTxt {height: 100%;display: flex; align-items: center; position: absolute; left: 0; top: 0; animation-name: txt_motion; animation-duration: 15s;animation-timing-function: linear;animation-iteration-count: infinite; z-index:1;} .mvWaveTxt img + img {margin-left:20px;} @media screen and (max-width:1420px){ .mvContent {gap:20px;} .mvContent a {width:200px; height:200px; padding:15px;} .mvWaveSlide:after {left:-100%;} } @media screen and (max-width:1140px){ .mvContent {padding:10px; box-shadow: 1px 7px 0px 2px rgba(0, 0, 0, 1);} .mvContent a {width:150px; height:150px; font-size:var(--font-size-20);} .arrow_motion img {width:50%;} .mvMoveDesc {width:calc(100% - 150px);} .mvMoveDesc p {font-size:var(--font-size-16);} } @media screen and (max-width:1020px){ .mv_span {padding:12px;} .mv_span span {font-size:30px;} } @media screen and (max-width:920px){ .mvSwipBox {top:38%;} .mvContent {top:58%;} } @media screen and (max-width:767px){ .mvWaveSlide {height: 120px; bottom: 20px;} .mvWaveTxt img {width:1130px;} .mainDesc {gap:10px;} .mvPageBox {top:-30px;} .mainVisual .mvPageBox .swiper-pagination {gap:15px;} .mvContent {top:65%;} .mainVisual {padding:80px 0 40px;} .mvLt h2 {font-size:40px;} .mvLt p {font-size:18px; margin-top:20px;} .ourMove {width:80px; height:80px; border-radius:80px;} } /*ms01*/ #ms01 {width:100%; height:80vh; position:relative;} .ms01Inner {max-width:1720px; width:92%; margin:0 auto; height: 100%; position: relative; overflow: hidden;} .ms01Swip {height:100%;} .ms01_bg.bg01 {background: url(/img/main/ms01_bg.jpg) no-repeat center / cover;height: 100%;z-index: -1; position: absolute; left: 0;top: 0;width: 100%;} .ms01_bg.bg02 {background: url(/img/main/ms02_bg.jpg) no-repeat center / cover;height: 100%;z-index: -1; position: absolute; left: 0;top: 0;width: 100%;} .ms01_bg.bg03 {background: url(/img/main/ms03_bg.jpg) no-repeat center / cover;height: 100%;z-index: -1; position: absolute; left: 0;top: 0;width: 100%;} .ms01_bg.bg04 {background: url(/img/main/ms04_bg.jpg) no-repeat center / cover;height: 100%;z-index: -1; position: absolute; left: 0;top: 0;width: 100%;} .ms01_bg.bg05 {background: url(/img/main/ms05_bg.jpg) no-repeat center / cover;height: 100%;z-index: -1; position: absolute; left: 0;top: 0;width: 100%;} .ms01DescBox {display:flex; gap:39px;align-items: center; position:absolute; width:100%; left:98px; bottom:130px;} .msCircle {display:flex; justify-content:center; align-items:center; width:231px; height:231px; border-radius:50%; color:#fff; background:#1f10dd; z-index:11;} .msCircle p {font-family: "Poppins", serif; font-size: var(--font-size-36);font-weight: var(--font-b);} .ms01Txt {color:#fff;} .ms01Txt p {margin-top:28px;} .ms01Txt a {display:block; width:146px; height:45px; line-height:45px; text-align:center; border-radius:23px; border:1px solid #fff; margin-top:28px;} .msCircle, .ms01Txt h2, .ms01Txt p, .ms01Txt a {transform: translateY(200%); /* 더 아래 위치로 시작 */ opacity: 0;} .ms01DescBox.active .msCircle{animation: slideUp02 1s ease forwards; animation-delay: 0s; opacity:1;} .ms01DescBox.active .ms01Txt h2 {animation: slideUp 1s ease forwards; animation-delay: 0.4s;opacity:1;} .ms01DescBox.active .ms01Txt p{animation: slideUp 1s ease forwards; animation-delay: 0.8s;opacity:1;} .ms01DescBox.active .ms01Txt a{animation: slideUp 1s ease forwards; animation-delay: 0.8s;opacity:1;} .ms01Swip .swiper-slide.swiper-slide-active .ms01_bg { animation-name:mv_bg; animation-duration:5s; animation-timing-function:linear;} .ms01Txt div {overflow:hidden;} .ms01numBox {width:110px; height:110px; position:absolute; right:10.42%;top:82px;} .ms01numBox:after {content:'';position:absolute; width:100%; background:rgba(255,255,255,0.5); height:2px; left:50%; top:50%; transform: translate(-50%, -50%) rotate(-45deg); /* 45도 회전 */ z-index:10;} .ms01numBox .page_num {bottom:unset; height:100%;} .ms01numBox span {color:rgba(255,255,255, 0.3); font-weight:700; font-size:var(--font-size-36); display:block; } .ms01numBox span:nth-of-type(1) {text-align:left;} .ms01numBox span:nth-of-type(2) {text-align:right;} .ms01numBox span.swiper-pagination-current {color:rgba(255,255,255, 1); font-size:var(--font-size-45);} .ms01naviBox {width:85px; height:30px; position:absolute; right:10.42%;bottom:150px;} .ms01Next {right:0;} .ms01Prev {left:0;} .swiper-button-next {background: url(/img/icon/ms01Next.png) no-repeat center / cover; width:34px; height:24px;} .swiper-button-prev {background: url(/img/icon/ms01Prev.png) no-repeat center / cover; width:34px; height:24px;} .swiper-button-next, .swiper-button-prev {margin:0;} .swiper-button-next::after,.swiper-button-prev::after {display: none;} @media screen and (max-width:1420px){ } @media screen and (max-width:1140px){ } @media screen and (max-width:1020px){ .ms01DescBox {left:0;} } @media screen and (max-width:920px){ } @media screen and (max-width:767px){ .ms01numBox {width:85px; height:85px;} #ms01{height:500px;} .msCircle {width:90px; height:30px; border-radius:15px;} .ms01DescBox {gap:10px; flex-wrap:wrap;} .ms01Txt {width:100%} .ms01naviBox {bottom:65px} .msCircle p {font-size:14px;} } /*ms02*/ #ms02 {padding:165px 0; background:#0d00b5;} .ms02DescBox {margin-top:150px;} .ms02DescBox h2 {color:#fff; text-align:center; line-height:1.5em; } .ms02MoveText {position: relative; /* 상대 위치로 설정 */left: 100%; /* 오른쪽 끝으로 시작 */opacity: 1; /* 처음에는 보이지 않도록 설정 */} .ms02MoveText img {width:100%;} @media screen and (max-width:1020px){ #ms02 {padding:100px 0;} .ms02DescBox {margin-top:100px;} } @media screen and (max-width:767px){ #ms02 {padding:40px 0;} .ms02DescBox {margin-top:80px;} } /*ms03*/ #ms03 {max-width:1920px; margin:0 auto;} /*ms04*/ #ms04 {padding:160px 0; background:#f6f6fb;} .msTit {font-size:var(--font-size-50); font-weight:600; font-family: "Poppins", serif; } .msRoof { display: flex; align-items: flex-end; justify-content: space-between;} .ms04Swip {margin-top:60px; overflow:visible;} .ms04Swip:after {position:absolute; left:-100%; top:0; width:100%; height:105%; content:''; z-index:20; background:#f6f6fb; } .ms04Swip ul .swiper-slide figure img {} .ms04Swip ul .swiper-slide {padding:79px 46px 40px; box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.2); border-radius:20px; overflow:hidden;} .cateBox ul {display:flex; gap:8px; overflow-x: auto;white-space: nowrap; text-overflow: ellipsis; word-break: break-all;} .cateBox ul::-webkit-scrollbar{display:none;} .cateBox ul li {border-radius:17px; background:#fff; padding:10px 20px;} .cateBox ul li a {display:flex; font-size:14px; font-weight:700;} .ms04Desc h4 {color:#fff; margin-top:18px;} .ms04Desc h4 p {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;word-break: break-all;} .ms04Desc h2 {color:#fff; margin-top:15px;} .ms04SwipPageBox {width:90px; height:24px; position:relative;} .swiper-button-next.ms04Next {background: url(/img/icon/ms04Next.png) no-repeat center / cover; width:34px; height:24px; top:unset; right:0;} .swiper-button-prev.ms04Prev {background: url(/img/icon/ms04Prev.png) no-repeat center / cover; width:34px; height:24px;top:unset; left:0;} .ms04ViewBtn {border-radius:30px; overflow:hidden; text-align:center; margin:0 auto;} .ms04ViewBtn{display:block; width:190px; height:59px; line-height:59px; text-align:center; color:#fff; background:#1f10dd; margin:68px auto 0 auto;} .ms04ViewBtn a {display:block; width:100%;} @media screen and (max-width:1020px){ #ms04 {padding:100px 0;} .ms04Swip ul .swiper-slide {padding:25px 20px 25px;} } @media screen and (max-width:767px){ #ms04 {padding:40px 0;} .ms04Swip {margin-top:40px;} .ms04ViewBtn {margin: 40px auto 0 auto;} .msTit {font-size:33px;} } /*ms05*/ #ms05 {background:#fff; max-width:1920px; margin:0 auto;} .ms05_box img {width:100%;} /*ms06*/ #ms06 {background:#03002e; padding:160px 0;} .ms06Inner {max-width:1720px; width:92%; margin:0 auto; } .ms06Lt h2 {color:#fff; line-height: 1.5em; word-break:keep-all; min-height:274px;} .ms06Inner ul.j_form_wrap {display:flex;} .ms06Lt {width:calc(100% - 609px);} .ms06Rt {width:609px;} .formBox ul {display:flex; flex-wrap:wrap;} .formBox ul li {width:calc((100% - 34px)/2); margin-right:34px; position:relative;} .formBox ul li.form_req::after {content:''; position:absolute; left:0; top:15px; width:7px; height:7px; border-radius:7px; background:#1f10dd;} .formBox ul li input {border-bottom:1px solid #fff; width:100%; padding:25px 10px; color:#fff; font-size: var(--font-size-22); font-weight:500; position:relative; background:#03002E;} .formBox ul li textarea { color:#fff; font-size: var(--font-size-22); font-weight:500; background: #03002E;border:none; border-bottom:1px solid #fff; width: 100%; padding: 25px 10px; resize:none; outline:none;} .formBox ul li textarea::placeholder {font-size: var(--font-size-22); font-weight:500; color:#fff;} .formBox ul li input::placeholder {font-size: var(--font-size-22); font-weight:500; color:#fff;} .formBox ul li:nth-of-type(2n) {margin-right:0;} .formBox ul li:nth-of-type(n + 3){margin-top:60px;} .formBox ul li:nth-of-type(5) {margin-right:0;} .formBox ul li:nth-of-type(6) {margin-right:0; margin-top:20px;} .formBox ul li:nth-of-type(6) input {font-size:15px;} .j_form_btn {width:100%; border-radius:30px; height:60px; line-height:60px; text-align:center; color:#fff; font-size:var(--font-size-22); font-weight:500; background:#1f10dd; margin-top:36px;} .w100{width:100% !important;} @media screen and (max-width:1020px){ #ms06 {padding:100px 0;} .ms06Inner ul.j_form_wrap {flex-wrap:wrap;} .ms06Rt {max-width:500px; margin:0 auto;} .ms06Lt {width:100%; text-align:center;} .ms06Lt h2 {min-height:153px;} } @media screen and (max-width:767px){ #ms06 {padding:40px 0;} .formBox ul li {width:100%; text-align:center; width:calc((100% - 20px)/2); margin-right:20px; } .ms06Lt h2 {min-height:100px;} .formBox ul li:nth-of-type(6) input {font-size:12px;} .formBox ul li:nth-of-type(n + 3) {margin-top:30px;} } /*footer*/ .j_footer {background:#000; padding:104px 0 66px; margin-bottom:70px;} .ft_inner {max-width:1720px; width:92%; margin:0 auto; display:flex;justify-content: space-between;} .ft_lt {display:flex; gap:71px;} .ft_info {color:#fff;} .ft_info p {color:rgba(255,255,255, 0.40); letter-spacing:-0.04em; font-weight:400; line-height:1.5em;} .ft_link {margin-top:15px;} .ft_link a + a {margin-left:10px;} .ft_rt {color:#fff;} .ft_rt ul {display:flex; gap:130px;} .ft_rt ul li p {} @media screen and (max-width:1240px){ .ft_lt {gap:30px;} .ft_rt ul {gap:30px;} } @media screen and (max-width:1200px){ .j_footer {margin-bottom:0;} } @media screen and (max-width:1020px){ .j_footer {padding:80px 0;} .ft_inner {flex-wrap:Wrap;} .ft_lt {width:100%; flex-wrap:wrap;} .ft_rt ul {width:100%; margin-top:20px;} .ft_info {width:100%;} } @media screen and (max-width:767px){ .ft_lt {gap:5px;} .ft_lt a img {width:80%;} .j_footer {padding:40px 0 200px 0;} .ft_rt ul li h2 {font-size:14px;} .ft_rt ul li p {font-size:12px;} } /*프로젝트 팝업*/ .projectPop {position:fixed; transform-origin: center; /* 중심 기준으로 확대 */ left:0; top:0; background:rgba(0,0,0, 0.8); width:100%; height:100%; z-index:999; display:flex; align-items:center; justify-content:center; display:none; transform: scale(0.5); /* 팝업 등장 애니메이션용 */ opacity: 0; /* 팝업 등장 애니메이션용 */} .proScroll {padding-right:10px; width:92%;max-width: 1550px; border-radius:30px; background:#f6f5ff; max-width:1550px; position:relative; } .projectPopWrap {width:100%; max-height:870px;overflow-y: scroll; } .projectPopWrap::-webkit-scrollbar {width:8px;} .projectPopWrap::-webkit-scrollbar-thumb {background:#cccbd3; border-radius:4px; height: 10%;} .projectPopWrap::-webkit-scrollbar-track {} .projectPopInner {max-width:1140px; width:92%; margin:0 auto; } .proTit {font-size:var(--font-size-36);width:100%; max-width:532px; margin:0 auto; background:#1f10dd; height:90px; border-radius:0 0 45px 45px; color:#fff; font-weight:700; font-family: "Poppins", serif; display: flex; align-items: center; justify-content: center;} .proPopSchBox {margin-top:58px;} .proSchList {display:flex;} .proSchList > li {width:calc((100% - 14px)/2); margin-right:14px; background:#fff; position:relative; border-radius:35px; border:1px solid #dedcef;} .proSchList input {width:100%; font-size:var(--font-size-22);} .proSchList input::placeholder { font-size:var(--font-size-22); font-weight:500; color:#666666;} .proSch {padding:22px 35px;} .proSchList > li:nth-of-type(1) button {position:absolute; right:35px; top:50%; transform:translateY(-50%);} .proSchList > li:nth-of-type(2):after {content:''; width:19px; height:13px; position:absolute; right:35px; top:50%; transform:translateY(-50%); background: url('/img/icon/schDown.png') no-repeat center / cover;} .proSchList > li:nth-of-type(2n){margin-right:0;} .proLabel {width:100%; display: flex;align-items: center; width:100%;height: 100%;border: 0 none;outline: 0 none; background: transparent;cursor: pointer;padding:22px 35px; color:#1f10dd; font-size:var(--font-size-22); font-weight:700;} .proOptionList{ position: absolute; top: 100%; left: 0;width: 100%; background:#fff; color: #fff; border-radius: 6px;overflow: hidden;transition: .3s ease-in; display:none; padding:22px 35px; border:1px solid #eee;} .proOptionList > li a {display:block; padding:10px 0; color:#000; font-weight:700; color:#1f10dd;} .PopListBox {display:flex; flex-wrap:Wrap; margin-top:48px; } .PopListBox > li {width:calc((100% - 67px*2)/3); margin-right:67px;} .PopListBox > li figure img {width:100%; display:block;} .PopListBox > li:nth-of-type(3n) {margin-right:0;} .PopListBox > li:nth-of-type(n + 4) {margin-top:70px;} .popCateList {display:flex; align-items:center; gap:5px;} .popCateList li span{background:#fff;display:block; border-radius:15px; text-align:center; padding:6px 14px; color:#6c689d; font-size:var(--font-size-14); font-weight:700; border-radius:15px; border:1px solid #6c689d; text-align:Center;} .popDesc {margin-top:18px;} .popDesc h2 {font-size:var(--font-size-22); font-weight:700; margin-top:18px;} .proScrollClose {position:absolute; right:-60px; top:40px; z-index:-1;} @media screen and (max-width:1480px){ .proScrollClose {left:0; top:0; right:auto; z-index:0;} .proScroll {overflow:hidden; border-radius:15px;} } @media screen and (max-width:1020px){ .PopListBox > li {width: calc((100% - 25px* 2) / 3); margin-right:25px;} } @media screen and (max-width:767px){ .PopListBox > li {width:100%; margin-right:0;} .PopListBox > li + li {margin-top:20px;} .proSchList {flex-wrap:wrap} .proSchList > li {width:100%; margin-right:0;} .proSchList > li + li {margin-top:10px;} .proTit {max-width:332px;} .projectPopWrap {max-height:500px;} .proTit {font-size:16px; max-width:180px; height:50px;} .proScrollClose {width:10%;} .proScrollClose img {width:100%;} .proPopSchBox {margin-top:20px;} .proSch {padding:8px 30px;} .proLabel {padding:8px 30px;} .PopListBox {margin-top:25px;} } /* 애니메이션 */ @keyframes bounce{ to{ transform: translateY(-30px); } } @keyframes mv_bg{ 0%{transform:scale(1.1);} 100%{transform:scale(1);} } @keyframes txt_motion{ 0% { left: 0; } 100% { left: -100%; } } @keyframes slideUp { from { transform: translateY(200%); } to { transform: translateY(0); } } @keyframes slideUp02 { from { transform: translateY(200%); } to { transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes arrow-wave { 0% {opacity: 0;} 50% {opacity: .5;} 100% {opacity: 1;} } @keyframes slideIn { 0% { transform: translate(100%, -50%); /* 시작 위치: 화면 오른쪽 */ opacity: 0; /* 시작할 때 투명 */ } 100% { transform: translate(0, -50%); /* 최종 위치: 원래 위치 */ opacity: 1; /* 최종적으로 보임 */ } } .quick_form {position:fixed; bottom:0px; left:0; z-index:90; background:#170ac3; width:100%;} .quick_form_wrap {max-width:1780px; width:100%; margin:0 auto; height:100%;} .quickList {width:100%; height:100%;} .quickLt {height:100%; display: flex;align-items: center; gap:25px;} .quickLt > a {display:block; height:100%; line-height:70px;} .quickList {display: flex; justify-content: space-between;} .quickformBox {height:100%;} .quickformBox > ul {display:flex; align-items:center; height:100%; gap:9px;} .quickformBox > ul li > input { background: transparent; border-bottom: 1px solid #fff; padding:7px 0; width:150px; color:#fff;} .quickformBox > ul li > input::placeholder {color:rgba(255,255,255, 0.6); letter-spacing:-0.04em;} .agree_box2 input {position: absolute;top: 0; left: 0; width: 0;height: 0; opacity: 0; outline: 0; z-index: -1; overflow: hidden; display:none;} .agree_box2 input[type=checkbox] + label {display:flex; align-items: center; cursor:pointer;} .agree_box2 input[type=checkbox] + label span {width:14px; height:14px; display:block; border-radius:3px; border:2px solid #fff;} .agree_box2 input[type=checkbox] + label b {margin-left:9px; margin-right:28px;} .agree_box2 input[type=checkbox]:checked + label span {background:url('/img/icon/inq_chk.png') no-repeat center / cover; width:14px; height:14px;} .form_btn02 {color:#1f10dd; width:176px; height:50px; text-align:center; line-height:50px; background:#fff; border-radius:25px;} @media screen and (max-width:1440px){ .quickList {gap:50px;} } @media screen and (max-width:1380px){ .quickList {gap:20px;} .quickLt h2 {font-size:16px;} .quickLt h2 a {font-size:16px;} .form_btn02 {width:150px; height:35px; line-height:35px;} } @media screen and (max-width:1230px){ } @media screen and (max-width:767px){ .quick_form {bottom:0px;} .quickformBox > ul {justify-content:center;} } #popup_form_02 {position: fixed;top: 0; left: 0; width: 100%; height: 100vh; background: rgba(2, 60, 194, .95);z-index: 2000; display:none;} .pf_wrap {display: flex;justify-content: center; align-items: center;flex-direction: column; height: 100%;} .pf_form { width: 100%; max-width: 650px;} .pf_form_box ul {margin-top:30px;} .pf_form_box ul li input{width:100%; background:rgba(255, 255, 255, 0.7); padding:13px; color:#fff;} .pf_form_box ul li input::placeholder {color:#fff;} .pf_form_box ul li + li {margin-top:20px;} .q_btn { background: #000;color: #fff; width: 100%;height: 50px; text-align: center;border-radius: 3px;line-height: 50px;} .quick_btn {position:absolute; top:10%; left:0%; cursor:pointer;} .quick_btn span {width:40px; height:7px; background:#fff; display:block; position:Absolute;} .quick_btn span:nth-child(1) {transform: rotate(45deg);} .quick_btn span:nth-child(2) {transform: rotate(-45deg);} .pf_wrap h2 {font-size:var(--font-size-31); font-weight:700; color:#fff; margin-top:30px;} #popup_form_02 .form_btn02 {width:100%;} .quick_side {display: flex;gap: 20px;color: #fff;font-weight: 700; justify-content: center;font-size: 30px; align-items: center; top: 50%;right: 20px; position: fixed; z-index: 80;} .quick_side > ul {position: relative; width:55px;height: 185px; /* 각 li 간격을 감안한 높이 */ display: flex;flex-direction: column;} .quick_side > ul li {cursor: pointer; position: absolute;right: 0; /* 기본 위치 오른쪽에 고정 */width: 100%; /* 기본 너비 */ height: 54px;border-radius: 10px; overflow: hidden; display: flex;align-items: center;transition: width 0.3s ease;} /* li 요소들 위치 조정 */ .quick_side > ul li figure a img {width:54px;} .quick_side > ul li:nth-of-type(1) {top: 0;background: #ffeb3b;color: #000;} .quick_side > ul li:nth-of-type(2) {top: 50%;background: #1f10dd;color: #fff; transform: translateY(-50%);} .quick_side > ul li:nth-of-type(3) {bottom:0;;background: #0048ff;color: #fff;font-size: 16px;} .quick_side > ul li:nth-of-type(4) { top: 0px;width: auto; /* 네 번째 항목은 확장되지 않도록 기본 너비 */} /* 호버 시 너비 확장 (4번째 항목 제외) */ .quick_side > ul li:hover:not(:nth-of-type(4)) { width: 180px; right: 0; /* 왼쪽으로 확장되도록 설정 */} .quick_side > ul li > figure { margin: 0; display: flex; align-items: center;} .quick_side > ul li > a {border-radius: 10px; display: flex;align-items: center; justify-content: center;height: 65px;text-align: center; padding: 0 10px;opacity: 0;transition: opacity 0.3s ease;white-space: nowrap;} .quick_side > ul li:hover:not(:nth-of-type(4)) > a { opacity: 1;} .quick_side a.quick_side_btn {width: 65px;background: #023cc2; height: 65px; border-radius: 10px;display: flex; align-items: center;justify-content: center;font-size: 1.25rem;} @media screen and (max-width:1200px){ .quickList {justify-content: center;} .quickformBox > ul li > input {width:90px;} .quick_side a.quick_side_btn {display:flex;} .quick_side > ul li:nth-of-type(4) a {opacity:1;} } @media screen and (max-width:1020px){ .quick_form {padding:10px 0;} .quickList {flex-wrap:Wrap; align-items:center;} .quickLt {width:100%; flex-wrap:Wrap; gap:10px; text-align: center;justify-content: center;} .quickLt h2 {width:100%;} } @media screen and (max-width:767px){ .quickList {gap:10px;} .quickformBox > ul {flex-wrap:wrap;} .quickformBox > ul > li {width:calc(33.33% - 9px)} .quickformBox > ul > li:nth-of-type(3) {display:none;} .quick_side > ul {width:40px; height:140px;} .quick_side > ul li {height:40px;} .quick_side > ul li figure a img {width:40px;} .quick_side > ul li:nth-of-type(2) {background: #1f10dd;color: #fff;} .quick_side > ul li:nth-of-type(3) {background: #0048ff;color: #fff;font-size: 16px;} .quick_side > ul li:hover:not(:nth-of-type(4)) { width: 140px; right: 0; /* 왼쪽으로 확장되도록 설정 */} .form_btn02 {width:100%; border-radius:5px; height:30px; line-height:30px;} .quickLt {display:none;} .quickLt > a {line-height:0; width:20%; display:none;} .quickLt > a img {width:100%;} .quickLt h2 {display:none;} .quickRt {width:100%;} .quickformBox > ul li {height:30px;} .quickformBox > ul li > input {width:100%; padding:3px 0; color:#000; font-weight:700; font-size:16px;} .quickformBox > ul li > input {background:#fff;border: 0; outline: 0; border-radius: 5px; height: 100%; padding: 0 15px; width: 100%;} .quickformBox > ul li > input::placeholder {color:#999999; font-size:14px; font-weight:500;} .quick_side {display:none;} } /*---개인정보처리방침, 이용약관 팝업 추가---*/ .add_pop_wrap{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.9);z-index: 9999;display: none;} .add_pop_wrap *{color: #fff;} .add_pop_inner{position: absolute;top: 50%;left: 50%;width: 94%;max-width: 800px;height: 600px;border-radius: 15px;overflow: hidden;transform: translate(-50%,-50%) scale(.9);transition: transform .3s ease;} #add_wrap_02 .add_pop_inner{height: 250px;} .add_pop_wrap.active .add_pop_inner{transform: translate(-50%,-50%) scale(1);} .add_pop_tit{background: #093a62;color: #FFF;display: flex;flex-direction: row;align-items: center;justify-content: space-between;padding: 0 25px;} .add_pop_close{width: 20px;height: 60px;position: relative;} .add_pop_close span{position: absolute;top: 29px;left: 0;width: 20px;height: 2px;background: #fff;z-index: 1;transition: transform .3s ease; } .add_pop_close span:nth-child(1){transform: rotate(45deg);} .add_pop_close span:nth-child(2){transform: rotate(-45deg);} .add_pop_close:hover span{transform: rotate(0);} .add_pop_con{background: #FFF;padding: 22px 25px;overflow-y: scroll;height: calc( 100% - 60px );} .add_pop_con h5{font-size: 1rem;font-weight: bold;margin-bottom: 10px; color:#000;} .add_pop_con p{font-size: 14px;line-height: 160%;margin-bottom: 25px; color:#000;} @media (max-width: 780px){ .add_pop_con p{font-size: 12px;} } /*-- 개인정보 수집 동의 -- 20241129*/ .mainAgree {margin-top:20px;} .mainAgree input {position: absolute;top: 0; left: 0; width: 0;height: 0; opacity: 0; outline: 0; z-index: -1; overflow: hidden; display:none;} .mainAgree input[type=checkbox] + label {display:flex; align-items: center; cursor:pointer;} .mainAgree input[type=checkbox] + label a {display:block;} .mainAgree input[type=checkbox] + label span {width:16px; height:16px; display:block; border-radius:3px; border:2px solid #fff; border-radius:16px;} .mainAgree input[type=checkbox] + label b {margin-left:9px; margin-right:9px;} .mainAgree input[type=checkbox]:checked + label span {background:url('/img/icon/inq_chk.png') no-repeat center / cover;} /*-- 수정 -- 20250107*/ .newAddBtn {display:flex; gap:20px;} .newAddBtn a + a {border:1px solid #1f10dd; background:#1f10dd;} @media (max-width: 767px){ .newAddBtn {gap:10px;} .ms01Txt a {width:105px; height:35px; line-height:35px;} } .newInqBox {margin-top:40px; display:flex; gap:60px; flex-wrap:Wrap;} .newInqBox h4 {color:#fff; line-height: 1.5em; word-break:keep-all; display:flex; align-items:center; gap:10px;} .kakaoLink {display:flex; color:#fff; align-items:center; gap:14px;} .kakaoLink i img {width:50px;} @media (max-width: 1220px){ .newInqBox {gap:20px;} } @media (max-width: 1020px){ .newInqBox{justify-content: center; margin-bottom:20px;} .newInqBox h4 {width:100%; justify-content: center;} .newInqBox {margin-top:20px;} } @media (max-width: 767px){ .kakaoLink {width:100%; justify-content:center;} .kakaoLink i img {width:30px;} .newInqBox h4 {font-size:20px;} .newInqBox h4 i img {width:30px;} } /*추가 및 수정*/ .ms02Tit { font-size: var(--font-size-50);font-weight: 600; font-family: "Poppins", serif; text-align:center; color:#fff; padding:165px 0 68px;} .ms02List {max-width:1580px; width:92%; margin:0 auto; display:flex;} .ms02List li {width:calc((100% - 23px*4)/5); margin-right:23px; border-radius:30px; overflow:hidden; padding:45px 39px 144px; } .ms02List li:nth-of-type(1) {background:url(/img/main/ms02List01_bg.png) no-repeat center / cover;} .ms02List li:nth-of-type(2) {background:url(/img/main/ms02List02_bg.png) no-repeat center / cover;} .ms02List li:nth-of-type(3) {background:url(/img/main/ms02List03_bg.png) no-repeat center / cover;} .ms02List li:nth-of-type(4) {background:url(/img/main/ms02List04_bg.png) no-repeat center / cover;} .ms02List li:nth-of-type(5) {margin-right:0; background:url(/img/main/ms02List05_bg.png) no-repeat center / cover;} .ms02Txt {color:#fff;} .ms02Txt h2 {word-break:keep-all;} .ms02Txt p {margin-top:28px; line-height:1.4em; word-break:keep-all;} @media (max-width: 1640px){ .ms02List li {padding:45px 20px 100px;} } @media (max-width: 1320px){ .ms02List {flex-wrap:Wrap;} .ms02List li {padding:40px 20px 100px; width:calc((100% - 30px*2)/3); margin-right:30px;} .ms02List li:nth-of-type(3n) {margin-right:0px;} .ms02List li:nth-of-type(n + 4) {margin-top:30px;} } @media (max-width: 820px){ .ms02List {flex-wrap:Wrap;} .ms02List li {padding:40px 20px 40px; width:calc((100% - 20px*2)/3); margin-right:20px;} .ms02List li:nth-of-type(3n) {margin-right:0px;} .ms02List li:nth-of-type(n + 4) {margin-top:20px;} } @media (max-width: 720px){ .ms02Tit {padding:80px 0 60px;} .ms02List {flex-wrap:Wrap;} .ms02List li {width:100%; margin-right:0;} .ms02List li + li{margin-top:20px;} .ms02Txt {text-align:center; } .ms02Txt p {margin-top:20px;} } .newInqBox.on .jello-horizontal {-webkit-animation: jello-horizontal 0.9s both;animation: jello-horizontal 0.9s both;} @-webkit-keyframes jello-horizontal { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes jello-horizontal { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } #ms03 figure img { -webkit-user-drag: none;-khtml-user-drag: none; -moz-user-drag: none;-o-user-drag: none;user-drag: none;} /*20250204 퍼블리싱*/ #ms03 {padding:185px 0;} .ms03Tit {color:#111; text-align:center; padding-bottom:60px;} .ms03List {display:flex;} .ms03List > li.ms03Item {position:relative; width:calc((100% - 36px*2)/3); margin-right:36px; padding:44px; box-sizing:border-box; border:2px solid #0d00b5;} .ms03List > li:nth-of-type(3) {margin-right:0;} .ms03Item .ms03DescLoop {display:flex; align-items: center;justify-content: space-between;} .ms03Item .ms03TopBox {margin-top:20px;} .ms03Item .ms03TopBox h3 {line-height:1.5em;} .ms03Item .ms03DescLoop h2{color:#020202;} .ms03Item .ms03DescLoop span {display:block; background:#e4e4f8; border-radius:21.52px; padding:14px; box-sizing:border-box; color:#0d00b5; } .ms03Item .ms03DescBox {margin-top:38px;} .ms03Item .ms03DescBox h4 {color:#fff; background:#0d00b5; text-align:center; border-radius:18px; width:77px; height:35px; text-align:center; line-height:35px;} .ms03DescBoxList {display:flex; flex-wrap:wrap; margin-top:10px;} .ms03DescBoxList li {width:50%;} .ms03DescBoxList li p {font-weight:400;} .ms03DescBoxList li:nth-of-type(n + 3){margin-top:8px;} .ms03DescBoxList.ms03DescBox02 li {width:100%;} .ms03DescBoxList.ms03DescBox02 li p {font-weight:400;} .ms03PriceBox {} .ms03PriceBox {margin-top:40px;} .ms03PriceBox h2 {display: flex;align-items: baseline;gap: 5px;justify-content: flex-end;} .ms03PriceBox h2 b {color:#0d00b5;} @media (max-width: 1330px){ .ms03List > li.ms03Item {padding:30px;} } @media (max-width: 1230px){ .ms03List > li.ms03Item {padding:20px;} } @media (max-width: 1180px){ .ms03List > li.ms03Item { width:calc((100% - 15px*2)/3); margin-right:15px;} .ms03Item .ms03DescBox {margin-top:20px;} .ms03PriceBox {margin-top:22px;} .ms03DescBoxList {flex-wrap:wrap;} .ms03DescBoxList li{width:100%;} .ms03DescBoxList li:nth-of-type(n + 2){margin-top:8px;} } @media (max-width: 1080px){ .ms03List {display:flex; flex-wrap:wrap;} .ms03List > li.ms03Item {width:96%; max-width:720px; margin:0 auto;} .ms03List > li.ms03Item + li.ms03Item {margin-top:20px;} .ms03DescBoxList li{width:50%;} .ms03DescBoxList li:nth-of-type(n + 2){margin-top:auto;} .ms03DescBoxList li:nth-of-type(n + 3){margin-top:8px;} } @media (max-width: 1020px){ #ms03 {padding:100px 0;} } @media (max-width: 767px){ #ms03 {padding:40px 0;} } #ms05 {padding:165px 0;} .ms05Tit { color: #111;text-align: center; padding-bottom: 60px;} .ms05Content {max-width:1080px; width:96%; margin:0 auto;} .ms05List ul {display:flex; flex-wrap:wrap;} .ms05List ul li {width:calc((100% - 25px*3)/4); margin-right:25px;} .ms05List ul li:nth-of-type(4n) {margin-right:0;} .ms05List ul li:nth-of-type(n + 5) {margin-top:52px;} .ms05List ul li figure img {width:100%;} @media (max-width: 1080px){ } @media (max-width: 1020px){ #ms05 {padding:100px 0;} } @media (max-width: 767px){ #ms05 {padding:40px 0;} } @media (max-width: 720px){ .ms05List ul {flex-wrap:wrap;} .ms05List ul li {width:calc((100% - 25px)/2); margin-right:25px;} .ms05List ul li:nth-of-type(2n) {margin-right:0;} .ms05List ul li:nth-of-type(n + 5) {margin-top:auto;} .ms05List ul li:nth-of-type(n + 3) {margin-top:20px;} } .quickLt a.q_ka_btn {display:flex; align-items:center; border-radius:10px; font-size:1rem; font-weight:500; background:#ffeb3b; height:35px; width:125px; line-height:35px; text-align:Center; gap:3px; padding:0 15px;} .quickLt a.q_ka_btn i img{display:block;} @media (max-width: 1540px){ .q_email {display:none;} } @media (max-width: 1020px){ .quickLt a.q_ka_btn {display:none;} } .b_bot_box {display:none; z-index:90; } .b_bot_box .b_btn_list{display:flex; align-items:center; flex-wrap:wrap; } .b_btn_list li{width:50%; } .b_btn_list li a{display:flex; justify-content:center; align-items:center; height:45px; width:100%; } .b_btn_list li.b_call_box{background-color:#111111; } .b_btn_list li.b_kakao_box{background-color:#ffd200;} .b_btn_list li.b_call_box a{color:#fff; } .b_btn_list li.b_kakao_box a{color:#2d0000; } .b_btn_list li img{margin-right:10px; } @media screen and (max-width:767px){ .b_bot_box {display:block; position:absolute; top:-45px; left:0; width:100%;} .b_btn_list li img{height: 13px;} .b_btn_list li p{font-size:13px; font-weight:700;} .b_btn_list li img{margin-right:5px; } } .mo_form {display:none !important;} .mo_form .agree_box2 {margin-left:6px; margin-top:9px;} @media screen and (max-width:767px){ .pc_form {display:none !important;} .mo_form {display:block !important;} } .inter_box {display: flex;flex-direction: column;justify-content: space-between; text-align: center;} .add_inter {color:#fff; font-weight:500;} @keyframes neonBlink { 0% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.7), 0 0 50px rgba(255, 255, 255, 0.6); } 50% { text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 40px rgba(255, 255, 255, 0.9), 0 0 60px rgba(255, 255, 255, 0.8), 0 0 80px rgba(255, 255, 255, 0.7); } 100% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.7), 0 0 50px rgba(255, 255, 255, 0.6); } } .add_inter {transition: transform 0.3s ease-in-out; /* 부드러운 확대 효과 */font-size: 16px; /* 원하는 크기로 조정 */ font-weight: bold;color: white; /* 텍스트 색상 */ text-decoration: none; text-transform: uppercase; letter-spacing: 2px; position: relative;animation: neonBlink 1.5s infinite alternate ease-in-out; /* 더 부드러운 반짝거림 */} .add_inter:hover {transform: scale(1.1);} @media screen and (max-width:767px){ .inter_box {gap:10px;} .add_inter {font-size:12px;} }