/* 애니메이션 */
.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);}
}

@keyframes float-y-offset {
    0%   { transform: translateY(-12px); }
    50%  { transform: translateY(0); }
    100% { transform: translateY(-12px); }
}
.float_y_off  { animation: float-y-offset 2.6s ease-in-out infinite; }
.float_y_off2  { animation: float-y-offset 3s ease-in-out infinite; }
.float_y_off3  { animation: float-y-offset 3.4s ease-in-out infinite; }


#main_service_cti * {color:#000;letter-spacing: -1px;box-sizing:border-box;font-family:'pre_M'; text-decoration: none;}
#main_service_cti img {display:block;}
#main_service_cti .inner {width: 100%;max-width: 1100px;margin: 0 auto;}
#main_service_cti .main_title {text-align: center;font-size: 46px;font-family: 'pre_B';line-height: 1.3;}
#main_service_cti .sub_title { text-align: center; font-size: 26px; margin: 20px 0 0 0; color: #333; line-height: 1.4;}


#visual .imagewrap { position: relative; margin: 70px 0 0 0; }
#visual .imagewrap .icon { position: absolute; z-index: 2; }
#visual .imagewrap .icon.icon_1 { bottom: -11%; right: 16%; width: 28%; }
#visual .imagewrap .icon.icon_2 { width: 27%; bottom: 0%; left: 9%; }
#visual .imagewrap .icon.icon_3 { width: 24%; bottom: 17%; left: 33%; }
#visual .imagewrap .icon.icon_4 { width: 20%; top: 29.7%; right: 23.3%; }
#visual .imagewrap .icon.icon_5 { width: 21%; top: 14%; left: 21%; }
#visual .imagewrap .icon.icon_6 { width: 21%; top: 0; right: 36%; }
#visual .imagewrap .icon.mouse { width: 6%; bottom: 6%; right: 18%; }
#visual .imagewrap .back { width: 100%; }


#pattern { padding: 100px 0 120px 0; }
#pattern .image_wrap { display: flex; gap: 20px; margin: 50px 0 50px 0; }
#pattern .image_wrap img {height: 100%;width: auto;object-fit: contain; min-width: 0;}
#pattern .text { text-align: center; font-size: 22px; color: #222; line-height: 1.5; }


#recom { background: linear-gradient(180deg, rgba(236,233,254,0) 34%, rgba(236,233,254,1) 100%); padding: 0 0 120px 0; }
#recom .box .text .title { font-size: 19px; color: #6927DA; font-family: 'pre_SB'; margin: 0 0 16px 0; }
#recom .box .text .txt { color: #505050; font-size: 16px; line-height: 1.3; font-family: 'pre_R'; }
#recom .top .boxwrap { display: flex; gap: 20px; margin: 50px 0 0 0; }
#recom .top .boxwrap .box .image img { width: 100%; border-radius: 20px; margin: 0 0 30px 0; }
#recom .top .boxwrap .box .text { text-align: center; }
#recom .down img { width: 78px; margin: 60px auto; }
#recom .bottom .boxwrap { display: flex; gap: 20px; margin: 50px 0 0 0; }
#recom .bottom .box { padding: 14px; background: #fff; border-radius: 20px; box-shadow: rgba(149,157,165,0.2) 0px 8px 24px; }
#recom .bottom .box .image img { width: 100%; border-radius: 20px; }
#recom .bottom .box .text { text-align: center; padding: 20px 0; }


#table {  padding: 120px 0;}
#table img {width: 100%;max-width: 910px;margin: 40px auto 0;}

#config { padding: 60px 0 120px 0;}
#config .wrap {  background: #fcfcfe;  border: 1px solid #c4a4ef; border-radius: 20px;  padding: 70px 30px; margin: 40px 0 0 0;}
#config .wrap img {  width: 100%;}

