@charset "euc-kr";
html,body { width: 100%; min-width: 1200px; height: 100%; color: var(--black); font-family: 'Pretendard Variable', sans-serif; padding: 0; margin: 0; font-size: 1vw; }
ul { margin: 0; padding: 0; }
li { list-style: none; }
a { text-decoration: none; color: inherit; display: block; box-sizing: border-box; }

/* 스크롤 숨기기 */
::-webkit-scrollbar { width: 0.4rem; height: 0.4rem; }
::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.1); }
::-webkit-scrollbar-thumb { background-color: #b5b8b9; border-radius: 5px; }

:root {
  --black: #1e242f;
  --black01: rgba(0,0,0,0.1);
  --black02: rgba(0,0,0,0.2);
  --black03: rgba(0,0,0,0.3);
  --w: #fff;
  --w2: #fdfdfd;
  --w3: #f7f7f7;
  --w4: #f3f4f6;
  --bg: #eff5fa;
  --blue: #2272eb;
  --blue2: #0065ff;
  --blue01: rgba(134,179,224,.1);
  --blue02: rgba(63,128,234,.2);
  --blue03: rgba(63,128,234,.3);
  --y01: rgba(255,232,0,.1);
  --g01: rgba(75,196,111,.1);
  --db: #001f59;
  --red: #e91e1e;
  --orange: #ff7a50;
  --gray: #606f80;
  --green: #008037;
  --border: rgba(0,0,0,0.05);
  --border2: #ddd;
  --shadow: 0 0 8px rgba(0, 0, 0, 0.1), 0 8px 30px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 1600px) {
  html,body { font-size: 1.2vw; }
}
@media screen and (max-width: 1400px) {
  html,body { font-size: 1.3vw; }
}
@media screen and (max-width: 1200px) {
  html,body { font-size: 105%; overflow-y: auto; }
}

button { font-family: 'Pretendard Variable', sans-serif; border: none; box-sizing: border-box; cursor: pointer; background: none; outline: none; }

.check-box { height: 20px; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 0.7rem; font-weight: 500; position: relative; }
.check-box label { color: var(--gray); position: relative; line-height: 20px; left: -25px; padding-left: 24px; margin-right: -25px; }
.check-box input { min-width: 18px !important; width: 18px !important; min-height: 18px !important; height: 18px !important; opacity: 0; margin: 0 !important; position: relative; z-index: 1; cursor: pointer; }
.check-box::after { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border: 1px solid var(--black02); border-radius: 4px; background: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" fill="%23fff0"><path d="m8.333 11.604 5.084-5.083q.229-.229.531-.229.302 0 .531.229.229.229.229.531 0 .302-.229.531l-5.625 5.625q-.229.23-.531.23-.302 0-.531-.23l-2.271-2.27q-.229-.23-.229-.532 0-.302.229-.531.229-.229.531-.229.302 0 .531.229Z"></path></svg>') no-repeat 50% 50%; background-color: var(--w03); content: ''; box-sizing: border-box; }
.check-box:hover::after { background-color: var(--black01); transition: 0.2s; }
.check-box.on::after { border: 1px solid transparent; background: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" fill="%23fff"><path d="m8.333 11.604 5.084-5.083q.229-.229.531-.229.302 0 .531.229.229.229.229.531 0 .302-.229.531l-5.625 5.625q-.229.23-.531.23-.302 0-.531-.23l-2.271-2.27q-.229-.23-.229-.532 0-.302.229-.531.229-.229.531-.229.302 0 .531.229Z"></path></svg>') no-repeat 50% 50%; background-color: var(--blue); }

.header-inner { position: relative; }
.header-inner ul li { width: 100%; height: 3rem; display: flex; align-items: center; justify-content: center; background-color: #e35c5b; position: relative; }
.header-inner ul li a { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--w); font-weight: 600; }
.header-inner ul li a { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--w); font-weight: 600; }
.header-inner span { display: flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; background-color: var(--black); border-radius: 100%; position: absolute; right: 0.5rem; top: 50%; transform: translate(-0.5rem,-50%); cursor: pointer; }
.header-inner span img { width: 0.7rem; }
.header-inner.on { position: fixed; width: calc(100% - 0.4rem); min-width: 1200px; top: 0; z-index: 99; }

.header { position: absolute; width: 100%; background-color: var(--w); border-bottom: 1px solid rgba(0,0,0,.06); z-index: 99; }
.header.on { position: fixed; width: calc(100% - 0.4rem); min-width: 1200px; top: 3rem; }
.header.slideUp { top: 0; }
.header-item { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 95rem; height: 3.9rem; position: relative; margin: 0 auto; padding: 0 1.5rem; }
.header-item .logo a { display: flex; align-items: center; gap: 0.5rem; }
.header-item .logo img { width: 1.55rem; }
.header-item .logo span { font-size: 1.55rem; color: var(--blue); font-weight: 500; }
.header-menu { display: flex; align-items: center; gap: 2rem; }
.header-item .menu { display: flex; align-items: center; gap: 3rem; position: absolute; left: 50%; transform: translateX(-50%); }
.header-item .menu li > a { font-size: 1.1rem; font-weight: 700; line-height: 3rem; }
.header-item .menu li:last-child > a::after { display: block; width: 1.2rem; height: 1.2rem; background: url('../images/main/open-icon.png') no-repeat 50% 50%; background-size: 100%; content: ''; position: absolute; right: -1.6rem; top: 50%; transform: translateY(-40%); opacity: 0; transition: 0.2s; }
.header-item .menu li:last-child > a:hover::after { opacity: 1; transform: translateY(-50%); }
.header-item .menu a:hover { color: var(--blue); }
.header-item .sub-menu { min-width: 100%; display: flex; align-items: center; gap: 2rem; border: 1px solid var(--border2); background-color: var(--w); position: absolute; top: 3rem; left: 50%; padding: 1.2rem; border-radius: 0.5rem; box-shadow: 0 0 1px rgba(0,0,0,.2), 0 8px 16px rgba(0,0,0,.15); opacity: 0; visibility: hidden; transform: translateX(-50%); transition: 0.2s; }
.header-item .sub-menu.on { opacity: 1; visibility: visible; }
.header-item .sub-menu a { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.95rem; font-weight: 600; }
.header-item .sub-menu a p { display: flex; align-items: center; justify-content: center; width: 8rem; height: 8rem; border-radius: 0.5rem; background-color: #f3f3f3; padding: 1rem; margin-bottom: 0.5rem; }
.header-item .sub-menu a p img { width: 100%; }
.header-item .sub-menu a span { font-size: 0.75rem; color: var(--gray); font-weight: 400; }
.header-item .btn { display: flex; align-items: center; gap: 0.525rem; }
.header-item .btn a { font-size: 0.85rem; font-weight: 500; }
.header-item .btn a:nth-child(2) { font-size: 0.85rem; padding: 0.55rem 0.8rem; background-color: var(--black); color: var(--w); border-radius: 5rem; margin-left: 0.2rem; }
.header-item .btn .flow { display: flex; align-items: center; width: 5.5rem; height: 2rem; overflow: hidden; border-radius: 5rem; background-color: var(--blue); padding: 0 2rem; }
.header-item .btn .flow-list span { display: block; width: max-content; font-size: 0.85rem; color: var(--w); padding: 0 1.5rem; }
@keyframes flowRolling { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

.wrapper { width: 100%; min-width: 1200px; height: 100%; overflow: auto; position: relative; }
.wrap { width: 100%; max-width: 58.7919rem; margin: 0 auto; position: relative; }
.wrap .bg { display: flex; justify-content: space-between; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.wrap .bg span { flex: 1; border-left: 1px solid var(--border); }
.wrap .bg span:first-child { border-color: transparent; }

.section { background-color: var(--w); position: relative; }
.section .wrap { padding: 3rem 0; }
.section.bg { background-color: var(--bg); }
.section.border { border-top: 1px solid var(--border); }
.section.top { margin-top: 3.9rem; }

.title { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; position: relative; margin-bottom: 3rem; }
.title h3 { font-size: 2.2rem; line-height: 3rem; letter-spacing: -0.02rem; font-weight: 700; }
.title h3 b { color: var(--blue); }
.title span { font-size: 1rem; color: var(--gray); line-height: 1.6rem; letter-spacing: -0.02rem; }
.title a { display: flex; align-items: center; gap: 1rem; border-radius: 5rem; background-color: #fff9e8; padding: 0.6rem 0.8rem 0.6rem 1.2rem; }
.title a i { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; color: #a36a01; }
.title a b { font-size: 0.75rem; font-weight: 500; color: var(--w); background-color: #a36a01; border-radius: 5rem; padding: 0.6rem 0.8rem; }

.blog-list { display: flex; flex-wrap: wrap; gap: 3rem 1.65rem; }
.blog-item { flex: 1 1 25%; display: flex; flex-direction: column; gap: 0.3rem; }
.blog-item i { display: flex; flex-direction: column; justify-content: center; gap: 0.55rem; width: 100%; border-radius: 0.55rem; background: linear-gradient(135deg, #3f80ea 40%, #1e69d8); padding: 1.15rem; margin-bottom: 0.5rem; box-sizing: border-box; position: relative; overflow: hidden; }
.blog-item i::before { width: 1.75rem; height: 1.75rem; background: url('../images/common/logo.png') no-repeat 50% 50% var(--w); background-size: 1.15rem; content: ''; position: absolute; right: 1.15rem; top: 1.45rem; border-radius: 0.5rem; }
.blog-item:nth-child(2n+1) i { background: linear-gradient(135deg, #1444a3 40%, #110087); }
.blog-item i p { font-size: 0.7rem; font-weight: 500; color: var(--w); opacity: 0.6; position: relative; top: -0.3rem; }
.blog-item i h4 { font-size: 0.75rem; font-weight: 500; color: var(--w); opacity: 0.95; }
.blog-item i h5 { width: 100%; font-size: 1.05rem; line-height: 1.4; color: var(--w); font-weight: 700; opacity: 0.95; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-top: 0.3rem; }
.blog-item > h3 { width: 100%; font-size: 0.95rem; line-height: 1.5; font-weight: 700; padding: 0 0.55rem; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.blog-item > span { width: 100%; font-size: 0.75rem; color: var(--gray); padding: 0 0.55rem; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
.blog-item:hover h3 { color: var(--blue); }

.footer { background-color: var(--w); padding: 2.5rem 0 2rem 0; background-color: var(--w); border-top: 1px solid var(--border); position: relative; }
.footer .footer-box { display: flex; align-items: center; justify-content: space-between; }
.footer .footer-box i { display: flex; flex-direction: column; gap: 1.5rem; }
.footer .footer-box i h4 { font-size: 0.8rem; font-weight: 600; }
.footer .footer-box i span { font-size: 0.7em; color: var(--gray); line-height: 1.4rem; }
.footer .footer-box .ft_logo { display: flex; align-items: center; gap: 0.5rem; }
.footer .footer-box .ft_logo img { width: 2rem; }
.footer .footer-box .ft_logo h4 { font-size: 1.4rem; color: #aaa; }
.footer .ft_inner { display: flex; align-items: center; justify-content: space-between; font-size: 0.7rem; color: var(--gray); margin-top: 2rem; }
.footer .ft_inner i { display: flex; gap: 1rem; }

/* 메인 */
.main-popup { display: flex; flex-direction: column; position: absolute; top: 1px; left: 0; border: 1px solid #111; z-index: 98; }
.main-popup a { display: flex; }
.main-popup .popup-btn { width: 100%; height: 2.2rem; display: flex; align-items: center; justify-content: space-between; background-color: #25292e; }
.main-popup .popup-btn button { font-size: 0.75rem; color: #fff; padding: 0 0.85rem; }
.main-popup .popup-btn button:last-child { background-color: #555; height: 2.2rem; }

.visual { width: 100%; margin-top: 3.9rem; position: relative; }
.visual::after { content: ''; width: 100%; height: 4rem; background: linear-gradient(180deg, #e8f4ff 20%, transparent 100%); position: absolute; top: 0rem; }
.visual-banner { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 3rem; }
.visual-title h3 { font-size: 2.2rem; font-weight: 700; line-height: 3.2rem; margin-bottom: 1rem; }
.visual-title h3 b { color: var(--blue2); }
.visual-box { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.65rem; margin: 1rem 0 3rem 0; }
.visual-item { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.65rem; }
.visual-item a { width: 100%; display: flex; flex-direction: column; gap: 0.5rem; background-color: #f3f3f3; border-radius: 0.85rem; padding: 1.2rem; text-align: left; position: relative; overflow: hidden; }
.visual-item a strong { font-size: 1.1rem; color: var(--w); }
.visual-item a span { font-size: 0.75rem; color: var(--w); font-weight: 600; line-height: 1.4; opacity: 0.85; }
.visual-item a::after { content: ''; position: absolute; transition: 1s; }
.visual-item a:hover::after { transform: scale(1.05); animation-name: fade; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: ease-in-out; }
.visual-item:nth-child(1) a { height: 17.5rem; background: linear-gradient(180deg, #0081ff 20%, #002bc6 100%); }
.visual-item:nth-child(1) a::after { width: 100%; height: 10rem; background: url('../images/main/powerlink.png') no-repeat 50% 50%; background-size: 70%; left: 0; bottom: 1rem; }
.visual-item:nth-child(2) a:first-child { height: 9rem; background: linear-gradient(140deg, #ff6e00 20%, #ffa561 100%); }
.visual-item:nth-child(2) a:first-child::after { width: 4.8rem; height: 4.8rem; background: url('../images/main/shopping.png') no-repeat 50% 50%; background-size: 100%; right: 1rem; bottom: 0.5rem; }
.visual-item:nth-child(2) a:last-child { height: 11.5rem; background: linear-gradient(140deg, #00b5b5 20%, #5a75d6 100%); }
.visual-item:nth-child(2) a:last-child::after { width: 7rem; height: 7rem; background: url('../images/main/powercontent.png') no-repeat 50% 50%; background-size: 100%; right: 1rem; bottom: 0.5rem; }
.visual-item:nth-child(3) a:first-child { height: 11.5rem; background: linear-gradient(140deg, #21ad37 20%, #20a0c0 100%); }
.visual-item:nth-child(3) a:first-child::after { width: 7rem; height: 7rem; background: url('../images/main/payment.png') no-repeat 50% 50%; background-size: 100%; right: 0; bottom: 0.5rem; }
.visual-item:nth-child(3) a:last-child { height: 9rem; background: linear-gradient(140deg, #1352c2 20%, #46328e 100%); }
.visual-item:nth-child(3) a:last-child::after { width: 4.8rem; height: 4.8rem; background: url('../images/main/book.png') no-repeat 50% 50%; background-size: 100%; right: 1rem; bottom: 0.5rem; }
.visual-item:nth-child(3) a:last-child::before { display: block; width: 1.2rem; height: 1.2rem; background: url('../images/main/open-wicon.png') no-repeat 50% 50%; background-size: 100%; content: ''; position: absolute; right: 1.1rem; top: 1.1rem; transition: 0.2s; }
.visual-item:nth-child(4) a:first-child { height: 8.75rem; background: linear-gradient(140deg, #ff910a 20%, #f9e000 100%); }
.visual-item:nth-child(4) a:last-child { height: 8.75rem; background: linear-gradient(140deg, #4e4e4e 20%, #000000 100%); }
.visual-item:nth-child(4) a::before { display: block; width: 1.2rem; height: 1.2rem; background: url('../images/main/open-wicon.png') no-repeat 50% 50%; background-size: 100%; content: ''; position: absolute; right: 1.1rem; bottom: 1.1rem; transition: 0.2s; }
@keyframes fade { 100% { opacity: 1; transform: scale(1.05); } 50% { opacity: 0; transform: scale(1); } 100% { opacity: 1; transform: scale(1.05); } }

.visual ul { display: flex; justify-content: center; }
.visual ul li { display: flex; flex-direction: column; align-items: center; gap: 1rem; border-left: 1px solid var(--border2); padding: 1rem 4.5rem; }
.visual ul li:first-child { border-left: none; padding-left: 0; }
.visual ul li:last-child { padding-right: 0; }
.visual ul li h4 { font-size: 2.4rem; font-weight: 700; }
.visual ul li h4 i { font-size: 1.9rem; }
.visual ul li h4 b { font-size: 1.2rem; margin-left: 0.2rem; }
.visual ul li span { font-size: 0.85rem; }

.main-swiper { width: 100%; margin-top: -1rem; padding-top: 4rem !important; left: 50%; transform: translate(-50%,0); margin-left: 0 !important; margin-right: 0 !important; }
.main-swiper .swiper-pagination { display: flex; align-items: center; gap: 0.5rem; left: 50% !important; top: 0px !important; width: fit-content !important; height: fit-content; transform: translate(-50%,0); }
.main-swiper .swiper-pagination-bullet { width: 6.2rem !important; height: auto !important; font-size: 0.75rem; line-height: 2.2rem; border-radius: 0.4rem !important; background-color: #e9ecf5 !important; opacity: 1 !important; margin: 0 !important; }
.main-swiper .swiper-pagination-bullet-active { color: var(--w); background-color: var(--black) !important; }
.main-swiper .swiper-slide .slide-img { border-radius: 0.6rem; overflow: hidden; opacity: 0; transition: 0.6s; }
.main-swiper .swiper-slide .slide-img p { padding: 0.85rem; border: 1px solid #ddd; background-color: #f2f5f8; border-bottom-right-radius: 0.75rem; border-bottom-left-radius: 0.75rem; }
.main-swiper .swiper-slide .slide-img img { width: 100%; }
.main-swiper .swiper-slide .slide-text { display: flex; flex-direction: column; align-items: center; margin-top: 2rem; opacity: 0; transition: 0.6s; }
.main-swiper .swiper-slide.swiper-slide-active .slide-text { opacity: 1; }
.main-swiper .swiper-slide.swiper-slide-active .slide-img { opacity: 1; }
.main-swiper .swiper-slide .slide-text ul { display: flex; gap: 3rem; }
.main-swiper .swiper-slide .slide-text ul li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; line-height: 1.4; color: var(--gray); }
.main-swiper .swiper-slide .slide-text ul li p { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 0.5rem; background-color: #e9ecf5; }
.main-swiper .swiper-slide dl { display: flex; align-items: center; gap: 0.25rem; background-color: #333; height: 1rem; padding: 0 0.5rem; }
.main-swiper .swiper-slide dl dd { width: 0.4rem; height: 0.4rem; display: block; border-radius: 100%; }
.main-swiper .swiper-slide dl dd:nth-child(1) { background-color: #ee4a05; }
.main-swiper .swiper-slide dl dd:nth-child(2) { background-color: #eeac05; }
.main-swiper .swiper-slide dl dd:nth-child(3) { background-color: #43a242; }

.link-banner { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.9rem; background-color: #303441; padding: 1.5rem; margin: 3rem 0 0 0; }
.link-banner svg { width: 2rem; height: 2rem; color: #27e7b7; margin-right: -0.5rem; }
.link-banner p { font-size: 0.85rem; color: var(--w); line-height: 1.6; }
.link-banner p b { color: #27e7b7; font-weight: 600; }
.link-banner a { width: 8rem; text-align: center; background-color: #0199ff; border-radius: 0.4rem; position: relative; }
.link-banner a span { font-size: 0.8rem; line-height: 2.4rem; color: var(--w); font-weight: 500; }

.box-item { position: relative; }
.box-item i { display: flex; flex-direction: column; gap: 0.5rem; }
.box-item h4 { font-size: 1.4rem; line-height: 2rem; color: var(--w); font-weight: 700; }
.box-item span { font-size: 0.86rem; line-height: 1.4rem; color: var(--w); }
.box-item .box-top { display: flex; align-items: center; justify-content: space-between; padding: 2rem 4rem 2rem 2rem; background-color: var(--blue2); border-radius: 1.5rem; }
.box-item .box-top p { width: 8rem; height: 8rem; display: flex; align-items: center; justify-content: center; background-color: rgba(255,255,255,.75); border-radius: 1.5rem; position: relative; }
.box-item .box-top p img { width: 100%; }
.box-item .box-top p span { font-size: 0.8rem; line-height: 1.4rem; color: var(--black); font-weight: 500; padding: 1rem 1.4rem; position: absolute; background-color: var(--w); border-radius: 0.5rem; border-bottom-right-radius: 0; left: -8rem; top: -0.5rem; }
.box-item .box-top p strong { font-size: 1rem; }

.box-item .box-wrap { display: flex; gap: 2rem; position: relative; margin-top: 4rem; }
.box-item .box-wrap .icon-item { flex: 1 1 25%; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; transition: 0.2s; }
.box-item .box-wrap .icon-item:hover { transform: scale(0.95); }
.box-item .box-wrap .icon-item p { margin-bottom: 0.5rem; width: 4rem; }
.box-item .box-wrap .icon-item p img { width: 100%; }
.box-item .box-wrap .icon-item strong { font-size: 1rem; font-weight: 600; color: #333d4b; }
.box-item .box-wrap .icon-item span { font-size: 0.85rem; color: #6b7684; font-weight: 500; line-height: 1.6; text-align: center; }

.footer-inner { height: 12rem; color: var(--w); background: linear-gradient(90deg, var(--blue), var(--blue), var(--blue)); overflow: hidden; }
.footer-inner .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; position: relative; }
.footer-inner .wrap::after { content: ''; width: 14rem; height: 14rem; background-color: rgba(0,0,0,.1); position: absolute; left: -15rem; top: 7rem; transform: rotate(45deg); }
.footer-inner .wrap::before { content: ''; width: 14rem; height: 38rem; background-color: rgba(0,0,0,.1); position: absolute; left: 24rem; top: -12rem; transform: rotate(45deg); }
.footer-inner i { display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 1; }
.footer-inner strong { font-size: 1.4rem; font-weight: 600; }
.footer-inner span { font-size: 0.75rem; }
.footer-inner h4 { display: flex; align-items: center; gap: 0.5rem; font-size: 2rem; font-weight: 700; position: relative; z-index: 1; }

/* 서브 */
.nav { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
.nav span { color: #999; font-weight: 500; }
.nav a { display: flex; align-items: center; gap: 0.25rem; position: relative; margin-right: 15px; font-size: 0.9rem; }
.nav a:last-child::after { display: none; }
.nav a:last-child::before { display: none; }
.nav a::after { content: ''; display: block; position: absolute; top: 50%; right: -22px; margin: -7.5px 0; width: 0; height: 0; border: 6px solid transparent; border-left-color: #fff; }
.nav a::before { content: ''; display: block; position: absolute; top: 50%; right: -23px; margin: -7.5px 0; width: 0; height: 0; border: 6px solid transparent; border-left-color: #999; }
.nav b { color: var(--blue); font-weight: 600; }

.nav-tab { display: flex; gap: 0.5rem; margin-bottom: 2rem; border-radius: 0.5rem; overflow: hidden; padding: 0.5rem; background-color: #f3f3f3; }
.nav-tab a { flex: 1; text-align: center; line-height: 2.4rem; background-color: #f3f3f3; font-size: 0.9rem; color: #aaa; font-weight: 500; border-radius: 0.5rem; border: 2px solid transparent; transition: 0.2s; }
.nav-tab a.this { background-color: var(--w); color: var(--blue); font-weight: 600; border-color: var(--blue); }
.nav-tab a:hover { background-color: rgba(255,255,255,.75); }

.sub-visual { background-color: var(--w3); margin-top: -5rem; }
.sub-visual .wrap { height: 38rem; padding: 4rem 2rem; }
.sub-visual .pc { width: 100%; height: 100%; background-color: var(--w); border: 0.4rem solid var(--black); border-radius: 2rem; overflow: hidden; padding-top: 0.2rem; position: relative; }
.sub-visual .pc::after { position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; background: linear-gradient(0deg, var(--w3) 0%, transparent 40%); }
.sub-visual .pc img { width: 100%; }
.sub-visual .mobile { position: absolute; right: 0; bottom: 2rem; width: 14rem; height: 26rem; background-color: var(--w); border: 0.4rem solid var(--black); border-radius: 1.5rem; padding-top: 0.2rem; overflow: hidden; }
.sub-visual .mobile::after { position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; background: linear-gradient(0deg, var(--w3) 0%, transparent 40%); }
.sub-visual .mobile img { width: 100%; }

.sub-wrap { width: 100%; margin-top: 3.9rem; position: relative; padding: 3rem 0; }
.sub-title { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sub-title p { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 1px solid var(--border2); border-radius: 0.8rem; margin-bottom: 1rem; }
.sub-title p img { width: 2.4rem; }
.sub-title h3 { font-size: 2.4rem; font-weight: 700; line-height: 3.2rem; margin-bottom: 1rem; }
.sub-title span { font-size: 1rem; line-height: 1.6rem; }
.sub-title a { width: fit-content; font-size: 0.85rem; color: var(--w); background-color: var(--black); padding: 0.9rem 2rem; border-radius: 0.5rem; margin-top: 1rem; }

.powerlink .sub-visual { background-color: #cdebff; }
.shopping .sub-visual { background-color: #ffe6d6; }
.powercontent .sub-visual { background-color: #bde7e7; }

.sub-info { display: flex; align-items: center; gap: 5rem; }
.sub-info .mobile { min-width: 16rem; width: 16rem; height: 30rem; position: relative; }
.sub-info .mobile::after { position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; background: linear-gradient(0deg, var(--w3) 0%, transparent 40%); border-radius: 1.5rem; }
.sub-info .mobile span { display: block; width: 100%; height: 100%; background-color: var(--w); border: 0.4rem solid var(--w3); border-radius: 1.5rem; padding-top: 0.2rem; overflow: hidden; position: relative; box-sizing: border-box; }
.sub-info .mobile p { display: flex; position: absolute; top: 3.8rem; left: 50%; box-shadow: var(--shadow); transform: translate(-50%,0) scale(0.8); }
.sub-info .mobile span img { width: 100%; }
.sub-info > ul { flex: 1; display: flex; flex-direction: column; }
.sub-info > ul > li { display: flex; align-items: center; padding: 3rem 2rem; border-bottom: 1px solid var(--border); }
.sub-info > ul > li:first-child { border-top: 1px solid var(--border); }
.sub-info > ul > li i { width: 14rem; display: flex; flex-direction: column; gap: 0.8rem; }
.sub-info > ul > li i p { font-size: 0.9rem; }
.sub-info > ul > li i strong { font-size: 1.3rem; }
.sub-info > ul > li ul { display: flex; flex-direction: column; gap: 1rem; }
.sub-info > ul > li ul li { list-style-type: disc; margin-left: 1rem; font-size: 1rem; }

.shopping .sub-info .mobile p { top: 4.8rem; }
.powercontent .sub-info .mobile p { top: 3.3rem; }

.sub-items { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.sub-items .sub-item { flex: 1 1 30%; display: flex; flex-direction: column; gap: 1rem; padding: 2rem; border-radius: 1rem; background-color: var(--w); }
.sub-items .sub-item strong { display: flex; align-items: center; gap: 0.5rem; }
.sub-items .sub-item strong::before { content: ''; width: 1rem; height: 1rem; background: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1.2rem" width="1.2rem" fill="%230065ff"><path d="m8.333 11.604 5.084-5.083q.229-.229.531-.229.302 0 .531.229.229.229.229.531 0 .302-.229.531l-5.625 5.625q-.229.23-.531.23-.302 0-.531-.23l-2.271-2.27q-.229-.23-.229-.532 0-.302.229-.531.229-.229.531-.229.302 0 .531.229Z"></path></svg>') no-repeat 50% 50%; background-size: 1.6rem; position: relative; top: -0.1rem; }
.sub-items .sub-item span { font-size: 0.85rem; line-height: 1.2rem; }

.reason-box { display: flex; gap: 2rem; position: relative; margin-top: 2rem; }
.reason-box .reason-item { flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.reason-box .reason-item:nth-child(2) { margin-top: 3.4rem; }
.reason-box .reason-item h4 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; font-weight: 600; }
.reason-box .reason-img { width: 100%; height: 15rem; background-color: var(--w3); border-radius: 1.2rem; padding: 1.5rem; box-sizing: border-box; }

.reason-box .cost-item { display: flex;  flex-direction: column; gap: 1rem; position: relative; }
.reason-box .cost-item::after { position: absolute; content: ''; width: 100%; height: 100%; background: linear-gradient(0deg, var(--w3) 0%, transparent 40%); }
.reason-box .cost-item h5 { font-size: 0.9rem; font-weight: 600; line-height: 1.4rem; }
.reason-box .cost-item h5 b { color: var(--blue2); }
.reason-box .cost-item i { display: flex; align-items: center; height: 3rem; gap: 0.5rem; padding: 0 1rem; border-radius: 0.5rem; background-color: var(--w); }
.reason-box .cost-item i span { flex: 1; font-size: 0.75rem; }
.reason-box .cost-item i b { width: 2.5rem; text-align: center; font-size: 0.7rem; border: 1px solid var(--border); padding: 0.5rem; border-radius: 0.2rem; background-color: var(--w); }

.reason-box .time-item { display: flex; flex-direction: column; gap: 1rem; position: relative; }
.reason-box .time-item::after { position: absolute; content: ''; width: 100%; height: 100%; background: linear-gradient(0deg, var(--w3) 0%, transparent 40%); }
.reason-box .time-item h5 { font-size: 0.9rem; font-weight: 600; }
.reason-box .time-item i { display: flex; align-items: center; height: 3rem; gap: 0.5rem; padding: 0 1rem; border-radius: 0.5rem; background-color: var(--w); }
.reason-box .time-item i strong { flex: 1; font-size: 0.75rem; font-weight: 600; }
.reason-box .time-item i span { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--blue2); }
.reason-box .time-item i span p { width: 1.2rem; height: 1.2rem; background: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1.2rem" width="1.2rem" fill="%23fff"><path d="m8.333 11.604 5.084-5.083q.229-.229.531-.229.302 0 .531.229.229.229.229.531 0 .302-.229.531l-5.625 5.625q-.229.23-.531.23-.302 0-.531-.23l-2.271-2.27q-.229-.23-.229-.532 0-.302.229-.531.229-.229.531-.229.302 0 .531.229Z"></path></svg>') no-repeat 50% 50% var(--blue2); background-size: 1.2rem; border-radius: 0.2rem; }
.reason-box .time-item ul { display: flex; gap: 1rem; }
.reason-box .time-item ul li { display: flex; align-items: center; gap: 0.5rem; }
.reason-box .time-item ul li p { font-size: 0.75rem; color: var(--gray); }
.reason-box .time-item ul li span { font-size: 0.75rem; font-weight: 600;}

.reason-box .bar-item h5 { font-size: 0.9rem; font-weight: 600; }
.reason-box .bar-item ul { display: flex; align-items: end; gap: 2rem; padding-top: 1.5rem; }
.reason-box .bar-item li { display: flex; flex-direction: column; align-items: center; gap: 1rem; position: relative; }
.reason-box .bar-item span { font-size: 0.85rem; color: var(--gray); }
.reason-box .bar-item p { font-size: 0.8rem; line-height: 1.2rem; color: var(--w); font-weight: 500; padding: 0.5rem 1rem; position: absolute; background-color: var(--black); border-radius: 0.5rem; border-bottom-right-radius: 0; left: -5rem; top: -0.5rem; }
.reason-box .bar-item li .bar { width: 1.4rem; background-color: var(--w); border-radius: 0.5rem; }
.reason-box .bar-item li:nth-child(1) .bar { height: 5rem; }
.reason-box .bar-item li:nth-child(2) .bar { height: 7rem; }
.reason-box .bar-item li:nth-child(3) .bar { height: 3rem; }
.reason-box .bar-item li:nth-child(4) .bar { height: 8rem; background: linear-gradient(180deg, #0165ff, #80b4ff);}
.reason-box .bar-item li:nth-child(5) .bar { height: 6rem; }

.space-box { display: flex; flex-direction: column; gap: 4rem; }
.space-box .space-item { display: flex; align-items: center; justify-content: space-between; }
.space-box .space-text { width: 25rem; display: flex; flex-direction: column; gap: 0.65rem; }
.space-box .space-text p { font-size: 0.9rem; font-weight: 600; color: var(--blue); }
.space-box .space-text h2 { font-size: 1.75rem; font-weight: 700; line-height: 1.4; }
.space-box .space-text ul { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.space-box .space-text ul li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.space-box .space-text ul li::before { content: ''; width: 1rem; height: 1rem; background: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1.2rem" width="1.2rem" fill="%230065ff"><path d="m8.333 11.604 5.084-5.083q.229-.229.531-.229.302 0 .531.229.229.229.229.531 0 .302-.229.531l-5.625 5.625q-.229.23-.531.23-.302 0-.531-.23l-2.271-2.27q-.229-.23-.229-.532 0-.302.229-.531.229-.229.531-.229.302 0 .531.229Z"></path></svg>') no-repeat 50% 50%; background-size: 1.6rem; position: relative; top: -0.1rem; }
.space-box .space-img { width: 28rem; height: 16rem; background-color: var(--bg) !important; border-radius: 1rem; }
.space-box .space-item:nth-child(1) .space-img { background: url('../images/main/powerlink.png') no-repeat 50% 50%; background-size: 45%; }
.space-box .space-item:nth-child(2) .space-img { background: url('../images/main/shopping.png') no-repeat 50% 50%; background-size: 45%; }
.space-box .space-item:nth-child(3) .space-img { background: url('../images/main/powercontent.png') no-repeat 50% 50%; background-size: 45%; }

.event-box { display: flex; align-items: center; justify-content: space-between; padding: 2rem 4rem 2rem 2rem; background: linear-gradient(45deg, #0094ff, #6bdedb); border-radius: 1.5rem; margin-bottom: 4rem; position: relative; }
.event-box i { display: flex; flex-direction: column; gap: 1rem; }
.event-box h5 { width: fit-content; font-size: 0.8rem; background-color: #0b88c5; color: var(--w); padding: 0.5rem 0.8rem; border-radius: 0.5rem; }
.event-box h5 > b { color: #00ffff; font-weight: 500; }
.event-box h5 strong { color: #00ffff; font-size: 1.2rem; font-weight: 500; }
.event-box h5 strong b { font-weight: 600; }
.event-box h4 { font-size: 1.6rem; line-height: 2rem; color: var(--w); font-weight: 600; }
.event-box h4 b { color: #FFEB3B; }
.event-box span { font-size: 0.85rem; color: var(--w); }
.event-box a { width: fit-content; font-size: 0.85rem; font-weight: 600; background-color: var(--black); color: var(--w); padding: 0.8rem 1rem; border-radius: 5rem; }
.event-box p { width: 7.5rem; height: 7.5rem; display: flex; align-items: center; justify-content: center; }
.event-box p img { width: 100%; }
.event-box ul { display: flex; align-content: center; gap: 0.5rem; }

.use-item { position: relative; }
.use-item .use-step ul { display: flex; align-items: center; justify-content: space-between; }
.use-item .use-step ul li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; opacity: 0.5; transition: 0.3s; }
.use-item .use-step ul li i { margin-bottom: 1rem; position: relative; }
.use-item .use-step ul li i p { width: 4.5rem; height: 4.5rem; display: flex; align-items: center; justify-content: center; background-color: var(--w3); border-radius: 100%; transition: 0.3s; position: relative; z-index: 1; }
.use-item .use-step ul li i p lord-icon { color: var(--w); }
.use-item .use-step ul li i .circle { opacity: 0; background-color: var(--blue); border-radius: 100%; position: absolute; top: 50%; left: 50%; width: 7rem; height: 7rem; visibility: hidden; transform: translate(-50%,-50%); }
.use-item .use-step ul li.active { opacity: 1; }
.use-item .use-step ul li.active .circle { visibility: visible; animation: submit-cir 2s infinite linear; }
.use-item .use-step ul li.active i p { background-color: var(--db); }
.use-item .use-step ul li .circle:nth-child(2) { animation-delay: 0.4s; }
.use-item .use-step ul li .circle:nth-child(3) { animation-delay: 0.8s; }
.use-item .use-step ul li .circle:nth-child(4) { animation-delay: 1.2s; }
.use-item .use-step ul li > b { font-size: 0.9rem; color: var(--blue); font-weight: 500; }
.use-item .use-step ul li > p { font-size: 0.85rem; text-align: center; line-height: 1.4rem; }
.use-item .use-step ul li > p a { display: inline-block; color: var(--blue); text-decoration: underline; }
.use-item .use-step ul li > span { font-size: 1.2rem; font-weight: 600; }
@keyframes submit-cir { 0% { transform: translate(-50%,-50%) scale(0.6); opacity: 0.3;  } 100% { transform: translate(-50%,-50%) scale(1); opacity: 0; } }

.use-item .use-info { margin-top: 4rem; }
.use-item .use-info ul { display: flex; flex-direction: column; background-color: var(--w3); gap: 1rem; padding: 1.5rem; border-radius: 1rem; }
.use-item .use-info ul li { list-style-type: disc; font-size: 0.8rem; color: var(--gray); margin-left: 0.5rem; }

.list-items { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.list-items .list-item { flex: 1 1 30%; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; border-radius: 1rem; background-color: var(--w); }
.list-items .list-item lord-icon { display: flex; margin-bottom: 0.5rem; }
.list-items .list-item strong { display: flex; align-items: center; gap: 0.5rem; }
.list-items .list-item span { font-size: 0.85rem; line-height: 1.2rem; }

/* 이용요금 */
.starter { background-color: #3caaf5 !important; }
.biz { background-color: #2272eb !important; }
.pro { background-color: #a67bf7 !important; }
.custom { background-color: #ff5454 !important; }

.payment .event-box { margin-top: 2rem; margin-bottom: 0; }
.payment .plan-info { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.payment .plan-info ul { display: flex; flex-direction: column; gap: 1rem; }
.payment .plan-info ul li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.payment .plan-info ul li strong { font-weight: 600; }
.payment .plan-info ul li b { color: var(--red); font-weight: 500; }
.payment .plan-info ul li p { font-size: 0.65rem; background-color: var(--blue); color: var(--w); border-radius: 1rem; padding: 0.35rem 0.5rem; }

.payment-box { display: flex; flex-direction: column; height: fit-content; background-color: var(--w); border: 1px solid #e6e9ec; border-radius: 10px; overflow: hidden; }
.payment-box i { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--w); background-color: #749ec9; padding: 10px 15px; }
.payment-box i > span { display: flex; align-items: center; height: 27px; gap: 5px; border-radius: 50px; padding: 0 8px; background-color: var(--black03); }
.payment-box i > span:nth-child(3) { gap: 0; padding: 0 10px 0 5px; }
.payment-box i p { font-size: 13px; margin-left: 5px; font-weight: 500; }
.payment-table table { width: 100%; }
.payment-table thead tr:first-child th:nth-child(3) { border-bottom-color: #e6e9ec; }
.payment-table thead tr:first-child th:nth-child(5) { border-bottom-color: #e6e9ec; }
.payment-table thead tr span { display: flex; align-items: center; justify-content: center; gap: 5px; }
.payment-table thead tr span b { color: var(--blue2); font-size: 11px; border-radius: 50px; background-color: var(--blue02); padding: 4px 7px; }
.payment-table thead th { height: auto; background-color: var(--w); border: 1px solid #e6e9ec; font-size: 14px; line-height: 1.4; font-weight: 600; padding: 10px; border-bottom: 1px solid var(--black); border-top: none; vertical-align: middle; }
.payment-table thead th:first-child { border-left: none; }
.payment-table thead th:last-child { border-right: none; }
.payment-table tbody tr td::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--blue02); display: none; box-sizing: border-box; }
.payment-table tbody tr td:first-child:after { border-left: 2px solid transparent; }
.payment-table tbody tr:nth-child(n+2).on td::after { display: block; border-color: var(--blue); }
.payment-table tbody tr:first-child td { text-align: left; font-size: 18px; font-weight: 600; padding: 20px 10px 15px 10px; background-color: transparent; }
.payment-table tbody tr:last-child td { border-bottom: none; }
.payment-table tbody td { height: auto; background-color: var(--w); font-size: 14px; padding: 12px 10px; position: relative; vertical-align: middle; text-align: center; border-top: 1px solid #e6e9ec; border-bottom: 1px solid #e6e9ec; }
.payment-table tbody td .check-box { width: fit-content; }
.payment-table tbody td .check-box::after { display: none; }
.payment-table tbody td .check-box input { display: none; }
.payment-table tbody td .check-box label { font-size: 14px; left: 0; padding-left: 5px; color: var(--text); }
.payment-table tbody td h3 { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.payment-table tbody td h3 b { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 100%; color: var(--w); font-size: 14px; padding-left: 1px; box-sizing: border-box; }
.payment-table tbody td h4 { display: inline-block; font-size: 14px; color: var(--blue); font-weight: 500; position: relative; top: 1px; left: 2px; }
.payment-table tbody td:nth-child(7) { color: var(--blue2); font-weight: 600; }
.payment-table tbody td:nth-child(n+3) { text-align: right; }
.payment-table tbody td:nth-child(n+8) { font-size: 13px; }
.payment-table tbody td:nth-child(n+8) span { position: relative; color: var(--gray); }
.payment-table tbody td:nth-child(n+8) b { font-size: 15px; font-weight: 600; }
.payment-table tbody td:nth-child(8) b { color: var(--black); }
.payment-table tbody td:nth-child(8)::before { position: absolute; width: 100%; height: 100%; content: ''; left: 0; top: 0; background-color: var(--y01); }
.payment-table tbody td:nth-child(9) b { color: var(--green); }
.payment-table tbody td:nth-child(9)::before { position: absolute; width: 100%; height: 100%; content: ''; left: 0; top: 0; background-color: var(--g01); }
.payment-table tbody td:nth-child(10) b { color: var(--blue2); }
.payment-table tbody td:nth-child(10)::before { position: absolute; width: 100%; height: 100%; content: ''; left: 0; top: 0; background-color: var(--blue01); }

/* 랜딩페이지 */
.landing-wrap { width: 100%; min-width: 1200px; height: 100%; overflow: auto; position: relative; }
.landing-wrap .header-item { max-width: 65rem; }
.landing-wrap .wrap { max-width: 65rem; }
.landing-view { margin-top: 2rem; }
.landing-view .start { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.75rem; height: 19.25rem; background-image: linear-gradient(0deg, #e5f0ff 0%, #fcfeff 100%); margin-top: 2.15rem; }
.landing-view .start h3 { font-size: 2.55rem; font-weight: 700; }
.landing-view .start span { font-size: 1rem; line-height: 1.5; }
.landing-view .start span b { color: var(--blue); font-weight: 600; }
.landing-view .start a { width: 12rem; line-height: 2.65rem; text-align: center; font-size: 0.85rem; color: var(--w); background-color: var(--black); border-radius: 0.25rem; }
.landing-view .logo { display: flex; align-items: center; gap: 0.45rem; }
.landing-view .logo img { width: 1.2rem; }
.landing-view .logo span { font-size: 1rem; font-weight: 600; color: var(--blue); }
.landing-title { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.landing-title h3 { font-size: 2.55rem; font-weight: 700; line-height: 1.5; text-align: center; }
.landing-title b { background-image: linear-gradient(90deg, #3f80ea 15%, #cf5aff 100%); color: transparent; background-clip: text; }

.button_calypso { width: 13rem; line-height: 2.65rem; margin: 2.15rem auto 0 auto; border-radius: 5rem; font-size: 1rem; font-weight: 600; text-align: center; border: 2px solid var(--black); position: relative; overflow: hidden; }
.button_calypso span { display: flex; align-items: center; justify-content: center; gap: 0.25rem; position: relative; z-index: 1; }
.button_calypso:hover span { animation: MoveScaleUpInitial 0.3s forwards, MoveScaleUpEnd 0.3s forwards 0.3s; }
@keyframes MoveScaleUpInitial { to { transform: translate3d(0,-100%,0) scale3d(1,2,1); opacity: 0; } }
@keyframes MoveScaleUpEnd { from { transform: translate3d(0,100%,0) scale3d(1,2,1);	opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }
.button_calypso::before { position: absolute; display: block; content: ''; background: rgba(31,114,235,0.1); width: 200%; height: 0; padding-bottom: 100%; top: -100%; left: -50%; border-radius: 50%; transform: translate3d(0,68%,0) scale3d(0,0,0); }
.button_calypso:hover::before {	transform: translate3d(0,0,0) scale3d(1,1,1); transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1); }
.landing-swiper { margin-top: 1.75rem; padding-top: 4rem !important; }
.landing-swiper .swiper-pagination { left: 50% !important; top: 0 !important; width: fit-content !important; height: fit-content; background-color: #f1f1f1; border-radius: 0.45rem; padding: 0.25rem; transform: translate(-50%,0); }
.landing-swiper .swiper-pagination-bullet { width: 6rem !important; height: auto !important; font-size: 0.75rem; line-height: 2rem; border-radius: 0.45rem !important; background-color: #f1f1f1 !important; opacity: 1 !important; margin: 0 !important; }
.landing-swiper .swiper-pagination-bullet-active { color: var(--w); background-color: var(--black) !important; }
.landing-swiper .swiper-slide { border-radius: 0.6rem; overflow: hidden; }
.landing-swiper .swiper-slide .slide-img { background-color: #f2f5f8; padding: 0.75rem; }
.landing-swiper .swiper-slide .slide-img img { width: 100%; }
.landing-swiper .swiper-slide dl { display: flex; align-items: center; gap: 0.25rem; background-color: #333; height: 1rem; padding: 0 0.5rem; }
.landing-swiper .swiper-slide dl dd { width: 0.45rem; height: 0.45rem; display: block; border-radius: 100%; }
.landing-swiper .swiper-slide dl dd:nth-child(1) { background-color: #ee4a05; }
.landing-swiper .swiper-slide dl dd:nth-child(2) { background-color: #eeac05; }
.landing-swiper .swiper-slide dl dd:nth-child(3) { background-color: #43a242; }

.landing-box-wrap { display: flex; gap: 1rem; justify-content: center; }
.landing-box-title { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
.landing-box-title p { font-size: 1rem; color: #333; font-weight: 500; }
.landing-box-title span { font-size: 1.7rem; font-weight: 700; }
.landing-box { width: 100%; max-width: 31rem; min-height: 27.5rem; padding: 2.15rem; border-radius: 1rem; margin-top: 2.15rem; }
.landing-box .landing-box-img { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: 2.15rem auto 0 auto; }
.landing-box .landing-box-img p { width: 100%; max-width: 20rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; overflow: hidden; box-shadow: 0px 4px 16px -4px rgba(0,0,0,0.1); }
.landing-box .landing-box-img p img { width: 100%; }

.landing-box.bizmoney1 { background-color: #fff3ed; }
.landing-box.bizmoney1 .landing-box-img p { width: 15rem; }
.landing-box.bizmoney2 { background-color: #ebf0ff; }

.landing-box.keyword1 { background-color: #eee; }
.landing-box.keyword2 { background-color: #edf6ff; }
.landing-box.keyword2 .landing-box-img { margin-top: 4.5rem; }

.landing-box.service1 { background-color: #e5ffeb; }
.landing-box.service1 .landing-box-img { margin-top: 4rem; }
.landing-box.service2 { background-color: #ffeaeb; }
.landing-box.service2 .landing-box-img { margin-top: 4rem; }