aside { display: none; } /* ========================================================================== CONTAINER ========================================================================== */ .container { min-height: calc(100vh - 60px); height: 100%; background-color: #030712; position: relative; top: 60px; } .container .content { height:inherit; position: relative; background-color: transparent; max-width: 1200px; margin: 0px auto; overflow: visible; } .container .content section.banner { padding: 5rem 0; } .container .content section:first-of-type { padding-top: 120px; } .container .content section:last-of-type { padding-bottom: 10rem; } /* ========================================================================== SECTIONS ========================================================================== */ /* banner common*/ .main-banner { width:calc(100vw - 15px); position: relative; left: 50%; transform: translateX(-50%); padding-bottom: 5rem; } .main-banner .banner-title h1 div { font-size: 64px; line-height: 80px; } .main-banner .banner-title h5 div { font-size: 24px; line-height: 34px; } .banner-title { display: flex; flex-direction: column; gap: 16px; text-align: center; } .banner-contents { display: flex; justify-content: space-between; width: 100%; } .icon-item { width: 64px; height: 64px; background-color: #101828; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .banner { gap: 80px; display: flex; flex-direction: column; } .banner .banner-title h5 div { font-size: 20px; line-height: 28px; } /* 메인배너1[대기업부터 스타트업까지, 모두를 위한 올인원 앱 솔루션] */ #main-main-banner-1 .banner-contents { margin-top: 80px; position: relative; max-height: 675px; overflow: hidden; background:linear-gradient(to bottom, #030712ff 0%, #03071200 50%, #030712ff 100%),linear-gradient(to right,#2B7FFF4d 0%, #03071280 50%, #2B7FFF4d 100%), #030712; } #main-main-banner-1 .banner-contents .main-circles { margin: 0 auto; display: flex; align-self: center; justify-content: center; align-items: center; width: 100%; } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper { position: relative; width: 1600px; height: 1600px; } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper .outer-circle-border { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper .outer-circle { width: 100%; height: 100%; border-radius: 50%; position: absolute; top: 0; left: 0; animation: pulse-outer 4s infinite; } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper .outer-circle .inner-circle-wrapper { position: absolute; top: 50%; left: 50%; width: 62.5%; height: 62.5%; transform: translate(-50%, -50%); } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper .outer-circle .inner-circle-wrapper .inner-circle-border { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #main-main-banner-1 .banner-contents .main-circles .glow-effect { position: absolute; top: 50%; left: 50%; width: 50%; height: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(43, 127, 255, 0.3) 0%, transparent 70%); border-radius: 50%; animation: glow-pulse 3s infinite alternate; } #main-main-banner-1 .banner-contents .banner-icon-left { position: relative; width: 50%; height: 100%; } #main-main-banner-1 .banner-contents .banner-icon-right { position: relative; right: 0; width: 50%; height: 100%; } #main-main-banner-1 .banner-contents .banner-icon { z-index: 2; padding:1rem; position: absolute; background-color: #101828B3; border-radius: 100px; border: 1px solid #1E2939; display: flex; align-items: center; } #main-main-banner-1 .banner-contents .banner-icon i { background-color: #6A7282; } #main-main-banner-1 .banner-contents .banner-icon.icon-1 ,#main-main-banner-1 .banner-contents .banner-icon.icon-3 ,#main-main-banner-1 .banner-contents .banner-icon.icon-4 { width: 100px; height: 100px; } #main-main-banner-1 .banner-contents .banner-icon.icon-1 i,#main-main-banner-1 .banner-contents .banner-icon.icon-3 i ,#main-main-banner-1 .banner-contents .banner-icon.icon-4 i { width: 68px; height: 68px; } #main-main-banner-1 .banner-contents .banner-icon.icon-2 ,#main-main-banner-1 .banner-contents .banner-icon.icon-5 { width: 80px; height: 80px; } #main-main-banner-1 .banner-contents .banner-icon.icon-2 i ,#main-main-banner-1 .banner-contents .banner-icon.icon-5 i { width: 54px; height: 54px; } #main-main-banner-1 .banner-contents .banner-icon.icon-6 { width: 100px; height: 100px; } #main-main-banner-1 .banner-contents .banner-icon.icon-6 i { width: 68px; height: 68px; } #main-main-banner-1 .banner-contents .main-main-banner-1-image { z-index: 5; width: 405px; position: absolute; top: 80px; left: 50%; transform: translate(-50%, 0%); } #main-main-banner-1 .banner-contents .main-main-banner-1-image img { height:unset; object-fit: contain; object-position: top; scale: 1; } #main-banner-2 { width: calc(100vw - 15px); position: relative; left: 50%; transform: translateX(-50%); overflow: hidden; } #main-banner-2 .banner-contents.slide .swiper-wrapper { margin: 0 auto; transition-timing-function: linear; } #main-banner-2 .banner-contents.slide .slide-item { width: 200px!important; height: 80px!important; margin-left: 15px; margin-right: 15px; } #main-banner-3 .banner-contents .banner-item { padding-top:24px; padding-bottom:24px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; } #main-banner-3 .banner-contents .banner-item .banner-text { display: flex; text-align: center; flex-direction: column; } #main-banner-4 .banner-contents .banner-item { background-color: #101828; border-radius: 24px;; } #main-banner-4 .banner-contents .banner-item .img-item { padding:40px; position: relative; overflow: hidden; } #main-banner-4 .banner-contents .banner-item .banner-text { padding: 24px; background-color: #03071280; } #main-banner-4 .banner-contents .banner-item:hover .img-item { filter: none; } #main-banner-4 .banner-contents .banner-item .img-item img { max-height: 258px; object-fit: contain; } #main-banner-5 .banner-contents .banner-item { border: 1px solid #1E2939; border-radius: 24px; } #main-banner-5 .banner-contents .banner-item .banner-text { padding: 40px 24px; height: 210px; } #main-banner-5 .banner-contents .banner-item .banner-text p { max-width: 900px; margin: 0 auto; word-break: keep-all; white-space: normal; } #main-banner-5 .banner-contents .banner-item .img-item { padding:24px 40px 0 40px; max-height: 360px; height: 360px; overflow: hidden; } #main-banner-5 .banner-contents .banner-item .img-item div img { object-position: top; object-fit: cover; width: 100%; height: 100%; } #main-banner-5 .banner-contents .banner-item .img-item div { transform: translateY(0); } #main-banner-5 .banner-contents .banner-item:hover .img-item { background-color: #101828; border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; } #main-banner-5 .banner-contents .banner-item:hover .img-item div { animation: bounceUp 2s ease forwards; } #main-banner-6 .banner-contents { height: 400px; padding-left:20px; padding-right: 20px; } #main-banner-6 .banner-contents > div { padding-top:20px; padding-bottom: 20px; } #main-banner-6 .banner-contents .banner-item .banner-text { display: flex; gap: 16px; width: 480px; cursor: pointer; } #main-banner-6 .banner-contents .banner-item .banner-text h5 { color: #6A7282; font-size: 20px; line-height: 28px; font-family: 'Pretendard-Regular'; transition: opacity 0s, height 0.5s ease; } #main-banner-6 .banner-contents .banner-item .banner-text p { opacity: 0; font-size: 16px; line-height: 26px; height: 0; transition: opacity 0s, height 0.5s ease; } #main-banner-6 .banner-contents .banner-item.active .banner-text h5 { color: #fff; font-size: 24px; line-height: 34px; font-family: 'Pretendard-Medium'; transition: all 0.3s ease; } #main-banner-6 .banner-contents .banner-item.active .banner-text p { opacity: 1; height: auto; transition: all 0.5s ease; } #main-banner-6 .banner-contents .banner-item.active .banner-text span.number { background-color: #2B7FFF; color: white; } #main-banner-6 .banner-contents .banner-item .banner-text p { word-break: keep-all; white-space: normal; max-width: 424px; } #main-banner-6 .banner-contents .banner-item .banner-text span.number { border-radius: 100px; width:40px; height:40px; background-color: #1E2939; display: flex; align-items: center; justify-content: center; color: #6A7282; } #main-banner-6 .banner-contents .banner-item .banner-img { width: 600px; position: absolute; top: 0px; right: 0; } #main-banner-6 .banner-contents .banner-item .banner-img img { opacity: 0; transition: all 0.5s ease; height: 0px; } #main-banner-6 .banner-contents .banner-item.active .banner-img img { opacity: 1; transition: all 2s ease; height: auto; } /* [매출과 고객 참여를 높이는 푸시 마케팅] 컴포넌트 */ #main-banner-7 .banner-item { width: 270px; height: 146px; text-align: center; } #main-banner-7 .banner-text { display: flex; flex-direction: column; gap: 24px; } /* [매출과 고객 참여를 높이는 푸시 마케팅] 컴포넌트 */ #main-banner-8 { position: fixed; z-index: 7; bottom:0px; left: 50%; transform: translateX(-50%); } #main-banner-8 .banner-contents .input-group { max-width: 480px; width: 360px; border-radius: 100px; padding: 16px 24px; background-color: #101828; transition: width .3s ease; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } #main-banner-8 .banner-contents .input-group .input-box:has(input.focus-danger, textarea.focus-danger) { border:unset!important; } #main-banner-8 .banner-contents .input-group p.support-msg { position: absolute; top: 5px; padding:unset; margin: unset; } #main-banner-8 .banner-contents .input-group .input-box { padding:unset; border:unset; } #main-banner-8 .banner-contents .input-group .input-box input::placeholder { font-size: 16px; line-height: 24px; } #main-banner-8 .banner-contents .input-group:has(input:focus) { box-shadow: 0 0 0 4px rgba(43, 127, 255, 0.25); width: 480px; } #main-banner-8 .banner-contents .input-group:hover { box-shadow: 0 0 0 4px rgba(43, 127, 255, 0.25); width: 480px; } #main-banner-8 .banner-contents .input-group button { padding:9px 12px; font-size: 13px; line-height: 18px; border-radius: 100px; border: unset; } /* [푸시가 필요할 때만 구독, 웹 앱 기능은 영구 무료] 컴포넌트 */ #price-banner-1 .banner-title h6 div { display: flex; flex-direction: column; } #price-banner-1 .banner-item { padding: 24px; border-radius: 12px; border: 1px solid #1E2939; background-color: #101828; width: 100%; } #price-banner-1 .banner-item.active { border: 1px solid #2B7FFF !important; } #price-banner-1 .banner-item .plan { font-size: 12px; line-height: 18px; border-radius: 24px; padding: 5px 10px; align-self: flex-start; } #price-banner-1 .refund { margin-top: -56px; } #price-banner-1 .refund a:hover { text-decoration: underline; } #banner-contents-8 button:hover { background-color: #101828 !important; } /* [기능 제한 없는 영구 무료 네이티브 웹 앱 솔루션] 컴포넌트 */ #price-banner-2 .banner-contents { gap: 20px; flex-wrap: wrap; justify-content: center; } #price-banner-2 .banner-item { padding: 32px 24px; border: 1px solid #1E2939; background-color: #030712; border-radius: 12px; width: 18%; } #price-banner-2 .overlay { position: absolute; bottom: -80px; left: 0; width: 100%; height: 300px; background: linear-gradient(to top, rgba(3, 7, 18, 1), rgba(3, 7, 18, 0)); margin-bottom: 80px; pointer-events: none; z-index: 9; } #price-banner-2 button { z-index: 10; } #price-banner-2 button:hover { background-color: #030712 !important; } /* [자주 묻는 질문] 컴포넌트 */ #price-banner-3 .banner-contents { display: flex; width: 100%; justify-content: center; flex-direction: column; align-items: center; gap: 40px; overflow: hidden; } #price-banner-3 .banner-contents .banner-item { display: flex; } #price-banner-3 ul.accordion { display: flex; gap: 16px; flex-direction: column; margin: 0 160px; } #price-banner-3 ul.accordion > li { padding: 24px; border-radius: 12px; border: 1px solid #1E2939; cursor: pointer; } #price-banner-3 ul.accordion > li .item-contents { max-height: 0; overflow: hidden; opacity: 0; } #price-banner-3 ul.accordion > li .text-14 { white-space: break-spaces; } #price-banner-3 ul.accordion > li i { transition: all 0.25s ease; } #price-banner-3 ul.accordion > li.open { gap:16px; } #price-banner-3 ul.accordion > li.open i { transform: rotate(90deg); } #price-banner-3 ul.accordion > li.open .item-contents { transition: all .5s ease; max-height: 500px; opacity: 1; overflow: auto; padding-right: 12px; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #999 transparent; scroll-behavior: smooth; } #price-banner-3 ul.accordion > li.open .item-contents::-webkit-scrollbar { width: 6px; } #price-banner-3 ul.accordion > li.open .item-contents::-webkit-scrollbar-thumb { background-color: #bbb; border-radius: 4px; } #price-banner-3 ul.accordion > li.open .item-contents::-webkit-scrollbar-track { background: transparent; } #price-banner-3 .banner-contents .category { padding: 12px 16px; border-radius: 100px; color: #D1D5DC; cursor: pointer; } #price-banner-3 .banner-contents .category:hover { background-color: #1E2939; color: white !important; } #price-banner-3 .banner-contents .category.active { background-color: #1E2939; color: white !important; } #price-banner-3 .banner-title h6 div { display: flex; flex-direction: column; } #price-banner-3 .banner-title .mobile { display: none; } .rotate-180 { transform: rotate(180deg); transition: transform 0.3s ease; } /*문의*/ #contact-banner-1 .banner-contents .form { width: 880px; max-width: 880px; padding:40px; border:1px solid #1E2939; border-radius: 12px; margin:0px auto; } #contact-banner-1 .banner-contents .form .input-group textarea { min-height: 120px; } /*service 공통*/ #connect-banner .banner-item { display: flex; flex-direction: column; gap: 40px; align-items: center; max-width: 237px; flex: 1; } #connect-banner .banner-item div:first-child { width: 64px; height: 64px; border-radius: 12px; display: flex; justify-content: center; align-items: center; } #connect-banner .banner-item .banner-text { display: flex; flex-direction: column; text-align: center; gap:12px; } /*function 공통*/ #function-banner .banner-contents { flex-wrap: wrap; } #function-banner .banner-item { padding: 32px 24px; display: flex; flex-direction: column; align-items: center; border: 1px solid #1E2939; background-color: #030712; gap:40px; flex: 1 1 25%; height: 278px; } #function-banner .banner-item .grid { width: 64px; height: 64px; border-radius: 12px; display: flex; justify-content: center; align-items: center; } #function-banner .banner-item.app { padding: 32px 24px; display: flex; flex-direction: column; align-items: center; border: 1px solid #1E2939; background-color: #030712; gap:16px; width: 282px; flex: unset; height: unset; } #function-banner .banner-item .banner-text { text-align: center; display: flex; flex-direction: column; gap: 12px; } #function-banner .mobile { display: none !important; } #function-banner .pc { display: block !important; } /*servicePush*/ #service-push-main-banner-1 { background: linear-gradient(to bottom, #030712ff 0%, #03071200 50%, #030712ff 100%), linear-gradient(to right, #2B7FFF4d 0%, #03071280 50%, #2B7FFF4d 100%), #030712; } #service-push-main-banner-1 .service-main-banner-1-image-1 { padding: 0 calc(100vw - 80%); margin: 0 auto; position: relative; } #service-push-main-banner-1 .service-main-banner-1-image-1.fade-in { opacity: 0; transform: translateY(60px); } #service-push-main-banner-1 .service-main-banner-1-image-2 { position: absolute; left: 12%; top: 25%; width: 21%; } #service-push-main-banner-1 .service-main-banner-1-image-3 { position: absolute; left: 70%; top: 15%; width: 20%; } .service-main-banner-1-image-2 img, .service-main-banner-1-image-3 img { width: 100%; height: auto; } #service-banner-2 .pc { display: block !important; } #service-banner-2 .mobile { display: none !important; } #service-banner-2 .banner-contents { flex-direction: column; gap: 120px; } #service-banner-2 .banner-item { display: flex; } #service-banner-2 .banner-item .banner-text { align-self: center; flex-direction: column; gap: 24px; display: flex; } #service-banner-2 .banner-item .banner-text p.title5.mobile { display: none !important; } #service-banner-2 .banner-item .banner-text .banner-text-main div { padding: 8px 12px; background-color: #1E2939; border-radius: 8px; white-space: nowrap; color: white; max-width: fit-content; } #service-banner-2 .banner-item .banner-text .banner-text-sub { display: flex; flex-direction: column; gap: 12px; } #service-banner-2 .banner-item .service-banner-image-bg { width: 600px; border-radius: 24px; padding: 48px; background-color: #10182880; } /*serviceApp*/ #service-app-main-banner-1 .service-app-main-banner-1-image-1 { width: 405px; z-index: 1; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } #service-app-main-banner-1 { background: linear-gradient(to bottom, #030712ff 0%, #03071200 50%, #030712ff 100%), linear-gradient(to right, #2B7FFF4d 0%, #03071280 50%, #2B7FFF4d 100%), #030712; } #service-app-main-banner-1 .banner-contents { position: relative; min-height: 675px; align-items: end; } #service-app-main-banner-1 .banner-contents .banner-item { position: relative; overflow: hidden; z-index: 2; width: 100vw; padding-bottom:2rem; } #service-app-main-banner-1 .banner-contents .fucbox { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 2; box-shadow: -5px -5px 15px #0000001A, 5px 5px 15px #0000001A; background-color: #101828; border: 1px solid #1E2939; padding: 32px; border-radius: 19px; width: 480px; } #service-app-main-banner-1 .banner-contents .fucbox .fuc-img-wapper { padding: 37px 128px; border-radius: 10px; } #service-app-main-banner-1 .banner-contents .fucbox ul li { position: relative; padding-left: 12px; text-indent: 0; line-height: 16px; font-size: 11px; } #service-app-main-banner-1 .banner-contents .fucbox ul li:before { content: '•'; position: absolute; left: 0; top: 0; color: #999; font-size: 14px; } #service-app-main-banner-1 .swiper-slide { padding: 32px 24px; background-color: #030712; border: 1px solid #1E2939; gap: 16px; border-radius: 12px; text-align: center; flex-direction: column; display: flex; width: 282px; opacity: 0; transform: scale(0.8) translateX(200px); transition: opacity 0.5s ease, transform 0.5s ease; z-index: 1; } /* 기본 슬라이드 스타일 */ #service-app-main-banner-1 .swiper-slide { padding: 32px 24px; background-color: #030712; border: 1px solid #1E2939; gap: 16px; border-radius: 12px; text-align: center; flex-direction: column; display: flex; opacity: 0; transform: scale(0.8); transition: opacity 0.5s ease, transform 0.5s ease; z-index: 1; } /* 가운데 슬라이드 */ #service-app-main-banner-1 .swiper-slide.swiper-slide-active { transform: scale(1) translateX(0); opacity: 1; z-index: 3; position: relative; } /* 왼쪽 슬라이드 */ #service-app-main-banner-1 .swiper-slide.swiper-slide-prev { transform: scale(0.9) translateY(30px); opacity: 0.7; z-index: 1; } /* 오른쪽 슬라이드 */ #service-app-main-banner-1 .swiper-slide.swiper-slide-next { transform: scale(0.9) translateY(30px); opacity: 0.7; z-index: 1; } /* 2번째 이전 슬라이드 */ #service-app-main-banner-1 .swiper-slide.prev-prev { transform: scale(0.9) translateY(30px); opacity: 0.3; z-index: 0; } /* 2번째 다음 슬라이드 */ #service-app-main-banner-1 .swiper-slide.next-next { transform: scale(0.9) translateY(30px); opacity: 0.3; z-index: 0; } #service-app-main-banner-1 .banner-contents .banner-item .puls { right: 10px; top: 10px; } #service-app-banner-3 { gap:unset; } #service-app-banner-3 .banner-title .mobile { display: none; } #service-app-banner-3 .banner-contents { gap: 24px; flex-wrap: wrap; justify-content: flex-start; height: 770px; overflow: hidden; } #service-app-banner-3 .banner-contents .banner-item { padding: 32px 24px; background-color: #030712; border: 1px solid #1E2939; gap: 16px; border-radius: 12px; text-align: center; flex-direction: column; display: flex; width: 282px; } #service-app-banner-3 .banner-contents .banner-item:hover { background-color: #101828; } #service-app-banner-3 .banner-contents .banner-item .puls { right: 10px; top: 10px; } #service-app-banner-3 .overlay { position: absolute; bottom: -80px; left: 0; width: 100%; height: 300px; background: linear-gradient(to top, rgba(3, 7, 18, 1), rgba(3, 7, 18, 0)); margin-bottom: 80px; z-index: 9; } /* [써보는 게 제일 빠릅니다] 컴포넌트 */ #support-banner .flow-gradient { background: linear-gradient(90deg, #2B7FFF4d 0%, #03071280 50%, #2B7FFF4d 100%), #030712; background-size: 400% 400%; background-position: center; animation: flow 10s ease-in-out infinite; padding: 5rem; border-radius: 24px; padding: 5rem; border-radius: 24px; } @keyframes flow { 0% { background-position: 50% 50%; } 50% { background-position: 0% 50%; } 100% { background-position: 50% 50%; } } /* ========================================================================== USER FORM ========================================================================== */ .user-contents { margin: 0px auto; padding:120px 0px; width: 360px; justify-content: start; align-items: center; min-height: 100vh; } .user-contents .page-banner { display: flex; flex-direction: column; gap:24px; justify-content: center; align-items: center; } .user-contents .page-banner img { width: 160px; height: 32px; } .user-contents .form { width: 100%; display: flex; flex-direction: column; gap:24px; } .user-contents .divider { display: flex; align-items: center; gap: 24px; } .user-contents .divider hr { flex: 1; border: none; height: 1px; background-color: #E5E7EB; } .user-contents .divider span { color: #99A1AF; font-size: 14px; line-height: 20px; } .user-contents .divider.oneline { display: flex; align-items: center; width: 100% } .user-contents .divider.oneline hr { flex: 1; border: none; height: 1px; background-color: #E5E7EB;; } .social { width: 48px; height: 48px; border-radius: 100%; overflow: hidden; border: unset; } .social.naver { background-color: #03C75A; } .social.kakao { border-color: #FEE500; } /* ========================================================================== ANIMATION ========================================================================== */ .fade-in { opacity: 0.4; transform: translateY(60px); transition: opacity 0.4s ease, transform 0.8s ease; } .fade-in.visible { opacity: 1 !important; transform: translateY(0); } .scale-in { opacity: 0; transform: scale(0); } .scale-in.visible { animation: pop-in 0.7s ease-out forwards; } @keyframes pop-in { 0% { opacity: 0; transform: translate(-50%, 0%) scale(0); } 100% { opacity: 1; transform: translate(-50%, 0%) scale(1); } } /* 바운스 애니메이션 */ @keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } /* 바운스 클래스 */ .bounce { animation: bounce 2s ease-in-out infinite; } @keyframes flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* 애니메이션 */ @keyframes pulse-outer { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.02); opacity: 1; } } @keyframes glow-pulse { 0% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); } } @keyframes bounceUp { 0% { transform: translateY(0); } 40% { transform: translateY(calc(-100% + 270px)); } 100% { transform: translateY(calc(-100% + 312px)); } } @media (max-width: 1417px){ .container .content { padding: 0 40px; } .main-banner .banner-title h1 div { font-size: 56px; line-height:72px; } .main-banner .banner-title h5 div { font-size: 24px; line-height: 34px; } #service-banner-2 .banner-item .banner-text .banner-text-main { display: flex; justify-content: center; } #main-main-banner-1 .banner-contents .main-main-banner-1-image { width: 254px; top:0px; } #main-main-banner-1 .banner-contents { max-height: 422px; } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper { width: 100%; height: 100%; } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper .outer-circle-border { width: 100%; height: 100%; } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper .outer-circle-border circle { cx: 50%; cy: 50%; r: calc(50% - 1px); } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper .outer-circle .inner-circle-wrapper { width: 62.5%; height: 62.5%; } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper .outer-circle .inner-circle-wrapper .inner-circle-border { width: 100%; height: 100%; } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper .outer-circle .inner-circle-wrapper .inner-circle-border circle { cx: 50%; cy: 50%; r: calc(50% - 1px); } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper .glow-effect { width: 50vw; height: 50vw; max-width: 800px; max-height: 800px; } #main-main-banner-1 .banner-contents .banner-icon { padding:.5rem; } #main-main-banner-1 .banner-contents .banner-icon.icon-1 ,#main-main-banner-1 .banner-contents .banner-icon.icon-3 ,#main-main-banner-1 .banner-contents .banner-icon.icon-4 ,#main-main-banner-1 .banner-contents .banner-icon.icon-6 { width: 63px; height: 63px; } #main-main-banner-1 .banner-contents .banner-icon.icon-1 i ,#main-main-banner-1 .banner-contents .banner-icon.icon-3 i ,#main-main-banner-1 .banner-contents .banner-icon.icon-4 i ,#main-main-banner-1 .banner-contents .banner-icon.icon-6 i { width: 43px; height: 43px; } #main-main-banner-1 .banner-contents .banner-icon.icon-2 ,#main-main-banner-1 .banner-contents .banner-icon.icon-5 { width: 50px; height: 50px; } #main-main-banner-1 .banner-contents .banner-icon.icon-2 i ,#main-main-banner-1 .banner-contents .banner-icon.icon-5 i { width: 34px; height: 34px; } .banner .banner-title h1 div { font-size: 48px; line-height: 62px; display: flex; flex-direction: column; } .banner .banner-title h6 div { font-size: 20px; line-height: 28px; } #main-banner-3 .banner-contents { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; } #main-banner-4 .banner-contents .banner-item-bundle { flex-direction: column; align-items: center; justify-content: center; } #main-banner-4 .banner-contents .banner-item-bundle .banner-item { width: 100%; } #main-banner-4 .banner-contents .banner-item-bundle .banner-item .img-item { display: flex; justify-content: center; align-items: center; } #main-banner-5 .banner-contents .flex { flex-direction: column; } #main-banner-5 .banner-contents .banner-item .banner-text p { max-width: 705px; } #main-banner-5 .banner-contents .banner-item .img-item div img { width: 304px; } #main-banner-6 .banner-contents .banner-item .banner-text { width: 100%; align-items: baseline; } #main-banner-6 .banner-contents .banner-item.active .banner-text { flex-direction: column; align-items: center; gap:24px; margin-bottom: 40px; } #main-banner-6 .banner-contents .banner-item.active .banner-text >div { width: 100%; text-align: center; gap:8px } #main-banner-6 .banner-contents .banner-item.active .banner-text >div >p { max-width: 100%; text-align: center; } #main-banner-6 .banner-contents { height: 100%; } #main-banner-6 .banner-contents > div { padding-top:0px; padding-bottom: 0px; } #main-banner-6 .banner-contents .banner-item .banner-img { position: unset; width: 100%; display: flex; justify-content: center; } #main-banner-6 .banner-contents .banner-item .banner-img img { object-fit: contain; max-width: 700px; } #main-banner-7 .banner-contents { flex-direction: column; gap: 40px; } #price-banner-1 .pc { display: flex; flex-direction: column !important; } #price-banner-1 .refund { margin-top: -56px; } #price-banner-2 .banner-item { width: 30%; } #price-banner-2 .banner-item:nth-child(n+10) { display: none; } #price-banner-3 ul.accordion { margin: unset; } #connect-banner .banner-title div h1 { display: flex; flex-direction: column; font-size: 32px; line-height: 42px; } #connect-banner .banner-contents { flex-direction: column; gap: 48px !important; } #connect-banner i.double-arrow { transform: rotate(90deg); } #service-push-main-banner-1 .service-main-banner-1-image-1 { padding: 0 108px; } #service-banner-2.banner { gap: 120px !important; } #service-banner-2 .banner-item .banner-text { text-align: center; } #service-banner-2 .banner-item .banner-text p.title5 { display: flex; flex-direction: column; } #service-banner-2 .banner-contents { gap: unset; } #service-banner-2 .banner-contents .gap-80 { gap: 60px !important; } #service-banner-2 .banner-contents .banner-item { flex-direction: column; align-items: center; justify-content: center; margin-top: 120px; } #service-banner-2 .banner-contents .banner-item:first-child { margin-top: unset; } #service-banner-2 .banner-contents .banner-item:nth-of-type(even) { flex-direction: column-reverse; align-items: center; justify-content: center; } #service-app-main-banner-1 .swiper-slide { padding: 20px 15px; width: 211px; gap: 12px; } #service-app-main-banner-1 .swiper-slide .gap-12 { gap: 9px !important; } #service-app-main-banner-1 .swiper-slide p.title4 { font-size: 15px; line-height: 21px; } #service-app-main-banner-1 .swiper-slide .text-16 { font-size: 12px; line-height: 18px; } #service-app-main-banner-1 .swiper-slide .text-16 pre { word-break: break-all; } #service-app-main-banner-1 .banner-contents { min-height: 530px; } #service-app-banner-3 .banner-contents .banner-item { flex: 1 1 40%; } #service-app-banner-3 .banner-title .pc { display: none !important; } #service-app-banner-3 .banner-title .mobile { display: flex !important; justify-content: center; flex-direction: column;} #function-banner .banner-item, #function-banner .banner-item.app { flex: 1 1 40%; } .service-app-main-banner-1-image-1 { width: 275px !important; } #support-banner .flow-gradient { padding: 5rem 40px; } aside.open { z-index: 9; background-color: #030712; min-height: calc(100% - 60px); padding: 20px 14px 60px; position: fixed; left: 0; top: 60px; height: calc(100% - 68px); width: 100%; overflow: auto; display: flex; flex-direction: column; } aside a.active, aside a:hover { background-color: rgba(255, 255, 255, 0.1); color: #fff; border-radius: 8px; } aside a { color: #99A1AF; display: flex; justify-content: space-between; padding: 10px 14px; margin-bottom: 4px; font-size: 14px; line-height: 20px; } aside .part { display: none; flex-direction: column; } aside .part li > a { padding: 12px 24px; } aside .part.open { display: flex; } aside .terms a:hover, aside .terms a.active { background-color: #F9FAFB !important; color: #2B7FFF !important; } } @media (max-width: 768px){ .container .content { padding: 0 24px; } /* .container .content section:first-of-type { padding: 8rem 0!important; } */ .main-banner .banner-title h1 div { display: flex; flex-direction: column; font-size: 40px; line-height: 52px; } .main-banner .banner-title h5 div { display: flex; flex-direction: column; font-size: 20px; line-height: 28px; } .main-banner .banner-title { font-size: 24px; line-height: 28px; } #main-main-banner-1 .banner-contents { max-height: 430px; margin-top:0px; } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper .outer-circle { width: 100%; height: 100%; } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper .outer-circle-border { width: 100%; height: 100%; } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper .outer-circle-border circle { cx: 50%; cy: 50%; r: calc(50% - 1px); } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper .outer-circle .inner-circle-wrapper { width: 62.5%; height: 62.5%; } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper .outer-circle .inner-circle-wrapper .inner-circle-border { width: 100%; height: 100%; } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper .outer-circle .inner-circle-wrapper .inner-circle-border circle { cx: 50%; cy: 50%; r: calc(50% - 1px); } #main-main-banner-1 .banner-contents .main-circles .outer-circle-wrapper .glow-effect { width: 60vw; height: 60vw; max-width: 600px; max-height: 600px; } #main-main-banner-1 .banner-contents .main-main-banner-1-image { width: 250px; } #main-main-banner-1 .banner-contents .banner-icon { padding:5px; } #main-main-banner-1 .banner-contents .banner-icon.icon-1 ,#main-main-banner-1 .banner-contents .banner-icon.icon-3 ,#main-main-banner-1 .banner-contents .banner-icon.icon-4 ,#main-main-banner-1 .banner-contents .banner-icon.icon-6 { width: 33px; height: 33px; } #main-main-banner-1 .banner-contents .banner-icon.icon-1 i ,#main-main-banner-1 .banner-contents .banner-icon.icon-3 i ,#main-main-banner-1 .banner-contents .banner-icon.icon-4 i ,#main-main-banner-1 .banner-contents .banner-icon.icon-6 i { width: 43px; height: 43px; } #main-main-banner-1 .banner-contents .banner-icon.icon-2 ,#main-main-banner-1 .banner-contents .banner-icon.icon-5 { width: 27px; height: 27px; } #main-main-banner-1 .banner-contents .banner-icon.icon-2 i ,#main-main-banner-1 .banner-contents .banner-icon.icon-5 i { width: 34px; height: 34px; } .banner .banner-title h1 div { font-size: 32px; line-height: 42px; } .banner .banner-title h6 { font-size: 16px; line-height: 24px; display: flex; flex-direction: column; } .banner .banner-title h1 div span { display: flex; flex-direction: column; } .banner .banner-title h6 div { font-size: 16px; line-height: 24px; display: flex; flex-direction: column; } #main-banner-2 .banner-contents.slide .slide-item { width: 160px!important; height: 64px!important; } #main-banner-3 .banner-item { gap:32px; } #main-banner-3 .banner-contents .banner-item .banner-text h5 { font-size: 20px; line-height: 28px; } #main-banner-3 .banner-contents .banner-item .banner-text .text-16 { font-size: 14px; line-height: 20px; } #main-banner-4 .banner-contents .banner-item .img-item img { max-height: 175px; } #main-banner-4 .banner-contents .banner-item .banner-text h6 { font-size: 18px; line-height: 26px; } #main-banner-4 .banner-contents .banner-item .banner-text p { font-size: 14px; line-height: 20px; } #main-banner-5 .banner-contents .banner-item .banner-text h5 { font-size: 20px; line-height: 28px; } #main-banner-5 .banner-contents .banner-item .banner-text p { max-width: 600px; font-size: 14px; line-height: 20px; } #main-banner-5 .banner-contents .banner-item .img-item div img { width: 264px; } #main-banner-6 .banner-contents { padding-left: 0; padding-right: 0; } #main-banner-6 .banner-contents .banner-item .banner-text span.number { padding: 20px; } #main-banner-6 .banner-contents .banner-item.active .banner-text h5 { font-size: 20px; line-height: 28px; } #main-banner-6 .banner-contents .banner-item .banner-text >div >p { font-size: 16px; line-height: 24px; } #main-banner-7 .banner-contents { align-items: center; } #main-banner-7 .banner-contents > .flex { flex-direction: column; gap: 40px; height: 300px; } #main-banner-7 .banner-contents .banner-item .banner-text h1 { font-size:40px; line-height: 52px; } #main-banner-7 .banner-contents .banner-item .banner-text h6 { font-size:18px; line-height: 26px; } #main-banner-7 .banner-contents .banner-item .banner-text p { font-size:14px; line-height: 20px; } #main-banner-8 { width: calc(100vw - 48px); } #main-banner-8 .banner-contents { justify-content: center; } #main-banner-8 { padding-bottom: 50px; } /* #main-banner-8 .banner-contents .input-group { max-width: 360px; } */ #main-banner-8 .banner-contents .input-group .input-box input { text-overflow: ellipsis; } #main-banner-8 .banner-contents .input-group { width: 300px; max-width: calc(100vw - 40px); } #main-banner-8 .banner-contents .input-group:has(input:focus) { width: 320px; max-width: calc(100vw - 20px); } #price-banner-1 .banner-title h1 div { font-size: 32px; line-height: 42px; display: flex; flex-direction: column; } #price-banner-1 .banner-title h6 div { font-size: 16px; line-height: 24px; display: flex; flex-direction: column; } #price-banner-1 .banner-item h6 { font-size: 20px !important; line-height: 28px !important; } #price-banner-1 .title { font-size: 32px !important; line-height: 42px !important; word-break: keep-all; } #price-banner-2 .title { font-size: 32px !important; line-height: 42px !important; word-break: keep-all; } #price-banner-2 .banner-item .text-16 { font-size: 14px; line-height: 20px; } #price-banner-2 .banner-title h1 div { font-size: 32px; line-height: 42px; display: flex; flex-direction: column; } #price-banner-2 .banner-title h6 { font-size: 16px; line-height: 24px; display: flex; flex-direction: column; } #price-banner-2 .banner-item { width: 46%; } #price-banner-2 .banner-item:nth-child(n+7) { display: none; } #price-banner-3 h1 { font-size: 32px; line-height: 42px; } #price-banner-3 .banner-title .mobile { display: flex !important; font-size: 16px !important; line-height: 24px !important; word-break: keep-all; } #price-banner-3 .banner-title .pc { display: none; } #price-banner-3 .banner-contents .banner-item { display: flex; overflow-x: auto; white-space: nowrap; scrollbar-width: none; width: 100%; } #price-banner-3 ul.accordion > li .item-title { font-size: 15px; line-height: 22px; } #price-banner-3 ul.accordion > li .text-14 { font-size: 13px; line-height: 18px; white-space: break-spaces; max-height: 100px; } #contact-banner-1 .banner-contents .form { padding:40px 20px; } #contact-banner-1 .banner-contents .form > .flex { flex-direction: column; } #support-banner .flow-gradient { padding: 5rem 24px; } #support-banner .banner-title h1 div { font-size: 32px; line-height: 42px; display: flex; flex-direction: column; } #support-banner .banner-title h6 div { font-size: 16px; line-height: 24px; display: flex; flex-direction: column; } /* #function-banner .banner-contents { flex-direction: column; } */ #function-banner .banner-item .text-20 { font-size: 20px; line-height: 28px; } #function-banner .banner-item .text-16 { font-size: 14px; line-height: 20px; } #function-banner .banner-title div h1 { font-size: 32px; line-height: 42px; display: flex; flex-direction: column; } #function-banner .banner-title div h6 { font-size: 16px; line-height: 24px; display: flex; flex-direction: column; } #function-banner .banner-item.app .text-20 { display: flex; flex-direction: column; font-size: 14px; line-height: 20px; } #function-banner .banner-item.app .text-16 { display: none; } #function-banner .banner-item { flex: 1 1 100%; } #function-banner .mobile { display: flex !important; } #function-banner .pc { display: none !important; } #service-push-main-banner-1 .service-main-banner-1-image-1 { padding: 0 20px; } #service-push-main-banner-1 .service-main-banner-1-image-2 { left: 0%; top: 30%; width: 45%;} #service-push-main-banner-1 .service-main-banner-1-image-3 { left: 53%; width: 45%;} #service-banner-2 .pc { display: none !important; } #service-banner-2 .mobile { display: flex !important; } #service-banner-2 .banner-item p.title3 { font-size: 20px; line-height: 28px; } #service-banner-2 .banner-item p.title5 { font-size: 16px; line-height: 24px; } #service-banner-2 .banner-item .service-banner-image-bg { width: unset; border-radius: 24px; padding: 25px; background-color: #10182880; } #service-banner-2 .banner-item .banner-text p.title5.pc { display: none !important; } #service-banner-2 .banner-item .banner-text p.title5.mobile { display: flex !important; } #service-app-banner-3 .banner-contents .banner-item { width: 100%; flex: unset; } /* .service-app-main-banner-1-image-1 { width: 147px !important; } */ #service-app-main-banner-1 .banner-contents { min-height: 500px; } #service-app-main-banner-1 .banner-contents .fucbox { padding: 1rem; max-width: 240px; } #service-app-main-banner-1 .banner-contents .fucbox h5 { font-size: 18px; } #service-app-main-banner-1 .banner-contents .fucbox .fuc-img-wapper { padding: 40px; } #service-app-main-banner-1 .banner-contents .pc { display: none !important; } }