@charset "UTF-8";

/*** 서브페이지 공통 CSS ***/

.jump10{ width:10px; display: inline-block;}
.jump50{ width:50px; display: inline-block; vertical-align: baseline;}
.mb80{ margin-bottom:80px !important; }
.mb50{ margin-bottom:50px !important; }
.mb40{ margin-bottom:40px !important; }
.mb30{ margin-bottom:30px !important; }
.mb25{ margin-bottom:25px !important; }
.mb20{ margin-bottom:20px !important; }
.mb15{ margin-bottom:15px !important; }
.al_cen{ text-align: center !important; }
.al_right{ text-align: right !important; }
input[type="submit"]{ cursor: pointer; font-family: 'NotoSansKR', '돋움', Sans-serif; }
.sub_wrap {margin:90px auto 120px; overflow: hidden; background:#fff; }
.sub_wrap.data{ overflow: initial; margin:90px auto 320px; }
.sub_wrap.sky{ background:#f2f7fa;  padding:90px 0 120px; margin: 0  }
.sub_wrap.data_footer{ 
    margin: 0; background:linear-gradient(to right, #31303a,#1c1b22); 
}
.sky{ background:#f2f7fa; }
.sub_wrap.port_view {margin:90px auto 0px; position: relative; z-index: 2;}
.sub_wrap.port_view::after{
    content: '';
    width:100%;
    height:880px;
    background:#edf1f5;
    position: absolute;
    display: block;
    top:440px;
    left:0;
    z-index: -1;
}

.sub_con{ width:1285px; margin: 0 auto; }
    .sub_tit_wrap{ padding: 60px 0 160px; }
/*    .sub_tit_wrap{ padding: 60px 0 120px; }*/
        .sub_tit_wrap h3{
            font-size: 60px; font-weight: 800; color:#000; letter-spacing: -0.5px;
        }
.sub_tab_wrap_scroll{ margin-bottom: 20px; }
    .sub_tab_wrap{
        width:100%;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: flex-start;;
        margin-bottom: 5px;
    }
        .sub_tab_wrap li{
            border-top:1px solid #e5e5e5;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            width:200px;
        }
        .sub_tab_wrap li{ border-right:1px solid #e5e5e5; text-align: center; }
        .sub_tab_wrap li:first-child{ border-left:1px solid #e5e5e5; }
        .sub_tab_wrap li.on{ border:2px solid #009bbb; border-bottom: none; }
        .sub_tab_wrap li.on a{ color:#009bbb }
            .sub_tab_wrap li a{
                font-size:18px;
                font-weight: 800;
                color:#919191 ;
                display: flex;
                align-content: center;
                align-items: center;
                justify-content: center;
                width:100%;
                height:100%;
            }
            .sub_tab.on a{ color:#fff; font-weight: 600; }
    .sub_tit_sub_wrap.member{ position: relative; z-index: 2; }
    .sub_tit_sub_wrap.member::before{
        content: '';
        width:calc(100% - 300px);
        height:20px;
        display: block;
        background:#17a9ca;
        z-index: -1;
        top:-12px;
        position: absolute;
        left:calc(740px - 100%);
    }
    .sub_tit_sub_wrap.member::after{
        content: '';
        width:470px;
        height:230px;
        background:url('/images/sub/member_bg.png')center no-repeat;
        background-size:cover;
        position: absolute;
        top:-208px;
        left:111px;
        display: block;
        z-index: -1;
    }
        .sub_tit_sub_wrap p{
            font-size: 20px;
            font-weight:800 ;
            color:#17a9ca ;
            margin-bottom: 38px;
        }
        .sub_tit_sub_wrap h1{
            font-size: 40px;
            font-weight:800 ;
            color:#000;
            margin-bottom: 60px;
            letter-spacing: -0.5px;
            line-height: 1.6;
            word-break: keep-all;
        }
            .sub_tit_sub_wrap h1 strong{ font-weight:800; vertical-align: baseline;  }
        .sub_tit_sub_wrap h5{
            font-size: 16px;
            font-weight:400 ;
            color:#000;
            letter-spacing: -0.5px;
            line-height: 1.5;
            word-break: keep-all;
        }

/** 텍스트 **/
.normal_txt{
    font-size: 14px;
    font-weight: 1.4;
    color:#333333 ;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.7px;
}
.normal_txt02{ width:96%; margin: 0 auto; }
    .normal_txt strong{ font-weight: 600 }
.black_txt{
    font-size: 15px;
    color:#000 ;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.7px;
}
    .black_txt strong{ font-weight: 800 }

.mention_txt {
    font-size: 36px;
    font-weight: 800;
    color: #000;
    line-height: 1.6;
    letter-spacing: -0.5px;
}
.data_txt {
    font-size: 20px;
    font-weight: 400;
    color: #000;
    line-height: 1.5;
    letter-spacing: -0.5px;
    word-break: keep-all;
}
.data_txt.on{transform: translateX(0); opacity: 1;}
/*
.data_sample_txt{ transform: translateY(-40px); opacity: 0; transition-duration: 0.5s; }
.data_sample_txt.on{ transform: translateY(0px); opacity: 1; }
*/
    .data_sample_txt p{
        font-size: 14px;
        font-weight:400 ;
        line-height: 1.8;
        color:#565656;
        letter-spacing: -0.5px;
        word-break: keep-all;
    }


/****** ABOUT US ******/
.who_cnt_keyword{
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-around;
    width:100%;
    margin: 100px auto;
    position: relative;
    z-index: 2;

}
    .who_cnt_keyword::after{
        content: '';
        width:100vw;
        height: 15px;
        position: absolute;
        z-index: -1;
        left:-0px;
        top:60px;
        background:linear-gradient(to right,#17a9ca 10%,#8400ff 90%);
    }
        .who_cnt_keyword li { text-align: center;  }
            .who_cnt_keyword li h3{
                font-size: 32px;
                font-weight: 800;
                color:#000000;
                margin: 40px auto 25px;
            }
            .who_cnt_keyword li p{
                font-size: 14px;
                font-weight: 300;
                color:#000000;
                line-height: 1.4
            }
  .who_cnt_keyword .slick-arrow {
     z-index: 2;
     width:40px;
     height:30px;
     transform: translate(0,0);
     top:initial;
     bottom: -60px;
  }
/*
  .who_cnt_keyword .slick-prev{
      left:calc(50% - 45px);
      background:url('/images/icon/left_arrow_mint.png')center left no-repeat;
      background-size: cover;
  }
  .who_cnt_keyword .slick-next{
      right:calc(50% - 45px);
      background:url('/images/icon/right_arrow_mint.png')center right no-repeat;
      background-size: cover;
  }
*/

.sub_strong_pnt_wrap{
    height: 570px;
    position: relative;
    width:100%;
    margin-bottom: 300px;
}
    .sub_strong_pnt_bg{
        width:100%;
        height:570px;
        position: absolute;
        top:0;
        background:#323948;
    }
    .sub_strong_pnt{
        margin-left: calc(50% - 600px); top: 50px;
    }
/*
    .sub_strong_pnt::after{
        content: 'OUR STRONG POINT';
        position: absolute;
        right:200px;
        top:5px;
        width:auto;
        font-size: 24px;
        font-weight: 800;
        color:#17a9ca;
        letter-spacing: -0.5px;
        transform:rotate(90deg);
    }
*/
    .sub_strong_pnt .slick-arrow{
        z-index: 2;
        width:42px;
        height:30px;
        top:initial;
        bottom:10px;
        transform: translate(0, 0%);
    }
/*
    .sub_strong_pnt .slick-prev{
        background:url('/images/icon/left_arrow.png')center no-repeat;
        background-size:cover;
    }
    .sub_strong_pnt .slick-next{
        background:url('/images/icon/right_arrow.png')center no-repeat;
        background-size:cover;
        right: initial;
        left:64px;
    }
*/
        .sub_strong_pnt li dl{
            display: flex;
            align-content: flex-start;
            align-items: flex-start;
            justify-content: space-between;
        }
            .sub_strong_pnt_txt{ margin-top: 50px; }
                .sub_strong_pnt_txt h4{
                    font-size: 24px;
                    font-weight: 800;
                    color: #17a9ca;
                    letter-spacing: -0.5px;
                }
                .sub_strong_pnt_txt h5{
                    font-size: 24px; font-weight: 800; color:#17a9ca;
                }
                .sub_strong_pnt_txt h3{
                    font-size: 48px;
                    font-weight: 800;
                    color:#fff;
                    margin: 30px 0 50px;
                    word-break: keep-all;
                }
                .sub_strong_pnt_txt p{
                    font-size: 16px;
                    font-weight: 300;
                    color:#fff;
                    line-height: 1.9;
                    word-break: keep-all;
                }
                    .strong_pnt_cut{ display: block; vertical-align: baseline; }
/*        .sub_strong_pnt_img img{ transform: translateY(50px)}*/
    .mamber_wrap{
        display: flex;
        align-content: flex-start;
        align-items: stretch;
        justify-content: space-between;
        padding-bottom: 10px;
        position: relative;
        z-index: 2;
    }
    .mamber_wrap::after{
      content: 'JAyUROUN';
      font-size: 240px;
      font-weight: 900;
      color:#f7f7f7;
      position: absolute;
      z-index: -1;
      left:360px;
      top:50%;
      transform: translateY(-70%);
    }
        .member_img{
            height:270px;
            display:flex;
            align-items: center;
            align-content: center;
            justify-content: center;
            margin-bottom: 15px;
        }
          .mamber_wrap li h3{
              font-size: 32px; font-weight: 600; color:#000; text-align: center;
          }
            .mamber_wrap li h3 span{
              vertical-align: baseline; color:#17a9ca ; margin-right:3px;
            }

/****** WORK ******/
.work_cnt_keyword{
    display: flex;
    align-content: center;
    align-items: center;
    justify-content:space-between;
    width:100%;
    margin: 80px auto 140px;
    position: relative;
    z-index: 2;
}
    .work_cnt_keyword::after{
        content: '';
        width:100vw;
        height: 12px;
        position: absolute;
        z-index: -1;
        left:-0px;
        top:0px;
        background:linear-gradient(to right,#17a9ca 10%,#8400ff 90%);
    }
        .work_cnt_keyword li {
            text-align: center; position: relative; flex-basis: 185px;
        }
/*        .work_cnt_keyword li.long { flex:130% }*/
        .work_cnt_keyword li::before{
            content: '';
            width:10px;
            height:10px;
            border-radius: 50%;
            background:#fff;
            position: absolute;
            top:1px;
            left:50%;
            transform: translateX(-50%);
        }
        .work_cnt_keyword li:not(:first-child)::after{
            content: '▶';
            font-size:10px;
            color:rgba(255,255,255,0.3);
            position: absolute;
            top:1px;
            left:calc(0% - 5px);
/*            transform: translateX(-50%);*/
        }
            .work_cnt_keyword li h3{
                font-size: 18px;
                font-weight: 800;
                color:#8400ff;
                margin: 35px auto 10px;
            }
            .work_cnt_keyword li p{
                font-size: 18px;
                font-weight: 800;
                color:#000000;
                letter-spacing: -0.8px;
                height:40px;
                word-break: keep-all;
            }
            .work_cnt_keyword li.long p{ width:120%; margin-left: -10%;}
      .work_cnt_keyword .slick-arrow {
         z-index: 2;
         width:20px;
         height:30px;
         transform: translate(0,0);
         top:initial;
         bottom: -60px;
      }
/*
      .work_cnt_keyword .slick-prev{
          left:calc(50% - 45px);
          background:url('/images/icon/left_arrow_mint.png')center left no-repeat;
          background-size: contain;
      }
      .work_cnt_keyword .slick-next{
          right:calc(50% - 45px);
          background:url('/images/icon/right_arrow_mint.png')center right no-repeat;
          background-size: contain;
      }
*/



.sub_tab_cnt{ display: none; opacity: 0; transition-duration: 0.5s; }
.sub_tab_cnt.on{ display: block; }
.sub_tab_cnt.fade{ opacity:1; }
    .sub_field_wrap{  }
        .sub_field_head{
            display: flex;
            align-content: center;
            align-items: center;
            justify-content: flex-start;
            margin: 60px 0;
        }
            .field_img{ width:400px; text-align: center; }
                .field_img img { max-width: 90%; }
                .field_txt h3{
                    font-size: 24px;
                    font-weight: 800;
                    color:#000000;
                    margin-bottom: 10px;
                    word-break: keep-all;
                    line-height: 1.3;
                }
                .field_txt p{
                    font-size: 16px;
                    font-weight: 400;
                    color:#000000;
                    line-height: 1.3;
                    word-break: keep-all;
                    letter-spacing: -0.5px;
                }
    .sub_field_ul{
        display: flex;
        align-content: flex-start;
        align-items: flex-start;
        justify-content: space-between;
    }
        .sub_field_ul li {
            padding: 38px 20px 38px 36px;
            background:#edf1f5;
            flex-basis: 100%;
            margin: 0 10px;
            align-self: stretch;
        }
        .sub_field_ul li:first-child { margin-left: 0; }
        .sub_field_ul li:last-child { margin-right: 0; }
            .sub_field_ul li dt{
                font-size: 20px;
                font-weight: 800;
                color:#000;
                margin-bottom: 20px;
            }
            .sub_field_ul li dd p{
                font-size: 16px;
                font-weight: 400;
                color:#000;
                line-height: 1.9;
                letter-spacing: -0.8px;
                word-break: keep-all;
            }
            .sub_field_ul li dd p.dot{ margin-left: 10px; position: relative;}
            .sub_field_ul li dd p.dot::before{
                position: absolute;
                content: '';
                width:4px;
                height:4px;
                border-radius: 50%;
                background:#000;
                position: absolute;
                left:-10px;
                top:15px;
            }
.sub_img_field { margin:60px auto 160px; }
.sub_img_field img{ width:100%; }
.naviBg{
    background:#323948;
    padding:75px 0;
    margin-bottom: 250px;
}
    .naviBg_cnt{
        position:relative
    }
        .naviBg_cnt p{
            font-size:16px;
            font-weight: 400;
            color:#ffffff;
            line-height: 1.5;
            word-break: keep-all
        }
        .cmsImg{
            position:absolute;
            right:40px;
            top:50%;
            transform: translateY(-57%)
        }

/****** PORTFOLIO ******/
.sub_port_list{
    display: flex;
    align-content: flex-start;
    align-items: center;
    justify-content: flex-start;
    width:100%;
    flex-wrap: wrap;
    min-height: 500px;
}
.sub_port_list li:nth-child(1){display: none;}  
.sub_port_list .swiper-slide{ margin: 0 0 7px 0; }
.sub_port_list .swiper-slide:not(:nth-child(3n+1)){  margin-right: 7px;}

/****** PORTFOLIO 상세 ******/
.port_view_bg{
    width:100%;
    height:86vh;
    position: fixed;
    z-index: -1;
    bottom:3vh;
    left:0;
    background-size:cover;
}
    .port_view_banner{
        width:100%;
        height:600px;
        margin-top: 60px;
        display: flex;
        align-content: stretch;
        align-items: flex-end;
        justify-content: flex-start;
        padding: 50px;
        box-sizing: border-box;
        position: relative;
        z-index: 2;
    }

            .port_view_banner_cnt h5{
                font-size: 15px; font-weight:800; color:#fff; letter-spacing: -0.2px;
            }
            .port_view_banner_cnt h3{
                font-size: 40px;
                font-weight:800;
                color:#fff;
                letter-spacing: -0.5px;
                margin:15px 0 36px;
            }
            .port_view_banner_cnt p{
                font-size: 16px;
                font-weight:400;
                color:#fff;
                line-height: 1.8;
                word-break: keep-all;
            }
            .port_link{
                font-size: 16px;
                font-weight: 800;
                color:#fff;
                margin-top: 70px;
                display: block;
            }
                .port_link span{
                    display: inline-block;
                    width:18px;
                    height:18px;
                    background:url('/images/icon/port_link.png')center no-repeat;
                    background-size:cover;
                    margin-right: 10px;
                    position: relative;
                }
                .port_link span::after{
                    content: '';
                    width:18px;
                    height:18px;
                    background:url('/images/icon/port_link_arrow.png')center no-repeat;
                    background-size:cover;
                    position: absolute;
                    right:0;
                    top:0;
                }
                .port_link:hover span::after{
                    transform: translate(5px,-5px);


                    transition-duration: 0.5s;
                }
        .port_main_view{ display: block; margin: 80px auto;}
        .port_main_view.letsbee{ margin: 80px auto 0px; }
    .port_app_cnt{
        background:#fff;
        padding-top: 100px;
        text-align: center;
    }
        .port_app_cnt img { max-width: 100%; }
    .port_letsbee_graphy{
        width:100%;
        height:110vh;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
       background:url('/images/port/port_graphy_letsbee_bg.jpg')center no-repeat;
        background-size:cover;
    }
        .port_letsbee_graphy img{  }

/****** CONTACT US ******/
.sub_contact_wrap{
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: center;
}
    .sub_contact_cnt{ width:560px; }
        .contact_table{ text-align: left; width:100%; }
            .contact_table th{
                font-size: 14px;
                font-weight: 600;
                color:#000;
                padding: 15px 0 10px;
            }
        .contact_table_sub{ font-size: 14px; margin-top: 10px}
          .must_input{ color:#d43c3c; vertical-align: bottom;}
        .contact_btn{
            display: flex;
            align-content: flex-end;
            align-items: flex-end;
            justify-content: space-between;
        }
            .contact_agree_box{
                display: flex;
                align-content: center;
                align-items: center;
                justify-content: space-between;
                height:36px;
            }
        .view_infor_btn{
/*            margin-left: 10px;*/
            font-size: 14px;
            color:#a4a4a4;
            border-bottom: 1px solid #a4a4a4;
            padding-bottom: 1px;
            display: block;
            width:80px;
            text-align: center;
        }
        .port_gap{  height:70vh; }


/****** 데이터 바우처 / ai ******/
.data_banner{
    width: 100%;
    height: 360px;
    background:url(/images/sub/data_banner.jpg)center no-repeat;
    background-size:cover;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center        
}
    .data_banner_cnt{ text-align: center; }
        .data_banner_cnt h3{
            font-size: 64px; 
            font-weight: 900; 
            color:#fff; 
            margin-bottom: 30px;
            transform: translateY(-30px);
            transition-duration: 0.5s;
            opacity: 0;
        }
        .data_banner_cnt.on h3{ 
            transform: translateY(-0px); opacity: 1;
        }
        .data_banner_cnt p{
            font-size: 28px; 
            font-weight: 200; 
            color:#fff; 
            transform: translateY(30px);
            transition-duration: 0.5s;
            opacity: 0;
            word-break: keep-all;
            line-height: 1.2;
        }
        .data_banner_cnt.on p{ transform: translateY(0px); opacity: 1; }
            .data_banner_cnt p span{
                vertical-align: baseline; 
                font-weight: 900; 
                background:#25a9ca;
                display: inline-block;
                padding: 3px;
            }
    .data_banner_cnt_line{
        display: flex;
        align-items:center;
        justify-content: flex-start;
        font-size:50px;
        font-weight: 100;
        width:900px;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
        color:#fff;
        margin-bottom: 15px;
    }
    .data_banner_cnt_line h4{
        font-size:50px;
        font-weight: 600;
        color:#fff;
    }

.label_txt{
    font-weight: 900; 
    vertical-align: baseline; 
    position: relative;
    display: inline-block;
    z-index: 2;
}
    .label_txt::after{
        content: '';
        width:100%;
        height:50%;
        position: absolute;
        background:#9ad7e7;
        top:50%;
        left:0;
        transform:translateY(-50%);
        z-index: -1;
    }

.data_intro_ul{ 
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: space-between;
    width:1000px;
    padding: 0 40px;
    box-sizing: border-box;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.data_intro_ul::after{
    content: '';
    width:100%;
    height:40px;
    background:url('/images/sub/data_intro_ul_bg.png')top no-repeat;
    background-size:contain;
    position: absolute;
    bottom:-40px;
    left:0%;
}
.data_intro_ul::before{
    content: 'OR';
    font-size: 100px;
    font-weight:900 ;
    color:#eeeeee ;
    position: absolute;
    left:50%;
    top:60%;
    transform: translate(-50%,-50%);
    text-align: center;
    z-index: -1;
}
    .data_intro_ul li{
        display: flex;
        align-content:flex-end;
        align-items:flex-end;
        flex-direction: column;
        justify-content:space-between;
        height:400px;
        flex-basis: 40%;
    }
        .data_intro_ul li dt{
            width:80px;
            height:80px;
            border-radius: 50%;
            background: #25a9ca;
            display: flex;
            align-content: center;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 900;
            color:#fff;
            margin: 0 auto;
            
        }
        .data_intro_ul li dd{ text-align: center; width:100%; }
            .data_intro_ul li dd h3{
                font-size: 20px;
                font-weight: 200;
                color:#000;
                line-height: 1.5;
                word-break: keep-all;
            }
                .data_intro_ul li dd h3 span{
                    font-weight: 900; vertical-align: baseline;
                }
    .data_intro_sec h2 {
        font-size: 30px;
        font-weight: 200;
        color:#000;
        text-align: center;
        margin: 70px auto 140px;
        line-height: 1.4;
        word-break: keep-all;
    }
        
.data_con{ width:900px; margin: 0 auto; }
.data_tit{ position: relative; margin-bottom: 35px}
    .data_tit strong{
        font-size: 100px;
        font-weight:600 ;
        color:#25a9ca;
        vertical-align: baseline;
        letter-spacing: -10px;
        font-family: 'NanumSquare', sans-serif !important;
        position: absolute;
        left:-130px;
        bottom:-20px;
    }
    .data_tit span{
        font-size: 48px;
        font-weight:900 ;
        color:#000;
        vertical-align: baseline;
        display: inline-block;
    }
.data_chk_tit{ margin: 90px 0 40px; }
    .data_chk_tit h3 {  
        font-size: 36px; 
        font-weight: 600; 
        color:#000;
        position: relative;
        margin-left: 50px;
    }
        .data_chk_tit h3::after { 
            content: '';
            width:38px;
            height:36px;
            background:url('/images/icon/data_chk_icon.png')center no-repeat;
            background-size:cover;
            position: absolute;
            left:-50px;
            top:50%;
            transform: translateY(-50%);
        }
.data_tit_sub{
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 15px;
}
.data_tit_sub.mb{ margin-bottom: 40px; }
    .data_tit_sub strong{ 
        width:36px;
        height: 36px;
        border-radius: 50%;
        background:#25a9ca ;
        font-size: 20px;
        font-weight: 900;
        color:#fff;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        vertical-align: baseline;
    }
    .data_tit_sub span{ 
        font-size: 26px;
        font-weight: 600;
        color:#000;
        margin-left: 10px;
        vertical-align: baseline;
    }    
    .data_sec01_graphy01{
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: flex-end;
        margin-top: 60px;   
        transition-duration: 0.7;
        
    }
        .data_sec01_txt{
            padding:30px 40px; 
            background:#ebf3f7 ; 
            border-radius: 30px;
            width:670px;
            box-sizing: border-box;
            margin-right: 20px;
            margin-bottom: 50px;
            position: relative;
            opacity: 0;
            
            transform: translateX(-40px);
        }
        .data_sec01_graphy01.on .data_sec01_txt{ 
            opacity: 1; transform: translateX(0px); transition-duration: 0.7s;
        }
        .data_sec01_txt::after{
            content: '';
            width:36px;
            height:20px;
            position: absolute;
            right:10px;;
            bottom:-15px;
            background:url('/images/sub/data_sec01_txt_tail.png')center no-repeat;
            
        }
            .data_sec01_txt p{
                font-size: 22px;
                font-weight: 400;
                color:#000 ;
                line-height: 1.6;
                letter-spacing: -0.5px;
            }
            .data_sec01_txt h5{
                font-size:16px;
                font-weight: 200;
                color:#000;
                text-align: right;
                margin-top: 25px;
                word-break: keep-all;
                line-height: 1.3;
            }
                .data_sec01_txt h5 span{ 
                    font-weight: 600; vertical-align: baseline; position: relative; z-index: 2;
                }
.data_sec01_graphy02{ margin-bottom: 70px; }
    .data_sec01_graphy02_site{
        display: flex;
        align-content: flex-start;
        align-items: flex-start;
        justify-content: space-between;
        width:880px;
        margin: 0 auto 120px;
        position: relative;
    }
    .data_sec01_graphy02_site02{ margin: 80px auto 120px; }
    .data_sec01_graphy02_site::after{
        content: '';
        width: calc(100% - 190px);
        height:8px;
        background:#eaeaea;
        position: absolute;
        bottom:-80px;
        left:50%;
        transform: translateX(-50%);
    }
        .data_sec01_graphy02_site li{ 
            position: relative; opacity: 0; transition-duration: 0.5s;
        }
        .data_sec01_graphy02_site.on li { opacity: 1; }
        .data_sec01_graphy02_site li:nth-child(1){ transition-delay: 0.1s; }
        .data_sec01_graphy02_site li:nth-child(2){ transition-delay: 0.2s; }
        .data_sec01_graphy02_site li:nth-child(3){ transition-delay: 0.3s; }
        .data_sec01_graphy02_site li:nth-child(4){ transition-delay: 0.4s; }
        .data_sec01_graphy02_site li::after{ 
            content: '';
            width:8px;
            height:32px;
            background:#eaeaea;
            position: absolute;
            bottom:-60px;
            left:50%;
            transform: translateX(-50%);
        }
        .data_sec01_graphy02_site li::before{ 
            content: '';
            width:20px;
            height:26px;
            position: absolute;
            bottom:-80px;
            transform: translateX(-50%);
            box-sizing: border-box;
        }
        .data_sec01_graphy02_site li:nth-child(1)::before, .data_sec01_graphy02_site li:nth-child(2)::before{
            left:calc(50% + 7px);
            border-bottom:8px solid #eaeaea;
            border-left:8px solid #eaeaea;
            border-bottom-left-radius: 20px;
        }
        .data_sec01_graphy02_site li:nth-child(3)::before, .data_sec01_graphy02_site li:nth-child(4)::before{
            right:calc(50% - 14px);
            border-bottom:8px solid #eaeaea;
            border-right:8px solid #eaeaea;
            border-bottom-right-radius: 20px;
        }
            .data_sec01_graphy02_site li dd{
                font-size: 18px;
                font-weight: 400;
                color:#333333;
                text-align: center;
                margin-top: 15px;
                word-break: keep-all;
                line-height: 1.3;
            }
        .data_sec01_graphy02_arrow{ 
            margin: 0 auto 0; 
            width:30px;
            height:24px;
            background: url(/images/sub/data_sec01_graphy02_arrow.png)center no-repeat;
            background-size: cover;
            position: relative;
        }
        .data_sec01_graphy02_arrow::before{
            content: '';
            width:8px;
            height:40px;
            background:#eaeaea;
            position: absolute;
            top:-40px;
            left:50%;
            transform: translateX(-50%);
        }
.data_sec01_graphy02_mid_tit{
    font-size: 24px;
    font-weight: 400;
    color:#000; 
    line-height: 1.6;
    text-align: center;
    margin: 30px auto;
    position: relative;
    z-index: 2;
    word-break: keep-all;
}
    .data_sec01_graphy02_mid_tit::before{
        content: '';
        width:105px;
        height: 140px;
        background:url('/images/sub/money01.png')center no-repeat;
        background-size: contain;
        position: absolute;
        left:calc(50% - 350px);
        top:-10px;
        z-index: -1;
    }
    .data_sec01_graphy02_mid_tit::after{
        content: '';
        width:150px;
        height: 180px;
        background:url('/images/sub/money02.png')center no-repeat;
        background-size: contain;
        position: absolute;
        right:calc(50% - 320px);
        top:-80px;
        z-index: -1;
    }
    .data_sec01_graphy02_mid_tit02 .c_purple{ 
        font-weight: 900; color:#8201ff; vertical-align: baseline;
    }
    .data_sec01_graphy02_mid_tit02::before{
        background:url('/images/sub/dia01.png')center no-repeat;
        background-size: contain;
        top:-50px;
        left:calc(50% - 300px);
    }
    .data_sec01_graphy02_mid_tit02::after{
        background:url('/images/sub/dia02.png')center no-repeat;
        background-size: contain;
        width:200px;
        right:calc(50% - 310px);
        top:-60px;
    }
.data_sec01_graphy03_wrap{ margin-top: 80px; }
.data_sec01_graphy03{
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
}
    .data_sec01_graphy03 li{ 
        position: relative; 
        width:49.5%; 
        height:320px;
        background:#edf5f9; 
        border-radius: 10px;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
    }
        .chart_graphy_tit{
           font-size: 14px;
           font-weight: 600;
           color:#000;
           margin-bottom: 20px;
           text-align: center;
        }
/*
    .data_sec01_graphy03 li::after{
        content: '';
        display: block;
        width:100%;
        height:100%;
        position: absolute;
        left:0;
        top:0;
        background:#edf5f9;
        transition-duration: 0.5s;
    }
*/
/*    .data_sec01_graphy03.on li::after{ background:none; }*/
     .highcharts-figure{ width:100%; }
        .highcharts-container { width:70% !important; height:320px !important;  margin: 0 auto;}
           .data_sec01_graphy03 .highcharts-root { 
               margin: 0 auto; width:100% !important; height:320px !important;
           }
                .highcharts-background{ fill:none !important; }
                    .highcharts-series-group{ width:220px !important; }
                        .highcharts{ width:220px !important; }
        .highcharts-exporting-group{ display: none; }
        .highcharts-label.highcharts-data-label.highcharts-data-label-color-0 { 
            transform:translate(60%,20%) !important;  
        }
        .highcharts-label.highcharts-data-label.highcharts-data-label-color-1 { 
            transform:translate(60%,55%) !important;  
        }
        .highcharts-label.highcharts-data-label.highcharts-data-label-color-2 { 
            transform:translate(30%,35%) !important;  
        }

        .highcharts-tracker text{  }
        .highcharts-text-outline{ display: none !important;}  
        .highcharts-credits{ display: none !important;}  
            .highcharts-tracker text tspan{ 
                stroke: none !important; 
                text-align: center !important; 
                margin: 0 auto !important;
                font-size:12px !important; 
                font-family: 'NotoSansKR', '돋움', Sans-serif !important;
            }
            .highcharts-tracker text tspan:nth-child(5) { font-size:9px !important;  }
            .highcharts-tracker text tspan:last-child { font-size:16px !important; margin-top: 20px !important;   }
        .highcharts-title{
             font-size:22px !important; 
             font-weight:600 !important; 
             font-family: 'NotoSansKR', '돋움', Sans-serif !important;
        }
.data_sec01_graphy04_wrap{ margin-top: 10px; }
    .data_sec01_graphy04{ 
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: space-around;
        padding: 30px 40px 50px;
        background: #edf5f9;
    }
        .bar_graphy_wrap{}
           .bar_graphy_tit{
                font-size: 14px;
                font-weight: 600;
                color:#000;
                margin-bottom: 40px;
               text-align: center;
           }
           .bar_graphy_cnt ul{
                display: flex;
                align-content: flex-end;
                align-items: flex-end;
                justify-content: space-around;
                width:194px;
                height:120px;
                border-left:1px solid #dddddd;
                border-bottom:1px solid #dddddd;
                margin: 0 auto;
                position: relative;
            }
            .bar_graphy_cnt ul::before{
                font-size:12px;
                color:#000;
                position: absolute;
                left:-20px;
                top:0;
            }
            .bar_graphy_cnt01 ul::before{ content: '%'; }
            .bar_graphy_cnt02 ul::before{ content: '명'; }
            .bar_graphy_cnt03 ul::before{ content: '%'; }
                .graphy_bar { 
                    width:18px;
                    position: relative;
                    border-top-left-radius: 4px;
                    border-top-right-radius: 4px;
                    transition-duration: 0.5s;
                }    
                .google_bar{ background:#b8bcf7 }
                .naver_bar{ background:#9ddcea }
                .sns_bar{ background:#d8c0f0 }
                .graphy_bar strong{ 
                    display: block;
                    border-top-left-radius: 4px;
                    border-top-right-radius: 4px;
                    position: absolute;
                    height: 100%;
                    width:100%;
                    bottom:0;
                }
                .bar_graphy_cnt03 .google_bar strong{  height:63%; border-radius: 0; }
                .bar_graphy_cnt03 .naver_bar strong{  height:82%; border-radius: 0; }
                .bar_graphy_cnt03 .sns_bar strong{  height:52%; border-radius: 0; }
                .google_bar strong{ background:#4c56e3; }
                .naver_bar strong{ background:#19a8c9; }
                .sns_bar strong{ background:#8201ff; }
                
                    .graphy_bar span{
                        font-size:11px; 
                        position: absolute; 
                        top:-15px;
                        left: 50%;
                        transform: translateX(-50%);
                        width:30px;
                        display: block;
                        text-align: center;
                    }
                    .google_bar span{ color:#4c56e3; }
                    .naver_bar span{ color:#19a8c9; }
                    .sns_bar span{ color:#8201ff; }
                .graphy_bar::after{
                    font-size: 12px;
                    position: absolute;
                    text-align: center;
                    left:50%;
                    bottom:-20px;
                    transform: translateX(-50%);
                }
                .google_bar::after{ content: 'Google' }
                .naver_bar::after{ content: 'Naver' }
                .sns_bar::after{ content: 'SNS' }
    .data_cms_img_wrap{
        width:100%;
        height:370px;
        position: relative;
        margin-top: 40px;
    }
        .cms_bg{ 
            width:100%; 
            position: absolute; 
            top:0; 
            left:0; 
            opacity: 0; 
            transition-duration: 0.5s;
            transform: translateY(-40px);
        }
        .data_cms_img_wrap.on .cms_bg { transform: translateY(0px); opacity: 1; }
            .cms_pop{ 
                 position: absolute; 
                 top:215px; 
                 left:60%; 
                 transform: translate(-50%,-40px);
                 z-index: 2;
                 display: block;
                 opacity: 0; 
                 transition-duration: 0.5s;
             }
            .cms_pop img{ 
                width:100%; 
                border: 4px solid rgba(162,225,241,0.4); 
                box-sizing: border-box;
                border-radius: 8px;
            }
            .data_cms_img_wrap.on .cms_pop{  transform: translate(-50%,0px); opacity: 1; transition-delay: 0.2s; }
        .cms_pop::before{
            content: '';
            position: absolute;
            left:0;
            top:-19px;
            z-index: 2;
            width:100%;
            height:20px;
            background:url(/images/sub/cms_pop_tail.png)center no-repeat;
            background-size:cover;
        }
.data_sample_graphy01_wrap{ margin-bottom: 70px; }
    .data_sample_graphy01_top{
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 50px auto 70px;
    }
    .data_sample_graphy01_top::after{
        content: '';
        width: 220px;
        height:8px;
        background:#eaeaea;
        position: absolute;
        bottom:-36px;
        left:50%;
        transform: translate(-50%);
    }
        .data_sample_graphy01_top li {
            width:240px;
            height:240px;
            background:#2f3374 ;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            align-content: center;
            align-items: center;
            justify-content: center;
            margin: 0 5px;
            position: relative;
        }
        .data_sample_graphy01_top li::before{ 
            content: '';
            width:20px;
            height:26px;
            position: absolute;
            bottom:-36px;
            transform: translateX(-50%);
        }
        .data_sample_graphy01_top li:nth-child(1)::before{
            left:calc(50% + 10px);
            border-bottom:8px solid #eaeaea;
            border-left:8px solid #eaeaea;
            border-bottom-left-radius: 20px;
        }
        .data_sample_graphy01_top li:nth-child(2)::before{
            right:calc(50% - 18px);
            border-bottom:8px solid #eaeaea;
            border-right:8px solid #eaeaea;
            border-bottom-right-radius: 20px;
        }
            .data_sample_graphy01_top li dt{
                font-size:16px;
                font-weight:800;
                color:#fff;
                text-align: center;
                margin-bottom: 20px;
            }
            .data_sample_graphy01_top li dd{
                position: relative; width:140px; height: 130px;
            }
                .data_sample_graphy01_top li dd p{
                    border-radius: 50%;
                    width: 80px;
                    height: 80px;
                    font-size: 12px;
                    font-weight:400;
                    color: #fff;
                    display: flex;
                    align-content: center;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    background:rgba(94,102,232,0.4); 
                }
                .data_sample_graphy01_top li dd p:nth-child(1){
                    top:0; left:50%; transform: translateX(-50%);
                }
                .data_sample_graphy01_top li dd p:nth-child(2){ bottom:0; left:0%; }
                .data_sample_graphy01_top li dd p:nth-child(3){ bottom:0; right:0%; }
    .data_sample_graphy01_arrow{ 
        margin: 0 auto 0; 
        width:30px;
        height:24px;
        background: url(/images/sub/data_sec01_graphy02_arrow.png)center no-repeat;
        background-size: cover;
        position: relative;
    }
    .data_sample_graphy01_arrow::before{
        content: '';
        width:8px;
        height:40px;
        background:#eaeaea;
        position: absolute;
        top:-40px;
        left:50%;
        transform: translateX(-50%);
    }
    .data_sample_graphy01_bottom{ 
        width:490px;
        height:65px;
        background:#5d66e6;
        border-radius: 20px;
        margin: 0 auto;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 800;
        color:#fff;
    }
.data_sample_graphy02_wrap{ 
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin: 40px auto 70px;
}
    .data_sample_graphy02_wrap img{  margin: 0 15px; }
.data_footer_cnt { 
    display: flex; 
    justify-content: flex-end; 
    flex-direction: column;
   max-height: 100vh;
}
    .data_footer_txt{ text-align: center; margin:80px auto 60px;}
        .data_footer_txt h3{
            font-size: 48px;
            font-weight: 800;
            color:#fff;
            letter-spacing: -0.8px;
        }
            .data_footer_txt p{
                font-size: 20px;
                font-weight: 400;
                color:#fff;
                letter-spacing: -0.8px;
                margin: 40px auto 10px;
            }
            .data_footer_txt a{
                font-size: 20px;
                font-weight: 800;
                color:#18a9ca;
                letter-spacing: -0.8px;
            }

.ai_cost_table_wrap{width:100%; position: relative;} 
.ai_cost_table_wrap::after {
    content: '';
    width: 150px;
    height: 180px;
    background: url(/images/sub/money02.png)center no-repeat;
    background-size: contain;
    position: absolute;
    right: -50px;
    top: -80px;
    z-index: 1;
}
.ai_cost_table_wrap::before {
    content: '';
    width: 105px;
    height: 140px;
    background: url(/images/sub/money01.png)center no-repeat;
    background-size: contain;
    position: absolute;
    left: -40px;
    bottom: -50px;
    z-index: 1;
}
    .ai_cost_table{width:100%;}
        .ai_cost_table tr th div{
            background:#24a5c2;
            padding: 15px 0;
            font-weight: 600;
            font-size: 18px;
            border-radius: 2px;
            margin: 1px;   
            color:#fff;
        }
        .ai_cost_table tr td {
            background:#edf5f9;
            text-align: center;
            font-size:16px;
            letter-spacing: -0.5px;
            padding: 30px 0;
            border-radius: 4px;
            margin: 2px; 
            line-height: 1.5;
            height:100%;
            word-break: keep-all;
        }
        .ai_cost_table tr td:not(:last-child) { border-right:2px solid #fff;  }
            .ai_cost_table tr td div .c_purple{
                font-size:20px; 
                font-weight: 600; 
                color:#8201ff;
                margin-top: 10px;
            }
        

.data_footer_img{ 
    width:540px; height:400px; position: relative; margin: 0 auto; 
}
    .mock_up_cnt{ 
        position: absolute;
        top:18px; 
        left:50%; 
        transform: translate(-50%,-30px);
        z-index: 2; 
        transition-duration: 0.5s;
        transition-delay: 0.3s;
        opacity: 0;
    }
    .mock_up_bg{ 
        position: absolute; 
        top:0px; 
        left:50%; 
        transform: translate(-30%,-0%); 
        transition-duration: 0.5s;
        opacity: 0;
    }
.data_footer_img.on .mock_up_cnt{
    opacity: 1; transform: translate(-50%,0px);
}
.data_footer_img.on .mock_up_bg{
    opacity: 1; transform: translate(-50%,0px);
}
.wantsType--tit{
    font-size:40px;
    font-weight:900;
    color:#000;
    text-align: center;
    position: relative;
    margin:60px auto;
    z-index: 2;
}
.wantsType--tit img{
    position: absolute;
    z-index: -1;
    left: calc(50% - 235px);
    top:-30px;
}
.wantsType--list{
    display: flex;
    align-items:flex-start;
    justify-content: center;
    gap:65px;
}

.wantsType--list li{
    width:240px;
}
.wantsType--item--tag{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:8px;
    margin:30px auto 20px;
}
.wantsType--item--tag span{
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    color:#fff;
    font-size:16px;
    font-weight:700;
    border-radius:4px;
}
.wantsType--item--txt{
    text-align: center;
    font-size:24px;
    letter-spacing: -1px;
    word-break: keep-all;
    line-height: 1.3;
}
.wantsBand{
    display: flex;
    align-content: center;
    justify-content: center;
    padding:15px 0;
    background:#17a9ca;
    gap:20px;
    margin:60px 0;
}
.wantsBand_des{
    padding:10px 12px;
    border:2px solid #fff;
    border-radius: 4px;
    box-sizing: border-box;
    font-size:16px;
    font-weight: 500;
    color:#fff;
}
.wantsBand h3{
    font-size:30px;
    line-height: 1;
    font-weight: 600;
    color:#fff;
    vertical-align: baseline;
}
.wantsBand h3 span{
    font-size:30px;
    line-height: 1;
    font-weight: 600;
    color:#dfff0a;
    vertical-align: baseline;
}
.wantList{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap:60px 0;
}
.wantList li{
    padding-left: 20px;
    box-sizing: border-box;
    
}
.wantList li:not(:last-child){
    width:50%;
}
.wantList li:last-child){
    width:100%;
}
.wantList li h3{
    font-size:25px;
    line-height: 1;
    font-weight: 900;
    color:#000;
    margin-bottom: 25px;
    position: relative
}
.wantList li h3::before{
    content: '';
    width:8px;
    height:25px;
    background: url('/images/wantsDes.png') no-repeat;
    background-size: cover;
    position: absolute;
    left:-20px;
    top:2px;
    display: block;
    
}
.wantList li p{
   font-size:18px;
   font-weight: 400;
   line-height: 1.5;
   color: #222222;
 
}
.wantList li p a{
   font-size:18px;
   font-weight: 400;
   line-height: 1.5;
   color: #222222;
}
.wantItem--cnt{}
.wantItem--cnt dl{
    margin-top: 30px;
}
.wantItem--cnt dt{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap:18px;
    font-size:22px;
    color: #222222;
    font-weight: 500;
    margin-bottom: 20px;
}
.wantItem--cnt dt span{
    display: flex;
    align-items: center;
    justify-content: center;
    width:34px;
    height: 34px;
    background:#000;
    font-size: 16px;
    color:#fff;
    border-radius: 4px;
}
.wantItem--cnt dd{
   font-size:18px;
   font-weight: 400;
   line-height: 1.8;
   color: #222222;
    padding-left: 12px;
    box-sizing: border-box;
    position: relative;

}
.wantItem--cnt2 dd{
    margin-left: 55px;
}
.wantItem--cnt dd::before{
   content:'•';
   font-size:18px;
   font-weight: 400;
   line-height: 1.8;
   color: #222222;
   left:-10px;
   top:0px;
    position: absolute;
}