#tabmenu { background:#fafafa; padding:120px 0; }
#tabmenu .menu { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:15px; margin:40px 0 0 0; }
#tabmenu .menu span { background:#fff; height:64px; border-radius:10px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:16px; border:1px solid #DBDBDB; color:#A199B1; cursor:pointer; }
#tabmenu .menu span.on { background:#7839EE; border:1px solid #7839EE; color:#fff; }
#tabmenu .menu span.on:hover {color: #fff;}
#tabmenu .menu span:hover {color: #7839ee;}
#tabmenu .img { display:none; background:#fff; padding:30px; border:1px solid #DBDBDB; border-radius:20px; margin:30px 0 0 0; align-items:center; justify-content:center; }
#tabmenu .img_1 { display:flex; }
#tabmenu .img img { width:90%; }
#tabmenu picture { width:100%; display:flex; align-items:center; justify-content:center; }
#tabmenu .txt { text-align:center; margin:20px 0 0 0; font-size:17px; }
#tabmenu .txt span { font-size:18px; color:#7839EE; margin:0 20px 0 0; }
#tabmenu .txt span br {display: none;}


#card {  padding: 120px 0;}
#card .inner {  max-width: 1000px;}
#card .card {display: flex;align-items: center;gap: 60px;margin: 70px 0 0 0;}
#card .card.reverse { flex-direction: row-reverse; }
#card .card.reverse .card-content {  text-align: right;}
#card .card-content { flex: 1; }
#card .card-title {font-size: 32px;margin-bottom: 30px;color: #1a1a1a;font-family: 'pre_SB';}
#card .card-description {font-size: 22px;color: #4a4a4a;line-height: 1.3;font-family: 'pre_R';}
#card .card-image img {max-width: 460px;height: auto;display: block;width: 100%; border-radius: 20px;}


#function { background:#F4F1F9; padding:120px 0; }
#function .main_title { color:#3D3052; }
#function .iconwrap { display:flex; gap:10px; justify-content:space-between; margin:40px 0 70px 0; }
#function .iconwrap .box { flex:1; background:#fff; padding:24px 0; display:flex; align-items:center; justify-content:center; flex-direction:column; border-radius:14px; }
#function .iconwrap .box img { height:46px; }
#function .iconwrap .box p { color:#3D3052; font-size:16px; margin:14px 0 0 0; font-family:'pre_SB'; }
#function .text { background:#fff; border-radius:10px; padding:50px 30px 30px 30px; position:relative; }
#function .text span { position:absolute; width:200px; height:40px; background:#7839EE; color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; border-radius:8px; top:-20px; left:50%; transform:translateX(-50%); }
#function .text p { padding:0 0 0 11px; font-size:18px; color:#505050; font-family:'pre_R'; line-height:1.3; margin:0 0 4px 0; position:relative; }
#function .text p::before {width: 3px;height: 3px;content:'';display:block;background:#777;position:absolute;top: 7px;left: 0;}


#grow { padding: 120px 0; }
#grow .box_wrap { display: flex; justify-content: space-between; margin: 50px 0 60px 0; gap: 20px; }
#grow .box_wrap .box { background: #F6F7FB; width: calc(33.33% - 13.3px); padding: 50px 40px 40px 40px; border-radius: 30px; }
#grow .box_wrap .box .text { font-size: 16px; line-height: 1.4; color: #222; height: 130px; padding: 0 10px; }
#grow .box_wrap .box .info { margin: 20px 0 0 0; border-top: 1px solid #bbbbbb; padding: 30px 0 0 0; display: flex; gap: 20px; align-items: center; }
#grow .box_wrap .box .info .image { background: #fff; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 12px; }
#grow .box_wrap .box .info .image img { width: 70%; }
#grow .box_wrap .box .info .right p { color: #777; }
#grow .box_wrap .box .info .right .name { font-size: 16px; font-family: 'pre_SB'; margin: 0 0 6px 0; color: #181818; }
#grow  .re_btn {display: flex;align-items: center;justify-content: center;gap: 30px;border: 2px solid #232323;width: max-content;margin: 0 auto;padding: 16px 26px;border-radius: 100px;}
#grow  .re_btn p { font-size: 21px;  font-family: 'pre_SB';}


