#app-navbar {display: none !important;} .hero-section {display: none;} .inner {width:100%;max-width: 1280px;margin: 0 auto;} html {font-size: 16px;} .subtitle { text-align: center;} .subtitle > span {display: inline-flex;align-items: center;justify-content: center;background: #222;color: #fff;padding: 7px 19px;border-radius: 26px;margin: 0 0 13px 0;font-family: 'pre_M';} .subtitle .main {font-size: 2.4rem;margin: 0 0 20px 0;} .subtitle .sub {font-size: 1.2rem;color: #555;font-family: pre_R;} .fade_up {opacity: 0; transform: translateY(20px); } .fade_up.show {animation: fadeUp 0.5s ease-out forwards;} @keyframes fadeUp { to {opacity: 1;transform: translateY(0);} } .slide_down { opacity: 0; transform: translateY(-140px);} .slide_down.show { animation: slideDown 0.5s ease-out forwards;} @keyframes slideDown { to {opacity: 1;transform: translateY(0);} } .fade_in {opacity: 0;} .fade_in.show {animation: fadeIn 1s ease-out forwards;} @keyframes fadeIn { to {opacity: 1;} } .pop_in { opacity: 0;transform: scale(0.5);} .pop_in.show {animation: popIn 0.6s ease-out forwards;} @keyframes popIn { 80% {opacity: 1;transform: scale(1.05);} 100% {opacity: 1; transform: scale(1);} } #header { padding: 50px 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 5; background-color: #fff; transition: 0.5s;} #header.on {padding: 20px 0; border-bottom: 1px solid #ddd;} #header .inner {display: flex;justify-content: space-between;position: relative;align-items: center;} #header .logo img {width:150px} #header #nav {position: absolute;top: 8px;left: 50%;transform: translateX(-50%);display: flex;gap: 50px;} #header #nav .menu {color: #222;position: relative;display: flex;align-items: center;justify-content: center;gap: 10px; cursor: pointer;} #header #nav .menu > img { width: 11px;} #header .btn_wrap { display: flex; gap: 10px; } #header .btn_wrap a { display: flex; gap: 10px; align-items: center; padding: 9px 17px; justify-content: center; font-size: 0.9rem; border-radius: 6px; } #header .btn_wrap a.btn_1 { background: #E5EBFF; color: #396AFF; } #header .btn_wrap a.btn_1:hover { background: #ebf0fe;} #header .btn_wrap a.btn_2 { background: #396AFF; color: #fff; } #header .btn_wrap a.btn_2:hover {background: #5781ff;} #header #nav .sub_open.active { color:#000; font-family: pre_B;} #header #nav .sub_open.active img {transform: rotate(180deg)} #header #nav ul.sub { position: absolute; top: 40px; left: -10px; background: #fff; padding: 20px; border-radius: 10px; width: max-content; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border: 1px solid #ddd; display: none;} #header #nav ul.sub.on {display: block;} #header #nav ul.sub.on a .iamge img {transform: rotate(180deg)} #header #nav ul.sub li { margin: 0 0 20px 0; } #header #nav ul.sub li:last-of-type { margin: 0; } #header #nav ul.sub li a { display: flex; gap: 14px; align-items: flex-start; } #header #nav ul.sub li a .image img { height: 19px; transform: translateY(3px); } #header #nav ul.sub li a .text {opacity: 0.7} #header #nav ul.sub li a:hover .text {opacity: 1;} #header #nav ul.sub li a .text .name { color: #000;} #header #nav ul.sub li a .text .txt { font-family: 'pre_L'; font-size: 0.9rem; } #header_m, #m_menu {display: none;} #visual { margin: 70px 0 0 0;} #visual .inner {max-width: 1500px; width: 90%; position: relative;} #visual .text {text-align: center;width: 100%;position: relative;z-index: 3;padding: 120px 0 0 0;} #visual h1 {font-size: 3.3rem;letter-spacing: -3.8px;line-height: 1.2;} #visual h1 br.mo {display: none;} #visual h1 span {background: #396AFF;-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-family: pre_B;} #visual h1 img { display: inline-block; width: 50px; margin: 0 7px 0 10px;} #visual a.btn {background: #222;position: relative;overflow: hidden;z-index: 1;color: #fff;display: flex;align-items: center;justify-content: center;width: 200px;height: 71px;border-radius: 80px;font-size: 1.5rem;gap: 8px;font-family: 'pre_R';margin: 40px auto;box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;} #visual a.btn:hover {background: #363636;} #visual a.btn img { width: 23px;} #visual .image {position: absolute;width: 100%;} #visual .back { top: 0px; } #visual .pc { position: relative; left: 50%; transform: translateX(-50%); width: 73%; z-index: 3; } #visual .icon { width: 9%; z-index: 3; } #visual .icon_1 { bottom: 34%; left: 12.3%; z-index: 1; } #visual .icon_2 { left: 6.6%; bottom: 25%; } #visual .icon_3 { bottom: 14.8%; left: 12%; } #visual .icon_4 { bottom: 8%; left: 20%; } #visual .icon_5 { bottom: 4.2%; left: 28.6%; } #visual .icon_6 { bottom: 9%; left: 37%; } #visual .icon_7 {bottom: 20%;width: 14%;right: 10%;} #one {padding: 120px 0 0 0;} #one .subtitle { display: flex; justify-content: space-between; align-items: flex-end; } #one .subtitle > div { text-align: left; } #one .subtitle span {display: inline-flex; align-items: center; justify-content: center; background: #222; color: #fff; padding: 7px 19px; border-radius: 26px; margin: 0 0 13px 0; font-family: 'pre_M'; } #one .subtitle .sub { text-align: right; } #one .track { position: relative; overflow: hidden; display: flex; gap: 32px; padding:30px 0 0 0; } #one .track .flow {display: flex;gap: 24px; padding: 0 0 120px 0; animation: one-marquee 60s linear infinite;} #one .track .flow img { box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; border-radius: 39px;} @keyframes one-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } /* 내용 2배로 복제 기준 */ } #whycrm { padding: 120px 0; background: #F6F7FB; } #whycrm .subtitle { margin: 0 0 70px 0; } #whycrm .box { background: #fff; padding: 70px 70px 0 70px; border-radius: 60px; box-shadow: rgba(149,157,165,0.2) 0px 8px 24px; overflow: hidden; } #whycrm .box.top { margin: 0 0 40px 0; display: flex; justify-content: space-between; } #whycrm .box.top .text { display: flex; flex-direction: column; justify-content: center; gap: 60px; transform: translateY(-30px); } #whycrm .box.top .image img { width: 100%; } #whycrm .box .text .title {display: flex;gap: 20px;font-size: 1.8rem;align-items: center;font-family: 'pre_SB';} #whycrm .box .text .title img { height: 29px; } #whycrm .box .text .txt { color: #555; font-family: 'pre_R'; } #whycrm .box .image { width: 43%; } #whycrm .box .image img { transform: translateY(1px); } #whycrm .box_wrap { display: flex; gap: 30px; } #whycrm .box.bottom { width: 50%; position: relative; height: 550px; } #whycrm .box.bottom .text .txt { margin: 30px 0 0 0; } #whycrm .box.bottom .image { position: absolute; bottom: 0; right: 0; width: 77%; } #whycrm .box.bottom .image img { width: 100%; } #review { background: #DBE0F2; padding: 120px 0; } #review .subtitle .main { font-family: 'pre_L'; text-align: left; } #review .container { max-width: 100%; position: relative; margin: 70px 0 0 0; overflow: hidden;} #review .container .gra { position: absolute; top: 0; height: 100%; width: 370px; background: red; z-index: 2; } #review .container .gra.left { background: linear-gradient(90deg, rgba(219, 224, 242, 1) 0%, rgba(246, 247, 251, 0) 100%); left: 0; } #review .container .gra.right { left: auto; right: 0; background: linear-gradient(270deg, rgba(219, 224, 242, 1) 0%, rgba(246, 247, 251, 0) 100%); } #review .container .review_flow {display: flex; gap:30px; animation: scroll-left 60s linear infinite; width: max-content} #review .container .review_flow.bottom {animation: scroll-right 60s linear infinite; margin: 30px 0 0 0;} #review .review_flow img { flex-shrink: 0; } /* 핵심: 0 → -50% 만 움직임 */ @keyframes scroll-left {0% {transform: translateX(0);} 100% {transform: translateX(-50%);}} @keyframes scroll-right {0% {transform: translateX(-50%);} 100% {transform: translateX(0);}} #feat {padding: 80px 0;} #feat .tab {display:flex;gap:10px;border:aliceblue;margin: 49px 0 0 0;} #feat .tab .tab-btn {cursor:pointer;border:none;box-shadow:none;border-top-left-radius:30px;border-top-right-radius:30px;background:#ececec;color:#828282;font-size: 1.2rem;width: 50%;padding: 20px 0px; text-align: center;} #feat .tab .tab-btn.active {background: #F6F7FB;color: #000;position:relative;z-index:3;} #feat .tab .tab-btn:hover {color: #000;} #feat .tab-content {background: #F6F7FB;display:flex;align-items:center;justify-content:center;padding: 60px 30px;border-bottom-left-radius:30px;border-bottom-right-radius:30px;box-shadow: rgba(0,0,0,0.15) 0px 0px 25px;position:relative;z-index: 2;} #feat .tab-content .content { display: none; align-items: center; justify-content: center; } #feat .tab-content .content.active {display: block;width: 100%;} #feat .tab-content .content.active .box {animation: fadeUp 0.5s ease-out forwards;} #feat .tab-content .content.active .box:nth-of-type(2) {animation-delay:0.2s} #feat .tab-content .content.active .box:nth-of-type(3) {animation-delay:0.4s} #feat .content .sub_text { text-align: center; color: #555; margin: 0 0 40px 0; font-family: 'pre_R'; font-size: 1.1rem; } #feat .content .box_wrap { display: flex; gap: 20px; justify-content: space-between; } #feat .content .box_wrap .box { background: #fff; padding: 20px; border-radius: 20px; opacity: 0; transform: translateY(20px);} #feat .content .box_wrap .box .name { text-align: center; font-family: 'pre_SB'; margin: 9px 0 20px 0; } #feat .content .box_wrap .box img { width: 100%; margin: 0 0 20px 0; } #feat .content .box_wrap .box .txt p { color: #555; position: relative; font-family: 'pre_R'; padding: 0 0 0 22px; } #feat .content .box_wrap .box .txt p::before {content: '';display: block;width: 3px;height: 3px;border-radius: 100%;background: #555;position: absolute;top:10px;left: 8px;} #another { background: #F6F7FB; padding: 120px 0 10px 0; } #another .subtitle { margin: 0 0 20px 0; } #another .track { position: relative; overflow: hidden; display: flex; gap: 24px; padding: 40px 0 130px 0; } #another .track .flow { display: flex; gap: 24px; animation: marquee 26s linear infinite; animation-play-state: running !important;} #another .track.paused .flow {animation-play-state: paused !important;} #another .track .gra { position: absolute; z-index: 2; width: 100px; height: 100%; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } #another .track .gra_l { left: 0; top: 0; background: linear-gradient(90deg,rgba(246, 247, 251, 1) 0%, rgba(246, 247, 251, 0) 100%); } #another .track .gra_r { top: 0; right: 0; background: linear-gradient(270deg,rgba(246, 247, 251, 1) 0%, rgba(246, 247, 251, 0) 100%); } #another .track img { width: 146px; flex-shrink: 0; box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; border-radius: 16px; } #add {padding: 120px 0; } #add .subtitle { margin: 0 0 50px 0; } #add .subtitle .main span {display: block;font-family: 'pre_R';} #add .content {display: flex;gap: 4%;} #add .content .image {width: 52%;} #add .content .image img {width:100%; opacity: 0; transform: translateY(20px); } #add .content .image img.on {animation: fadeUp 0.5s ease-out forwards;} #add .content .text {width: 44%;display: flex;flex-direction: column;justify-content: center;} #add .content .text .title {font-size: 1.7rem;margin: 0 0 30px 0;padding: 0 0 0 40px;} #add .content .text .txt {width: 100%;color: #777;font-family: 'pre_R';height: 180px;font-size: 1.1rem;padding: 0 0 0 40px;} #add .content .track { position: relative; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; /* 옛 IE */} #add .content .track .swiper { width: 86%; } #add .content .track .swiper-slide {cursor: pointer;} #add .content .track .swiper-slide img { width:98%; border: 4px solid #fff; border-radius: 20px; } #add .content .track .swiper-slide.on img { border-radius: 20px; border: 4px solid #adbcff; } #add .content .track .swiper-slide:hover:not(.on) img {border:4px solid #ddd;} #add .content .track .swiper-button-next { right: 10px; width: 14px; } #add .content .track .swiper-button-prev { left: 0; width: 14px; } #add .word { display: none; opacity: 0; transform: translateY(20px); } #add .word.on { display: block; animation: fadeUp 0.5s ease-out forwards; animation-delay: 0.4s; } #banner { background: #CAE0FF; } #banner .inner { display: flex; align-items: center; justify-content: center; } #banner .inner img.right { transform: translateY(5px);} #banner .inner .text { margin: 0 70px 0 60px; } #banner .inner .text p { font-size: 1.5rem; text-align: center; } #banner .inner .text p span { display: block; font-family: 'pre_L'; } #join {background: #F7F7FB;padding: 80px 0;} #join .subtitle .main span { font-family:'pre_L'; display:block; } #join .subtitle img { margin: 30px auto 8px;} #join .tab {display:flex;gap:10px;border:aliceblue;margin: 49px 0 0 0;} #join .tab .tab-btn {cursor:pointer;border:none;box-shadow:none;border-top-left-radius:30px;border-top-right-radius:30px;background:#E8E8E8;color:#424242;font-size: 1.2rem;width: 50%;padding: 20px 0px; text-align: center;} #join .tab .tab-btn p.mo {display: none;} #join .tab .tab-btn.active {background:#fff;color: #000;position:relative;z-index:3;box-shadow: rgba(0, 0, 0, 0.05) 0px -10px 10px;} #join .tab .tab-btn:hover {color: #000;} #join .tab-content .content { display: none; align-items: center; justify-content: center; box-position:relative;z-index: 2; } #join .tab-content .content .image_wrap {border-bottom-left-radius:30px;border-bottom-right-radius:30px;shadow: rgba(0,0,0,0.05) 0px 0px 25px; background:#fff;display:flex;align-items:center;justify-content:center; padding: 80px 0;} #join .tab-content .content.active {display: block;} #join .tab-content .content .image_wrap img {height:176px;opacity: 0; transform: translateY(20px);} #join .tab-content .content.active img {animation: fadeUp 0.5s ease-out forwards;} #join .join_btn {display: flex;align-items: center;justify-content: center;width: 240px;background: #222;margin: 50px auto 0;height: 70px;color: #fff;border-radius: 50px;font-size: 1.1rem;gap: 10px;position: relative; overflow: hidden; z-index: 1;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;} #join .join_btn:hover {background-color: #3f3f3f} #join .join_btn::before { content: ""; position: absolute; inset: 0; padding: 3px; border-radius: inherit; background: linear-gradient(135deg, #9273FF, #5090FF, #F476FF); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; } #exper {background: url(../image/exper_back.svg);background-size: cover;padding: 80px 0px;text-align: center;} #exper .left .subtitle .main { color: #fff; line-height: 1.1; } #exper .left .subtitle .main span { display: block; font-family: 'pre_L'; } #exper .left a { display: flex; align-items: center; justify-content: center; gap: 30px; border: 2px solid #fff; width: 230px; margin: 40px auto 0; border-radius: 60px; height: 63px; color: #fff; font-size: 1.3rem; } #exper .left a img { width: 34px; } #footer { background-color:#121F34; padding:80px 0 0 0; } #footer * { color:#fff; } #footer .top { display:flex; justify-content:space-between; } #footer .top .wrap { display:flex; gap:60px; align-items:center; } #footer .top .wrap .logo { width:180px;} #footer .top .wrap .logo img {width: 100%} #footer .top .wrap .menu { display:flex; gap:13px; align-items:center; } #footer .top .wrap .menu p { font-size:1.2rem; margin:0 20px 0 0; } #footer .top .wrap .menu .menu span { font-size:0.7rem; font-family:'pre_L'; } #footer .top .wrap .menu .menu a { font-family:'pre_R'; opacity:0.8; font-size:0.9rem; } #footer .top .wrap .menu .menu a:last-of-type { opacity:1; font-family:'pre_B'; } #footer .top .sns { display:flex; gap:6px; } #footer .top .sns a img { width:30px; } #footer .center { padding:40px 0 40px 240px; } #footer .center .wrap { display:flex; gap:30px; margin:11px 0; } #footer .center .wrap p { font-size:0.9rem; font-family:'pre_L'; color:#b0afaf; } #footer .center .wrap p span { color:#d7d7d7; display:inline-block; margin:0 20px 0 0; } #footer .copyright {padding:30px 0;border-top: 1px solid #ffffff29;text-align:center;font-size:0.8rem;} #footer .copyright p { font-family:'pre_L'; opacity:0.7; } .new_quickmenu {position: fixed; top:50%; right: -1px; transform: translateY(-50%); z-index: 100; background-color: #fff; border: 1px solid #eee; padding: 20px 0 10px 0; display: block; border-top-left-radius: 20px; border-bottom-left-radius: 20px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; width: auto;} .new_quickmenu .inner {display: block;} .new_quickmenu * {box-sizing: border-box;} .new_quickmenu a {position: relative; display: flex; align-items: center; justify-content: center; padding:10px; width: 90px; height: 90px; flex-direction: column;} .new_quickmenu a:hover {text-decoration: none;} .new_quickmenu a:hover p {text-decoration: none; } .new_quickmenu a img.icon {height: 47px;} .new_quickmenu a img.icon.kakao {height: 47px;} .new_quickmenu a img.icon.top {height: 20px;} .new_quickmenu a:nth-of-type(1)::before {display: none;} .new_quickmenu a::before {display:block; width: 60%; height: 1px; background-color: #b3b3b3; position: absolute; top: 0;} .new_quickmenu a p {font-size: 13px; text-align: center; margin: 5px 0 0 0; font-family: 'pre_B'} .new_quickmenu #consult-chat-floatting-plugin, .new_quickmenu #chatButton, .new_quickmenu .chat-fix {position: inherit !important; bottom: inherit; right: inherit} .new_quickmenu #consult-chat-iframe-plugin {right: 100px !important;} .new_quickmenu .chat-open, .new_quickmenu .chat-close {border-radius: 8px; width: 64px; height: 64px;} .floating { position: fixed; bottom: -70px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg,rgba(100, 118, 255, 1) 0%, rgba(207, 76, 255, 1) 100%); border-radius: 10px; display: flex; align-items: center; padding: 14px 30px; z-index: 5; box-shadow: rgb(60 60 60 / 40%) 0px 8px 24px; transition: 1s; } .floating.on { bottom: 30px; } .floating p { color: #fff; font-size: 1.1rem; font-family: 'pre_L'; margin: 0 20px 0 0; } .floating span { display: flex; align-items: center; color: #fff; font-size: 1.2rem; font-family: 'pre_B'; } .floating span img { margin: 0 0 0 10px; } #contact { padding: 170px 0 100px 0;} #contact .inner { max-width: 690px;} #contact .title { text-align: center; margin: 0 0 50px 0;} #contact .title span{ display: flex; background: #222; color: #fff; width: 100px; height: 40px; border-radius: 70px; align-items: center; justify-content: center; margin: 0 auto 30px;} #contact .title .txt1 { font-size: 2.1rem; line-height: normal; margin: 0 0 30px 0;} #contact .title .txt2 { font-size: 1.2rem; font-family: 'pre_L';} #contact .toptext {font-size: 0.9rem;color: #777;text-align: right;margin: 0 0 10px 0;} #contact .toptext span {color: #ff3b3b;transform: translateY(2px);display: inline-block;margin: 0 5px 0 0;} #contact .input_wrap {margin: 0 0 20px 0;display: flex;background: #f7f7f7;border-radius: 10px;padding: 10px 20px;} #contact .input_wrap .name {font-size: 1rem; color: #333;display: flex;align-items: center; width: 130px;} #contact .input_wrap .name .ess {color: #ff3b3b;display: inline-block;transform: translateY(2px);margin: 0 4px 0 0;} #contact .input_wrap .right {width:calc(100% - 130px)} #contact .input_wrap input {width: 100%;padding: 14px 15px;font-size: 1rem;border-radius: 6px;background: none;} #contact .input_wrap input:focus {border-color: #396aff;outline: none;} #contact .input_wrap input::placeholder {color: #878787; font-family: 'pre_L' } #contact .input_wrap textarea {width: 100%;height: 160px;border: 1px solid #ddd;padding: 15px;font-size: 1rem;border-radius: 6px;resize: none;} #contact .input_wrap textarea:focus {border-color: #396aff;outline: none;} #contact .mail_wrap {display: flex;align-items: center;gap: 10px;} #contact .mail_wrap input {flex: 1;padding: 14px 15px;border-radius: 6px;width: calc(50% - 95px);} #contact .mail_wrap .email_ess {font-size: 1rem;color: #333;display: block;width: 13px;text-align: center;} #contact .input_wrap select {padding: 14px 15px;border-radius: 6px;font-size: 1rem;border: 0;color: #333;font-family: 'pre_L';width: 100%;} #contact .mail_wrap select {width:150px} #contact .agree_wrap { margin: 40px 0 0 0; } #contact .agree_wrap .block {border: 1px solid #ddd;padding: 20px 0 20px 0;margin: 20px 0;border-radius: 10px;} #contact .agree_wrap .block .textarea{background: #ffffff;padding: 20px;border-radius: 10px;/* border: 1px solid #ddd; */margin: 0 auto 30px;background: #fafafa;width: 93%;} #contact .agree_wrap .block .textarea p{font-family: 'pre_L';font-size: 0.9rem;color: #444;text-align: center;} #contact .agree_wrap .check_wrap_2 {display:flex;align-items: center;margin: 10px 0 0 0;justify-content: center;} #contact .agree_wrap .check_wrap_2 p {font-size:0.9rem;margin: 0 10px 0 0;} #contact .agree_wrap .checkbox-wrapper {display: flex;align-items: center;justify-content: center;margin: 10px 0;} #contact .contact_com { display: flex; align-items: center; justify-content: center; margin: 50px auto 0; width: 200px; height: 60px; background: #222; color: #fff; border-radius: 10px; font-size: 1.2rem; } .checkbox-wrapper * { box-sizing: border-box; } .checkbox-wrapper .cbx {-webkit-user-select: none;user-select: none;cursor: pointer;border-radius: 6px;overflow: hidden;transition: all 0.2s ease;display: inline-block;display: flex;align-items: center;} .checkbox-wrapper .cbx:not(:last-child) { margin-right: 6px; } .checkbox-wrapper .cbx:hover { background: rgba(0,119,255,0.06); } .checkbox-wrapper .cbx span {float: left;} .checkbox-wrapper .cbx span:first-child {position: relative;width: 24px;height: 24px;border-radius: 100%;transform: scale(1);/* border: 1px solid #cccfdb; */transition: all 0.2s ease;box-shadow: 0 1px 1px rgba(0,16,75,0.05);background: #f1f1f1;} .checkbox-wrapper .cbx span:first-child svg {position: absolute;top: 7px;left: 6px;fill: none;stroke: #fff;stroke-width: 2;stroke-linecap: round;stroke-linejoin: round;stroke-dasharray: 16px;stroke-dashoffset: 16px;transition: all 0.3s ease;transition-delay: 0.1s;transform: translate3d(0, 0, 0);} .checkbox-wrapper .cbx span:last-child {padding-left: 8px;line-height: 18px;font-size: 1rem;} .checkbox-wrapper .inp-cbx { position: absolute; visibility: hidden; } .checkbox-wrapper .inp-cbx:checked + .cbx span:first-child { background: #222; border-color: #222; animation: wave-4 0.4s ease; } .checkbox-wrapper .inp-cbx:checked + .cbx span:first-child svg { stroke-dashoffset: 0; } .checkbox-wrapper .inline-svg { position: absolute; width: 0; height: 0; pointer-events: none; user-select: none; } @-moz-keyframes wave-4 { 50% { transform: scale(0.9); } } @-webkit-keyframes wave-4 { 50% { transform: scale(0.9); } } @-o-keyframes wave-4 { 50% { transform: scale(0.9); } } @keyframes wave-4 { 50% { transform: scale(0.9); } } #contact_com { padding: 200px 0 120px; } #contact_com .inner { text-align: center; } #contact_com .title { font-size: 3rem; margin: 0 0 20px 0; } #contact_com .sub { font-size: 1.2rem; font-family: 'pre_L'; } #contact_com a { display: flex; margin: 50px auto 50px; width: 170px; height: 60px; align-items: center; justify-content: center; background: #222; color: #fff; gap: 10px; font-size: 1.2rem; border-radius: 60px; } #contact_com a img { width: 20px; } #contact_com .people { width: 100%; margin: 0 auto; max-width: 1040px; } .doc {padding:190px 0 100px 0;} .doc .inner {max-width:1000px} .doc h2 {font-size: 3rem; text-align: center; margin: 0 0 20px 0;} .doc p { font-family: pre_L; margin: 6px 0;} .doc .title_1 {font-size: 1.3rem;font-family: 'pre_B'; margin:70px 0 0 0;} .doc .title_2 {font-size: 1.1rem;font-family: 'pre_sb';margin: 30px 0 0 0px;} .faq_list {padding: 170px 0 100px 0;} .faq_list .inner {max-width: 1050px;} .faq_list .title {text-align: center;} .faq_list .title span {display: flex; background: #222; color: #fff; width: 100px; height: 40px; border-radius: 70px; align-items: center; justify-content: center; margin: 0 auto 30px;} .faq_list .title h2 {font-size: 2.1rem; margin: 0 0 10px 0;} .faq_list .title p {font-family: 'pre_L'; font-size: 1.1rem;} .faq_list .search_wrap {position: relative; width: 100%; max-width: 700px; height: 88px; border: 4px solid transparent; border-radius: 88px; background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #6476FF 0%, #CF4CFF 100%); background-origin: border-box; background-clip: content-box, border-box; margin: 40px auto 0px; display: flex; align-items: center;} .faq_list .search_wrap select {width: 180px; height: 100%; border: 0; outline: 0; padding: 0 0 0 40px; font-size: 1.4rem; background: url(../image/select_icon.svg) 96% 52% no-repeat; background-size: 15px;} .faq_list .search_wrap input[type="search"] {width: calc(100% - 240px); height: 100%; font-size: 1.2rem; color: #3958ff; padding: 0 20px;} .faq_list .search_wrap button {height: 100%; width: 68px; display: flex; align-items: center;} .faq_list .search_wrap button img {width: 36px;} .faq_list .category {display: flex; align-items: center; justify-content: center; margin: 40px 0; gap: 11px;} .faq_list .category span {display: flex; background: #F1F3F9; padding: 6px 20px; border-radius: 50px; cursor: pointer; font-size: 1.1rem; color: #555;} .faq_list .category span.on {background: linear-gradient(45deg,rgba(100, 118, 255, 1) 0%, rgba(207, 76, 255, 1) 100%); color:#fff; font-family: pre_B;} .faq_list .list {margin: 60px 0 0 0;} .faq_list .list ul li {border-bottom: 1px solid #C5C5C5;} .faq_list .list ul li a {display: flex; align-items: center; justify-content: space-between; padding: 30px 20px 30px 20px;} .faq_list .list ul li a .text {display: flex; padding: 0 90px 0 0; transition: 0.5s;} .faq_list .list ul li a .text .block {width: 110px;} .faq_list .list ul li a span {border: 2px solid #c5bfff; padding: 2px 14px; border-radius: 4px; color: #4332FF; font-family: pre_SB; transform: translateY(-1px); display: inline-block; font-size: 0.9rem;} .faq_list .list ul li a p {font-size: 1.1rem; transition: 0.5s;} .faq_list .list ul li a:hover p {padding: 0 0 0 6px;} .faq_list .list ul li a img {width: 7px;} .faq_list .page {display: flex; align-items: center; justify-content: center; margin: 50px 0 0 0; gap: 0;} .faq_list .page span {cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;} .faq_list .page span.prev {margin:0 10px 0 0;} .faq_list .page span.next {margin:0 0 0 10px;} .faq_list .page span.number {font-size: 1.1rem;} .faq_list .page span.on {background:#222; color: #fff; border-radius: 10px;} .faq_list .page span img {width: 6px;} #faq_content {padding: 170px 0 50px 0;} #faq_content .faq_list {} #faq_content .inner {} #faq_content .content {} #faq_content .content .title {} #faq_content .content .title span {} #faq_content .content .title .name {} #faq_content .content .text {} #faq_content .content .text p {} #faq_content .content .btn {} #faq_content .content .btn .prev {} #faq_content .content .btn .arrow {} #faq_content .content .btn a {} #faq_content .content .btn .next {} #faq_content .faq_list {} #faq_content .faq_list .faq_con_h2 {}