/*---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'); @import url('https://fonts.googleapis.com/css2?family=Lalezar&display=swap'); :root { /*color*/ --color-basic:#fff; /*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-38: 2.375rem; --font-size-40: 2.5rem; --font-size-42: 2.625rem; --font-size-43: 2.688rem; --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-85: 5.313rem; --font-size-90: 5.625rem; --font-size-100: 6.25rem; --font-size-120: 7.5rem; /*font-weight*/ --font-t: 100; --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_38{font-size: var(--font-size-38);} .fs_40{font-size: var(--font-size-40);} .fs_42{font-size: var(--font-size-42);} .fs_43{font-size: var(--font-size-43);} .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_85{font-size: var(--font-size-85);} .fs_90{font-size: var(--font-size-90);} .fs_100{font-size: var(--font-size-100);} .fs_120{font-size: var(--font-size-120);} .font_bs {color:var(--color-basic);} /*font weight*/ .font_t{font-weight: var(--font-t);} .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);} @media screen and (max-width:1020px){ } @media screen and (max-width:720px){ } /*--- common ---*/ .j_inner {max-width:1480px; width:92%; margin:0 auto;} .j_eng {font-family: "Lalezar", serif;} .j_font {font-family: 'NEXON Lv2 Gothic', serif;} .msTit {display:flex;justify-content:space-between; align-items:center;} .msTit h2 {letter-spacing:0.12em; position:relative;} .msTit h2::before {content:''; position:absolute; width:10px; height:10px; left:-10px; top:-10px; background:#c8102e;} .msTit a {display:flex; align-items:center; gap:29px;} .msTit a i img {display:block;} /*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_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;} /*header*/ #j_header {height:90px; position:fixed; top:0; left:0; width:100%; z-index:99; transition:0.28s;} #j_header.active {background:#000;} .hdInner {max-width:1800px; width:92%; margin:0 auto; display:flex; align-items:center; height:100%; justify-content: space-between; } .hdRt {display:flex; align-items:center;} .mv_inner { max-width: 1600px; width: 92%; margin: 0 auto; height: 100%;position: relative;} #j_header .hdRt > .hdNav > .j_gnb {display:flex;} #j_header .hdRt > .hdNav > .j_gnb > li {position:relative;} #j_header .hdRt > .hdNav > .j_gnb > li > a {display:block; color:#fff; height:100%; line-height:90px; font-size:var(--font-size-16); font-weight:600; padding:0 30px; transition:0.28s;} #j_header .hdRt > .hdNav > .j_gnb > li:hover > a{color:#c8102e;} .allGnbBtn {position:relative; width:30px; height:9px; margin-left:63px;} .allGnbBtn span {display:block; background:#fff; width:100%; height:1px; position:absolute;} .allGnbBtn span:nth-of-type(1) {top:0; left:0;} .allGnbBtn span:nth-of-type(2) {bottom:0; left:0;} /* depth02 */ #j_header .hdRt > .hdNav > .j_gnb > li > .depth02 { padding: 10px 0; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.6); width: 150px; text-align: center; display: none; } #j_header .hdRt > .hdNav > .j_gnb > li > .depth02 > li > a { padding: 10px 0; display: block; color: #fff; transition: 0.28s; font-weight: 700; } #j_header .hdRt > .hdNav > .j_gnb > li > .depth02 > li:hover > a { color: #c8102e; } /* depth03 */ #j_header .hdRt > .hdNav > .j_gnb > li > .depth02 > li > .depth03 { background: rgba(0, 0, 0, 0.6); width: 100%; transition: opacity 0.28s, max-height 0.3s ease-in-out; color: #fff; opacity: 0; max-height: 0; overflow: hidden; } #j_header .hdRt > .hdNav > .j_gnb > li > .depth02 > li > .depth03.open { opacity: 1; max-height: 500px; } #j_header .hdRt > .hdNav > .j_gnb > li > .depth02 > li > .depth03 > li > a { display: block; color: #fff; font-weight: 500; text-align: center; padding: 10px 0; } #j_header .hdRt > .hdNav > .j_gnb > li > .depth02 > li > .depth03 > li:hover > a { color: #c8102e; } .mobile_wrap {position:fixed; width:35%; height:100vh; top:0; right:0; padding:100px 50px; background:#fff;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:#000;font-size:var(--font-size-40); font-weight:600;} .mo_inner > .j_gnb > li > a i {position:relative;} .mo_inner > .j_gnb > li > a i::after {position:absolute; right:-20px; top:-10px; width:15px; height:15px; background:#c8102e; border-radius:15px; content:''; opacity:0;} .mo_inner > .j_gnb > li:hover a i:after {opacity:1;} .mo_inner > .j_gnb > li:hover > a {color:#c8102e;} .mo_inner > .j_gnb > li .depth02 {margin-top:10px;} .mo_inner > .j_gnb > li .depth02 > li > a { font-size:var(--font-size-20); display:block; padding:10px 0; color:#b9b9b9; font-weight:400;} .mo_inner > .j_gnb > li .depth02 > li > a:hover {color:#c8102e;} .close_btn {position:absolute; right:10px; top:10px; width: 30px; height: 30px;} .close_btn span {background:#000; 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(0, 0, 0, .8); display: none; z-index: 40;} .j_site_bg.on {display:block;} @media screen and (max-width:820px){ .hdRt > .hdNav > .j_gnb > li > a {padding:0 15px;} .allGnbBtn {margin-left:30px;} } @media screen and (max-width:768px){ #j_header {height:60px;} #j_header .hdRt > .hdNav > .j_gnb {display:none;} .mo_inner > .j_gnb {gap:20px;} .mo_inner > .j_gnb > li > a {font-size:18px;} .mo_inner > .j_gnb > li .depth02 > li > a {font-size:14px; padding:5px 0;} .mobile_wrap {padding:100px 20px; width:40%;} .hdLt a img {width:50%;} .mo_inner > .j_gnb > li > a i::after {position:absolute; right:-10px; top:-5px; width:5px; height:5px;border-radius:55px; } } /*mv*/ .mainVisual {width:100%; height:100vh;} .mvSwip {height:100%;} .mv {width:100%; height:100%;} .mv.mv01 {background:url(/img/main/mv01.jpg) no-repeat center / cover; } .mv.mv02 {background:url(/img/main/mv02.jpg) no-repeat center / cover;} .mv.mv03 {background:url(/img/main/mv03.jpg) no-repeat center / cover;} .mvDesc {color:#fff; position:absolute; left:0; top:50%; transform:translateY(-50%);} .mvDesc h2 {line-height:0.875em; margin-top:28px;} .mvDesc h2 ,.mvDesc h4{transform: translateY(25px);opacity: 0;transition: transform 1s ease, opacity .6s;} .mv.on .mvDesc h2, .mv.on .mvDesc h4 {transform: translateY(0);opacity: 1;} .swiper-button-next.mv_next {background: url(/img/icon/mv_next.png) no-repeat center / cover; width:50px; height:50px; right:60px; margin-top:0;} .swiper-button-prev.mv_prev {background: url(/img/icon/mv_prev.png) no-repeat center / cover; width:50px; height:50px; left:60px; margin-top:0;} .swiper-button-next::after,.swiper-button-prev::after {display: none;} .mvSwip .mv_page {bottom:111px;} .mvSwip .mv_page .swiper-pagination-bullet {width:20px; height:3px; background:rgba(255,255,255,.5); border-radius:0; margin:0 5px; transition:0.28s; opacity:1;} .mvSwip .mv_page .swiper-pagination-bullet.swiper-pagination-bullet-active {width:53px; background:rgba(255,255,255,1);} /*scroll ani*/ .scroll__down {position:absolute; bottom:78px; right:60px; flex-direction: column; z-index:10; display:flex; align-items:center; gap:14px;} .scroll__mouse {position: relative;display: inline-block;width: 13px;height: 25px;border: 1px solid #fff;border-radius: 6px;} .scroll__wheel {position: absolute;top:3px;left: 50% ;transform:translateX(-50%); px;width: 1px;height: 8px;background-color: #971d39;animation: scrollDown 2.5s infinite ease-in-out;} .scroll__down p {color:#fff; letter-spacing:0.05em; writing-mode: vertical-lr;} @media screen and (max-width:1850px){ .swiper-button-next.mv_next {background: url(/img/icon/mv_next.png) no-repeat center / cover; width:50px; height:50px; right:20px; margin-top:0;} .swiper-button-prev.mv_prev {background: url(/img/icon/mv_prev.png) no-repeat center / cover; width:50px; height:50px; left:20px; margin-top:0;} } @media screen and (max-width:1520px){ .swiper-button-next.mv_next {background: url(/img/icon/mv_next.png) no-repeat center / cover; width:40px; height:40px; right:20px; margin-top:0;} .swiper-button-prev.mv_prev {background: url(/img/icon/mv_prev.png) no-repeat center / cover; width:40px; height:40px; left:20px; margin-top:0;} } @media screen and (max-width:1380px){ .swiper-button-next.mv_next {background: url(/img/icon/mv_next.png) no-repeat center / cover; width:30px; height:30px; right:15px; margin-top:0;} .swiper-button-prev.mv_prev {background: url(/img/icon/mv_prev.png) no-repeat center / cover; width:30px; height:30px; left:15px; margin-top:0;} } @media screen and (max-width:1080px){ .swiper-button-next.mv_next,.swiper-button-prev.mv_prev {display:none;} } @media screen and (max-width:767px){ .mvDesc h4 {font-size:20px;} .mvDesc h2 {font-size:40px;} .scroll__down {right:30px;} .mvSwip .mv_page {bottom:140px;} } /*ms01*/ .ms01 {padding:80px 0 150px 0;} .ms01Container {max-width:1800px; margin:0 auto; width:92%; background:url(/img/main/ms01_bg.jpg) no-repeat center / cover; padding:110px 0; box-sizing:border-box;} .ms01Container h2 {color:#fff; line-height:1.5em; word-break:keep-all;} .ms01Container p {color:rgba(255,255,255,.9); line-height:1.36em; margin-top:42px;} @media screen and (max-width:1080px){ .ms01 {padding:80px 0 100px 0;} } @media screen and (max-width:720px){ .ms01 {padding:40px 0 80px 0;} .ms01Container {padding:55px 0;} .ms01Container h2 {font-size:20px;} .ms01Container p {font-size:14px; margin-top:21px;} } @keyframes scrollDown { 0% { top: 3px; opacity: 0; } 20% { top: 3px; opacity: 1; } 50% { top: 10px; opacity: 1; } 80% { top: 10px; opacity: 0; } 100% { top: 3px; opacity: 0; } } /*ms02*/ .ms02 {background:url(/img/main/ms02_bg.jpg) no-repeat center / cover; width:100%; height:100%; padding:150px 0;} .ms02List {display:flex; gap:20px; margin-top:64px;} .ms02List li {height:500px; flex: 0 0 14.59%; transition: flex 0.5s ease; position:relative;} .ms02List li:after {content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); opacity:0; transition:0.5s;} .ms02List li.on {flex: 0 0 52.23%;} .ms02List li.on::after {opacity:1;} .ms02List li:nth-of-type(1) {background:url(/img/main/ms02_item01.jpg) no-repeat center / cover;} .ms02List li:nth-of-type(2) {background:url(/img/main/ms02_item02.jpg) no-repeat center / cover;} .ms02List li:nth-of-type(3) {background:url(/img/main/ms02_item03.jpg) no-repeat center / cover;} .ms02List li:nth-of-type(4) {background:url(/img/main/ms02_item04.jpg) no-repeat center / cover;} .ms02Tit {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; opacity:1; transition:0.2s;} .ms02Tit h3 {color:#fff; text-align:center; } .ms02List li.on .ms02Tit {opacity:0; transition:0.2s;} .ms02Desc {position:absolute; left:50%; top:50%; width:100%; transform:translate(-50%, -50%); text-align:Center; z-index:1; opacity:0; transition:0.2s;} .ms02Desc h4 {color:rgba(255,255,255,.8);} .ms02Desc h2 {color:#fff; margin-top:40px;} .ms02Desc p {color:#fff; line-height:1.5em; word-break:keep-all;} .ms02line {display:block; width:125px; height:1px; margin:48px auto; background:rgba(255,255,255,.5);} .ms02List li.on .ms02Desc {opacity:1; transition:1s;} .ms02Content02 {margin-top:80px;} .ms02Content02 p {text-align:center; letter-spacing:-0.03em; line-height:1.7em; color:#555555; word-break:keep-all;} @media screen and (max-width:1320px){ .ms02Tit h3 {font-size:20px;} .ms02Desc p {font-size:14px;} } @media screen and (max-width: 1200px) { .ms02Desc {padding:0 20px;} .ms02Desc p br{display:none;} .ms02List {display: block; box-sizing: border-box;font-size: 0;} .ms02List li { display: inline-block; width: calc((100% - 20px) / 2); margin-right: 20px; margin-top: 0; vertical-align: top; height:400px;} .ms02List li:nth-of-type(2n) { margin-right: 0; /* 2열의 마지막 요소는 오른쪽 여백 제거 */ } .ms02List li:nth-of-type(n + 3) { margin-top: 20px; /* 두 번째 줄부터 위쪽 마진 추가 */} .ms02Desc h2 {font-size:25px; margin-top:30px;} .ms02line {margin:30px auto;} } @media screen and (max-width: 1080px) { .ms02 {padding:100px 0;} } @media screen and (max-width:767px){ .ms02 {padding:80px 0;} .ms02List li {width:100%; margin-right:0;} .ms02List li:nth-of-type(n + 2) { margin-top: 20px; /* 두 번째 줄부터 위쪽 마진 추가 */} .ms02Content02 {margin-top:20px;} .ms02List {margin-top:32px;} .ms02List li {height:279px;} } /*ms03*/ .ms03 {padding:150px 0;} .ms03Tabs {display:flex; margin-top:58px;} .ms03Tabs li {width:calc((100% - 20px*3)/4); margin-right:20px; padding:18px; color:#000; background:rgba(240,240,240, .3); cursor:pointer;} .ms03Tabs li span {display:block; text-align:center; font-size:var(--font-size-26); font-weight:700;} .ms03Tabs li.active {color:#fff; background:rgba(200,16,46, 0.8);} .ms03Tabs li:nth-of-type(4) {margin-right:0;} .tab-content{display: none;} .tab-content.active { display: inherit;} .ms03Txt {color:#555555; line-height:1.7em; padding:63px 0 36px;} .ms03Swip {overflow:visible;} .ms03Swip .swiper-slide::after {content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0, .6); opacity:0; transition:0.28s;} /* .ms03Swip .swiper-slide.swiper-slide-active:after {opacity:1;} */ .ms03Swip .swiper-slide:hover:after {opacity:1;} .ms03Swip .swiper-slide { box-sizing:border-box;} .ms03Swip .swiper-slide figure {border:1px solid #dedede;} .ms03Swip .swiper-slide figure img {width:100%;} .ms03SwipDesc {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; z-index:10; padding:0 25px; opacity:0; transition:0.28s;} .ms03SwipDesc h2 {color:#Fff; text-align:Center;} .ms03SwipDesc p {line-height:1.6em; color:#fff; margin-top:35px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;} /* .ms03Swip .swiper-slide.swiper-slide-active .ms03SwipDesc {opacity:1;} */ .ms03Swip .swiper-slide:hover .ms03SwipDesc {opacity:1;} .ms03_more {position:absolute; left:50%; bottom:69px; display:block; text-align:center; transform:translateX(-50%); opacity:0; transition:0.28s; z-index:10;} .ms03Swip .swiper-slide:hover .ms03_more {opacity:1;} /* .ms03Swip .swiper-slide.swiper-slide-active .ms03_more {opacity:1;} */ .ms03utillBox {position:relative; display:flex; align-items:center; margin-top:23px; gap:38px;} .ms03Swip .ms03Page {top:auto; height:3px; width:calc(100% - 148px); position:relative;} .ms03Swip .swiper-pagination-progressbar {background:#ccc;} .ms03Swip .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#c94d62;} .ms03Navi {position:relative; width:110px; height:50px;bottom:0; right:0;} .swiper-button-next.ms03Next {background: url(/img/icon/ms03Next.png) no-repeat center / cover; width:50px; height:50px; border-radius:50px; right:0; margin-top:0; top:auto; box-shadow: 0 4px 6px 2px rgba(0, 0, 0, 0.1);} .swiper-button-next.ms03Next:hover {background:url(/img/icon/ms03Next_c.png);} .swiper-button-prev.ms03Prev {background: url(/img/icon/ms03Prev.png) no-repeat center / cover; width:50px; height:50px; border-radius:50px; left:0px; margin-top:0; top:auto; box-shadow: 0 4px 6px 2px rgba(0, 0, 0, 0.1);} .swiper-button-prev.ms03Prev:hover {background:url(/img/icon/ms03Prev_c.png);} .swiper-button-next::after,.swiper-button-prev::after {display: none;} @media screen and (max-width: 1080px) { .ms03 {padding:100px 0;} } @media screen and (max-width: 820px) { .ms03Tabs li span {font-size:18px;} } @media screen and (max-width:767px){ .ms03 {padding:80px 0;} .ms03Tabs {margin-top:32px;} .ms03Tabs {flex-wrap:Wrap;} .ms03Tabs li {padding:15px 10px; width:calc((100% - 10px)/2); margin-right:10px; } .ms03Tabs li:nth-of-type(2n) {margin-right:0;} .ms03Tabs li:nth-of-type(n + 3) {margin-top:10px;} .ms03Txt {padding:20px 0;} .ms03SwipDesc p {text-align:center; word-break:keep-all;} .ms03SwipDesc {padding:0 8px;} } /*ms04*/ .ms04 {padding:150px 0; background:url(/img/main/ms04_bg.jpg) no-repeat center / cover; width:100%;} .ms04Content .msTit {flex-direction: column; color:#fff; text-align:center; width:100%;} .ms04Content h4 {margin-top:40px; line-height:1.5em;} .ms04Content .msTit a {margin-top:50px;} @media screen and (max-width: 1080px) { .ms04 {padding:100px 0;} } @media screen and (max-width: 767px) { .ms04 {padding:80px 0;} .ms04Content h4 {margin-top:20px; font-size:25px;} .ms04Content .msTit a {margin-top:25px;} } /*ms05*/ .ms05 {padding:150px 0;} .b_bot_slide{position:relative; overflow:hidden; height:93px;} .b_bot_slide .b_wrap{height:100%; display:flex; align-items:center; position:absolute; left:0; top:0; animation-name:logo_motion; animation-duration:25s; animation-timing-function:linear; animation-iteration-count: infinite;} .b_bot_slide img{display:block; margin-right:30px;} @keyframes logo_motion{ 0%{left:0;} 100%{left:-100%;} } @media screen and (max-width: 1080px) { .ms05 {padding:100px 0;} } @media screen and (max-width: 767px) { .ms05 {padding:80px 0;} .b_bot_slide {width:2000px;} .b_bot_slide img {width:80%;} } /* add_pop */ .add_pop_wrap {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.7);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: 600px;} .add_pop_wrap.active .add_pop_inner{transform: translate(-50%,-50%) scale(1);} .add_pop_tit{background: #c8102e;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;} } /*footer*/ .j_footer {padding:60px 0; background:#f4f4f4;} .ftTop {display:flex; justify-content:space-between; align-items: flex-end; padding-bottom:22px; border-bottom:1px solid #828282;} .ftUtil ul {display:flex;} .ftUtil ul li + li {margin-left:22px;} .ftBot {display:flex; justify-content:space-between; align-items: flex-end; margin-top:60px;} .ftBotLt {display:flex; gap:70px;} .ftDesc p {color:rgba(17,17,17,.8); line-height: 1.5em; margin-top:16px;} .ftLink {display: flex; flex-direction: column; align-items: flex-end; gap:5px;} .ftLink a {display:block;} .ft_reserved {background:#000; padding:20px; 0;} .ft_reserved p {color:rgba(255,255,255,.5); line-height:1.53em;} @media screen and (max-width: 720px) { .j_footer {padding:30px 0;} .ftTop {flex-wrap:Wrap;} .ftTop .ftLogo > img {width:50%;} .ftUtil {width:100%; margin-top:20px;} .ftUtil ul {align-items:center;} .ftUtil ul li a img {width:80%;} .ftUtil ul li + li {margin-left:8px;} .ftBot {margin-top:20px; flex-wrap:wrap; gap:20px;} .ftBotLt {flex-wrap:wrap; gap:20px; width:100%;} .ftDesc {width:100%;} .ftLink {align-items: flex-start;} }