#step { padding: 60px 0 120px 0; }
#step img.mo {display: none;} 
#step .wrap { display: flex; justify-content: space-between; margin: 50px 0 0 0; }
#step .box { display: flex; flex-direction: column; align-items: center; }
#step .box img { width: 120px; }
#step .box.next img { width: 16px; transform: translateY(49px); }
#step .box .title { margin: 20px 0 7px 0; font-size: 1rem; font-family: 'pre_B'; }
#step .box .text { font-size: 1.1rem; }

@media screen and (max-width:1300px){
    #sub #content {padding: 0}
    #visual {padding: 120px 0;}
    #main_service_cti .inner {padding: 0 20px;}

    #card {padding: 100px 0;}
    #card .inner {max-width: 920px;}
    #card .card {gap: 40px; margin: 80px 0 0;}
    #card .card-image img {max-width: 420px;}

}
@media screen and (max-width:1300px){
    #grow .box_wrap .box .text {height: 150px;}
}
@media screen and (max-width:1030px){
    #function { padding:100px 0; }
    #function .iconwrap { flex-wrap:wrap; justify-content:flex-start; gap:12px; margin:32px 0 56px; }
    #function .iconwrap .box { flex:0 0 calc(25% - 9px); padding:22px 0; }
    #function .text { padding:46px 26px 26px; }
    #function .text span { width:190px; height:38px; font-size:17px; top:-19px; }
    #function .text p { font-size:17px; }
    #function .text p::before { top:7px; }

    #grow .box_wrap .box {padding: 30px}
}
@media screen and (max-width:1000px){
    #main_service_cti  .main_title {font-size: 36px}
    #visual {padding: 110px 0;}

    #card {padding: 90px 0;}
    #card .inner {max-width: 860px;}
    #card .card {gap: 30px; margin: 70px 0 0;}
    #card .card-title {font-size: 28px; margin-bottom: 22px;}
    #card .card-description {font-size: 20px;}
    #card .card-image img {max-width: 380px;}

    #grow .box_wrap .box .text {font-size: 15px;}
}
@media screen and (max-width:900px){
    #tabmenu .img img {width: 100%;}

    #grow .box_wrap {flex-direction: column;        align-items: center;}
    #grow .box_wrap .box {width: 100%; max-width: 400px;}
    #grow .box_wrap .box .text { text-align: center; height: auto;}
    #grow .box_wrap .box .info {justify-content: center;}

    #step img.mo {display: block;width: 100%; max-width: 500px; margin: 40px auto;}
    #step .wrap {display: none;}
}
@media screen and (max-width:800px){
    #main_service_cti  .main_title {font-size:31px}
    #visual {padding: 80px 0;}
    #visual .imagewrap .icon.mouse {width: 7%}
    #visual .imagewrap .icon.icon_1 {bottom: -12%; right: 15%; width: 33%;}
    #visual .imagewrap .icon.icon_2 {width: 30%;  bottom: -5%;}
    #visual .imagewrap .icon.icon_3 {width: 27%;}
    #visual .imagewrap .icon.icon_4 { width: 27%;  top: 16.7%;}
    #visual .imagewrap .icon.icon_5 {width: 26%;}
    #visual .imagewrap .icon.icon_6 { width: 27%;  top: -26px;}    

    #pattern {padding: 60px 0 70px 0;}

    #config .wrap img{width: 100%; max-width: 380px; margin: 0 auto;}

    #card .card-title {font-size: 24px;}
    #card .card-description {font-size: 16px;}

    #tabmenu .menu {gap: 10px;}
    #tabmenu .menu span {font-size: 14px; height: 58px;}
    #tabmenu .img {margin: 20px 0 0 0;}
    #tabmenu .txt span {display: block;}
    #tabmenu .txt span br {display: block;}

    #function { padding:80px 0; }
    #function .iconwrap { gap:10px; margin:26px 0 44px; }
    #function .iconwrap .box { flex:0 0 calc(33.333% - 6.7px); padding:20px 0; border-radius:12px; }
    #function .iconwrap .box img { height:42px; }
    #function .iconwrap .box p { font-size:15px; margin:12px 0 0; }
    #function .text { border-radius:12px; padding:44px 22px 22px; }
    #function .text span { width:180px; height:36px; font-size:16px; top:-18px; }
    #function .text p { font-size:16px; line-height:1.35; padding-left:10px; }
    #function .text p::before { top:7px; }
}
@media screen and (max-width:770px){
    #card {padding: 70px 0;}
    #card .inner {max-width: 92%;}
    #card .card {flex-direction: column; align-items: flex-start; gap: 18px;width: 100%; max-width: 500px; margin: 50px auto;}
    #card .card.reverse {flex-direction: column;} 
    #card .card-content {width: 100%; text-align: center;}
    #card .card.reverse .card-content { text-align: center;}
    #card .card-image {width: 100%;}
    #card .card-image img {max-width: 100%; width: 100%;}
}
@media screen and (max-width:700px){
    #recom {padding: 120px 0;}
    #recom .top .boxwrap {flex-direction: column; gap: 40px; align-items: center;}
    #recom .top .boxwrap .box {width: 100%; max-width: 400px; }
    #recom .bottom .boxwrap {flex-direction: column; gap: 40px; align-items: center;}
    #recom .bottom .boxwrap .box {width: 100%; max-width: 400px; }

    #tabmenu .img img {max-width: 340px; margin: 0 auto;}
}
@media screen and (max-width:600px){
    #main_service_cti  .main_title {font-size:22px}
    #main_service_cti .sub_title {font-size: 16px;}
    #visual .imagewrap .icon.icon_1 {bottom: -16%; right: -1%;  width: 60%;}
    #visual .imagewrap .icon.icon_2 { width: 48%;   bottom: -7%; left: -3%;}
    #visual .imagewrap .icon.icon_3 {width: 47%; left: 22%;}
    #visual .imagewrap .icon.icon_4 {width: 53%;  top: 11.7%; right: -3%;}
    #visual .imagewrap .icon.icon_5 { width: 55%;  left: -1%;  top: 0%;}
    #visual .imagewrap .icon.icon_6 { width: 50%;   top: -19%;   right: 22%; }

    #pattern {padding: 10px 0 70px 0;}
    #pattern .text {font-size: 14px;}
    #pattern .image_wrap {margin: 30px 0; flex-direction: column;}

    #recom {padding: 50px 0;}
    #recom .top .boxwrap {margin: 30px 0 0 0;}

    #table {padding: 50px 0;}

    #config {padding: 50px 0;}
    
    #tabmenu {padding: 50px 0;}
    #tabmenu .menu {grid-template-columns: 1fr 1fr;}
    #tabmenu .txt {font-size: 14px; line-height: 1.4;}

    #card {padding: 50px 0;}
    #card .card {margin: 40px 0 0; gap: 14px;}
    #card .card-title {font-size: 18px; margin-bottom: 14px; line-height: 1.2;}
    #card .card-description {font-size: 15px; line-height: 1.3;}

    #function { padding:50px 0; }
    #function .iconwrap { gap:10px; margin:22px 0 34px; }
    #function .iconwrap .box { flex:0 0 calc(50% - 5px); padding:18px 0; }
    #function .iconwrap .box img { height:38px; }
    #function .iconwrap .box p { font-size:14px; }
    #function .text { padding:40px 18px 18px; }
    #function .text span { width:170px; height:34px; font-size:15px; top:-17px; }
    #function .text p { font-size:15px; margin:0 0 6px; }
    #function .text p::before { top:7px; }
}
@media screen and (max-width:420px){
    /* #function .iconwrap .box { flex:0 0 100%; }
    #function .iconwrap .box { padding:16px 0; }
    #function .text span { width:160px; } */

    #grow {padding: 50px 0;}
    #grow .box_wrap .box {animation-delay: none !important;}

    #step {padding: 60px 0;}
}