/*---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-21: 1.313rem; --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-35: 2.188rem; --font-size-36: 2.25rem; --font-size-37: 2.313rem; --font-size-40: 2.5rem; --font-size-42: 2.625rem; --font-size-45: 2.813rem; --font-size-48: 3rem; --font-size-50: 3.125rem; --font-size-55: 3.438rem; --font-size-58: 3.625rem; --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-l: 300; --font-r: 400; --font-m: 500; --font-sb: 600; --font-b: bold; --font-eb: 800; --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_21{font-size: var(--font-size-21);} .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_37{font-size: var(--font-size-37);} .fs_40{font-size: var(--font-size-40);} .fs_42{font-size: var(--font-size-42);} .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_58{font-size: var(--font-size-58);} .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){ } @media screen and (max-width:1020px){ } @media screen and (max-width:767px){ } /*--- common ---*/ .img_box {position:relative;} .img_box img {max-width:100%; margin:0 auto; display:block;} .pos_img {position:absolute;left:0; top:0;} .font_mons {font-family: "Montserrat", sans-serif;} .font_pop {font-family: "Poppins", serif;} .font_esa {font-family: 'GongGothicBold';} .mt24 {margin-top:24px;} .mt30 {margin-top:30px;} .mt45 {margin-top:45px;} /*font weight*/ .font_l{font-weight: var(--font-l);} .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_eb{font-weight: var(--font-eb);} .font_bl{font-weight: var(--font-bl);} /*text-motion*/ /* 공통 설정 */ .j_motion.common_motion {opacity: 0;transition: transform 0.8s ease, opacity 0.4s;} /* 위에서 아래 */ .j_motion.top_to_bottom { transform: translateY(-25px); } .j_motion.top_to_bottom.on { transform: translateY(0); opacity: 1; } /* 아래에서 위 */ .j_motion.bottom_to_top { transform: translateY(25px); } .j_motion.bottom_to_top.on { transform: translateY(0); opacity: 1; } /* 왼쪽에서 오른쪽 */ .j_motion.left_to_right { transform: translateX(-25px); } .j_motion.left_to_right.on { transform: translateX(0); opacity: 1; } /* 오른쪽에서 왼쪽 */ .j_motion.right_to_left { transform: translateX(25px); } .j_motion.right_to_left.on { transform: translateX(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:90px; position:fixed; left:0; top:0; width:100%; transition:0.28s; z-index:99;} #j_header.active {background:#000;} .hdWrap {display:flex; justify-content:space-between; align-items:center; max-width:1480px; width:92%; margin:0 auto; height:100%;} .hdWrap > .j_gnb {display:flex; height:100%;} .hdWrap > .j_gnb > li {height:100%; margin:0 35px;} .hdWrap > .j_gnb > li:first-child {margin-left:0;} .hdWrap > .j_gnb > li:last-child {margin-right:0;} .hdWrap > .j_gnb > li a {display:block; height:100%; line-height:90px; font-size:var(--font-size-18); font-weight:600; color:#fff; transition:0.28s;} .hdWrap > .j_gnb > li > a i {position:relative;} .hdWrap > .j_gnb > li > a i:after {content:''; position:absolute; background:#fff; content: "";bottom: -3px; left: auto; right: 0; width: 0; height: 2px; background: #ef2c2c; z-index: 1;transition: width .45s ease;} .hdWrap > .j_gnb > li > a:hover i:after {left:0; right:auto; width:100%;} .mo_btn {width:26px; height:21px; float:right; position:relative; display:none;} .mo_btn span {display:block; background:#fff; width:100%; height:3px;position: absolute;} .mo_btn span:nth-of-type(1) {transform:translateY(6px);} .mo_btn span:nth-of-type(2) {transform:translateY(0px);} .mo_btn span:nth-of-type(3) {transform:translateY(-6px);} .mobile_wrap {position:fixed; width:30%; height:100vh; top:0; right:0; padding:100px 20px; background:#000;transition: transform 0.4s; transform:translateX(100%); box-shadow: 5px 20px 24px 0px rgba(0, 0, 0, 0.11); z-index:90;} .mobile_wrap.on {transform:translateX(0);} .mo_inner {height:100%} .mo_inner > .j_gnb {height:100%; display: flex; height: 100%; flex-direction: column; width: 100%; gap: 40px; } .mo_inner > .j_gnb > li { word-break: keep-all; } .mo_inner > .j_gnb > li > a {transition:0.28s; color:#fff; font-family: 'GmarketSans'; font-size:20px; font-weight:700;} .mo_inner > .j_gnb > li:hover a {color:#ef2c2c;} .close_btn {position:absolute; right:10px; top:10px; width: 30px; height: 30px;} .close_btn span {background:#fff; width:20px; 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-color: rgba(255, 255, 255, .8); display: none; z-index: 40;} .j_site_bg.on {display:block;} @media screen and (max-width:1020px){ .hdWrap > .j_gnb > li {margin:0 20px;} } @media screen and (max-width:767px){ .hdWrap > .j_gnb {display:none;} .mo_btn {display:block;} .mo_inner > .j_gnb > li > a {font-size:16px;} } @media screen and (max-width:720px){ #j_header {height:60px;} .hdWrap > h1 > a img {width:50%;} } /*mv*/ .j_mv {height: 950px; display: flex; justify-content: center; align-items: center;overflow-x: hidden; background:url('/img/main/mv_bg.jpg') no-repeat center / cover; flex-direction: column;} @media screen and (max-width:720px){ .j_mv {height:550px;} } /*section01*/ #section01 {background:url(/img/main/sec01_bg.jpg) no-repeat center / cover; padding:160px 0 90px;} .sec01List {display:flex; justify-content:space-between;} .sec01List li {position:relative;} .sec01List li:first-child {margin-right:20px;} .bm_link {display:block; width:100%; position:absolute; bottom:0; left:50%; transform:translateX(-50%);height:80px; z-index:1;} @media screen and (max-width:1020px){ #section01 {padding:80px 0;} } @media screen and (max-width:767px){ .sec01List {flex-wrap:wrap;} .sec01List li {width:100%;} .sec01List li:first-child {margin-right:0;} .sec01List li + li {margin-top:30px;} } #section02 {background:#f8f8f8;} #section03 {background:url(/img/main/sec03_bg.jpg) no-repeat center / cover; height:966px; position:relative; overflow:hidden;} #section03 .j_inner {height:100%;} .sec03List {display:flex; align-items: center;height: 100%;} :root{ --size: clamp(10rem, 1rem + 40vmin, 30rem); --gap: calc(var(--size) / 24); --duration: 40s; --scroll-start: 0; --scroll-end: calc(-100% - var(--gap)); } /*wrapper*/ /* .marquee:hover .marquee__group { animation-play-state: paused;} */ .wrapper{ gap:70px; display: flex;flex-direction: column; margin: auto; max-width: 100vw;} .wrapper--vertical{flex-direction: row;height: 187vh;} .rail_wrap{position: absolute;top: 0vh;right: 0vw;} .rail_wrap *{box-sizing: border-box;} .marquee{position: relative; display: flex;user-select: none;gap: var(--gap);} .marquee__group{flex-shrink: 0;display: flex;align-items: center;justify-content: space-around;gap: var(--gap);min-width: 100%;animation: scroll-x var(--duration) linear infinite;} .marquee__group>li{border-radius: 15px;overflow: hidden;box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1);-webkit-box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1);} .marquee__group>li>figure>img{display: block;} @media(prefers-reduced-motion: reduce){ .marquee__group{animation-play-state: paused;} } .marquee--vertical{ --mask-direction: to bottom; } .marquee--vertical, .marquee--vertical .marquee__group{flex-direction: column;} .marquee--vertical .marquee__group{animation-name: scroll-y;} .marquee--reverse .marquee__group{animation-direction: reverse; animation-delay: -3s;} @keyframes scroll-y{ from{transform: translateY(var(--scroll-start));} to{transform: translateY(var(--scroll-end));} } @media screen and (max-width:1680px){ .marquee__group>li>figure>img {width:280px;} } @media screen and (max-width:1480px){ .wrapper {gap:30px;} } @media screen and (max-width:1380px){ .marquee__group>li>figure>img {width:220px;} } @media screen and (max-width:1080px){ .marquee__group>li>figure>img {width:220px;} .rail_wrap {z-index:-1;} #section03::before { content: ""; position: absolute;top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: linear-gradient(to top, rgb(0 0 0 / 95%) 20%, transparent);} .sec03List figure img {position:relative; z-index:1; width:100%;} } @media screen and (max-width:1000px){ } @media screen and (max-width:767px){ #section03 {height:620px;} .rail_wrap {right:0} .marquee__group>li>figure>img {width:120px;} .wrapper {gap:15px;} } #section04 {background:#f8f8f8;} @media screen and (max-width:767px){ } #section05 {background:#f8f8f8;} #section06 {position:relative;} #section08 {padding:125px 0;} @media screen and (max-width:1080px){ #section08 {padding:80px 0;} } @media screen and (max-width:767px){ #section08 {padding:0;} } #section09 {position:relative;} #section09::after {content: ''; position: absolute; width: 615px;height: 615px; background: url(/img/main/sec09_items01.png) no-repeat center / cover; top: -22%;right: -16%; z-index: 1; opacity: 0; transform: translateX(50px); /* 오른쪽에서 시작 */transition: transform 0.8s ease, opacity 0.6s ease;} #section09::before {content: '';position: absolute;width: 602px;height: 511px;background: url(/img/main/sec09_items02.png) no-repeat center / cover;bottom: -17%;left: -9%; z-index: 1;opacity: 0;transform: translateX(-50px); /* 왼쪽에서 시작 */transition: transform 0.8s ease, opacity 0.6s ease;} #section10 {background:url(/img/main/sec10_bg.jpg) no-repeat center / cover;} /* 활성화 상태 설정 */ #section09.j_motion.on::after {transform: translateX(0); /* 제자리로 이동 */opacity: 1;} #section09.j_motion.on::before {transform: translateX(0); /* 제자리로 이동 */ opacity: 1;} @media screen and (max-width:1480px){ #section09::after {width: 372px;height: 380px;} #section09::before {width: 367px;height: 311px;} } @media screen and (max-width:1280px){ #section09::after {width: 300px;height: 300px;} #section09::before {width: 300px;height: 250px;} } @media screen and (max-width:1080px){ #section09::after {width: 222px;height: 222px; right: -12%;} #section09::before {width: 200px;height: 171px;} } @media screen and (max-width:767px){ #section09::after {width: 100px;height: 100px; right: -12%; top:-8%;} #section09::before {width: 100px;height: 80px; bottom:0;} } /*tab css*/ .sec10tabnav{max-width:516px; height:80px; margin:0 auto; display:flex; border-radius:10px; border:1px solid #fff; width:92%;} .sec10tabnav li{width:50%; height:100%; text-align:center;} .sec10tabnav li a {color:#fff; display:block; line-height:80px; border-radius:10px;height:80px;} .sec10tabnav li a.active {background:#fff; color:#ef2c2c;} .sec10tabcontent {margin-top:25px;} @media screen and (max-width:767px){ .sec10tabnav {height:50px; } .sec10tabnav li a {height:50px; line-height:50px; font-size:16px;} } #section11 {background:url(/img/main/sec11_bg.jpg) no-repeat center / cover; padding:120px 0;} .sec11Desc {color:#fff;} .sec11Desc h2 {line-height:1.25em; margin-top:45px;} .sec11Desc p {margin-top:30px;} .sec11List {display:flex; align-items:center;} .sec11List li {width:50%;} .sec11List li:nth-of-type(2){} .sec11Tit {font-family: 'ghanachoco'; color:#fff; letter-spacing:-0.020em; text-align: center;} .sec11Form {padding:50px 50px 80px 50px; border:1px solid rgba(255,255,255, 0.6);} .w100 {width:100% !important;} .j_form_wrap {display:flex; flex-wrap:wrap; margin-top:40px;} .j_form_btn {display:flex; align-items:center;} .j_form_box {width:calc((100% - 16px)/2); margin-right:16px;} .j_form_box:nth-of-type(2n) {margin-right:0;} .j_form_box:nth-of-type(n + 3) {margin-top:16px;} .field_box input {width:100%; box-sizing:border-box; padding:20px 30px; background:#fff; color:#000; font-size:17px; font-weight:500; border-radius:6px;} .field_box input::placeholder {color:#6c6c6c;} .field_box textarea {width:100%; box-sizing:border-box; padding:20px 30px; background:#fff; resize:none; height:130px; color:#000; font-size:17px; font-weight:500; border-radius:6px; border:none;} .field_box textarea::placeholder {color:#6c6c6c;} .j_form_btn {display:flex; width:100%; background:#000000; justify-content:center; color:#fff; gap:11px; letter-spacing:0.075em; height:75px; border-radius:6px;} .agree_box {margin-top:18px;} .agree_box input {display:none;} .mr0 {margin-right:0;} .fc_ff {color:#fff;} .j_form_btn_wrap {margin-top:18px;} .agree_box input[type=checkbox] + label {display:flex; align-items:center; width:100%; } .agree_box input[type=checkbox] + label a {display:block; margin-left:6px;} .agree_box input[type=checkbox] + label span {display:block; width:22px; height:22px; border-radius:22px; background:url(/img/icon/form_chk.png) no-repeat center / cover; margin-right:9px; } .agree_box input[type=checkbox]:checked + label span {background: url(/img/icon/form_chk02.png) no-repeat 50% 50%;} @media screen and (max-width:1280px){ .sec11List {flex-wrap:wrap;} .sec11Desc {text-align:center;} .sec11List li{width:100%;} .sec11List li + li {margin-top:40px;} } @media screen and (max-width:1080px){ #section11 {padding:80px 0;} } @media screen and (max-width:767px){ .sec10tabcontent {margin-top:0px;} .sec11Desc figure img {width:40%;} .sec11Desc h2 {margin-top:20px; font-size:20px;} .sec11Desc p {font-size:18px;} .j_form_box {width:100%; margin-right:0;} .j_form_box + .j_form_box {margin-top:10px;} .sec11Form {padding:30px;} .j_form_btn {height:45px;} } /*footer*/ footer {background:#1f1f1f; padding:55px 0; margin-bottom:95px;} footer .ft_wrap .ft_lt p {color:#656565; line-height:1.78em;} .mt18 {margin-top:18px;} .ft_wrap {display:flex;justify-content: space-between; align-items:center;} @media screen and (max-width:720px){ .ft_wrap {flex-warp:wrap; flex-direction: column-reverse;} .ft_lt {width:100%; margin-top:20px;} .ft_rt {width:100%;} .ft_rt figure img {width:18.5%;} footer .ft_wrap .ft_lt p {font-size:14px;} } /*--- quick_bar ---*/ .quick_bar {width:100%; background:#111111; padding:20px 0; position:fixed; bottom:0; left:0;z-index:50; } .quick_inner {display:flex; align-items:center; height:100%;} .quick_input_box {display:flex; align-items:center;} .quick_input_box ul {display:flex; align-items:center; gap:10px;} .quick_input_box li input {height:50px; padding:0 13px; box-sizing:border-box; border:1px solid #fff; color:#000; max-width:180px; border-radius:5px; background:#fff;} .quick_inner {display:flex; justify-content: space-between;} .q_form_btn_wrap {margin-left:22px;} .q_form_btn_wrap button{width:211px; height:55px; display:flex; align-items:center; justify-content:center; border-radius:6px; background:#ef2c2c; color:#fff; } .q_form_btn_wrap button i {margin-left:13px;} .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;} .agree_box2 input[type=checkbox] + label span {width:22px; height:22px; display:block; border-radius:22px; background:url(/img/icon/form_chk.png) no-repeat center / cover; cursor:pointer;} .agree_box2 input[type=checkbox] + label b {margin-left:10px;} .agree_box2 input[type=checkbox] + label a {cursor:pointer;} .agree_box2 input[type=checkbox]:checked + label span {background:url(/img/icon/form_chk02.png) no-repeat 50% 50%;} .callBox {display:flex; align-items:center; gap:13px; margin-right:57px;} .callBox a {display:flex; align-items:center; gap:15px; } .callBox h2 {color:#fff; margin-top:8px;} .mr17 {margin-right:17px;} .mo_call {display:none;} @media screen and (max-width:1541px){ .callBox {margin-right:20px;} .quick_input_box li input {max-width:120px;} .q_form_btn_wrap button {max-width:200px;} } @media screen and (max-width:1280px){ .callBox {margin-right:20px;} .quick_input_box li input {max-width:100px;} .q_form_btn_wrap button {max-width:140px;} .callBox a {font-size:25px;} } @media screen and (max-width:1081px){ .quick_inner {flex-wrap:Wrap;} .quick_logo {width:100%; text-align:center;} .quick_form_inner {width:100%;} .quick_input_box { justify-content: center; margin-top:20px;} } @media screen and (max-width:920px){ .quick_input_box ul {flex-wrap:wrap; gap:0;} .quick_input_box ul li {width:calc((100% - 10px)/2); margin-right:10px;} .quick_input_box ul li:nth-of-type(1){width:100%; margin-right:0;} .quick_input_box ul li:nth-of-type(2) {} .quick_input_box ul li:nth-of-type(3) {margin-right:0;} .quick_input_box ul li:nth-of-type(4) { margin-top:10px;} .quick_input_box ul li:nth-of-type(5) {margin-right:0;} .quick_input_box ul li:nth-of-type(6) {width:100%; margin-right:0;} .quick_input_box li input {max-width:unset; width:100%;} .callBox {justify-content:center; margin-right:0;} .q_form_btn_wrap {margin-left:0;} .q_form_btn_wrap button {margin-left:0; margin-top:10px; width:100%; max-width: unset;} } @media screen and (max-width:720px){ .quick_bar {paddin} .quick_input_box {margin-top:20px;} .quick_logo {display:flex; align-items:center; justify-content: space-between;} .quick_logo > img {width:21%;} .mo_call {display:block;} .mo_call i img {width:16px; margin-right:5px;} .callBox a {gap:5px; font-size:16px;} .callBox a i img {width:18px;} .quick_input_box li input {height:25px;} .q_form_btn_wrap button {height:28px;} .callBox {display:none;} .agree_box2 input[type=checkbox] + label span {height:18px; width:18px;} } /*게시판 이너*/ .bo_pd {padding:150px 0;} .bo_section {max-width:1400px; margin:0 auto;} /* admin menu */ .b_adm_list{position:fixed; right:20px; bottom:110px; z-index:15; } .b_adm_list li{margin-bottom:7px; } .b_adm_list li:last-child{margin-bottom:0px; } .b_adm_list li a{display:flex; align-items: center; justify-content: center; color:#fff; width:100px; height:40px; border-radius:6px; text-align:center; background-color:#111; border:1px solid #666; } @media screen and (max-width:767px){ .b_adm_list{position:fixed; right:20px; bottom:190px; z-index:15; } } /*디자인 컨펌 후 수정 진행 */ .sec03List figure {position:relative;} .naverLink {z-index:10;display:block; position:absolute; left:0; bottom:-130px;background:#03c75a; color:#fff; border-radius:10px; text-align:center; max-width:340px; height:80px; line-height:80px; width:100%; font-weight:800; font-size:var(--font-size-30);} @media screen and (max-width:767px){ .naverLink {bottom:-70px; height:50px; line-height:50px; max-width:240px;} } #map {background:url(/img/main/map_bg.jpg) no-repeat center / cover; padding:160px 0 230px 0;} .mapInner {max-width:1490px; width:92%; margin:0 auto; position:relative;} .mapTit {color:#fff;} .locateInfo {margin-top:60px;} .locateInfo .map_page {color:#fff; padding:60px 80px; display:none; background:#ef2c2c; border-radius:20px; overflow:hidden;} .locateInfo li h2 {padding-bottom:35px; padding-left:19px; border-bottom:2px solid #fff; box-sizing:border-box;} .locateInfo li dl {margin-top:40px; padding-left:19px;} .locateInfo li dl dt {font-size: var(--font-size-25); font-weight:800;} .locateInfo li dl dd {font-size: var(--font-size-25); font-weight:600; margin-top:15px;} .locateInfo .map_page.show {display:block;} .allMap {position:absolute; width:726px; height:972px; background:url(/img/main/allmap.png) no-repeat center / cover; top:-23%; right:0;} .allMap div {position:absolute; cursor:pointer;} .allMap div img {width:100%;} .allMap div.show {z-index:10;} .allMap .banseog.show {left: 218.3px; top: 39.5%;} .allMap .banseog {left: 240.3px; top: 43.5%;} .allMap .bongmyeong {left:265px; top:40.3%;} .allMap .bongmyeong.show {left: 250px;top: 36.3%;} .allMap .goejeong {left:261px; top:44%;} .allMap .goejeong.show {left:250px; top:41%;} .allMap .sejong {left:227px; top:33%;} .allMap .sejong.show {left:225px; top:30%;} .allMap .view_on {display:none;} .allMap .show .view_off {display:none;} .allMap .show .view_on {display:block;} @media screen and (max-width:1330px){ .locateInfo {display: flex; flex-wrap: wrap;flex-direction: column-reverse; align-items: center; gap:20px;} .locateInfo li.map_page {width:100%;} .allMap {position:relative; right:auto; top:0; width:100%; max-width:726px;} } @media screen and (max-width:767px){ .allMap { width:100%; max-width:407px; height:434px; background:url(/img/main/allmap_m.png) no-repeat center / cover;} .locateInfo .map_page {padding:20px;} .locateInfo li h2 {padding-bottom:20px;} .locateInfo li dl {margin-top:20px;} .locateInfo li dl dd {word-break:keep-all;} .allMap .banseog.show {left: 105.3px; top: 37.5%; width:40px} .allMap .banseog {left: 112.3px; top: 40.5%; width:30px} .allMap .bongmyeong {left:122px; top:37.3%; width:30px} .allMap .bongmyeong.show {left: 119px;top: 35.3%; width:40px} .allMap .goejeong {left:123px; top:43%; width:30px} .allMap .goejeong.show {left:119px; top:41%; width:40px} .allMap .sejong {left:109px; top:29%; width:30px} .allMap .sejong.show {left:109px; top:29%; width:40px} } /*-- 2024.12.09 - 팝업 반응형 대응 --*/ @media screen and (max-width:720px){ #hd_pop .hd_pops{top: 50px !important;left: 50% !important;transform: translateX(-50%);width: 80%;} #hd_pop .hd_pops .hd_pops_con{width: 100% !important;height: auto !important;line-height: 0;} #hd_pop .hd_pops .hd_pops_con br{display: none;} }